/* ============================================================ Widget de Accesibilidad — Paleta Dorada ============================================================ */ /* Fuente OpenDyslexic (libre, sin servidor externo) */ @font-face { font-family: 'OpenDyslexic'; src: url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/fonts/OpenDyslexic-Regular.otf') format('opentype'); font-weight: normal; font-style: normal; } /* ── Modos globales aplicados al ─────────────────── */ /* NO se aplica el filter directo a "body" a propósito: filter en un ancestro lo convierte en el "containing block" de cualquier descendiente position:fixed (mismo efecto secundario que transform), así que el FAB/panel (fixed, hijos directos de ) dejarían de anclarse al viewport y terminarían pegados al fondo del documento en vez de flotar fijos en la esquina. Se filtra cada hijo directo de body EXCEPTO el propio widget. */ body.acc-grayscale > *:not(#acc-fab):not(#acc-panel) { filter: grayscale(1); } /* El FAB y el panel SÍ pueden llevar el filtro directo en sí mismos — el problema de containing-block que rompe position:fixed es con los DESCENDIENTES de un elemento filtrado, no con el elemento filtrado en sí. Ninguno de los dos tiene descendientes fixed, así que esto es seguro y así el botón/panel también se ven en gris cuando el modo está activo, en vez de quedar como la única isla a color. */ body.acc-grayscale #acc-fab, body.acc-grayscale #acc-panel { filter: grayscale(1); } body.acc-contrast { background: #000 !important; color: #FFD700 !important; } body.acc-contrast a { color: #FFE97F !important; } body.acc-contrast img { filter: contrast(1.5) brightness(0.9); } body.acc-dyslexia, body.acc-dyslexia p, body.acc-dyslexia span, body.acc-dyslexia li, body.acc-dyslexia td, body.acc-dyslexia h1, body.acc-dyslexia h2, body.acc-dyslexia h3, body.acc-dyslexia h4 { font-family: 'OpenDyslexic', sans-serif !important; letter-spacing: 0.05em; word-spacing: 0.1em; line-height: 1.8; } body.acc-underline p, body.acc-underline li, body.acc-underline td, body.acc-underline span { text-decoration: underline; text-underline-offset: 4px; } /* Espaciado de texto — valores mínimos de WCAG 2.1 SC 1.4.12 (Text Spacing): interlineado >= 1.5x, espacio entre párrafos >= 2x el tamaño de fuente, espaciado de letras >= 0.12x, espaciado de palabras >= 0.16x. */ body.acc-spacing, body.acc-spacing p, body.acc-spacing li, body.acc-spacing td, body.acc-spacing span { line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important; } body.acc-spacing p { margin-bottom: 2em !important; } /* Detener animaciones — WCAG 2.2.2 (Pause, Stop, Hide): cualquier transición/animación CSS y el scroll-behavior suave quedan congeladas mientras el modo está activo. No pausa video/audio HTML5 embebido (eso requeriría JS por reproductor, fuera del alcance de este widget genérico). */ body.acc-noanim *, body.acc-noanim *::before, body.acc-noanim *::after { animation-play-state: paused !important; animation-duration: 0s !important; transition: none !important; scroll-behavior: auto !important; } /* Resaltar enlaces — WCAG 1.4.1 (Use of Color): no depender solo del color para distinguir un enlace del texto normal. */ body.acc-linkshl a { text-decoration: underline !important; text-decoration-thickness: 2px !important; background: #fff3b0 !important; color: #000 !important; outline: 1px solid #8B6914; } /* Foco de teclado visible — WCAG 2.4.7 (Focus Visible): asegura un contorno visible al navegar con Tab, incluso si el sitio lo quitó con outline:none en su propio CSS. */ body.acc-focusvisible *:focus { outline: 3px solid #C9960C !important; outline-offset: 2px !important; } /* ── Botón flotante ─────────────────────────────────────── */ #acc-fab { position: fixed; bottom: 24px; left: 24px; z-index: 9999; width: 54px; height: 54px; border-radius: 50%; /* ============================================================ COLOR DEL BOTÓN FLOTANTE Cambia estos valores para modificar el color de fondo del botón circular que aparece en la esquina inferior. ============================================================ */ background: linear-gradient(135deg, #8B6914, #C9960C); border: 2px solid #E8B425; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(139, 105, 20, 0.45); transition: background 0.2s, transform 0.15s; padding: 0; overflow: hidden; /* necesario si usas imagen en lugar de SVG */ } #acc-fab:hover { /* ============================================================ COLOR DEL BOTÓN AL PASAR EL MOUSE (hover) ============================================================ */ background: linear-gradient(135deg, #C9960C, #E8B425); transform: scale(1.07); } /* ── Imagen personalizada dentro del botón ────────────────── Si decides reemplazar el ícono SVG por una imagen propia, descomenta y ajusta estas reglas: #acc-fab img { width: 36px; height: 36px; object-fit: contain; } ────────────────────────────────────────────────────────────── */ /* ── Panel ──────────────────────────────────────────────── */ #acc-panel { position: fixed; bottom: 90px; left: 24px; z-index: 9998; width: 245px; /* Con 10+ controles el panel ya no cabe completo en pantallas chicas (celular) — sin este límite se desbordaba por ARRIBA del viewport en vez de hacer scroll interno, tapando media pantalla y cortando hasta el título. max-height relativo al alto de pantalla + scroll propio, nunca más grande que la ventana. */ max-height: min(70vh, 520px); overflow-y: auto; background: #fffdf5; border: 1px solid #e8d5a0; border-top: 3px solid #C9960C; /* línea dorada en la parte superior del panel */ border-radius: 14px; padding: 14px; display: none; flex-direction: column; gap: 6px; box-shadow: 0 8px 24px rgba(139, 105, 20, 0.18); font-family: Arial, sans-serif; } #acc-panel.open { display: flex; } .acc-panel-title { font-size: 13px; font-weight: 700; /* ============================================================ COLOR DEL TÍTULO DEL PANEL ("Accesibilidad") ============================================================ */ color: #8B6914; padding-bottom: 8px; border-bottom: 1px solid #e8d5a0; margin-bottom: 2px; display: flex; align-items: center; gap: 6px; } .acc-info-btn { margin-left: auto; background: none; border: none; padding: 2px; cursor: pointer; display: flex; align-items: center; border-radius: 4px; } .acc-info-btn:hover { background: #fef3cc; } .acc-info-box { font-size: 11px; color: #8B6914; background: #fef3cc; border-radius: 6px; padding: 5px 8px; margin-bottom: 2px; text-align: center; line-height: 1.4; } .acc-info-box strong { font-size: 12px; } .acc-info-box span { display: block; opacity: 0.85; } .acc-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; border: none; background: transparent; width: 100%; text-align: left; color: #3a2800; font-size: 13px; font-family: Arial, sans-serif; transition: background 0.15s; } .acc-item:hover { background: #fef3cc; } .acc-item.active { /* ============================================================ COLOR DEL BOTÓN CUANDO ESTÁ ACTIVADO ============================================================ */ background: #fff3cd; color: #8B6914; font-weight: 600; border-left: 3px solid #C9960C; } .acc-item svg { width: 20px; height: 20px; flex-shrink: 0; /* ============================================================ COLOR DE LOS ÍCONOS SVG DE CADA BOTÓN ============================================================ */ fill: #C9960C; } .acc-item.active svg { fill: #8B6914; } /* Controles de lector de voz */ .acc-voice-controls { display: flex; gap: 6px; margin-top: 2px; } .acc-voice-btn { flex: 1; padding: 7px 4px; border-radius: 8px; border: 1px solid #e8d5a0; background: transparent; color: #3a2800; font-size: 12px; cursor: pointer; font-family: Arial, sans-serif; display: flex; align-items: center; justify-content: center; gap: 4px; transition: background 0.15s; } .acc-voice-btn:hover { background: #fef3cc; } .acc-voice-btn.playing { background: #fff3cd; color: #8B6914; border-color: #C9960C; } .acc-voice-btn:disabled { opacity: 0.35; cursor: not-allowed; } .acc-voice-btn svg { width: 14px; height: 14px; fill: currentColor; } .acc-font-row { display: flex; gap: 6px; } .acc-font-row button { flex: 1; padding: 7px; border-radius: 8px; border: 1px solid #e8d5a0; background: transparent; color: #3a2800; font-size: 14px; font-weight: 600; cursor: pointer; font-family: Arial, sans-serif; transition: background 0.15s; } .acc-font-row button:hover { background: #fef3cc; } .acc-reset { margin-top: 6px; padding: 9px; border-radius: 8px; /* ============================================================ COLOR DEL BOTÓN "RESTABLECER TODO" ============================================================ */ background: linear-gradient(135deg, #8B6914, #C9960C); color: #fff; border: none; cursor: pointer; font-size: 13px; font-family: Arial, sans-serif; font-weight: 600; width: 100%; transition: background 0.2s; } .acc-reset:hover { background: linear-gradient(135deg, #C9960C, #E8B425); color: #2c1f05; } .acc-status { font-size: 11px; color: #a07820; text-align: center; min-height: 16px; } /* El botón flotante y su panel no deben aparecer en ninguna hoja impresa de ningún sitio que use este widget — no aportan nada al documento impreso y en varios navegadores quedan flotando encima del contenido. */ @media print { #acc-fab, #acc-panel { display: none !important; } }