/** * MODO INCLUSIÓN · capa de accesibilidad adaptativa. * * No es un juego aparte: es PlayICFES entero acomodándose. Las clases se * ponen en antes de pintar (script en el header) según lo que el * estudiante eligió, guardado en localStorage `pi_a11y`. Adaptar la cancha * para que todos compitan en igualdad — nunca bajar la vara. * * Se puede combinar cualquier ajuste con cualquier otro. */ /* ── Texto más grande: sube la raíz y refuerza lo que suele venir en px ── */ html.a11y-texto { font-size: 118%; } html.a11y-texto .vs-preg, html.a11y-texto .mi-preg, html.a11y-texto .q-statement, html.a11y-texto .vs-op, html.a11y-texto .mi-op, html.a11y-texto .opt, html.a11y-texto p, html.a11y-texto li, html.a11y-texto .rt-texto { font-size: 1.12em !important; line-height: 1.7 !important; } /* ── Dislexia: espaciado generoso, alineación a la izquierda y una tipografía más redonda del sistema (sin fuente externa, para que funcione offline). ── */ html.a11y-dislexia, html.a11y-dislexia body { font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif !important; } html.a11y-dislexia p, html.a11y-dislexia li, html.a11y-dislexia .vs-preg, html.a11y-dislexia .mi-preg, html.a11y-dislexia .q-statement, html.a11y-dislexia .vs-op, html.a11y-dislexia .mi-op, html.a11y-dislexia .opt, html.a11y-dislexia .rt-texto, html.a11y-dislexia .hub-gancho { letter-spacing: .06em !important; word-spacing: .16em !important; line-height: 1.9 !important; text-align: left !important; } /* ── Alto contraste: fondos y textos rotundos, bordes gruesos, sin grises apagados. Funciona sobre día y noche. ── */ html.a11y-contraste { --card: #ffffff; --bg: #ffffff; --ink: #000000; --muted: #1a1a1a; --linea: #000000; } html.a11y-contraste.tema-noche, html.a11y-contraste body.tema-noche { --card: #000000; --bg: #000000; --ink: #ffffff; --muted: #f0f0f0; --linea: #ffffff; } html.a11y-contraste .hub-carta, html.a11y-contraste .rt-carta, html.a11y-contraste .ar-caja, html.a11y-contraste .vs-op, html.a11y-contraste .mi-op, html.a11y-contraste .card, html.a11y-contraste button, html.a11y-contraste .btn { border-width: 3px !important; } html.a11y-contraste .hub-gancho, html.a11y-contraste .hub-estado, html.a11y-contraste .rt-texto { color: var(--ink) !important; } /* ── Daltonismo: el color nunca es la única señal. Se añaden símbolos a lo correcto/incorrecto y se separan los tonos hacia azul/naranja, que casi todos los tipos de daltonismo distinguen. ── */ html.a11y-daltonismo .vs-op.bien::after, html.a11y-daltonismo .mi-op.correcta::after, html.a11y-daltonismo .opt.correct::after { content: " ✓"; font-weight: 900; } html.a11y-daltonismo .vs-op.mal::after, html.a11y-daltonismo .mi-op.incorrecta::after, html.a11y-daltonismo .opt.wrong::after { content: " ✕"; font-weight: 900; } html.a11y-daltonismo { --coral: #e8730a; --red: #e8730a; /* el rojo pasa a naranja distinguible */ } html.a11y-daltonismo.tema-noche { --coral: #ff9d3c; --red: #ff9d3c; } /* ── Calma: menos movimiento (igual que prefers-reduced-motion, pero elegido). ── */ html.a11y-calma *, html.a11y-calma *::before, html.a11y-calma *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* ── Toque grande: objetivos cómodos para motricidad fina o pantallas chicas. ── */ html.a11y-toque button, html.a11y-toque .btn, html.a11y-toque .vs-op, html.a11y-toque .mi-op, html.a11y-toque .opt, html.a11y-toque .hub-carta, html.a11y-toque a.rt-btn, html.a11y-toque .main-nav a { min-height: 52px !important; } html.a11y-toque .vs-op, html.a11y-toque .mi-op, html.a11y-toque .opt { padding: 17px 16px !important; } /* ── Subtítulos de sonido: los avisos sonoros del juego se muestran también como texto para quien no oye. La clase la lee el motor para decidir si además de sonar, escribe el aviso. Aquí solo se asegura que el contenedor de avisos sea bien visible. ── */ html.a11y-subtitulos #vs-avisos { top: 60px; } /* El interruptor flotante de accesibilidad, presente en toda la app */ .a11y-boton { position: fixed; right: 12px; bottom: 12px; z-index: 120; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--linea, #ccc); background: var(--card, #fff); color: var(--ink, #111); font-size: 1.3rem; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.2); } .a11y-boton:focus-visible { outline: 3px solid #1c6fd0; outline-offset: 2px; }