/* ═══════════════════════════════════════════════════════════════════════
   ACCESIBILIDAD v18 — Bolsas Baratas
   Hoja ADITIVA: se carga después de style.css y no modifica ninguna regla
   existente. Cubre los huecos detectados en la auditoría:
     · Sin estilos de foco visibles (imposible navegar con teclado)
     · Sin clase para texto solo-lector-de-pantalla
     · Sin enlace de salto
     · Sin soporte de alto contraste ni de movimiento reducido ampliado
   ═══════════════════════════════════════════════════════════════════════ */


/* ── 1. Texto exclusivo para lectores de pantalla ──────────────────────
   Visualmente oculto pero SÍ leído por el lector. No usar display:none
   (eso lo esconde también del lector). */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ── 2. Enlace de salto ────────────────────────────────────────────────
   Fuera de pantalla hasta que recibe el foco con Tab. */
.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 2147483600;
  padding: 14px 22px;
  border-radius: 0 0 12px 12px;
  background: #f59e0b;
  color: #1a1206;
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .45);
  transition: top .18s ease-out;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid #fff;
  outline-offset: 2px;
}


/* ── 3. Foco visible en TODO elemento interactivo ──────────────────────
   :focus-visible solo se activa con teclado, así que el ratón no ve
   ningún cambio: mejora la accesibilidad sin alterar el diseño. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 3px solid #fbbf24;
  outline-offset: 3px;
  border-radius: 8px;
}

/* Sobre superficies claras el dorado pierde contraste: usamos azul oscuro. */
.modal:focus-visible,
.product-card:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 2px;
}

/* Quitamos el contorno cuando el foco llega por clic (comportamiento nativo
   ya correcto, lo declaramos explícito para navegadores antiguos). */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible) {
  outline: none;
}


/* ── 4. Filtro activo perceptible sin depender del color ───────────────
   Un usuario con daltonismo no distingue el botón activo solo por el tono:
   añadimos una barra inferior y peso tipográfico. */
.filter-btn[aria-pressed="true"],
.sub-filter-btn[aria-pressed="true"] {
  font-weight: 800;
  box-shadow: inset 0 -3px 0 0 currentColor;
}


/* ── 5. Área táctil mínima (WCAG 2.5.8 → 24px; recomendado 44px) ───────
   Evita errores de toque en móvil, sobre todo para personas con
   temblor o motricidad reducida. */
.btn-icon,
.search-clear,
.voice-btn,
.filter-btn,
.sub-filter-btn {
  min-width: 44px;
  min-height: 44px;
}


/* ── 6. Alto contraste (Windows/macOS «Aumentar contraste») ────────────── */
@media (prefers-contrast: more) {
  body {
    background: #000;
    color: #fff;
  }
  .product-card {
    border: 2px solid #fff;
  }
  .filter-btn,
  .btn-icon {
    border: 2px solid currentColor;
  }
  a {
    text-decoration: underline;
  }
}


/* ── 7. Movimiento reducido — refuerzo global ──────────────────────────
   Complementa la regla que ya existe en style.css cubriendo también el
   scroll suave y las animaciones inyectadas por JavaScript. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* El enlace de salto debe seguir apareciendo: es funcional, no decorativo. */
  .skip-link {
    transition: none !important;
  }
}


/* ── 8. Impresión: ahorra tinta y quita lo que no aporta ───────────────── */
@media print {
  .splash,
  .filter-bar,
  .sub-filter-bar,
  .search-wrap,
  .header-actions,
  .skip-link,
  .fab,
  .modal-overlay {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
  }
  .product-card {
    break-inside: avoid;
    border: 1px solid #999;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 11px;
    color: #555;
  }
}