/* =========================================================================
   ABADAL — Widget de accesibilidad · estilos + efectos de cada preferencia
   Usa la paleta de shared.css con fallback. Sin dependencias.
   ========================================================================= */

/* ===== Botón flotante (FAB) ===== */
#a11y-fab {
  position: fixed; left: 22px; bottom: 22px; z-index: 8500;
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(26, 26, 26, .78); color: var(--ivory, #F4F1EC);
  border: 1px solid var(--glass-b, rgba(244, 241, 236, .2)); cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4); backdrop-filter: blur(6px);
  transition: transform .25s, background .25s, border-color .25s;
}
#a11y-fab svg { opacity: .8; }
#a11y-fab:hover { transform: translateY(-2px); background: rgba(40, 40, 40, .95); border-color: var(--ivory, #F4F1EC); }
#a11y-fab:hover svg { opacity: 1; }
#a11y-fab:focus-visible { outline: 2px solid var(--gold, #EAC113); outline-offset: 3px; }
@media (max-width: 640px) { #a11y-fab { width: 48px; height: 48px; left: 16px; bottom: 16px; } }

/* ===== Panel ===== */
#a11y-panel {
  position: fixed; left: 22px; bottom: 86px; z-index: 8501;
  width: min(340px, calc(100vw - 32px)); max-height: calc(100vh - 120px); overflow: auto;
  background: var(--ink-2, #1E1E1E); color: var(--ivory, #F4F1EC);
  border: 1px solid var(--glass-b, rgba(244, 241, 236, .14));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
  font-family: var(--sans, 'Manrope', system-ui, sans-serif);
  animation: a11y-pop .28s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes a11y-pop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { #a11y-panel { animation: none; } }
@media (max-width: 640px) { #a11y-panel { left: 16px; bottom: 74px; } }
.a11y-panel__inner { padding: 20px 22px 22px; }
.a11y-panel__head { display: flex; align-items: center; justify-content: space-between; }
.a11y-title { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ivory, #F4F1EC); margin: 0; }
.a11y-x { background: none; border: 0; color: var(--ash, #9a9a96); font-size: 26px; line-height: 1; cursor: pointer; min-width: 40px; min-height: 40px; }
.a11y-x:hover { color: var(--ivory, #F4F1EC); }
.a11y-x:focus-visible, .a11y-step:focus-visible, .a11y-toggle:focus-visible, .a11y-reset:focus-visible,
.a11y-chip:focus-visible, .a11y-cb-opt:focus-visible { outline: 2px solid var(--gold, #EAC113); outline-offset: 2px; }
.a11y-intro { font-size: 12px; line-height: 1.6; color: var(--ash, #9a9a96); margin: 8px 0 18px; }

/* filas con switch */
.a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid var(--glass-b, rgba(244, 241, 236, .12)); }
.a11y-row__label { font-size: 12.5px; color: var(--ivory, #F4F1EC); letter-spacing: .02em; }

.a11y-toggle { position: relative; width: 44px; height: 24px; flex: 0 0 auto; background: #3a3a3a; border: 1px solid var(--glass-b, rgba(244, 241, 236, .14)); cursor: pointer; padding: 0; transition: background .25s; }
.a11y-toggle__ui { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: var(--ivory, #F4F1EC); transition: transform .25s; }
.a11y-toggle[aria-checked="true"] { background: var(--burgundy, #8C1D18); border-color: var(--burgundy, #8C1D18); }
.a11y-toggle[aria-checked="true"] .a11y-toggle__ui { transform: translateX(20px); }

/* tamaño de texto */
.a11y-size { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 4px 0 12px; border-top: 1px solid var(--glass-b, rgba(244, 241, 236, .12)); }
.a11y-size__ctrl { display: flex; align-items: center; gap: 10px; }
.a11y-step { background: none; border: 1px solid var(--glass-b, rgba(244, 241, 236, .2)); color: var(--ivory, #F4F1EC); cursor: pointer; min-width: 38px; min-height: 34px; font-size: 13px; font-family: inherit; }
.a11y-step:hover { border-color: var(--ivory, #F4F1EC); }
.a11y-size__dots { display: inline-flex; gap: 4px; }
.a11y-size__dots i { width: 6px; height: 6px; background: #444; display: block; }
.a11y-size__dots i.on { background: var(--burgundy, #8C1D18); }

.a11y-reset { margin-top: 16px; width: 100%; background: none; border: 1px solid var(--glass-b, rgba(244, 241, 236, .2)); color: var(--ivory, #F4F1EC); cursor: pointer; min-height: 42px; font-family: inherit; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; transition: border-color .25s; }
.a11y-reset:hover { border-color: var(--ivory, #F4F1EC); }

/* =========================================================================
   SECCIÓN DE PERFILES
   ========================================================================= */
.a11y-profiles {
  margin-bottom: 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--glass-b, rgba(244, 241, 236, .18));
}
.a11y-section-title {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ash, #9a9a96); margin: 0 0 4px;
}
.a11y-section-desc {
  font-size: 11px; line-height: 1.5; color: var(--ash, #9a9a96);
  margin: 0 0 12px;
}

/* Chips de perfil */
.a11y-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.a11y-chip {
  background: transparent;
  border: 1px solid var(--glass-b, rgba(244, 241, 236, .25));
  color: var(--ivory, #F4F1EC);
  font-family: inherit; font-size: 11.5px; letter-spacing: .02em;
  padding: 5px 10px; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
  min-height: 32px; display: inline-flex; align-items: center;
}
.a11y-chip:hover {
  background: rgba(244, 241, 236, .08);
  border-color: rgba(244, 241, 236, .5);
}
.a11y-chip[aria-pressed="true"] {
  background: var(--burgundy, #8C1D18);
  border-color: var(--burgundy, #8C1D18);
  color: var(--ivory, #F4F1EC);
}

/* Sub-control daltonismo */
.a11y-cb-sub {
  margin-top: 10px;
}
.a11y-cb-sub[hidden] { display: none; }
.a11y-cb-options {
  display: flex; flex-wrap: wrap; gap: 5px;
}
.a11y-cb-opt {
  background: transparent;
  border: 1px solid var(--glass-b, rgba(244, 241, 236, .2));
  color: var(--ivory, #F4F1EC);
  font-family: inherit; font-size: 11px; letter-spacing: .02em;
  padding: 4px 8px; cursor: pointer; min-height: 28px;
  transition: background .18s, border-color .18s;
  display: inline-flex; align-items: center;
}
.a11y-cb-opt:hover {
  background: rgba(244, 241, 236, .08);
  border-color: rgba(244, 241, 236, .45);
}
.a11y-cb-opt[aria-checked="true"] {
  background: rgba(140, 29, 24, .75);
  border-color: var(--burgundy, #8C1D18);
}

/* =========================================================================
   EFECTOS de cada preferencia (aplicados sobre <html>)
   ========================================================================= */

/* --- Tamaño de texto (escala el font-size raíz) --- */
html[data-a11y-fs="1"] { font-size: 110%; }
html[data-a11y-fs="2"] { font-size: 122%; }
html[data-a11y-fs="3"] { font-size: 138%; }

/* --- Alto contraste: redefine las variables de marca hacia máximo contraste --- */
html.a11y-contrast {
  --ivory: #ffffff; --ivory-d: #f4f4f4; --ash: #d6d6d2;
  --glass-b: rgba(255, 255, 255, .45);
}
html.a11y-contrast body { background: #050505; }
html.a11y-contrast [class*="label"], html.a11y-contrast .footer__legal-links a,
html.a11y-contrast .footer__legal-links button[data-cc-open] { opacity: 1 !important; }

/* --- Resaltar enlaces --- */
html.a11y-links a:not(.btn):not([class*="btn"]):not(.social-item) {
  text-decoration: underline !important; text-underline-offset: 3px;
  text-decoration-thickness: 2px; text-decoration-color: var(--gold, #EAC113);
}

/* --- Espaciado de texto (WCAG 2.2 · 1.4.12) --- */
html.a11y-spacing p, html.a11y-spacing li, html.a11y-spacing a,
html.a11y-spacing span, html.a11y-spacing label, html.a11y-spacing blockquote {
  letter-spacing: .12em !important; word-spacing: .16em !important; line-height: 1.8 !important;
}
html.a11y-spacing p { margin-bottom: 2em !important; }

/* --- Reducir movimiento --- */
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}

/* --- Fuente legible (sin cargar fuentes externas: Verdana/Segoe del sistema) --- */
html.a11y-readable :where(h1, h2, h3, h4, h5, h6, p, a, span, li, button, label, input, textarea, select, blockquote, figcaption, th, td) {
  font-family: Verdana, 'Segoe UI', Tahoma, system-ui, sans-serif !important;
  letter-spacing: normal !important;
}

/* =========================================================================
   EFECTOS DE PERFILES COMPUESTOS
   ========================================================================= */

/* --- TDAH / Concentración: atenúa elementos decorativos, reduce distracción --- */
html.a11y-adhd img:not([alt=""]):not([role="img"]),
html.a11y-adhd figure,
html.a11y-adhd video,
html.a11y-adhd [data-reveal],
html.a11y-adhd [class*="decoration"],
html.a11y-adhd [class*="ornament"],
html.a11y-adhd [class*="bg-pattern"],
html.a11y-adhd [class*="parallax"] {
  opacity: .7 !important;
  /* Sin cambios de layout — conservador */
}
/* Los vídeos autoreproducibles ya quedan parados por a11y-motion (epilepsy/adhd combina motion) */

/* --- Dislexia: realce de legibilidad suave (compatible con .a11y-readable) --- */
html.a11y-dyslexia :where(p, li, blockquote, td, th, label, figcaption) {
  line-height: 1.85 !important;
}
html.a11y-dyslexia :where(p, li, blockquote) {
  word-spacing: .1em !important;
}
/* Contraste de texto ligeramente reforzado cuando no hay a11y-contrast activo */
html.a11y-dyslexia:not(.a11y-contrast) body {
  color: #f0ede8;
}
html.a11y-dyslexia:not(.a11y-contrast) :where(h1, h2, h3, h4, h5, h6) {
  color: #ffffff;
}

/* =========================================================================
   DALTONISMO — filtros de color aplicados a body, excluyendo panel y FAB
   Las clases van en <html> pero el filtro se aplica a body para que
   #a11y-panel y #a11y-fab (que son hijos de body) puedan quedar excluidos
   mediante sus propios filter:none.
   ========================================================================= */

html.a11y-cb-prot body { filter: url(#a11y-filter-prot); }
html.a11y-cb-deut body { filter: url(#a11y-filter-deut); }
html.a11y-cb-trit body { filter: url(#a11y-filter-trit); }

/* El panel y el FAB deben excluirse del filtro de daltonismo para que
   el usuario pueda seguir leyendo las opciones con colores reales.
   filter:none crea un nuevo stacking context — mantenemos z-index. */
html.a11y-cb-prot #a11y-panel,
html.a11y-cb-deut #a11y-panel,
html.a11y-cb-trit #a11y-panel,
html.a11y-cb-prot #a11y-fab,
html.a11y-cb-deut #a11y-fab,
html.a11y-cb-trit #a11y-fab,
html.a11y-cb-prot #a11y-cb-svg,
html.a11y-cb-deut #a11y-cb-svg,
html.a11y-cb-trit #a11y-cb-svg {
  filter: none !important;
}

/* Los controles de cookies cuelgan de <html> (no de body), así que el filtro de
   daltonismo no los alcanza; esta exclusión es un refuerzo defensivo extra. */
html.a11y-cb-prot #abadal-cc, html.a11y-cb-deut #abadal-cc, html.a11y-cb-trit #abadal-cc,
html.a11y-cb-prot #cc-fab, html.a11y-cb-deut #cc-fab, html.a11y-cb-trit #cc-fab {
  filter: none !important;
}