/* =============================================================================
   SISTEMA VISUAL COMPARTIDO · Seautomatiza Aduanas
   Una sola identidad para TODAS las pantallas. Si un componente se usa en más de
   una pantalla, su estilo vive aquí, no repetido en cada página.

   · Superficies cálidas y densidad de tabla (referencia: panel de expedientes).
   · El AZUL DE MARCA es el color de acción: botones principales, enlaces, activo.
   · Tipografía IBM Plex Sans, con reserva del sistema: si el servidor del cliente no
     tiene internet, cae a la del sistema y no se rompe nada.
   · TRES PESOS Y SOLO TRES (700/500/400). El peso es información: lo que
     identifica pesa, lo que acompaña no. Ver --w-strong / --w-medium / --w-regular.
   ========================================================================== */

:root {
  /* Superficies y texto — BLUEPRINT (30/08/2026).
     El panel deja de ser una superficie blanca y pasa a ser un FILETE: los
     bloques se dibujan con un borde de un pelo sobre el lienzo, no como islas
     flotando. Medido antes de decidirlo: quitar el blanco cuesta entre 0,6 y
     0,8 puntos de contraste en el texto pequeno y NADA de lo que importa baja
     de AA (lo mas justo, --color-mute en 4,60:1).

     OJO: hay superficies que NO pueden ser transparentes porque SE SOLAPAN con
     otro contenido — la barra superior y la cabecera de tabla son sticky y las
     filas pasan por debajo; las dos tarjetas de dialogo van sobre un velo
     oscuro. Esas usan --surface-solid. Un alias ciego de --panel las rompia,
     y es justo el fallo que no se ve hasta que alguien hace scroll. */
  --bg: #f2f2f3;
  --panel: transparent;
  --surface-solid: #f2f2f3;  /* lo que se solapa: sticky y dialogos */
  --band: #e9e9ea;          /* bandas de grupo, cabeceras suaves */
  --ink: #1d1f20;
  /* GRISES DE TEXTO — medidos sobre el fondo nuevo (#f2f2f3), no heredados.
     Los de antes NO pasaban AA y llevan texto real en varias pantallas:
       --dim   #8d867d  3,21:1   (la columna «Edad» del panel)
       --faint #a09990  2,52:1   (pistas, estados vacios, el pie)
     Tres niveles por encima de 4,5 no caben en un fondo claro sin que se
     confundan entre si, asi que se cambia un nivel de gris por legibilidad:
     --dim y --faint COLAPSAN en el mismo valor. Quien necesite jerarquia usa
     el peso o el tamaño, que es lo que este sistema dice que hay que usar. */
  --muted: #5d5d60;   /* 5,87:1 — texto secundario */
  --faint: var(--color-mute);   /* 4,67:1 */
  --dim:   var(--color-mute);   /* 4,67:1 */
  --border: color-mix(in srgb, #1d1f20 16%, transparent);
  --border-strong: color-mix(in srgb, #1d1f20 28%, transparent);
  --line-soft: color-mix(in srgb, #1d1f20 8%, transparent);

  /* Rótulos que dan estructura: cabeceras de tabla, etiquetas de filtro y
     separadores de grupo. Pequeños y en mayúsculas, pero tienen que leerse de un
     vistazo. Antes usaban --faint y se perdían; la tipografía ya iba en negrita,
     así que lo que faltaba era contraste. --label-strong es para los separadores
     de grupo, que son la referencia al recorrer una lista larga. */
  --label: #4a453e;
  --label-strong: #2b2822;

  /* Azul de marca = ACCIÓN (se mantiene; no se sustituye por negro) */
  --blue: #1160d4; --blue-bg: #e9f1fd; --blue-bd: #bfd6f7; --blue-dark: #0d4ba8;

  /* Semánticos */
  --green: #1d6b41; --green-bg: #e8f2ec; --green-bd: #bcdcc8;
  --amber: #8a5a12; --amber-bg: #fbf1dd; --amber-bd: #ecd9a8;
  --red:   #a8322a; --red-bg:   #fbe9e7; --red-bd:   #eec6c1;
  --purple:#5b4b8a; --purple-bg:#eeebf6;

  /* Sin sombra: un bloque de filete no flota. La elevacion se reserva
     para lo que de verdad esta por encima (dialogos, menus). */
  --shadow: none;
  --shadow-lg: 0 10px 30px rgba(28,26,23,.14);
  --radius: 0;

  /* SUSTITUIDA por IBM Plex Sans (ver el bloque del sistema nuevo, al final de
     :root): --sans es hoy un ALIAS de --font-body y este valor ya no se usa.
     Se deja el nombre para que las 881 lineas repartidas por las paginas sigan
     funcionando sin tocarse. Texto original:
     Inter: pesos muy diferenciados, buena lectura en cuerpos pequeños y, con las
     variantes de abajo, distingue el cero de la O y el uno de la ele. Lo usamos
     todo el rato para MRN, contenedores, precintos y códigos de aduana. */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Tres pesos, con hueco real entre ellos. Antes convivían 400, 500, 600, 650,
     700 y 800: tan juntos, ninguno destacaba y todo pesaba parecido.
       strong  = IDENTIFICA  (referencia, estado, rótulos, títulos, acción principal)
       medium  = APOYA       (cliente, etiquetas de campo, acciones secundarias)
       regular = ACOMPAÑA    (descripciones, pistas, textos explicativos)
     Si algo no identifica ni apoya, va en regular. */
  --w-strong: 700;
  --w-medium: 500;
  --w-regular: 400;

  --appbar-h: 54px;
  /* Alto del rótulo MODO DEMO (scripts/serve-verify.js), 0 fuera de la demo. Los dos
     sticky de abajo (la cabecera y la fila de tabla que se pega bajo ella) suman este
     hueco a su `top`, para que un segundo elemento pegado arriba no tape al primero:
     dos `position: sticky; top: 0` en la misma pila se superponen si no se descuenta
     el alto del que va delante. */
  --banner-h: 0px;
  --content-max: 1240px;    /* MISMO ancho de contenido en todas las pantallas */
  /* Hueco lateral. UNA sola variable para que las franjas a ancho completo (la de
     validacion) y las columnas de contenido se alineen por construccion y no por
     coincidencia: si se cambia aqui, se mueven todas juntas. */
  --gutter: 22px;

  /* ==========================================================================
     SISTEMA NUEVO (Claude Design · «Panel estilo Jira aduanal»), 30/08/2026.
     Se AÑADE encima del anterior y los nombres de siempre pasan a ser ALIAS al
     final de este bloque: ninguna de las 881 lineas de CSS repartidas por las
     paginas ni ninguno de los 344 `class` escritos desde JS necesita tocarse,
     y las catorce pantallas se mueven a la vez.

     LO QUE TODAVIA NO ENTRA: las superficies (--bg, --panel, --band) y el radio.
     El sistema nuevo las quiere transparentes, con borde de un pelo y sin radio
     («blueprint»), y esa pregunta sigue sin contestar. Aplicarlo ahora seria
     cambiar catorce pantallas a ciegas.
     ====================================================================== */

  /* --- Los CUATRO roles semanticos, cada uno como TRIO ---------------------
     texto sobre su propio campo tenido, mas el borde con que se dibujan ese
     campo y los filetes de 4px de las filas. El texto de cada rol pasa AA
     (>=4.5:1) sobre su -bg.
       success  cuadra · resuelto · recepcionado · campo validado
       warn     hay que decidir · bloqueado · lectura dudosa
       alert    algo fallo · conflicto · no se pudo leer
       info     aviso neutro · en marcha · todavia no hay nada que hacer      */
  --color-success: #1f6b45;  --color-success-bg: #e8f3ec;  --color-success-bd: #a3c9b3;
  --color-warn:    #7a5a14;  --color-warn-bg:    #f7f0dd;  --color-warn-bd:    #d8c184;
  --color-alert:   #97423a;  --color-alert-bg:   #f8ebe8;  --color-alert-bd:   #dcaaa2;
  --color-info:    #3f6183;  --color-info-bg:    #e9f1f9;  --color-info-bd:    #a9c6e2;

  /* FUERA de los cuatro roles a proposito: «el documento no lo trae» es un
     resultado legitimo, no un estado que colorear. Nunca se mezcla con alert,
     que es «no lo pudimos leer». Es la distincion que sostiene el producto. */
  --color-mute: #6c6c70;

  /* --- Acento ------------------------------------------------------------
     Azul grisaceo, mas sobrio que el #1160d4 de antes. Se reparte por PAPEL
     (ver el bloque de abajo): el acento a secas no se usa nunca como texto. */
  --color-accent: #5980a6;
  --color-accent-100: #eef6ff;  --color-accent-200: #d6ebff;  --color-accent-300: #b5d9fd;
  --color-accent-600: #597ea3;  --color-accent-700: #416180;  --color-accent-800: #2c455d;

  /* EL ACENTO POR PAPEL. Un solo valor no puede hacer los cuatro trabajos:
     #5980a6 da 3,65:1 sobre nuestro fondo — vale para el anillo de foco, los
     bordes y los rellenos teñidos, y se queda corto para texto y para rellenar
     un boton. Asi que el acento se queda para esos dos usos y los otros dos
     tienen token propio. Medido sobre NUESTRAS superficies, no sobre las suyas:
       accent-text sobre el panel blanco   5,41:1
       accent-text sobre el fondo #f2f0ed  4,76:1
       accent-on sobre accent-solid        5,41:1
     NUNCA uses --color-accent para texto ni para un fondo con texto encima. */
  --color-accent-text:  #4a6d90;
  --color-accent-solid: #4a6d90;
  --color-accent-solid-hover:  #416180;
  --color-accent-solid-active: #35506a;
  --color-accent-on: #ffffff;

  /* REGIMEN ADUANERO — identidad, no urgencia: nunca sustituyen a los cuatro
     semanticos. Van en el filete de 3px de la fila y en la pastilla.
     La salida indirecta es 27 de cada 28 expedientes en datos reales, asi que
     es la callada: pizarra neutra, para que los tres casos raros se vean solos
     en una lista de veinte filas. Los cuatro pasan AA sobre nuestro fondo
     (6,26 · 5,57 · 4,99 · 5,34). Hoy panel.js los lleva escritos a mano y con
     otros valores: se unifican cuando se rehaga esa pantalla. */
  --reg-sal: #4c5a63;
  --reg-exp: #2f6b48;
  --reg-tra: #86601a;
  --reg-imp: #9c4b2e;

  /* --- Tipografia --------------------------------------------------------
     Una familia de interfaz y una de codigo. La segunda no es decoracion: una
     grotesca dibuja 0/O y 1/l casi igual, y un MRN mal leido cuesta un
     despacho. IBM Plex Mono ya era la de antes: coste de migracion cero. */
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- ALIAS: los nombres de siempre apuntan al sistema nuevo -------------
     Van al FINAL de :root a proposito: asi ganan a las definiciones de arriba
     sin tener que borrarlas. Se retiran pantalla a pantalla, sin prisa. */
  --green: var(--color-success);  --green-bg: var(--color-success-bg);  --green-bd: var(--color-success-bd);
  --amber: var(--color-warn);     --amber-bg: var(--color-warn-bg);     --amber-bd: var(--color-warn-bd);
  --red:   var(--color-alert);    --red-bg:   var(--color-alert-bg);    --red-bd:   var(--color-alert-bd);

  /* --blue es a la vez ACCION e INFORMATIVO en el codigo actual (el boton
     principal y `.notice.info` comparten token). El sistema nuevo los separa;
     aqui se mantienen conflados para no cambiar comportamiento, y se separan
     despues, pantalla a pantalla. El valor de TEXTO va a -700 por contraste. */
  --blue: var(--color-accent-text);
  --blue-bg: var(--color-info-bg);
  --blue-bd: var(--color-info-bd);
  --blue-dark: var(--color-accent-solid-hover);

  --sans: var(--font-body);
  --mono: var(--font-mono);

  /* Tres pesos y solo tres. El sistema nuevo baja el fuerte de 700 a 600. */
  --w-strong: 600;
}

/* ============================================================================
   TEMA OSCURO — se activa con data-theme="dark" en <html>. Todavia no hay
   interruptor en la interfaz: se deja definido para que exista cuando se
   ponga, y para que ninguna pantalla nueva nazca sin el.
   Se redefinen los CUATRO tríos enteros, no solo el texto: un override parcial
   deja cualquier aviso como una mancha clara sobre fondo negro.
   ========================================================================= */
:root[data-theme="dark"] {
  /* LAS SUPERFICIES TAMBIEN. Faltaban, y era peor que no tener tema oscuro:
     los semanticos SI se redefinian, asi que al activarlo se pintaban colores
     de oscuro (#e79a8c y compañia) sobre un fondo que seguia siendo claro. Se
     veia lavado y nadie sabia por que. Solo se detecto pulsando el boton. */
  --bg: #15171a;
  --panel: transparent;
  --surface-solid: #1c1f22;
  --band: #1c1f22;
  --ink: #e7e8ea;
  --border:        color-mix(in srgb, #e7e8ea 15%, transparent);
  --border-strong: color-mix(in srgb, #e7e8ea 26%, transparent);
  --line-soft:     color-mix(in srgb, #e7e8ea 8%, transparent);
  --muted: #9ba1a8;
  --faint: var(--color-mute);
  --dim:   var(--color-mute);
  --shadow: none;
  /* Sin esto el navegador dibuja SUS controles (desplegables, barras, el
     calendario de una fecha) en claro sobre el fondo oscuro. */
  color-scheme: dark;

  --color-success: #7fc79c;  --color-success-bg: #16261d;  --color-success-bd: #2f5c42;
  --color-warn:    #dcb45f;  --color-warn-bg:    #262010;  --color-warn-bd:    #6b5620;
  --color-alert:   #e79a8c;  --color-alert-bg:   #271817;  --color-alert-bd:   #6e3a33;
  --color-info:    #8fb6d8;  --color-info-bg:    #161f28;  --color-info-bd:    #33536e;
  --color-mute: #9b9ca1;
  /* Faltaban los dos: #4a453e sobre el fondo oscuro da 1,89:1, y era el color de
     todos los h2, th, label y summary de la aplicacion. */
  --label: #b9b3a8;
  --label-strong: #d7d2c8;
  /* La escala de acento tampoco se redefinia, y .regimenes usa el 200 de FONDO:
     salia una banda azul clara con el texto encima a 1:1. */
  --color-accent-100: #1b2430;  --color-accent-200: #22303f;  --color-accent-300: #2c4055;
  --color-accent-600: #8fb0cf;  --color-accent-700: #a9c4dd;  --color-accent-800: #c3d7e9;
  --color-accent-text:  #9fbcd8;
  --color-accent-solid: #7ba3c9;
  --color-accent-solid-hover:  #93b5d5;
  --color-accent-solid-active: #a9c6e0;
  --color-accent-on: #10161c;

  --reg-sal: #93a3ad;
  --reg-exp: #6fae86;
  --reg-tra: #c9a253;
  --reg-imp: #d08a68;

  --blue: var(--color-accent-text);
  --blue-dark: var(--color-accent-solid-hover);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: var(--w-regular) 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  /* zero = cero barrado. `cv05` era una variante de INTER (ele con rabo) y con
     IBM Plex Sans no hace nada: se deja porque es inofensiva —el navegador
     ignora lo que la fuente no trae— y quitarla no cambia ni un pixel. Lo que
     de verdad protege el 0/O y el 1/l es la monoespaciada de los codigos, no
     esta linea. */
  font-feature-settings: 'zero' 1, 'cv05' 1;
}
/* Cifras de ancho fijo donde se comparan en columna. */
.tabla, .card table, table.tbl, .kv, .edad, .docs { font-variant-numeric: tabular-nums; }
/* ----------------------------------------------------------------------------
   CÓDIGOS: MRN, contenedores, precintos, EORI, NIF, aduanas, GRN, referencias.
   Van SIEMPRE en la monoespaciada, y no es una preferencia estética: una grotesca dibuja
   0/O y 1/l/I casi iguales (se comprobó: la versión que sirve Google Fonts no trae
   el cero barrado ni la ele con rabo), mientras que IBM Plex Mono los distingue de
   un vistazo. En un MRN mal leído se va un despacho, así que el dato que sea un
   código no se deja a la tipografía de interfaz.
   ------------------------------------------------------------------------- */
.mono, .code, input.code, input[data-code] {
  font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
/* ──────────────────────────────────────────────────────────────────────────
   `hidden` OCULTA. SIEMPRE. (06/09/2026 — ticket de5220dc, reportado con el
   propio boton de reportar fallos.)

   `[hidden] { display: none }` la pone el NAVEGADOR, y cualquier regla NUESTRA
   con `display` la gana, porque las del autor van por delante de las del
   user-agent. Asi que `elemento.hidden = true` sobre algo con una clase que
   fija display —`.btn` es `inline-flex`— no oculta NADA, y no da ningun error:
   se queda como estaba. Es el mismo modo de fallo que el modo oscuro del
   03/09 (CLAUDE.md §5): lo que estaba mal era el valor CALCULADO, no el DOM.

   El sintoma que lo destapo: tras enviar un reporte con exito, el boton seguia
   en pantalla diciendo «Enviando…» para siempre, con el mensaje «Enviado»
   encima. El codigo hacia `btn.hidden = true` y estaba en lo cierto.

   Se arregla UNA vez y para toda la hoja, no componente a componente: cinco
   reglas `.x[hidden]{display:none}` sueltas eran cinco parches del mismo
   agujero, y la sexta no la habria escrito nadie. `!important` aqui es lo
   correcto: `hidden` no es una sugerencia.
   ------------------------------------------------------------------------- */
[hidden] { display: none !important; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
input, select, textarea, button { font-family: inherit; }
/* Casillas y controles nativos también en el azul de marca */
input, select, textarea { accent-color: var(--blue); }

/* =========================== CABECERA (idéntica) =========================== */
/* Misma en todas las pantallas: logo a la izquierda, navegación a su lado,
   acción principal y usuario siempre en la misma esquina. Al cambiar de
   pestaña no se mueve nada. */
.appbar { background: var(--surface-solid); border-bottom: 1px solid var(--border);
  position: sticky; top: var(--banner-h); z-index: 30; }
.appbar-in { max-width: var(--content-max); margin: 0 auto; height: var(--appbar-h);
  padding: 0 22px; display: flex; align-items: center; gap: 18px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; flex: 0 0 auto; }
.brand:hover { text-decoration: none; }
/* LOGOTIPO. Se fija SOLO la altura y el ancho va automatico: asi no se deforma
   nunca, sea la proporcion que sea el fichero. `width`/`height` van tambien en el
   HTML para que el navegador reserve el hueco y la cabecera no salte al cargar.
   El fichero es 1360x362 (3.76:1) -> a 24px de alto ocupa unos 90px de ancho. */
.brand .logo { height: 24px; width: auto; display: block; flex: 0 0 auto; }

.navbar { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.nav-link { font-size: 13px; color: var(--muted); padding: 6px 10px; border-radius: 5px;
  text-decoration: none; white-space: nowrap; }
.nav-link:hover { background: var(--band); color: var(--ink); text-decoration: none; }
.nav-link.on { color: var(--blue); font-weight: var(--w-strong); background: var(--blue-bg); }

.appbar .spacer { margin-left: auto; }
.vsep { width: 1px; height: 24px; background: var(--border); flex: 0 0 auto; }

/* Usuario + salir: siempre en la misma esquina */
/* ─────────────────── QUIEN ERES: UN CONTROL, NO CUATRO (06/09/2026) ─────────
   A la derecha de la barra habia cinco cosas seguidas sin nada que las agrupara:
   crear, el tema, reportar un fallo, tu nombre con su rol en dos lineas, y Salir.
   Medido: 394 px de controles pegados, con 454 px de hueco en el centro. Ahora lo
   personal cuelga de la identidad, que es lo que tienen en comun, y quedan tres.
   ------------------------------------------------------------------------- */
.cuenta-caja { position: relative; flex: 0 0 auto; }
.cuenta-btn { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px;
  border: 1px solid transparent; border-radius: 999px; background: transparent;
  cursor: pointer; color: var(--ink); font-size: 13px; line-height: 1; }
.cuenta-btn:hover { border-color: var(--border-strong); background: var(--surface-solid); }
.cuenta-btn[aria-expanded="true"] { border-color: var(--color-accent); background: var(--surface-solid); }
.cuenta-nombre { font-weight: var(--w-medium); white-space: nowrap; max-width: 140px;
  overflow: hidden; text-overflow: ellipsis; }
.cuenta-caret { color: var(--muted); font-size: 10px; }

/* EL AVATAR. Hoy son las iniciales; el dia que haya una imagen o un icono solo cambia
   lo de DENTRO del circulo, no la barra. Fondo solido del acento y texto sobre el
   —`--color-accent-on`—, que es el par que la agencia elige y `src/acento.js` deriva
   cumpliendo 4,5:1. Nunca `--color-accent-text`, que es un color de TEXTO: confundir
   los dos es el error que este proyecto ya ha cometido seis veces. */
.avatar { width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-accent-solid); color: var(--color-accent-on);
  font-size: 10.5px; font-weight: var(--w-strong); letter-spacing: .02em;
  font-variant-numeric: tabular-nums; overflow: hidden; user-select: none; }
.avatar-lg { width: 38px; height: 38px; font-size: 14px; }
.avatar-sm { width: 22px; height: 22px; font-size: 9.5px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* EL MISMO CÍRCULO EN LA COLA DE TRABAJO (06/09/2026, lo pidió el operario). Allí hay
   que distinguir de un vistazo lo TUYO de lo de otra persona, cosa que en la barra no se
   plantea —el avatar de la barra eres siempre tú—, así que el componente tiene dos
   variantes y el acento sólido se reserva para lo tuyo.
   Antes había TRES dibujos del mismo dato: el círculo de la barra, una cápsula gris en
   la columna «Asignado» y un cuadrado con borde en el detalle. Los dos últimos se ven A
   LA VEZ en la misma pantalla. */
.avatar-otro { background: var(--band); color: var(--label-strong); border: 1px solid var(--border-strong); }
.avatar-nadie { background: transparent; color: var(--muted); border: 1px dashed var(--border-strong);
  font-weight: var(--w-regular); }
/* LA PILA de quienes llevan las declaraciones de un legajo. Se superponen para que tres
   quepan en los 76 px de la columna; el anillo del color de la fila las separa. */
.pila { display: inline-flex; align-items: center; }
.pila .avatar { margin-left: -7px; box-shadow: 0 0 0 1.5px var(--panel); }
.pila .avatar:first-child { margin-left: 0; }
.pila .avatar:hover { z-index: 1; }
.pila-mas { margin-left: 3px; color: var(--muted); font-size: 12px; letter-spacing: .5px; }

/* EL MENU DE CUENTA. Mismo lenguaje que el de «+ Nuevo»: misma sombra, mismo borde
   de acento, mismos filetes entre filas. Dos menus con dos aspectos serian dos
   sistemas. */
.cuenta-menu { position: absolute; z-index: 40; top: calc(100% + 5px); right: 0; min-width: 232px;
  background: var(--surface-solid); border: 1px solid var(--color-accent-300); box-shadow: var(--shadow-lg); }
.cm-cabecera { display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--surface-solid); }
.cm-quien { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cm-quien b { font-size: 13px; font-weight: var(--w-strong); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-rol { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.cm-item { display: flex; align-items: center; width: 100%; gap: 8px; padding: 9px 12px;
  font-size: 13px; font-family: inherit; text-align: left; color: var(--ink);
  background: transparent; border: 0; border-top: 1px solid var(--line-soft);
  cursor: pointer; text-decoration: none; }
.cm-item:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); text-decoration: none; }
.cm-valor { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.cm-sep { height: 5px; background: var(--surface-solid); border-top: 1px solid var(--line-soft); }
.cm-salir { color: var(--red); font-weight: var(--w-medium); }
.cm-salir:hover { background: var(--red-bg); }

/* Un icono suelto de la barra (hoy, la bandera de reportar un fallo). */
.icono-btn { width: 30px; height: 30px; flex: none; display: inline-flex; align-items: center;
  justify-content: center; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; }
.icono-btn:hover { border-color: var(--border-strong); color: var(--color-accent-text); background: var(--surface-solid); }
.icono-btn:disabled { opacity: .55; cursor: default; }
/* Aquí vivía `#salirBtn { color: var(--dim) }`, del «Salir» suelto de la barra vieja.
   Se retira el 06/09/2026 con esa barra. Dejó una cicatriz que merece quedar escrita:
   como «Salir» conservó su id al mudarse al menú, esa regla POR ID —especificidad de
   identificador— seguía ganando a `.cm-salir` y pintaba de gris el rojo del menú. Sin
   ningún error: el contraste era correcto (4,67:1), solo era el color equivocado, así
   que ni `check:modo-oscuro` podía verlo. Apareció mirando una captura y midiendo el
   color calculado. Moraleja para esta hoja: un componente se viste por CLASE; una regla
   por id sobrevive al componente que la pidió y muerde al siguiente que herede el id. */

@media (max-width: 900px) {
  .appbar-in { gap: 12px; }
  .nav-link { padding: 6px 7px; }
}

/* =============================== BOTONES ================================== */
.btn { border: 1px solid var(--border-strong); background: transparent; color: var(--ink); border-radius: 4px;
  padding: 8px 14px; font-weight: var(--w-medium); font-size: 13px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; line-height: 1.35;
  transition: border-color .12s, color .12s, background .12s; }
.btn:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }
/* UN DESHABILITADO NO SE APAGA CON OPACIDAD (12/09/2026, lo vio el operario en
   la hoja de diseno de los dialogos). Un `opacity` sobre un boton SOLIDO deja el
   texto blanco sobre un fondo ya palido: en claro salia a 2,1:1 y parecia texto
   en blanco sobre nada. Se apaga cambiando de estilo, no de transparencia. */
.btn:disabled { background: var(--band); border-color: var(--border); color: var(--muted);
  cursor: default; filter: none; }
.btn:disabled:hover { background: var(--band); border-color: var(--border); color: var(--muted); }
.btn-primary, .btn-danger, .btn-full { font-weight: var(--w-strong); }
.btn-primary { background: var(--color-accent-solid); border-color: var(--color-accent-solid);
  color: var(--color-accent-on); }
.btn-primary:hover { background: var(--color-accent-solid-hover);
  border-color: var(--color-accent-solid-hover); color: var(--color-accent-on); }
.btn-ghost { border-color: transparent; color: var(--muted); background: transparent; }
.btn-ghost:hover { color: var(--blue); background: var(--blue-bg); border-color: transparent; }
.btn-danger { background: var(--red); border-color: var(--red); color: var(--color-accent-on); }
.btn-danger:hover { filter: brightness(1.06); color: var(--color-accent-on); border-color: var(--red); }
.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 4px; }
.btn-full { width: 100%; justify-content: center; padding: 10px; font-size: 14px; border-radius: 4px; }
/* Enlace con aspecto de acción discreta (tablas) */
.lnk { background: none; border: none; color: var(--blue); cursor: pointer; font-size: 12.5px;
  font-weight: var(--w-medium); padding: 3px 6px; text-decoration: none; }
.lnk:hover { text-decoration: underline; }
.lnk.danger { color: var(--red); }

/* =============================== LAYOUT =================================== */
.wrap { max-width: var(--content-max); margin: 0 auto; padding: 22px 22px 64px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.page-head h1 { font-size: 21px; font-weight: var(--w-strong); letter-spacing: -.02em; margin: 0; }
.page-head p { color: var(--muted); margin: 4px 0 0; font-size: 13px; }
.section-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--label);
  font-weight: var(--w-strong); margin: 24px 0 11px; display: flex; align-items: center; gap: 8px; }
.section-label .count { background: var(--band); color: var(--muted); border-radius: 20px; padding: 1px 9px; font-size: 11px; }

/* ================================ TARJETA ================================= */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; margin-bottom: 16px; box-shadow: var(--shadow); }
.card h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--label);
  margin: 0 0 4px; font-weight: var(--w-strong); }
.card .csub { color: var(--muted); font-size: 12.5px; margin: 0 0 16px; line-height: 1.5; }
.subsec { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--label);
  font-weight: var(--w-strong); margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--border); }
.subsec:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

/* ============================== FORMULARIOS =============================== */
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: var(--w-medium); font-size: 12.5px; margin-bottom: 5px; }
.field input[type=text], .field input[type=password], .field select, .field textarea,
input.ctl, select.ctl {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: 4px;
  font-size: 14px; background: var(--surface-solid); color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus, .ctl:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-bg); }
