/*
=================================================================
   ESTILOS PERSONALIZADOS PARA SWEETALERT2 (Adaptado a TechDine)
=================================================================
*/

/* --- POPUP GENERAL --- */
.swal-custom-popup {
   border-radius: 1rem !important;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
   font-family: inherit !important;
}

/* --- TÍTULO --- */
.swal-custom-title {
   font-size: 1.5rem !important;
   font-weight: 700 !important;
   color: var(--primary-color) !important; /* TechDine Primary */
   padding: 1.5rem 1.5rem 0.5rem !important;
}

/* --- CONTENIDO HTML --- */
.swal-custom-html {
   font-size: 1rem !important;
   color: var(--dark-color) !important;
   line-height: 1.6 !important;
   padding: 0 1.5rem 1.5rem !important;
}

/* --- BOTÓN DE CONFIRMACIÓN --- */
.swal-custom-confirm-btn {
   border-radius: 0.5rem !important;
   padding: 0.75rem 2rem !important;
   font-size: 1rem !important;
   font-weight: 600 !important;
   transition: all 0.3s ease !important;
   border: none !important;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
   background-color: var(--primary-color) !important;
   color: white !important;
}

.swal-custom-confirm-btn:hover {
   transform: translateY(-2px) !important;
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
   background-color: #022a52 !important; /* Darker shade of primary */
}

.swal-custom-confirm-btn:active {
   transform: translateY(0) !important;
}

/* --- BOTÓN DE CANCELACIÓN --- */
.swal-custom-cancel-btn {
   border-radius: 0.5rem !important;
   padding: 0.75rem 2rem !important;
   font-size: 1rem !important;
   font-weight: 500 !important;
   transition: all 0.3s ease !important;
   border: 2px solid #6c757d !important;
   background-color: transparent !important;
   color: #6c757d !important;
}

.swal-custom-cancel-btn:hover {
   background-color: #6c757d !important;
   color: #fff !important;
   transform: translateY(-2px) !important;
}

/* --- BARRA DE PROGRESO DEL TIMER --- */
.swal-custom-timer-bar {
   height: 5px !important;
   border-radius: 0 0 1rem 1rem !important;
   background: var(--primary-color) !important;
}

/* Colores específicos de la barra de progreso según el tipo de alerta */
.swal2-icon-success~.swal2-timer-progress-bar {
   background: var(--success-color) !important;
}

.swal2-icon-error~.swal2-timer-progress-bar {
   background: var(--danger-color) !important;
}

.swal2-icon-warning~.swal2-timer-progress-bar {
   background: var(--warning-color) !important;
}

.swal2-icon-info~.swal2-timer-progress-bar {
   background: var(--secondary-color) !important;
}

/* --- ANIMACIÓN DE ENTRADA DEL POPUP --- */
.swal2-popup.swal2-show {
   animation: swalSlideInDown 0.3s ease-out !important;
}

@keyframes swalSlideInDown {
   from {
      transform: translate3d(0, -100%, 0);
      opacity: 0;
   }

   to {
      transform: translate3d(0, 0, 0);
      opacity: 1;
   }
}

/* --- ANIMACIÓN DE SALIDA DEL POPUP --- */
.swal2-popup.swal2-hide {
   animation: swalSlideOutUp 0.3s ease-in !important;
}

@keyframes swalSlideOutUp {
   from {
      transform: translate3d(0, 0, 0);
      opacity: 1;
   }

   to {
      transform: translate3d(0, -100%, 0);
      opacity: 0;
   }
}

/* --- ICONOS DE SWEETALERT2 (tamaño personalizado) --- */
.swal2-icon {
   margin: 1.5rem auto 1rem !important;
   border-width: 4px !important;
   width: 5rem !important;
   height: 5rem !important;
}

.swal2-icon .swal2-icon-content {
   font-size: 3rem !important;
}

/* --- RESPONSIVO --- */
@media (max-width: 576px) {
   .swal-custom-popup {
      width: 90% !important;
      padding: 1rem !important;
   }

   .swal-custom-title {
      font-size: 1.25rem !important;
      padding: 1rem 1rem 0.5rem !important;
   }

   .swal-custom-html {
      font-size: 0.95rem !important;
      padding: 0 1rem 1rem !important;
   }

   .swal-custom-confirm-btn,
   .swal-custom-cancel-btn {
      padding: 0.6rem 1.5rem !important;
      font-size: 0.95rem !important;
   }

   .swal2-icon {
      width: 4rem !important;
      height: 4rem !important;
   }
}

/* --- OVERLAY DE FONDO DE SWEETALERT2 --- */
.swal2-container {
   z-index: 1060 !important;
   /* Asegurar que esté por encima del overlay de carga */
}

.swal2-backdrop-show {
   background: rgba(3, 60, 115, 0.4) !important; /* Tinted with primary color */
   backdrop-filter: blur(4px) !important;
}

/* --- TÍTULO --- */
.swal-custom-title {
   font-size: 1.5rem !important;
   font-weight: 600 !important;
   color: #2c3e50 !important;
   padding: 1.5rem 1.5rem 0.5rem !important;
}

