/**
 * Estilos para el Sistema de Notificaciones
 */

/* Animación de entrada */
@keyframes slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Animación de salida */
@keyframes slide-out {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.animate-slide-in {
  animation: slide-in 0.3s ease-out forwards;
}

.animate-slide-out {
  animation: slide-out 0.3s ease-in forwards;
}

/* Contenedor de notificaciones */
#notificationContainer {
  pointer-events: none;
}

#notificationContainer > * {
  pointer-events: auto;
}

/* Responsivo para móviles */
@media (max-width: 640px) {
  #notificationContainer {
    left: 0.5rem;
    right: 0.5rem;
    max-width: calc(100% - 1rem);
  }
}