/* ============================================================================
 * Autor: Marcelo Alejandro Zúñiga Reátegui
 * Proyecto: LILBRU
 * Módulo: Estilos generales y jerarquía de títulos
 * Fecha/Hora: 2026-09-15 15:46:41 -03:00
 * Versión: 1.2.0
 * Aviso Legal: Código de propiedad exclusiva. Prohibida su reproducción o distribución sin autorización.
 * ============================================================================ */
/* LILBRU — demo Stromwork */

/* ================= LA TIPOGRAFÍA =================
   Archivo, servida DESDE EL REPO. Nunca por CDN: es una regla dura del
   proyecto —nada remoto en runtime— y acá vale doble, porque una fuente que
   llega por red ajena es una pantalla sin texto el día que esa red falla,
   delante de un prospecto.

   Antes era Segoe UI, que es la fuente DE WINDOWS: correcta, gratis y de
   nadie. Se ve bien y no se ve tuya — y encima en una Mac o un Android la app
   ya se veía distinta, porque ahí Segoe no existe. Archivo la fija: la misma
   letra en toda máquina.

   ⭐ ARCHIVO Y NO INTER, elegida mirando las tablas de verdad (2-ago-2026).
   Inter es la que usa medio internet: cada ola de interfaces hechas con IA
   converge en la misma media docena de caras, y una fuente de todos no le da
   carácter a nadie. Archivo es una grotesca de presencia, pensada para
   densidad — dice "taller", que es donde esto se va a usar. Su altura de x
   queda a 4% de la de Inter, así que la rampa de tamaños no se movió, y llega
   a 900 de peso: los 800 de los KPI son de verdad.

   ⭐ SOLO EL SUBCONJUNTO LATINO: 34 KB para los pesos 100 a 900 en un archivo
   variable. Una ferretería de barrio no abre esto por fibra. Verificado que
   trae acentos, ñ, ¿, ¡, º y €: si le faltara un glifo el navegador lo sacaría
   de otra fuente y el texto quedaría mezclado.

   `font-display: swap` a propósito: primero se lee con la del sistema y
   después cambia. Un texto que tarda en aparecer es peor que uno que cambia
   de letra una vez. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;   /* variable: los pesos salen de un solo archivo */
  font-display: swap;
  src: url('tipografia/archivo-100-900.woff2') format('woff2');
}


/* ================= TEMAS =================
   El tema cambia el CARÁCTER (color de marca, fondo, esqueleto del menú), no
   la estructura. Los colores del semáforo (rojo/ámbar/verde) NO se tocan: son
   funcionales, significan lo mismo en cualquier tema.
   - "clásico": el original (verde pizarra).
   - "inventario": paleta de gestión de stock (slate + verde).
   - "ferreteria": paleta de construcción (acero + naranja de seguridad).
   Se elige desde el menú y se recuerda por navegador.
   Las dos nuevas vienen con su marca ya oscurecida a un tono que da 4.5:1 con
   texto blanco: el naranja de catálogo (#EA580C) está pensado para bordes y
   acentos, no para un botón con texto encima. */
/* LILBRU: la identidad propia. Los verdes salen del logo — el de la ruta
   (#16a75c) y el lima del nodo (#b9ce1f) son de acento: ninguno de los dos
   llega a 4.5:1 con texto blanco encima, así que la marca de botones y menú
   activo usa el verde bosque del texto del logo, que sí pasa. */
/* ⭐⭐ EL VERDE DE MARCA SE CORRE A TEAL, y no es capricho: es lo que le
   devuelve el significado al semáforo.
   La marca estaba en #17503a — tono 157° — y el verde de "OK" del semáforo
   está en 143°. CATORCE grados de distancia: un botón de marca al lado de una
   insignia OK se leían del mismo color, y entonces el verde dejaba de querer
   decir "está bien" para pasar a querer decir "es de la app".
   Teal #0f766e está a 32° del OK — más del doble de distancia — y da 5,47:1
   con texto blanco, así que sí puede llevar un botón. Sigue siendo la familia
   del logo, corrida hacia el azul.
   REGLA: el verde amarillento es del SEMÁFORO. La marca vive en el teal. */
:root[data-tema="lilbru"] {
  /* El papel se entibia un punto: #f7f8f4 tenía un dejo verdoso que en pantalla
     grande se leía como enfermizo. */
  --fondo: #f6f7f5;
  --tarjeta: #ffffff;
  --tinta: #12312c;
  --tinta-suave: #5a6b67;
  --borde: #e2e7e3;
  --marca: #0f766e;
  --marca-claro: #e6f4f1;
  /* El borde de una superficie tintada. Es la marca al 30% sobre su propio
     tinte: un gris neutro al lado del tinte se lee como suciedad. */
  --marca-borde: #a6ceca;
  /* El lateral deja de ser casi negro. Antes iba de #17503a a #0e3a2a — tan
     oscuro que la app arrancaba con una franja de luto a la izquierda.
     Ahora es teal, y el degradado se eligió MIDIENDO: manda el tono más claro,
     porque si el texto pasa arriba pasa en todo el resto. Con #115e59 arriba
     los enlaces del menú dan 5,8:1 y los grises 5,0:1. Un teal más vivo (#0f766e)
     se veía mejor y dejaba los grises en 3,2:1 — ilegible. Gana el que se lee. */
  --lateral-1: #115e59;
  --lateral-2: #0f4f4a;
  --lateral-3: #0d423f;
  --acento-ruta: #16a75c;
  --acento-nodo: #b9ce1f;
}
/* El lima del logo aparece SOLO como marca de "acá estás": es el nodo
   encendido de la ruta, la misma idea del isotipo. */
:root[data-tema="lilbru"] .menu a.activo { box-shadow: inset 3px 0 0 var(--acento-nodo); }
/* El lima del logo (#b9ce1f) da 4,30:1 sobre el teal — casi, pero no. Como
   TEXTO usa una versión un punto más clara; como MARCADOR (la barra del menú
   activo, que no lleva texto) sigue el lima exacto del logo. Es la misma idea
   de siempre: el color que se lee y el color que señala no tienen por qué ser
   el mismo valor. */
