/* ══════════════════ LOS TEMAS (2-ago-2026) ══════════════════
   Antes había uno oscuro y uno claro, y mandaba el aparato: si el teléfono
   estaba en modo noche, la app salía oscura, quisiera o no quien la usa.
   Ahora son CUATRO y los escoge la persona, con los circulitos de la
   cabecera. Tiene sentido en esta oficina: no todos trabajan a la misma
   hora ni con la misma luz — de día y con el carro delante el claro se lee
   mejor; de noche, con horas seguidas delante, el oscuro descansa la vista.
   El que sale de fábrica es CLARO, decisión de José.

   ⚠️ Esto se pudo hacer en un rato por una sola razón: **ningún color está
   escrito a mano en el resto del archivo**, todos salen de estas variables.
   Se comprobó antes de tocar nada. Y por eso hay que resistirse a escribir
   un color «solo esta vez» más abajo: ese trozo se quedaría claro dentro
   del tema oscuro.

   ⚠️ `color-scheme` le DICE al navegador en qué tema está la página, y con
   eso él dibuja sus propios controles a juego: el iconito del calendario,
   la flecha de los desplegables, las barras de desplazamiento… Sin esto la
   página salía oscura pero el navegador seguía pintando sus iconos en
   versión clara — negro sobre negro, invisibles (lo sufrió José el
   31-jul-2026 intentando cambiar una fecha). */
:root, :root[data-tema="claro"]{
  color-scheme: light;
  --bg:#f4f6f9; --panel:#fff; --panel2:#f0f3f7; --line:#d8dee6;
  --txt:#12151a; --dim:#5c6773; --accent:#0f766e; --accent2:#0b5d56;
  --ok:#12805c; --warn:#b54708; --bad:#d92d20; --radius:10px;
  /* ⚠️ `--campo` = el fondo de una casilla CUANDO ESTÁ DENTRO DE UNA TARJETA
     (5-ago-2026). Desde que los grupos son tarjetas de `--panel2`, la casilla
     tenía que separarse de la tarjeta o desaparecía dentro: medido en claro,
     tarjeta #f0f3f7 y casilla #f4f6f9 — cuatro puntos de diferencia, invisible.
     La regla es la misma en los cinco temas, solo que al revés según el tema:
     en los OSCUROS la casilla va más oscura que la tarjeta (`--bg`), y en los
     CLAROS más clara (blanca). Si algún día se añade un tema, hay que ponerle
     su `--campo` o las casillas se le funden con la tarjeta. */
  --campo:#fff;
}
:root[data-tema="papel"]{
  color-scheme: light;
  --bg:#f2ece2; --panel:#fdfaf5; --panel2:#f7f1e7; --line:#e0d6c4;
  --txt:#2b2318; --dim:#7a6b56; --accent:#8a5a2b; --accent2:#6d4520;
  --ok:#4f7a34; --warn:#9a5b12; --bad:#b3402c; --radius:10px;
  --campo:#fffdf8;
}
:root[data-tema="oscuro"]{
  color-scheme: dark;
  --bg:#0f1115; --panel:#171a21; --panel2:#1e222b; --line:#2b303b;
  --txt:#e8eaed; --dim:#9aa3b2; --accent:#2f81f7; --accent2:#1f6feb;
  --ok:#2ea043; --warn:#d29922; --bad:#f85149; --radius:10px;
  --campo:var(--bg);
}
:root[data-tema="noche"]{
  color-scheme: dark;
  --bg:#0b1418; --panel:#121d22; --panel2:#17242a; --line:#233238;
  --txt:#e3eef0; --dim:#87a0a5; --accent:#2dd4bf; --accent2:#5eead4;
  --ok:#34d399; --warn:#fbbf24; --bad:#fb7185; --radius:10px;
  --campo:var(--bg);
}
/* ══════════ MARCA — los colores de la agencia (José, 5-ago-2026) ══════════
   Los cuatro que dio, tal cual y sin tocarles una cifra:
     azul principal #0A5CFF · azul oscuro #071A2E · blanco #FFFFFF · gris #9CA3AF
   ⚠️ Un tema necesita más de cuatro colores, así que los que faltan están
   DERIVADOS de esos, no inventados de otra familia: `--panel` y `--panel2` son
   el azul oscuro un punto y dos puntos más claros, `--line` el mismo azul
   aclarado hasta que se vea el borde, y `--accent2` el azul principal aclarado
   para cuando el ratón está encima.
   ⚠️ Los tres de estado —pagado, pendiente, error— NO se pasan a azul: un
   «Pagado» en verde y un «Pendiente» en rojo se leen de un vistazo desde lejos,
   y ese vistazo vale más que la coherencia de la paleta. Son los mismos que ya
   usan los otros temas oscuros. */
:root[data-tema="marca"]{
  color-scheme: dark;
  --bg:#08111D; --panel:#0F1E2F; --panel2:#142639; --line:rgba(255,255,255,.06);
  --line2:rgba(255,255,255,.11);
  --txt:#FFFFFF; --dim:#9CA3AF; --accent:#2F80FF; --accent2:#5798FF;
  --ok:#19C37D; --warn:#FFB020; --bad:#FF5A5A; --radius:16px;
  --campo:var(--bg);
}
/* el refuerzo de los iconitos del calendario, igual que en los otros oscuros */
:root[data-tema="marca"] input[type=date]::-webkit-calendar-picker-indicator,
:root[data-tema="marca"] input[type=time]::-webkit-calendar-picker-indicator,
:root[data-tema="marca"] input[type=month]::-webkit-calendar-picker-indicator{
  filter:invert(1) brightness(1.6); opacity:.9; cursor:pointer;
}
/* Refuerzo por si el navegador no hace caso a `color-scheme` (pasa en algunos
   Android): el iconito del calendario y el del reloj se aclaran a mano. En modo
   claro se deja como viene, que ahí ya se ve bien. */
/* Ahora el refuerzo cuelga del TEMA ELEGIDO, no de lo que diga el aparato:
   si no, con el teléfono en modo noche y la app en claro, los iconitos se
   aclaraban sobre fondo blanco y desaparecían. */
:root[data-tema="oscuro"] input[type=date]::-webkit-calendar-picker-indicator,
:root[data-tema="oscuro"] input[type=time]::-webkit-calendar-picker-indicator,
:root[data-tema="oscuro"] input[type=month]::-webkit-calendar-picker-indicator,
:root[data-tema="noche"] input[type=date]::-webkit-calendar-picker-indicator,
:root[data-tema="noche"] input[type=time]::-webkit-calendar-picker-indicator,
:root[data-tema="noche"] input[type=month]::-webkit-calendar-picker-indicator{
  filter:invert(1) brightness(1.6); opacity:.9; cursor:pointer;
}
/* Zona de toque decente para el iconito: en el teléfono era diminuto */
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator{padding:4px;margin-left:4px}
/* Lo que José haya escondido desde `maestro.html`. Va con `!important` porque
   tiene que ganarle a cualquier `display` que traiga el elemento — un botón de
   la barra es `flex` y una tarjeta es `grid`, y sin esto seguirían viéndose. */
.per-off{display:none!important}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
/* Cabecera compacta: 60 px de alto, no 76. Lo que se gana arriba se ve abajo
   en casillas, que es lo que se mira ocho horas al día. */
header{position:sticky;top:0;z-index:50;background:var(--panel);
  border-bottom:1px solid var(--line);padding:0 18px;min-height:60px;
  display:flex;gap:14px;align-items:center;flex-wrap:wrap}
header button{padding:8px 14px;font-size:13.5px}
h1{font-size:16px;margin:0;font-weight:650;letter-spacing:-.2px}
h1 small{font-size:11.5px}
h1 small{display:block;font-size:12px;color:var(--dim);font-weight:400}
.grow{flex:1}
/* ⚠️ El hueco de abajo (`padding-bottom`) tiene que ser mayor que la barra fija,
   y esa barra se parte en DOS renglones en cuanto la ventana se estrecha. Medido:
   115 px con dos renglones. Con menos, el último campo queda debajo de la barra
   y no se puede ni ver ni pulsar. */
.wrap{max-width:1440px;margin:0 auto;padding:18px 20px 170px}
/* ══════════ EL PANEL DE TRABAJO (paso 4, 4-ago-2026) ══════════
   Lo que se arregla: la app era un rollo vertical de diez secciones sin
   principio ni final, y quien la llenaba nunca veía dónde estaba ni cuánto le
   quedaba. Ahora hay una barra con las diez a la vista y se trabaja una a una.
   ⚠️ TODO cuelga de `body.panel`. Sin esa clase el archivo se comporta
   EXACTAMENTE como antes: sin barra, sin pie de paso y con las diez secciones
   una detrás de otra. Ese es el interruptor del ☰ de la cabecera, y es también
   la red de seguridad: si un día el panel estorba, se apaga y no queda nada
   torcido. Por eso ninguna regla de aquí se escribe suelta. */
body.panel .wrap{max-width:1280px}
.marco{display:grid;gap:18px;align-items:start}
/* La hoja manda y el panel de la derecha ocupa lo justo. Por debajo de 1180 px
   el panel se va abajo, entero: apretado a un lado no se lee. */
@media (min-width:1180px){
  body.panel .marco{grid-template-columns:minmax(0,1fr) 290px}
}
.hojaCol{min-width:0}
/* la barra: escondida mientras no haya panel */
.lateral{display:none}
/* ⚠️ El `top` NO puede ser un número escrito a mano. La cabecera cambia de alto
   sola: sus botones se van a un segundo renglón en pantallas medianas, y encima
   le van saliendo chapitas (la versión, la nube, el usuario) según el momento.
   Con 80 px fijos, medido, el lateral se metía DEBAJO de una cabecera de 133 px
   y los primeros pasos quedaban tapados. `--cab` la mide de verdad (`medirCab`). */
body.panel .lateral{display:block;position:sticky;top:calc(var(--cab,72px) + 12px);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:6px;max-height:calc(100vh - var(--cab,72px) - 28px);overflow-y:auto}
.lat-t{font-size:11px;font-weight:700;color:var(--dim);letter-spacing:.6px;
  padding:8px 10px 3px;text-transform:uppercase}
.lat-l{font-size:11.5px;color:var(--dim);padding:0 10px 8px;line-height:1.45;
  border-bottom:1px solid var(--line);margin-bottom:5px}
.lat-l b{color:var(--warn);background:color-mix(in srgb,var(--warn) 15%,transparent);
  border-radius:99px;padding:0 6px;font-weight:700}
.lat-l i{color:var(--ok);font-style:normal;font-weight:700}
/* cada sección de la barra. Es un botón, así que hay que deshacerle la pastilla
   de los botones de la app: aquí son renglones de una lista, no pastillas —
   la misma excepción que ya tenían los menús de la barra de abajo. */
.paso{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:none;border:0;border-radius:8px;padding:7px 10px;font:inherit;
  font-size:13.5px;font-weight:500;color:var(--txt);cursor:pointer;position:relative}
.paso:hover{background:var(--panel2);border-color:transparent}
.paso.on{background:color-mix(in srgb,var(--accent) 12%,transparent);
  color:var(--accent);font-weight:650}
.paso.on::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;
  border-radius:99px;background:var(--accent)}
.paso .nm{width:20px;height:20px;border-radius:50%;flex:none;display:grid;
  place-items:center;font-size:10.5px;font-weight:700;background:var(--panel2);
  color:var(--dim);border:1px solid var(--line)}
