/* assets/css/toast.css */

/* Animaciones para toasts */
@keyframes toast-slide-in {
  0% {
    opacity: 0;
    transform: translateX(100%) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes toast-slide-out {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(100%) scale(0.95);
  }
}

.toast-slide-in {
  animation: toast-slide-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.toast-slide-out {
  animation: toast-slide-out 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.toast-progress {
  animation: toast-progress linear forwards;
  transform-origin: left;
}

@keyframes toast-progress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* Responsive para móviles */
@media (max-width: 768px) {
  .mobile-toast {
    width: calc(100vw - 2rem) !important;
    max-width: 100% !important;
  }

  .mobile-toast-container {
    width: auto !important;
    max-width: 100% !important;
    right: 1rem !important;
    left: auto !important;
  }
}
/* assets/css/toast.css - Añade estas animaciones */

/* Animación desde arriba (para móviles) */
@keyframes toast-slide-from-top {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Animación desde abajo (para desktop) */
@keyframes toast-slide-from-bottom {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Animaciones de salida */
@keyframes toast-slide-out-top {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
}

@keyframes toast-slide-out-bottom {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
}

/* Clases para aplicar según dispositivo */
.toast-mobile-in {
  animation: toast-slide-from-top 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.toast-desktop-in {
  animation: toast-slide-from-bottom 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.toast-mobile-out {
  animation: toast-slide-out-top 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.toast-desktop-out {
  animation: toast-slide-out-bottom 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}