.field .hint { color: var(--muted); font-size: 12px; margin-top: 4px; line-height: 1.45; }
/* El aviso de obligatorio no puede pesar más que el nombre del campo: avisa el
   color, no la negrita. */
.field .req { color: var(--red); font-weight: var(--w-medium); font-size: 11px; margin-left: 5px; }
.field .opt { color: var(--faint); font-weight: var(--w-regular); font-size: 11px; margin-left: 5px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }
.actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.savehint { font-size: 12.5px; color: var(--muted); }
.savehint.ok { color: var(--green); font-weight: var(--w-medium); }
.savehint.warn { color: var(--amber); font-weight: var(--w-medium); }
.savehint.err { color: var(--red); font-weight: var(--w-medium); }
.formhint { color: var(--muted); font-size: 12.5px; }

/* Zona de arrastre de PDF: misma en la subida y en la recepción del tránsito. */
.dropzone { border: 2px dashed var(--border-strong); border-radius: 11px; padding: 26px; text-align: center;
  cursor: pointer; color: var(--muted); font-size: 14px; transition: border-color .12s, background .12s, color .12s; }
.dropzone:hover, .dropzone.drag { border-color: var(--blue); background: var(--blue-bg); color: var(--blue); }
.dropzone b { color: var(--blue); }
.dropzone .hint { color: var(--faint); font-size: 12.5px; display: block; margin-top: 4px; }

/* ================================ TABLAS ================================== */
/* Mismo aspecto de tabla en Usuarios, Auditoría y Configuración. */
.card table, table.tbl { width: 100%; border-collapse: collapse; }
.card table th, table.tbl th { text-align: left; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--label); font-weight: var(--w-strong); padding: 8px;
  border-bottom: 1px solid var(--border); white-space: nowrap; }
.card table td, table.tbl td { padding: 10px 8px; border-bottom: 1px solid var(--line-soft);
  font-size: 13px; vertical-align: middle; }
.card table tr:last-child td, table.tbl tr:last-child td { border-bottom: 0; }
td.acts, .cli-actions { text-align: right; white-space: nowrap; }
.muted { color: var(--faint); }
/* Resumen del expediente (30/08/2026): un campo en conflicto sin resolver no es un
   valor ni un dato ausente — su propio color, para no confundirlo con ninguno de los dos. */
.stat .v.conflict, .es-goods.conflict { color: var(--red); font-weight: var(--w-medium); }

/* ================= QUÉ ARRASTRA ESTE CÓDIGO (medidas TARIC) ==================
   Informativo, nunca de alarma: el código está BIEN y además la norma le cuelga cosas.
   Por eso no usa el rojo de los pendientes — el rojo aquí enseñaría a ignorarlo. */
.arrastra { margin: 4px 0 10px 0; padding: 9px 11px; border-radius: 6px;
  background: var(--band); border: 1px solid var(--line-soft); font-size: 12.5px; }
.ar-tit { font-weight: var(--w-strong); font-size: 11.5px; letter-spacing: .02em;
  text-transform: uppercase; color: var(--faint); display: flex; justify-content: space-between; gap: 10px; }
.ar-org { font-weight: 400; text-transform: none; letter-spacing: 0; }
.ar-lin { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ar-der b { font-weight: var(--w-medium); }
.ar-fito { margin-top: 7px; padding: 7px 9px; border-radius: 5px;
  background: var(--color-warn-bg); border: 1px solid var(--color-warn-bd); }
.ar-nofito { margin-top: 7px; color: var(--faint); }
.ar-otro { margin-top: 5px; color: var(--faint); }
.ar-exen { margin-top: 6px; }
.ar-exen-tit { font-weight: var(--w-medium); }
.ar-exen ul { margin: 4px 0 0 0; padding-left: 18px; }
.ar-exen li { margin: 2px 0; color: var(--faint); }
.ar-nada { margin-top: 5px; color: var(--faint); font-style: italic; }
.ar-tasa { margin-top: 7px; padding: 7px 9px; border-radius: 5px; background: var(--surface-solid); border: 1px solid var(--line-soft); }
.ar-tasa ul { margin: 4px 0 6px 0; padding-left: 18px; }
.ar-tasa li { margin: 2px 0; }
.ar-det { color: var(--faint); font-size: 11.5px; }
/* Una medida CADUCADA no es un aviso más: es un dato que parecería vigente si se
   callara. Color propio (ámbar, no rojo: no es un error del operario). */
.ar-caducada { margin-top: 7px; padding: 6px 9px; border-radius: 5px;
  background: var(--amber-bg); border: 1px solid var(--amber-bd); color: var(--amber); }
.ar-nota { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line-soft); }

/* ESPERANDO EL BL — un estado, no una alarma. Azul (informativo), nunca rojo: el
   operario no tiene nada que arreglar, solo que esperar al documento. */
/* Azul (informativo), NUNCA rojo: el operario no tiene nada que arreglar aquí, solo que
   esperar al documento. Convive con los pendientes de verdad, que sí van en rojo. */
.esperando-bl { margin: 0 0 14px 0; padding: 12px 14px; border-radius: var(--radius);
  background: var(--blue-bg); border: 1px solid var(--blue-bd); }
.esperando-bl .eb-tit { font-weight: var(--w-strong); color: var(--blue-dark); font-size: 14px; }
.esperando-bl .eb-sub { margin-top: 4px; font-size: 13px; color: var(--ink); }
.esperando-bl .eb-lista { margin-top: 7px; font-size: 12px; color: var(--muted); }