.paso.on .nm{background:var(--accent);color:#fff;border-color:var(--accent)}
.paso.hecho .nm{background:color-mix(in srgb,var(--ok) 15%,transparent);
  color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.paso .tx{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.paso.hecho .tx{color:var(--dim)}
.paso.on.hecho .tx{color:var(--accent)}
.paso .fal{font-size:11px;font-weight:700;flex:none;color:var(--warn);
  background:color-mix(in srgb,var(--warn) 15%,transparent);border-radius:99px;padding:1px 7px}
/* ⚠️ ESTO es lo que esconde nueve secciones de diez. Va por clase y no por el
   atributo `hidden`, que lo pone el navegador con la especificidad más baja que
   hay y cualquier regla del archivo le ganaría sin avisar. */
/* ⚠️ Con los pasos encendidos se esconde el numerito de cada sección: el paso 3
   junta las secciones 3 y 4, así que un «4» al lado del título contradecía al
   stepper, que dice «3». Sin pasos —el rollo largo— vuelve, porque ahí sí
   numera de 1 a 10 y ayuda. */
body.panel .sec-h .n{display:none}
body.panel .sec-h{padding-top:20px}
body.panel #F>fieldset{display:none}
body.panel #F>fieldset.act{display:block}
/* el pie del paso */
.pasoPie{display:none}
body.panel .pasoPie{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:13px 18px}
.pasoPie button{border-radius:12px;padding:11px 18px}
#btPasoSeguir{display:inline-flex;align-items:center;gap:8px}
.pasoPie .est{font-size:13px;color:var(--dim)}
.pasoPie .est.listo{color:var(--ok);font-weight:600}
/* el ☰ de la cabecera */
.bt-panel{padding:8px 13px;font-size:16px;line-height:1}
.bt-panel.on{background:var(--accent);border-color:var(--accent);color:#fff}
/* ⚠️ Una tarjeta grande por paso, de 18 px de radio, y NADA de cajas dentro de
   cajas: dentro solo hay grupos separados por su título fino y por aire. Las
   cajas anidadas eran la mitad de la sensación de «pantalla vacía». */
fieldset{border:1px solid var(--line);border-radius:18px;
  background:var(--panel);margin:0 0 14px;padding:0;overflow:hidden}
legend{display:none}
/* El título de la sección va SIN barra de color de fondo: con siete pasos y dos
   secciones por paso, siete franjas más el stepper eran demasiada raya. */
/* ⚠️ El relleno bajó de 18/22 a 14/16 el 5-ago: ahora cada grupo trae su propia
   tarjeta con su borde y su relleno, así que el de la sección se sumaba al de
   dentro y se veía un marco doble. */
.sec-h{background:none;padding:14px 16px 0;border:0;
  font-weight:650;font-size:14.5px;letter-spacing:-.1px;text-transform:none;
  display:flex;align-items:center;gap:10px}
.sec-h .n{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent);
  width:24px;height:24px;border-radius:8px;display:grid;place-items:center;
  font-size:11.5px;font-weight:700;flex:none}
/* ══════════ LA REJILLA DE 12 COLUMNAS (4-ago-2026) ══════════
   Viene del prototipo `prototipo-panel.html`, pasos 1 a 3 del plan de IDEAS.md.
   ⚠️ ESTO ES LO QUE ARREGLA LO «ESPACIOSO» que se quejaba José. Antes cada
   campo ocupaba un tercio de pantalla lo midiera lo que lo midiera, así que un
   código postal de 5 cifras tenía 300 px de caja vacía y hacía falta desplazar
   para ver ocho casillas. Ahora cada campo ocupa lo que MIDE su dato: el estado
   2 columnas, la calle 5, el nombre 6.
   ⚠️ El ancho de un campo de CHIPS no lo manda el dato, lo mandan LAS OPCIONES:
   «Combustible» con 3 columnas parte sus cuatro chips en dos filas y descuadra
   el renglón entero; con 6 caben de una.
   ⚠️ `align-items:end` es el seguro contra el desorden: si una etiqueta se parte
   en dos líneas —«Fotos tomadas (VIN y motor)»— y la de al lado no, sin esto sus
   casillas quedarían a distinta altura y el renglón se ve torcido.
   ⚠️ Y de ahí sale la regla que manda en TODO lo de abajo: **lo que crece por
   ENCIMA de la casilla es gratis; lo que crece por DEBAJO descuadra el renglón.**
   Por eso la ayuda se esconde en una pista `?` y los avisos que se llenan solos
   (el del VIN, el del motor, el reloj) van a un renglón entero suyo — clase
   `.nota` — en vez de colgar debajo de su campo. */
.sec-b{padding:14px 16px 16px;display:grid;gap:12px;
  grid-template-columns:repeat(12,1fr);align-items:end}
.f{display:flex;flex-direction:column;gap:6px;min-width:0;grid-column:span 12}
.f.c2{grid-column:span 2}.f.c3{grid-column:span 3}.f.c4{grid-column:span 4}
.f.c5{grid-column:span 5}.f.c6{grid-column:span 6}.f.c7{grid-column:span 7}
.f.c8{grid-column:span 8}.f.c9{grid-column:span 9}
.f.wide{grid-column:1/-1}
/* para el campo que crece hacia abajo por su cuenta (las firmas): que se quede
   pegado ARRIBA en vez de alinearse por el pie con el de al lado */
.f.arriba{align-self:start}
/* un renglón entero para un aviso que se llena solo; si está vacío, no ocupa */
.nota{grid-column:1/-1}
.nota:empty{display:none}
/* ── LOS GRUPOS, EN TARJETA CON ICONO (5-ago-2026) ──
   Antes cada sección era una lista larga de campos sueltos, y eso es parte de lo
   que la hacía verse hueca: sin agrupar, el ojo no encuentra dónde empieza y
   acaba cada cosa y todo parece igual de importante. Cuatro campos bajo un
   título se leen de un golpe.
   El grupo es una fila entera de la sección y por dentro vuelve a ser una
   rejilla de 12, así que los anchos `c2`…`c8` valen igual dentro y fuera.
   ⚠️ ESTO DESHACE A PROPÓSITO el «nada de cajas dentro de cajas» del 4-ago, que
   está escrito unas líneas más arriba. Aquella regla salió de que las cajas
   anidadas dejaban la pantalla hueca — pero eso era con el título fino y una
   caja por campo. La maqueta que trajo José el 5-ago pide justo esto: la
   tarjeta con su icono. Lo que NO cambia es la densidad: la tarjeta añade
   borde y relleno, y por eso el aire de dentro se recortó a cambio. Si el
   formulario vuelve a crecer de alto, esto es lo primero que hay que mirar
   — bonito y más lento es la peor forma de fracasar. */
.grupo{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,1fr);
  gap:12px;align-items:end;
  background:var(--panel2);border:1px solid var(--line);border-radius:14px;
  padding:12px 14px 14px}
.grupo>.gt{grid-column:1/-1;display:flex;align-items:center;gap:9px;
  font-size:13.5px;font-weight:650;color:var(--txt);
  letter-spacing:-.1px;text-transform:none;padding-bottom:0;
  border-bottom:0;margin-bottom:0}
/* el icono en su pastilla de color, como la maqueta */
.grupo>.gt>svg{flex:none;width:26px;height:26px;padding:5px;border-radius:8px;
  background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
/* ⚠️ La casilla DENTRO de una tarjeta cambia de fondo (`--campo`, ver arriba en
   los temas). Sin esto, en Claro la casilla y la tarjeta salían a cuatro puntos
   de color una de otra y el formulario parecía una hoja lisa sin casillas.
   Solo dentro del grupo: fuera, la casilla sigue sobre el fondo de la sección. */
.grupo input[type=text],.grupo input[type=date],.grupo input[type=number],
.grupo input[type=email],.grupo select,.grupo textarea{background:var(--campo)}
/* ── DOS TARJETAS POR RENGLÓN ──
   Es lo que hace la maqueta («Información Personal» al lado de «Dirección en
   Miami») y además es lo que devuelve el alto que costó meterlas en tarjeta.
   ⚠️ Solo vale donde los campos caben en media pantalla: dentro de una tarjeta
   `mitad` la rejilla de 12 mide la MITAD, así que un `c3` son ~110 px y ahí no
   entra un número de licencia con su cámara. Por eso el ancho de los campos de
   dentro se vuelve a repartir a mano, tarjeta por tarjeta, y no se pone `mitad`
   a un grupo sin mirar cómo queda.
   ⚠️ `align-self:start` para que dos tarjetas de distinto alto no se estiren:
   sin esto la corta se alarga hasta la larga y queda un hueco muerto dentro. */
.grupo.mitad{grid-column:span 6;align-self:start}
/* ⚠️ Dos por renglón SOLO si hay sitio de verdad. Por debajo de 1150 px la
   pantalla ya no da: acuérdate de que el panel derecho se come 300 px, así que
   media tarjeta se queda en unos 250 y los campos salen en tiras. Ahí vuelve
   una por renglón, que es lo que se lee. En el teléfono, igual. */
@media (max-width:1150px){ .grupo.mitad{grid-column:1/-1} }
label{font-size:13px;color:var(--dim);font-weight:500}
/* la etiqueta es una fila: el nombre, el asterisco de obligatorio y la pista */
.f>label{display:flex;align-items:center;gap:6px;flex-wrap:wrap;line-height:1.3}
label .req{color:var(--bad)}
/* ── LA AYUDA, ESCONDIDA EN UNA PISTA «?» (4-ago-2026) ──
   Cada campo llevaba debajo dos renglones de texto de ayuda, y sumados eran la
   mitad del aire sobrante de la pantalla. Ahora la ayuda vive en un `?` al lado
   de la etiqueta: se lee con el ratón encima (el `title` de siempre) y se ABRE
   pulsándolo, que es lo único que funciona en la tablet del patio.
   ⚠️ El texto abierto sale ENTRE la etiqueta y la casilla, nunca debajo: así
   abrir una pista no mueve las casillas de al lado (ver la regla de arriba). */
.pista{flex:none;width:16px;height:16px;min-width:0;padding:0;border-radius:50%;
  border:1px solid var(--line);background:var(--panel2);color:var(--dim);
  font-size:10px;font-weight:700;line-height:1;display:inline-grid;place-items:center;
  cursor:help}
.pista:hover,.pista.on{background:var(--accent);border-color:var(--accent);color:#fff}
.pista.flag{border-color:var(--warn);color:var(--warn)}
.pista.flag:hover,.pista.flag.on{background:var(--warn);border-color:var(--warn);color:#fff}
.ayuda{font-size:12px;color:var(--dim);line-height:1.45;background:var(--panel2);
  border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:0 8px 8px 0;padding:7px 10px}
.ayuda.flag{border-left-color:var(--warn);color:var(--warn)}
.ayuda[hidden]{display:none}
/* 46 px de alto y esquinas de 12: lo que pidió José. El borde va MUY sutil —
   `--line2` es un blanco al 11 % en el tema de marca— porque en una pantalla con
   cuarenta casillas, cuarenta bordes marcados son cuarenta rayas compitiendo. */
input[type=text],input[type=date],input[type=number],input[type=email],select,textarea{
  background:var(--bg);color:var(--txt);border:1px solid var(--line2);
  border-radius:12px;padding:0 13px;height:46px;font:inherit;font-size:14.5px;width:100%}
textarea{height:auto;padding:12px 13px}
textarea{min-height:88px;resize:vertical;line-height:1.5}
/* el foco azul, con su halo suave */
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);
  outline-offset:-2px;border-color:transparent;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
input.up{text-transform:uppercase}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{position:relative}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:block;padding:9px 15px;border:1px solid var(--line);
  border-radius:999px;cursor:pointer;font-size:14px;user-select:none;background:var(--bg)}
.chip input:checked+span{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.chip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.hint{font-size:12px;color:var(--dim)}
.hint.flag{color:var(--warn)}
.cond{grid-column:1/-1;border:1px dashed var(--warn);border-radius:var(--radius);
  padding:16px;background:color-mix(in srgb,var(--warn) 7%,transparent)}
.cond>.t{font-weight:650;font-size:13px;color:var(--warn);
  text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.cond>.d{font-size:13px;color:var(--dim);margin-bottom:14px}
.cond .sec-b{padding:0;background:none}
/* La barra de abajo, fija. TRES grupos por el orden del trabajo —meter datos ·
   guardar · sacar— separados por una rayita fina y por el hueco que empuja el
   tercero a la derecha. Antes se fiaba solo del aire y no bastaba: con nueve
   botones seguidos, el ojo no ve dónde acaba un grupo y empieza el otro. */
.bar{position:fixed;bottom:0;left:0;right:0;background:var(--panel);
  border-top:1px solid var(--line);padding:11px 20px;display:flex;gap:9px;
  flex-wrap:wrap;align-items:center;z-index:60}
.bar button{border-radius:12px;padding:10px 16px;font-size:13.5px}
/* ⚠️ LA RAYITA ENTRE GRUPOS NO USA `var(--line)`. Se probó y **no se veía**: esa
   variable es blanco al 6% y está pensada para el borde de una tarjeta grande,
   donde hay centímetros de raya. En un palito de 1×36 px no se distingue del
   fondo, y una separación que no se ve no separa nada. Va con `--dim` rebajado,
   que es el gris del texto de apoyo de CADA tema, así que funciona igual en el
   oscuro y en el claro. */
.bar-raya{flex:none;width:1px;height:30px;align-self:center;margin:0 6px;
  background:color-mix(in srgb,var(--dim) 45%,transparent)}
/* el hueco que manda el grupo de «sacar» a la derecha */
.bar-aire{flex:1 1 0;min-width:0}
/* ── LOS BOTONES, EN PASTILLA (2-ago-2026) ──
   Pedido de José. La regla que sale de aquí: **lo que se pulsa va redondo,
   lo que se escribe va recto.** Los chips ya eran pastilla desde el
   principio y por eso le gustaban; los botones se quedaron atrás.
   ⚠️ Los del menú desplegable NO: ahí son renglones de una lista, no
   pastillas, y su regla está más abajo con `.pop button`. */
button{background:var(--panel2);color:var(--txt);border:1px solid var(--line);
  border-radius:999px;padding:10px 18px;font:inherit;font-weight:600;font-size:14px;cursor:pointer}
button:hover{border-color:var(--accent)}
button:active{transform:scale(.98)}
button.pri{background:var(--accent);border-color:var(--accent);color:#fff}
button.pri:hover{background:var(--accent2)}
/* ── LOS TRES BLOQUES DE LA CABECERA (6-ago-2026) ──
   La caja del medio —versión, nube, quién está dentro— separa con sus bordes lo
   que se PULSA para trabajar de lo que solo INFORMA y de los ajustes.
   ⚠️ `:has()` es lo que la apaga cuando se queda sin nada visible dentro. Sin
   eso saldría una caja vacía con dos rayas, que es peor que no tener rayas. */
/* mismo gris que `.bar-raya`, y la misma altura corta: partir la cabecera de
   arriba abajo la haría parecer dos cabeceras */
.cab-info{display:flex;gap:10px;align-items:center;height:30px;padding:0 14px;
  border-left:1px solid color-mix(in srgb,var(--dim) 45%,transparent);
  border-right:1px solid color-mix(in srgb,var(--dim) 45%,transparent)}
.cab-info:not(:has(> :not([hidden]))){display:none}
/* ── EL COLOR DE LA PANTALLA, EN UN BOTÓN (6-ago-2026) ──
   El botón enseña el circulito del tema puesto y cómo se llama; los cinco salen
   al pulsarlo. Antes eran cinco circulitos sueltos en la cabecera. */
.bt-tema{display:inline-flex;align-items:center;gap:8px}
.bt-tema-f{color:var(--dim);font-size:11px}
/* el circulito, partido en diagonal: fondo del tema y su acento */
.tema-punto{width:16px;height:16px;border-radius:50%;flex:none;display:inline-block;
  border:1px solid var(--line)}
/* dentro del menú va delante del nombre, alineado con él */
.pop button.tema-op{display:flex;align-items:center;gap:10px}
.pop button.tema-op .tema-punto{width:18px;height:18px}
/* ⚠️ El estado va PEGADO a los botones de guardar, que son los que lo cambian, y
   ya no tirado a la derecha con `margin-left:auto`. Suelto al final parecía un
   pie de página; al lado de «Guardar» se lee como lo que es: si esto está
   guardado o no. Lo que empuja el último grupo a la derecha ahora es
   `.bar-aire`, no él. */
#status{font-size:13px;color:var(--dim);text-align:left;max-width:190px;
  line-height:1.2}
#status.ok{color:var(--ok)}
/* menús desplegables de la barra */
.menu{position:relative}
/* ⚠️ EL TOPE DE ALTO NO ES ADORNO. El menú crece hacia ARRIBA desde su botón, y
   el de Imprimir ya va por trece renglones: en una pantalla de portátil se salía
   por encima del borde y «Expediente completo» —la primera opción y la que más
   se usa— quedaba fuera, sin poder verse ni pulsarse. Con el tope, lo que sobra
   se desliza dentro del propio menú y el primer renglón siempre se ve. */
.pop{display:none;position:absolute;bottom:calc(100% + 20px);left:0;z-index:70;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  /* ⚠️ 270 y no 250: medido, el rótulo «MODELO DE LA FACTURA · Clásica» pide
     243 px con su flecha y sus márgenes, y con 250 se partía en dos renglones.
     Plegado, el menú ya no se estira solo —las descripciones largas están
     dentro de lo cerrado y no cuentan—, así que el ancho lo tiene que dar el
     mínimo. */
  padding:6px;min-width:270px;box-shadow:0 10px 30px #0006;
  max-height:calc(100vh - 110px);overflow-y:auto}
.pop.der{left:auto;right:0}
/* ⚠️ HACIA ABAJO. Todos los menús viven en la barra de abajo y por eso crecen
   hacia ARRIBA; el del color vive en la CABECERA, y ahí abrirse hacia arriba lo
   sacaría de la pantalla. Es la única diferencia. */
.pop.abajo{bottom:auto;top:calc(100% + 12px)}
.pop.on{display:block}
.pop button{display:block;width:100%;text-align:left;background:none;border:0;
  padding:10px 12px;border-radius:7px;font-size:14px;font-weight:600}
.pop button:hover{background:var(--panel2)}
.pop button small{display:block;font-weight:400;font-size:12px;color:var(--dim);margin-top:2px}
/* separador con título dentro del menú: rotula cada grupo de opciones */
.pop-sep{margin:8px 4px 3px;padding-top:8px;border-top:1px solid var(--line);
  font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--dim)}
/* el primero del menú no lleva raya encima —no separa nada— ni aire de sobra */
.pop-sep:first-child{margin-top:2px;padding-top:0;border-top:0}
/* el rótulo del grupo principal, en el color de la marca: es lo que se busca
   nueve de cada diez veces que se abre este menú */
.pop-sep.pri{color:var(--accent)}
/* ── LO QUE VA PLEGADO DENTRO DE UN MENÚ (6-ago-2026) ──
   Mismo rótulo que `.pop-sep`, pero se pulsa y abre lo suyo. Va con `<details>`
   y no con una clase y JS a propósito: el navegador ya sabe plegar, recuerda el
   estado, se abre con el teclado y lo lee un lector de pantalla. */
.pop-mas{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.pop-mas>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:8px;padding:7px 12px;border-radius:7px;
  font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  color:var(--dim)}
/* Safari pinta su propio triangulito y saldrían dos */
.pop-mas>summary::-webkit-details-marker{display:none}
.pop-mas>summary:hover{background:var(--panel2);color:var(--txt)}
/* la flecha, a la derecha del todo; gira al abrir para decir dónde está */
.pop-mas>summary::after{content:'▸';margin-left:auto;font-size:13px;letter-spacing:0;
  transition:transform .15s}
.pop-mas[open]>summary::after{transform:rotate(90deg)}
/* el nombre de lo que está puesto, al lado del rótulo y sin gritar */
.pop-mas>summary b{font-weight:700;color:var(--accent);text-transform:none;
  letter-spacing:0;font-size:11.5px}
.pop-mas>summary b:not(:empty)::before{content:'· '}
/* el modelo puesto, marcado: es lo que hace que el clic sea «de un vistazo» */
.pop button.act{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}
.pop button.act::after{content:' ✓';font-weight:700}
dialog{border:1px solid var(--line);border-radius:12px;background:var(--panel);
  color:var(--txt);max-width:640px;width:92%;padding:0}
dialog::backdrop{background:#000a}
.dh{padding:16px 20px;border-bottom:1px solid var(--line);font-weight:650}
.db{padding:16px 20px;max-height:60vh;overflow:auto}
.df{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px;
  justify-content:flex-end;align-items:center;flex-wrap:wrap}
/* ⚠️ SEPARAR IZQUIERDA DE DERECHA CON `margin-right:auto` Y NO CON UN HUECO
   FLEXIBLE. Se probó con un `<span>` que crecía y salió mal: el hueco se comía
   205 px de los 600 que hay y **empujaba el botón de WhatsApp a una segunda
   fila**, medido. Un margen automático reparte el sitio sobrante sin ocupar una
   casilla propia en la fila. */
.df > .a-la-izquierda,
#dcorreo .df #co_copiar{margin-right:auto}
/* El aviso del pie: no es un botón, así que no puede parecerlo. */
.pie-av{font-size:12.5px;color:var(--dim);line-height:1.35;max-width:330px}
/* «solo si lo mandas por correo»: que se vea que esos dos campos no frenan nada. */
.opc{font-weight:400;color:var(--dim);font-size:11.5px}

/* ═════ EL BOTÓN DE WHATSAPP (18-ago-2026) ═════
   José lo vio y tenía razón: iba de texto suelto a la izquierda y no parecía un
   botón. Ahora es la acción principal, la última y la de más a la derecha, que
   es donde la mano la busca — porque en esta oficina se manda por WhatsApp, no
   por correo.
   ⚠️ VERDE DE WHATSAPP CON LETRA OSCURA, y no con letra blanca. Sobre este verde
   el blanco se lee mal; el mismo par ya se usa en la app de bolsillo. Se
   reconoce por el color y el logo antes de leer una palabra. */
/* ⚠️ El relleno y el tamaño de letra son los MISMOS que los de `button`, para
   que quede a la misma altura exacta que Cancelar y Por correo. Con 9px de
   relleno medía 40 y los otros 42: dos píxeles que en una fila se ven. */
.b-wa{display:inline-flex;align-items:center;gap:8px;background:#25D366;color:#06301a;
  border:1px solid #1eb257;border-radius:999px;padding:10px 18px;font-size:14px;
  font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap}
.b-wa:hover{background:#1eb257}
.b-wa svg{width:19px;height:19px;fill:currentColor;flex:none}
.b-wa[hidden]{display:none}
.row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--line);cursor:pointer;align-items:center}
.row:hover{color:var(--accent)}
.row b{font-weight:600}
.row small{color:var(--dim);font-size:12px}
.row .fin{display:flex;gap:6px;align-items:center;flex:none}
.row .del{background:none;border:1px solid transparent;color:var(--dim);
  padding:5px 9px;border-radius:7px;font-size:14px;line-height:1}
.row .del:hover{border-color:var(--bad);color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,transparent)}
.row .res{font-size:12px;padding:6px 11px}
.tabs{display:flex;gap:8px;margin-bottom:12px}
.tabs button{font-size:13px;padding:8px 14px}
.tabs button.act{background:var(--accent);border-color:var(--accent);color:#fff}
.pap-nota{font-size:12.5px;color:var(--dim);background:var(--panel2);border:1px solid var(--line);
  border-radius:8px;padding:10px 12px;margin-bottom:12px}
/* factura */
.fac-l{display:grid;grid-template-columns:1fr 130px;gap:8px;margin-bottom:7px}
.fac-l .mto{text-align:right}
.fac-tot{text-align:right;font-size:16px;font-weight:700;padding:9px 4px 2px;
  border-top:2px solid var(--line);margin-top:4px}
.fac-tot small{display:block;font-size:12px;font-weight:500;color:var(--dim)}
.fac-tot .deb{color:var(--warn)}
/* ---- el libro de pagos del cliente (30-ago-2026) ---- */
.pagos-lista{display:grid;gap:6px;margin-bottom:8px}
.pg-vacio{font-size:12px;color:var(--dim);padding:8px 10px;border:1px dashed var(--line);
  border-radius:9px}
.pg{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;
  padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:var(--bg)}
.pg b{font-size:15px;color:var(--ok)}
.pg span{font-size:11.5px;color:var(--dim)}
/* Un pago anulado se queda TACHADO, no desaparece: el rastro es lo que hace que
   este libro valga como prueba el día que alguien discuta una cuenta. */
.pg.anulado{opacity:.62}
.pg.anulado b{color:var(--dim);text-decoration:line-through}
.pg-x{border:0;background:none;color:var(--warn);font:600 11px/1 inherit;cursor:pointer;
  padding:5px 7px;border-radius:7px}
.pg-x:hover{background:color-mix(in srgb,var(--warn) 14%,transparent)}
.pagos-nuevo{display:grid;grid-template-columns:150px 130px 1fr 1fr auto;gap:7px;align-items:center}
@media(max-width:760px){.pagos-nuevo{grid-template-columns:1fr 1fr}
  .pagos-nuevo input[type=text]:last-of-type,.pagos-nuevo .bt{grid-column:1/-1}}
#printArea{display:none}
#busca{margin-bottom:6px}
#nres{font-size:12px;color:var(--dim);padding:6px 0 2px}
.lista-herramientas{margin:10px 0 8px}
.lista-herramientas[hidden]{display:none}
.lista-barra-filtros{display:grid;grid-template-columns:minmax(190px,auto) 1fr auto;align-items:center;
  gap:9px;padding:9px;border:1px solid var(--line);border-radius:16px;background:var(--panel2)}
.lista-toggle{display:flex;align-items:center;gap:9px;min-height:46px;padding:7px 10px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel);color:var(--txt);text-align:left}
.lista-toggle svg{width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:2;
  stroke-linecap:round;flex:none}
.lista-toggle>span:nth-of-type(1){display:flex;flex-direction:column;gap:2px;min-width:0}
.lista-toggle b{font-size:13px}.lista-toggle small{color:var(--dim);font-size:9.5px;font-weight:600}
.lista-toggle i{min-width:21px;height:21px;padding:0 5px;border-radius:8px;display:grid;place-items:center;
  background:var(--accent);color:#fff;font-size:9px;font-style:normal;font-weight:800}
.lista-toggle i[hidden]{display:none}
.lista-toggle .lista-toggle-flecha{margin-left:auto;width:16px;height:16px;stroke:var(--dim);
  transition:transform .18s}
.lista-toggle[aria-expanded=true]{border-color:color-mix(in srgb,var(--accent) 42%,var(--line));
  background:color-mix(in srgb,var(--accent) 8%,var(--panel))}
.lista-toggle[aria-expanded=true] .lista-toggle-flecha{transform:rotate(180deg)}
.lista-conteo{justify-self:end;display:flex;align-items:baseline;gap:5px;color:var(--dim);white-space:nowrap}
.lista-conteo b{color:var(--txt);font-size:19px;font-variant-numeric:tabular-nums}
.lista-conteo span{font-size:10.5px}
.lista-limpiar{border:0;background:transparent;color:var(--accent);padding:8px 7px;font-size:10.5px;
  font-weight:750;white-space:nowrap}
.lista-limpiar[hidden]{display:none}
.lista-activos{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:34px;padding:7px 4px 2px}
.lista-sin-filtros{color:var(--dim);font-size:10.5px}
.lista-activo{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:5px 7px 5px 9px;
  border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line));border-radius:999px;
  background:color-mix(in srgb,var(--accent) 9%,var(--panel));color:var(--accent);
  font-size:10.5px;font-weight:700}
.lista-activo span{font-size:13px;line-height:1;color:var(--dim)}
.lista-filtros{margin-top:7px;padding:14px;border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 5%,var(--panel2)),var(--panel))}
.lista-filtros[hidden]{display:none}
.lista-filtros-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.lista-campo>span{display:block;margin:0 2px 6px;color:var(--dim);font-size:9px;
  font-weight:800;letter-spacing:.6px;text-transform:uppercase}
