/* ==========================================================================
   SICEJ · Estilos del centro de accesibilidad
   Los ajustes se activan con atributos data-a11y-* en <html> (ver js/a11y.js)
   ========================================================================== */

/* ---------- tipografías ---------- */
html[data-a11y-font="readable"] body, html[data-a11y-font="readable"] body :is(h1, h2, h3, h4, button, input, select, textarea, summary) { font-family: 'Atkinson Hyperlegible', 'Public Sans', system-ui, sans-serif !important; }
html[data-a11y-font="dyslexic"] body, html[data-a11y-font="dyslexic"] body :is(h1, h2, h3, h4, button, input, select, textarea, summary) { font-family: 'Lexend', 'Atkinson Hyperlegible', system-ui, sans-serif !important; }
html[data-a11y-font]:not([data-a11y-font="default"]) .mono, html[data-a11y-font]:not([data-a11y-font="default"]) .case-code { font-family: 'JetBrains Mono', ui-monospace, monospace !important; }

/* ---------- espaciado ---------- */
html[data-a11y-spacing] body * { letter-spacing: var(--a-ls) !important; word-spacing: var(--a-ws) !important; }
html[data-a11y-lh] body :is(p, li, dd, dt, td, th, label, span, a, summary, .msg__b, small) { line-height: var(--a-lh) !important; }
html[data-a11y-align] body * { text-align: left !important; }

/* ---------- contraste alto ---------- */
html[data-a11y-contrast="dark"] { --hc-bg: #000; --hc-fg: #fff; --hc-link: #ffe14d; --hc-bd: #fff; --hc-sel: #ffe14d; }
html[data-a11y-contrast="yellow"] { --hc-bg: #000; --hc-fg: #ffe14d; --hc-link: #ffffff; --hc-bd: #ffe14d; --hc-sel: #ffe14d; }
html[data-a11y-contrast="light"] { --hc-bg: #fff; --hc-fg: #000; --hc-link: #0000b8; --hc-bd: #000; --hc-sel: #000; }

html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"], [data-a11y-contrast="light"]) body::before { display: none; }
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"], [data-a11y-contrast="light"]) body,
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"], [data-a11y-contrast="light"]) body * {
  background-color: var(--hc-bg) !important; background-image: none !important; color: var(--hc-fg) !important;
  border-color: var(--hc-bd) !important; box-shadow: none !important; text-shadow: none !important; filter: none !important;
  -webkit-text-fill-color: currentColor !important; text-decoration-color: currentColor;
}
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"], [data-a11y-contrast="light"]) body :is(a, a *, .crumbs__btn) { color: var(--hc-link) !important; text-decoration: underline !important; }
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"], [data-a11y-contrast="light"]) body :is(button, .btn, input, select, textarea, .icon-btn, .chip, .tbtn, .fab, .preset) { border: 2px solid var(--hc-bd) !important; }
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"], [data-a11y-contrast="light"]) body :is([aria-selected="true"], [aria-checked="true"]:not(.sw), [aria-current], .on, .btn--primary, .btn--gold, .pill--st, .count, .tag) { background-color: var(--hc-sel) !important; color: var(--hc-bg) !important; -webkit-text-fill-color: var(--hc-bg) !important; }
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"], [data-a11y-contrast="light"]) body :is([aria-selected="true"], .btn--primary, .btn--gold, .on) * { color: var(--hc-bg) !important; -webkit-text-fill-color: var(--hc-bg) !important; background-color: transparent !important; }
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"], [data-a11y-contrast="light"]) body .sw { background-color: var(--hc-bg) !important; border: 2px solid var(--hc-bd) !important; }
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"], [data-a11y-contrast="light"]) body .sw i { background-color: var(--hc-fg) !important; }
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"], [data-a11y-contrast="light"]) body .sw[aria-checked="true"] { background-color: var(--hc-sel) !important; }
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"], [data-a11y-contrast="light"]) body .sw[aria-checked="true"] i { background-color: var(--hc-bg) !important; }
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"], [data-a11y-contrast="light"]) body .pg { background-color: #fff !important; }
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"], [data-a11y-contrast="light"]) body :is(canvas, img) { background-color: #fff !important; }
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"], [data-a11y-contrast="light"]) body :is(.splash__bg, .modal__backdrop, .lock__bg) { background-color: #000 !important; }
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"], [data-a11y-contrast="light"]) body :is(.splash__bg *, .orb, .topbar__tex, .case-hero__tex, .ai-card__bg) { display: none !important; }
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"], [data-a11y-contrast="light"]) body :focus-visible { outline: 4px solid var(--hc-link) !important; outline-offset: 3px !important; }
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"], [data-a11y-contrast="light"]) .i, html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"], [data-a11y-contrast="light"]) svg { stroke: currentColor; }
/* invertir: las imágenes y el PDF conservan su aspecto original */
html[data-a11y-contrast="invert"] :is(img, canvas, video) { filter: invert(1) hue-rotate(180deg); }

