/* =====================================================================
   ANIMACIONES — Microinteracciones del almacén
   Filosofía: rápidas, contenidas, decelerantes. Sin spring/bounce.
   ===================================================================== */

/* Entrada al cargar página */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-entrada { animation: fadeUp var(--t-slow) var(--ease-out) both; }
.anim-entrada-1 { animation-delay: 40ms; }
.anim-entrada-2 { animation-delay: 80ms; }
.anim-entrada-3 { animation-delay: 120ms; }
.anim-entrada-4 { animation-delay: 160ms; }
.anim-entrada-5 { animation-delay: 200ms; }
.anim-entrada-6 { animation-delay: 240ms; }

/* Pulse suave para badges activos */
@keyframes pulso {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  50% { box-shadow: 0 0 0 6px transparent; opacity: .6; }
}
.pulso { animation: pulso 2s ease-in-out infinite; }

/* Llenado de medidor de existencia */
@keyframes medidor-llena {
  from { width: 0%; }
  /* el JS define el final */
}
.medidor-rango { animation: medidor-llena var(--t-slow) var(--ease-out); }

/* Skeleton loading */
@keyframes skeleton {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg,
    var(--canvas-grain) 0%,
    var(--anaquel-elev-2) 50%,
    var(--canvas-grain) 100%);
  background-size: 200% 100%;
  animation: skeleton 1.6s linear infinite;
  border-radius: var(--r-1);
}

/* Conteo animado de números */
@keyframes contar {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.contar { animation: contar var(--t-med) var(--ease-out); }

/* Hover sutil de filas */
.tabla tbody tr {
  transition: background var(--t-fast) var(--ease-out);
}

/* Botón ripple-lite */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,.18), transparent 60%);
  opacity: 0;
  transition: opacity var(--t-med);
  pointer-events: none;
}
.btn:active::after { opacity: 1; }

/* Badge contador con cambio */
@keyframes salto {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.18); }
}
.salto { animation: salto var(--t-med) var(--ease-out); }

/* Cinta amarilla pulsando en alertas críticas */
@keyframes cinta-anim {
  from { background-position: 0 0; }
  to { background-position: 28px 0; }
}
.banda-alerta {
  background: repeating-linear-gradient(
    -45deg,
    var(--cinta) 0 10px,
    #1a1a1a 10px 20px
  );
  background-size: 28px 28px;
  animation: cinta-anim 2s linear infinite;
  height: 4px;
}

/* Reducir movimiento por preferencia del usuario */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}