.lista-desplegable{position:relative;min-width:0}
.lista-selector{width:100%;height:43px;margin:0;padding:7px 9px 7px 12px;border:1px solid var(--line);
  border-radius:11px;background:var(--campo);color:var(--txt);display:flex;align-items:center;
  gap:8px;text-align:left;font-size:11.5px;font-weight:700;box-shadow:none}
.lista-selector:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
  background:color-mix(in srgb,var(--accent) 4%,var(--campo))}
.lista-selector-nombre{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.lista-selector-cuenta{flex:none;min-width:25px;height:24px;padding:0 7px;border-radius:8px;display:grid;
  place-items:center;background:var(--panel2);color:var(--dim);font-size:10px;font-variant-numeric:tabular-nums}
.lista-selector svg{width:17px;height:17px;fill:none;stroke:var(--dim);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;flex:none;transition:transform .16s}
.lista-desplegable.abierto .lista-selector{border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 17%,transparent);
  background:color-mix(in srgb,var(--accent) 7%,var(--campo))}
.lista-desplegable.abierto .lista-selector svg{transform:rotate(180deg);stroke:var(--accent)}
.lista-menu{position:absolute;z-index:80;top:calc(100% + 7px);left:0;width:100%;min-width:210px;
  max-height:260px;overflow:auto;padding:6px;border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));
  border-radius:13px;background:var(--panel);box-shadow:0 18px 42px #0008,0 0 0 1px color-mix(in srgb,var(--txt) 4%,transparent)}
.lista-menu[hidden]{display:none}
.lista-opcion{width:100%;min-height:38px;margin:0;padding:7px 8px 7px 10px;border:0;border-radius:9px;
  background:transparent;color:var(--txt);display:grid;grid-template-columns:minmax(0,1fr) auto 18px;
  align-items:center;gap:7px;text-align:left;font-size:11.5px;font-weight:650;box-shadow:none}
.lista-opcion span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lista-opcion b{min-width:24px;height:22px;padding:0 6px;border-radius:7px;display:grid;place-items:center;
  background:var(--panel2);color:var(--dim);font-size:9.5px;font-variant-numeric:tabular-nums}
.lista-opcion svg{width:16px;height:16px;fill:none;stroke:transparent;stroke-width:2.5;
  stroke-linecap:round;stroke-linejoin:round}
.lista-opcion:hover,.lista-opcion:focus-visible{background:color-mix(in srgb,var(--accent) 10%,var(--panel));
  color:var(--accent);outline:none}
