/* =============================================================================
   PEDIDOS & VENTAS DE POLVOS — lo POCO que Polvos agrega a la mesa de Azúcar
   docs/RUNBOOK-IDENTIDAD-POLVOS.md, sub-etapa 1a (01/10/2026)
   =============================================================================
   LA PANTALLA SE VISTE CON `ventas/ventas-ui.css` (`.vt-ui`): es la de Azúcar.
   El verde no está acá: lo pone `core/shell-ui.css`, que bajo
   `theme-endulzantes` redefine la escala del navy (`--navy`, `--navy-050`…).

   ESTE ARCHIVO TIENE QUE QUEDAR CHICO. Si crece, es que Polvos está volviendo
   a dibujarse sola, y el encargo es el contrario: que no parezcan dos sistemas.
   Acá va únicamente lo que Azúcar NO tiene. Hoy, dos cosas: el control de
   línea y la lista de renglones de un pedido de varios artículos.

   Scope: `.ed-ui`, en el MISMO elemento que `.vt-ui.vt-shell` (compuesto, sin
   espacio, cuando haga falta apuntarle al armazón).
   ============================================================================= */

/* ── La línea — Edulcorantes · Jugos ─────────────────────────────────────────
   Vive en la cola de la barra de secciones, antes del ámbito. Es un control
   segmentado: dos botones en una cápsula, el elegido relleno con el color de
   la división. */
