/* ===========================================================================
   Sistema de Orquestación Logística — hoja de estilos base
   Ver docs/UI_UX.md.

   Principio rector: esta interfaz se usa BAJO PRESIÓN, de pie, con prisa y a
   veces con mala luz. La estética sirve a la operación, no al revés.

   Prohibido: cards dentro de cards, degradados DECORATIVOS, animaciones que
   retrasen una acción, ocultar información atrasada para "limpiar" la vista.

   Permitido desde la revisión de diseño (docs/UI_UX.md §2): profundidad
   ESTRUCTURAL. Una sombra que separa una capa de otra, o un degradado que
   identifica la superficie de marca, jerarquizan la pantalla; eso ayuda a
   operar. Lo que sigue prohibido es el adorno que no comunica nada.
   =========================================================================== */

/* Los tokens del sistema viven ahora en su propia hoja, que se carga ANTES que
   ésta en los tres layouts y en las cuatro páginas de error: tokens.css.
   Aquí no se declara ni un color, ni un tamaño, ni un espaciado. */

/* Entrada de un bloque que aparece: 8 px y opacidad. Lo justo para que el
   ojo sepa DÓNDE mirar cuando la pantalla cambia sola por polling. */
@keyframes rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* Latido del indicador "en vivo". No compite con nada: es un punto de 8px. */
@keyframes beat {
    0%, 100% { opacity: 1;  transform: scale(1); }
    50%      { opacity: .35; transform: scale(.8); }
}

@keyframes spin { to { transform: rotate(360deg); } }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    /* 16 px mínimo: nunca menos, y menos aún en móvil. */
    font: var(--text-md)/1.5 var(--font);
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: var(--weight-semi); line-height: 1.2; letter-spacing: -.014em; }
h1 { font-size: var(--text-xl); letter-spacing: -.018em; }
h2 { font-size: var(--text-lg); }
p  { margin: 0 0 var(--space-3); }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: var(--text-sm);
    color: var(--ink-soft);
}

.muted  { color: var(--ink-soft); font-size: var(--text-base); }
.tag {
    display: inline-block;
    padding: 1px var(--space-2);
    border-radius: 999px;
    background: var(--info-bg);
    color: var(--info);
    font-size: var(--text-xs);
    font-weight: 600;
}

/* Una etiqueta que advierte sin ser un error: la ruta salió igual, pero hay
   algo que el coordinador debe saber. Mismo amarillo que el resto de esperas. */
.tag--warning { background: var(--wait-bg); color: var(--wait-ink); }

/* Foco visible siempre: se opera con teclado bajo presión */
:where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Autenticación
   --------------------------------------------------------------------------- */
.auth-body  { background: var(--canvas); }

.auth-shell {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: var(--space-5) var(--space-4);
}

.auth-card {
    width: 100%;
    max-width: 380px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-6);
    animation: rise var(--base) var(--ease);
}


.error-code { font-size: var(--num-2xl); margin-bottom: var(--space-2); }
.error-text { font-size: var(--text-md); }

/* ---------------------------------------------------------------------------
   Estructura de la aplicación
   --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   ESQUELETO: LOMO + HOJA

   Antes: barra superior a todo lo ancho + barra lateral + columna de contenido.
   Ése es el chasis de cualquier herramienta interna, y aquí traía tres
   problemas concretos: la marca salía dos veces, el evento activo —el contexto
   del que cuelga cada dato— era una línea pequeña repetida en dos sitios, y la
   barra gastaba 58 px de alto en todas las pantallas para llevar cosas que no
   son tareas.

   Ahora una sola columna vertical, el lomo, con la portada arriba, el recorrido
   en medio y la identidad al pie. El resto es hoja.
   --------------------------------------------------------------------------- */
.app-shell {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    min-height: 100dvh;
}

.spine {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100dvh;
    border-right: 1px solid var(--rule);
    background: var(--sheet);
}

/* --- Portada: de quién es el libro y de qué evento habla ------------------ */
.spine__masthead {
    padding: var(--space-3) var(--space-4);
    background: var(--brand-deep);
    color: var(--on-brand);
}

.spine__brand { display: flex; align-items: center; gap: var(--space-2); color: var(--on-brand); }
.spine__brand:hover { text-decoration: none; }
.spine__name  { font-size: var(--text-base); font-weight: var(--weight-semi); line-height: 1.25; }

.spine__mark {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px; height: 32px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .14);
    color: var(--on-brand);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
}

/* EL LOGO SE MUESTRA TAL CUAL: sin fondo, sin recuadro y sin recorte. Los que
   se suben son PNG con transparencia y traen su propia forma —un aro, un disco,
   un símbolo—; una placa rectangular detrás los convierte en una pegatina.
   Manda la altura y el ancho se adapta. */
img.spine__mark {
    display: block;
    width: auto;
    height: 34px;
    max-width: 150px;
    padding: 0;
    border-radius: 0;
    background: none;
    object-fit: contain;
}

/* El evento, promovido. Es lo que más se confunde en un turno largo: todo lo
   que se ve a la derecha pertenece a ÉSTE y a ningún otro. */
.spine__event {
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.spine__event-label { display: block; color: var(--dark-accent); font-size: var(--text-xs); }
.spine__event strong {
    display: block;
    margin: 1px 0 var(--space-2);
    color: var(--on-brand);
    font-size: var(--text-md);
    font-weight: var(--weight-semi);
    line-height: 1.25;
}

.spine__event-none { display: flex; align-items: center; gap: var(--space-2); color: var(--wait-on-dark); }
.spine__event .badge { background: rgba(255, 255, 255, .14); border-color: transparent; color: var(--on-brand); }

/* --- Recorrido ----------------------------------------------------------- */
.spine__nav {
    flex: 1;
    min-height: 0;
    padding: var(--space-2) var(--space-2) var(--space-4);
    overflow-y: auto;
    scrollbar-width: thin;
    overscroll-behavior: contain;
}

.spine__nav::-webkit-scrollbar       { width: 6px; }
.spine__nav::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--rule-strong); }
.spine__nav::-webkit-scrollbar-track { background: transparent; }

/* Compacto a propósito: diecisiete entradas y seis separadores tienen que caber
   en un portátil de 768 px. Ver --nav-pad-y en tokens.css. */
.sidebar__link {
    display: flex;
    align-items: center;
    padding: var(--nav-pad-y) var(--space-3);
    border-radius: var(--radius);
    color: var(--ink-2);
    font-size: var(--text-base);
    line-height: 1.3;
    font-weight: var(--weight-medium);
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}

.sidebar__link:hover { background: var(--sheet-alt); color: var(--ink); text-decoration: none; }

/* Activo: franja violeta a la izquierda y fondo tenue. Se localiza de un vistazo
   en un menú de diecisiete entradas sin invertir el contraste. */
.sidebar__link.is-active {
    background: var(--brand-faint);
    box-shadow: inset 3px 0 0 var(--brand);
    color: var(--brand-deep);
    font-weight: var(--weight-semi);
}

.sidebar__link.is-active .ico { color: var(--brand); opacity: 1; }
.sidebar__link .ico           { margin-right: var(--space-3); opacity: .7; }

/* Los separadores son la CADENA DE CUSTODIA: Logística, Recolección, Calidad y
   Finanzas son las manos por las que pasa un pedido, en ese orden. La regla
   superior los presenta como tramos de un recorrido y no como carpetas. */
.sidebar__section {
    display: block;
    margin: var(--space-2) 0 2px;
    padding: var(--space-2) var(--space-3) 0;
    border-top: 1px solid var(--rule);
    color: var(--ink-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
}

.spine__nav > .sidebar__section:first-child { margin-top: 0; border-top: 0; }

/* --- Pie: identidad, en voz baja ----------------------------------------- */
.spine__user {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--rule);
    background: var(--sheet-alt);
}

.spine__who  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: var(--text-sm); font-weight: var(--weight-semi); }
.spine__role { grid-column: 1; margin-top: -2px; color: var(--ink-3); font-size: var(--text-xs); }
.spine__user .rolepicker { grid-column: 1 / -1; }
.spine__user > form:last-child { grid-column: 2; grid-row: 1 / span 2; }

.rolepicker select {
    width: 100%;
    height: 30px;
    padding: 0 var(--space-2);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    background: var(--sheet);
    color: var(--ink);
    font: inherit;
    font-size: var(--text-sm);
}



/* --- Hoja ---------------------------------------------------------------- */
.sheet       { min-width: 0; background: var(--paper); }
.sheet__body { padding: var(--space-5); max-width: 1180px; min-width: 0; }

/* La tira de móvil no existe en escritorio: allí el lomo ya está a la vista. */
.sheet__bar  { display: none; }

/* ---------------------------------------------------------------------------
   Móvil: a 390 px no cabe un lomo

   El lomo se convierte en cajón y la hoja recupera una tira fina y pegajosa con
   el botón del menú y el nombre del evento, que es lo único del lomo que no
   puede perderse de vista.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .app-shell { grid-template-columns: 1fr; }

    .spine {
        position: fixed;
        z-index: 60;
        top: 0; bottom: 0; left: 0;
        width: min(300px, 84vw);
        transform: translateX(-100%);
        transition: transform var(--base) var(--ease);
        box-shadow: var(--shadow-lg);
    }

    .app-shell.is-nav-open .spine { transform: none; }

    .sheet__bar {
        position: sticky;
        top: 0;
        z-index: 40;
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-2) var(--space-3);
        border-bottom: 1px solid var(--brand-deep);
        background: var(--brand-deep);
        color: var(--on-brand);
    }

    .sheet__event {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: var(--text-base);
        font-weight: var(--weight-semi);
    }

    .sheet__body { padding: var(--space-4); }

    .nav-scrim {
        position: fixed;
        inset: 0;
        z-index: 50;
        border: 0;
        background: var(--scrim);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--base) var(--ease);
    }

    .app-shell.is-nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
}

.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px; height: 36px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .1);
    color: var(--on-brand);
    cursor: pointer;
}

.nav-toggle:hover { background: rgba(255, 255, 255, .2); }
.nav-toggle .ico  { margin: 0; }

.nav-scrim { display: none; }
/* El título lleva una barra navy a la izquierda. Cuesta 3 px y hace que el
   ojo encuentre el encabezado sin leerlo, que es lo que se necesita cuando
   se cambia de pantalla treinta veces por hora. */
.page-head {
    display: flex;
    align-items: center;
    gap: var(--gap);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 2px solid var(--ink);
}

.page-head h1 { margin-right: auto; }

.page-head__count {
    margin-left: var(--space-2);
    color: var(--ink-faint);
    font-weight: 500;
}

/* ---------------------------------------------------------------------------
   Paneles y tablas
   --------------------------------------------------------------------------- */
/* HOJA. No es una tarjeta: no flota, no proyecta sombra y su radio es casi
   nulo. Lo que la separa del papel es la regla y el aire, que es como se separa
   una hoja de un libro de la mesa donde está. */
.panel {
    margin-bottom: var(--space-5);
    padding: var(--space-5);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--sheet);
}

.panel__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: calc(var(--space-2) * -1) 0 var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--rule);
}

.panel__head h2 { margin-right: auto; display: flex; align-items: center; gap: 8px; }
.panel__head h2 .ico { color: var(--primary); }

/* LIBRO. La tabla no va dentro de una tarjeta: la tabla ES la hoja. Lo que
   organiza es la regla —una gruesa bajo la cabecera, hilos entre filas—, no un
   recuadro con esquinas redondeadas alrededor. */
.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--sheet);
    font-size: var(--text-base);
}

.table th {
    padding: var(--space-2) var(--space-3);
    border-bottom: 2px solid var(--ink);
    color: var(--ink);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    text-align: left;
    white-space: nowrap;
}

.table td {
    padding: var(--space-3);
    border-bottom: 1px solid var(--rule);
    vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: 0; }

