/** * ============================================================================ * accesibilidad.css * ---------------------------------------------------------------------------- * Estilos del Widget de Accesibilidad de superandoeducando.com * * Que hace este archivo: * 1) Estiliza el boton flotante (icono de accesibilidad) y el panel * desplegable "Menu de accesibilidad" (restablecer, contraste, escala * de grises, tamano de texto, espaciado, resaltar enlaces, lectura * facil, detener animaciones, ocultar imagenes, alinear texto a la * izquierda, cursor grande, leer pagina). * 2) Define las clases de estado que activa/desactiva accesibilidad.js * mediante clases en o (a11y-alto-contraste, * a11y-escala-grises, a11y-texto-N, a11y-espaciado, a11y-resaltar-enlaces, * a11y-lectura-facil, a11y-sin-animaciones, a11y-ocultar-imagenes, * a11y-alinear-izquierda, a11y-cursor-grande). * * Por que un widget propio y no un script de terceros: * - No agrega dependencias externas ni llamadas a servidores de terceros * (mejor privacidad y sin puntos de fallo externos). * - Se integra con el theme.color existente del sitio y respeta el * bootstrap 5 ya cargado (usa utilidades como .visually-hidden). * * Convenciones: * - Prefijo "a11y-" para todas las clases de estado (namespacing, evita * colisiones con clases del template Echooling). * - Uso de !important puntual SOLO en los modos de accesibilidad, porque * deben poder sobreescribir estilos inline del template (ej. color:#fff * en el

del slider). * ============================================================================ / / -------------------------------------------------------------------------- * Enlace "saltar al contenido" (skip link) * Oculto visualmente hasta que recibe foco por teclado (Tab). * -------------------------------------------------------------------------- / .skip-link { position: absolute; top: -60px; left: 8px; z-index: 100000; background: #0a3d62; color: #fff !important; padding: 10px 16px; border-radius: 6px; text-decoration: none; font-weight: 600; transition: top 0.2s ease-in-out; } .skip-link:focus { top: 8px; outline: 3px solid #ffcc00; } / -------------------------------------------------------------------------- * Boton flotante de accesibilidad * ---------------------------------------------------------------------------- * FIX 2026-09-17 (reporte de Jorge): el boton original era un circulo de * solo-icono sin ninguna palabra visible, lo que se percibia como "texto * invisible". Ahora es una pastilla icono + texto "Accesibilidad", igual * que el selector de idioma (misma familia visual, mismo tamano de fuente). * -------------------------------------------------------------------------- / #a11y-toggle-btn { position: fixed; left: 20px; bottom: 20px; height: 48px; padding: 0 18px 0 14px; border-radius: 24px; background: #0a3d62; color: #fff; border: none; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; z-index: 99998; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); font-size: 15px; font-weight: 700; font-family: Arial, Helvetica, sans-serif; line-height: 1; white-space: nowrap; } #a11y-toggle-btn:hover, #a11y-toggle-btn:focus { background: #0d4e7d; outline: 3px solid #ffcc00; outline-offset: 2px; } #a11y-toggle-btn svg { width: 24px; height: 24px; fill: currentColor; flex-shrink: 0; } #a11y-toggle-btn .a11y-toggle-texto { color: #fff; } / -------------------------------------------------------------------------- * Panel del menu de accesibilidad * -------------------------------------------------------------------------- / #a11y-panel { position: fixed; left: 20px; bottom: 78px; width: 340px; max-width: calc(100vw - 40px); max-height: 80vh; overflow-y: auto; background: #fff; color: #1a1a1a; border-radius: 14px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); z-index: 99999; display: none; font-family: Arial, Helvetica, sans-serif; } #a11y-panel.a11y-panel-abierto { display: block; } #a11y-panel-header { background: #0a3d62; color: #fff; padding: 16px 18px; border-radius: 14px 14px 0 0; display: flex; align-items: center; justify-content: space-between; font-size: 18px; font-weight: 700; } #a11y-panel-close { background: rgba(255, 255, 255, 0.15); border: none; color: #fff; width: 32px; height: 32px; border-radius: 50%; font-size: 16px; cursor: pointer; line-height: 1; } #a11y-panel-close:hover, #a11y-panel-close:focus { background: rgba(255, 255, 255, 0.3); outline: 2px solid #ffcc00; } #a11y-reset-btn { display: block; width: calc(100% - 32px); margin: 16px auto 8px auto; padding: 12px; background: #f1f3f5; border: 1px solid #dcdfe3; border-radius: 10px; font-weight: 600; cursor: pointer; text-align: center; } #a11y-reset-btn:hover, #a11y-reset-btn:focus { background: #e6e8eb; outline: 2px solid #0a3d62; } #a11y-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 8px 16px 20px 16px; } / Cada boton de opcion (Contraste alto, Escala de grises, etc.) / .a11y-option-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: #fff; border: 1px solid #dcdfe3; border-radius: 10px; padding: 14px 8px; cursor: pointer; font-size: 13px; text-align: center; color: #1a1a1a; min-height: 90px; } .a11y-option-btn:hover, .a11y-option-btn:focus { border-color: #0a3d62; outline: 2px solid #0a3d62; outline-offset: 1px; } .a11y-option-btn .a11y-icon { font-size: 22px; line-height: 1; } / Estado activo: la opcion esta encendida / .a11y-option-btn[aria-pressed="true"] { background: #0a3d62; color: #fff; border-color: #0a3d62; } / Grupo especial "Agrandar texto" con 3 puntos de progreso (como en la captura) / .a11y-progreso-dots { display: flex; gap: 4px; } .a11y-progreso-dots span { width: 6px; height: 6px; border-radius: 50%; background: #c3c9d1; } .a11y-option-btn[aria-pressed="true"] .a11y-progreso-dots span.activo { background: #ffcc00; } .a11y-option-btn:not([aria-pressed="true"]) .a11y-progreso-dots span.activo { background: #0a3d62; } / ============================================================================ * MODOS DE ACCESIBILIDAD (activados sobre / por accesibilidad.js) * ========================================================================= / / --- Alto contraste --- / html.a11y-alto-contraste, html.a11y-alto-contraste body { background: #000 !important; color: #fff !important; } html.a11y-alto-contraste { background-color: #000 !important; color: #fff !important; border-color: #fff !important; } html.a11y-alto-contraste a, html.a11y-alto-contraste a * { color: #ffff00 !important; } html.a11y-alto-contraste img, html.a11y-alto-contraste svg { filter: brightness(0.9) contrast(1.3); } /* --- Escala de grises --- / html.a11y-escala-grises { filter: grayscale(100%); } / --- Agrandar texto (3 niveles) --- / html.a11y-texto-1 body { font-size: 112.5% !important; } html.a11y-texto-2 body { font-size: 125% !important; } html.a11y-texto-3 body { font-size: 137.5% !important; } / --- Espaciado de texto --- / html.a11y-espaciado body, html.a11y-espaciado body { letter-spacing: 0.12em !important; word-spacing: 0.18em !important; line-height: 1.7 !important; } /* --- Resaltar enlaces --- / html.a11y-resaltar-enlaces a { background-color: #ffe600 !important; color: #000 !important; text-decoration: underline !important; outline: 2px solid #000 !important; } / --- Lectura facil: fuente simple, ancho de linea reducido, mas contraste de texto --- / html.a11y-lectura-facil body, html.a11y-lectura-facil body { font-family: Arial, Helvetica, sans-serif !important; } html.a11y-lectura-facil p, html.a11y-lectura-facil li, html.a11y-lectura-facil h1, html.a11y-lectura-facil h2, html.a11y-lectura-facil h3 { max-width: 70ch !important; color: #111 !important; } /* --- Detener animaciones (incluye WOW.js, carruseles, transiciones CSS) --- / html.a11y-sin-animaciones , html.a11y-sin-animaciones ::before, html.a11y-sin-animaciones ::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* --- Ocultar imagenes decorativas (deja el texto como foco de lectura) --- / html.a11y-ocultar-imagenes img, html.a11y-ocultar-imagenes .icon img { visibility: hidden !important; } / --- Alinear texto a la izquierda (corrige texto centrado/justificado) --- / html.a11y-alinear-izquierda body, html.a11y-alinear-izquierda p, html.a11y-alinear-izquierda h1, html.a11y-alinear-izquierda h2, html.a11y-alinear-izquierda h3, html.a11y-alinear-izquierda li { text-align: left !important; } / --- Cursor grande --- / html.a11y-cursor-grande, html.a11y-cursor-grande { cursor: url('data:image/svg+xml;utf8,') 4 4, auto !important; } /* --- Foco visible reforzado para navegacion por teclado (siempre activo) --- / a:focus-visible, button:focus-visible, input:focus-visible, [role="button"]:focus-visible { outline: 3px solid #ffcc00 !important; outline-offset: 2px !important; } / Responsive: en pantallas muy pequenas el panel ocupa casi todo el ancho */ @media (max-width: 420px) { #a11y-panel { left: 10px; right: 10px; width: auto; } #a11y-toggle-btn { left: 12px; bottom: 12px; } }