.lista-opcion.seleccionada{background:color-mix(in srgb,var(--accent) 15%,var(--panel));color:var(--accent)}
.lista-opcion.seleccionada b{background:var(--accent);color:#fff}
.lista-opcion.seleccionada svg{stroke:var(--accent)}
.lista-filtros p{margin:10px 2px 0;color:var(--dim);font-size:10px;line-height:1.45}
@media (max-width:640px){
  #dlg{width:96%;max-height:94vh}
  .lista-barra-filtros{grid-template-columns:minmax(0,1fr) auto}
  .lista-toggle{min-width:0}.lista-conteo{grid-column:2;grid-row:1}
  .lista-limpiar{grid-column:1/-1;justify-self:end;padding:2px 5px}
  .lista-filtros-grid{grid-template-columns:1fr}
  .lista-selector,.lista-opcion{font-size:13px}
  .lista-menu{max-height:240px}
}
.lista-row-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.lista-row-meta span{padding:3px 7px;border-radius:7px;background:var(--panel2);color:var(--dim);
  font-size:10px;font-weight:650}
.lista-row-meta .atrasado{background:color-mix(in srgb,var(--warn) 13%,var(--panel));color:var(--warn)}
/* Los chips de «buscar por» (16-sep-2026), calcados de la app de bolsillo. */
.lista-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.lista-chips button{min-height:34px;padding:6px 12px;border-radius:11px;cursor:pointer;
  border:1px solid var(--line);background:var(--panel2);color:var(--txt);
  font:inherit;font-size:13px;font-weight:600}
.lista-chips button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.lista-chip-pista{margin:6px 0 0;color:var(--dim);font-size:12.5px}
.lista-chip-pista:empty{display:none}

/* La chapa de cobro en cada renglón: un filtro cuyo resultado no se ve en la
   lista es un filtro invisible (16-sep-2026). */
.lista-row-meta .cobro-no{background:color-mix(in srgb,var(--bad) 13%,var(--panel));color:var(--bad)}
.lista-row-meta .cobro-medio{background:color-mix(in srgb,var(--warn) 13%,var(--panel));color:var(--warn)}
.lista-row-meta .cobro-ok{background:color-mix(in srgb,var(--ok) 13%,var(--panel));color:var(--ok)}
.lista-row-meta .cobro-sin{opacity:.85}

/* Lo que le falta a un carro para poder seguir (16-sep-2026). Va en el mismo
   renglón de chapas y con el color de aviso: es trabajo pendiente, no un error. */
.lista-row-meta .lista-falta{background:color-mix(in srgb,var(--warn) 13%,var(--panel));
  color:var(--warn);font-weight:600}
/* fotos */
.fotobtns{display:flex;gap:8px;flex-wrap:wrap}
.fotobtns button{font-size:13px;padding:9px 14px}
/* ── LOS DOCUMENTOS, CADA UNO CON SUS DOS LADOS (5-ago-2026) ──
   `auto-fit` y no un número fijo de columnas: en la computadora salen los
   cuatro documentos en fila y en el teléfono se van apilando solos. */
.docfotos{display:grid;gap:13px 12px;
  grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}
/* ⚠️ EL NOMBRE DEL DOCUMENTO VA CENTRADO SOBRE SUS BOTONES (José, 6-ago-2026).
   Los botones ya se reparten el ancho de la columna (ver abajo), así que con el
   rótulo pegado a la izquierda cada nombre caía descolgado de lo que titula y la
   fila se veía torcida. Centrado, cada nombre se lee encima de su propio par. */
.docf>b{display:block;text-align:center;font-size:12.5px;font-weight:650;margin-bottom:7px}
/* los dos lados se reparten el ancho: así los ocho botones quedan alineados en
   columna y se ve de un vistazo cuál falta */
.docf .fotobtns button{flex:1 1 0;min-width:0;justify-content:center}
/* el lanzador de «todas de golpe»: separado de los botones de uno en uno por una
   raya, para que se lea como otra manera de hacerlo y no como un botón más */
.clas-lanza{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;
  padding-bottom:13px;margin-bottom:13px;border-bottom:1px solid var(--line)}
.clas-lanza .hint{flex:1;min-width:220px;margin:0}
/* ── LA VENTANA DE CLASIFICAR (6-ago-2026) ──
   La foto manda: se le da todo el alto que quepa y los botones van debajo. Si la
   foto sale pequeña, se clasifica a ciegas y el dorso acaba en el sitio del
   frente. `70vh` menos lo que ocupan los botones es lo que dejó una foto de
   documento legible sin que la ventana pida desplazarse. */
/* ⚠️ LA FOTO SE ADAPTA A LO QUE SOBRA, no mide un alto fijo. Con `46vh` medido
   quedaban 348 px para la foto y las siete categorías pedían 146 más: el total
   se pasaba 109 px del alto de la ventana y **solo se veía la primera fila de
   botones**, con barra de desplazamiento. Los botones son lo que hay que pulsar:
   mandan ellos, y la foto se queda con el resto. Así vale para cualquier
   pantalla sin tener que ajustar números a ojo. */
#dclas .db{display:flex;flex-direction:column}
.clas-marco{display:flex;align-items:center;justify-content:center;
  background:var(--panel2);border:1px solid var(--line);border-radius:12px;
  flex:1 1 auto;min-height:150px;overflow:hidden}
.clas-marco img{max-width:100%;max-height:100%;object-fit:contain;display:block}
/* Los botones de categoría, en rejilla que se acomoda sola: en la computadora
   salen los siete de un vistazo y en el teléfono se apilan de dos en dos. */
.clas-ops{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.clas-ops button{text-align:left;padding:11px 14px;font-size:13.5px;border-radius:12px}
/* ⚠️ EL QUE YA SE USÓ SE MARCA Y SE APAGA, pero NO se quita de la lista: quitarlo
   movería los demás de sitio a media clasificación y se acabaría pulsando el que
   no era. Apagado sigue pulsándose —a veces hay dos fotos del mismo lado y se
   quiere quedar con la última—, solo avisa de que ya hay una. */
.clas-ops button.puesto{border-color:var(--ok);
  background:color-mix(in srgb,var(--ok) 12%,transparent)}
.clas-ops button.puesto::after{content:' ✓';color:var(--ok);font-weight:700}
.clas-ops button small{display:block;font-weight:400;font-size:11.5px;color:var(--dim);
  margin-top:2px}
/* el otro grupo, plegado. `1/-1` para que ocupe la fila entera de la rejilla:
   sin eso se metería en una columna y saldría espachurrado. */
.clas-otro{grid-column:1/-1;margin-top:2px;padding-top:8px;
  border-top:1px solid var(--line)}
.clas-otro>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:8px;padding:6px 4px;border-radius:8px;font-size:11.5px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;color:var(--dim)}
.clas-otro>summary::-webkit-details-marker{display:none}
.clas-otro>summary::after{content:'▸';margin-left:auto;font-size:13px;letter-spacing:0;
  transition:transform .15s}
.clas-otro[open]>summary::after{transform:rotate(90deg)}
.clas-otro>summary:hover{background:var(--panel2);color:var(--txt)}
.clas-otro .clas-ops{margin-top:6px}
/* ⚠️ EL ✓ DEL BOTÓN NO ES ADORNO: es lo único que dice si ESE LADO ya está
   tirado. Sin él hay que buscar la chapita en la galería de abajo, y con doce
   fotos eso es justo lo que hace que alguien mande un expediente con el dorso
   del carnet sin tirar. Lo pone `pintarGaleria`, mirando las fotos de verdad. */
.fotobtns button.hecho{border-color:var(--ok);
  background:color-mix(in srgb,var(--ok) 14%,transparent)}
.fotobtns button.hecho::after{content:' ✓';color:var(--ok);font-weight:700}
.gal{grid-column:1/-1;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
/* ══════════ EL EDITOR DE FOTOS (5-ago-2026) ══════════
   Pedido de José: recortar, girar y enderezar la foto de un documento sin salir
   de la aplicación. El motivo es tiempo: hoy hay que sacar la foto a otro
   programa, arreglarla y volver a meterla.
   ⚠️ TODO EL EDITOR SE APOYA EN UNA SOLA COSA: CUATRO ESQUINAS. El recorte
   libre, el recto, las proporciones y lo que propone el detector son la misma
   figura con las esquinas puestas de otra manera, y aplicar es siempre el mismo
   estirado. Con dos mecanismos (un rectángulo por un lado y una perspectiva por
   otro) habría el doble de código y el doble de sitios donde equivocarse. */
#dedit{max-width:900px}
.ed-lienzo{background:#0b0d10;border:1px solid var(--line);border-radius:10px;
  overflow:hidden;display:grid;place-items:center;min-height:44vh}
#edC{display:block;max-width:100%;touch-action:none;cursor:crosshair}
.ed-barra{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.ed-barra button{font-size:13px;padding:8px 12px}
.ed-barra .et{font-size:12px;color:var(--dim);font-weight:600;
  letter-spacing:.4px;text-transform:uppercase}
.ed-sep{width:1px;align-self:stretch;background:var(--line);margin:0 3px}
.ph{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg)}
.ph img{width:100%;height:104px;object-fit:cover;display:block;cursor:zoom-in}
.ph .tag{position:absolute;top:5px;left:5px;background:#000b;color:#fff;
  font-size:10px;padding:2px 7px;border-radius:99px;font-weight:700;letter-spacing:.3px}
.ph .x{position:absolute;top:4px;right:4px;background:#000b;color:#fff;border:0;
  width:22px;height:22px;border-radius:50%;cursor:pointer;font-size:14px;line-height:1;padding:0}
.ph .x:hover{background:var(--bad)}
/* ⚠️ El lápiz va abajo a la derecha y la × arriba: pegados, el dedo que quiere
   recortar borra la foto. Es el único botón de esta pantalla que no tiene
   vuelta atrás. */
.ph .ed{position:absolute;bottom:4px;right:4px;background:#000b;color:#fff;border:0;
  width:22px;height:22px;border-radius:50%;cursor:pointer;font-size:12px;line-height:1;padding:0}
.ph .ed:hover{background:var(--accent)}
/* ⚠️ LA QUE QUEDÓ SIN CLASIFICAR SE VE DESDE LEJOS: borde ámbar y su chapita
   pulsable. Una foto que se saltó en la ronda tiene que cantar en la galería, o
   se queda así hasta que salga impresa con el nombre «Sin clasificar». */
.ph.sinclas{border-color:var(--warn);box-shadow:0 0 0 1px var(--warn) inset}
/* ⚠️ Fondo negro y la letra en ámbar, NO al revés: `--warn` va de ámbar claro en
   los temas oscuros a marrón oscuro en el Claro, y con el texto fijo encima uno
   de los dos quedaba ilegible. Sobre negro se lee en los cinco. */
.ph .tagq{border:0;cursor:pointer;background:#000c;color:var(--warn);
  max-width:calc(100% - 34px);text-align:left;line-height:1.25}
.ph .tagq:hover{background:#000}
/* La etiqueta de una foto YA PUESTA también se pulsa, para cambiarla de casilla
   (22-sep-2026): una licencia metida en la del carnet no tenía vuelta atrás.
   Se queda blanca, como antes; solo gana el cursor y el ▾ que dice que se abre. */
.ph .tagc{border:0;cursor:pointer;max-width:calc(100% - 34px);text-align:left;line-height:1.25}
.ph .tagc:hover{background:#000}
#lupa{border:0;background:#000e;max-width:96vw;width:auto}
#lupa img{max-width:92vw;max-height:88vh;display:block}
/* firmas */
.firmabox{margin-top:8px;min-height:0}
.firmabox img{width:100%;max-width:260px;background:#fff;border:1px solid var(--line);
  border-radius:6px;display:block;padding:4px}
.firmabox .del{font-size:12px;color:var(--bad);background:none;border:0;padding:4px 0;cursor:pointer}
/* La firma que no se usó (BLOCKER 5 del PR #71): se ve desde lejos, como las
   fotos «Sin clasificar», con borde ámbar; el texto va en el color normal para
   que se lea en los cinco temas. */
.firma-aparte{margin-top:10px;padding:10px;border:1px solid var(--warn);border-radius:10px;
  display:grid;gap:6px;background:color-mix(in srgb,var(--warn) 8%,transparent)}
.firma-aparte small{color:var(--dim);line-height:1.35}
.firma-aparte .acc{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#dfirma canvas{width:100%;height:220px;background:#fff;border:2px dashed var(--line);
  border-radius:8px;touch-action:none;cursor:crosshair;display:block}
/* panel */
#dpanel{max-width:860px}
.grp{margin-bottom:22px}
.grp>h4{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.5px;
  display:flex;align-items:center;gap:8px}
.pill{font-size:11px;padding:2px 9px;border-radius:99px;font-weight:700;color:#fff}
.p-tarde{background:var(--bad)} .p-semana{background:var(--warn);color:#000}
.p-pronto{background:var(--accent)} .p-book{background:var(--dim)}
.card{border:1px solid var(--line);border-radius:9px;padding:11px 13px;margin-bottom:8px;
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:var(--bg)}
.card .who{flex:1;min-width:190px}
.card .who b{display:block;font-size:14.5px}
.card .who small{color:var(--dim);font-size:12px;display:block;line-height:1.55}
.card .when{font-size:12.5px;text-align:right;min-width:110px}
.card .when b{display:block;font-size:14px}
.card button{padding:7px 12px;font-size:12.5px}
.avisado{font-size:11px;color:var(--ok);font-weight:700}
/* Preparar el mensaje y confirmar el envío son dos acciones distintas. Los
   controles se comparten entre Entregas y la bandeja de Avisos. */
.aviso-acciones{flex:1 1 100%;display:grid;grid-template-columns:minmax(230px,1fr) auto;
  gap:8px 12px;align-items:end;padding-top:5px}
.aviso-destino-wrap{min-width:0}.aviso-a{display:grid;gap:4px;font-size:11px;
  font-weight:700;color:var(--dim)}
.aviso-a select{width:100%;padding:7px 9px;font-size:12.5px;color:var(--txt)}
.aviso-nota{display:block;margin-top:4px;color:var(--dim);font-size:11.5px;line-height:1.35}
.aviso-nota.cuba{color:var(--warn)}
.aviso-botones{display:flex;gap:7px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.aviso-botones button{padding:7px 11px;font-size:12.5px}
.aviso-confirmar{white-space:normal;max-width:245px}
.aviso-confirmado{font-size:12px;color:var(--ok);font-weight:700;padding:6px 0}
/* configuracion */
/* ═══ LA CONFIGURACIÓN POR CATEGORÍAS (15-ago-2026) ═══
   Era una tira de 28 grupos en 760 px de ancho. Ahora la ventana es ancha y la
   izquierda es un índice fijo, como el panel de trabajo de la app: se elige una
   categoría y solo se ve esa. */
#dcfg{max-width:1080px}
.cfg-w{display:flex; align-items:stretch}
.cfg-nav{flex:0 0 216px; border-right:1px solid var(--line); padding:14px 12px;
  display:flex; flex-direction:column; gap:5px; overflow:auto}
.cfg-nav input[type=search]{width:100%; margin-bottom:6px}
.cfg-nav button{display:block; width:100%; text-align:left; border:0; background:none;
  color:var(--txt); padding:9px 11px; border-radius:9px; font-size:13.5px; font-weight:600;
  cursor:pointer; line-height:1.25}
.cfg-nav button:hover{background:var(--campo)}
/* La marcada, en relleno sólido: la misma regla que los chips de la app —
   marcado es relleno, no un borde que hay que buscar. */
.cfg-nav button.act{background:var(--accent); color:#fff}
.cfg-nav button small{display:block; font-weight:400; font-size:11.5px; opacity:.72;
  margin-top:1px}
/* ⚠️ `flex` y no `block`: el orden dentro de cada categoría lo deciden los
   `style="order:N"` de cada grupo, porque en el archivo siguen donde estaban. */
.cfg-cont{flex:1; min-width:0; display:flex; flex-direction:column;
  max-height:min(72vh,660px)}
.cfg-g[hidden]{display:none}
/* En pantalla estrecha el índice se acuesta arriba y se hace una fila de chips:
   una barra lateral de 216 px en un portátil chico se come media ventana. */
@media(max-width:900px){
  .cfg-w{display:block}
  .cfg-nav{flex:none; border-right:0; border-bottom:1px solid var(--line);
    flex-direction:row; flex-wrap:wrap; gap:6px; padding:12px}
  .cfg-nav input[type=search]{flex:1 0 100%; margin-bottom:2px}
  .cfg-nav>div{display:contents}
  .cfg-nav button{width:auto; border:1px solid var(--line); padding:7px 12px;
    border-radius:999px; font-size:12.5px}
  .cfg-nav button small{display:none}
  .cfg-cont{max-height:56vh}
}
.cfg-g{border:1px solid var(--line);border-radius:9px;padding:14px;margin-bottom:16px}
.cfg-g>h4{margin:0 0 4px;font-size:13px;text-transform:uppercase;letter-spacing:.5px}
.cfg-g>p{margin:0 0 12px;font-size:12.5px;color:var(--dim)}
.cfg-r{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;margin-bottom:9px}
.cfg-r label{font-size:13.5px;color:var(--txt)}
.cfg-r input[type=number]{width:78px;text-align:center;padding:8px}
.cfg-r .sep{color:var(--dim);font-size:12px}
.col-r{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin-bottom:7px;align-items:center}
.col-r input,.col-r select{padding:8px 10px;font-size:14px}
.col-r .acts{display:flex;gap:3px}
.col-r .acts button{padding:6px 9px;font-size:12px;line-height:1}
.cfg-aviso{min-height:118px;font-size:14px}
.tags code{background:var(--panel2);border:1px solid var(--line);border-radius:5px;
  padding:1px 6px;font-size:12px;margin-right:5px;display:inline-block;margin-bottom:4px}
/* sugerencia de cliente repetido */
#sug{grid-column:1/-1;display:none;background:color-mix(in srgb,var(--ok) 12%,transparent);
  border:1px solid var(--ok);border-radius:9px;padding:11px 14px;
  align-items:center;gap:12px;flex-wrap:wrap}
#sug.on{display:flex}
#sug .t{flex:1;min-width:180px;font-size:13.5px}
#sug .t b{font-size:14.5px}
#sug button{padding:8px 14px;font-size:13px}
.vinok{color:var(--ok)!important}
/* lote */
#dlote{max-width:820px}
.lt{display:flex;gap:11px;align-items:center;padding:9px 4px;border-bottom:1px solid var(--line)}
.lt input[type=checkbox]{width:19px;height:19px;flex:none;accent-color:var(--accent)}
.lt .i{flex:1;min-width:0;font-size:13.5px}
.lt .i small{display:block;color:var(--dim);font-size:12px}
.lote-acc{background:var(--panel2);border:1px solid var(--line);border-radius:9px;
  padding:14px;margin-bottom:14px;display:grid;gap:11px;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
/* ⚠️ El diálogo de Lote tiene SU rejilla, no la de 12 columnas del formulario:
   si no se le quita el `span 12` que trae `.f` de fábrica, cada campo se lleva
   una fila entera y el cuadro se estira a seis pisos. */
.lote-acc .f{gap:5px;grid-column:auto}
/* El contador de marcados. Apagado cuando no hay ninguno y encendido en cuanto
   hay uno: es lo que le dice a Emily que sus dos carros siguen ahí aunque el
   filtro solo le enseñe uno. */
#loteSel{font-weight:700;color:var(--dim);white-space:nowrap}
#loteSel.hay{color:#fff;background:var(--accent);border-radius:999px;padding:4px 11px}

/* ---- Subir el BL. Reaprovecha `.lt` y `.lote-acc` de arriba: es la misma
   idea (marcar varios y cambiarlos de golpe) y tiene que verse igual. ---- */
#blZona{display:flex;gap:11px;align-items:center;flex-wrap:wrap;padding:18px;
  border:2px dashed var(--line);border-radius:9px;margin-bottom:14px;
  transition:border-color .15s,background .15s}
#blZona.encima{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.bl-res{background:var(--panel2);border:1px solid var(--line);border-radius:9px;
  padding:14px;display:grid;gap:4px}
.bl-cuenta{margin-top:6px;font-size:15px}
.bl-cuenta .tuyos{color:var(--accent);font-size:18px}
#blSel{font-weight:700;color:var(--accent)}
#blLista{max-height:46vh;overflow:auto}
/* Cada envío, su bloque. Con 37 BL en un archivo, sin separarlos no se sabe
   qué se está marcando. */
.bl-grupo{border:1px solid var(--line);border-radius:9px;margin-bottom:10px;overflow:hidden}
.bl-gh{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  background:var(--panel2);padding:8px 11px;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:1}
.bl-gh label{display:flex;gap:7px;align-items:center;cursor:pointer;margin:0}
.bl-grupo .lt{padding-left:11px;padding-right:11px}
.bl-grupo .lt:last-child{border-bottom:0}
.aviso-bl{border-radius:9px;padding:12px 14px;margin:12px 0;font-size:14px;line-height:1.5}
.aviso-bl.mal{background:color-mix(in srgb,var(--bad) 13%,transparent);color:var(--bad)}
.aviso-bl.oj {background:color-mix(in srgb,var(--warn) 15%,transparent);color:var(--warn)}
.aviso-bl.ok {background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
/* El botón de WhatsApp es un <a> (ver `enlaceSeguimiento`), así que hay que
   darle la pinta de botón a mano. El verde es el de WhatsApp, para que se
   reconozca sin leer. */
.bt-wa{display:inline-flex;align-items:center;justify-content:center;
  background:#25d366;color:#06301a;border:0;border-radius:var(--radius);
  padding:9px 16px;font:600 14px/1.2 inherit;text-decoration:none;cursor:pointer}
.bt-wa[hidden]{display:none}
/* ---- La bandeja de avisos (14-ago-2026). Se ve igual que el lector de BL a
   propósito: es la misma idea de siempre —marcar varios y hacerles algo de
   golpe— y no tiene por qué aprenderse dos veces. ---- */
#dbandeja{max-width:860px}
#bnLista{max-height:50vh;overflow:auto}
#bnLista .lt{flex-wrap:wrap}
#bnSel{font-weight:700;color:var(--accent)}
.bt-wa.chico{padding:7px 13px;font-size:13px}
.lt.bn-listo{opacity:.55}
.bn-undo{font-size:12px;padding:6px 10px}
.bn-sintel{font-size:12.5px;color:var(--warn);flex:none}
.bn-ya{padding:2px 11px 10px}
.bn-ya summary{cursor:pointer;font-size:12.5px;color:var(--dim);padding:6px 0}
.bn-ya div{font-size:12.5px;color:var(--dim);padding:3px 0 3px 14px}
@media(max-width:620px){
  .aviso-acciones{grid-template-columns:1fr}
  .aviso-botones{justify-content:stretch}
  .aviso-botones>*{flex:1 1 145px}
  .aviso-confirmar{max-width:none}
}
.chip-firmado{display:inline-block;font-size:11px;font-weight:700;padding:1px 8px;
  border-radius:99px;background:color-mix(in srgb,var(--ok) 16%,transparent);
  color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 40%,transparent);
  vertical-align:2px}
.chip-nube{font-size:12px;font-weight:700;padding:6px 12px;border-radius:99px;cursor:pointer;
  border:1px solid var(--line);color:var(--dim);white-space:nowrap;user-select:none}
.chip-nube.ok{border-color:var(--ok);color:var(--ok)}
.chip-nube.mal{border-color:var(--bad);color:var(--bad)}
/* Conflictos de edición: el aviso distingue las dos copias antes de que una
   persona decida cuál recuperar. */
#dconflictos{width:min(760px,calc(100vw - 24px));max-width:none}
.conflicto-aviso{margin:0 0 14px;padding:12px 14px;border:1px solid var(--warn);
  border-radius:13px;background:color-mix(in srgb,var(--warn) 13%,transparent);line-height:1.45}
.conflicto-it{border:1px solid var(--line2);border-radius:16px;padding:14px;margin-top:12px;
  background:var(--campo)}
.conflicto-it:first-child{margin-top:0}.conflicto-it.resuelto{opacity:.72}
.conflicto-it h3{margin:0 0 5px;font-size:16px}.conflicto-it>p{margin:0 0 12px;color:var(--dim);
  font-size:13px;line-height:1.45}.conflicto-it>p span{color:var(--ok)}
.conflicto-dos{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.conflicto-dos>div{display:flex;flex-direction:column;gap:3px;padding:11px;border:1px solid var(--line);
  border-radius:12px;min-width:0}.conflicto-dos small{font-size:10px;font-weight:800;letter-spacing:.7px;
  color:var(--dim)}.conflicto-dos b,.conflicto-dos span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conflicto-dos span{font-size:12px;color:var(--dim)}
.conflicto-acts{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:11px}
/* aviso de respaldo */
#avisoResp{display:none;background:color-mix(in srgb,var(--warn) 15%,transparent);
  border:1px solid var(--warn);border-radius:10px;padding:13px 16px;margin-bottom:18px;
  align-items:center;gap:14px;flex-wrap:wrap}
#avisoResp.on{display:flex}
#avisoResp .t{flex:1;min-width:220px;font-size:14px}
#avisoResp .t b{display:block;font-size:15px;margin-bottom:2px}
#avisoResp.grave{background:color-mix(in srgb,var(--bad) 15%,transparent);border-color:var(--bad)}
/* ⚠️ CARROS CON UN ESTADO QUE YA NO EXISTE (14-ago-2026). Mismo aspecto que el
   del respaldo porque es igual de serio: mientras esté puesto, esos clientes no
   salen en la bandeja y en su página el carro se ve RETROCEDIDO al primer paso. */
#avisoEst{display:none;background:color-mix(in srgb,var(--bad) 15%,transparent);
  border:1px solid var(--bad);border-radius:10px;padding:13px 16px;margin-bottom:18px;
  align-items:center;gap:14px;flex-wrap:wrap}
#avisoEst.on{display:flex}
#avisoEst .t{flex:1;min-width:220px;font-size:14px}
#avisoEst .t b{display:block;font-size:15px;margin-bottom:2px}
/* El de los pasos automáticos. En el color de la marca y no en rojo: no es un
   problema, es la app contando lo que hizo mientras nadie miraba. */
#avisoAuto{display:none;background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid var(--accent);border-radius:10px;padding:13px 16px;margin-bottom:18px;
  align-items:center;gap:14px;flex-wrap:wrap}
#avisoAuto.on{display:flex}
#avisoAuto .t{flex:1;min-width:220px;font-size:14px}
#avisoAuto .t b{font-size:15px}
/* Los ajustes que llegaron de otra computadora (17-ago-2026). En el color de la
   marca, como el de los pasos automáticos y por la misma razón: no es un
   problema, es la app contando algo que hizo sola. En rojo asustaría por un
   cambio que además pidió el propio dueño. */
#avisoAju{display:none;background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid var(--accent);border-radius:10px;padding:13px 16px;margin-bottom:18px;
  align-items:center;gap:14px;flex-wrap:wrap}
#avisoAju.on{display:flex}
#avisoAju .t{flex:1;min-width:220px;font-size:14px;line-height:1.45}
#avisoAju .t b{font-size:15px}
/* La tabla del arreglo: un renglón por nombre que se quedó suelto. */
.est-fila{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0;
  border-bottom:1px solid var(--line)}
.est-fila:last-child{border-bottom:0}
.est-fila .v{flex:1;min-width:200px}
.est-fila .v b{display:block}
.est-fila .v small{color:var(--dim)}
.est-fila select{max-width:230px}
/* el arancel estimado, debajo del carro */
.ar-box:empty{display:none}
.ar-box{background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:0 10px 10px 0;padding:11px 14px;font-size:13.5px;line-height:1.5}
.ar-box .ar-n{display:block;font-size:17px;color:var(--accent);margin-bottom:2px}
.ar-box .ar-d{color:var(--dim);font-size:12.5px}
.ar-box .ar-no{color:var(--warn)}
.ar-box .ar-ok{color:var(--ok)}
.ar-box .ar-mal{color:var(--warn)}
/* ---------- HISTORIAL DE VERSIONES (1-ago-2026) ----------
   Pedido de José: que se vea lo que se le ha ido metiendo a la herramienta.
   «Si no ven nada de esto dicen: ah, a esto no se le hizo nada. Y si lo ven,
   dicen: coño, José le está dando dinero duro a la aplicación.»
   Por eso NO es una lista gris de texto: es una línea de tiempo con la versión
   destacada, los cambios de colores por tipo y un resumen arriba con las
   cuentas. Lo que se ve tiene que dar la sensación del trabajo que hay debajo. */
.chip-ver{font-size:12px;font-weight:700;padding:6px 11px;border-radius:99px;
  border:1px solid var(--line);color:var(--dim);background:none;cursor:pointer;
  white-space:nowrap;letter-spacing:.3px}
.chip-ver:hover{border-color:var(--accent);color:var(--accent)}
/* con novedades sin ver, la chapita llama la atención sin dar la lata */
.chip-ver.nuevo{border-color:var(--accent);color:var(--accent);
  animation:vlatido 2.4s ease-in-out 3}
@keyframes vlatido{0%,100%{box-shadow:0 0 0 0 transparent}
  50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}}
/* el resumen de arriba: las cuentas del trabajo, de un vistazo */
.v-res{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.v-res div{flex:1;min-width:92px;background:var(--panel2);border:1px solid var(--line);
  border-radius:10px;padding:11px 12px;text-align:center}
.v-res b{display:block;font-size:23px;line-height:1.15;color:var(--accent);
  font-variant-numeric:tabular-nums}
.v-res small{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.5px}
/* la línea de tiempo: una raya vertical y un punto por versión */
.v-linea{position:relative;padding-left:26px}
.v-linea::before{content:'';position:absolute;left:6px;top:8px;bottom:8px;width:2px;
  background:var(--line)}
.v-it{position:relative;margin-bottom:20px}
.v-it::before{content:'';position:absolute;left:-24px;top:6px;width:12px;height:12px;
  border-radius:50%;background:var(--line);border:2px solid var(--panel)}
.v-it.act::before{background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent)}
.v-cab{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:9px}
.v-num{font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.v-it.act .v-num{color:var(--accent)}
.v-tit{font-weight:600;font-size:15px}
.v-fec{color:var(--dim);font-size:12px;margin-left:auto;white-space:nowrap}
.v-hrs{font-size:11px;font-weight:700;color:var(--warn);
  border:1px solid var(--warn);border-radius:99px;padding:1px 8px}
.v-esta{font-size:11px;font-weight:700;color:#fff;background:var(--accent);
  border-radius:99px;padding:2px 9px;letter-spacing:.3px}
.v-lista{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.v-lista li{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.45}
.v-t{flex:none;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  border-radius:5px;padding:3px 7px;margin-top:2px;min-width:62px;text-align:center}
.v-t.nuevo{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok);
  border:1px solid color-mix(in srgb,var(--ok) 45%,transparent)}
.v-t.mejora{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}
.v-t.arreglo{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn);
  border:1px solid color-mix(in srgb,var(--warn) 45%,transparent)}
.v-esta.pend{background:var(--warn)}
/* el arranque del proyecto, cerrando la línea de tiempo */
.v-it.v-ini::before{background:var(--ok);border-color:var(--panel)}
.v-it.v-ini .v-num{color:var(--ok);font-weight:700}
.v-ini-t{font-size:13px;color:var(--dim);line-height:1.45}
.v-ini-t b{color:var(--txt)}
/* ---------- LA VENTANA DE ACTUALIZAR (1-ago-2026) ----------
   Pedido de José: que actualizar se VEA. Los pasos son de verdad (guardar,
   descargar, instalar) y la barra sigue los archivos que el service worker va
   guardando de uno en uno — no es un adorno con un temporizador. */
.act-p{display:flex;gap:12px;align-items:flex-start;padding:9px 0}
.act-p .b{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--line);
  display:grid;place-items:center;font-size:12px;color:var(--dim);margin-top:1px}
.act-p.yendo .b{border-color:var(--accent);color:var(--accent);
  border-right-color:transparent;animation:actgira .8s linear infinite}
.act-p.listo .b{border-color:var(--ok);background:var(--ok);color:#fff}
.act-p.mal .b{border-color:var(--bad);background:var(--bad);color:#fff}
@keyframes actgira{to{transform:rotate(360deg)}}
.act-p .t{flex:1;font-size:14px;color:var(--dim);line-height:1.4}
.act-p.yendo .t,.act-p.listo .t{color:var(--txt)}
.act-p .t small{display:block;color:var(--dim);font-size:12px;margin-top:1px}
.act-barra{height:8px;border-radius:99px;background:var(--panel2);overflow:hidden;
  margin:14px 0 8px;border:1px solid var(--line)}
.act-barra i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--accent2),var(--accent));
  transition:width .35s ease}
