/* =================================================================
   ESTILOS PARA MODALES SUPERPUESTOS
   ================================================================= */

/* Modal backdrop con mayor opacidad para modal primario */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.15s linear;
}

/* Cuando hay modales superpuestos, aumentar el z-index progresivamente */
.modal {
  z-index: 1050;
}

.modal-backdrop.show {
  opacity: 0.5;
}

/* Modal secundario (superpuesto) - mayor opacidad en backdrop */
.modal-backdrop.show:nth-of-type(2) {
  opacity: 0.75 !important;
  background-color: rgba(0, 0, 0, 0.75) !important;
}

/* Modal terciario (si hay más de 2 modales) */
.modal-backdrop.show:nth-of-type(3) {
  opacity: 0.85 !important;
  background-color: rgba(0, 0, 0, 0.85) !important;
}

/* Ajustar z-index cuando hay múltiples modales abiertos */
body.modal-open .modal:nth-of-type(1) {
  z-index: 1050;
}

body.modal-open .modal:nth-of-type(2) {
  z-index: 1060;
}

body.modal-open .modal:nth-of-type(3) {
  z-index: 1070;
}

body.modal-open .modal-backdrop:nth-of-type(1) {
  z-index: 1045;
}

body.modal-open .modal-backdrop:nth-of-type(2) {
  z-index: 1055;
}

body.modal-open .modal-backdrop:nth-of-type(3) {
  z-index: 1065;
}

/* SweetAlert2 debe mostrarse siempre por encima de cualquier modal de Bootstrap,
   incluso cuando ese modal ya tiene z-index elevado por estar apilado (ver reglas
   .modal:nth-of-type arriba, que llegan hasta 1070). El z-index por defecto de
   SweetAlert2 es 1060, por lo que sin esto quedaba detrás del modal que lo invoca. */
.swal2-container {
  z-index: 20000 !important;
}

/* Modal de notificaciones pendientes - siempre encima de todo */
#notificacionesPendientesModal {
  z-index: 9999 !important;
}

/* Backdrop específico para modal de notificaciones */
body.notificaciones-modal-open .modal-backdrop {
  z-index: 9998 !important;
}

/* Resaltar modal activo con sombra más pronunciada */
.modal.show .modal-content {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: modalSlideIn 0.3s ease-out;
}

/* Animación suave al abrir modal */
@keyframes modalSlideIn {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Indicador visual de modal bloqueado */
.modal-blocked {
  cursor: not-allowed !important;
}

/* Efecto de pulsación cuando se intenta interactuar con modal bloqueado */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.modal-shake {
  animation: shake 0.5s;
}

/* =================================================================
   FIN ESTILOS MODALES
   ================================================================= */