/* ============================================================
   ACCESSIBILITY PANEL — Loop
   Botón flotante + panel de ajustes. Hereda los tokens del
   tema (styles.css); solo define el widget y los modos.
   ============================================================ */

/* OpenDyslexic (SIL OFL, ver assets/fonts/OFL-opendyslexic.txt).
   Se descarga solo si el usuario activa la fuente para dislexia. */
@font-face {
  font-family: "OpenDyslexic";
  src: url("./fonts/opendyslexic-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "OpenDyslexic";
  src: url("./fonts/opendyslexic-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --a11y-base: 1.25rem;
  --a11y-raise: 0px;
  --a11y-btn-size: 3rem;
  --a11y-panel-bottom: calc(var(--a11y-base) + var(--a11y-raise) + var(--a11y-btn-size) + .75rem);
}

/* ---------- trigger ---------- */
.a11y-trigger {
  position: fixed;
  left: 1rem;
  bottom: calc(var(--a11y-base) + var(--a11y-raise));
  z-index: 130;
  width: var(--a11y-btn-size);
  height: var(--a11y-btn-size);
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  border: 2px solid var(--bg);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), opacity var(--transition);
}
.a11y-trigger:hover { background: var(--primary-hover); transform: translateY(-2px); }
.a11y-trigger:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.a11y-trigger[aria-expanded="true"] { background: var(--primary-hover); }
.a11y-trigger svg { width: 1.5rem; height: 1.5rem; pointer-events: none; }

/* ---------- panel ---------- */
.a11y-panel {
  position: fixed;
  left: 1rem;
  bottom: var(--a11y-panel-bottom);
  z-index: 131;
  width: min(23rem, calc(100vw - 2rem));
  /* nunca puede salirse por arriba: el offset crece con el banner de cookies */
  max-height: min(36rem, calc(100vh - var(--a11y-panel-bottom) - 1rem));
  max-height: min(36rem, calc(100dvh - var(--a11y-panel-bottom) - 1rem));
  display: none;
  flex-direction: column;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.a11y-panel[data-open="true"] { display: flex; animation: a11y-in .18s ease-out; }

@keyframes a11y-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.a11y-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .9rem 1rem .75rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.a11y-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.a11y-close {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.a11y-close:hover { background: var(--surface-2); color: var(--primary); }
.a11y-close:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.a11y-close svg { width: 1rem; height: 1rem; }

.a11y-body { padding: .35rem 0; overflow-y: auto; overscroll-behavior: contain; }

.a11y-group {
  margin: 0;
  padding: .8rem 1rem .35rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.a11y-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: .6rem 1rem;
  background: none;
  border: none;
  font: inherit;
  color: var(--text);
  text-align: left;
}
button.a11y-row { cursor: pointer; }
button.a11y-row:hover { background: var(--surface-2); }
.a11y-row:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }
.a11y-row-left { display: block; min-width: 0; }
.a11y-row-label { display: flex; align-items: center; gap: .6rem; font-size: .92rem; }
.a11y-row-label svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--text-muted); }
.a11y-row-hint { display: block; font-size: .72rem; color: var(--text-muted); margin-top: .15rem; }

/* switch */
.a11y-switch {
  position: relative;
  flex: none;
  width: 2.6rem;
  height: 1.45rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  transition: background var(--transition), border-color var(--transition);
}
.a11y-switch::after {
  content: "";
  position: absolute;
  top: 50%;
  left: .15rem;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--text-muted);
  transform: translateY(-50%);
  transition: transform var(--transition), background var(--transition);
}
[role="switch"][aria-checked="true"] .a11y-switch {
  background: var(--primary);
  border-color: var(--primary);
}
[role="switch"][aria-checked="true"] .a11y-switch::after {
  transform: translate(1.15rem, -50%);
  background: #fff;
}

