/* =============================================================================
   COMPRAS Y CONSIGNACIÓN — identidad visual. Scope `.cp-ui`.
   =============================================================================
   docs/RUNBOOK-COMPRAS.md. Ronda de mockups cerrada el 22/09/2026: ganó la
   opción A, «la mesa de OCAs».

   ── EL TRATAMIENTO, y por qué ────────────────────────────────────────────────
   CABECERA LITE, la de Órdenes, Facturación, Remitos y Movimientos. Sale del
   árbol del §3 de RUNBOOK-NUEVA-IDENTIDAD: es una PANTALLA-TABLA —la mesa de
   OCAs se mira antes de cada despacho— 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. Este módulo no apila cuatro zonas: es una barra de
   secciones, una fila de chips, una lista y un pie. No se inventa un segundo
   azul, y el azul relleno de la cabecera vieja —`bg-blue-900` en la tarjeta de
   consignación— muere con la etapa 2.

   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.

   ── LAS TRECE FAMILIAS DE COLOR QUE MUEREN ───────────────────────────────────
   El módulo tenía color = CATEGORÍA en trece familias (Paso 0, 22/09/2026):
   gray, red, blue, amber, slate, orange, emerald, indigo, green, rose, lime,
   sky y violet. Verde el F3000, ámbar la gerencia, pizarra el histórico, azul
   la compra nueva, índigo la unidad elegida, esmeralda el Excel, violeta el
   imputador de descubiertos, verde otra vez el stock propio, lime la orgánica.
   Ninguna decía nada del ESTADO de una OCA: 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 que falta ingresar o pide algo, rojo el
   descubierto, verde lo liquidado—.

   ── ORDEN DE LAS SECCIONES ───────────────────────────────────────────────────
    1. EL ARMAZÓN — la tarjeta, la barra de secciones, los chips, el área (ETAPA 1)
    2. LA MESA — la tira, el buscador, la grilla con la barra y el pie (ETAPA 2)
    3. LA FICHA DE LA OCA — cuatro números, tres cuerpos, verbos (ETAPA 3)
    4. PROPIA, ORGÁNICA Y AZEF — los baldes (ETAPA 4)
    5. REGISTRAR — el asistente y la bandeja «Todas» (ETAPA 5)
    6. LOS DIÁLOGOS DE GERENCIA (ETAPA 6)
    7. AZÚCAR PROPIA, EL BALDE FACTURADO — la mesa del mayor (RONDA 4)
   ============================================================================= */


/* =============================================================================
   1. EL ARMAZÓN — la tarjeta, la barra de secciones, los chips y el área
   =============================================================================
   Portado de `ord-ui.css` §1, que es la implementación hermana. 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-compras` 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, Movimientos y Órdenes.
   ========================================================================== */
/* ── LA CADENA DE ALTO, y por qué hay un compuesto ────────────────────────── */
/* `#page-compras` declara `data-shell="full"`, así que el armazón le da el alto
   entero y le saca el padding. De ahí 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 agarró la FOTO del banco de Órdenes, no una aserción.

   Y VA COMO COMPUESTO, `.cp-ui.cp-hub`, sin espacio: las dos clases están 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 ES CARGA VIVA, no precaución: «Stock Conciliado · Propia»
   esconde este `<div>` para mostrarse a pantalla completa (hasta la etapa 4,
   que la convierte en pantalla con puerta). `.cp-ui.cp-hub` son dos clases
   (0,2,0) y el `.hidden` de Tailwind es una (0,1,0): sin esta línea el armazón
   no se oculta y Stock Conciliado se dibuja ENCIMA de la barra de secciones.

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

.cp-ui .cp-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 ───────────── */
/* LOS BOTONES DE SECCIÓN SON LOS HIJOS DIRECTOS (`> button`), y no cualquier
   botón de adentro de la barra: en la cola vive `.cp-alert`, que también es un
   <button>, y `.cp-secnav button` (0,2,1) le gana a `.cp-alert` (0,2,0) — la
   píldora ámbar salía como texto pelado, sin fondo ni borde. Lo agarró la
   FOTO del banco, no una aserción. */
/* LAS TRES SECCIONES SON PANTALLAS DISTINTAS —consulta, columnas y acciones
   distintas— y por eso viven acá y cada una tiene su panel. Las bandejas de
   consignación NO: comparten el render y sólo cambian un filtro, así que son
   chips (más abajo). Es la clasificación del §7 del manual escrita en el CSS.

   (Lo que había antes era una cabecera propia con un <h1> y cuatro botones de
   cuatro colores, arriba de un tablero que apilaba todo en una sola pantalla.) */
.cp-ui .cp-secnav {
    background: var(--surface);
    border-bottom: 1px solid var(--hair);
    display: flex; gap: 2px; padding: 0 14px; flex-wrap: wrap;
}
.cp-ui .cp-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);
}
.cp-ui .cp-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. */
.cp-ui .cp-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);
}
.cp-ui .cp-secnav > button:hover, .cp-ui .cp-secnav > button:focus-visible {
    color: var(--navy); background: var(--navy-050); outline: none;
}
.cp-ui .cp-secnav > button:hover::after,
.cp-ui .cp-secnav > button:focus-visible::after { transform: scaleX(.55); }
.cp-ui .cp-secnav > button:hover .material-symbols-outlined { transform: scale(1.18); }
/* La sección 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. */
.cp-ui .cp-secnav > button.on,
.cp-ui .cp-secnav > button[aria-current="true"] { color: var(--navy); font-weight: 700; }
.cp-ui .cp-secnav > button.on::after,
.cp-ui .cp-secnav > button[aria-current="true"]::after { transform: scaleX(1); }
.cp-ui .cp-secnav .tail { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ── El contador de cada sección ───────────────────────────────────────────── */
/* Va PEGADO al nombre. En reposo es navy tenue; en la sección activa se
   rellena, porque ahí el número es el de lo que se está mirando.

   NO LLEVA COLOR DE ESTADO. Un contador de consignación no es azul por ser
   consignación —eso sería categoría otra vez—. */
.cp-ui .cp-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);
}
.cp-ui .cp-secnav > button.on .cnt,
.cp-ui .cp-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. Y LA REGLA TIENE QUE GANARLE A LA DE LA SECCIÓN ACTIVA:
   `button.on .cnt` pinta el texto en blanco con (0,4,0), y `.cnt.esperando` a
   secas es (0,3,0) — en la sección abierta el «0» que no se contó se veía en
   blanco sobre navy. Lo agarró la FOTO del Registro. */
.cp-ui .cp-secnav .cnt.esperando,
.cp-ui .cp-secnav > button.on .cnt.esperando,
.cp-ui .cp-secnav > button[aria-current="true"] .cnt.esperando { color: transparent; min-width: 26px; }

/* ── El contador accionable, en la cola de la barra ────────────────────────── */
/* Las OC de Flexxus que GS no tiene. Vive en la cola y no en una franja arriba
   del tablero: desde ahí se ve al entrar, se ve desde las TRES secciones y no
   se va al hacer scroll. Es ámbar porque pide algo — eso SÍ es estado (manual
   §1.1). La franja con el detalle sigue arriba de la mesa hasta la etapa 5. */