/* ---------- resaltar enlaces / títulos ---------- */
html[data-a11y-links] body :is(a, .crumbs__btn):not(.skip) { background: #fff3a8 !important; color: #0b2a8a !important; text-decoration: underline 3px !important; text-underline-offset: 3px; padding-inline: .2em; border-radius: 4px; -webkit-text-fill-color: #0b2a8a !important; }
html[data-a11y-links] body :is(button, summary, [role="tab"]):not(.sw):not(.fab):not(.tbtn) { outline: 2px dashed #12338f; outline-offset: 2px; }
html[data-a11y-heads] body :is(h1, h2, h3, h4):not(.case-code):not(.splash__title) { background: #fff3a8 !important; color: #241800 !important; -webkit-text-fill-color: #241800 !important; border-left: 7px solid #12338f; padding: .2em .5em; border-radius: 4px; }
html[data-a11y-heads] body .splash__acr, html[data-a11y-heads] body .splash__sub { outline: 3px dashed #ffd24a; outline-offset: 6px; }

/* ---------- foco / objetivos táctiles / cursor ---------- */
html[data-a11y-focus] body :focus-visible { outline: 5px solid #ffcf00 !important; outline-offset: 3px !important; box-shadow: 0 0 0 8px #000 !important; border-radius: 6px; }
html[data-a11y-targets] body :is(button, .btn, input, select, textarea, summary, [role="tab"], [role="radio"], .icon-btn, .tbtn, .chip) { min-height: 52px; min-width: 52px; }
html[data-a11y-targets] body :is(.pager button, .seg__in) { min-width: 52px; }
html[data-a11y-targets] body :is(a):not(.skip):not(.brand) { padding-block: .35em; display: inline-block; }
html[data-a11y-targets] body :is(.navbar a, .navbar button) { min-height: 56px; }
html[data-a11y-targets] body :is(.sw) { min-width: 62px; min-height: 36px; width: 62px; height: 36px; } html[data-a11y-targets] body .sw i { width: 30px; height: 30px; } html[data-a11y-targets] body .sw[aria-checked="true"] i { transform: translateX(26px); }

html[data-a11y-cursor], html[data-a11y-cursor] body, html[data-a11y-cursor] body * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 9-6.5 1.8L9.5 19z' fill='%23000' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto !important; }
html[data-a11y-cursor] body :is(a, button, [role="button"], [role="tab"], [role="radio"], [role="switch"], select, summary, label, input[type="range"], .ph, .th), html[data-a11y-cursor] body :is(a, button, summary, label, select) * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 9-6.5 1.8L9.5 19z' fill='%23ffcf00' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, pointer !important; }

/* ---------- movimiento / imágenes ---------- */
html[data-a11y-motion] *, html[data-a11y-motion] *::before, html[data-a11y-motion] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-a11y-motion] .reveal { opacity: 1 !important; transform: none !important; }
html[data-a11y-motion] .toast { opacity: 1; transform: none; }
html[data-a11y-motion] .pg:not(.ready)::after { display: none; }
html[data-a11y-motion] .timer__bar { transition: none !important; }
html[data-a11y-images] body { background-image: none; }
html[data-a11y-images] :is(.orb, .rosette, .splash__grain, .splash__vignette, .topbar__tex, .case-hero__tex, .ai-card__bg, .ribbon__track span::after) { display: none !important; }
html[data-a11y-images] img { visibility: hidden; }
html[data-a11y-images] .ph { background: var(--r-100); }

/* ---------- guías de lectura ---------- */
#a11y-ruler { position: fixed; left: 0; right: 0; top: calc(var(--ry, 50vh) - 1.3rem); height: 2.6rem; z-index: 3500; pointer-events: none; display: none; background: rgba(255, 230, 80, .26); border-block: 2px solid #ffb800; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
#a11y-ruler.on { display: block; }
#a11y-mask { position: fixed; inset: 0; z-index: 3490; pointer-events: none; display: none; }
#a11y-mask.on { display: block; }
#a11y-mask i { position: absolute; left: 0; right: 0; background: rgba(0, 0, 0, .74); }
#a11y-mask .m-top { top: 0; height: calc(var(--ry, 50vh) - 1.7rem); }
#a11y-mask .m-bot { top: calc(var(--ry, 50vh) + 1.7rem); bottom: 0; }