/* ========================================================================== 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; /* ---------- Estados de feedback (cajas de resultado) ---------- Trío fondo/borde/texto para los avisos de éxito, error y espera. Vivían duplicados como :root local en pages/verificar.html y pages/pago_resultado.html (--green-bg/--green-text, --red-bg/…, --amber-bg/…) con dos juegos que ya habían empezado a divergir: verificar.html no tenía los ámbar y pago_resultado.html no tenía los bordes. Contraste del texto sobre su propio fondo: verde 7,4:1 · rojo 8,1:1 · ámbar 7,6:1, todos sobre el mínimo AA. */ --color-success-bg: var(--color-green-50); --color-success-border: #86efac; --color-success-text: #166534; --color-danger-bg: #fee2e2; --color-danger-border: #fca5a5; --color-danger-text: #991b1b; --color-warning-bg: var(--color-amber-100); --color-warning-border: #fcd34d; --color-warning-text: #92400e; /* ---------- 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); /* Anillo alternativo para superficies cálidas. El dorado da 5,37:1 sobre blanco, pero sobre crema (#faf6da) y arena (#faf8f2) el contraste cae y además compite con el amarillo institucional: el anillo deja de leerse como "esto tiene el foco". Coursera resuelve lo mismo desacoplando el color de foco del de marca (usa púrpura sobre una marca azul). Este azul profundo da 11,4:1 sobre crema y 11,7:1 sobre arena. */ --focus-ring-on-warm: var(--color-primary-dark); } /* ========================================================================== DESPLAZAMIENTO BAJO LA BARRA FIJA — WCAG 2.4.11 (Focus Not Obscured) Al tabular hacia un elemento que queda fuera de pantalla, el navegador lo desplaza hasta el borde superior… que es justo donde está la barra de 64px. El elemento recibe el foco y queda tapado. Criterio nuevo en WCAG 2.2, y el que más incumplen las plataformas de cursos con header pegajoso. Esta regla vivía solo en curso.css, así que el aula estaba cubierta y el catálogo, mis cursos y los paneles no. scroll-margin-top cubre el caso del foco por teclado, que scroll-padding-top por sí solo no siempre atrapa. Si algún día se añade un banner sobre la barra, este valor debe incluirlo. ========================================================================== */ html { scroll-padding-top: calc(var(--nav-height) + 1rem); } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { scroll-margin-top: calc(var(--nav-height) + 1rem); } /* ========================================================================== 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; } /* Sobre fondo cálido manda el azul. Marcar el contenedor con data-surface o con las clases de superficie ya existentes; especificidad cero como la regla anterior, así que una página puede seguir sobrescribiendo. */ :where([data-surface="warm"], .arena, .cream, .prose-card, .status-card, .verify-card) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: var(--focus-ring-on-warm); } /* ========================================================================== 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); } /* ========================================================================== TAMAÑO MÍNIMO DE OBJETIVO — WCAG 2.5.8 (criterio nuevo en 2.2) Piso de 24×24 CSS px para controles. Se aplica a botones y campos, NO a los enlaces dentro de un párrafo: el criterio exempta explícitamente los enlaces en línea, y forzarlos rompería el interlineado del texto corrido. Referencia de por qué el piso no basta en los controles del aula: en una sola página de resultados de Udemy se midieron 318 elementos por debajo de 24px. Un producto puede puntuar Top 1% en usabilidad y fallar esto, porque miden cosas distintas. Los controles de aprendizaje ("Siguiente lección", "Enviar") van a 44px, que es el tamaño cómodo real para el pulgar. ========================================================================== */ :where(button, [role="button"], input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="button"], select, summary) { min-block-size: 24px; min-inline-size: 24px; } /* Los controles que llevan el peso del aprendizaje y del pago suben a 44px. */ :where(.btn-action, .btn-course, .nav-btn, .btn-primary, .btn-submit) { min-block-size: 44px; } /* ========================================================================== 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; } }