/* ═══════════════════════════════════════════════════════════════════════════ ESCAPA · CANON DE TOKENS — FASE 00 ═══════════════════════════════════════════════════════════════════════════ QUE ES ESTO El theme arrastra DOS vocabularios de tokens: el original de `tokens.css` (paleta calida en oklch, escala `--sp-*` en px) y el de `shell.css` (paleta azul-gris en hex, escala `--sh-*` en rem). Colores duplicados con nombres distintos, dos escalas de espaciado y dos alturas de cabecera. Esa es la razon de fondo de que el sitio no acabe de verse coherente. Este fichero declara UN SOLO vocabulario y redefine los nombres antiguos como alias suyos. A partir de aqui, cambiar un color del sitio es cambiar una linea de la seccion 1. ⚠️ ESTA FASE NO CAMBIA NI UN PIXEL. Los valores del canon son EXACTAMENTE los que hoy tiene el sitio, leidos del navegador con getComputedStyle (no deducidos del CSS: cual de las dos hojas gana no es uniforme —`--bg` lo gana shell.css y `--ink` lo gana tokens.css—, asi que el unico juez fiable es el valor calculado). El repintado es la FASE 01 y consiste en tocar solo la seccion 1; al final del fichero esta la paleta propuesta, ya corregida de contraste, lista para sustituir. ORDEN DE CARGA Va DESPUES de shell.css a proposito: los alias tienen que ganar por orden de fuente para que la fase 01 se propague. Por eso el fichero termina replicando las media queries de mobile.css (§4): si no, este `:root` pisaria el modo de alto contraste y el padding movil, que se declaran ahi dentro y no llevan especificidad extra. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══ 1. CANON ═══════════════════════════════════════════════════════════════ El unico sitio donde se decide como se ve el sitio. Fase 01: tocar aqui. */ :root { /* ── Superficie ────────────────────────────────────────────────────── */ --papel: #F4F6FA; /* fondo de la pagina */ --papel-2: #EEF1F7; /* fondo hundido: barras, celdas alternas */ --panel: #ffffff; /* tarjetas y paneles sobre el papel */ /* ── Tinta ─────────────────────────────────────────────────────────── */ --tinta: #0B1220; /* texto principal */ --tinta-2: #475065; /* texto secundario, descripciones */ --tinta-3: #6B7488; /* metadatos, etiquetas */ /* ── Filetes ───────────────────────────────────────────────────────── */ --filete: #DCE1EB; /* borde normal */ --filete-2: #C2C9D6; /* borde marcado */ /* ── Acento ────────────────────────────────────────────────────────── */ --acento: #E25822; /* accion: responder, empezar, enlaces */ --acento-hover: #B14418; --acento-suave: #FCEAE0; /* fondo de la accion seleccionada */ /* ── Marca ─────────────────────────────────────────────────────────── */ /* ⚠️ Compite con el acento: los dos senalan. La propuesta la retira en la fase 01 y deja los enlaces en --acento. Aqui se conserva tal cual. */ --marca: #2F5BB7; --marca-suave: #EEF3FC; --foco: rgba(47, 91, 183, 0.40); /* ── Estado ────────────────────────────────────────────────────────── */ /* --ok y --error existian solo como valor de reserva dentro de var(): se promueven a token con su MISMO valor, asi que no cambia nada. Son los colores de correccion del cuestionario. */ --ok: #16a34a; /* respuesta acertada */ --error: #dc2626; /* respuesta fallada */ --salud: #14916A; /* dato positivo (no es correccion) */ --neutro-suave: #f7f7f5; /* fondo del aviso «en blanco» */ /* ── Superficie de lectura de los temas ────────────────────────────── */ /* POR QUE ESTAN AQUI: el contenido de los 1.102 temas se pintaba con colores LITERALES en sus seis hojas (`content-tema*.css`, `subrayado`, `tutor`), y ninguna tenia una sola regla de modo oscuro. Resultado: con el oscuro activado, un tema se leia en CLARO dentro de una interfaz oscura. Pasaba desapercibido porque el fondo literal `#f5f7fa` es casi identico al --papel claro: en claro parecia correcto por coincidencia. Los valores en claro son los de siempre; el modo oscuro es nuevo. */ --tema-lectura: #f5f7fa; /* fondo del cuerpo del tema */ --tema-panel: #ffffff; /* cajas y tablas sobre ese fondo */ --tema-suave: #f8f9fa; /* fondos suaves: citas, cabeceras de tabla */ /* #e0e0e0 y no #e2ded7: el calido solo aparecia en reservas muertas de var() que no se pintan nunca. El valor que de verdad se ve en los temas es este, neutro. Elegir el otro habria metido un tono calido donde no habia ninguno. */ --tema-filete: #e0e0e0; /* borde normal */ --tema-filete-2: #999999; /* borde marcado */ --tema-texto: #333333; /* texto principal del tema */ --tema-texto-2: #555555; /* texto secundario */ --tema-texto-3: #666666; /* pies, metadatos */ /* Acentos del contenido que se usaban SIN definir, solo con su reserva dentro de var(): `var(--terracota, #c84b0f)` en 28 sitios y `var(--terracota-bg, #fff3e7)` en 5. Definirlos aqui es inerte en claro —mismo valor— y arregla los 33 de golpe en oscuro, donde el #c84b0f daba 3,89:1 sobre el fondo de lectura y se quedaba corto. */ /* #BF470E y no #c84b0f: como texto sobre su propio fondo suave (#fff3e7) el original daba 4,30:1, justo por debajo del 4,5 exigido. Este da 4,66 y el cambio es imperceptible —mismo tono 19°, un 4% menos de luminosidad—. Se usa como letra en 25 sitios de v2/v3/v4. */ --terracota: #BF470E; --terracota-bg: #fff3e7; /* Cajas de aviso del contenido. Las hojas las pintan con literales saturados —fondo claro y texto MUY oscuro— asi que en oscuro no basta con oscurecer el fondo: hay que aclarar el texto o queda ilegible. */ --av-ok-bg: #f0faf4; --av-ok-ink: #0a3d24; --av-info-bg: #f0f6ff; --av-info-ink: #1e3a6e; --av-aviso-bg: #fff7ec; --av-aviso-ink: #5c2e07; --av-error-bg: #f8d7da; --av-error-ink: #721c24; --av-nota-bg: #f5f3ff; --av-nota-ink: #3b2f6b; /* ── Espacio ───────────────────────────────────────────────────────── */ /* Una sola escala, en rem. Cubre EXACTAMENTE los dos juegos actuales: --sh-1..8 (rem) y --sp-1..7 (px) caen todos en estos nueve pasos. Se deja en rem y no en px porque asi respeta el tamano de letra que el usuario haya fijado en el navegador. */ --e-1: 0.25rem; /* 4 px */ --e-2: 0.5rem; /* 8 px */ --e-3: 0.75rem; /* 12 px */ --e-4: 1rem; /* 16 px */ --e-5: 1.25rem; /* 20 px */ --e-6: 1.5rem; /* 24 px */ --e-7: 2rem; /* 32 px */ --e-8: 3rem; /* 48 px */ --e-9: 4rem; /* 64 px */ /* ── Tipografia ────────────────────────────────────────────────────── */ --tipo-titular: "Inter", system-ui, sans-serif; --tipo-cuerpo: "Inter", system-ui, sans-serif; --tipo-mono: "JetBrains Mono", ui-monospace, monospace; /* ⚠️ Prefijo --texto-* y NO --fs-*: shell.css ya tiene sus propios --fs-xs, --fs-sm, --fs-md y --fs-2xs con OTROS valores (--fs-xs es 0.75rem alli, no 0.6875rem). Reutilizar el nombre los habria pisado. */ --texto-xs: 0.6875rem; /* 11 px — etiquetas en mayusculas */ --texto-sm: 0.8125rem; /* 13 px — metadatos */ --texto-base: 1rem; /* 16 px — cuerpo. NUNCA por debajo */ --texto-lg: 1.1875rem; /* 19 px — entradilla */ --texto-h3: 1.375rem; /* 22 px */ --texto-h2: 2.125rem; /* 34 px */ --texto-h1: 3.5rem; /* 56 px — la fase 01 lo baja a 38 */ /* ── Forma ─────────────────────────────────────────────────────────── */ /* ⚠️ Prefijo --radio-* y NO --r-*: shell.css ya tiene --r-xs/sm/md/lg con una escala DISTINTA (4/6/8/12 px frente a 4/8/12/20). Reutilizar el nombre habria cambiado todos los redondeos del shell. */ --radio-1: 4px; --radio-2: 8px; --radio-3: 12px; --radio-4: 20px; --radio-max: 999px; /* ── Estructura ────────────────────────────────────────────────────── */ --alto-cabecera: 56px; --ancho-lateral: 248px; --ancho-max: 1600px; --pad-contenedor: 32px; } /* Tema oscuro. Va con `:root.dark` —el mismo selector que usa shell.css— y despues en orden de fuente, para ganarle sin subir la especificidad. */ :root.dark { --papel: #0A0F1C; --papel-2: #161D2F; --panel: #111726; --tinta: #ECEFF5; --tinta-2: #C2C9D6; --tinta-3: #7E8699; --filete: #232A40; --filete-2: #2E3650; --acento: #F07A45; --acento-hover: #F69468; --acento-suave: rgba(240, 122, 69, 0.14); --marca: #6E8CC9; --marca-suave: rgba(110, 140, 201, 0.14); --foco: rgba(110, 140, 201, 0.55); --salud: #4DBE93; /* Superficie de lectura en oscuro. Contrastes comprobados sobre su propio fondo: texto 15,2:1 · secundario 11,3:1 · pies 7,4:1. Los filetes van a 1,7 y 2,7:1 —mas visibles que los del shell, que se quedan en 1,5— para que un borde de tabla se vea de verdad en un portatil con reflejos. */ --tema-lectura: #0E1521; --tema-panel: #131C2A; --tema-suave: #16202E; --tema-filete: #334156; --tema-filete-2: #526174; --tema-texto: #E6EAF2; --tema-texto-2: #C4CCD8; --tema-texto-3: #9AA6B5; /* El acento del contenido, aclarado: 3,89:1 -> 7,05:1 sobre la lectura. */ --terracota: #F0906A; --terracota-bg: #2A1B12; /* Avisos: fondo tintado del mismo matiz y texto claro. Todos por encima de 7:1 sobre su propio fondo. */ --av-ok-bg: #16241C; --av-ok-ink: #7FD1A0; --av-info-bg: #141F2E; --av-info-ink: #8FB4E8; --av-aviso-bg: #241C10; --av-aviso-ink: #E2B472; --av-error-bg: #2A1618; --av-error-ink: #F09096; --av-nota-bg: #1C1A2A; --av-nota-ink: #B9AEE8; } /* ═══ 2. ALIAS ═══════════════════════════════════════════════════════════════ Los nombres antiguos pasan a leerse del canon. Solo estan aqui los que HOY valen exactamente lo mismo que su equivalente: un alias que cambiase el valor dejaria de ser fase 00. Los que no cuadran estan en §3, sin tocar. */ :root { /* Superficie */ --bg: var(--papel); --bg-sunken: var(--papel-2); --bg-panel: var(--panel); --surface: var(--panel); --bg-soft: var(--neutro-suave); --soft: var(--neutro-suave); /* Tinta — las tres escalas paralelas de shell.css apuntan al mismo sitio */ --text: var(--tinta); --ink-900: var(--tinta); --text-mute: var(--tinta-2); --ink-600: var(--tinta-2); --ink-soft: var(--tinta-2); --text-soft: var(--tinta-3); --ink-500: var(--tinta-3); /* Filetes */ --border: var(--filete); --border-strong: var(--filete-2); --ink-300: var(--filete-2); --line: var(--filete); /* Acento y marca */ --accent: var(--acento); --accent-hover: var(--acento-hover); --accent-soft: var(--acento-suave); --brand: var(--marca); --brand-500: var(--marca); --brand-soft: var(--marca-suave); --focus-ring: var(--foco); --health: var(--salud); /* Estado del cuestionario */ --color-ok: var(--ok); --color-warn: var(--error); /* Espacio — los --sh-* ya estaban en rem, asi que el alias es exacto */ --sh-1: var(--e-1); --sh-2: var(--e-2); --sh-3: var(--e-3); --sh-4: var(--e-4); --sh-5: var(--e-5); --sh-6: var(--e-6); --sh-8: var(--e-7); /* Tipografia */ --font-display: var(--tipo-titular); --font-body: var(--tipo-cuerpo); --font-mono: var(--tipo-mono); --text-xs: var(--texto-xs); --text-sm: var(--texto-sm); --text-base: var(--texto-base); --text-lg: var(--texto-lg); --text-h3: var(--texto-h3); --text-h2: var(--texto-h2); --text-h1: var(--texto-h1); /* Forma */ --radius-xs: var(--radio-1); --radius-sm: var(--radio-2); --radius: var(--radio-3); --radius-md: var(--radio-3); --radius-lg: var(--radio-4); --radius-pill: var(--radio-max); /* Estructura */ --header-h: var(--alto-cabecera); --topbar-h: var(--alto-cabecera); --sidebar-w: var(--ancho-lateral); --container-max: var(--ancho-max); --container-pad: var(--pad-contenedor); } /* ═══ 3. CONFLICTOS SIN RESOLVER ═════════════════════════════════════════════ Estos NO se alian porque las dos hojas dicen cosas distintas de verdad, y unificarlos cambiaria el aspecto. Son decisiones de la fase 01, no descuidos: --ink tokens.css lo deja en oklch(0.25 0.015 55), una tinta CALIDA, mientras --text/--ink-900 son #0B1220, azul frio. Son dos negros distintos conviviendo en la misma pagina. --bg-alt oklch(0.95 0.012 70) en claro (calido) pero #161D2F en oscuro: el par no es coherente entre temas. --accent-2/-3 Ocre y verde salvia del sistema original. No tienen --accent-err equivalente en el vocabulario nuevo; hay que decidir si sobreviven o los sustituyen --ok / --error. --sp-1..7 La escala en px del sistema original. Coincide paso a paso con --e-2..9, pero pasarla a rem cambia el comportamiento cuando el usuario agranda la letra del navegador —a mejor, pero es un cambio visible y por tanto no es fase 00. --r-* / --fs-* shell.css tiene un TERCER juego de radios y de tamanos de letra (--r-xs/sm/md/lg = 4/6/8/12 px, --fs-2xs/xs/sm/md) que no coincide con el de tokens.css (--radius-* = 4/8/12/20). Son dos escalas de redondeo conviviendo. No se alian: habria que decidir una y repasar los componentes que usan la otra. --ope-color Se usa con TRES reservas distintas segun el fichero (#c9684a, var(--accent), var(--ink)). Definirlo unificaria tres comportamientos en uno. Ademas, 8 tokens se usan sin definir Y sin valor de reserva, asi que hoy no pintan nada: --bg-subtle, --gap-md, --gap-lg, --gap-xl, --sp-8, --text-md, --text-2xl, --text-muted. Definirlos ARREGLARIA algo que hoy esta roto, que tambien es un cambio visible. Se dejan anotados para la fase 01. */ /* ═══ 4. LO QUE ESTE FICHERO NO PUEDE PISAR ══════════════════════════════════ mobile.css declara estos tres tokens dentro de media queries. Una media query NO anade especificidad, asi que al cargar despues este `:root` los ganaria por orden de fuente y se perderian en silencio el modo de alto contraste y el padding movil. Se replican aqui, identicos, al final. */ /* De tokens.css. Aqui SI se toca el canon (--pad-contenedor, --texto-h1/h2) porque el alias lo sigue solo y no hay nadie mas leyendo esos tres. */ @media (max-width: 768px) { :root { --pad-contenedor: 20px; --texto-h1: 2.25rem; --texto-h2: 1.5rem; } } /* De mobile.css. Va DESPUES del bloque de 768 px: por debajo de 640 los dos se aplican y tiene que ganar este. */ @media (max-width: 640px) { :root { --pad-contenedor: 16px; } } /* De mobile.css. Aqui se tocan los nombres ANTIGUOS y no el canon, al contrario que arriba: `--ink-soft` solo afecta a si mismo, mientras que `--tinta-2` alimenta ademas a --text-mute y --ink-600, que en alto contraste NO cambian hoy. Tocar el canon aqui si seria un cambio visible. */ @media (prefers-contrast: high) { :root { --border: oklch(0.6 0.01 55); --ink-soft: oklch(0.35 0.01 55); } } /* ═══════════════════════════════════════════════════════════════════════════ FASE 01 — PALETA PROPUESTA (no activa) ═══════════════════════════════════════════════════════════════════════════ Direccion «papel, tinta y una sola voz». Para activarla se sustituyen los valores de la §1 por estos; los alias hacen que se propague a todo el sitio. ⚠️ Dos valores VAN CORREGIDOS respecto a la propuesta original, que afirmaba 4,5:1 en ambos temas y no lo cumplia en el claro (medido sobre --papel): --tinta-3 #6B7E91 daba 3,62:1 → #5E6E7F da 4,53:1 --aviso #B8742B daba 3,26:1 → #986023 da 4,51:1 El tema oscuro de la propuesta si cumplia entero. ⚠️ El filete #B9CEDD da 1,40:1 sobre el papel. Como la propuesta sustituye las sombras por filetes de 1 px, ese filete pasa a ser el UNICO separador: en un portatil con reflejos desaparece. Si se adopta, subirlo hacia 3:1 (~#7B8A94) o conservar una sombra minima en las tarjetas. :root { --papel: #E6F0F7; --papel-2: #D2E3EF; --tinta: #142231; --tinta-2: #3A4D60; --tinta-3: #5E6E7F; --filete: #B9CEDD; --acento: #A4243B; --ok: #3F6B4A; --error: #A4243B; --aviso: #986023; --texto-h1: 2.375rem; --tipo-titular: "Fraunces", Georgia, serif; --tipo-cuerpo: "Source Serif 4", Georgia, serif; } :root.dark { --papel: #101A24; --papel-2: #17242F; --tinta: #E3EDF4; --tinta-2: #A9BECD; --tinta-3: #7A90A1; --filete: #2A3B49; --acento: #D9536A; --ok: #6FA37C; --aviso: #D79A4E; } ⚠️ Las dos familias nuevas cuestan +211 KB frente a Inter (383 vs 172 KB, contando solo latin y latin-ext, que es lo que descarga un visitante espanol). Decidirlo con ese numero delante. ═══════════════════════════════════════════════════════════════════════════ */