.act-barra.fin i{background:var(--ok)}
#actTxt{font-size:12px;color:var(--dim);min-height:17px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#actListo{display:none;text-align:center;padding:6px 0 2px}
#actListo.on{display:block}
#actListo .tick{font-size:40px;line-height:1.1}
#actListo b{display:block;font-size:17px;margin-top:4px}
#actListo span{color:var(--dim);font-size:13px}
/* la banda de «esto es lo nuevo», solo cuando el historial se abre solo */
#vNuevoAviso{background:color-mix(in srgb,var(--accent) 14%,transparent);
  border:1px solid var(--accent);border-radius:10px;padding:12px 14px;margin-bottom:16px;
  font-size:14px}
/* El titular lleva CLASE PROPIA, no es «el <b> de dentro del aviso». Con la
   regla puesta sobre `b` a secas, los «2 versiones» y «13 cambios» que van
   resaltados DENTRO de la frase se partían cada uno a un renglón y la frase
   salía en escalera (visto en la prueba, 1-ago-2026). Con clase, lo que va
   resaltado dentro del texto se queda donde tiene que estar. */
#vNuevoAviso .tit{display:block;font-size:15px;font-weight:700;margin-bottom:3px}
/* aviso de que hay una versión nueva esperando (mismo aire que el de respaldo) */
#avisoVer{display:none;background:color-mix(in srgb,var(--accent) 14%,transparent);
  border:1px solid var(--accent);border-radius:10px;padding:13px 16px;margin-bottom:18px;
  align-items:center;gap:14px;flex-wrap:wrap}
#avisoVer.on{display:flex}
#avisoVer .t{flex:1;min-width:220px;font-size:14px}
#avisoVer .t b{display:block;font-size:15px;margin-bottom:2px}
@media(max-width:700px){
  .v-fec{margin-left:0;width:100%}
  .v-lista li{font-size:13px}
  .v-res b{font-size:20px}
}
/* chequeo del expediente */
#btnChk{border-width:1px}
#btnChk.ok{border-color:var(--ok);color:var(--ok)}
#btnChk.falta{border-color:var(--warn);color:var(--warn)}
#btnChk.grave{border-color:var(--bad);color:var(--bad)}
.chk-g{margin-bottom:18px}
.chk-g h4{margin:0 0 9px;font-size:13px;text-transform:uppercase;letter-spacing:.5px;
  display:flex;align-items:center;gap:8px}
.chk-i{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);
  font-size:14px;align-items:flex-start}
.chk-i .ic{flex:none;width:18px}
/* el aviso que lleva a su campo se nota que se puede pulsar */
.chk-i.vaAl{cursor:pointer;border-radius:8px;padding:8px 8px;margin:0 -8px;
  border-bottom-color:transparent}
.chk-i.vaAl:hover,.chk-i.vaAl:focus-visible{background:var(--panel2);outline:none}
.chk-i .ir{margin-left:auto;color:var(--dim);flex:none;opacity:0}
.chk-i.vaAl:hover .ir,.chk-i.vaAl:focus-visible .ir{opacity:1;color:var(--accent)}
.chk-i small{display:block;color:var(--dim);font-size:12px}
.chk-ok{color:var(--ok);font-weight:600;padding:14px 0;font-size:15px}

