/* ========================================================================== tokens.css — FUENTE ÚNICA de los tokens de diseño de Con Tribu Ir. Antes de este archivo había cuatro bloques :root con los mismos valores copiados (styles.css, curso.css, mis_cursos.css y, con otros nombres, creation_Course.css). Ninguna página cargaba dos a la vez, así que no chocaban en la cascada, pero cambiar un color obligaba a editarlo en cuatro lugares y ya habían empezado a divergir. REGLA: este archivo se enlaza PRIMERO en todas las páginas, antes que cualquier otra hoja. Ningún otro archivo debe declarar :root con estos tokens; si hace falta uno nuevo, va acá. ========================================================================== */ :root { /* ---------- Marca ---------- */ --color-primary: #054581f8; --color-primary-dark: #1d3d59; --color-primary-mid: #2a5275; --color-primary-darker: #142c42; --color-secondary: #fdf4a0; --color-secondary-hover: #fdf07d; --color-cream: #faf6da; /* Neutros cálidos: sesgados hacia el crema de la marca. Un gris frío junto al amarillo institucional se ve sucio. */ --color-stone-800: #292524; --color-stone-700: #44403c; --color-stone-600: #57534e; --color-stone-500: #78716f; --color-stone-400: #a8a29e; --color-stone-300: #d6d3d1; --color-stone-200: #e7e5e4; --color-stone-100: #f5f5f4; --color-stone-50: #fafaf9; --color-white: #ffffff; --color-amber-100: #fef3c7; --color-amber-200: #fcd34d; --color-green-50: #dcfce7; --color-green-100: #bbf7d0; /* ---------- Semánticos ---------- --color-green pasó de #48bb78 (2,45:1 sobre blanco) a #2f855a (4,71:1). El valor anterior no llegaba al mínimo de 3:1 que pide WCAG 1.4.11 para elementos de interfaz, y se usaba como color de texto en el ✓ de lección completada y en el temario. */ --color-green: #2f855a; --color-green-dark: #276749; --color-danger: #e53e3e; --color-warning: #ed8936; /* ---------- Paleta editorial ---------- */ --arena: #faf8f2; --arena-borde: #ece7db; --tinta: #12293d; --azul-profundo: #0e2942; --azul-medio: #1d3d59; /* Dorado accesible para resaltados sobre blanco (5,37:1). El #b8860b anterior se quedaba en 3,5:1. */ --dorado: #8a6410; /* ---------- Tipografía ---------- Las carga cada página con un a Google Fonts; si el CDN falla, la pila de respaldo mantiene el sitio legible. */ --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --font-body: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* ---------- Elevación ---------- Rampa teñida de azul en vez de negro puro. */ --sombra-sm: 0 1px 2px rgba(18, 41, 61, 0.06), 0 2px 6px rgba(18, 41, 61, 0.05); --sombra-md: 0 2px 4px rgba(18, 41, 61, 0.05), 0 12px 24px -8px rgba(18, 41, 61, 0.14); --sombra-lg: 0 4px 8px rgba(18, 41, 61, 0.06), 0 24px 48px -12px rgba(18, 41, 61, 0.22); --sombra-hero: 0 8px 16px rgba(4, 18, 31, 0.25), 0 32px 64px -16px rgba(4, 18, 31, 0.55); /* ---------- Layout ---------- */ --nav-height: 64px; /* ---------- Foco ---------- El dorado funciona sobre blanco, arena y crema, que son los tres fondos donde caen los controles del sitio. */ --focus-ring-color: var(--dorado); --focus-ring-width: 3px; --focus-ring-offset: 2px; /* Anillo para los campos de formulario, que sustituyen el outline por un box-shadow. Estaba entre 0.10 y 0.15 de opacidad, es decir invisible: había indicador de foco sobre el papel y no en la pantalla. */ --focus-ring-soft: rgba(29, 61, 89, 0.35); } /* ========================================================================== FOCO VISIBLE — WCAG 2.4.7 Antes solo styles.css y mis_cursos.css definían :focus-visible; en el aula, el editor de cursos y el modal de recuperación, navegar con teclado era literalmente invisible. Esta regla cubre todas las páginas que enlacen este archivo. ========================================================================== */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); border-radius: 4px; } /* Los navegadores que no soportan :focus-visible siguen mostrando :focus. Donde sí lo soportan, se quita el anillo del clic con mouse. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) { outline: none; } /* ========================================================================== SALTAR AL CONTENIDO — WCAG 2.4.1 Con 20 lecciones en la barra lateral, un usuario de teclado tabulaba por las 20 antes de llegar al contenido. ========================================================================== */ .skip-link { position: absolute; top: 0; left: 0; z-index: 1000; /* Fuera de pantalla hasta recibir foco: no usar display:none ni visibility:hidden, que lo sacarían del orden de tabulación. */ transform: translateY(-120%); padding: 0.75rem 1.25rem; background: var(--color-primary-dark); color: var(--color-white); font-weight: 700; text-decoration: none; border-bottom-right-radius: 8px; transition: transform 0.15s ease; } .skip-link:focus { transform: translateY(0); } /* ========================================================================== UTILIDADES DE ACCESIBILIDAD ========================================================================== */ /* Solo para lectores de pantalla. Se usa en las regiones aria-live que anuncian cambios sin mostrarlos en pantalla. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================================== MOVIMIENTO REDUCIDO Antes solo lo respetaban 2 de 8 hojas. ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }