/* * accesibilidad.css — PNSR * Menú de accesibilidad flotante + modos de contraste * * REGLA CLAVE: todos los modos se aplican como clase en * y definen SIEMPRE el par fondo + texto juntos. * Nunca se manipula style="" inline desde JS para colores. */ /* ── Botón flotante de accesibilidad ─────────────────────── */ .btn-accesibilidad { position: fixed; top: 60px; right: 24px; z-index: 9000; width: 56px; height: 56px; border-radius: 50%; background-color: #003366; color: #ffffff; border: 3px solid #ffffff; font-size: 24px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.30); display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease, transform 0.15s ease; } .btn-accesibilidad:hover { background-color: #002244; transform: scale(1.08); } .btn-accesibilidad:focus-visible { outline: 3px solid #E3000F; outline-offset: 3px; } /* ── Panel del menú ──────────────────────────────────────── */ .menu-accesibilidad { position: fixed; top: 120px; right: 24px; z-index: 9001; width: 280px; background: #ffffff; border: 2px solid #003366; border-radius: 12px; padding: 20px; box-shadow: 0 8px 24px rgba(0,0,0,0.20); display: none; /* JS controla visibilidad */ font-family: 'Poppins', system-ui, sans-serif; } .menu-accesibilidad.abierto { display: block; } /* Botones dentro del menú */ .menu-accesibilidad button { min-height: 40px; min-width: 40px; padding: 6px 12px; border: 2px solid #003366; border-radius: 6px; background: #ffffff; color: #003366; /* ratio 12.6:1 ✓ AAA */ font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease; } .menu-accesibilidad button:hover { background-color: #E8EEF5; } .menu-accesibilidad button:focus-visible { outline: 3px solid #A50009; outline-offset: 2px; } /* Botón guardar */ .menu-accesibilidad .btn-guardar { background-color: #003366; color: #ffffff; border-color: #003366; } .menu-accesibilidad .btn-guardar:hover { background-color: #002244; } /* Botón restablecer */ .menu-accesibilidad .btn-reset { background-color: #A50009; color: #ffffff; border-color: #A50009; } .menu-accesibilidad .btn-reset:hover { background-color: #8B0007; } /* ── Máscara de lectura ───────────────────────────────────── */ /*.mascara-lectura { display: none; position: fixed; left: 0; right: 0; height: 40px; background: rgba(0, 51, 102, 0.15); border-top: 2px solid #003366; border-bottom: 2px solid #003366; pointer-events: none; z-index: 8999; }*/ .mascara-lectura { position: fixed; top: 0; left: 0; width: 100%; height: 26px; background: rgba(255, 235, 80, 0.45); border-top: 2px solid #ffcc00; border-bottom: 2px solid #ffcc00; pointer-events: none; z-index: 9998; display: none; } /* ════════════════════════════════════════════════════════════ MODOS DE ACCESIBILIDAD Se activan añadiendo una clase a . CADA modo define SIEMPRE fondo + texto en el mismo bloque para evitar el bug "texto blanco sobre fondo blanco". ════════════════════════════════════════════════════════════ */ /* ── 1. Alto contraste (negro/amarillo) ───────────────────── */ /* Ratio amarillo #FFFF00 sobre negro #000000 = 19.6:1 ✓ AAA Se aplica con !important para ganar sobre estilos inline del ASPX (Bootstrap, GridView, etc.) */ html.contraste-alto, html.contraste-alto body { background-color: #000000 !important; color: #FFFF00 !important; } html.contraste-alto * { background-color: #000000 !important; color: #FFFF00 !important; border-color: #FFFF00 !important; text-shadow: none !important; box-shadow: none !important; } html.contraste-alto a, html.contraste-alto a:visited { color: #FFFF00 !important; text-decoration: underline !important; } html.contraste-alto button, html.contraste-alto input, html.contraste-alto select, html.contraste-alto textarea { background-color: #000000 !important; color: #FFFF00 !important; border: 2px solid #FFFF00 !important; outline: none !important; } html.contraste-alto button:focus-visible, html.contraste-alto input:focus-visible, html.contraste-alto select:focus-visible, html.contraste-alto [tabindex]:focus-visible { outline: 3px solid #FFFF00 !important; outline-offset: 2px !important; } html.contraste-alto img { filter: grayscale(100%) contrast(120%); } /* Tabla en alto contraste */ html.contraste-alto table, html.contraste-alto th, html.contraste-alto td { border: 1px solid #FFFF00 !important; } html.contraste-alto thead th { background-color: #000000 !important; color: #FFFF00 !important; } html.contraste-alto tbody tr:nth-child(even) td { background-color: #111111 !important; } /* ── 2. Alto contraste claro (negro sobre blanco) ─────────── */ /* Ratio negro #000000 sobre blanco #FFFFFF = 21:1 ✓ AAA máximo */ html.contraste-claro, html.contraste-claro body { background-color: #FFFFFF !important; color: #000000 !important; } html.contraste-claro * { background-color: #FFFFFF !important; color: #000000 !important; border-color: #000000 !important; text-shadow: none !important; box-shadow: none !important; } html.contraste-claro a, html.contraste-claro a:visited { color: #00008B !important; /* azul oscuro ratio 10:1 ✓ AAA */ text-decoration: underline !important; } html.contraste-claro button, html.contraste-claro input, html.contraste-claro select, html.contraste-claro textarea { background-color: #FFFFFF !important; color: #000000 !important; border: 2px solid #000000 !important; } html.contraste-claro button:focus-visible, html.contraste-claro [tabindex]:focus-visible { outline: 3px solid #000000 !important; outline-offset: 2px !important; } /* ── 3. Fuente para dislexia ─────────────────────────────── */ html.fuente-dislexia, html.fuente-dislexia body, html.fuente-dislexia * { font-family: 'Comic Sans MS', 'OpenDyslexic', cursive !important; letter-spacing: 0.12em !important; word-spacing: 0.20em !important; line-height: 1.8 !important; } /* ── 4. Espaciado de letras aumentado ────────────────────── */ html.espaciado-letras * { letter-spacing: 0.15em !important; word-spacing: 0.25em !important; } /* ── 5. Interlineado aumentado ───────────────────────────── */ html.interlineado-alto * { line-height: 2.2 !important; } /* ── 6. Cursor grande ────────────────────────────────────── */ html.cursor-grande, html.cursor-grande * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M8 2 L8 26 L14 20 L18 30 L22 28 L18 18 L26 18 Z' fill='%23000' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 0 0, auto !important; } /* ── Tamaño de texto base (controlado por JS con data-attr) ─ */ html[data-fontsize="grande"] body { font-size: 18px !important; } html[data-fontsize="muy-grande"] body { font-size: 22px !important; } html[data-fontsize="pequeño"] body { font-size: 13px !important; } /* ------------------------------------*/ a { color: #204d74; /* ~8.8:1 on white */ } /* forestgreen icon independently fails even AA — needs darkening regardless of the text issue */ #lnkDownload i, .fa-download { color: #1c6b1c; /* darker forest green, ~7.1:1 on white */ } /*login*/ /* Contraste AAA - colores de texto Bootstrap */ .text-success { color: #155724; } .text-primary { color: #204d74; } .text-danger { color: #842029; } small, .text-muted { color: #595959; } /* Botones */ .btn-primary { background-color: #204d74; border-color: #204d74; } .btn-warning { color: #212529; } .btn-info { background-color: #155263; border-color: #155263; } .btn-success-x1 { color: #fff; background-color: #155c40; /* verde bosque oscuro */ border-color: #155c40; } .btn-danger { background-color: #a02622; border-color: #a02622; } /* Header del panel */ .panel-primary > .panel-heading { background-color: #204d74; border-color: #204d74; } /* Alertas */ .alert-warning { color: #5c4316; } /* --- Placeholders de inputs/textarea: gris por defecto de Bootstrap 3 (~#999, ~2.85:1) no cumple AA --- */ .form-control::placeholder { color: #595959 !important; opacity: 1; } #warning .close { color: #533f03 !important; opacity: 1; } #warning .close:hover { color: #533f03 !important; opacity: 0.85; } /* También para los contadores de caracteres */ input.contador { color: #4A4A4A !important; background-color: #F5F7FA !important; } /* Update your placeholder styling */ input::placeholder, textarea::placeholder { color: #533f03; /* Darker gray - passes 4.5:1 */ opacity: 1; /* Override default browser transparency */ } /* Update standard input/textarea text color */ .form-control, textarea { color: #533f03; /* Dark gray text */ background-color: #ffffff; /* White background */ }