/* ============================================================================ Chicken Porcionado · sistema de diseño ---------------------------------------------------------------------------- Una sola hoja, sin build. Reglas que se respetan en toda la app: 1. UN color de acento, y solo para la acción principal. Los estados (verde/rojo/ámbar) son tintes apagados y nunca compiten con el acento. 2. Tres botones y no más: primario (relleno), secundario (contorno), fantasma (texto). Todos con la misma altura y el mismo radio. 3. Escala de espaciado de 4 px. Nada de márgenes sueltos "a ojo". 4. La interfaz no explica: los párrafos largos van al LEEME, no a la pantalla. ========================================================================== */ /* ============================================================================ LA TIPOGRAFÍA Inter, servida DESDE LA PROPIA APP (src/estaticos/fuentes/, 196 KB en cuatro pesos). Antes la hoja decía `font-family: "Inter", ...` pero **nunca se cargaba el archivo**: en este PC caía a Segoe UI y la letra que se veía no era la que decía el código. Va local y no desde Google Fonts a propósito: esto corre en una planta y tiene que verse igual sin internet. Solo el subconjunto `latin`: cubre á é í ó ú ñ ü, que es todo lo que usa el español. El `latin-ext` pesaba 332 KB más y no aporta nada aquí. ========================================================================== */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/estaticos/fuentes/inter-400-latin.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/estaticos/fuentes/inter-500-latin.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/estaticos/fuentes/inter-600-latin.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/estaticos/fuentes/inter-700-latin.woff2") format("woff2"); } :root { /* --- superficie ------------------------------------------------------- */ --canvas: #f4f5f7; --superficie: #ffffff; --superficie-2:#fafbfc; --linea: #e3e6ea; --linea-fuerte:#d2d7dd; /* --- texto ------------------------------------------------------------ */ --tinta: #14181d; --tinta-media: #5b6573; /* Auditoría 8 sep 2026: #8b95a3 medía ~3,0:1 sobre blanco. Este tono lo usan TOTAL FACTURADO/PESADO/RECIBIDO/DIFERENCIA y la línea de kg de cada fila de la lista -- las etiquetas que distinguen números que se firman contra una factura. #6b7583 da ~4,6:1, ya en AA. */ --tinta-suave: #6b7583; /* --- chrome (barra superior) ------------------------------------------ */ /* La barra es BLANCA: la navegación es parte de la misma superficie clara de la aplicación, no una franja oscura pegada arriba. */ --chrome: #ffffff; --chrome-texto:#5b6573; --chrome-linea:#1e2a44; /* filete fino que cierra el encabezado */ /* --- acento: SOLO para la acción principal ---------------------------- */ /* Es el ROJO DE LA MARCA, sacado del logo que entregó el cliente (`Logo chiken porcionados.jpg`, rojo puro #ff020d). Se oscureció un punto para que el texto blanco encima pase contraste AA sobre relleno y para que el enlace sea legible sobre blanco (5,3:1). El #ff020d crudo es de señalética, no de interfaz: quema y no deja leer. ⚠️ El acento y el estado de ALERTA son los dos rojizos, así que NUNCA se distinguen por el color: se distinguen por la FORMA. La acción principal siempre es un botón RELLENO; el error siempre es un panel con borde e icono. Eso ya está así y no se debe romper. */ --acento: #d81221; --acento-fuerte:#b30d1a; --acento-tenue: #fdeaec; /* --- estados: tintes apagados ----------------------------------------- */ --bien: #0f6b45; --bien-fondo: #e9f4ee; --alerta: #a8321f; --alerta-fondo:#fbeeeb; --proceso: #8a5300; --proceso-fondo:#fbf2e2; --neutro: #4a5361; --neutro-fondo:#eef0f3; /* --- dato: la ficha azul de la referencia ----------------------------- */ --dato: #1c53b3; --dato-fondo: #e8f0fe; --dato-linea: #c5d9f7; /* --- geometría -------------------------------------------------------- */ /* Radios generosos y un marco visible en cada caja: el cliente pidió "marcos que limitan", que el contenido se vea contenido y no flotando. */ --r-caja: 14px; --r-control: 8px; /* 36 px. Bajó de 38 porque el cliente vio los campos "muy grandes" en el teléfono (8 sep 2026). NO baja más: por debajo de 36 se empieza a fallar el toque con las manos frías de la planta, y 36 ya está por debajo de los 44 que recomienda Apple. Es una concesión consciente al cliente, no un descuido: si en la planta se quejan de que fallan el toque, esto es lo primero que hay que subir. */ --alto-control: 36px; --sombra: 0 1px 2px rgba(20, 24, 29, .03), 0 2px 8px rgba(20, 24, 29, .05); --sombra-barra: 0 1px 3px rgba(20, 24, 29, .06); } * { box-sizing: border-box; } /* ⚠️ El atributo `hidden` gana SIEMPRE. El navegador lo aplica con `display: none`, pero cualquier regla nuestra que ponga `display` lo tumba, porque una clase pesa más que el estilo de agente de usuario. Pasó con dos botones que nacen ocultos y los destapa el JavaScript: la × de los buscadores (`display: inline-flex`) salía en campos obligatorios donde no debe estar, y el ojito de la contraseña se habría visto aunque `clave.js` no cargara -- justo lo contrario de lo que se buscó al hacerlo mejora progresiva. */ [hidden] { display: none !important; } /* ============================================================================ NADA SE DESBORDA A LO ANCHO. Regla dura del cliente: no se hace scroll horizontal en ninguna pantalla. Lo que pueda empujar el documento (una tabla ancha, un correo largo, una dirección) parte de línea en vez de estirarlo. Cada componente que puede crecer trae su propia regla de ajuste más abajo. ⚠️ AQUÍ NO VA `overflow-x: clip` NI `hidden`. Se probó y fue peor: en vez de arreglar el desborde lo ESCONDE — el contenido que sobra se recorta y el usuario lo pierde sin enterarse. Y de paso ciega la medición, porque `scrollWidth` pasa a ser igual que `clientWidth` y todo parece correcto cuando no lo está. El desborde se arregla en el componente que lo causa. ========================================================================== */ html { max-width: 100%; } body { margin: 0; font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 14px; line-height: 1.5; color: var(--tinta); background: var(--canvas); -webkit-font-smoothing: antialiased; } /* ============================================================ barra superior */ /* ⚠️ TRES ZONAS, no un flex corrido: marca a la izquierda, menú CENTRADO en la pantalla, sesión a la derecha. Con flex el menú quedaba pegado a la marca y se movía cada vez que el nombre del usuario o el título cambiaban de largo. Las columnas laterales son `1fr` iguales, así que el centro cae en el centro de verdad, pase lo que pase a los lados. */ .barra { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px 24px; padding: 8px 24px; background: var(--chrome); border-bottom: 2px solid var(--chrome-linea); box-shadow: var(--sombra-barra); position: sticky; top: 0; z-index: 20; } .barra > nav { justify-self: center; } .barra > .sesion { justify-self: end; } .marca { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; } .marca strong { display: block; font-size: 14.5px; color: var(--tinta); letter-spacing: -.015em; } .marca small { display: block; font-size: 11px; color: var(--tinta-suave); } /* El logo de la marca. Va CIRCULAR porque el logo es un sello redondo: con esquinas cuadradas se le verían los picos blancos del JPG. El archivo no tiene transparencia y la barra también es blanca, así que lleva un aro fino: sin él el sello parece flotar recortado. */ .logo { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; overflow: hidden; box-shadow: 0 0 0 1px var(--linea); background: #fff; } /* Respaldo por si algún día no hay imagen y vuelven las dos letras. */ span.logo { background: var(--acento); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; letter-spacing: .5px; } /* La navegación empuja al borde derecho y ocupa lo que sobra. Con 11 enlaces tiene que poder partir en dos líneas sin romper nada: por eso wrap. */ nav { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; margin-left: auto; min-width: 0; } /* Icono ARRIBA y etiqueta debajo. Ocupa menos ancho que en línea -- caben más secciones sin apretar -- y cada entrada se lee como un botón entero y no como un texto con un dibujito al lado. */ nav a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 14px; min-width: 74px; border-radius: 10px; color: var(--chrome-texto); text-decoration: none; font-size: 11.5px; font-weight: 600; white-space: nowrap; letter-spacing: -.005em; transition: background .12s, color .12s; } /* Los SVG traen width/height en el HTML; aquí se unifican para que todos midan lo mismo aunque el atributo diga otra cosa. */ nav a svg, nav a .ico { width: 20px; height: 20px; } /* El icono toma el color del texto del enlace (currentColor): gris normal, tinta al pasar el mouse, acento cuando está activo -- sin reglas aparte. */ nav a svg { flex: 0 0 auto; } nav a:hover { background: var(--neutro-fondo); color: var(--tinta); } /* El activo es una píldora del color de acento, apagada. Es el único sitio donde el acento aparece fuera de la acción principal, y se gana el permiso: saber en qué pantalla se está es lo primero que se mira. */ nav a.sel { background: var(--acento-tenue); color: var(--acento); font-weight: 700; } /* Separa el flujo de planta de los catálogos, que se tocan una vez. */ .nav-sep { width: 1px; height: 22px; background: var(--linea); margin: 0 8px; } /* La recepción se digita con el camión abajo: se usa toda la pantalla. */ main { max-width: 1800px; margin: 0 auto; padding: 24px 24px 56px; min-width: 0; } /* ================================================================ tipografía */ /* 19px y no 22: el cliente los vio "muy grandes" (8 sep 2026). En una pantalla de trabajo el título no compite por atención -- ya se sabe dónde se está por la pestaña marcada en la barra; lo que tiene que resaltar son los datos. */ h1 { font-size: 19px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 18px; } h2 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-media); margin: 32px 0 12px; } .titulo-fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .titulo-fila h1 { margin: 0; } .titulo-fila .acciones { margin: 0; } /* Texto de apoyo. Una línea, nunca un párrafo. */ .ayuda, .nota { color: var(--tinta-media); font-size: 12.5px; margin: 8px 0 0; } .suave { color: var(--tinta-media); } /* ==================================================================== avisos */ .aviso { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--r-control); margin-bottom: 20px; font-size: 13.5px; border: 1px solid; } .aviso::before { font-weight: 700; line-height: 1.4; } /* Un aviso sin modificador es informativo, no una alarma: tinte neutro y no compite con .error. Lo usa el recordatorio de datos que exige la norma. */ .aviso:not(.ok):not(.error) { background: var(--neutro-fondo); border-color: var(--linea-fuerte); color: var(--tinta-media); } .aviso:not(.ok):not(.error)::before { content: "i"; font-style: italic; } .aviso.ok { background: var(--bien-fondo); border-color: #c9e5d6; color: #0d5537; } .aviso.ok::before { content: "✓"; } .aviso.error { background: var(--alerta-fondo); border-color: #f0cdc6; color: #8f2718; } .aviso.error::before { content: "!"; } /* El porqué de un aviso de norma, plegado. Los avisos legales tienen que explicar la ley para que se entiendan, y esa explicación en el teléfono se come media pantalla antes de llegar al trabajo. La primera línea dice qué falta y dónde se arregla; el artículo y la razón quedan a un toque. */ .porque { margin-top: 2px; } .porque > summary { cursor: pointer; list-style: none; font-weight: 600; font-size: 12.5px; opacity: .75; display: inline-flex; align-items: center; gap: 4px; min-height: 28px; } .porque > summary::-webkit-details-marker { display: none; } .porque > summary::after { content: "▾"; font-size: 9px; } .porque[open] > summary::after { content: "▴"; } .porque > p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; } /* ================================================================== tarjetas */ /* Cada cifra en su propia caja con marco, separadas por aire, como en la referencia del WMS. Antes eran una rejilla pegada de 1 px que se leía como una sola caja partida. */ .tarjetas { display: grid; gap: 12px; margin-bottom: 20px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-caja); box-shadow: var(--sombra); padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .etiqueta { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-suave); font-weight: 600; overflow-wrap: anywhere; } .cifra { font-size: 22px; font-weight: 600; letter-spacing: -.025em; font-variant-numeric: tabular-nums; line-height: 1.15; /* ⚠️ Aquí decía `overflow-wrap: anywhere` y era exactamente lo contrario de lo que hace falta: partía "4.606,30" por cualquier sitio y en pantalla quedaba "4.606,3" en un renglón y "0" en el siguiente. Un número LEÍDO A MEDIAS es peor que un número cortado: 1.258,0 no es 1.258,00. Una cifra no se parte nunca; si no cabe, se achica la letra o se ensancha la caja. */ white-space: nowrap; } .cifra.chico { font-size: 14px; font-weight: 500; letter-spacing: 0; } .cifra em { font-size: 11px; font-style: normal; font-weight: 500; color: var(--tinta-suave); margin-left: 3px; } .tarjeta.merma .cifra { color: var(--alerta); } .tarjeta.neto .cifra { color: var(--bien); } .merma-txt { color: var(--alerta); } .neto-txt { color: var(--bien); } /* ===================================================================== panel */ .panel { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-caja); box-shadow: var(--sombra); margin-bottom: 20px; overflow: hidden; } .panel-cifras { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); padding: 18px 20px; border-bottom: 1px solid var(--linea); background: var(--superficie-2); } .panel-cifras > div { display: flex; flex-direction: column; gap: 4px; } .panel > .formulario, .panel > .ayuda, .panel > .vacio-linea { margin: 0; padding: 18px 20px; } .panel > .ayuda { padding-top: 0; } .observaciones { color: var(--tinta-media); margin: 0; padding: 0 20px 16px; } /* =============================================================== formularios */ .formulario { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-caja); box-shadow: var(--sombra); padding: 20px; max-width: 560px; display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; } .formulario.en-linea { flex-direction: row; align-items: flex-end; gap: 16px; flex-wrap: wrap; max-width: none; } .formulario.en-linea > div { display: flex; flex-direction: column; gap: 6px; flex: 1 1 170px; } .panel .formulario { border: 0; border-radius: 0; box-shadow: none; } label { font-weight: 600; font-size: 12.5px; color: var(--tinta); } .opcional { font-weight: 400; color: var(--tinta-suave); } /* ⚠️ La lista de tipos va COMPLETA. Estuvo solo con text/date y las casillas de correo y contraseña del login se quedaron con el borde crudo del navegador: cuadradas, grises y ajenas al resto de la app. Un tipo que falte aquí es una casilla sin diseñar, así que se listan todos los que se usan. */ input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=search], input[type=tel], select, textarea { height: var(--alto-control); padding: 0 11px; font-size: 14px; font-family: inherit; border: 1px solid var(--linea-fuerte); border-radius: var(--r-control); background: #fff; color: var(--tinta); width: 100%; transition: border-color .15s ease, box-shadow .15s ease; } textarea { height: auto; padding: 9px 11px; resize: vertical; } input::placeholder { color: var(--tinta-suave); } input:hover, select:hover { border-color: #b9c0c9; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-tenue); } /* La flecha del desplegable, dibujada por nosotros. La nativa cambia de forma en cada navegador y en Windows sale dentro de un botón gris con esquina viva: es lo único de la app que no tendría nuestro trazo. Va como SVG incrustado (mismo trazo 1.8 del juego de iconos) y no como archivo aparte para no gastar una petición en una flecha de 200 bytes. */ select { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7583' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px 16px; } select:disabled { background-color: var(--superficie-2); color: var(--tinta-suave); cursor: not-allowed; } /* Mismo motivo con el calendario: el icono que pinta Chrome es un glifo relleno y oscuro, el único elemento de la app fuera del trazo de 1.8. Firefox no expone este pseudo-elemento y muestra el suyo; se ve bien igual, por eso no se fuerza con `appearance: none` (que dejaría el campo sin ninguna forma de abrir el calendario). */ input[type=date]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .75; width: 17px; height: 17px; padding: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7583' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); background-size: 17px 17px; background-repeat: no-repeat; } input[type=date]::-webkit-calendar-picker-indicator:hover { opacity: 1; } input[readonly] { background: var(--superficie-2); color: var(--tinta-suave); border-style: dashed; cursor: not-allowed; } .acciones { display: flex; align-items: center; gap: 10px; } /* Rejillas de campos. Un formulario de recepción tiene ocho datos: en una sola columna obliga a bajar la vista, y de pie frente a la báscula eso no sirve. */ .rejilla-2, .rejilla-3, .rejilla-4 { display: grid; gap: 14px; } .rejilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rejilla-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .rejilla-2 > div, .rejilla-3 > div, .rejilla-4 > div { display: flex; flex-direction: column; gap: 6px; } .formulario:has(.rejilla-2, .rejilla-3) { max-width: 780px; } .formulario:has(.rejilla-4) { max-width: 1000px; } .formulario.en-linea > div.crece { flex: 3 1 240px; } /* Grupo de campos que se lee como una sola pregunta ("¿cómo llegó?"). */ .bloque { border: 1px solid var(--linea); border-radius: var(--r-caja); padding: 16px 18px 18px; margin: 0; display: flex; flex-direction: column; gap: 14px; background: var(--superficie-2); } .bloque > legend { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; color: var(--tinta-suave); padding: 0 6px; } /* =================================================================== botones */ .boton { display: inline-flex; align-items: center; justify-content: center; height: var(--alto-control); padding: 0 16px; border: 1px solid transparent; border-radius: var(--r-control); background: var(--acento); color: #fff; font-size: 13.5px; font-weight: 600; font-family: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; } .boton:hover { background: var(--acento-fuerte); } .boton:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; } .boton.secundario { background: var(--superficie); color: var(--tinta); border-color: var(--linea-fuerte); } .boton.secundario:hover { background: var(--superficie-2); border-color: #b9c0c9; } .boton.fantasma { background: transparent; color: var(--tinta-media); border-color: transparent; padding: 0 10px; } .boton.fantasma:hover { background: var(--neutro-fondo); color: var(--tinta); } .boton.pequeno { height: 32px; padding: 0 12px; font-size: 13px; } .boton.peligro { background: transparent; color: var(--alerta); border-color: transparent; padding: 0 10px; } .boton.peligro:hover { background: var(--alerta-fondo); } /* Botón apagado: se ve que está ahí y que todavía no se puede. Gris y no rojo, porque el rojo dice "haz esto" (HANDOFF §7: un solo acento, para la acción principal), y un botón que no responde no puede estar diciéndolo. */ .boton:disabled, .boton:disabled:hover { background: var(--superficie-2); color: var(--tinta-suave); border-color: var(--linea-fuerte); cursor: not-allowed; } .cancelar { color: var(--tinta-media); text-decoration: none; font-size: 13.5px; } .cancelar:hover { color: var(--tinta); text-decoration: underline; } /* Campo de escanear/escribir: es la entrada principal de su pantalla, así que pesa más que el resto. El lector "teclea" el código y da Enter. */ .buscador-lote { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-caja); box-shadow: var(--sombra); padding: 18px 20px; margin-bottom: 16px; } .buscador-lote form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; } .campo-codigo-caja { flex: 1 1 320px; max-width: 420px; display: flex; flex-direction: column; gap: 6px; } .campo-codigo { height: 44px; font-size: 16px; letter-spacing: .02em; font-variant-numeric: tabular-nums; } .buscador-lote .boton { height: 44px; } .buscador-lote code { background: var(--neutro-fondo); padding: 1px 5px; border-radius: 4px; font-size: 11.5px; } /* Barra de filtros: cada control con su etiqueta ENCIMA, no al lado. Con las etiquetas en línea, tres filtros seguidos se leen como una frase corrida ("Proveedor ... Pedido desde ... Hasta ...") y no se ve dónde empieza uno y termina el otro. */ /* ⚠️ `flex-start` y no `flex-end`. Con `flex-end`, en cuanto el filtro de proveedor mostraba las fichas de lo elegido, ese bloque crecía hacia abajo y arrastraba a "Pedido desde" y "Hasta": las tres etiquetas quedaban a tres alturas distintas. Alineados arriba, un bloque puede crecer sin mover a los demás. El botón compensa a mano el alto de una etiqueta. */ .filtro { display: flex; align-items: flex-start; gap: 10px 14px; margin-bottom: 16px; flex-wrap: wrap; } .filtro > div { display: flex; flex-direction: column; gap: 4px; } .filtro > div.crece { flex: 1 1 240px; max-width: 360px; } .filtro label { font-size: 11.5px; color: var(--tinta-suave); font-weight: 500; } .filtro select, .filtro input[type=date] { width: auto; min-width: 190px; height: 34px; font-size: 13px; } .filtro input[type=date] { min-width: 150px; } /* El buscador reemplaza el , y sin esto salía a todo el ancho del formulario y rompía la fila. */ .filtro input.buscador-campo { min-width: 230px; height: 34px; font-size: 13px; } /* 18 px = el alto de una etiqueta (≈14) más su separación (4). Es lo que baja el botón hasta quedar a la altura de los campos, ahora que la fila alinea por arriba. */ .filtro .al-final { flex-direction: row; align-items: center; gap: 8px; padding-top: 18px; } /* ==================================================================== tablas NINGUNA tabla hace scroll horizontal. La combinación que lo garantiza es `max-width: 100%` + `overflow-wrap: anywhere` en las celdas: como cualquier celda puede partir por donde sea, el ancho mínimo de la tabla siempre cabe en su contenedor y el navegador nunca tiene que desbordarla. Se dejó `table-layout: auto` a propósito: con `fixed` todas las columnas salen del mismo ancho y el nombre del proveedor quedaba en tres renglones mientras "Lotes" desperdiciaba media columna. Con auto, el reparto lo hace el contenido, que es lo que se quiere. Antes esto se resolvía con `overflow-x: auto` en móvil, o sea con scroll lateral, que es justo lo que el cliente prohibió. */ table { width: 100%; max-width: 100%; border-collapse: separate; border-spacing: 0; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-caja); box-shadow: var(--sombra); overflow: hidden; } thead th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-suave); font-weight: 600; background: var(--superficie-2); padding: 10px 14px; border-bottom: 1px solid var(--linea); /* El encabezado PARTE DE LÍNEA, no se recorta con puntos suspensivos: "CUMPLIMIE…" no le dice nada a nadie. Con table-layout fijo la columna no se puede ensanchar, así que la única salida honesta es dejarlo en dos renglones. Parte SOLO en los espacios (`normal`): con `anywhere` salía "RENDIMIENT / O %", que se lee peor que no partir. Si una palabra sola no cabe, la recorta la tabla, que ya tiene overflow:hidden — nunca empuja la página. */ white-space: normal; overflow-wrap: normal; word-break: normal; vertical-align: bottom; line-height: 1.35; } tbody td { padding: 12px 14px; border-bottom: 1px solid #eef0f3; vertical-align: middle; overflow-wrap: anywhere; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: var(--superficie-2); } tbody td form { margin: 0; display: inline-flex; } /* Sin `white-space: nowrap`: un código de lote largo tiene que poder partir antes que empujar la tabla a lo ancho. */ td a { color: var(--acento); font-weight: 500; text-decoration: none; } td a:hover { text-decoration: underline; } td a.suave-enlace { color: var(--tinta-media); font-weight: 400; margin-left: 14px; } /* Las celdas de números NO parten. Sin esto, "1.258,00" se leía como "1.258,0" con un "0" solitario debajo, y el cliente lo marcó como número desbordado -- con razón: en un peso, la última cifra es kilos. */ th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Lo mismo para el código del lote y la fecha: son una sola unidad. */ td.sin-partir, th.sin-partir { white-space: nowrap; } table.compacta { max-width: 640px; } /* Fila de totales: cierra la tabla como la cierra el formato en papel. */ tfoot td { padding: 12px 16px; background: var(--superficie-2); border-top: 1px solid var(--linea-fuerte); font-variant-numeric: tabular-nums; } /* Columna de acciones: todo en UNA fila, alineado a la derecha, con el primario primero y lo secundario como texto. Nunca apilados. */ td.acciones-col, th.acciones-col { text-align: right; white-space: nowrap; } td.acciones-col > * { vertical-align: middle; } /* ⚠️ `stretch` y no `center`: dentro conviven enlaces, botones y formularios, y cada uno calcula su alto a su manera. Con `center` quedaban a alturas distintas -- se vio en el detalle del pedido, con "Corregir" y "Anular" descuadrados uno del otro. Estirados, todos miden lo que mide el más alto y la fila queda recta pase lo que pase. */ .grupo-acciones { display: inline-flex; align-items: stretch; gap: 6px; justify-content: flex-end; } .grupo-acciones > form { display: flex; } .grupo-acciones .boton { height: auto; min-height: var(--alto-control); } /* El motivo de la anulación, abierto con `?anular=1`. Fondo de alerta porque lo que se va a hacer no se deshace solo. */ .bloque-anular { background: var(--alerta-fondo); border-color: var(--alerta); margin-bottom: 16px; } /* =========================================================== confirmación El cartel que tapa la pantalla al guardar. Existe porque la franja verde de arriba se perdía: quien pesa mira la tabla, no la cabecera, y después de guardar no sabía si había quedado. ========================================================================== */ /* ========================================================================== EL SELLO -------------------------------------------------------------------------- Esto es una app de TRAZABILIDAD: cada movimiento queda registrado y no se borra. La confirmación no debería sentirse como un mensaje del navegador, sino como un sello que cae sobre lo que se acaba de hacer. Antes era una caja blanca con un ✓ y una frase suelta -- correcta y sin ninguna intención. Ahora tiene jerarquía (un titular corto y el detalle debajo), un disco que dibuja su marca, y una barra que consume el tiempo que le queda: el cartel no desaparece de repente, se ve cuánto le falta. ========================================================================== */ .confirmacion { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; /* Un velo con desenfoque: el fondo se aleja de verdad en vez de solo oscurecerse. Con `saturate` bajo, el rojo del acento deja de tirar del ojo por detrás del cartel. */ background: rgba(16, 20, 25, .52); -webkit-backdrop-filter: blur(4px) saturate(.85); backdrop-filter: blur(4px) saturate(.85); opacity: 0; transition: opacity .2s ease-out; } .confirmacion.visible { opacity: 1; } .confirmacion-caja { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; width: min(380px, 100%); padding: 34px 34px 30px; background: var(--superficie); border-radius: 20px; /* Tres capas: el filo que dibuja el borde, la sombra de contacto y la ambiental. Una sola sombra plana se lee como un recorte pegado. */ box-shadow: 0 0 0 1px rgba(20, 24, 29, .06), 0 2px 6px rgba(20, 24, 29, .10), 0 24px 60px rgba(20, 24, 29, .30); text-align: center; transform: scale(.94) translateY(10px); transition: transform .3s cubic-bezier(.16, 1, .3, 1); } .confirmacion.visible .confirmacion-caja { transform: none; } /* El disco. El anillo tenue lo separa del blanco sin dibujar un borde duro. */ .confirmacion-disco { width: 62px; height: 62px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; background: var(--bien-fondo); color: var(--bien); box-shadow: 0 0 0 8px rgba(15, 107, 69, .07); /* Salida exponencial, SIN rebote. Un `cubic-bezier` que se pasa de 1 y vuelve se lee como juguete; esto es el acuse de un registro que no se puede borrar. El disco entra decidido y se planta, como un sello. */ transform: scale(.72); opacity: 0; transition: transform .36s cubic-bezier(.16, 1, .3, 1), opacity .2s ease-out; } .confirmacion.visible .confirmacion-disco { transform: none; opacity: 1; } .confirmacion.es-error .confirmacion-disco { background: var(--alerta-fondo); color: var(--alerta); box-shadow: 0 0 0 8px rgba(168, 50, 31, .07); } /* La marca se DIBUJA. Es el único momento animado de la aplicación, y por eso se nota: no hay otros efectos compitiendo con él. */ .confirmacion-marca { stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset .4s cubic-bezier(.2, .8, .3, 1) .14s; } .confirmacion.visible .confirmacion-marca { stroke-dashoffset: 0; } .confirmacion-titular { margin: 0 0 4px; font-size: 20px; font-weight: 650; letter-spacing: -.02em; color: var(--tinta); } .confirmacion-texto { margin: 0; font-size: 14px; line-height: 1.5; color: var(--tinta-media); max-width: 30ch; } .confirmacion-cerrar { margin-top: 18px; min-width: 140px; } /* ---- Preguntas y avisos con el mismo sello (dialogo.js, 11 sep 2026) ----- Reemplazan el cuadro del navegador ("…descubredata.com dice"), que el cliente vio "horrible" al pulsar "Terminar de recibir". Mismo velo, misma caja y mismo disco; la pregunta lleva el disco ámbar (atención), y lo arriesgado, el rojo del error. */ .confirmacion.es-pregunta .confirmacion-disco { background: var(--proceso-fondo); color: var(--proceso); box-shadow: 0 0 0 8px rgba(176, 106, 0, .08); } .dialogo .confirmacion-texto { max-width: 34ch; } /* Un aviso que aparece bajo un dedo que sigue apretado (el del dictado) no puede seleccionar su propio texto: en Android quedaba "Cancelar" marcado y el menú de copiar encima (24 sep 2026). */ .dialogo .confirmacion-caja { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .confirmacion-pasos { margin: 4px 0 14px; padding-left: 1.3em; max-width: 36ch; text-align: left; font-size: 14px; color: var(--tinta); line-height: 1.45; } .confirmacion-pasos li + li { margin-top: 6px; } /* Las cifras de la pregunta, como las del tablero: etiqueta chica y número. */ .confirmacion-cifras { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 22px; width: 100%; margin: 10px 0 12px; padding: 10px 14px; background: var(--superficie-2); border-radius: 12px; } .confirmacion-cifra { display: flex; flex-direction: column; gap: 1px; } .confirmacion-cifra > span { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; color: var(--tinta-suave); } .confirmacion-cifra > strong { font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--tinta); } .confirmacion-cifra > strong.merma-txt { color: var(--alerta); } .confirmacion-cifra > strong.neto-txt { color: var(--bien); } .confirmacion-botones { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; margin-top: 20px; } .confirmacion-botones .boton { flex: 1 1 130px; justify-content: center; } /* El tiempo que le queda, dibujado. Un cartel que se va solo sin avisar deja la duda de si se alcanzó a leer; viéndolo consumirse, no. */ .confirmacion-tiempo { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--bien); transform-origin: left center; transform: scaleX(1); } .confirmacion.visible .confirmacion-tiempo { transform: scaleX(0); transition: transform 2s linear; } /* Quien pidió menos animación no recibe ninguna: el cartel aparece y ya. La marca se dibuja entera de una y la barra se queda quieta. */ @media (prefers-reduced-motion: reduce) { .confirmacion, .confirmacion-caja, .confirmacion-disco, .confirmacion-marca, .confirmacion.visible .confirmacion-tiempo { transition: none; } .confirmacion-caja, .confirmacion-disco { transform: none; opacity: 1; } .confirmacion-marca { stroke-dashoffset: 0; } .confirmacion-tiempo { display: none; } } @media (max-width: 640px) { .confirmacion { padding: 20px; } .confirmacion-caja { padding: 30px 24px 26px; } .confirmacion-titular { font-size: 18px; } } /* ================================ EL CUADRO DE "VER DETALLES" (12 sep 2026) El cliente: "un botoncito … 'Ver detalles' … un cuadro flotante" con quién creó la orden y quién recibió. Mismo velo y misma caja que los mensajes de la app (.confirmacion), pero con el texto a la izquierda: aquí se LEE una historia corta, no se confirma nada. Clases propias y no `.confirmacion`, para que nada de confirmacion.js lo toque. En el celular es una hoja que sube desde abajo, al alcance del pulgar. */ .detalles-capa { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(16, 20, 25, .52); -webkit-backdrop-filter: blur(4px) saturate(.85); backdrop-filter: blur(4px) saturate(.85); opacity: 0; transition: opacity .2s ease-out; } .detalles-capa.visible { opacity: 1; } html.con-detalles { overflow: hidden; } /* La caja NO se desplaza: se desplaza lo de adentro (.detalles-cuerpo). Así la X queda quieta arriba a la derecha, y Novedades puede dejar su título y su "Entendido" fijos (13 sep 2026). */ .detalles-caja { position: relative; display: flex; flex-direction: column; width: min(540px, 100%); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow: hidden; background: var(--superficie); border-radius: 20px; box-shadow: 0 0 0 1px rgba(20, 24, 29, .06), 0 2px 6px rgba(20, 24, 29, .10), 0 24px 60px rgba(20, 24, 29, .30); transform: scale(.96) translateY(10px); transition: transform .3s cubic-bezier(.16, 1, .3, 1); } .detalles-capa.visible .detalles-caja { transform: none; } .detalles-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 24px 20px; } .detalles-x { position: absolute; top: 12px; right: 12px; z-index: 1; width: 40px; height: 40px; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; /* Fondo propio (revisión del 13 sep 2026): el cuerpo se desplaza por debajo de la X, y con fondo transparente los recibos se le montaban. */ background: var(--superficie); color: var(--tinta-suave); cursor: pointer; } .detalles-x:hover { background: var(--neutro-fondo); color: var(--tinta); } /* Al abrirse, el foco cae en la X. Cuando el cuadro sale SOLO (Novedades) el navegador le pintaba un aro negro grueso: queda visible, pero en voz baja. */ .detalles-x:focus-visible { outline: 2px solid var(--linea-fuerte); outline-offset: 1px; } .detalles-cargando { margin: 30px 8px; text-align: center; font-size: 13.5px; line-height: 1.5; color: var(--tinta-media); } /* El contenido: el mismo en el cuadro y en su página (sin JavaScript). */ .detalles-cabeza { display: flex; align-items: center; gap: 12px; padding-right: 40px; margin-bottom: 14px; } .detalles-cabeza > div { flex: 1 1 auto; min-width: 0; } /* `text-transform: none`: los h2 de la app son rótulos de sección en mayúscula, y "ORDEN DE COMPRA 10" se leía como un grito. */ .detalles-cabeza h2 { margin: 0; padding: 0; border: 0; font-size: 17px; line-height: 1.3; font-weight: 650; letter-spacing: -.01em; text-transform: none; color: var(--tinta); } .detalles-cabeza p { margin: 1px 0 0; font-size: 12.5px; color: var(--tinta-media); overflow-wrap: anywhere; } .detalles-cabeza .chip { flex: 0 0 auto; } .detalles-cifras { margin: 0 0 4px; } .detalles-titulo { display: flex; align-items: center; gap: 6px; margin: 18px 0 8px; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-suave); } .detalles-hechos { margin: 0; display: grid; gap: 10px; } .detalles-hechos > div { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 12px; align-items: baseline; } .detalles-hechos dt { font-size: 12.5px; color: var(--tinta-media); } .detalles-hechos dd { margin: 0; min-width: 0; } .detalles-hechos dd strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; } .detalles-hechos dd small { display: block; margin-top: 1px; font-size: 12px; color: var(--tinta-suave); font-variant-numeric: tabular-nums; } /* "No quedó registrado" y "Todavía no" se leen como ausencia, no como un nombre. */ .detalles-hechos dd .sin-dato { font-weight: 500; font-style: italic; color: var(--tinta-suave); } .detalles-recibos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .detalles-recibos > li { padding: 12px 14px; border: 1px solid var(--linea); border-radius: 12px; background: var(--superficie-2); } .detalles-recibo-cabeza { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 10px; } .detalles-recibo-cabeza strong { font-size: 13.5px; color: var(--tinta); } .detalles-recibo-cabeza .suave { flex: 1 1 auto; font-size: 12.5px; font-variant-numeric: tabular-nums; } .detalles-nota { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--tinta-suave); } .detalles-pie { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .detalles-pie .boton { flex: 1 1 150px; } /* Página completa (sin JavaScript): la misma caja, sobre la página. */ .detalles.en-pagina { max-width: 560px; padding: 22px 24px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-caja); box-shadow: var(--sombra); } .detalles.en-pagina .detalles-cabeza { padding-right: 0; } @media (max-width: 640px) { .detalles-capa { align-items: flex-end; padding: 0; } .detalles-caja { width: 100%; max-height: 88vh; max-height: 88dvh; border-radius: 18px 18px 0 0; transform: translateY(48px); } .detalles-cuerpo { padding: 26px 16px calc(16px + env(safe-area-inset-bottom)); } /* La agarradera dice "esto es una hoja", sin palabras. */ .detalles-caja::before { content: ""; position: absolute; top: 8px; left: 50%; z-index: 2; width: 40px; height: 4px; border-radius: 2px; transform: translateX(-50%); background: var(--linea-fuerte); } .detalles-x { top: 6px; right: 6px; } .detalles-hechos > div { grid-template-columns: 104px minmax(0, 1fr); gap: 10px; } .detalles.en-pagina { padding: 18px 16px; } } @media (prefers-reduced-motion: reduce) { .detalles-capa, .detalles-caja { transition: none; } .detalles-caja { transform: none; } } /* ======================================== LA VENTANA DE NOVEDADES Rehecha el 13 sep 2026. El cliente: "se ve terrible, confuso y muy desordenado, está todo mezclado ... tampoco cabe en la pantalla". Ahora: título quieto arriba, "Entendido" quieto abajo, y en medio SOLO la actualización más reciente, partida en tres bloques con su color -- Lo nuevo (verde), Mejoras y cambios (azul de los datos), Errores corregidos (gris: ya no molesta). Las anteriores, plegadas debajo. */ /* `.es-novedades` la pone detalles.js. Era `:has(> .novedades)`, pero un navegador sin `:has` (Chrome antes de la 105, Safari antes de la 15.4) descartaba la regla y la cabeza y el pie se iban con el desplazamiento (revisión del 13 sep 2026). */ .detalles-cuerpo.es-novedades, .detalles-cuerpo.es-asistente { display: flex; flex-direction: column; overflow: hidden; padding: 0; } /* El botón por defecto de Notificaciones (notificaciones.html): existe para que Enter guarde. Fuera de la vista, no fuera del formulario. */ .formulario > .boton-por-defecto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .novedades { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .novedades-cabeza { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 18px 60px 14px 22px; border-bottom: 1px solid var(--linea); } .novedades-cabeza > div { min-width: 0; } .novedades-cabeza h2 { margin: 0; padding: 0; border: 0; font-size: 17px; line-height: 1.3; font-weight: 650; letter-spacing: -.01em; text-transform: none; color: var(--tinta); } .novedades-cabeza p { margin: 1px 0 0; font-size: 12.5px; color: var(--tinta-media); } .novedades-disco { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--acento-tenue); color: var(--acento-fuerte); } .novedades-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 22px; align-content: start; padding: 18px 22px 22px; } .novedades-pie { flex: 0 0 auto; display: flex; justify-content: flex-end; margin: 0; padding: 12px 22px; border-top: 1px solid var(--linea); background: var(--superficie); } .novedades-pie .boton { flex: 0 1 180px; } .novedad-fecha { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 11px; font-weight: 650; line-height: 1.4; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-suave); } .novedad-sin-ver { display: none; padding: 1px 8px; border-radius: 999px; background: var(--acento); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .novedad.sin-ver .novedad-sin-ver { display: inline-block; } .novedad-titulo { margin: 3px 0 16px; font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; color: var(--tinta); text-wrap: balance; } /* Tres columnas, una por tipo (el cliente: "quiero tener en tres columnas, una Lo nuevo, en otra las mejoras y en otra los errores corregidos... las columnas deben ser claras", 13 sep 2026). Cada una es una tarjeta de su color -- no solo el título cambia de color, la tarjeta entera -- para que se lean como tres cosas distintas de un vistazo, no como texto corrido. Apiladas en el celular (no caben tres columnas en 390px); lado a lado desde `--ancho-novedades` (ver la caja del cuadro, más abajo). */ .novedad-grupos { display: grid; gap: 14px; } .novedad-grupo { display: grid; gap: 8px; align-content: start; background: var(--grupo-fondo); border-radius: 14px; border-top: 3px solid var(--grupo); padding: 14px 16px 16px; } .novedad-grupo.nuevo { --grupo: var(--bien); --grupo-fondo: var(--bien-fondo); } .novedad-grupo.mejoras { --grupo: var(--dato); --grupo-fondo: var(--dato-fondo); } .novedad-grupo.corregido { --grupo: var(--neutro); --grupo-fondo: var(--neutro-fondo); } .novedad-grupo-titulo { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--grupo); text-transform: uppercase; letter-spacing: .03em; } .novedad-grupo-icono { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--superficie); color: var(--grupo); } .novedad-grupo ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; } .novedad-grupo li { position: relative; padding-left: 15px; font-size: 13.5px; line-height: 1.5; color: var(--tinta-media); } .novedad-grupo li::before { content: ""; position: absolute; left: 0; top: .58em; width: 5px; height: 5px; border-radius: 50%; background: var(--grupo); } /* Desde aquí caben tres columnas lado a lado sin apretarse (medido con la entrada más larga que hay hoy: ~230px de columna, cómodo para una frase corta). La caja del cuadro se ensancha SOLO para Novedades -- las demás ("Ver detalles" de una orden o un recibo) se quedan en 540px. */ @media (min-width: 760px) { .detalles-capa.es-novedades .detalles-caja { width: min(880px, 100%); } /* `auto-fit` y no `repeat(3, ...)` (revisión del 13 sep 2026): una entrega que solo trae "Lo nuevo" -- sin mejoras ni errores que contar -- tiene UN grupo, y con 3 columnas fijas se veía como una caja angosta perdida a la izquierda, seguida de la lista de entregas anteriores: exactamente lo que el cliente describió como "no está en columnas, sigue para abajo". Con `auto-fit` las columnas vacías se reparten entre las que sí tienen contenido: 1 grupo ocupa TODO el ancho, 2 se reparten a la mitad, 3 quedan como antes. */ .novedad-grupos { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .novedad-grupo { padding: 16px 18px 18px; } } /* Las anteriores: una fila por actualización, plegada. */ .novedades-anteriores { display: grid; border-top: 1px solid var(--linea); padding-top: 14px; } .novedades-anteriores-titulo { margin: 0 0 4px; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-suave); } .novedad-anterior { border-bottom: 1px solid var(--linea); } .novedad-anterior:last-child { border-bottom: 0; } .novedad-anterior > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 4px 12px; min-height: 46px; padding: 8px 4px; cursor: pointer; list-style: none; } .novedad-anterior > summary::-webkit-details-marker { display: none; } .novedad-anterior > summary::after { content: ""; width: 7px; height: 7px; margin: 0 4px 3px; border-right: 2px solid var(--tinta-suave); border-bottom: 2px solid var(--tinta-suave); transform: rotate(45deg); } .novedad-anterior[open] > summary::after { transform: rotate(-135deg); margin-bottom: -3px; } .novedad-anterior > summary:hover .novedad-anterior-titulo { color: var(--acento-fuerte); } .novedad-anterior > summary:focus-visible { outline: 2px solid var(--dato); outline-offset: 2px; border-radius: 6px; } .novedad-anterior-fecha { font-size: 12px; color: var(--tinta-suave); font-variant-numeric: tabular-nums; } .novedad-anterior-titulo { font-size: 14px; font-weight: 600; color: var(--tinta); } .novedad-anterior .novedad-grupos { padding: 4px 4px 18px; } /* Sin JavaScript: la misma ventana como página. */ .detalles.novedades.en-pagina { padding: 0; overflow: hidden; } .novedades.en-pagina .novedades-cabeza { padding-right: 22px; } @media (min-width: 760px) { .detalles.novedades.en-pagina { max-width: 880px; } } /* ======================================== EL ASISTENTE DE DATOS (13 sep 2026) "Un icono flotante tipo chatbot para... consultar datos". Botón redondo, fijo abajo a la derecha, solo para gerentes y el desarrollador. Es un enlace con `data-detalles`: lo abre el mismo cuadro de "Ver detalles", ensanchado igual que Novedades (`.es-asistente`, ver más abajo). */ .asistente-flotante { position: fixed; right: 20px; bottom: 24px; z-index: 40; width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--acento); color: #fff; text-decoration: none; box-shadow: 0 6px 16px rgba(20, 24, 29, .22), 0 2px 4px rgba(20, 24, 29, .12); transition: transform .15s ease-out, background-color .15s ease-out; } .asistente-flotante:hover { background: var(--acento-fuerte); transform: translateY(-2px); } .asistente-flotante:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; } .asistente-flotante .ico { width: 23px; height: 23px; } @media (max-width: 860px) { /* Encima de la barra inferior del teléfono, no debajo. */ .asistente-flotante { right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); } } /* ================================== ORDEN DE COMPRA POR VOZ (14 sep 2026) Mismo botón redondo que el asistente, a la IZQUIERDA para no encimarse con él -- un gerente puede tener los dos permisos a la vez. Es un