/* DE QUÉ CASILLA SALE, y el aviso de sin anclar. El aviso NO es rojo: no es un error,
   es un dato propuesto que hay que confirmar. Ámbar, como el resto de lo que pide
   confirmación en esta pantalla. */
.fr-casilla { font-size: 11px; color: var(--dim); font-family: var(--mono);
  background: var(--band); border: 1px solid var(--line-soft); border-radius: 4px; padding: 1px 6px; }
.fr-propuesta { flex-basis: 100%; width: 100%; grid-column: 1 / -1; margin-top: 6px; padding: 7px 9px; border-radius: 5px;
  background: var(--blue-bg); border: 1px solid var(--blue-bd); font-size: 12.5px; }
.fr-sinancla-in { margin-top: 5px; color: var(--amber); font-size: 11.5px; line-height: 1.45; }
.fr-propuesta .fr-usar { margin-top: 6px; }
.fr-sinancla { flex-basis: 100%; width: 100%; grid-column: 1 / -1; margin-top: 5px; padding: 6px 9px; border-radius: 5px;
  background: var(--amber-bg); border: 1px solid var(--amber-bd); color: var(--amber);
  font-size: 11.5px; line-height: 1.45; }

/* ============================== INSIGNIAS ================================= */
.badge-st { font-size: 11px; font-weight: var(--w-strong); padding: 3px 10px 3px 8px; border-radius: 20px;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.badge-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st-validated { background: var(--green-bg); color: var(--green); }
.st-ready { background: var(--amber-bg); color: var(--amber); }
.st-proc { background: var(--blue-bg); color: var(--blue); }
.st-received { background: var(--band); color: var(--muted); }
.st-error { background: var(--red-bg); color: var(--red); }
.st-transit { background: var(--purple-bg); color: var(--purple); }

.chip { background: var(--band); border: 1px solid var(--border); border-radius: 20px; padding: 2px 10px;
  font-size: 11.5px; font-weight: var(--w-medium); color: var(--muted); white-space: nowrap; }
.chip.warn { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-bd); }
.pill2 { font-size: 11.5px; font-weight: var(--w-medium); border-radius: 4px; padding: 2px 7px; white-space: nowrap; }

/* Insignias pequeñas de estado de usuario / origen del dato */
.badge-off  { font-size: 10.5px; font-weight: var(--w-medium); background: var(--band); color: var(--muted); border-radius: 20px; padding: 2px 9px; }
.badge-you  { font-size: 10.5px; font-weight: var(--w-medium); background: var(--blue-bg); color: var(--blue); border-radius: 20px; padding: 2px 9px; }
.badge-temp { font-size: 10.5px; font-weight: var(--w-strong); background: var(--amber-bg); color: var(--amber); border-radius: 20px; padding: 2px 9px; }
.badge-lock { font-size: 10.5px; font-weight: var(--w-strong); background: var(--red-bg); color: var(--red); border-radius: 20px; padding: 2px 9px; }

/* ================================ AVISOS ================================== */
/* Un solo componente de aviso, en cuatro tonos. Los alias mantienen los nombres
   que ya usaban las pantallas para no tocar su lógica. */
.notice, .advisory-box, .seg-warn, .errbox, .match-no, .match-ok, .mrn-bad,
.csv-block, .csv-warn, .sample-banner, .temp-box, .exp-why, .prov-banner {
  border-radius: 9px; padding: 11px 14px; font-size: 12.5px; line-height: 1.55;
  border: 1px solid var(--amber-bd); background: var(--amber-bg); color: var(--amber); }
.notice b, .advisory-box b, .seg-warn b, .exp-why b { color: inherit; font-weight: var(--w-strong); }

.notice.info, .advisory-box.soft, .prov-banner {
  background: var(--blue-bg); border-color: var(--blue-bd); color: var(--color-info); }
.notice.ok, .match-ok { background: var(--green-bg); border-color: var(--green-bd); color: var(--green); font-weight: var(--w-medium); }
.notice.danger, .errbox, .mrn-bad, .csv-block { background: var(--red-bg); border-color: var(--red-bd); color: var(--red); font-weight: var(--w-medium); }
.notice.plain { background: var(--band); border-color: var(--border); color: var(--muted); }

.advisory-box { margin-bottom: 14px; }
.csv-block, .csv-warn { margin-bottom: 10px; }
.exp-why { margin-top: 9px; padding: 7px 10px; font-size: 12px; }
.sample-banner { margin-bottom: 16px; }

/* Aviso de memoria de proveedor: es un aviso más, con el icono alineado al texto. */
#providerBanner:empty { display: none; }
/* UNA LINEA. El operario lo ve veinte veces al dia: flex-wrap para que en estrecho
   parta bien, y el texto no se corta con puntos suspensivos (perder informacion de un
   aviso es peor que ocupar dos lineas). */
.prov-banner { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 2px; flex-wrap: wrap; }
.prov-banner .pb-ico { font-size: 13px; flex: 0 0 auto; }
.prov-banner .pb-txt { flex: 1 1 auto; min-width: 0; }
.prov-banner .pb-sub { color: var(--muted); font-weight: var(--w-regular); }
/* "Ver detalle": enlace, no boton con caja. Lo que hay detras es informativo y casi
   nadie lo abrira; no debe competir con el texto del aviso. */
.prov-banner .pb-more { flex: 0 0 auto; background: none; border: 0; padding: 0;
  color: var(--blue); font: inherit; font-size: 12.5px; font-weight: var(--w-medium); cursor: pointer; }
.prov-banner .pb-more:hover { text-decoration: underline; }
.prov-banner .pb-detail { flex-basis: 100%; margin-top: 7px; padding-top: 7px;
  border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted); }

/* ================================ CHIPS =================================== */
.chips { display: flex; gap: 3px; flex-wrap: wrap; }
.chip2 { padding: 5px 9px; border-radius: 5px; font-size: 12px; font-weight: var(--w-medium); cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--muted); white-space: nowrap;
  line-height: 1.35; }
.chip2:hover { background: var(--band); color: var(--ink); }
.chip2.on { color: var(--color-accent-on); font-weight: var(--w-medium);
  background: var(--color-accent-solid); border-color: var(--color-accent-solid); }
.chip2 .n { opacity: .8; margin-left: 3px; }
.flab { font-size: 9.5px; font-weight: var(--w-strong); letter-spacing: .07em; color: var(--label); }
.fgrp { display: flex; align-items: center; gap: 7px; }

/* =========================== ESTADOS VACÍOS =============================== */
.empty { background: var(--panel); border: 1px dashed var(--border-strong); border-radius: var(--radius);
  padding: 48px 24px; text-align: center; color: var(--muted); }
.empty .ico { font-size: 28px; opacity: .5; }
.empty h3 { color: var(--ink); margin: 12px 0 4px; font-size: 17px; font-weight: var(--w-strong); }
.empty p { margin: 0 0 18px; }
.vacio { padding: 44px 18px; text-align: center; }
.vacio .t1 { font-size: 13.5px; color: var(--muted); font-weight: var(--w-medium); }
.vacio .t2 { font-size: 12px; color: var(--faint); margin-top: 5px; }

/* =============================== CARGANDO ================================= */
.spin { width: 12px; height: 12px; border: 2px solid var(--blue-bd); border-top-color: var(--blue);
  border-radius: 50%; animation: sp .8s linear infinite; display: inline-block; }
@keyframes sp { to { transform: rotate(360deg); } }

/* ========================= DIÁLOGOS Y SUPERPOSICIONES ===================== */
.modal-overlay { position: fixed; inset: 0; background: rgba(28,26,23,.45); display: flex;
  align-items: center; justify-content: center; z-index: 100; padding: 24px; }
.confirm-card { background: var(--surface-solid); border-radius: 0; width: min(440px, 96vw); padding: 22px 24px;
  box-shadow: var(--shadow-lg); }
.confirm-card h3 { margin: 0 0 8px; font-size: 16px; font-weight: var(--w-strong); }
.confirm-card p { margin: 0 0 20px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.confirm-card p b { color: var(--ink); }
.confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* Reportar un fallo (web/sesion.js, src/incidencias.js). Reutiliza .modal-overlay y
   .confirm-card; solo añade los campos. Todo con tokens: gira solo en oscuro. */
.reporte-card { width: min(560px, 96vw); max-height: 92vh; overflow: auto; }
.reporte-card label { display: block; font-weight: var(--w-medium); font-size: 12.5px; color: var(--label); margin: 12px 0 5px; }
.reporte-card .rp-req { color: var(--red); font-weight: var(--w-regular, 400); }
.reporte-card .rp-opt { color: var(--muted); font-weight: var(--w-regular, 400); }
.reporte-card input[type=text], .reporte-card input:not([type]), .reporte-card textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: 6px;
  background: var(--surface-solid); color: var(--ink); font-size: 14px; }
.reporte-card textarea { resize: vertical; min-height: 88px; }
/* LA ZONA DE ADJUNTOS. El control nativo `input[type=file]` no se puede vestir —lo
   dijo el operario en el ticket de5220dc: «el diseño de Elegir archivos no me parece
   correcto»— así que se esconde y se dispara desde un botón del sistema. Las cuatro
   puertas (elegir, arrastrar, pegar, capturar) acaban en la misma lista. */
.rp-zona { border: 1px dashed var(--border-strong); border-radius: 8px; padding: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  background: var(--surface-solid); transition: border-color .12s, background .12s; }
.rp-zona:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.rp-zona.arrastrando { border-color: var(--color-accent); border-style: solid; background: var(--color-accent-100, var(--blue-bg)); }
.rp-zona.con-adjuntos { padding: 10px; }
.rp-zona-txt { color: var(--muted); font-size: 12.5px; }
.rp-zona-txt kbd { font-family: var(--mono); font-size: 11.5px; border: 1px solid var(--border-strong);
  border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; color: var(--label-strong); background: var(--surface-solid); }
.rp-zona-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* Lo adjuntado, a la vista y con su ✕: por NDA la persona tiene que VER qué manda. */
.rp-lista { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rp-adj { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface-solid); }
.rp-adj-mini { width: 38px; height: 38px; flex: none; object-fit: cover; border-radius: 4px;
  border: 1px solid var(--border); background: var(--surface-solid); }
.rp-adj-doc { display: flex; align-items: center; justify-content: center; font-family: var(--mono);
  font-size: 10.5px; font-weight: var(--w-strong); color: var(--muted); }
.rp-adj-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; text-align: left; }
.rp-adj-txt b { font-size: 12.5px; font-weight: var(--w-medium); overflow-wrap: anywhere; }
.rp-adj-sub { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.rp-adj-quitar { flex: none; border: 1px solid transparent; background: transparent; color: var(--muted);
  cursor: pointer; border-radius: 4px; width: 26px; height: 26px; font-size: 13px; line-height: 1; }
.rp-adj-quitar:hover { color: var(--red); border-color: var(--red-bd); background: var(--red-bg); }
.rp-adj-quitar:disabled { opacity: .4; cursor: default; }
/* Aviso al hacer una captura: lo que sale en ella se manda tal cual. */
.rp-aviso-captura { margin-top: 8px; padding: 8px 10px; border-radius: 6px; font-size: 12.5px; line-height: 1.45;
  background: var(--color-warn-bg); border: 1px solid var(--color-warn-bd); color: var(--ink); }
.reporte-card .rp-detalles { margin-top: 14px; font-size: 12.5px; color: var(--muted); }
.reporte-card .rp-detalles summary { cursor: pointer; color: var(--label); font-weight: var(--w-medium); }
.reporte-card .rp-detalles ul { margin: 8px 0 0; padding-left: 18px; line-height: 1.5; }

/* ===================== LAS CINCO PIEZAS DE web/dialogo.js =================== */
/* Sustituyen a los 38 alert/confirm/prompt del navegador. Reutilizan
   .modal-overlay y .confirm-card: no hay una segunda familia de dialogos. */

.confirm-card.dlg h3 { line-height: 1.3; }
.confirm-card.dlg p { margin-bottom: 0; }
.confirm-card.dlg .confirm-actions { margin-top: 19px; }
.dlg-repartidas { justify-content: space-between !important; align-items: center; }
.dlg-par { display: flex; gap: 10px; }

/* La tira de dentro de un dialogo: el aviso que acompana a la consecuencia. */
.dlg-tira { display: flex; gap: 9px; align-items: flex-start; margin-top: 13px;
  padding: 9px 11px; font-size: 12.5px; line-height: 1.5; color: var(--ink); }
.dlg-tira.warn { background: var(--color-warn-bg); border: 1px solid var(--color-warn-bd); }
.dlg-tira.info { background: var(--color-info-bg); border: 1px solid var(--color-info-bd); }
.dlg-tira svg { flex: none; margin-top: 1px; }
.dlg-tira b { font-weight: var(--w-medium); }

/* El formulario: la unidad pegada al campo, donde no se puede ignorar. */
.dlg-form { width: min(500px, 96vw); }
.dlg-campos { display: grid; gap: 14px; margin-top: 15px; }
.dlg-campos.dlg-dos { grid-template-columns: 1fr 1fr; }
.dlg-rotulo { display: block; font-size: 12px; font-weight: var(--w-medium);
  color: var(--label); margin-bottom: 5px; }
.dlg-opt { color: var(--muted); font-weight: var(--w-regular, 400); }
.dlg-fila { display: flex; align-items: stretch; }
.dlg-input { flex: 1; min-width: 0; width: 100%; font-size: 14px; padding: 8px 10px;
  border: 1px solid var(--border-strong); border-radius: 6px;
  background: var(--surface-solid); color: var(--ink); }
.dlg-input.mono { font-family: var(--mono); }
.dlg-input.mal { border-color: var(--red); }
.dlg-input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.dlg-fila .dlg-input { border-radius: 6px 0 0 6px; }
.dlg-fila .dlg-input:only-child { border-radius: 6px; }
.dlg-unidad { display: flex; align-items: center; padding: 8px 10px; font-family: var(--mono);
  font-size: 12.5px; color: var(--muted); background: var(--band);
  border: 1px solid var(--border-strong); border-left: 0; border-radius: 0 6px 6px 0; }
.dlg-pista { margin: 5px 0 0; font-size: 11.5px; color: var(--muted); min-height: 1em; }
.dlg-pista.mal { color: var(--red); }

/* El fallo en el sitio: al pie de lo que se pulso, sin tapar nada. */
.dlg-fallo { display: flex; gap: 9px; align-items: flex-start; margin-top: 11px;
  padding: 9px 11px; font-size: 12.5px; line-height: 1.5; color: var(--ink);
  background: var(--color-alert-bg); border: 1px solid var(--color-alert-bd); }
.dlg-fallo svg { flex: none; margin-top: 1px; }
.dlg-fallo-txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dlg-fallo .btn { flex: none; }
.dlg-fallo-x { flex: none; border: 0; background: transparent; color: var(--muted);
  cursor: pointer; font-size: 17px; line-height: 1; padding: 0 2px; }
.dlg-fallo-x:hover { color: var(--ink); }
/* Sin ancla, flota abajo a la derecha — y NO se va sola. */
.dlg-fallo-flota { position: fixed; right: 18px; bottom: 18px; z-index: 120;
  max-width: min(400px, calc(100vw - 36px)); margin: 0; box-shadow: var(--shadow-lg); }

/* El rechazo con sus motivos: se queda, y cada linea lleva a su campo. */
.dlg-motivos { margin-top: 12px; border: 1px solid var(--border);
  background: var(--surface-solid); }
.dlg-motivos-tit { display: flex; align-items: center; gap: 9px; padding: 9px 12px;
  border-bottom: 1px solid var(--border); font-size: 13px; }
.dlg-motivos-tit svg { flex: none; }
.dlg-motivos-n { color: var(--muted); font-size: 12px; }
.dlg-motivos-tit .dlg-fallo-x { margin-left: auto; }
.dlg-motivos-lista { list-style: none; margin: 0; padding: 0; }
.dlg-motivos-lista li { display: flex; gap: 10px; align-items: baseline;
  padding: 8px 12px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.dlg-motivos-lista li:last-child { border-bottom: 0; }
.dlg-pin { width: 3px; align-self: stretch; flex: none; background: var(--red); }
.dlg-que { flex: 1; min-width: 0; }
.dlg-ir { flex: none; border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: var(--w-medium); color: var(--blue); }
.dlg-ir:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .dlg-campos.dlg-dos { grid-template-columns: 1fr; }
  .dlg-repartidas { flex-wrap: wrap; gap: 10px; }
}
.reporte-card .rp-detalles li { overflow-wrap: anywhere; }
.reporte-card .rp-detalles b { color: var(--label-strong); }
.reporte-card .rp-nota { margin: 10px 0 0; color: var(--color-warn); font-size: 12.5px; }
.reporte-card .confirm-actions { margin-top: 18px; }
.rp-estado { border-radius: 6px; padding: 9px 12px; font-size: 13px; line-height: 1.45; margin: 4px 0 6px;
  background: var(--blue-bg); border: 1px solid var(--blue-bd); color: var(--ink); overflow-wrap: anywhere; }
.rp-estado.bien { background: var(--green-bg); border-color: var(--green-bd); color: var(--green); font-weight: var(--w-medium); }
.rp-estado.mal { background: var(--red-bg); border-color: var(--red-bd); color: var(--red); font-weight: var(--w-medium); }

/* Aviso de sesión a punto de caducar (no perder trabajo).
   Flota sobre el contenido: fondo OPACO obligatorio. Es un aviso, asi que va con los
   tokens de --color-warn, que giran solos. El fondo literal de antes no giraba, y el
   texto usaba --color-accent-on, que gira AL REVES (blanco en claro, casi negro en
   oscuro) -> 1,22:1 en modo oscuro, invisible. Medido el 04/09/2026. */
.sesion-aviso { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 9999;
  display: flex; align-items: center; gap: 14px;
  background: var(--color-warn-bg); color: var(--ink); border: 1px solid var(--color-warn-bd);
  border-radius: 10px; padding: 13px 18px; box-shadow: var(--shadow-lg); font-size: 13.5px; max-width: 92vw; }
.sesion-aviso b { color: var(--color-warn); }
.sesion-aviso button { border: none; background: var(--color-accent-solid); color: var(--color-accent-on);
  border-radius: 7px;
  padding: 8px 14px; font-weight: var(--w-strong); font-size: 13px; cursor: pointer; white-space: nowrap; }
.sesion-aviso button:hover { background: var(--color-accent-solid-hover); }

/* Volver a identificarse sin salir de la pantalla */
.relogin-ov { position: fixed; inset: 0; background: rgba(28,26,23,.55); z-index: 10000;
  display: grid; place-items: center; padding: 20px; }
.relogin-card { background: var(--surface-solid); border: 1px solid var(--border); padding: 24px 26px;
  width: 100%; max-width: 380px; box-shadow: var(--shadow-lg); }
.relogin-card h3 { margin: 0 0 6px; font-size: 16px; }
.relogin-card p { color: var(--muted); font-size: 13px; margin: 0 0 16px; line-height: 1.5; }
.relogin-card label { display: block; font-weight: var(--w-medium); font-size: 12.5px; margin: 10px 0 5px; }
.relogin-card input { width: 100%; padding: 9px 11px; border: 1px solid var(--border-strong);
  border-radius: 7px; font-size: 14px; }
.relogin-card input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-bg); }
.relogin-card button { width: 100%; margin-top: 16px; padding: 10px; border: none;
  background: var(--color-accent-solid);
  color: var(--color-accent-on); border-radius: 8px; font-weight: var(--w-strong); font-size: 14px; cursor: pointer; }
