/* Estilos específicos para login.php */

.version { 
    color: #ffffff; 
    font-size: 12px; 
    text-align: center;
    position: relative;
    display: block;
    width: 100%;
    align-self: stretch;
}

/* Ocultar sección de recuperación por defecto */
.rightSidebar-body-main-register {
    display: none !important;
}

/* Mostrar solo el formulario de login por defecto 
.rightSidebar-body-main {
    display: block !important;
}
*/
/* Clases para reemplazar estilos inline */
.input-clm-login {
    margin: 0 0 2.4rem 0;
}

.input-clm-password {
    position: relative;
}

.toggle-password-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #999;
}

.drawer-login-with-custom {
    padding: 1rem 0 0 0;
}

.mensaje-error {
    color: yellow;
    display: none;
}

/* Clases para contenido dinámico JS */
.loading-container {
    text-align: center;
}

.loading-image {
    width: 40px;
    height: 40px;
}

/* Modal Solicitar Clave - CSP Compliant Styles */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.85);
    z-index: 2147483647;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
}

.modal-content-box {
    background-color: #1b2229;
    border-radius: 10px;
    color: #fff;
    padding: 20px;
    width: 90%;
    max-width: 640px;
    position: relative;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    pointer-events: auto;
}

.modal-header-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.modal-title-text {
    margin: 0;
    font-size: 1.25rem;
}

.modal-close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    pointer-events: auto;
}

.modal-label {
    display: block;
    margin-bottom: 0.5rem;
}

.modal-input-field {
    width: calc(100% - 140px);
    max-width: 420px;
    display: inline-block;
    vertical-align: middle;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ced4da;
    background-color: #fff !important;
    color: #000 !important;
    font-size: 1rem;
    pointer-events: auto;
    z-index: 2147483647;
    position: relative;
    cursor: text !important;
}
/*
.modal-input-field:focus {
    border: 2px solid #00ff00 !important;
    box-shadow: 0 0 10px #00ff00 !important;
}
*/
.modal-input-suffix {
    display: inline-block;
    margin-left: 0rem;
    white-space: nowrap;
    vertical-align: middle;
}

.modal-footer-box {
    text-align: right;
    margin-top: 20px;
}

/* Header del modal: centra el título aunque exista la X a la derecha */
.modal-header-box{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  /* deja el mismo padding a ambos lados para que el centro sea real */
  padding: 12px 44px;
}

/* Título centrado */
.modal-header-box .modal-title-text{
  margin: 0 !important;     /* h1 trae margen por defecto */
  width: 100%;
  text-align: center;
}

/* Botón X fuera del flujo (no afecta el centrado) */
.modal-header-box .modal-close-btn{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
}

.modal-footer-box{
  display: flex;
  justify-content: center;   /* centra horizontal */
  align-items: center;       /* centra vertical */
}

.modal-input-suffix{
  font-size: 25px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ACHICAR + CENTRAR el input del modal "Solicitar Clave" */
#modalRequestKey #inputRecoveryEmail{
  font-size: 20px;        /* lo que dejaste */
  height: 40px;           /* <-- baja el alto de la caja */
  padding: 6px 12px;      /* menos padding = menos alto */
  max-width: 300px;       /* <-- más angosta (ajusta a gusto) */
  width: 100%;
  display: block;
}

/* Mantener el label alineado a la izquierda */
#modalRequestKey label[for="inputRecoveryEmail"]{
  display: block;
  text-align: left;
}

/* Si también quieres achicar el “bloque” donde va (el p-4 verde) */
#modalRequestKey .modal-content-box .p-4{
  padding: 12px 18px !important;  /* antes era 1.5rem */
}

.btn-request-key {
    padding: 0.7rem 1rem;
}

/* Email input + sufijo en la misma línea */
#modalRequestKey .email-row{
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: nowrap;
}

/* El input NO puede quedar en width:100% dentro de flex */
#modalRequestKey .email-row .modal-input-field{
  width: auto !important;
  flex: 1 1 380px;   /* ajusta el 380px a gusto */
  min-width: 0;      /* clave para que pueda encogerse */
}

/* El sufijo no debe partir línea */
#modalRequestKey .email-row .modal-input-suffix{
  flex: 0 0 auto;
  white-space: nowrap;
  color: #fff;
  font-size: 15px;   /* o el tamaño que estés usando */
}

/* Evita el “layout shift” cuando SweetAlert2 bloquea el scroll */
html { scrollbar-gutter: stable; }  /* Chrome/Edge/Firefox nuevos */

@supports not (scrollbar-gutter: stable){
  html { overflow-y: scroll; }      /* fallback: siempre reserva el espacio */
}

html, body { height: 100%; }

html body.swal2-height-auto {
  height: 100% !important;
  min-height: 100vh !important;
}