/* La columna de cifras se lee en vertical: tabular y a la derecha, siempre. */
.table th.num, .table td.num { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* Resaltar la fila bajo el cursor no es adorno: en una tabla de 25 pedidos
   evita leer la columna equivocada al recorrerla con el dedo en pantalla. */
.table tbody tr { transition: background var(--fast) var(--ease); }
.table tbody tr:hover { background: var(--brand-faint); }

/* Celda de acciones.

   NO lleva `display: flex`. Ponerlo en el propio <td> lo saca de
   `display: table-cell`, con lo que deja de respetar el `vertical-align`
   de la fila: en las filas altas —un producto con descripción, por ejemplo—
   los botones quedaban hasta 22 px por encima de la etiqueta de estado.

   La celda se mantiene como celda y son sus HIJOS los que se alinean. */
.table__actions {
    text-align: right;
    white-space: nowrap;
    vertical-align: middle;
}

.table__actions > * {
    display: inline-flex;
    vertical-align: middle;
}

.table__actions > * + * { margin-left: var(--space-2); }

.row--current { background: var(--navy-50); box-shadow: inset 3px 0 0 var(--primary); }
.cell--roles  { font-size: var(--text-base); color: var(--ink-soft); }

/* Métricas. Importes por TAMAÑO y PESO, nunca por color:
   un número rojo se lee como negativo. */
.statgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

/* Una métrica no es una tarjeta flotante: es una celda de un bloque. Sin
   sombra ni relieve — la separan el borde y el espacio, que es suficiente. */
/* .stat, .stat__label y .stat__value se declaran con los otros once
   equivalentes en el bloque .metric del final de esta hoja. */

/* Caja General · Fase 7 */
.money-map { display:grid; grid-template-columns:minmax(150px,1fr) auto minmax(150px,1fr) auto minmax(150px,1fr) auto minmax(170px,1.1fr); align-items:stretch; gap:10px; margin-bottom: var(--space-4); }
.money-card { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.money-card span,
.money-card small  { display: block; color: var(--ink-soft); font-size: var(--text-xs); }
.money-card strong { display: block; margin: var(--space-2) 0 var(--space-1); font-family: var(--font-num); font-size: clamp(var(--text-xl), 2vw, var(--num-xl)); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.money-card--cash { border-color:var(--ok-border); background:var(--ok-bg); }
.money-card--total { background:var(--navy-800); color:var(--on-primary); border-color:var(--navy-900); }
.money-card--total span,.money-card--total small { color:var(--navy-200); }
.money-map__plus,
.money-map__equals { align-self: center; color: var(--ink-soft); font-size: var(--text-xl); font-weight: var(--weight-bold); }
.cashbox-form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); padding: var(--space-4); }
.cashbox-form label { flex: 1; min-width: 170px; color: var(--ink-soft); font-size: var(--text-sm); font-weight: var(--weight-semi); }
.cashbox-form input,
.cashbox-form select { display: block; width: 100%; margin-top: var(--space-1); }
.cashbox-action-panel { border-left:4px solid var(--primary); }
.ledger-health          { font-size: var(--text-sm); font-weight: var(--weight-semi); }
/* Vive dentro de .money-card--total, que es oscura: los tonos claros del
   catálogo se apagan ahí y hacen falta los pares de sobre-oscuro. */
.ledger-health.is-ok    { color: var(--done-on-dark); }
.ledger-health.is-error { color: var(--lost-on-dark); }
@media (max-width:1100px){.money-map{grid-template-columns:1fr 1fr}.money-map__plus,.money-map__equals{display:none}}
@media (max-width:620px){.money-map{grid-template-columns:1fr}.cashbox-form{align-items:stretch}.cashbox-form label,.cashbox-form button{width:100%}}

/* El borde discontinuo se leía como «esto está a medio hacer». Un renglón en
   blanco de un libro no lleva línea de puntos: lleva su regla y una frase que
   dice qué falta. */
.empty {
    padding: var(--space-6) var(--space-5);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--rule-strong);
    border-radius: var(--radius);
    background: var(--sheet-alt);
    color: var(--ink-2);
    text-align: center;
}

.empty .ico { color: var(--ink-3); }
.empty h2   { color: var(--ink); font-size: var(--text-md); }

.empty h2 { margin-bottom: var(--space-2); }

.assignment-stats { margin-bottom: var(--space-5); }
/* `position: relative` NO es decorativo, evita un desbordamiento real.
   Un elemento `position:absolute` dentro de la tabla —una etiqueta
   `.sr-only` en una cabecera, por ejemplo— resuelve su posición contra el
   bloque contenedor más cercano que esté posicionado. Sin esto ese bloque es
   el documento, así que el elemento ESCAPA del recorte del contenedor con
   scroll y estira la página entera aunque mida 1 px. Posicionar el
   contenedor lo devuelve dentro de su caja. */
.table-wrap { position: relative; max-width: 100%; overflow-x: auto; }
.assignment-action { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.assignment-action select,
.assignment-action input {
    min-width: 150px;
    height: 32px;
    padding: 0 var(--space-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    font: inherit;
    font-size: var(--text-base);
}
.assignment-action--reassign { margin-top: var(--space-2); }
.collector-presence { display: grid; gap: 14px; max-width: 520px; }
.collector-presence__state { font-size: var(--num-xl); letter-spacing: .03em; }

/* ---------------------------------------------------------------------------
   Formularios
   --------------------------------------------------------------------------- */
.form--panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--space-5);
}

.form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
}

.field { margin-bottom: var(--gap); }

.field label {
    display: block;
    margin-bottom: 5px;
    font-size: var(--text-base);
    font-weight: 600;
}

.field input,
.field select,
.field textarea,
.filters input,
.filters select,
.setting__control input {
    width: 100%;
    height: 36px;
    padding: 0 var(--space-3);
    border: 1px solid var(--rule-strong);
    border-bottom-color: var(--ink-3);
    border-radius: var(--radius);
    background: var(--sheet);
    color: var(--ink);
    font: inherit;
    transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

/* Aro navy al enfocar: dice qué campo está activo sin mover el layout. */
.field input:focus,
.field select:focus,
.field textarea:focus,
.filters input:focus,
.filters select:focus,
.setting__control input:focus {
    border-color: var(--navy-400);
    box-shadow: 0 0 0 3px var(--navy-100);
    outline: none;
}

.input--lg  { height: var(--touch-lg) !important; font-size: var(--text-lg) !important; }
.input--pin { letter-spacing: .5em; text-align: center; }

.is-invalid { border-color: var(--danger) !important; }

.field__error { margin: 5px 0 0; color: var(--danger); font-size: var(--text-sm); font-weight: 500; }
.field__hint  { margin: 5px 0 0; color: var(--ink-soft); font-size: var(--text-sm); }

.fieldset {
    margin: 0 0 var(--gap);
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.fieldset legend { padding: 0 var(--space-2); font-size: var(--text-base); font-weight: 650; }

.form__actions {
    display: flex;
    gap: 10px;
    align-items: center;
    padding-top: var(--space-1);
}

/* Campos sueltos junto a los botones (p. ej. el motivo de un ajuste) */
.form__actions input[type=text],
.form__actions input[type=search] {
    height: 40px;
    padding: 0 var(--space-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
}

.filters {
    display: flex;
    gap: 10px;
    margin-bottom: var(--space-4);
}

.filters input  { max-width: 320px; }
.filters select { max-width: 220px; }

.checkgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 8px;
}

.checkgrid--dense { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.check:hover { background: var(--navy-50); border-color: var(--navy-200); }
.check:has(input:checked) { background: var(--navy-50); border-color: var(--navy-400); }
.check input { accent-color: var(--primary); }
.check input { margin-top: 3px; flex: none; }
.check span  { display: flex; flex-direction: column; }
.check small { color: var(--ink-soft); font-size: var(--text-xs); }

.scope-switch { display: flex; gap: 8px; margin-bottom: var(--space-4); }

.setting {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: var(--gap);
    align-items: center;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--line);
}

.setting:last-child { border-bottom: 0; }

.setting--override { background: var(--info-bg); margin-inline: calc(var(--space-4) * -1); padding: var(--space-3) var(--space-4); }

.setting__info label { display: block; font-weight: 600; font-size: var(--text-md); }

/* Formulario de alta en línea, encima de una tabla */
.inline-create {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: var(--space-4);
}

.inline-create .field { margin-bottom: 0; flex: 1; }
.inline-create .field:not(:first-child) { flex: none; }

.inline-create--tight {
    margin: var(--space-4) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
}

/* Edición en línea dentro de una fila de tabla */
.row-edit { display: flex; gap: 6px; align-items: center; }
.row-edit input,
.row-edit select { height: 32px; font-size: var(--text-base); }
.row-edit input[type=text] { width: 180px; }

.input--quota { width: 90px; text-align: right; }

/* Importes y cantidades: alineados a la derecha y tabulares, para poder
   compararlos de un vistazo en una columna. */
.num {
    text-align: right;
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: -.01em;
}

.d-block  { display: block; }
.row--muted td { opacity: .55; }

.chiprow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.danger-zone {
    display: flex;
    align-items: center;
    gap: var(--gap);
    margin-top: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: var(--danger-bg);
    border: 1px solid var(--bad-border);
    border-radius: var(--radius);
}

.danger-zone div { margin-right: auto; }
.danger-zone p   { margin: var(--space-1) 0 0; }

/* ---------------------------------------------------------------------------
   Botones. Un solo botón primario por pantalla: bajo presión, dos botones
   verdes es un error esperando a ocurrir.
   --------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 36px;
    padding: 0 var(--space-3);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    background: var(--sheet);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--fast) var(--ease),
                border-color var(--fast) var(--ease),
                box-shadow var(--fast) var(--ease),
                transform var(--fast) var(--ease);
}

.btn:hover { text-decoration: none; background: var(--surface-alt); border-color: var(--navy-200); }

/* El botón se hunde 1 px al pulsarlo. Con guantes y sin sonido, ese
   desplazamiento es a veces la única confirmación de que se pulsó. */
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn--primary {
    background: var(--primary);
    border-color: var(--navy-700);
    box-shadow: var(--shadow-navy);
    color: var(--on-primary);
}
.btn--primary:hover {
    background: var(--navy-500);
    border-color: var(--navy-600);
}

.btn--danger  { background: var(--danger); border-color: var(--bad-ink); color: var(--on-primary); }
.btn--danger:hover { background: var(--bad-ink); border-color: var(--bad-ink); }

.btn--ghost   { background: var(--surface); border-color: var(--line-strong); color: var(--ink-soft); }
.btn--ghost:hover { background: var(--canvas); color: var(--ink); }

.btn--sm    { height: 32px; padding: 0 var(--space-3); font-size: var(--text-base); }
.btn--lg    { height: 46px; font-size: var(--text-md); }
.btn--xl    { height: var(--touch-lg); font-size: var(--text-lg); }
.btn--block { width: 100%; }

/* ---------------------------------------------------------------------------
   Avisos y etiquetas de estado
   --------------------------------------------------------------------------- */
/* La franja izquierda de 4 px codifica el tipo de aviso por posición además
   de por color: se distingue en pantallas con mala reproducción de color. */
.alert {
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid;
    border-left-width: 3px;
    border-radius: var(--radius);
    font-size: var(--text-base);
    animation: rise var(--base) var(--ease);
}

.alert--success { background: var(--success-bg); border-color: var(--ok-border); border-left-color: var(--success); color: var(--ok-ink); }
.alert--error   { background: var(--danger-bg);  border-color: var(--bad-border); border-left-color: var(--danger);  color: var(--bad-ink); }
.alert--warning { background: var(--warning-bg); border-color: var(--warn-border); border-left-color: var(--warning); color: var(--warn-ink); }
.alert--info    { background: var(--navy-50);    border-color: var(--navy-200); border-left-color: var(--primary); color: var(--navy-800); }

.badge {
    display: inline-block;
    padding: 2px var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    line-height: 1.5;
    white-space: nowrap;
}

.badge--success { background: var(--success-bg); border-color: var(--ok-border);        color: var(--success); }
.badge--danger  { background: var(--danger-bg);  border-color: var(--bad-border);        color: var(--danger); }
.badge--warning { background: var(--warning-bg); border-color: var(--warn-border);        color: var(--warning); }
.badge--info    { background: var(--navy-50);    border-color: var(--navy-200); color: var(--navy-700); }
.badge--neutral { background: var(--canvas);     border-color: var(--line);    color: var(--ink-soft); }

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
    /* CAJÓN LATERAL, no tira horizontal.

       Antes el menú se convertía en una fila con scroll lateral y, para que
       cupiera, ocultaba .sidebar__section: los seis separadores —Catálogo,
       Logística, Recolección, Calidad, Finanzas, Sistema— desaparecían y
       quedaban diecisiete enlaces seguidos que había que arrastrar para
       encontrar. Perder la agrupación es perder justo lo que hace navegable un
       menú de diecisiete entradas.

       Como cajón conserva el orden, los grupos y el pie con el evento activo, y
       no le roba altura permanente al contenido. */
    .app-shell { padding-left: 0; }

    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 60;
        width: min(300px, 84vw);
        padding-top: var(--space-4);
        border-right: 1px solid var(--line);
        box-shadow: var(--shadow-lg);
        transform: translateX(-100%);
        transition: transform var(--base) var(--ease);
    }

    .app-shell.is-nav-open .sidebar { transform: none; }

    /* Velo: cierra al tocar fuera y separa el cajón del contenido. */
    .nav-scrim {
        position: fixed;
        inset: 0;
        z-index: 50;
        background: var(--scrim);
        border: 0;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--base) var(--ease);
    }

    .app-shell.is-nav-open .nav-scrim { opacity: 1; pointer-events: auto; }

    .nav-toggle { display: inline-flex; }

    .form__row,
    .setting { grid-template-columns: 1fr; }

    .content { padding: var(--space-4); }


    /* Tablas: scroll horizontal propio, el cuerpo nunca scrollea en horizontal */
    /* Aquí la tabla pasa a ser ELLA el contenedor con scroll, así que también
       tiene que ser el bloque contenedor de sus descendientes absolutos.
       Ver la nota de `.table-wrap`. */
    .table { position: relative; display: block; overflow-x: auto; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------------------
   Iconos (sprite Lucide, ver database/build_icons.php)

   Trazo, no relleno: heredan el color del texto y se alinean con la línea
   base sin trucos. Un icono nunca sustituye a la etiqueta de texto en una
   acción crítica: la acompaña.
   --------------------------------------------------------------------------- */
.ico {
    display: inline-block;
    flex: none;
    vertical-align: -0.18em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.btn .ico          { margin-right: var(--space-2); }
.btn--icon .ico    { margin-right: 0; }
.sidebar__link .ico{ margin-right: var(--space-3); opacity: .75; }
.sidebar__link.is-active .ico { opacity: 1; }

/* ---------------------------------------------------------------------------
   Bloque explicativo (pantalla de modificadores)

   Enseña el modelo mientras se usa. Abierto por defecto cuando no hay nada
   configurado; plegado en cuanto el producto ya tiene grupos.
   --------------------------------------------------------------------------- */
.explain {
    margin-bottom: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.explain > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: var(--space-4) var(--space-4);
    font-weight: 650;
    cursor: pointer;
    list-style: none;
}

.explain > summary::-webkit-details-marker { display: none; }
.explain__body { padding: 0 var(--space-4) var(--space-4); }

.explain__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
    margin: var(--space-4) 0;
}

.explain__card {
    padding: var(--space-4) var(--space-4);
    background: var(--canvas);
    border-radius: var(--radius);
}

.explain__card h3 {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--text-md);
    margin-bottom: var(--space-2);
}

