/* =============================================================================
IDENTIDAD VISUAL — EL FORMULARIO DE MOVIMIENTOS (MW)
=============================================================================
Manual: docs/identidad-visual.md. Proyecto: docs/RUNBOOK-FORM-MW.md, etapa 4.
La forma está APROBADA y no se rediscute: es la **propuesta B, «los pasos»**
del prototipo `docs/form-mw/02-prototipo-A.html` (Hernán, 09/08/2026, con la
condición de la regla 11 — ir y volver sin perder nada).
LA REGLA QUE ORDENA ESTE ARCHIVO: **el formulario tiene ocho caras y UNA sola
espina**. Cinco pasos fijos —Contexto · Qué sale/entra · Cómo viaja ·
Papeles · Confirmar— que no cambian en ninguna de las ocho; lo que cambia es
cuáles vienen resueltos. Por eso acá no hay ni una regla que dependa del
modo: no existe `.mw-ui.despacho` ni `.mw-paso.recepcion`. Si alguna vez hace
falta una, la propuesta no se sostuvo y hay que parar (§ etapa 4 del runbook).
EL COLOR ES DEL ESTADO, NUNCA DE LA CATEGORÍA (§1.1 del manual). Hasta hoy el
modo se anunciaba con CINCO colores —índigo despacho, verde recepción, rosa
devolución, esmeralda pre-lote, ámbar manual— que es exactamente lo que el
manual prohíbe. Acá el modo se dice **con palabras**, en la cinta, y el verde
/ ámbar / rojo quedan para «resuelto», «falta» y «no se puede».
── POR QUÉ LOS CONTROLES SIGUEN LLAMÁNDOSE `.form-input` Y `.label-sm` ───────
Son las clases que ya usan los 26 campos, y **once piezas de JS les agregan y
les sacan utilitarias de Tailwind en caliente** (`bg-gray-100` al bloquear,
`bg-amber-50` al vincular una factura de Flexxus, `text-blue-900` al liberar
la cantidad). Renombrarlas obligaría a tocar esa lógica —que es justo lo que
esta etapa promete no tocar—, así que se VISTEN donde están. Las reglas de
acá llevan dos clases de especificidad (`.mw-ui .form-input`, 0,2,0) y le
ganan a la utilitaria suelta (0,1,0), así que el gris del candado sigue
diciendo «apagado» sin romper la identidad.
`.label-sm` además no estaba en NINGÚN css: la inyectaba el módulo de
Movimientos de Endulzantes. Los 26 rótulos del formulario dependían de que
otro módulo se hubiera cargado antes. Acá deja de ser una casualidad.
TODO va scopeado bajo `.mw-ui` y con prefijo `mw-` (§6 del manual).
── Y DESDE LA ETAPA 2 ESTA HOJA TAMBIÉN VISTE LA PANTALLA ───────────────────
Este archivo nació para el FORMULARIO y decía acá que «el resto de
Movimientos —la grilla, el detalle, acciones-stock— sigue en Tailwind y una
clase suelta lo rompería». La etapa 2 de docs/RUNBOOK-MOVIMIENTOS-STOCK.md
levanta esa advertencia a medias y a propósito: el ARMAZÓN de la pantalla
(§13) entra acá, y la grilla que vive adentro sigue en Tailwind hasta la
etapa 3. No nace una hoja nueva ni un scope nuevo — un `.mwg-ui` aparte para
la grilla sería inventar un segundo dueño de la misma pantalla.
── Y DESDE LA ETAPA 8 LA ADVERTENCIA SE LEVANTA ENTERA ──────────────────────
Ya no queda una superficie del módulo en Tailwind: las cuatro que faltaban
—exportar, elegir la orden de carga, imputar un Líquido Producto y la cola de
recepción— entraron en §20. La única excepción declarada es el MOBILE
(`renderMobileMovimientos`), que está fuera de alcance como el de Facturación
y el del Tarifario, y el formulario, que ya tenía su hoja: ésta.
El índice, entonces: §1-12 el FORMULARIO · §13-17 la PANTALLA (armazón,
desplegable, 390 px, planilla, Pendientes) · §18-20 los DIÁLOGOS (los tres de
acción, la ficha en dos paneles, y las cuatro de la etapa 8).
Lo que NO cambia: no existe ni una clase que dependa del modo. La grilla no
puede traer un `.mw-ui.despacho` por la ventana.
La paleta NO está acá: sale entera de core/tokens.css. Ningún token nuevo.
========================================================================== */
/* El `box-sizing` es PROPIO, no heredado del preflight de Tailwind: apoyarse en
el reset de otro framework es una dependencia invisible, y esta migración va
justamente hacia sacarlo. */
.mw-ui, .mw-ui *, .mw-ui *::before, .mw-ui *::after { box-sizing: border-box; }
.mw-ui .material-symbols-outlined { font-variation-settings: 'wght' 400; vertical-align: middle; }
/* Trampa §7 del manual para los ROOT de los modales, que llevan `.mw-ui` ellos
mismos y por eso no los alcanza la regla agrupada de tokens.css. El
desplegable «Registrar» de la barra es el mismo caso: cuelga del , así
que lleva el scope en su propio elemento (ver §13). */
.mw-ui.mw-velo.hidden { display: none; }
.mw-ui.mw-menu.hidden { display: none; }
/* Y LA MISMA TRAMPA CON EL ATRIBUTO `hidden`, que es la que usa el armazón para
esconder los pasos que no están abiertos. `hidden` vale exactamente lo que
`display:none` en la hoja del NAVEGADOR (especificidad cero), así que
cualquier regla de autor que declare `display` le gana: `.mw-btn` es
`inline-flex` y `.mw-resuelto` es `flex`, con lo que el botón «Guardar» se
veía al lado de «Siguiente» y el renglón colapsado de un paso se veía encima
del paso abierto. Lo destapó la foto de pantalla, no el banco de payloads.
(feedback_atributo_hidden_pierde_contra_display_de_autor) */
.mw-ui [hidden] { display: none !important; }
/* =============================================================================
1. EL CUERPO
========================================================================== */
.mw-ui { background: var(--canvas); }
.mw-ui .mw-body {
padding: 14px var(--gutter) 30px;
max-width: 1440px; margin: 0 auto;
display: flex; flex-direction: column; gap: 13px;
/* Los modales y los avisos van `absolute`: sin un ancestro posicionado se
cuelgan del viewport y aparecen en cualquier lado. */
position: relative;
}
/* Un dato ausente es información (§1.4): gris, más chico, y dice qué falta. */
.mw-ui .mw-vacio { color: var(--faint); font-style: italic; font-weight: 500; }
/* =============================================================================
2. LA BARRA — volver, el título del movimiento y la carga múltiple
-----------------------------------------------------------------------------
A 390 px las acciones no entran al lado del título (crumb + dos botones de
36 px se pisan): abajo se reparten en dos renglones.
========================================================================== */
.mw-ui .mw-top {
display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
padding-bottom: 2px;
}
.mw-ui .mw-top h3 {
margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em;
color: var(--ink); display: flex; align-items: center; gap: 8px; min-width: 0;
}
.mw-ui .mw-top h3 .material-symbols-outlined { font-size: 20px; color: var(--navy-500); }
.mw-ui .mw-volver {
flex: none; width: 34px; height: 34px; border-radius: 9px;
border: 1px solid var(--hair-strong); background: var(--surface); color: var(--muted);
display: grid; place-items: center; cursor: pointer;
transition: background .15s var(--curva), color .15s var(--curva), transform .15s var(--curva);
}
.mw-ui .mw-volver:hover, .mw-ui .mw-volver:focus-visible {
background: var(--navy-050); color: var(--navy); outline: none;
}
.mw-ui .mw-volver:active { transform: scale(.94); }
/* El interruptor de carga múltiple. Era una píldora azul con un switch pintado
a mano en Tailwind; acá es una casilla, que es lo que es. */
.mw-ui .mw-multi {
margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
border: 1px solid var(--hair-strong); background: var(--surface);
border-radius: 10px; padding: 7px 12px; cursor: pointer; user-select: none;
font-size: 12px; font-weight: 600; color: var(--muted);
transition: border-color .15s var(--curva), color .15s var(--curva), background .15s var(--curva);
}
.mw-ui .mw-multi:hover { border-color: var(--navy-300); color: var(--navy); }
.mw-ui .mw-multi input { accent-color: var(--navy); width: 15px; height: 15px; cursor: pointer; }
.mw-ui .mw-multi:has(input:checked) {
background: var(--navy-050); border-color: #cfdcef; color: var(--navy); font-weight: 700;
}
/* =============================================================================
3. LA CINTA DE CONTEXTO — el modo dicho con PALABRAS
-----------------------------------------------------------------------------
`.mw-dir` es la dirección (INGRESO / EGRESO), que llega desde la puerta y no
se elige adentro (regla 7). Es navy —marca, no estado— y es la misma caja en
las ocho caras.
========================================================================== */
.mw-ui .mw-cinta {
background: var(--surface); border: 1px solid var(--hair);
border-radius: var(--r-card); box-shadow: var(--shadow);
display: flex; align-items: center; gap: 12px; padding: 11px 16px; flex-wrap: wrap;
}
.mw-ui .mw-dir {
display: inline-flex; align-items: center; gap: 7px; border-radius: 9px;
padding: 5px 12px; font-weight: 700; font-size: 12px;
letter-spacing: .08em; text-transform: uppercase;
background: var(--navy-050); border: 1px solid #cfdcef; color: var(--navy); flex: none;
}
.mw-ui .mw-dir .material-symbols-outlined { font-size: 17px; }
.mw-ui .mw-qu { min-width: 0; flex: 1 1 240px; }
.mw-ui .mw-qu .t { display: block; font-size: 14px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.mw-ui .mw-qu .d { display: block; font-size: 11.5px; color: var(--muted); }
/* Movimiento de terceros: no toca el stock contable de Moyco. Eso SÍ es estado. */
.mw-ui .mw-qu .d.terceros { color: var(--warn); font-weight: 600; }
.mw-ui .mw-gates { margin-left: auto; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.mw-ui .mw-gates .cap {
font-size: 10px; font-weight: 700; letter-spacing: .09em;
text-transform: uppercase; color: var(--faint);
}
.mw-ui .mw-chip {
display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
padding: 4px 11px; font-size: 11.5px; font-weight: 600;
border: 1px solid var(--hair-strong); color: var(--muted);
background: var(--surface); font-family: inherit;
}
.mw-ui .mw-chip .material-symbols-outlined { font-size: 14px; }
.mw-ui .mw-chip.ok { background: var(--ok-050); border-color: var(--ok-hair); color: var(--ok); }
.mw-ui .mw-chip.warn { background: var(--warn-050); border-color: var(--warn-hair); color: var(--warn); }
.mw-ui .mw-chip.nav { background: var(--navy-050); border-color: #cfdcef; color: var(--navy); }
/* Las dos que agrega la ETAPA 3. La planilla necesitaba una pastilla para decir
el ámbito del buscador y otra para un conteo apagado, y `.mw-chip` ya era la
pastilla de este módulo: inventarle una `.mw-b` al lado habría dejado la hoja
con DOS vocabularios de badge, que es exactamente lo que esta migración vino
a sacar. Se le agregan las dos variantes que le faltaban y nada más. */
.mw-ui .mw-chip.mal { background: var(--crit-050); border-color: var(--crit-hair); color: var(--crit); }
.mw-ui .mw-chip.mut { background: #f4f6f9; border-color: var(--hair); color: var(--muted); }
/* =============================================================================
4. LA ESPINA — los cinco pasos, y qué está resuelto
-----------------------------------------------------------------------------
Es la pieza que define la propuesta B. A la izquierda el mapa completo (nunca
cambia); a la derecha el paso abierto y los demás colapsados en un renglón
que dice lo que ya tienen adentro.
========================================================================== */
/* Las DOS columnas van con `minmax(0, …)` / `min-width:0`. Un item de grid mide
`min-width:auto` por defecto, o sea que no baja de su contenido mínimo: con la
espina acostada a 390 px (una fila de cinco botones) su mínimo son 554 px y
estira la columna, y con ella el documento entero. El scroll lateral no se ve
en una captura de pantalla completa — se mide, y por eso `--foto` lo mide.
Es la trampa `feedback_grid_sin_minwidth_cero_se_estira`, otra vez. */
.mw-ui .mw-b2 { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 13px; align-items: start; }
.mw-ui .mw-b2 > * { min-width: 0; }
.mw-ui .mw-spine {
background: var(--surface); border: 1px solid var(--hair);
border-radius: var(--r-card); box-shadow: var(--shadow);
padding: 9px; display: flex; flex-direction: column; gap: 2px;
position: sticky; top: 0;
}
.mw-ui .mw-step {
display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px;
border-radius: 10px; border: 0; border-left: 3px solid transparent;
text-align: left; width: 100%; font-family: inherit; background: none; cursor: pointer;
transition: background .15s var(--curva), border-color .15s var(--curva);
}
.mw-ui .mw-step:hover:not(:disabled), .mw-ui .mw-step:focus-visible:not(:disabled) {
background: var(--navy-050); outline: none;
}
.mw-ui .mw-step:disabled { cursor: not-allowed; opacity: .55; }
.mw-ui .mw-step .ico {
width: 19px; height: 19px; flex: none; border-radius: 50%;
border: 2px solid var(--hair-strong); display: flex; align-items: center;
justify-content: center; font-size: 11px; font-weight: 700; color: var(--faint);
margin-top: 1px; font-variant-numeric: tabular-nums;
}
.mw-ui .mw-step .ico .material-symbols-outlined { font-size: 12px; }
.mw-ui .mw-step .q { min-width: 0; }
.mw-ui .mw-step .t { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); line-height: 1.25; }
/* La bajada se corta a dos renglones: un faltante largo no puede empujar la
espina y correr el paso de abajo. */
.mw-ui .mw-step .d {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; font-size: 11px; color: var(--faint); line-height: 1.3; margin-top: 1px;
}
.mw-ui .mw-step.ok .ico { border-color: var(--ok); background: var(--ok); color: #fff; }
.mw-ui .mw-step.ok .t { color: var(--ink); }
.mw-ui .mw-step.ok .d { color: var(--ok); font-weight: 600; }
.mw-ui .mw-step.warn .ico { border-color: var(--warn); color: var(--warn); }
.mw-ui .mw-step.warn .d { color: var(--warn); font-weight: 600; }
.mw-ui .mw-step.now { background: var(--navy-050); border-left-color: var(--navy); }
.mw-ui .mw-step.now .t { color: var(--navy); }
.mw-ui .mw-step.now .ico { border-color: var(--navy); color: var(--navy); }
.mw-ui .mw-step.lock .ico { border-style: dashed; }
.mw-ui .mw-panel { display: flex; flex-direction: column; gap: 13px; min-width: 0; }
/* El paso colapsado: un renglón que dice qué quedó adentro. No es decorativo —
es lo que hace que ir y volver no cueste nada (regla 11). */
.mw-ui .mw-resuelto {
background: var(--surface); border: 1px solid var(--hair);
border-radius: var(--r-card); box-shadow: var(--shadow);
padding: 10px 16px; display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
width: 100%; font-family: inherit; text-align: left; cursor: pointer;
transition: transform .15s var(--curva), box-shadow .15s var(--curva), border-color .15s var(--curva);
}
.mw-ui .mw-resuelto:hover, .mw-ui .mw-resuelto:focus-visible {
transform: translateY(-1px); box-shadow: var(--e2); border-color: var(--navy-300); outline: none;
}
.mw-ui .mw-resuelto .ck { color: var(--ok); font-size: 18px; flex: none; }
.mw-ui .mw-resuelto.pend .ck { color: var(--warn); }
.mw-ui .mw-resuelto .q { min-width: 0; flex: 1; }
.mw-ui .mw-resuelto .t { display: block; font-size: 12.5px; font-weight: 700; }
.mw-ui .mw-resuelto .d { display: block; font-size: 11.5px; color: var(--muted); }
.mw-ui .mw-resuelto .ab {
font-size: 11px; font-weight: 700; color: var(--navy-500); flex: none;
}
/* El paso que NO está abierto se OCULTA, no se desmonta — es la mitad de la
regla 11 que decide dónde vive el estado. El guardado lee `#mov-remito-2`
directo del DOM para el número legal del remito (form-mw-guardado.js): si el
paso «Papeles» se desmontara al pasar al 4, el remito se grabaría vacío. Con
los cinco pasos siempre montados no hay estado que mudar ni que restaurar, y
el banco lo vigila con el escenario DESPACHO-OC-REMITO. */
.mw-ui .mw-paso[hidden] { display: none; }
/* =============================================================================
5. LAS TARJETAS Y LOS CAMPOS
========================================================================== */
.mw-ui .mw-card {
background: var(--surface); border: 1px solid var(--hair);
border-radius: var(--r-card); box-shadow: var(--shadow); padding: 14px 16px 16px;
}
.mw-ui .mw-card + .mw-card { margin-top: 13px; }
.mw-ui .mw-card > h5 {
margin: 0 0 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
text-transform: uppercase; color: var(--faint); display: flex; align-items: center;
gap: 9px; border-bottom: 1px solid var(--hair); padding-bottom: 8px; flex-wrap: wrap;
}
.mw-ui .mw-card > h5 .n {
margin-left: auto; font-size: 11px; letter-spacing: 0; text-transform: none;
color: var(--muted); font-weight: 600;
}
.mw-ui .mw-card > h5 .n b { color: var(--ink); font-variant-numeric: tabular-nums; }
/* `min-width:0` en las celdas: sin eso un select largo estira la columna y la
grilla desborda (trampa ya pagada, feedback_grid_sin_minwidth_cero_se_estira). */
.mw-ui .mw-grid { display: grid; gap: 13px; grid-template-columns: repeat(4, 1fr); }
.mw-ui .mw-grid > * { min-width: 0; }
.mw-ui .mw-grid.g5 { grid-template-columns: repeat(5, 1fr); }
.mw-ui .mw-grid.g3 { grid-template-columns: repeat(3, 1fr); }
.mw-ui .mw-grid.g2 { grid-template-columns: repeat(2, 1fr); }
.mw-ui .mw-grid .sp2 { grid-column: span 2; }
/* --- Los 26 controles: se visten donde están (ver la cabecera del archivo) --- */
.mw-ui .label-sm {
display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700;
letter-spacing: .09em; text-transform: uppercase; color: var(--faint);
margin-bottom: 5px; min-height: 15px;
}
.mw-ui .label-sm .der { margin-left: auto; letter-spacing: 0; text-transform: none; font-size: 10.5px; }
.mw-ui .form-input {
width: 100%; font-family: inherit; font-size: 13px; color: var(--ink);
padding: 8px 10px; border-radius: 9px; border: 1px solid var(--hair-strong);
background: var(--surface);
transition: border-color .15s var(--curva), box-shadow .15s var(--curva);
}
.mw-ui textarea.form-input { resize: vertical; min-height: 38px; }
.mw-ui .form-input:focus {
outline: none; border-color: var(--navy-500); box-shadow: 0 0 0 3px var(--navy-050);
}
/* Un campo apagado se ve apagado — y le gana a la utilitaria que le cuelga el
JS de los candados, que es lo que hoy pinta el gris. */
.mw-ui .form-input:disabled,
.mw-ui .form-input[readonly] {
background: var(--canvas); color: var(--muted); cursor: not-allowed; border-color: var(--hair);
}
.mw-ui .form-input:disabled:focus, .mw-ui .form-input[readonly]:focus { box-shadow: none; border-color: var(--hair); }
/* Los pares punto-de-venta / número (remito, factura). OJO: la estructura
`
` la NAVEGA
el cargador de devoluciones para renombrar «Factura» → «Nota de Crédito»
(form-mw-cargadores.js, `relabel`): el label tiene que seguir siendo hijo del
ABUELO del input. Cambiar este anidado rompe ese renombre en silencio. */
.mw-ui .mw-par { display: flex; }
.mw-ui .mw-par .form-input:first-child { width: 38%; text-align: center; border-radius: 9px 0 0 9px; border-right: 0; }
.mw-ui .mw-par .form-input:last-child { width: 62%; border-radius: 0 9px 9px 0; }
/* Campo + botón pegado (chofer, tarifa). */
.mw-ui .mw-conbtn { display: flex; }
.mw-ui .mw-conbtn > .form-input { border-radius: 9px 0 0 9px; border-right: 0; }
.mw-ui .mw-mas {
flex: none; width: 36px; border: 1px solid var(--hair-strong); border-radius: 0 9px 9px 0;
background: var(--surface); color: var(--navy-500); cursor: pointer;
display: grid; place-items: center;
transition: background .15s var(--curva), color .15s var(--curva), transform .15s var(--curva);
}
.mw-ui .mw-mas:hover, .mw-ui .mw-mas:focus-visible { background: var(--navy-050); color: var(--navy); outline: none; }
.mw-ui .mw-mas:active { transform: scale(.94); }
.mw-ui .mw-mas .material-symbols-outlined { font-size: 18px; }
.mw-ui .mw-mas + .mw-mas { border-radius: 0 9px 9px 0; border-left: 0; }
.mw-ui .mw-check {
display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600;
color: var(--muted); cursor: pointer; margin-top: 6px; user-select: none;
}
.mw-ui .mw-check input { accent-color: var(--navy); width: 14px; height: 14px; cursor: pointer; }
.mw-ui .mw-check:hover { color: var(--navy); }
.mw-ui .mw-ayuda { font-size: 11px; color: var(--muted); margin-top: 4px; }
.mw-ui .mw-ayuda.ok { color: var(--ok); font-weight: 600; }
.mw-ui .mw-ayuda.warn { color: var(--warn); font-weight: 600; }
.mw-ui .mw-ayuda.mal { color: var(--crit); font-weight: 600; }
/* Dato decidido: lo que trae la OC / el MW origen / el pre-lote NO es un campo
gris, es un dato (la pieza que la propuesta B conserva de la A). */
.mw-ui .mw-ro .k {
display: block; font-size: 10px; font-weight: 700; letter-spacing: .09em;
text-transform: uppercase; color: var(--faint); margin-bottom: 2px;
}
.mw-ui .mw-ro .v { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.mw-ui .mw-ro .v small { font-weight: 500; color: var(--muted); }
.mw-ui .mw-ro.vacio .v { color: var(--faint); font-style: italic; font-weight: 500; }
/* Un renglón que se vuelve CONTROL (la caja Logística abierta desde el Parte
Diario de Planta, RUNBOOK-PARTE-DIARIO §3.4). El control ocupa el ancho del
renglón y hereda su peso; la tarifa lleva el importe y la modalidad en una
sola línea, y ninguna de las dos se encoge hasta cero. */
.mw-ui .mw-ro .v input, .mw-ui .mw-ro .v select {
width: 100%; min-width: 0; padding: 4px 7px;
border: 1px solid var(--hair-strong); border-radius: 7px;
background: var(--surface); color: var(--ink); font: inherit; font-weight: 600;
}
.mw-ui .mw-ro .v input:focus, .mw-ui .mw-ro .v select:focus {
outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-050);
}
.mw-ui .mw-ro .v input:disabled { color: var(--muted); background: var(--canvas); }
.mw-ui .mw-ro .v .dos { display: flex; gap: 6px; min-width: 0; }
.mw-ui .mw-ro .v .dos input { flex: 1 1 0; }
.mw-ui .mw-ro .v .dos select { flex: 0 0 auto; width: auto; }
.mw-ui .mw-card.editando { border-color: var(--navy-300); box-shadow: 0 0 0 3px var(--navy-050); }
.mw-ui .mw-control-nota { margin-top: 10px; }
/* --- LA FICHA DEL ORIGEN (etapa 5) ------------------------------------------
La caja donde el despacho / la recepción / la devolución / el pre-lote dicen
lo que YA quedó decidido. Va en navy claro y no en blanco a propósito: no es
una tarjeta más para completar, es contexto — el operario tiene que poder
saltearla de un vistazo. Ese navy es MARCA, no estado (§1.1 del manual): el
ámbar y el rojo siguen queriendo decir «falta» y «no se puede», acá y en
todas las caras. Calcada del prototipo aprobado (`.mw-ficha`, propuesta B).
========================================================================== */
.mw-ui .mw-ficha {
background: var(--navy-050); border: 1px solid #cfdcef;
border-radius: var(--r-card); padding: 13px 16px 15px;
}
.mw-ui .mw-ficha > h5 {
margin: 0 0 11px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
text-transform: uppercase; color: var(--navy); display: flex; align-items: center;
gap: 8px; padding-bottom: 8px; border-bottom: 1px solid #cfdcef; flex-wrap: wrap;
}
.mw-ui .mw-ficha > h5 .material-symbols-outlined { font-size: 16px; }
.mw-ui .mw-ficha > h5 .ver {
margin-left: auto; font-size: 11px; letter-spacing: 0; text-transform: none;
color: var(--navy-500); font-weight: 700; background: none; border: 0;
font-family: inherit; cursor: pointer; padding: 2px 6px; border-radius: 6px;
transition: background .15s var(--curva);
}
.mw-ui .mw-ficha > h5 .ver:hover, .mw-ui .mw-ficha > h5 .ver:focus-visible { background: #dbe7f8; outline: none; }
/* Dentro de la ficha el dato se lee sobre navy claro: el rótulo baja un punto y
el valor sube, para que la jerarquía siga siendo la misma que en blanco. */
.mw-ui .mw-ficha .mw-ro .k { color: var(--navy-500); opacity: .9; }
.mw-ui .mw-ficha .mw-ro .v { color: var(--navy-700); }
.mw-ui .mw-ficha .mw-ficha-det { margin-top: 12px; border-top: 1px solid #cfdcef; padding-top: 4px; }
.mw-ui .mw-ficha .mw-tabla th { border-bottom-color: #cfdcef; }
.mw-ui .mw-ficha .mw-tabla td { border-bottom-color: #cfdcef; }
.mw-ui .mw-ficha .mw-tabla tbody tr:hover { background: transparent; }
/* =============================================================================
6. AVISOS — el cartel del modo y el desvío de la puerta manual
-----------------------------------------------------------------------------
`#mov-lock-msg` lo pintan los cuatro cargadores con su propia paleta. Acá se
le da forma; el color lo sigue eligiendo quien avisa, pero ya sin los cinco
colores de categoría (ver form-mw-armazon.js: `ponerContexto`).
========================================================================== */
.mw-ui .mw-aviso {
border-radius: 10px; padding: 10px 13px; font-size: 12px; line-height: 1.45;
border: 1px solid var(--hair); background: var(--canvas); color: var(--muted);
display: flex; align-items: flex-start; gap: 9px;
}
.mw-ui .mw-aviso .material-symbols-outlined { font-size: 17px; flex: none; margin-top: 1px; }
.mw-ui .mw-aviso b, .mw-ui .mw-aviso strong { color: var(--ink); }
.mw-ui .mw-aviso .cuerpo { min-width: 0; flex: 1; }
.mw-ui .mw-aviso.warn { background: var(--warn-050); border-color: var(--warn-hair); color: var(--warn); }
.mw-ui .mw-aviso.warn b, .mw-ui .mw-aviso.warn strong { color: var(--warn); }
.mw-ui .mw-aviso.ok { background: var(--ok-050); border-color: var(--ok-hair); color: var(--ok); }
.mw-ui .mw-aviso.ok b, .mw-ui .mw-aviso.ok strong { color: var(--ok); }
.mw-ui .mw-aviso.mal { background: var(--crit-050); border-color: var(--crit-hair); color: var(--crit); }
.mw-ui .mw-aviso.mal b, .mw-ui .mw-aviso.mal strong { color: var(--crit); }
.mw-ui .mw-aviso.nav { background: var(--navy-050); border-color: #cfdcef; color: var(--navy-700); }
.mw-ui .mw-aviso.nav b, .mw-ui .mw-aviso.nav strong { color: var(--navy); }
/* =============================================================================
7. BOTONES
-----------------------------------------------------------------------------
Uno primario por pantalla. Los cinco botones de registrar pierden sus cinco
colores (corrección que salió de la ronda, 09/08/2026).
========================================================================== */
.mw-ui .mw-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid transparent;
font-family: inherit; font-size: .82rem; font-weight: 600; white-space: nowrap;
cursor: pointer; background: var(--navy); color: #fff;
transition: background .15s var(--curva), transform .18s var(--curva), box-shadow .18s var(--curva), border-color .15s var(--curva);
}
.mw-ui .mw-btn:hover:not(:disabled) { background: var(--navy-700); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,43,107,.24); }
.mw-ui .mw-btn:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.mw-ui .mw-btn:focus-visible { outline: 2px solid var(--navy-500); outline-offset: 2px; }
.mw-ui .mw-btn:disabled { opacity: .45; cursor: not-allowed; }
.mw-ui .mw-btn.sec { background: var(--surface); color: var(--ink); border-color: var(--hair-strong); }
.mw-ui .mw-btn.sec:hover:not(:disabled) { background: var(--canvas); border-color: var(--muted); box-shadow: var(--e1); }
.mw-ui .mw-btn.chico { height: 30px; padding: 0 11px; font-size: .76rem; }
/* PELIGRO (14/08/2026). Es el secundario que destruye: el trazo y la palabra en
rojo sobre blanco, y recién al apuntarlo se llena. NO es `.mw-btn.mal` (§18):
aquél es el botón que CONFIRMA una anulación, en un diálogo donde la otra
opción es irse, y por eso es sólido. Éste sólo ABRE el diálogo que va a
preguntar, así que gritar en reposo lo pondría por encima del primario navy de
la pantalla donde vive. Lo que tiene que hacer es distinguirse del botón gris
de al lado, que es lo que faltaba: un ⃠ gris al lado de un 🖨 gris no dice
cuál de los dos destruye algo. */
.mw-ui .mw-btn.sec.peligro { color: var(--crit); border-color: var(--crit-hair); }
.mw-ui .mw-btn.sec.peligro:hover:not(:disabled) {
background: var(--crit); color: #fff; border-color: var(--crit); box-shadow: 0 6px 16px rgba(198,40,40,.22);
}
.mw-ui .mw-btn.sec.peligro:focus-visible { outline-color: var(--crit); }
/* PLANO (etapa 3). Para el «Cargar más antiguos» del pie de la planilla: es una
acción que se aprieta veinte veces seguidas mirando una tabla, y un botón con
trazo repetido al pie de cada carga pesa más que lo que carga. Se tiñe recién
al apuntarlo. */
.mw-ui .mw-btn.ln { background: none; border-color: transparent; color: var(--muted); font-weight: 600; }
.mw-ui .mw-btn.ln:hover:not(:disabled), .mw-ui .mw-btn.ln:focus-visible {
background: var(--navy-050); color: var(--navy); transform: none; box-shadow: none;
}
.mw-ui .mw-btn .material-symbols-outlined { font-size: 17px; }
/* Acción de ícono (quitar una fila, agregar un sub-lote). */
.mw-ui .mw-ico {
background: none; border: 0; font: inherit; cursor: pointer; padding: 5px;
border-radius: 8px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px;
transition: background .15s var(--curva), color .15s var(--curva), transform .15s var(--curva);
}
.mw-ui .mw-ico:hover, .mw-ui .mw-ico:focus-visible { background: var(--navy-050); color: var(--navy); transform: scale(1.18); outline: none; }
.mw-ui .mw-ico:active { transform: scale(.94); }
.mw-ui .mw-ico.del:hover, .mw-ui .mw-ico.del:focus-visible { background: var(--crit-050); color: var(--crit); }
.mw-ui .mw-ico .material-symbols-outlined { font-size: 17px; }
/* =============================================================================
8. EL PIE — Σ kg, lo que falta y la acción
-----------------------------------------------------------------------------
Pegado abajo: en un formulario de cinco pasos la acción no puede depender de
cuánto scroll quedó. A 390 px las acciones viven SÓLO acá (la barra de arriba
se queda con la flecha de volver, que también avisa antes de salir).
========================================================================== */
.mw-ui .mw-pie {
background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-card);
box-shadow: var(--e2); display: flex; align-items: center; gap: 16px;
padding: 11px 16px; flex-wrap: wrap; position: sticky; bottom: 0; z-index: 2;
}
.mw-ui .mw-pie .tot .k {
display: block; font-size: 10px; font-weight: 700; letter-spacing: .09em;
text-transform: uppercase; color: var(--faint);
}
.mw-ui .mw-pie .tot .v {
display: block; font-size: 20px; font-weight: 700; letter-spacing: -.02em;
line-height: 1.15; font-variant-numeric: tabular-nums;
}
.mw-ui .mw-pie .tot .v small { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.mw-ui .mw-pie .sep { width: 1px; align-self: stretch; background: var(--hair); }
.mw-ui .mw-pie .nota { font-size: 11.5px; color: var(--muted); flex: 1; min-width: 140px; line-height: 1.4; }
.mw-ui .mw-pie .nota b.mal { color: var(--crit); }
.mw-ui .mw-pie .nota b.wrn { color: var(--warn); }
.mw-ui .mw-pie .nota b.bien { color: var(--ok); }
.mw-ui .mw-pie .der { margin-left: auto; display: flex; gap: 8px; }
/* =============================================================================
9. TABLAS — la carga múltiple y el resumen
-----------------------------------------------------------------------------
`color` y `font-family` van DECLARADOS: sin `` el navegador entra en
quirks mode y las tablas no los heredan del padre (trampa ya pagada en el
prototipo). Y el contenedor scrollea solo: a 390 px la tabla de carga múltiple
no entra, y hoy ni siquiera tiene dónde correrse.
========================================================================== */
.mw-ui .mw-scroll { overflow-x: auto; }
.mw-ui .mw-tabla {
width: 100%; border-collapse: collapse; font-size: 12.5px;
color: var(--ink); font-family: inherit;
}
.mw-ui .mw-tabla th {
font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--faint); text-align: left; padding: 8px 10px;
border-bottom: 2px solid var(--hair-strong); white-space: nowrap;
}
.mw-ui .mw-tabla td { padding: 9px 10px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.mw-ui .mw-tabla tr:last-child td { border-bottom: none; }
.mw-ui .mw-tabla th.n, .mw-ui .mw-tabla td.n { text-align: right; font-variant-numeric: tabular-nums; }
.mw-ui .mw-tabla tbody tr td:first-child { border-left: 3px solid transparent; transition: border-color .15s var(--curva); }
.mw-ui .mw-tabla tbody tr:hover { background: var(--navy-050); }
.mw-ui .mw-tabla tbody tr:hover td:first-child { border-left-color: var(--navy); }
/* =============================================================================
10. LA CONFIRMACIÓN — el paso 4, no un modal encima
-----------------------------------------------------------------------------
`#modal-confirmar-movimiento` conserva su id, su `.hidden` y su `.flex`
porque form-mw-guardado.js los prende y los apaga tal cual (esta etapa no
toca una línea de guardado). Lo que cambia es DÓNDE cae: deja de ser un
overlay `fixed` y pasa a ser el contenido del paso 4. Con eso, el resumen que
arma el guardado es lo que el operario ve en la pantalla, en su lugar.
========================================================================== */
.mw-ui .mw-conf { display: flex; flex-direction: column; gap: 0; }
.mw-ui .mw-conf .cab {
display: flex; align-items: center; gap: 9px; padding: 11px 16px;
border: 1px solid var(--hair); border-bottom: 0; border-radius: var(--r-card) var(--r-card) 0 0;
background: var(--navy-050); color: var(--navy); font-weight: 700; font-size: 12.5px;
}
.mw-ui .mw-conf .cab .material-symbols-outlined { font-size: 18px; }
.mw-ui .mw-conf .cuerpo {
border: 1px solid var(--hair); border-radius: 0 0 var(--r-card) var(--r-card);
background: var(--surface); box-shadow: var(--shadow); padding: 14px 16px 16px;
}
.mw-ui .mw-conf .acciones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
/* El resumen que escribe el guardado viene con markup de Tailwind adentro: se
le da el marco, y lo de adentro se deja como está hasta la etapa 5. */
.mw-ui #confirm-modal-content { font-size: 12.5px; line-height: 1.55; }
/* Un aviso de que todavía no hay nada que confirmar. */
.mw-ui .mw-conf-espera {
border: 1px dashed var(--hair-strong); border-radius: var(--r-card);
background: var(--surface); padding: 18px 16px; text-align: center;
color: var(--muted); font-size: 12.5px;
}
/* =============================================================================
11. LOS MODALES QUE SIGUEN SIENDO MODALES
-----------------------------------------------------------------------------
Factura pendiente, chofer rápido, tipo de azúcar e imputación. Los gates
pasan a ser el paso 0 cuando se toque el guardado (etapa 5); por ahora se
visten donde están.
========================================================================== */
/* EL VELO SE DECLARA DE LAS DOS FORMAS, y no es redundancia: es que tiene dos
clases de dueño. Los modales del FORMULARIO viven adentro del marcado del
formulario, así que el scope se lo presta un ancestro y basta el descendiente.
Los TRES DIÁLOGOS DE ACCIÓN (etapa 5) los arma `initializeStockModals()` una
sola vez y los cuelga del ``: ahí no hay ningún ancestro del módulo, y
además el pase lo abre Producción del Día desde SU pantalla. Con sólo el
descendiente, esos tres perderían el `position:fixed`, el velo, el fondo y el
centrado — y el defecto es MUDO, porque el elemento existe con todas sus
clases. Es la misma razón por la que `.mw-ui.mw-menu` va pegado (§15). */
.mw-ui .mw-velo,
.mw-ui.mw-velo {
position: fixed; inset: 0; background: rgba(10, 25, 60, .45);
backdrop-filter: blur(2px); z-index: 70;
display: flex; align-items: center; justify-content: center; padding: 16px;
}
.mw-ui .mw-modal {
background: var(--surface); border-radius: var(--r-card); box-shadow: var(--e3);
width: 100%; max-width: 430px; overflow: hidden; display: flex; flex-direction: column;
max-height: calc(100vh - 32px);
}
.mw-ui .mw-modal > header {
display: flex; align-items: center; gap: 9px; padding: 13px 16px;
border-bottom: 1px solid var(--hair);
}
.mw-ui .mw-modal > header h3 {
margin: 0; font-size: 14px; font-weight: 700; color: var(--ink);
display: flex; align-items: center; gap: 8px;
}
.mw-ui .mw-modal > header .material-symbols-outlined { color: var(--navy-500); font-size: 19px; }
.mw-ui .mw-modal > header .cerrar { margin-left: auto; }
.mw-ui .mw-modal .cuerpo { padding: 16px; overflow-y: auto; }
.mw-ui .mw-modal .acciones {
display: flex; justify-content: flex-end; gap: 8px;
padding: 12px 16px; border-top: 1px solid var(--hair); background: var(--canvas);
}
.mw-ui .mw-modal .acciones.parejo { display: grid; grid-template-columns: 1fr 1fr; }
.mw-ui .mw-modal .acciones.parejo .mw-btn { width: 100%; }
/* =============================================================================
12. A 390 px
-----------------------------------------------------------------------------
La espina se acuesta y pasa a ser una fila que scrollea; el mapa de los cinco
pasos se sigue viendo entero, que es lo único que no se puede perder.
========================================================================== */
@media (max-width: 1100px) {
.mw-ui .mw-grid, .mw-ui .mw-grid.g5, .mw-ui .mw-grid.g3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
.mw-ui .mw-body { padding: 12px 14px 26px; gap: 11px; }
.mw-ui .mw-b2 { grid-template-columns: 1fr; }
.mw-ui .mw-spine {
position: sticky; top: 0; z-index: 3;
flex-direction: row; gap: 6px; overflow-x: auto; padding: 8px;
scrollbar-width: thin;
}
.mw-ui .mw-step { width: auto; flex: none; border-left: 0; border-bottom: 3px solid transparent; padding: 7px 9px; }
.mw-ui .mw-step.now { border-bottom-color: var(--navy); }
/* La bajada no entra acostada: queda el número y el nombre del paso. */
.mw-ui .mw-step .d { display: none; }
.mw-ui .mw-grid, .mw-ui .mw-grid.g5, .mw-ui .mw-grid.g3, .mw-ui .mw-grid.g2 { grid-template-columns: 1fr; }
.mw-ui .mw-grid .sp2 { grid-column: span 1; }
/* LA FICHA ES LA EXCEPCIÓN, y por una razón concreta: adentro no hay
controles, hay DATOS. Un `