/* stepper de tamaño de texto */
.a11y-stepper {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex: none;
}
.a11y-step {
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.a11y-step:hover:not(:disabled) { background: var(--primary-soft); border-color: var(--primary); }
.a11y-step:disabled { opacity: .4; cursor: not-allowed; }
.a11y-step:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.a11y-value {
  min-width: 3.1rem;
  text-align: center;
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.a11y-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.a11y-reset {
  padding: .45rem .8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
}
.a11y-reset:hover { border-color: var(--primary); color: var(--primary); }
.a11y-reset:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.a11y-hint { font-size: .72rem; color: var(--text-muted); }

@media (max-width: 768px) {
  :root { --a11y-base: 4.75rem; }
  /* a pantalla completa: alto completo y sin burbuja encima */
  .a11y-panel {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: none;
    border: none;
    border-radius: 0;
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .a11y-trigger[aria-expanded="true"] {
    opacity: 0;
    pointer-events: none;
    transform: scale(.6);
  }
}

/* ============================================================
   MODOS DE ACCESIBILIDAD (aplicados en <html>)
   ============================================================ */

/* tamaño de texto: el proyecto ya usa rem en todo el CSS */
html.a11y-scale-125 { font-size: 125%; }
html.a11y-scale-150 { font-size: 150%; }
html.a11y-scale-200 { font-size: 200%; }

/* contraste alto */
html.a11y-contrast {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f2f2f2;
  --text: #000000;
  --text-muted: #1a1a1a;
  --border: #000000;
  --primary: #4b0082;
  --primary-hover: #36005e;
  --primary-soft: #ead9ff;
  --accent: #4b0082;
  --danger: #a8001c;
  --danger-soft: #ffdde3;
  --success: #04632f;
  --success-soft: #d3f5e2;
  --shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 4px 12px rgba(0, 0, 0, .25);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, .4);
}
html.a11y-contrast[data-theme="dark"] {
  --bg: #000000;
  --surface: #000000;
  --surface-2: #141414;
  --text: #ffffff;
  --text-muted: #ededed;
  --border: #ffffff;
  --primary: #ffd400;
  --primary-hover: #ffe666;
  --primary-soft: #3d3100;
  --accent: #ffd400;
  --danger: #ff8080;
  --danger-soft: #3d0d0d;
  --success: #5ef5a5;
  --success-soft: #04331c;
}
/* el color heredado de texto del botón primario no sirve en amarillo */
html.a11y-contrast[data-theme="dark"] .primary-btn,
html.a11y-contrast[data-theme="dark"] .a11y-trigger {
  color: #000000;
}

/* escala de grises */
html.a11y-grayscale { filter: grayscale(1); }

/* espaciado de lectura (WCAG 1.4.12): tiene que pisar las reglas
   directas de styles.css (line-height/letter-heading), si no solo
   hereda en <body> y el cambio no se ve en los textos reales */
html.a11y-spacing {
  letter-spacing: .12em !important;
  word-spacing: .16em !important;
  line-height: 1.5 !important;
}
html.a11y-spacing :is(p, li, td, th, dt, dd, h1, h2, h3, h4, h5, h6,
  a, label, legend, blockquote, figcaption, summary, em, strong, code, pre,
  .muted, .video-title) {
  letter-spacing: .12em !important;
  word-spacing: .16em !important;
  line-height: 1.5 !important;
}

/* fuente amigable para dislexia: OpenDyslexic alojada en el propio
   sitio (sin CDN); Verdana solo como respaldo si la woff2 no carga */
html.a11y-dyslexia,
html.a11y-dyslexia body {
  font-family: "OpenDyslexic", Verdana, "DejaVu Sans", Tahoma, Geneva, sans-serif;
}
html.a11y-dyslexia button,
html.a11y-dyslexia input,
html.a11y-dyslexia select,
html.a11y-dyslexia textarea {
  font-family: inherit;
}

/* subrayar enlaces (en el dashboard la navegación son <button class="nav-item">) */
html.a11y-links a,
html.a11y-links .nav-item {
  text-decoration: underline !important;
  text-underline-offset: .18em;
}

/* resaltar foco */
html.a11y-focus :focus-visible {
  outline: 3px solid var(--primary) !important;
  outline-offset: 2px !important;
}
html.a11y-focus .video-card:focus-visible,
html.a11y-focus .a11y-row:focus-visible { outline-offset: -3px !important; }

/* cursor grande (SVG propio, data URI con percent-encoding: los
   navegadores descartan el cursor si el SVG viene "crudo") */
html.a11y-cursor,
html.a11y-cursor * {
  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='M6 3l19 12.5-8.2 1.4 4.6 8.4-3.7 2.1-4.6-8.5L6 25z' fill='%23000' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important;
}
html.a11y-cursor a,
html.a11y-cursor button,
html.a11y-cursor [role="switch"],
html.a11y-cursor .a11y-trigger {
  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='M13 14V6a2.5 2.5 0 0 1 5 0v6m0-1.5a2.5 2.5 0 0 1 5 0V14m0-1a2.5 2.5 0 0 1 5 0v6.5c0 5-3.5 9-9 9h-2.5c-3 0-4.8-1.4-6.3-3.8L7 20.5a2.4 2.4 0 0 1 3.7-3L13 19z' fill='%23000' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 13 14, pointer !important;
}

/* movimiento reducido: toggle manual + preferencia del sistema */
html.a11y-motion *,
html.a11y-motion *::before,
html.a11y-motion *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
  scroll-behavior: auto !important;
}
html.a11y-motion { scroll-behavior: auto; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}