/* =========================================================
   Accesibilidad: usuarios con “reduced motion”
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .animate-fadeup,
  .animate-slidein,
  .animate-pulseonce {
    animation: none !important;
  }
  .btn,
  .form-control,
  .form-select {
    transition: none !important;
  }
}

/* =========================================================
   Animaciones base
   ========================================================= */

/* Entrada vertical suave */ 
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fadeup {
  animation: fadeUp .35s ease both;
}

/* Entrada horizontal sutil */
@keyframes slideIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
.animate-slidein {
  animation: slideIn .35s ease both;
}

/* Pulso único (notificaciones) */
@keyframes pulseOnce {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}
.animate-pulseonce {
  animation: pulseOnce 1s ease 1;
}

/* =========================================================
   Animaciones generales
   ========================================================= */

/* FadeIn genérico */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Entrada de texto */
@keyframes fadeInText {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Entrada de tarjeta */
@keyframes fadeInCard {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   🎞 Animaciones Modal
========================================================= */

@keyframes modalPop {
  from { transform: scale(.97); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

@keyframes fadeInOverlay {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* Logo con pulso */
@keyframes pulseLogo {
  0%, 100% {
    transform: scale(1);
    opacity: .9;
    box-shadow: 0 0 8px rgba(18,140,126,0.15);
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
    box-shadow: 0 0 18px rgba(37,211,102,0.35);
  }
}

/* Toast / notificación */
@keyframes slideInToast {
  from { opacity: 0; transform: translateY(-10px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* =========================================================
   Animaciones suaves específicas
   ========================================================= */

/* Fade para gráficos */
@keyframes fadeInChart {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fade para login */
@keyframes fadeInLogin {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Animaciones */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOutDown {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(16px); }
}

/* Animaciones */
@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(8px) scale(.97); }
}
@keyframes fadeInTooltip {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}