/* ═══════════════════════════════════════════════════════════
   🥚 LIMPIAAI v18 — ACCESIBILIDAD Y RENDIMIENTO
   Capa final: corrige los estilos tras convertir <a>/<div>
   interactivos en <button>, y añade cumplimiento WCAG 2.1 AA.
   Debe cargarse en ÚLTIMO lugar.
   ═══════════════════════════════════════════════════════════ */

/* ─── 1. FOCO VISIBLE GLOBAL (WCAG 2.4.7) ──────────────────
   Antes solo existía en premium.css con un box-shadow que se
   perdía sobre fondos oscuros. Doble anillo = visible siempre. */
:where(button, a, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid #fbbf24;
  outline-offset: 2px;
  border-radius: 8px;
  box-shadow: 0 0 0 6px rgba(251, 191, 36, .22);
}

/* El navegador no debe quitar el foco en modo teclado */
:focus:not(:focus-visible) { outline: none; }

/* ─── 2. UTILIDADES A11Y ───────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Visible al recibir foco (para enlaces de salto) */
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
  position: static; width: auto; height: auto;
  margin: 0; overflow: visible; clip: auto; white-space: normal;
}

/* ─── 3. SIDE NAV: <a> → <button> ──────────────────────────
   Los botones no heredan el layout que tenían los enlaces. */
.side-nav button {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--r, 12px);
  color: var(--t2, #94a3b8);
  font-weight: 600;
  font-size: .88rem;
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  transition: background var(--tf, .15s ease), color var(--tf, .15s ease);
}

.side-nav button:hover { background: rgba(255, 255, 255, .04); color: var(--t1, #f1f5f9); }
.side-nav button:active { background: var(--bg3, #181840); color: var(--t1, #f1f5f9); }

.side-nav button i {
  width: 20px;
  text-align: center;
  color: var(--pl, #a78bfa);
  filter: drop-shadow(0 0 5px var(--pg, rgba(124, 58, 237, .35)));
  flex-shrink: 0;
}

/* ─── 4. ACORDEÓN: <div> → <button> ────────────────────────── */
.acc-header {
  width: 100%;
  font-family: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
}

/* Rotación de la flecha vinculada al estado ARIA real */
.acc-header[aria-expanded="true"] .acc-arrow { transform: rotate(180deg); }
.acc-arrow { transition: transform var(--tn, .3s ease); }

/* ─── 5. FOOTER LEGAL: <a> → <button> ─────────────────────── */
.footer-legal button {
  color: var(--t3, #64748b);
  background: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  padding: 4px 2px;
  text-decoration: underline;
  text-decoration-color: rgba(148, 163, 184, .3);
  text-underline-offset: 3px;
  transition: color var(--tf, .15s ease);
}

.footer-legal button:hover,
.footer-legal button:focus-visible { color: var(--pl, #a78bfa); }

/* ─── 6. NAV INFERIOR: div → span ─────────────────────────── */
.bnav-main-btn { display: grid; place-items: center; }

/* Estado activo real para lectores + refuerzo visual */
.bnav-btn[aria-current="page"] { color: var(--pl, #a78bfa); }

/* ─── 7. ÁREA MÍNIMA TÁCTIL (WCAG 2.5.5 / 2.5.8) ──────────
   44×44 CSS px es el mínimo recomendado en móvil. */
.hdr-btn, .viewer-close, .side-header button {
  min-width: 44px;
  min-height: 44px;
  display: inline-grid;
  place-items: center;
}

.nx-ov-btn, .nx-pick, .nx-tl-btn, .nx-advice-go { min-height: 44px; }

@media (pointer: coarse) {
  .footer-legal button { min-height: 40px; }
}

/* ─── 8. CONTRASTE (WCAG 1.4.3) ────────────────────────────
   --t3 (#64748b) sobre --bg0 (#030311) daba ~4.1:1, por debajo
   del mínimo 4.5:1 para texto normal. Se aclara a #8595ab (~6.1:1)
   conservando la jerarquía visual frente a --t2. */
:root {
  --t3: #8595ab;
}

/* Los textos diminutos necesitan aún más contraste */
.stat-label, .mc-label, .nx-streak-item .l, .nx-tl-stat .l {
  color: #9aa8bd;
}

/* ─── 9. MOVIMIENTO REDUCIDO GLOBAL (WCAG 2.3.3) ───────────
   Refuerzo transversal: los módulos ya lo declaran por separado,
   pero esto cubre cualquier animación que se haya escapado. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .particle-canvas, .dust-canvas, .splash-stars { display: none !important; }
}

/* ─── 10. MÁS CONTRASTE SI EL SISTEMA LO PIDE ─────────────── */
@media (prefers-contrast: more) {
  :root {
    --t1: #ffffff;
    --t2: #cbd5e1;
    --t3: #b6c2d2;
    --bd: rgba(148, 163, 184, .35);
  }
  .glass-card, .res-section, .nx-metrics { border-width: 2px; }
  :where(button, a):focus-visible { outline-width: 4px; }
}

/* ─── 11. RENDIMIENTO DE PINTADO ───────────────────────────
   Aísla las capas animadas para que el navegador no repinte
   todo el árbol en cada frame. */
.particle-canvas, .dust-canvas {
  contain: strict;
  will-change: opacity;
}

.scr { contain: layout paint; }

/* Las listas largas se rasterizan solo cuando entran en pantalla */
.sym-card, .hist-card, .tech-card, .cult-card, .nx-advice {
  content-visibility: auto;
  contain-intrinsic-size: auto 120px;
}

/* Evita saltos de layout en imágenes (CLS) */
.res-img-thumb img, .nx-pick img { aspect-ratio: 1; object-fit: cover; }

/* ─── 12. IMPRESIÓN ────────────────────────────────────────
   Permite guardar la lectura en PDF desde el navegador. */
@media print {
  .particle-canvas, .dust-canvas, .bottom-nav, .hdr, .side-menu,
  .side-overlay, .splash, .footer-legal, .nx-overlay-controls,
  .res-actions, .hdr-cmdk, #hdr-voice { display: none !important; }

  body, .scr, .scr-inner {
    background: #fff !important;
    color: #000 !important;
    overflow: visible !important;
    position: static !important;
    height: auto !important;
  }

  .scr { display: block !important; }
  .res-section, .glass-card, .nx-metrics {
    border: 1px solid #999 !important;
    background: none !important;
    break-inside: avoid;
  }
  .res-sec-bd { display: block !important; height: auto !important; }
  h1, h2, h3, h4 { color: #000 !important; -webkit-text-fill-color: #000 !important; }
}