/* =============================================================================
   ui-polish.css — Micro-interacciones y pulido de UI/UX (AZSEG)
   -----------------------------------------------------------------------------
   Aditivo y no invasivo: solo mejora sensaciones (transiciones, feedback al
   presionar, elevación de tarjetas, foco accesible) usando transform/opacity
   (acelerado por GPU) y respetando prefers-reduced-motion. NO cambia estructura,
   texto ni lógica. Basado en ui-ux-pro-max §7 y principios de Emil Kowalski.
   ============================================================================= */

/* Accesibilidad: si el usuario pide menos movimiento, lo respetamos. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-reduced-motion: no-preference) {

  html { scroll-behavior: smooth; }

  /* Transiciones suaves y consistentes en elementos interactivos.
     Solo propiedades seguras (nada de width/height/top/left → sin reflow). */
  a,
  button,
  .product-card,
  input,
  select,
  textarea,
  [role="button"] {
    transition: color .2s ease, background-color .2s ease, border-color .2s ease,
                box-shadow .2s ease, transform .2s ease, opacity .2s ease;
  }

  /* Feedback físico al presionar (sensación de botón real, sin mover el layout). */
  button:active,
  a.btn-primary:active,
  .btn-primary:active,
  .add-cart-btn:active,
  .add-quote-btn:active,
  #btn-confirm:active,
  #btn-checkout:active,
  [type="submit"]:active {
    transform: scale(.97);
  }

  /* Tarjetas de producto: elevación sutil al pasar el cursor. */
  .product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px -14px rgba(14, 27, 77, .22);
  }

  /* La imagen dentro de la tarjeta ya escala; suavizamos su curva. */
  .product-card .card-img,
  .product-card img {
    transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

/* Menos retardo en toques (móvil). */
a, button, [role="button"], .product-card, label[for] {
  touch-action: manipulation;
}

/* Foco visible SOLO con teclado (accesibilidad AA, no molesta al usar mouse). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #3B82F6;
  outline-offset: 2px;
  border-radius: 6px;
}