.cp-ui .cp-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);
}
.cp-ui .cp-alert:hover, .cp-ui .cp-alert:focus-visible {
    background: #fdf0d8; transform: translateY(-1px); box-shadow: var(--e1); outline: none;
}
.cp-ui .cp-alert .v {
    font-size: 15px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
}
.cp-ui .cp-alert .k { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cp-ui .cp-alert .material-symbols-outlined { font-size: 16px; color: var(--muted); }

/* ── El área de trabajo y los tres paneles ─────────────────────────────────── */
/* El área no scrollea: pasa el alto al panel abierto. En la etapa 1 EL PANEL
   scrollea entero, porque lo que tiene adentro son las tarjetas viejas en
   Tailwind; cuando la etapa 2 traiga la grilla, el que scrollea va a ser la
   tabla y no el panel — o la cabecera `sticky` se pega a algo que no se mueve
   y el pie que confiesa el corte se va de la pantalla (lección de Órdenes).

   EL CANDADO DEL PANEL: `.cp-panel` declara `display`, que son dos clases
   contra la sola del `.hidden` de Tailwind. Sin la segunda regla las tres
   secciones se dibujan una encima de otra. `tokens.css` ya resuelve
   `.cp-ui .hidden` con `!important`; ésta se queda igual, porque lo que protege
   no depende de que aquella lista siga completa. */
.cp-ui .cp-view {
    padding: 16px 0 0; background: var(--canvas);
    flex: 1; min-height: 0; overflow: hidden;
    display: flex; flex-direction: column;
}
.cp-ui .cp-panel {
    display: flex; flex-direction: column;
    flex: 1; min-height: 0; overflow: auto;
    padding: 0 0 22px;
}
.cp-ui .cp-panel.hidden { display: none; }
/* EN CONSIGNACIÓN EL QUE SCROLLEA ES LA TABLA, NO EL PANEL (etapa 2). Si el
   scroll viviera acá, la cabecera `sticky` de la grilla se pegaría a un
   contenedor que no se mueve —o sea, a nada— y el pie que confiesa el corte se
   iría de la pantalla justo cuando hay 78 filas, que es cuando hace falta
   leerlo. El alto se PASA por `.cp-mesa` hasta `.cp-scroll` y ahí se corta.
   Propia y Registro siguen scrolleando enteros hasta sus etapas. */
.cp-ui #cp-sec-consignacion { overflow: hidden; }
.cp-ui .cp-mesa { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; }
.cp-ui .cp-view .cp-ph { margin-left: var(--gutter); margin-right: var(--gutter); }

/* EL PADDING PROVISORIO. Mientras las tarjetas sigan en Tailwind —o sea hasta
   que cada sección tenga su etapa— el contenido lleva su propio margen adentro
   y el canal no se cumple. `.cp-provisorio` es esa muleta, y está escrita para
   que se vea: se borra junto con la tarjeta vieja, como pasó con las de
   Movimientos, Órdenes y Stock General. */
.cp-ui .cp-provisorio { padding: 0 var(--gutter); }
.cp-ui .cp-provisorio + .cp-provisorio { margin-top: 14px; }

/* ── Encabezado de pantalla ────────────────────────────────────────────────── */
/* `<h3>` más una bajada que dice PARA QUÉ SIRVE la sección. Es lo que no
   estaba: la pantalla vieja tenía un <h1> con el nombre del módulo, que ya lo
   dice el rail, y una bajada que no explicaba nada. */
.cp-ui .cp-ph { margin-bottom: 14px; }
.cp-ui .cp-ph h3 { font-size: .95rem; font-weight: 700; color: var(--ink); margin: 0; }
.cp-ui .cp-ph p { font-size: 12px; color: var(--muted); margin: 2px 0 0; max-width: 78ch; }

/* ── Los chips de bandeja ──────────────────────────────────────────────────── */
/* Vivas · Vendido s/liq. · Liquidadas. Reemplazan a las tres pestañas en
   Tailwind de la tarjeta de consignación —`flex-1` cada una, azul la activa,
   celeste las otras—. Son FILTROS sobre la misma lista (manual §7): no ocupan
   la barra de secciones, ocupan una fila arriba de la grilla.

   En la etapa 1 vivían ADENTRO de la tarjeta vieja, donde estaban las pestañas,
   con fondo y regla propios. Desde la etapa 2 viven en la FILA DEL BUSCADOR
   (`.cp-bar`, §2), a la derecha, y no llevan ni fondo ni regla: son de la fila.
   El marcado lo arma `cpChipsHTML()` de compras-nav.js; la fila se dibuja UNA
   vez con el armazón y los contadores los escribe el que clasifica.

   El activo se marca con un filete izquierdo INTERIOR (`inset` box-shadow) y
   no con un borde más grueso: el chip no cambia de tamaño al elegirse, así que
   la fila no baila. Mismo gesto que los segmentos de Trazabilidad. */
.cp-ui .cp-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cp-ui .cp-chip {
    border: 1px solid var(--hair-strong); background: var(--surface);
    border-radius: 999px; padding: 5px 12px;
    font: inherit; font-size: 12px; font-weight: 600; color: var(--muted);
    display: inline-flex; gap: 6px; align-items: center; cursor: pointer;
    transition: color .15s var(--curva), background .15s var(--curva),
                border-color .15s var(--curva), box-shadow .15s var(--curva);
}
.cp-ui .cp-chip:hover, .cp-ui .cp-chip:focus-visible {
    color: var(--navy); border-color: var(--navy-300); background: var(--navy-050); outline: none;
}
.cp-ui .cp-chip.on,
.cp-ui .cp-chip[aria-selected="true"] {
    border-color: var(--navy); background: var(--navy-050); color: var(--navy);
    box-shadow: inset 3px 0 0 var(--navy);
}
.cp-ui .cp-chip .c {
    font-size: 10.5px; font-weight: 700; color: var(--faint);
    font-variant-numeric: tabular-nums;
}
.cp-ui .cp-chip.on .c,
.cp-ui .cp-chip[aria-selected="true"] .c { color: var(--navy-500); }
/* Mientras no se contó: invisible pero ocupando su lugar. */
.cp-ui .cp-chip .c.esperando { color: transparent; min-width: 14px; }

/* ── A 390 px ─────────────────────────────────────────────────────────────── */
/* Este módulo no tiene teléfono: lo de acá es sólo que el armazón de
   escritorio no se rompa en una ventana angosta —la barra de secciones y los
   chips envuelven en vez de recortarse, y la tarjeta pierde el radio porque
   ya no tiene a los lados de qué separarse—. */
@media (max-width: 640px) {
    .cp-ui .cp-shell { border-radius: 0; box-shadow: none; }
    .cp-ui .cp-secnav { padding: 0 8px; }
    .cp-ui .cp-secnav > button { padding: 10px 11px 11px; font-size: 12px; }
    .cp-ui .cp-secnav .tail { margin-left: 0; width: 100%; }
}


/* =============================================================================
   2. LA MESA — la tira, el buscador, la grilla con la barra y el pie
   =============================================================================
   Portado de `ord-ui.css` §2 (la lista de Órdenes) y de la lámina A. Cero
   tokens propios y cero valores nuevos: lo que no es un token es un hex que ya
   está en `ord-ui.css` o en la barra del picker del despacho.

   LO QUE ESTA SECCIÓN NO ES. No es «la tabla azul con estilo»: la tarjeta
   vieja se veía bien. Lo que cambia es QUÉ DICE. Tenía una cabecera azul con
   una cuenta propia, tres tablas distintas —una por pestaña, cada una con sus
   columnas y su color de familia: azul, naranja, gris— y ninguna contestaba
   las tres preguntas que Hernán pidió (22/09/2026): cuánto se pactó, cuánto
   ENTRÓ y cuánto se VENDIÓ, por OCA, «como ya se ve al despachar». Hoy es UNA
   grilla para las tres bandejas, con los cuatro números y la barra del picker
   en cada fila, y un pie que confiesa dónde se corta.

   LA REGLA DE COLOR, porque acá es donde más tienta romperla: la bandeja NO es
   un color. Una OCA en «Vendido s/liq.» no es naranja por estar ahí. Lo que sí
   lleva color es el ESTADO del dato —verde hay azúcar libre para vender, navy
   tenue viene en camino, rojo un descubierto o una OCA imputada de más, gris
   ya no queda nada— y son estados de la fila, no etiquetas de familia
   (manual §1.1).
   ========================================================================== */

/* ── La tira: cuatro cifras, una cuenta ────────────────────────────────────── */
/* Libre en planta · a recibir · vendido sin liquidar · descubierto. Las cuatro
   salen de `_totalesConsig()`, la MISMA cuenta que escribe el renglón de la
   barra y el pie: la cabecera azul vieja hacía la suya al dibujarse y decía
   1.944 mientras la barra decía 489 (lo agarró la foto de la etapa 1).

   Es la tira del ABM (`.abm-stat`: 1,42 rem, nunca «display»). El filete
   izquierdo y el color del número son el ESTADO de la cifra: verde lo que se
   puede vender, navy tenue lo que viene, rojo lo que se vendió sin OCA. Y una
   cifra en CERO no lleva color: cero a recibir no es navy, cero descubierto
   no es rojo — es una tarjeta gris que dice que no hay nada. */
.cp-ui .cp-tira { display: flex; gap: 12px; flex-wrap: wrap; padding: 0 var(--gutter) 13px; }
.cp-ui .cp-tira:empty { display: none; }
.cp-ui .cp-stat {
    flex: 1; min-width: 160px; min-height: 0;
    background: var(--surface); border-radius: var(--r-card); padding: 12px 14px;
    box-shadow: var(--e1); border: 1px solid rgba(16, 32, 64, .05);
    border-left: 3px solid var(--hair-strong);
}
.cp-ui .cp-stat .k { font-size: .6rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--faint); }
.cp-ui .cp-stat .v { font-size: 1.42rem; font-weight: 800; line-height: 1.2; margin-top: 2px; font-variant-numeric: tabular-nums; color: var(--ink); }
.cp-ui .cp-stat .v small { font-size: .72rem; font-weight: 600; color: var(--faint); margin-left: 4px; }
.cp-ui .cp-stat .d { font-size: .7rem; font-weight: 600; color: var(--faint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-ui .cp-stat.ok  { border-left-color: var(--ok); }        .cp-ui .cp-stat.ok .v  { color: var(--ok); }
.cp-ui .cp-stat.nav { border-left-color: var(--navy-300); }  .cp-ui .cp-stat.nav .v { color: var(--navy); }
.cp-ui .cp-stat.neg { border-left-color: var(--crit); }      .cp-ui .cp-stat.neg .v { color: var(--crit); }

/* ── La barra: el buscador, su ÁMBITO y los chips ──────────────────────────── */
/* 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 las últimas 500
   compras sin las marcadas liquidadas en GS. Una OCA que existe pero quedó
   afuera contestaría «ninguna», que se lee como «no existe».

   `.cp-ambito` es un <span> con texto y negritas adentro: NO es flex. En un
   contenedor flex cada <b> sería una columna y la oración se leería en zigzag
   (trampa pagada en Facturación). El flex es la barra; el texto va envuelto. */
.cp-ui .cp-bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 0 var(--gutter) 12px;
}
.cp-ui .cp-bar .sp { flex: 1; }
.cp-ui .cp-search { position: relative; flex: 0 1 300px; min-width: 210px; }
.cp-ui .cp-search > .material-symbols-outlined {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    font-size: 18px; color: var(--faint); pointer-events: none;
}
.cp-ui .cp-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);
}
.cp-ui .cp-search input:focus {
    outline: none; border-color: var(--navy-300);
    box-shadow: 0 0 0 3px var(--navy-050);
}
.cp-ui .cp-ambito { font-size: 11.5px; color: var(--faint); line-height: 1.4; max-width: 46ch; }
.cp-ui .cp-ambito b { color: var(--muted); font-weight: 700; }

/* ── La caja ───────────────────────────────────────────────────────────────── */
/* De borde a borde: pierde el radio y los trazos laterales porque ya no tiene
   a los lados de qué separarse, y así el comitente de la primera columna
   arranca en la misma columna que el título del módulo.

   `min-height: 0` no es decorativo: un ítem flex sin él estira en vez de
   scrollear, y con `overflow` distinto de `visible` se encoge hasta cero — se
   ve perfecto mientras recorta. */
.cp-ui .cp-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;
}
.cp-ui .cp-scroll { overflow: auto; flex: 1; min-height: 0; }

/* ── La grilla ─────────────────────────────────────────────────────────────── */
/* Comitente · OCA · fecha · pactado · recibido · vendido · libre en planta ·
   cómo va · a recibir · acciones. LAS MISMAS DIEZ COLUMNAS PARA LAS TRES
   BANDEJAS: lo que cambia entre Vivas, Vendido s/liq. y Liquidadas es qué
   filas entran, no qué se dice de cada una. */
.cp-ui table.cp-g { width: 100%; border-collapse: collapse; font-size: 12.8px; }
.cp-ui table.cp-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 10px;
    border-bottom: 2px solid var(--ink); white-space: nowrap;
}
.cp-ui table.cp-g td {
    padding: 8px 10px; border-bottom: 1px solid var(--hair);
    color: var(--ink); vertical-align: middle; white-space: nowrap;
}
/* El único que envuelve es el comitente: es texto de largo variable. Un número
   partido en dos renglones se lee como dos números. */