.ed-ui .ed-linea {
    display: inline-flex; align-items: stretch;
    border: 1px solid var(--hair-strong); border-radius: 999px;
    background: var(--surface); padding: 2px; gap: 2px;
}
.ed-ui .ed-linea > button {
    border: 0; background: transparent; cursor: pointer;
    font: inherit; font-size: 12px; font-weight: 600; color: var(--muted);
    padding: 4px 11px; border-radius: 999px; line-height: 1.2;
    transition: background .15s ease, color .15s ease;
}
.ed-ui .ed-linea > button:hover { color: var(--navy); background: var(--navy-050); }
.ed-ui .ed-linea > button[aria-pressed="true"] { background: var(--navy); color: #fff; }

/* ── Los renglones del pedido — lámina 3, ganó la B ──────────────────────────
   Un pedido de varios artículos los dice TODOS, cada uno con su cantidad a la
   derecha. La fila crece (el `height: 48px` de la celda es un mínimo) y, como
   ya no es de dos renglones, todo se alinea arriba. */
.ed-ui table.vt-tabla tr.ed-multi td { vertical-align: top; padding-top: 7px; padding-bottom: 7px; }
.ed-ui .ed-reng { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; line-height: 1.45; }
.ed-ui .ed-reng .vt-art { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-ui .ed-reng b { white-space: nowrap; font-weight: 600; }

/* El separador entre la línea y el ámbito: un pelo vertical. */
.ed-ui .ed-sep {
    display: inline-block; width: 1px; height: 16px;
    background: var(--hair-strong); margin: 0 3px;
}

/* ── El bulto bajo el artículo — la ficha del pedido (1b) ────────────────────
   «caja × 18», «bolsa»: en Polvos el precio es POR BULTO, y la tabla de la
   plata tiene que decir qué es un bulto de cada renglón. Va en la línea de
   abajo, chico, como el acuerdo en la ficha de Azúcar. */
.ed-ui .ed-bulto { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); }

/* ── La hoja «Despachar» de la ficha de la OCE — lámina 4, ganó la B (1b-2) ──
   Lo único que Azúcar no tiene en su Salida: allá los lotes los declara
   Producción en la playa; acá se eligen en la ficha. Un recuadro por
   artículo, una fila por lote con saldo: el lote, lo que queda, lo que se saca. */
.ed-ui .ed-pick { display: flex; flex-direction: column; gap: 10px; }
.ed-ui .ed-pick-art { border: 1px solid var(--hair); border-radius: 10px; padding: 10px 12px; background: var(--surface); }
.ed-ui .ed-pick-art .t { display: flex; align-items: baseline; gap: 10px; font-weight: 700; color: var(--ink); font-size: 13px; }
.ed-ui .ed-pick-art .t .sp { flex: 1; }
.ed-ui .ed-pick-art .t .ok, .ed-ui .ed-pick-art .t .wrn { font-size: 12px; white-space: nowrap; }
.ed-ui .ed-pick-art .t .ok { color: var(--ok); }
.ed-ui .ed-pick-art .t .wrn { color: var(--warn); }
.ed-ui .ed-lote { display: grid; grid-template-columns: 1fr 96px 84px; gap: 8px; align-items: center; margin-top: 7px; font-size: 12.5px; }
.ed-ui .ed-lote .l { font-family: 'IBM Plex Mono', Consolas, monospace; font-weight: 700; color: var(--navy); }
.ed-ui .ed-lote .d { color: var(--muted); font-size: 11.5px; }
.ed-ui .ed-lote .d.wrn { color: var(--warn); font-weight: 700; }
.ed-ui .ed-lote .vt-in { height: 30px; text-align: right; }
.ed-ui .ed-sug { font-size: 11px; color: var(--muted); margin-top: 8px; }
/* ── LA CAJA ABIERTA ES LA EXCEPCIÓN — lámina 7, ganó la B (01/10/2026) ──────
   «Salvo excepción no se hace; cuando ocurra, ADVERTENCIAS EN COLORES»
   (Hernán). Semáforo por lote: verde cajas enteras, ámbar sueltos de una caja
   YA abierta (no se abre nada), ROJO se abre una caja. El chip y el tilde sólo
   aparecen en rojo, y sin el tilde no se sigue. Polvos-only: Azúcar no tiene
   cajas que abrir, por eso esto no hereda nada de su hoja. */
.ed-ui .ed-sug .crit, .ed-ui .ed-lote .d.crit, .ed-ui .cx-tilde .crit, .ed-ui .vt-sal-med .l2.crit { color: var(--crit); font-weight: 700; }
.ed-ui .ed-lote.cx { border-radius: 8px; padding: 4px 8px; margin: 3px -8px 0; }
.ed-ui .ed-lote.cx.suelto, .ed-ui .cx-tag.suelto, .ed-ui .cx-nota { background: var(--warn-050); box-shadow: inset 3px 0 0 var(--warn); color: var(--warn); }
.ed-ui .ed-lote.cx.abre { background: var(--crit-050); box-shadow: inset 3px 0 0 var(--crit); }
.ed-ui .cx-tag, .ed-ui .cx-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 6px; white-space: nowrap; }
.ed-ui .cx-tag.entera { color: var(--ok); background: var(--ok-050); }
.ed-ui .cx-tag.abre, .ed-ui .cx-chip { color: #fff; background: var(--crit); }
.ed-ui .cx-tilde { display: flex; gap: 9px; align-items: flex-start; margin-top: 10px; padding: 9px 12px; border-radius: 9px; border: 2px dashed var(--crit); background: var(--surface); font-size: 12.5px; color: var(--ink); cursor: pointer; }
.ed-ui .cx-tilde input { width: 17px; height: 17px; accent-color: var(--crit); flex: 0 0 auto; }
.ed-ui .cx-nota { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 6px 10px; border-radius: 7px; font-size: 12px; font-weight: 700; }
.ed-ui .cx-nota .sp, .ed-ui .ed-lote label, .ed-ui .ed-dev-r .d .sp { flex: 1; min-width: 0; }
.ed-ui .cx-tag .material-symbols-outlined, .ed-ui .cx-nota .material-symbols-outlined { font-size: 15px; }
/* ── NUEVO PEDIDO — lámina 8, ganó la A (02/10/2026) ─────────────────────────
   La pantalla es la de Azúcar (`.vt-nv-*` de ventas-ui.css). Polvos agrega
   tres cosas: el interruptor «$ por estuche · $ por caja» en la cabecera de la
   tabla (un `.vt-nv-seg` chico), LO LIBRE en verde (desplegable y ficha), y el
   aviso de caja / de stock dentro de la celda de la cantidad (`.cx-nota`, el
   de la Mesa). */
.ed-ui .vt-nv-card-h .ed-pp { flex: 0 0 auto; margin-left: 10px; }
.ed-ui .ed-pp:empty { display: none; }
.ed-ui .ed-pp button { padding: 3px 9px; font-size: 11px; white-space: nowrap; }
.ed-ui .vt-nv-opt .cod.lib, .ed-ui .vt-nv-ficha dd b.lib { font-family: inherit; color: var(--ok); font-weight: 700; }
.ed-ui .vt-nv-opt .cod.lib.cero, .ed-ui .vt-nv-ficha dd b.lib.cero { color: var(--faint); }
.ed-ui .vt-nv-g .cx-nota { margin: 5px 0 0 auto; max-width: 340px; text-align: left; font-size: 11px; line-height: 1.4; font-weight: 500; }
.ed-ui .vt-nv-g .cx-nota .vt-nv-paso { flex-basis: 100%; justify-content: flex-start; margin: 2px 0 0 21px; }
/* ── LA DEVOLUCIÓN — lámina 9, ganó la B (02/10/2026) ────────────────────────
   Una hoja de la ficha (`ventas-devolucion.js`): un renglón por lo que salió
   (artículo · lote) con los estuches que vuelven, el papel, y la NC que se
   pregunta antes y se cruza 1 a 1 (`.ed-nc .cand`). Azúcar no la tiene: allá
   la devolución es el formulario de Movimientos. */
.ed-ui .ed-dev { display: flex; flex-direction: column; gap: 9px; }
.ed-ui .ed-dev-r { display: grid; grid-template-columns: 1fr 92px; gap: 4px 10px; align-items: center; border: 1px solid var(--hair); border-radius: 10px; padding: 8px 11px; background: var(--surface); font-size: 12.5px; }
.ed-ui .ed-dev-r.on { border-color: var(--warn-hair); box-shadow: inset 3px 0 0 var(--warn); }
.ed-ui .ed-dev-r.mal { border-color: var(--crit-hair); box-shadow: inset 3px 0 0 var(--crit); }
.ed-ui .ed-dev-r .n { font-weight: 700; color: var(--ink); min-width: 0; }
.ed-ui .ed-dev-r .n small, .ed-ui .ed-nc .cand .x { display: block; font-weight: 500; color: var(--muted); font-size: 11.5px; }
.ed-ui .ed-dev-r .n small b, .ed-ui .ed-nc .cand .c { font-family: 'IBM Plex Mono', Consolas, monospace; color: var(--navy); font-weight: 700; }
.ed-ui .ed-dev-r > .vt-in { height: 30px; text-align: right; font-weight: 800; }
.ed-ui .ed-dev-r .d { grid-column: 1 / -1; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.ed-ui .ed-dev-r .d .todo, .ed-ui .ed-dev-r .d .otro { border: 1px solid var(--hair-strong); background: var(--surface); border-radius: 6px; font: inherit; font-size: 11px; font-weight: 700; color: var(--navy); padding: 1px 8px; cursor: pointer; }
.ed-ui .ed-dev-r .d .ed-dev-lote { height: 24px; width: 120px; font-size: 11.5px; }
.ed-ui .ed-dev-papel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.ed-ui .ed-nc { border: 1px solid var(--hair); border-radius: 10px; padding: 10px 12px; background: var(--surface); margin-top: 12px; font-size: 12.5px; }
.ed-ui .ed-nc .q { font-weight: 800; color: var(--ink); margin-bottom: 7px; display: block; }
.ed-ui .ed-nc .vt-nv-seg { margin-bottom: 8px; }
.ed-ui .ed-nc .cand { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; width: 100%; text-align: left; font: inherit; border: 1px solid var(--hair); background: var(--surface); border-radius: 8px; padding: 7px 10px; margin-top: 6px; cursor: pointer; }
.ed-ui .ed-nc .cand.on { border-color: var(--navy-300); background: var(--navy-050); }
.ed-ui .ed-nc .cand:disabled { opacity: .75; cursor: default; }
.ed-ui .ed-nc .cand .x, .ed-ui .ed-nc .cand .cruce, .ed-ui .ed-dev-papel .ancho { grid-column: 1 / -1; }
.ed-ui .ed-nc .cand .cruce { font-size: 11.5px; color: var(--ok); font-weight: 700; }
.ed-ui .ed-nc .cand .cruce.wrn, .ed-ui .vt-ficha-dato b.wrn { color: var(--warn); }
.ed-ui .ed-dev b.crit, .ed-ui .ed-nc .crit, .ed-ui .ed-dev-papel .vt-nota.crit { color: var(--crit); }
/* 1f (07/11/2026) · la hoja «Ajustar carga» y la hoja «Camión de Azúcar». */
.ed-ui .ed-aj .pv-sal-aj-qty { width: 76px; height: 30px; text-align: right; }
.ed-ui .ed-aj td.n.wrn { color: var(--warn); font-weight: 700; }
.ed-ui .ed-nps { display: grid; gap: 6px; margin-top: 4px; }
.ed-ui .ed-nps .g { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.ed-ui .ed-np { display: grid; grid-template-columns: 18px 1fr auto; gap: 2px 10px; align-items: center; width: 100%; text-align: left; font: inherit;
  padding: 8px 10px; border: 1px solid var(--hair); border-radius: 8px; background: var(--surface); font-size: 12.6px; color: var(--ink); cursor: pointer; }
.ed-ui .ed-np:hover { border-color: var(--navy-300); }
.ed-ui .ed-np.on { border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-050); }
.ed-ui .ed-np.apagada { opacity: .55; cursor: default; }
.ed-ui .ed-np .o { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--hair-strong); }
.ed-ui .ed-np.on .o { border-color: var(--navy); background: radial-gradient(var(--navy) 45%, var(--surface) 50%); }
.ed-ui .ed-np .n { font-weight: 700; }
.ed-ui .ed-np .n small { font-weight: 400; color: var(--muted); margin-left: 6px; }
.ed-ui .ed-np .kg { font-family: 'IBM Plex Mono', Consolas, monospace; font-size: 11.6px; color: var(--muted); text-align: right; }
.ed-ui .ed-np .d { grid-column: 2 / -1; color: var(--muted); font-size: 11.6px; }
.ed-ui .ed-np-nota { margin-top: 10px; display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 8px;
  background: var(--navy-050); border: 1px solid var(--navy-300); color: var(--ink); font-size: 12.3px; line-height: 1.4; }
.ed-ui .ed-np-nota b { color: var(--navy); }
.ed-ui .ed-np-nota .ic { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; margin-top: 1px; }
/* En el teléfono la hoja abierta va ARRIBA (la regla de Azúcar apunta a
   `#vt-sal-der`; ésta es su gemela con el id de Polvos). */
@media (max-width: 640px) {
    .ed-ui .vt-sal-panel:not([data-hoja="historia"]) #pv-sal-der { order: -1; }
    /* 1f: en el teléfono el pie de Azúcar va en UNA fila (ventas-movil-ui.css,
       `nowrap`) y el medidor quedaba a una palabra por línea entre tres verbos.
       Acá el medidor va ARRIBA, a lo ancho, y los verbos en su fila. */
    .ed-ui #pv-sal-f { flex-wrap: wrap; }
    .ed-ui #pv-sal-f .vt-sal-med { flex: 1 1 100%; order: -1; }
    .ed-ui .ed-lote { grid-template-columns: 1fr 88px; }
    .ed-ui .ed-lote .d:last-child { grid-column: 1 / -1; }
    .ed-ui .ed-lote.cx { margin-left: 0; margin-right: 0; }
    .ed-ui .vt-ficha-panel:not([data-hoja="historia"]) #pv-ficha-der { order: -1; }
    .ed-ui .ed-dev-papel { grid-template-columns: 1fr; }
}