/* * BIOtime-iscom · fichas de diseño (tokens). * * TODO color de la aplicación sale de aquí: ninguna otra hoja escribe un color a mano. * El tema lo decide `data-tema="claro|oscuro"` en . Lo pone `js/tema-arranque.js` antes del primer pintado * (preferencia guardada o, si no hay, `prefers-color-scheme`), así que aquí no hace falta repetir el bloque * oscuro dentro de una media query. * * Color de marca: `--color-primario` lo puede cambiar cada empresa. `js/marca.js` lo fija en junto con * `--color-sobre-primario` (texto encima del color) y las variantes legibles para texto en cada tema; los valores * de este archivo son los de la marca por omisión. * * Los pares texto/fondo de estado (ok, aviso, grave, info) cumplen contraste AA (≥ 4.5) en los dos temas; * `pruebas/front/contraste.test.js` lo comprueba leyendo este archivo: si cambias un color, corre las pruebas. */ :root { color-scheme: light; /* ── Marca ── */ --color-primario: #1F6FEB; --color-sobre-primario: #FFFFFF; --color-primario-texto-claro: #1A5FCB; /* primario legible como TEXTO sobre superficies claras */ --color-primario-texto-oscuro: #7FB0FF; /* primario legible como TEXTO sobre superficies oscuras */ --color-primario-texto: var(--color-primario-texto-claro); --color-primario-suave: color-mix(in srgb, var(--color-primario) 12%, var(--color-superficie)); --color-primario-fuerte: color-mix(in srgb, var(--color-primario) 86%, #000000); /* ── Superficies y texto ── */ --color-fondo: #F4F6F9; --color-superficie: #FFFFFF; --color-superficie-2: #EDF0F4; --color-superficie-3: #E2E7ED; --color-borde: #D6DCE4; --color-borde-fuerte: #8793A3; /* borde de controles: ≥ 3:1 contra la superficie */ --color-texto: #17202E; --color-texto-suave: #465365; --color-texto-tenue: #5F6C7E; --color-velo: rgb(15 23 35 / 0.48); /* detrás de modales, paneles y el cajón del menú */ --color-foco: #1F6FEB; /* ── Estados: texto sobre su fondo suave, y un tono fuerte para puntos, iconos y barras ── */ --color-ok-texto: #0B5F33; --color-ok-fondo: #E1F5E9; --color-ok-borde: #9BD4B1; --color-ok-fuerte: #15803D; --color-aviso-texto: #7A4700; --color-aviso-fondo: #FFF0D1; --color-aviso-borde: #E9C478; --color-aviso-fuerte: #B45309; --color-grave-texto: #A3201A; --color-grave-fondo: #FDE8E6; --color-grave-borde: #F0ABA5; --color-grave-fuerte: #C62B23; --color-info-texto: #17508F; --color-info-fondo: #E2EEFC; --color-info-borde: #A5C6F0; --color-info-fuerte: #1D67C2; --color-neutro-texto: #3D4959; --color-neutro-fondo: #E9EDF2; --color-neutro-borde: #C5CDD8; /* ── Espacios (escala de 4 px) ── */ --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 20px; --esp-6: 24px; --esp-8: 32px; --esp-10: 40px; --esp-12: 48px; /* ── Radios ── */ --radio-1: 4px; --radio-2: 8px; --radio-3: 12px; --radio-pildora: 999px; /* ── Sombras ── */ --sombra-1: 0 1px 2px rgb(16 24 40 / 0.06), 0 1px 1px rgb(16 24 40 / 0.04); --sombra-2: 0 4px 12px rgb(16 24 40 / 0.10), 0 1px 3px rgb(16 24 40 / 0.06); --sombra-3: 0 16px 40px rgb(16 24 40 / 0.18), 0 4px 10px rgb(16 24 40 / 0.08); /* ── Tipografía: pila de fuentes del sistema, nada se descarga ── */ --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif; --fuente-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace; --texto-xs: 0.75rem; --texto-s: 0.8125rem; --texto-m: 0.9375rem; --texto-l: 1.0625rem; --texto-xl: 1.3125rem; --texto-2xl: 1.625rem; --texto-3xl: 2rem; --interlinea: 1.5; --interlinea-titulo: 1.2; --peso-normal: 400; --peso-medio: 500; --peso-fuerte: 650; /* ── Medidas ── */ --alto-control: 38px; --alto-encabezado: 60px; --ancho-menu: 252px; --ancho-panel: 520px; --ancho-panel-ancho: 760px; --ancho-contenido: 1440px; /* ── Movimiento ── */ --transicion: 140ms ease; --transicion-lenta: 220ms cubic-bezier(0.2, 0.7, 0.2, 1); /* ── Capas ── */ --capa-encabezado: 20; --capa-menu: 40; --capa-flotante: 50; --capa-panel: 60; --capa-modal: 70; --capa-aviso: 90; } :root[data-tema="oscuro"] { color-scheme: dark; --color-primario-texto: var(--color-primario-texto-oscuro); --color-primario-suave: color-mix(in srgb, var(--color-primario) 22%, var(--color-superficie)); --color-primario-fuerte: color-mix(in srgb, var(--color-primario) 84%, #FFFFFF); --color-fondo: #0E131A; --color-superficie: #161C25; --color-superficie-2: #1E2631; --color-superficie-3: #28323F; --color-borde: #2B3543; --color-borde-fuerte: #66758A; --color-texto: #E7EBF1; --color-texto-suave: #B5BFCD; --color-texto-tenue: #93A0B3; --color-velo: rgb(0 0 0 / 0.62); --color-foco: #7FB0FF; --color-ok-texto: #7BE0A5; --color-ok-fondo: #11301F; --color-ok-borde: #1F5B3A; --color-ok-fuerte: #3CCB7F; --color-aviso-texto: #F6C66F; --color-aviso-fondo: #38290B; --color-aviso-borde: #6B4E14; --color-aviso-fuerte: #F0A82E; --color-grave-texto: #FFA39B; --color-grave-fondo: #3B1613; --color-grave-borde: #74302A; --color-grave-fuerte: #F26A60; --color-info-texto: #93BEFF; --color-info-fondo: #13284A; --color-info-borde: #274A80; --color-info-fuerte: #5B9BF5; --color-neutro-texto: #C3CCD9; --color-neutro-fondo: #232C38; --color-neutro-borde: #3A4656; --sombra-1: 0 1px 2px rgb(0 0 0 / 0.40); --sombra-2: 0 4px 14px rgb(0 0 0 / 0.45); --sombra-3: 0 18px 44px rgb(0 0 0 / 0.60); } /* Dedos: en pantallas táctiles o angostas todo control mide al menos 44 px. */ @media (pointer: coarse), (max-width: 720px) { :root { --alto-control: 44px; --alto-encabezado: 56px; } } /* En papel siempre se imprime sobre blanco, aunque la pantalla esté en tema oscuro. */ @media print { :root[data-tema="oscuro"] { --color-fondo: #FFFFFF; --color-superficie: #FFFFFF; --color-superficie-2: #F2F2F2; --color-borde: #BBBBBB; --color-texto: #000000; --color-texto-suave: #333333; --color-texto-tenue: #555555; } }