/* ============ IMPRESIÓN ============ */
@media print{
  @page{size:letter;margin:14mm 15mm}
  header,.bar,.wrap,dialog{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  #printArea{display:block!important}
  .doc{page-break-after:always}
  .doc:last-child{page-break-after:auto}
}
#printArea,#printArea *{color:#000}
#printArea{background:#fff;font-family:"Times New Roman",Georgia,serif}
#printArea .lnk{color:#00c!important}
#printArea .rojo{color:#c00!important}
.doc h2{text-align:center;font-size:14pt;margin:0 0 4px;text-transform:uppercase}
.doc h3{font-size:11pt;margin:16px 0 7px;padding-bottom:3px;border-bottom:1.5px solid #000;
  text-transform:uppercase;letter-spacing:.5px}
.doc .meta{text-align:center;font-size:9pt;color:#444;margin-bottom:14px}
.pg{display:grid;grid-template-columns:1fr 1fr;gap:5px 22px;margin-bottom:4px}
.pg.one{grid-template-columns:1fr}
.pi{display:flex;gap:6px;border-bottom:1px dotted #999;padding:3px 0;font-size:10.5pt;min-height:20px}
.pi .k{color:#333;flex:none}
.pi .v{font-weight:bold;flex:1}

.decl{margin-top:14px;font-size:10pt;text-align:justify;line-height:1.55}
.sig{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:32px}
.sl{border-top:1px solid #000;padding-top:5px;font-size:9.5pt}
/* El hueco de la firma va ENCIMA de la raya y guarda su alto esté firmada o no:
   si no lo guardara, una factura sin firmar subiría la raya y saldría con otra
   pinta que la firmada. La firma se pega abajo, apoyada en la raya, como cuando
   se firma a mano. */
.fimg{height:46px;display:flex;align-items:flex-end;overflow:hidden}
.fimg img{max-height:46px;max-width:100%;display:block}
.poa p{font-size:10pt;text-align:justify;margin:8px 0;line-height:1.5}
.poa h4{font-size:10.5pt;margin:14px 0 5px}

/* ===== factura ===== */
.fac{font-family:Arial,Helvetica,sans-serif;font-size:10pt}
/* ⚠️ Tres columnas y no dos (5-ago-2026, pedido de José): el código de barras de
   adorno a la IZQUIERDA, el nombre de la agencia de TÍTULO en el centro y los
   datos de la factura a la derecha. Las dos columnas de los lados son `1fr`
   iguales — eso es lo que deja el título centrado de verdad en la hoja y no
   «centrado entre lo que sobra». */
/* ⚠️ LAS COLUMNAS DE LOS LADOS VAN A 150 px FIJOS, NO A `1fr` (arreglo del
   6-ago-2026). Con `1fr auto 1fr` los lados se llevaban 255 px cada uno —el
   código de barras solo necesita 118 y los datos de la factura 142— y al título
   le quedaban 165. Ahí entraba el `max-width:46%` de abajo, que se resolvía
   contra ESA columna y no contra la hoja: el nombre se quedaba en 76 px de
   ancho y «EnvioXpress» salía partido en TRES renglones («Envio / Xpres / s»).
   Medido en la hoja de verdad (216 mm menos 30 de márgenes = 703 px).
   Con los lados fijos, al centro le quedan 375 px y el nombre necesita 165: cabe
   de sobra, y un nombre largo se parte DENTRO de su columna sin mover los lados,
   que es lo que se buscaba desde el principio.
   ⚠️ Los dos lados miden LO MISMO a propósito: es lo que deja el título centrado
   de verdad en la hoja y no «centrado entre lo que sobra».
   ⚠️ Esto solo pasaba en la factura de PANTALLA (la del botón «Factura /
   recibo»). La del PDF se dibuja aparte y ahí el hueco sí estaba bien medido. */
.fac-head{display:grid;grid-template-columns:150px 1fr 150px;gap:14px;align-items:start;
  border-bottom:2.5px solid #000;padding-bottom:10px;margin-bottom:16px}
.fac-tit{text-align:center;min-width:0}
/* ⚠️ El logo manda por el ALTO, no por el ancho: la cabecera tiene 375 px de
   centro pero solo unos 70 de alto antes de empujar la raya y toda la factura
   hacia abajo. Con `max-width` se controla además el caso de un logo apaisado.
   ⚠️ `onerror` lo quita si el archivo no está — la misma lección de la foto de
   portada: con el `_redirects` de Netlify, pedir algo que no existe devuelve la
   app entera con un 200, y sin esto saldría una imagen rota en el papel. */
/* ⚠️ 80 px SALE DE UNA MEDIDA, no del ojo: el bloque de la derecha —FACTURA, el
   número y la fecha— mide 80, y es el que decide el alto de la cabecera. Con 80
   el logo la llena entera y **no empuja nada**. Con los 58 de la primera prueba
   se veía enano al lado de «FACTURA» y no se leía su nombre. */
.fac-logo{display:block;margin:0 auto;max-height:80px;max-width:100%;width:auto}
.fac-emp{font-size:20pt;font-weight:bold;line-height:1.15;letter-spacing:.3px;
  overflow-wrap:anywhere}
.fac-dir{font-size:9pt;margin-top:3px}
/* ⚠️ LA PALABRA «Invoice» ENCIMA DEL CÓDIGO (José, 6-ago-2026, con la muestra
   delante): azul claro, en negrita y CENTRADA sobre las barras. Por eso la caja
   mide lo que mide el código —118 px— y no el ancho de su columna: centrar el
   texto en la columna lo dejaría descolgado de las barras.
   ⚠️ El COLOR no se escribe aquí: lo pone `FAC_CB_AZUL` desde el código, que es
   el mismo que usa el PDF. Si estuviera en los dos sitios, cambiar uno dejaría
   la factura de pantalla y la impresa de colores distintos.
   ⚠️ Y va en la letra de la propia factura (Arial/Helvetica), que es la única
   que el PDF puede escribir sin cargar tipografías. */
.fac-cbcaja{padding-top:2px;width:118px}
.fac-cbtit{font-size:17pt;font-weight:bold;line-height:1;text-align:center;
  margin-bottom:6px}
.fac-cb{width:118px;height:30px;display:block}
/* negro puro y sin borde: es un adorno, no una caja */
.fac-cb rect{fill:#111}
.fac-meta{text-align:right;font-size:9.5pt;line-height:1.5}
.fac-t{font-size:19pt;font-weight:bold;letter-spacing:3px;margin-bottom:4px}
/* ══════════ MODELO «MODERNA» DE LA FACTURA (6-ago-2026) ══════════
   Sobre la maqueta que trajo José. Va en blanco, negro y el verde del PAGADO
   a propósito: una factura se imprime, muchas veces en una impresora de tinta
   negra, y los grises tramados salen sucios. Todo lo de aquí abajo son cajas y
   rayas, nada de fondos grandes de color. */
.f2-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  padding-bottom:14px;margin-bottom:14px}
.f2-marca b{display:block;font-size:26pt;font-weight:800;letter-spacing:-.5px;line-height:1}
.f2-marca span{display:block;font-size:8pt;letter-spacing:2.6px;text-transform:uppercase;
  color:#444;margin-top:4px}
.f2-der{text-align:right}
.f2-t{font-size:27pt;font-weight:800;letter-spacing:-1px;line-height:1;margin-bottom:8px}
.f2-num{display:inline-block;background:#111;color:#fff!important;font-weight:700;
  font-size:11pt;padding:6px 16px;border-radius:7px}
.f2-fec{font-size:10pt;color:#333;margin-top:7px}
.f2-caja{display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid #bbb;border-radius:10px;overflow:hidden;margin-bottom:16px}
.f2-caja>div{padding:12px 14px;border-left:1px solid #ddd}
.f2-caja>div:first-child{border-left:0}
.f2-lb{display:flex;align-items:center;gap:7px;font-size:8pt;letter-spacing:1.2px;
  text-transform:uppercase;color:#555;margin-bottom:7px}
.f2-ic{width:19px;height:19px;flex:none;border-radius:50%;background:#111;
  display:inline-grid;place-items:center}
.f2-ic svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:2.1}
.f2-caja b{display:block;font-size:10.5pt;line-height:1.3}
.f2-caja span{display:block;font-size:9.5pt;color:#333;line-height:1.45;margin-top:3px}
.f2-tab{width:100%;border-collapse:collapse;margin-bottom:14px;
  border:1px solid #bbb;border-radius:10px;overflow:hidden}
.f2-tab thead th{background:#111;color:#fff!important;text-align:left;
  padding:11px 14px;font-size:9pt;letter-spacing:1.1px;text-transform:uppercase}
.f2-tab thead th.der{text-align:right}
.f2-tab td{padding:12px 14px;border-top:1px solid #e2e2e2;font-size:10.5pt}
.f2-tab tr:first-child td{border-top:0}
.f2-tab td.der{text-align:right;white-space:nowrap}
.f2-tot td{background:#f2f2f2;font-weight:800;font-size:12pt;padding:12px 14px}
/* el iconito redondo de cada renglón, en gris claro para que no compita con el
   concepto — el que manda en ese renglón es el texto, no el dibujo */
.f2-fila{display:flex;align-items:center;gap:12px}
.f2-fila .f2-ic{width:27px;height:27px;background:#eee}
.f2-fila .f2-ic svg{width:14px;height:14px;stroke:#333}
/* el hueco del logo: sale solo si hay uno puesto en ⚙️ */
.f2-logo{display:flex;align-items:center;gap:14px}
.f2-logo img{max-height:58px;max-width:110px;display:block}
.f2-sello{display:flex;justify-content:flex-end;margin-bottom:16px}
.f2-sello div{display:flex;align-items:center;gap:12px;border:2.5px solid #128a4a;
  color:#128a4a;border-radius:10px;padding:11px 26px;font-size:17pt;font-weight:800;
  letter-spacing:.5px}
.f2-sello.debe div{border-color:#b54708;color:#b54708}
/* el sello va con su icono en el mismo color del borde, no en negro: es una
   marca de estado, no un dato más */
.f2-sello .f2-ic{width:26px;height:26px;background:none;border:2px solid currentColor}
.f2-sello .f2-ic svg{width:15px;height:15px;stroke:currentColor}
.f2-pie{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  border-top:1px dashed #aaa;padding-top:14px;margin-top:6px}
.f2-pie .f2-lb{color:#111;font-weight:700}
.f2-pie p{margin:0;font-size:9pt;color:#333;line-height:1.5}
.f2-nota{background:#111;color:#fff!important;text-align:center;font-weight:700;
  padding:11px;border-radius:8px;margin-top:16px;font-size:10.5pt}
.fac-box{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  border:1px solid #000;padding:11px;margin-bottom:16px;font-size:9.5pt;line-height:1.45}
.fac-lb{display:block;font-size:7.5pt;text-transform:uppercase;letter-spacing:.6px;
  color:#555;margin-bottom:2px}
.fac-tab{width:100%;border-collapse:collapse;margin-bottom:16px}
.fac-tab th{background:#000;color:#fff!important;text-align:left;padding:7px 10px;font-size:9pt;
  letter-spacing:.5px}
.fac-tab td{border-bottom:1px solid #bbb;padding:8px 10px;font-size:10pt}
.fac-tab .der{text-align:right}
.fac-tab .fac-sum td{font-weight:bold;font-size:11.5pt;border-top:2px solid #000;border-bottom:none}
.fac-pie{display:flex;justify-content:space-between;align-items:center;gap:16px;
  border:1px solid #000;padding:11px;font-size:10pt}
.fac-sello{border:2.5px solid #000;padding:7px 18px;font-size:13pt;font-weight:bold;
  letter-spacing:2px;transform:rotate(-4deg)}
.fac-nota{margin-top:14px;font-size:9pt;font-style:italic;text-align:center}

/* ===== réplica del HSMV 82050 (Bill of Sale oficial de Florida) ===== */
.bos{font-family:Arial,Helvetica,sans-serif;color:#000;font-size:8pt;line-height:1.25}
.bos .hd{text-align:center;margin-bottom:5px}
.bos .hd .l1{font-weight:bold;font-size:8pt}
.bos .hd .l2{font-size:7.5pt}
.bos .hd .l3{font-weight:bold;font-size:7.5pt;margin-top:2px}
.bos .hd .l4{font-size:7pt;color:#00c;text-decoration:underline}
.bos .ttl{text-align:center;font-weight:bold;font-size:12pt;margin:9px 0 10px;line-height:1.3}
.bos .pick{display:flex;gap:7px;align-items:flex-start;margin:0 0 5px;font-size:8.5pt}
.bos .bx{width:13px;height:13px;border:1px solid #000;flex:none;display:inline-block;
  text-align:center;line-height:12px;font-weight:bold;font-size:11px}
.bos table{width:100%;border-collapse:collapse;table-layout:fixed}
.bos td{border:1px solid #000;padding:1px 3px;vertical-align:top;height:31px}
.bos .lb{font-size:6pt;display:block;line-height:1.15}
.bos .vl{font-size:10pt;padding-top:1px;display:block;word-wrap:break-word;overflow:hidden}
.bos .band{background:#fff;font-weight:bold;font-size:9pt;height:17px;padding:2px 4px}
.bos .band span{display:inline-block;border:1px solid #000;padding:0 5px;margin-right:6px}
.bos .nb{border:none!important;height:auto}
.bos .note{font-size:7pt;line-height:1.35;padding:3px 4px;text-align:justify}
.bos .odo{font-size:7.5pt;padding:4px;line-height:2.1}
.bos .dg{display:inline-block;width:15px;border:1px solid #000;text-align:center;
  font-size:9.5pt;font-family:"Courier New",monospace;margin:0 .5px}
.bos .ul{display:inline-block;min-width:34px;border-bottom:1px solid #000;text-align:center;
  font-size:9pt;padding:0 3px}
.bos .cert{font-size:7.5pt;font-weight:bold;padding:4px;text-align:center}
.bos .sigcell{height:38px}
.bos .foot{font-size:7pt;text-align:center;margin-top:5px;line-height:1.4}
.bos .foot b{color:#c00!important}
.bos .code{font-size:7pt;margin-top:4px}

/* ---------- candado de entrada y de licencia ---------- */
/* ══════ LA PANTALLA DE ENTRADA, A DOS COLUMNAS (5-ago-2026) ══════
   Pedido de José con una referencia delante: la foto mandando a la izquierda y
   la caja de entrar a la derecha, sobre el fondo del tema.
   ⚠️ Lo que él pidió QUITAR, y con razón: el velo blanco que cubría la foto
   entera. Lavaba la foto y la dejaba con pinta de niebla. Ahora la foto se ve
   NÍTIDA y solo se oscurece por abajo, lo justo para que se lea la frase.
   ⚠️ En pantalla chica no hay dos columnas: la foto pasa a ser el fondo y la
   caja va encima, que es como se entra desde el teléfono. */
#candado{position:fixed;inset:0;z-index:900;background:var(--bg);display:none;
  overflow:hidden}
/* `minmax(0,1fr)` y no `1fr`: si no, la columna se estira hasta lo que mida su
   contenido y en el teléfono se pasa del ancho de la pantalla. */
#candado.on{display:grid;grid-template-columns:minmax(0,1fr)}
/* Con el candado puesto, la página de detrás no se mueve. Aparecía su barra de
   desplazamiento por 9 px de nada, y esa barra se comía 15 px de ancho de la
   foto. Se apaga sola al entrar, porque cuelga de la clase `on`. */
html:has(#candado.on){overflow:hidden}
/* ── LA FOTO DE PORTADA ──
   Si `portada.jpg` no está, este bloque entero se quita solo (ver el `onerror`
   del HTML) y la pantalla queda exactamente como antes: fondo liso y la caja en
   el medio. Nada de aquí abajo puede hacer falta para poder entrar. */
#cdPortada{position:absolute;inset:0;z-index:0}
/* ⚠️ NI FUNDIDO NI NADA: la foto se ve y punto. Le puse un fundido de entrada de
   tres formas distintas y las TRES la dejaron INVISIBLE, siempre por lo mismo —
   hacer que verse dependiera de algo que puede no pasar:
     1ª `onload` + `transition`: si la imagen ya está en la caché, el navegador
        dispara `load` antes de terminar de leer el atributo que lo escucha, y el
        aviso no llega nunca;
     2ª `animation … both`: una pestaña que no está pintando deja la animación
        parada en su primer fotograma, que era opacidad 0;
     3ª `opacity:1` de base + animación sin `fill-mode`: tampoco vale, porque
        mientras la animación está en marcha su valor MANDA sobre el de base, y
        congelada en el fotograma 0 sigue transparente.
   Las tres se cazaron MIDIENDO la opacidad de verdad en pantalla. Un fundido de
   medio segundo en la pantalla de entrada no vale el riesgo de que la portada
   salga en blanco: si algo tiene que verse, que se vea sin depender de nadie. */
/* ⚠️ EL DESENFOQUE DE LA IZQUIERDA — está abajo, en `#cdPortada::before`, y NO
   aquí encima de la foto entera. Desenfocar la imagen con `filter` obliga a
   agrandarla (`scale`) para esconder el halo de los bordes, y además emborrona
   el carro, que es lo que hace bonita la pantalla. */
/* ⚠️ `>` — SOLO las fotos, que son las hijas directas. Con `#cdPortada img` a
   secas esta regla se la comía también al logo, que va anidado dentro: un ID
   pesa más que una clase, así que `#cdPortada img` le ganaba a `.cd-logo img` y
   el logo salía estirado al 100% del recuadro, ocupando un cuarto de pantalla. */
#cdPortada>img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
/* ⚠️ NO es un velo por encima de toda la foto — ese es justo el que José mandó
   quitar («el efecto nublado o blanco… está muy feo»). Es una sombra que aprieta
   SOLO POR LA IZQUIERDA, que es donde van la caja de entrar y la frase, y que se
   apaga del todo antes de llegar al carro. La mitad derecha queda limpia.
   ⚠️ Y va en negro, no con las variables del tema: no es una superficie de la
   interfaz, es sombra sobre una fotografía, y lo que lleva encima es blanco
   siempre — lo mismo que ya hacen las chapitas de las fotos del carro. */
/* ── EL DESENFOQUE DE LA IZQUIERDA (5-ago-2026, pedido de José) ──
   Antes el desenfoque vivía SOLO detrás del panel (`backdrop-filter` en la caja)
   y no se veía: la caja está al 82 % de opacidad, así que tapa justo lo que
   desenfoca. Se ve pintado, pero no se ve.
   Ahora la banda desenfocada es esta capa, y **se apaga con una máscara** antes
   de llegar al carro — la misma caída que la sombra de abajo. Así el lado
   izquierdo queda suave para leer, y el contenedor y el carro siguen nítidos,
   que es lo que hace bonita la pantalla.
   ⚠️ Va con `backdrop-filter` + máscara, NO con `filter` sobre la foto: un
   `filter` desenfocaría la imagen ENTERA y obligaría a agrandarla para esconder
   el halo de los bordes. Aquí no hace falta ningún `scale`.
   ⚠️ Si el navegador no sabe de `backdrop-filter`, esta capa no pinta nada y la
   pantalla se queda como estaba — con su sombra y perfectamente legible. */
/* ⚠️ LA FUERZA DEL DESENFOQUE ES ESTE NÚMERO Y NADA MÁS: los `5px` de abajo.
   Historia corta, porque se repitió: con 15 px José dijo «el desenfoque no se
   puso» — y no era cuestión de fuerza, era que ESTA CAPA NO SE PINTABA (ver el
   `z-index` de aquí abajo). Ya arreglado, se probó a 28 px, quedó demasiado y él
   lo pidió «a un 5%»: de ahí los 5 px de ahora.
   Para subirlo o bajarlo se cambia solo aquí (y el del teléfono, en su bloque de
   pantalla chica). Referencias medidas: 5 px se nota y deja ver qué hay detrás ·
   15 px apenas se distingue en cielo y agua · 28 px borra las grúas del puerto.
   ⚠️ Y la lección: la cantidad de desenfoque se juzga sobre la parte de la foto
   que tiene DETALLE (aquí, las grúas), no sobre el cielo, que ya es liso. */
/* ⚠️⚠️ `z-index:1` Y NO SE PUEDE QUITAR — es lo que hizo que esto funcionara.
   Un `::before` es el PRIMER hijo de la caja, así que se pinta ANTES que la
   `<img>` de la portada: sin z-index, esta capa desenfocaba el fondo liso de la
   página y la foto se le pintaba ENCIMA, tapando el efecto entero. Se veía
   «puesto» en el CSS y no pasaba nada en pantalla. Con `z-index:1` sube por
   encima de la foto (que va en `auto`) y ya la coge como fondo que desenfocar.
   Por lo mismo la sombra de abajo lleva `z-index:2`, para quedarse encima. */
#cdPortada::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  -webkit-backdrop-filter:blur(5px) saturate(1.03);
          backdrop-filter:blur(5px) saturate(1.03);
  /* ⚠️ La caída va atada AL PANEL, no a lo que salga en la foto: el panel acaba
     sobre el 41 % del ancho, así que el desenfoque llega ENTERO hasta el 42 %
     —o sea, todo lo que hay detrás del panel está desenfocado del todo— y se ha
     apagado en el 64 %. De ahí a la derecha, foto limpia. Si se atara al
     contenedor de la foto de hoy, el día que se cambie la portada el desenfoque
     caería en otro sitio. */
  -webkit-mask-image:linear-gradient(to right,
    #000 0%, #000 42%, rgba(0,0,0,.5) 52%, rgba(0,0,0,.16) 58%, transparent 64%);
          mask-image:linear-gradient(to right,
    #000 0%, #000 42%, rgba(0,0,0,.5) 52%, rgba(0,0,0,.16) 58%, transparent 64%)}
#cdPortada::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(to right,
    rgba(0,0,0,.40) 0%, rgba(0,0,0,.22) 30%, rgba(0,0,0,.04) 55%, transparent 70%)}
/* ══════════ EL PANEL DE ENTRAR (5-ago-2026) ══════════
   Sobre la maqueta que trajo José. Lo que se copió: el panel de cristal a la
   izquierda con su marca arriba, las etiquetas en versalita, los campos con su
   iconito, el botón grande y la franja de abajo con los tres puntos.
   ⚠️ Lo que NO se copió, y es a propósito — ver el resumen de esa tarea:
   «Crear nueva cuenta», «¿Olvidaste tu contraseña?», «Recordarme», el selector
   de idioma y el sello de «encriptado con SSL». Nada de eso existe en la app.
   Un botón que no hace nada en la PRIMERA pantalla enseña a no fiarse del resto. */

/* ⚠️ EL DESENFOQUE VA DETRÁS DEL PANEL, con `backdrop-filter`, y no en media
   foto. Es mejor que las dos copias que había antes: desenfoca exactamente lo
   que el panel tapa —ni un píxel más—, así que el carro del contenedor se ve
   limpio, se acabaron las dos descargas y no hay borde entre lo borroso y lo
   nítido. Si un navegador viejo no lo soporta, el panel se queda opaco y se lee
   igual: el color de fondo ya lleva su propia opacidad. */
.cd-marca{display:flex;align-items:center;gap:13px;margin-bottom:26px}
.cd-marca img{width:46px;height:46px;flex:none;border-radius:12px;display:block;
  object-fit:contain;filter:none;transform:none}
.cd-marca b{display:block;font-size:19px;font-weight:750;letter-spacing:.4px;
  line-height:1.15;text-transform:uppercase}
.cd-marca b i{font-style:normal;color:var(--accent)}
.cd-marca span{display:block;font-size:10.5px;color:var(--dim);letter-spacing:2.4px;
  text-transform:uppercase;margin-top:3px}

.cd-lado{display:grid;place-items:center;padding:20px;position:relative;z-index:1}
/* ── EL PANEL DE CRISTAL ──
   `color-mix` sobre `--panel`: con el tema Claro sale un panel blanco translúcido
   y con Oscuro uno negro, como la maqueta. Ningún color escrito a mano. */
#candado .caja{position:relative;z-index:1;width:min(438px,100%);
  background:color-mix(in srgb,var(--panel) 82%,transparent);
  -webkit-backdrop-filter:blur(20px) saturate(1.25);
          backdrop-filter:blur(20px) saturate(1.25);
  border:1px solid color-mix(in srgb,var(--txt) 14%,transparent);
  border-radius:22px;padding:32px 30px;text-align:left;
  box-shadow:0 26px 70px rgba(0,0,0,.42)}
#candado h2{margin:0 0 5px;font-size:23px;font-weight:700;letter-spacing:-.3px}
#candado .sub{color:var(--dim);font-size:13.5px;margin-bottom:22px}
/* la etiqueta en versalita encima de cada campo */
.cd-et{display:block;font-size:10.5px;font-weight:700;color:var(--dim);
  letter-spacing:1.6px;text-transform:uppercase;margin-bottom:7px}
/* el campo: el iconito dentro, a la izquierda, y el ojo a la derecha */
.cd-campo{position:relative;margin-bottom:16px}
.cd-campo>svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--dim);pointer-events:none}
/* ⚠️ Manda sobre la regla vieja de `#candado input`, que era para el PIN de
   cuatro cifras centrado y con las letras separadas. Aquí se escribe un nombre
   y una contraseña: van a la izquierda y sin separar. */
#candado .cd-campo input{width:100%;text-align:left;letter-spacing:normal;
  font-size:15px;padding:13px 14px 13px 41px;background:var(--bg);color:var(--txt);
  border:1px solid var(--line);border-radius:11px}
#candado .cd-campo input::placeholder{color:var(--dim);opacity:.75}
#candado .cd-campo input:focus{outline:2px solid var(--accent);outline-offset:-2px;
  border-color:transparent}
.cd-campo input.conOjo{padding-right:44px}
.cd-ojo{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:none;border:0;padding:8px;min-width:0;border-radius:8px;
  color:var(--dim);line-height:0;cursor:pointer}
.cd-ojo:hover{color:var(--accent);background:none;border-color:transparent}
.cd-ojo svg{width:18px;height:18px}
/* el botón grande de entrar */
.cd-entrar{width:100%;padding:14px;font-size:15.5px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;gap:9px}
#candado .err{color:var(--bad);font-size:13px;min-height:18px;margin-top:10px}
/* el pie del panel: lo que de verdad hace la app, no un sello de adorno */
.cd-nota{display:flex;align-items:flex-start;gap:10px;margin-top:22px;
  padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--dim)}
.cd-nota svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--ok)}
.cd-nota b{display:block;color:var(--txt);font-weight:600;font-size:12.5px;margin-bottom:2px}
/* ── LA FRANJA DE ABAJO ── */
.cd-pie{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;
  align-items:center;gap:26px;flex-wrap:wrap;padding:16px 30px;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,.12));
  text-shadow:0 1px 8px rgba(0,0,0,.5)}
.cd-pt{display:flex;align-items:center;gap:10px;font-size:13px}
.cd-pt svg{width:20px;height:20px;flex:none;opacity:.9}
.cd-pt b{display:block;font-weight:650;font-size:13.5px;line-height:1.2}
.cd-pt span{display:block;font-size:11.5px;opacity:.8;line-height:1.3}
.cd-ayuda{margin-left:auto;display:flex;align-items:center;gap:11px;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.28);
  border-radius:13px;padding:9px 15px;font-size:12.5px;backdrop-filter:blur(6px)}
.cd-ayuda svg{width:20px;height:20px;flex:none}
.cd-ayuda b{display:block;font-weight:650;font-size:13px}
.cd-ayuda span{display:block;opacity:.82;font-size:11.5px}
.cd-ayuda:empty{display:none}

/* ══════════════ LA BARRA DE CONTEXTO ══════════════
   El carro, la ruta, el estado y el número. Una sola vez en toda la pantalla.
   ⚠️ Es la pieza que permite que el panel de la derecha NO repita nada. */
.ctx{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:13px 18px;margin-bottom:14px}
.ctx-v{min-width:0}
.ctx-v b{display:block;font-size:15px;font-weight:650;letter-spacing:-.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
.ctx-v span{display:block;font-size:11.5px;color:var(--dim);margin-top:2px;
  font-variant-numeric:tabular-nums}
.ctx-v span:empty{display:none}
.ctx-r{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--dim);
  padding-left:18px;border-left:1px solid var(--line)}
.ctx-r svg{width:15px;height:15px;flex:none;color:var(--accent)}
.ctx-fin{margin-left:auto;display:flex;align-items:center;gap:12px}
.ctx-est{font-size:11.5px;font-weight:650;padding:5px 11px;border-radius:99px;
  border:1px solid var(--line2);color:var(--dim);white-space:nowrap}
.ctx-est.vivo{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent);
  background:color-mix(in srgb,var(--warn) 12%,transparent)}
.ctx-est.fin{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent);
  background:color-mix(in srgb,var(--ok) 12%,transparent)}
.ctx-id{font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ══════════════ EL STEPPER ══════════════
   Siete pasos en una tira. El activo lleva su raya azul, que se estira sola al
   cambiar de paso — es la única animación de toda la pantalla y está donde hace
   falta: diciendo dónde estás. */
.stepper{display:none}
body.panel .stepper{display:flex;gap:4px;background:var(--panel);
  border:1px solid var(--line);border-radius:16px;padding:6px;margin-bottom:16px;
  overflow-x:auto;scrollbar-width:none}
body.panel .stepper::-webkit-scrollbar{display:none}
.st{flex:1;min-width:0;display:flex;align-items:center;gap:9px;text-align:left;
  background:none;border:0;border-radius:12px;padding:9px 11px;font:inherit;
  color:var(--dim);cursor:pointer;position:relative;white-space:nowrap}
.st:hover{background:var(--panel2);border-color:transparent;color:var(--txt)}
.st.on{background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--txt)}
/* la raya azul del paso activo */
.st.on::after{content:'';position:absolute;left:11px;right:11px;bottom:3px;height:2px;
  border-radius:2px;background:var(--accent);animation:stRaya .32s cubic-bezier(.2,.8,.3,1)}
@keyframes stRaya{from{transform:scaleX(.2);opacity:0}to{transform:scaleX(1);opacity:1}}
.st-n{width:24px;height:24px;flex:none;border-radius:8px;display:grid;place-items:center;
  font-size:11.5px;font-weight:700;background:var(--panel2);color:var(--dim);
  border:1px solid var(--line2)}
.st.on .st-n{background:var(--accent);color:#fff;border-color:var(--accent)}
.st.hecho .st-n{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok);
  border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.st-x{min-width:0;overflow:hidden}
.st-x b{display:block;font-size:13px;font-weight:600;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis}
.st-x i{display:block;font-style:normal;font-size:10.5px;opacity:.72;margin-top:1px}

/* ══════════════ EL PANEL DE LA DERECHA ══════════════ */
.lado{display:none}
/* Pegado debajo de la cabecera y con su propio desplazamiento: la lista de lo
   que falta crece con el expediente y sin tope se salía de la pantalla, así que
   las notas del operador —lo de más abajo— no había forma de verlas. */
body.panel .lado{display:grid;gap:12px;align-content:start;
  position:sticky;top:calc(var(--cab,60px) + 12px);
  max-height:calc(100vh - var(--cab,60px) - 100px);overflow-y:auto;
  scrollbar-width:thin}
.lado-c{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px 15px}
.lado-t{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;
  color:var(--dim);letter-spacing:1.1px;text-transform:uppercase;margin-bottom:11px}
.lado-t svg{width:14px;height:14px;flex:none}
.lado-i{display:flex;align-items:flex-start;gap:9px;width:100%;text-align:left;
  background:none;border:0;padding:6px 7px;margin:0 -7px;border-radius:9px;
  font:inherit;font-size:12.5px;font-weight:400;color:var(--txt);cursor:pointer;line-height:1.35}
.lado-i:hover{background:var(--panel2);border-color:transparent}
.lado-i .pt{width:6px;height:6px;border-radius:50%;flex:none;margin-top:6px}
.lado-i.mal .pt{background:var(--bad)}
.lado-i.ojo .pt{background:var(--warn)}
.lado-ok{font-size:12.5px;color:var(--ok);line-height:1.4}
.lado textarea{width:100%;background:var(--bg);color:var(--txt);
  border:1px solid var(--line2);border-radius:12px;padding:11px 12px;
  font:inherit;font-size:13px;resize:vertical;min-height:88px}
.lado textarea:focus{outline:2px solid var(--accent);outline-offset:-2px;border-color:transparent}

@media (min-width:900px){
  #candado.conFoto .cd-lado{justify-items:start;padding-left:min(7vw,110px)}
}
@media (max-width:1100px){ .cd-ayuda{display:none} }
@media (max-width:899px){
  /* ⚠️ En el teléfono los siete pasos NO se reparten el ancho: con `flex:1` cada
     uno se quedaba en 50 px y el nombre salía cortado. Se les deja su tamaño y
     la tira se arrastra de lado, que es como se navega en un móvil. */
  .st{flex:none}
  .st-x i{display:none}
  /* la barra de contexto, más apretada y sin la raya que la partía */
  .ctx{gap:9px 14px;padding:11px 14px}
  .ctx-r{padding-left:0;border-left:0}
  .ctx-fin{margin-left:0}
  .ctx-v b{max-width:none}
  .cd-pie{display:none}
  #candado .caja{padding:26px 22px}
  /* En el teléfono el panel tapa casi toda la pantalla: la foto se aprieta
     entera por detrás, que aquí no hay «izquierda» ni «derecha». */
  #cdPortada::after{background:linear-gradient(to top,
    rgba(0,0,0,.5) 0%, rgba(0,0,0,.4) 50%, rgba(0,0,0,.34) 100%)}
  /* y por lo mismo el desenfoque va parejo y más suave: sin máscara de lado,
     que en una pantalla de 375 px dejaría la mitad borrosa y la otra no */
  #cdPortada::before{-webkit-mask-image:none;mask-image:none;
    -webkit-backdrop-filter:blur(4px) saturate(1.02);
            backdrop-filter:blur(4px) saturate(1.02)}
}
#candado .gente{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:14px}
#candado .gente button{padding:10px 18px;font-size:15px}
#candado .gente button.sel{background:var(--accent);border-color:var(--accent);color:#fff}
#candado input{width:170px;text-align:center;font-size:22px;letter-spacing:6px;
  padding:10px;background:var(--panel2);color:var(--txt);border:1px solid var(--line);
  border-radius:8px}
#candado .lic{border-color:var(--bad)}
#candado .lic h2{color:var(--bad)}
#chipUsuario{font-size:13px;color:var(--dim);padding:4px 8px;border:1px solid var(--line);
  border-radius:20px;white-space:nowrap}

/* botoncito de cámara al lado de un campo */
.scanmini{flex:none;padding:10px 12px;font-size:16px;line-height:1}

/* ---------- EL PANEL EN PANTALLA ESTRECHA ----------
   Por debajo de 900 px no caben barra y hoja una al lado de la otra: la barra
   se convierte en UNA TIRA QUE SE ARRASTRA por encima de la hoja. Los pasos
   siguen a la vista, que es de lo que se trata todo esto. Se corta a 900 y no a
   700 porque la tablet en vertical ya está apretada con las dos columnas. */
@media (max-width:900px){
  body.panel .marco{grid-template-columns:1fr;gap:12px}
  body.panel .lateral{position:sticky;top:var(--cab,64px);z-index:10;display:flex;gap:5px;
    overflow-x:auto;overflow-y:hidden;max-height:none;padding:6px;scrollbar-width:none}
  body.panel .lateral::-webkit-scrollbar{display:none}
  .lat-t,.lat-l{display:none}
  .paso{width:auto;flex:none;padding:7px 11px}
  .paso.on::before{display:none}
  .paso .tx{max-width:120px}
}

/* ---------- SOLO TELÉFONO (pantalla chica) ----------
   Todo lo de este bloque se activa únicamente en pantallas de 700px o menos:
   la versión de computadora queda EXACTAMENTE igual.
   Pedido de José (30-jul-2026): la app se veía comprimida en el móvil y el
   escáner quedaba escondido en la sección 3. */
.soloMovil{display:none}
@media (max-width:700px){
  .soloMovil{display:inline-block}
  /* cabecera compacta: título chico, botones con dedo en mente */
  header{padding:10px 12px;gap:8px}
  h1{font-size:16px}
  h1 small{display:none}
  header button{padding:9px 12px;font-size:13px}
  #chipUsuario{font-size:12px;padding:3px 7px}
  .chip-ver{font-size:11px;padding:4px 9px}   /* que no apriete la cabecera */
  /* la hoja respira: menos margen muerto a los lados, más aire entre campos */
  .wrap{padding:12px 10px 150px}
  fieldset{margin-bottom:12px}
  .sec-h{padding:10px 12px;font-size:13px}
  /* En el teléfono la rejilla de 12 se vuelve de 4: los campos cortos siguen
     compartiendo renglón (el estado y el código postal, por ejemplo) en vez de
     ocupar uno cada uno, y los largos se quedan con el ancho entero. */
  .sec-b{padding:14px 12px;gap:12px 10px;grid-template-columns:repeat(4,1fr)}
  .grupo{gap:12px 10px;grid-template-columns:repeat(4,1fr)}
  .f{grid-column:span 4}
  .f.c2{grid-column:span 2}.f.c3{grid-column:span 2}.f.c4{grid-column:span 2}
  .f.c5,.f.c6,.f.c7,.f.c8,.f.c9{grid-column:span 4}
  /* ⚠️ Los campos que llevan ALGO AL LADO —el botón 📷 o el prefijo del país—
     se quedan con el ancho entero en el teléfono. Medido: «Teléfono» a media
     pantalla dejaba 67 px para escribir el número, con el prefijo comiéndose el
     resto. En la computadora sí caben a media fila. */
  .f.par{grid-column:span 4}
  /* letra de 16px en los campos: además evita que el iPhone haga zoom solo */
  input[type=text],input[type=date],input[type=number],select,textarea{
    font-size:16px;padding:12px}
  .chip span{padding:10px 16px;font-size:15px}
  /* barra de abajo: UNA fila que se desliza de lado, no un mazacote de 3 pisos */
  .bar{padding:10px;gap:8px;flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch}
  .bar button{flex:none;white-space:nowrap;padding:10px 13px;font-size:13px}
  .bar .menu{flex:none}
  /* ⚠️ LOS RENGLONES DE UN MENÚ NO SON BOTONES DE LA BARRA. El `nowrap` de
     arriba es para que las pastillas de la barra no se partan al deslizarla,
     pero los menús viven DENTRO de `.bar` y lo heredaban: sus descripciones
     salían en una sola línea y se cortaban por la derecha, con barra de
     desplazamiento horizontal y todo. Medido en un teléfono de 375 px: el
     renglón de «Para la naviera» pedía 447 px para 342 de sitio. Se veía solo
     mirándolo en el teléfono; en la computadora el menú se ensancha y no pasa. */
  .bar .pop button{white-space:normal}
  /* la rayita de los grupos SÍ se queda: es lo que hace legible una fila que se
     desliza. El hueco elástico NO: aquí no hay sitio que repartir, y vacío solo
     mete un salto en medio de la fila. */
  .bar-aire{display:none}
  /* el estado, el PRIMERO y a la vista sin tener que deslizar: en el teléfono
     nadie va a arrastrar la barra para ver si se guardó */
  #status{order:-1;flex:none;font-size:12px;max-width:34vw;
    white-space:normal;text-align:left;line-height:1.15}
  /* los menús de la barra salen anclados a la pantalla, no al botón.
     ⚠️ `.pop.abajo` va en la lista a propósito: sin él, su `bottom:auto` le gana
     por especificidad al `bottom:78px` de aquí y el menú del color se iría al
     fondo de la pantalla, fuera de la vista. En el teléfono todos los menús
     salen en el mismo sitio, que además es donde llega el pulgar. */
  .pop,.pop.der,.pop.abajo{position:fixed;left:10px;right:10px;bottom:78px;
    top:auto;min-width:0}
  dialog{width:96%}
  .db{max-height:68vh}
  .gal{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .firmabox img{max-width:100%}
}

/* ══════════════════════════════════════════════════════════════════════════
   EMBARCA WORKSPACE — REDISEÑO INTEGRAL (15-ago-2026)
   La aplicación deja de parecer un formulario rodeado de botones y pasa a
   tener una arquitectura de producto: navegación, espacio de trabajo,
   inspector y dock de acciones. Los IDs y las funciones siguen intactos.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --rail-w:238px;
  --shadow-app:0 18px 52px color-mix(in srgb,#000 24%,transparent);
  --shadow-card:0 10px 30px color-mix(in srgb,#000 14%,transparent);
  --shadow-soft:0 5px 18px color-mix(in srgb,#000 9%,transparent);
  --surface-glass:color-mix(in srgb,var(--panel) 88%,transparent);
}
body{font-family:"Segoe UI Variable","Segoe UI",system-ui,-apple-system,sans-serif;
  letter-spacing:-.005em;background:
  radial-gradient(circle at 74% -10%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 34rem),
  radial-gradient(circle at 12% 76%,color-mix(in srgb,var(--accent) 6%,transparent),transparent 30rem),
  var(--bg)}
button{transition:background .18s ease,border-color .18s ease,color .18s ease,
  box-shadow .18s ease,transform .12s ease}
.rail-label{display:none}
.rail-count{margin-left:auto;color:inherit;opacity:.68}

/* La ficha que responde «en cuál carro estoy». */
.ctx{position:relative;overflow:hidden;border-radius:22px;padding:16px 19px 16px 21px;
  border:1px solid var(--line2);background:
  linear-gradient(115deg,color-mix(in srgb,var(--accent) 7%,var(--panel)),var(--panel) 62%);
  box-shadow:var(--shadow-soft);margin-bottom:13px}
.ctx::before{content:"";position:absolute;left:0;top:15px;bottom:15px;width:4px;
  border-radius:0 6px 6px 0;background:linear-gradient(var(--accent),var(--accent2));
  box-shadow:0 0 18px color-mix(in srgb,var(--accent) 48%,transparent)}
.ctx-v b{font-size:17px;font-weight:730;letter-spacing:-.4px}.ctx-v span{font-size:11px}
.ctx-r{background:color-mix(in srgb,var(--accent) 7%,transparent);border:0;border-radius:11px;
  padding:7px 11px;font-size:12px}.ctx-fin{gap:10px}.ctx-est{padding:6px 11px;font-weight:750}

/* El recorrido, ahora como un control continuo y no siete botones sueltos. */
body.panel .stepper{gap:4px;border:1px solid var(--line2);border-radius:20px;padding:5px;
  margin-bottom:18px;background:color-mix(in srgb,var(--panel2) 74%,var(--panel));
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 4%,transparent)}
.st{min-height:52px;border-radius:15px;padding:8px 10px;gap:8px}
.st.on{color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 7px 18px color-mix(in srgb,var(--accent) 28%,transparent)}
.st.on::after{display:none}.st.on .st-n{background:rgba(255,255,255,.18);color:#fff;
  border-color:rgba(255,255,255,.24)}
.st-n{border-radius:9px}.st-x b{font-size:12.5px;font-weight:680}.st-x i{font-size:10px}

/* Una sola superficie por bloque de información. Se quita el marco grande que
   encerraba otras tarjetas y hacía sentir el formulario más pesado. */
fieldset{border:0;border-radius:0;background:transparent;overflow:visible;margin-bottom:12px}
.sec-h{padding:2px 4px 14px;font-size:22px;font-weight:760;letter-spacing:-.65px}
.sec-b{padding:0;gap:13px}
.grupo{gap:12px;background:linear-gradient(145deg,
  color-mix(in srgb,var(--panel) 97%,var(--accent)),var(--panel));
  border:1px solid var(--line2);border-radius:21px;padding:16px 17px 17px;
  box-shadow:var(--shadow-soft)}
.grupo>.gt{font-size:13px;font-weight:720;letter-spacing:-.15px;margin-bottom:2px}
.grupo>.gt>svg{width:32px;height:32px;padding:7px;border-radius:11px;
  background:color-mix(in srgb,var(--accent) 12%,transparent)}
label{font-size:12.5px;font-weight:590}.f{gap:5px}
input[type=text],input[type=date],input[type=number],input[type=email],select,textarea{
  height:43px;border-radius:11px;border-color:var(--line2);padding:0 12px;font-size:14px;
  background:color-mix(in srgb,var(--campo) 94%,var(--panel))}
textarea{height:auto;min-height:82px;padding:11px 12px}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--accent) 38%,var(--line2))}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)}
.pista{background:transparent}.chip span{border-radius:10px;padding:8px 13px;background:var(--campo)}
.chip input:checked+span{box-shadow:0 5px 14px color-mix(in srgb,var(--accent) 22%,transparent)}
.cond{border-radius:18px}.clas-lanza{border-bottom-color:var(--line2)}

.pasoPie{border:1px solid var(--line2)!important;border-radius:20px!important;
  background:var(--panel)!important;box-shadow:var(--shadow-soft);padding:11px 14px!important}
.pasoPie .est{font-size:12px}.pasoPie button{min-height:42px}

/* Inspector: compacto, jerárquico y claramente secundario. */
.lado-head{padding:2px 4px 1px}.lado-head span{display:block;color:var(--accent);
  font-size:9.5px;font-weight:800;letter-spacing:1.35px;text-transform:uppercase}
.lado-head b{display:block;margin-top:3px;font-size:15px;line-height:1.25;letter-spacing:-.25px}
.lado-c{border:1px solid var(--line2);border-radius:19px;padding:14px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--panel) 97%,var(--accent)),var(--panel));
  box-shadow:var(--shadow-soft)}
.lado-t{margin-bottom:9px;font-size:9.5px;letter-spacing:1.25px}
.lado-i{padding:5px 7px;font-size:12px;border-radius:9px}.lado-i .pt{width:5px;height:5px}
.lado textarea{border-radius:11px;background:var(--campo)}

/* El dock concentra el final del trabajo. Flota para sentirse parte del espacio
   de trabajo y no una franja de sistema pegada al borde. */
.bar{background:var(--surface-glass);border-color:var(--line2);backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);box-shadow:0 -10px 34px rgba(0,0,0,.16)}
.bar button{min-height:42px;border-radius:12px;padding:9px 14px}
#status{padding:5px 9px;border-radius:9px;background:var(--panel2);max-width:170px}
#status.ok{background:color-mix(in srgb,var(--ok) 11%,transparent)}
.bar-raya{height:25px}.pop{border-color:var(--line2);border-radius:17px;padding:7px;
  box-shadow:var(--shadow-app);background:var(--panel)}
.pop button{border-radius:11px}.pop-mas>summary{border-radius:10px}
.bar .pop button{white-space:normal}

/* Ventanas: más profundidad, encabezados claros y superficies consistentes. */
dialog{border:1px solid var(--line2);border-radius:25px;box-shadow:0 28px 90px rgba(0,0,0,.48);
  background:var(--panel);overflow:hidden}
dialog::backdrop{background:rgba(1,9,18,.72);backdrop-filter:blur(7px)}
.dh{padding:18px 21px;font-size:17px;font-weight:740;letter-spacing:-.35px;
  background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 7%,var(--panel)),var(--panel))}
.db{padding:18px 21px}.df{padding:13px 20px;background:color-mix(in srgb,var(--panel2) 54%,var(--panel))}
.db:focus{outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:-2px}
.row{padding:13px 2px}.tabs{padding:3px;border-radius:14px;background:var(--panel2);width:max-content}
.tabs button{border:0;background:transparent;border-radius:11px}.card{border-color:var(--line2);
  border-radius:16px;padding:13px 14px;background:var(--campo);box-shadow:0 3px 12px rgba(0,0,0,.07)}
.grp>h4{font-size:11px;letter-spacing:.9px}.pill{border-radius:8px}

/* Configuración: conserva sus categorías, pero se siente como una zona de
   administración de la misma aplicación. */
#dcfg{max-width:1160px;border-radius:27px}
.cfg-nav{flex-basis:238px;padding:16px 13px;gap:5px;background:
  linear-gradient(180deg,color-mix(in srgb,var(--panel2) 68%,var(--panel)),var(--panel));
  border-right-color:var(--line2)}
.cfg-nav input[type=search]{height:42px;border-radius:12px;margin-bottom:8px}
.cfg-nav button{padding:10px 11px;border-radius:13px;font-size:13px}
.cfg-nav button.act{background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 7px 17px color-mix(in srgb,var(--accent) 25%,transparent)}
.cfg-cont{max-height:min(74vh,700px)}
.cfg-g{border:1px solid var(--line2);border-radius:19px;padding:17px 18px;margin-bottom:14px;
  background:color-mix(in srgb,var(--panel2) 50%,var(--panel));box-shadow:var(--shadow-soft)}
.cfg-g>h4{font-size:11px;letter-spacing:.9px}.cfg-g>p{line-height:1.55}
.cfg-tiempo{background:linear-gradient(145deg,
  color-mix(in srgb,var(--accent) 9%,var(--panel2)),var(--panel))}
.cfg-tiempo-seg{display:flex;align-items:center;justify-content:flex-end;gap:9px;
  color:var(--dim);font-size:12px}.cfg-tiempo-seg input{flex:none}
.cfg-tiempo-check{display:flex;align-items:flex-start;gap:11px;margin:4px 0 14px;
  padding:11px 12px;border:1px solid var(--line2);border-radius:13px;background:var(--panel)}
.cfg-tiempo-check input{width:18px;height:18px;flex:none;margin-top:1px;accent-color:var(--accent)}
.cfg-tiempo-check b,.cfg-tiempo-check small{display:block}.cfg-tiempo-check b{font-size:13px}
.cfg-tiempo-check small{margin-top:3px;color:var(--dim);font-size:11.5px;line-height:1.4}
.cfg-tiempo-info{padding:11px 13px;border-radius:13px;background:
  color-mix(in srgb,var(--accent) 10%,var(--panel));color:var(--dim);font-size:12px;line-height:1.5}
.cfg-tiempo-info b{color:var(--txt)}
.lote-acc,.bl-res,#blZona{border-radius:17px}.pap-nota{border-radius:13px}

/* Escritorio: navegación lateral real. */
@media (min-width:1260px){
  header{position:fixed;left:0;top:0;bottom:0;width:var(--rail-w);min-height:0;z-index:70;
    padding:16px 12px 13px;display:flex;flex-direction:column;align-items:stretch;gap:4px;
    flex-wrap:nowrap;border:0;border-right:1px solid var(--line2);background:
    radial-gradient(circle at 15% 0,color-mix(in srgb,var(--accent) 15%,transparent),transparent 15rem),
    linear-gradient(180deg,color-mix(in srgb,var(--panel) 98%,var(--accent)),var(--panel));
    box-shadow:12px 0 38px rgba(0,0,0,.13)}
  body:has(#barraDemo:not([hidden])) header{top:49px}
  header h1{order:1;position:relative;min-height:54px;padding:9px 34px 17px 49px;margin:0 2px 10px;
    border-bottom:1px solid var(--line2);font-size:14px;line-height:1.15}
  header h1::before{content:"";position:absolute;left:2px;top:3px;width:38px;height:38px;
    border-radius:12px;background:#fff url('./icono.svg') center/32px 32px no-repeat;
    box-shadow:0 6px 18px rgba(0,0,0,.18)}
  header h1 small{font-size:10.5px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #btPanel{position:absolute;z-index:2;right:13px;top:21px;width:30px;height:30px;padding:0;
    display:grid;place-items:center;border:0;border-radius:10px;font-size:14px;background:var(--panel2)}
  body:has(#barraDemo:not([hidden])) #btPanel{top:21px}
  header .rail-label{display:block;padding:8px 11px 4px;color:var(--dim);font-size:9px;
    font-weight:800;letter-spacing:1.35px;text-transform:uppercase}
  header>.rail-nav,header>.rail-tool{width:100%;min-height:41px;display:flex;align-items:center;
    justify-content:flex-start;gap:8px;text-align:left;border:1px solid transparent;border-radius:13px;
    padding:9px 11px;background:transparent;color:var(--dim);font-size:13px;font-weight:650}
  header>.rail-nav:hover,header>.rail-tool:hover{color:var(--txt);background:var(--panel2);
    border-color:var(--line2);transform:translateX(2px)}
  header>.rail-nuevo{color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));
    border-color:transparent;box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 26%,transparent)}
  header>.rail-nuevo:hover{color:#fff;background:linear-gradient(135deg,var(--accent2),var(--accent));
    border-color:transparent}
  header .grow{order:80;display:block;flex:1;min-height:8px}
  header h1{order:1}.rail-exp{order:10}.rail-nuevo{order:11}.rail-guardados{order:12}
  .rail-entregas{order:13}.rail-avisos{order:14}.rail-tiempos{order:15}.rail-op{order:20}.rail-lote{order:21}
  .rail-bl{order:22}#btnScanTop{order:23}.cab-info{order:90}header>.menu{order:91}
  #btnCerrarSesion{order:92}.rail-settings{order:93}
  .cab-info{height:auto;min-height:39px;margin:4px 0;padding:7px 9px;display:flex;gap:6px;
    flex-wrap:wrap;border:1px solid var(--line2);border-radius:13px;background:var(--panel2)}
  #chipUsuario{max-width:100%;overflow:hidden;text-overflow:ellipsis}.chip-ver{margin:0}
  header>.menu{width:100%;margin:0}header #btTema{width:100%;min-height:40px;justify-content:flex-start;
    border-color:transparent;background:transparent;color:var(--dim);border-radius:13px}
  header #btTema:hover{background:var(--panel2);border-color:var(--line2);color:var(--txt)}
  header .pop.abajo{position:fixed;left:calc(var(--rail-w) - 4px);right:auto;top:auto;bottom:58px;
    min-width:228px;max-height:calc(100vh - 90px)}
  .wrap,body.panel .wrap{max-width:none;margin:0 0 0 var(--rail-w);padding:22px 26px 118px}
  body.panel .marco{grid-template-columns:minmax(0,1fr) 286px;gap:18px}
  body.panel .lado{top:16px;max-height:calc(100vh - 112px);gap:10px}
  body.panel .lateral{top:16px;max-height:calc(100vh - 38px)}
  .bar{left:calc(var(--rail-w) + 17px);right:17px;bottom:11px;border:1px solid var(--line2);
    border-radius:20px;padding:8px 10px;gap:7px;flex-wrap:nowrap;overflow:visible;
    box-shadow:0 17px 48px rgba(0,0,0,.32)}
  .bar button{padding:8px 11px;font-size:12.5px;white-space:nowrap}
  .bar-raya{margin:0 3px}.bar .menu{flex:none}
  #mImp{left:auto;right:0}
}

