/* ==========================================================================
TOKENS DE DISEÑO · ManuelPérez.ca (estilo consola, ADR 0015)
Este es el ÚNICO archivo donde se definen colores, tipografías, espacios
y sombras. Para cambiar la marca o el modo claro, edite solo este archivo.
Oscuro primero: el bloque :root es el modo oscuro; el claro sale solo si
la persona lo elige con el botón; el modo del sistema no cuenta. Contraste AA revisado
el 20 oct 2026 (texto suave 6,6:1 y acento 8,6:1 sobre las tarjetas oscuras;
4,5:1 o más en claro).
========================================================================== */
/* IBM Plex Mono y Sans (licencia OFL, public/fonts/OFL.txt), alojadas en el sitio: la CSP no
suma dominios y no hay petición a terceros antes del consentimiento. Solo latín y los pesos usados. */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }
:root {
/* --- Colores de marca --- */
--marca: #5FD4C2; /* verde agua de la marca */
--marca-boton: #0B6E63; /* verde agua oscuro: botones y enlaces del modo claro */
--marca-profunda: #0C1B1E; /* turquesa casi negro: texto sobre fondos claros fijos */
--acento-base: #5FD4C2; /* acentos, líneas, iconos */
--acento-texto: #5FD4C2; /* textos de acento (AA: 8,6 sobre la superficie oscura) */
--acento-claro: #5FD4C2; /* acento sobre las franjas oscuras, en los dos modos (10,5:1) */
/* --- Colores de interfaz (modo oscuro, el de por defecto) --- */
--fondo: #0C1B1E;
--fondo-alterno: #0F2226; /* secciones alternas */
--superficie: #12272B; /* tarjetas, consola, bloque de código */
--texto: #E2EEEB;
--texto-suave: #93AEAA;
--borde: #21403F;
--primario: var(--marca);
--primario-hover: #8AE3D5;
--sobre-primario: #0C1B1E;
--enlace: var(--primario); /* enlaces de texto; un sitio con botones claros lo separa del primario */
--enlace-hover: var(--primario-hover);
--acento: var(--acento-base);
--franja: #071315; /* franjas oscuras (cifras, llamado final, pie), en los dos modos */
--sobre-franja: #E2EEEB;
--whatsapp: #168043; /* verde WhatsApp oscurecido para AA con texto blanco */
--whatsapp-hover: #11663A;
--whatsapp-texto: #2FB36A; /* enlaces de WhatsApp como texto (el sitio no lo usa) */
--foco: var(--acento-texto); /* contorno del foco del teclado (3:1 o más sobre el fondo) */
--borde-campo: #5F8580; /* borde de los campos de formulario (3:1 o más sobre fondo y superficie) */
/* Consola y código (ADR 0015) */
--ok: #8FDC8A; /* [ OK ] y textos de código */
--aviso: #F0C36B; /* [warn] y etiquetas de borrador */
--codigo-clave: #F0A6C8; /* palabras clave del código */
--consola-sombra: 0 18px 50px -24px rgba(0, 0, 0, .55);
/* --- Colores fijos (no cambian en modo oscuro) --- */
--blanco: #FFFFFF;
--negro: #0C1B1E; /* texto sobre el acento o blanco, en ambos modos */
--me-gusta-activo: #EF7B6E; /* corazón del me gusta marcado */
--error: #F2A49B; /* errores de formulario (contraste AA sobre el fondo) */
--error-sobre-franja: #F4AFA7; /* errores de formulario sobre la franja oscura del pie, en ambos modos (4.8:1) */
--ejemplo-fondo: #FFF3CD; /* etiqueta "Ejemplo" (contenido de muestra) */
--ejemplo-texto: #6B5100;
--google-azul: #4285F4; /* logo "G" del botón Continuar con Google, colores oficiales */
--google-rojo: #EA4335;
--google-amarillo: #FBBC05;
--google-verde: #34A853;
/* Acentos que solo usan los SVG del logo sobre fondo oscuro (ADR 0005). Un SVG en ![]()
no puede leer este archivo: si se cambian aquí, hay que cambiarlos también en public/img/. */
--logo-acento-oscuro: #5FD4C2;
--logo-acento-brillo: #8AE3D5;
/* Colores de los diagramas de los casos (public/img/casos/*.svg, M4): panel oscuro fijo, igual en
claro y oscuro. Un SVG en ![]()
no puede leer este archivo: si se cambian aquí, hay que
regenerar los diagramas con los mismos valores. */
--diagrama-fondo: #071315;
--diagrama-caja: #12272B;
--diagrama-borde: #21403F;
--diagrama-texto: #E2EEEB;
--diagrama-detalle: #93AEAA;
--diagrama-acento: #5FD4C2;
--diagrama-aviso: #F0C36B;
/* --- Transparencias sobre fondos oscuros (franjas, fotos, pie) --- */
--blanco-05: rgba(255, 255, 255, .05);
--blanco-06: rgba(255, 255, 255, .06);
--blanco-12: rgba(255, 255, 255, .12);
--blanco-20: rgba(255, 255, 255, .2);
--blanco-60: rgba(255, 255, 255, .6);
--blanco-85: rgba(255, 255, 255, .85);
--blanco-86: rgba(255, 255, 255, .86);
--blanco-94: rgba(255, 255, 255, .94);
--negro-35: rgba(0, 0, 0, .35);
--crema-75: rgba(244, 239, 230, .75); /* texto legal del pie (AA) */
--crema-80: rgba(244, 239, 230, .8);
--velo-hero-1: rgba(12, 27, 30, .88); /* degradado sobre la foto de portada */
--velo-hero-2: rgba(12, 27, 30, .62);
--velo-hero-3: rgba(12, 27, 30, .25);
--visor-fondo: rgba(8, 12, 18, .96); /* fondo del visor de fotos, igual en claro y oscuro */
/* --- Fondos de muestra mientras no hay fotos reales (en verde agua; b, d y e no se usan) --- */
--foto-a: linear-gradient(135deg, #1F5A55 0%, #12302F 55%, #0C1B1E 100%);
--foto-b: linear-gradient(160deg, #C9B48A 0%, #9C8456 60%, #6F5C38 100%);
--foto-c: linear-gradient(140deg, #2E6F68 0%, #1A4440 60%, #0F2226 100%);
--foto-d: linear-gradient(150deg, #B7A27A 0%, #7E8F67 55%, #4F6A4C 100%);
--foto-e: linear-gradient(130deg, #889FB7 0%, #4E6E8F 50%, #2A425B 100%);
--foto-hero: radial-gradient(120% 90% at 85% 30%, #2E6F68 0%, #1A4440 30%, #0F2226 70%, #071315 100%);
/* --- Tipografía --- */
--fuente-codigo: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
--fuente-titulos: var(--fuente-codigo); /* títulos, etiquetas y cifras en monoespaciada */
--fuente-texto: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--fuente-botones: var(--fuente-codigo);
--fuente-menu: var(--fuente-codigo);
--peso-titulos: 600; /* h1 a h4, títulos de guía y de tarjeta */
--peso-destacado: 600; /* título de portada y cifras */
--peso-botones: 600;
--peso-menu: 500;
--t-xs: 0.75rem;
--t-sm: 0.875rem;
--t-base: 1rem;
--t-lg: 1.125rem;
--t-xl: 1.25rem;
--t-2xl: 1.75rem;
--t-3xl: clamp(1.5rem, 3.2vw, 2.25rem);
--t-hero: clamp(2rem, 6vw, 3.5rem);
--espaciado-mayus: 0.06em; /* tracking para textos en mayúsculas */
/* --- Espacios y forma --- */
--e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem;
--e-6: 1.5rem; --e-8: 2rem; --e-12: 3rem; --e-16: 4rem; --e-24: 6rem;
--ancho-max: 1088px;
--radio: 8px;
--radio-sm: 4px;
--sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
--sombra-fuerte: 0 12px 40px rgba(20, 26, 36, .18);
--sombra-whatsapp: 0 8px 24px rgba(22, 128, 67, .4);
--transicion: 180ms ease;
color-scheme: dark;
}
/* --- Modo claro: solo si la persona lo elige con el botón (el sistema no cuenta) --- */
:root[data-tema="claro"] {
--fondo: #F2F6F5;
--fondo-alterno: #E6EEEC;
--superficie: #FFFFFF;
--texto: #0C1B1E;
--texto-suave: #47605C;
--borde: #CFDEDB;
--primario: var(--marca-boton);
--primario-hover: #08544B;
--sobre-primario: #FFFFFF;
--acento: var(--marca-boton);
--acento-texto: var(--marca-boton);
--whatsapp-texto: #168043;
--borde-campo: #6F8A86;
--error: #B3261E;
--me-gusta-activo: #C0392B;
--ok: #2D7A2A;
--aviso: #8A5A00;
--codigo-clave: #A3266A;
--sombra: 0 1px 2px rgba(20, 26, 36, .06), 0 8px 24px rgba(20, 26, 36, .08);
--consola-sombra: 0 18px 50px -28px rgba(12, 27, 30, .35);
color-scheme: light;
}