/* estilos.css · Aivor Sala y Control Tower. Regla de diseño de Daniel (20 sep 2026), ver docs/DISENO.md.
   Un solo tema claro · colores de marca · radios 6 y 8 · cero sombras (el relieve es un filete de 1 px) ·
   controles de 32 px · foco azul de 2 px · una sola familia sans (Inter autoalojada) · cifras tabulares ·
   columna de pestañas a la izquierda que en el teléfono pasa a tira horizontal y nunca desaparece.
   Desde el 8 oct 2026 la columna es azul marino de marca (pedido de Daniel: que se note la diferencia entre las pestañas
   y el contenido); la pestaña activa va en azul con texto blanco. */

@font-face {
  font-family: 'Inter Aivor';
  src: url('/assets/fonts/Inter-Aivor.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --navy: #0b1437;
  --azul: #1a52e5;
  --azul-oscuro: #1443c2;
  --verde: #3ad17a;
  --superficie: #ffffff;
  --fondo: #f7f7f8;
  --filete: #e8e8ea;
  --filete-fuerte: #d3d5db;
  --ambar: #b7791f;
  --rojo: #c53030;
  --gris: #6b7280;
  --texto: #0b1437;
  --texto-2: #444c66;
  --tinte-azul: #edf2fd;
  --tinte-verde: #e8f8ef;
  --tinte-ambar: #fbf2e4;
  --tinte-rojo: #fbecec;
  --tinte-gris: #f1f2f4;
  --r6: 6px;
  --r8: 8px;
  --control: 32px;
  --sans: 'Inter Aivor', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 400 14px/1.5 var(--sans);
  font-feature-settings: 'cv11', 'ss01';
}
h1, h2, h3, p { margin: 0; }
h1 { font-size: 20px; line-height: 28px; font-weight: 650; letter-spacing: -0.01em; }
h2 { font-size: 15px; line-height: 22px; font-weight: 600; }
h3 { font-size: 14px; font-weight: 600; }
a { color: var(--azul); text-underline-offset: 2px; }
a:hover { color: var(--azul-oscuro); }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--tinte-azul); }
img { display: block; max-width: 100%; }

