/* ========================================================================== El Ayudador de Pibes — Tokens del sistema visual Versión 3.0 · Fuente de verdad: docs/SISTEMA-VISUAL.md Ningún archivo del proyecto debe declarar colores, tamaños de fuente, espaciados ni radios literales. Todo sale de aquí. REGLA DEL COLOR (v3): paleta unificada de marca, compartida con el Creador de CV (cv.elayudadordepibes.org) y el Simulador de entrevistas (entrevista.elayudadordepibes.org) — familia navy + celeste. - Celeste/navy de marca = acción. Botones, enlaces, foco. Es también la única identidad de marca: ya no hay un color distinto por categoría (v2 lo tenía; se retiró para que los tres productos se sientan como una sola marca). Las categorías se diferencian por texto e ícono. - Ámbar = el archivo se transmite a un servidor. Uso exclusivo. - Rojo = error o pérdida. Uso exclusivo. Todos los valores fueron recalculados contra WCAG 2.2 (ver ratios en cada línea); ninguno es una copia directa de v2 con el matiz cambiado. ========================================================================== */ :root { color-scheme: light dark; /* --- Superficies y texto: claro ---------------------------------------- */ --fondo: #F6F8FA; --superficie: #FFFFFF; --superficie-hundida: #EEF1F5; --texto-1: #14202E; /* 16.46:1 — AAA */ --texto-2: #56677A; /* 5.81:1 — AA */ --texto-3: #5E6E85; /* 5.19:1 — AA. Solo metadatos prescindibles */ --borde: #DDE3EA; --borde-interactivo: #6E7F99; /* 4.07:1 — cumple WCAG 1.4.11 */ /* --- Marca: navy + celeste. Solo para acciones ------------------------- */ --acento: #075A96; /* 7.21:1 — AAA. Mismo azul que el Creador de CV */ --acento-hundido: #0A1E3A; /* navy de marca, compartido con los 3 productos */ --acento-tenue: #EAF6FC; --acento-contra: #FFFFFF; /* 7.21:1 sobre --acento */ /* --- Señales reservadas. Nunca por estética ---------------------------- */ --ambar: #8A5A00; /* 5.93:1 — el archivo se transmite */ --ambar-tenue: #FFF6DF; --error: #A12626; /* 7.45:1 */ --error-tenue: #FDECEC; /* --- Categorías: ya no llevan color propio (v3) ------------------------ Los seis tokens se conservan por compatibilidad con las clases .marcador-* existentes, pero ahora resuelven todos al mismo celeste de marca — el catálogo distingue categorías por texto e ícono, no por matiz. Cambiar acá alcanza para todo el sitio: no hace falta tocar componentes.css ni el HTML de cada página. */ --cat-imagenes: var(--acento); --cat-pdf: var(--acento); --cat-texto: var(--acento); --cat-programacion: var(--acento); --cat-seguridad: var(--acento); --cat-estudiantes: var(--acento); --cat-imagenes-tenue: var(--acento-tenue); --cat-pdf-tenue: var(--acento-tenue); --cat-texto-tenue: var(--acento-tenue); --cat-programacion-tenue: var(--acento-tenue); --cat-seguridad-tenue: var(--acento-tenue); --cat-estudiantes-tenue: var(--acento-tenue); --sombra-flotante: 0 1px 2px rgba(10, 26, 46, 0.08), 0 8px 24px rgba(10, 26, 46, 0.12); --sombra-menu: 0 4px 6px rgba(10, 26, 46, 0.06), 0 12px 32px rgba(10, 26, 46, 0.16); /* --- Tipografía -------------------------------------------------------- */ --fuente-texto: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --fuente-dato: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace; /* Fluidas con clamp(): el mínimo y el máximo son los mismos valores que ya declaraba SISTEMA-VISUAL.md (720px móvil / desktop) — clamp() solo interpola entre ambos en vez de saltar de golpe en un breakpoint fijo, y reemplaza el bloque @media que había abajo para estos 4 tokens. */ --txt-display: clamp(2.25rem, 1.6rem + 3vw, 3rem); --txt-h1: clamp(1.875rem, 1.5rem + 1.6vw, 2.25rem); --txt-h2: clamp(1.5rem, 1.3rem + 0.9vw, 1.75rem); --txt-h3: 1.375rem; --txt-cuerpo-lg: 1.125rem; --txt-cuerpo: 1rem; --txt-peq: 0.875rem; --txt-micro: 0.75rem; --txt-dato: clamp(1.75rem, 1.5rem + 1.1vw, 2rem); --txt-dato-peq: 0.875rem; --interlinea-titulo: 1.15; --interlinea-cuerpo: 1.6; --tracking-titulo: -0.02em; --tracking-micro: 0.01em; --tracking-etiqueta: 0.08em; --medida-lectura: 68ch; /* --- Espaciado: escala base 4px ---------------------------------------- */ --esp-1: 0.25rem; --esp-2: 0.5rem; --esp-3: 0.75rem; --esp-4: 1rem; --esp-6: 1.5rem; --esp-8: 2rem; --esp-12: 3rem; --esp-16: 4rem; --esp-24: 6rem; /* --- Forma. Radios más generosos que en v1 ----------------------------- */ --radio-sm: 6px; --radio-md: 10px; --radio-lg: 16px; --radio-full: 999px; --contenedor: 1140px; --toque-min: 44px; /* --- Movimiento -------------------------------------------------------- */ --dur: 180ms; --dur-menu: 120ms; --curva: cubic-bezier(0.2, 0, 0.2, 1); } /* --- Modo oscuro ----------------------------------------------------------- No es el claro invertido. El fondo lleva tinte violeta y todos los colores suben de luminosidad, porque los tonos saturados oscuros sobre negro son ilegibles. -------------------------------------------------------------------------- */ :root[data-tema="oscuro"] { /* Sin esto, el color-scheme:light dark de arriba deja que los controles nativos (placeholder, scrollbar, flechas de