/* Portátil y tableta: la navegación se acuesta y se desliza, sin partirse en
   tres renglones ni comerse media pantalla. */
@media (max-width:1259px){
  header{flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;scrollbar-width:none;
    min-height:64px;padding:9px 13px;gap:7px;background:var(--surface-glass);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  header::-webkit-scrollbar{display:none}header h1{flex:0 0 auto;min-width:194px}
  header .grow,.rail-label{display:none}header>.rail-nav,header>.rail-tool,header>.menu,
  header>.cab-info{flex:none}.rail-count{margin-left:3px}
  #btPanel{order:1}header h1{order:2}.rail-nuevo{order:3}.rail-guardados{order:4}
  .rail-entregas{order:5}.rail-avisos{order:6}.rail-tiempos{order:7}.rail-lote{order:8}.rail-bl{order:9}
  #btnScanTop{order:10}.cab-info{order:11}header>.menu{order:12}
  #btnCerrarSesion{order:13}.rail-settings{order:14}
  .wrap,body.panel .wrap{max-width:none;padding-top:16px}
  .bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.bar::-webkit-scrollbar{display:none}
  .bar button{flex:none;white-space:nowrap}.bar .menu{flex:none}
  .bar:has(.pop.on){overflow:visible}
  .bar .pop,.bar .pop.der{position:fixed;left:50%;right:auto;top:auto;bottom:78px;
    width:min(620px,calc(100vw - 28px));min-width:0;transform:translateX(-50%)}
  body.panel .lado{position:static;max-height:none;grid-template-columns:repeat(3,minmax(0,1fr));
    margin-top:2px}.lado-head{grid-column:1/-1}.lado-c{min-width:0}
}
@media (max-width:700px){
  header{padding:8px 10px;min-height:58px}header h1{min-width:118px;flex-basis:118px;font-size:14px;overflow:hidden}
  header h1 small{display:none}.app-title{font-size:0}.app-title::after{content:"Expedientes";font-size:14px}
  header>.rail-nav,header>.rail-tool{padding:8px 10px;white-space:nowrap}
  header>.rail-nuevo{background:var(--accent);color:#fff}
  .ctx{border-radius:18px;padding:13px 13px 13px 17px}.ctx-v b{font-size:15px}
  .ctx-v{flex:1 0 100%}.ctx-r{order:2}.ctx-fin{order:3;margin-left:auto}
  body.panel .stepper{border-radius:16px;margin-bottom:14px}.st{min-height:44px;padding:7px 10px}
  .sec-h{font-size:19px;padding:2px 2px 11px}.grupo{border-radius:17px;padding:14px 13px}
  .grupo>.gt>svg{width:29px;height:29px}.pasoPie{border-radius:17px!important}
  body.panel .lado{display:grid;grid-template-columns:1fr;gap:10px}.lado-head{grid-column:auto}
  dialog{border-radius:20px}.dh{font-size:15px;padding:15px 17px}.db{padding:15px 17px}
  .df{padding:11px 14px;flex-wrap:wrap}.cfg-g{border-radius:16px;padding:14px}
  #dcfg .cfg-nav{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
  #dcfg .cfg-nav input[type=search]{grid-column:1/-1;width:100%;min-width:0}
  #dcfg .cfg-nav button{width:100%;min-width:0;white-space:normal;line-height:1.15;font-size:11.5px}
  #dcfg[open]{display:flex;flex-direction:column;max-height:calc(100dvh - 20px)}
  #dcfg>.dh,#dcfg>.df{flex:none}#dcfg .cfg-w{display:flex;flex:1;min-height:0;
    flex-direction:column;overflow:hidden}#dcfg .cfg-nav{flex:none}
  #dcfg .cfg-cont{flex:1;min-height:0;max-height:none;overflow-x:hidden;overflow-y:auto}
  #dcfg .cfg-r{grid-template-columns:minmax(0,1fr)}
  #dcfg .cfg-r>*{grid-column:1/-1!important;min-width:0;max-width:100%}
  #dcfg .cfg-r input:not([type=checkbox]):not([type=color]),#dcfg .cfg-r select,
  #dcfg .cfg-r textarea{width:100%}
  #dcfg .col-r{grid-template-columns:minmax(0,1fr)!important}
  #dcfg .col-r>*{min-width:0;max-width:100%}#dcfg .col-r .acts{justify-content:flex-end}
  #dcfg .df .hint{display:none}#dcfg .df button{flex:1 1 auto}
  #dcfg .df button:first-of-type{flex-basis:100%}
}

/* ══════════════════ CRONÓMETRO Y PRODUCTIVIDAD ══════════════════ */
.ctx-tiempo{margin-left:auto;display:flex;align-items:center;gap:7px;min-width:0;padding:5px 6px 5px 9px;
  border:1px solid var(--line2);border-radius:14px;background:color-mix(in srgb,var(--panel2) 72%,transparent)}
.ctx-tiempo-ico{font-size:17px;line-height:1}.ctx-tiempo-dato{min-width:172px}
.ctx-tiempo-dato b{display:block;font-size:14px;line-height:1.05;font-variant-numeric:tabular-nums;
  letter-spacing:.3px}.ctx-tiempo-dato small{display:block;max-width:155px;margin-top:3px;color:var(--dim);
  font-size:9.5px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctx-tiempo-dato .ctx-tiempo-meta{max-width:235px;color:color-mix(in srgb,var(--dim) 78%,var(--accent));font-size:9px}
.ctx-tiempo button{min-height:30px;padding:5px 9px;border-radius:9px;font-size:10.5px;font-weight:700}
.ctx-tiempo #tiempoDetalle{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,var(--line2))}
.ctx-tiempo #tiempoTerminar{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 38%,var(--line2))}
.ctx-tiempo.corriendo{border-color:color-mix(in srgb,var(--ok) 42%,var(--line2));
  background:color-mix(in srgb,var(--ok) 8%,var(--panel2))}
.ctx-tiempo.corriendo .ctx-tiempo-ico{filter:saturate(1.3)}
.ctx-tiempo.manual,.ctx-tiempo.auto,.ctx-tiempo.oculto{border-color:color-mix(in srgb,var(--warn) 36%,var(--line2))}
.ctx-tiempo.terminado{border-color:color-mix(in srgb,var(--ok) 36%,var(--line2));opacity:.86}
.ctx-fin{margin-left:0}

#dtiempoDetalle{width:min(760px,calc(100vw - 24px));max-width:none}
.tiempo-ficha-estado{display:inline-flex;margin-bottom:13px;padding:7px 10px;border-radius:99px;
  background:color-mix(in srgb,var(--accent) 10%,var(--panel2));color:var(--accent);font-size:11px;font-weight:750}
.tiempo-ficha-horas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.tiempo-ficha-horas article,.tiempo-ficha-totales article{min-width:0;padding:14px;border:1px solid var(--line2);
  border-radius:16px;background:var(--panel2)}
.tiempo-ficha-horas small,.tiempo-ficha-totales small{display:block;color:var(--dim);font-size:9.5px;
  font-weight:800;text-transform:uppercase;letter-spacing:.7px}
.tiempo-ficha-horas b,.tiempo-ficha-totales b{display:block;margin-top:7px;font-size:14px;line-height:1.35;
  font-variant-numeric:tabular-nums}.tiempo-ficha-horas span,.tiempo-ficha-totales span{display:block;margin-top:5px;
  color:var(--dim);font-size:10px;line-height:1.3}
.tiempo-ficha-totales{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:9px}
.tiempo-ficha-totales b{font-size:21px}.tiempo-ficha-nota{margin:12px 0 0;padding:11px 12px;border-radius:13px;
  background:color-mix(in srgb,var(--accent) 7%,transparent);color:var(--dim);font-size:11px;line-height:1.45}

#dtiempoFin{width:min(520px,calc(100vw - 24px));text-align:center}
.tiempo-fin-ico{width:56px;height:56px;margin:2px auto 12px;display:grid;place-items:center;border-radius:18px;
  background:color-mix(in srgb,var(--accent) 13%,transparent);font-size:28px}
.tiempo-fin h3{margin:0 0 7px;font-size:19px}.tiempo-fin p{margin:0 auto 16px;max-width:400px;color:var(--dim);line-height:1.45}
.tiempo-fin-res{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:15px 0}
.tiempo-fin-res span{padding:13px;border:1px solid var(--line2);border-radius:15px;background:var(--panel2)}
.tiempo-fin-res small,.tiempo-fin-res b{display:block}.tiempo-fin-res small{color:var(--dim);font-size:10px;
  text-transform:uppercase;letter-spacing:.8px}.tiempo-fin-res b{margin-top:5px;font-size:18px;font-variant-numeric:tabular-nums}

#dtiempos{width:min(1080px,calc(100vw - 24px));max-width:none}
#dtiempos>.db{max-height:min(74vh,720px);overflow:auto}
.tiempo-filtros{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.tiempo-tabs{margin:0}.tiempo-filtros>input{width:auto;min-width:155px}
.tiempo-inactivo{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--dim);font-size:11px}
.tiempo-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.tiempo-kpis>div{min-width:0;padding:14px 15px;border:1px solid var(--line2);border-radius:17px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--panel2) 84%,var(--accent)),var(--panel))}
.tiempo-kpis span,.tiempo-kpis b,.tiempo-kpis small{display:block}.tiempo-kpis span{color:var(--dim);
  font-size:10px;font-weight:750;text-transform:uppercase;letter-spacing:.75px}.tiempo-kpis b{margin-top:6px;
  font-size:21px;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
.tiempo-kpis small{margin-top:5px;color:var(--dim);font-size:10px}
.tiempo-lectura{margin:12px 0 16px;padding:11px 13px;border-radius:13px;background:color-mix(in srgb,var(--accent) 7%,transparent);
  color:var(--dim);font-size:12px;line-height:1.45}
.tiempo-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(240px,.75fr);gap:12px}
.tiempo-grid section,.tiempo-detalle{padding:15px;border:1px solid var(--line2);border-radius:18px;background:var(--panel)}
.tiempo-grid h3,.tiempo-detalle h3{margin:0 0 12px;font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:var(--dim)}
.tiempo-paso{display:grid;grid-template-columns:22px minmax(105px,.9fr) minmax(90px,1.4fr) 76px;
  align-items:center;gap:8px;padding:6px 0;font-size:11.5px}
