/* =============================================================================
   logistica-ui.css · Identidad visual del módulo Logística
   -----------------------------------------------------------------------------
   Tratamiento: CABECERA PLENA (§3 del runbook / árbol de decisión del manual).
   Logística es trabajo MIXTO —bandejas que se auditan, wizards que se recorren,
   tablas largas de viajes y de historial—, no una pantalla-tabla: le toca la
   plena, como a RRHH. La referencia de gestos es `rrhh-ui.css`.

   La forma la eligió Hernán sobre dos mockups de la ronda 2 (variante **C1,
   "banda plena"**, contra C2 "los títulos mandan"):

       NIVEL 1 — las dos MESAS de trabajo (Liquidaciones · Mov. de Bolsas)
                 viven en una banda navy, y la mesa activa la MUERDE: queda
                 blanca y pegada al contenido, como una pestaña de carpeta.
       NIVEL 2 — las pantallas de esa mesa, en píldoras.
       NIVEL 3 — el nombre de la pantalla, en grande, arriba del trabajo.

   Cuatro señales apiladas (rail → banda → píldora → título) porque el reclamo
   concreto de la ronda 1 fue que no se distinguía «Conformar remitos» de
   «Flete corto»: se veían como dos cosas del mismo rango, y no lo son.

   TODO va bajo el scope `.log-ui` y con prefijo `lg-`: los otros nueve módulos
   siguen en Tailwind con su propia paleta y una clase suelta los rompería.

   CERO TOKENS PROPIOS. La paleta entera sale de `src/core/tokens.css` y este
   módulo no se aparta en ninguno. El presupuesto de azul quedó al límite a
   propósito: banda navy + botón primario navy, y NADA más puede ser navy —
   por eso la píldora activa del nivel 2 se marca con fondo teñido y una barra
   interior, no con un bloque macizo. Un segundo azul acá sería color=categoría
   entrando por la puerta de atrás (§1.1).

   NO HACE FALTA `.log-ui.lg-shell.hidden`. El armazón se escribe en un <div>
   HIJO de `#page-fletes`, igual que el ABM y Configuración: el `.page-content`
   queda limpio y el `.hidden` del router le pega sin pelear. La trampa del
   portal (§8 del manual) aparece sólo cuando el scope va en el propio
   `.page-content`.
   ========================================================================== */

.log-ui { background: var(--canvas); }

/* Obligación §5.2: quien navega con Tab tiene que ver dónde está parado. */
.log-ui :focus-visible { outline: 2px solid var(--navy-500); outline-offset: 2px; border-radius: 5px; }

/* ── Armazón ──────────────────────────────────────────────────────────────
   SIN ESPACIO entre las dos clases: el div es `class="log-ui lg-shell"`, UN
   elemento con las dos. Con espacio no matchea nada y el bloque se cae en
   silencio — sin `display:flex` ni `height:100%` el módulo crece con su
   contenido adentro de un contenedor `overflow:hidden` y se queda sin scroll.
   Es el bug que le costó seis etapas al ABM. */
/* `position: relative` es lo único que el takeover del wizard le pide al
   armazón: se cuelga de ACÁ y no de `.lg-work`, porque tiene que tapar también
   la banda, las píldoras y el título. Ver «Takeover» más abajo. */
.log-ui.lg-shell {
    display: flex; flex-direction: column;
    height: 100%; min-height: 0;
    background: var(--canvas);
    position: relative;
}

/* ── Nivel 1 · las mesas de trabajo ───────────────────────────────────────
   La banda es navy porque el salto de mesa es el corte más grande que tiene
   el módulo: se cambia de negocio, no de pantalla. Liquidar fletes y liquidar
   manipuleo de bolsas comparten transportista y poco más.

   La pestaña activa no lleva subrayado: es la ÚNICA que tiene fondo blanco, y
   ese blanco es el mismo del contenido de abajo. Lo que la marca es que la
   banda se abre y la deja pasar. */
