/* =============================================================================
   ÓRDENES DE AZÚCAR — identidad visual. Scope `.ord-ui`.
   =============================================================================
   docs/RUNBOOK-ORDENES-AZUCAR.md. Ronda de mockups cerrada el 20/08/2026: ganó
   la opción A, «la bandeja, ordenada».

   ── EL TRATAMIENTO, y por qué ────────────────────────────────────────────────
   CABECERA LITE, la de Facturación, Remitos y la pantalla de Movimientos. Sale
   del árbol del §3 de RUNBOOK-NUEVA-IDENTIDAD: es una PANTALLA-TABLA —una
   grilla larga que se mira veinte minutos seguidos— y no un trabajo mixto de
   fichas y formularios. La única superficie navy rellena de la pantalla es el
   botón de acción principal, y vive en la barra del armazón: acá abajo no hay
   ninguna (manual §1.2).

   ACENTO: NAVY Y NADA MÁS. La regla del acento del runbook maestro dice que un
   color interactivo propio sólo se justifica cuando navy ya está gastado en la
   estructura, y este módulo no apila cuatro zonas: es una barra, una lista y un
   pie. No se inventa un segundo azul.

   CERO TOKENS PROPIOS. La paleta sale entera de core/tokens.css. Si algún día
   hace falta apartarse, se redeclara el token en este scope y SE ESCRIBE EL
   PORQUÉ al lado — hoy no hay ninguno.

   ── LOS OCHO COLORES QUE MUEREN ──────────────────────────────────────────────
   El módulo tenía color = CATEGORÍA en ocho familias, medidas sin comentarios:
   naranja (Cartera), púrpura (Logística), verde (Finalizadas y el asistente de
   recepción), índigo (re-imputar), esmeralda (imputar huérfano), azul (el alta),
   ámbar (observaciones) y rojo (el borrado). Ninguna decía nada del ESTADO de
   una orden: decían de qué familia era el botón. Se van etapa por etapa, y lo
   que queda es el vocabulario del manual §1.1 —navy lo vivo, ámbar lo atrasado,
   verde lo cumplido—.

   ── ORDEN DE LAS SECCIONES ───────────────────────────────────────────────────
    1. EL ARMAZÓN — la tarjeta, la barra de secciones y el área de trabajo
    2. LA LISTA — la barra, la grilla, el medidor y el pie (ETAPA 2)
    3. LA FICHA — dos columnas: lo que la orden ES y lo que le PASÓ (ETAPA 3)
    4. LOS DIÁLOGOS — el alta, los dos pases y el cierre (ETAPA 4)
    5. LAS DOS HERRAMIENTAS DE GERENCIA — re-imputar e imputar (ETAPA 5)
   ============================================================================= */


/* =============================================================================
   1. EL ARMAZÓN — la tarjeta, la barra de secciones y el área de trabajo
   =============================================================================
   Portado de `mw-ui.css` §13, que es la implementación hermana y la más nueva.
   Mismo gesto, mismos tiempos, mismas trampas ya resueltas.

   POR QUÉ EL SCOPE VA EN UN <div> HIJO Y NO EN EL PROPIO `.page-content`.
   `#page-ordenes` oculta y muestra con el `.hidden` de Tailwind, que es UNA
   clase; si el armazón se escribiera sobre ese mismo elemento, cualquier regla
   del módulo que declarara `display` ahí le ganaría y la pantalla no se
   ocultaría NUNCA, tapando a las demás. En un hijo eso no puede pasar — es lo
   que hacen el ABM, Configuración y Movimientos.

   Lo que SÍ hay que devolverle el `.hidden` es al hijo, y la razón está abajo:
   este módulo no elige cuándo se esconde su propio armazón.
   ========================================================================== */
/* ── LA CADENA DE ALTO, y por que hay un compuesto ────────────────────────── */
/* `#page-ordenes` declara `data-shell="full"`, asi que el armazon le da el alto
   entero y le saca el padding. De ahi para abajo el alto hay que PASARLO: sin
   esto la tarjeta mide lo que mide su contenido y queda flotando sobre medio
   lienzo blanco — lo agarro la FOTO del banco, no una asercion.

   Y VA COMO COMPUESTO, `.ord-ui.ord-hub`, sin espacio: las dos clases estan en
   el MISMO elemento. Con espacio no matchea nada y el bloque se cae EN SILENCIO
   (trampa del §4 del RUNBOOK-NUEVA-IDENTIDAD).

   EL CANDADO DE ABAJO SE QUEDA, aunque hoy nadie esconda este `<div>`.
   `.ord-ui.ord-hub` son dos clases (0,2,0) y el `.hidden` de Tailwind es una
   (0,1,0): cualquiera que le agregue `.hidden` —desde este modulo o desde otro—
   no lo lograria, y el sintoma seria una pantalla que se dibuja encima de otra.
   Lo escribio la etapa 1 porque el asistente de recepcion escondia este `<div>`
   DESDE MOVIMIENTOS; la etapa 6 corto ese acoplamiento y la regla se queda
   igual, porque lo que protege no es a ese llamador: es al proximo.

   `min-height: 0` en las dos: un `flex-1` sin el estira en vez de scrollear, y
   un item flex con `overflow` distinto de `visible` se encoge hasta cero — se ve
   perfecto mientras recorta. */
.ord-ui.ord-hub {
    display: flex; flex-direction: column;
    flex: 1; min-height: 0; min-width: 0;
}
.ord-ui.ord-hub.hidden { display: none; }

.ord-ui .ord-shell {
    background: var(--canvas);
    border-radius: var(--r-card);
    overflow: hidden;
    box-shadow: var(--shadow);
    display: flex; flex-direction: column; flex: 1; min-height: 0;
}

/* ── La barra de secciones — subrayado que crece desde el centro ───────────── */
/* LAS TRES BANDEJAS VIVEN ACÁ, Y COMPARTEN UN SOLO CONTENEDOR. No son tres
   pantallas y el §7 del manual es explícito: comparten el render, las mismas
   columnas y sólo cambian un `where`. Lo que cambia entre ellas es el `estado`
   de la consulta y qué acciones publica la barra del armazón — el `<div>` de la
   lista es EL MISMO. Ocupan la barra de secciones porque son el único eje de
   navegación del módulo, no porque sean pantallas distintas.

   (Lo que había antes eran cuatro botones-tarjeta de 80 px de alto arriba de la
   grilla: uno de acción y tres bandejas, cada una con su familia de color y su
   `.active-indicator` escondido con `.hidden`. Ocupaban una franja entera de la
   pantalla para decir tres palabras y un número.) */