.tiempo-paso>span{width:21px;height:21px;display:grid;place-items:center;border-radius:7px;background:var(--panel2);
  color:var(--dim);font-size:9px;font-weight:800}.tiempo-paso>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tiempo-paso>i{height:7px;border-radius:99px;background:var(--panel2);overflow:hidden}.tiempo-paso>i>u{display:block;height:100%;
  border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent2));text-decoration:none;min-width:2px}
.tiempo-paso>em{text-align:right;color:var(--dim);font-style:normal;font-variant-numeric:tabular-nums;white-space:nowrap}
.tiempo-operadores{display:grid;gap:8px}.tiempo-operadores>div{display:flex;justify-content:space-between;gap:12px;padding:10px 11px;
  border-radius:12px;background:var(--panel2);font-size:12px}.tiempo-operadores b{font-variant-numeric:tabular-nums;white-space:nowrap}
.tiempo-detalle{margin-top:12px}.tiempo-tabla-wrap{overflow:auto}.tiempo-detalle table{width:100%;border-collapse:collapse;font-size:11.5px}
.tiempo-detalle th{text-align:left;color:var(--dim);font-size:9.5px;text-transform:uppercase;letter-spacing:.65px}
.tiempo-detalle th,.tiempo-detalle td{padding:9px 8px;border-bottom:1px solid var(--line)}
.tiempo-detalle td{font-variant-numeric:tabular-nums}.tiempo-detalle td b,.tiempo-detalle td small{display:block}
.tiempo-detalle td small{margin-top:2px;color:var(--dim)}.tiempo-vacio{text-align:center;color:var(--dim);padding:20px!important}

@media(max-width:900px){
  .ctx-tiempo{order:3;margin-left:0}.ctx-fin{order:4;margin-left:auto}
  .tiempo-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.tiempo-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .conflicto-dos{grid-template-columns:1fr}.conflicto-acts button{flex:1 1 100%}
  .ctx-tiempo{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto}
  .ctx-tiempo-dato{min-width:0}.ctx-tiempo-dato small{max-width:none}.ctx-fin{margin-left:0}
  .tiempo-ficha-horas{grid-template-columns:1fr}.tiempo-ficha-totales{grid-template-columns:1fr}
  #dtiempos>.db{padding:13px;max-height:calc(100dvh - 126px)}
  .tiempo-filtros{align-items:stretch}.tiempo-tabs{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .tiempo-filtros>input{flex:1;min-width:135px}.tiempo-inactivo{width:100%;margin-left:0;justify-content:space-between}
  .tiempo-kpis{gap:7px}.tiempo-kpis>div{padding:11px}.tiempo-kpis b{font-size:16px}
  .tiempo-paso{grid-template-columns:21px minmax(92px,1fr) 62px}.tiempo-paso>i{display:none}
  .tiempo-fin-res{grid-template-columns:1fr}.tiempo-detalle{padding:11px}
}

/* ══════════════════ BARRA DEL MODO DEMOSTRACIÓN ══════════════════ */
/* ⚠️ ESTA LÍNEA NO SE BORRA NUNCA. `[hidden]` vale `display:none`, pero lo
   pone la hoja del navegador con la especificidad más baja que hay — y la
   regla de abajo, que empieza por #barraDemo, le gana. Sin esto la franja
   ÁMBAR DE «DEMOSTRACIÓN» SALE EN LA APP DE LA OFICINA, encima del trabajo
   real y delante de los clientes. Se descubrió el 2-ago-2026 mirando la
   pantalla; consultando `.hidden` por código decía `true` y parecía correcto.
   La lección: un atributo puesto no es lo mismo que algo que no se ve. */
#barraDemo[hidden]{display:none}
#barraDemo{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:12px;
  flex-wrap:wrap;background:#8a5a00;color:#fff;padding:9px 14px;font-size:14px;
  line-height:1.35;box-shadow:0 2px 8px rgba(0,0,0,.25)}
#barraDemo b{background:#fff;color:#8a5a00;border-radius:6px;padding:2px 8px;
  font-size:12px;letter-spacing:.6px;white-space:nowrap}
#barraDemo .txt{flex:1;min-width:180px}
#barraDemo button{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.55);
  border-radius:8px;padding:6px 12px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
#barraDemo button:hover{background:rgba(255,255,255,.28)}

/* ═══ CUÁNTOS CARROS TRAJO CADA UNO (16-sep-2026) ═══
   El botón va detrás de «Tiempos» en las dos barras: con el mismo `order`, lo
   desempata el orden en el HTML. Sin esto se iría arriba del todo, porque todo
   lo que no tiene `order` va primero. */
@media (min-width:1260px){ .rail-quien{order:15} }
@media (max-width:1259px){ .rail-quien{order:7} }
dialog.qt{width:min(560px,calc(100vw - 24px))}
.qt-fila{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line)}
.qt-fila span{flex:1;min-width:0;overflow-wrap:anywhere}
.qt-fila b{font-size:18px;min-width:40px;text-align:right;font-variant-numeric:tabular-nums}
.qt-fila.mal span{color:var(--bad);font-weight:700}
.qt-aparte{margin:12px 0 0;line-height:1.5}
.qt-faltan{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;padding:11px 12px;
  border:1px solid var(--bad);border-radius:12px}
.qt-faltan span{flex:1;min-width:200px}
.qt-arr{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--line)}
.qt-arr>span{flex:1;min-width:160px}
.qt-arr small{display:block;color:var(--dim)}
.qt-arr select{min-width:140px}