.relogin-card button:hover { background: var(--color-accent-solid-hover); }
.rl-err:not(:empty) { background: var(--red-bg); border: 1px solid var(--red-bd); color: var(--red);
  border-radius: 7px; padding: 9px 12px; font-size: 12.5px; font-weight: var(--w-medium); margin-bottom: 6px; }

/* ===================== PANTALLAS DE ACCESO (login/setup) ================== */
/* Mismo lenguaje: misma marca, mismos campos, mismo azul de acción. */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-card { width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.auth-brand .logo { height: 26px; width: auto; display: block; flex: 0 0 auto; }
.auth-brand .mark { width: 28px; height: 28px; border-radius: 7px;
  background: linear-gradient(135deg, #1a6fe0, #0a3f8f); display: grid; place-items: center; flex: 0 0 auto; }
.auth-brand b { font-size: 14.5px; font-weight: var(--w-strong); display: block; line-height: 1.15; }
.auth-brand small { font-size: 10.5px; color: var(--dim); }
.auth-card h1 { font-size: 19px; margin: 0 0 4px; font-weight: var(--w-strong); }
.auth-card .sub { color: var(--muted); font-size: 13px; margin-bottom: 20px; line-height: 1.5; }
.auth-card .err { background: var(--red-bg); border: 1px solid var(--red-bd); color: var(--red);
  border-radius: 7px; padding: 10px 13px; font-size: 13px; margin-bottom: 15px; font-weight: var(--w-medium); }
.auth-foot { margin-top: 18px; color: var(--faint); font-size: 11.5px; text-align: center; line-height: 1.5; }

/* =================== PANEL DE EXPEDIENTES (tabla densa) =================== */
.toolbar { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 13px 16px 11px; margin-bottom: 14px; box-shadow: var(--shadow); }
.searchrow { display: flex; align-items: center; gap: 12px; }
.searchbox { position: relative; flex: 1; }
.searchbox svg { position: absolute; left: 12px; top: 12px; }
.searchbox input { width: 100%; height: 42px; padding: 0 92px 0 38px; font-size: 15px; color: var(--ink);
  background: var(--surface-solid); border: 1.5px solid var(--border-strong); border-radius: 7px; }
.searchbox input:focus { outline: none; border-color: var(--blue); background: var(--surface-solid); box-shadow: 0 0 0 3px var(--blue-bg); }
.searchbox .kbd { position: absolute; right: 10px; top: 10px; display: flex; align-items: center; gap: 6px; }
.searchbox .kbd span { font-size: 10.5px; color: var(--faint); }
  .searchbox .kbd b { font-family: var(--mono); font-size: 11px; font-weight: var(--w-medium); color: var(--muted);
  border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; background: transparent; }
.resumen { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.filterrow { display: flex; align-items: center; gap: 18px; margin-top: 11px; flex-wrap: wrap; }
.filterrow select { height: 28px; font-size: 12px; color: var(--ink); background: var(--surface-solid);
  border: 1px solid var(--border-strong); border-radius: 6px; padding: 0 6px; }
.filterrow select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-bg); }
.chip-fin { border: 1px solid var(--border-strong); }
.chip-fin.on { border-color: var(--blue); }

/* Sin overflow:hidden: recortaría el desplazamiento y rompería la cabecera fija de
   la tabla (se superponía a la primera fila). Las esquinas se redondean por partes. */
.tabla { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); }
.tabla .thead { border-radius: var(--radius) var(--radius) 0 0; }
.tabla .trow:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.thead, .trow { display: grid; align-items: center;
  grid-template-columns: 3px minmax(150px,.9fr) 104px minmax(130px,1.1fr) 148px 46px 92px minmax(150px,1.4fr) 124px; }
.thead { padding: 8px 0; background: var(--surface-solid); border-bottom: 1px solid var(--border);
  font-size: 9.5px; font-weight: var(--w-strong); letter-spacing: .07em; text-transform: uppercase; color: var(--label);
  position: sticky; top: calc(var(--banner-h) + var(--appbar-h)); z-index: 10; }
/* CABECERA DE BLOQUE — el nivel de arriba de la cola de trabajo. Agrupa por
   QUIEN ESTA BLOQUEANDO: algo salio mal / te toca a ti / no depende de ti.
   Pesa mas que la banda de cola, que va debajo y es el detalle. */
.gblock { display: flex; align-items: baseline; gap: 10px; padding: 18px 14px 7px;
  border-bottom: 1px solid var(--ink); }
.gblock:first-child { padding-top: 10px; }
/* `.gbnum` (el cuadradito 1/2/3) y `.gbsub` («es el trabajo», «espera») se retiran el
   06/09/2026 con la limpieza de las colas: el nombre del grupo se basta. */
.gblock .gblab { font-size: 13px; font-weight: var(--w-strong); color: var(--ink); }
.gblock .gbcount { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

.gband { display: flex; align-items: center; gap: 9px; padding: 7px 14px 6px; background: var(--band);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.gband .gdot { width: 7px; height: 7px; border-radius: 2px; flex: 0 0 auto; }
.gband .glab { font-size: 10px; font-weight: var(--w-strong); letter-spacing: .07em; text-transform: uppercase; color: var(--label-strong); }
.gband .gcount { font-family: var(--mono); font-size: 10.5px; color: var(--muted);
  background: var(--border); border-radius: 3px; padding: 1px 6px; }
.gband .ghint { font-size: 11px; color: var(--faint); }
/* ───────────────── LA COLA SON CARPETAS (06/09/2026) ────────────────────────
   Lo pidió el operario: «que los Expedientes aparezcan como una especie de carpetas y
   dentro se puedan ver los ficheros». La fila de carpeta usa el MISMO reparto de
   columnas que una fila normal —si no, la lista se parte en dos tablas y se deja de
   leer en columnas— y lo que hay dentro va sangrado, con su propio ritmo. */
.trow.carpeta .ref { display: flex; align-items: center; gap: 7px; }
/* El triángulo es un BOTÓN propio: despliega sin abrir la ficha. Se le da un área de
   pulsación de 20 px, que es lo mínimo para acertar sin apuntar. */
.trow.carpeta .cp-tri { flex: none; width: 20px; height: 20px; display: flex;
  align-items: center; justify-content: center; margin-left: -4px;
  border: 1px solid transparent; border-radius: 4px; background: transparent;
  color: var(--muted); font-size: 10px; cursor: pointer; padding: 0; }
.trow.carpeta .cp-tri:hover { background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--color-accent-text); }
.trow.carpeta .cp-tri:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.trow.carpeta .cp-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow.carpeta.abierta { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.trow.carpeta.abierta .cp-tri { color: var(--color-accent-text); }
.trow.carpeta .cp-cuenta { font-variant-numeric: tabular-nums; }

/* Lo que hay dentro. Fondo propio y filete a la izquierda: se ve de un vistazo dónde
   empieza y dónde acaba una carpeta abierta, sin tener que leer la sangría. */
.chijos { background: var(--surface-solid); border-left: 3px solid var(--color-accent-300);
  border-bottom: 1px solid var(--line-soft); }
.chijo { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 30px;
  font-size: 12.5px; cursor: pointer; border-top: 1px solid var(--line-soft); }
.chijo:first-child { border-top: 0; }
.chijo:hover { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.chijo .cj-ic { flex: none; color: var(--muted); font-size: 11px; }
.chijo .cj-nom { font-weight: var(--w-medium); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46%; }
.chijo .cj-est { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chijo .cj-sub { margin-left: auto; flex: none; color: var(--color-accent-text); font-size: 11.5px; }
.chijo.excluido { opacity: .55; }
.chijo.excluido .cj-sub { color: var(--muted); }
.chijo.vacia { cursor: default; color: var(--muted); font-style: italic; }
.chijo.vacia:hover { background: transparent; }

/* Un fichero, abierto sin salir de la cola. */
.fichero-card { background: var(--surface-solid); width: min(1000px, 94vw); height: min(86vh, 900px);
  display: flex; flex-direction: column; box-shadow: var(--shadow-lg); border: 1px solid var(--border); }
.fc-cab { display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-bottom: 1px solid var(--border); }
.fc-nom { font-weight: var(--w-strong); font-size: 13.5px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.fc-ref { font-size: 12px; color: var(--muted); }
.fc-cab .btn { flex: none; }
.fc-cab #fcAparte { margin-left: auto; }
.fc-marco { flex: 1; width: 100%; border: 0; background: var(--band); }

/* ─────────── NINGUNA COLUMNA PISA A OTRA. NUNCA. (06/09/2026) ───────────────
   Lo dijo el operario con una captura delante: «hay letras por encima de otras […]
   esto no debe pasar nunca, en ninguna columna».

   El mecanismo: una celda de una rejilla tiene `min-width: auto`, que significa «al
   menos lo que mida tu contenido». Con un texto en `nowrap` y sin `overflow`, la celda
   no lo recorta: lo deja salir, y se dibuja ENCIMA de la vecina. No hay error, no hay
   aviso; solo dos textos superpuestos.

   Se cerraba columna a columna —`.cli` y `.falta` lo tenían, `.est` no— y así es como
   una columna nueva nace desprotegida. Aquí se cierra para TODAS de una vez: cada celda
   se queda dentro de su caja, pase lo que pase con el contenido.

   ⚠️ Esto es la RED, no la solución: un rótulo recortado sigue sin decir lo que dice.
   El ancho de cada columna tiene que dar para su contenido más largo (ver COLS en
   web/panel.js); esto solo garantiza que, cuando no dé, se recorte en vez de pisar. */
.thead > *, .trow > * { min-width: 0; overflow: hidden; }
/* La barra de régimen es un filete de 3 px pegado al borde: no recorta nada. */
.trow > .bar { overflow: visible; }

.trow { border-bottom: 1px solid var(--line-soft); min-height: 34px; padding: 6px 0; cursor: pointer; }
.trow:last-child { border-bottom: 0; }
.trow:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.trow .bar { align-self: stretch; width: 3px; }
/* Las referencias son texto libre y pueden ser largas: se recortan para que la
   tabla siga siendo densa y todas las filas midan igual. */
.trow .ref { padding-left: 14px; padding-right: 10px; font-family: var(--mono);
  font-size: 12.5px; font-weight: var(--w-strong); color: var(--ink); letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cli { font-size: 12.5px; font-weight: var(--w-medium); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 12px; }
.est { display: flex; align-items: center; gap: 6px; min-width: 0; }
.est .edot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.est .elab { font-size: 12px; font-weight: var(--w-strong); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.docs { text-align: right; padding-right: 8px; font-family: var(--mono); font-size: 12px;
  font-weight: var(--w-regular); color: var(--muted); }
.edad { font-family: var(--mono); font-size: 12px; font-weight: var(--w-regular); color: var(--dim); }
.edad.w1 { color: var(--ink); }
.edad.w2 { color: var(--amber); }
.edad.w3 { color: var(--red); }
.edad.off { color: var(--faint); }
.falta { font-size: 12.5px; font-weight: var(--w-regular); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 12px; }
.acts2 { padding-right: 12px; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.acc { font-size: 11.5px; font-weight: var(--w-medium); color: var(--ink); background: transparent; border: 1px solid var(--border-strong);
  border-radius: 6px; padding: 3px 9px; cursor: pointer; white-space: nowrap; text-decoration: none; }
.acc:hover { background: var(--color-accent-solid); color: var(--color-accent-on);
  border-color: var(--color-accent-solid); text-decoration: none; }
.del2 { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--faint); border-radius: 5px; cursor: pointer;
  opacity: 0; transition: opacity .12s, color .12s, background .12s; }
.trow:hover .del2 { opacity: .7; }
.del2:hover { opacity: 1; color: var(--red); background: var(--red-bg); }
.pie { display: flex; align-items: center; gap: 16px; padding: 10px 2px 0; }
.pie .l { font-size: 11.5px; color: var(--muted); }
.pie .r { font-size: 11px; color: var(--faint); margin-left: auto; }
.pie .r b { font-family: var(--mono); font-weight: var(--w-medium); }

@media (max-width: 1150px) {
  .thead, .trow { grid-template-columns: 3px minmax(130px,1fr) 96px minmax(110px,1fr) 140px 40px 84px 116px; }
  .col-falta { display: none; }
}
@media (max-width: 860px) {
  .thead, .trow { grid-template-columns: 3px minmax(120px,1fr) minmax(100px,1fr) 132px 84px 112px; }
  .col-reg, .col-docs { display: none; }
}

/* ============================================================================
   MARCAS DE REGISTRO — el acento del lenguaje blueprint. Se ponen DONDE
   APORTAN (un bloque de eleccion, una zona de trabajo), nunca en todo: si
   todo lleva marcas, no marcan nada.
     <div class="bp"><i class="cnr tl"></i><i class="cnr tr"></i>
                     <i class="cnr bl"></i><i class="cnr br"></i> … </div>
   ========================================================================= */
.bp { position: relative; }
.bp > .cnr { position: absolute; width: 11px; height: 11px; color: var(--dim); }
.bp > .cnr::before, .bp > .cnr::after { content: ""; position: absolute; background: currentColor; }
.bp > .cnr::before { left: 5px; top: 0; width: 1px; height: 100%; }
.bp > .cnr::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.bp > .cnr.tl { top: -6px; left: -6px; }
.bp > .cnr.tr { top: -6px; right: -6px; }
.bp > .cnr.bl { bottom: -6px; left: -6px; }
.bp > .cnr.br { bottom: -6px; right: -6px; }

/* ============================================================================
   ARMAZÓN DE TRES COLUMNAS — rail · lista · detalle.
   HERRAMIENTA DE ESCRITORIO: altura fija de pantalla y ancho mínimo. Cada
   columna se desplaza sola, así que la lista nunca arrastra a la página. Se
   deja aquí y no en la página porque /validacion ya es una partida en dos y
   acabará compartiendo esto.
   ========================================================================= */
body.app3 { height: 100vh; overflow: hidden; display: flex; flex-direction: column; min-width: 1480px; }
.cols3 { flex: 1; min-height: 0; display: grid;
  grid-template-columns: 224px minmax(0, 1fr) 352px; grid-template-rows: minmax(0, 1fr); }
.cols3 > * { min-height: 0; }

/* --- 1 · el rail: se elige UNA cola --- */
.rail { border-right: 1px solid var(--border); overflow-y: auto; padding-bottom: 20px; }
.rail .r-grupo { display: flex; align-items: baseline; gap: 6px; padding: 16px 16px 4px; }
.rail .r-glab { font-size: 10.5px; font-weight: var(--w-strong); letter-spacing: .07em;
  text-transform: uppercase; color: var(--label); }
.rail .r-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 16px;
  border: 0; background: transparent; color: inherit; font: inherit; font-size: 13px;
  cursor: pointer; text-align: left; border-left: 3px solid transparent; }
.rail .r-item:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.rail .r-item.on { border-left-color: var(--color-accent); font-weight: var(--w-medium);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.rail .r-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.rail .r-n { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.rail .r-item.on .r-n { color: var(--color-accent-text); }
/* `.r-hint` era la línea que se abría bajo la cola elegida explicándola. Retirada el
   06/09/2026 a petición del operario: lo que decía vive ahora en el nombre. */
.rail .r-sep { height: 1px; background: var(--border); margin: 12px 16px; }

/* --- 2 · la lista --- */
.lista { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.lista-bar { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  border-bottom: 1px solid var(--border); min-width: 0; overflow: hidden; }
.lista-bar .resumen { margin-left: auto; flex: none; white-space: nowrap; }
/* «Al día · hh:mm:ss» (web/alDia.js), en /cola y en /expedientes. Un fallo NO se calla:
   cambia de tinta y dice desde qué hora lo que se ve no está al día. */
.al-dia { margin-left: auto; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 12px; color: var(--color-mute); }
.al-dia.sin-actualizar { color: var(--color-warn); background: var(--color-warn-bg);
  border: 1px solid var(--color-warn-bd); padding: 2px 8px; }
.lista-bar .searchbox { flex: 1 1 220px; min-width: 180px; max-width: 420px; }
.lista-bar .searchbox input { height: 34px; font-size: 13.5px; padding: 0 82px 0 34px; }
.lista-bar .searchbox svg { top: 9px; left: 10px; color: var(--muted); }
.lista-bar .searchbox .kbd { top: 7px; }
/* OJO CON LA ESPECIFICIDAD: `select.ctl` es elemento+clase y gana a una clase
   sola, asi que un `.ctl-auto { width:auto }` a secas NO desactivaba el
   `width:100%` y el desplegable se comia la barra entera, empujando el resumen
   dentro de la columna de detalle. Por eso va con el elemento delante. */
select.ctl-auto, input.ctl-auto { width: auto; flex: none; height: 30px;
  font-size: 12.5px; padding: 5px 9px; line-height: 1.25; }
.lista-head { flex: none; }
.lista-scroll { flex: 1; min-height: 0; overflow-y: auto; }
/* Control segmentado: «todos» / «los míos». */
.seg { display: inline-flex; flex: none; border: 1px solid var(--border-strong); }
.seg button { border: 0; background: transparent; color: var(--muted); font: inherit;
  font-size: 12.5px; padding: 5px 11px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--border-strong); }
.seg button.on { background: var(--color-accent-solid); color: var(--color-accent-on); font-weight: var(--w-medium); }

/* --- 3 · el detalle --- */
.detalle { border-left: 1px solid var(--border); overflow-y: auto; padding: 16px; }
.detalle .d-vacio { color: var(--muted); font-size: 13px; padding: 40px 4px; text-align: center; }
.detalle .d-tit { font-size: 10px; font-weight: var(--w-strong); letter-spacing: .09em;
  text-transform: uppercase; color: var(--label); margin: 18px 0 8px; }
.detalle .d-tit:first-child { margin-top: 0; }
.detalle .d-ref { font-family: var(--mono); font-size: 13.5px; font-weight: var(--w-strong); word-break: break-all; }
.detalle .d-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.detalle .d-kv { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0;
  border-bottom: 1px solid var(--line-soft); font-size: 12.5px; }
.detalle .d-kv .k { color: var(--muted); }
.detalle .d-kv .v { font-weight: var(--w-medium); text-align: right; }
.detalle .d-kv .v.mono { font-family: var(--mono); }
.detalle .d-kv .v.falta { color: var(--color-mute); font-style: italic; font-weight: var(--w-regular); }

/* Quién lo lleva */
.d-quien { display: flex; align-items: center; gap: 9px; }
/* `.d-avatar` vivió aquí hasta el 06/09/2026: era un cuadrado con borde, la tercera
   forma de dibujar unas iniciales en el producto. Ahora usa `.avatar`, como la barra y
   como la columna. */
.d-quien .nom { font-size: 12.5px; font-weight: var(--w-medium); }
.d-quien .nom.nadie { color: var(--muted); font-weight: var(--w-regular); font-style: italic; }
/* Cuántas declaraciones lleva cada persona, en la ficha de un legajo. */
.d-quien + .d-quien { margin-top: 6px; }
.d-quien .d-quien-n { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

/* EL SEMÁFORO DE LECTURA. Una barra de tres tramos: cuántos campos puedes dar
   por buenos, cuántos tienen una sola fuente y cuántos hay que mirar. */
.d-conf { display: flex; height: 8px; margin: 8px 0 6px; }
.d-conf i { display: block; }
.d-conf .cv { background: var(--color-success); }
.d-conf .ca { background: var(--color-warn); }
.d-conf .cr { background: var(--color-alert); }
.d-leyenda { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--muted); }
.d-leyenda span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; }
.d-leyenda .lv::before { background: var(--color-success); }
.d-leyenda .la::before { background: var(--color-warn); }
.d-leyenda .lr::before { background: var(--color-alert); }
.d-nota { font-size: 11.5px; color: var(--muted); line-height: 1.45; margin-top: 6px; }

/* «+ Nuevo» partido y el interruptor de tema */
.nuevo-split { position: relative; display: flex; align-items: stretch; flex: none; }
.nuevo-split .nuevo-mas { margin-left: 1px; padding: 5px 7px; }
.nuevo-menu { position: absolute; z-index: 40; top: calc(100% + 5px); right: 0; min-width: 264px;
  background: var(--surface-solid); border: 1px solid var(--color-accent-300); box-shadow: var(--shadow-lg); }
.nuevo-menu a { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px;
  color: var(--ink); border-top: 1px solid var(--line-soft); text-decoration: none; }
.nuevo-menu a:first-child { border-top: 0; }
.nuevo-menu a:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); text-decoration: none; }
.nuevo-menu .nm-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.nuevo-menu .nm-sub { margin-left: auto; font-size: 11px; color: var(--muted); }
/* La fila abierta en el detalle. Marcada por el filete, no por el fondo: el
   fondo ya lo usa el hover y dos señales en el mismo sitio se estorban. */
.trow.on { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.trow.on .bar { box-shadow: inset 0 0 0 1px var(--color-accent); }
/* Un dato del despacho en el detalle: valor grande y el porqué debajo, los dos
   en la tinta de su estado. El porqué es la mitad del valor — «no coinciden:
   elige tú» convierte un color en una tarea. */
.d-campo { padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.d-campo .dc-k { font-size: 11px; color: var(--muted); }
.d-campo .dc-v { font-size: 13px; font-weight: var(--w-medium); word-break: break-all; margin-top: 1px; }
.d-campo .dc-n { font-size: 10.5px; margin-top: 1px; opacity: .85; }
/* Cabecera del rail: el número grande es lo primero que se mira al llegar. */
.rail .r-cab { padding: 16px 16px 10px; border-bottom: 1px solid var(--border); }
.rail .r-total { font-size: 34px; font-weight: var(--w-strong); line-height: 1; letter-spacing: -.02em; }
.rail .r-total-lab { font-size: 12px; color: var(--muted); margin-top: 3px; }
.rail .r-atencion { font-size: 12.5px; font-weight: var(--w-medium); color: var(--color-alert); margin-top: 4px; }

/* En qué cola estás y qué significa. */
.cola-cab { flex: none; padding: 14px 16px 10px; }
.cola-cab .cc-tit { margin: 0; font-size: 17px; font-weight: var(--w-strong); }
.cola-cab .cc-nota { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
/* El filtro de persona, al lado del título: los dos ejes puestos se dicen los dos. */
.cola-cab .cc-quien { font-size: 11.5px; font-weight: var(--w-medium); white-space: nowrap;
  color: var(--color-accent-text); border: 1px solid var(--color-accent-300);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent); padding: 2px 8px; border-radius: 20px; }

/* Acción en lote. Solo aparece donde tiene sentido, así que cuando está se ve. */
.bulk { flex: none; display: flex; align-items: center; gap: 12px; margin: 0 16px 10px;
  padding: 9px 12px; border: 1px solid var(--color-info-bd); background: var(--color-info-bg); }
.bulk .bk-txt { font-size: 12.5px; color: var(--color-info); flex: 1; }
.cola-cab .cc-linea { display: flex; align-items: baseline; gap: 10px; }
.cola-cab .cc-n { font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* ============================================================================
   PANTALLA «NUEVO» — un solo cuerpo centrado que se desplaza, con la cabecera
   fija arriba. Misma familia que .app3 pero sin columnas.
   ========================================================================= */
body.appfull { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.full-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
.nuevo-wrap { max-width: 1060px; margin: 0 auto; padding: 26px 22px 60px; }

/* Los pasos: en cuál estás y cuántos quedan. */
.pasos { display: flex; align-items: center; gap: 8px; margin: 18px 0 6px; }
.pasos .p { display: flex; align-items: center; gap: 7px; margin-right: 14px; }
.pasos .p-num { display: grid; place-items: center; width: 20px; height: 20px;
  font-family: var(--mono); font-size: 11px; font-weight: var(--w-strong);
  border: 1px solid var(--border-strong); color: var(--muted); }
.pasos .p.on .p-num { background: var(--color-accent-solid); border-color: var(--color-accent-solid); color: var(--color-accent-on); }
.pasos .p.hecho .p-num { border-color: var(--color-success); color: var(--color-success); }
.pasos .p-nom { font-size: 12.5px; color: var(--muted); }
.pasos .p.on .p-nom { color: var(--ink); font-weight: var(--w-medium); }

.sec-lab { font-size: 10px; font-weight: var(--w-strong); letter-spacing: .09em;
  text-transform: uppercase; color: var(--label); margin: 20px 0 10px; }
.sec-linea { display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 7px; border-bottom: 1px solid var(--border); }
.sec-nota { margin-left: auto; font-size: 12px; color: var(--muted);
  text-transform: none; letter-spacing: 0; font-weight: var(--w-regular); }
.rama-tag { font-family: var(--mono); font-size: 11px; padding: 1px 6px; white-space: nowrap;
  text-transform: none; letter-spacing: 0; color: var(--color-accent-text); border: 1px solid var(--color-accent-300); }

/* 1 · las tarjetas de elección */
.elige { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
.elige-col { display: flex; flex-direction: column; gap: 14px; }
.tarjeta { padding: 17px; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: transparent; border: 1px solid color-mix(in srgb, var(--ink) 26%, transparent); margin: 0; }
.tarjeta.punteada { border-style: dashed; }
.tarjeta.on { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.tarjeta .t-cab { display: flex; align-items: baseline; gap: 8px; }
.tarjeta .t-cab h4 { margin: 0; font-size: 20px; font-weight: var(--w-strong); }
.tarjeta .t-cab span { font-size: 13px; color: var(--muted); }
.tarjeta .t-txt { margin: 7px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.tarjeta .t-nota { margin: 14px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.regimenes { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.regimenes button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px;
  font: inherit; font-size: 13px; cursor: pointer; background: transparent;
  border: 1px solid var(--border); color: inherit; }
.regimenes button.on { background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  border-color: var(--color-accent); }
.regimenes button:disabled { cursor: not-allowed; opacity: .75; color: var(--muted); }
.regimenes .r-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; border: 1px solid var(--border-strong); }
.regimenes button.on .r-dot { background: var(--color-accent); border-color: var(--color-accent); }
.regimenes .r-tag { margin-left: auto; font-size: 10.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--color-warn); }

/* 2 · los datos */
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; margin-top: 16px; }
.campo-lab { display: flex; align-items: baseline; gap: 8px; }
.campo-lab label { font-size: 12.5px; font-weight: var(--w-medium); }
.campo-req { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; }
.campo-req.obligatorio { color: var(--color-warn); }
.campo-req.opcional { color: var(--muted); }
.campo-ayuda { margin-top: 5px; font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.campo-fila { display: flex; gap: 7px; margin-top: 5px; }
.campo-opts { display: flex; gap: 7px; margin-top: 7px; }
.campo-opts button { padding: 5px 11px; font: inherit; font-family: var(--mono); font-size: 12px;
  cursor: pointer; background: transparent; border: 1px solid var(--border); color: inherit; }
.campo-opts button.on { background: var(--color-accent-solid); border-color: var(--color-accent-solid); color: var(--color-accent-on); }
.buscador { position: relative; margin-top: 5px; }
.buscador-lista { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 3px);
  max-height: 268px; overflow-y: auto; background: var(--surface-solid);
  border: 1px solid var(--color-accent-300); box-shadow: var(--shadow-lg); }
.buscador-lista button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%; padding: 7px 10px; font: inherit; text-align: left; background: transparent;
  border: 0; border-bottom: 1px solid var(--line-soft); cursor: pointer; color: inherit; }
.buscador-lista button:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.buscador-lista .b-main { font-size: 13px; font-weight: var(--w-medium); }
.buscador-lista .b-sub { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.buscador-cont { padding: 6px 10px; font-size: 11px; color: var(--muted);
  background: color-mix(in srgb, var(--ink) 4%, transparent); }

/* 3 · ficheros y su separación */
.fichero { border: 1px solid var(--border); padding: 13px 15px; margin-top: 12px; }
.fichero .f-cab { display: flex; align-items: center; gap: 10px; }
.fichero .f-nom { flex: 1; font-size: 13px; font-weight: var(--w-medium); word-break: break-all; }
.fichero .f-meta { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.seg-cab, .seg-fila { display: grid; grid-template-columns: 118px 190px 1fr 62px; gap: 10px; align-items: center; }
.seg-cab { margin-top: 13px; font-size: 10px; font-weight: var(--w-strong); letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); }
.seg-fila { padding: 7px 0; border-top: 1px solid var(--line-soft); align-items: start; }
.seg-fila .avisos { display: flex; flex-direction: column; gap: 3px; padding-top: 4px; }
.seg-aviso { font-size: 11px; }
.seg-pie { display: flex; align-items: center; gap: 14px; margin-top: 9px; }
.cobertura { font-size: 11.5px; }

/* la espera */
.fases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0; }
.fase .barra { height: 3px; background: var(--border); }
.fase.hecha .barra { background: var(--color-success); }
.fase.activa .barra { background: var(--color-accent); }
.fase .f-nom { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.fase.activa .f-nom { color: var(--ink); font-weight: var(--w-medium); }
.doc-prog { padding: 10px 0; border-top: 1px solid var(--border); }
.doc-prog .dp-lin { display: flex; align-items: baseline; gap: 10px; }
.doc-prog .dp-tipo { font-size: 13px; font-weight: var(--w-medium); }
.doc-prog .dp-fich { flex: 1; min-width: 0; font-size: 11.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-prog .dp-est { font-size: 12px; }
.adelanto { margin-top: 8px; padding: 9px 11px; border: 1px solid var(--border); }
.adelanto .a-cab { display: flex; align-items: baseline; gap: 8px; font-size: 10px;
  font-weight: var(--w-strong); letter-spacing: .09em; text-transform: uppercase; color: var(--label); }
.adelanto .a-sin { font-size: 10.5px; font-weight: var(--w-regular); letter-spacing: 0;
  text-transform: none; color: var(--color-warn); }
.adelanto .a-datos { display: flex; flex-wrap: wrap; gap: 7px 20px; margin-top: 7px; }
.adelanto .a-k { font-size: 10px; color: var(--muted); display: block; }
.adelanto .a-v { font-family: var(--mono); font-size: 12.5px; font-weight: var(--w-medium); }

.pie-acc { display: flex; align-items: center; gap: 14px; margin-top: 30px;
  padding-top: 18px; border-top: 1px solid var(--border); }
.pie-acc .pa-txt { font-size: 12.5px; color: var(--muted); }
.pie-acc .pa-btns { margin-left: auto; display: flex; gap: 10px; }

/* ═══════════════════════════════════════════════════════════════════════════
   /VALIDACION — el puesto de trabajo campo a campo.
   Vivia entero en un <style> de 337 lineas dentro de validacion.html. Se sube
   aqui porque el rediseno lo comparte con /documentos y /sistema: el filete de
   estado, la pastilla de regimen y la firma son los MISMOS en las tres.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── La barra del expediente ─────────────────────────────────────────────────
   UN solo contador de lo que falta, y con su desglose a la vista. Antes lo
   decian tres sitios (pastilla del titulo, resumen, y el boton) y no siempre
   coincidian. */
.valbar { flex: none; display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap;
  padding: 9px 16px; background: var(--surface-solid);
  border-bottom: 1px solid var(--border); }
/* El desglose del estado llega a SEIS conceptos cuando el expediente esta mal.
   En una sola linea aplastaba el nombre del cliente hasta dejarlo en «O…». La
   barra envuelve: una segunda linea es mas barata que perder de vista de quien
   es el expediente. */
.vb-id { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex: 1 1 320px; }
.vb-ref { font-size: 14px; font-weight: var(--w-strong); letter-spacing: -.01em; white-space: nowrap; }
.vb-reg { font-size: 10px; font-weight: var(--w-strong); letter-spacing: .07em;
  text-transform: uppercase; padding: 2px 7px; border: 1px solid currentColor; white-space: nowrap; }
.vb-reg.reg-sal { color: var(--reg-sal); } .vb-reg.reg-exp { color: var(--reg-exp); }
.vb-reg.reg-tra { color: var(--reg-tra); } .vb-reg.reg-imp { color: var(--reg-imp); }
.vb-sub { font-size: 12.5px; color: var(--muted); min-width: 12ch; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.vb-estado { margin-left: auto; flex: 0 1 auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; padding: 4px 11px; border: 1px solid; white-space: nowrap; }
.vb-estado:empty { display: none; }
.vb-estado b { font-weight: var(--w-strong); }
.vb-estado .vb-desglose { color: inherit; opacity: .82; font-weight: var(--w-regular); }
.vb-estado.pend { background: var(--color-alert-bg); border-color: var(--color-alert-bd); color: var(--color-alert); }
.vb-estado.avisos { background: var(--color-warn-bg); border-color: var(--color-warn-bd); color: var(--color-warn); }
.vb-estado.done { background: var(--color-success-bg); border-color: var(--color-success-bd); color: var(--color-success); }
.vb-acc, .vb-acc-todo { display: flex; gap: 8px; flex: none; align-items: center; }
/* Un boton apagado tiene que decir POR QUE lo esta. Sin esto el operario pulsa
   tres veces y se va a llamar por telefono. */
.vb-acc .btn[disabled] { cursor: not-allowed; }

/* ── Las dos columnas ────────────────────────────────────────────────────── */
.val-cols { grid-template-columns: 44fr 56fr; }
.val-izq { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.val-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 60px; }
.val-der { border-left: 1px solid var(--border); background: var(--band);
  display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* ── El paseo guiado ──────────────────────────────────────────────────────
   Con SALIDA a la vista. Antes se entraba en el recorrido y la unica manera de
   salir era terminarlo. */
.paseo { flex: none; display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; background: var(--color-info-bg);
  border-bottom: 1px solid var(--color-info-bd); font-size: 12.5px; }
.paseo .ps-btn { border: 1px solid var(--border-strong); background: var(--surface-solid);
  color: var(--ink); font: inherit; padding: 4px 10px; cursor: pointer; }
.paseo .ps-btn:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-accent-text); }
.paseo .ps-btn:disabled { opacity: .4; cursor: default; }
.paseo .ps-dots { display: flex; gap: 4px; align-items: center; }
.paseo .ps-dot { width: 7px; height: 7px; border: 1px solid var(--color-alert); }
.paseo .ps-dot.hecho { background: var(--color-success); border-color: var(--color-success); }
.paseo .ps-dot.aqui { background: var(--color-alert); box-shadow: 0 0 0 2px var(--color-alert-bg); }
.paseo .ps-nota { color: var(--color-info); }
.paseo .ps-salir { margin-left: auto; background: none; border: 0; font: inherit;
  color: var(--color-info); text-decoration: underline; cursor: pointer; padding: 4px 0; }

/* ── El filtro de campos ──────────────────────────────────────────────────
   Su nota usa OTRAS palabras que el contador de arriba, a proposito: son dos
   escalas distintas y sumarlas seria mentir. */
.val-filtros { flex: none; padding: 9px 16px; border-bottom: 1px solid var(--border); }
.vf-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.vf-pill { border: 1px solid var(--border-strong); background: transparent; color: var(--muted);
  font: inherit; font-size: 12px; padding: 3px 11px; cursor: pointer; white-space: nowrap; }
.vf-pill:hover { border-color: var(--color-accent); color: var(--color-accent-text); }
.vf-pill.on { background: var(--color-accent-solid); border-color: var(--color-accent-solid);
  color: var(--color-accent-on); font-weight: var(--w-medium); }
.vf-pill .vf-n { font-family: var(--mono); opacity: .75; margin-left: 5px; }
.vf-nota { margin-top: 7px; font-size: 11.5px; color: var(--muted); line-height: 1.45; }

/* ── Las tarjetas de pendiente ────────────────────────────────────────────
   SEIS sabores, cada uno con su etiqueta y su color. No es decoracion: «hay un
   conflicto» y «no lo has subido» se arreglan de maneras distintas, y el
   producto entero se sostiene sobre distinguirlas. */
.pend-card { margin-bottom: 12px; scroll-margin-top: 12px; }
.pc { background: var(--panel); border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong); padding: 13px 15px; }
.pend-card.active .pc { box-shadow: 0 0 0 2px var(--color-accent); border-color: var(--color-accent); }
.pc-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 3px; }
.pc-tipo { font-size: 10px; font-weight: var(--w-strong); letter-spacing: .07em;
  text-transform: uppercase; white-space: nowrap; }
.pc-label { font-size: 15px; font-weight: var(--w-strong); }
.pc-porque { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin-bottom: 11px; }
.pc-porque b { color: var(--ink); font-weight: var(--w-medium); }
/* conflicto y no_aparece BLOQUEAN (rojo). falta_doc, maestro, eleccion y
   partida se resuelven pero no siempre bloquean: van en ambar. */
.pc.f-conflicto  { border-left-color: var(--color-alert); }
.pc.f-conflicto  .pc-tipo { color: var(--color-alert); }
.pc.f-no_aparece { border-left-color: var(--color-alert); }
.pc.f-no_aparece .pc-tipo { color: var(--color-alert); }
.pc.f-falta_doc  { border-left-color: var(--color-warn); }
.pc.f-falta_doc  .pc-tipo { color: var(--color-warn); }
.pc.f-maestro    { border-left-color: var(--color-accent); }
.pc.f-maestro    .pc-tipo { color: var(--color-accent-text); }
.pc.f-eleccion   { border-left-color: var(--color-info); }
.pc.f-eleccion   .pc-tipo { color: var(--color-info); }
.pc.f-partida    { border-left-color: var(--color-warn); }
.pc.f-partida    .pc-tipo { color: var(--color-warn); }
.pc-acc { display: flex; gap: 8px; flex-wrap: wrap; }

/* Las dos (o mas) versiones de un conflicto, una al lado de otra. */
.options { display: flex; gap: 9px; flex-wrap: wrap; }
.options .opt { flex: 1 1 190px; border: 1px solid var(--border); padding: 11px 13px;
  cursor: pointer; background: var(--surface-solid); }
.options .opt:hover { border-color: var(--color-accent); }
.options .opt.active { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent); }
.options .opt .val { font-size: 18px; font-weight: var(--w-strong); margin-bottom: 5px;
  word-break: break-word; letter-spacing: -.01em; }
.options .opt .src { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.options .opt .src b { color: var(--ink); font-weight: var(--w-medium); }
.options .opt .conf { display: inline-block; margin-top: 6px; font-size: 10.5px; font-weight: var(--w-medium);
  padding: 1px 7px; background: var(--color-success-bg); color: var(--color-success);
  border: 1px solid var(--color-success-bd); }
.options .opt .peek { margin-top: 7px; font-size: 11.5px; color: var(--color-accent-text); font-weight: var(--w-medium); }
.options .opt .choose { margin-top: 9px; width: 100%; padding: 7px; border: 1px solid var(--color-success);
  background: var(--color-success-bg); color: var(--color-success);
  font: inherit; font-weight: var(--w-strong); font-size: 12.5px; cursor: pointer; }
.options .opt .choose:hover { background: var(--color-success); color: var(--color-accent-on); }
.manual { margin-top: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.manual input { flex: 1 1 170px; padding: 7px 9px; border: 1px solid var(--border-strong);
  background: var(--surface-solid); color: var(--ink); font: inherit; font-size: 13.5px; }
.manual button { padding: 7px 12px; border: 1px solid var(--border-strong);
  background: var(--surface-solid); color: var(--ink); font: inherit; font-weight: var(--w-medium);
  font-size: 12.5px; cursor: pointer; }
.manual button:hover { border-color: var(--color-accent); color: var(--color-accent-text); }
.manual .lbl { color: var(--muted); font-size: 12.5px; }
.pc-act { border: 1px solid var(--border-strong); background: var(--surface-solid); color: var(--ink);
  font: inherit; padding: 8px 13px; font-weight: var(--w-medium); font-size: 13px; cursor: pointer; }
.pc-act:hover { border-color: var(--color-accent); color: var(--color-accent-text); }
.pc-act.as-link { text-decoration: none; display: inline-block; }

/* ── Documento que no se pudo leer ────────────────────────────────────────
   NO lleva «seguir sin este documento»: el expediente ya se puede seguir
   trabajando, y un boton que solo esconde el aviso hace que se olvide. */
.faildoc { background: var(--color-warn-bg); border: 1px solid var(--color-warn-bd);
  border-left: 4px solid var(--color-warn); padding: 12px 15px; margin-bottom: 12px; }
.faildoc.faildoc-revision { border-left-color: var(--color-alert);
  background: var(--color-alert-bg); border-color: var(--color-alert-bd); }
.faildoc .fd-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 13.5px; font-weight: var(--w-strong); color: var(--color-warn); margin-bottom: 4px; }
.faildoc.faildoc-revision .fd-head { color: var(--color-alert); }
.faildoc .fd-tries { font-family: var(--mono); font-size: 10.5px; font-weight: var(--w-medium);
  border: 1px solid currentColor; padding: 0 6px; }
.faildoc .fd-why { font-size: 12.5px; color: var(--ink); line-height: 1.5; }
.faildoc .fd-retry { margin-top: 10px; padding: 7px 13px; border: 1px solid var(--color-warn);
  background: var(--surface-solid); color: var(--color-warn); font: inherit;
  font-weight: var(--w-strong); font-size: 12.5px; cursor: pointer; }
.faildoc .fd-retry:hover:not(:disabled) { background: var(--color-warn); color: var(--color-accent-on); }
.faildoc .fd-retry:disabled { opacity: .55; cursor: default; }
.faildoc .fd-rest { margin-top: 9px; font-size: 12px; color: var(--muted); line-height: 1.45; }

/* ── Todo resuelto ───────────────────────────────────────────────────────── */
.todo-ok { background: var(--color-success-bg); border: 1px solid var(--color-success-bd);
  border-left: 4px solid var(--color-success); padding: 14px 16px; margin-bottom: 12px; }
.todo-ok .ok-tit { font-size: 15px; font-weight: var(--w-strong); color: var(--color-success);
  margin-bottom: 3px; }
.todo-ok .ok-sub { font-size: 12.5px; color: var(--ink); line-height: 1.5; }

/* ── Aviso que NO bloquea ────────────────────────────────────────────────── */
.advisory-box { background: var(--color-warn-bg); border: 1px solid var(--color-warn-bd);
  padding: 10px 14px; margin-bottom: 12px; color: var(--color-warn); font-size: 12.5px; line-height: 1.5; }
.advisory-box b { color: var(--ink); }
.advisory-box.soft { background: var(--color-info-bg); border-color: var(--color-info-bd); color: var(--color-info); }
.advisory-box.sample { font-weight: var(--w-medium); }
.advisory-box.sample b { color: var(--color-warn); }

/* ── Las secciones de campos ya resueltos ────────────────────────────────── */
.section-title { font-size: 10px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--label); margin: 20px 0 8px; font-weight: var(--w-strong); }
.section-title:first-child { margin-top: 0; }
.fsection { margin-bottom: 9px; }
.collapse-head { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  cursor: pointer; background: var(--panel); border: 1px solid var(--border);
  padding: 9px 14px; font: inherit; font-weight: var(--w-medium); font-size: 13px; color: var(--ink); }
.collapse-head:hover { border-color: var(--color-accent); }
.collapse-head .arrow { transition: transform .12s; color: var(--muted); }
.collapse-head.open .arrow { transform: rotate(90deg); }
.collapse-head .cnt { margin-left: auto; font-family: var(--mono); color: var(--muted);
  font-weight: var(--w-regular); font-size: 11.5px; }
.collapse-head .cx-warn { color: var(--color-warn); font-weight: var(--w-strong); }
.collapse-head .cg { color: var(--color-success); }
.collapse-body { border: 1px solid var(--border); border-top: 0; }

/* La FILA: valor arriba, y debajo EL PORQUE y LA FIRMA. Son dos cosas
   distintas — de donde sale el dato, y quien respondio por el. */
.field-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 12px;
  padding: 8px 14px; border-bottom: 1px solid var(--line-soft);
  border-left: 3px solid var(--border-strong); cursor: pointer; }
.field-row:last-child { border-bottom: none; }
.field-row:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.field-row.active { background: color-mix(in srgb, var(--color-accent) 10%, transparent); border-left-color: var(--color-accent); }
.fr-main { flex: 1 1 auto; min-width: 220px; }
.field-row .fr-label { width: 170px; flex: none; color: var(--muted); font-size: 12.5px; padding-top: 1px; }
.field-row .fr-value { font-weight: var(--w-medium); word-break: break-word; }
.field-row .fr-value.muted { color: var(--faint); font-weight: var(--w-regular); font-style: italic; }
.fr-porque { margin-top: 2px; font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.fr-firma { margin-top: 3px; font-size: 11px; color: var(--color-success); line-height: 1.45; }
.fr-firma .fi-sep { color: var(--faint); margin: 0 5px; }
.fr-firma .fi-como { color: var(--muted); }
.fr-src { font-size: 11.5px; color: var(--muted); white-space: nowrap; flex: none; padding-top: 1px; }
.fr-src.sample-tag { color: var(--color-warn); border: 1px solid var(--color-warn-bd); padding: 0 7px; }
.fr-src.org-agency { color: var(--color-accent-text); font-weight: var(--w-medium); font-size: 11px; }
.fr-src.org-file { color: var(--color-info); font-weight: var(--w-medium); font-size: 11px; }
.fr-acc { display: flex; gap: 6px; flex: none; }
.fr-copy, .fr-fix { border: 1px solid var(--border); background: var(--surface-solid); color: var(--muted);
  font: inherit; font-size: 11.5px; padding: 3px 8px; cursor: pointer; white-space: nowrap;
  font-weight: var(--w-medium); line-height: 1.5; }
.fr-copy:hover, .fr-fix:hover { border-color: var(--color-accent); color: var(--color-accent-text); }
.fr-copy.copied { border-color: var(--color-success-bd); background: var(--color-success-bg); color: var(--color-success); }
.fr-fix.as-link { text-decoration: none; display: inline-block; }
.field-row.master-row { border-left-color: var(--color-accent); }
.field-row.line-row { border-left-color: var(--color-success); }
.field-row.line-row .fr-label { width: 140px; }
.field-row.lr-req { border-left-color: var(--color-alert); background: var(--color-alert-bg); }
.field-row.lr-miss { border-left-color: var(--border-strong); }

/* Partidas */
.line-card { margin-bottom: 9px; }
.line-head { display: flex; align-items: baseline; gap: 9px; padding: 7px 14px;
  background: var(--band); border: 1px solid var(--border); }
.line-head .ln-idx { font-family: var(--mono); font-size: 11px; font-weight: var(--w-strong);
  color: var(--color-accent-solid-hover); white-space: nowrap; }
.line-head .ln-desc { font-size: 12px; color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

/* Resumen del expediente */
.exp-sum { background: var(--panel); border: 1px solid var(--border); padding: 14px 16px; margin-bottom: 12px; }
.exp-sum .es-title { font-size: 10px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--label); font-weight: var(--w-strong); margin-bottom: 8px; }
.exp-sum .es-parties { display: flex; align-items: center; gap: 9px; font-size: 14.5px;
  font-weight: var(--w-strong); letter-spacing: -.01em; flex-wrap: wrap; }
.exp-sum .es-parties .arrow { color: var(--muted); font-weight: var(--w-regular); }
.exp-sum .es-goods { color: var(--muted); font-size: 12.5px; margin-top: 5px; }
.exp-sum .es-stats { display: flex; gap: 12px 24px; flex-wrap: wrap; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--line-soft); }
.exp-sum .stat .k { font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--label); font-weight: var(--w-strong); }
.exp-sum .stat .v { font-size: 13.5px; font-weight: var(--w-medium); margin-top: 2px; }
.exp-sum .stat .v.muted { color: var(--muted); font-weight: var(--w-regular); font-style: italic; }

/* ── El editor en linea ──────────────────────────────────────────────────── */
.editor { padding: 12px 14px; background: var(--band); border-bottom: 1px solid var(--line-soft);
  border-left: 3px solid var(--color-accent); }
.editor .ed-title { font-size: 11.5px; color: var(--muted); margin-bottom: 8px; line-height: 1.45; }
.ed-row { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.ed-value { flex: 1 1 200px; padding: 7px 9px; border: 1px solid var(--border-strong);
  background: var(--surface-solid); color: var(--ink); font: inherit; font-size: 13.5px; }
.ed-btn { padding: 7px 11px; border: 1px solid var(--border-strong); background: var(--surface-solid);
  color: var(--ink); font: inherit; font-weight: var(--w-medium); font-size: 12.5px; cursor: pointer; }
.ed-btn:hover { border-color: var(--color-accent); color: var(--color-accent-text); }
.ed-btn.primary { background: var(--color-accent-solid); color: var(--color-accent-on);
  border-color: var(--color-accent-solid); }
.ed-btn.primary:hover { filter: brightness(1.08); color: var(--color-accent-on); }
.ed-btn.origin.armed { background: var(--color-accent-solid); border-color: var(--color-accent-solid);
  color: var(--color-accent-on); }
.ed-btn.ocr { color: var(--color-info); border-color: var(--color-info-bd); }
.ed-btn.ocr:hover { background: var(--color-info-bg); color: var(--color-info); }
.ed-note { margin-top: 8px; font-size: 12px; color: var(--color-success); font-weight: var(--w-medium); }
.ed-note.trabajando { color: var(--color-info); }

/* Aprender del proveedor (opcional: nunca se obliga) */
.learn { margin-top: 8px; background: var(--color-warn-bg); border: 1px solid var(--color-warn-bd); padding: 11px 13px; }
.learn .lq { font-weight: var(--w-medium); font-size: 13px; margin-bottom: 3px; }
.learn .lsub { color: var(--muted); font-size: 11.5px; margin-bottom: 9px; line-height: 1.45; }
.learn textarea { width: 100%; min-height: 44px; resize: vertical; padding: 7px 9px;
  border: 1px solid var(--border-strong); background: var(--surface-solid); color: var(--ink);
  font: inherit; font-size: 13px; margin-bottom: 9px; }
.learn .lbtns { display: flex; gap: 7px; }
.learn .lyes { background: var(--color-success); color: var(--color-accent-on);
  border: 1px solid var(--color-success); padding: 7px 13px; font: inherit;
  font-weight: var(--w-strong); font-size: 12.5px; cursor: pointer; }
.learn .lno { background: var(--surface-solid); color: var(--muted); border: 1px solid var(--border-strong);
  padding: 7px 13px; font: inherit; font-weight: var(--w-medium); font-size: 12.5px; cursor: pointer; }
.learned { margin-top: 8px; background: var(--color-success-bg); border: 1px solid var(--color-success-bd);
  color: var(--color-success); padding: 10px 13px; font-weight: var(--w-medium); font-size: 12.5px; }

/* ═══ EL VISOR ══════════════════════════════════════════════════════════════
   Los ids que usa web/visor.js son CONTRATO (stage, canvasWrap, pdfCanvas,
   hlOverlay, rubber, vhint, viewerEmpty, zoomPct/zoomIn/zoomOut/fitWidth/
   fitPage, pageBar/pgPrev/pgInput/pgTotal/pgNext). Cambiar uno rompe el visor
   en silencio. */
.visor-cab { flex: none; display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; background: var(--surface-solid); border-bottom: 1px solid var(--border);
  font-size: 12.5px; }
.visor-cab #docSwitcher { max-width: 280px; }
.pagebar { display: flex; align-items: center; gap: 3px; }
.pagebar .pgnum { width: 44px; padding: 2px 4px; border: 1px solid var(--border-strong);
  background: var(--surface-solid); color: var(--ink); font-family: var(--mono);
  font-size: 12px; text-align: center; }
.pagebar .pgtotal { font-size: 12px; color: var(--muted); white-space: nowrap; }
.zbtn { min-width: 26px; height: 26px; padding: 0 7px; border: 1px solid var(--border-strong);
  background: var(--surface-solid); color: var(--ink); font: inherit; font-size: 14px;
  line-height: 1; cursor: pointer; }
.zbtn:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-accent-text); }
.zbtn:disabled { opacity: .35; cursor: default; }
.zpct { min-width: 42px; text-align: center; font-size: 12px; color: var(--muted); }
.vhint { margin-left: auto; color: var(--muted); font-size: 11.5px; text-align: right; }

.stage { flex: 1; overflow: auto; position: relative; padding: 16px; }
.stage.selecting { cursor: crosshair; }
.canvas-wrap { position: relative; width: max-content; margin: 0 auto;
  background: var(--surface-solid); line-height: 0; border: 1px solid var(--border-strong); }
.canvas-wrap canvas { display: block; }
.hl-overlay { position: absolute; inset: 0; pointer-events: none; }
@keyframes hlpulse { 0% { box-shadow: 0 0 0 0 var(--color-accent); } 100% { box-shadow: 0 0 0 9px transparent; } }
.hl-box { position: absolute; border: 2px solid var(--color-accent-solid);
  background: color-mix(in srgb, var(--color-accent-solid) 14%, transparent);
  animation: hlpulse 1.1s ease-out 2; }
.hl-box.conflict-hl { border-color: var(--color-alert);
  background: color-mix(in srgb, var(--color-alert) 14%, transparent); }
.hl-tag { position: absolute; top: -18px; left: -2px; background: var(--color-accent-solid);
  color: var(--color-accent-on); font-family: var(--mono); font-size: 10px;
  padding: 1px 6px; white-space: nowrap; line-height: 1.6; }
.hl-box.conflict-hl .hl-tag { background: var(--color-alert); }
.rubber { position: absolute; border: 1.5px dashed var(--color-accent-solid);
  background: color-mix(in srgb, var(--color-accent-solid) 12%, transparent);
  pointer-events: none; display: none; }
.sel-hint { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 10;
  background: var(--color-accent-solid); color: var(--color-accent-on); font-size: 12.5px;
  font-weight: var(--w-medium); padding: 6px 13px; display: none; }
.stage.selecting .sel-hint { display: block; }
.viewer-empty { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; color: var(--muted);
  font-size: 13px; text-align: center; padding: 40px; }
.viewer-empty .ve-ico { color: var(--faint); }
.viewer-empty .ve-txt { max-width: 340px; line-height: 1.55; }

/* ── El CSV ──────────────────────────────────────────────────────────────── */
.csv-card { background: var(--surface-solid); border: 1px solid var(--border-strong);
  width: min(820px, 96vw); max-height: 88vh; display: flex; flex-direction: column; }
.csv-head { display: flex; align-items: center; justify-content: space-between;
  padding: 13px 17px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.csv-body { padding: 13px 17px; overflow: auto; }
.csv-foot { display: flex; align-items: center; gap: 9px; padding: 11px 17px;
  border-top: 1px solid var(--border); }
.csv-foot .hint { margin-right: auto; color: var(--muted); font-size: 11.5px; }
/* Consola a proposito: el CSV se lee como lo que es, texto plano en bruto.
   Fondo oscuro en los DOS temas, y por eso no sale de los tokens. */
.csv-pre { background: #16140f; color: #e8e4dc; padding: 12px; overflow: auto;
  font: 12px/1.6 var(--mono); white-space: pre; max-height: 46vh; }
.csv-warn { background: var(--color-warn-bg); border: 1px solid var(--color-warn-bd);
  color: var(--color-warn); padding: 9px 12px; font-size: 12.5px; margin-bottom: 10px; }
.csv-block { background: var(--color-alert-bg); border: 1px solid var(--color-alert-bd);
  color: var(--color-alert); padding: 10px 12px; font-size: 12.5px; margin-bottom: 10px;
  font-weight: var(--w-medium); }

#status { padding: 40px; color: var(--muted); text-align: center; font-size: 13px; }
/* Contenedor de filas dentro de una seccion plegada (y de cada partida). */
.group { background: var(--panel); }
.collapse-body > .group + .group { border-top: 1px solid var(--border); }
/* EL DETALLE DE INGENIERÍA, PLEGADO (30/08/2026) — ver el comentario en fieldRow(). */
.fr-sinancla .fr-porque { margin-top: 4px; }
.fr-sinancla .fr-porque > summary { cursor: pointer; font-size: 11px; opacity: .75;
  list-style: none; text-decoration: underline dotted; width: fit-content; }
.fr-sinancla .fr-porque > summary::-webkit-details-marker { display: none; }
.fr-sinancla .fr-porque[open] > summary { margin-bottom: 4px; }
.fr-sinancla .fr-porque .fr-metodo { font-size: 11px; opacity: .85; line-height: 1.5; }

/* La casilla que NO cuadra con el campo (31/08/2026): el mismo ámbar que los demás
   avisos, no rojo — no es un error del operario, es algo que tiene que mirar. */
.fr-casilla.fr-casilla-mal { background: var(--amber-bg); border-color: var(--amber-bd); color: var(--amber); }
.fr-sinancla.fr-forma { background: var(--amber-bg); border-color: var(--amber-bd); }

/* Lo que no entró en el expediente (31/08/2026). Mismo tono informativo que "esperando el
   BL": no es culpa del operario ni algo que pueda arreglar aquí — es algo que tiene que
   saber antes de fiarse de un total. */
.esperando-bl.piezas-fuera { background: var(--band); border-color: var(--line-soft); }
.esperando-bl.piezas-fuera .eb-tit { color: var(--ink); }
.esperando-bl.piezas-fuera .eb-lista { margin-top: 6px; color: var(--ink); font-size: 12.5px; line-height: 1.5; }

/* "dice": la insignia de casilla es lo que AFIRMA el modelo, no una comprobación. Se
   escribe en la propia insignia porque hay un caso real —casilla correcta, contenido de
   la de al lado— que ningún control puede distinguir. */
.fr-casilla .fr-casilla-dice { opacity: .55; font-style: italic; }

/* La suma, con sus sumandos. Verde-neutra, no de aviso: no es un problema, es la máquina
   diciendo qué ha hecho — y enseñando cómo comprobarlo de un vistazo. */
.fr-suma { flex-basis: 100%; width: 100%; margin-top: 5px; padding: 6px 9px; border-radius: 5px;
  background: var(--band); border: 1px solid var(--line-soft); font-size: 12px; }
.fr-suma .fr-sumandos { font-family: var(--mono); }
.fr-sinancla.fr-discrepa { background: var(--amber-bg); border-color: var(--amber-bd); }

/* Los documentos del expediente. Solo aparece cuando hay más de uno: con uno es ruido. */
.docs-lista { margin: 0 0 14px 0; padding: 10px 14px; border-radius: var(--radius);
  background: var(--band); border: 1px solid var(--line-soft); }
.docs-lista .dl-tit { font-weight: var(--w-strong); font-size: 13px; margin-bottom: 6px; }
.docs-lista .dl-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 12.5px; }
.docs-lista .dl-key { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.docs-lista .dl-motivo { color: var(--amber); font-size: 12px; }
.docs-lista .dl-row.dl-fuera .dl-doc { text-decoration: line-through; opacity: .6; }
.docs-lista .dl-act { margin-left: auto; }

/* Confirmado por dos documentos (31/08/2026). El único bloque de la fila que TRANQUILIZA
   en vez de advertir: verde, no ámbar. En tránsito no hay capa de texto que anclar, así
   que dos papeles diciendo el mismo número es la mejor evidencia disponible. */
.fr-confirmado { flex-basis: 100%; width: 100%; margin-top: 5px; padding: 6px 9px; border-radius: 5px;
  background: var(--green-bg); border: 1px solid var(--green-bd); color: var(--green);
  font-size: 12px; line-height: 1.45; }

/* El motivo de un botón deshabilitado, pegado debajo. Discreto pero legible: si hace falta
   pasar el ratón por encima para saber por qué no se puede pulsar, no sirve. */
.btn-motivo { margin-top: 5px; font-size: 12px; color: var(--muted); line-height: 1.45; max-width: 46em; }

/* El "por qué lo pones tú" de la familia 3: un hueco obligatorio sin origen parece un
   descuido nuestro si no se explica. */
.mc-why.mc-porque { background: var(--band); border-radius: 5px; padding: 6px 9px; margin-top: 6px; }

/* Aviso de fallo durante la carga: arriba del todo, persistente, sin modal. Un fallo de
   carga que no se ve convierte una pantalla incompleta en una pantalla que miente. */
.aviso-carga { position: sticky; top: 0; z-index: 999; padding: 9px 14px; font-size: 13px;
  background: var(--amber-bg); border-bottom: 1px solid var(--amber-bd); color: var(--amber); }

/* PANEL DE ADUANA DE DESTINO (01/09/2026). Sustituye a un prompt() + alert() del sistema
   operativo: un modal del SO para un error de dato interrumpe y no pertenece a esta
   pantalla. El motivo del rechazo va AQUÍ, al lado del campo, y lo tecleado no se pierde. */
.ad-panel { margin-top: 8px; padding: 10px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--band); }
.ad-fila, .ad-buscar { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.ad-panel input { flex: 1; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: 4px; font: inherit; }
.ad-code { max-width: 12ch; font-family: ui-monospace, Menlo, monospace; text-transform: uppercase; }
.ad-panel button { padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: 4px; background: var(--surface-solid); cursor: pointer; font: inherit; }
.ad-guardar { background: var(--color-accent-solid); color: var(--color-accent-on); border-color: var(--color-accent-solid); }
.ad-motivo { padding: 8px 10px; border-radius: 4px; line-height: 1.45; }
.ad-motivo.ad-mal { background: var(--color-alert-bg); border: 1px solid var(--color-alert-bd); color: var(--color-alert); }
.ad-motivo.ad-aviso { background: var(--color-warn-bg); border: 1px solid var(--color-warn-bd); color: var(--color-warn); }
.ad-motivo.ad-info { background: var(--color-info-bg); border: 1px solid var(--color-info-bd); color: var(--color-info); }
.ad-lista { max-height: 220px; overflow-y: auto; margin-top: 6px; }
.ad-op { display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left; margin-bottom: 3px; }
.ad-op-roles { color: var(--muted); font-family: ui-monospace, Menlo, monospace; font-size: .85em; }

/* RESUMEN DE UN ARCHIVO CON MUCHOS DOCUMENTOS (01/09/2026). Cuarenta y dos desplegables
   idénticos no son revisables: nadie los mira. Una línea, y el detalle a petición. */
.seg-resumen { margin: 8px 0; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--band); }
.seg-resumen-linea { margin-bottom: 8px; }
.seg-resumen-acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.seg-resumen-todos { color: var(--muted); }
.seg-toggle { padding: 5px 9px; border: 1px solid var(--border-strong); border-radius: 4px; background: var(--surface-solid); cursor: pointer; font: inherit; }

/* LA BARRA DE LECTURA. Con 44 documentos la lista no se mueve durante minutos y parece
   colgada aunque no lo esté: una barra que avanza distingue «va lento» de «se ha roto». */
.dp-bar { height: 8px; border-radius: 4px; background: var(--band); overflow: hidden; margin: 6px 0 10px; }
.dp-bar-fill { height: 100%; background: var(--color-accent-solid); transition: width .35s ease; }

/* CANDIDATOS AGRUPADOS POR VALOR (01/09/2026). Cuarenta y dos filas con el mismo texto no
   son un conflicto: son un valor dicho cuarenta y dos veces. */
.fr-grupos { margin-top: 6px; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 5px; background: var(--band); }
.fr-grupo { margin-top: 4px; }
.fr-grupo-n { display: inline-block; min-width: 5.5em; color: var(--muted); font-variant-numeric: tabular-nums; }
.fr-grupo-trunc { color: var(--muted); font-size: .9em; }

/* POR QUÉ UN CAMPO SE EXIGE AQUÍ Y NO SIEMPRE (01/09/2026). Tono neutro a propósito: no es
   un aviso de que algo vaya mal, es la condición de la norma dicha en su sitio. */
.fr-condicional { margin-top: 6px; padding: 7px 10px; border-left: 3px solid var(--border-strong); background: var(--band); border-radius: 0 4px 4px 0; line-height: 1.45; }

/* Etiquetas del panel de aduana (02/09/2026): dos controles mudos en una tarjeta que ya te
   pide confirmar algo sobran. Cada campo dice qué es, y el buscador avisa de que un país no
   encuentra nada — la Comisión nombra las oficinas por su localidad. */
.ad-lbl { display: block; margin: 6px 0 3px; color: var(--label); font-size: .92em; }
.ad-pista { margin: -2px 0 8px; color: var(--muted); font-size: .88em; line-height: 1.4; }

/* Dos hechos distintos bajo un rótulo (02/09/2026): el peso del conjunto rodante y el de la
   mercancía son los dos ciertos. Tono neutro, como los dos bultos: no hay nada roto. */
.fr-hecho { margin: 3px 0 3px 4px; }

/* El motivo de un botón gris, visible sin pasar el ratón (02/09/2026). Un motivo que hay
   que ir a buscar en un tooltip no está dicho. */
.botones-porque { flex: none; padding: 7px 16px; background: var(--color-warn-bg);
  border-bottom: 1px solid var(--color-warn-bd); color: var(--color-warn);
  font-size: 12.5px; line-height: 1.45; }
/* Sabor «esperando»: falta un papel que AUN NO HA LLEGADO. No es una deuda del
   operario ni un fallo nuestro, asi que no va en rojo ni en ambar. */
.pc.f-esperando { border-left-color: var(--color-info); }
.pc.f-esperando .pc-tipo { color: var(--color-info); }
/* El POR QUE de un campo que teclea la persona, y la pista de la norma en un
   conflicto: los dos informan, ninguno decide. */
.pc-tuyo { margin-top: 8px; padding: 8px 10px; background: var(--color-info-bg);
  border-left: 2px solid var(--color-info-bd); color: var(--color-info); }
.pc-norma { margin: 8px 0 10px; padding: 8px 10px; background: var(--color-warn-bg);
  border-left: 2px solid var(--color-warn-bd); color: var(--color-warn); font-size: 12.5px; line-height: 1.5; }
/* La cuenta de la barra de progreso: «12 de 44 leídos · quedan aprox. 2 min». */
.dp-count { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }

/* Los avisos colgados de la fila ocupan su PROPIA linea: en una fila flex,
   `flex-basis: 100%` significa «todo el ancho», que es justo lo que hace falta
   aqui — y lo contrario de lo que significaba en la columna de arriba. */
.fr-condicional, .fr-suma { flex-basis: 100%; margin-top: 2px; padding: 7px 9px;
  font-size: 12px; line-height: 1.5; }
.fr-condicional { background: var(--band); border-left: 2px solid var(--border-strong); color: var(--muted); }
.fr-suma { background: var(--color-info-bg); border-left: 2px solid var(--color-info-bd); color: var(--color-info); }

/* SUELO PARA LOS CONTROLES NATIVOS. `.ctl` los viste; esto evita que una pantalla
   que se olvide de la clase se lleve el blanco del navegador — pasaba con los
   cuatro desplegables de /auditoria. Se define por ELEMENTO y con tokens, asi que
   vale en los dos temas y `.ctl` sigue ganando por especificidad. */
select, input:not([type="checkbox"]):not([type="radio"]), textarea {
  background: var(--surface-solid); color: var(--ink);
  border: 1px solid var(--border-strong); font: inherit;
}
select:focus, input:focus, textarea:focus { outline: 2px solid var(--color-accent); outline-offset: -1px; }
/* Las acciones de la barra, que pinta web/sesion.js: «+ Nuevo» con su creación
   rápida y el interruptor de tema. `margin-left: auto` las empuja a la derecha —
   el `.spacer` de antes era un hijo directo de la barra y aquí no valdría. */
.appbar-acc { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
/* LA TIRA DE CONFIGURACIÓN. Las secciones que viven dentro: agencia, clientes,
   garantías, usuarios y auditoría. La pinta web/sesion.js para las tres pantallas
   que la comparten. Va debajo del título: primero dices dónde estás. */
.cfg-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin: -6px 0 20px;
  border-bottom: 1px solid var(--border); }
.cfg-tabs a { padding: 8px 14px; font-size: 13.5px; color: var(--muted);
  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.cfg-tabs a:hover { color: var(--ink); }
.cfg-tabs a.on { color: var(--color-accent-text); border-bottom-color: var(--color-accent);
  font-weight: var(--w-medium); }
.cfg-tabs a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
/* ── DISEÑO: el color principal de la agencia ──────────────────────────────
   La muestra pinta con los valores DERIVADOS, no con el elegido: es lo que se va
   a ver de verdad. Cada mitad lleva su propio fondo fijo (el del tema claro y el
   del oscuro) porque enseña los dos a la vez, en la misma pantalla. */
.acento-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acento-fila input[type="color"] { width: 46px; height: 34px; padding: 2px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface-solid); }
.acento-fila input[type="text"] { width: 110px; }
.acento-prueba { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px; margin-bottom: 6px; }
.ac-muestra { border: 1px solid var(--border); padding: 14px 16px; display: grid; gap: 10px;
  justify-items: start; color: #1d1f20; }
.ac-muestra.ac-oscuro { color: #e7e8ea; }
.ac-tit { font-size: 10px; font-weight: var(--w-strong); letter-spacing: .09em; text-transform: uppercase; }
.ac-btn { border: 0; padding: 7px 14px; font: inherit; font-size: 13px;
  font-weight: var(--w-strong); cursor: default; }
.ac-enlace { font-size: 13px; font-weight: var(--w-medium); text-decoration: underline; }
.ac-caja { border: 1px solid; padding: 8px 11px; font-size: 12.5px; width: 100%; }
.acento-medido .ac-fila { display: flex; align-items: baseline; gap: 10px; padding: 5px 0;
  border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.acento-medido .ac-nom { flex: 1; color: var(--muted); }
.acento-medido .ac-val { font-family: var(--mono); font-weight: var(--w-strong);
  font-variant-numeric: tabular-nums; }
.acento-medido .ac-min { font-family: var(--mono); font-size: 11px; color: var(--faint); }

/* El motivo de que una pantalla no se haya podido pintar. Va donde estaba
   «Cargando expediente…», y tiene que VERSE: el 04/09/2026 este mensaje se
   escribia en un elemento que la linea anterior habia puesto en display:none,
   asi que una averia y un expediente vacio se veian igual (CLAUDE.md §5). */
.estado-error { display: block; margin: 14px 0; padding: 12px 14px;
  background: var(--color-alert-bg); border: 1px solid var(--color-alert-bd);
  color: var(--color-alert); font-size: 13px; line-height: 1.55; border-radius: 8px; }

/* PARTIDAS DE LA DECLARACIÓN (03/09/2026). Van antes que las líneas: lo que se declara son
   partidas, y las líneas de los documentos son el detalle del que salen.
   Reescrito con tokens al fusionar el diseño (04/09/2026): antes llevaba colores fijos y
   en modo oscuro se quedaba en blanco sobre blanco. */
.partida-card { margin: 6px 0; padding: 9px 11px; border: 1px solid var(--border);
  background: var(--band); color: var(--ink); }
.partida-card .mono { font-family: ui-monospace, Menlo, monospace; }

/* La segunda lectura, con el precio delante (03/09/2026). Ni por defecto ni escondida:
   gastar cuatro minutos de alguien sin preguntarle es una decisión que no nos toca. */
.sl-caja { margin: 10px 0; padding: 11px 13px; background: var(--color-info-bg);
  border-left: 2px solid var(--color-info-bd); color: var(--color-info); line-height: 1.5; }
.sl-precio { margin-top: 6px; }
.sl-acts { display: flex; gap: 10px; align-items: center; margin-top: 9px; flex-wrap: wrap; }
.sl-rec { color: var(--muted); font-size: .92em; }
.sl-estado { margin-top: 8px; }

/* ══ RECOLOCADO AL FUSIONAR EL DISEÑO (04/09/2026) ═══════════════════════════════
   Estas clases vivían en el <style> en línea de web/validacion.html, que este diseño
   retira en favor de la hoja única. No se «resuelven»: se RECOLOCAN, y con SUS tokens
   — con colores fijos se quedaban en blanco sobre blanco en modo oscuro. La forma es
   suya; lo que estas piezas DICEN y cuándo aparecen, nuestro. */

/* De dónde sale un valor que no sale de este documento (02/09/2026). */
.desde-otro { margin-top: 4px; padding: 6px 9px; font-size: 12px; line-height: 1.5;
  background: var(--color-info-bg); border-left: 2px solid var(--color-info-bd); color: var(--color-info); }

/* El aviso de «dos hechos bajo un rótulo»: la propuesta que pide la norma, la cita y
   el diagnóstico. Va dentro de .fr-suma, que ya tiene su fondo. */
.fh-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: 11px;
  background: var(--color-warn-bg); border: 1px solid var(--color-warn-bd); color: var(--color-warn); }
.fh-cita { margin-top: 6px; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.fh-diag { margin-top: 6px; padding: 6px 8px; font-size: 12px; line-height: 1.5;
  background: var(--surface-solid); border-left: 2px solid var(--color-accent); color: var(--ink); }
.fr-hecho { margin-top: 3px; }
.fr-hecho.fh-norma { font-weight: var(--w-medium); }
.fr-sin-casilla { margin-top: 3px; font-size: 11.5px; color: var(--muted); }

/* Varios valores en un solo texto: dos precintos son dos (03/09/2026). */
.multi { margin-top: 4px; padding: 6px 9px; font-size: 12px; line-height: 1.5;
  background: var(--band); border-left: 2px solid var(--border-strong); color: var(--ink); }
.multi-lista { margin: 4px 0 0; padding-left: 18px; }
.multi-por, .multi-duda { color: var(--muted); font-size: 11.5px; margin-top: 4px; }

/* El buscador de la nomenclatura, sólo en las celdas de código. PROPONE líneas del
   catálogo público; el código lo teclea la persona (CLAUDE.md §3). */
.nomsearch { margin-top: 8px; padding: 8px 10px; background: var(--band); border: 1px solid var(--border); }
.ns-cab { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.ns-q { width: 100%; }
.ns-go { margin-top: 6px; }
.ns-out { margin-top: 8px; max-height: 240px; overflow-y: auto; }
.ns-row, .ns-hit { display: flex; gap: 8px; align-items: baseline; padding: 5px 6px;
  border-bottom: 1px solid var(--border); cursor: pointer; }
.ns-row:hover, .ns-hit:hover { background: var(--surface-solid); }
.ns-cod { font-family: ui-monospace, Menlo, monospace; font-weight: var(--w-medium);
  color: var(--color-accent-text); flex: none; }
.ns-desc { color: var(--ink); font-size: 12.5px; }
.ns-tag { font-size: 11px; color: var(--muted); flex: none; margin-left: auto; }
.ns-malo { color: var(--color-warn); }
.ns-aviso, .ns-residual { margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.ns-hijas { margin: 4px 0 0 14px; }
.ns-hija { padding: 4px 6px; font-size: 12px; cursor: pointer; }
.ns-hija:hover { background: var(--surface-solid); }
.ns-res { margin-top: 6px; }

/* El código del expediente aplicado a las partidas, y por qué (03/09/2026). */
.part-exp { margin-top: 6px; padding: 6px 9px; font-size: 12px; line-height: 1.5;
  background: var(--color-info-bg); border-left: 2px solid var(--color-info-bd); color: var(--color-info); }
.pe-ok { color: var(--color-ok, var(--color-info)); }
.pe-decide { color: var(--color-warn); }

/* Los botones de la segunda lectura. */
.sl-si, .sl-no, .sl-recordar { margin-right: 8px; }

/* ── EL TOTAL DEL CAMIÓN, encima de la lista (06/09/2026) ────────────────────────────
   Con los tokens del sistema, no con colores fijos: en modo oscuro se quedaría en blanco
   sobre blanco. La cifra va en monoespaciada porque se lee para COMPARAR dos filas. */
.tc { margin: 0 0 16px; padding: 12px 14px; background: var(--band); border: 1px solid var(--border); }
.tc-tabla { width: 100%; border-collapse: collapse; }
.tc-tabla th { text-align: right; font-size: 12px; font-weight: var(--w-medium);
  color: var(--muted); padding: 0 0 6px; text-transform: uppercase; letter-spacing: .04em; }
.tc-tabla th:first-child { text-align: left; }
.tc-tabla td { padding: 4px 0; border-top: 1px solid var(--border); text-align: right; }
.tc-tabla td:first-child { text-align: left; color: var(--ink); }
.tc-tabla .mono { font-family: ui-monospace, Menlo, monospace; white-space: nowrap; }
.tc-de { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; }
.tc-ok { color: var(--color-ok, var(--color-info)); font-weight: var(--w-medium); }
.tc-mal { color: var(--color-warn); font-weight: var(--w-medium); }
.tc-nota { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.tc-diag { margin-top: 8px; padding: 7px 9px; font-size: 12px; line-height: 1.5;
  background: var(--surface-solid); border-left: 2px solid var(--color-accent); color: var(--ink); }

/* Las posiciones del camión: las recibidas y las que esperan (06/09/2026). */
.tc-pos { margin-top: 12px; }
.tc-pos td { font-size: 12.5px; }
.tc-pos td:nth-child(2), .tc-pos td:nth-child(3) { text-align: left; }
.tc-hueco td { color: var(--color-warn); }
.tc-falta { margin-top: 8px; padding: 7px 9px; font-size: 12px; line-height: 1.5;
  background: var(--color-warn-bg); border-left: 2px solid var(--color-warn-bd); color: var(--color-warn); }

/* Lo que no se interpreta, debajo de la lista y plegado (06/09/2026). Descartar no es
   esconder: se ve la cuenta, y se puede abrir cada documento. */
.descartados { margin-top: 14px; padding: 8px 10px; background: var(--band); border: 1px solid var(--border); }
.descartados > summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.descartados > summary:hover { color: var(--ink); }
.descartados .tbl { margin-top: 8px; }
.descartados td { font-size: 12.5px; color: var(--muted); }

/* ══════════════════════════════════════════════════════════════════════════
   /legajo — LA MESA DE CUADRE DEL CAMIÓN (11/09/2026)
   ═══════════════════════════════════════════════════════════════════════════
   Rediseño de `docs/Brief_Diseno_Legajo_y_Salida.md`. La pantalla contesta UNA
   pregunta —¿cuadra este camión y qué le falta?— y por eso el veredicto va
   arriba y se dice UNA vez.

   Antes eran tres tablas apiladas (totales, posiciones, documentos) con el
   mismo MRN en dos de ellas. La de totales es en realidad el PIE de la de
   posiciones: la suma contra lo declarado es la fila final de la misma lista.

   Todo color sale de un token. Ninguno literal: un color escrito a fuego no da
   ningún error, se queda como estaba (CLAUDE.md §5, 03/09/2026).
   ══════════════════════════════════════════════════════════════════════════ */


/* ⚠ TODAS LAS CLASES DE ESTA PANTALLA VAN PREFIJADAS `lg-`, y no por pulcritud.
   Las primeras se llamaron `.pie`, `.dif`, `.ok`… y `.pie` YA EXISTÍA en esta misma
   hoja, con `display: flex`. Aplicada a un `<tr>`, deshizo la fila entera: sus celdas
   dejaron de alinearse con la cabecera y la suma del camión salió debajo de la columna
   equivocada. No dio ningún error. Es el mismo choque de ámbito compartido que tiró
   panel.js con `const iniciales` (Mapa_Front_End.md §2 ter), aquí en CSS. */

/* — la cabecera: quién es este camión y en qué estado está — */
.lg-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--line-soft); }
.lg-titulo { font-family: var(--mono); font-size: 17px; font-weight: var(--w-strong); }
.lg-reg { font-family: var(--mono); font-size: 9.5px; font-weight: var(--w-medium);
  letter-spacing: .05em; padding: 1px 5px; color: var(--reg-sal);
  background: color-mix(in srgb, var(--reg-sal) 15%, transparent); }
.lg-meta { font-size: 12.5px; color: var(--muted); }
.lg-acc { margin-left: auto; display: flex; align-items: center; gap: 9px; }

/* El estado del camión en la cabecera. NO es un botón: no lleva fondo sólido ni
   cursor de mano — en el diseño se confundía con uno. */
/* NO LLEVA BORDE NI FONDO SÓLIDO, a propósito: al lado de un botón de verdad, un
   rótulo con marco se lee como un botón e invita a pulsarlo. Lo dice un punto de
   color y la palabra. */
.lg-estado { font-size: 12px; font-weight: var(--w-medium); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; }
.lg-estado::before { content: "●"; font-size: 9px; line-height: 1; }
/* Dentro de una fila de la tabla sí es una etiqueta de estado, no un rótulo suelto. */
.lg-tabla .lg-estado { font-size: 11.5px; }
.lg-ok   { color: var(--color-success); border-color: var(--color-success); }
.lg-mal  { color: var(--color-alert);   border-color: var(--color-alert); }
.lg-warn { color: var(--color-warn);    border-color: var(--color-warn); }
.lg-info { color: var(--color-info);    border-color: var(--color-info); }

/* — el veredicto: una vez, arriba, con el número dentro — */
.lg-ver { display: flex; gap: 12px; padding: 14px 16px; margin-bottom: 20px;
  border: 1px solid; border-left-width: 4px; border-radius: var(--radius); }
.lg-ver.lg-ok   { background: color-mix(in srgb, var(--color-success) 9%, transparent); }
.lg-ver.lg-mal  { background: color-mix(in srgb, var(--color-alert) 9%, transparent); }
.lg-ver.lg-warn { background: color-mix(in srgb, var(--color-warn) 9%, transparent); }
.lg-ver.lg-info { background: color-mix(in srgb, var(--color-info) 9%, transparent); }
.lg-ver-ico { flex: none; font-size: 17px; line-height: 1.3; }
.lg-ver-tit { font-size: 16px; font-weight: var(--w-strong); margin-bottom: 5px; }
.lg-ver-txt { font-size: 13.5px; line-height: 1.55; }
/* La procedencia del número: de qué papel sale. Va más callada que el veredicto
   pero NO se puede quitar — es lo que distingue una cota de un hecho. */
.lg-ver-de { margin-top: 7px; font-size: 12px; opacity: .85; }

/* — rótulo de sección — */
.lg-sec { display: flex; align-items: baseline; gap: 10px; margin-bottom: 7px; }
.lg-sec-tit { font-size: 10px; font-weight: var(--w-strong); letter-spacing: .09em;
  text-transform: uppercase; color: var(--label); }
.lg-sec-nota { font-size: 11.5px; color: var(--muted); }
.lg-sec-acc { margin-left: auto; display: flex; align-items: baseline; gap: 10px; }

/* — el buzón, al final: es lo último que se usa, no lo primero que se ve — */
.lg-buzon { margin-top: 22px; }