/* --------------------------------------------------------------------------- tokens.css — ÚNICO archivo del repo donde se declara un color literal. Todo lo demás (core.css, casos, gráficos) consume estas variables. Por qué así: el acento cambia por caso (caso.acento) y boot.js lo inyecta en :root con CSSOM. Si los colores estuvieran repartidos, reskinear un caso obligaría a tocar CSS; acá es una línea de JS. Restricción de sala: fondo CLARO y paleta pastel (pedido expreso de Fredy), legible proyectado a 1600x900 con zoom 110%. Por eso el escalón tipográfico más chico es 14px: en una pantalla grande, 11px no se lee desde la tercera fila de la sala. --------------------------------------------------------------------------- */ :root { /* Fuerza esquema claro: sin esto, un navegador en modo oscuro invierte los controles nativos (select, scrollbars) y rompe el pastel. */ color-scheme: light; /* --- superficies ------------------------------------------------------- */ --bg: #F7F8FA; --bg-2: #EFF2F8; --superficie: #FFFFFF; --superficie-2: #FAFBFD; --superficie-3: #F3F5FA; --linea: #E5E9F2; --linea-fuerte: #D2D9E8; /* --- tinta ------------------------------------------------------------- */ --tinta: #1F2430; --tinta-media: #4B5568; --tinta-suave: #78829A; --tinta-inversa: #FFFFFF; /* --- acento corporativo (inyectable por caso desde boot.js) ------------- Valor por defecto: violeta #5057A3, verificado en el Reporte Integrado Agrosuper 2025. Las cuatro derivadas las recalcula boot.js al aplicar caso.acento; acá quedan los literales del acento por defecto para que la página se vea correcta aunque el JS no llegue a correr. */ --acento: #5057A3; --acento-ink: #3D4384; --acento-suave: #EEEFF8; --acento-medio: #DCDEF1; --acento-borde: #C6C9E6; --acento-rgb: 80, 87, 163; /* --- semáforo pastel --------------------------------------------------- Cuatro piezas por tono: trazo (--x), fondo suave (--x-bg), tinta legible sobre ese fondo (--x-ink) y borde (--x-bd). La tinta NO es el trazo: el verde pastel sobre blanco no alcanza contraste AA para texto. */ --ok: #3AA981; --ok-bg: #E7F6F0; --ok-ink: #1B7A57; --ok-bd: #BEE6D5; --warn: #E0A354; --warn-bg: #FDF3E5; --warn-ink: #9C6413; --warn-bd: #F2DCB8; --risk: #DE7189; --risk-bg: #FCEBEF; --risk-ink: #B03A56; --risk-bd: #F3CCD6; --info: #6FA8E0; --info-bg: #EAF3FC; --info-ink: #2C6BA8; --info-bd: #C6DDF4; --think: #8A7CF0; --think-bg:#F0EDFF; --think-ink:#5B4CC4; --think-bd:#D8D1FA; --neutro: #97A1B5; --neutro-bg:#F1F3F8; --neutro-ink:#5C667A; --neutro-bd:#DDE3EE; /* --- series de gráfico (Chart.js las lee con getComputedStyle) --------- */ --serie-1: #8A93D6; --serie-2: #6FC2A4; --serie-3: #E9B06E; --serie-4: #E48DA1; --serie-5: #86B6E6; --serie-6: #B7A6E8; --serie-7: #7FCBD1; --serie-8: #C9B18A; --serie-9: #A9B2C6; /* --- tipografía de sistema (cero webfonts: la CSP no permite orígenes externos y la demo debe abrir por file:// sin red) --------------------- */ --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --fuente-num: ui-monospace, "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace; /* Escala para proyección: nada por debajo de 14px. */ --fs-xs: 14px; --fs-sm: 15px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 21px; --fs-2xl: 26px; --fs-kpi: 38px; --fs-kpi-sm:30px; --fs-dial: 30px; --lh-densa: 1.25; --lh: 1.5; --peso-normal: 400; --peso-medio: 600; --peso-fuerte: 700; --peso-extra: 800; --ls-titulo: -0.015em; --ls-micro: 0.06em; /* --- espaciado --------------------------------------------------------- */ --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 20px; --e6: 26px; --e7: 34px; --e8: 44px; /* --- radios ------------------------------------------------------------ */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px; /* --- sombras suaves (nunca negro puro: sobre pastel se ve sucio) ------- */ --sombra-1: 0 1px 2px rgba(31, 36, 48, .04), 0 6px 18px rgba(80, 90, 150, .06); --sombra-2: 0 2px 6px rgba(31, 36, 48, .05), 0 14px 34px rgba(80, 90, 150, .10); --sombra-3: 0 8px 20px rgba(31, 36, 48, .08), 0 28px 60px rgba(80, 90, 150, .16); --sombra-acento: 0 8px 22px rgba(var(--acento-rgb), .28); --anillo-foco: 0 0 0 3px rgba(var(--acento-rgb), .35); /* --- movimiento -------------------------------------------------------- */ --t-rapida: .16s; --t-media: .28s; --t-lenta: .42s; --curva: cubic-bezier(.4, 0, .2, 1); /* --- medidas ----------------------------------------------------------- */ --ancho-max: 1760px; /* Ancho al que la tabla del caso más ancho (facturas, 8 columnas) entra COMPLETA. Por debajo de 1720 px el corte .mc-hide-md suelta las dos columnas que cada caso marcó como prescindibles, que siguen estando en el drawer. */ --alto-tap: 44px; /* mínimo táctil: Fredy revisa esto en el celular */ --drawer-ancho: 520px; --tabla-alto: clamp(320px, 46vh, 560px); /* --- capas ------------------------------------------------------------- */ --z-banner: 30; --z-top: 35; --z-overlay: 50; --z-drawer: 60; --z-toast: 80; } /* --------------------------------------------------------------------------- Mapa de tono. Un componente no conoce colores: se le pone .mc-t-ok y hereda --tono / --tono-bg / --tono-ink / --tono-bd. Así core.css queda sin literales y un caso puede pedir un tono por nombre desde su configuración. --------------------------------------------------------------------------- */ .mc-t-ok { --tono: var(--ok); --tono-bg: var(--ok-bg); --tono-ink: var(--ok-ink); --tono-bd: var(--ok-bd); } .mc-t-warn { --tono: var(--warn); --tono-bg: var(--warn-bg); --tono-ink: var(--warn-ink); --tono-bd: var(--warn-bd); } .mc-t-risk { --tono: var(--risk); --tono-bg: var(--risk-bg); --tono-ink: var(--risk-ink); --tono-bd: var(--risk-bd); } .mc-t-info { --tono: var(--info); --tono-bg: var(--info-bg); --tono-ink: var(--info-ink); --tono-bd: var(--info-bd); } .mc-t-think { --tono: var(--think); --tono-bg: var(--think-bg); --tono-ink: var(--think-ink); --tono-bd: var(--think-bd); } .mc-t-neutro { --tono: var(--neutro); --tono-bg: var(--neutro-bg); --tono-ink: var(--neutro-ink); --tono-bd: var(--neutro-bd); } .mc-t-acento { --tono: var(--acento); --tono-bg: var(--acento-suave); --tono-ink: var(--acento-ink); --tono-bd: var(--acento-borde); } /* Sin tono declarado, neutro. Evita que un caso con una clave de tono nueva pinte texto transparente sobre fondo transparente delante del cliente. */ :root { --tono: var(--neutro); --tono-bg: var(--neutro-bg); --tono-ink:var(--neutro-ink); --tono-bd: var(--neutro-bd); } /* --------------------------------------------------------------------------- Impresión: los PDF de respaldo (plan B7) salen de acá. Fondo blanco puro, sin sombras, y tinta con contraste de tinta de impresora. --------------------------------------------------------------------------- */ @media print { :root { --bg: #FFFFFF; --bg-2: #FFFFFF; --superficie: #FFFFFF; --superficie-2: #FFFFFF; --superficie-3: #FFFFFF; --linea: #C9CFDD; --linea-fuerte: #A9B2C4; --tinta: #10131C; --tinta-media: #333C4E; --tinta-suave: #55607A; --sombra-1: none; --sombra-2: none; --sombra-3: none; --sombra-acento: none; --anillo-foco: none; } }