/* ===================================================================== MOVQRA Hoja de estilos unica - mobile first Etapa 1 del rediseno: sistema de tokens. Reglas de este archivo: 1. Ningun color, medida, radio o sombra se escribe a mano fuera del bloque :root. Si necesitas un valor nuevo, se agrega como token. 2. Los nombres de clase de la version anterior se conservan todos. 3. Los alias de variables viejas (--azul, --texto-2, --borde...) ya no existen: en la Etapa 5 se eliminaron los 551 style="..." que los usaban. Si algo se ve sin color, busca una variable con el nombre viejo. ===================================================================== */ /* ===================================================================== 1. TOKENS ===================================================================== */ :root { /* ---------- Marca ---------- */ /* Se conserva el azul actual: ya vive en manifest.json y en el theme-color de layout.php. Cambiarlo tiraria trabajo hecho. */ /* Los controles nativos del navegador -barra de scroll, selector de fecha, autofill- siguen a color-scheme, no al CSS. Sin esto el tema oscuro sale con una barra de scroll blanca. */ color-scheme: light; --brand-600: #1d4ed8; --brand-700: #1e3a8a; --brand-50: #eff6ff; /* Fondo del panel de marca de las pantallas de acceso. Es el UNICO sitio del sistema con letra blanca fija sobre color de marca a pantalla completa, y por eso no puede tirar de --brand-700: ese token se ACLARA en el tema oscuro -que es lo correcto para un chip o un enlace activo- y dejaba blanco sobre #60a5fa, o sea 2.54:1. Aqui el fondo tiene que oscurecerse en oscuro, no aclararse. Claro: blanco sobre #1e3a8a = 10.36:1. */ --acceso-marca-bg: #1e3a8a; /* Acento: unicamente dato positivo y confirmacion. Nunca accion. Existe para que "esto va bien" y "haz clic aqui" dejen de ser el mismo azul compitiendo entre si. */ --accent-600: #0d9488; --accent-50: #f0fdfa; /* ---------- Superficies ---------- */ /* Grises ligeramente calidos, no el gris azulado de plantilla. Es lo que ya le daba caracter propio al sistema; se conserva. */ --bg: #f7f7f6; --surface: #ffffff; --surface-2: #faf9f6; --border: #e5e3dd; --border-2: #d8d5cd; /* ---------- Texto ---------- */ --text: #1c1c1a; --text-2: #6b6b66; --text-3: #9a9a94; --text-inv: #ffffff; /* ---------- Boton primario ---------- El primario es el UNICO componente que obliga a texto blanco, y por eso tiene tokens propios en vez de tirar de --text-inv. --text-inv significa "lo que se lee encima de un color solido" y en oscuro es casi negro, porque ahi los colores de marca y de estado son claros; eso vale para el chip, para la insignia y para el enlace activo del menu, pero deja el boton fuerte con letra oscura en un tema y blanca en el otro. Aqui el color del texto es FIJO y lo que se mueve es el fondo, que es lo que tiene que ceder para que el par cumpla AA en los dos temas. Claro: #ffffff sobre #1d4ed8 = 6.70:1 (hover #1e3a8a = 10.36:1). No cambia nada: es exactamente el par que ya se pintaba. */ --btn-primario-bg: var(--brand-600); --btn-primario-bg-hover: var(--brand-700); --btn-primario-texto: #ffffff; /* ---------- Estados ---------- */ /* La escala sigue a stock_status() de includes/functions.php: normal -> critico -> bajo -> agotado, de menos a mas grave. */ --ok: #15803d; --ok-bg: #dcfce7; /* normal, exito */ --warn: #b45309; --warn-bg: #fef3c7; /* critico: va a caer */ --crit: #c2410c; --crit-bg: #ffedd5; /* bajo: cruzo el minimo */ --error: #b91c1c; --error-bg: #fee2e2; /* agotado, error */ --info: #1d4ed8; --info-bg: #eff6ff; /* ---------- Espaciado ---------- */ /* OLA 4: --s0 es el escalon que faltaba por abajo. 2px aparecia 105 veces escrito a mano y no es un numero suelto: es LA separacion minima, la que separa dos renglones de la misma idea -un valor de su unidad, un nombre de su codigo- sin que lleguen a ser dos cosas. Se adopta donde 2px va solo (59 sitios); en un atajo compuesto -padding: 2px 6px- se queda literal, porque mezclar token y numero en la misma declaracion se lee peor que dejar los dos numeros. */ --s0: 2px; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; /* ---------- Tipografia ---------- */ --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Las cifras llevan su propia pila. La diferencia no es el capricho de otra fuente: es que en la pila de sistema los digitos de Segoe UI y los de -apple-system no tienen el mismo ancho, y una columna de dinero con digitos de ancho variable baila al actualizarse. Con tabular-nums cada digito ocupa lo mismo y $1,999.00 no se mueve cuando pasa a $2,000.00. */ --font-num: var(--font); /* OLA 4: LA GRAMATICA DE LO PEQUENO. Por debajo de --fs-xs la escala se acababa y cada pantalla elegia su numero: habia 9.5, 10, 10.5, 11, 11.5, 12 y 12.5px escritos a mano, 86 veces. Siete tamanos para tres papeles. 3xs 10 el dato AUXILIAR: la unidad de una cifra, la hora bajo la fecha, el sufijo de un valor. Nunca informacion que haya que buscar. 2xs 11 el ROTULO: lo que nombra a una cifra o a una fila. xs 12 el texto micro NORMAL: meta, ayuda, estado, tabla. Sigue siendo la base de todo lo pequeno. 10px es el suelo. Los cuatro 9.5px que habia SUBEN a 10: en un tamano asi medio pixel no compone nada y si resta legibilidad. */ --fs-3xs: 10px; --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 26px; --fs-3xl: 34px; /* cifra protagonista de una pantalla */ --fs-4xl: 44px; /* cifra protagonista del dashboard */ /* Display: solo para la landing. Fluido, para no necesitar cuatro media queries por cada titular. */ --fs-display: clamp(30px, 5.2vw, 56px); --fs-display-lg: clamp(36px, 6.4vw, 68px); --lh: 1.5; --lh-tight: 1.25; --lh-titulo: 1.1; /* Espaciado entre letras: los titulares grandes necesitan cerrarse, las etiquetas en mayusculas necesitan abrirse. */ --ls-titulo: -0.02em; --ls-display: -0.03em; --ls-etiqueta: 0.06em; /* Pesos, para no escribir 700 a mano por todos lados */ --peso-medio: 500; --peso-fuerte: 600; --peso-max: 700; /* ---------- Radios ---------- */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-full: 999px; /* ---------- Elevacion ---------- */ /* Cinco niveles y una regla: la altura dice QUE TAN TEMPORAL es algo. Lo que siempre esta ahi va pegado al fondo; lo que aparece encima de todo y se va, vuela. Nada flota "porque se ve bonito". */ --sh-0: none; /* pegado */ --sh-1: 0 1px 2px rgba(28,28,26,.05); /* fila */ --sh-2: 0 1px 3px rgba(28,28,26,.07), 0 4px 12px rgba(28,28,26,.05); /* tarjeta */ --sh-3: 0 8px 28px rgba(28,28,26,.14); /* menu */ --sh-4: 0 2px 6px rgba(28,28,26,.05), 0 18px 44px -12px rgba(28,28,26,.20); /* modal */ --sh-5: 0 4px 10px rgba(28,28,26,.05), 0 30px 70px -20px rgba(28,28,26,.28); /* landing */ /* Sombra de color para el boton primario: la luz que tira un objeto de ese color, no una mancha gris debajo. */ --sh-marca: 0 2px 6px rgba(29,78,216,.16), 0 10px 24px -8px rgba(29,78,216,.34); /* Halo de un pixel del boton al pasar por encima. Estaba escrito a mano en .btn:hover; el tema oscuro necesita el azul claro. */ --brand-halo: rgba(29,78,216,.10); /* Sombra de la accion dominante del punto de venta. */ --sh-cobro: 0 6px 18px rgba(29,78,216,.25); /* OLA 6: la tercera intensidad de luz de marca, y la mas discreta. --sh-marca es la del boton primario del sistema y --sh-cobro la de la accion dominante del punto de venta; esta es la de un primario que vive DENTRO de un bloque ya tenido -la llamada del tablero, los botones de Caja- y que solo necesita despegarse un poco. En claro no existe: ahi el boton ya se separa por color. Es una idea del tema oscuro, donde una sombra negra sobre casi negro no dice nada y hay que sustituirla por luz. Se declara aqui en cero para que el token exista en los dos temas y nadie tenga que acordarse de que solo vale en uno. Las tres reglas que lo leen siguen estando dentro del tema oscuro: en claro este valor no se lee nunca, y por eso ponerlo a none no apaga ninguna sombra. */ --sh-btn-luz: none; /* OLA 6: EL LIENZO DE UNA PANTALLA. Diez pantallas -Categorias, Existencias, Alertas, Movimientos, Transferencias, Caja, Reportes, Sucursales, Usuarios y el tablero de telefono- tinen su fondo con un 4% de marca para que el contenido se lea sobre algo y no sobre el blanco pelado. Las diez escribian la misma mezcla a mano y las diez la deshacian a mano en oscuro, donde un 4% de azul sobre casi negro se lee como una mancha y no como luz. Veinte reglas para una idea. Ahora es un token: el valor claro aqui, el oscuro en su bloque, y el papel en print con los demas. */ --lienzo: color-mix(in srgb, var(--brand-600) 4%, var(--bg)); /* La red de color-mix tambien se escribia once veces, una por pantalla. Ahora es una: si el navegador no sabe mezclar, el lienzo es el fondo y ya. Va justo debajo para que se lea con el token y no en otro sitio del archivo. */ /* OLA 6: LO QUE SE HUNDE DENTRO DE UN BLOQUE TENIDO. El azulejo de un estado, la pastilla de "aqui", el icono de una lamina: piezas que van DENTRO de un bloque que ya tiene color y que no pueden aclararse mas -encima del tinte no queda sitio-, asi que se hunden con negro translucido. Estaba escrito a mano cuatro veces, dos al .28 y dos al .3, que es la misma idea con dos numeros. En claro no existe: ahi el bloque tenido es palido y la pieza se separa aclarando. */ --hundido: transparent; /* Sombra que apunta HACIA ARRIBA: barras ancladas abajo (acciones de formulario, barra de cobro). Sobre un fondo oscuro una sombra negra al 7% no se ve, asi que el tema la sube. */ --sh-arriba: 0 -6px 18px rgba(28,28,26,.07); /* Velo de modales, cajon de menu y hoja de filtros. */ --velo: rgba(28,28,26,.5); /* Realce claro dentro de una pastilla ya tenida (la marca de un movimiento). En oscuro tiene que oscurecer, no aclarar. */ --marca-realce: rgba(255,255,255,.65); /* Rojo mas fuerte que --error: solo el hover de la accion destructiva solida. En oscuro va al reves, se ACLARA. */ --error-fuerte: #991b1b; --ring: 0 0 0 3px rgba(29,78,216,.22); --ring-error: 0 0 0 3px rgba(185,28,28,.18); --ring-ok: 0 0 0 3px rgba(21,128,61,.18); /* ---------- Z-index ---------- */ /* Se elimina el "z-index: 10" magico de .nav */ --z-nav: 100; --z-dropdown: 200; --z-modal: 300; --z-toast: 400; /* ---------- Movimiento ---------- */ /* Tres duraciones y tres curvas. Lo que responde a un dedo o a un raton es rapido (si tarda, se siente roto). Lo que aparece de la nada puede tomarse su tiempo. Lo que se va, se va rapido: nadie quiere esperar a que algo termine de desaparecer. */ --t-rapida: 120ms; --t-media: 180ms; --t-lenta: 320ms; --t-entrada: 480ms; --ease: cubic-bezier(.4, 0, .2, 1); /* general */ --ease-salida: cubic-bezier(.4, 0, 1, 1); /* algo que se va */ --ease-suave: cubic-bezier(.16, 1, .3, 1); /* algo que aparece */ /* ---------- Interaccion ---------- */ /* 44px: alto minimo para que un dedo acierte al primer intento. */ --tap: 44px; /* OLA 4: EL PULSADO, EN DOS INTENSIDADES. Habia seis escalas distintas para el mismo gesto -.9, .94, .96, .97, .985 y .995- repartidas por seis pantallas. La diferencia real no era de pantalla, era de TAMANO: lo grande se encoge poco porque el ojo mide el desplazamiento del borde, y lo pequeno tiene que encogerse mas para que el gesto se vea. --pulsa una superficie: tarjeta, fila, bloque que se toca. --pulsa-lg un objetivo chico: boton de icono, atajo, paso. El boton NO usa ninguna de las dos: se HUNDE -translateY(1px)- y su scale(.995) solo acompana al hundimiento. Es otro gesto, y esta en una sola regla. */ --pulsa: .985; --pulsa-lg: .96; /* OLA 4: la identidad del foco. 23 reglas escribian este mismo contorno a mano. El desplazamiento NO entra en el token: hay dos -2px por fuera, -2px por dentro cuando el contenedor recorta- y esa eleccion es de cada componente, no del sistema. */ --foco: 2px solid var(--brand-600); /* Shell de escritorio (Etapa 3) */ --ancho-lateral: 244px; --ancho-lateral-min: 64px; --ancho-contenido: 1100px; /* sin barra lateral */ /* ---------- G1: los dos topes del shell autenticado ---------- El riel de iconos (64px) llega hasta 1279 y la lateral con etiquetas (244px) empieza en 1280. En el salto, la lateral se lleva 180px de golpe mientras la ventana solo gana 1: si el contenido del riel no tuviera tope, el area util CAERIA en ese punto. Es exactamente lo que pasaba antes en 1024: 900 -> 773px utiles 1024 -> 732px utiles (la ventana crece, el contenido baja) --ancho-contenido-riel es ese tope. Se calcula para que el area util a un lado y otro del salto sea LA MISMA: a 1279 con riel: 1279 - 64 = 1215 de main, tope 1036 -> 1036 - 48 = 988 utiles a 1280 con lateral: 1280 - 244 = 1036 de main, sin tope -> 1036 - 48 = 988 utiles LOS 17px SON LA BARRA DE DESPLAZAMIENTO, y no sobran. Con el tope en 1036 clavado, MEDIDO en Windows: a 1279 el tope absorbia la barra y salian 988 utiles, pero a 1280 la lateral ya no tiene tope que la absorba y salian 973. Un bache de 15px justo en el salto, que es lo unico que G1 existe para evitar. Restando el ancho maximo de barra (17px en Windows, 0 con barras superpuestas) los dos lados se encuentran o crecen, nunca bajan, en los dos casos. Cambiar uno de los tres numeros obliga a recalcular el tope: riel = punto-de-salto - ancho-lateral - barra */ --ancho-contenido-riel: calc(1280px - var(--ancho-lateral) - 17px); --ancho-contenido-amplio: 1600px; /* con lateral abierta (>=1280) */ --ancho-landing: 1200px; /* landing publica */ --ancho-texto: 68ch; /* parrafo legible */ /* =================================================================== G2. PLANOS, INTERACCION Y HOJAS (UI 2.0) ------------------------------------------------------------------- Lo que faltaba para que "movil" deje de ser "web estrecha". 1. UN PLANO MAS. Habia --bg / --surface / --surface-2. Faltaba el plano de lo que se LEVANTA por encima del panel y no es un hueco: el menu desplegable, la fila seleccionada, la cabecera pegajosa de una hoja. En claro sube (mas blanco que el fondo del panel no existe, asi que sube por SOMBRA y por borde); en oscuro sube de verdad, con un gris mas claro. 2. LOS ESTADOS SON TOKENS. --hover, --activo y --marcado estaban escritos a mano como var(--surface-2) en cuarenta sitios. Son tres PAPELES distintos que hoy coinciden en claro y que en oscuro y en tactil no pueden coincidir: en un telefono no hay hover, y el "pulsado" tiene que notarse mas que en un raton. 3. LAS HOJAS. Un panel que sube desde abajo no es una tarjeta: es una superficie temporal que tapa la aplicacion. Tiene su propio color, su propio radio y su propia sombra, y en oscuro tiene que separarse del fondo MAS que un panel normal. =================================================================== */ /* Plano 3: lo que se levanta por encima del panel */ --surface-3: #ffffff; /* La superficie de una hoja / un modal. Coincide con --surface en claro, pero NO es lo mismo: en oscuro se separa. */ --sheet: #ffffff; /* Estados de interaccion. Tres papeles, no un gris repetido. */ --hover: rgba(28,28,26,.035); /* raton por encima */ --pressed: rgba(28,28,26,.075); /* dedo o boton abajo */ --selected: var(--brand-50); /* elegido / activo */ --selected-borde: rgba(29,78,216,.28); /* Borde de pelo: separa sin dibujar una caja. Es lo que sustituye a una tarjeta cuando la tarjeta no aporta nada (regla 16). */ --border-sutil: rgba(28,28,26,.07); /* ---------- Hojas inferiores ---------- */ --r-hoja: 20px; /* esquina superior de una hoja */ --hoja-max: 90dvh; /* nunca tapa del todo: se ve que hay algo detras */ --sh-hoja: 0 -2px 8px rgba(28,28,26,.06), 0 -20px 50px -12px rgba(28,28,26,.28); --z-hoja: 310; /* por encima de --z-modal, debajo del toast */ /* Alto de una fila tactil de lista. Mas que --tap: una fila con dos renglones de texto necesita aire, no solo acertar con el dedo. */ --fila-tap: 56px; /* =================================================================== G6. SISTEMA VISUAL MAESTRO (tokens que faltaban) ------------------------------------------------------------------- No es un segundo sistema de tokens. Es EL MISMO, terminado. Lo que habia cubria color, texto, espacio, radio, sombra, z y movimiento. Lo que faltaba eran cuatro familias que las pantallas estaban resolviendo cada una por su cuenta: 1. LOS PAPELES QUE NO TENIAN NOMBRE. --surface-3 existia como "plano 3", pero no habia forma de decir "la superficie de un control" ni "la superficie de un modal de escritorio". Se escribian a mano como var(--surface-2) y var(--surface), que es lo mismo hoy y deja de serlo en cuanto uno de los dos se mueve. 2. LA MEDIDA DEL SHELL. El alto de la barra superior y el de la barra inferior estaban escritos en numero suelto en las diez reglas que necesitan descontarlos (posicion pegajosa, alto de una hoja, relleno del cuerpo). Cambiar la barra obligaba a buscar el numero por todo el archivo. 3. EL MARGEN DE PANTALLA. Cada seccion movil elegia el suyo: 14, 16 y 20px conviviendo en la misma columna. El ojo lo lee como "esta pantalla no es del mismo producto". 4. EL AZULEJO DE ICONO. El cuadro tenido que identifica una pantalla, una metrica o una fila es UNA pieza y aparece en seis sitios. Sus tres medidas viven aqui. Los puntos de corte tambien se anotan. No se pueden usar dentro de @media -CSS no interpola variables ahi- pero anotarlos evita que aparezca un cuarto punto de corte inventado a las tres semanas: telefono hasta 767px tablet 768px - 1023px portatil 1024px - 1279px escritorio 1280px en adelante =================================================================== */ /* ---------- Papeles de superficie ---------- */ /* Lo que se LEVANTA sobre el panel y se queda (cabecera pegajosa de una hoja, fila elegida, menu desplegable). Hoy coincide con el plano 3; tiene nombre propio porque es un papel, no un plano. */ --elevated: var(--surface-3); /* La superficie de un control en reposo: input, boton secundario, azulejo, pastilla. En claro es un hueco; en oscuro, un realce. */ --interactive: var(--surface-2); /* La superficie de un modal de escritorio. En telefono todo modal es una hoja y usa --sheet; a partir de tablet se separa, porque un dialogo centrado sobre un velo no necesita el mismo color que un panel que sube desde el borde. */ --modal: var(--sheet); --sh-modal: var(--sh-4); /* ---------- Alias en el vocabulario del sistema ---------- MISMO valor, no un token nuevo. Existen para que un componente nuevo pueda escribirse con el nombre del papel -"esto va en el borde sutil", "esto es peligroso"- sin tener que recordar cual de las dos lenguas usa el archivo. Cambiar el valor se sigue haciendo UNA vez, arriba. */ --border-subtle: var(--border-sutil); --text-secondary: var(--text-2); --text-muted: var(--text-3); --success: var(--ok); --warning: var(--warn); --danger: var(--error); --accent: var(--accent-600); /* OLA 4: se contaron los usos de los 161 tokens del archivo. Doce salieron con cero usos EN ESTE ARCHIVO y ninguno se retira: --ancho-landing, --fs-display-lg, --sh-5 los usa landing.css. Contar solo app.css los daba por muertos. No lo estan. --text-secondary, --text-muted, --warning, --accent son la mitad sin estrenar de este bloque de alias. Sus hermanos -border-subtle, success, danger- si se usan. Un vocabulario con la mitad de las palabras no es medio vocabulario: es uno en el que hay que acordarse de cuales existen. --ease-salida, --ring-ok, --sh-0, --z-dropdown, --elevated son el escalon sin estrenar de una escala completa. Una escala con un hueco es peor que una con un escalon de reserva: el hueco se rellena con un literal. Ninguno pesa nada -una variable CSS sin leer no se resuelve- y retirarlos solo empeoraria lo que viniera despues. Si algun dia sobra alguno de verdad, sera porque se retiro su escala entera. */ /* ---------- Radios: la escala completa ---------- Cuatro pasos y dos casos especiales. La regla es el TAMANO de lo que se redondea: cuanto mas grande la superficie, mas radio, para que la curva se lea igual de cerrada en todas. xs 4 filo de un chip diminuto, barra de progreso sm 6 control pequeno, celda md 10 input, boton, pestana lg 14 panel, tarjeta xl 18 azulejo grande, bloque destacado hoja 20 la esquina de una hoja (ya existia) full la pastilla */ --r-xs: 4px; --r-xl: 18px; /* ---------- Objetivos tactiles ---------- 44px es el minimo. Hay dos escalones mas porque no todo lo que se toca pesa lo mismo: un icono suelto en una barra puede bajar a 40 si tiene aire alrededor, y la accion dominante de una pantalla sube, porque se busca sin mirar. */ --tap-sm: 40px; --tap-lg: 52px; /* Fila de lista con marcador grande (foto, iniciales, azulejo). */ --fila-tap-lg: 68px; /* ---------- Medidas del shell ---------- NO se declaran aqui: --barra-inf y --topbar-movil ya existen en el :root de la seccion 27 y estan en uso en diez reglas. Duplicarlos con otro nombre seria exactamente lo que este archivo prohibe en su primera linea. Lo unico que falta es el alto REAL de la barra inferior -el suyo mas el area segura del dispositivo-, que es lo que tiene que descontar cualquier cosa que se ancle por encima de ella. Estaba escrito como calc() a mano en cada sitio que lo necesitaba. */ --barra-inf-total: calc(var(--barra-inf, 58px) + env(safe-area-inset-bottom)); /* ---------- Margen de pantalla ---------- La distancia del contenido al borde de la ventana. UNA por dispositivo, no una por seccion. Se sube en 15/27b/27c. */ --gutter: var(--s4); /* ---------- Azulejo de icono ---------- El cuadro tenido que identifica algo: la pantalla en su cabecera, la metrica en su tarjeta, la categoria en su fila. Tres medidas y un radio, para que los seis sitios donde aparece sean el mismo objeto y no seis cuadros parecidos. */ --azulejo: 44px; --azulejo-sm: 36px; --azulejo-lg: 52px; --azulejo-r: var(--r-lg); /* ---------- La cabecera de pantalla (Ola 1) ---------- LA ESCALERA VIVE AQUI Y EN NINGUN OTRO SITIO. Antes habia cuatro: la del sistema y tres que se escribieron por separado cuando siete pantallas midieron -cada una por su cuenta- que un azulejo de 52 y un titulo de 24 no caben al lado de dos botones en un telefono de 390. Todas llegaron a la misma conclusion y ninguna la subio aqui, asi que la fase siguiente volvia a medir. El :has() que hacia segura cada correccion es lo que las hacia invisibles entre si. Cuatro tokens y dos puntos de corte. Una pantalla que de verdad necesite otra medida -hoy solo Existencias, que es la unica con dos acciones de texto en la fila del titulo- reescribe ESTOS tokens en una linea, no cuatro reglas. Asi la excepcion se declara en el mismo vocabulario que la norma y se ve que es una excepcion. 24 y 18 no salen de --fs-*: la escala de texto sube 20 -> 26 y el titulo de una pantalla necesita los dos pasos intermedios. Por eso son tokens propios y no numeros sueltos repetidos por el archivo, que es justo lo que habia. */ --cab-azulejo: var(--azulejo-lg); /* 52 */ --cab-icono: 24px; /* el que emite ui_azulejo(,'lg') */ --cab-titulo: 24px; --cab-desc: var(--fs-sm); /* ---------- Icono pequeno ---------- El icono que acompana a un texto de --fs-xs dentro de un control compacto. Estaba escrito como 13, 14 y 15px en las siete copias del boton de cabecera. La escala completa de iconos es de la Ola 4; aqui entra solo el escalon que este componente necesita. */ --ico-sm: 14px; /* =================================================================== LA PALETA CATEGORICA (Ola 2) ------------------------------------------------------------------- SEIS COLORES QUE DICEN "QUE ES ALGO", NUNCA "COMO ESTA ALGO". Es la segunda paleta del sistema y la regla que la separa de la primera no admite excepciones: SEMANTICA --ok --warn --crit --error --info responde a "como va esto": verde correcto, ambar advertencia, rojo critico. Un color de estado NUNCA identifica una categoria. CATEGORICA --cat-0 .. --cat-5 responde a "cual de ellos es este": el marcador de un producto sin foto, la barra de una sucursal, el tramo de una categoria en el anillo. Un color categorico NUNCA indica un estado. NO son colores nuevos. Son EXACTAMENTE los que ya se pintaban a mano en tres sitios -.prod-img-cN, .inv-suc-barra-cN y el bloque de impresion-, 36 valores literales que ahora se declaran una vez. Indigo, esmeralda, naranja, rosa, cielo y amarillo: seis matices bien separados en el circulo cromatico y ninguno de ellos es el verde de --ok ni el ambar de --warn. Tres papeles por color: --cat-N la tinta: el trazo del anillo, la barra llena, las iniciales de un producto --cat-N-bg el fondo hundido detras de esa tinta --cat-N-borde el filo de ese fondo En oscuro se invierten -tinta clara sobre fondo hundido- y esos valores tambien existian ya, escritos a mano. Un color, un sitio, dos temas. =================================================================== */ --cat-0: #4338ca; --cat-0-bg: #eef2ff; --cat-0-borde: #e0e7ff; /* indigo */ --cat-1: #047857; --cat-1-bg: #ecfdf5; --cat-1-borde: #d1fae5; /* esmeralda */ --cat-2: #c2410c; --cat-2-bg: #fff7ed; --cat-2-borde: #ffedd5; /* naranja */ --cat-3: #be185d; --cat-3-bg: #fdf2f8; --cat-3-borde: #fce7f3; /* rosa */ --cat-4: #0369a1; --cat-4-bg: #f0f9ff; --cat-4-borde: #e0f2fe; /* cielo */ --cat-5: #a16207; --cat-5-bg: #fefce8; --cat-5-borde: #fef9c3; /* amarillo */ } /* La red del lienzo: una, no once. Si el navegador no sabe mezclar colores, el lienzo es el fondo de la aplicacion y ya. */ @supports not (background: color-mix(in srgb, red 4%, white)) { :root { --lienzo: var(--bg); } } /* --------------------------------------------------------------------- La escalera de la cabecera, por ancho. Se declara sobre :root -y no sobre .pagina-cab- para que cualquier regla del archivo pueda leer la medida vigente sin volver a escribir un punto de corte. Los dos @media son los del sistema: el de telefono y el de telefono pequeno. --------------------------------------------------------------------- */ @media (max-width: 767px) { :root { --cab-azulejo: var(--azulejo); /* 44 */ --cab-icono: 22px; --cab-titulo: var(--fs-xl); /* 20 */ --cab-desc: var(--fs-xs); /* 12 */ } } @media (max-width: 379px) { :root { --cab-azulejo: var(--azulejo-sm); /* 36 */ --cab-icono: 19px; --cab-titulo: 18px; } } /* ===================================================================== 1b. TEMA OSCURO --------------------------------------------------------------------- UN SOLO bloque, y casi todo el son TOKENS. No hay .panel-oscuro ni .tabla-oscura: los componentes no saben que existe un tema. Una pantalla nueva que use los componentes de siempre sale en oscuro sola. Como se enciende ---------------- El tema vive en un atributo del : data-tema="oscuro". Lo pone includes/vistas/cabeza_preferencias.php ANTES del primer pintado, que es el mismo sitio y el mismo patron con el que ya se decide si la barra lateral arranca colapsada. Y solo hay una razon para que lo ponga: el usuario eligio el tema oscuro y esa eleccion quedo guardada No hay segunda razon. Sin eleccion guardada -primera visita, almacenamiento bloqueado, valor corrupto- se queda el tema claro. EL SISTEMA OPERATIVO NO DECIDE: aqui no se consulta (prefers-color-scheme) ni se hace con @media en este archivo. Un mostrador con Windows en oscuro no tiene por que abrir el producto en negro sin haberlo pedido. Se resuelve en el script y NO con dos copias de este bloque -una en @media y otra en [data-tema]- porque duplicar cuarenta tokens es garantizar que un dia se toque una copia y no la otra. Por que no es "blanco a negro" ------------------------------ El tema claro es de neutros CALIDOS (#f7f7f6, #faf9f6, #e5e3dd). El oscuro conserva esa temperatura en vez de irse a un gris azulado: es lo que hace que se reconozca como el mismo producto. Y hay profundidad real, tres planos separados de verdad: --bg #14140f el fondo de la aplicacion --surface #1e1e1a el panel, la tarjeta, la barra lateral --surface-2 #292924 lo que va DENTRO del panel y tiene que distinguirse: inputs, cabecera de tabla, fila al pasar por encima, deshabilitado En claro --surface-2 es un hueco (mas oscuro que el panel blanco); en oscuro es un realce (mas claro que el panel). Es el mismo PAPEL en los dos temas -"lo que va dentro y se tiene que ver"- y por eso ningun componente necesita cambiar. ===================================================================== */ :root[data-tema="oscuro"] { color-scheme: dark; /* ---------- Marca ---------- */ /* En claro la marca se OSCURECE al pasar por encima; en oscuro se ACLARA. Es la misma idea -mas energia- leida al reves. */ --brand-600: #3b82f6; --brand-700: #60a5fa; --brand-50: #172554; /* Blanco sobre #17245c = 13.9:1. Ver la nota del tema claro. */ --acceso-marca-bg: #17245c; --accent-600: #2dd4bf; --accent-50: #04302e; /* ---------- Superficies ---------- */ --bg: #14140f; --surface: #1e1e1a; --surface-2: #292924; --border: #383731; --border-2: #4a4941; /* ---------- Texto ---------- */ /* --text-inv es el texto que va ENCIMA de un color solido de marca o de estado. En oscuro esos colores son claros, asi que el invertido es casi negro: #14140f sobre #3b82f6 da 6.0:1, mientras que blanco sobre ese mismo azul se queda en 3.1:1. */ --text: #f2f1ec; --text-2: #adaca3; --text-3: #7e7d75; --text-inv: #14140f; /* El azul de marca del tema oscuro (#3b82f6) es demasiado claro para llevar letra blanca: se queda en 3.68:1. En vez de dar marcha atras y volver a la letra oscura -que es lo que hacia que el mismo boton se leyera distinto segun el tema- se oscurece SOLO el fondo del boton primario, lo justo para cumplir AA sin salirse del tono: #ffffff sobre #2563eb = 5.17:1, hover #276af5 = 4.70:1. --brand-600 y --brand-700 NO se tocan: el chip, la barra de progreso, el enlace activo y el foco siguen con el azul claro que necesitan sobre fondo oscuro. */ --btn-primario-bg: #2563eb; --btn-primario-bg-hover: #276af5; /* ---------- Estados ---------- */ /* El color se aclara y el fondo se oscurece: el par --tono/--tono-bg sigue siendo legible sin que ningun chip ni aviso cambie una linea. */ --ok: #4ade80; --ok-bg: #0b2f1a; --warn: #fbbf24; --warn-bg: #3a2a06; --crit: #fb923c; --crit-bg: #3f2410; --error: #f87171; --error-bg: #401616; --info: #60a5fa; --info-bg: #17243f; --error-fuerte: #ef4444; /* ---------- Elevacion ---------- */ /* Sobre un fondo casi negro una sombra negra al 5% no existe. Se suben las opacidades, y ademas la elevacion se apoya en el salto de superficie y en el borde, que es lo que de verdad se ve. */ --sh-0: none; --sh-1: 0 1px 2px rgba(0,0,0,.45); --sh-2: 0 1px 3px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.4); --sh-3: 0 8px 28px rgba(0,0,0,.65); --sh-4: 0 2px 6px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35); --sh-5: 0 4px 10px rgba(0,0,0,.45), 0 12px 28px -10px rgba(0,0,0,.6); /* La marca ya no tira una sombra: tira LUZ. */ --sh-marca: 0 2px 6px rgba(59,130,246,.28), 0 10px 24px -8px rgba(59,130,246,.45); --sh-cobro: 0 6px 18px rgba(59,130,246,.35); --brand-halo: rgba(96,165,250,.24); /* OLA 6: los tres valores que en oscuro dejan de ser sombra y pasan a ser otra cosa. Ver sus notas en el tema claro. */ --sh-btn-luz: 0 2px 8px rgba(59,130,246,.18); --hundido: rgba(0, 0, 0, .3); --lienzo: var(--bg); --sh-arriba: 0 -6px 18px rgba(0,0,0,.5); /* El foco tiene que verse MAS, no menos, sobre un fondo oscuro. */ --ring: 0 0 0 3px rgba(96,165,250,.45); --ring-error: 0 0 0 3px rgba(248,113,113,.40); --ring-ok: 0 0 0 3px rgba(74,222,128,.38); --velo: rgba(0,0,0,.62); /* OLA 4: EL FILO DE LUZ. En oscuro una superficie elevada no se separa con sombra -sobre un casi negro no hay sombra que valga- sino con una linea de luz en el borde que mira hacia arriba. Estaba escrito a mano en doce sitios, en dos geometrias que son dos ideas distintas: --filo-luz solo el borde de arriba. La superficie se apoya en la pagina y recibe la luz por su canto. --contorno-luz el contorno entero. Para lo que FLOTA y no tiene una pagina debajo de la que apoyarse. En papel no hay luz que venga de arriba: el bloque de print los apaga con los demas. */ --filo-luz: inset 0 1px 0 rgba(255,255,255,.05); --contorno-luz: inset 0 0 0 1px rgba(255,255,255,.05); /* OLA 4: EL AZUL DE MARCA QUE PASA AA CON TEXTO BLANCO. El azul de marca en oscuro (#3b82f6) da 3.68:1 con blanco y falla AA. Donde se pide texto blanco -los primarios de Caja- hay que bajar el azul un punto: #2f6fdc da 4.74:1 y es el tono MAS CERCANO al original que cumple. Estaba escrito dos veces como literal con su calculo al lado; el propio comentario decia que el sitio de esto era el token. Aqui esta. NO es --brand-600 con otro nombre: son colores distintos a proposito, y sustituir uno por el otro rompe el contraste. */ --brand-600-aa: #2f6fdc; /* El realce dentro de una pastilla ya tenida: en claro aclara, en oscuro oscurece. */ --marca-realce: rgba(0,0,0,.32); /* ---------- G2: planos, estados y hojas en oscuro ---------- Aqui es donde el tema oscuro deja de ser "el claro invertido". En claro un panel blanco sobre un fondo hueso ya se lee como elevado y --surface-3 no tiene a donde subir. En oscuro SI: cada plano que se levanta es un gris mas claro, porque la luz viene de arriba y lo que esta mas cerca recibe mas. Los cinco planos: --bg #14140f la aplicacion --surface #1e1e1a el panel --surface-2 #292924 lo que va DENTRO del panel (input, th) --surface-3 #32322c lo que se levanta SOBRE el panel --sheet #24241f la hoja: separada del fondo, no del panel La hoja NO usa --surface-3. Una hoja tapa la aplicacion entera con un velo detras; si fuera del gris mas claro de todos competiria con su propio contenido. Se queda un punto por encima del panel, y lo que la separa del fondo es el velo, no el color. Los estados tampoco se invierten: se REESCRIBEN. En claro se oscurece con negro translucido; en oscuro se ACLARA con blanco translucido, porque manchar de negro un gris oscuro no se ve. */ --surface-3: #32322c; --sheet: #24241f; --hover: rgba(255,255,255,.05); --pressed: rgba(255,255,255,.10); --selected: rgba(59,130,246,.16); --selected-borde: rgba(96,165,250,.38); /* El borde de pelo en oscuro no puede ser negro translucido: seria invisible. Es blanco muy bajo, que es como se lee una junta entre dos superficies oscuras. */ --border-sutil: rgba(255,255,255,.07); /* En oscuro la sombra de una hoja casi no se ve; lo que la despega es el velo y un filo de luz en el borde superior. */ --sh-hoja: 0 -1px 0 rgba(255,255,255,.06), 0 -20px 50px -12px rgba(0,0,0,.75); /* ---------- G6: los papeles que si cambian en oscuro ---------- --elevated y --interactive NO se repiten aqui: los dos apuntan a --surface-3 y --surface-2, que este bloque ya reescribe, y la sustitucion se resuelve contra el valor que gana en el elemento. Repetirlos seria tener dos sitios donde tocar un mismo color. --modal SI se separa. En claro la hoja y el modal son el mismo blanco porque no hay a donde subir. En oscuro un dialogo centrado flota sobre el velo con todo el fondo detras y necesita despegarse mas que una hoja, que se apoya en el borde de la pantalla. */ --modal: #2b2b25; /* La sombra de un dialogo centrado tira hacia todos lados, no hacia arriba: no se puede reusar --sh-hoja. */ --sh-modal: 0 0 0 1px rgba(255,255,255,.06), 0 24px 60px -12px rgba(0,0,0,.8); } /* --------------------------------------------------------------------- Las TRES excepciones que no son un token. Van aqui, juntas y justificadas, en vez de repartidas por el archivo. --------------------------------------------------------------------- */ /* 1. Los controles de formulario. En claro el input es blanco sobre un panel blanco y se distingue por el borde; en oscuro hace falta que el control sea MAS claro que el panel para que se lea como un hueco donde se escribe. */ :root[data-tema="oscuro"] .campo input, :root[data-tema="oscuro"] .campo select, :root[data-tema="oscuro"] .campo textarea, :root[data-tema="oscuro"] input[type="search"], :root[data-tema="oscuro"] input[type="date"], :root[data-tema="oscuro"] input[type="number"], :root[data-tema="oscuro"] input[type="text"], :root[data-tema="oscuro"] input[type="tel"], :root[data-tema="oscuro"] input[type="email"], :root[data-tema="oscuro"] input[type="password"], :root[data-tema="oscuro"] select, :root[data-tema="oscuro"] textarea { background: var(--surface-2); } /* ...y por eso mismo, el campo que NO se puede escribir tiene que volver a bajar. En claro un control deshabilitado se distingue porque es MAS gris que el input blanco; en oscuro, si se quedara en --surface-2, seria identico a un campo activo -que ahi tambien es --surface-2- y no habria forma de ver que esta bloqueado. Baja al plano del panel: hundido y plano, con su texto en --text-3 y su borde de rayas, que ya los pone G4. */ :root[data-tema="oscuro"] input:disabled, :root[data-tema="oscuro"] select:disabled, :root[data-tema="oscuro"] textarea:disabled, :root[data-tema="oscuro"] input[type="text"]:read-only, :root[data-tema="oscuro"] input[type="number"]:read-only, :root[data-tema="oscuro"] input[type="email"]:read-only, :root[data-tema="oscuro"] input[type="tel"]:read-only, :root[data-tema="oscuro"] textarea:read-only { background: var(--surface); } /* 2. LA PALETA CATEGORICA EN OSCURO. Su color ES su identidad -el mismo producto sale siempre del mismo color- asi que no puede caer en un token de estado. Se recalculan las seis: fondo hundido y tinta clara del mismo matiz. OLA 2: deja de ser una lista de clases y pasa a ser la misma lista de TOKENS que el tema claro. Los valores no cambian ni un digito; lo que cambia es que ahora los leen los tres sitios que pintan categorias -las iniciales de un producto, la barra de una sucursal y el anillo de Reportes- en vez de tener cada uno su copia. */ :root[data-tema="oscuro"] { --cat-0: #a5b4fc; --cat-0-bg: #1e1b4b; --cat-0-borde: #312e81; --cat-1: #6ee7b7; --cat-1-bg: #052e21; --cat-1-borde: #065f46; --cat-2: #fdba74; --cat-2-bg: #3f1d0a; --cat-2-borde: #7c2d12; --cat-3: #f9a8d4; --cat-3-bg: #3f0f28; --cat-3-borde: #831843; --cat-4: #7dd3fc; --cat-4-bg: #082f49; --cat-4-borde: #075985; --cat-5: #fde047; --cat-5-bg: #3b2c05; --cat-5-borde: #854d0e; } /* 3. Las fotos de producto que suben los negocios estan hechas sobre fondo claro y en un panel oscuro deslumbran. Se bajan un punto. NO se invierten: invertir una foto de producto la estropea. */ :root[data-tema="oscuro"] .prod-img img, :root[data-tema="oscuro"] .imagen-previa { filter: brightness(.9); } /* --------------------------------------------------------------------- EL TEMA OSCURO NO SE IMPRIME --------------------------------------------------------------------- El papel es blanco. Sin esto, un negocio que trabaja en oscuro sacaba el corte de caja con los paneles en negro: ilegible y un cartucho de tinta por hoja. NO se rediseña la impresion: se devuelven los TOKENS al tema claro y las reglas de @media print que ya existian vuelven a hacer justo lo que hacian antes de que hubiera un tema oscuro. --------------------------------------------------------------------- */ @media print { :root[data-tema="oscuro"] { color-scheme: light; --brand-600: #1d4ed8; --brand-700: #1e3a8a; --brand-50: #eff6ff; --accent-600: #0d9488; --accent-50: #f0fdfa; --bg: #ffffff; --surface: #ffffff; --surface-2: #faf9f6; --border: #e5e3dd; --border-2: #d8d5cd; --text: #1c1c1a; --text-2: #6b6b66; --text-3: #9a9a94; --text-inv: #ffffff; --btn-primario-bg: #1d4ed8; --btn-primario-bg-hover: #1e3a8a; --ok: #15803d; --ok-bg: #dcfce7; --warn: #b45309; --warn-bg: #fef3c7; --crit: #c2410c; --crit-bg: #ffedd5; --error: #b91c1c; --error-bg: #fee2e2; --info: #1d4ed8; --info-bg: #eff6ff; --error-fuerte: #991b1b; /* En papel no hay elevacion. */ --sh-0: none; --sh-1: none; --sh-2: none; --sh-3: none; --sh-4: none; --sh-5: none; --sh-marca: none; --sh-arriba: none; --sh-cobro: none; --sh-hoja: none; --marca-realce: rgba(255,255,255,.65); /* G2: los planos y los estados nuevos vuelven tambien al tema claro. Sin esto, un negocio que trabaja en oscuro sacaba el corte de caja con las juntas invisibles (--border-sutil en blanco sobre papel blanco) y los realces de fila en gris. */ --surface-3: #ffffff; --sheet: #ffffff; --hover: transparent; --pressed: transparent; --selected: #eff6ff; --selected-borde: rgba(29,78,216,.28); --border-sutil: rgba(28,28,26,.12); /* OLA 2: la paleta categorica vuelve al tema claro tambien. Cierra un agujero del contrato de impresion: el bloque restauraba .prod-img-cN a mano y no .inv-suc-barra-cN, asi que cada sitio nuevo que pintara una categoria habia que acordarse de anadirlo aqui. Ahora se restauran los TOKENS y con ellos los tres sitios que los leen -las iniciales de un producto, la barra de una sucursal y el anillo de Reportes- mas cualquiera que venga. */ --cat-0: #4338ca; --cat-0-bg: #eef2ff; --cat-0-borde: #e0e7ff; --cat-1: #047857; --cat-1-bg: #ecfdf5; --cat-1-borde: #d1fae5; --cat-2: #c2410c; --cat-2-bg: #fff7ed; --cat-2-borde: #ffedd5; --cat-3: #be185d; --cat-3-bg: #fdf2f8; --cat-3-borde: #fce7f3; --cat-4: #0369a1; --cat-4-bg: #f0f9ff; --cat-4-borde: #e0f2fe; --cat-5: #a16207; --cat-5-bg: #fefce8; --cat-5-borde: #fef9c3; /* OLA 4: los ocho que todavia se colaban. El bloque restauraba superficies, estados y categorias pero no estos, que el tema oscuro tambien redefine. El que de verdad importa es --modal: #2b2b25 es casi negro, y un dialogo impreso habria salido como un rectangulo relleno. Los demas -velo, anillos de foco, halo, filo del panel de acceso- no llegan hoy al papel, pero dejarlos fuera es dejar el contrato a medias: la regla de esta seccion es que en print se restauran los TOKENS, no los sitios que los leen. */ --modal: #ffffff; --sh-modal: none; --velo: rgba(28,28,26,.5); --ring: 0 0 0 3px rgba(29,78,216,.22); --ring-error: 0 0 0 3px rgba(185,28,28,.18); --ring-ok: 0 0 0 3px rgba(21,128,61,.18); --brand-halo: rgba(29,78,216,.10); --acceso-marca-bg: #1e3a8a; /* El filo de luz es una idea del tema oscuro: en papel no existe. */ /* OLA 6: los tres que nacieron en esta ola. --lienzo es el unico que se ve de verdad en papel -es un FONDO de pantalla- y vuelve al blanco; los otros dos son ideas del tema oscuro (luz de un boton, pieza hundida) y en papel no existen. */ --lienzo: #ffffff; --sh-btn-luz: none; --hundido: transparent; --filo-luz: none; --contorno-luz: none; } /* El filo de luz de las superficies elevadas es una idea del tema oscuro. En papel no hay luz que venga de arriba. */ :root[data-tema="oscuro"] .panel, :root[data-tema="oscuro"] .tarjeta, :root[data-tema="oscuro"] .bloque-sup, :root[data-tema="oscuro"] .modal, :root[data-tema="oscuro"] .toast { box-shadow: none; } :root[data-tema="oscuro"] .panel .panel, :root[data-tema="oscuro"] .panel .tarjeta { background: #ffffff; } :root[data-tema="oscuro"] .campo input, :root[data-tema="oscuro"] .campo select, :root[data-tema="oscuro"] .campo textarea, :root[data-tema="oscuro"] input, :root[data-tema="oscuro"] select, :root[data-tema="oscuro"] textarea { background: #ffffff; } :root[data-tema="oscuro"] .prod-img img, :root[data-tema="oscuro"] .imagen-previa { filter: none; } /* OLA 2: las seis clases de categoria salen de aqui. Los tokens --cat-* restaurados arriba ya las devuelven al tema claro. */ } /* ===================================================================== 2. BASE ===================================================================== */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); font-size: var(--fs-base); line-height: var(--lh); overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { color: var(--brand-600); } a:hover { color: var(--brand-700); } /* Ningun elemento debe desbordar la pantalla */ img, table, pre { max-width: 100%; } /* Foco visible para teclado, sin anillo al hacer clic con el raton. Antes solo existia :focus, que marcaba tambien el clic. */ :focus-visible { outline: var(--foco); outline-offset: 2px; } /* El atributo hidden manda sobre cualquier display de este archivo. Sin esto, .btn (inline-block), .modal-fondo (flex) o .fila (flex) siguen mostrando el elemento aunque el HTML diga hidden. Es la forma de ocultar cosas desde JavaScript sin tocar estilos en linea. */ [hidden] { display: none !important; } /* Objetivo tactil minimo garantizado en cualquier accion */ button, .btn, .nav a { touch-action: manipulation; } /* ===================================================================== 3. LOGIN ===================================================================== */ /* ===================================================================== 4. FORMULARIOS ===================================================================== */ .campo { margin-bottom: var(--s4); } .campo label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--s1); } /* 16px es obligatorio: con menos, iOS hace zoom automatico al enfocar un campo y descuadra toda la pantalla. G4: casilla y radio dejan de heredar de aqui, pero NO con un :not() en este selector. Se probo y salio mal: dos :not([type=...]) suben la especificidad a (0,3,1) y a partir de ahi esta regla le ganaba a :focus (0,2,1), a :disabled (0,1,1) y al borde rojo del error. Medido en el navegador: el campo enfocado se quedaba sin anillo y sin borde de marca, y el campo con error salia con el borde de siempre. La forma correcta es no tocar esta regla y describir la casilla mas abajo: input[type="checkbox"] pesa lo mismo que .campo input y gana por ir despues, sin !important y sin desordenar los estados. */ .campo input, .campo select, .campo textarea, input[type="search"], input[type="date"], input[type="number"], input[type="text"], input[type="tel"], input[type="email"], input[type="password"], select { width: 100%; padding: var(--s3); border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 16px; font-family: inherit; background: var(--surface); color: var(--text); min-height: var(--tap); transition: border-color var(--t-rapida) var(--ease), box-shadow var(--t-rapida) var(--ease); } .campo textarea { min-height: 80px; } /* El foco se marca con :focus y no solo con :focus-visible a proposito: en una caja de texto interesa ver donde se esta escribiendo aunque se haya llegado con el raton. El anillo es el token del sistema. */ .campo input:focus, .campo select:focus, .campo textarea:focus, input:focus, select:focus { outline: none; border-color: var(--brand-600); box-shadow: var(--ring); } input::placeholder, textarea::placeholder { color: var(--text-3); } /* Campos deshabilitados: antes se veian identicos a los activos */ input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--text-3); cursor: not-allowed; } /* Solo lectura NO es lo mismo que deshabilitado: el dato se puede leer, copiar y enfocar, pero no escribir. Se veia igual que un campo normal, asi que invitaba a teclear en el. */ input[type="text"]:read-only, input[type="number"]:read-only, input[type="email"]:read-only, input[type="tel"]:read-only, textarea:read-only { background: var(--surface-2); border-style: dashed; cursor: default; } /* ---------- Casilla y radio ---------- G4: no tenian ni tamano propio, ni foco, ni area de toque; se apoyaban en el tamano por omision del navegador (13px) dentro de una etiqueta sin altura minima. Ahora miden 18px, se tinen con el color de marca y su foco es el mismo anillo del resto. */ input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; min-height: 0; flex: none; margin: 0; accent-color: var(--brand-600); cursor: pointer; } input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: var(--foco); outline-offset: 2px; } input[type="checkbox"]:disabled, input[type="radio"]:disabled { cursor: not-allowed; } /* El area de toque no la da la casilla -18px no se acierta con el pulgar- sino la etiqueta que la envuelve, que es ademas lo que ya activa el control al pulsarla. Se agrupa aqui .casilla-legal, que es la que el registro publico ya usaba para lo mismo: un nombre viejo y uno del sistema, una sola definicion. */ .campo-casilla, .casilla-legal { display: flex; align-items: flex-start; gap: var(--s2); min-height: var(--tap); cursor: pointer; font-size: var(--fs-sm); line-height: var(--lh); } .campo-casilla input, .casilla-legal input { margin-top: var(--s0); } /* ---------- Campo con error ---------- El error no se dice SOLO con color: el control cambia de borde y de anillo, y el mensaje lleva peso propio y su icono. Asi sigue siendo legible en escala de grises y para quien no distingue el rojo. input.tiene-error, que era un segundo mecanismo para lo mismo escrito mil lineas mas abajo, queda unificado aqui. */ .campo.tiene-error input, .campo.tiene-error select, .campo.tiene-error textarea, input.tiene-error { border-color: var(--error); } .campo.tiene-error input:focus, .campo.tiene-error select:focus, .campo.tiene-error textarea:focus, input.tiene-error:focus { border-color: var(--error); box-shadow: var(--ring-error); } /* La clase del mensaje es .error-msg, que es la que ya usaban las tres pantallas que tenian error por campo. */ .error-msg { display: flex; align-items: flex-start; gap: var(--s1); margin: var(--s1) 0 0; font-size: var(--fs-xs); font-weight: var(--peso-fuerte); color: var(--error); line-height: var(--lh); } .error-msg::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 14px; height: 14px; margin-top: 1px; border-radius: var(--r-full); background: var(--error); color: var(--surface); font-size: var(--fs-3xs); font-weight: var(--peso-max); } /* ---------- Grupo de campos ---------- G4: un
del navegador trae un marco de 1990 y un min-width:auto que rompe cualquier rejilla que lo contenga; por eso nadie lo usaba y habia 4 en todo el sistema para 146 campos. Esta regla lo deja utilizable, y a partir de ahi agrupar deja de tener coste. El rotulo del grupo NO es un titulo mas: va en versalitas y en color de segundo nivel, para que ordene sin competir con los rotulos de los campos que hay debajo. Es la misma forma que Configuracion se habia hecho por su cuenta -.admconfig-grupo/.admconfig-legend-, que pasa a usar esta y deja de tener las suyas. */ .campo-grupo { border: none; margin: 0 0 var(--s5); padding: 0; min-width: 0; } .campo-grupo:last-of-type { margin-bottom: var(--s4); } .campo-grupo > legend { padding: 0; margin-bottom: var(--s3); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-etiqueta); font-weight: var(--peso-fuerte); color: var(--text-2); } /* ---------- Dos campos en un renglon ---------- UNA rejilla para todo el sistema, con UN corte. Antes cada formulario elegia el suyo: Configuracion y Avisos coincidieron en 560 por casualidad y el resto usaba .fila, que es flex y reparte por contenido -dos campos del mismo renglon acababan con 17px de diferencia entre ellos, que es el defecto que Configuracion tuvo que corregir a mano-. 560 es el ancho por debajo del cual dos campos de texto dejan de caber sin estrujar el valor. No es un breakpoint nuevo: es el que ya estaba en el archivo. */ .campos-rejilla { display: grid; gap: 0 var(--s4); align-items: start; } @media (min-width: 560px) { .campos-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } .campos-rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ===================================================================== 5. BOTONES ===================================================================== */ /* G3: EL BOTON MIDE LO QUE MIDE SU CONTENIDO. --------------------------------------------------------------------- Hasta aqui la base decia width:100%. Un boton no es ancho por naturaleza -lo es por el sitio donde esta-, asi que cada pantalla que ponia uno tenia que desdecir la regla. Contado antes de tocar nada: 31 declaraciones "width: auto" repartidas por el archivo, incluidas tres variantes de COLOR (.btn-sec, .btn-plano, .btn-peligro-plano) que llevaban el ancho metido dentro, y comentarios en seis secciones distintas explicando el mismo tropiezo ("como hijo de un flex se iba a un renglon el solo", "el boton primario media 532px", "se estiraba a 721px por toda la columna"). Invertida la base, esas 31 desaparecen y lo que queda son las reglas que de verdad QUIEREN el boton a lo ancho -pie de formulario en telefono, barra del punto de venta, cierre de caja-, que ahora se leen como lo que son: una decision del contexto y no una correccion. Para pedirlo desde una plantilla existe .ancho-total, que ya estaba en las utilidades y ya usaban cuatro vistas; no se inventa un .btn-bloque nuevo para decir lo mismo. Y de paso el boton se vuelve flex aqui, una vez. La alineacion del icono con su texto estaba escrita tres veces (.btn-con-icono, .btn-icono, .btn[data-espera]) y cada rincon que centraba un boton repetia justify-content:center. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); width: auto; padding: var(--s3) var(--s4); min-height: var(--tap); background: var(--btn-primario-bg); color: var(--btn-primario-texto); border: 1px solid transparent; border-radius: var(--r-sm); font-size: var(--fs-base); font-weight: 600; font-family: inherit; cursor: pointer; text-align: center; text-decoration: none; transition: background var(--t-rapida) var(--ease), box-shadow var(--t-rapida) var(--ease), transform var(--t-rapida) var(--ease); } .btn:hover { background: var(--btn-primario-bg-hover); color: var(--btn-primario-texto); } .btn-sec { background: var(--surface); color: var(--text); border: 1px solid var(--border); } .btn-sec:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-2); } /* La variante primaria es la BASE: un .btn a secas ya es el boton fuerte. .btn-primario existia igualmente en el marcado -el "Cobrar" del punto de venta y su gemelo de telefono- sin una sola regla que la definiera; funcionaba de milagro, porque no pintar nada encima de la base da justo el aspecto que se buscaba. Se declara aqui, aunque no anada propiedades, para que la clase deje de estar suelta: si manana alguien cambia el color del primario, este es el sitio donde ira a buscarlo. */ .btn-primario { background: var(--btn-primario-bg); color: var(--btn-primario-texto); } .btn-primario:hover { background: var(--btn-primario-bg-hover); color: var(--btn-primario-texto); } /* Accion destructiva. Antes se pintaba a mano con style="..." El color del texto se declara AQUI. Antes lo heredaba de .btn, que desde esta pasada trae el blanco fijo del primario; el rojo del tema oscuro (#f87171) es claro y con letra blanca no se leeria. Se queda con --text-inv, que es justo lo que ya se pintaba: 6.47:1 en claro (#ffffff sobre #b91c1c) y 6.68:1 en oscuro (#14140f sobre #f87171). Sin cambio visible: solo deja de depender de la base. */ .btn-peligro { background: var(--error); color: var(--text-inv); border-color: transparent; } .btn-peligro:hover { background: var(--error-fuerte); color: var(--text-inv); } /* OLA 1: EL BOTON COMPACTO. --------------------------------------------------------------------- La accion que comparte renglon con un titulo de pantalla en un telefono. Existia siete veces -una por pantalla, acotada con :has()- y las siete no coincidian: 12 y 12.5px de letra, --s2, --s3 y 10px de relleno, 13, 14 y 15px de icono, gap de 4 y de 5. Define ESTRUCTURA Y ESCALA, no color. Se combina con la variante que toque -.btn a secas es el primario, .btn-sec el contorno, .btn-plano el fantasma, .btn-peligro el destructivo- y no cambia ninguna de ellas. El alto se queda en --tap: se aprieta lo que se puede apretar, no el objetivo tactil. Vive AQUI, con su familia, y no dentro de la seccion de la pantalla que lo necesito primero. La cabecera lo adopta por selector en 57b porque son 27 vistas; cualquier otro sitio que quiera lo mismo lo pide por esta clase. */ .btn-compacto { min-height: var(--tap); padding-inline: var(--s3); gap: var(--s1); font-size: var(--fs-xs); white-space: nowrap; } .btn-compacto .icono { width: var(--ico-sm); height: var(--ico-sm); } /* Estado deshabilitado real, para toda variante */ .btn:disabled, .btn[aria-disabled="true"] { background: var(--surface-2); color: var(--text-3); border-color: var(--border); cursor: not-allowed; transform: none; box-shadow: none; } /* ===================================================================== 6. AVISOS ===================================================================== */ .aviso { padding: var(--s3); border-radius: var(--r-sm); border-left: 3px solid currentColor; font-size: var(--fs-base); margin-bottom: var(--s4); } .aviso-error { background: var(--error-bg); color: var(--error); } .aviso-ok { background: var(--ok-bg); color: var(--ok); } .aviso-alerta { background: var(--warn-bg); color: var(--warn); } /* Faltaba el tono informativo: movimientos_lista.php lo pedia desde hace etapas y salia sin color, porque la clase no existia. */ .aviso-info { background: var(--info-bg); color: var(--info); } /* Aviso que ademas ofrece la accion para resolverlo */ .aviso-accion { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; } /* ===================================================================== 7. BARRA SUPERIOR ===================================================================== */ .topbar { background: var(--surface); border-bottom: 1px solid var(--border); padding: var(--s3) var(--s4); display: flex; align-items: center; justify-content: space-between; gap: var(--s3); } .topbar .marca { font-weight: 700; font-size: var(--fs-base); min-width: 0; } .topbar .marca span { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55vw; } .topbar .sesion { font-size: var(--fs-sm); color: var(--text-2); text-align: right; } .topbar .sesion strong { display: block; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 35vw; } .topbar a.salir { font-size: var(--fs-sm); text-decoration: none; } .topbar a.salir:hover { text-decoration: underline; } /* ===================================================================== 8. NAVEGACION --------------------------------------------------------------------- Se conserva intacta la tira de pildoras: funciona bien en movil y es lo que hay hoy. La barra lateral de escritorio llega en la Etapa 3; esta capa no cambia ninguna estructura HTML. ===================================================================== */ .nav { display: flex; gap: var(--s1); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: var(--s2) var(--s4); background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: var(--z-nav); } .nav::-webkit-scrollbar { display: none; } .nav a { padding: var(--s2) var(--s4); border-radius: var(--r-full); font-size: var(--fs-sm); text-decoration: none; color: var(--text-2); white-space: nowrap; transition: background var(--t-rapida) var(--ease), color var(--t-rapida) var(--ease); } .nav a:hover { background: var(--surface-2); color: var(--text); } .nav a.activo { background: var(--brand-600); color: var(--text-inv); font-weight: 600; } .nav a.activo:hover { background: var(--brand-700); color: var(--text-inv); } /* ===================================================================== 8b. SHELL DE APLICACION (Etapa 3) --------------------------------------------------------------------- Movil primero: hasta 1023px la barra lateral no existe (display:none) y la pagina se ve exactamente igual que antes. El shell de escritorio se enciende en el bloque de 1024px que esta mas abajo. ===================================================================== */ .app { display: block; } .app-cuerpo { min-width: 0; } /* La barra lateral no se pinta en celular ni en tablet */ .lateral { display: none; } /* En celular la miga de pan de la barra superior estorba: el titulo de la pagina ya dice donde estas y el espacio es escaso. */ .topbar .miga { display: none; } /* ===================================================================== 9. LAYOUT ===================================================================== */ .contenido { padding: var(--s5) var(--s4) 70px; max-width: var(--ancho-contenido); margin: 0 auto; } .contenido h2 { font-size: var(--fs-xl); line-height: var(--lh-tight); margin: 0 0 var(--s4); } .contenido h3 { font-size: var(--fs-lg); line-height: var(--lh-tight); margin: 0 0 var(--s3); } /* ===================================================================== 10. TARJETAS ===================================================================== */ .tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s3); margin-bottom: var(--s5); } .tarjeta { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s4); box-shadow: var(--sh-1); } .tarjeta .etiqueta { font-size: var(--fs-xs); color: var(--text-2); text-transform: uppercase; letter-spacing: .4px; } .tarjeta .valor { font-size: var(--fs-2xl); font-weight: 700; margin-top: var(--s1); line-height: var(--lh-tight); overflow-wrap: break-word; font-variant-numeric: tabular-nums; } /* ===================================================================== 11. TABLAS ===================================================================== */ .tabla-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-1); } table { width: 100%; border-collapse: collapse; } th, td { padding: var(--s3); text-align: left; border-bottom: 1px solid var(--border); font-size: var(--fs-base); } th { background: var(--surface-2); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .4px; color: var(--text-2); font-weight: 600; } tr:last-child td { border-bottom: none; } /* Cifras alineadas: 1.250,00 y 980,00 comparables de un vistazo */ td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } /* Realce de fila al pasar el raton. No aplica en movil: ahi la tabla ya no es tabla, son fichas. */ @media (hover: hover) and (min-width: 768px) { tbody tr:hover td, .tabla-wrap table tr:hover td { background: var(--surface-2); } } /* ===================================================================== 12. CHIPS DE ESTADO --------------------------------------------------------------------- La escala la manda stock_status() en includes/functions.php: agotado stock <= 0 rojo bajo stock <= minimo naranja (cruzo el minimo) critico stock <= minimo * 2 ambar (va a caer pronto) normal resto verde OJO con el nombre: "critico" es MENOS grave que "bajo", no mas. Antes 'bajo' y 'critico' compartian exactamente el mismo color y el usuario no podia distinguirlos (C8 de la auditoria). Ya no. ===================================================================== */ .chip { display: inline-block; padding: var(--s1) var(--s3); border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 600; line-height: 1.4; white-space: nowrap; } .chip-normal { background: var(--ok-bg); color: var(--ok); } .chip-critico { background: var(--warn-bg); color: var(--warn); } .chip-bajo { background: var(--crit-bg); color: var(--crit); } .chip-agotado { background: var(--error-bg); color: var(--error); } /* Alias por si alguna pantalla escribe el estado en otras palabras */ .chip-activo, .chip-ok, .chip-completada { background: var(--ok-bg); color: var(--ok); } .chip-pendiente { background: var(--warn-bg); color: var(--warn); } .chip-inactivo, .chip-cancelada { background: var(--error-bg); color: var(--error); } .chip-info { background: var(--info-bg); color: var(--info); } .chip-neutro { background: var(--surface-2); color: var(--text-2); } /* Tonos semanticos: valen para cualquier pantalla, no solo para estados de stock o de venta. */ .chip-alerta { background: var(--warn-bg); color: var(--warn); } .chip-error { background: var(--error-bg); color: var(--error); } /* ===================================================================== 13. ESTADO VACIO ===================================================================== */ .vacio { padding: var(--s6) var(--s4); text-align: center; color: var(--text-2); font-size: var(--fs-base); } /* ===================================================================== 13b. COMPONENTES DE includes/ui.php (Etapa 2) --------------------------------------------------------------------- Todo lo de esta seccion es aditivo: ninguna pagina existente usa estas clases todavia, asi que nada puede romperse. Las paginas se van pasando a los componentes en las Etapas 4 a 7. ===================================================================== */ /* ---------- Iconos ---------- */ /* Heredan el color del texto y se alinean con la linea base. */ .icono { display: inline-block; vertical-align: -.18em; flex-shrink: 0; } /* ---------- KPI ---------- */ /* Rejilla propia, mas ancha que .tarjetas: un importe como $318,905.50 a 26px no cabe en una tarjeta de 140px y se parte a mitad del numero. No se toca .tarjetas para no mover las paginas que todavia no usan componentes. */ /* Tono: colorea el numero, no el fondo. El fondo de color a pantalla completa cansa la vista de quien mira el tablero todo el dia. */ /* KPI que ademas es enlace (p. ej. "6 alertas" -> pagina de alertas) */ /* ---------- Boton con icono ---------- */ /* G3: la base .btn ya es inline-flex con gap, asi que esta clase no anade nada. Se conserva DEFINIDA -en vez de borrarla- porque la escriben doce plantillas y la pone ui_boton() cuando hay icono, y una clase escrita sin definicion es justo lo que G3 vino a quitar. Retirarla del marcado es G9. Su duplicado exacto, que estaba mil lineas mas abajo repitiendo el mismo gap, si desaparece. */ .btn-con-icono { gap: var(--s2); } /* ---------- Encabezado de seccion ---------- */ .seccion-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s4); } .seccion-cab h2 { margin: 0; font-size: var(--fs-xl); line-height: var(--lh-tight); } .seccion-desc { margin: var(--s1) 0 0; color: var(--text-2); font-size: var(--fs-sm); } .seccion-acciones { display: flex; gap: var(--s2); flex-wrap: wrap; } /* ---------- Conmutador de tema ---------- El boton lleva en el HTML las DOS mitades -luna/"Tema oscuro" y sol/"Tema claro"- y el CSS ensena la que corresponde a la ACCION, nunca al estado: en claro se ofrece pasar a oscuro. Se decide con data-tema, que ya esta puesto antes del primer pintado, asi que el rotulo sale correcto sin esperar a JavaScript. Las etiquetas van dentro de .lateral-txt para que el riel de iconos y la barra contraida las escondan con la MISMA regla que al resto del menu, sin una excepcion propia. */ .tema-icono, .tema-txt { display: none; } .tema-icono-oscuro, .tema-txt-oscuro { display: inline-flex; } :root[data-tema="oscuro"] .tema-icono-oscuro, :root[data-tema="oscuro"] .tema-txt-oscuro { display: none; } :root[data-tema="oscuro"] .tema-icono-claro, :root[data-tema="oscuro"] .tema-txt-claro { display: inline-flex; } /* ---------- Miga de pan ---------- */ .miga { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1); font-size: var(--fs-sm); color: var(--text-2); margin-bottom: var(--s3); } .miga a { color: var(--text-2); text-decoration: none; } .miga a:hover { color: var(--brand-600); text-decoration: underline; } .miga [aria-current="page"] { color: var(--text); font-weight: 600; } .miga-sep { display: inline-flex; color: var(--text-3); } /* ---------- Estado vacio ---------- */ .estado-vacio { text-align: center; padding: var(--s6) var(--s4); color: var(--text-2); } .estado-vacio-icono { color: var(--text-3); margin-bottom: var(--s3); } .estado-vacio-titulo { margin: 0; font-size: var(--fs-lg); font-weight: 600; color: var(--text); } .estado-vacio-texto { margin: var(--s2) auto 0; max-width: 44ch; font-size: var(--fs-sm); } .estado-vacio-cta { margin-top: var(--s4); } /* Dentro de una tabla ya hay padding de celda: no se duplica. */ td.vacio .estado-vacio { padding: var(--s5) 0; } /* ---------- Panel ---------- */ .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-1); margin-bottom: var(--s4); overflow: hidden; } .panel-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding: var(--s4); border-bottom: 1px solid var(--border); } .panel-cab h3 { margin: 0; font-size: var(--fs-base); font-weight: 600; } .panel-desc { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--text-2); } .panel-acciones { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; } /* G3: decia min-height:0 y el boton salia a 38px. Un boton de cabecera de panel pesa menos por COLOR y por tamano de letra; el area de toque no es donde se ahorra. Con los 40 aqui caen los tres parches identicos que se habian escrito en Categorias, Negocios y Permisos. */ .panel-acciones .btn { padding: var(--s2) var(--s3); min-height: 40px; font-size: var(--fs-sm); } /* En telefono ese min-height: 0 deja el boton en 37px de alto. Que pese menos que la accion principal es cuestion de color y de tamano de letra, no de quitarle area de toque al dedo. El corte va en 1023 y no en 767: una tableta se toca con el dedo igual que un telefono, y todas las correcciones de area de toque se estaban cortando en 767 sin motivo. */ @media (max-width: 1023px) { .panel-acciones .btn { padding: var(--s2) var(--s4); } } /* ---------- La cabecera con azulejo (Fase C) ---------- El azulejo entra COMO PRIMER HIJO del flex que ya existia, y el bloque de titulo+descripcion pasa a quedarse con el sitio que sobra. El justify-content: space-between de la regla base sigue empujando las acciones al otro extremo, asi que no hay nada mas que decir: una linea de flex-grow y ya esta. Solo lo llevan los paneles que piden icono, y hoy solo los pide el tablero. Los demas paneles del sistema no ven esta regla. */ .panel-cab.con-azulejo > div:not(.panel-acciones) { flex: 1 1 auto; min-width: 0; } .panel-cab.con-azulejo .azulejo { align-self: center; } .panel-cuerpo { padding: var(--s4); } /* Una tabla dentro de un panel no necesita su propio marco */ .panel-cuerpo.sin-espacio { padding: 0; } .panel-cuerpo.sin-espacio .tabla-wrap { border: none; border-radius: 0; box-shadow: none; } /* ---------- Rejillas de dashboard ---------- */ /* Movil primero: todo en una columna. Las variantes se activan cuando de verdad hay ancho, no antes. */ .rejilla { display: grid; grid-template-columns: 1fr; gap: var(--s4); margin-bottom: var(--s4); } @media (min-width: 768px) { .rejilla-2 { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { /* Grafica ancha + panel lateral. La grafica necesita el doble de ancho para que las barras se puedan comparar entre si. */ .rejilla-2-1 { grid-template-columns: 2fr 1fr; } /* Cada panel mide lo que necesita. Estirandolos a la altura del mas alto, uno con pocas filas se queda con un palmo de blanco dentro y se lee como un panel roto. */ .rejilla-2, .rejilla-2-1 { align-items: start; } .rejilla-3 { grid-template-columns: repeat(3, 1fr); } } /* ---------- Barra de progreso ---------- */ /* El canal se ve. Con --bg sobre una tarjeta blanca era invisible, y una barra al 0% desaparecia entera: la fila de un producto agotado perdia la estructura que si tenian las demas. */ .barra { background: var(--border); border-radius: var(--r-full); height: 8px; overflow: hidden; } .barra span { display: block; height: 100%; border-radius: var(--r-full); background: var(--brand-600); } .barra-ok span { background: var(--ok); } .barra-warn span { background: var(--warn); } .barra-crit span { background: var(--crit); } .barra-acento span { background: var(--accent-600); } /* Faltaba el tono de error: la barra ya tenia ok, warn, crit y acento, pero no habia forma de pintar "agotado". */ .barra-error span { background: var(--error); } /* ---------- Grafica de barras (SVG en linea) ---------- */ .grafica-wrap { width: 100%; } .grafica { width: 100%; height: auto; display: block; overflow: visible; } .grafica-rejilla { stroke: var(--border); stroke-width: 1; } .grafica-base { stroke: var(--border-2); stroke-width: 1; } .grafica-eje, .grafica-etiqueta { font-family: var(--font); font-size: var(--fs-2xs); fill: var(--text-2); } /* MEDIDO a 390px: el SVG se escala a 0.473, asi que la letra de 11 unidades del viewBox acababa en 5.2 PIXELES de pantalla. Ilegible. El texto vive en unidades del viewBox, no en pixeles, asi que subirlo aqui lo agranda sin deformar nada: a 22 unidades sale a ~10px reales. Va en el COMPONENTE porque le pasa en cualquier pantalla que lo use, no solo en Reportes. */ /* La letra mas grande ocupa mas sitio, asi que caben MENOS etiquetas. El helper marca cada etiqueta con la pantalla mas estrecha en la que todavia cabe; aqui se esconden las que sobran. Sin esto, subir el cuerpo de la letra en telefono hacia que las etiquetas de un periodo largo se pisaran unas con otras. */ @media (max-width: 767px) { .grafica-eje, .grafica-etiqueta { font-size: 22px; } .grafica-etiqueta.etiq-md, .grafica-etiqueta.etiq-lg { display: none; } /* Con la letra de 22, la etiqueta de los extremos de una serie densa se sale del lienzo y el navegador la recorta. Anclarla hacia dentro la mete entera. El helper solo marca las que de verdad se salen, asi que una serie corta no se descentra. */ .grafica-etiqueta.es-primera { text-anchor: start; } .grafica-etiqueta.es-ultima { text-anchor: end; } } @media (min-width: 768px) and (max-width: 1023px) { .grafica-eje, .grafica-etiqueta { font-size: 14px; } .grafica-etiqueta.etiq-lg { display: none; } } /* ---------- Tono de la grafica ---------- El tono NO se pinta barra por barra: cada grafica declara su color una sola vez en --graf-color y las barras lo consumen. Asi una grafica nueva solo necesita su clase de tono, y el dia que el tema oscuro se encienda basta con que el token cambie. La taxonomia es la misma que ya usan chip, metrica y barra de progreso (brand / acento / ok / warn / crit / error / info): no se inventa vocabulario nuevo para este componente. */ .grafica { --graf-color: var(--brand-600); } .grafica-brand { --graf-color: var(--brand-600); } .grafica-acento { --graf-color: var(--accent-600); } .grafica-ok { --graf-color: var(--ok); } .grafica-warn { --graf-color: var(--warn); } .grafica-crit { --graf-color: var(--crit); } .grafica-error { --graf-color: var(--error); } .grafica-info { --graf-color: var(--info); } /* La jerarquia se hace con opacidad sobre el MISMO color del tono, no con un segundo color por tono: un tono = un token. La base a .85 deja sitio para que el hover suba a lleno y se note. */ .grafica-barra rect { fill: var(--graf-color); fill-opacity: .85; transition: fill-opacity var(--t-rapida) var(--ease); } .grafica-barra:hover rect { fill-opacity: 1; } /* Barra sin valor: no lleva el tono, lleva el gris del canal. Si heredara la opacidad de arriba se leeria como un dato pequenio en vez de como "aqui no hubo nada". */ .grafica-barra.vacia rect { fill: var(--border); fill-opacity: 1; } /* La barra destacada (hoy) va a color lleno y las demas del periodo bajan a contexto. Solo pasa cuando la grafica declara que TIENE una barra destacada: en una grafica sin "hoy", bajar todas seria apagar la grafica entera sin ganar ninguna jerarquia. */ .grafica-destaca .grafica-barra rect { fill-opacity: .45; } .grafica-destaca .grafica-barra.vacia rect { fill-opacity: 1; } .grafica-barra.es-hoy rect, .grafica-destaca .grafica-barra:hover rect { fill-opacity: 1; } .grafica-etiqueta.es-hoy { fill: var(--text); font-weight: var(--peso-max); } /* ---------- Lista de ranking ---------- */ .ranking-fila { padding: var(--s3) 0; border-bottom: 1px solid var(--border); } .ranking-fila:first-child { padding-top: 0; } .ranking-fila:last-child { border-bottom: none; padding-bottom: 0; } .ranking-cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); margin-bottom: var(--s2); font-size: var(--fs-sm); } .ranking-cab strong { font-weight: 600; } .ranking-cifra { white-space: nowrap; color: var(--text-2); font-variant-numeric: tabular-nums; } .ranking-pie { font-size: var(--fs-xs); color: var(--text-2); margin-top: var(--s1); } /* ---------- Modal ---------- */ .modal-fondo { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--velo); display: flex; align-items: flex-end; justify-content: center; padding: var(--s4); overflow-y: auto; } /* Sin esto el display:flex de arriba gana sobre el hidden del navegador y el modal se queda visible aunque el atributo diga lo contrario. */ .modal-fondo[hidden] { display: none; } /* OLA 4: el modal y la hoja estaban CAMBIADOS DE SITIO. El sistema tiene dos superficies temporales con nombre propio: --sheet, el color de algo apoyado en el borde de la pantalla, y --modal, el de un dialogo centrado que tiene toda la pagina detras. La seccion 57f hace el cambio correctamente para .hoja-panel: hoja por debajo de 768, dialogo por encima. El .modal no lo hacia nunca. Resultado en escritorio y en oscuro: la HOJA se pintaba de dialogo y el DIALOGO se pintaba de hoja. En claro no se notaba porque los dos son blancos, que es como llevaba tiempo pasando desapercibido. Se arregla aqui y en el bloque de 768 de mas abajo. Tambien se juntan los tres valores que decian lo mismo -92vh aqui, 90vh en telefono y --hoja-max (90dvh) en la hoja- en el token que ya existia para eso. La superficie base se declaraba --surface y la reescribia doce mil lineas mas abajo un `.modal { background: var(--sheet) }` suelto. Se escribe una vez, aqui. */ .modal { background: var(--sheet); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--sh-3); width: 100%; max-width: 520px; max-height: var(--hoja-max); display: flex; flex-direction: column; } /* Modal cuyo contenido no usa cab/cuerpo/pie: lleva su propio margen */ .modal-simple { padding: var(--s4); overflow-y: auto; } .modal-cerrar { background: none; border: none; color: var(--text-2); cursor: pointer; padding: var(--s2); margin: calc(var(--s2) * -1); border-radius: var(--r-sm); display: inline-flex; min-width: var(--tap); min-height: var(--tap); align-items: center; justify-content: center; } .modal-cerrar:hover { background: var(--surface-2); color: var(--text); } .modal-cuerpo { padding: var(--s4); overflow-y: auto; } .modal-pie { display: flex; gap: var(--s2); justify-content: flex-end; flex-wrap: wrap; padding: var(--s4); border-top: 1px solid var(--border); } /* En celular el modal sube desde abajo, que es donde esta el pulgar. Desde tablet se centra. */ @media (min-width: 768px) { .modal-fondo { align-items: center; } .modal { border-radius: var(--r-lg); } } /* ===================================================================== 13c. UTILIDADES (Etapa 5) --------------------------------------------------------------------- Estas clases NO son un framework de utilidades al estilo Tailwind. Salieron de contar los 551 style="..." que habia repartidos en 29 archivos y quedarse solo con los patrones que de verdad se repetian: texto secundario, filas flexibles, listas de dato/valor y botones chicos de tabla. Todo lo que aqui aparece existe porque estaba escrito a mano muchas veces. Si algo se usa una sola vez, no merece una clase: merece un componente en ui.php. ===================================================================== */ /* ---------- Texto ---------- */ .txt-2 { color: var(--text-2); } .txt-3 { color: var(--text-3); } .txt-ok { color: var(--ok); } .txt-error { color: var(--error); } .txt-xs { font-size: var(--fs-xs); } .txt-sm { font-size: var(--fs-sm); } .txt-base { font-size: var(--fs-base); } .txt-lg { font-size: var(--fs-lg); } .txt-xl { font-size: var(--fs-xl); } .negrita { font-weight: 600; } .fuerte { font-weight: 700; } .oculto { display: none; } /* Para lectores de pantalla: el texto existe y se lee, pero no se ve. Distinto de .oculto, que lo quita para todo el mundo. Nace con el fieldset del corte de caja, que necesita su legend sin ensenarla. */ .solo-lectura-pantalla { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .ancho-auto { width: auto; } .centrado { text-align: center; } .derecha { text-align: right; } .cifra { font-variant-numeric: tabular-nums; white-space: nowrap; } /* ---------- Filas flexibles ---------- */ /* El patron mas repetido del sistema: dos cosas en una linea que en celular se parten solas. */ .fila { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; } .fila-entre { justify-content: space-between; } .fila-arriba { align-items: flex-start; } .crece { flex: 1; min-width: 150px; } .crece-libre { flex: 1; min-width: 0; } .en-linea { display: inline; } .bloque { display: block; } .ancho-total { width: 100%; } .ancho-lectura { max-width: 640px; } /* ---------- Espaciado ---------- */ .m0 { margin: 0; } .mt-1 { margin-top: var(--s1); } .mb-2 { margin-bottom: var(--s2); } .mt-2 { margin-top: var(--s2); } .mb-3 { margin-bottom: var(--s3); } .mt-3 { margin-top: var(--s3); } .mb-4 { margin-bottom: var(--s4); } .mb-5 { margin-bottom: var(--s5); } /* ---------- Boton chico (acciones dentro de tablas) ---------- */ /* Un boton pequeno lo es para que la accion de una FILA no pese como la accion de la PANTALLA. Eso es cuestion de color y de tamano de letra; el area de toque NO es donde se ahorra. G3: median 34px en escritorio y subian a 40 por debajo de 1024. Eran, junto con las pestanas, los unicos controles del sistema por debajo del minimo comodo -34px es medio dedo- y ademas hacian falta DOS reglas para decirlo. Ahora arrancan en 40 y la segunda sobra. Con puntero grueso siguen subiendo a 44, unas lineas mas abajo. */ .btn-sm { min-height: 40px; padding: var(--s1) var(--s3); font-size: var(--fs-sm); } /* ---------- Rotulo ---------- */ /* Etiqueta chica sobre un dato, fuera de un formulario. */ .rotulo { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); margin-bottom: var(--s1); text-transform: uppercase; letter-spacing: .3px; } /* ---------- Lista de dato y valor ---------- */ /* Resumenes de venta, corte de caja y ticket: etiqueta a la izquierda, cifra a la derecha. Estaba escrito a mano 14 veces. */ .datos { margin: 0; } .dato { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--border); font-size: var(--fs-base); } .dato:last-child { border-bottom: none; } /* Renglon de lista sin linea divisoria */ .linea { padding: var(--s2) 0; margin: 0; } /* ---------- Piezas de pantalla reutilizables ---------- */ .min0 { min-width: 0; } .fila-junta { display: flex; gap: var(--s2); flex-wrap: wrap; } /* OLA 1: .buscador y .buscador-estado se declaran una sola vez, en la seccion 57d, junto al resto del componente. Aqui solo quedaban dos reglas sueltas de colocacion que ninguna vista llegaba a usar. */ /* Miniatura de producto en una fila de tabla */ .miniatura { width: 36px; height: 36px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--border); display: block; } /* Bloque de datos destacado dentro de un modal o tarjeta */ .caja-info { background: var(--bg); border-radius: var(--r-sm); padding: var(--s3); margin: var(--s4) 0; } /* Control de cantidad: menos, numero, mas */ .contador { display: flex; gap: var(--s2); align-items: center; } .contador .btn { padding: 0 var(--s5); font-size: var(--fs-xl); } .contador input { text-align: center; font-size: var(--fs-xl); font-weight: 700; } /* ---------- Barra de filtros ---------- */ /* ===================================================================== G5 — LA BARRA DE FILTROS --------------------------------------------------------------------- Habia seis barras haciendo lo mismo con seis nombres: .filtros, .inv-filtros (movimientos e historial), .prod-filtros (catalogo), .admin-barra (negocios y usuarios), .act-filtro (actividad) y .rep-rango (reportes). Las seis eran flex, envolvian, y separaban con el mismo hueco; discrepaban solo en el alineado vertical, que es lo unico que de verdad cambia entre ellas. NO se unifican poniendoles a todas la clase .filtros en el marcado, y la razon importa: app.js engancha su hoja inferior de telefono a 'form.filtros'. Ninguna plantilla usa hoy esa clase -las tres que filtran llevan id="filtros" y clase .inv-filtros o .prod-filtros-, asi que esa hoja nunca llega a ejecutarse. Ponersela ahora activaria de golpe un boton inyectado, una hoja, un velo y dos botones nuevos: seria cambiar el comportamiento, no consolidarlo. Queda anotado como deuda de app.js. Se consolida donde si se puede: una sola declaracion compartida por las seis. Cada pantalla conserva su nombre -y con el sus ganchos de JS y sus reglas propias-, pero la composicion se escribe una vez. ===================================================================== */ .inv-filtros, .inv-filtros-sec, .prod-filtros, .act-filtro, .rep-rango { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: flex-end; } /* El catalogo y actividad alinean al centro: sus controles no llevan rotulo encima, asi que no hay linea de base que compartir. */ .prod-filtros, .act-filtro { align-items: center; } /* Un campo dentro de una barra de filtros no arrastra el margen que lleva dentro de un formulario, y reparte el ancho sobrante. */ .inv-filtros .campo, .inv-filtros-sec .campo { margin-bottom: 0; flex: 1; min-width: 150px; } /* ===================================================================== 14. CELULAR: LAS TABLAS SE APILAN COMO FICHAS --------------------------------------------------------------------- Una tabla de 8 columnas en una pantalla de 360px es ilegible aunque se pueda deslizar. app.js copia el nombre de cada columna al atributo data-label de sus celdas; aqui se usa como etiqueta de cada renglon. Esto ya funcionaba y es la mejor decision tecnica del proyecto. Se conserva sin un solo cambio de comportamiento. ===================================================================== */ @media (max-width: 767px) { .tabla-datos { border: none; background: none; overflow: visible; box-shadow: none; } .tabla-datos table, .tabla-datos tbody, .tabla-datos tr, .tabla-datos td { display: block; width: 100%; } /* La fila de titulos sobra: cada celda ya lleva su etiqueta en data-label. Se oculta por las dos vias porque solo 3 de las 24 tablas del sistema usan ; el resto escribe suelto y app.js les marca la fila con .fila-encabezado. */ .tabla-datos thead, .tabla-datos .fila-encabezado { display: none; } .tabla-datos tr { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: var(--s3); padding: var(--s1) 0; box-shadow: var(--sh-1); } .tabla-datos td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); border: none; border-bottom: 1px solid var(--border); padding: var(--s2) var(--s3); text-align: right; } .tabla-datos tr td:last-child { border-bottom: none; } .tabla-datos td::before { content: attr(data-label); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .4px; color: var(--text-2); font-weight: 600; text-align: left; flex-shrink: 0; } /* Celdas sin encabezado (columna de acciones): sin etiqueta y a lo ancho */ .tabla-datos td[data-label=""]::before { content: none; } .tabla-datos td[data-label=""] { justify-content: flex-end; flex-wrap: wrap; } .tabla-datos td.vacio { display: block; text-align: center; } .tabla-datos td.vacio::before { content: none; } /* Los formularios dentro de una celda no deben romper el ancho */ .tabla-datos td form { display: inline-block; } .contenido h2 { font-size: var(--fs-lg); } .tarjeta .valor { font-size: var(--fs-xl); } .tarjetas { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--s3); } } /* Pantallas muy angostas */ @media (max-width: 379px) { .tarjetas { grid-template-columns: 1fr 1fr; } .topbar .marca { font-size: 14px; } } /* ===================================================================== 15. TABLET Y ESCRITORIO ===================================================================== */ @media (min-width: 768px) { .contenido { padding: var(--s6) var(--s5) 60px; } .topbar, .nav { padding-left: var(--s5); padding-right: var(--s5); } .campo input, .campo select, .campo textarea { font-size: var(--fs-base); } .tarjeta:hover { box-shadow: var(--sh-2); } } /* ===================================================================== 15b. ESCRITORIO: BARRA LATERAL (Etapa 3 -> G1) --------------------------------------------------------------------- Desde 1280px aparece la barra lateral con etiquetas y desaparece la tira de pildoras. Debajo de 1280px queda el riel de iconos (bloque 27b), y debajo de 768 el cajon con barra inferior. G1: este corte estaba en 1024 y era el origen del principal defecto de composicion del sistema. Ver la nota de --ancho-contenido-riel en la seccion de TOKENS y la seccion GLOBAL G1 al final del archivo. ===================================================================== */ @media (min-width: 1280px) { .app { display: grid; grid-template-columns: var(--ancho-lateral) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; } /* La tira de pildoras del menu deja su lugar a la barra lateral. Ojo: .nav-periodos reutiliza la misma clase para los filtros de Reportes y Solicitudes, y esos SI se quedan en escritorio. */ .nav { display: none; } .lateral { display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--border); position: sticky; top: 0; height: 100vh; height: 100dvh; z-index: var(--z-nav); overflow: hidden; } /* ---------- Marca ---------- */ .lateral-marca { display: flex; align-items: center; gap: var(--s3); padding: var(--s4); border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); min-height: 62px; } .lateral-logo { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; } .lateral-marca-txt { min-width: 0; } .lateral-marca-txt strong { display: block; font-size: var(--fs-sm); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lateral-marca-txt small { display: block; font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- Enlaces ---------- */ .lateral-nav { flex: 1; overflow-y: auto; padding: var(--s3) var(--s2); } .lateral-grupo { margin-bottom: var(--s4); } .lateral-titulo { margin: 0 0 var(--s1); padding: 0 var(--s3); font-size: var(--fs-3xs); font-weight: 700; letter-spacing: .8px; color: var(--text-3); } .lateral-enlace { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); margin-bottom: 1px; border-radius: var(--r-sm); color: var(--text-2); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; transition: background var(--t-rapida) var(--ease), color var(--t-rapida) var(--ease); } .lateral-enlace:hover { background: var(--surface-2); color: var(--text); } .lateral-enlace .icono { color: var(--text-3); flex-shrink: 0; } .lateral-enlace:hover .icono { color: var(--text-2); } /* Estado activo: fondo suave y barra de color a la izquierda. El azul solido de las pildoras es demasiado peso repetido 11 veces en una columna. */ .lateral-enlace.activo { background: var(--brand-50); color: var(--brand-600); font-weight: 600; box-shadow: inset 3px 0 0 var(--brand-600); } .lateral-enlace.activo .icono { color: var(--brand-600); } .lateral-txt { overflow: hidden; text-overflow: ellipsis; } .lateral-badge { margin-left: auto; background: var(--crit); color: var(--text-inv); font-size: var(--fs-2xs); font-weight: 700; line-height: 1; padding: 3px 7px; border-radius: var(--r-full); } /* ---------- Pie / boton de contraer y conmutador de tema ---------- */ .lateral-pie { border-top: 1px solid var(--border); padding: var(--s2); } .lateral-tema, .lateral-toggle { display: flex; align-items: center; gap: var(--s3); width: 100%; padding: var(--s2) var(--s3); background: none; border: none; border-radius: var(--r-sm); color: var(--text-2); font-family: inherit; font-size: var(--fs-sm); cursor: pointer; white-space: nowrap; } .lateral-tema:hover, .lateral-toggle:hover { background: var(--surface-2); color: var(--text); } /* El area de toque del conmutador es de 44px en las tres formas del shell: es un control que se pulsa, no un rotulo. */ .lateral-tema { min-height: var(--tap); } /* ---------- Contraida a 64px ---------- */ .lateral-colapsada .app { grid-template-columns: var(--ancho-lateral-min) minmax(0, 1fr); } .lateral-colapsada .lateral-txt, .lateral-colapsada .lateral-marca-txt, .lateral-colapsada .lateral-titulo { display: none; } .lateral-colapsada .lateral-marca, .lateral-colapsada .lateral-enlace, .lateral-colapsada .lateral-tema, .lateral-colapsada .lateral-toggle { justify-content: center; padding-left: 0; padding-right: 0; } .lateral-colapsada .lateral-grupo { margin-bottom: var(--s3); } /* Sin titulos de grupo, una linea separa las secciones */ .lateral-colapsada .lateral-grupo + .lateral-grupo { border-top: 1px solid var(--border); padding-top: var(--s3); } .lateral-colapsada .lateral-badge { position: absolute; margin: -18px 0 0 18px; padding: 2px 5px; font-size: var(--fs-3xs); } .lateral-colapsada .lateral-enlace { position: relative; } /* ---------- Barra superior con la lateral puesta ---------- */ /* La marca ya vive en la barra lateral: aqui sobra y su lugar lo ocupa la miga de pan, que es lo que responde "donde estoy". */ .topbar .marca { display: none; } .topbar .miga { display: flex; margin-bottom: 0; flex: 1; } .topbar { position: sticky; top: 0; z-index: calc(var(--z-nav) - 1); } /* El contenido puede respirar: 1100px dejaba media pantalla vacia en un monitor de 1440. */ .contenido { max-width: var(--ancho-contenido-amplio); } } /* ===================================================================== 16. MOVIMIENTO REDUCIDO --------------------------------------------------------------------- Hoy casi no hay animaciones, pero las Etapas 7 y 8 las agregan. La regla queda puesta desde ahora para que nazcan ya respetando la preferencia del sistema operativo del usuario. ===================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } /* Poner la duracion a .01ms no cancela un transform: solo hace que ocurra de golpe. Una tarjeta que salta al pasar el raton sigue siendo movimiento para quien pidio que no lo hubiera. */ a.metrica:hover, .lp-beneficio:hover, .tarjeta:hover { transform: none !important; } } /* ===================================================================== 17. IMPRESION ===================================================================== */ @media print { .topbar, .nav, .lateral, .btn, .aviso { display: none !important; } .app { display: block !important; } body { background: #fff; color: #000; } .contenido { padding: 0; max-width: 100%; } .tarjeta, .tabla-wrap { border: 1px solid #ccc; box-shadow: none; } } /* ===================================================================== 18. PANTALLAS CON NECESIDADES PROPIAS (Etapa 5) --------------------------------------------------------------------- Estas reglas vivian dentro de un