:root[data-tema="lilbru"] .lateral-pie strong { color: #c9de3a; }
:root[data-tema="lilbru"] .marca-nombre { letter-spacing: 1.5px; }

:root[data-tema="inventario"] {
  --fondo: #f8fafc;
  --tarjeta: #ffffff;
  --tinta: #0f172a;
  --tinta-suave: #64748b;
  --borde: #e6e8ea;
  --marca: #334155;
  --marca-claro: #e9edf2;
  --marca-borde: #b2b9c3;
  --lateral-1: #1e293b;
  --lateral-2: #0f172a;
  --lateral-3: #14293f;
}
:root[data-tema="ferreteria"] {
  --fondo: #f8fafc;
  --tarjeta: #ffffff;
  --tinta: #1e293b;
  --tinta-suave: #64748b;
  --borde: #e2e8f0;
  --marca: #c2410c;
  --marca-claro: #fdf0e8;
  --marca-borde: #ebbca6;
  --lateral-1: #27303b;
  --lateral-2: #1c242e;
  --lateral-3: #33251c;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEMAS NUEVOS (16-ago) — salir del teal, que es el uniforme del rubro.
   Marcelo vio dos publicidades de software con IA usando exactamente la misma
   paleta de LILBRU: teal oscuro sobre gris claro. Tiene razón — es la paleta
   por defecto de todo producto de software desde 2023, y parecerse a la
   competencia es lo contrario de tener marca.
   NO se eligieron al azar aunque él lo propuso: un hex aleatorio falla
   contraste y sale ilegible, y esta app mide sus ratios (ver los comentarios
   del tema LILBRU). Se eligieron tonos DELIBERADAMENTE lejos del teal y lejos
   entre sí, y cada marca se verificó contra blanco por encima de 4.5:1.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Azul Prusia. El azul de los planos y los sellos: serio sin ser corporativo
   genérico. #3730a3 da 8,6:1 con blanco. */
:root[data-tema="tinta"] {
  --fondo: #f6f7fb;
  --tarjeta: #ffffff;
  --tinta: #1b1f3b;
  --tinta-suave: #5d6285;
  --borde: #e3e5f0;
  --marca: #3730a3;
  --marca-claro: #ecebf8;
  --marca-borde: #b6b3e0;
  --lateral-1: #2a2570;
  --lateral-2: #201c56;
  --lateral-3: #191645;
}

/* Granate. Casi nadie lo usa en software y por eso se recuerda; en ferretería
   remite a hierro y ladrillo. #9f1239 da 7,6:1 con blanco. */
:root[data-tema="granate"] {
  --fondo: #faf7f7;
  --tarjeta: #ffffff;
  --tinta: #2c1219;
  --tinta-suave: #6f5259;
  --borde: #ece3e5;
  --marca: #9f1239;
  --marca-claro: #fbeaee;
  --marca-borde: #e0adba;
  --lateral-1: #6d1028;
  --lateral-2: #560c20;
  --lateral-3: #430a19;
}

/* Oliva. Verde de taller, no verde menta: el otro extremo del verde respecto
   del teal. #3f6212 da 5,9:1 con blanco. */
:root[data-tema="oliva"] {
  --fondo: #f8f9f3;
  --tarjeta: #ffffff;
  --tinta: #22280f;
  --tinta-suave: #5f6a4a;
  --borde: #e6eadc;
  --marca: #3f6212;
  --marca-claro: #eef3e2;
  --marca-borde: #bacb9b;
  --lateral-1: #3a5416;
  --lateral-2: #2c4110;
  --lateral-3: #22330c;
}

/* ── MODO OSCURO ──────────────────────────────────────────────────────────
   ⚠️ Un tema oscuro NO es el claro con el fondo cambiado. Hay que redefinir
   también los colores del semáforo: el rojo #b91c1c y el ámbar #a04a06 están
   elegidos para leerse sobre papel blanco y sobre un fondo oscuro quedan
   ilegibles. Acá van sus versiones claras, y los fondos tintados pasan a ser
   oscuros en vez de pasteles.
   `--marca-claro` es el caso más traicionero: en los temas claros es un tinte
   casi blanco, y si se dejara así en oscuro las superficies "sutiles" saldrían
   como manchas blancas. */
:root[data-tema="grafito"],
:root[data-tema="noche"],
:root[data-tema="neon"],
:root[data-tema="brasa"],
:root[data-tema="plata"],
:root[data-tema="amaderado"] {
  /* ⭐ `color-scheme: dark` no es decorativo: es lo que hace que el NAVEGADOR
     dibuje sus propios controles en oscuro — el almanaque del campo de fecha,
     la lista desplegable de un select, las barras de scroll. Sin esto la app
     queda oscura pero al tocar una fecha se abre un calendario blanco, y el
     iconito del almanaque sale negro sobre fondo negro. Eso es lo que se veía
     en la captura de Reportes. */
  color-scheme: dark;
  --alerta: #fbbf24;
  --alerta-fondo: #3a2c08;
  --rojo: #f87171;
  --rojo-fondo: #3d1717;
  --ok: #4ade80;
  --ok-fondo: #102c1b;
  --azul: #93c5fd;
  --azul-fondo: #1e3a8a;
  --violeta: #c4b5fd;
  --sobre-violeta: #1e1033;
  --sobre-rojo: #1f0606;
  --velo-modal: rgba(0, 0, 0, .62);
  --sombra-modal: 0 18px 55px rgba(0, 0, 0, .55);
}

/* Grafito: el oscuro neutro, con ámbar de taller como marca. */
:root[data-tema="grafito"] {
  --sobre-marca: #15181c;
  --fondo: #15181c;
  --tarjeta: #1d2126;
  --tinta: #e8ebee;
  --tinta-suave: #9aa3ad;
  --borde: #2c323a;
  --marca: #d97706;
  --marca-claro: #33240f;
  --marca-borde: #6b4a13;
  --gris-fondo: #23282e;
  --lateral-1: #101317;
  --lateral-2: #0b0d10;
  --lateral-3: #16191d;
}

/* Noche: azul profundo, el más sobrio de los cuatro. */
:root[data-tema="noche"] {
  --sobre-marca: #0f172a;
  --fondo: #0f172a;
  --tarjeta: #1a2338;
  --tinta: #e6ecf7;
  --tinta-suave: #94a3c4;
  --borde: #2a3550;
  --marca: #60a5fa;
  --marca-claro: #1b2c4d;
  --marca-borde: #35507f;
  --gris-fondo: #202b45;
  --lateral-1: #0b1224;
  --lateral-2: #070c19;
  --lateral-3: #101a33;
}

/* Neón: el que pidió Marcelo. Cian eléctrico sobre casi negro.
   ⚠️ El cian #22d3ee es brillante pero CLARO: sobre él el texto va en tinta
   oscura, no en blanco — por eso lleva su propia regla más abajo. Es el precio
   de un neón de verdad; si se oscureciera para poder llevar texto blanco,
   dejaría de ser neón. */
:root[data-tema="neon"] {
  --sobre-marca: #0a0a12;
  --fondo: #0a0a12;
  --tarjeta: #13131f;
  --tinta: #e9e9f5;
  --tinta-suave: #9a9ab8;
  --borde: #26263a;
  --marca: #22d3ee;
  --marca-claro: #0d2a33;
  --marca-borde: #1c5a68;
  --gris-fondo: #1a1a29;
  --lateral-1: #0d0d18;
  --lateral-2: #08080f;
  --lateral-3: #141428;
}

/* Brasa: oscuro cálido, como el taller de noche. */
:root[data-tema="brasa"] {
  --sobre-marca: #17100f;
  --fondo: #17100f;
  --tarjeta: #211717;
  --tinta: #f1e6e3;
  --tinta-suave: #b09a95;
  --borde: #352624;
  --marca: #fb7185;
  --marca-claro: #38181f;
  --marca-borde: #7a3540;
  --gris-fondo: #281c1b;
  --lateral-1: #140d0c;
  --lateral-2: #0d0807;
  --lateral-3: #1e1211;
}

:root[data-tema="plata"] {
  --sobre-marca: #191d22;
  --fondo: #191d22;
  --tarjeta: #242a31;
  --tinta: #eef1f5;
  --tinta-suave: #b1bac5;
  --borde: #46515e;
  --marca: #c4cdd8;
  --marca-claro: #323c48;
  --marca-borde: #7b899b;
  --gris-fondo: #2c333d;
  --lateral-1: #303945;
  --lateral-2: #202730;
  --lateral-3: #151a20;
}

:root[data-tema="amaderado"] {
  --sobre-marca: #241a15;
  --fondo: #211a16;
  --tarjeta: #30251f;
  --tinta: #f3e9df;
  --tinta-suave: #c4b2a3;
  --borde: #614d40;
  --marca: #d6b28f;
  --marca-claro: #453328;
  --marca-borde: #a17d5e;
  --gris-fondo: #392d25;
  --lateral-1: #493426;
  --lateral-2: #32231b;
  --lateral-3: #211812;
}

:root {
  /* Glifos de ícono (la × de cerrar, el ⌄ del acordeón). Van como variable
     y no como número suelto porque NO son tipografía: su tamaño lo manda el
     área de toque, no la rampa de lectura. Ver `iconos` en DESIGN.md. */
  /* ⭐ El color del texto que va ENCIMA de la marca. En los temas claros la
     marca es oscura y el texto va blanco; en los oscuros la marca es clara
     (tiene que serlo, si no desaparece contra el fondo) y el texto encima
     tiene que ir oscuro. Sin este token, los temas oscuros daban 2,5:1 en los
     chips del ABC — ilegible. Se midió, no se estimó. */
  --sobre-marca: #ffffff;
  --glifo-inline: 20px;
  --glifo-control: 28px;
  /* Velo y sombra del modal: verde tinta de la marca, no gris ni negro. El
     modal es una de las dos superficies de verdad elevadas de la app. */
  --velo-modal: rgba(13, 31, 25, .5);
  --sombra-modal: 0 18px 55px rgba(8, 27, 20, .28);
  --fondo: #f4f6f8;
  --tarjeta: #ffffff;
  --tinta: #1c2733;
  --tinta-suave: #5b6b7a;
  --borde: #e3e8ee;
  --marca: #0f6b5c;
  --marca-claro: #e6f2ef;
  --marca-borde: #a6cac3;
  --lateral-1: #16222e;
  --lateral-2: #1c2733;
  --lateral-3: #123a32;
  /* verde y ámbar un punto más oscuros: sobre el gris de fondo daban 4.4:1
     y la norma de legibilidad pide 4.5:1 (hallazgo del detector) */
  --alerta: #a04a06;
  --alerta-fondo: #fef3c7;
  --rojo: #b91c1c;
  --rojo-fondo: #fee2e2;
  --ok: #116b33;
  --ok-fondo: #dcfce7;
  --gris-fondo: #eef1f4;
  /* Pulido 17-oct (catálogo y ficha): los dos estados que no son del semáforo tienen color propio y fijo, para que
     ningún estilo los confunda con el rojo, el ámbar o la marca: azul «sobre el máximo», violeta «revisar». */
  --azul: #1d4ed8;
  --azul-fondo: #dbeafe;
  --violeta: #6d28d9;
  --sobre-violeta: #ffffff;
  --sobre-rojo: #ffffff;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  /* La cascada queda entera detrás: si el archivo no cargó, el texto se lee
     igual con la del sistema. Una app de inventario no puede quedarse muda por
     una fuente. */
  font-family: 'Archivo', "Segoe UI", system-ui, -apple-system, sans-serif;
  /* `tnum` acá arriba deja los números alineados en TODA la app sin tener que
     acordarse celda por celda (las reglas que ya lo pedían siguen, no
     molestan). En Archivo NO es opcional: sin esto el 1 es más angosto que el
     8 y una columna de cifras se mueve sola —"111" mide 62px donde "888" mide
     69px, medido—. Antes había también 'cv05' y 'cv08': eran variantes de
     carácter de Inter y en Archivo no hacen nada. */
  font-feature-settings: 'tnum' 1;
  background: var(--fondo);
  color: var(--tinta);
  font-size: 15px;
}
a { color: var(--marca); text-decoration: none; }
a:hover { text-decoration: underline; }


/* El menú lateral es fixed (232px), así que el contenido vive en lo que queda.
   Con margin-left fijo el contenido se pegaba a la izquierda y en monitores
   anchos sobraba media pantalla vacía: el calc lo CENTRA en el área restante
   (nunca menos de los 232px del menú) y el ancho máximo sube a 1440. */
main {
  --lateral: 232px;
  --ancho-max: 1440px;
  max-width: var(--ancho-max);
  margin-left: calc(var(--lateral) + max(0px, (100vw - var(--lateral) - var(--ancho-max)) / 2));
  margin-right: auto;
  padding: 20px 26px 60px;
}

/* ---- menú lateral (esqueleto de sistema) ---- */
.lateral {
  position: fixed; top: 0; left: 0; bottom: 0; width: 232px; z-index: 20;
  background: linear-gradient(180deg, var(--lateral-1) 0%, var(--lateral-2) 55%, var(--lateral-3) 100%);
  color: #fff; display: flex; flex-direction: column; gap: 20px;
  padding: 20px 14px; box-sizing: border-box;
  border-right: 2px solid var(--marca);
}
.marca-logo { display: block; width: 76px; height: auto; }
.marca-nombre { font-weight: 800; font-size: 18px; margin-top: 6px; letter-spacing: 1.2px; }
/* (.marca-tag se eliminó: el lema bajo el logo salió de todas las pantallas, así
   que su regla quedaba como CSS muerto) */
.menu { display: flex; flex-direction: column; gap: 4px; }
.menu a { color: #d3e6e1; padding: 10px 12px; border-radius: 8px; font-size: 14px; transition: background .15s, color .15s; }
.menu a:hover { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }
.menu a.activo { background: var(--marca); color: var(--sobre-marca); font-weight: 700; }
/* Parte C: cascada. El módulo abierto muestra sus pestañas escalonadas debajo; la pestaña actual es la marcada. */
.menu-modulo { display: flex; flex-direction: column; gap: 2px; }
.menu-modulo.abierto > a.activo { background: rgba(255, 255, 255, .10); color: #fff; }
.menu-sub { display: flex; flex-direction: column; gap: 2px; margin: 0 0 4px 12px; padding-left: 8px; border-left: 2px solid rgba(255, 255, 255, .18); }
.menu-sub a { font-size: 13px; padding: 7px 10px; }
/* Limpieza de navegación (Marcelo, 22-oct): en la computadora el menú en cascada ya muestra las pestañas del módulo, así
   que la barra de arriba no va. En el celular el menú vive plegado detrás del botón «Menú» y esta barra es la navegación
   de un toque dentro del módulo: ahí se queda tal como funciona hoy. */
@media (min-width: 1041px) { .procesos-modulo { display: none; } }
.procesos-modulo {
  --lateral: 232px;
  --ancho-max: 1440px;
  max-width: var(--ancho-max);
  margin: 0 auto 0;
  margin-left: calc(var(--lateral) + max(0px, (100vw - var(--lateral) - var(--ancho-max)) / 2));
  padding: 18px 26px 0;
  box-sizing: border-box;
}
.procesos-modulo-area {
  color: var(--tinta); font-size: 16px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px;
}
.procesos-modulo-nav {
  display: flex; gap: 4px; overflow-x: auto; padding-bottom: 8px;
  border-bottom: 1px solid var(--borde); scrollbar-width: thin;
}
.procesos-modulo-nav a {
  flex: 0 0 auto; color: var(--tinta-suave); font-size: 15px; font-weight: 600;
  padding: 12px 14px; border-radius: 6px; text-decoration: none;
}
.procesos-modulo-nav a:hover { color: var(--tinta); background: var(--gris-fondo); }
.procesos-modulo-nav a.activo { color: var(--marca); background: var(--marca-claro); font-weight: 700; }

/* Grises del menú lateral aclarados: tienen que leerse sobre CUALQUIERA de los
   cuatro degradados de tema, no solo sobre el más oscuro. */
.lateral-pie { margin-top: auto; color: #d3e6e1; font-size: 12px; display: flex; flex-direction: column; gap: 10px; }
.lateral-pie strong { color: #b6ecdd; }
/* El encabezado de la pantalla. Antes era una línea gris en cursiva de 15px y
   se perdía: es lo primero que se lee al entrar, así que pesa como título
   (22px, un escalón sobre el título de tarjeta). La fecha va en la misma línea
   pero en tinta suave — acompaña, no compite. */
/* ⭐⭐ UN SOLO TÍTULO, Y QUE SE NOTE QUE ES EL TÍTULO.
   Estaba en 22px/700 mientras los títulos de tarjeta van en 18px/700: apenas
   1,22× de diferencia y el MISMO peso. Medido, no a ojo. Con esa distancia el
   encabezado de la pantalla no se lee como encabezado, se lee como una tarjeta
   más que quedó arriba — y la página entera se siente plana.
   A 30px el salto queda en 1,67×, que es donde la jerarquía se ve sin pensarla.
   30px ya existe en la rampa (era el escalón de `dato-grande`): mismo cuerpo,
   otro rol, que es como esta rampa nombra desde siempre.
   El letter-spacing se cierra un poco más: a tamaños grandes el texto se abre
   solo y sin esto se ve suelto. */
.pagina-titulo {
  font-size: 30px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.15;
  color: var(--tinta); margin: 0 0 18px;
}
/* La fecha ACOMPAÑA al título, no compite: cuerpo base (15px), tinta suave y
   peso normal.
   Se probó en 16px porque "al lado de un título de 30 se veía chica", y 16px
   NO está en la rampa. Ese es exactamente el drift que la rampa existe para
   frenar, y lo cazó el detector en la misma pasada que iba a ordenar la
   tipografía. Queda en 15px: si de verdad hiciera falta un escalón ahí, se
   agrega a DESIGN.md a propósito, no por cómo se ve una tarde. */
@media (max-width: 900px) {
  /* Un título de 30px en pantalla angosta se come tres renglones: baja un
     escalón de la rampa, no a un valor inventado. */
  .pagina-titulo { font-size: 22px; letter-spacing: -0.2px; }
}

/* El botón de menú no existe en la compu: ahí la barra lateral está siempre
   abierta y las áreas disponibles se ven de una. */
.menu-boton { display: none; }

@media (max-width: 1040px) {
  .lateral {
    position: static; width: auto; flex-direction: row; align-items: center;
    flex-wrap: wrap; gap: 8px 14px; padding: 12px 14px; border-right: 0;
    border-bottom: 2px solid rgba(15, 107, 92, .5);
  }
  .marca-logo { width: 46px; display: inline-block; vertical-align: middle; }
  .marca-nombre { display: inline; font-size: 15px; margin: 0 0 0 4px; }
  .menu a { padding: 7px 9px; font-size: 13px; }
  .lateral-pie { margin: 0 0 0 auto; flex-direction: row; align-items: center; gap: 8px; }
  /* El "una herramienta de Stromwork" sí se va: es firma, no navegación. Se
     apunta al div que la contiene, NO a todo div del pie — la tuerca también
     vive en un div y ese tiene que quedarse. */
  .lateral-pie > div:not(.tema-caja) { display: none; }
  main, footer.pie { margin-left: 0; }
  .procesos-modulo { margin-left: 0; padding: 12px 14px 0; }

  /* ⭐ EL MENÚ COLAPSA (22-ago). Los enlaces sueltos se envolvían en tres
     renglones y se comían ~150px de alto ANTES del primer dato: en un celular
     eso es media pantalla gastada en navegación que casi nunca se toca.
     Ahora vive detrás del botón, y al abrirse baja en columna —no en filas
     envueltas— porque en el dedo cada destino tiene que ser una línea propia. */
  .menu-boton {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 11px; font-size: 13px; font-weight: 700;
    background: rgba(255, 255, 255, .08); color: #d3e6e1;
    border: 1px solid transparent; border-radius: 8px; min-height: 0;
  }
  .menu-boton:hover { background: rgba(255, 255, 255, .18); box-shadow: none; filter: none; }
  .menu-boton svg { flex: 0 0 auto; }
  .lateral .menu { display: none; }
  .lateral.menu-abierto .menu {
    display: flex; flex-direction: column; gap: 2px;
    flex-basis: 100%; order: 9; margin-top: 4px;
  }
  .lateral.menu-abierto .menu a { padding: 11px 12px; font-size: 15px; }
  .lateral.menu-abierto .menu-sub a { padding: 9px 12px; font-size: 14px; }
  /* Parte C (feedback A y M): en el celular la barra de pestañas es una sola línea, sin el rótulo del módulo (la cascada
     del menú ya lo dice), para que la lista llegue antes. */
  .procesos-modulo-area { display: none; }
}


.tarjeta {
  /* la banda del título se cuelga de este valor con margen negativo: si el
     padding cambia (móvil), la banda tiene que seguirlo o se desborda */
  --pad-tarjeta: 20px;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: var(--pad-tarjeta);
  margin-bottom: 24px;
}
/* El título es la pregunta que el dueño se hace; el subtítulo aclara el
   período o el detalle técnico sin robarle protagonismo. 18px con tracking
   apenas negativo: un escalón claro sobre el cuerpo de 14 (jerarquía del
   DESIGN.md; antes 17 quedaba pegado al dato fuerte). */
.tarjeta h2 { margin: 0 0 2px; font-size: 18px; letter-spacing: -0.2px; }
.sub-titulo {
  margin: 0 0 14px; font-size: 13px; color: var(--tinta-suave);
}


/* ---- Los tres KPI de la pantalla de Vender ----
   Iban los tres en blanco y gris, todos iguales: había que leer el rótulo
   para saber cuál era la plata del día. Con una franja de color arriba y el
   rótulo teñido, cada uno se reconoce de un vistazo. El verde es la plata que
   entró (mismo significado que en toda la app), el teal de marca es el
   movimiento de mercadería y el ámbar el acumulado de la semana. */


/* ⚠️ EL `hidden` TIENE QUE GANARLE A CUALQUIER `display` DE AUTOR.
   `hidden` es un `display:none` del navegador, así que basta con que una regla
   nuestra diga `display: inline-block` para que el elemento siga viéndose con
   el atributo puesto. Pasó de verdad: el badge "obligatorio" del RUC convivía
   en pantalla con el "— opcional" que debía reemplazarlo, y la pantalla decía
   las dos cosas a la vez. Va acá arriba, una vez, para todo el sitio. */
[hidden] { display: none !important; }

/* El corte entre el encabezado del documento (a quién) y su detalle (qué).
   Un divisor de 1px y no más aire: acá los dos bloques SÍ son partes de la
   misma tarjeta, y separarlos con espacio los haría leer como dos tarjetas
   pegadas. */

.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
/* ESCALERA DE URGENCIA (29-jul). PEDIR YA y acercándose compartían el mismo
   ámbar y se leían idénticos en el tablero, que es justo donde el dueño barre
   la columna sin leer. Ahora los tres peldaños se separan por RELLENO:
     · QUEBRADO    → rojo sólido, letra blanca (el único relleno de la app).
     · PEDIR YA    → rojo suave con filo rojo de 1px.
     · ACERCÁNDOSE → ámbar suave, sin filo.
   El filo va con box-shadow inset y no con border: un border sumaría 2px de
   alto y descuadraría las filas de la tabla compacta.
   Se probó PEDIR YA en ámbar sólido para alejarlo por color del QUEBRADO;
   Marcelo eligió quedarse con el filo. La distancia entre esos dos la carga
   entonces el TINTE DE LA FILA (ámbar vs rojo), no la pastilla — por eso los
   dos tintes de fila de más arriba no se tocan sin revisar esto. */
.badge.pedir { background: var(--rojo-fondo); color: var(--rojo); font-weight: 700; box-shadow: inset 0 0 0 1px var(--rojo); }
.badge.acercandose { background: var(--alerta-fondo); color: var(--alerta); }
.badge.ok { background: var(--ok-fondo); color: var(--ok); }
.badge.sin { background: var(--gris-fondo); color: var(--tinta-suave); }


/* ---- LOGIN ---- */
/* La puerta usa la misma paleta oscura del sidebar: es la primera pantalla
   que ve un prospecto y tiene que oler a la misma app, no a un formulario
   pegado de otro lado. */
.cuerpo-login {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px; background: var(--fondo);
}
.login-caja { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 14px; }
.login-marca { text-align: center; margin-bottom: 4px; }
.login-marca .marca-nombre { font-size: 26px; }
.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-form h2 { margin: 0; }
/* El pie global se corre 232px para dejarle lugar al sidebar — acá no hay
   sidebar, así que sin esto queda colgado abajo a la derecha. */
.cuerpo-login footer.pie { margin-left: 0; }
/* Lo mismo con la caja de la entrada: es un <main> y heredaba el margen de 232px del menú, así que quedaba corrida a
   la izquierda del centro en PC (pulido 1; sin el bloque de la demo al lado, se notaba más). */
.cuerpo-login main.login-caja { margin-left: auto; margin-right: auto; }

/* ---- DÓNDE VAS A TRABAJAR (traspaso 21) ---- */
/* Una opción por empresa o sede, grande y fácil de tocar; la actual se marca. */
.login-opciones { display: flex; flex-direction: column; gap: 8px; }
.login-opciones button {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; min-height: 48px; text-align: left;
}
.login-opciones button .login-opcion-actual { font-size: 12px; font-weight: 600; color: var(--marca); }
.login-opciones button[aria-current="true"] { outline: 2px solid var(--marca-borde); outline-offset: -2px; }
.login-volver { align-self: flex-start; font-size: 14px; }
/* Pieza 0 (parte 2): la ayuda bajo el DNI y el código, y el enlace «Es mi primer ingreso como dueño». */
.login-ayuda { font-size: 13px; line-height: 1.4; color: var(--tinta-suave); }
.login-enlace { align-self: flex-start; background: none; border: 0; padding: 6px 0; min-height: 44px; color: var(--marca); font-size: 14px; text-decoration: underline; cursor: pointer; }
.login-enlace:hover { color: var(--tinta); }
#l-codigo-campo[hidden], .login-enlace[hidden] { display: none; }
#l-codigo { letter-spacing: .3em; }
#entrada-titulo:focus { outline: none; }
.login-volver[hidden], #entrada[hidden] { display: none; }
/* Traspaso 22: cambiar la contraseña (provisional o a pedido). */
#cambio-clave[hidden], #c-actual-campo[hidden], #form-cambio[hidden], .login-salir[hidden] { display: none; }
#cambio-clave h2:focus { outline: none; }
#cambio-texto { margin: 0; line-height: 1.45; }
.login-regla { margin: 0; font-size: 13px; line-height: 1.45; color: var(--tinta-suave); }
.login-ver { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; color: var(--tinta); cursor: pointer; }
.login-ver input { width: 20px; height: 20px; margin: 0; }
#form-cambio input[type="password"], #form-cambio input[type="text"] { min-height: 44px; }
.login-cambio-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.login-salir { background: none; border: 0; padding: 10px 0; min-height: 44px; color: var(--tinta-suave); font-size: 14px; text-decoration: underline; cursor: pointer; }
.login-salir:hover { color: var(--tinta); }

/* Avisos de contraseña al entrar (0021): «Tu contraseña se cambió el … ¿Fuiste tú?» y, al dueño, los reinicios de su empresa. */
#avisos-clave[hidden], .avisos-grupo[hidden], #avisos-botones button[hidden], #avisos-botones[hidden], #avisos-despues[hidden], #avisos-pregunta[hidden] { display: none; }
#avisos-pregunta { margin: 0; font-size: 14px; }
.avisos-grupo { display: flex; flex-direction: column; gap: 6px; }
.avisos-grupo h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--tinta-suave); }
.avisos-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--borde); }
.avisos-lista li { padding: 10px 0; border-bottom: 1px solid var(--borde); font-size: 15px; line-height: 1.45; color: var(--tinta); }
#avisos-botones, #avisos-despues { display: flex; flex-wrap: wrap; gap: 8px; }

/* La sede de la sesión en las pantallas de la base nueva: el nombre y, si trabaja en varias, «Cambiar de sede». */
select[hidden], .sede-sesion[hidden] { display: none !important; }
.sede-sesion { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 6px; }
.sede-sesion-nombre { color: var(--tinta); }
.sede-sesion-cambiar { font-weight: 600; white-space: nowrap; }
.sede-sesion-nota { color: var(--tinta-suave); font-size: 13px; }
.sesion-sede-nueva { font-size: 12px; line-height: 1.4; color: #d3e6e1; }
.sesion-sede-nueva strong { color: #fff; }
.sesion-sede-nueva a { color: #fff; font-weight: 600; text-decoration: underline; white-space: nowrap; }

/* ---- CHIP DE SESIÓN (sidebar) ---- */
/* Quién está adentro y desde qué tienda mira. Para el dueño trae el selector
   de sede — el "ver todo / ver una" del diseño; para el mostrador es fijo:
   su tienda no se elige, se ES. */
.sesion-chip {
  margin-top: 14px; padding: 10px 12px; border-radius: 8px;
  background: rgba(255, 255, 255, .05); color: #d3e6e1; font-size: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.sesion-chip .sesion-nombre { color: #fff; font-weight: 700; font-size: 13px; }
.sesion-chip select {
  width: 100%; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08); color: #fff; font-size: 12px;
}
.sesion-chip select option { color: #12312c; background: #fff; }


/* El dato que se va a mirar primero pesa más que el resto de la fila. */

button, .boton {
  background: var(--marca); color: var(--sobre-marca); border: 0; border-radius: 8px;
  padding: 9px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: filter .15s, transform .08s, box-shadow .15s;
}
button:hover, .boton:hover { filter: brightness(1.1); box-shadow: 0 2px 10px rgba(15, 107, 92, .28); }
button:active, .boton:active { transform: scale(.97); }
button.secundario, .boton.secundario { background: var(--gris-fondo); color: var(--tinta); }
button.secundario:hover, .boton.secundario:hover { box-shadow: 0 2px 8px rgba(28, 39, 51, .15); }
a.boton { display: inline-block; text-decoration: none; }
/* Atenuado pero legible: con opacity .5 el rótulo no se alcanzaba a leer
   (contraste 1.2:1, hallazgo del detector). Gris sólido en vez de transparencia. */
button:disabled {
  opacity: 1; background: #c6d0d9; color: #3f4d5b; border-color: #c6d0d9;
  cursor: default; transform: none; box-shadow: none;
}

/* ⚠️ EL FONDO SIGUE AL TEMA, NO ES BLANCO FIJO.
   Estaba en #fff con el texto en `--tinta`. En los temas claros eso es negro
   sobre blanco y está bien; en los oscuros `--tinta` es CLARO, así que quedaba
   texto claro sobre blanco: invisible. Es lo que vio Marcelo en los campos de
   fecha de Reportes y en "Reserva para obra".
   `--tarjeta` da exactamente el mismo blanco en los temas claros (no cambia
   nada de lo que ya andaba) y el gris oscuro del tema en los oscuros. */
input, select, textarea {
  border: 1px solid var(--borde); border-radius: 8px; padding: 9px 10px;
  font-size: 15px; background: var(--tarjeta); color: var(--tinta);
}
/* El texto de ejemplo tiene que leerse como ejemplo, no desaparecer: el gris
   por defecto del navegador es casi invisible sobre un fondo oscuro. */
input::placeholder, textarea::placeholder { color: var(--tinta-suave); opacity: .8; }
input:focus, select:focus { outline: 2px solid var(--marca); border-color: var(--marca); }
/* el input de archivo hereda el ancho del nombre del archivo elegido y en
   celular desbordaba el viewport por unos px */
input[type="file"] { max-width: 100%; }
label.campo { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--tinta-suave); }

.aviso { border-radius: 8px; padding: 10px 14px; font-size: 14px; margin: 10px 0; }
.aviso.error { background: var(--rojo-fondo); color: var(--rojo); }
.aviso.exito { background: var(--ok-fondo); color: var(--ok); }
.aviso.info-btn { background: var(--marca-claro); color: var(--marca); }

/* BANNER DE INSTALAR, flotando abajo — mismo criterio que .lector-panel: en
   celular, que es donde se instala, pegado abajo es donde llega el pulgar. */
.banner-instalar {
  position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 55;
  max-width: 420px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px;
  box-shadow: 0 10px 40px rgba(28, 39, 51, .22);
  padding: 12px 14px;
}
.banner-instalar-texto { flex: 1 1 220px; font-size: 15px; color: var(--tinta); }
.banner-instalar-acciones { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.banner-instalar-btn {
  min-height: 38px; padding: 0 16px; border-radius: 8px; border: 0;
  background: var(--marca); color: var(--sobre-marca); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.banner-instalar-btn:hover { filter: brightness(1.08); }
.banner-instalar-cerrar {
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--tinta-suave); font-size: 22px; line-height: 1; cursor: pointer;
}
.banner-instalar-cerrar:hover, .banner-instalar-cerrar:focus-visible { background: rgba(0, 0, 0, .07); }

details summary { cursor: pointer; font-weight: 600; color: var(--marca); }
.suave { color: var(--tinta-suave); font-size: 13px; }
/* Los párrafos de texto corrido no se estiran a lo ancho de todo el monitor:
   más de ~80 caracteres por línea cansa la vista (hallazgo del detector). */
p.suave, p.sub-titulo, .tarjeta > p { max-width: 72ch; }

/* "¿Cambió el precio?" arranca como un enlace discreto: el 90% de los ingresos
   no cambia de precio, y un campo de plata siempre abierto invita a tipear
   cualquier cosa arriba de un dato que estaba bien. */

/* ================= EL DOCUMENTO DE LA PROFORMA =================
   Se ve como PAPEL y no como una tarjeta más de la app, a propósito: esto es lo
   único de todo el producto que sale del local y termina en la mano de un
   cliente. Si se viera igual que el resto de la pantalla, nadie entendería que
   lo que está mirando es el documento y no un resumen.
   Blanco fijo y tinta oscura, sin variables de tema: en papel no hay temas, y
   una proforma impresa en el tema "Acero" saldría naranja. */
/* El gris del papel es propio y no --tinta-suave: sobre blanco puro, y tiene
   que seguir leyéndose impreso en una láser vieja. */
.doc-sku { font-size: 12px; color: #5b6b7a; }
/* La nota se marca con una ETIQUETA, no con una barra de color al costado.
   La barra era decoración: en pantalla es el tic más reconocible de una
   interfaz hecha con IA, y en papel —donde este documento termina— una raya
   gris no dice nada. "Nota" sí. */
.doc-nota { margin-top: 14px; font-size: 13px; }
.doc-nota::before {
  content: 'Nota';
  display: block; font-size: 12px; color: #5b6b7a;
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px;
}


/* LA ACCIÓN PRINCIPAL de Ventas. Nueve de cada diez veces que se entra acá es
   para esto, así que se lleva el color de la marca y el ancho completo; las
   otras dos quedan abajo en blanco. Antes las tres eran iguales y la pantalla
   obligaba a elegir antes de hacer lo de siempre. */
.doc-principal {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  text-align: left; width: 100%; min-height: 104px;
  cursor: pointer; font: inherit; margin-bottom: 14px; padding: 24px 22px;
  background: var(--marca); color: var(--sobre-marca); border: 1px solid var(--marca);
  transition: box-shadow .15s, filter .15s;
}
.doc-principal:hover { filter: brightness(1.06); box-shadow: 0 4px 14px rgba(15, 107, 92, .28); }
.doc-principal:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }


/* EL TICKET: angosto (80mm) porque esa es la medida de las impresoras térmicas
   de mostrador. En una A4 igual se lee, centrado. */
@page ticket { size: 80mm auto; margin: 4mm; }
@page documento { size: A4; margin: 16mm; }


/* ---- pedidos ---- */
/* Al abrir historial, las filas nuevas no caen de golpe sobre la lectura:
   entran en una secuencia corta que deja claro dónde continúa el kardex. */


/* Leyenda del comparativo: la muestra es un trocito de la MISMA línea del
   gráfico (sólida o punteada), no un cuadrito de color — porque lo que
   distingue a las series acá es el trazo, no solo el color. */


/* ---- resumen del negocio (pantalla de inicio) ---- */


/* La serie de 14 días también crece cuando la tarjeta ocupa todo el ancho. */

footer.pie {
  text-align: center; color: var(--tinta-suave); font-size: 13px;
  padding: 18px 10px 26px; margin-left: 232px;
}
footer.pie strong { color: var(--marca); }

@media (max-width: 1040px) {
  main { padding: 12px 10px 40px; }
  /* En el celular el aire se paga en scroll lateral: con las 4 columnas del
     resumen, apretando un poco el padding y el nombre, la tabla entra entera
     en una pantalla de 375px y no hay que arrastrarla de lado. */
  .tarjeta { --pad-tarjeta: 14px; }
}

/* ---- Botón de información ("i" en un círculo) ----
   Reemplaza a los párrafos explicativos: la pantalla queda limpia y el que
   quiera saber, toca. El texto no desaparece, cambia de lugar. */
.info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex: 0 0 18px;
  border: 1.5px solid var(--tinta-suave); border-radius: 50%;
  color: var(--tinta-suave); background: none;
  /* La "i" va en la fuente de la app: una serif suelta solo para este glifo
     rompería la Regla de Una Sola Familia del DESIGN.md, y el círculo ya
     hace todo el trabajo de que se lea como icono. */
  font-size: 12.5px; font-weight: 700; font-style: italic;
  cursor: pointer; vertical-align: middle; margin-left: 7px;
  user-select: none; transition: color .15s, border-color .15s, background .15s;
}
.info-btn::before { content: 'i'; }
.info-btn:hover, .info-btn:focus-visible {
  color: var(--sobre-marca); background: var(--marca); border-color: var(--marca); outline: none;
}
.info-btn[aria-expanded="true"] { color: var(--sobre-marca); background: var(--marca); border-color: var(--marca); }
/* En un título grande el círculo acompaña sin competir. */
h2 .info-btn { margin-left: 9px; }

/* ⚠️ EL TEXTO DEL GLOBO SALE DE `--tarjeta`, NO ES BLANCO FIJO.
   El fondo es `--tinta` (para contrastar con la página) y el texto estaba en
   #fff. En los temas claros la tinta es oscura y funciona; en los oscuros la
   tinta es CLARA, así que quedaba globo claro con letra blanca: ilegible.
   `--tarjeta` es lo contrario de `--tinta` en los dos casos, así que el globo
   siempre queda invertido respecto de la página, que es su razón de ser. */
.info-globo {
  position: absolute; z-index: 950;
  background: var(--tinta); color: var(--tarjeta);
  border-radius: 10px; padding: 12px 14px;
  font-size: 13.5px; line-height: 1.5; font-weight: 400;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
}
.info-globo strong { color: var(--tarjeta); }
.info-globo::before {
  content: ''; position: absolute; top: -7px; left: var(--flecha, 20px);
  margin-left: -7px; border: 7px solid transparent;
  border-bottom-color: var(--tinta); border-top: 0;
}
.info-globo.arriba::before {
  top: auto; bottom: -7px;
  border: 7px solid transparent; border-top-color: var(--tinta); border-bottom: 0;
}

/* ---- Tabla de datos del tablero ----
   Lo que la vuelve una tabla "de sistema" y no de página web: encabezado que
   no se va al hacer scroll, columnas que ordenan, y un pie con los totales de
   lo que se está viendo en ese momento. */


/* El "zoom" al elegir una zona: no hay animación de cámara real (sería
   simular algo que no existe), así que la sensación de "llegaste" la da un
   destello breve en la tarjeta de la tabla a la que se hizo scroll. */


/* ---- Selector de tema (menú lateral) ---- */
/* ---- selector de estilo: una tuerca, no once botones ----
   Con cuatro temas la fila entraba; con once se comía el pie del menú y
   empujaba el chip de sesión fuera de la vista. Ahora es una tuerca que abre
   un panel, con los temas separados por modo (Claro / Oscuro), que es lo
   primero que uno decide. */
.tema-caja { position: relative; margin-bottom: 8px; }
.tema-tuerca {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 6px 9px; font-size: 12px; font-weight: 600;
  background: rgba(255, 255, 255, .08); color: #d3e6e1;
  border: 1px solid transparent; border-radius: 8px; min-height: 0;
}
.tema-tuerca:hover { background: rgba(255, 255, 255, .18); box-shadow: none; filter: none; }
.tema-tuerca svg { flex: 0 0 auto; }
/* El modal de Ajustes es angosto a propósito: es un panel de preferencias, no
   una pantalla de datos. El .modal general va a 940px y acá sobraría medio
   ancho vacío. */
/* `.modal.ajustes-modal` y no `.ajustes-modal` a secas: `.modal` general vive
   más abajo en el archivo y con la misma especificidad ganaba por orden, así
   que el panel salía a 940px. */
.modal.ajustes-modal { width: min(460px, 100%); padding: 22px; }
.ajustes-titulo { margin: 0 0 4px; font-size: 20px; }
.ajustes-seccion {
  margin: 20px 0 8px; font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .5px; color: var(--tinta-suave);
}
.ajustes-nota { margin: 0 0 12px; font-size: 12px; }
.ajustes-acciones { display: flex; flex-direction: column; gap: 8px; }
.ajustes-accion {
  display: flex; flex-direction: column; gap: 2px; text-align: left; width: 100%;
  padding: 11px 13px; border-radius: 10px; text-decoration: none;
  background: var(--gris-fondo); border: 1px solid var(--borde); color: var(--tinta);
}
.ajustes-accion:hover { background: var(--marca-claro); text-decoration: none; box-shadow: none; filter: none; }
.ajustes-accion-tit { font-size: 14px; font-weight: 700; color: var(--tinta); }
.ajustes-accion-det { font-size: 12px; color: var(--tinta-suave); }
/* Cerrar sesión lleva el rojo del semáforo porque es la única acción de este
   panel que te saca de la app: el resto solo cambia cómo se ve. */
.ajustes-salir:hover { background: var(--rojo-fondo); border-color: var(--rojo); }
.ajustes-salir:hover .ajustes-accion-tit { color: var(--rojo); }

.tema-grupo {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  color: var(--tinta-suave); margin: 2px 0 6px;
}
.tema-grupo + .tema-opciones + .tema-grupo { margin-top: 12px; }
.tema-opciones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.tema-opciones button {
  padding: 6px 4px; font-size: 12px; font-weight: 500; min-height: 0;
  background: var(--gris-fondo); color: var(--tinta);
  border: 1px solid var(--borde); border-radius: 8px;
}
.tema-opciones button:hover { background: var(--marca-claro); box-shadow: none; filter: none; }
.tema-opciones button.activo {
  background: var(--marca); color: var(--sobre-marca); border-color: var(--marca); font-weight: 700;
}
/* ⭐ EN CELULAR LA TUERCA SE QUEDA (22-ago). Antes acá había un
   `.tema-caja { display: none }` con el argumento de que "el estilo se elige
   una vez desde la compu". El argumento valía para el estilo, pero la tuerca
   dejó de ser solo el estilo: adentro también viven la guía y CERRAR SESIÓN.
   Escondiéndola, desde el celular no había forma de salir de la app.
   Y lo de "la barra ya va justa" dejó de ser cierto cuando el menú pasó a
   colapsar detrás del botón de abajo. Acá va compacta: solo el engranaje,
   sin la palabra, porque en la barra de arriba el espacio se mide en píxeles. */
@media (max-width: 860px) {
  .tema-caja { margin-bottom: 0; }
  .tema-tuerca { width: auto; padding: 7px 9px; }
  .tema-tuerca span { display: none; }
  .tema-tuerca svg { width: 18px; height: 18px; }
}

/* ⭐ SESIÓN, GUÍA Y DEMO ADENTRO DE AJUSTES EN CELULAR (22-ago, pedido de
   Marcelo: "ordenar la barra de arriba"). `#ajustes-cuenta-slot` recibe los
   nodos REALES que `tema.js` traslada al abrir el panel (mudarAdentro /
   devolverAfuera) — por eso acá solo hay que vestirlos, no reconstruirlos.
   Fondo oscuro a propósito: el chip de sesión y el aviso DEMO se diseñaron en
   blanco/verde-claro sobre el degradado del menú lateral; en un modal claro
   esos colores se leerían invisibles. */
.ajustes-cuenta { display: none; }
@media (max-width: 860px) {
  .ajustes-cuenta:not(:empty) {
    display: block; margin: 4px 0; padding: 14px 16px; border-radius: 12px;
    background: linear-gradient(180deg, var(--lateral-1) 0%, var(--lateral-2) 100%);
  }
  .ajustes-cuenta .sesion-chip { margin-top: 0; background: transparent; padding: 0; }
  /* Los originales solo se ven parqueados en el pie del menú mientras el
     panel está cerrado: `tema.js` los esconde acá y los traslada adentro en
     cuanto se abre la tuerca. */
  .sesion-chip { display: none; }
  .ajustes-cuenta .sesion-chip { display: flex; }
  /* «Cambiar mi contraseña» ya está en Mi cuenta (T3, parte B): adentro no se repite. */
  .ajustes-cuenta .sesion-clave { display: none; }
  /* Pulido del panel, parte 3: el nombre ya está arriba («quién eres»); el chip va dentro de «Tus sedes». */
  .ajustes-cuenta .sesion-nombre { display: none; }
  .ajustes-cuenta:not(:empty) { margin: 0 0 8px; padding: 10px 14px; }
}

/* T3, parte B: lo de la persona en «Mi cuenta» (sus sedes, sus permisos y su menú). */
.mi-cuenta-nombre { margin: 10px 0 0; font-size: 17px; font-weight: 700; color: var(--tinta); }
.mi-cuenta-quien { margin: 0 0 4px; font-size: 13px; color: var(--tinta-suave); }
.mi-cuenta-texto { margin: 0 0 8px; font-size: 14px; line-height: 1.45; color: var(--tinta); }
.mi-cuenta-permisos { margin: 0 0 8px; padding-left: 18px; display: grid; gap: 3px; font-size: 14px; line-height: 1.4; color: var(--tinta); }
/* Pulido del panel, parte 3: los permisos por área, cada una cerrada con su conteo y «Ver» (sin barras de color). */
.mi-cuenta-grupos { margin-bottom: 8px; border-top: 1px solid var(--borde); }
.mi-cuenta-grupo { border-bottom: 1px solid var(--borde); }
.mi-cuenta-grupo summary {
  display: flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; list-style: none;
  font-size: 14px; color: var(--tinta);
}
.mi-cuenta-grupo summary::-webkit-details-marker { display: none; }
.mi-cuenta-grupo-titulo { font-weight: 600; }
.mi-cuenta-grupo-cuenta { font-size: 13px; color: var(--tinta-suave); }
.mi-cuenta-ver { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--marca); }
.mi-cuenta-grupo .mi-cuenta-permisos { margin-bottom: 10px; }
.mi-menu { display: flex; flex-direction: column; gap: 2px; }
.mi-menu-plegado .mi-menu { padding-bottom: 10px; }
.mi-menu .tema-grupo { margin-top: 8px; }
.mi-menu-casilla { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 14px; color: var(--tinta); cursor: pointer; }
.mi-menu-casilla input { width: 20px; height: 20px; margin: 0; flex: none; }
.mi-menu-eco { margin: 6px 0; min-height: 18px; font-size: 13px; color: var(--ok); }
.mi-menu-eco:empty { min-height: 0; margin: 0; }
.mi-menu-eco.mi-menu-mal { color: var(--rojo); }
.mi-menu-guardar { align-self: flex-end; min-height: 44px; margin-top: 6px; }


/* ===========================================================================
   LA RUTA — la firma de LILBRU
   ---------------------------------------------------------------------------
   El isotipo es una ruta con nodos y uno encendido en lima. Hasta ahora esa
   idea vivía en un solo sitio: el filo del menú activo. Acá se vuelve la
   estructura del Resumen — cada pregunta es un nodo del recorrido de la
   mercadería, y se enciende el nodo que pide acción hoy.

   No es adorno: un nodo encendido significa "acá hay algo que hacer". Por eso
   el dueño puede saltar de lima en lima sin leer una sola palabra, y por eso
   una captura de esta pantalla se reconoce como LILBRU sin ver el logo.
   La ruta se dibuja con el mismo verde del isotipo; el nodo, con el lima.
   =========================================================================== */
:root { --acento-ruta: #16a75c; --acento-nodo: #b9ce1f; }

/* LA BANDA. Cada pregunta se apoya en una franja a lo ancho de su tarjeta, en
   vez de flotar sobre el blanco. Da el ritmo de color que la página no tenía
   (banda / blanco / banda al bajar) y, sobre todo, el color TRABAJA: la franja
   es ámbar cuando esa sección pide acción y verde de marca cuando solo informa.
   Así el dueño no lee siete títulos iguales — ve dónde está lo urgente. */
.tarjeta > h2 {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  margin: calc(var(--pad-tarjeta) * -1) calc(var(--pad-tarjeta) * -1) 12px;
  padding: 11px var(--pad-tarjeta) 11px calc(var(--pad-tarjeta) + 24px);
  background: var(--marca-claro);
  border-bottom: 1px solid var(--borde);
  border-radius: 10px 10px 0 0;
}

/* El tramo de ruta y el nodo van SOBRE la banda, no sobre la tarjeta blanca:
   sus grises están subidos a propósito para no desaparecer contra el tinte.
   ⭐ Bug de contraste en modo oscuro (19-ago): esto era un gris-tinta fijo
   (rgba(28,39,51,...)), pensado para la banda clara --marca-claro. En un
   tema oscuro esa banda se vuelve oscura y el puntito quedaba invisible —
   mismo patrón que ya se corrigió en otros lados de la app. */
.tarjeta > h2::before {
  content: ""; position: absolute; left: var(--pad-tarjeta); top: 50%; transform: translateY(-50%);
  width: 12px; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--tinta) 45%, transparent);
}
/* el nodo, apagado: aro sobre la banda */
.tarjeta > h2::after {
  content: ""; position: absolute; left: calc(var(--pad-tarjeta) + 9px); top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--tarjeta); border: 2px solid color-mix(in srgb, var(--tinta) 45%, transparent);
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

/* el subtítulo cuelga de la banda, no del borde de la tarjeta */
.tarjeta > h2 + .sub-titulo { margin-top: -4px; }

/* ===========================================================================
   LA LECTURA — lo que separa registrar de decidir
   ---------------------------------------------------------------------------
   Cualquier sistema muestra "malogrado: 3". Lo que hace distinto a LILBRU es
   la frase que sigue: "se te está malogrando la mercadería, no rompiéndose".
   Por eso la conclusión NO va al pie en gris chico: va arriba, es lo primero
   que se lee, y el dato se acomoda debajo.

   La regla que evita que esto se vuelva ruido: UNA lectura por tarjeta como
   máximo, y solo cuando hay algo real que decir. Un consejo que aparece
   siempre deja de leerse a la semana.
   =========================================================================== */


/* la flecha, arriba a la izquierda, apuntando a la burbuja que lo abrió */

@media (max-width: 720px) {
  /* En celular el título ya ocupa el ancho: la burbuja baja a su propia línea
     en vez de apretar la pregunta hasta partirla. */
  .tarjeta > h2 { flex-wrap: wrap; }
}


/* ===========================================================================
   LA FICHA DE PRODUCTO
   ---------------------------------------------------------------------------
   La cabecera (nombre + stock) es lo primero que se mira al entrar, y hasta
   ahora era el único bloque de la app sin un solo color: el dueño tenía que
   leer el aviso de más abajo para saber si este producto estaba bien o mal.
   Ahora la cabecera ES el estado — mismo semáforo de siempre, sin recalcular
   nada: se lee de un vistazo antes que el nombre.
   =========================================================================== */


/* Marca de período: las tarjetas que NO cambian con el mes elegido lo dicen.
   Sin esto, elegir "Junio" y ver una tabla de hoy se lee como un error. */

@media (prefers-reduced-motion: reduce) {
  .tarjeta > h2::after { transition: none; }
}


/* Fecha completa, solo en el papel — espejo de .fecha-imprimir/.sin-imprimir
   en la misma celda: cuál se ve la decide el CSS de @media print de abajo. */

@media print {
  /* ⭐ EL PAPEL SIEMPRE VA EN EL TEMA CLÁSICO, sin importar cuál esté elegido
     en pantalla (hallazgo de Marcelo: imprimió con un tema oscuro y salió
     texto casi blanco sobre hoja blanca — la regla de acá abajo ya forzaba el
     FONDO a blanco, pero la tinta, la marca y los bordes seguían siendo los
     del tema activo).
     `:root:root` empata en especificidad con `:root[data-tema="x"]` (dos
     selectores de "clase" cada uno — un pseudo-clase repetido cuenta doble) y
     como esta regla va MÁS ABAJO en el archivo que los bloques de tema, gana
     el empate. Así no hace falta repetir esto por cada tema que se agregue.
     ⚠️ Si se suma un token de color nuevo al :root de arriba, hay que copiarlo
     también acá — si no, ESE token seguiría saliendo con el color del tema
     activo en el papel. */
  :root:root {
    color-scheme: light;
    --fondo: #f4f6f8; --tarjeta: #ffffff; --tinta: #1c2733; --tinta-suave: #5b6b7a;
    --borde: #e3e8ee; --marca: #0f6b5c; --marca-claro: #e6f2ef; --marca-borde: #a6cac3;
    --sobre-marca: #ffffff; --gris-fondo: #eef1f4;
    --alerta: #a04a06; --alerta-fondo: #fef3c7;
    --rojo: #b91c1c; --rojo-fondo: #fee2e2;
    --ok: #116b33; --ok-fondo: #dcfce7;
    --azul: #1d4ed8; --azul-fondo: #dbeafe; --violeta: #6d28d9; --sobre-violeta: #ffffff; --sobre-rojo: #ffffff;
  }
  .lateral,
footer.pie { display: none !important; }
  /* Las secciones destildadas en el selector de impresión no van al papel. */
  main { margin: 0 !important; max-width: none !important; }
  body { background: #fff; }

  /* El tramo de ruta y el nodo (el "○" antes de un título de tarjeta) es un
     semáforo pensado para pantalla —dice si esa sección pide acción HOY—.
     En papel no hay "hoy": es ruido, no información. Se apaga en TODA la
     app, no solo en Reportes, porque el problema es el mismo en cualquier
     pantalla que se imprima. */
  .tarjeta > h2::before, .tarjeta > h2::after { display: none; }
  .tarjeta > h2 { padding-left: var(--pad-tarjeta); background: none; }


  /* Que ninguna tarjeta, KPI o fila de tabla quede partida a la mitad entre
     una hoja y la siguiente — es la causa más común de que un PDF se vea
     desprolijo. */
  tr { break-inside: avoid; }
}


/* ---- ventas: maqueta de OC de cliente ---- */


/* Documento de OC: toma la claridad de una orden comercial, pero habla el
   lenguaje de LILBRU. No es una factura ni un PDF: es la vista operativa desde
   la que el equipo reserva, prepara y entrega. */
.modal-velo { position:fixed; inset:0; z-index:40; display:grid; place-items:center; padding:20px; background:var(--velo-modal); overflow:auto; }
.modal { position:relative; width:min(940px, 100%); max-height:calc(100vh - 40px); overflow:auto; background:var(--tarjeta); border:1px solid var(--borde); border-radius:12px; box-shadow:var(--sombra-modal); padding:26px; }
/* ⚠️ `.modal-cerrar` es el GANCHO DE JS de todo lo que cierra el modal, y el
   pie tiene un botón de texto "Cerrar" que también lo lleva. Sin el :not(),
   ese botón heredaba `position:absolute; top:14px; right:16px` y terminaba
   apilado ENCIMA de la × en la esquina, con su texto a 28px — se veían los
   dos superpuestos. El estilo de la × va solo para la × (bug encontrado al
   pasar la hoja por la rampa tipográfica).
   La × es un GLIFO DE CONTROL, no texto: su tamaño lo manda el área de toque
   (ver `iconos` en DESIGN.md), no la rampa de lectura. */
.modal-cerrar:not(.boton-secundario) { position:absolute; top:14px; right:16px; border:0; background:transparent; color:var(--tinta-suave); font-size:var(--glifo-control); line-height:1; cursor:pointer; }
@media (max-width:640px) { .modal-velo { padding:0; align-items:end; }.modal { max-height:94vh; border-radius:12px 12px 0 0; padding:20px 14px; } }


/* Los formatos son una regla del producto, no una tarea diaria. Se dejan
   cerrados para que quien registra no toque una equivalencia por accidente. */


.negocio-identidad { font-size:12px; line-height:1.4; margin-top:6px; overflow-wrap:anywhere; }


/* Se suelta el alto fijo del cuadro con scroll propio: la tabla es una tira
   larga y se desliza la PÁGINA entera. Así no aparece la barrita de scroll
   interna, que era justo lo que no debía salir en cuadro. El encabezado
   sigue pegado arriba porque su `position: sticky` pasa a fijarse contra la
   ventana. */

html[data-navegacion="cargando"] .lateral > :not(:first-child),
html[data-navegacion="cargando"] body > main,
html[data-navegacion="cargando"] .procesos-modulo,
html[data-navegacion="cargando"] body > .pie {
  visibility: hidden !important;
}
#estado-navegacion {
  position: fixed;
  inset: 35% 24px auto;
  z-index: 100;
  text-align: center;
  color: var(--tinta);
}
#estado-navegacion p { margin: 0 auto 16px; max-width: 440px; }

/* En el celular los procesos de un área se acomodan en dos o tres renglones en vez de esconderse a la derecha (antes la barra se salía de costado y «Cargar desde Excel» no se veía). */
@media (max-width: 760px) {
  .procesos-modulo-nav { flex-wrap: wrap; overflow-x: visible; gap: 4px; padding-bottom: 4px; }
  /* Parte C: más chicas para que la lista llegue antes (siguen midiendo 44 px de alto para el dedo). */
  .procesos-modulo-nav a { padding: 10px 9px; font-size: 13px; }
  .procesos-modulo { padding-top: 6px; }
}

/* T2, parte C: el estado vacío que guía (T6). Dice qué falta y da UNA salida: el botón a la pantalla que lo resuelve
   (solo si la persona la puede abrir, tema.js › guiaVacia) o quién lo hace. Borde punteado, sin barra de color. */
.guia-vacia { margin: 12px 0 0; padding: 14px 16px; border: 1px dashed var(--borde); border-radius: 10px; background: var(--tarjeta); max-width: none; }
.guia-vacia + .guia-vacia { margin-top: 10px; }
.guia-vacia p { margin: 0; max-width: 72ch; }
.guia-vacia-titulo { font-size: 15px; font-weight: 700; color: var(--tinta); }
.guia-vacia-texto { margin-top: 4px !important; font-size: 14px; line-height: 1.45; color: var(--tinta-suave); }
.guia-vacia-quien { margin-top: 8px !important; font-size: 14px; line-height: 1.45; color: var(--tinta); }
.guia-vacia-boton { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; padding: 10px 18px; box-sizing: border-box; }

/* ── Ajuste «Personal» (2026-10-14): el término profesional, pequeño y al lado ──
   Regla de Marcelo: en pantalla va primero la palabra sencilla; si el término profesional ayuda (existencias, kardex,
   merma, RUC…), va pequeño al lado, nunca en lugar. Uso: «Lo que hay en la sede <small class="termino-pro">existencias</small>».
   Se lee «Lo que hay en la sede · existencias». Reusable en toda la app (ver PULIDOS-ANTES-DEL-PILOTO.md). */
.termino-pro { font-size: .78em; font-weight: 400; color: var(--tinta-suave); white-space: nowrap; letter-spacing: 0; text-transform: none; }
.termino-pro::before { content: "· "; }
a.activo .termino-pro, [aria-current] .termino-pro { color: inherit; opacity: .8; }
.pagina-titulo .termino-pro { font-size: .45em; vertical-align: middle; }

/* Panel mínimo, partes 3 y 4 (0036, 0037): las franjas del marco común (tema.js), arriba de toda pantalla de la app:
   «soporte de Stromwork» y «empresa de práctica». Juntas, pegadas al tope al bajar. */
.franjas { position: sticky; top: 0; z-index: 15; margin: 0 0 16px; display: grid; gap: 0; }
.franja-practica {
  padding: 8px 14px; border-radius: 0 0 10px 10px;
  background: var(--alerta-fondo); color: var(--alerta);
  border: 1px solid color-mix(in srgb, var(--alerta) 35%, transparent); border-top: 0;
  font-weight: 700; font-size: 14px; text-align: center; letter-spacing: .01em;
}
.franja-soporte {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px;
  padding: 8px 14px; border-radius: 0 0 10px 10px;
  background: var(--tinta, #16222e); color: var(--fondo, #fff);
  font-weight: 700; font-size: 14px; text-align: center; letter-spacing: .01em;
}
.franja-soporte + .franja-practica { border-radius: 0 0 10px 10px; }
.franjas .franja-soporte:not(:last-child) { border-radius: 0; }
.franja-soporte-salir {
  min-height: 32px; padding: 4px 12px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 700;
  background: transparent; color: inherit; border: 1px solid currentColor; cursor: pointer;
}
.franja-soporte-salir:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.franja-soporte-salir:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* Pulido del panel, parte 2 (0040): el soporte solo mira. La franja lo dice y los botones que cambian algo se apagan. */
.franja-soporte-modo { font-weight: 400; opacity: .9; }
body.solo-mirar [data-solo-mirar]:disabled { opacity: .55; cursor: not-allowed; }
body.solo-mirar [data-solo-mirar]::after { content: " · Solo mirar"; font-weight: 400; }

/* Panel mínimo, parte 4 (0037): la cuenta de soporte de Stromwork en «Personal» y sus ingresos. */
.cpe-soporte-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 10px; }
.cpe-ingresos { margin-top: 14px; }
.cpe-solo-lista { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.cpe-ingresos-lista { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.cpe-ingreso { padding: 10px 12px; border: 1px solid var(--borde, #d9dfdc); border-radius: 10px; background: var(--superficie, transparent); }
.cpe-ingreso p { margin: 2px 0; overflow-wrap: anywhere; }
.cpe-ingreso-cab { font-size: 14px; }

/* ── Entrega 0 (pulido del panel, parte 4): «Ver más», un solo mecanismo para toda ayuda larga ──
   Criterio 27 de Marcelo: un globo o una ayuda dicen una frase de una o dos líneas; lo largo va detrás de «Ver más»,
   que lo despliega en el mismo lugar (sin pantalla aparte ni salto) y se vuelve a cerrar con «Ver menos». Es un
   <details> del navegador: se abre con el mouse, con Enter o con la barra espaciadora, sin JavaScript.
   Marcado: <details class="ver-mas"><summary>…</summary><span class="ver-mas-resto">lo largo</span></details>
   (tema.js › verMas() lo arma; info.js lo usa en los globos «i» con `data-mas`). Sin tamaños de letra nuevos. */
details.ver-mas { display: block; margin: 2px 0 6px; font-size: inherit; line-height: inherit; color: inherit; max-width: 72ch; }
details.ver-mas > summary {
  display: inline-block; list-style: none; cursor: pointer; font-weight: 600; color: var(--marca);
  text-decoration: underline; text-underline-offset: 2px; border-radius: 4px;
}
details.ver-mas > summary::-webkit-details-marker { display: none; }
details.ver-mas > summary:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
details.ver-mas[open] .ver-mas-abrir, details.ver-mas:not([open]) .ver-mas-cerrar { display: none; }
.ver-mas-resto { display: block; margin-top: 4px; }
.info-globo .globo-corto { margin: 0; }
.info-globo details.ver-mas > summary { color: var(--tarjeta); }
.info-globo details.ver-mas > summary:focus-visible { outline-color: var(--tarjeta); }
/* Una nota o un estado vacío con «Ver más» adentro: la frase corta va en un <p> sin márgenes propios. */
.con-ver-mas > p { margin: 0; max-width: none; }
/* Entrega 0: el enlace a Personal dentro de Mi cuenta se ve como enlace. */
.mi-cuenta-enlace { color: var(--marca); text-decoration: underline; text-underline-offset: 2px; }