/* ============================================================
   a11y-fixes.css — WCAG 2.1 AA overrides
   - Skip-link para navegación por teclado (C7)
   - Contrastes mínimos en modo oscuro (C1 + C3)
   NO modifica style.css; precedencia por orden de carga.
   ============================================================ */

/* ---------- Skip-link (C7) ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 12px 18px;
  background: var(--accent);
  color: #fff;
  z-index: 100;
  border-radius: 0 0 6px 0;
  font-family: var(--sans);
}
.skip-link:focus {
  left: 0;
  outline: 2px solid var(--bg);
  outline-offset: 2px;
}

/* ---------- Contrastes en dark mode (C1 + C3) ---------- */
@media (prefers-color-scheme: dark){
  .sol-final, .sol-final .conclude { color: var(--bg) !important; }
  ol.props > li::before { color: var(--bg); }
  .ex-card .ex-num { color: var(--bg); }
  .btn.primary { color: var(--bg); }
  .cas-verify button { color: var(--bg); }
  .progress-summary .badge { color: var(--bg); }
  .retrieval .label { color: #4ade80 !important; }
  .try-first .label { color: #fb923c !important; }
  .retrieval .feedback.ok, .cas-verify .result.ok { color: #4ade80 !important; }
  .retrieval .feedback.no, .cas-verify .result.no { color: #fca5a5 !important; }
}

/* ============================================================
   I5 - Toggle modo profesor como <button role="switch">
   Neutralizar estilos default del browser para mantener visuales
   idénticos al anterior <label class="tech-toggle">.
   ============================================================ */
button.tech-toggle {
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
}
button.tech-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================================
   C5 - .choice y .fillin con role="button"
   Asegurar foco visible accesible.
   ============================================================ */
.choice[role="button"]:focus-visible,
.fillin[role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================================
   C4 - .step-heading (alternativa si se decide migrar h4 → p)
   No utilizado por ahora (se aplicó role=presentation).
   ============================================================ */
.step-heading {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

/* ============================================================
   C6 - visually-hidden helper (no usado directamente; aria-label
   es la solución actual). Disponible para labels descriptivos.
   ============================================================ */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ============================================================
   WCAG 2.1 AA — paquete WOW (idempotente; añadido al final
   para que pise a style.css/theme.css por orden de carga).
   ============================================================ */

/* ---------- A1 · prefers-reduced-motion ----------
   Respeta a quien pidió menos movimiento: anula animaciones,
   transiciones y el scroll suave. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- A2 · foco visible global por teclado ----------
   Un solo anillo consistente para todo elemento enfocable.
   Restaura el anillo en los puntos que hacían `outline:none`
   (CAS input se arregló en style.css; FAB notas y eqref aquí). */
:focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.notes-fab:focus-visible,
a.eqref:focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- A3 · contraste AA (correcciones medidas) ----------
   Valores verificados con tools/contrast_check.py (ratio WCAG real).
   Solo afectan a temas claro/sepia donde el verde de éxito y el
   --muted sepia no llegaban a 4.5:1. El tema oscuro ya cumplía. */

/* Verde de "correcto" en quiz y CAS: #15803d daba 4.50 (light) y 4.08
   (sepia). #116534 da 6.42 / 5.82 — AA con margen. Solo claro/sepia:
   en dark, a11y-fixes ya fuerza #4ade80 más arriba (8.5:1). */
html.theme-light  .retrieval .feedback.ok,
html.theme-sepia  .retrieval .feedback.ok,
html.theme-light  .cas-verify .result.ok,
html.theme-sepia  .cas-verify .result.ok,
html.theme-light  .retrieval .feedback.ok b,
html.theme-sepia  .retrieval .feedback.ok b,
html.theme-light  .cas-verify .result.ok b,
html.theme-sepia  .cas-verify .result.ok b{
  color: #116534 !important;
}
/* "auto" en modo claro del SO (sin clase theme-*) usa el mismo verde. */
@media (prefers-color-scheme: light){
  html.theme-auto .retrieval .feedback.ok,
  html.theme-auto .cas-verify .result.ok,
  html.theme-auto .retrieval .feedback.ok b,
  html.theme-auto .cas-verify .result.ok b{
    color: #116534 !important;
  }
}
/* Fallback sin JS (no hay clase theme-* en <html>): claro por defecto. */
.retrieval .feedback.ok,
.cas-verify .result.ok{ color: #116534; }

/* --muted en sepia: #806447 daba 4.27:1 sobre --def-bg. #74593a da
   5.06 / 5.53 / 5.87 (def-bg / bg / paper) — AA con margen. */
html.theme-sepia{
  --muted: #74593a;
}

/* Tema oscuro EXPLÍCITO (usuario eligió "Oscuro" con SO en claro):
   el bloque @media prefers-color-scheme:dark de arriba no dispara, así
   que la regla genérica dejaría #116534 (2.1:1, ilegible). Forzamos los
   verdes/rojos claros del modo oscuro también por clase. AA: 8.5:1. */
html.theme-dark .retrieval .feedback.ok,
html.theme-dark .cas-verify .result.ok,
html.theme-dark .retrieval .feedback.ok b,
html.theme-dark .cas-verify .result.ok b{ color: #4ade80 !important; }
html.theme-dark .retrieval .feedback.no,
html.theme-dark .cas-verify .result.no{ color: #fca5a5 !important; }
html.theme-dark .retrieval .label{ color: #4ade80 !important; }
html.theme-dark .try-first .label{ color: #fb923c !important; }
html.theme-dark .sol-final,
html.theme-dark .sol-final .conclude{ color: var(--bg) !important; }
html.theme-dark ol.props > li::before,
html.theme-dark .ex-card .ex-num,
html.theme-dark .btn.primary,
html.theme-dark .cas-verify button,
html.theme-dark .progress-summary .badge{ color: var(--bg) !important; }

/* ============================================================
   B · CTA / Branding — enlace a la tienda + banner de compra.
   Variables de AM2 (familia --fg/--muted/--accent/--paper/--rule).
   ============================================================ */

/* Enlace "← Ediciones Espinoza" como primer ítem del sidebar. */
nav.sidebar .site-home-link{
  display: block;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--muted);
  text-decoration: none;
  margin: 0 0 12px;
  letter-spacing: .01em;
}
nav.sidebar .site-home-link:hover{
  color: var(--accent);
  text-decoration: none;
}
nav.sidebar .site-home-link:focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Banner de compra al final del <main> (solo cap. 1 e índice). */
.buy-banner{
  margin: 40px 0 8px;
  padding: 22px 26px;
  background: color-mix(in srgb, var(--accent) 7%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--rule));
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.buy-banner p{
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg);
}
.buy-banner p strong{ color: var(--fg); }
.buy-banner .buy-btn{
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  background: var(--accent);
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  transition: filter .15s, transform .12s;
}
.buy-banner .buy-btn:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
  text-decoration: none;
  color: #fff;
}
.buy-banner .buy-btn:focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
/* En oscuro el texto del botón debe ser oscuro sobre el azul claro. */
html.theme-dark .buy-banner .buy-btn{ color: var(--bg); }
html.theme-dark .buy-banner .buy-btn:hover{ color: var(--bg); }
@media (prefers-color-scheme: dark){
  html.theme-auto .buy-banner .buy-btn{ color: var(--bg); }
  html.theme-auto .buy-banner .buy-btn:hover{ color: var(--bg); }
}