/* ✅ ESTILOS MEJORADOS PARA CENTRAR EL MODAL 2FA */

/* Modal container - centrado perfecto */
#verify-2fa-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9999 !important;
  background-color: rgba(0, 0, 0, 0.5) !important; /* Backdrop oscuro */
  backdrop-filter: blur(4px) !important; /* Efecto blur */
}

/* Modal box centrado */
#verify-2fa-modal .modal-box {
  position: relative !important;
  margin: 0 !important;
  transform: none !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  animation: modalSlideIn 0.3s ease-out !important;
}

/* Animación de entrada suave */
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Animación de salida */
@keyframes modalSlideOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
}

/* Estados del modal */
#verify-2fa-modal.modal-open {
  pointer-events: all !important;
  opacity: 1 !important;
}

#verify-2fa-modal:not(.modal-open) {
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

/* Estilos para los inputs OTP */
.otp-digit {
  transition: all 0.2s ease !important;
}

.otp-digit:focus {
  @apply ring-2 ring-primary ring-offset-2;
  transform: scale(1.05) !important;
}

.otp-digit.input-error {
  @apply border-error;
  animation: shake 0.5s ease-in-out !important;
}

/* Animación de error */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* Responsive - móviles */
@media (max-width: 640px) {
  #verify-2fa-modal .modal-box {
    width: 95vw !important;
    max-width: none !important;
    margin: 0 2.5vw !important;
  }
}

/* Mejoras visuales adicionales */
#verify-2fa-modal .modal-box {
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Efecto hover en botones */
#verify-2fa-modal .btn {
  transition: all 0.2s ease !important;
}

#verify-2fa-modal .btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}