.explain__card p  { margin: 0 0 var(--space-2); font-size: var(--text-base); color: var(--ink-soft); }
.explain__eg      { font-size: var(--text-sm) !important; }
.explain__eg em   { color: var(--ink); font-style: normal; font-weight: 600; }

.explain__rule {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--info-bg);
    border-radius: var(--radius);
    font-size: var(--text-base);
    color: var(--info-ink);
}

/* --- Selector de tipo de grupo --- */
.groupform__title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--text-md);
    margin-bottom: var(--space-4);
}

.typepick {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: var(--gap);
}

.typepick__opt {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    cursor: pointer;
}

.typepick__opt { transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.typepick__opt:hover { background: var(--navy-50); border-color: var(--navy-300); }

.typepick__opt:has(input:checked) {
    border-color: var(--primary);
    background: var(--navy-50);
    box-shadow: inset 0 0 0 1px var(--primary);
}

.typepick__opt input  { margin-top: 3px; flex: none; }
.typepick__opt span   { display: flex; flex-direction: column; gap: 3px; }
.typepick__opt strong { display: flex; align-items: center; gap: 6px; font-size: var(--text-md); }
.typepick__opt small  { color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.4; }

.form__row--4 { grid-template-columns: repeat(4, 1fr); }

.check--inline { max-width: 420px; margin-bottom: var(--gap); }

/* --- Grupo ya configurado --- */
.modgroup .panel__head h2 { display: flex; align-items: center; gap: 8px; }
.modgroup__rules { margin-left: auto; font-size: var(--text-sm); color: var(--ink-soft); }
.modgroup__help  { display: flex; align-items: center; gap: 6px; margin: -6px 0 var(--space-3); }

.ico.ok { color: var(--success); }

@media (max-width: 900px) {
    .form__row--4 { grid-template-columns: 1fr 1fr; }
}

/* Aviso del código autogenerado en el formulario de producto */
.code-hint {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: -6px 0 var(--gap);
    padding: var(--space-2) var(--space-3);
    background: var(--canvas);
    border-radius: var(--radius);
}
.code-hint code { font-weight: 650; color: var(--ink); }
/* ===========================================================================
   PANTALLAS OPERATIVAS

   Lo que sigue eran ocho bloques minificados —uno por "Fase"— añadidos al final
   de esta hoja sin volver a mirar los anteriores. Entre los ocho sumaban 141
   colores escritos a mano, cuatro familias de gris de borde y tres escalas de
   texto distintas para la misma idea.

   Aquí siguen siendo ocho secciones, pero ya no son ocho sistemas: todos los
   valores salen de tokens.css. Si un color de estos hace falta en otra
   pantalla, se usa el token; si hace falta uno nuevo, se añade allí.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Recolección móvil

   Se usa de pie, en un pasillo, con una mano. Objetivos táctiles grandes y
   nada por debajo de --text-xs.
   --------------------------------------------------------------------------- */

/* Barra de conexión: sangra hasta el borde del contenido, por eso el margen
   negativo iguala al relleno de .content en móvil. */
.collection-net {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--warn-border);
    color: var(--warn-ink);
}

.collection-net[hidden]        { display: none; }
.collection-net span           { flex: 1; }
.collection-net--syncing       { background: var(--navy-100); color: var(--info-ink); }
.collection-net--failed        { background: var(--bad-border); color: var(--bad-ink); }
.collection-net--online        { background: var(--ok-border); color: var(--ok-ink); }

.collection-head { align-items: flex-start; }

.collection-presence        { display: flex; align-items: center; gap: var(--space-2); }
.collection-presence__state { font-size: var(--text-xs); letter-spacing: .05em; }

.collection-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.collection-orders { display: grid; gap: var(--space-4); }

.collection-order {
    overflow: hidden;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--sheet);
}

/* La cabecera oscura es la que dice "este pedido es tuyo ahora". */
.collection-order__head {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--brand-deep);
    color: var(--on-brand);
}

.collection-order__head h2 { margin: var(--space-1) 0 0; font-size: var(--text-md); color: var(--dark-ink); }

.collection-order__code {
    color: var(--dark-accent);
    font-family: var(--font-num);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
}

.collection-clock        { text-align: right; }
.collection-clock span   { display: block; color: var(--dark-ink-soft); font-size: var(--text-xs); text-transform: uppercase; }
.collection-clock strong { font-family: var(--font-num); font-size: var(--text-lg); font-variant-numeric: tabular-nums; }

.collection-funds {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--line);
}

.collection-funds div            { padding: var(--space-3); border-right: 1px solid var(--line); text-align: center; }
.collection-funds div:last-child { border-right: 0; }
.collection-funds span           { display: block; color: var(--ink-soft); font-size: var(--text-xs); }
.collection-funds strong         { font-family: var(--font-num); font-size: var(--text-base); font-weight: var(--weight-semi); }

/* La guía dice el SIGUIENTE PASO. Es lo único de la pantalla que da una orden,
   así que se distingue por franja izquierda además de por color. */
.collection-guide {
    padding: var(--space-4);
    border-bottom: 1px solid var(--line);
    background: var(--info-bg);
    color: var(--info-ink);
}

.collection-guide--warning { border-left: 3px solid var(--wait); background: var(--wait-bg); color: var(--wait-ink); }
.collection-guide--success { border-left: 3px solid var(--done); background: var(--done-bg); color: var(--done-ink); }

.collection-guide__step {
    margin: 0 0 var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    opacity: .8;
}

.collection-guide h3 { margin: 0 0 var(--space-1); font-size: var(--text-md); }
.collection-guide > p:not(.collection-guide__step) { margin: var(--space-1) 0; line-height: 1.45; }

.collection-guide__track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-1);
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
}

.collection-guide__track li {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    opacity: .62;
}

.collection-guide__track li span {
    display: grid;
    place-items: center;
    flex: 0 0 22px;
    width: 22px; height: 22px;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-size: var(--text-xs);
}

.collection-guide__track li.is-done,
.collection-guide__track li.is-current { opacity: 1; }

.collection-guide__track li.is-current span {
    background: currentColor;
    color: var(--surface);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .7);
}

.collection-guide--warning .collection-guide__track li.is-current span { border-color: var(--warn); background: var(--warn); color: var(--surface); }
.collection-guide--success .collection-guide__track li.is-current span { border-color: var(--ok);   background: var(--ok);   color: var(--surface); }

.collection-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
}

.collection-notice--funds,
.collection-notice--wait   { background: var(--warn-bg); color: var(--warn-ink); }
.collection-notice--danger { background: var(--bad-bg);  color: var(--bad-ink); }

.collection-stand          { padding: var(--space-4); border-bottom: 1px solid var(--line); }
.collection-stand > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.collection-stand h3       { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-base); }
.collection-stand > header > strong { color: var(--ink-soft); font-size: var(--text-sm); }

.collection-items { display: grid; gap: var(--space-2); }

.collection-item {
    border: 1px solid var(--rule);
    border-left: 3px solid var(--rule-strong);
    border-radius: var(--radius);
    background: var(--sheet);
}

.collection-item--agotado      { border-color: var(--lost-rule); border-left-color: var(--lost); background: var(--lost-bg); }
.collection-item--recolectado  { border-color: var(--done-rule); border-left-color: var(--done); background: var(--done-bg); }

.collection-item__main {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-3);
    align-items: start;
    padding: var(--space-3);
}

.collection-item__qty {
    display: grid;
    place-items: center;
    min-width: 34px; height: 34px;
    border-radius: var(--radius-sm);
    background: var(--brand);
    color: var(--on-brand);
    font-family: var(--font-num);
    font-size: var(--text-md);
    font-weight: var(--weight-semi);
}

.collection-item__main strong { display: block; }
.collection-item__cost        { color: var(--ink-soft); font-size: var(--text-sm); font-weight: var(--weight-bold); white-space: nowrap; }

.collection-modifier,
.collection-note        { display: block; margin-top: var(--space-1); color: var(--ink-soft); font-size: var(--text-sm); }
.collection-modifier    { font-weight: var(--weight-semi); }
.collection-note--danger{ color: var(--bad); }

.collection-item__actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-2);
    padding: 0 var(--space-3) var(--space-3);
}

.collection-item__actions .btn { min-height: var(--touch-md); }

.collection-item__confirmed {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0 var(--space-3) var(--space-3);
    color: var(--ok-ink);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
}

