/* ============================================================
   STOREFRONT V2 — ACCESIBILIDAD (Sprint UX-1, §4.6)
   ------------------------------------------------------------
   Reglas WCAG 2.1 AA no negociables del storefront.
   Complementa el skip-link y reduced-motion ya en base.

   Coverage:
   - Screen-reader-only utilities (`sf-sr-only`, `sf-not-sr-only`).
   - Focus-visible ring consistente (color del brand del tenant).
   - `prefers-reduced-motion` mas agresivo (sobre _components.css).
   - High-contrast mode hooks.
   - Touch target minimo 44x44 (WCAG 2.5.5 Target Size).
   ============================================================ */

/* ============================================================
   SCREEN-READER ONLY
   Para texto que solo deben leer lectores de pantalla
   (instrucciones, labels invisibles, etc.).
   ============================================================ */
.sf-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Permite restaurar visibilidad al recibir focus (skip-links). */
.sf-not-sr-only {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/* ============================================================
   FOCUS-VISIBLE — anillo consistente
   Aplicado a elementos interactivos. Usa color brand del tenant.
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--sf-color-primary);
  outline-offset: 2px;
  border-radius: var(--sf-radius-sm);
}

/* Botones / links del storefront con focus ring extendido */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  box-shadow: var(--sf-shadow-focus);
}

/* No mostrar outline en mouse, solo teclado (default browser behavior
   pero algunos botones lo sobreescriben — reforzamos). */
:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================================
   SKIP-LINK — refuerzo de la version ya existente
   sf-skip-link ya esta en tailwind.src.css con @apply.
   Aqui solo agregamos color brand y motion para que el slide
   del skip-link respete el design system.
   ============================================================ */
.sf-skip-link:focus {
  background: var(--sf-color-primary) !important;
  color: var(--sf-color-primary-fg) !important;
}

/* ============================================================
   REDUCED MOTION — gate global
   prefers-reduced-motion ya esta cubierto parcialmente en
   base_storefront.html, pero aqui lo agresivamos para que
   tambien apague animaciones del design system V2.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Cancelar skeleton shimmer (incomodo con reduced motion) */
  .sf-skeleton {
    animation: none !important;
    background: var(--sf-color-bg-subtle);
  }
  /* Cancelar pulse del badge-discount */
  .sf-badge-discount {
    animation: none !important;
  }
}

/* ============================================================
   HIGH-CONTRAST MODE (Windows / forced-colors)
   Algunos navegadores aplican un modo de contraste forzado;
   garantizamos que botones y bordes sigan siendo legibles.
   ============================================================ */
@media (forced-colors: active) {
  .sf-btn-danger,
  .sf-btn-success,
  .sf-badge,
  .sf-badge-discount,
  .sf-badge-new {
    border: 1px solid CanvasText;
  }
  :focus-visible {
    outline: 2px solid Highlight !important;
  }
}

/* ============================================================
   TOUCH TARGET MIN — WCAG 2.5.5 (Level AAA, recomendado)
   Botones / links de UI deben tener minimo 44x44 px para
   tactil. Aplicado solo a elementos marcados explicitamente
   con [data-sf-touch] para no afectar links inline de texto.
   ============================================================ */
[data-sf-touch],
.sf-touch-target {
  min-width: 44px;
  min-height: 44px;
}

/* ============================================================
   ARIA LIVE REGIONS — estilo visual neutral
   Para countdowns, toasts, cart-updates que deben ser anunciados.
   ============================================================ */
[aria-live="polite"],
[aria-live="assertive"] {
  /* Sin estilos visuales por default: solo posicionamiento por su
     contenedor. Mantenemos la regla aqui como anclaje semantico. */
}

/* ============================================================
   COLOR CONTRAST FALLBACKS
   Cuando text-muted aparece sobre bg-subtle, garantizamos
   ratio AA (4.5:1).
   ============================================================ */
.sf-surface-subtle .sf-caption,
.sf-surface-subtle .sf-overline {
  /* Forzar contraste minimo subiendo a text base si el fondo es subtle */
  color: var(--sf-color-text);
}

/* ============================================================
   PRINT MODE
   Ocultar UI no esencial al imprimir (carrito, toasts, ...).
   ============================================================ */
@media print {
  .sf-skip-link,
  [data-sf-toast-zone],
  #sf-toast-zone,
  [aria-hidden="true"] {
    display: none !important;
  }
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
  }
}