.num, .cifra, td.num, .tabular { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0; }
.tenue { color: var(--texto-2); }
.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.saltar {
  position: absolute; left: 12px; top: -48px; z-index: 50; background: var(--navy); color: #fff;
  padding: 6px 12px; border-radius: var(--r6); text-decoration: none;
}
.saltar:focus { top: 12px; color: #fff; }

/* ── Marco: columna de pestañas + lienzo ─────────────────────────────────── */
.marco {
  display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh;
  /* la columna blanca y su filete llegan hasta el final aunque la página sea más alta que la ventana */
  background: linear-gradient(90deg, var(--navy) 0, var(--navy) 236px, var(--fondo) 236px);
}
.pestanas {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--navy); border-right: 1px solid var(--navy);
  padding: 16px 12px; display: flex; flex-direction: column; gap: 18px;
}
.emblema { display: flex; flex-direction: column; gap: 6px; padding: 2px 8px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.emblema a { display: inline-flex; width: max-content; border-radius: var(--r6); }
.emblema img { width: 96px; height: 32px; filter: brightness(0) invert(1); }
.emblema .producto { font-size: 12px; font-weight: 500; color: #c3c9dc; letter-spacing: 0.02em; }
.grupo-titulo {
  margin: 0 8px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #a9b0c8;
}
.grupo ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.grupo a {
  position: relative; display: flex; align-items: center; min-height: var(--control); padding: 0 10px;
  border-radius: var(--r6); color: #d6dbea; text-decoration: none; font-weight: 500;
}
.grupo a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.grupo a[aria-current='page'] { background: var(--azul); color: #fff; }
.grupo a[aria-current='page']::before {
  content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px; border-radius: 2px; background: #fff;
}
.pestanas :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nav-pie { margin-top: auto; padding: 12px 8px 0; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
.nav-pie a { color: #c3c9dc; }

.lienzo { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.barra {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 24px; background: var(--superficie); border-bottom: 1px solid var(--filete);
}
.barra-proyecto { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.barra-proyecto .codigo { font-family: var(--mono); font-size: 12.5px; color: var(--texto-2); }
.barra-usuario { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.boton-ojo { display: inline-flex; align-items: center; gap: 6px; }
.barra-usuario .quien { font-size: 13px; color: var(--texto-2); }
main { padding: 24px; width: 100%; max-width: 1200px; flex: 1; }
main:focus { outline: none; }
.pie {
  padding: 16px 24px 24px; font-size: 12px; color: var(--texto-2); display: flex; gap: 6px 14px; flex-wrap: wrap;
  border-top: 1px solid var(--filete); background: var(--superficie);
}
.pie a { color: var(--texto-2); }

@media (max-width: 760px) {
  .marco { display: block; background: var(--fondo); }
  .pestanas {
    z-index: 20; height: auto; flex-direction: row; align-items: center; gap: 14px;
    overflow-x: auto; overflow-y: hidden; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--navy);
    scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  }
  .emblema { flex: none; flex-direction: row; align-items: center; padding: 0 4px 0 0; border-bottom: 0; }
  .emblema img { width: 72px; height: 24px; }
  .emblema .producto { display: none; }
  .grupo { flex: none; display: flex; align-items: center; }
  .grupo-titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .grupo ul { flex-direction: row; gap: 4px; }
  .grupo a { white-space: nowrap; }
  .grupo a[aria-current='page']::before { left: 10px; right: 10px; top: auto; bottom: 2px; width: auto; height: 2px; }
  .nav-pie { display: none; }
  .barra { padding: 8px 16px; }
  main { padding: 16px; }
  .pie { padding: 14px 16px 20px; }
}

/* ── Piezas ──────────────────────────────────────────────────────────────── */
.encabezado { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.encabezado p { color: var(--texto-2); margin-top: 2px; }
.pila { display: flex; flex-direction: column; gap: 16px; }
.fila-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.panel { background: var(--superficie); border: 1px solid var(--filete); border-radius: var(--r8); padding: 16px; min-width: 0; }
.panel > h2 { margin-bottom: 10px; }
.rejilla { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rejilla.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1080px) { .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rejilla.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rejilla, .rejilla.dos, .rejilla.tres { grid-template-columns: minmax(0, 1fr); } }
.etiqueta { font-size: 12px; font-weight: 500; color: var(--texto-2); }
.cifra { font-size: 26px; line-height: 32px; font-weight: 650; letter-spacing: -0.02em; }
.cifra small { font-size: 14px; font-weight: 500; color: var(--texto-2); margin-left: 4px; }
.dato { display: flex; flex-direction: column; gap: 2px; }
.dato > .pill { align-self: flex-start; margin-top: 4px; }
.lista-datos { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr); gap: 6px 16px; margin: 0; }
.lista-datos dt { color: var(--texto-2); font-size: 13px; }
.lista-datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .lista-datos { grid-template-columns: minmax(0, 1fr); } .lista-datos dd { margin-bottom: 6px; } }

.medidor { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.medidor-fila { display: grid; grid-template-columns: minmax(0, 88px) minmax(0, 1fr) minmax(0, 56px); gap: 8px; align-items: center; font-size: 12px; color: var(--texto-2); }
.medidor-fila .num { text-align: right; color: var(--texto); font-weight: 600; }
.pista { height: 8px; border-radius: var(--r6); background: var(--tinte-gris); overflow: hidden; }
.pista span { display: block; height: 100%; width: 0; border-radius: var(--r6); background: var(--azul); }
.pista.certificado span { background: var(--verde); }

.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r6);
  font-size: 12px; font-weight: 500; white-space: nowrap; border: 1px solid transparent; color: var(--texto);
}
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gris); flex: none; }
.pill.ok { background: var(--tinte-verde); border-color: #c6ecd6; }
.pill.ok::before { background: var(--verde); }
.pill.atencion { background: var(--tinte-ambar); border-color: #efdcbc; }
.pill.atencion::before { background: var(--ambar); }
.pill.mal { background: var(--tinte-rojo); border-color: #f1c9c9; }
.pill.mal::before { background: var(--rojo); }
.pill.neutro { background: var(--tinte-gris); border-color: var(--filete); }
.pill.curso { background: var(--tinte-azul); border-color: #cfdcfa; }
.pill.curso::before { background: var(--azul); }
.pill.nivel::before { display: none; }
.pill.nivel { font-family: var(--mono); font-size: 11.5px; }

/* Botones y campos: 32 px de alto */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--control); padding: 0 12px;
  border-radius: var(--r6); border: 1px solid var(--filete-fuerte); background: var(--superficie); color: var(--navy);
  font: 500 13.5px/1 var(--sans); cursor: pointer; text-decoration: none; white-space: nowrap;
}
.boton:hover { background: var(--fondo); color: var(--navy); }
.boton.primario { background: var(--azul); border-color: var(--azul); color: #fff; }
.boton.primario:hover { background: var(--azul-oscuro); border-color: var(--azul-oscuro); color: #fff; }
.boton.peligro { color: var(--rojo); border-color: #eab8b8; }
.boton.sutil { border-color: transparent; background: transparent; color: var(--texto-2); }
.boton.sutil:hover { background: var(--fondo); }
.boton[disabled], .boton[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; }
/* Botón grande de la Sala (verbos claros para el cliente: «Ver documento», «Aprobar», «Hacer una solicitud») */
.boton.grande { height: 40px; padding: 0 16px; font-size: 14.5px; }
/* Botón con texto largo (p. ej. «Ver como lo ve <cliente>»): puede partirse en dos líneas en el teléfono */
.boton.envuelve { white-space: normal; height: auto; min-height: var(--control); padding-top: 6px; padding-bottom: 6px; line-height: 1.3; text-align: center; }
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo label, .campo .etiqueta-campo { font-size: 13px; font-weight: 500; }
.campo .ayuda { font-size: 12px; color: var(--texto-2); }
input[type='text'], input[type='email'], input[type='password'], input[type='number'], input[type='date'],
input[type='datetime-local'], input[type='url'], select, textarea {
  width: 100%; min-height: var(--control); padding: 0 10px; border: 1px solid var(--filete-fuerte); border-radius: var(--r6);
  background: var(--superficie); color: var(--texto); font: 400 14px/1.4 var(--sans);
}
input[type='file'] { font: 400 13px var(--sans); max-width: 100%; }
select { padding-right: 28px; }
textarea { min-height: 88px; padding: 8px 10px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }
input[aria-invalid='true'], textarea[aria-invalid='true'] { border-color: var(--rojo); }
.casilla { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; }
.casilla input { width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--azul); flex: none; }
.formulario { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.formulario .ancho { grid-column: 1 / -1; }
@media (max-width: 560px) { .formulario { grid-template-columns: minmax(0, 1fr); } }
.error-form { color: var(--rojo); font-size: 13px; }
.exito { color: #1d6b40; font-size: 13px; }

/* Tablas: la fila entera abre y el enlace va en la primera celda */
.tabla-envoltura { overflow-x: auto; border: 1px solid var(--filete); border-radius: var(--r8); background: var(--superficie); }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
caption { text-align: left; padding: 12px 12px 4px; font-weight: 600; }
th { text-align: left; font-size: 12px; font-weight: 600; color: var(--texto-2); padding: 9px 12px; background: var(--fondo); border-bottom: 1px solid var(--filete); white-space: nowrap; }
td { padding: 10px 12px; border-top: 1px solid var(--filete); vertical-align: top; }
tbody tr:first-child td { border-top: 0; }
th:first-child, td:first-child { position: sticky; left: 0; z-index: 1; background: var(--superficie); }
th:first-child { background: var(--fondo); }
td.num, th.num { text-align: right; white-space: nowrap; }
tr.abre { cursor: pointer; }
tr.abre:hover td { background: var(--fondo); }
td a.abrir { font-weight: 600; color: var(--navy); text-decoration: none; }
td a.abrir:hover { color: var(--azul); text-decoration: underline; }

/* Estados vacío, carga y error */
.estado { border: 1px dashed var(--filete-fuerte); border-radius: var(--r8); padding: 24px; text-align: center; color: var(--texto-2); background: var(--superficie); }
.estado h2 { color: var(--texto); margin-bottom: 4px; }
.estado.error { border-style: solid; border-color: #f1c9c9; background: var(--tinte-rojo); color: var(--texto); }
.estado.error .fila-acciones { justify-content: center; margin-top: 12px; }
.cargando { display: flex; flex-direction: column; gap: 10px; }
.cargando .linea { height: 14px; border-radius: var(--r6); background: var(--tinte-gris); animation: pulso 1.2s ease-in-out infinite; }
.cargando .linea:nth-child(2) { width: 72%; }
.cargando .linea:nth-child(3) { width: 48%; }
@keyframes pulso { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .cargando .linea { animation: none; } }

.aviso-banda { border: 1px solid #efdcbc; background: var(--tinte-ambar); border-radius: var(--r8); padding: 12px 14px; }
.aviso-banda.info { border-color: #cfdcfa; background: var(--tinte-azul); }
.aviso-banda.mal { border-color: #f1c9c9; background: var(--tinte-rojo); }
.lista-simple { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lista-simple > li { padding: 10px 0; border-top: 1px solid var(--filete); display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.lista-simple > li:first-child { border-top: 0; padding-top: 0; }
.feed > li { display: block; }
.feed .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--texto-2); margin-bottom: 4px; }
.texto-largo { white-space: pre-wrap; overflow-wrap: anywhere; }
.hash { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
.metricas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.metricas span { font-family: var(--mono); font-size: 12px; background: var(--fondo); border: 1px solid var(--filete); border-radius: var(--r6); padding: 2px 6px; }
.tarjeta-sistema { display: flex; flex-direction: column; gap: 6px; }
.tarjeta-sistema .cabeza { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.volver { display: inline-flex; margin-bottom: 12px; font-size: 13px; }
.secreto { font-family: var(--mono); font-size: 15px; letter-spacing: 0.08em; background: var(--fondo); border: 1px solid var(--filete); border-radius: var(--r6); padding: 8px 10px; overflow-wrap: anywhere; }
.qr { width: 196px; height: 196px; border: 1px solid var(--filete); border-radius: var(--r8); background: #fff; padding: 6px; }
.qr svg { width: 100%; height: 100%; display: block; }

/* Vista de cliente: aviso fijo arriba cuando un administrador de Aivor mira la Sala de un cliente */
.banda-vista {
  position: sticky; top: 0; z-index: 15; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px;
  padding: 8px 24px; background: var(--tinte-ambar); border-bottom: 1px solid #efdcbc; color: var(--navy); font-size: 13.5px;
}
.banda-vista strong { font-weight: 650; }
.banda-vista .volver-torre { margin-left: auto; font-weight: 600; color: var(--navy); }
@media (max-width: 760px) { .banda-vista { position: static; padding: 8px 16px; } .banda-vista .etiqueta { display: none; } }

/* Sincronía de la Sala: «Actualizado hace X» y el botón «Actualizar» */
.sincronia { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.sincronia .etiqueta { white-space: nowrap; }

/* Lo que necesita hacer el cliente: arriba de todo, con verbo, plazo y botón */
.que-hacer { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid #cfdcfa; border-radius: var(--r8); background: var(--tinte-azul); }
.que-hacer.nada { border-color: #c6ecd6; background: var(--tinte-verde); }
.que-hacer h2 { font-size: 16px; line-height: 22px; }
.que-hacer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.que-hacer li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  padding: 10px 12px; background: var(--superficie); border: 1px solid var(--filete); border-radius: var(--r6);
}
.que-hacer .que { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 260px; }
.que-hacer .que strong { overflow-wrap: anywhere; }
.que-hacer .plazo { font-size: 13px; color: var(--texto-2); }
.que-hacer .plazo.urgente { color: var(--rojo); font-weight: 600; }

/* Etapas del proyecto: cumplidas en verde con su fecha, la actual resaltada en azul, las futuras en gris.
   Cuatro en fila cuando caben (600 px o más de ancho disponible); si no, dos por fila. */
.etapas-marco { container-type: inline-size; min-width: 0; }
.etapas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container (min-width: 600px) { .etapas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.etapas li {
  min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 7px 10px 8px;
  border: 1px solid var(--filete); border-top: 3px solid var(--filete-fuerte); border-radius: var(--r6); background: var(--superficie);
}
.etapas .etapa-nombre { font-size: 12.5px; font-weight: 600; color: var(--navy); }
.etapas .etapa-fecha { font-size: 11.5px; color: var(--texto-2); }
.etapas li.cumplida { border-top-color: var(--verde); }
.etapas li.cumplida .etapa-nombre::before { content: '✓'; margin-right: 4px; color: #1d6b40; }
.etapas li.actual { border-color: #cfdcfa; border-top-color: var(--azul); background: var(--tinte-azul); }
.etapas li.pendiente .etapa-nombre { color: var(--texto-2); font-weight: 500; }

/* Documentos: «Ver documento» y «Descargar» junto al título (en la primera celda, fija en el teléfono) */
.acciones-doc, .acciones-celda { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.acciones-doc .boton, .acciones-celda .boton { font-size: 13px; }
.repo-sistema { font-size: 13px; overflow-wrap: anywhere; }
details.que-es { font-size: 13px; }
details.que-es summary { cursor: pointer; color: var(--azul); width: max-content; max-width: 100%; border-radius: 2px; }
details.que-es p { margin-top: 4px; color: var(--texto-2); }
.cabecera-fila.entre { justify-content: space-between; align-items: flex-start; }

/* Firma de documentos (0012). Panel «Documentos para firmar»: un botón grande por documento pendiente, azul de Aivor con
   texto blanco (contraste 6,2:1), en rejilla de 1, 2 y 3 columnas; foco blanco de 2 px sobre el azul. Debajo, la lista
   corta de lo ya subido. En las tablas: estado, motivo y copias firmadas debajo de su original, siempre en la primera
   celda (nunca una acción sola en la última columna). */
.doc-extra { display: flex; flex-direction: column; gap: 6px; max-width: min(380px, 74vw); }
.nota-doc { overflow-wrap: anywhere; }
.pasos-firma { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 2px; color: var(--texto-2); font-size: 13.5px; }
.pasos-firma li::marker { color: var(--azul); font-weight: 600; }
.rejilla-firmas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .rejilla-firmas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .rejilla-firmas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rejilla-firmas > li { display: flex; min-width: 0; }
.tarjeta-firma {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 16px;
  background: var(--azul); color: #fff; border: 1px solid var(--azul); border-radius: var(--r8);
}
.tarjeta-firma[data-estado='rechazado'] { border-color: var(--navy); }
.firma-abrir {
  display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 4px 0; margin: 0; border: 0; background: transparent;
  color: #fff; text-align: left; font: inherit; cursor: pointer; border-radius: 2px;
}
.firma-abrir:hover .firma-nombre { text-decoration: underline; text-underline-offset: 4px; }
.firma-abrir[disabled] { opacity: 0.7; cursor: progress; }
.firma-nombre { font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.firma-detalle { font-size: 13px; overflow-wrap: anywhere; }
.firma-motivo, .firma-nota { font-size: 13px; overflow-wrap: anywhere; }
.tarjeta-firma .boton { background: transparent; border-color: #fff; color: #fff; }
.tarjeta-firma .boton:hover { background: var(--azul-oscuro); color: #fff; }
.tarjeta-firma .boton.claro { background: #fff; color: var(--azul-oscuro); font-weight: 600; }
.tarjeta-firma .boton.claro:hover { background: var(--tinte-azul); color: var(--navy); }
.tarjeta-firma :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tarjeta-firma .etiqueta, .tarjeta-firma .error-form { color: #fff; font-weight: 600; }
.tarjeta-firma .etiqueta:empty, .tarjeta-firma .error-form:empty { display: none; }
.lista-recibidos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lista-recibidos > li {
  display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--filete);
}
.lista-recibidos > li:first-child { border-top: 0; padding-top: 0; }
.controles-firma { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; min-width: 0; }
.controles-firma .boton { font-size: 13px; }
.controles-firma .etiqueta:empty, .controles-firma .error-form:empty { display: none; }
.estado-firma { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; min-width: 0; }
.estado-firma .pill { flex: none; }
.motivo { font-size: 13px; color: var(--rojo); overflow-wrap: anywhere; }
.copias { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px dashed var(--filete-fuerte); }
.lista-copias { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lista-copias > li { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lista-copias .acciones-doc { margin-top: 2px; }
.evidencia { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.copia-dato { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 13px; }
td s { color: var(--texto-2); text-decoration-thickness: 1px; }
.aviso-firmas { font-size: 13px; font-weight: 600; color: var(--azul-oscuro); }

/* ── Carpetas (clientes) y tarjetas (proyectos) ──────────────────────────────
   La carpeta es una tarjeta con pestaña arriba a la izquierda, hecha con CSS: la pestaña se apoya sobre el filete
   superior y lo tapa, así la carpeta se lee como una sola pieza. Toda la carpeta o tarjeta es un enlace real
   (el del título, que la cubre); foco azul de 2 px alrededor. Móvil primero: una columna; 2 y 3 al crecer. */
.pila.apretada { gap: 10px; }
.rejilla-carpetas, .rejilla-tarjetas {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr);
}
.rejilla-carpetas { gap: 8px 16px; }
.rejilla-carpetas > li, .rejilla-tarjetas > li { display: flex; min-width: 0; }
.rejilla-carpetas > li > *, .rejilla-tarjetas > li > * { flex: 1 1 auto; min-width: 0; }
@media (min-width: 700px) { .rejilla-carpetas, .rejilla-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .rejilla-carpetas, .rejilla-tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.carpeta, .tarjeta-proyecto {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 16px; min-width: 0;
  background: var(--superficie); border: 1px solid var(--filete); transition: border-color 120ms ease;
}
.carpeta { margin-top: 22px; border-radius: 0 var(--r8) var(--r8) var(--r8); }
.tarjeta-proyecto { border-radius: var(--r8); }
.carpeta-pestana, .carpeta .cubre::before { position: absolute; left: -1px; bottom: 100%; width: min(48%, 176px); height: 23px; }
.carpeta-pestana {
  z-index: 1; display: block; padding: 0 12px; line-height: 22px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  background: var(--superficie); border: 1px solid var(--filete); border-bottom: 0; border-radius: var(--r6) var(--r6) 0 0;
  font: 600 11px/22px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-2);
  transition: border-color 120ms ease, color 120ms ease;
}
.carpeta:hover, .carpeta:focus-within, .tarjeta-proyecto:hover, .tarjeta-proyecto:focus-within { border-color: var(--azul); }
.carpeta:hover .carpeta-pestana, .carpeta:focus-within .carpeta-pestana { border-color: var(--azul); color: var(--navy); }
.cubre { color: var(--navy); text-decoration: none; }
.cubre:hover { color: var(--azul); }
.cubre::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.carpeta .cubre::before { content: ''; z-index: 2; }
.cubre:focus-visible { outline: none; }
.cubre:focus-visible::after { outline: 2px solid var(--azul); outline-offset: 2px; }
.carpeta .cubre:focus-visible::after { border-radius: 0 var(--r8) var(--r8) var(--r8); }
.tarjeta-proyecto .cubre:focus-visible::after { border-radius: var(--r8); }
.carpeta-cabeza { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.carpeta-cabeza h2 { font-size: 16px; line-height: 22px; overflow-wrap: anywhere; }
.carpeta-conteo { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; font-size: 13px; color: var(--texto-2); }
.carpeta-conteo strong { color: var(--navy); font-size: 15px; }
.carpeta-conteo .pill { margin-left: 4px; }
.carpeta-pie, .tarjeta-pie {
  display: flex; align-items: center; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap;
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--filete);
}
.tarjeta-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.tarjeta-titulo { font-size: 15px; line-height: 21px; font-weight: 600; overflow-wrap: anywhere; }
.tarjeta-pie { list-style: none; margin-bottom: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; justify-content: flex-start; font-size: 12.5px; color: var(--texto-2); }
.tarjeta-pie strong { color: var(--navy); }

/* Línea de implementación: pista gris, reportado en azul y certificado en verde encima */
.linea-impl { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.linea-impl-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.linea-impl-cifras { display: flex; gap: 4px 12px; flex-wrap: wrap; font-size: 12px; color: var(--texto-2); }
.linea-impl-cifras strong { color: var(--navy); font-weight: 600; }
.marca-rep::before, .marca-cert::before, .leyenda-valor li::before {
  content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; background: var(--azul);
}
.marca-cert::before { background: var(--verde); }
.linea-impl-pista { position: relative; height: 10px; border-radius: var(--r6); background: var(--tinte-gris); overflow: hidden; }
.linea-impl-pista span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r6); }
.linea-impl-pista .capa-reportado { background: var(--azul); }
.linea-impl-pista .capa-certificado { background: var(--verde); }
.linea-impl.grande .linea-impl-pista { height: 14px; }
.linea-impl.grande .linea-impl-cifras { font-size: 13px; gap: 4px 16px; }
.linea-impl.grande .linea-impl-cifras strong { font-size: 20px; letter-spacing: -0.01em; }

/* Dinero: filas concepto · cifra en tarjetas; cifras grandes en cabeceras; barra del valor */
.cuadro-dinero { margin: 0; display: flex; flex-direction: column; }
.cuadro-dinero > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; border-top: 1px solid var(--filete); }
.cuadro-dinero > div:first-child { border-top: 0; padding-top: 0; }
.cuadro-dinero dt { font-size: 12.5px; color: var(--texto-2); }
.cuadro-dinero dd { margin: 0; font-weight: 600; color: var(--navy); white-space: nowrap; }
.cuadro-dinero > .vencido dt { display: inline-flex; align-items: center; gap: 6px; color: var(--navy); }
.cuadro-dinero > .vencido dt::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--rojo); }
.cuadro-dinero > .vencido dd { color: var(--rojo); }
.cifras-dinero { margin: 0; display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cifras-dinero > div { min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border: 1px solid var(--filete); border-radius: var(--r6); background: var(--fondo); }
.cifras-dinero > .valor { grid-column: 1 / -1; background: var(--superficie); }
.cifras-dinero > .mal { border-color: #f1c9c9; background: var(--tinte-rojo); }
.cifras-dinero dt { font-size: 12px; font-weight: 500; color: var(--texto-2); }
.cifras-dinero dd { margin: 0; font-size: 17px; line-height: 24px; font-weight: 650; color: var(--navy); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.cifras-dinero > .valor dd:not(.sub) { font-size: 24px; line-height: 30px; }
.cifras-dinero dd.sub { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--texto-2); letter-spacing: 0; }
.valor-en-barra { display: flex; flex-direction: column; gap: 8px; }
.barra-valor { display: flex; height: 8px; border-radius: var(--r6); overflow: hidden; background: var(--tinte-gris); }
.barra-valor span { height: 100%; }
.barra-valor .cobrado, .leyenda-valor .cobrado::before { background: var(--verde); }
.barra-valor .por-cobrar, .leyenda-valor .por-cobrar::before { background: var(--ambar); }
.barra-valor .vencido, .leyenda-valor .vencido::before { background: var(--rojo); }
.leyenda-valor { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px 14px; flex-wrap: wrap; font-size: 12px; color: var(--texto-2); }
.leyenda-valor .por-causar::before { background: var(--tinte-gris); outline: 1px solid var(--filete-fuerte); outline-offset: -1px; }
.leyenda-valor .num { color: var(--navy); font-weight: 600; }

.linea-hito { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.linea-hito-nombre { overflow-wrap: anywhere; }
.linea-hito-fecha { display: flex; gap: 6px 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--texto-2); }
.semaforo { display: inline-flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.luz { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--texto-2); }
.luz strong { color: var(--navy); font-weight: 600; }
.luz::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gris); }
.luz.ok::before { background: var(--verde); }
.luz.atencion::before { background: var(--ambar); }
.luz.mal::before { background: var(--rojo); }
.mini-datos { margin: 0; display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mini-datos > div { min-width: 0; padding: 8px 10px; border: 1px solid var(--filete); border-radius: var(--r6); background: var(--fondo); }
.mini-datos > .mal { border-color: #f1c9c9; background: var(--tinte-rojo); }
.mini-datos dt { font-size: 11.5px; font-weight: 500; color: var(--texto-2); }
.mini-datos dd { margin: 0; font-size: 18px; line-height: 24px; font-weight: 650; color: var(--navy); overflow-wrap: anywhere; }
.mini-datos dd.fecha { font-size: 14px; line-height: 20px; padding-top: 2px; }
.mini-datos dd.sub { font-size: 11.5px; line-height: 16px; font-weight: 500; color: var(--texto-2); }

/* Cabecera tipo tarjeta grande (proyecto) y carpeta abierta (cliente) */
.cabecera-tarjeta {
  position: relative; display: flex; flex-direction: column; gap: 16px; padding: 20px; min-width: 0;
  background: var(--superficie); border: 1px solid var(--filete); border-radius: var(--r8);
}
.cabecera-tarjeta.carpeta-abierta { margin-top: 22px; border-radius: 0 var(--r8) var(--r8) var(--r8); }
.cabecera-tarjeta h1 { overflow-wrap: anywhere; }
.cabecera-fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cabecera-cuerpo { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1180px) { .cabecera-cuerpo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } }
.etiqueta-seccion { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris); }
.titulo-pestana:focus { outline: none; }

/* Pestañas internas del cliente y del proyecto: tira que se desplaza en el teléfono */
.pestanas-internas { position: relative; border-bottom: 1px solid var(--filete); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.pestanas-internas ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; min-width: max-content; }
.pestanas-internas a {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px;
  color: var(--texto-2); text-decoration: none; font-weight: 500; white-space: nowrap; border-radius: var(--r6) var(--r6) 0 0;
}
.pestanas-internas a:hover { color: var(--texto); background: var(--fondo); }
.pestanas-internas a:focus-visible { outline-offset: -2px; }
.pestanas-internas a[aria-current='page'] { color: var(--navy); }
.pestanas-internas a[aria-current='page']::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px; background: var(--azul); }
.pestanas-internas .contador {
  min-width: 20px; height: 18px; padding: 0 6px; border-radius: var(--r6); background: var(--tinte-gris); border: 1px solid var(--filete);
  font-size: 11px; font-weight: 600; line-height: 16px; text-align: center; color: var(--texto-2);
}
.pestanas-internas a[aria-current='page'] .contador { background: var(--tinte-azul); border-color: #cfdcfa; color: var(--navy); }

/* Migas en la barra superior */
.migas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 13px; min-width: 0; }
.migas li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.migas li + li::before { content: '›'; color: var(--gris); }
.migas a { color: var(--texto-2); text-decoration: none; }
.migas a:hover { color: var(--azul); text-decoration: underline; }
.migas [aria-current] { color: var(--navy); font-weight: 600; }
.migas .codigo { font-weight: 500; }

@media (prefers-reduced-motion: reduce) { .carpeta, .carpeta-pestana, .tarjeta-proyecto { transition: none; } }

/* Pantallas de ingreso y primer ingreso */
.acceso { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; gap: 16px; }
.acceso .panel { width: 100%; max-width: 420px; padding: 24px; }
.acceso .panel.ancho { max-width: 640px; }
.acceso .logo img { width: 120px; height: 40px; }
.acceso .pie-acceso { font-size: 12px; color: var(--texto-2); display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.acceso .pie-acceso a { color: var(--texto-2); }
.texto-aviso { max-height: 46vh; overflow-y: auto; border: 1px solid var(--filete); border-radius: var(--r6); padding: 12px 14px; background: var(--fondo); white-space: pre-wrap; font-size: 13px; line-height: 1.55; }

/* Diálogos (sin sombra: filete y velo) */
dialog { border: 1px solid var(--filete-fuerte); border-radius: var(--r8); padding: 0; width: min(480px, calc(100vw - 32px)); color: var(--texto); background: var(--superficie); }
dialog::backdrop { background: rgba(11, 20, 55, 0.45); }
.dialogo-cuerpo { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.dialogo-acciones { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 20px; border-top: 1px solid var(--filete); background: var(--fondo); border-radius: 0 0 var(--r8) var(--r8); flex-wrap: wrap; }

/* Avisos emergentes */
.avisos { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.avisos .toast { background: var(--superficie); border: 1px solid var(--filete-fuerte); border-left: 3px solid var(--azul); border-radius: var(--r6); padding: 10px 12px; font-size: 13.5px; }
.avisos .toast.ok { border-left-color: var(--verde); }
.avisos .toast.mal { border-left-color: var(--rojo); }
.cargando-inicial { padding: 40px 24px; color: var(--texto-2); }

/* Documentos del cliente (0013). «Subir documentos» abre, debajo del título del grupo, un panel con tinte azul y una
   fila blanca por archivo (nombre, tipo, título opcional, «Quitar» y su avance); el filete izquierdo dice cómo va:
   gris por subir, azul subiendo, verde subido, rojo con error. Móvil primero: los campos van uno sobre otro y desde
   700 px tipo y título quedan lado a lado. La tabla de abajo lleva el estado y «Ver» y «Descargar» en la primera celda. */
.subir-docs { border-color: #cfdcfa; background: var(--tinte-azul); }
.lista-subida { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lista-subida:empty { display: none; }
.fila-subida {
  min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--superficie);
  border: 1px solid var(--filete); border-left: 3px solid var(--filete-fuerte); border-radius: var(--r6);
}
.fila-subida[data-estado='subiendo'] { border-left-color: var(--azul); }
.fila-subida[data-estado='hecho'] { border-left-color: var(--verde); }
.fila-subida[data-estado='error'] { border-left-color: var(--rojo); }
.fila-subida .nombre-archivo { font-size: 13.5px; overflow-wrap: anywhere; }
.campos-subida { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .campos-subida { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.estado-subida { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.docs-cliente .cabecera-fila .tenue { max-width: 72ch; }

/* Estado del trabajo (0014) */
.trabajos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.trabajo { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--filete); border-radius: var(--r8); min-width: 0; }
.trabajo.espera-cliente { border-left: 2px solid var(--ambar); }
.trabajo-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px 10px; flex-wrap: wrap; }
.trabajo-cabeza strong { overflow-wrap: anywhere; }
.trabajo p { margin: 0; overflow-wrap: anywhere; }
.trabajo .evidencia { font-size: 13px; color: var(--texto-2); }