.collection-send            { width: calc(100% - var(--space-6)); margin: var(--space-4); min-height: var(--touch-lg); }
.collection-send:disabled   { opacity: .45; }

.collection-empty        { padding: var(--space-6) var(--space-4); text-align: center; }
.collection-empty__icon  {
    display: inline-grid;
    place-items: center;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--info-bg);
    color: var(--primary);
}

/* Bloque de artículos agotados pendientes de resolver, en el tablero. */
.collection-soldout,
.collection-exceptions { display: grid; gap: var(--space-2); }

.is-sending { opacity: .7; pointer-events: none; }

@media (max-width: 640px) {
    .collection-head        { display: block; }
    .collection-presence    { margin-top: var(--space-2); justify-content: space-between; }
    .collection-funds strong{ font-size: var(--text-sm); }
    .collection-notice      { flex-direction: column; align-items: flex-start; }
    .collection-notice .btn { width: 100%; }
    .collection-item__actions   { grid-template-columns: 1fr; }
    .collection-guide__track    { grid-template-columns: 1fr 1fr; }
    .collection-guide           { padding: var(--space-3); }
    .collection-guide h3        { font-size: var(--text-base); }
}

/* ---------------------------------------------------------------------------
   Zonas de entrega y mapas
   --------------------------------------------------------------------------- */
.zone-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.zone-summary .is-warning { border-color: var(--warn-border); background: var(--warn-bg); }

.zone-operations { margin-bottom: var(--space-4); }

.zone-map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: var(--space-4); }

.zone-map {
    min-height: 480px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--canvas);
}

.zone-map--editor      { min-height: 560px; }
.zone-map--unavailable { display: grid; place-items: center; padding: var(--space-5); color: var(--ink-soft); text-align: center; }

.zone-legend        { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3) var(--space-1); }
.zone-legend span   { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-base); }
.zone-legend i {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--legend);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--legend) 20%, transparent);
}
.zone-legend p { margin: var(--space-2) 0 0; color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.45; }

.zone-form { display: grid; grid-template-columns: minmax(340px, 430px) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.zone-form__map-panel { position: sticky; top: var(--space-4); }
/* Herramienta de dibujo del polígono, sobre el mapa del editor. */
.zone-draw { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }

.zone-coords { font-family: var(--font-mono); font-size: var(--text-xs); }

.map-dot {
    display: block;
    width: 18px; height: 18px;
    border: 3px solid var(--surface);
    border-radius: 50%;
    background: var(--dot);
    box-shadow: var(--shadow-lg);
}

@media (max-width: 1000px) {
    .zone-form            { grid-template-columns: 1fr; }
    .zone-form__map-panel { position: static; }
    .zone-map--editor     { min-height: 420px; }
    .zone-summary         { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
    .zone-map-layout { grid-template-columns: 1fr; }
    .zone-map        { min-height: 380px; }
    .zone-legend     { display: grid; grid-template-columns: 1fr 1fr; }
    .zone-legend strong, .zone-legend p { grid-column: 1 / -1; }
    .zone-summary    { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------------------
   Rutas y repartidores
   --------------------------------------------------------------------------- */
.route-rules        { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.route-rules span   {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink-soft);
    font-size: var(--text-sm);
}
.route-rules strong { color: var(--ink); }

.route-map-panel  { margin-bottom: var(--space-4); }
.route-map-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-3); color: var(--ink-soft); font-size: var(--text-sm); }
.route-map-legend span { display: flex; align-items: center; gap: var(--space-2); }
.route-map-legend i    { width: 12px; height: 12px; border-radius: 50%; background: var(--route); }

.route-table td      { vertical-align: top; }
.route-table details { margin-top: var(--space-2); }
.route-table summary { color: var(--primary); cursor: pointer; font-size: var(--text-sm); font-weight: var(--weight-bold); }

.route-stop-list {
    display: grid;
    gap: var(--space-2);
    min-width: 350px;
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
}

.route-stop-list li { display: grid; grid-template-columns: 26px 1fr auto; gap: var(--space-2); align-items: start; white-space: normal; }

.route-stop-list li > span,
.delivery-stop__number {
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    border-radius: var(--radius-sm);
    background: var(--brand);
    color: var(--on-brand);
    font-family: var(--font-num);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
}

.route-stop-list small { display: block; color: var(--ink-soft); line-height: 1.35; }

.delivery-route-head { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-bottom: var(--space-3); }

.delivery-route-map { min-height: 390px; margin: var(--space-4) 0; }

.delivery-stops        { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.delivery-stops li     { display: grid; grid-template-columns: 36px 1fr; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--rule); border-left: 3px solid var(--rule-strong); border-radius: var(--radius); background: var(--sheet); }
.delivery-stops p      { margin: var(--space-1) 0; color: var(--ink-soft); }
.delivery-stops small  { font-weight: var(--weight-bold); }

@media (max-width: 700px) {
    .route-summary       { grid-template-columns: 1fr 1fr; }
    .delivery-route-head { grid-template-columns: 1fr 1fr; }
    .route-stop-list     { min-width: 260px; }
    .delivery-route-map  { min-height: 340px; }
}

/* ---------------------------------------------------------------------------
   Entrega y cobro

   Se opera en la calle, con una mano y a veces con guantes: las acciones no
   bajan de --touch-md.
   --------------------------------------------------------------------------- */
.delivery-no-route {
    max-width: 620px;
    margin: var(--space-6) auto;
    padding: var(--space-6);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.delivery-no-route h2  { margin: var(--space-3) 0 var(--space-1); }
.delivery-no-route > p { color: var(--ink-soft); }

.delivery-cash-card {
    display: grid;
    gap: var(--space-1);
    margin-top: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--dark-canvas);
    color: var(--dark-ink);
    text-align: left;
}

.delivery-cash-card span,
.delivery-cash-card small  { color: var(--dark-ink-soft); }
.delivery-cash-card strong { font-family: var(--font-num); font-size: var(--num-xl); font-variant-numeric: tabular-nums; }

.delivery-stops--interactive { counter-reset: stops; }
.delivery-stop        { position: relative; }
.delivery-stop__body  { min-width: 0; }
.delivery-stop__title { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.delivery-stop__title > strong { overflow-wrap: anywhere; }

.delivery-stop__facts   { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); margin: var(--space-3) 0; }
.delivery-stop__facts a { display: flex; align-items: center; gap: var(--space-1); color: var(--primary); font-weight: var(--weight-bold); }
.delivery-stop__facts .ico { width: 17px; height: 17px; }

/* El estado de la parada se codifica por color de borde: se distingue de un
   vistazo cuál está abierta sin leer la etiqueta. */
/* El estado va en la franja izquierda: se recorre la lista con el pulgar y el
   borde llega antes que la etiqueta. */
.delivery-stop--en_camino,
.delivery-stop--en_sitio   { border-left-color: var(--wait) !important; background: var(--wait-bg) !important; }
.delivery-stop--completada { border-left-color: var(--done) !important; background: var(--done-bg) !important; }
.delivery-stop--fallida    { border-left-color: var(--lost) !important; background: var(--lost-bg) !important; }

.delivery-stop__actions       { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.delivery-stop__actions .btn  { min-height: var(--touch-md); }

.delivery-arrived {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-1) var(--space-3);
    margin-top: var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius);
    background: var(--warn-bg);
    color: var(--warn-ink);
}

.delivery-arrived small { grid-column: 1 / -1; font-weight: var(--weight-normal); }
.delivery-arrived [data-wait-timer]        { font-variant-numeric: tabular-nums; font-weight: var(--weight-bold); }
.delivery-arrived [data-wait-timer].is-due { color: var(--bad); }

.delivery-payment {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--canvas);
}

.delivery-payment h3 { margin: 0; }
.delivery-payment label,
.delivery-failure label { display: grid; gap: var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.delivery-payment .input,
.delivery-failure .input { width: 100%; }

.delivery-calculator          { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.delivery-calculator > div    { padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.delivery-calculator span     { display: block; color: var(--ink-soft); font-size: var(--text-xs); }
.delivery-calculator strong   { display: block; margin-top: var(--space-1); font-family: var(--font-num); font-size: var(--text-md); font-weight: var(--weight-semi); }
.delivery-calculator [data-shortage-row] { border-color: var(--bad-border); background: var(--bad-bg); color: var(--bad-ink); }
.delivery-calculator [hidden] { display: none; }

.delivery-failure {
    margin-top: var(--space-3);
    border: 1px solid var(--bad-border);
    border-radius: var(--radius-lg);
    background: var(--bad-bg);
}

.delivery-failure > summary { padding: var(--space-3) var(--space-4); color: var(--bad-ink); font-weight: var(--weight-bold); cursor: pointer; }
.delivery-failure form      { display: grid; gap: var(--space-3); padding: 0 var(--space-4) var(--space-4); }

.delivery-result           { display: grid; gap: var(--space-1); margin-top: var(--space-3); padding: var(--space-3); border-radius: var(--radius); }
.delivery-result--success  { background: var(--ok-bg);  color: var(--ok-ink); }
.delivery-result--danger   { background: var(--bad-bg); color: var(--bad-ink); }

/* Acotado a la pantalla de reparto: como regla global imponía 50 px de alto a
   TODOS los botones de bloque de la aplicación, incluidos los de error. */
.delivery-stop .btn--block,
.delivery-failure .btn--block { min-height: var(--touch-md); }

@media (max-width: 700px) {
    .delivery-stops--interactive li { grid-template-columns: 30px minmax(0, 1fr); padding: var(--space-3); }
    .delivery-stop__title  { display: grid; gap: var(--space-1); }
    .delivery-stop__facts  { display: grid; }
    .delivery-calculator   { grid-template-columns: 1fr 1fr; }
    .delivery-route-head strong { font-size: var(--text-md); }
    .delivery-no-route     { margin: var(--space-4) auto; padding: var(--space-4); }
    .delivery-payment      { padding: var(--space-3); }
}

/* ---------------------------------------------------------------------------
   Caja General y liquidaciones
   --------------------------------------------------------------------------- */
.cashbox-head   { align-items: flex-start; }
.cashbox-status { display: flex; align-items: center; gap: var(--space-2); }
.cashbox-stats  { margin-bottom: var(--space-4); }

/* Bandejas: ocho tareas distintas de Caja, una a la vez. */
.cashbox-trays {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    margin: var(--space-4) 0;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--sheet);
}

.cashbox-trays button {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--touch-md);
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-left: 1px solid var(--rule);
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--ink-2);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-align: left;
    cursor: pointer;
}

.cashbox-trays button:nth-child(4n+1) { border-left: 0; }
.cashbox-trays button:hover { background: var(--brand-faint); }

.cashbox-trays button > span {
    display: grid;
    place-items: center;
    width: 20px; height: 20px;
    border-radius: var(--radius-sm);
    background: var(--paper);
    color: var(--ink-3);
    font-family: var(--font-num);
    font-size: var(--text-xs);
}

.cashbox-trays button > strong {
    min-width: 22px;
    color: var(--ink);
    font-family: var(--font-num);
    font-size: var(--text-md);
    text-align: right;
}

.cashbox-trays button[aria-selected=true] { border-bottom-color: var(--brand); background: var(--brand-faint); color: var(--brand-deep); font-weight: var(--weight-semi); }
.cashbox-trays button[aria-selected=true] > span { background: var(--brand); color: var(--on-brand); }

.cashbox-tray[hidden] { display: none; }

.settlement-driver-list,
.settlement-list { display: grid; gap: var(--space-3); padding: var(--space-3); }

.settlement-driver,
.settlement-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.settlement-driver h3, .settlement-row h3 { margin: var(--space-1) 0; }
.settlement-driver p,  .settlement-row p  { margin: var(--space-1) 0; color: var(--ink-soft); }

.settlement-driver__amount { text-align: right; }
.settlement-driver__amount > span,
.settlement-row > div > span   { display: block; color: var(--ink-soft); font-size: var(--text-xs); }
.settlement-driver__amount > strong,
.settlement-row > div > strong { display: block; margin: var(--space-1) 0 var(--space-3); font-size: var(--num-lg); font-variant-numeric: tabular-nums; }