.log-ui .lg-band {
    display: flex; gap: 4px; flex-wrap: wrap;
    padding: 8px var(--gutter) 0;
    background: var(--navy);
    flex-shrink: 0;
}
.log-ui .lg-band button {
    position: relative; display: flex; align-items: center; gap: 8px;
    padding: 11px 18px 12px; border: 0; border-radius: 11px 11px 0 0;
    background: transparent; color: #b9c9e4;
    font: inherit; font-size: .87rem; font-weight: 700; white-space: nowrap;
    cursor: pointer;
    transition: background .14s var(--curva), color .14s var(--curva);
}
.log-ui .lg-band button .material-symbols-outlined { font-size: 18px; }
.log-ui .lg-band button:hover { background: rgba(255,255,255,.10); color: #fff; }
/* Sobre navy el contorno navy no se ve: acá el foco va en celeste claro y
   hacia adentro, que es lo único que contrasta contra la banda. */
.log-ui .lg-band button:focus-visible { outline: 2px solid #7db3ff; outline-offset: -2px; }
.log-ui .lg-band button[aria-current="true"] {
    background: var(--surface); color: var(--navy);
}

/* ── Nivel 2 · las pantallas de la mesa ───────────────────────────────────
   Píldoras sobre blanco, colgadas de la pestaña que las abrió. La activa se
   marca con fondo teñido + barra interior —el mismo gesto que el chip activo
   de RRHH— y no con navy macizo: un bloque de color acá competiría con la
   banda de arriba y con el botón primario de la barra. */
.log-ui .lg-subnav {
    display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
    padding: 10px var(--gutter);
    background: var(--surface); border-bottom: 1px solid var(--hair);
    flex-shrink: 0;
}
.log-ui .lg-subnav button {
    padding: 6px 14px; border: 0; border-radius: 99px;
    background: none; font: inherit; font-size: .78rem; font-weight: 700;
    color: var(--muted); white-space: nowrap; cursor: pointer;
    transition: background .14s var(--curva), color .14s var(--curva),
                transform .18s var(--curva);
}
.log-ui .lg-subnav button:hover,
.log-ui .lg-subnav button:focus-visible { background: var(--canvas); color: var(--ink); transform: translateY(-1px); }
.log-ui .lg-subnav button:active { transform: translateY(0); }
.log-ui .lg-subnav button[aria-current="true"] {
    background: var(--navy-050); color: var(--navy);
    box-shadow: inset 3px 0 0 var(--navy);
    transform: none;
}

/* ── Nivel 3 · el nombre de la pantalla ───────────────────────────────────
   Va FIJO en el armazón, no adentro de cada pantalla: es lo único que dice en
   qué estás cuando la tabla ya se fue de scroll, y así ninguna pantalla se lo
   puede olvidar ni escribirlo distinto.

   La barra superior del armazón publica la MESA («Logística › Liquidaciones»)
   y este título la pantalla. Si las dos dijeran lo mismo, sería el nombre
   escrito dos veces —el defecto que hizo nacer `shell.js`. */
.log-ui .lg-shead {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    padding: 16px var(--gutter) 0;
    background: var(--canvas);
    flex-shrink: 0;
}
.log-ui .lg-shead h2 {
    margin: 0; font-size: 1.28rem; font-weight: 800; color: var(--navy);
    letter-spacing: -.012em;
}
.log-ui .lg-shead p { margin: 0; font-size: .8rem; color: var(--muted); max-width: 78ch; }

/* ── Área de trabajo ──────────────────────────────────────────────────────
   `min-height: 0` no es opcional: un `flex: 1` sin él estira en vez de
   scrollear, y lo que pasa del pliegue queda tapado sin barra en ningún lado.
   El scroll es de la VISTA, no del área: así cada pantalla recuerda dónde
   estaba y ninguna arrastra el scroll de la anterior. */
.log-ui .lg-work { flex: 1; min-height: 0; min-width: 0; position: relative; }
.log-ui .lg-view { height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.log-ui .lg-pad  { padding: 14px var(--gutter) 28px; }

/* ── Barras de navegación heredadas — SE FUERON ───────────────────────────
   Acá vivía `.lg-nav-legacy { display: none }`: la etapa 1 no podía tocar el
   hub de Mov. de Bolsas todavía, así que le escondió su barra de tres pestañas
   —que decía lo mismo que las píldoras del nivel 2— y la dejó en el DOM porque
   `switchTabMovBolsas()` le escribía el `className` para marcar la activa.
   Esconder un control que sigue mandando es un parche, no un arreglo.

   La etapa 6 se llevó la barra Y la función. Ahora `logGo()` es la única
   navegación del módulo de verdad, y esta regla no tiene a quién apagar.
   La versión de RRHH (`.rr-nav-legacy`) sigue viva y esto NO la toca. */

/* ── Tarjeta ──────────────────────────────────────────────────────────────
   Una sola sombra, plana. La escala `--e1/e2/e3` es del tratamiento "Capas"
   del ABM y acá no va: este módulo separa por trazo. */
.log-ui .lg-card {
    background: var(--surface); border: 1px solid var(--hair);
    border-radius: var(--r-card); box-shadow: var(--shadow);
    margin-bottom: 14px; overflow: hidden;
}
.log-ui .lg-card.lleno {
    display: flex; flex-direction: column;
    flex: 1 1 auto; min-height: 0; margin-bottom: 0;
}

/* ── La tarjeta que DEJA SALIR lo que se despliega adentro ────────────────
   `overflow: hidden` está arriba por una sola razón: que el encabezado teñido
   de la tarjeta, el pie y la cabecera sticky de la tabla respeten las esquinas
   redondeadas. Ninguna tarjeta de FILTROS tiene nada de eso — es padding y
   campos— y en cambio el recorte le corta la única cosa que tiene que salirse.

   EL DEFECTO QUE ARREGLA, y es el que Hernán reportó: el desplegable de un
   smart-selector es un `<ul class="absolute z-50">`. **El z-index no salva de
   un recorte del ancestro**: `overflow: hidden` gana siempre, sin importar
   cuántos niveles de apilamiento haya. Medido en las bandejas de flete corto y
   flete largo: de los 111 px del desplegable quedaban tapados 100. El buscador
   encontraba, la lista se dibujaba, y el usuario veía una raya de 11 px. Lo
   único que se podía hacer era escribir el nombre entero y adivinar.

   NO SE ARREGLA SACÁNDOLE EL RECORTE A TODAS: la tarjeta con tabla lo necesita.
   Va como modificador, igual que `.lleno`, y lo lleva toda tarjeta que aloje un
   buscador. Que nadie se olvide de ponerlo NO se confía a la memoria: los
   bancos miden el recorte de cada desplegable y se ponen rojos si aparece uno
   nuevo tapado.

   Y el modificador DEVUELVE A MANO lo único que el recorte daba: las esquinas.
   La bandeja de Remitos es el caso que lo obliga —su buscador de cliente vive
   en la CABECERA de una tarjeta que abajo tiene la tabla y el pie—, así que sin
   esto el encabezado teñido asomaría sus esquinas cuadradas por arriba del
   borde redondeado. La tabla no las necesita: nunca toca las esquinas, porque
   siempre hay una cabecera arriba y un pie abajo. */
.log-ui .lg-card.abierta { overflow: visible; }
.log-ui .lg-card.abierta > .lg-card-h:first-child {
    border-top-left-radius: var(--r-card); border-top-right-radius: var(--r-card);
}
.log-ui .lg-card.abierta > .lg-card-f:last-child {
    border-bottom-left-radius: var(--r-card); border-bottom-right-radius: var(--r-card);
}
.log-ui .lg-card-h {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 11px 16px; border-bottom: 1px solid var(--hair); background: #fafbfc;
}
.log-ui .lg-card-f {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--hair);
    background: #fafbfd; font-size: .76rem; color: var(--muted);
}

/* ── Segmento — dos cortes de la MISMA especie ────────────────────────────
   Pendientes y Conformados comparten render y sólo cambian un `where`: es un
   FILTRO, no dos pantallas (§7). Por eso va como segmento y no como pestañas
   —que prometerían dos lugares distintos— ni en el rail.

   El contador vive adentro del segmento. Es el numero que trae al operador a
   esta pantalla y estaba escrito abajo de la tabla, en el pie. */
.log-ui .lg-seg {
    display: inline-flex; padding: 3px; gap: 2px;
    background: var(--canvas); border: 1px solid var(--hair-strong); border-radius: 10px;
}
.log-ui .lg-seg button {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 13px; border: 0; border-radius: 7px; background: none;
    font: inherit; font-size: .77rem; font-weight: 700; color: var(--muted);
    white-space: nowrap; cursor: pointer;
    transition: background .14s var(--curva), color .14s var(--curva);
}
.log-ui .lg-seg button:hover { color: var(--ink); }
.log-ui .lg-seg button[aria-pressed="true"] {
    background: var(--surface); color: var(--navy);
    box-shadow: 0 1px 2px rgba(16,32,64,.10);
}
.log-ui .lg-seg .n {
    font-size: .7rem; font-weight: 800; color: var(--faint);
    font-variant-numeric: tabular-nums;
}
.log-ui .lg-seg button[aria-pressed="true"] .n { color: var(--navy-500); }

/* ── Filtros ──────────────────────────────────────────────────────────────
   Alineados abajo, no arriba: los rótulos tienen alturas distintas y lo que
   tiene que quedar en una línea son los CAMPOS. */
.log-ui .lg-filtros { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.log-ui .lg-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.log-ui .lg-f > label {
    font-size: .62rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .7px; color: var(--faint);
}
.log-ui .lg-in {
    font: inherit; font-size: .79rem; font-weight: 600; color: var(--ink);
    padding: 7px 11px; border: 1px solid var(--hair-strong); border-radius: 8px;
    background: #fff;
    transition: border-color .14s var(--curva), box-shadow .14s var(--curva);
}
.log-ui .lg-in:focus {
    border-color: var(--navy-500); outline: none;
    box-shadow: 0 0 0 3px rgba(43,82,150,.12);
}
.log-ui .lg-in::placeholder { color: var(--faint); font-weight: 400; }
/* El numero de remito se compara caracter por caracter contra un papel. */
.log-ui .lg-in.nro { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.log-ui .lg-empuja { margin-left: auto; }

/* ── Botones ──────────────────────────────────────────────────────────────
   En reposo el secundario es GRIS: si tres botones secundarios llevan texto
   navy, compiten con el primario. Al apuntarlo recupera el color de marca. */
.log-ui .lg-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font: inherit; font-size: .77rem; font-weight: 700; white-space: nowrap;
    padding: 7px 14px; border-radius: 8px;
    border: 1px solid var(--navy); background: var(--navy); color: #fff; cursor: pointer;
    transition: background .14s var(--curva), border-color .14s var(--curva),
                transform .12s var(--curva), box-shadow .14s var(--curva);
}
.log-ui .lg-btn:hover:not(:disabled) {
    background: var(--navy-700); border-color: var(--navy-700);
    transform: translateY(-2px); box-shadow: 0 5px 14px rgba(0,43,107,.30);
}
.log-ui .lg-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 3px rgba(0,43,107,.22); }
.log-ui .lg-btn:disabled { opacity: .45; cursor: default; }
.log-ui .lg-btn .material-symbols-outlined { font-size: 17px; }
.log-ui .lg-btn.sec { background: #fff; color: var(--muted); border-color: var(--hair-strong); }
.log-ui .lg-btn.sec:hover:not(:disabled) {
    background: var(--navy-050); border-color: var(--navy-500); color: var(--navy);
    box-shadow: 0 5px 14px rgba(0,43,107,.16);
}

/* Los iconos de acción de una fila necesitan aire entre sí: pegados, dos
   objetivos de 30px se leen como un control raro de 60. Lo destapó la foto. */
.log-ui .lg-acc { display: inline-flex; align-items: center; gap: 4px; }

/* Icono de acción de una fila: el círculo aparece y el ícono crece. */
.log-ui .lg-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border: 0; border-radius: 8px;
    background: none; color: var(--faint); cursor: pointer;
    transition: background .14s var(--curva), color .14s var(--curva), transform .12s var(--curva);
}
.log-ui .lg-ico:hover { background: var(--navy-050); color: var(--navy); transform: scale(1.12); }
.log-ui .lg-ico:active { transform: scale(.96); }
.log-ui .lg-ico .material-symbols-outlined { font-size: 19px; }
/* La foto que mandó el chofer no es una acción más: es la PRUEBA de la
   entrega, y es lo único de la fila que no se puede deducir de los datos. */
.log-ui .lg-ico.prueba { color: var(--navy-500); background: var(--navy-050); }
.log-ui .lg-ico.prueba:hover { background: var(--navy); color: #fff; }

/* ── Tabla ────────────────────────────────────────────────────────────────
   El encabezado se apoya en una regla gruesa, como un informe impreso: una
   franja navy de ancho completo sobre 60 filas es lo que más cansa la vista.
   Sigue sticky y opaco al scrollear. */
.log-ui .lg-tw { flex: 1 1 auto; min-height: 0; overflow: auto; }
.log-ui table.lg-g {
    width: 100%; border-collapse: collapse; font-size: .79rem;
    font-variant-numeric: tabular-nums;
}
.log-ui table.lg-g th {
    position: sticky; top: 0; z-index: 2;
    background: var(--surface); color: var(--muted);
    padding: 9px 11px; text-align: left; white-space: nowrap;
    font-size: .64rem; text-transform: uppercase; letter-spacing: .5px; font-weight: 700;
    border-bottom: 2px solid var(--ink);
}
.log-ui table.lg-g td { padding: 8px 11px; text-align: left; border-bottom: 1px solid #edeef2; }
.log-ui table.lg-g th.n, .log-ui table.lg-g td.n { text-align: right; }
.log-ui table.lg-g th.c, .log-ui table.lg-g td.c { text-align: center; }
.log-ui table.lg-g tbody tr { transition: background .12s var(--curva); }
.log-ui table.lg-g tbody tr:hover td { background: var(--navy-050); }
.log-ui table.lg-g .nm { font-weight: 700; }
.log-ui table.lg-g .dim { color: var(--faint); font-size: .72rem; }
/* La fila tildada es la que se va a procesar: se marca con una barra al
   margen, no pintándola de color — el color de la fila es del ESTADO. */
.log-ui table.lg-g tbody tr.sel > td:first-child { box-shadow: inset 3px 0 0 var(--navy); }
.log-ui table.lg-g tbody tr.sel td { background: var(--navy-050); }
.log-ui .lg-chk { width: 16px; height: 16px; accent-color: var(--navy); cursor: pointer; }

/* ── Celda de plata de la bandeja ─────────────────────────────────────────
   La cifra manda y el recuento va abajo, chico. Un `<span class="dim">` al
   lado no alcanzaba: la columna está alineada a la derecha y los dos datos
   tienen que apilarse contra ese borde, o la cifra deja de leerse en columna.

   `.nada` es la empresa que no tiene NADA en esa etapa del embudo —a la que
   sólo hay que pagarle, o a la que sólo hay que facturarle—. Se dibuja una
   raya tenue en vez de un cero: cero pesos y «acá no hay nada» son cosas
   distintas, y un `$ 0` en la columna invitaría a apretar un botón que ni
   siquiera está. */
.log-ui .lg-pl { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.log-ui .lg-pl .v { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.log-ui .lg-pl .c { font-size: .7rem; color: var(--faint); }
.log-ui .lg-pl.nada .v { color: var(--hair-strong); font-weight: 600; }

/* ── Celda de comprobante ─────────────────────────────────────────────────
   El rótulo ARRIBA y el número abajo, en la misma celda.

   Es la única clase que la etapa 5 tuvo que agregar, y la agrega porque el
   historial es el único lugar del módulo donde una columna carga DOS
   comprobantes distintos: en flete largo es la orden de pago que emite MOYCO y
   en flete corto la factura que emite el transportista. Un encabezado no puede
   ser cierto para los dos, así que la celda lo dice fila por fila.

   No es `.lg-pl`: aquella apila contra el borde DERECHO porque es una columna
   de plata que se lee en columna. Un número de comprobante se compara contra un
   papel, uno por vez, y va alineado a la izquierda con el resto del texto. */
.log-ui .lg-doc { display: flex; flex-direction: column; line-height: 1.3; }
.log-ui .lg-doc .k {
    font-size: .58rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .6px; color: var(--faint);
}
.log-ui .lg-doc .v { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ── Estado — la ÚNICA escala de color que existe ─────────────────────────
   Los cuatro estados del embudo tenían cuatro familias de Tailwind (indigo,
   emerald, ámbar y gris) más un tinte de fila y un `animate-pulse`. Son
   estados de verdad, así que el color estaba bien PUESTO y mal ELEGIDO:
   indigo para «liquidado» no es un nivel semántico, es un color.

       En tránsito → sin clase   salió, el papel todavía no volvió: no se
                                 esperaba nada, y son la mayoría
       A revisar   → wrn         confirmado por teléfono, falta auditar el
                                 papel: es el único que pide una acción
       Conformado  → ok          el papel está, habilita facturar el viaje
       Liquidado   → nav         informativo y previsto: ya se pagó, no se
                                 toca más. No es «mejor» que conformado */
.log-ui .lg-b {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    padding: 2.5px 8px; border-radius: 99px; white-space: nowrap;
    background: #eef0f4; color: var(--muted);
}
.log-ui .lg-b .material-symbols-outlined { font-size: 12px; }
.log-ui .lg-b.ok  { background: var(--ok-050);   color: var(--ok); }
.log-ui .lg-b.wrn { background: var(--warn-050); color: var(--warn); }
.log-ui .lg-b.neg { background: var(--crit-050); color: var(--crit); }
.log-ui .lg-b.nav { background: var(--navy-050); color: var(--navy-500); }
.log-ui .lg-b.mut { background: transparent; color: var(--faint); font-style: italic; }

/* ── Avisos y estados vacíos ──────────────────────────────────────────────
   Un aviso es una franja con filete al margen, no un bloque de color: tiene
   que poder convivir con una tabla sin ganarle. */
.log-ui .lg-aviso {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    border-left: 4px solid var(--hair-strong); background: #fafbfd;
    border-radius: 0 9px 9px 0; padding: 10px 14px; margin-bottom: 12px;
    font-size: .79rem; color: var(--muted);
}
.log-ui .lg-aviso.info  { border-left-color: var(--navy-500); background: var(--navy-050); }
.log-ui .lg-aviso.wrn   { border-left-color: var(--warn); background: var(--warn-050); color: var(--warn); }
.log-ui .lg-aviso.neg   { border-left-color: var(--crit); background: var(--crit-050); color: var(--crit); }
.log-ui .lg-aviso b { color: var(--ink); font-weight: 700; }
.log-ui .lg-aviso.wrn b, .log-ui .lg-aviso.neg b { color: inherit; }
.log-ui .lg-aviso .lg-empuja { margin-left: auto; }

/* El error CRUDO de Firestore adentro de un aviso. Va en renglón propio y en
   cuerpo chico: el mensaje es largo y técnico, y si se mezcla con la
   explicación se lee como parte de ella. Lo que importa es lo que sigue —el
   link que crea el índice que falta, que no está en ningún otro lado: la
   consola de Firebase NO lista los índices que no existen—, así que se separa
   y se subraya. Hereda el color del aviso: un link azul adentro de una franja
   ámbar sería un tercer color en una pantalla que ya tiene los suyos. */
/* `display:block` y no `width:100%`: el detalle va anidado adentro del `<span>`
   del aviso, no es hijo directo del flex, así que el 100% no lo baja de renglón
   —y el link quedaba enterrado en el medio de la oración—. Lo destapó la foto. */
.log-ui .lg-err-detalle { display: block; margin-top: 6px; font-size: .72rem; line-height: 1.45; }
.log-ui .lg-err-detalle a {
    display: inline-block; margin-top: 4px;
    color: inherit; font-weight: 700; text-decoration: underline;
}

.log-ui .lg-vacio {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 48px 24px; text-align: center; color: var(--faint);
}
.log-ui .lg-vacio .material-symbols-outlined { font-size: 40px; color: var(--hair-strong); }
.log-ui .lg-vacio b { font-size: .9rem; font-weight: 700; color: var(--ink); }
.log-ui .lg-vacio span { font-size: .78rem; line-height: 1.6; max-width: 52ch; }

/* El velo de carga sobre la tabla. Deja ver lo que había abajo: si tapara con
   opaco, cada consulta parecería que la pantalla se reinicia. */
.log-ui .lg-velo {
    display: flex; position: absolute; inset: 0; z-index: 3;
    flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    background: rgba(255,255,255,.82); backdrop-filter: blur(2px);
}
.log-ui .lg-velo p { font-size: .78rem; font-weight: 700; color: var(--navy); }

/* ═══════════════════════════════════════════════════════════════════════════
   PANEL DE LECTURA — el detalle de algo que ya pasó
   ---------------------------------------------------------------------------
   No es un takeover y no es un diálogo del sistema. El takeover es para TRABAJAR
   (tapa la navegación entera porque hay algo a medio cargar que se puede perder);
   los `gs-dlg-` son para DECIDIR, con dos botones y tres renglones de texto. Esto
   es para MIRAR: un pago que ya está hecho, con sus quince viajes adentro. No
   entra en un diálogo y no justifica tapar el módulo.

   SIN ESPACIO entre las dos clases: el nodo se cuelga de <body>, así que lleva
   `class="log-ui lg-modal"` —el scope y la clase en el MISMO elemento—. Con
   espacio no matchea nada y el panel se cae en silencio (§8 del manual).

   z-index 200: arriba del armazón (90) y del takeover (6, que es local), y ABAJO
   de los diálogos del sistema (240) y del toast (260). Confirmar algo desde acá
   adentro tiene que verse por encima de acá adentro. */
.log-ui.lg-modal {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: rgba(16, 32, 64, .55);
    animation: lgFunde .16s var(--curva);
}
@keyframes lgFunde { from { opacity: 0; } to { opacity: 1; } }

.log-ui .lg-modal-p {
    display: flex; flex-direction: column;
    width: 100%; max-width: 720px; max-height: 88vh; min-height: 0;
    background: var(--surface); border-radius: var(--r-card);
    box-shadow: var(--e3); overflow: hidden;
    animation: lgTkLlega .2s var(--curva);
}
.log-ui .lg-modal-h {
    flex-shrink: 0; display: flex; align-items: flex-start; gap: 14px;
    padding: 14px 18px; border-bottom: 1px solid var(--hair); background: #fafbfc;
}
.log-ui .lg-modal-h h3 {
    margin: 0; font-size: 1.06rem; font-weight: 800; color: var(--navy); letter-spacing: -.012em;
}
.log-ui .lg-modal-h p { margin: 0; font-size: .74rem; color: var(--muted); }
/* El cuerpo scrollea, no el panel: la cabecera dice de qué liquidación es esto
   y tiene que seguir ahí cuando la lista de viajes se fue de largo. */
.log-ui .lg-modal-b { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 18px; }
.log-ui .lg-modal-b .lg-card:last-child { margin-bottom: 0; }
.log-ui .lg-modal-f {
    flex-shrink: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 11px 18px; border-top: 1px solid var(--hair); background: var(--surface);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TAKEOVER — el wizard de liquidación es un LUGAR, no una pantalla más
   ---------------------------------------------------------------------------
   Elegido por Hernán sobre la variante «mesa única» (30/07/2026, dos mockups).
   El problema que resuelve es concreto: con la navegación permanente de la
   etapa 1, tocar otra píldora tiraba el wizard entero a la basura EN SILENCIO
   —lo cargado hasta ahí no se recuperaba y nadie avisaba nada.

   Por eso el takeover cuelga del `.lg-shell` y no del `.lg-work`: tapa la
   banda, las píldoras y el título. Mientras esté abierto no hay ninguna
   navegación del módulo a un clic de distancia, y la única salida es un botón
   que dice qué se pierde. Lo que queda a la vista es la barra del armazón, que
   es del SISTEMA: ahí sigue leyéndose dónde estás y a quién le estás liquidando.

   OJO — `logGo()` retira cualquier takeover abierto antes de navegar. Sin eso
   quedaría tapando la pantalla siguiente: es un hermano de `.lg-work`, así que
   el `.hidden` que el router les pone a las vistas no lo alcanza.
   ═══════════════════════════════════════════════════════════════════════════ */
.log-ui .lg-tk {
    position: absolute; inset: 0; z-index: 6;
    display: flex; flex-direction: column;
    background: var(--canvas);
}
/* La llegada usa el gesto de `.gs-dlg-panel` —10px y funde—, que es el único
   que el sistema tiene para «un plano que aparece». El tope de 2px es de los
   CONTROLES; un plano entero que se corriera 2px no se leería como que llega.
   Y corre sólo cuando el takeover se MONTA: repintar el paso al tildar un
   viaje no lo vuelve a deslizar (sería movimiento sin información). */
.log-ui .lg-tk.entra { animation: lgTkLlega .2s var(--curva); }
@keyframes lgTkLlega { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.log-ui .lg-tk-h {
    flex-shrink: 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 13px var(--gutter) 0; background: var(--surface);
}
.log-ui .lg-tk-h h2 {
    margin: 0; font-size: 1.14rem; font-weight: 800; color: var(--navy); letter-spacing: -.012em;
}
.log-ui .lg-tk-h .quien {
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .7px;
    color: var(--faint);
}

/* Los pasos: una regla que se llena, no un círculo numerado con un tilde.
   El verde del mockup de la ronda 2 no podía ir —`--ok` es ESTADO, y «paso
   hecho» no es un estado bueno: es una posición— así que la escala entera es
   navy: `--hair` lo que falta, `--navy-300` lo hecho, `--navy` donde estás.
   Los pasos ya recorridos son botones; los que faltan, no: un wizard donde se
   puede saltar al final sin pasar por el medio no es un wizard. */
.log-ui .lg-steps {
    flex-shrink: 0; display: flex; gap: 12px;
    padding: 12px var(--gutter) 13px; background: var(--surface);
    border-bottom: 1px solid var(--hair);
}
.log-ui .lg-steps button {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 5px;
    align-items: flex-start; text-align: left; padding: 0; border: 0; background: none;
    font: inherit; cursor: default;
}
.log-ui .lg-steps button .r {
    align-self: stretch; height: 3px; border-radius: 2px; background: var(--hair);
    transition: background .14s var(--curva);
}
.log-ui .lg-steps button .k {
    font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--faint);
}
.log-ui .lg-steps button .l { font-size: .82rem; font-weight: 700; color: var(--faint); }
.log-ui .lg-steps button.hecho { cursor: pointer; }
.log-ui .lg-steps button.hecho .r { background: var(--navy-300); }
.log-ui .lg-steps button.hecho .l { color: var(--muted); }
.log-ui .lg-steps button.hecho:hover .r { background: var(--navy-500); }
.log-ui .lg-steps button.hecho:hover .l { color: var(--navy); }
.log-ui .lg-steps button.actual .r { background: var(--navy); }
.log-ui .lg-steps button.actual .l,
.log-ui .lg-steps button.actual .k { color: var(--navy); }

.log-ui .lg-tk-b { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

/* El pie del wizard. Es lo único que decide si se avanza, así que el total va
   ACÁ, al lado del botón: el número que hay que mirar antes de apretar no
   puede estar a 400px de distancia ni irse de scroll con la tabla. */
.log-ui .lg-tk-f {
    flex-shrink: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px var(--gutter); background: var(--surface);
    border-top: 1px solid var(--hair); box-shadow: 0 -3px 12px rgba(16,32,64,.05);
}
.log-ui .lg-kpi { display: flex; flex-direction: column; gap: 1px; }
.log-ui .lg-kpi.der { align-items: flex-end; text-align: right; }
.log-ui .lg-kpi .k {
    font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--faint);
}
.log-ui .lg-kpi .plata {
    font-size: 1.3rem; font-weight: 800; color: var(--navy);
    letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.log-ui .lg-kpi.nada .plata { color: var(--hair-strong); }
.log-ui .lg-corte { width: 1px; align-self: stretch; background: var(--hair); }
.log-ui .lg-nota { font-size: .74rem; color: var(--muted); max-width: 46ch; }
.log-ui .lg-nota b { color: var(--ink); font-weight: 700; }

/* ── El cierre (paso 3) ───────────────────────────────────────────────────
   Renglones de informe, no tarjetas: son los mismos viajes que se acaban de
   tildar y lo único que se hace acá es LEERLOS una vez más. */
.log-ui .lg-lista > div {
    display: flex; align-items: baseline; gap: 12px;
    padding: 7px 16px; border-bottom: 1px solid #edeef2; font-size: .79rem;
    transition: background .12s var(--curva);
}
.log-ui .lg-lista > div:last-child { border-bottom: 0; }
.log-ui .lg-lista > div:hover { background: var(--navy-050); }
.log-ui .lg-lista .f { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.log-ui .lg-lista .o { color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-ui .lg-lista .r { color: var(--faint); font-size: .72rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.log-ui .lg-lista .p { margin-left: auto; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.log-ui .lg-total {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; background: var(--navy-050); border-top: 1px solid var(--hair);
}
.log-ui .lg-total .k {
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--navy-500);
}
.log-ui .lg-total .v {
    font-size: 1.5rem; font-weight: 800; color: var(--navy);
    letter-spacing: -.022em; font-variant-numeric: tabular-nums;
}
.log-ui .lg-ta {
    width: 100%; min-height: 72px; resize: vertical;
    font: inherit; font-size: .79rem; color: var(--ink);
    padding: 9px 11px; border: 1px solid var(--hair-strong); border-radius: 8px; background: #fff;
    transition: border-color .14s var(--curva), box-shadow .14s var(--curva);
}
.log-ui .lg-ta:focus {
    border-color: var(--navy-500); outline: none; box-shadow: 0 0 0 3px rgba(43,82,150,.12);
}
.log-ui .lg-ta:disabled { background: var(--canvas); color: var(--faint); }
/* Una casilla con su rótulo al lado. El área clickeable es la etiqueta entera:
   16px de casilla sola es un objetivo de mouse mezquino. */
.log-ui .lg-chk-l {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .74rem; font-weight: 600; color: var(--muted); cursor: pointer;
}
.log-ui .lg-2col {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 14px; align-items: start;
}
@media (max-width: 900px) { .log-ui .lg-2col { grid-template-columns: 1fr; } }
.log-ui .lg-caja { padding: 14px 16px; display: flex; flex-direction: column; gap: 11px; }
.log-ui .lg-card-t { font-size: .82rem; font-weight: 700; color: var(--navy); }
.log-ui .lg-card-s { font-size: .72rem; color: var(--faint); }

/* ── Cronología de precios (etapa 6) ──────────────────────────────────────
   Es `.lg-lista` con las dos primeras columnas a ancho fijo. Sin eso, cada
   renglón alinea sus fechas donde le da el texto y la columna deja de leerse
   como columna —que es lo único que hace útil una cronología: correr el ojo
   por las fechas de corte, no por los importes.

   Va acá y no como `style=` en el JS: son cuatro renglones repetidos y los
   anchos son una decisión, no un detalle de una plantilla. */
.log-ui .lg-crono .f { min-width: 92px; }
.log-ui .lg-crono .o { min-width: 112px; }
/* El precio NO se parte. Es el importe: un «$ 150,» arriba y un «84» abajo se
   lee como dos números. Si el renglón queda corto, lo que cede es el rango de
   fechas —que tiene ellipsis— y no la plata. */
.log-ui .lg-crono .p, .log-ui .lg-crono .r { white-space: nowrap; }
.log-ui .lg-crono .lg-ico { width: 26px; height: 26px; margin-left: 8px; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOVIMIENTO — el vocabulario es el de los módulos YA migrados
   ---------------------------------------------------------------------------
   Portado de `rrhh-ui.css` y `config-ui.css`, NO del CSS del mockup: el mockup
   fija navegación y jerarquía, y ahí se termina su autoridad. Sus animaciones
   no eran las del sistema y Hernán lo marcó al elegir.

   La regla que ordena todo esto: cada control se mueve como lo que HACE.
     · lo que NAVEGA en fila se levanta 1 px (píldoras del nivel 2)
     · lo que se PRESIONA se levanta 2 px con sombra y se hunde al clic
     · lo que cambia de MESA no se mueve: se abre la banda y lo deja pasar
   Todo con transform y color, que no reflowean.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .log-ui *, .log-ui *::before, .log-ui *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
    /* El destaque se conserva —color y fondo quedan—; lo que se va es el
       desplazamiento. Quien pidió menos movimiento no pidió menos señales. */
    .log-ui .lg-subnav button:hover,
    .log-ui .lg-subnav button:focus-visible,
    .log-ui .lg-btn:hover, .log-ui .lg-btn:active,
    .log-ui .lg-ico:hover, .log-ui .lg-ico:active { transform: none !important; }
    /* El takeover aparece sin deslizarse. Que TAPÓ la pantalla se sigue
       entendiendo: es opaco y de punta a punta. */
    .log-ui .lg-tk.entra { animation: none !important; }
}