/* ── Panel de Accesibilidad ─────────────────────────────────────────────────── Clases aplicadas a . Persisten en localStorage clave 'ac_a11y'. Compatible con main.css (rem-based) y Tailwind (px-fixed) en index.html. */ /* ── Tamaño de texto ──────────────────────────────────────────────────────── */ html.a11y-lg { font-size: 21px; } html.a11y-xl { font-size: 25px; } /* Overrides para páginas Tailwind que usan px fijos */ html.a11y-lg .text-body-md { font-size: 24px !important; line-height: 38px !important; } html.a11y-lg .text-body-lg { font-size: 26px !important; line-height: 40px !important; } html.a11y-lg .text-label-lg { font-size: 22px !important; } html.a11y-xl .text-body-md { font-size: 28px !important; line-height: 44px !important; } html.a11y-xl .text-body-lg { font-size: 30px !important; line-height: 46px !important; } html.a11y-xl .text-label-lg { font-size: 26px !important; } /* ── Alto contraste ───────────────────────────────────────────────────────── */ html.a11y-contrast { --color-text: #000000; --color-bg: #ffffff; --color-muted: #1a1a1a; --color-border: #000000; --color-primary: #00008b; filter: contrast(1.15); } /* ── Reducir animaciones ──────────────────────────────────────────────────── */ html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } /* ── Subrayar enlaces ─────────────────────────────────────────────────────── */ html.a11y-links a { text-decoration: underline !important; } /* ── Panel UI ─────────────────────────────────────────────────────────────── */ #a11y-panel { position: fixed; top: 64px; right: 16px; z-index: 9999; width: 320px; max-width: calc(100vw - 32px); background: #ffffff; border: 2px solid #1a4fa0; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.22); padding: 0; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 16px; color: #1a1a2e; } #a11y-panel[hidden] { display: none; } .a11y-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 12px; border-bottom: 1px solid #d1d5db; font-weight: 700; font-size: 17px; } .a11y-panel-close { background: none; border: none; cursor: pointer; font-size: 22px; line-height: 1; color: #4b5563; padding: 4px 6px; border-radius: 6px; min-width: 36px; min-height: 36px; } .a11y-panel-close:hover { background: #f3f4f6; color: #1a1a2e; } .a11y-panel-close:focus-visible { outline: 3px solid #1a4fa0; outline-offset: 2px; } .a11y-section { padding: 14px 16px; border-bottom: 1px solid #f3f4f6; } .a11y-section:last-child { border-bottom: none; } .a11y-section-label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; margin-bottom: 10px; } /* Grupo de botones de tamaño */ .a11y-size-group { display: flex; gap: 8px; } .a11y-size-btn { flex: 1; padding: 10px 6px; border: 2px solid #d1d5db; border-radius: 8px; background: #f9fafb; cursor: pointer; font-family: inherit; font-weight: 500; transition: all .15s; min-height: 48px; text-align: center; } .a11y-size-btn:hover { border-color: #1a4fa0; background: #e8f0fe; } .a11y-size-btn:focus-visible { outline: 3px solid #1a4fa0; outline-offset: 2px; } .a11y-size-btn[aria-pressed="true"] { border-color: #1a4fa0; background: #1a4fa0; color: #ffffff; font-weight: 700; } /* Filas de toggle */ .a11y-toggle-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; } .a11y-toggle-row + .a11y-toggle-row { border-top: 1px solid #f3f4f6; } .a11y-toggle-label { font-size: 15px; } .a11y-toggle { position: relative; width: 52px; height: 28px; flex-shrink: 0; } .a11y-toggle input { opacity: 0; width: 0; height: 0; } .a11y-toggle-track { position: absolute; inset: 0; background: #d1d5db; border-radius: 28px; cursor: pointer; transition: background .2s; } .a11y-toggle-track::before { content: ''; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px; background: #ffffff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 4px rgba(0,0,0,.2); } .a11y-toggle input:checked + .a11y-toggle-track { background: #1a4fa0; } .a11y-toggle input:checked + .a11y-toggle-track::before { transform: translateX(24px); } .a11y-toggle input:focus-visible + .a11y-toggle-track { outline: 3px solid #1a4fa0; outline-offset: 2px; } /* Botón reset */ .a11y-reset-btn { width: 100%; padding: 12px; background: #f3f4f6; border: 2px solid #d1d5db; border-radius: 8px; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: all .15s; min-height: 48px; } .a11y-reset-btn:hover { background: #e5e7eb; border-color: #9ca3af; } .a11y-reset-btn:focus-visible { outline: 3px solid #1a4fa0; outline-offset: 2px; }