/*
  Cursor personalizado (desktop/mouse) + indicador de carga.

  1. Cursor: reemplaza la flecha por defecto con un ícono de galleta en
     todo el body, solo en dispositivos con mouse real
     ((hover: hover) and (pointer: fine) — así no se aplica en touch).
     No se fuerza sobre links/botones: siguen mostrando su cursor nativo
     (pointer), que es una señal de affordance útil que no queremos tapar.

  2. Indicador de carga: NO es el cursor del sistema (los navegadores no
     dejan animar eso de forma confiable) — es un elemento propio,
     position: fixed, que src/scripts/cursor.js mueve con la posición del
     mouse y que solo se muestra durante un estado de espera puntual (el
     envío del ticket en checkout.js). Gira con una animación CSS simple.
     Ver docs/ARCHITECTURE.md para el detalle.
*/

@media (hover: hover) and (pointer: fine) {
  body {
    cursor: url("../assets/images/cursor-galleta.svg") 16 16, auto;
  }
}

.cursor-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0;
  transition: opacity 150ms ease;
}

.cursor-loader.is-active {
  opacity: 1;
}

.cursor-loader__icon {
  position: absolute;
  top: -14px;
  left: -14px;
  width: 28px;
  height: 28px;
  animation: cursor-loader-spin 900ms linear infinite;
}

@keyframes cursor-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-loader__icon {
    animation: none;
  }
}