.cp-ui table.cp-g td.wrap, .cp-ui table.cp-g th.wrap { white-space: normal; min-width: 150px; }
.cp-ui table.cp-g tbody tr { transition: background .13s var(--curva); cursor: pointer; }
.cp-ui table.cp-g tbody tr:hover { background: var(--navy-050); }
.cp-ui table.cp-g .n { text-align: right; font-variant-numeric: tabular-nums; }
.cp-ui table.cp-g .c { text-align: center; }
.cp-ui table.cp-g .mono {
    font-family: Consolas, "SF Mono", "Roboto Mono", monospace;
    font-weight: 700; font-variant-numeric: tabular-nums; color: var(--navy);
}
.cp-ui table.cp-g .sub { display: block; font-size: 10.5px; color: var(--faint); font-weight: 400; margin-top: 1px; }
.cp-ui table.cp-g .n .sub { text-align: right; }
.cp-ui table.cp-g td .neg  { color: var(--crit); font-weight: 700; }
.cp-ui table.cp-g td .okv  { color: var(--ok);   font-weight: 700; }
.cp-ui table.cp-g td .mutv { color: var(--faint); }
.cp-ui table.cp-g td .nota { font-size: 11px; color: var(--crit); 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
   lo que la OCA TIENE. Verde hay azúcar libre en planta; navy tenue no hay
   nada libre pero viene en camino; gris no queda nada (agotada o liquidada);
   rojo un descubierto —esa fila sí lleva el fondo tenue, porque es lo único de
   la mesa que está MAL— o una OCA imputada de más. */
.cp-ui table.cp-g td:first-child { border-left: 3px solid transparent; padding-left: calc(var(--gutter) - 3px); }
.cp-ui table.cp-g th:first-child { padding-left: var(--gutter); }
.cp-ui table.cp-g th:last-child,
.cp-ui table.cp-g td:last-child { padding-right: var(--gutter); }
.cp-ui table.cp-g tr.st-planta td:first-child { border-left-color: var(--ok); }
.cp-ui table.cp-g tr.st-camino td:first-child { border-left-color: var(--navy-300); }
.cp-ui table.cp-g tr.st-nada   td:first-child { border-left-color: var(--hair-strong); }
.cp-ui table.cp-g tr.st-nada   td { color: var(--muted); }
.cp-ui table.cp-g tr.st-sobre  td:first-child { border-left-color: var(--crit); }
.cp-ui table.cp-g tr.st-desc   td:first-child { border-left-color: var(--crit); }
.cp-ui table.cp-g tr.st-desc   td { background: var(--crit-050); }
.cp-ui table.cp-g tbody tr.st-desc:hover td { background: #fbe3e3; }

/* ── La barra de la fila: «cómo va» ────────────────────────────────────────── */
/* LA MISMA BARRA DEL PICKER DEL DESPACHO (form-mw-gates.js, barraARecibir),
   sobre lo pactado: liquidado por LP · vendido sin liquidar · libre en planta
   · falta ingresar. Los colores no son categoría: navy tenue ya está
   liquidado, gris se vendió y falta liquidar, verde está y se puede vender,
   rayado todavía no llegó. Es la única pieza de la mesa que se lee sin
   números, y por eso está en cada fila y no en la ficha. */
.cp-ui .cp-stk { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--hair); min-width: 120px; }
.cp-ui .cp-stk span { display: block; height: 100%; }
.cp-ui .cp-stk .lp { background: var(--navy-300); }
.cp-ui .cp-stk .vd { background: #9aa5b5; }
.cp-ui .cp-stk .lb { background: var(--ok); }
.cp-ui .cp-stk .ar { background: repeating-linear-gradient(135deg, #8fb6e0 0 4px, #dbe8f6 4px 8px); }
.cp-ui table.cp-g td.barra { padding-left: 18px; min-width: 150px; }
.cp-ui table.cp-g th.barra { padding-left: 18px; }

/* La leyenda de la barra vive en el pie, una sola vez. */
.cp-ui .cp-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--muted); }
.cp-ui .cp-leg i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.cp-ui .cp-leg i.lp { background: var(--navy-300); }
.cp-ui .cp-leg i.vd { background: #9aa5b5; }
.cp-ui .cp-leg i.lb { background: var(--ok); }
.cp-ui .cp-leg i.ar { background: repeating-linear-gradient(135deg, #8fb6e0 0 3px, #dbe8f6 3px 6px); }

/* ── Pastillas de estado ───────────────────────────────────────────────────── */
/* Descubierto, sobre-imputada y bloqueada en rojo —es lo único de la mesa que
   dice que algo está MAL—; religar en ámbar, porque pide que alguien mire; el
   LP en navy tenue, que es información y no un problema. */
.cp-ui .cp-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; vertical-align: middle;
}
.cp-ui .cp-b.nav { background: var(--navy-050); color: var(--navy-500); border-color: #cfdcf1; }
.cp-ui .cp-b.wrn { background: var(--warn-050); color: var(--warn); border-color: var(--warn-hair); }
.cp-ui .cp-b.ok  { background: var(--ok-050);  color: var(--ok);  border-color: var(--ok-hair); }
.cp-ui .cp-b.neg { background: var(--crit-050); color: var(--crit); border-color: var(--crit-hair); }
.cp-ui .cp-b.mut { background: #f4f6f9; color: var(--faint); border-color: var(--hair-strong); }
.cp-ui table.cp-g td .cp-b + .cp-b { margin-left: 4px; }

/* ── Botones de fila ───────────────────────────────────────────────────────── */
/* CON RÓTULO (lección de Movimientos: dos glifos iguales que hacían cosas
   distintas). «Ver» abre la ficha de la OCA; «Ver ventas» abre las ventas sin
   OCA del comitente; «LP» descarga el PDF de la liquidación. */
.cp-ui .cp-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;
    text-decoration: none; display: inline-block; line-height: 1.4;
    transition: background .13s var(--curva), border-color .13s var(--curva), color .13s var(--curva);
}
.cp-ui .cp-min:hover, .cp-ui .cp-min:focus-visible {
    background: var(--navy-050); border-color: var(--navy-300); outline: none;
}
.cp-ui .cp-min.peligro { color: var(--crit); border-color: var(--crit-hair); }
.cp-ui .cp-min.peligro:hover, .cp-ui .cp-min.peligro:focus-visible { background: var(--crit-050); border-color: var(--crit); }
.cp-ui table.cp-g .acc { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }

/* ── El pie que CONFIESA EL CORTE ──────────────────────────────────────────── */
/* La lista se dibuja de a 20 y el listener trae 500 compras: el pie dice
   cuántas se están mostrando de cuántas hay en la bandeja, y suma la bandeja
   ENTERA, no lo visible — el pie de la tabla vieja sumaba las 20 filas
   dibujadas y lo llamaba total. */
.cp-ui .cp-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);
}
.cp-ui .cp-pie b { color: var(--ink); font-variant-numeric: tabular-nums; }
.cp-ui .cp-pie .sp { flex: 1; }
.cp-ui .cp-pie:empty { display: none; }

/* ── El vacío ──────────────────────────────────────────────────────────────── */
/* Dice QUÉ bandeja está vacía y, si hay algo escrito en el buscador, que eso
   puede ser la razón y en qué otra bandeja sí hay. «Sin OCAs con saldo
   disponible» a secas era la respuesta de la tabla vieja. */
.cp-ui .cp-vacio { padding: 46px 26px; text-align: center; color: var(--faint); }
.cp-ui .cp-vacio .material-symbols-outlined { font-size: 32px; color: var(--hair-strong); }
.cp-ui .cp-vacio p { margin: 8px 0 0; font-size: 12.5px; }
.cp-ui .cp-vacio p b { color: var(--muted); }

/* ── A 390 px ─────────────────────────────────────────────────────────────── */
/* Este módulo no tiene teléfono. Lo de acá es sólo que la mesa no rompa la
   página en una ventana angosta: la tabla scrollea ADENTRO de la caja
   (`.cp-scroll` es `overflow: auto`), así que la foto la muestra cortada y
   está bien — el navegador dibuja la barra sólo al scrollear. */
@media (max-width: 640px) {
    .cp-ui .cp-tira { padding: 0 12px 10px; }
    .cp-ui .cp-bar { padding: 0 12px 10px; }
    .cp-ui .cp-search { flex: 1 1 100%; }
    .cp-ui .cp-ambito { max-width: none; }
    .cp-ui table.cp-g th:first-child,
    .cp-ui table.cp-g td:first-child { padding-left: 12px; }
    .cp-ui table.cp-g th:last-child,
    .cp-ui table.cp-g td:last-child { padding-right: 12px; }
    .cp-ui .cp-pie { padding: 9px 12px; }
}


/* =============================================================================
   3. LA FICHA DE LA OCA — cuatro números, tres cuerpos, los verbos
   =============================================================================
   Ronda 2 cerrada el 22/09/2026: ganó la A, «la ficha de dos columnas»
   (docs/compras/02-ronda2-la-ficha.html). Portado de `ord-ui.css` §3, que es la
   ficha hermana: cabecera navy, a la izquierda lo que la OCA ES, a la derecha
   lo que le PASÓ, el pie que cierra. Cero tokens propios.

   LO QUE MUERE. La ficha vieja decía «Saldo 5.288 bls» = original − consumido,
   OTRA cuenta que la mesa (489 libres en planta + 4.799 a recibir); el LP que
   la liquidó no aparecía en ninguna parte —un candadito gris por fila—; cinco
   verbos macizos en cinco colores de familia (rosa, ámbar, celeste, verde,
   gris) y hasta diez según el estado; los movimientos detrás de un chevron
   mudo. Acá los cuatro números son los de la mesa (`saldoDeOca`), la
   liquidación es un cuerpo, los verbos son una lista con nombre y el color va
   sólo en el trazo del que anula.

   EL VELO CUELGA DE #page-compras, al lado del armazón y no adentro: lleva el
   scope EN SU PROPIO ELEMENTO y escrito COMO COMPUESTO, `.cp-ui.cp-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).

   NO SE LLAMA `.cp-panel`: ese nombre ya es el de los paneles de sección (§1).
   Un choque de clase dentro del mismo scope se ve perfecto hasta que no.
   ========================================================================== */

.cp-ui.cp-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;
}
.cp-ui.cp-velo.hidden { display: none; }

.cp-ui .cp-ficha {
    background: var(--surface); border-radius: var(--r-card);
    box-shadow: var(--e3);
    width: min(1080px, 100%); max-height: min(92vh, 840px);
    display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}

/* ── La cabecera ───────────────────────────────────────────────────────────── */
/* Navy plena, y es la ÚNICA de la ficha: la franja de los números es clara, el
   pie es claro y adentro no hay ninguna otra superficie llena (manual §1.2). */
.cp-ui .cp-ficha-h {
    background: var(--navy); color: #fff;
    padding: 13px 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.cp-ui .cp-ficha-h .lb {
    font-size: .6rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
    color: #9fc0ee;
}
.cp-ui .cp-ficha-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;
}
.cp-ui .cp-ficha-h .quien { font-size: 15px; font-weight: 700; }
.cp-ui .cp-ficha-h .sp { flex: 1; }
.cp-ui .cp-ficha-h .fecha { font-size: 11.5px; color: #b9cef0; }
/* La pastilla sobre navy no puede usar los fondos claros de `.cp-b`: sobre navy
   no contrastan. Un token de contraste vale sobre el fondo para el que se
   eligió (manual §7), así que acá se declara aparte y a propósito. */
.cp-ui .cp-ficha-h .cp-b {
    background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .28); color: #fff;
}
.cp-ui .cp-ficha-h .cp-b.ok  { color: #bfe8d2; border-color: rgba(191, 232, 210, .45); }
.cp-ui .cp-ficha-h .cp-b.wrn { color: #ffd9a8; border-color: rgba(255, 217, 168, .45); }
.cp-ui .cp-ficha-h .cp-b.neg { color: #ffc4c4; border-color: rgba(255, 196, 196, .5); }
.cp-ui .cp-ficha-h .cerrar {
    background: transparent; border: 0; color: rgba(255, 255, 255, .75);
    cursor: pointer; border-radius: 8px; padding: 4px; line-height: 0;
}
.cp-ui .cp-ficha-h .cerrar:hover, .cp-ui .cp-ficha-h .cerrar:focus-visible {
    background: rgba(255, 255, 255, .14); color: #fff; outline: none;
}

/* ── Los cuatro números, en una franja clara bajo la cabecera ──────────────── */
/* Pactado · recibido · vendido · libre en planta, y la barra del picker. Son
   LOS DE LA MESA, misma cuenta: la ficha no puede decir un saldo que la fila
   de atrás no dice. Los escribe `_cpFichaPintar` con `saldoDeOca()`. */
.cp-ui .cp-4n {
    display: grid; grid-template-columns: repeat(4, 1fr) 1.3fr;
    border-bottom: 1px solid var(--hair); background: #fafbfd;
}
.cp-ui .cp-4n > div { padding: 11px 18px; border-right: 1px solid var(--hair); min-width: 0; }
.cp-ui .cp-4n > div:last-child { border-right: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.cp-ui .cp-4n .k { font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.cp-ui .cp-4n .v { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; margin-top: 2px; color: var(--ink); }
.cp-ui .cp-4n .v small { font-size: .68rem; font-weight: 600; color: var(--faint); margin-left: 4px; }
.cp-ui .cp-4n .v.ok  { color: var(--ok); }
.cp-ui .cp-4n .v.neg { color: var(--crit); }
.cp-ui .cp-4n .d { font-size: .68rem; color: var(--faint); font-weight: 600; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-ui .cp-4n .d b { color: var(--muted); }

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

/* ── Lista de definiciones ─────────────────────────────────────────────────── */
.cp-ui .cp-dl { display: flex; flex-direction: column; }
.cp-ui .cp-dl > div {
    display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
    border-bottom: 1px solid var(--hair); padding: 6px 0;
}
.cp-ui .cp-dl > div:last-child { border-bottom: 0; }
.cp-ui .cp-dl .k {
    font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--faint); white-space: nowrap;
}
.cp-ui .cp-dl .v { font-weight: 600; text-align: right; font-size: 12.8px; min-width: 0; }
.cp-ui .cp-dl .v small { display: block; font-weight: 400; color: var(--muted); font-size: 11px; margin-top: 1px; }
.cp-ui .cp-dl .v.neg { color: var(--crit); }
/* Un campo largo —un motivo de bloqueo, las facturas de compra— no entra en
   una fila de dos columnas: va abajo y a la izquierda, que es como se lee. */
.cp-ui .cp-dl > div.larga { flex-direction: column; align-items: stretch; gap: 4px; }
.cp-ui .cp-dl > div.larga .v { text-align: left; font-weight: 400; font-size: 12.3px; color: var(--muted); }

/* ── La liquidación, como cuerpo ───────────────────────────────────────────── */
/* Cada LP con su número, CAE o cierre, período, bolsas y PDF; y lo que falta
   liquidar con su cantidad. Sale de `lp_locks`. La tarjeta punteada es lo que
   todavía no tiene LP. */
.cp-ui .cp-lp {
    border: 1px solid var(--hair); border-radius: 10px; padding: 8px 12px;
    background: var(--surface); display: flex; flex-direction: column; gap: 4px; font-size: 12.3px;
}
.cp-ui .cp-lp + .cp-lp { margin-top: 8px; }
.cp-ui .cp-lp .t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cp-ui .cp-lp .mono { font-family: Consolas, "SF Mono", monospace; font-weight: 700; color: var(--navy); font-size: 12px; }
.cp-ui .cp-lp .d { font-size: 11px; color: var(--muted); }
.cp-ui .cp-lp .d b { color: var(--ink); }
.cp-ui .cp-lp .t .cp-min { margin-left: auto; }
.cp-ui .cp-lp.pend { border-style: dashed; }
.cp-ui .cp-lp.pend .mono { color: var(--muted); }

/* ── Qué se puede hacer: la lista de verbos ────────────────────────────────── */
/* CON RÓTULO, uno debajo del otro, y el que anula detrás de un filete y en rojo
   DE TRAZO, en reposo: el peligro se dice, no se pinta de macizo. Los botones
   son los de siempre (mismos ids: cada verbo lee su `dataset.compraId` del
   suyo) y el que los muestra u oculta es `verDetalleOCA`, según el estado. Un
   `.hidden` sobre un botón lo saca de la lista; `tokens.css` lo resuelve para
   `.cp-ui`. */
.cp-ui .cp-verbos { display: flex; flex-direction: column; gap: 6px; }
.cp-ui .cp-verbos .filete { height: 1px; background: var(--hair-strong); margin: 4px 0; }
.cp-ui .cp-verbos .filete.hidden { display: none; }
.cp-ui .cp-verbo {
    display: flex; align-items: center; gap: 9px; padding: 6px 10px;
    border: 1px solid var(--hair-strong); border-radius: 8px; background: var(--surface);
    font: inherit; font-size: 12.3px; font-weight: 600; color: var(--navy); text-align: left;
    cursor: pointer; width: 100%;
    transition: background .13s var(--curva), border-color .13s var(--curva);
}
.cp-ui .cp-verbo:hover, .cp-ui .cp-verbo:focus-visible { background: var(--navy-050); border-color: var(--navy-300); outline: none; }
.cp-ui .cp-verbo .material-symbols-outlined { font-size: 17px; color: var(--muted); flex: 0 0 auto; }
.cp-ui .cp-verbo small { font-weight: 400; color: var(--muted); margin-left: auto; font-size: 10.5px; white-space: nowrap; }
.cp-ui .cp-verbo.peligro { color: var(--crit); border-color: var(--crit-hair); }
.cp-ui .cp-verbo.peligro .material-symbols-outlined { color: var(--crit); }
.cp-ui .cp-verbo.peligro:hover, .cp-ui .cp-verbo.peligro:focus-visible { background: var(--crit-050); border-color: var(--crit); }
.cp-ui .cp-verbos .nada { font-size: 11.5px; color: var(--faint); font-style: italic; }

/* ── El aviso ──────────────────────────────────────────────────────────────── */
.cp-ui .cp-aviso {
    display: flex; gap: 11px; border: 1px solid; border-radius: 10px;
    padding: 9px 13px; font-size: 12.3px; line-height: 1.45; margin-bottom: 14px;
}
.cp-ui .cp-aviso .material-symbols-outlined { font-size: 18px; flex: 0 0 auto; }
.cp-ui .cp-aviso.wrn { background: var(--warn-050); border-color: var(--warn-hair); color: #7a4300; }
.cp-ui .cp-aviso.nav { background: var(--navy-050); border-color: #cfdcf1; color: var(--navy-500); }
.cp-ui .cp-aviso.neg { background: var(--crit-050); border-color: var(--crit-hair); color: #8c1d1d; }
.cp-ui .cp-aviso b { color: inherit; font-weight: 700; }
/* Un aviso es una oración con negritas adentro: el texto va en UN <span>, o el
   flex del contenedor lo parte en columnas. */
.cp-ui .cp-aviso > span:last-child { min-width: 0; }

/* ── La tabla de comprobantes ──────────────────────────────────────────────── */
/* La fila es la FACTURA (la unidad con la que imputa Imputación Consignación y
   con la que se emite el LP); los MWs se despliegan con un botón que dice
   cuántos son, no con un chevron mudo. */
.cp-ui table.cp-mini { width: 100%; border-collapse: collapse; font-size: 12.2px; }
.cp-ui table.cp-mini th {
    position: sticky; top: 0; z-index: 1; background: var(--surface);
    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;
}
.cp-ui table.cp-mini td {
    padding: 6px 7px; border-bottom: 1px solid var(--hair);
    font-variant-numeric: tabular-nums; white-space: nowrap; vertical-align: middle;
}
/* El cliente es el único de largo variable: se recorta con puntos, y el nombre
   entero va en el `title`. Con 190 px la columna de estado se salía de la
   ficha (lo agarró la FOTO a 1366). */
.cp-ui table.cp-mini td.l { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.cp-ui table.cp-mini .n { text-align: right; }
.cp-ui table.cp-mini tfoot td {
    border-bottom: 0; border-top: 2px solid var(--hair-strong);
    font-weight: 700; padding-top: 8px;
}
.cp-ui table.cp-mini .mono {
    font-family: Consolas, "SF Mono", monospace; font-size: 11.5px; color: var(--navy); font-weight: 700;
}
.cp-ui table.cp-mini .dim { color: var(--faint); }
.cp-ui table.cp-mini .neg { color: var(--crit); font-weight: 700; }
.cp-ui table.cp-mini tbody tr.cont td { background: #fdf8ef; }
.cp-ui table.cp-mini tbody tr.dev td  { background: var(--crit-050); }
/* Las filas de los MWs, debajo de su factura. */
.cp-ui table.cp-mini tr.mw td { background: #f7f9fc; font-size: 11.3px; color: var(--muted); }
.cp-ui table.cp-mini tr.mw td:first-child { padding-left: 26px; }
.cp-ui table.cp-mini tr.mw.hidden { display: none; }
.cp-ui .cp-exp {
    font: inherit; font-size: 10px; font-weight: 600; color: var(--muted);
    border: 1px solid var(--hair-strong); border-radius: 5px; padding: 0 5px; margin-left: 6px;
    background: var(--surface); cursor: pointer; white-space: nowrap;
}
.cp-ui .cp-exp:hover, .cp-ui .cp-exp:focus-visible { background: var(--navy-050); border-color: var(--navy-300); color: var(--navy); outline: none; }
.cp-ui .cp-exp .material-symbols-outlined { font-size: 12px; vertical-align: -2px; }

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

/* ── El pie ────────────────────────────────────────────────────────────────── */
/* Cierra, y confiesa la «½»: una factura repartida entre dos OCAs muestra acá
   la rebanada de ésta, no el comprobante entero. */
.cp-ui .cp-ficha-f {
    border-top: 1px solid var(--hair); background: #fafbfd;
    padding: 10px 22px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    font-size: 11.5px; color: var(--muted);
}
.cp-ui .cp-ficha-f .sp { flex: 1; }
.cp-ui .cp-ficha-f .ref { font-size: 11px; color: var(--faint); font-family: Consolas, monospace; }
.cp-ui .cp-btn {
    font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
    border-radius: 9px; padding: 7px 16px;
    background: var(--surface); color: var(--navy); border: 1px solid var(--hair-strong);
    transition: background .13s var(--curva), border-color .13s var(--curva);
}
.cp-ui .cp-btn:hover, .cp-ui .cp-btn:focus-visible { background: var(--navy-050); border-color: var(--navy-300); outline: none; }

/* ── A 390 px ─────────────────────────────────────────────────────────────── */
/* Las dos columnas se apilan, la franja de números pasa a dos por fila 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. */
/* LAS FILAS APILADAS MIDEN SU CONTENIDO (`grid-auto-rows: max-content`) y las
   columnas recuperan `min-height: auto`: con el `min-height: 0` de escritorio
   —que ahí es lo que las hace scrollear— una grilla más corta que su contenido
   encoge las dos filas y la de abajo se dibuja ENCIMA de la de arriba. Lo
   agarró la FOTO a 390, no una aserción. ⚠ `ord-ui.css` §3 apila igual y sin
   estas dos líneas: mirarlo cuando alguien abra una orden desde el teléfono. */
@media (max-width: 780px) {
    .cp-ui.cp-velo { padding: 0; }
    .cp-ui .cp-ficha { max-height: 100vh; height: 100%; border-radius: 0; }
    .cp-ui .cp-4n { grid-template-columns: 1fr 1fr; }
    .cp-ui .cp-4n > div:last-child { grid-column: 1 / -1; }
    .cp-ui .cp-cols { grid-template-columns: 1fr; grid-auto-rows: max-content; overflow: auto; }
    .cp-ui .cp-col { overflow: visible; min-height: auto; }
    .cp-ui .cp-col-l { border-right: 0; border-bottom: 1px solid var(--hair); }
}


/* =============================================================================
   4. PROPIA, ORGÁNICA Y AZEF — los baldes, sus compras y Stock Conciliado
   =============================================================================
   Mismo patrón que la mesa (§2): una tira, una fila de chips, una grilla y un
   pie. Acá no hubo lámina propia: la A decidió el tratamiento del módulo y
   dijo que Stock Conciliado pasa a ser sección con puerta; la forma de la
   sección es la de la mesa, que Hernán ya vio construida.

   LO QUE MUERE. Tres tarjetas de balde en cuatro paletas (verde propia, lima
   orgánica, ámbar AZEF, azul consignación) que abrían cada una su modal; tres
   listas de cinco filas con cabecera rellena de su color; y una pantalla
   completa —Stock Conciliado— escondida con `hidden`, que para mostrarse
   tapaba el armazón entero y no tenía puerta en ningún router.

   LA REGLA DE COLOR, otra vez: el balde NO es un color. Propia no es verde
   por ser propia. Lo que lleva color es lo que PIDE algo —ámbar una compra
   sin factura vinculada, que no suma al balde— o lo que está MAL —rojo un
   stock negativo o un descubierto por ventas—.
   ========================================================================== */

/* ── Las tres tarjetas de balde son BOTONES ────────────────────────────────── */
/* Abren los comprobantes de Flexxus del balde (propia, orgánica) o los
   movimientos de AZEF: por eso se levantan al pasar (gesto del ABM). Llevan
   dos renglones de bajada: quién es el titular del número y cuándo se
   sincronizó; y cuántas compras, cuánto falta recibir, cuánto sin factura. */
.cp-ui button.cp-stat { font: inherit; text-align: left; cursor: pointer; color: inherit; transition: box-shadow .18s var(--curva), transform .18s var(--curva); }
.cp-ui button.cp-stat:hover, .cp-ui button.cp-stat:focus-visible { transform: translateY(-2px); box-shadow: var(--e2); outline: none; }
.cp-ui .cp-stat .d + .d { margin-top: 1px; }
.cp-ui .cp-stat .d b { color: var(--muted); }
.cp-ui .cp-stat.wrn { border-left-color: var(--warn); background: linear-gradient(180deg, var(--warn-050), #fff 62%); }
.cp-ui .cp-stat.wrn .v { color: var(--ink); }
.cp-ui .cp-stat.wrn .d b.pide { color: var(--warn); }
.cp-ui .cp-stat .k .material-symbols-outlined { font-size: 13px; vertical-align: -2px; margin-right: 4px; color: var(--faint); }

/* Stock Conciliado —la cuenta contable · físico · comprometido · disponible y
   el libro mayor— murió en la ronda 4 (25/09/2026): bajo «sólo lo facturado»
   la sección «Azúcar propia» (§7) es la pantalla del balde. */

/* =============================================================================
   5. REGISTRAR — el Registro, las OC sin registrar y el asistente de compra
   =============================================================================
   NO NACE UN VOCABULARIO NUEVO: el Registro es la mesa (§2) con filtros, las
   OC sin registrar son una tarjeta con una tabla chica, y el asistente de
   nueva compra reusa el velo, la cabecera navy y el pie de la ficha (§3). Lo
   único que esta sección agrega es lo que un diálogo tiene y una ficha no:
   CAMPOS, OPCIONES para elegir, y un pie con dos botones. Portado de
   `ord-ui.css` §4, que es el hermano.

   LO QUE MUERE. El Registro tenía sus filtros en una tarjeta pizarra con
   labels grises y una tabla con pastillas de cuatro colores por TIPO (azul
   consignación, verde propia, lima orgánica, ámbar AZEF) y tres por estado.
   La franja de OC sin registrar vivía arriba de la mesa de consignación, en
   ámbar relleno, con un botón macizo. El asistente era un modal blanco con
   cuatro tarjetas de tipo en cuatro colores, dos tarjetas de modo (esmeralda
   y celeste), un banner ámbar y botones azul-900. El tipo de una compra no es
   un color, y el modo tampoco: son elecciones.
   ========================================================================== */

/* ── El Registro: la mesa con filtros ──────────────────────────────────────── */
.cp-ui #cp-sec-registro { overflow: hidden; }
.cp-ui .cp-filtro { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cp-ui .cp-filtro > span {
    font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint);
}
.cp-ui .cp-in, .cp-ui select.cp-in, .cp-ui .cp-txt {
    font: inherit; font-size: 12.6px; color: var(--ink);
    background: var(--surface); border: 1px solid var(--hair-strong);
    border-radius: 9px; padding: 7px 11px; width: 100%;
    transition: border-color .14s var(--curva), box-shadow .14s var(--curva);
}
.cp-ui .cp-in:focus, .cp-ui select.cp-in:focus, .cp-ui .cp-txt:focus {
    outline: none; border-color: var(--navy-300); box-shadow: 0 0 0 3px var(--navy-050);
}
.cp-ui .cp-in[readonly], .cp-ui .cp-in:disabled { background: #f4f6f9; color: var(--muted); cursor: not-allowed; }
.cp-ui .cp-txt { resize: vertical; min-height: 60px; line-height: 1.5; }
.cp-ui .cp-in.num { font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }
.cp-ui .cp-filtros .cp-filtro .cp-in { width: auto; min-width: 128px; padding: 6px 9px; font-size: 12px; }
/* Las filas del Registro: la franja dice el ESTADO de la compra, no el tipo. */
.cp-ui table.cp-g tr.st-fin td:first-child { border-left-color: var(--warn); }

/* ── Las OC de Flexxus sin registrar: una tarjeta que pide algo ────────────── */
/* Ámbar porque PIDE (manual §1.1): son órdenes de compra que GS no tiene. Vive
   arriba del Registro, que es donde se registra; la cola de la barra de
   secciones lleva acá. Con cero no se dibuja nada. */
.cp-ui .cp-oc {
    margin: 0 var(--gutter) 13px;
    background: var(--warn-050); border: 1px solid var(--warn-hair); border-radius: var(--r-card);
    padding: 10px 14px 6px; box-shadow: var(--e1);
}
.cp-ui .cp-oc .t { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: #7a4300; }
.cp-ui .cp-oc .t .material-symbols-outlined { font-size: 20px; color: var(--warn); }
.cp-ui .cp-oc .t > span { min-width: 0; }
.cp-ui .cp-oc .t b { color: #5c3200; }
.cp-ui .cp-oc .t .sp { flex: 1; }
.cp-ui .cp-oc table.cp-mini { margin-top: 6px; }
.cp-ui .cp-oc table.cp-mini th { background: transparent; border-bottom-color: var(--warn-hair); color: #8a5a1a; position: static; }
.cp-ui .cp-oc table.cp-mini td { border-bottom-color: var(--warn-hair); }
.cp-ui .cp-oc table.cp-mini tr:last-child td { border-bottom: 0; }

/* ── El asistente: un diálogo angosto con pasos ────────────────────────────── */
.cp-ui .cp-ficha.chico { width: min(600px, 100%); }
.cp-ui .cp-ficha-h .tit { font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
/* Los tres pasos, como puntos: el hecho lleno, el actual con anillo, el que
   falta tenue. Es un indicador, no navegación: no se toca. */
.cp-ui .cp-pasos { display: inline-flex; gap: 7px; align-items: center; }
.cp-ui .cp-pasos i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .28); display: block; }
.cp-ui .cp-pasos i.hecho { background: #fff; }
.cp-ui .cp-pasos i.actual { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .28); }
.cp-ui .cp-cuerpo { padding: 18px 22px; overflow: auto; flex: 1; min-height: 0; }
.cp-ui .cp-cuerpo > p.intro { margin: 0 0 14px; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.cp-ui .cp-cuerpo > p.intro b { color: var(--ink); }

/* ── Opciones: las tarjetas para elegir (tipo, modo) ───────────────────────── */
/* Sin color de familia: lo que distingue una opción es su nombre y su bajada.
   La elegida se marca con el filete interior navy, como los chips. */
.cp-ui .cp-opciones { display: flex; flex-direction: column; gap: 8px; }
.cp-ui .cp-opciones.dos { flex-direction: row; }
.cp-ui .cp-opciones.dos .cp-opcion { flex: 1; }
.cp-ui .cp-opcion {
    display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
    padding: 11px 13px; border: 1px solid var(--hair-strong); border-radius: 11px;
    background: var(--surface); font: inherit; color: var(--ink); cursor: pointer;
    transition: border-color .14s var(--curva), background .14s var(--curva), box-shadow .14s var(--curva);
}
.cp-ui .cp-opcion:hover, .cp-ui .cp-opcion:focus-visible { border-color: var(--navy-300); background: var(--navy-050); outline: none; }
.cp-ui .cp-opcion.on { border-color: var(--navy); background: var(--navy-050); box-shadow: inset 3px 0 0 var(--navy); }
.cp-ui .cp-opcion > .material-symbols-outlined { font-size: 22px; color: var(--navy-500); flex: 0 0 auto; }
.cp-ui .cp-opcion > .material-symbols-outlined.ir { color: var(--faint); font-size: 18px; margin-left: auto; }
.cp-ui .cp-opcion .n { font-size: 13px; font-weight: 700; }
.cp-ui .cp-opcion .d { font-size: 11.5px; color: var(--muted); margin-top: 1px; line-height: 1.4; }
.cp-ui .cp-opcion > div { min-width: 0; }

/* ── Campos ────────────────────────────────────────────────────────────────── */
.cp-ui .cp-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.cp-ui .cp-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cp-ui .cp-campo.ancho { grid-column: 1 / -1; }
.cp-ui .cp-campo > label {
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint);
    display: flex; align-items: center; gap: 6px;
}
.cp-ui .cp-campo > label .material-symbols-outlined { font-size: 14px; color: var(--warn); }
.cp-ui .cp-campo .nota { font-size: 11px; color: var(--muted); min-height: 15px; line-height: 1.45; }
.cp-ui .cp-campo .nota b { color: var(--ink); font-variant-numeric: tabular-nums; }
.cp-ui .cp-campo .nota .neg { color: var(--crit); font-weight: 600; }
.cp-ui .cp-campo .nota .nav { color: var(--navy-500); }
/* La cantidad y su unidad, pegadas: son un solo dato dicho de dos maneras. */
.cp-ui .cp-cant { position: relative; }
.cp-ui .cp-cant .cp-in { padding-right: 58px; }
.cp-ui .cp-cant .u { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--faint); pointer-events: none; }
.cp-ui .cp-cant.pesos .cp-in { padding-left: 24px; padding-right: 11px; }
.cp-ui .cp-cant .p { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 12.5px; color: var(--faint); pointer-events: none; }
.cp-ui .cp-total { text-align: right; font-size: 12px; color: var(--muted); min-height: 16px; }
.cp-ui .cp-total b { color: var(--ink); font-variant-numeric: tabular-nums; }
/* El selector inteligente (`services/smart-selector.js`, Tailwind, once
   módulos) se viste por el contenedor: dos clases contra utilidades de una,
   sin `!important`. */
.cp-ui .cp-campo .relative > input {
    font: inherit; font-size: 12.6px; color: var(--ink);
    background: var(--surface); border: 1px solid var(--hair-strong);
    border-radius: 9px; padding: 7px 11px 7px 34px;
}
.cp-ui .cp-campo .relative > input:focus { outline: none; border-color: var(--navy-300); box-shadow: 0 0 0 3px var(--navy-050); }
.cp-ui .cp-campo .relative > div:first-child .material-symbols-outlined { font-size: 17px; color: var(--faint); }
.cp-ui .cp-campo ul { border-color: var(--hair-strong); border-radius: 10px; box-shadow: var(--e2); }
.cp-ui .cp-campo ul li { font-size: 12.5px; }

/* ── El resumen del paso 3: total y avisos ─────────────────────────────────── */
.cp-ui .cp-dl > div.total { background: #fafbfd; border-top: 2px solid var(--hair-strong); padding: 10px 0; }
.cp-ui .cp-dl > div.total .k { color: var(--ink); }
.cp-ui .cp-dl > div.total .v { font-size: 15px; font-weight: 800; }
.cp-ui .cp-cuerpo .cp-aviso { margin: 14px 0 0; }

/* ── El pie con dos botones ────────────────────────────────────────────────── */
/* El que sigue es navy sólido: es la única superficie llena del diálogo. */
.cp-ui .cp-btn.primario { background: var(--navy); color: #fff; border-color: var(--navy); }
.cp-ui .cp-btn.primario:hover, .cp-ui .cp-btn.primario:focus-visible { background: var(--navy-700); border-color: var(--navy-700); }
.cp-ui .cp-btn:disabled { background: var(--hair-strong); border-color: var(--hair-strong); color: var(--faint); cursor: not-allowed; }
.cp-ui .cp-ficha-f .cp-btn .material-symbols-outlined { font-size: 16px; vertical-align: -3px; margin-right: 4px; }

/* ── «Todas», el chip que lleva al Registro ────────────────────────────────── */
/* No es una bandeja de la mesa: es una puerta. Se ve como chip para vivir en
   la fila, pero no lleva contador ni estado activo. */
.cp-ui .cp-chip-ir {
    border: 1px dashed var(--hair-strong); background: transparent;
    border-radius: 999px; padding: 5px 10px 5px 12px;
    font: inherit; font-size: 12px; font-weight: 600; color: var(--muted);
    display: inline-flex; gap: 4px; align-items: center; cursor: pointer;
    transition: color .15s var(--curva), border-color .15s var(--curva);
}
.cp-ui .cp-chip-ir:hover, .cp-ui .cp-chip-ir:focus-visible { color: var(--navy); border-color: var(--navy-300); outline: none; }
.cp-ui .cp-chip-ir .material-symbols-outlined { font-size: 15px; }

@media (max-width: 640px) {
    .cp-ui .cp-campos { grid-template-columns: 1fr; }
    .cp-ui .cp-opciones.dos { flex-direction: column; }
    .cp-ui .cp-oc { margin: 0 12px 10px; }
}


/* =============================================================================
   §6 · LOS DIÁLOGOS DE GERENCIA (etapa 6, 23/09/2026 — ganó la B, «el verbo se
   decide en la ficha»: docs/compras/03-ronda3-los-dialogos.html)
   =============================================================================
   Tres piezas y ninguna superficie nueva:
   · EL VERBO EN LA COLUMNA (`.cp-vb`): toma la columna izquierda de la ficha
     donde estaba la lista de verbos. Sin tercera capa: la franja de arriba
     sigue a la vista y dice el ANTES → DESPUÉS (`.cp-4n > .cambia`).
   · LA TIRA (`.cp-err`): lo que falta o está mal, TODO junto, pegado al botón
     que lo disparó; el campo que falló se marca (`.cp-campo.mal`). Es la
     `.trz-err` de Trazabilidad (etapa 6) y el `.gs-dlg-err` de `pedir()`. En
     ámbar (`.wrn`) no es un error: es una pregunta que el segundo clic contesta.
   · Imputar descubiertos y Movimientos AZEF cuelgan del velo de la ficha
     (`.cp-ficha.chico` / `.medio`), con los renglones del mismo vocabulario.
   Cero tokens propios; el rojo es de lo que está MAL, nunca de la familia. */

/* ── El verbo toma la columna ──────────────────────────────────────────────── */
.cp-ui .cp-col-l.en-verbo > :not(.cp-vb) { display: none; }
.cp-ui .cp-vb[hidden] { display: none; }
.cp-ui .cp-vb { display: flex; flex-direction: column; }
.cp-ui .cp-vb-volver {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 5px;
    font: inherit; font-size: 11.5px; font-weight: 600; color: var(--navy-500);
    background: none; border: 0; padding: 2px 0; margin: 0 0 10px; cursor: pointer;
}
.cp-ui .cp-vb-volver .material-symbols-outlined { font-size: 15px; }
.cp-ui .cp-vb-volver:hover, .cp-ui .cp-vb-volver:focus-visible { color: var(--navy); text-decoration: underline; outline: none; }
.cp-ui .cp-vb-tit { font-size: 15px; font-weight: 800; color: var(--navy); margin: 0 0 3px; line-height: 1.3; }
.cp-ui .cp-vb-sub { font-size: 11.8px; color: var(--muted); margin: 0 0 12px; line-height: 1.5; }
/* Lo que va a pasar, un renglón por consecuencia: ✓ lo que cambia, — lo que no. */
.cp-ui .cp-vb-pasa { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 7px; }
.cp-ui .cp-vb-pasa li { display: grid; grid-template-columns: 18px 1fr; gap: 6px; font-size: 12px; line-height: 1.45; color: var(--ink); }
.cp-ui .cp-vb-pasa li.no { color: var(--muted); }
.cp-ui .cp-vb-pasa b { font-weight: 700; }
.cp-ui .cp-vb-pasa .ic {
    width: 16px; height: 16px; border-radius: 5px; margin-top: 1px;
    display: grid; place-items: center; font-size: 10px; font-weight: 800;
    background: var(--navy-050); color: var(--navy-500);
}
.cp-ui .cp-vb-pasa li.no .ic { background: #eef0f4; color: var(--faint); }
.cp-ui .cp-vb .cp-campo { margin: 0 0 12px; }
.cp-ui .cp-vb .cp-txt { resize: vertical; min-height: 64px; line-height: 1.45; }
.cp-ui .cp-vb-pie { display: flex; gap: 8px; align-items: center; border-top: 1px solid var(--hair); padding-top: 12px; margin-top: 2px; flex-wrap: wrap; }
.cp-ui .cp-vb-pie .sp { flex: 1; }
.cp-ui .cp-vb-nota { font-size: 10.8px; color: var(--faint); margin: 8px 0 0; line-height: 1.45; }
/* El verbo peligroso: rojo DE TRAZO en la lista, rojo lleno recién acá, en el
   botón que lo hace. Es el único rojo lleno de la ficha. */
.cp-ui .cp-btn.peligro { background: var(--crit); border-color: var(--crit); color: #fff; }
.cp-ui .cp-btn.peligro:hover, .cp-ui .cp-btn.peligro:focus-visible { background: #a51f1f; border-color: #a51f1f; }

/* ── La franja dice qué cambia ─────────────────────────────────────────────── */
/* La quinta celda deja la barra y pasa a ser la cifra que el verbo mueve. Navy
   tenue con filete abajo: se señala sin gritar; el rojo queda para lo mal. */
.cp-ui .cp-4n > div.cambia { background: var(--navy-050); box-shadow: inset 0 -2.5px 0 var(--navy); display: block; }
.cp-ui .cp-4n > div.cambia .v { color: var(--navy); }
.cp-ui .cp-4n > div.cambia .d { color: var(--navy-500); }
.cp-ui .cp-4n .v .de { color: var(--faint); font-weight: 700; font-size: 1rem; text-decoration: line-through; text-decoration-thickness: 1.5px; margin-right: 6px; }
.cp-ui .cp-4n .v .fl { color: var(--faint); font-weight: 400; font-size: .95rem; margin-right: 6px; }
.cp-ui .cp-4n.cuatro { grid-template-columns: repeat(4, 1fr); }
.cp-ui .cp-4n.cuatro > div:last-child { display: block; }

/* ── La tira ───────────────────────────────────────────────────────────────── */
.cp-ui .cp-err {
    display: flex; gap: 9px; align-items: flex-start;
    background: var(--crit-050); border: 1px solid var(--crit-hair); color: #8c1d1d;
    border-radius: 10px; padding: 9px 12px; margin: 0 0 12px;
    font-size: 12px; line-height: 1.45;
}
.cp-ui .cp-err[hidden] { display: none; }
.cp-ui .cp-err > .material-symbols-outlined { font-size: 17px; color: var(--crit); flex: 0 0 auto; margin-top: 1px; }
.cp-ui .cp-err ul { margin: 0; padding: 0; list-style: none; min-width: 0; }
.cp-ui .cp-err li + li { margin-top: 3px; }
.cp-ui .cp-err b { font-weight: 700; }
.cp-ui .cp-err.wrn { background: var(--warn-050); border-color: var(--warn-hair); color: #7a4300; }
.cp-ui .cp-err.wrn > .material-symbols-outlined { color: var(--warn); }
/* En un diálogo va ENTRE el cuerpo y el pie, a lo ancho: el cuerpo scrollea y
   un error que se puede ir de la pantalla scrolleando es una nota al pie. */
.cp-ui .cp-ficha > .cp-err { flex-shrink: 0; margin: 0; border-radius: 0; border-width: 1px 0 0; padding: 9px 22px; }

/* El campo que falló: borde y sombra, no fondo (el fondo ya dice «no se usa»). */
.cp-ui .cp-campo .req { color: var(--crit); }
.cp-ui .cp-campo.mal > label { color: var(--crit); }
.cp-ui .cp-campo.mal .cp-in,
.cp-ui .cp-campo.mal .relative > input,
.cp-ui .cp-campo.mal .cp-opcion { border-color: var(--crit); box-shadow: 0 0 0 3px var(--crit-050); }

/* ── Los diálogos que cuelgan del velo ─────────────────────────────────────── */
.cp-ui .cp-ficha.medio { width: min(880px, 100%); }
.cp-ui .cp-cuerpo h5 {
    font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--faint); margin: 0 0 8px;
}
.cp-ui .cp-cuerpo * + h5 { margin-top: 18px; }
.cp-ui table.cp-mini .ok { color: var(--ok); font-weight: 700; }

/* Imputar descubiertos: un renglón por venta sin OCA; la cantidad aparece al elegir. */
.cp-ui .cp-descs { display: flex; flex-direction: column; border: 1px solid var(--hair); border-radius: 10px; overflow: hidden; }
.cp-ui .cp-desc + .cp-desc { border-top: 1px solid var(--hair); }
.cp-ui .cp-desc .fila { display: flex; align-items: center; gap: 11px; padding: 10px 13px; cursor: pointer; }
.cp-ui .cp-desc .fila:hover { background: #fafbfd; }
.cp-ui .cp-desc input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--navy); flex: 0 0 auto; cursor: pointer; }
.cp-ui .cp-desc .q { flex: 1; min-width: 0; font-size: 12.5px; }
.cp-ui .cp-desc .q small { display: block; color: var(--muted); font-size: 11px; margin-top: 1px; }
.cp-ui .cp-desc .n { text-align: right; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.cp-ui .cp-desc .n .neg { color: var(--crit); font-weight: 700; }
.cp-ui .cp-desc .n small { display: block; color: var(--faint); font-size: 10.5px; }
.cp-ui .cp-desc .cant { display: flex; align-items: center; gap: 10px; padding: 0 13px 11px 40px; font-size: 11.5px; color: var(--muted); }
.cp-ui .cp-desc .cant.hidden { display: none; }
.cp-ui .cp-desc .cant .cp-in { width: 110px; }

@media (max-width: 640px) {
    .cp-ui .cp-4n.cuatro { grid-template-columns: 1fr 1fr; }
    .cp-ui .cp-4n.cuatro > div:last-child { grid-column: auto; }
    .cp-ui .cp-desc .cant { padding-left: 13px; flex-wrap: wrap; }
}


/* =============================================================================
   7. AZÚCAR PROPIA, EL BALDE FACTURADO — la mesa del mayor (RONDA 4)
   =============================================================================
   docs/RUNBOOK-COMPRAS.md, ronda 4 (25/09/2026; ganó la A, «el balde es una
   sección»). NO NACE UN VOCABULARIO NUEVO: es la mesa (§2) con los filtros del
   Registro (§5) y el velo de la ficha (§3) para «compensar». Lo que esta
   sección agrega es lo que el mayor tiene y una OCA no: filas de TRES
   especies (el comprobante de Flexxus, la compra de GS sin factura, la venta
   de GS sin comprobante), y por eso tres franjas más.

   LO QUE MUERE. El modal verde de «Comprobantes del balde» (cabecera
   `bg-green-800` con un «Stock GS» en blanco, tres franjas de texto corrido
   en cuatro colores, tarjetas en Tailwind, «compensar» y «no suma» del mismo
   azul en cada fila) y la sección Stock Conciliado.

   LA FRANJA DE LA FILA ES LO QUE PIDE, nunca de qué lado es: ámbar lo que
   pide algo (sin compra, sin camión, sin factura), rojo con fondo lo que está
   MAL (venta sin comprobante, camión de otro tipo), navy punteado la fila que
   viene de GS y no del mayor, gris la que ya no cuenta (en saldo inicial,
   compensada). Una fila que cierra no lleva franja.
   ========================================================================== */
/* LA SECCIÓN ENTERA SCROLLEA (Hernán, 01/11/2026, D15): en una notebook la tira,
   los filtros y los chips dejaban una o dos filas de grilla a la vista. Ahora
   suben con la página y la grilla usa todo el alto; la cabecera de la tabla
   queda pegada arriba del panel (sticky contra el panel, que es el que scrollea). */
.cp-ui #cp-sec-balde { overflow: auto; }
.cp-ui #cp-sec-balde .cp-mesa, .cp-ui #cp-sec-balde .cp-caja { flex: none; min-height: auto; }
.cp-ui #cp-sec-balde .cp-scroll { flex: none; overflow: visible; min-height: auto; }
/* En el teléfono la grilla es más ancha que la pantalla: ahí la caja vuelve a
   tener su scroll lateral (y la cabecera deja de pegarse, que a ese ancho no se lee igual). */
@media (max-width: 760px) { .cp-ui #cp-sec-balde .cp-scroll { overflow-x: auto; } }
.cp-ui #cp-bf-aviso:empty { display: none; }
.cp-ui #cp-bf-aviso .cp-aviso { margin: 0 var(--gutter) 12px; }
.cp-ui #cp-bf-aviso .cp-aviso .cp-min { margin-left: auto; align-self: center; flex: 0 0 auto; }
.cp-ui #cp-bf-aviso .cp-aviso.nav { background: var(--navy-050); border-color: #cfdcf1; color: var(--navy-500); }
.cp-ui #cp-bf-aviso .cp-aviso.nav > .material-symbols-outlined { color: var(--navy-300); }
/* «Pide algo» es un botón de la tira: se levanta como las tarjetas de balde y
   se marca cuando su chip está puesto. Ámbar sólo si algo pide. */
.cp-ui .cp-stat.tap { cursor: pointer; position: relative; transition: box-shadow .18s var(--curva), transform .18s var(--curva); }
.cp-ui .cp-stat.tap::after { content: "chevron_right"; font-family: "Material Symbols Outlined"; position: absolute; right: 10px; top: 10px; font-size: 18px; color: var(--faint); }
.cp-ui .cp-stat.tap:hover, .cp-ui .cp-stat.tap:focus-visible { transform: translateY(-2px); box-shadow: var(--e2); outline: none; }
.cp-ui .cp-stat.tap.on { outline: 2px solid var(--navy); outline-offset: -2px; }
.cp-ui .cp-stat .d .pide { color: var(--warn); }
/* El chip «Pide algo»: ámbar de trazo; puesto, ámbar tenue con el filete. */
.cp-ui .cp-chips .filete { width: 1px; height: 20px; background: var(--hair-strong); margin: 0 4px; }
.cp-ui .cp-chip.pide { border-color: var(--warn-hair); color: var(--warn); }
.cp-ui .cp-chip.pide .c { color: var(--warn); }
.cp-ui .cp-chip.pide.on { border-color: var(--warn); background: var(--warn-050); color: var(--warn); box-shadow: inset 3px 0 0 var(--warn); }
/* Los selectores de mes son los del Registro; el buscador, el de la mesa. */
.cp-ui #cp-sec-balde .cp-filtros .cp-filtro .cp-in { min-width: 140px; }
/* La grilla: la contraparte y el camión se recortan con puntos (el nombre
   entero queda en el `title`); las tres especies de fila, por su franja. */
.cp-ui table.cp-bf-g td { padding: 7px 8px; }
.cp-ui table.cp-bf-g th { padding: 9px 8px; }
.cp-ui table.cp-bf-g td.wrap { min-width: 0; max-width: 165px; white-space: nowrap; }
.cp-ui table.cp-bf-g .cp-bf-quien { display: block; max-width: 165px; overflow: hidden; text-overflow: ellipsis; }
/* El comprobante también: «venta en GS, sin comprobante» de bajada no puede
   decidir el ancho de la columna. Ocho columnas en 1242 px (la foto). */
.cp-ui table.cp-bf-g .cp-bf-comp { display: block; max-width: 185px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-ui table.cp-bf-g .cp-bf-comp .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* La celda del camión también: «MW00003857 · propia · LQA 1000022061 no está
   en este balde» empujaba la columna de verbos fuera de la caja (la foto). */
/* Un `max-width` en la celda no vale en una tabla automática: el recorte va
   en un <span> en bloque adentro, como el de la contraparte. */
.cp-ui table.cp-bf-g .cp-bf-cam { display: block; max-width: 195px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-ui table.cp-bf-g .cp-bf-cam .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cp-ui table.cp-bf-g td .tach { color: var(--faint); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.cp-ui table.cp-bf-g tbody tr { cursor: default; }
.cp-ui table.cp-bf-g tr.st-pide td:first-child { border-left-color: var(--warn); }
.cp-ui table.cp-bf-g tr.st-mal  td:first-child { border-left-color: var(--crit); }
.cp-ui table.cp-bf-g tr.st-mal  td { background: var(--crit-050); }
.cp-ui table.cp-bf-g tbody tr.st-mal:hover td { background: #fbe3e3; }
.cp-ui table.cp-bf-g tr.st-gs   td:first-child { border-left-color: var(--navy-300); border-left-style: dashed; }
.cp-ui table.cp-bf-g tr.st-gs   td { background: #fafbfd; }
.cp-ui table.cp-bf-g tr.st-si   td { color: var(--muted); }
.cp-ui table.cp-bf-g tr.st-si   td:first-child { border-left-color: var(--hair-strong); }
.cp-ui table.cp-bf-g td .sub b { color: var(--crit); font-weight: 700; }
/* El verbo fantasma de la fila: sin borde, gris; sólo el que pide algo lleva
   el botón entero. */
.cp-ui .cp-min.gh { border-color: transparent; color: var(--muted); background: transparent; }
.cp-ui .cp-min.gh:hover, .cp-ui .cp-min.gh:focus-visible { color: var(--navy); border-color: var(--hair-strong); background: var(--surface); }
/* Compensar: los candidatos son renglones con casilla (los de Imputar
   descubiertos, §6), y la suma vive en el pie del diálogo. */
.cp-ui #cp-bf-comp .cp-desc .n small { display: block; }
.cp-ui #cp-bf-comp-suma { font-size: 11.5px; color: var(--muted); flex: 1 1 auto; min-width: 0; white-space: normal; line-height: 1.4; }
.cp-ui #cp-bf-comp .cp-ficha-f .sp { display: none; }
.cp-ui #cp-bf-comp-suma b { color: var(--ink); font-variant-numeric: tabular-nums; }
.cp-ui #cp-bf-comp-suma .okv { color: var(--ok); font-weight: 700; }
.cp-ui #cp-bf-comp .cp-campo label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.cp-ui #cp-bf-comp .cp-campo label small { font-weight: 600; text-transform: none; letter-spacing: 0; }

@media (max-width: 640px) {
    .cp-ui table.cp-bf-g td.wrap, .cp-ui table.cp-bf-g .cp-bf-quien, .cp-ui table.cp-bf-g .cp-bf-cam { max-width: 140px; }
}

/* ── AZÚCAR ORGÁNICA: la fila de pérdida o ganancia de producción ───────────
   RUNBOOK-COMPRAS-BALDES D9 (01/11/2026). La única fila sin factura que mueve
   el balde orgánica: violeta, para que no se lea como compra ni como venta. */
.cp-ui table.cp-bf-g tr.st-pg td:first-child { border-left-color: #8a6bc8; }
.cp-ui table.cp-bf-g tr.st-pg td { background: #f7f4fc; }
.cp-ui .cp-b.pg { background: #efe9fa; color: #5b3fa0; border-color: #d9cdf2; }

/* ── COMPOSICIÓN DE STOCK (D12 + D14: la cuenta de A con la BARRA de B arriba) ── */
.cp-ui .cp-cs-barra { flex: 1; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--e1); border: 1px solid rgba(16, 32, 64, .05); padding: 14px 18px 12px; min-width: 0; }
.cp-ui .cp-cs-bh { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cp-ui .cp-cs-bh h4 { margin: 0; font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--faint); }
.cp-ui .cp-cs-az { font-size: 12.5px; color: var(--muted); }
.cp-ui .cp-cs-az b { font-size: 1.05rem; color: var(--ok); font-variant-numeric: tabular-nums; }
.cp-ui .cp-cs-az.neg b { color: var(--crit); }
.cp-ui .cp-cs-fila { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 12px; margin-bottom: 10px; }
.cp-ui .cp-cs-fila .l { font-size: 12px; font-weight: 700; color: var(--ink); }
.cp-ui .cp-cs-fila .l small { display: block; font-weight: 500; color: var(--faint); font-size: 11px; font-variant-numeric: tabular-nums; }
.cp-ui .cp-cs-pista { position: relative; height: 30px; }
.cp-ui .cp-cs-seg { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; overflow: hidden; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cp-ui .cp-cs-seg.s1 { background: #2f6db3; border-radius: 6px 0 0 6px; }
.cp-ui .cp-cs-seg.s2 { background: var(--ok); }
.cp-ui .cp-cs-seg.s3 { background: #8a6bc8; }
.cp-ui .cp-cs-seg.tot { background: var(--navy); border-radius: 6px 0 0 6px; }
.cp-ui .cp-cs-seg.az { background: repeating-linear-gradient(135deg, #f3c9c9 0 6px, #fbe8e8 6px 12px); color: var(--crit); border: 1px dashed var(--crit); border-radius: 0 6px 6px 0; }
.cp-ui .cp-cs-seg.az.ok { background: repeating-linear-gradient(135deg, #cfe8db 0 6px, #ecf6f0 6px 12px); color: var(--ok); border-color: var(--ok); }
.cp-ui .cp-cs-marca { position: absolute; top: -5px; bottom: -5px; border-left: 2px dashed var(--crit); }
.cp-ui .cp-cs-ley { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.cp-ui .cp-cs-ley i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.cp-ui .cp-cs-ley i.s1 { background: #2f6db3; } .cp-ui .cp-cs-ley i.s2 { background: var(--ok); } .cp-ui .cp-cs-ley i.s3 { background: #8a6bc8; }
.cp-ui .cp-cs-ley i.az { background: repeating-linear-gradient(135deg, #f3c9c9 0 3px, #fbe8e8 3px 6px); border: 1px dashed var(--crit); }
@media (max-width: 760px) { .cp-ui .cp-cs-fila { grid-template-columns: 1fr; gap: 4px; } }
.cp-ui .cp-cs-wrap { padding: 0 var(--gutter); display: flex; flex-direction: column; gap: 12px; }
.cp-ui .cp-cs-wrap > .cp-aviso { margin: 0; }
.cp-ui .cp-cs-caja { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--e1); border: 1px solid rgba(16, 32, 64, .05); overflow: auto; }
.cp-ui table.cp-cs { width: 100%; border-collapse: collapse; font-size: 13px; }
.cp-ui table.cp-cs th { font-size: .6rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; color: var(--muted); text-align: left; padding: 9px 12px; border-bottom: 2px solid var(--ink); white-space: nowrap; }
.cp-ui table.cp-cs td { padding: 8px 12px; border-bottom: 1px solid var(--hair); vertical-align: middle; color: var(--ink); }
.cp-ui table.cp-cs td:first-child { white-space: nowrap; min-width: 200px; border-left: 3px solid transparent; }
.cp-ui table.cp-cs .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-ui table.cp-cs .como { font-size: 12.3px; color: var(--muted); }
.cp-ui table.cp-cs .como b { color: var(--ink); }
.cp-ui table.cp-cs .op { color: var(--faint); font-weight: 700; width: 18px; text-align: center; }
.cp-ui table.cp-cs .neg { color: var(--crit); }
.cp-ui table.cp-cs tr.bal td { font-weight: 800; font-size: 13.5px; padding-top: 12px; }
.cp-ui table.cp-cs tr.bal td.como { font-weight: 500; color: var(--ink); }
.cp-ui table.cp-cs tr.bal td:first-child { border-left-color: var(--navy-300); }
.cp-ui table.cp-cs tr.sub td { color: var(--muted); font-size: 12.3px; padding-top: 5px; padding-bottom: 5px; }
.cp-ui table.cp-cs tr.sub td:first-child { padding-left: 34px; }
.cp-ui table.cp-cs tr.sub td:first-child::before { content: '└'; color: var(--hair-strong); margin-right: 8px; }
.cp-ui table.cp-cs tr.sum td { font-weight: 800; background: var(--canvas); border-top: 1px solid var(--hair-strong); }
.cp-ui table.cp-cs tr.azef td { font-weight: 800; font-size: 14px; background: var(--crit-050); }
.cp-ui table.cp-cs tr.azef td.como { font-weight: 500; font-size: 12.3px; }
.cp-ui table.cp-cs tr.azef td:first-child { border-left-color: var(--crit); }
.cp-ui table.cp-cs tr.tot td { font-weight: 800; font-size: 14px; color: var(--navy); border-top: 2px solid var(--ink); border-bottom: 0; }
.cp-ui table.cp-cs tr.tot td.como { font-weight: 500; font-size: 12.3px; color: var(--muted); }
.cp-ui .cp-cs-ir { font: inherit; font-size: 11.5px; font-weight: 700; color: var(--navy-500); background: none; border: 0; padding: 2px 0; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; }
.cp-ui .cp-cs-ir:hover, .cp-ui .cp-cs-ir:focus-visible { text-decoration: underline; }
.cp-ui .cp-cs-ir .material-symbols-outlined { font-size: 15px; }
.cp-ui .cp-cs-nota { font-size: 12px; color: var(--muted); margin: 0; }
@media (max-width: 760px) {
    .cp-ui table.cp-cs .como, .cp-ui table.cp-cs .alt, .cp-ui table.cp-cs td:last-child, .cp-ui table.cp-cs th:last-child { display: none; }
    .cp-ui table.cp-cs td:first-child { min-width: 0; white-space: normal; }
    .cp-ui table.cp-cs tr.sub td:first-child { padding-left: 18px; }
}
.cp-ui .cp-cs-seg.tot.neg { background: var(--crit); }
/* DESPACHADO, FALTA FACTURAR (D16): renglón propio que resta, gris; su detalle
   se despliega debajo, con los MW. En la barra, un tramo gris rayado que
   descuenta del final de lo facturado. */
.cp-ui .cp-cs-seg.dsp { background: repeating-linear-gradient(135deg, rgba(255,255,255,.78) 0 5px, rgba(255,255,255,.25) 5px 10px); color: #1d2635; border: 2px dashed #5b6577; border-radius: 0 6px 6px 0; text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
.cp-ui .cp-cs-ley i.dsp { background: repeating-linear-gradient(135deg, #9aa5b5 0 3px, #c9d0db 3px 6px); }
.cp-ui table.cp-cs tr.dsp td:first-child { border-left-color: #9aa5b5; }
.cp-ui table.cp-cs tr.dsp td.n.neg { color: var(--muted); }
.cp-ui table.cp-cs tr.det td { font-size: 12px; color: var(--muted); padding-top: 4px; padding-bottom: 4px; background: var(--canvas); }
.cp-ui table.cp-cs tr.det td:first-child { padding-left: 34px; }
.cp-ui table.cp-cs tr.det .mono { font-family: Consolas, "SF Mono", "Roboto Mono", monospace; font-weight: 700; color: var(--navy); }
/* LA BARRA (D19): las tres secciones arriba; abajo el stock de MOYCO + el
   despachado sin facturar (gris) + el AZEF (rayado). */
.cp-ui .cp-cs-seg.s3.fin { border-radius: 0 6px 6px 0; }
.cp-ui .cp-cs-seg.az.ok { border-radius: 0 6px 6px 0; }
.cp-ui .cp-cs-seg.dsp2 { background: #8d97a8; color: #fff; border-left: 2px solid #fff; }
.cp-ui .cp-cs-ley i.tot { background: var(--navy); }
.cp-ui .cp-cs-ley i.dsp2 { background: #8d97a8; }