/* ============================================================================= TOTALISYS COLLEGE — assets/css/accessibility.css ----------------------------------------------------------------------------- Widget de accesibilidad propio, sin ningún servicio externo — mismo criterio "sin dependencias" del resto del proyecto. Dos partes: 1) La interfaz del botón flotante y su panel. 2) Las clases de efecto real que el panel activa sobre , que SÍ cambian cómo se ve y se comporta el sitio (no son solo íconos). ============================================================================= */ /* --- 1) Botón flotante + panel ------------------------------------------- */ .tc-a11y-float { position: fixed; bottom: 22px; left: 22px; z-index: 95; width: 56px; height: 56px; border-radius: 50%; background: var(--tc-navy, #0f2848); display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.28); transition: transform 0.15s ease; } .tc-a11y-float:hover, .tc-a11y-float:focus-visible { transform: scale(1.08); } .tc-a11y-float:focus-visible { outline: 3px solid var(--tc-mint, #5bbf9c); outline-offset: 3px; } @media (max-width: 600px) { .tc-a11y-float { bottom: 16px; left: 16px; width: 50px; height: 50px; } } .tc-a11y-panel { position: fixed; bottom: 90px; left: 22px; z-index: 96; width: 340px; max-width: calc(100vw - 32px); max-height: 72vh; overflow-y: auto; background: var(--tc-white, #fff); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.28); font-family: var(--tc-font-body, 'IBM Plex Sans', sans-serif); display: none; } .tc-a11y-panel.is-open { display: block; } @media (max-width: 600px) { .tc-a11y-panel { bottom: 78px; left: 16px; } } .tc-a11y-header { background: var(--tc-navy, #0f2848); color: #fff; padding: 16px 18px; border-radius: 16px 16px 0 0; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; } .tc-a11y-header h2 { font-size: 0.95rem; margin: 0; font-family: var(--tc-font-display, inherit); color: #fff; } .tc-a11y-header button { background: rgba(255,255,255,0.15); border: none; color: #fff; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 1rem; line-height: 1; } .tc-a11y-header button:focus-visible { outline: 2px solid var(--tc-mint, #5bbf9c); } .tc-a11y-reset { display: block; width: calc(100% - 32px); margin: 14px 16px 4px; padding: 9px; background: none; border: 1px solid var(--tc-line, #dfe4ea); border-radius: 8px; font-size: 0.82rem; cursor: pointer; color: var(--tc-ink, #1a2b47); } .tc-a11y-reset:hover { background: var(--tc-paper, #f4f7f5); } .tc-a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 16px 18px; } .tc-a11y-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 6px; border: 1px solid var(--tc-line, #dfe4ea); border-radius: 10px; background: #fff; cursor: pointer; text-align: center; font-size: 0.76rem; color: var(--tc-ink, #1a2b47); } .tc-a11y-btn svg { width: 22px; height: 22px; } .tc-a11y-btn:hover { background: var(--tc-paper, #f4f7f5); } .tc-a11y-btn:focus-visible { outline: 2px solid var(--tc-navy, #0f2848); outline-offset: 1px; } .tc-a11y-btn.is-active { background: var(--tc-mint-soft, #dff3ea); border-color: var(--tc-mint, #5bbf9c); font-weight: 600; } .tc-a11y-steps { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 2px; } .tc-a11y-steps span { width: 6px; height: 6px; border-radius: 50%; background: var(--tc-line, #dfe4ea); } .tc-a11y-btn.is-active .tc-a11y-steps span.is-filled { background: var(--tc-navy, #0f2848); } /* --- 2) Efectos reales, aplicados sobre --------------------------- */ /* Contraste alto */ html.tc-a11y-contrast body { background: #000 !important; color: #fff !important; } html.tc-a11y-contrast body * { background-color: #000 !important; color: #fff !important; border-color: #fff !important; } html.tc-a11y-contrast a, html.tc-a11y-contrast button { color: #ffe14d !important; } html.tc-a11y-contrast img, html.tc-a11y-contrast svg { filter: grayscale(1) contrast(1.4); } /* Escala de grises — IMPORTANTE: nunca se aplica "filter" directo a ni a . Un "filter" en un ancestor crea, según la propia especificación de CSS, un nuevo contenedor de posicionamiento para todo lo que sea position:fixed dentro de él — eso es exactamente lo que rompía los botones flotantes (el de este widget y el de WhatsApp): dejaban de posicionarse contra la ventana y pasaban a posicionarse contra , así que se movían con la página en vez de quedarse fijos. Se aplica el filtro a cada hijo directo de por separado (excluyendo los dos elementos de este widget) — cada uno se ve en gris, pero ninguno se convierte en el "ancestro con filtro" de los botones flotantes. */ html.tc-a11y-grayscale body > *:not(.tc-a11y-float):not(.tc-a11y-panel) { filter: grayscale(1); } /* Texto grande — 3 pasos */ html.tc-a11y-text-1 body { font-size: 108%; } html.tc-a11y-text-2 body { font-size: 118%; } html.tc-a11y-text-3 body { font-size: 130%; } /* Espaciado de texto */ html.tc-a11y-spacing body, html.tc-a11y-spacing body * { letter-spacing: 0.06em !important; word-spacing: 0.12em !important; line-height: 1.9 !important; } /* Resaltar enlaces */ html.tc-a11y-links a { text-decoration: underline !important; text-decoration-thickness: 2px !important; background: #fff9c4 !important; color: #0f2848 !important; padding: 0 2px; } /* Apto para lectura (aproximación sin depender de una fuente externa: más espaciado, sin cursivas, tipografía sin remates ya presente en el sitio — los principios más citados para facilitar la lectura sin necesitar un archivo de fuente descargado de otro servidor). */ html.tc-a11y-dyslexia body, html.tc-a11y-dyslexia body * { font-family: 'IBM Plex Sans', Arial, sans-serif !important; font-style: normal !important; letter-spacing: 0.04em !important; word-spacing: 0.1em !important; } /* Detener animaciones */ html.tc-a11y-no-motion *, html.tc-a11y-no-motion *::before, html.tc-a11y-no-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* Ocultar imágenes decorativas */ html.tc-a11y-hide-images img { visibility: hidden !important; } /* Texto alineado a la izquierda (nunca justificado/centrado en párrafos) */ html.tc-a11y-align-left p, html.tc-a11y-align-left li, html.tc-a11y-align-left div { text-align: left !important; } /* Cursor grande — flecha negra de mayor tamaño, dibujada en el propio CSS (SVG incrustado como data URI) — no depende de ningún archivo de imagen aparte. */ html.tc-a11y-big-cursor, html.tc-a11y-big-cursor * { cursor: url("data:image/svg+xml;utf8,") 4 4, auto !important; } /* Leyendo en voz alta — resalta el párrafo que se está leyendo */ .tc-a11y-speaking { outline: 3px solid var(--tc-mint, #5bbf9c) !important; outline-offset: 3px; border-radius: 4px; }