/* ============================================================================= IDENTIDAD VISUAL — RECEPCIÓN DEL DÍA ============================================================================= Manual: docs/identidad-visual.md. Runbook del módulo: docs/RUNBOOK-RECEPCION-DIA.md. La forma está APROBADA y no se rediscute: es la lámina `docs/recepcion-dia/02-opcion-a-la-cola.html` (ronda 2), votada por Hernán el 20/08/2026 — la opción A con sus cuatro correcciones. QUÉ ES ESTA PANTALLA. La garita. El operario de portería (rol 8) pre-carga el camión que está parado del otro lado del vidrio, imprime la orden de descarga que va con el chofer, y el camión entra al depósito. Después admin confirma y recién ahí el azúcar entra al stock. LAS DOS REGLAS QUE ORDENAN ESTE ARCHIVO, y las dos las dijo Hernán: 1. UNA SOLA COLA, FIFO. No se separa por día. El que espera hace más va arriba. Por eso acá no hay ni un encabezado de grupo ni un selector de modo: la cola es una lista y nada más. El único color que la recorre es el de la ESPERA, y está en el filete izquierdo de la baldosa. 2. EL NÚMERO PROTAGONISTA SON LAS UNIDADES. No hay báscula en esta planta: lo que se controla al descargar es la cantidad de bolsas. Por eso `.rc-un` es el cuerpo grande y los kg viven en el renglón secundario. TODO va scopeado bajo `.rc-ui` y con prefijo `rc-`, como manda el §6 del manual. Es el tercer .css de la carpeta `produccion/`, después de `fraccionado-ui.css` (Balanzas) y `produccion-dia-ui.css`. Tratamiento PLANO (la vara de Producción del Día y Facturación): superficie blanca sobre `--canvas`, separación por trazo y una sola sombra. La única superficie navy rellena de la pantalla es el botón primario de la barra del armazón, que pone `shell-ui.css`. Acá el navy es TEXTO (el código de lote) y TRAZO (el filete de la baldosa al día). SIN ACENTO PROPIO. Navy no está gastado en la estructura —esta pantalla no apila cuatro zonas—, así que alcanza y no se inventa un segundo azul. El azul de las OC y el índigo de «orden de descarga» / «nuevo chofer» del módulo viejo desaparecen: eran color=CATEGORÍA, que es justo lo que prohíbe §1.1. 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 el día que Tailwind se vaya —que es a donde va esta migración— se rompen todos los módulos a la vez. Lo mismo que hace `produccion-dia-ui.css`. */ .rc-ui, .rc-ui *, .rc-ui *::before, .rc-ui *::after { box-sizing: border-box; } .rc-ui .material-symbols-outlined { font-variation-settings: 'wght' 400; vertical-align: middle; } /* Trampa §7 del manual, para el ROOT de los modales del módulo, que llevan `.rc-ui` ELLOS MISMOS —cuelgan del y no tienen ningún ancestro del módulo que se lo preste— y por eso no los alcanza la regla agrupada de tokens.css, que es `.rc-ui .hidden` (con espacio, o sea descendientes). Y va SIN espacio: `.rc-ui.rc-velo`, no `.rc-ui .rc-velo`. Escrito con espacio no matchea nada y el defecto es MUDO — el modal sale sin forma, negro sobre la pantalla, sin que ninguna aserción sobre el marcado se caiga. */ .rc-ui.rc-velo.hidden { display: none; } /* ============================================================================= 1. EL CUERPO — una sola medida de margen lateral (--gutter) ============================================================================= `#page-recepcion-dia` NO lleva `data-shell="full"`: esta pantalla es una columna que scrollea con el wrapper, igual que Producción del Día. No hay cadena de alto propia, así que acá no hay ni un `flex:1` ni un `min-height:0` que puedan recortar nada. ========================================================================== */ .rc-ui { background: var(--canvas); } .rc-ui .rc-body { padding: 14px var(--gutter) 30px; max-width: 1440px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } /* Un dato ausente es información (§1.4): gris, más chico, y dice qué falta. */ .rc-ui .rc-vacio { color: var(--faint); font-style: italic; font-weight: 500; } /* Números que se comparan de arriba abajo. `.tnum` ya viene de tokens.css para `.rc-ui`; esto es para los que se escriben sueltos en una plantilla. */ .rc-ui .rc-n { font-variant-numeric: tabular-nums; } /* ============================================================================= 2. LA ZONA VACÍA Y EL ERROR — el estado sin dato, dibujado ============================================================================= «Todavía no lo sé» ≠ «no hay». La zona en blanco mientras carga la resuelve `gsZonaCargando()`; ésta es la que se dibuja cuando la lectura VOLVIÓ y no trajo nada, que es una noticia buena y hay que decirlo así. ========================================================================== */ .rc-ui .rc-nada { background: var(--surface); border: 1px dashed var(--hair-strong); border-radius: var(--r-card); padding: 26px 20px; text-align: center; } .rc-ui .rc-nada .t { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .02em; } .rc-ui .rc-nada .s { font-size: 12.5px; color: var(--faint); margin-top: 4px; } .rc-ui .rc-error { background: var(--crit-050); border: 1px solid var(--crit-hair); border-radius: var(--r-card); padding: 16px 18px; color: var(--crit); } .rc-ui .rc-error .t { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 5px; } .rc-ui .rc-error .s { font-size: 13px; color: var(--ink); } /* ============================================================================= 3. EL BUSCADOR — con el ÁMBITO declarado al lado ============================================================================= Es uno solo y filtra lo que YA está en pantalla: la consulta trae todos los pre-ingresos abiertos (son los que están en un estado, no una página de un histórico). Que se diga «filtrando» y no «buscando», porque las dos palabras se parecen demasiado y no significan lo mismo. El módulo no tenía ninguno: en el modo «Todos los pendientes» podía haber treinta tarjetas y no había forma de encontrar una por remito, patente, código, N° de ingreso u OC. El chofer que vuelve a preguntar por su orden obligaba a scrollear. ========================================================================== */ .rc-ui .rc-find { 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: 9px 15px; } .rc-ui .rc-find .caja { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; border: 1px solid var(--hair-strong); border-radius: 9px; padding: 0 11px; background: #fcfdfe; } .rc-ui .rc-find .caja:focus-within { border-color: var(--navy-300); box-shadow: 0 0 0 3px var(--navy-050); } .rc-ui .rc-find .caja .material-symbols-outlined { color: var(--faint); font-size: 18px; } .rc-ui .rc-find input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-family: inherit; font-size: 12.5px; color: var(--ink); padding: 8px 0; } .rc-ui .rc-find input::placeholder { color: var(--faint); } .rc-ui .rc-find .ambito { font-size: 11px; color: var(--muted); white-space: nowrap; } .rc-ui .rc-find .ambito b { color: var(--ink); font-weight: 700; } /* ============================================================================= 4. EL ENCABEZADO DE ZONA Y LAS PASTILLAS ========================================================================== */ .rc-ui .rc-zh { display: flex; align-items: center; gap: 9px; padding: 6px 3px 0; flex-wrap: wrap; } .rc-ui .rc-zh .t { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); } .rc-ui .rc-zh .n { font-size: 11px; font-weight: 700; color: var(--navy-500); font-variant-numeric: tabular-nums; } .rc-ui .rc-zh .d { font-size: 11.5px; color: var(--muted); margin-left: auto; } .rc-ui .rc-zh .d b { color: var(--ink); font-weight: 700; } .rc-ui .rc-chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 600; border: 1px solid var(--hair-strong); color: var(--muted); background: var(--surface); white-space: nowrap; } .rc-ui .rc-chip b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } .rc-ui .rc-chip .material-symbols-outlined { font-size: 14px; } .rc-ui .rc-chip.warn { background: var(--warn-050); border-color: var(--warn-hair); color: var(--warn); } .rc-ui .rc-chip.warn b { color: var(--warn); } .rc-ui .rc-chip.crit { background: var(--crit-050); border-color: var(--crit-hair); color: var(--crit); } .rc-ui .rc-chip.crit b { color: var(--crit); } .rc-ui .rc-chip.ok { background: var(--ok-050); border-color: var(--ok-hair); color: var(--ok); } .rc-ui .rc-chip.ok b { color: var(--ok); } .rc-ui .rc-chip.nav { background: var(--navy-050); border-color: #c6d6ee; color: var(--navy-500); } .rc-ui .rc-chip.nav b { color: var(--navy); } /* ============================================================================= 5. LOS BOTONES DEL LIENZO ============================================================================= El módulo viejo ponía SEIS del mismo tamaño en cada tarjeta —Consultar, Orden de descarga, Etiqueta, Editar, Eliminar, Confirmar—, y uno de ellos borra. La jerarquía la sostienen el tamaño y el peso: la dominante va alta, la de segunda va normal, y el resto se va al menú de los tres puntos. ========================================================================== */ .rc-ui .rc-b { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--hair-strong); background: var(--surface); color: var(--ink); font-family: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .14s var(--curva), border-color .14s var(--curva); } .rc-ui .rc-b .material-symbols-outlined { font-size: 17px; } .rc-ui .rc-b:hover { background: var(--canvas); } .rc-ui .rc-b:focus-visible { outline: 2px solid var(--navy-300); outline-offset: 2px; } .rc-ui .rc-b[disabled] { opacity: .5; cursor: not-allowed; } .rc-ui .rc-b.alto { height: 38px; padding: 0 16px; font-size: 13.5px; } .rc-ui .rc-b.alto .material-symbols-outlined { font-size: 19px; } .rc-ui .rc-b.pri { background: var(--navy); border-color: var(--navy); color: #fff; } .rc-ui .rc-b.pri:hover { background: var(--navy-700); border-color: var(--navy-700); } .rc-ui .rc-b.ok { background: var(--ok); border-color: var(--ok); color: #fff; } .rc-ui .rc-b.ok:hover { background: #0b6343; border-color: #0b6343; } .rc-ui .rc-b.fan { border-color: transparent; background: transparent; color: var(--muted); } .rc-ui .rc-b.fan:hover { background: var(--canvas); color: var(--ink); } .rc-ui .rc-b.mas { width: 32px; padding: 0; justify-content: center; color: var(--muted); } /* ============================================================================= 6. LA BALDOSA DEL CAMIÓN — la unidad de la cola ============================================================================= EL FILETE IZQUIERDO ES LA ESPERA, y es el único color que recorre la lista: 0-1 día navy, 2-3 ámbar, 4 o más rojo. Sale de la operación real —lo normal es que se descargue el día o el siguiente, y un finde con feriado estira a tres—, y por eso NO coincide con los 6 días que usa la cola de Movimientos de Stock: aquélla mide el ciclo administrativo completo, ésta mide la playa. `overflow: visible` A PROPÓSITO, y hay que saber por qué: el menú de los tres puntos del pie se abre HACIA ARRIBA desde adentro de la baldosa, y `overflow: hidden` lo recortaría sin que ningún z-index pueda salvarlo (el recorte de un ancestro gana siempre). Como la baldosa no recorta, la ÚNICA superficie teñida que toca una esquina —el pie— redondea las suyas ella misma. ========================================================================== */ .rc-ui .rc-cola { display: flex; flex-direction: column; gap: 9px; } .rc-ui .rc-cam { background: var(--surface); border: 1px solid var(--hair); border-left: 3px solid var(--navy-300); border-radius: var(--r-card); box-shadow: var(--shadow); overflow: visible; } .rc-ui .rc-cam.wr { border-left-color: var(--warn); } .rc-ui .rc-cam.cr { border-left-color: var(--crit); } /* El recién pre-cargado. Con la cola FIFO cae al FONDO —es el último que llegó—, así que hay que poder encontrarlo. No es un estado: es un «acá estás», y por eso se apaga solo al siguiente render. */ .rc-ui .rc-cam.nuevo { box-shadow: 0 0 0 2px var(--navy-300), var(--shadow); } .rc-ui .rc-cam .ch { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 9px 16px 8px; border-bottom: 1px solid var(--hair); } .rc-ui .rc-cam .ch .cod { font-family: ui-monospace, Consolas, Menlo, monospace; font-size: 14.5px; font-weight: 700; color: var(--navy); letter-spacing: -.01em; } .rc-ui .rc-cam .ch .ni { font-family: ui-monospace, Consolas, Menlo, monospace; font-size: 11px; font-weight: 600; color: var(--faint); } .rc-ui .rc-cam .ch .hr { margin-left: auto; font-size: 11px; color: var(--muted); white-space: nowrap; } /* LA ESPERA, ESCRITA. Es lo primero que se lee y por eso va ANTES del código. El módulo viejo mostraba la fecha, que obliga a restar. */ .rc-ui .rc-esp { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--hair-strong); background: var(--surface); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; } .rc-ui .rc-esp .material-symbols-outlined { font-size: 14px; } .rc-ui .rc-esp.wr { background: var(--warn-050); border-color: var(--warn-hair); color: var(--warn); } .rc-ui .rc-esp.cr { background: var(--crit-050); border-color: var(--crit-hair); color: var(--crit); } /* Sin fecha: no se sabe desde cuándo espera. Trazo cortado, como todo dato ausente del sistema — no es un cero ni un «hoy». */ .rc-ui .rc-esp.nada { border-style: dashed; color: var(--faint); font-style: italic; font-weight: 600; } .rc-ui .rc-cam .cb { display: grid; grid-template-columns: 1.45fr .92fr 1fr; align-items: stretch; } .rc-ui .rc-cam .cb > div { padding: 11px 16px; min-width: 0; } .rc-ui .rc-cam .cb > div + div { border-left: 1px solid var(--hair); } .rc-ui .rc-cam .l { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 2px; } .rc-ui .rc-cam .v { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rc-ui .rc-cam .v2 { font-size: 12px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rc-ui .rc-cam .v2.est { color: var(--warn); font-style: italic; } /* LAS UNIDADES SON EL NÚMERO GRANDE. No hay báscula en esta planta: lo que se controla al descargar es la cantidad de bolsas. Los kg son el renglón de abajo, con el kg/bolsa al lado para que la cuenta se pueda verificar. */ .rc-ui .rc-cam .un { font-size: 23px; font-weight: 700; letter-spacing: -.025em; font-variant-numeric: tabular-nums; line-height: 1.1; } .rc-ui .rc-cam .un small { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-left: 3px; } /* `.pat` es una sola pieza y vive en §14: la baldosa y la ficha la comparten. */ /* La tira de lo que le falta a ESTE camión. Ámbar sólo cuando hay algo que resolver: el color dice «acá falta algo», no «esto es un pre-lote». */ .rc-ui .rc-cam .aviso { display: flex; align-items: flex-start; gap: 8px; padding: 8px 16px; background: var(--warn-050); border-top: 1px solid var(--warn-hair); color: var(--warn); font-size: 12px; font-weight: 600; line-height: 1.45; } .rc-ui .rc-cam .aviso b { color: inherit; font-weight: 700; } .rc-ui .rc-cam .aviso .material-symbols-outlined { font-size: 17px; margin-top: 1px; } .rc-ui .rc-cam .cf { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 9px 16px; background: #fafbfd; border-top: 1px solid var(--hair); /* La baldosa no recorta (ver arriba): el pie redondea sus propias esquinas. */ border-radius: 0 0 calc(var(--r-card) - 1px) calc(var(--r-card) - 1px); } .rc-ui .rc-cam .cf .der { margin-left: auto; display: flex; gap: 6px; align-items: center; } /* ============================================================================= 7. EL MENÚ DE LOS TRES PUNTOS — lo que no es la acción del día ============================================================================= Se abre HACIA ARRIBA (`bottom: 100%`) porque vive en el pie de la baldosa y abajo no hay lugar. Vive ADENTRO de la baldosa y no colgado del : la baldosa no recorta, así que no hace falta la mudanza — y un menú colgado del body necesita reposicionarse en cada scroll, que es una carrera que ya costó tiempo en otro módulo. ========================================================================== */ .rc-ui .rc-menu-wrap { position: relative; } .rc-ui .rc-menu { position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 20; min-width: 196px; padding: 5px; background: var(--surface); border: 1px solid var(--hair-strong); border-radius: 11px; box-shadow: var(--e2); display: flex; flex-direction: column; gap: 1px; } .rc-ui .rc-menu button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--ink); font-family: inherit; font-size: 12.5px; font-weight: 600; text-align: left; cursor: pointer; } .rc-ui .rc-menu button .material-symbols-outlined { font-size: 18px; color: var(--muted); } .rc-ui .rc-menu button:hover { background: var(--canvas); } .rc-ui .rc-menu button:focus-visible { outline: 2px solid var(--navy-300); outline-offset: -2px; } /* Lo que destruye va rojo, y va SEPARADO por un trazo: es la única acción de la baldosa que no se puede deshacer. */ .rc-ui .rc-menu button.mata { color: var(--crit); border-top: 1px solid var(--hair); border-radius: 0 0 7px 7px; margin-top: 4px; padding-top: 10px; } .rc-ui .rc-menu button.mata .material-symbols-outlined { color: var(--crit); } .rc-ui .rc-menu button.mata:hover { background: var(--crit-050); } /* ============================================================================= 8. LO CERRADO — plegable, con SU fecha y el cotejo en UNIDADES ============================================================================= La fecha vive acá adentro y no arriba, porque es la única zona que necesita una: la cola no se filtra por fecha nunca. EL COTEJO ES EN BOLSAS. `bolsasDecla` es lo que dijo el remito y `bolsasIngresadas` lo que quedó al confirmar. Los dos están en la base desde siempre y la tarjeta vieja mostraba UNO SOLO. ========================================================================== */ .rc-ui .rc-fold { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-card); box-shadow: var(--shadow); overflow: hidden; } .rc-ui .rc-fold .fh { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 10px 16px; } .rc-ui .rc-fold.abierto .fh { border-bottom: 1px solid var(--hair); } .rc-ui .rc-fold .fh .t { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); } .rc-ui .rc-fold .fh .der { margin-left: auto; display: flex; gap: 8px; align-items: center; } .rc-ui .rc-fold .fecha { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 9px; border-radius: 8px; border: 1px solid var(--hair-strong); background: var(--surface); } .rc-ui .rc-fold .fecha .material-symbols-outlined { font-size: 15px; color: var(--faint); } .rc-ui .rc-fold .fecha input { border: 0; outline: 0; background: transparent; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .rc-ui .rc-cerr { display: grid; grid-template-columns: 122px 1fr 138px 176px auto; gap: 12px; align-items: center; padding: 9px 16px; border-bottom: 1px solid var(--hair); } .rc-ui .rc-cerr:last-child { border-bottom: 0; } .rc-ui .rc-cerr .hr { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .rc-ui .rc-cerr .cod { font-family: ui-monospace, Consolas, Menlo, monospace; font-size: 13px; font-weight: 700; color: var(--ok); } .rc-ui .rc-cerr .sub { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rc-ui .rc-cerr .cnt { text-align: right; font-variant-numeric: tabular-nums; } .rc-ui .rc-cerr .cnt b { font-size: 14px; font-weight: 700; } .rc-ui .rc-cerr .cnt small { display: block; font-size: 10.5px; color: var(--muted); } .rc-ui .rc-cerr .acc { display: flex; gap: 6px; justify-content: flex-end; } .rc-ui .rc-cotejo { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; } .rc-ui .rc-cotejo .material-symbols-outlined { font-size: 17px; } .rc-ui .rc-cotejo b { font-variant-numeric: tabular-nums; font-weight: 700; } .rc-ui .rc-cotejo.ok { color: var(--ok); } .rc-ui .rc-cotejo.wr { color: var(--warn); } /* Sin unidades no hay nada que cotejar, y eso se DICE. Un renglón en blanco se lee como «cuadró», que es una afirmación que nadie hizo. */ .rc-ui .rc-cotejo.nada { color: var(--faint); font-style: italic; font-weight: 500; } /* ============================================================================= 9. EL DIÁLOGO DEL MÓDULO — velo, panel y controles ============================================================================= Los TRES diálogos de Recepción —el formulario de pre-carga, la consulta y el selector de OC— cuelgan del `` y por eso llevan `.rc-ui` en su PROPIA raíz, no heredado de un ancestro. El compuesto va sin espacio (`.rc-ui.rc-velo`) y está arriba, con su motivo. El velo es el mismo tono que el resto de GS (`rgba(10,25,60,.45)` + blur), no el `bg-slate-900/60` de Tailwind que traía el módulo. Y las cabeceras teñidas —ámbar en el formulario, azul en el selector de OC, índigo en el alta de chofer— se murieron: tres colores de cabecera para tres diálogos del mismo módulo era color=CATEGORÍA de manual. ========================================================================== */ .rc-ui.rc-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; } .rc-ui.rc-velo.arriba { z-index: 80; } /* el que se abre ENCIMA de otro */ .rc-ui .rc-dlg { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--e3); width: 100%; max-width: 720px; display: flex; flex-direction: column; max-height: calc(100vh - 32px); /* `visible` a propósito: los smart-selectors despliegan su lista hacia abajo y un `hidden` acá se la comería sin que ningún z-index la salve. */ overflow: visible; } .rc-ui .rc-dlg.ancho { max-width: 940px; } .rc-ui .rc-dlg > header { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--hair); flex: none; } .rc-ui .rc-dlg > header .tit { min-width: 0; } .rc-ui .rc-dlg > header .cap { font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--faint); } .rc-ui .rc-dlg > header h3 { margin: 1px 0 0; font-size: 17px; font-weight: 700; letter-spacing: -.015em; color: var(--ink); } .rc-ui .rc-dlg > header .cerrar { margin-left: auto; flex: none; width: 34px; height: 34px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .rc-ui .rc-dlg > header .cerrar:hover { background: var(--canvas); color: var(--ink); } .rc-ui .rc-dlg > .cuerpo { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; } .rc-ui .rc-dlg > footer { display: flex; align-items: center; gap: 8px; flex: none; padding: 12px 18px; border-top: 1px solid var(--hair); background: #fafbfd; border-radius: 0 0 calc(var(--r-card) - 1px) calc(var(--r-card) - 1px); } .rc-ui .rc-dlg > footer .der { margin-left: auto; display: flex; gap: 8px; } /* ============================================================================= 10. LA TIRA DE VALIDACIÓN — todo lo que falta, DE UNA ============================================================================= Reemplaza a los SEIS `alert()` en fila de `recGuardarPreLote()`: avisaba el artículo, corregías, volvías a apretar, avisaba el titular. Con un camión y un chofer esperando del otro lado del vidrio. Y es una TIRA y no un modal, que es lo que dice el §7 del manual: un cartel encima del formulario tapa justamente los campos que hay que corregir. ========================================================================== */ .rc-ui .rc-tira { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-radius: 10px; background: var(--crit-050); border: 1px solid var(--crit-hair); color: var(--crit); font-size: 12.5px; line-height: 1.5; } .rc-ui .rc-tira .material-symbols-outlined { font-size: 19px; margin-top: 1px; flex: none; } .rc-ui .rc-tira .t { font-weight: 700; display: block; margin-bottom: 3px; } .rc-ui .rc-tira ul { margin: 0; padding-left: 17px; } .rc-ui .rc-tira li { margin: 1px 0; } .rc-ui .rc-tira button { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; } /* El campo que la tira nombra, mientras esté sin resolver. */ .rc-ui .rc-campo.falta > .rc-inp, .rc-ui .rc-campo.falta > .rc-sel, .rc-ui .rc-campo.falta .ss-input { border-color: var(--crit); } /* ============================================================================= 11. LOS GRUPOS Y LOS CONTROLES DEL FORMULARIO ============================================================================= Cuatro grupos y el mismo vocabulario que la ficha: LA ORDEN · LA MERCADERÍA · EL CAMIÓN · EL PAPEL. El formulario viejo era una grilla de quince campos corridos, donde «Depósito de descarga» y «Patente 2 (acoplado)» pesaban lo mismo y estaban a dos renglones de distancia. ========================================================================== */ .rc-ui .rc-gr { border: 1px solid var(--hair); border-radius: 11px; padding: 12px 14px 14px; } .rc-ui .rc-gr > .gt { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--faint); } .rc-ui .rc-gr > .gt .material-symbols-outlined { font-size: 16px; } .rc-ui .rc-gr > .gt .nota { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: 11px; font-weight: 500; color: var(--muted); } .rc-ui .rc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; } .rc-ui .rc-grid .ancho { grid-column: 1 / -1; } .rc-ui .rc-campo { min-width: 0; display: flex; flex-direction: column; } .rc-ui .rc-campo > label { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; display: flex; align-items: center; gap: 5px; } .rc-ui .rc-campo > label .req { color: var(--crit); } .rc-ui .rc-campo > .ayuda { font-size: 11px; color: var(--muted); margin-top: 4px; } .rc-ui .rc-inp, .rc-ui .rc-sel, .rc-ui .rc-ta { width: 100%; min-width: 0; border: 1px solid var(--hair-strong); border-radius: 9px; padding: 8px 11px; background: var(--surface); color: var(--ink); font-family: inherit; font-size: 13px; outline: 0; } .rc-ui .rc-inp:focus, .rc-ui .rc-sel:focus, .rc-ui .rc-ta:focus { border-color: var(--navy-300); box-shadow: 0 0 0 3px var(--navy-050); } .rc-ui .rc-inp[readonly], .rc-ui .rc-inp:disabled, .rc-ui .rc-sel:disabled { background: var(--canvas); color: var(--muted); cursor: not-allowed; } .rc-ui .rc-ta { resize: vertical; min-height: 56px; } .rc-ui .rc-inp.mono { font-family: ui-monospace, Consolas, Menlo, monospace; } .rc-ui .rc-inp.num { text-align: right; font-variant-numeric: tabular-nums; } .rc-ui .rc-inp.grande { font-size: 19px; font-weight: 700; padding: 9px 11px; } /* El renglón «chofer + crear chofer al vuelo». El botón era ÍNDIGO relleno, que en una fila de controles grises era la superficie más fuerte del formulario para la acción menos frecuente. */ .rc-ui .rc-conbtn { display: flex; gap: 6px; align-items: stretch; } .rc-ui .rc-conbtn > :first-child { flex: 1; min-width: 0; } /* La tira de «las patentes no coinciden con el ABM». Ámbar porque hay algo que decidir, no porque sea una categoría. */ .rc-ui .rc-sync { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 9px 12px; border-radius: 9px; background: var(--warn-050); border: 1px solid var(--warn-hair); color: var(--warn); font-size: 12px; font-weight: 600; } .rc-ui .rc-sync .material-symbols-outlined { font-size: 17px; } .rc-ui .rc-sync label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin-left: auto; } /* ============================================================================= 12. LAS ÓRDENES ELEGIDAS, Y EL FORMATO DE PALLETIZADO ========================================================================== */ .rc-ui .rc-ocs { display: flex; flex-direction: column; gap: 6px; } .rc-ui .rc-oc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 10px; border: 1px solid var(--hair); border-radius: 9px; background: var(--surface); } /* `.oc-n` Y NO `.num`, Y LO ENCONTRÓ LA PRUEBA EN VIVO. En este renglón conviven el N° de orden y el input de kg, y el input lleva `.rc-inp num` —donde `.num` significa «alineá a la derecha»—. Con las dos reglas llamadas igual, el input heredaba la tipografía monoespaciada y el NAVY del número de orden: un campo editable pintado como si fuera un dato de sólo lectura. Es el choque de clase dentro del mismo scope, otra vez. */ .rc-ui .rc-oc .oc-n { font-family: ui-monospace, Consolas, Menlo, monospace; font-size: 13px; font-weight: 700; color: var(--navy); } .rc-ui .rc-oc .que { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rc-ui .rc-oc .cap { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); } .rc-ui .rc-oc .rc-inp { width: 108px; } .rc-ui .rc-oc .quitar { width: 28px; height: 28px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .rc-ui .rc-oc .quitar:hover { background: var(--crit-050); color: var(--crit); } /* EL BLOQUE DE LAS ÓRDENES TAMBIÉN SE MARCA. Desde que los kg de cada orden ya no vienen puestos, «faltan los kg» es un dato faltante como cualquier otro, y la tira de arriba lo nombra: tiene que poder señalarlo. */ .rc-ui .rc-ocs.falta .rc-oc { border-color: var(--crit); } .rc-ui .rc-ocs.falta .rc-oc .rc-inp { border-color: var(--crit); } /* Pasarse del disponible: se dice al lado del campo, mientras se escribe. */ .rc-ui .rc-oc .exc { display: none; } .rc-ui .rc-oc.exceso { border-color: var(--warn-hair); background: var(--warn-050); } .rc-ui .rc-oc.exceso .rc-inp { border-color: var(--warn); color: var(--warn); font-weight: 700; } .rc-ui .rc-oc.exceso .exc { display: block; flex-basis: 100%; margin: 0; font-size: 11.5px; font-weight: 600; color: var(--warn); } .rc-ui .rc-octotal { display: flex; justify-content: flex-end; gap: 6px; font-size: 12px; color: var(--muted); padding-top: 3px; } .rc-ui .rc-octotal b { color: var(--ink); font-variant-numeric: tabular-nums; } .rc-ui .rc-fmt { display: flex; flex-direction: column; gap: 2px; } .rc-ui .rc-fmt label { display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 7px; cursor: pointer; font-size: 13px; } .rc-ui .rc-fmt label:hover { background: var(--canvas); } .rc-ui .rc-fmt .code { font-family: ui-monospace, Consolas, Menlo, monospace; font-weight: 700; } .rc-ui .rc-fmt .cuantos { font-size: 11px; color: var(--faint); } .rc-ui .rc-fmt .def { font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ok); background: var(--ok-050); border: 1px solid var(--ok-hair); border-radius: 5px; padding: 1px 6px; } .rc-ui .rc-fmt .rc-inp { flex: 1; min-width: 0; } /* ============================================================================= 13. LA TABLA DEL SELECTOR DE ÓRDENES ========================================================================== */ .rc-ui .rc-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; } .rc-ui .rc-tabla th { position: sticky; top: 0; z-index: 1; background: #f7f9fc; text-align: left; font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); padding: 8px 10px; border-bottom: 1px solid var(--hair-strong); white-space: nowrap; } .rc-ui .rc-tabla td { padding: 8px 10px; border-bottom: 1px solid var(--hair); vertical-align: middle; } .rc-ui .rc-tabla tr:last-child td { border-bottom: 0; } .rc-ui .rc-tabla tbody tr { cursor: pointer; } .rc-ui .rc-tabla tbody tr:hover td { background: var(--navy-050); } .rc-ui .rc-tabla .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .rc-ui .rc-tabla .num { font-family: ui-monospace, Consolas, Menlo, monospace; font-weight: 700; color: var(--navy); } .rc-ui .rc-tabla .mu { color: var(--muted); } .rc-ui .rc-tabla .disp { font-weight: 700; color: var(--ok); } .rc-ui .rc-tabla .disp.cero { color: var(--faint); font-weight: 500; } .rc-ui .rc-tabla .resv { color: var(--warn); font-weight: 700; } /* ============================================================================= 14. LA FICHA — el pre-ingreso entero, de sólo lectura ============================================================================= Mismo vocabulario que el formulario y que la baldosa: LA MERCADERÍA · EL CAMIÓN · EL PAPEL. La ficha vieja era una grilla de doce datos corridos con una cabecera teñida de ámbar o de verde según el estado — o sea que el estado se guardaba en el color de una superficie, que es lo que §7 prohíbe. Lo que agrega: EL COTEJO. Cuánto decía el remito y cuánto quedó al confirmar, en bolsas. Los dos números estaban en la base desde siempre y la ficha vieja mostraba «Cantidad ingresada» a secas, sin nada contra qué compararla. ========================================================================== */ .rc-ui .rc-fchips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .rc-ui .rc-fcant { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 10px 12px; border-radius: 9px; background: var(--canvas); } .rc-ui .rc-fcant .l { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); } .rc-ui .rc-fcant .un { font-size: 26px; font-weight: 700; letter-spacing: -.025em; font-variant-numeric: tabular-nums; line-height: 1.1; } .rc-ui .rc-fcant .un small { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-left: 4px; } .rc-ui .rc-fcant .v2 { font-size: 12px; color: var(--muted); margin-top: 2px; } .rc-ui .rc-fcant .v2.est { color: var(--warn); font-style: italic; } .rc-ui .rc-fcant .cot { margin-left: auto; } /* El valor de un dato de sólo lectura. No es un input apagado: un campo con borde que no se puede tocar invita a tocarlo. */ .rc-ui .rc-campo > .valor { font-size: 13.5px; font-weight: 600; min-height: 20px; } .rc-ui .rc-campo > .valor.mono { font-family: ui-monospace, Consolas, Menlo, monospace; } /* La patente sale de la baldosa: la ficha la usa igual. */ .rc-ui .pat { display: inline-block; font-family: ui-monospace, Consolas, Menlo, monospace; font-size: 12px; background: var(--canvas); border: 1px solid var(--hair-strong); border-radius: 5px; padding: 1px 6px; margin-right: 5px; }