.ord-ui .ord-secnav {
    background: var(--surface);
    border-bottom: 1px solid var(--hair);
    display: flex; gap: 2px; padding: 0 14px; flex-wrap: wrap;
}
.ord-ui .ord-secnav button {
    position: relative; background: none; border: 0;
    font: inherit; font-size: 12.8px; font-weight: 600; color: var(--muted);
    padding: 12px 15px 13px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
    transition: color .15s var(--curva), background .15s var(--curva);
}
.ord-ui .ord-secnav button .material-symbols-outlined {
    font-size: 18px; transition: transform .18s var(--curva);
}
/* Un `border-bottom` no se puede animar (manual §7): va un ::after con scaleX. */
.ord-ui .ord-secnav button::after {
    content: ''; position: absolute; left: 10px; right: 10px; bottom: 0;
    height: 2.5px; background: var(--navy); border-radius: 2px 2px 0 0;
    transform: scaleX(0); transition: transform .18s var(--curva);
}
.ord-ui .ord-secnav button:hover, .ord-ui .ord-secnav button:focus-visible {
    color: var(--navy); background: var(--navy-050); outline: none;
}
.ord-ui .ord-secnav button:hover::after,
.ord-ui .ord-secnav button:focus-visible::after { transform: scaleX(.55); }
.ord-ui .ord-secnav button:hover .material-symbols-outlined { transform: scale(1.18); }
/* La bandeja activa se marca por `aria-current` Y por `.on`. El atributo es el
   que leen el lector de pantalla y el banco; la clase, la que pinta. Que la
   regla mire a los dos deja que ninguno se pueda olvidar en silencio. */
