/* ============================================================================ TOKENS DE DISEÑO DEL PANEL — fuente de verdad ============================================================================ Este archivo es el ÚNICO lugar donde se definen colores, tipografías y tamaños del panel. Ninguna hoja de estilos del panel escribe un color literal: todas usan estas variables. El porqué de cada decisión está en ESTILO.md, al lado de este archivo. Si cambiás algo acá, actualizá ese documento en el mismo movimiento. ========================================================================= */ :root { /* --- Verde: el color del panel ----------------------------------------- #0f3d2e NO es un color nuevo. Ya se usa en el sitio público, en la cabecera de la tabla de /resultados/ (frontend/src/styles/resultados.css), y frontend/CLAUDE.md lo nombra como el "verde oscuro" del par de colores de la marca. El panel lo adopta por consistencia, no por gusto. La rampa se derivó del mismo tono — hsl(160, 60%, L) — variando solo la luminosidad, para que los cuatro escalones sean el mismo verde y no cuatro verdes distintos. El -900 tampoco es inventado: ya estaba en resultados.css como el borde de esa cabecera. */ --panel-verde-900: #0a2a1f; /* bordes y separadores sobre el fondo */ --panel-verde-800: #0f3d2e; /* ← EL color. Fondo principal del panel */ --panel-verde-700: #165a43; /* superficies elevadas: tarjetas, barra */ --panel-verde-600: #257e61; /* hover y acentos sobre fondo verde */ /* --- Naranja de marca --------------------------------------------------- El mismo del sitio público. Es el color de ACCIÓN: botones que hacen algo (guardar, publicar). No se usa como color de texto sobre el verde —el contraste no alcanza para texto chico—, sí como fondo de botón. */ --panel-naranja: #f3690e; --panel-naranja-claro: #f5873f; /* --- Texto -------------------------------------------------------------- */ --panel-texto: #f8fafc; /* sobre fondo verde; ya se usa en resultados.css */ --panel-texto-tenue: #b8c9c2; /* secundario sobre verde */ /* --- Superficies del tema oscuro ---------------------------------------- El panel es oscuro de punta a punta (decisión del dueño, 2026-07-29, que cierra el pendiente "modo claro u oscuro" de ESTILO.md). Estos son los nombres SEMÁNTICOS de la rampa: las hojas de módulo usan estos, no los --panel-verde-N directos, para que un cambio de nivel se haga en un lugar. La superficie de datos es EL MISMO tono que el fondo de la página. No es un atajo: si la tabla se apoya en el fondo, el `color` que el hereda hacia adentro pasa a ser el correcto en vez de ser un bug. Antes la tabla era papel blanco y todo texto heredado caía blanco sobre blanco. */ --panel-superficie: var(--panel-verde-800); /* fondo de página y de fila */ --panel-superficie-hundida: var(--panel-verde-900); /* cabecera y campos */ --panel-superficie-elevada: var(--panel-verde-700); /* modales, tarjetas */ --panel-superficie-hover: var(--panel-verde-700); /* fila bajo el cursor */ --panel-borde: var(--panel-verde-900); /* separador entre filas */ --panel-borde-control: var(--panel-verde-600); /* borde de campo y botón */ /* Compatibilidad: quedan como alias de la rampa oscura para que ninguna regla vieja se dibuje en blanco si se pasó por alto. NO usar en reglas nuevas — el panel ya no tiene superficies de papel. */ --panel-papel: var(--panel-superficie-elevada); --panel-papel-tenue: var(--panel-superficie-hundida); --panel-tinta: var(--panel-texto); --panel-tinta-tenue: var(--panel-texto-tenue); --panel-linea: var(--panel-borde); /* --- Estados sobre fondo oscuro ----------------------------------------- Cada estado es una TERNA: fondo tenue del color, texto en el tono claro de ese mismo color, y borde del color con alfa. El vocabulario no cambia —verde publicado, ámbar borrador, rojo cancelado, celeste informativo—: cambia la luminosidad. Antes eran fondos claros con tinta oscura, que sobre una fila oscura se leen como parches encendidos en vez de como etiquetas. Los fondos son OPACOS, no translúcidos, y esa es una decisión con motivo. Con fondo translúcido el chip se compone con la fila que tenga debajo, así que al pasar el cursor —fila un escalón más clara— el chip se aclara con ella y el contraste del texto se cae: medido, los cuatro estados quedaban entre 3.9:1 y 4.4:1, por debajo del 4.5:1 de AA. Opaco, el contraste del badge no depende de lo que pase detrás y es el mismo en todos los estados. Cada fondo ES la tinta al 15% ya compuesta sobre --panel-verde-800; por eso sobre una fila en reposo se ve igual que la versión translúcida. Los bordes sí van con alfa: no llevan texto encima. Contraste del texto sobre su chip, con la fórmula de WCAG 2.1: ok 6.6:1 · aviso 6.1:1 · error 5.9:1 · info 5.5:1 · neutro 5.9:1 */ --panel-ok-fondo: #125135; --panel-ok-tinta: #86efac; --panel-ok-linea: rgb(34 197 94 / 0.35); --panel-aviso-fondo: #32522a; --panel-aviso-tinta: #fcd34d; --panel-aviso-linea: rgb(250 204 21 / 0.35); --panel-error-fondo: #313e31; --panel-error-tinta: #fca5a5; --panel-error-linea: rgb(239 68 68 / 0.4); --panel-info-fondo: #15504c; --panel-info-tinta: #7dd3fc; --panel-info-linea: rgb(56 189 248 / 0.35); /* --- Papel --------------------------------------------------------------- El panel es oscuro en pantalla, y en papel eso no va: gastaría el tóner y se leería peor. Estos dos son los únicos colores pensados para `@media print`, y viven acá por la misma regla que todos los demás — una hoja de estilos del panel no escribe un color literal, ni siquiera el negro. */ --panel-papel-tinta: #000; --panel-papel-linea: #999; /* Neutro: acciones sin carga semántica, como "Baja". */ --panel-neutro-fondo: #1d493b; --panel-neutro-tinta: var(--panel-texto-tenue); --panel-neutro-linea: rgb(255 255 255 / 0.18); /* --- Tipografía --------------------------------------------------------- Raleway es la del sitio público. Todavía NO está servida localmente para el panel: hasta que lo esté, la pila cae en system-ui, que se ve bien y no cuesta un request. Sin CDNs (regla del proyecto), así que sumarla implica descargarla a panel/fuentes/. Pendiente de decidir con el dueño: ver ESTILO.md §Pendientes. */ --panel-fuente: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --panel-fuente-titulo: var(--panel-fuente); /* Tamaños: el panel se usa desde el celular, así que el cuerpo arranca en 16px. Menos que eso hace que iOS haga zoom solo al enfocar un input. */ --panel-texto-xs: 0.75rem; --panel-texto-sm: 0.875rem; --panel-texto-base: 1rem; --panel-texto-lg: 1.125rem; --panel-texto-xl: 1.5rem; /* --- Foco ----------------------------------------------------------------- El anillo que marca el campo enfocado. Es el mismo --panel-verde-600 con alfa: se declara acá y no en panel.css porque un color con transparencia sigue siendo un color, y esta es la única hoja que los define. Reemplaza al outline del navegador, que se dibuja distinto en cada uno. */ --panel-foco-anillo: rgb(37 126 97 / 0.18); /* --- Espaciado y formas ------------------------------------------------- */ --panel-espacio-1: 0.25rem; --panel-espacio-2: 0.5rem; --panel-espacio-3: 0.75rem; --panel-espacio-4: 1rem; --panel-espacio-6: 1.5rem; --panel-espacio-8: 2rem; --panel-radio: 6px; /* --- Sombras y velo ------------------------------------------------------ Sobre fondo oscuro una sombra tiene que ser más profunda que sobre papel para verse siquiera: de ahí que los alfas sean más altos que los típicos de un tema claro. Están acá y no en cada hoja porque un rgba(0,0,0,…) suelto también es un color literal, y la regla del panel no hace excepción con el negro. */ --panel-sombra: 0 1px 3px rgb(0 0 0 / 0.12); --panel-sombra-barra: 0 2px 8px rgb(0 0 0 / 0.2); --panel-sombra-tarjeta: 0 4px 12px rgb(0 0 0 / 0.25); --panel-sombra-tarjeta-hover: 0 8px 20px rgb(0 0 0 / 0.35); --panel-sombra-modal: 0 10px 30px rgb(0 0 0 / 0.45); /* Velo del modal: oscurece lo de atrás sin teñirlo. */ --panel-velo: rgb(0 0 0 / 0.65); /* Mínimo táctil: 44px es lo que recomienda Apple y lo que hace que el panel sea usable con el pulgar en el celular, que es como lo van a usar. */ --panel-tactil-min: 44px; /* --- Densidad de tabla --------------------------------------------------- Cierra el pendiente "densidad de las tablas" de ESTILO.md. Es CÓMODA y no compacta, y el que manda es --panel-tactil-min: una tabla de 32px por fila se ve bien en el monitor y es inusable con el pulgar, que es como se va a usar el panel. El padding vertical se eligió para llegar a ese mínimo con una línea de texto de 16px. */ --panel-celda-y: var(--panel-espacio-3); --panel-celda-x: var(--panel-espacio-4); --panel-fila-min: var(--panel-tactil-min); }