.settlement-order-chips      { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.settlement-order-chips span { padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); background: var(--surface-soft); font-size: var(--text-xs); font-weight: var(--weight-bold); }

.settlement-row         { grid-template-columns: minmax(180px, 1fr) minmax(110px, .35fr) minmax(130px, .4fr) auto; }
.settlement-row.is-open { border-left: 4px solid var(--warn); }

.settlement-dialog {
    width: min(520px, calc(100% - var(--space-5)));
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-dialog);
}

.settlement-dialog::backdrop { background: var(--scrim); }
.settlement-dialog form      { display: grid; gap: var(--space-3); padding: var(--space-5); }
.settlement-dialog label     { display: grid; gap: var(--space-1); color: var(--ink-soft); font-size: var(--text-sm); font-weight: var(--weight-bold); }

.dialog-head    { display: flex; align-items: start; justify-content: space-between; gap: var(--space-4); }
.dialog-head h2 { margin: var(--space-1) 0; }

.settlement-count        { padding: var(--space-4); border-radius: var(--radius); background: var(--navy-50); text-align: center; }
.settlement-count span   { display: block; color: var(--ink-soft); }
.settlement-count strong { display: block; margin-top: var(--space-1); font-size: var(--num-xl); font-variant-numeric: tabular-nums; }

.settlement-difference          { padding: var(--space-3); border-radius: var(--radius); font-weight: var(--weight-bold); text-align: center; }
.settlement-difference.is-exact { background: var(--ok-bg);   color: var(--ok-ink); }
.settlement-difference.is-short { background: var(--bad-bg);  color: var(--bad-ink); }
.settlement-difference.is-over  { background: var(--warn-bg); color: var(--warn-ink); }

.custody-blockers    { display: grid; gap: var(--space-2); margin: var(--space-3) var(--space-4); padding: 0; list-style: none; }
.custody-blockers li { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3); border-bottom: 1px solid var(--line); }

.cashbox-close-panel > p { margin: var(--space-4); }

.capital-injection > summary { padding: var(--space-3) var(--space-4); color: var(--primary); font-weight: var(--weight-bold); cursor: pointer; }
.capital-injection form      { padding: 0 var(--space-4) var(--space-4); }

@media (max-width: 900px) {
    .cashbox-trays  { grid-template-columns: repeat(2, 1fr); }
    .settlement-row { grid-template-columns: 1fr 1fr; }
    .settlement-row > .btn, .settlement-row > .badge { justify-self: start; }
}

@media (max-width: 620px) {
    .cashbox-trays        { display: flex; overflow-x: auto; }
    .cashbox-trays button { min-width: 180px; }
    .settlement-driver, .settlement-row { grid-template-columns: 1fr; }
    .settlement-driver__amount          { text-align: left; }
    .settlement-driver__amount > strong { font-size: var(--num-xl); }
}
/* ---------------------------------------------------------------------------
   Panel operativo y financiero

   Tres secciones para tres preguntas: qué hago ahora, dónde está todo, cuadra
   el dinero. Antes eran diez regiones para esas mismas tres.
   --------------------------------------------------------------------------- */
.dashboard-head { margin-bottom: var(--space-4); }

/* El latido del sondeo va al PIE, no encima del contenido: dice que los datos
   están frescos, y eso se consulta cuando se duda, no al entrar. */
.dashboard-live {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-5) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--rule);
    color: var(--ink-3);
    font-size: var(--text-xs);
}

.dashboard-live__dot  { width: 7px; height: 7px; border-radius: 50%; background: var(--done); }
.dashboard-live__meta { margin-left: auto; font-variant-numeric: tabular-nums; }

/* .now se retiró: la instrucción vive ahora dentro de .chain, atada a la fila
   que la produce. */

/* ---------------------------------------------------------------------------
   .tally — marcador

   Cifras que se comparan ENTRE SÍ, así que se leen en una línea separada por
   reglas y no en cinco tarjetas flotantes. Es el pie de una columna de libro:
   rótulo pequeño arriba, cifra tabular debajo.
   --------------------------------------------------------------------------- */
.tally {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    margin: var(--space-5) 0 0;
    padding: 0;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--sheet-alt);
}

.tally > div { padding: var(--space-3) var(--space-4); border-left: 1px solid var(--rule); }
.tally > div:first-child { border-left: 0; }

.tally dt       { color: var(--ink-2); font-size: var(--text-xs); line-height: 1.3; }
.tally dt small { display: block; margin-top: 1px; color: var(--ink-3); }

.tally dd {
    margin: var(--space-1) 0 0;
    color: var(--ink);
    font-family: var(--font-num);
    font-size: var(--num-lg);
    font-weight: var(--weight-semi);
    line-height: 1.1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.tally > div.is-bad dd { color: var(--lost); }
.tally__note { margin: var(--space-2) 0 0; color: var(--ink-3); font-size: var(--text-xs); }

/* Variante envolvente: cifras que no compiten por la misma comparación
   (tiempos por tramo, parametrización del evento). */
.tally--wrap       { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.tally--wrap > div { border-left: 1px solid var(--rule); border-top: 1px solid var(--rule); }
.tally--wrap dd    { font-size: var(--text-md); }

@media (max-width: 900px) {
    .tally { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
    .tally > div { border-left: 1px solid var(--rule); border-top: 1px solid var(--rule); }
    .tally > div:nth-child(odd)   { border-left: 0; }
    .tally > div:nth-child(-n+2)  { border-top: 0; }
}

/* ---------------------------------------------------------------------------
   .fold — detalle que se consulta, no que se vigila
   --------------------------------------------------------------------------- */
.fold { margin-top: var(--space-4); border-top: 1px solid var(--rule); }

.fold > summary {
    padding: var(--space-3) 0 0;
    color: var(--brand);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    cursor: pointer;
}

.fold > summary::marker { color: var(--ink-3); }
.fold .tally { margin-top: var(--space-3); }

.fold--dark           { border-top-color: var(--dark-rule); }
.fold--dark > summary { color: var(--dark-ink-2); }

/* .ledger se retiró: el efectivo vivo es una columna de .chain y el resultado
   del evento vive en .result. */

/* ---------------------------------------------------------------------------
   Incidencias y excepciones
   --------------------------------------------------------------------------- */
.incident-head  { align-items: flex-start; }
.incident-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin: var(--space-3) 0 var(--space-4); }

.incident-filters       { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: var(--space-3); align-items: end; padding: var(--space-3); }
.incident-filters label { display: grid; gap: var(--space-1); color: var(--ink-soft); font-size: var(--text-xs); font-weight: var(--weight-bold); }

.custody-exceptions,
.custody-exceptions__list { display: grid; gap: var(--space-2); padding: 0 var(--space-4) var(--space-4); }

.custody-exceptions__list article {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-3);
    border: 1px solid var(--warn-border);
    border-radius: var(--radius);
    background: var(--warn-bg);
}

.custody-exceptions__list article > div { display: grid; }
.custody-exceptions__list small         { margin-top: var(--space-1); color: var(--ink-soft); }

.incident-board { display: grid; gap: var(--space-3); }

.incident-card {
    overflow: hidden;
    border: 1px solid var(--rule);
    border-left: 3px solid var(--lost);
    border-radius: var(--radius);
    background: var(--sheet);
}

.incident-card.is-closed { border-left-color: var(--done); }
.incident-card.is-closed .incident-code { color: var(--ink-3); }
.incident-card > header  { display: flex; align-items: start; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); }
.incident-card h2 { margin: 2px 0 0; font-size: var(--text-md); text-transform: none; }

.incident-code { color: var(--lost); font-family: var(--font-num); font-size: var(--text-xs); font-weight: var(--weight-semi); }

.incident-card__facts        { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); }
.incident-card__facts        { background: var(--sheet-alt); }
.incident-card__facts span   { display: grid; padding: var(--space-2) var(--space-3); border-right: 1px solid var(--rule); color: var(--ink-2); font-size: var(--text-xs); }
.incident-card__facts span:last-child { border-right: 0; }
.incident-card__facts strong { margin-top: 1px; color: var(--ink); font-family: var(--font-num); font-size: var(--text-sm); font-weight: var(--weight-semi); }

.incident-reason { margin: 0; padding: var(--space-3) var(--space-4); line-height: 1.45; }

.incident-history          { border-top: 1px solid var(--line); }
.incident-history > summary { padding: var(--space-3) var(--space-4); color: var(--primary); font-size: var(--text-sm); font-weight: var(--weight-bold); cursor: pointer; }
.incident-history ol       { display: grid; gap: 0; margin: 0; padding: 0 var(--space-4) var(--space-3); list-style: none; }
.incident-history li       { display: grid; grid-template-columns: 12px 1fr; gap: var(--space-2); }
.incident-history li > span { position: relative; width: 9px; height: 9px; margin-top: var(--space-1); border-radius: 50%; background: var(--primary); }
.incident-history li > span::after { content: ''; position: absolute; top: 10px; bottom: -55px; left: 4px; width: 1px; background: var(--line); }
.incident-history li:last-child > span::after { display: none; }
.incident-history li div   { padding-bottom: var(--space-3); }
.incident-history p        { margin: 2px 0; color: var(--ink-soft); font-size: var(--text-sm); }
.incident-history small    { color: var(--ink-soft); font-size: var(--text-xs); }

.incident-actions          { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border-top: 1px solid var(--line); background: var(--line); }
.incident-actions form     { display: grid; gap: var(--space-2); padding: var(--space-4); background: var(--canvas); }
.incident-actions h3       { margin: 0; font-size: var(--text-base); }
.incident-actions form > div { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--space-2); }
.incident-actions textarea { min-height: 65px; }

.incident-dialog {
    width: min(560px, calc(100% - var(--space-5)));
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-dialog);
}

.incident-dialog::backdrop { background: var(--scrim); }
.incident-dialog form      { display: grid; gap: var(--space-3); padding: var(--space-5); }
.incident-dialog label     { display: grid; gap: var(--space-1); color: var(--ink-soft); font-size: var(--text-xs); font-weight: var(--weight-bold); }

.incident-retry {
    display: grid;
    gap: var(--space-2);
    margin: 0 var(--space-4) var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--warn-border);
    border-radius: var(--radius);
    background: var(--warn-bg);
}

.incident-retry > div   { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.incident-retry label   { display: grid; gap: var(--space-1); color: var(--ink-soft); font-size: var(--text-xs); font-weight: var(--weight-bold); }

.postpurchase-cancel           { border-color: var(--bad-border); }
.postpurchase-cancel > summary { padding: var(--space-4); color: var(--bad-ink); font-weight: var(--weight-bold); cursor: pointer; }
.postpurchase-cancel form      { display: grid; gap: var(--space-3); padding: 0 var(--space-4) var(--space-4); }
.postpurchase-cancel label     { display: grid; gap: var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-bold); }

.collection-exceptions__list       { display: grid; gap: var(--space-2); padding: 0 var(--space-4) var(--space-4); }
.collection-exceptions__list form  {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) 150px 100px minmax(180px, 1fr) minmax(180px, 1fr) auto;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.collection-exceptions__list form > div { display: grid; }
.collection-exceptions__list small      { margin-top: var(--space-1); color: var(--ink-soft); }