.ord-ui .ord-secnav button.on,
.ord-ui .ord-secnav button[aria-current="true"] { color: var(--navy); font-weight: 700; }
.ord-ui .ord-secnav button.on::after,
.ord-ui .ord-secnav button[aria-current="true"]::after { transform: scaleX(1); }
.ord-ui .ord-secnav .tail { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ── El contador de cada bandeja ───────────────────────────────────────────── */
/* Va PEGADO al nombre de la bandeja y no en una tarjeta aparte, que es donde
   estaba. En reposo es navy tenue; en la bandeja activa se rellena, porque ahí
   el número es el de lo que se está mirando.

   NO LLEVA COLOR DE ESTADO. Un contador de cartera no es ámbar por ser cartera
   —eso sería categoría otra vez—: lo que sí es estado, y lo que sí va a llevar
   ámbar, es la antigüedad, y vive en la cola y en la fila (etapa 2). */
.ord-ui .ord-secnav .cnt {
    font-size: 11px; font-weight: 700; line-height: 1.6;
    background: var(--navy-050); color: var(--navy-500);
    border-radius: 999px; padding: 0 8px;
    font-variant-numeric: tabular-nums;
    transition: background .15s var(--curva), color .15s var(--curva);
}
.ord-ui .ord-secnav button.on .cnt,
.ord-ui .ord-secnav button[aria-current="true"] .cnt { background: var(--navy); color: #fff; }
/* Mientras no se sabe. Un contador que dice 0 antes de haber contado miente
   más que uno vacío. */
.ord-ui .ord-secnav .cnt.esperando { color: transparent; min-width: 26px; }

/* ── El contador accionable, en la cola de la barra ────────────────────────── */
/* Vive en la cola y no en una tarjeta arriba de la lista: desde ahí se ve al
   entrar, se ve desde las TRES bandejas y no se va al hacer scroll. Es ámbar
   porque pide algo — eso SÍ es estado (manual §1.1).

   En la etapa 1 la cola queda VACÍA: la llena la etapa 2, cuando la lista
   sepa cuántas órdenes llevan más de quince días sin moverse. Es un dato que
   hoy no existe en ninguna columna de ninguna de las tres bandejas. */
.ord-ui .ord-alert {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--warn-050); border: 1px solid var(--warn-hair);
    border-radius: 999px; padding: 5px 12px 5px 10px; margin: 6px 0;
    font-family: inherit; font-size: 11.5px; cursor: pointer; color: var(--warn);
    transition: background .15s var(--curva), transform .15s var(--curva), box-shadow .15s var(--curva);
}
.ord-ui .ord-alert:hover, .ord-ui .ord-alert:focus-visible {
    background: #fdf0d8; transform: translateY(-1px); box-shadow: var(--e1); outline: none;
}
.ord-ui .ord-alert .v {
    font-size: 15px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
}
.ord-ui .ord-alert .k { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ord-ui .ord-alert .material-symbols-outlined { font-size: 16px; color: var(--muted); }

/* ── El área de trabajo ───────────────────────────────────────────────────── */
/* Sin padding lateral: la lista y su barra van de borde a borde y son ELLAS las
   que aplican `--gutter` a su contenido, así que el texto de la tabla arranca
   en la misma columna que el título del módulo.

   EL PADDING PROVISORIO. Mientras la lista siga en Tailwind —o sea hasta la
   etapa 2— la sección lleva su propio margen adentro y el canal no se cumple.
   `.ord-provisorio` es esa muleta, y está escrita para que se vea: se borra
   junto con la tabla vieja, como pasó con la de Movimientos. */
/* EL QUE SCROLLEA ES LA TABLA, NO EL AREA. Si el scroll viviera aca, la
   cabecera `sticky` de la grilla se quedaria pegada a un contenedor que NO se
   mueve —o sea, no se pegaria a nada— y el pie que confiesa el corte se iria de
   la pantalla justo cuando hay 50 filas, que es cuando hace falta leerlo. Asi
   que el alto se PASA hasta `.ord-scroll` y ahi se corta. */
.ord-ui .ord-view {
    padding: 16px 0 22px; background: var(--canvas);
    flex: 1; min-height: 0; overflow: hidden;
    display: flex; flex-direction: column;
}
.ord-ui #ord-sec-lista { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ord-ui .ord-view .ord-ph { margin-left: var(--gutter); margin-right: var(--gutter); }
.ord-ui .ord-view .ord-provisorio { padding: 0 var(--gutter); }

/* ── Encabezado de pantalla ────────────────────────────────────────────────── */
/* `<h3>` más una bajada que dice PARA QUÉ SIRVE la bandeja. Es lo que no estaba:
   la pantalla vieja tenía un título que cambiaba de color con la bandeja
   —naranja, púrpura, gris— y no explicaba nada. */
.ord-ui .ord-ph { margin-bottom: 14px; }
.ord-ui .ord-ph h3 { font-size: .95rem; font-weight: 700; color: var(--ink); margin: 0; }
.ord-ui .ord-ph p { font-size: 12px; color: var(--muted); margin: 2px 0 0; max-width: 78ch; }

/* ── A 390 px ─────────────────────────────────────────────────────────────── */
/* El TELÉFONO de este módulo está declarado fuera de alcance —lo dibuja
   `renderMobileOrdenes`, que es otro camino entero—. Lo de acá es sólo que el
   armazón de escritorio no se rompa en una ventana angosta: la barra de
   secciones envuelve en vez de recortarse, y la tarjeta pierde el radio porque
   ya no tiene a los lados de qué separarse. */
@media (max-width: 640px) {
    .ord-ui .ord-shell { border-radius: 0; box-shadow: none; }
    .ord-ui .ord-secnav { padding: 0 8px; }
    .ord-ui .ord-secnav button { padding: 10px 11px 11px; font-size: 12px; }
    .ord-ui .ord-secnav .tail { margin-left: 0; width: 100%; }
}

/* =============================================================================
   2. LA LISTA — la barra, la grilla, el medidor y el pie (ETAPA 2)
   =============================================================================
   Portado de `mw-ui.css` §16, que es la implementación hermana de la cabecera
   lite y la más nueva. Cero tokens propios y cero valores nuevos.

   LO QUE ESTA SECCIÓN NO ES. No es «la tabla con estilo»: la tabla vieja se veía
   bien. Lo que cambia es QUÉ DICE. Tenía nueve columnas y ninguna contestaba las
   dos preguntas que se hacen mirándola —cuánto falta que entre, y desde cuándo
   está esperando—, y encima se cortaba en 50 filas sin decirlo.

   LA REGLA DE COLOR, otra vez, porque acá es donde más tienta romperla: la
   bandeja NO es un color. Una orden en cartera no es naranja por estar en
   cartera. Lo que sí lleva color es la ANTIGÜEDAD —ámbar cuando pasó de quince
   días— y el CUMPLIMIENTO —verde cuando ya no falta nada—, que son estados del
   dato y no etiquetas de familia (manual §1.1).
   ========================================================================== */

/* ── La barra: el buscador y su ÁMBITO ─────────────────────────────────────── */
/* El ámbito va al lado del campo y SIEMPRE a la vista, no en un `title`. La
   búsqueda filtra lo que se trajo, y lo que se trajo son 50 de cuantas haya: una
   orden que existe pero quedó afuera contestaba «no hay órdenes», que se lee
   como «no existe». */
.ord-ui .ord-bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 0 var(--gutter) 12px;
}
.ord-ui .ord-search { position: relative; flex: 0 1 300px; min-width: 210px; }
.ord-ui .ord-search > .material-symbols-outlined {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    font-size: 18px; color: var(--faint); pointer-events: none;
}
.ord-ui .ord-search input {
    width: 100%; font: inherit; font-size: 12.6px; color: var(--ink);
    background: var(--surface); border: 1px solid var(--hair-strong);
    border-radius: 9px; padding: 8px 12px 8px 36px;
    transition: border-color .15s var(--curva), box-shadow .15s var(--curva);
}
.ord-ui .ord-search input:focus {
    outline: none; border-color: var(--navy-300);
    box-shadow: 0 0 0 3px var(--navy-050);
}
.ord-ui .ord-ambito { font-size: 11.5px; color: var(--faint); line-height: 1.4; }
.ord-ui .ord-ambito b { color: var(--muted); font-weight: 700; }

/* La tira del plan del mes (3b.4): el ritmo de MP contra las abiertas. Una
   sola linea, tenida de navy como el resto de lo informativo; el veredicto
   habla en rojo o verde, no la tira entera. */
.ord-ui .ord-plan {
    margin: 0 var(--gutter) 12px; padding: 8px 12px;
    font-size: 12px; line-height: 1.5; color: var(--ink);
    background: var(--navy-050); border: 1px solid var(--hair); border-radius: 9px;
}
.ord-ui .ord-plan small { color: var(--muted); }
.ord-ui .ord-plan .mut { color: var(--muted); }
.ord-ui .ord-plan .neg { color: var(--crit); }
.ord-ui .ord-plan .ok  { color: var(--ok); }

/* ── La tarjeta ────────────────────────────────────────────────────────────── */
/* De borde a borde: pierde el radio y los trazos laterales porque ya no tiene a
   los lados de qué separarse, y así el texto de la primera columna arranca en la
   misma columna que el título del módulo. */
.ord-ui .ord-caja {
    background: var(--surface);
    border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
    box-shadow: var(--e1);
    display: flex; flex-direction: column; flex: 1; min-height: 0;
}
/* `min-height: 0` no es decorativo: un item flex sin el estira en vez de
   scrollear, y con `overflow` distinto de `visible` se encoge hasta cero — se ve
   perfecto mientras recorta. */
.ord-ui .ord-scroll { overflow: auto; flex: 1; min-height: 0; }

/* ── La grilla ─────────────────────────────────────────────────────────────── */
.ord-ui table.ord-g { width: 100%; border-collapse: collapse; font-size: 12.8px; }
.ord-ui table.ord-g th {
    position: sticky; top: 0; z-index: 2;
    background: var(--surface); color: var(--muted);
    font-size: .6rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700;
    text-align: left; padding: 9px 12px;
    border-bottom: 2px solid var(--ink); white-space: nowrap;
}
.ord-ui table.ord-g td {
    padding: 8px 12px; border-bottom: 1px solid var(--hair);
    color: var(--ink); vertical-align: middle; white-space: nowrap;
}
/* Los únicos que envuelven son los nombres: emisor y titular son texto de largo
   variable. Un número partido en dos renglones se lee como dos números. */
.ord-ui table.ord-g td.wrap, .ord-ui table.ord-g th.wrap { white-space: normal; min-width: 150px; }
.ord-ui table.ord-g tbody tr { transition: background .13s var(--curva); }
.ord-ui table.ord-g tbody tr:hover { background: var(--navy-050); }
.ord-ui table.ord-g tbody tr.marcada { background: var(--navy-050); }
.ord-ui table.ord-g .n { text-align: right; font-variant-numeric: tabular-nums; }
.ord-ui table.ord-g .c { text-align: center; }
.ord-ui table.ord-g .mono {
    font-family: Consolas, "SF Mono", "Roboto Mono", monospace;
    font-weight: 700; font-variant-numeric: tabular-nums; color: var(--navy);
}
.ord-ui table.ord-g .sub { display: block; font-size: 10.5px; color: var(--faint); font-weight: 400; margin-top: 1px; }
.ord-ui table.ord-g td.vacia { padding: 40px 16px; text-align: center; color: var(--faint); font-style: italic; white-space: normal; }

/* ── La franja de estado, a la izquierda de la fila ────────────────────────── */
/* Tres píxeles, no la fila entera pintada. La bandeja no la decide: la decide el
   CUMPLIMIENTO. Sin cargas, gris; empezada, navy; cumplida, verde; y ámbar
   cuando lleva más de quince días sin moverse, que gana sobre las demás porque
   es lo único que pide algo. */
.ord-ui table.ord-g td:first-child { border-left: 3px solid transparent; padding-left: calc(var(--gutter) - 3px); }
.ord-ui table.ord-g th:first-child { padding-left: var(--gutter); }
.ord-ui table.ord-g th:last-child,
.ord-ui table.ord-g td:last-child { padding-right: var(--gutter); }
.ord-ui table.ord-g tr.st-nada  td:first-child { border-left-color: var(--hair-strong); }
.ord-ui table.ord-g tr.st-curso td:first-child { border-left-color: var(--navy-300); }
.ord-ui table.ord-g tr.st-ok    td:first-child { border-left-color: var(--ok); }
.ord-ui table.ord-g tr.st-vieja td:first-child { border-left-color: var(--warn); }

/* ── El medidor de avance ──────────────────────────────────────────────────── */
/* Cuánto entró contra lo pactado, en la fila y sin abrir nada. Se llena por
   KILO, que es lo que cierra la orden — que hayan entrado tres artículos
   distintos no le mueve un píxel, y por eso el mix no rompe nada.
   Verde sólo al 100%: es lo único que ahí es un estado. */
.ord-ui .ord-med { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.ord-ui .ord-med .tr {
    flex: 0 0 72px; height: 6px; border-radius: 4px;
    background: var(--hair); overflow: hidden;
}
.ord-ui .ord-med .fl { display: block; height: 100%; background: var(--navy-300); border-radius: 4px; }
.ord-ui .ord-med .fl.lleno { background: var(--ok); }
.ord-ui .ord-med .pc { font-size: 11px; color: var(--faint); width: 30px; text-align: right; font-variant-numeric: tabular-nums; }

/* ── Pastillas de estado ───────────────────────────────────────────────────── */
.ord-ui .ord-b {
    display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
    padding: 1px 7px; border-radius: 5px; border: 1px solid; text-transform: uppercase;
    white-space: nowrap;
}
.ord-ui .ord-b.nav { background: var(--navy-050); color: var(--navy-500); border-color: #cfdcf1; }
.ord-ui .ord-b.wrn { background: var(--warn-050); color: var(--warn); border-color: var(--warn-hair); }
.ord-ui .ord-b.ok  { background: var(--ok-050);  color: var(--ok);  border-color: var(--ok-hair); }
.ord-ui .ord-b.mut { background: #f4f6f9; color: var(--faint); border-color: var(--hair-strong); }
/* `.neg` no es «otra categoria mas»: es lo unico de esta pantalla que dice que
   algo esta MAL. Recibir bolsas de otra marca o de otro tamano cierra la orden
   igual —lo que la cierra son los kilos—; recibir otra azucar, no. */
.ord-ui .ord-b.neg { background: var(--crit-050); color: var(--crit); border-color: var(--crit-hair); }

/* El código del artículo, delante del nombre. Es el dato con el que se decide si
   lo que entró cierra la orden (A·B), así que se lee y no se adivina. */
.ord-ui .ord-cod {
    font-family: Consolas, "SF Mono", monospace; font-size: 10.5px;
    color: var(--faint); background: #f4f6f9; border: 1px solid var(--hair-strong);
    border-radius: 4px; padding: 0 4px; margin-right: 6px;
}

/* ── La antigüedad ─────────────────────────────────────────────────────────── */
/* Ámbar a partir de los quince días. NO es un umbral inventado en el CSS: lo
   decide el JS y la hoja sólo lo pinta — un estado guardado en una clase de
   color es un estado que no se puede consultar (manual §7). */
.ord-ui .ord-edad { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ord-ui .ord-edad.vieja { color: var(--warn); font-weight: 700; }

/* ── Botones y acciones de fila ────────────────────────────────────────────── */
/* CON RÓTULO, y es la lección que costó una pasada en vivo en Movimientos: la
   celda de acciones medía «lo que miden dos íconos» y el glifo que anulaba se
   veía IGUAL que el que imprimía. Y `.peligro` es trazo rojo EN REPOSO, no en
   `:hover`: una señal que sólo existe al apuntar no señala, confirma. */
.ord-ui .ord-min {
    font: inherit; font-size: 11px; font-weight: 600; color: var(--navy);
    background: var(--surface); border: 1px solid var(--hair-strong);
    border-radius: 6px; padding: 3px 9px; cursor: pointer; white-space: nowrap;
    transition: background .13s var(--curva), border-color .13s var(--curva), color .13s var(--curva);
}
.ord-ui .ord-min:hover, .ord-ui .ord-min:focus-visible {
    background: var(--navy-050); border-color: var(--navy-300); outline: none;
}
.ord-ui .ord-min.peligro { color: var(--crit); border-color: var(--crit-hair); }
.ord-ui .ord-min.peligro:hover, .ord-ui .ord-min.peligro:focus-visible {
    background: var(--crit-050); border-color: var(--crit);
}
.ord-ui .ord-min.cierre { color: var(--warn); border-color: var(--warn-hair); }
.ord-ui .ord-min.cierre:hover, .ord-ui .ord-min.cierre:focus-visible {
    background: var(--warn-050); border-color: var(--warn);
}
.ord-ui table.ord-g .acc { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }

/* La casilla de selección, del tamaño que se puede apretar. */
.ord-ui table.ord-g input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--navy); cursor: pointer; }

/* ── El pie que CONFIESA EL CORTE ──────────────────────────────────────────── */
/* Es la pieza más barata de esta etapa y la que más arregla. La consulta pide de
   a 50 y no había forma de traer las siguientes ni ninguna señal de que la lista
   estaba cortada: el contador de arriba decía 187 y la tabla mostraba 50. */
.ord-ui .ord-pie {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 9px var(--gutter); border-top: 1px solid var(--hair);
    background: #fafbfc; font-size: 11.5px; color: var(--muted);
}
.ord-ui .ord-pie b { color: var(--ink); font-variant-numeric: tabular-nums; }
.ord-ui .ord-pie .sp { flex: 1; }

/* ── La barra de selección ─────────────────────────────────────────────────── */
/* Aparece cuando hay algo marcado, y dice CUÁNTAS ÓRDENES Y CUÁNTOS KILOS. Antes
   eran dos <div> con `.hidden` en la barra de herramientas que se prendían según
   la bandeja: estaban ahí sin nada marcado, y no decían sobre qué iban a actuar.
   Es la única superficie navy rellena de la pantalla además del botón principal
   de la barra del armazón, y se justifica porque no está siempre. */
.ord-ui .ord-sel {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: 12px var(--gutter) 0;
    background: var(--navy); color: #fff;
    border-radius: 11px; padding: 9px 16px; font-size: 12.5px;
    box-shadow: var(--e2);
}
.ord-ui .ord-sel .sp { flex: 1; }
.ord-ui .ord-sel b { font-weight: 700; font-variant-numeric: tabular-nums; }
.ord-ui .ord-sel button {
    font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
    border-radius: 8px; padding: 6px 13px;
    background: #fff; color: var(--navy); border: 1px solid #fff;
    transition: background .13s var(--curva);
}
.ord-ui .ord-sel button:hover, .ord-ui .ord-sel button:focus-visible { background: var(--navy-050); outline: none; }
.ord-ui .ord-sel button.gh {
    background: transparent; color: rgba(255,255,255,.88); border-color: rgba(255,255,255,.32);
}
.ord-ui .ord-sel button.gh:hover, .ord-ui .ord-sel button.gh:focus-visible { background: rgba(255,255,255,.12); }

/* ── El vacío ──────────────────────────────────────────────────────────────── */
/* Dice QUÉ bandeja está vacía y, si hay un filtro puesto, que el filtro puede
   ser la razón. «No hay órdenes» a secas es la respuesta que hizo que nadie
   notara que el buscador miraba 50 filas. */
.ord-ui .ord-vacio { padding: 46px 26px; text-align: center; color: var(--faint); }
.ord-ui .ord-vacio .material-symbols-outlined { font-size: 32px; color: var(--hair-strong); }
.ord-ui .ord-vacio p { margin: 8px 0 0; font-size: 12.5px; }
.ord-ui .ord-vacio p b { color: var(--muted); }

/* ── A 390 px ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .ord-ui .ord-bar { padding: 0 12px 10px; }
    .ord-ui .ord-search { flex: 1 1 100%; }
    .ord-ui .ord-sel { margin: 10px 12px 0; }
    .ord-ui table.ord-g th:first-child,
    .ord-ui table.ord-g td:first-child { padding-left: 12px; }
    .ord-ui table.ord-g th:last-child,
    .ord-ui table.ord-g td:last-child { padding-right: 12px; }
    .ord-ui .ord-pie { padding: 9px 12px; }
}

/* =============================================================================
   3. LA FICHA — dos columnas: lo que la orden ES y lo que le PASÓ (ETAPA 3)
   =============================================================================
   El criterio no se discutió acá: lo dejó escrito la etapa 6 de Movimientos y
   vale igual. Una ficha que apila diez bloques de datos con los botones metidos
   entre medio no se lee: se recorre. A la izquierda lo que la orden ES —lo
   pactado, que no cambia—, a la derecha lo que le PASÓ —lo que entró, que crece
   carga por carga—, cada columna con su scroll, y el pie con una sola cosa:
   cerrar.

   EL VELO CUELGA DEL <body>, así que lleva el scope EN SU PROPIO ELEMENTO y
   escrito COMO COMPUESTO: `.ord-ui.ord-velo`, sin espacio. Con espacio no
   matchea nada y el diálogo sale sin velo, sin ancho y sin sombra — y ninguna
   aserción sobre el marcado se cae. Y por eso mismo hay que devolverle el
   `.hidden`: dos clases (0,2,0) contra una (0,1,0).

   LOS DOS BLOQUES DE COLOR QUE MUEREN. Las observaciones eran una caja ámbar y
   la instrucción de logística una violeta, las dos con su ícono, apiladas al
   final. Ninguna de las dos es un estado: son dos campos de texto. Van como dos
   renglones más de la lista de definiciones, que es lo que son.
   ========================================================================== */

.ord-ui.ord-velo {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    padding: 22px;
}
.ord-ui.ord-velo.hidden { display: none; }

.ord-ui .ord-panel {
    background: var(--surface); border-radius: var(--r-card);
    box-shadow: var(--e3);
    width: min(1000px, 100%); max-height: min(88vh, 780px);
    display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}

/* ── La cabecera ───────────────────────────────────────────────────────────── */
/* Navy plena, y es la ÚNICA de la ficha: el pie es claro y adentro no hay
   ninguna otra superficie llena (manual §1.2). */
.ord-ui .ord-panel-h {
    background: var(--navy); color: #fff;
    padding: 14px 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.ord-ui .ord-panel-h .lb {
    font-size: .6rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
    color: #9fc0ee;
}
.ord-ui .ord-panel-h .num {
    font-family: Consolas, "SF Mono", monospace; font-size: 22px; font-weight: 700;
    letter-spacing: -.01em; line-height: 1.15; font-variant-numeric: tabular-nums;
}
.ord-ui .ord-panel-h .sp { flex: 1; }
.ord-ui .ord-panel-h .fecha { font-size: 11.5px; color: #b9cef0; }
/* La pastilla sobre navy no puede usar los fondos claros de `.ord-b`: sobre
   navy no contrastan. Es el §7 del manual —un token de contraste vale sobre el
   fondo para el que se eligió— así que acá se declara aparte y a propósito. */
.ord-ui .ord-panel-h .ord-b {
    background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .28); color: #fff;
}
.ord-ui .ord-panel-h .ord-b.wrn { color: #ffd9a8; border-color: rgba(255, 217, 168, .45); }
.ord-ui .ord-panel-h .cerrar {
    background: transparent; border: 0; color: rgba(255, 255, 255, .75);
    cursor: pointer; border-radius: 8px; padding: 4px; line-height: 0;
}
.ord-ui .ord-panel-h .cerrar:hover, .ord-ui .ord-panel-h .cerrar:focus-visible {
    background: rgba(255, 255, 255, .14); color: #fff; outline: none;
}

/* ── Las dos columnas, cada una con su scroll ──────────────────────────────── */
.ord-ui .ord-cols {
    display: grid; grid-template-columns: 360px 1fr;
    flex: 1; min-height: 0;
}
.ord-ui .ord-col { padding: 18px 22px; overflow: auto; min-height: 0; }
.ord-ui .ord-col-l { border-right: 1px solid var(--hair); background: #fafbfd; }
.ord-ui .ord-col h5 {
    font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--faint); margin: 0 0 12px;
}
.ord-ui .ord-col h5 + h5, .ord-ui .ord-col * + h5 { margin-top: 20px; }

/* ── Lista de definiciones ─────────────────────────────────────────────────── */
.ord-ui .ord-dl { display: flex; flex-direction: column; }
.ord-ui .ord-dl > div {
    display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
    border-bottom: 1px solid var(--hair); padding: 9px 0;
}
.ord-ui .ord-dl > div:last-child { border-bottom: 0; }
.ord-ui .ord-dl .k {
    font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--faint); white-space: nowrap;
}
.ord-ui .ord-dl .v { font-weight: 600; text-align: right; font-size: 13px; }
.ord-ui .ord-dl .v small {
    display: block; font-weight: 400; color: var(--muted); font-size: 11.5px; margin-top: 2px;
}
/* Un campo de texto largo —las notas, la instrucción de logística— no entra en
   una fila de dos columnas: se pone abajo y a la izquierda, que es como se lee. */
.ord-ui .ord-dl > div.larga { flex-direction: column; align-items: stretch; gap: 4px; }
.ord-ui .ord-dl > div.larga .v { text-align: left; font-weight: 400; font-size: 12.5px; color: var(--muted); }

/* ── El medidor grande ─────────────────────────────────────────────────────── */
.ord-ui .ord-gauge {
    background: var(--surface); border: 1px solid var(--hair);
    border-radius: 11px; padding: 14px 16px; margin-bottom: 16px;
}
.ord-ui .ord-gauge .big {
    font-size: 26px; font-weight: 700; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; color: var(--navy);
}
.ord-ui .ord-gauge .big.lleno { color: var(--ok); }
.ord-ui .ord-gauge .x { font-size: 12px; color: var(--muted); margin-left: 7px; }
.ord-ui .ord-gauge .track {
    height: 9px; border-radius: 5px; background: var(--hair);
    margin: 12px 0 8px; overflow: hidden;
}
.ord-ui .ord-gauge .fill { display: block; height: 100%; background: var(--navy-300); }
.ord-ui .ord-gauge .fill.lleno { background: var(--ok); }
.ord-ui .ord-gauge .scale {
    display: flex; justify-content: space-between;
    font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums;
}

/* ── El aviso ──────────────────────────────────────────────────────────────── */
.ord-ui .ord-aviso {
    display: flex; gap: 11px; border: 1px solid; border-radius: 10px;
    padding: 10px 13px; font-size: 12.5px; line-height: 1.5; margin-bottom: 16px;
}
.ord-ui .ord-aviso .material-symbols-outlined { font-size: 18px; flex: 0 0 auto; }
.ord-ui .ord-aviso.wrn { background: var(--warn-050); border-color: var(--warn-hair); color: #7a4300; }
.ord-ui .ord-aviso.nav { background: var(--navy-050); border-color: #cfdcf1; color: var(--navy-500); }
.ord-ui .ord-aviso.neg { background: var(--crit-050); border-color: var(--crit-hair); color: #8c1d1d; }
.ord-ui .ord-aviso b { color: inherit; font-weight: 700; }

/* ── Las tablas chicas de la ficha ─────────────────────────────────────────── */
.ord-ui table.ord-mini { width: 100%; border-collapse: collapse; font-size: 12.4px; }
.ord-ui table.ord-mini th {
    text-align: left; font-size: .58rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--faint);
    padding: 7px 8px; border-bottom: 2px solid var(--hair-strong); white-space: nowrap;
}
.ord-ui table.ord-mini td {
    padding: 7px 8px; border-bottom: 1px solid var(--hair);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ord-ui table.ord-mini td.l { font-variant-numeric: normal; white-space: normal; }
.ord-ui table.ord-mini .n { text-align: right; }
.ord-ui table.ord-mini tfoot td {
    border-bottom: 0; border-top: 2px solid var(--hair-strong);
    font-weight: 700; padding-top: 9px;
}
.ord-ui table.ord-mini .mono {
    font-family: Consolas, "SF Mono", monospace; font-size: 11.5px; color: var(--muted);
}
.ord-ui table.ord-mini .dim { color: var(--faint); font-style: italic; }

.ord-ui .ord-nada {
    border: 1px dashed var(--hair-strong); border-radius: 10px;
    padding: 22px; text-align: center; color: var(--faint); font-size: 12.5px;
}

/* ── El pie: UNA sola cosa ─────────────────────────────────────────────────── */
/* La ficha vieja tenía cuatro botones de colores metidos entre los datos, cada
   uno adentro de la caja del dato que le toca y ninguno donde uno los busca.
   Acá el pie cierra y nada más — las acciones de una orden viven en su fila,
   donde dicen solas sobre qué actúan. */
.ord-ui .ord-panel-f {
    border-top: 1px solid var(--hair); background: #fafbfd;
    padding: 11px 22px; display: flex; align-items: center; gap: 12px;
}
.ord-ui .ord-panel-f .sp { flex: 1; }
.ord-ui .ord-panel-f .ref { font-size: 11px; color: var(--faint); font-family: Consolas, monospace; }
.ord-ui .ord-btn {
    font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
    border-radius: 9px; padding: 7px 16px;
    background: var(--navy); color: #fff; border: 1px solid var(--navy);
    transition: background .13s var(--curva);
}
.ord-ui .ord-btn:hover, .ord-ui .ord-btn:focus-visible { background: var(--navy-700); outline: none; }
.ord-ui .ord-btn.sec {
    background: var(--surface); color: var(--navy); border-color: var(--hair-strong);
}
.ord-ui .ord-btn.sec:hover, .ord-ui .ord-btn.sec:focus-visible { background: var(--navy-050); border-color: var(--navy-300); }

/* ── A 390 px ─────────────────────────────────────────────────────────────── */
/* Las dos columnas se apilan y el panel deja de tener margen: en una pantalla de
   390 px, 22 px de velo a cada lado son 44 px que le faltan al contenido. */
@media (max-width: 780px) {
    .ord-ui.ord-velo { padding: 0; }
    .ord-ui .ord-panel { max-height: 100vh; height: 100%; border-radius: 0; }
    .ord-ui .ord-cols { grid-template-columns: 1fr; overflow: auto; }
    .ord-ui .ord-col { overflow: visible; }
    .ord-ui .ord-col-l { border-right: 0; border-bottom: 1px solid var(--hair); }
}

/* =============================================================================
   4. LOS DIÁLOGOS — el alta, los dos pases y el cierre (ETAPA 4)
   =============================================================================
   NO NACE UN VOCABULARIO NUEVO. El velo, el panel, la cabecera navy, la lista de
   definiciones, los avisos y el pie ya son los de la ficha (§3), y los cuatro
   diálogos de esta etapa los reusan. Un módulo que se repinta pantalla por
   pantalla termina con dos vocabularios para lo mismo si cada etapa se inventa
   el suyo, y entonces la hoja deja de poder leerse entera.

   Lo único que esta sección agrega es lo que un diálogo tiene y una ficha no:
   CAMPOS, una TIRA donde caen todas las validaciones juntas, y un pie con dos
   botones en vez de uno.
   ========================================================================== */

/* El panel de un diálogo es más angosto que el de la ficha: no tiene dos
   columnas, tiene una conversación. */
.ord-ui .ord-panel.chico { width: min(560px, 100%); }
.ord-ui .ord-panel.medio { width: min(720px, 100%); }
.ord-ui .ord-panel.grande { width: min(940px, 100%); }

/* UNA TABLA ADENTRO DE UN DIALOGO SCROLLEA, NO SE RECORTA. `table.ord-g` es
   `width: 100%`, asi que comprime las columnas hasta que la ultima se sale del
   panel y desaparece sin dejar barra — lo agarro la FOTO del asistente, con la
   columna de kg cortada al medio. Un ancho minimo la obliga a scrollear adentro
   de su caja, que es lo que el §7 del manual pide para cualquier contenido
   ancho. */
.ord-ui .ord-panel .ord-scroll table.ord-g { min-width: 640px; }

/* ── El cuerpo con scroll ──────────────────────────────────────────────────── */
.ord-ui .ord-cuerpo { padding: 18px 22px; overflow: auto; flex: 1; min-height: 0; }
.ord-ui .ord-cuerpo > p.intro {
    margin: 0 0 16px; font-size: 12.5px; color: var(--muted); line-height: 1.55;
}
.ord-ui .ord-cuerpo > p.intro b { color: var(--ink); }

/* ── LA TIRA: todas las validaciones juntas, y adentro del diálogo ─────────── */
/* Lo que reemplaza son cinco `alert()` disparados de a uno: el que cargaba mal
   tres campos se comía tres carteles seguidos, y entre uno y otro no podía ver
   el formulario. La tira sale entera y se queda mientras haga falta.
   `ordTira()` devuelve si LLEGÓ a escribirse: un <div> que no existe se traga el
   mensaje en silencio (la lección de `mwTira`). */
.ord-ui .ord-tira {
    border: 1px solid var(--crit-hair); background: var(--crit-050); color: #8c1d1d;
    border-radius: 10px; padding: 10px 13px; margin-bottom: 14px;
    font-size: 12.5px; line-height: 1.5;
}
.ord-ui .ord-tira b { display: block; margin-bottom: 4px; }
.ord-ui .ord-tira ul { margin: 0; padding-left: 18px; }
.ord-ui .ord-tira li + li { margin-top: 2px; }
.ord-ui .ord-tira:empty, .ord-ui .ord-tira.hidden { display: none; }

/* ── Campos ────────────────────────────────────────────────────────────────── */
.ord-ui .ord-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ord-ui .ord-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ord-ui .ord-campo.ancho { grid-column: 1 / -1; }
.ord-ui .ord-campo > label {
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--faint);
}
.ord-ui .ord-campo .nota { font-size: 11px; color: var(--muted); min-height: 15px; }
.ord-ui .ord-campo .nota b { color: var(--ink); font-variant-numeric: tabular-nums; }

.ord-ui .ord-in, .ord-ui .ord-txt, .ord-ui select.ord-in {
    font: inherit; font-size: 13px; color: var(--ink);
    background: var(--surface); border: 1px solid var(--hair-strong);
    border-radius: 9px; padding: 8px 11px; width: 100%;
    transition: border-color .14s var(--curva), box-shadow .14s var(--curva);
}
.ord-ui .ord-in:focus, .ord-ui .ord-txt:focus, .ord-ui select.ord-in:focus {
    outline: none; border-color: var(--navy-300); box-shadow: 0 0 0 3px var(--navy-050);
}
.ord-ui .ord-in[readonly], .ord-ui .ord-in:disabled {
    background: #f4f6f9; color: var(--muted); cursor: not-allowed;
}
.ord-ui .ord-txt { resize: vertical; min-height: 64px; line-height: 1.5; }
.ord-ui .ord-in.mal, .ord-ui .ord-txt.mal { border-color: var(--crit); }
.ord-ui .ord-in.num { font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }

/* La cantidad y su unidad, pegadas: son un solo dato dicho de dos maneras. */
.ord-ui .ord-cant { display: flex; gap: 0; }
.ord-ui .ord-cant .ord-in { border-radius: 9px 0 0 9px; }
.ord-ui .ord-cant select {
    font: inherit; font-size: 12.5px; font-weight: 600; color: var(--navy);
    background: #f4f6f9; border: 1px solid var(--hair-strong); border-left: 0;
    border-radius: 0 9px 9px 0; padding: 0 9px; cursor: pointer;
}
.ord-ui .ord-cant select:focus { outline: none; border-color: var(--navy-300); }

/* ── El selector inteligente, vestido desde acá ────────────────────────────── */
/* `services/smart-selector.js` escribe Tailwind y lo usan once módulos: no se
   repinta desde acá. Se lo viste por el contenedor, y alcanza con la
   especificidad —dos clases (0,2,0) contra las utilidades de una (0,1,0)—, así
   que NO hace falta ni un `!important`. (El modal viejo lo hacía con un <style>
   inline adentro del JS, con seis `!important`.) */
.ord-ui .ord-campo .relative > input {
    font: inherit; font-size: 13px; color: var(--ink);
    background: var(--surface); border: 1px solid var(--hair-strong);
    border-radius: 9px; padding: 8px 11px 8px 34px;
}
.ord-ui .ord-campo .relative > input:focus {
    outline: none; border-color: var(--navy-300); box-shadow: 0 0 0 3px var(--navy-050);
}
.ord-ui .ord-campo .relative > div:first-child .material-symbols-outlined {
    font-size: 17px; color: var(--faint);
}
.ord-ui .ord-campo ul { border-color: var(--hair-strong); border-radius: 10px; box-shadow: var(--e2); }
.ord-ui .ord-campo ul li { font-size: 12.5px; }

/* ── La palabra que hay que escribir ───────────────────────────────────────── */
/* Se conserva —es el freno de una operación que no se deshace— y lo que cambia
   es que el diálogo dice ANTES cuántas cargas hay y cuántos kilos, en vez de
   afirmar «no tiene movimientos vinculados» mirando una resta. */
.ord-ui .ord-palabra { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.ord-ui .ord-palabra label { font-size: 12px; color: var(--muted); }
.ord-ui .ord-palabra label b { color: var(--ink); font-family: Consolas, monospace; letter-spacing: .04em; }
.ord-ui .ord-palabra input {
    font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .1em;
    text-align: center; text-transform: uppercase;
    background: var(--surface); border: 2px solid var(--hair-strong);
    border-radius: 9px; padding: 8px 11px; width: 100%;
}
.ord-ui .ord-palabra input:focus { outline: none; border-color: var(--navy-300); }
.ord-ui .ord-palabra input.listo { border-color: var(--crit); color: var(--crit); }

/* ── El pie con dos botones ────────────────────────────────────────────────── */
/* El que CONFIRMA algo que no se deshace es sólido y rojo; el resto es navy. Es
   el único rojo sólido de todo el módulo. */
.ord-ui .ord-btn.peligro { background: var(--crit); border-color: var(--crit); }
.ord-ui .ord-btn.peligro:hover, .ord-ui .ord-btn.peligro:focus-visible { background: #a52020; }
.ord-ui .ord-btn:disabled, .ord-ui .ord-btn.peligro:disabled {
    background: var(--hair-strong); border-color: var(--hair-strong);
    color: var(--faint); cursor: not-allowed;
}

/* ── El resumen de lo seleccionado, adentro de un pase ─────────────────────── */
.ord-ui .ord-resumen {
    background: #fafbfd; border: 1px solid var(--hair); border-radius: 10px;
    padding: 11px 14px; margin-bottom: 14px; font-size: 12.5px; color: var(--muted);
}
.ord-ui .ord-resumen b { color: var(--ink); font-variant-numeric: tabular-nums; }
.ord-ui .ord-resumen ul { margin: 8px 0 0; padding-left: 18px; max-height: 120px; overflow: auto; }
.ord-ui .ord-resumen li { margin-top: 2px; }
.ord-ui .ord-resumen .mono { font-family: Consolas, monospace; color: var(--navy); font-weight: 600; }

/* ── A 390 px ─────────────────────────────────────────────────────────────── */
@media (max-width: 780px) {
    .ord-ui .ord-campos { grid-template-columns: 1fr; }
    .ord-ui .ord-panel.chico, .ord-ui .ord-panel.medio { width: 100%; }
}

/* =============================================================================
   5. LAS DOS HERRAMIENTAS DE GERENCIA — re-imputar e imputar (ETAPA 5)
   =============================================================================
   SON LA MISMA PREGUNTA CON DOS DESTINOS: «estos kilos están imputados donde no
   van». Una los mueve de una orden a otra; la otra los engancha a una orden por
   primera vez. Por eso comparten el vocabulario entero y esta sección tiene
   cuatro piezas, no ocho — y ninguna de las cuatro es de color.

   MUEREN ÍNDIGO Y ESMERALDA. Cada herramienta tenía su familia: índigo la
   re-imputación, esmeralda la imputación de huérfanos, con su cabecera en
   degradado y su botón a juego. Eso es color = categoría dos veces (§1.1): lo
   que distingue una de otra es lo que dice, no de qué color es. Las dos son
   navy, como todo el módulo.

   EL PASO NUMERADO SE QUEDA. Es lo único que las dos hacían bien: son
   operaciones de tres o cuatro pasos donde cada uno depende del anterior, y el
   número dice dónde estás. Lo que cambia es que deja de ser un `<p>` con seis
   clases de Tailwind repetido ocho veces.
   ========================================================================== */

/* ── El rótulo de cada paso ────────────────────────────────────────────────── */
.ord-ui .ord-paso {
    font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--faint); margin: 0 0 8px;
    display: flex; align-items: baseline; gap: 8px;
}
.ord-ui .ord-paso .n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 17px; height: 17px; border-radius: 50%;
    background: var(--navy-050); color: var(--navy-500);
    font-size: 10px; font-weight: 700; letter-spacing: 0; flex: 0 0 auto;
}
.ord-ui .ord-paso b { color: var(--muted); font-weight: 700; }
.ord-ui .ord-seccion + .ord-seccion { margin-top: 18px; }

/* ── La opción: un candidato de una lista ──────────────────────────────────── */
/* Extraída, no inventada: es la misma fila-con-dos-datos que las dos
   herramientas repetían en cuatro listas, cada una con su borde índigo o
   esmeralda escrito a mano. Sirve igual para un `<button>` y para un `<label>`
   con su radio adentro. */
.ord-ui .ord-op {
    display: flex; align-items: center; gap: 10px; width: 100%;
    text-align: left; font: inherit; cursor: pointer;
    background: var(--surface); border: 1px solid var(--hair-strong);
    border-radius: 9px; padding: 8px 11px;
    transition: background .13s var(--curva), border-color .13s var(--curva);
}
.ord-ui .ord-op + .ord-op { margin-top: 6px; }
.ord-ui .ord-op:hover:not(:disabled), .ord-ui .ord-op:focus-visible {
    background: var(--navy-050); border-color: var(--navy-300); outline: none;
}
/* Elegida: trazo navy y fondo tenue. Nunca relleno — una lista de ocho
   opciones con una navy sólida adentro es la superficie más fuerte del
   diálogo, y no es la que importa (§1.2). */
.ord-ui .ord-op.on { border-color: var(--navy); background: var(--navy-050); }
.ord-ui .ord-op:disabled { opacity: .55; cursor: not-allowed; }
.ord-ui .ord-op .q { flex: 1; min-width: 0; }
.ord-ui .ord-op .t {
    display: block; font-family: Consolas, "SF Mono", monospace;
    font-weight: 700; font-size: 13px; color: var(--navy);
}
.ord-ui .ord-op .d { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.ord-ui .ord-op .r {
    font-size: 11.5px; color: var(--muted); white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.ord-ui .ord-op .r.no { color: var(--faint); font-weight: 700; }
.ord-ui .ord-op input[type="radio"] { accent-color: var(--navy); width: 15px; height: 15px; }
/* La que cambia de especie SE MARCA, no se esconde (etapa 4b): el que imputa
   tiene que poder verla para decidir, y forzarla con el motivo escrito. */
.ord-ui .ord-op .ord-b { flex: 0 0 auto; }

/* ── La lista con scroll ───────────────────────────────────────────────────── */
.ord-ui .ord-lista { max-height: 190px; overflow: auto; padding-right: 2px; }
.ord-ui .ord-lista .ord-vacio { padding: 18px 10px; }
.ord-ui .ord-lista .ord-vacio p { font-size: 12px; }

/* ── La ficha del MW elegido ───────────────────────────────────────────────── */
.ord-ui .ord-elegido {
    background: var(--navy-050); border: 1px solid #cfdcf1;
    border-radius: 10px; padding: 10px 13px; font-size: 12.5px; color: var(--ink);
}
.ord-ui .ord-elegido .mono { font-family: Consolas, monospace; font-weight: 700; color: var(--navy); }
.ord-ui .ord-elegido .k {
    display: block; font-size: .6rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--faint); margin-bottom: 3px;
}

/* ── El renglón de estado del pie ──────────────────────────────────────────── */
/* Dice qué falta para poder confirmar, y dice el resultado cuando ya se puede.
   Va a la IZQUIERDA del pie y no arriba del botón: es lo que se lee justo antes
   de apretarlo. */
.ord-ui .ord-panel-f .estado { font-size: 12px; color: var(--muted); min-width: 0; }
.ord-ui .ord-panel-f .estado b { color: var(--ink); font-variant-numeric: tabular-nums; }
.ord-ui .ord-panel-f .estado.mal { color: var(--crit); font-weight: 600; }

.ord-ui .ord-in.chico { width: 150px; }
.ord-ui .ord-junto { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ord-ui .ord-junto .nota { font-size: 11.5px; color: var(--faint); }