/**
 * ui-enhancements.css
 * Animaciones de "flow" para botones y transiciones al cambiar de pantalla.
 * Se aplica a todas las páginas de la app (ver ui-enhancements.js).
 */

/* ---------- Transición de pantalla ----------
   IMPORTANTE: esta animación NO puede usar "transform" (ni filter/perspective/
   will-change) en <body>. Los modales de Bootstrap viven dentro del <body>
   (no se mueven a un portal) y usan position:fixed; cualquier transform en
   un ancestro les crea un containing block nuevo y los descoloca por completo
   (se ven cortados, aparecen fuera de pantalla o no se ven según el scroll).
   Por eso acá solo se anima opacity. */

body {
  animation: page-fade-in 0.32s ease-out both;
}

@keyframes page-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

body.page-transition-out {
  animation: none;
  opacity: 0;
  transition: opacity 0.2s ease-in;
}

/* ---------- Input oculto para el lector de código de barras ----------
   No se usa display:none / visibility:hidden porque esos valores sacan al
   elemento del árbol de foco (un input invisible con esos valores NO puede
   recibir foco, y el lector de código de barras necesita que el input esté
   enfocado para "escribirle" el código). Se lo saca de la vista con
   posición y tamaño en vez de ocultarlo de verdad. */
.scanner-input-oculto {
  position: fixed;
  top: -1000px;
  left: -1000px;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* ---------- Flow / shine en botones ---------- */

.btn,
.btn-choose,
.primario,
.secundario,
.page-link {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

/* #scroll-top ya es position:fixed en main.css (flota sobre la pantalla).
   No debe tocarse esa propiedad acá: solo se le agrega el mismo feedback
   visual sin pisar su posicionamiento. */
#scroll-top {
  overflow: hidden;
  isolation: isolate;
}

.btn::before,
.btn-choose::before,
.primario::before,
.secundario::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 45%,
    transparent 65%
  );
  transform: translateX(-120%);
  transition: transform 0.6s ease;
  pointer-events: none;
}

.btn:hover::before,
.btn-choose:hover::before,
.primario:hover::before,
.secundario:hover::before {
  transform: translateX(120%);
}

.btn:hover,
.btn-choose:hover,
.primario:hover,
.secundario:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.btn:active,
.btn-choose:active,
.primario:active,
.secundario:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.btn:disabled,
.btn.disabled {
  transform: none !important;
  box-shadow: none !important;
}

/* Ripple de click */
.ui-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transform: scale(0);
  animation: ui-ripple-anim 0.55s ease-out;
  pointer-events: none;
  z-index: 0;
}

@keyframes ui-ripple-anim {
  to {
    transform: scale(2.8);
    opacity: 0;
  }
}

/* Respetar preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  body,
  body.page-transition-out {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
  }

  .btn,
  .btn-choose,
  .primario,
  .secundario,
  .page-link,
  #scroll-top,
  .btn::before,
  .btn-choose::before,
  .primario::before,
  .secundario::before {
    transition: none !important;
    animation: none !important;
  }

  .ui-ripple {
    display: none;
  }
}