/**
 * SGB - Sistema de Gestión de Bodegas
 * dashboard-animations.css - Animaciones y efectos específicos para el dashboard
 */

/* Animaciones para tarjetas */
.animated-card {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
}

/* Transiciones suaves para todos los elementos interactivos */
.btn, .card, .icon-circle, .dashboard-icon, .badge, .progress-bar, .acceso-rapido-card {
  transition: all 0.3s ease !important;
}

/* Efecto de hover para botones */
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Efecto de pulsación para botones al hacer clic */
.btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Animación para badges */
.badge {
  transition: all 0.3s ease;
}

.badge:hover {
  transform: scale(1.1);
}

/* Animación para la barra de indicadores financieros */
.indicadores-financieros {
  background: linear-gradient(90deg, rgba(0,123,255,0.1) 0%, rgba(0,123,255,0.2) 100%);
  animation: gradientShift 10s ease infinite;
  background-size: 200% 200%;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Efectos para iconos */
.dashboard-icon {
  transition: all 0.3s ease;
}

.card:hover .dashboard-icon {
  transform: scale(1.2);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* Animación para barras de progreso */
.progress-bar {
  transition: width 1s ease;
  animation: progressAnimation 1s ease-in-out;
}

@keyframes progressAnimation {
  0% {
    width: 0%;
  }
}

/* Efecto de hover para tarjetas de acceso rápido */
.acceso-rapido-card {
  overflow: hidden;
  position: relative;
}

.acceso-rapido-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%);
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.5s ease;
}

.acceso-rapido-card:hover::after {
  opacity: 1;
  transform: scale(1);
}

/* Animación para el contador de alertas */
@keyframes alertPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.alert-badge {
  animation: alertPulse 2s infinite;
}

/* Animación para el footer */
footer {
  transition: all 0.5s ease;
  opacity: 0.7;
}

footer:hover {
  opacity: 1;
}

/* Animación para los elementos de información */
.info-item {
  transition: all 0.3s ease;
}

.info-item:hover {
  transform: translateX(5px);
}

/* Efectos para la barra de navegación superior */
.dropdown-toggle {
  transition: all 0.3s ease;
}

.dropdown-toggle:hover {
  transform: translateY(-2px);
}

.dropdown-menu {
  animation: fadeInDown 0.3s ease;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animación para el encabezado del dashboard */
.dashboard h1 {
  position: relative;
  display: inline-block;
}

.dashboard h1::after {
  content: '';
  position: absolute;
  width: 0;
  height: 3px;
  bottom: -5px;
  left: 0;
  background-color: var(--color-primary);
  transition: width 0.3s ease;
}

.dashboard h1:hover::after {
  width: 100%;
}