/* --- CONTENIDO HTML --- */
.swal-custom-html {
   font-size: 1rem !important;
   color: #495057 !important;
   line-height: 1.6 !important;
   padding: 0 1.5rem 1.5rem !important;
}

/* --- BOTÓN DE CONFIRMACIÓN --- */
.swal-custom-confirm-btn {
   border-radius: 0.5rem !important;
   padding: 0.75rem 2rem !important;
   font-size: 1rem !important;
   font-weight: 500 !important;
   transition: all 0.3s ease !important;
   border: none !important;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.swal-custom-confirm-btn:hover {
   transform: translateY(-2px) !important;
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
}

.swal-custom-confirm-btn:active {
   transform: translateY(0) !important;
}

/* --- BOTÓN DE CANCELACIÓN --- */
.swal-custom-cancel-btn {
   border-radius: 0.5rem !important;
   padding: 0.75rem 2rem !important;
   font-size: 1rem !important;
   font-weight: 500 !important;
   transition: all 0.3s ease !important;
   border: 2px solid #6c757d !important;
   background-color: transparent !important;
   color: #6c757d !important;
}

.swal-custom-cancel-btn:hover {
   background-color: #6c757d !important;
   color: #fff !important;
   transform: translateY(-2px) !important;
}

/* --- BARRA DE PROGRESO DEL TIMER --- */
.swal-custom-timer-bar {
   height: 5px !important;
   border-radius: 0 0 1rem 1rem !important;
   background: linear-gradient(90deg,
         rgba(40, 167, 69, 0.8) 0%,
         rgba(40, 167, 69, 1) 50%,
         rgba(40, 167, 69, 0.8) 100%) !important;
}

/* Colores específicos de la barra de progreso según el tipo de alerta */
.swal2-icon-success~.swal2-timer-progress-bar {
   background: linear-gradient(90deg,
         rgba(40, 167, 69, 0.7) 0%,
         rgba(40, 167, 69, 1) 50%,
         rgba(40, 167, 69, 0.7) 100%) !important;
}

.swal2-icon-error~.swal2-timer-progress-bar {
   background: linear-gradient(90deg,
         rgba(220, 53, 69, 0.7) 0%,
         rgba(220, 53, 69, 1) 50%,
         rgba(220, 53, 69, 0.7) 100%) !important;
}

.swal2-icon-warning~.swal2-timer-progress-bar {
   background: linear-gradient(90deg,
         rgba(255, 193, 7, 0.7) 0%,
         rgba(255, 193, 7, 1) 50%,
         rgba(255, 193, 7, 0.7) 100%) !important;
}

.swal2-icon-info~.swal2-timer-progress-bar {
   background: linear-gradient(90deg,
         rgba(23, 162, 184, 0.7) 0%,
         rgba(23, 162, 184, 1) 50%,
         rgba(23, 162, 184, 0.7) 100%) !important;
}

/* --- ANIMACIÓN DE ENTRADA DEL POPUP --- */
.swal2-popup.swal2-show {
   animation: swalSlideInDown 0.3s ease-out !important;
}

@keyframes swalSlideInDown {
   from {
      transform: translate3d(0, -100%, 0);
      opacity: 0;
   }

   to {
      transform: translate3d(0, 0, 0);
      opacity: 1;
   }
}

/* --- ANIMACIÓN DE SALIDA DEL POPUP --- */
.swal2-popup.swal2-hide {
   animation: swalSlideOutUp 0.3s ease-in !important;
}

@keyframes swalSlideOutUp {
   from {
      transform: translate3d(0, 0, 0);
      opacity: 1;
   }

   to {
      transform: translate3d(0, -100%, 0);
      opacity: 0;
   }
}

/* --- ICONOS DE SWEETALERT2 (tamaño personalizado) --- */
.swal2-icon {
   margin: 1.5rem auto 1rem !important;
   border-width: 4px !important;
   width: 5rem !important;
   height: 5rem !important;
}

.swal2-icon .swal2-icon-content {
   font-size: 3rem !important;
}

/* --- RESPONSIVO --- */
@media (max-width: 576px) {
   .swal-custom-popup {
      width: 90% !important;
      padding: 1rem !important;
   }

   .swal-custom-title {
      font-size: 1.25rem !important;
      padding: 1rem 1rem 0.5rem !important;
   }

   .swal-custom-html {
      font-size: 0.95rem !important;
      padding: 0 1rem 1rem !important;
   }

   .swal-custom-confirm-btn,
   .swal-custom-cancel-btn {
      padding: 0.6rem 1.5rem !important;
      font-size: 0.95rem !important;
   }

   .swal2-icon {
      width: 4rem !important;
      height: 4rem !important;
   }
}

/* --- OVERLAY DE FONDO DE SWEETALERT2 --- */
.swal2-container {
   z-index: 1060 !important;
   /* Asegurar que esté por encima del overlay de carga */
}

.swal2-backdrop-show {
   background: rgba(0, 0, 0, 0.5) !important;
   backdrop-filter: blur(3px) !important;
}