@media (max-width: 1100px) {
    .collection-exceptions__list form       { grid-template-columns: 1fr 1fr; }
    .collection-exceptions__list form > div { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .incident-actions      { grid-template-columns: 1fr; }
    .incident-filters      { grid-template-columns: 1fr 1fr; }
    .incident-stats        { grid-template-columns: 1fr 1fr; }
    .incident-card__facts  { grid-template-columns: 1fr 1fr; }
    .custody-exceptions__list article { grid-template-columns: 1fr auto; }
    .custody-exceptions__list .btn    { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .incident-stats, .incident-filters, .incident-card__facts { grid-template-columns: 1fr 1fr; }
    .incident-actions form > div { grid-template-columns: 1fr; }
    .incident-head .btn          { width: 100%; }
    .incident-retry > div        { grid-template-columns: 1fr; }
    .collection-exceptions__list form { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Auditoría
   --------------------------------------------------------------------------- */
.audit-head         { align-items: flex-start; }
.audit-total { min-width: 150px; text-align: right; }

.audit-filters       { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: var(--space-3); align-items: end; margin-bottom: var(--space-4); padding: var(--space-4); }
.audit-filters label { display: grid; gap: var(--space-1); color: var(--ink-soft); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.audit-search        { grid-column: span 2; }
.audit-filter-actions{ display: flex; gap: var(--space-2); }

/* Sin separación entre asientos: es un libro corrido, y el hilo entre filas
   basta para separarlos. La separación en tarjetas hacía parecer que cada
   apunte era un objeto suelto y no una línea del mismo registro. */
.audit-list  { display: grid; }
.audit-list > .audit-entry + .audit-entry { border-top: 0; border-radius: 0; }
.audit-list > .audit-entry:first-child:not(:last-child) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.audit-list > .audit-entry:last-child:not(:first-child) { border-top-left-radius: 0; border-top-right-radius: 0; }
.audit-entry { overflow: hidden; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--sheet); }
.audit-entry > header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); }

.audit-entry__identity      { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.audit-entry__identity > div{ display: grid; min-width: 0; }
.audit-entry__identity small{ margin-top: var(--space-1); color: var(--ink-soft); font-size: var(--text-xs); }

.audit-entry__icon { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--brand-faint); color: var(--brand); }

.audit-entry__tags      { display: flex; align-items: center; gap: var(--space-2); }
.audit-entry__tags code { padding: 1px var(--space-2); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink-2); font-family: var(--font-num); font-size: var(--text-xs); }

.audit-entry__context        { display: grid; grid-template-columns: minmax(140px, .7fr) minmax(120px, .5fr) 2fr; border-top: 1px solid var(--line); background: var(--surface-alt); }
.audit-entry__context span   { display: grid; min-width: 0; padding: var(--space-2) var(--space-4); border-right: 1px solid var(--line); }
.audit-entry__context span:last-child { border: 0; }
.audit-entry__context small  { color: var(--ink-soft); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em; }
.audit-entry__context strong { margin-top: var(--space-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); }

.audit-entry__detail         { border-top: 1px solid var(--line); }
.audit-entry__detail summary { padding: var(--space-2) var(--space-4); color: var(--primary); font-size: var(--text-xs); font-weight: var(--weight-bold); cursor: pointer; }

.audit-diff         { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border-top: 1px solid var(--line); background: var(--line); }
.audit-diff section { min-width: 0; padding: var(--space-3); background: var(--surface-alt); }
.audit-diff h3      { margin: 0 0 var(--space-2); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em; }
.audit-diff pre {
    max-height: 300px;
    margin: 0;
    padding: var(--space-3);
    overflow: auto;
    border-radius: var(--radius);
    background: var(--dark-surface);
    color: var(--navy-100);
    font: var(--text-xs)/1.5 var(--font-mono);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.pagination      { display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-5); }
.pagination span { color: var(--ink-soft); font-size: var(--text-xs); font-weight: var(--weight-bold); }

@media (max-width: 900px) {
    .audit-filters       { grid-template-columns: repeat(2, 1fr); }
    .audit-diff          { grid-template-columns: 1fr; }
    .audit-entry__context{ grid-template-columns: 1fr 1fr; }
    .audit-agent         { grid-column: 1 / -1; border-top: 1px solid var(--line); }
}

@media (max-width: 560px) {
    .audit-head   { display: grid; }
    .audit-total  { width: 100%; text-align: left; }
    .audit-filters{ grid-template-columns: 1fr; }
    .audit-search { grid-column: auto; }
    .audit-filter-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .audit-entry > header { align-items: flex-start; flex-direction: column; }
    .audit-entry__context { grid-template-columns: 1fr; }
    .audit-agent          { grid-column: auto; }
    .audit-entry__context span { border-right: 0; border-top: 1px solid var(--line); }
}
@media(max-width:560px){.audit-head{display:grid}.audit-total{width:100%;text-align:left}.audit-filters{grid-template-columns:1fr}.audit-search{grid-column:auto}.audit-filter-actions{display:grid;grid-template-columns:1fr 1fr}.audit-entry>header{align-items:flex-start;flex-direction:column}.audit-entry__context{grid-template-columns:1fr}.audit-agent{grid-column:auto}.audit-entry__context span{border-right:0;border-top:1px solid var(--line)}}

/* ===========================================================================
   LENGUAJE GRÁFICO
   Ver docs/UI_UX.md §2.

   El sistema se entendía si ya sabías cómo funciona. Estas primitivas existen
   para que lo entienda quien lo ve por primera vez, que es el caso real: el
   personal de un evento es voluntario y se entrena el mismo día.

   Siguen valiendo las reglas de siempre: SIN degradados, SIN sombras de
   relieve, radios de 4 a 10 px. Lo que da "forma" no es el relieve — son los
   diagramas, los números, los conectores y el color con significado.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Marca configurable

   El logo sale de Configuración; si no hay, se pintan las iniciales. Las dos
   variantes ocupan exactamente la misma caja para que la barra no salte
   cuando el administrador sube uno.
   --------------------------------------------------------------------------- */
.brandmark,
.auth-brand__mark,
.brand-preview__mark {
    display: grid;
    place-items: center;
    flex: none;
    border-radius: var(--radius-sm);
    background: var(--surface);
    object-fit: contain;
}

/* Las variantes de imagen NO son rejilla: `place-items` sobre un <img> no
   hace nada útil y estorba al `object-fit`. */
img.brandmark,
img.auth-brand__mark,
img.brand-preview__mark { display: block; }

/* .flowsteps se retiró: el recorrido lo lleva .chain, que además dice de quién
   depende cada etapa y cuánto dinero conserva. */

/* ---------------------------------------------------------------------------
   Marca configurable

   El logo sale de Configuración; si no hay, se pintan las iniciales. Las dos
   variantes ocupan exactamente la misma caja para que la barra no salte
   cuando el administrador sube uno.
   --------------------------------------------------------------------------- */
.brandmark,
.auth-brand__mark,
.brand-preview__mark {
    display: grid;
    place-items: center;
    flex: none;
    border-radius: var(--radius-sm);
    background: var(--surface);
    object-fit: contain;
}

/* Las variantes de imagen NO son rejilla: `place-items` sobre un <img> no
   hace nada útil y estorba al `object-fit`. */
img.brandmark,
img.auth-brand__mark,
img.brand-preview__mark { display: block; }


/* .guide, .statcard y .statgrid--cards se retiraron con el rediseño del panel:
   la instrucción la da ahora .now y el marcador lo lleva .tally. */

/* .figure se retiró: lo que hacía lo hacen ahora .metric y .statcard. */

/* ---------------------------------------------------------------------------
   Estado vacío ilustrado

   "No hay datos" deja al operador parado. Un estado vacío útil dice qué
   falta y ofrece el botón que lo resuelve.
   --------------------------------------------------------------------------- */
.empty--illustrated { padding: var(--space-6) var(--space-5); }

.empty__ico {
    display: grid;
    place-items: center;
    width: 64px; height: 64px;
    margin: 0 auto var(--space-4);
    border-radius: 50%;
    background: var(--navy-50);
    color: var(--navy-400);
}

.empty--illustrated h2 { font-size: var(--text-lg); }
.empty--illustrated p  { max-width: 46ch; margin: var(--space-2) auto var(--space-4); color: var(--ink-soft); font-size: var(--text-base); }

/* ===========================================================================
   ACCESO — vista dividida
   =========================================================================== */
/* Sólo el acceso partido. Antes esto redeclaraba .auth-body a secas y ganaba
   por orden, con lo que las cuatro páginas de error —que comparten esa clase y
   pintan una .auth-card blanca— quedaban blanco sobre blanco. */
.auth-body--split { background: var(--surface); }

.auth-split {
    display: grid;
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    min-height: 100dvh;
}

/* Navy sólido. Sin degradado: la identidad la da el color, no el efecto. */
.auth-brand {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: var(--space-6) var(--space-6);
    background: var(--navy-900);
    color: var(--on-primary);
}

.auth-brand__top { display: flex; align-items: center; gap: 14px; }

.auth-brand__mark {
    width: 64px; height: 64px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .12);
    color: var(--on-primary);
    font-size: var(--text-xl);
    font-weight: 700;
}
/* En el acceso el logo es lo primero que se ve y hay sitio de sobra: se le
   da altura de verdad. Sin fondo ni recuadro, igual que en la barra. */
img.auth-brand__mark {
    width: auto;
    height: 104px;
    max-width: 260px;
    padding: 0;
    background: none;
    border-radius: 0;
    object-fit: contain;
}

.auth-brand__name    { margin: 0; font-size: var(--text-xl); font-weight: 700; letter-spacing: -.02em; }
.auth-brand__tagline { margin: 2px 0 0; color: var(--navy-200); font-size: var(--text-base); }

.auth-brand__points { list-style: none; margin: auto 0; padding: 0; display: grid; gap: 22px; }

.auth-brand__points li { display: flex; align-items: flex-start; gap: 14px; }
.auth-brand__points .ico { flex: none; margin-top: 2px; color: var(--navy-300); }
.auth-brand__points span { display: block; color: var(--navy-200); font-size: var(--text-sm); line-height: 1.5; }
.auth-brand__points strong { display: block; margin-bottom: 2px; color: var(--on-primary); font-size: var(--text-md); font-weight: 650; }

.auth-brand__foot { margin: 0; color: var(--navy-300); font-size: var(--text-xs); }

/* --- Columna del formulario --- */
.auth-form { display: grid; place-items: center; padding: var(--space-6) var(--space-6); }
.auth-form__inner { width: 100%; max-width: 380px; }

.auth-head { margin-bottom: var(--space-5); }
.auth-head h1 { font-size: var(--text-xl); }
.auth-head .muted { margin: var(--space-2) 0 0; }

/* Acceso alternativo: una fila con icono, no un enlace perdido en un párrafo. */
.auth-alt {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: var(--space-5);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-alt);
    color: var(--ink);
    text-decoration: none;
    transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}

.auth-alt:hover { border-color: var(--navy-300); background: var(--navy-50); text-decoration: none; }
.auth-alt > .ico:first-child { flex: none; color: var(--primary); }
.auth-alt > .ico:last-child  { flex: none; margin-left: auto; color: var(--ink-faint); }
.auth-alt span   { display: block; font-size: var(--text-sm); color: var(--ink-soft); }
.auth-alt strong { display: block; font-size: var(--text-base); color: var(--ink); }

/* En móvil el operador entra a trabajar, no a leer beneficios: el panel de
   marca se reduce a una franja con logo y nombre. */
@media (max-width: 900px) {
    .auth-split { grid-template-columns: 1fr; min-height: 100dvh; }
    .auth-brand { gap: 0; padding: var(--space-4) var(--space-5); }
    .auth-brand__points, .auth-brand__foot { display: none; }
    .auth-brand__mark { width: 40px; height: 40px; font-size: var(--text-md); }
    /* La franja móvil mide 40 px: el logo se ajusta a ella o la desborda. */
    img.auth-brand__mark { width: auto; height: 40px; max-width: 150px; padding: 3px 5px; }
    .auth-brand__name { font-size: var(--text-md); }
    .auth-brand__tagline { display: none; }
    .auth-form { align-items: start; padding: var(--space-6) var(--space-5) var(--space-6); }
}

/* ===========================================================================
   CONFIGURACIÓN — bloque de identidad
   =========================================================================== */
.brand-panel__body { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; }

.brand-preview { display: flex; align-items: center; gap: 14px; }

.brand-preview__mark {
    width: 72px; height: 72px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--canvas);
    color: var(--primary);
    font-size: var(--text-xl);
    font-weight: 700;
}
img.brand-preview__mark {
    width: auto;
    height: 72px;
    max-width: 200px;
    padding: 0;
    background: none;
    border: 0;
    object-fit: contain;
}

