/** * Estilos de accesibilidad — Sinergia web-quality toolkit * Importar en globals.css: @import "./a11y.css"; (o copiar a components/a11y/a11y.css) * * No altera el diseño por defecto. Solo actúa con clases en * aplicadas por AccessibilityPanel, o al :focus-visible del teclado. */ /* ── Skip link ─────────────────────────────────────────────── */ .a11y-skip-link { position: absolute; left: 0.75rem; top: 0.75rem; z-index: 10000; padding: 0.65rem 1rem; background: #0f172a; color: #fff; font-weight: 600; border-radius: 0.5rem; text-decoration: none; transform: translateY(-150%); transition: transform 0.15s ease; } .a11y-skip-link:focus, .a11y-skip-link:focus-visible { transform: translateY(0); outline: 3px solid #38bdf8; outline-offset: 2px; } /* ── FAB + panel ───────────────────────────────────────────── */ .a11y-fab { position: fixed; bottom: 1.25rem; z-index: 9990; display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } .a11y-fab--right { right: 1.25rem; } .a11y-fab--left { left: 1.25rem; align-items: flex-start; } .a11y-fab__btn { width: 3.25rem; height: 3.25rem; border-radius: 9999px; border: 2px solid transparent; background: #0f172a; color: #f8fafc; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.35); cursor: pointer; display: grid; place-items: center; transition: transform 0.15s ease, box-shadow 0.15s ease; } .a11y-fab__btn:hover { transform: scale(1.05); } .a11y-fab__btn:focus-visible { outline: 3px solid #38bdf8; outline-offset: 3px; } .a11y-fab__btn[aria-expanded="true"] { background: #0369a1; } .a11y-panel { width: min(20rem, calc(100vw - 2rem)); max-height: min(70vh, 28rem); overflow: auto; background: #fff; color: #0f172a; border: 1px solid #e2e8f0; border-radius: 0.85rem; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.2); padding: 0.85rem; } .a11y-panel__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.65rem; font-size: 0.95rem; } .a11y-panel__close { border: 0; background: transparent; font-size: 1.4rem; line-height: 1; cursor: pointer; color: inherit; padding: 0.15rem 0.4rem; } .a11y-panel__row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin: 0.45rem 0; font-size: 0.875rem; } .a11y-panel__btns { display: flex; gap: 0.25rem; } .a11y-panel__btns button { min-width: 2.25rem; padding: 0.35rem 0.45rem; border: 1px solid #cbd5e1; border-radius: 0.4rem; background: #f8fafc; cursor: pointer; font-weight: 600; } .a11y-panel__btns button:focus-visible, .a11y-toggle input:focus-visible, .a11y-panel__reset:focus-visible, .a11y-panel__close:focus-visible { outline: 3px solid #0284c7; outline-offset: 2px; } .a11y-toggle { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin: 0.4rem 0; font-size: 0.875rem; cursor: pointer; } .a11y-toggle input { width: 1.15rem; height: 1.15rem; accent-color: #0369a1; } .a11y-panel__reset { width: 100%; margin-top: 0.65rem; padding: 0.5rem; border-radius: 0.5rem; border: 1px solid #cbd5e1; background: #f1f5f9; cursor: pointer; font-weight: 600; font-size: 0.85rem; } /* ── Preferencias activas en ────────────────────────── */ html.a11y-high-contrast, html.a11y-high-contrast body { background: #000 !important; color: #fff !important; } html.a11y-high-contrast a { color: #ffe600 !important; } html.a11y-high-contrast img, html.a11y-high-contrast video { filter: grayscale(1) contrast(1.2); } html.a11y-high-contrast .a11y-panel { background: #111; color: #fff; border-color: #fff; } html.a11y-underline-links a { text-decoration: underline !important; text-underline-offset: 0.15em; } html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } html.a11y-readable-font, html.a11y-readable-font body { font-family: Comic Sans MS, "Comic Sans", Arial, Verdana, sans-serif !important; letter-spacing: 0.04em; word-spacing: 0.08em; line-height: 1.65 !important; } /* Foco potenciado (también respeta :focus-visible por defecto) */ html.a11y-enhanced-focus :focus-visible { outline: 3px solid #0284c7 !important; outline-offset: 3px !important; } /* Respeto a prefers-reduced-motion del SO aunque no se abra el panel */ @media (prefers-reduced-motion: reduce) { html:not(.a11y-reduce-motion) *, html:not(.a11y-reduce-motion) *::before, html:not(.a11y-reduce-motion) *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Ancla de contenido: evita que el header fijo tape el foco del skip-link */ #main-content, main[id="main-content"] { scroll-margin-top: 5rem; }