/* ============================================================================= * FUNAJIT Páginas · TOKENS DE DISEÑO (hallazgo DIS-01 / DIS-02 de la auditoría) * ----------------------------------------------------------------------------- * FUENTE DE VERDAD de la paleta, la tipografía, los radios y los espaciados de * este plugin. Antes de este archivo había 178 colores hex distintos repartidos * por 20 hojas y ni un solo bloque :root; cada módulo repetía el navy y el * dorado a mano, con valores que no coincidían entre sí. * * QUÉ DICE LA DOCUMENTACIÓN Y QUÉ DICE EL CÓDIGO (medido, no supuesto) * · El CLAUDE.md declara navy #0D1E46 / navy-2 #16264F, dorado #B78318, * radios de 14-18px y tipografía Inter. * · En el código real de este repositorio: el navy dominante es #0A1628 * (17 archivos); #0D1E46 aparece en 3 sitios y #16264F en 1. El dorado * #B78318 NO EXISTE en ninguna hoja (solo asoma como rgba(180,131,24,.4) * en un borde). La tipografía real es "Outfit" (49 declaraciones); * Inter no se usa en ninguna parte. Los radios van de 2px a 999px. * Los tokens de abajo recogen el código REAL. Los valores documentados que sí * se usan se conservan con nombre propio; unificar la paleta hacia uno solo es * una decisión de diseño de FUNAJIT, no de este archivo (ver el PR). * * REGLA DEL DORADO (esto es lo que corrige DIS-02) * Los dorados claros NO cumplen contraste AA como color de texto: * --fjx-dorado-fondo #C1912A 2,86:1 sobre blanco → FONDO o BORDE, nunca texto * --fjx-dorado-claro #E3B54A 1,91:1 sobre blanco → FONDO o BORDE, nunca texto * --fjx-dorado-suave #E08A18 2,69:1 sobre blanco → FONDO o BORDE, nunca texto * Para TEXTO dorado sobre fondo claro se usa uno de estos, que sí cumplen: * --fjx-dorado-texto #7A5A12 6,37:1 sobre blanco · 6,02:1 sobre #FFF8EA * --fjx-dorado-calido #8A5200 6,39:1 sobre blanco · 6,04:1 sobre #FFF8EA * --fjx-dorado-hondo #7E4700 7,53:1 sobre blanco * Y sobre fondo dorado, el texto blanco solo es legible si el fondo es uno de * los oscuros: blanco sobre #8A5200 da 6,39:1; sobre #C1912A da 2,86:1 y falla. * --fjx-dorado-medio #B0640A (4,49:1) se queda a un pelo de AA: vale para * titulares grandes y superficies, no para texto corrido. * * CÓMO SE USA * · Color institucional (navy, escala de texto, enlace, superficie, dorado): * SIEMPRE por token. La prueba pruebas/16-tokens-de-diseno.php falla si * alguno vuelve a escribirse a mano en una hoja .css. * · Color propio de un programa o proyecto (el acento de cada hero, la paleta * oficial de los ODS, el rojo del Mocionario): sigue siendo literal, porque * no es identidad compartida. Ahí manda --fjx-accent, que cada módulo define * en su propio .xx-hero como ya hacía. * · Esta hoja se encola antes que cualquier otra del plugin (es dependencia de * todas), así que los tokens están disponibles en todos los módulos. * ========================================================================== */ :root { /* ---- Navy institucional ------------------------------------------------- --fjx-navy es el azul de la casa en este repositorio. Los tres siguientes son los otros navy que conviven hoy; existen para poder tokenizarlos sin cambiar un píxel, no porque haya que usarlos en código nuevo. */ --fjx-navy: #0A1628; /* 18,13:1 sobre blanco · el dominante */ --fjx-navy-hondo: #0D1B3E; --fjx-navy-doc: #0D1E46; /* el navy de la documentación */ --fjx-navy-doc-2: #16264F; /* el navy-2 de la documentación */ --fjx-navy-medio: #1E3A8A; --fjx-navy-suave: #274B8B; --fjx-navy-tinta: #001127; /* fondo casi negro del Mocionario */ /* ---- Escala de texto ---------------------------------------------------- Todas cumplen AA sobre blanco. El escalón más claro que se admite como texto es --fjx-texto-tenue (4,73:1). Por debajo de eso no hay token a propósito: #8A97AB daba 2,96:1 y estaba en uso como texto. */ --fjx-texto: #0A1628; /* 18,13:1 */ --fjx-texto-2: #243044; /* 13,28:1 */ --fjx-texto-3: #3D4A66; /* 8,86:1 */ --fjx-texto-apagado: #4B5A75; /* 6,96:1 */ --fjx-texto-tenue: #66748C; /* 4,73:1 sobre blanco · mínimo admitido */ /* ---- Enlace y acción ---------------------------------------------------- */ --fjx-enlace: #1D4ED8; /* 6,70:1 sobre blanco y con texto blanco encima */ --fjx-enlace-fuerte: #0021C6; /* 10,33:1 */ --fjx-enlace-vivo: #026DFE; /* 4,54:1 */ /* ---- Superficies -------------------------------------------------------- */ --fjx-blanco: #FFFFFF; --fjx-fondo-suave: #F6F8FC; --fjx-fondo-suave-2: #F4F6FB; --fjx-borde: #E5E9EF; --fjx-borde-2: #DEE3EC; /* ---- Dorados · leer la REGLA DEL DORADO de arriba ------------------------ */ /* Solo fondo o borde: */ --fjx-dorado-claro: #E3B54A; /* 1,91:1 · NUNCA texto */ --fjx-dorado-suave: #E08A18; /* 2,69:1 · NUNCA texto */ --fjx-dorado-fondo: #C1912A; /* 2,86:1 · NUNCA texto, y NUNCA con texto blanco encima */ --fjx-dorado-doc: #B78318; /* 3,35:1 · el dorado de la documentación, sin uso real */ /* Texto grande o superficie: */ --fjx-dorado-medio: #B0640A; /* 4,49:1 · titulares y superficies, no texto corrido */ /* Texto sobre claro, y fondo con texto blanco encima: */ --fjx-dorado-texto: #7A5A12; /* 6,37:1 sobre blanco · 6,02:1 sobre --fjx-nota-fondo */ --fjx-dorado-calido: #8A5200; /* 6,39:1 sobre blanco · 6,04:1 sobre --fjx-nota-fondo */ --fjx-dorado-hondo: #7E4700; /* 7,53:1 */ --fjx-dorado-foco: #926719; /* 5,03:1 · anillo de foco de la portada */ /* Nota/aviso en crema (el par canónico: --fjx-dorado-texto sobre --fjx-nota-fondo) */ --fjx-nota-fondo: #FFF8EA; --fjx-nota-borde: #F0D69A; /* ---- Estado ------------------------------------------------------------- */ --fjx-ok: #16A34A; /* con texto blanco da 3,30:1 → solo texto grande */ --fjx-ok-hondo: #06552A; --fjx-error: #DC2626; /* con texto blanco 4,83:1 */ --fjx-error-hondo: #991B1B; /* con texto blanco 8,31:1 */ --fjx-error-medio: #B91C1C; --fjx-aviso: #7C3AED; /* con texto blanco 5,70:1 */ --fjx-neutro: #6B7280; /* con texto blanco 4,83:1 */ /* ---- Tipografía --------------------------------------------------------- La real, no la documentada: la portada y los 20 módulos usan Outfit. */ --fjx-fuente: "Outfit", sans-serif; --fjx-fuente-texto: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* ---- Radios (los que hay, de menor a mayor) ------------------------------ */ --fjx-radio-xs: 6px; --fjx-radio-s: 8px; --fjx-radio-m: 10px; --fjx-radio-l: 12px; --fjx-radio-xl: 14px; /* el rango 14-18 es el «radio suave» de la casa */ --fjx-radio-2xl: 16px; --fjx-radio-3xl: 18px; --fjx-radio-4xl: 24px; --fjx-radio-pastilla: 999px; /* ---- Espaciados --------------------------------------------------------- */ --fjx-esp-xs: 4px; --fjx-esp-s: 8px; --fjx-esp-m: 12px; --fjx-esp-l: 16px; --fjx-esp-xl: 24px; --fjx-esp-2xl: 32px; --fjx-esp-3xl: 48px; --fjx-esp-4xl: 64px; } /* ============================================================================= * DIS-13 · CONTRASTE REFORZADO Y COLORES FORZADOS (parte global) * ----------------------------------------------------------------------------- * Antes de este bloque el plugin no tenía ni un solo `prefers-contrast` ni un * `forced-colors` en sus 21 hojas. Lo específico de la portada está en * institucional/portada/portada.css; aquí va lo que comparten TODOS los módulos. * * EL ANILLO DE FOCO ERA EL AGUJERO GRANDE * El foco visible de la portada es `outline:3px solid rgba(37,99,235,.28)`. * Compuesto sobre el fondo REAL da: * · sobre blanco → #C2D3F9 → 1,50:1 * · sobre la franja oscura → #0B2C5E → 1,34:1 (--fjx-deep #011627) * WCAG 2.1/2.2 SC 1.4.11 pide 3:1 para un indicador de foco. Falla en los dos. * * No hay UN color que gane en los dos fondos: el navy desaparece sobre la * franja oscura y el blanco desaparece sobre el papel. Por eso el anillo va * en DOS capas — trazo navy + halo blanco por fuera: * · trazo var(--fjx-navy) #0A1628 sobre blanco → 18,13:1 * · trazo navy sobre --fjx-fondo-suave #F6F8FC → 17,05:1 * · halo var(--fjx-blanco) sobre la franja oscura→ 18,33:1 * Siempre queda una de las dos capas visible, gane el fondo que gane. * * POR QUÉ `!important` * El CSS vivo de la portada llega por el Customizer y usa `!important` en el * propio `:focus-visible`. Sin `!important` este bloque no ganaría y sería * exactamente lo que la auditoría llama «parece cubierto y no cubre nada». * * POR QUÉ NO SE REDEFINEN TOKENS AQUÍ * pruebas/16-tokens-de-diseno.php falla si un token se define dos veces con * valores distintos, y un override dentro de @media sería justo eso. Así que * el refuerzo se aplica sobre SELECTORES reutilizando los tokens que ya hay, * no redefiniendo la paleta. * ========================================================================== */ @media (prefers-contrast: more) { a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: 4px solid var(--fjx-navy) !important; /* 18,13:1 sobre blanco */ outline-offset: 3px !important; box-shadow: 0 0 0 8px var(--fjx-blanco) !important; /* 18,33:1 sobre #011627 */ } /* Separadores: los grises de borde no son visibles a este nivel de contraste (--fjx-borde #E5E9EF da 1,22:1 sobre blanco, --fjx-borde-2 #DEE3EC 1,29:1). --fjx-texto-3 #3D4A66 da 8,86:1 sobre blanco y 8,33:1 sobre --fjx-fondo-suave. */ hr, .fjxp-video + hr { border-color: var(--fjx-texto-3) !important; } } @media (forced-colors: active) { a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: 3px solid Highlight !important; outline-offset: 3px !important; box-shadow: none !important; /* el halo blanco no existe en este modo */ } /* Los botones del plugin se distinguen SOLO por color de fondo (.fjx-btn es un relleno sólido sin borde, .fjx-btn-light un blanco translúcido). Con los colores forzados el fondo se aplana y el botón deja de verse como botón: hay que darle un borde explícito. */ .fjx-btn, .fjx-btn-light, .fjx-btn-outline, .fjxp-video-play { border: 1px solid ButtonText !important; } }