/* Vista previa a DOS FONDOS.
   Un logo sin fondo se ve distinto sobre blanco y sobre navy, y la barra
   superior es navy. Enseñar sólo el fondo claro escondía justo el caso en
   el que un logo puede perderse. */
.brand-onboth { display: flex; gap: 10px; align-items: stretch; }

.brand-onboth__tile {
    display: grid;
    place-items: center;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    min-width: 108px;
}

.brand-onboth__tile small {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.brand-onboth__tile--light { background: var(--surface); }
.brand-onboth__tile--light small { color: var(--ink-faint); }

.brand-onboth__tile--dark { background: var(--navy-900); border-color: var(--navy-900); }
.brand-onboth__tile--dark small { color: var(--navy-300); }

.brand-preview strong { display: block; font-size: var(--text-md); }
.brand-preview .muted { display: block; font-size: var(--text-sm); }
.brand-preview small  { display: block; margin-top: var(--space-1); color: var(--ink-faint); font-size: var(--text-xs); }

.brand-upload { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.brand-upload .field { margin: 0; min-width: 280px; }
.brand-upload input[type=file] { height: auto; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }

@media (max-width: 900px) {
    .brand-panel__body { flex-direction: column; align-items: stretch; }
    .brand-upload .field { min-width: 0; }
}

/* ===========================================================================
   COMPONENTES COMPARTIDOS

   Lo que sigue existe para que una idea se resuelva UNA vez. Cada bloque de
   aquí sustituye entre tres y doce implementaciones distintas de lo mismo, o
   define un componente que el marcado usaba y esta hoja nunca había dibujado.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   .eyebrow — el rótulo que va ENCIMA de un título

   Dice de qué trata lo que viene sin robarle peso al título. Es el patrón más
   repetido del proyecto y tenía cinco nombres: .dashboard-eyebrow,
   .collection-eyebrow, .quality-kicker, .order-flow__eyebrow y .eyebrow —
   éste último usado en tres vistas y definido en ninguna, con lo que "Mapa
   operativo", "Repartidor" o "Liquidación #12" salían como texto de cuerpo,
   del mismo tamaño que el nombre de debajo. La jerarquía que el marcado
   construía no llegaba a la pantalla.
   --------------------------------------------------------------------------- */
/* Rótulo de un DATO: "Repartidor", "Liquidación #12", "Recepción de efectivo".
   Nombra el valor que va debajo, y por eso es lo más callado de la ficha.

   Antes iba en versalitas espaciadas encima de cada título de pantalla —
   "CENTRO DE CONTROL" sobre "Panel operativo y financiero"— donde no añadía
   nada que el título no dijera ya. Esos once se retiraron; sobrevive sólo
   donde de verdad etiqueta algo. */
.eyebrow {
    display: block;
    margin: 0 0 2px;
    color: var(--ink-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: 1.3;
}

.eyebrow--ok   { color: var(--done); }
.eyebrow--warn { color: var(--wait); }
.eyebrow--bad  { color: var(--lost); }

/* ---------------------------------------------------------------------------
   .metric — un rótulo pequeño encima de una cifra grande

   Estaba resuelto DOCE veces: .stat, .statcard, .dashboard-stage,
   .dashboard-kpis article, .money-card, .zone-summary>div, .incident-stats
   article, .collection-summary>div, .audit-total, .settlement-count,
   .dashboard-finance-grid article y .dashboard-config span. Doce rellenos,
   doce bordes y doce tamaños de cifra: 27, 26, 31, 25, clamp(22-30), 27, 25,
   1.35rem, 26, 34, 17 y 18 px.

   Aquí se declara una vez y la consumen todos los selectores que ya existen en
   el marcado, así que no hay que tocar las vistas para dejar de tener doce.
   El nombre canónico para código nuevo es .metric.
   --------------------------------------------------------------------------- */
.metric,
.stat,
.zone-summary > div,
.incident-stats article,
.collection-summary > div,
.delivery-route-head > div,
.audit-total {
    display: grid;
    align-content: start;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.metric__label,
.stat__label,
.zone-summary span,
.incident-stats span,
.collection-summary span,
.delivery-route-head span,
.audit-total span {
    display: block;
    color: var(--ink-soft);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    line-height: 1.3;
}

/* La cifra manda por TAMAÑO y PESO, nunca por color: un número rojo se lee
   como negativo aunque sólo signifique "atención". */
.metric__value,
.stat__value,
.zone-summary strong,
.incident-stats strong,
.collection-summary strong,
.delivery-route-head strong,
.audit-total strong {
    display: block;
    margin-top: var(--space-1);
    color: var(--ink);
    font-family: var(--font-num);
    font-size: var(--num-lg);
    font-weight: var(--weight-bold);
    line-height: 1.1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

/* Variante compacta: la cifra convive con más texto en la misma tarjeta. */
.delivery-route-head strong,
.collection-summary strong { font-size: var(--text-lg); }

.metric__foot { display: block; margin-top: 2px; color: var(--ink-faint); font-size: var(--text-xs); }

/* Rejillas de métricas. Sólo cambian el número de columnas. */
.metrics       { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.metrics--3    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metrics--4    { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 700px) {
    .metrics--3, .metrics--4 { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------------------
   .order-flow — el recorrido real de UN pedido

   El marcado de partials/order-flow.php usaba nueve clases y esta hoja no
   definía ninguna: el seguimiento se dibujaba como una lista con viñetas del
   navegador, y su leyenda eran cuatro <i> vacíos sin tamaño, o sea invisibles.

   NO es .flowsteps. Se parecen y hacen cosas distintas:
     .flowsteps  — horizontal, ocho etapas, un CONTADOR por etapa. Responde
                   "¿dónde se está acumulando el trabajo?" para el coordinador.
     .order-flow — vertical, las mismas etapas pero de UN pedido, y cada una
                   con una frase que explica qué pasó. Responde "¿qué le pasó a
                   este pedido?" para quien atiende al cliente por teléfono.

   Va en vertical justamente por esa frase: en horizontal no cabe, y sin ella
   el operador tiene que deducir el estado del color de un círculo.
   --------------------------------------------------------------------------- */
.order-flow__head { align-items: flex-start; }

.order-flow__track {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.order-flow__step {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: var(--space-3);
    position: relative;
    padding-bottom: var(--space-4);
}

/* La línea que une los pasos se dibuja con ::before sobre el propio paso, no
   con elementos sueltos: así nunca se descuadra al cambiar el número de etapas
   y el último paso simplemente no la pinta. */
.order-flow__step::before {
    content: "";
    position: absolute;
    top: 28px;
    bottom: 0;
    left: 13px;
    width: 2px;
    background: var(--line-strong);
}

.order-flow__step:last-child::before { display: none; }
.order-flow__step:last-child         { padding-bottom: 0; }

.order-flow__marker {
    display: grid;
    place-items: center;
    z-index: 1;
    width: 28px; height: 28px;
    border: 2px solid var(--line-strong);
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink-faint);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
}

.order-flow__copy        { display: grid; padding-top: 3px; }
.order-flow__copy strong { color: var(--ink); font-size: var(--text-base); font-weight: var(--weight-semi); }
.order-flow__copy small  { margin-top: 2px; color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.45; }

/* --- Estados. El mismo catálogo semántico de siempre: verde hecho, navy aquí
       estamos, gris todavía no, rojo algo se rompió. --- */
.order-flow__step.is-done .order-flow__marker   { border-color: var(--ok); background: var(--ok); color: var(--on-primary); }
.order-flow__step.is-done::before               { background: var(--ok); }

.order-flow__step.is-current .order-flow__marker {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: 0 0 0 4px var(--navy-100);
}
.order-flow__step.is-current .order-flow__copy strong { color: var(--primary-dark); font-weight: var(--weight-bold); }

.order-flow__step.is-upcoming .order-flow__marker     { border-style: dashed; }
.order-flow__step.is-upcoming .order-flow__copy strong{ color: var(--ink-soft); font-weight: var(--weight-medium); }

.order-flow__step.is-problem .order-flow__marker      { border-color: var(--bad); background: var(--bad); color: var(--on-primary); }
.order-flow__step.is-problem .order-flow__copy strong { color: var(--bad-ink); }

/* --- La franja de qué hacer ahora. Es la única parte del componente que da
       una instrucción, así que lleva franja izquierda además de color. --- */
.order-flow__guidance {
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--info-border);
    border-left: 4px solid var(--info);
    border-radius: var(--radius);
    background: var(--info-bg);
    color: var(--info-ink);
}

.order-flow__guidance p     { margin: 0; color: inherit; font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.order-flow__guidance h3    { margin: 2px 0 var(--space-1); font-size: var(--text-md); }
.order-flow__guidance div   { font-size: var(--text-base); line-height: 1.45; }
.order-flow__guidance small { display: block; margin-top: var(--space-2); font-size: var(--text-sm); opacity: .85; }

.order-flow__guidance--success { border-color: var(--ok-border);   border-left-color: var(--ok);   background: var(--ok-bg);   color: var(--ok-ink); }
.order-flow__guidance--warning { border-color: var(--warn-border); border-left-color: var(--warn); background: var(--warn-bg); color: var(--warn-ink); }
.order-flow__guidance--danger  { border-color: var(--bad-border);  border-left-color: var(--bad);  background: var(--bad-bg);  color: var(--bad-ink); }

/* --- Leyenda. Sin ella los colores son decoración; con ella son información.
       Los <i> son los que estaban sin tamaño ni color: cuatro puntos vacíos. */
.order-flow__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: var(--text-xs);
}

.order-flow__legend span { display: inline-flex; align-items: center; gap: var(--space-2); }

.order-flow__legend i {
    width: 11px; height: 11px;
    border: 2px solid var(--line-strong);
    border-radius: 50%;
    background: var(--surface);
}

.order-flow__legend i.is-done     { border-color: var(--ok);      background: var(--ok); }
.order-flow__legend i.is-current  { border-color: var(--primary); background: var(--primary); }
.order-flow__legend i.is-upcoming { border-style: dashed; background: var(--surface); }
.order-flow__legend i.is-problem  { border-color: var(--bad);     background: var(--bad); }

/* ---------------------------------------------------------------------------
   Piezas sueltas que el marcado usaba sin definición
   --------------------------------------------------------------------------- */

/* Botón que ocupa el ancho de su contenedor. Lo usan los dos envíos del
   diálogo de liquidación, que hasta ahora quedaban a la izquierda. */
.btn--wide { width: 100%; }

/* Borrador del Call Center: el nombre del cliente puede ser largo y no debe
   estirar la tira de borradores hasta sacar scroll lateral. */
.cc-draft {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    line-height: 30px;
}

/* Tabla de asignaciones: cada fila lleva un select y un botón, así que la
   celda de acción manda sobre el ancho y el resto se comprime. */
.assignment-table td { vertical-align: top; }

/* ---------------------------------------------------------------------------
   Puntos de leyenda por SIGNIFICADO

   Los tres mapas —cobertura de zonas, estado de ruta, embudo del panel— pasaban
   su color con `style="--legend:#169c62"` dentro del HTML. Además de saltarse
   los tokens, eso escondía cuatro colores más fuera de las hojas de estilo:
   otro verde, otro rojo y otro ámbar que nadie contaba.

   Ahora el punto declara qué SIGNIFICA, no de qué color es.
   --------------------------------------------------------------------------- */
.legend--zone    { --legend: var(--primary);      --route: var(--primary); }
.legend--ok      { --legend: var(--ok);           --route: var(--ok); }
.legend--warn    { --legend: var(--warn);         --route: var(--warn); }
.legend--bad     { --legend: var(--bad);          --route: var(--bad); }
.legend--none    { --legend: var(--line-strong);  --route: var(--line-strong); }

/* ---------------------------------------------------------------------------
   Campos de ancho fijo

   Un input de cantidad no debe medir lo mismo que uno de dirección. Estaban
   resueltos con `style="width:80px"` repetido en el marcado; aquí el ancho lo
   decide para qué sirve el campo.
   --------------------------------------------------------------------------- */
.input--order  { width: 70px; }
.input--qty    { width: 80px; }
.input--price  { width: 90px; }
.input--reason { max-width: 320px; }

/* La etiqueta de estado dentro de una métrica ocupa el sitio de la cifra. */
.metric .badge,
.stat .badge { display: block; width: fit-content; margin-top: var(--space-2); }

/* El sprite de iconos es una definición, no contenido: nunca se dibuja. */
.icon-sprite { display: none; }

/* Aviso volante del Call Center: alineado con el relleno de sus paneles. */
.cc-flash { margin: var(--space-3) var(--space-5) 0; }

/* ---------------------------------------------------------------------------
   Utilidades de espaciado

   Deliberadamente pocas y todas sobre la escala de 4 px. Existen para los casos
   en que un bloque necesita separarse de su vecino sin que eso sea una
   propiedad del componente. Si hacen falta más de estas, casi siempre significa
   que falta un componente.
   --------------------------------------------------------------------------- */
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-5 { margin-top: var(--space-5) !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-5 { margin-bottom: var(--space-5) !important; }

/* ---------------------------------------------------------------------------
   Botón de menú. Oculto por encima de 900 px, donde la barra no se esconde.
   --------------------------------------------------------------------------- */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .1);
    color: var(--on-primary);
    cursor: pointer;
}

.nav-toggle:hover { background: rgba(255, 255, 255, .2); }
.nav-toggle .ico  { margin: 0; }

.nav-scrim { display: none; }

@media (max-width: 900px) {
    .nav-toggle { display: inline-flex; }
    .nav-scrim  { display: block; }
}

/* ---------------------------------------------------------------------------
   Panel que ALOJA tarjetas

   `.panel` es una superficie blanca con borde y radio. Cuando dentro se mete
   una lista cuyos elementos son TAMBIÉN superficies blancas con borde y radio
   —las liquidaciones de Caja, las excepciones de Incidencias— salen cajas
   blancas sobre cajas blancas separadas por un píxel: el borde deja de separar
   nada y la pantalla se lee como una masa. Es justo lo que el encabezado de
   esta hoja prohíbe.

   Solución: el panel renuncia a ser superficie y se queda como contenedor. Su
   cabecera sigue mandando —es la que titula el grupo— y el espacio lo sigue
   poniendo él; la superficie la ponen las tarjetas, que es donde el operador
   necesita distinguir un elemento de otro.

   Si un navegador no soporta :has(), el resultado es el aspecto de antes: feo,
   no roto.
   --------------------------------------------------------------------------- */
.panel:has(> .settlement-driver-list),
.panel:has(> .settlement-list),
.panel:has(> .custody-exceptions__list),
.panel:has(> .collection-exceptions__list) {
    padding: 0;
    border-color: transparent;
    background: transparent;
}

/* La cabecera recupera el relleno que aportaba el panel, y una línea que la
   separa de la lista: sin superficie propia, el título necesita ese apoyo. */
.panel:has(> .settlement-driver-list) > .panel__head,
.panel:has(> .settlement-list) > .panel__head,
.panel:has(> .custody-exceptions__list) > .panel__head,
.panel:has(> .collection-exceptions__list) > .panel__head {
    margin-bottom: 0;
    padding: 0 var(--space-1) var(--space-3);
    border-bottom: 1px solid var(--line);
}

/* Las listas ya traen su propio relleno lateral; sobre un contenedor sin
   superficie sólo necesitan separarse de la cabecera. */
.panel > .settlement-driver-list,
.panel > .settlement-list,
.panel > .custody-exceptions__list,
.panel > .collection-exceptions__list { padding-inline: 0; }

/* ---------------------------------------------------------------------------
   Panel plegable

   Cuando un <details> ES el panel, su <summary> ya trae relleno propio y el
   contenido de dentro también. Sumarle el del panel hacía que la caja cerrada
   midiera casi el triple de lo que ocupa su única línea de texto: la fila
   "Ingresar capital adicional" de Caja medía 90 px para decir seis palabras.
   --------------------------------------------------------------------------- */
details.panel { padding: 0; }
details.panel > summary { cursor: pointer; }

/* ---------------------------------------------------------------------------
   Cabecera de página: título + acciones

   `.page-head__actions` se usaba en seis vistas y NUNCA tuvo definición base:
   sólo existía como `.dashboard-head .page-head__actions`. Sin `display:flex`
   ni capacidad de envolver, un botón con etiqueta larga —"Generar y procesar
   rutas"— no cabía junto al título en 390 px y empujaba la página entera a
   scroll horizontal, que es justo lo que esta hoja prohíbe.
   --------------------------------------------------------------------------- */
.page-head__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* En pantalla estrecha el título y las acciones son dos filas. Un botón que
   dice lo que hace vale más que un botón que cabe. */
@media (max-width: 760px) {
    .page-head { flex-wrap: wrap; }
    .page-head h1 { margin-right: 0; }
    .page-head__actions { width: 100%; flex-wrap: wrap; }
    .page-head__actions > .btn { flex: 1 1 auto; }
}

/* ---------------------------------------------------------------------------
   .chain — el registro de manos

   Sustituye a la vez al banner de "qué hacer ahora", al embudo de ocho círculos
   y a la ecuación del dinero. Los tres decían lo mismo desde ángulos distintos:
   la comida y el efectivo recorren LAS MISMAS manos, y cada etapa ya declaraba
   de quién depende.

   Una fila = un par de manos. Cuántos pedidos tiene, desde cuándo, cuánto
   efectivo conserva y qué debe hacer. La fila atascada se marca; el resto calla.
   --------------------------------------------------------------------------- */
.chain {
    margin-bottom: var(--space-5);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--sheet);
}

.chain__head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-4) var(--space-3);
}

.chain__head > div { margin-right: auto; }
.chain__head p     { margin: 2px 0 0; max-width: 62ch; color: var(--ink-2); font-size: var(--text-sm); }

.chain__balance {
    flex: none;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
}

.chain__balance.is-balanced   { background: var(--done-bg); color: var(--done-ink); }
.chain__balance.is-unbalanced { background: var(--lost-bg); color: var(--lost-ink); }

/* La instrucción no es un banner aparte: es la lectura de la tabla que viene
   debajo, y la fila que la produce está marcada. Por eso comparte su caja. */
.chain__now {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--rule);
    border-bottom: 2px solid var(--ink);
    background: var(--wait-bg);
    color: var(--wait-ink);
    font-size: var(--text-base);
}

.chain__now strong         { font-weight: var(--weight-semi); }
.chain__now-mark           { flex: none; color: var(--wait); }
.chain__now:has(.is-clear) { background: var(--done-bg); color: var(--done-ink); }
.chain__now-mark.is-clear  { color: var(--done); }

/* --- La tabla --- */
.chain__table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }

.chain__table thead th {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--rule);
    background: var(--sheet-alt);
    color: var(--ink-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    text-align: left;
    white-space: nowrap;
}

.chain__table th.num,
.chain__table td.num { text-align: right; }

.chain__table tbody th,
.chain__table tbody td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--rule);
    vertical-align: middle;
    font-weight: var(--weight-normal);
    text-align: left;
}

