/* ============================================================================
 * iShop · comun/css/a11y.css
 * ----------------------------------------------------------------------------
 * Utilidades de accesibilidad y el freno global de movimiento (RNF-14).
 *
 * Igual que reset.css: sin estética. Aquí no hay colores ni tipografías; el
 * foco y el skip link se tematizan desde css/02-base.css, porque el anillo de
 * foco es una decisión de diseño, no una casilla que marcar.
 * ========================================================================== */

@layer reset {

  /* --------------------------------------------------------------------------
   * Contenido solo para lectores de pantalla.
   * clip-path en vez del viejo clip: rect(): no lo deprecan y no fuerza reflow.
   * ------------------------------------------------------------------------ */
  .oculto-visualmente:not(:focus):not(:active) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: 0;
  }

  /* --------------------------------------------------------------------------
   * Skip link. Solo posición y comportamiento; el aspecto lo pone 02-base.css.
   * ------------------------------------------------------------------------ */
  .saltar-a-contenido {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 9999;
    /* El desplazamiento tiene que superar la altura del elemento MÁS el
       margen que le ponga la interfaz; con -120 % a secas asomaban unos
       píxeles por el borde superior. */
    translate: 0 calc(-100% - 3rem);
  }

  .saltar-a-contenido:focus-visible {
    translate: 0 0;
  }

  /* --------------------------------------------------------------------------
   * El foco nunca desaparece. 02-base.css puede redefinir el anillo, pero
   * este suelo garantiza que jamás quede invisible por un `outline: none`.
   * ------------------------------------------------------------------------ */
  :where(:focus-visible) {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  /* El foco por puntero no dibuja anillo; el foco por teclado sí, siempre. */
  :where(:focus:not(:focus-visible)) {
    outline: none;
  }

  /* --------------------------------------------------------------------------
   * FRENO GLOBAL DE MOVIMIENTO
   *
   * Anula animaciones y transiciones cuando el sistema pide menos movimiento,
   * EXCEPTO donde el movimiento es la función y no la decoración: el contador
   * de 120 s de la autorización asistida (RF-14) tiene que seguir contando.
   * Ese caso se marca con [data-motion="essential"] y pasa a avanzar por
   * segundos en lugar de interpolar por fotograma.
   * ------------------------------------------------------------------------ */
  @media (prefers-reduced-motion: reduce) {

    *:not([data-motion='essential']):not([data-motion='essential'] *),
    *:not([data-motion='essential']):not([data-motion='essential'] *)::before,
    *:not([data-motion='essential']):not([data-motion='essential'] *)::after {
      animation-duration: 1ms !important;
      animation-delay: 0ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 1ms !important;
      transition-delay: 0ms !important;
      scroll-behavior: auto !important;
    }

    html {
      scroll-behavior: auto !important;
    }

    /* Las View Transitions también son movimiento. */
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
      animation: none !important;
    }
  }

  /* --------------------------------------------------------------------------
   * Objetivos táctiles. WCAG 2.1 AA pide 24×24 CSS px como mínimo.
   * ------------------------------------------------------------------------ */
  @media (pointer: coarse) {
    :where(button, [role='button'], a, input, select, summary) {
      min-block-size: 24px;
    }
  }
}