/* /admin/pacientes/css/login_paciente.css
   Estilos visuales para los modales del flujo paciente.
   Compatible con Bootstrap 5.
*/

/* ══════════════════════════════════════════════════
   MODAL DNI
   ══════════════════════════════════════════════════ */

#modalDni #dni_input {
  width: 300px;
  max-width: 100%;
  margin: 0 auto;
  display: block;
  text-align: center;
  font-weight: 700;
  padding: .85rem 1.25rem;
  border: 2px solid rgba(35,43,96,.35);
}

#modalDni .form-check-label {
  font-weight: 600;
  color: #232B60;
}

#modalDni .form-check-label a {
  color: #232B60;
  font-weight: 800;
  text-decoration: none;
}

#modalDni .form-check-label a:hover {
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════
   MODAL OTP
   ══════════════════════════════════════════════════ */

#modalCodigo #otp_input {
  width: 200px;
  max-width: 100%;
  margin: 0 auto;
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: .4em;
  padding: .75rem 1rem;
  border: 2px solid rgba(35,43,96,.35);
  color: #232B60 !important;
}

#codigo_dev_container {
  border-radius: 10px;
  font-size: .85rem;
}

/* Texto informativo OTP en azul petróleo */
#modalCodigo .text-muted,
#modalCodigo .otp-ayuda {
  color: #0f5f66 !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

/* Error OTP */
#otp_error {
  color: #b02a37 !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════
   BOTONES COMPARTIDOS
   ══════════════════════════════════════════════════ */

#modalBienvenido .hpm-btn-guardar {
  border-radius: 999px;
  padding: .75rem 2rem;
  font-weight: 900;
}

.hpm-politica-box {
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(35,43,96,.20);
  border-radius: 14px;
  padding: 12px 14px;
  color: #0b1b2a;
  max-height: 320px;
  overflow-y: auto;
}

/* Botón siguiente / verificar */
.btn-dni-siguiente,
#modalCodigo #btnVerificarOtp {
  background: #232B60 !important;
  border-color: #232B60 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding-left: 1.35rem !important;
  padding-right: 1.35rem !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.btn-dni-siguiente:hover,
.btn-dni-siguiente:focus,
#modalCodigo #btnVerificarOtp:hover,
#modalCodigo #btnVerificarOtp:focus {
  background: #1a234f !important;
  border-color: #1a234f !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Estado verificando: no queda gris apagado */
#modalCodigo #btnVerificarOtp.hpm-verificando {
  background: #232B60 !important;
  border-color: #232B60 !important;
  color: #ffffff !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: wait !important;
}

/* Evita que Bootstrap lo pinte gris si por algún motivo queda disabled */
#modalCodigo #btnVerificarOtp:disabled,
#modalCodigo #btnVerificarOtp.disabled {
  background: #232B60 !important;
  border-color: #232B60 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Botón cancelar */
.btn-dni-cancelar {
  background: #777 !important;
  border-color: #777 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

.btn-dni-cancelar:hover,
.btn-dni-cancelar:focus {
  background: #666 !important;
  border-color: #666 !important;
  color: #ffffff !important;
}

/* ══════════════════════════════════════════════════
   FIX CLICKS / MODALES CERRADOS
   ══════════════════════════════════════════════════ */

/* No poner display:flex en .modal general.
   Eso puede dejar modales invisibles tapando la web en PC. */
.modal:not(.show) {
  pointer-events: none !important;
}

.modal.show {
  pointer-events: auto !important;
}

/* Capas decorativas no deben tapar botones ni inputs */
.modal-content::before,
.modal-content::after,
.modal-body::before,
.modal-body::after,
.modal-dni-body::before,
.modal-dni-body::after,
.modal-politica-body::before,
.modal-politica-body::after,
.hpm-modal-body::before,
.hpm-modal-body::after,
.hpm-modal-overlay {
  pointer-events: none !important;
}

/* Inputs y botones siempre clickeables dentro de modales */
.modal.show input,
.modal.show button,
.modal.show a,
.modal.show .form-check-input,
.modal.show .btn {
  pointer-events: auto !important;
}

/* ══════════════════════════════════════════════════
   MODAL COMPACTO
   ══════════════════════════════════════════════════ */

.modal-dialog {
  height: auto !important;
}

.modal-content {
  height: auto !important;
  min-height: unset !important;
  max-height: none !important;
  overflow: hidden !important;
}

.modal-body,
.modal-dni-body,
.hpm-modal-body {
  height: auto !important;
  min-height: unset !important;
  max-height: none !important;
}

#modalDni .modal-content,
#modalCodigo .modal-content,
#modalBienvenido .modal-content {
  height: auto !important;
  min-height: unset !important;
}

/* ══════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════ */

@media (max-width: 575.98px) {
  .modal-dialog {
    max-width: 92vw !important;
    width: 92vw !important;
    margin: 1rem auto !important;
    min-height: unset !important;
    height: auto !important;
  }

  .modal-content {
    border-radius: 18px !important;
    height: auto !important;
    min-height: unset !important;
  }

  .modal-dni-body,
  .modal-politica-body,
  .hpm-modal-body {
    height: auto !important;
    min-height: unset !important;
  }

  #modalDni #dni_input {
    width: 88% !important;
  }

  #modalCodigo #otp_input {
    width: 72% !important;
  }

  #modalCodigo .otp-ayuda {
    color: #0f5f66 !important;
    font-size: .85rem !important;
    font-weight: 700 !important;
  }
}