.chain__table tbody td.num { text-align: right; }

/* La mano: quién, y debajo en qué está. El enlace lleva a la pantalla que
   destraba justamente eso. */
.chain__hand > th a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--ink);
    text-decoration: none;
}

.chain__hand > th a:hover { color: var(--brand); text-decoration: none; }
.chain__hand > th .ico    { flex: none; color: var(--ink-3); }
.chain__hand > th span    { display: grid; min-width: 0; }
.chain__hand > th strong  { font-size: var(--text-base); font-weight: var(--weight-semi); line-height: 1.3; }
.chain__hand > th small   { color: var(--ink-3); font-size: var(--text-xs); }

/* Cifras: tabulares y en columna, que es para lo que están ahí. */
.chain__hand td.num > span {
    display: block;
    font-family: var(--font-num);
    font-size: var(--text-md);
    font-variant-numeric: tabular-nums;
}

.chain__hand td.num > small { display: block; margin-top: 1px; color: var(--ink-3); font-size: var(--text-xs); }
.chain__none { color: var(--ink-3); }
.chain__todo { color: var(--ink-2); font-size: var(--text-sm); }

/* --- Estado de la fila --------------------------------------------------- */

/* Sin trabajo. No es "bien": es que no tiene nada. Se apaga y no pide nada. */
.chain__hand.is-idle > th strong,
.chain__hand.is-idle td        { color: var(--ink-3); }
.chain__hand.is-idle > th .ico { opacity: .5; }

/* Con trabajo normal: se lee como cualquier otra fila. */
.chain__hand.is-active > th { box-shadow: inset 3px 0 0 var(--brand); }

/* Parada. Es la única fila que llama, y por eso el resto está tan callado. */
.chain__hand.is-stuck               { background: var(--wait-bg); }
.chain__hand.is-stuck > th          { box-shadow: inset 3px 0 0 var(--wait); }
.chain__hand.is-stuck > th strong,
.chain__hand.is-stuck td.num > span { color: var(--wait-ink); }
.chain__hand.is-stuck .chain__todo  { color: var(--wait-ink); font-weight: var(--weight-semi); }

/* --- Pie: el efectivo vivo es la suma de la columna, así que va en su pie --- */
.chain__table tfoot th,
.chain__table tfoot td {
    padding: var(--space-3);
    border-top: 2px solid var(--ink);
    color: var(--ink);
    font-weight: var(--weight-semi);
    text-align: left;
}

.chain__table tfoot th small { display: block; color: var(--ink-3); font-size: var(--text-xs); font-weight: var(--weight-normal); }
.chain__table tfoot td.num   { text-align: right; }
.chain__table tfoot td span  { font-family: var(--font-num); font-size: var(--num-md); font-variant-numeric: tabular-nums; }

.chain .fold           { margin: 0; padding: 0 var(--space-4) var(--space-3); border-top: 1px solid var(--rule); }
.chain .fold > summary { padding-top: var(--space-3); }

/* ---------------------------------------------------------------------------
   .result — los renglones del resultado del evento
   --------------------------------------------------------------------------- */
.section-title { margin: var(--space-5) 0 var(--space-3); font-size: var(--text-lg); }

.result,
.holders {
    display: grid;
    margin: var(--space-3) 0 0;
    padding: 0 var(--space-4);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--sheet);
}

.result > div,
.result > p,
.holders > p {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin: 0;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--rule);
}

.result > div:last-child,
.result > p:last-child,
.holders > p:last-child { border-bottom: 0; }

.result dt,
.result > p > span,
.holders > p > span { color: var(--ink-2); font-size: var(--text-sm); }
.result dt small   { display: block; margin-top: 1px; color: var(--ink-3); font-size: var(--text-xs); }

.result dd,
.result > p > strong,
.holders > p > strong {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-num);
    font-size: var(--text-md);
    font-variant-numeric: tabular-nums;
}

.result .is-result    { padding-top: var(--space-3); border-top: 2px solid var(--ink); border-bottom: 0; }
.result .is-result dt { color: var(--ink); font-weight: var(--weight-semi); }
.result .is-result dd { font-size: var(--num-md); font-weight: var(--weight-semi); }

@media (max-width: 760px) {
    .chain__head        { flex-wrap: wrap; }
    .chain__table thead { display: none; }
    .chain__table tbody tr { display: grid; grid-template-columns: 1fr auto; padding: var(--space-2) 0; }
    .chain__table tbody th,
    .chain__table tbody td { padding: 2px var(--space-3); border-bottom: 0; }
    .chain__hand > th           { grid-row: 1 / span 2; }
    .chain__hand td.num         { text-align: right; }
    .chain__hand .chain__todo   { grid-column: 1 / -1; padding-top: var(--space-1); }
    .chain__table tbody tr + tr { border-top: 1px solid var(--rule); }
}