/* 
  Todos los estilos van dentro del contenedor .auth-container 
  para no afectar a otros elementos de la web.
*/

.page-id-762 div#hero{
	display:none;
}

@media (min-width: 1000px){ 
	.page-id-762 .menu-item a{
		color:black!important;
	}
	.page-id-762 .h-menu-horizontal>div>.colibri-menu-container>.colibri-menu>li>a svg.svg-inline--fa{
		color:black!important;
	}

}
	
.page-id-762 .style-552 > div > .colibri-menu-container > ul.colibri-menu{
			padding-top:15px;
}


@media (min-width: 1000px) { 
    section.auth-section {
      padding-top: 120px !important;
    }
}

@media (min-width:600px) and (max-width:999px) { 
    section.auth-section {
      padding-top: 105px !important;
    }
}

@media (max-width: 599px){
	section.auth-section {
      padding-top: 90px !important;
    }
}

@media (max-width: 450px){
	section.auth-section {
      padding-top: 90px !important;
    }
    .auth-container .forms-container{
        width:90%!important;
    }
}

/*.page-id-762 div#navigation{
    display:none;
}*/

.auth-container {
    background: transparent;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/* ===========================
   FUENTE Y REGLAS GENERALES
   =========================== */

/* Aplica Montserrat y color negro a toda el área de auth */
.auth-container,
.auth-container * {
  font-family: 'Montserrat', sans-serif;
  color: #000; /* Texto en negro */
  box-sizing: border-box; /* Para manejo consistente de padding/border */
}

.auth-container .fa,
.auth-container .fas,
.auth-container .far {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900;
}

.auth-container .fab {
  font-family: "Font Awesome 5 Brands" !important;
  font-weight: 400;
}

section.auth-section {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, #fff 0%, #fff 14%, rgba(255, 255, 255, 0) 30%),
        radial-gradient(780px 560px at 72% 22%, rgba(7, 146, 226, 0.07), transparent 72%),
        radial-gradient(620px 400px at 26% 18%, rgba(4, 190, 254, 0.045), transparent 74%),
        radial-gradient(860px 420px at 60% 78%, rgba(7, 146, 226, 0.035), transparent 78%),
        linear-gradient(180deg, #ffffff 0%, #f8fcff 52%, #fcfeff 82%, #ffffff 100%);
    background-repeat: no-repeat;
}

section.auth-section::after {
    content: "";
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -118px;
    height: 240px;
    border-radius: 50% 50% 0 0 / 70% 70% 0 0;
    background: linear-gradient(180deg, rgba(248, 253, 255, 0.32), rgba(255, 255, 255, 0.8));
    box-shadow: 0 -28px 54px rgba(255, 255, 255, 0.8);
    pointer-events: none;
}

.auth-container {
    position: relative;
    z-index: 1;
}

/* Enlaces en color #0792e2 */
.auth-container a {
  color: #0792e2;
  text-decoration: none;
  font-weight: 500;
}

/* Opcional: si quieres que los enlaces tengan hover subrayado, puedes añadir: */
 
.auth-container a:hover, .forgot-text:hover {
  color:#04befe;
}

.auth-container .checkbox-container label a:hover {
  color: #0792e2;
}


/* ===========================
   ESTRUCTURA PRINCIPAL
   =========================== */

.auth-container .forms-container {
  background: #fff;
  border-radius: 10px;
  width: 400px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  padding: 1rem;
  border: solid 1px #ececec;
}

/* Cada panel (login, registro, recuperar) */
.auth-container .form-panel {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.auth-container .form-panel.hidden {
  display: none;
}

/* ===========================
   TITULOS Y PÁRRAFOS
   =========================== */

.auth-container .form-panel h2 {
  text-align: center;
  margin: 0 0 1rem;
  font-size: 1.5rem;
  font-weight: 700;
  /* color: #000;  (heredado de la regla global) */
}

.auth-container .form-panel p {
  margin-bottom: 1.2rem;
  text-align: center;
}

/* Texto de “¿olvidaste la contraseña?” */
.forgot-text {
  margin-top: 1.3rem;
  text-align: left; 
}

/* ===========================
   CAMPOS DE FORMULARIO
   =========================== */

.form-field {
  position: relative;
  margin-bottom: 1rem;
}

.form-field input {
  width: 100%;
  padding: 0.8rem 0.8rem 0.8rem 2.5rem; 
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
}

.form-field .icon {
  position: absolute;
  top: 50%;
  left: 0.8rem;
  transform: translateY(-50%);
  font-size: 1.2rem;
  pointer-events: none;
}

/* ===========================
   CHECKBOX
   =========================== */

/* Estilo de la checkbox 
   Nota: Algunos navegadores no aplican background a input[type=checkbox].
   'accent-color' funciona en navegadores modernos (Chromium/Firefox). 
   Lo incluimos para el color del “check”. 
*/
.auth-container .checkbox-container input[type="checkbox"] {
  -webkit-appearance: none; /* Safari/Chrome */
  -moz-appearance: none;    /* Firefox */
  appearance: none;         /* Estándar */
  
  width: 20px;
  height: 20px;
  cursor: pointer;
  
  /* Fondo gris claro y borde gris */
  background-color: #EDEDED; 
  border: none;
  border-radius: 3px;  /* Ajusta si quieres esquinas más redondeadas */
  position: relative;  /* Para ubicar el pseudo-elemento */
}

.auth-container .checkbox-container input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  /* Centramos la pseudo-capa en el medio de la cajita */
  top: 43%;
  left: 50%;
  /* Tamaño del "tick" */
  width: 6px;
  height: 12px;
  /* Desplaza el punto de anclaje a la mitad de su propio tamaño */
  transform: translate(-50%, -50%) rotate(45deg);
  /* Dibujamos la palomita usando bordes */
  border-right: 2px solid #17A8E3;
  border-bottom: 2px solid #17A8E3;

}


.auth-container .checkbox-container {
  display: block;
  align-items: center; /* Alinea verticalmente el checkbox y el label */
  gap: 0.4rem;         /* Espacio opcional entre la casilla y el texto */
  margin-bottom:15px;
  text-align: left
}

.auth-container input[type="radio"], .auth-container input[type="checkbox"]{
    bottom:0px;
    
}

/* Estilo del label del checkbox */
.auth-container .checkbox-container label {
  font-weight: 400;
  font-size:14px;
  /* color: #000; (heredado) */
}

/* ===========================
   BOTONES
   =========================== */

/* Todos los botones comparten este estilo */
button.btn-login,
button.btn-register,
button.btn-forgot {
  display: inline-block;
  width: 100%;
  font-family: 'Montserrat', sans-serif; /* Repetido para asegurar la fuente */
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #fff!important;
  cursor: pointer;
  padding: 0.8rem 0.8rem; /* Espaciado interno */
  text-align: center;
  border: none;
  border-radius: 50px; /* Bordes redondeados */
  background-size: 300% 100%;
  background-image: linear-gradient(
    to right,
    #25aae1,
    #4481eb,
    #04befe,
    #3f86ed
  );
  box-shadow: 0 2px 15px 0 rgba(65, 132, 234, 0.75); /* Sombra suave */
  transition: all 0.4s ease-in-out;
  white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
  text-transform: uppercase;
    margin-top: 10px;
}

.btn-login .btn-text, .btn-register .btn-text, .btn-forgot .btn-text, .btn-reset .btn-text, .btn-error .btn-text{
  color: #fff !important;
}

/* Hover de los botones */
button.btn-login:hover,
button.btn-register:hover,
button.btn-forgot:hover {
  background-position: 100% 0;
  box-shadow: 0 1px 8px 0 rgba(65, 132, 234, 0.85); /* Sombra más intensa */
  transform: scale(1.05); /* Efecto de ligera ampliación */
}

/* Focus (quitar outline) */
button.btn-login:focus,
button.btn-register:focus,
button.btn-forgot:focus {
  outline: none;
}

.form-field .toggle-password {
  position: absolute;
  top: 50%;
  right: 0.8rem;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 1.2rem;
  color: #666;
  background: none;
  border: none;
  outline: none;
  padding: 0;
}

/* Clase que cambia el borde del input cuando hay error */
.form-field.error-active input {
  border: 1px solid #E04562 !important;
  /*transition: border 0.3s ease-in-out;*/
}

.form-field .toggle-password:hover {
  color: #000;
}

.auth-container .toggle-text {
  margin-top: 2rem;
  text-align: center;
  margin-bottom: 0px!important;
  /* color: #000; (heredado) */
  /* El enlace adentro se pinta en #0792e2 por la regla general .auth-container a */
}

.error-message {
  color: #E04562;
  font-size: 12px;
  font-weight:500;
  text-align: left!important;
  margin-top: -10px;
  margin-bottom: 10px !important;
  background-color: #F9E4E8;
  padding: 2px 10px;
}

/* Botón en estado de carga */
.btn-login.loading, .btn-register.loading {
  /*background: #ccc !important;*/
  cursor: not-allowed;
  pointer-events: none;
  position: relative;
}

/* Ocultar el texto del botón cuando está en estado de carga */
.btn-login.loading .btn-text, .btn-register.loading .btn-text {
  visibility: hidden;
}

/* Loader específico para el botón de acceso */
.login-loader, .register-loader {
  display: none; /* Oculto por defecto */
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: login-spin 0.8s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Mostrar el loader solo cuando el botón está en carga */
.btn-login.loading .login-loader, .btn-register.loading .register-loader {
  display: block;
}

/* Animación del loader */
@keyframes login-spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes register-spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

#countdown-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.5rem;
}

/* Contenedor para el número, sin animación */
.spinner-login {
  position: relative;
  width: 80px;   /* Ajusta el tamaño a tu gusto */
  height: 80px;
  display: flex; /* Para centrar el número */
  justify-content: center;
  align-items: center;
  list-style: none; /* Asegura que no muestre viñetas */
}

/* El aro giratorio está en el pseudo-elemento */
.spinner-login::before {
  content: '';
  display: block;               /* Importante para que se vea el aro */
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 4px solid #ccc;       /* Borde gris claro */
  border-top: 4px solid #0792e2;/* Borde superior en color azul */
  border-radius: 50%;
  animation: verified-spin 1s linear infinite;
}

/* Animación de giro */
@keyframes verified-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Estilo para el número en el centro */
.spinner-login #countdown {
  position: relative;
  font-size: 1.5rem;
  font-weight: 600;
  color: #0792e2; /* Ajusta a tu gusto */
}

.spinner-login #countdown-reset {
  position: relative;
  font-size: 1.5rem;
  font-weight: 600;
  color: #0792e2; /* Ajusta a tu gusto */
}

/* ===========================
   BOTÓN "ENVIAR CÓDIGO" (RECUPERAR)
   =========================== */
.btn-forgot {
  /* Puedes copiar aquí las reglas base que usas en .btn-login o .btn-register */
  display: inline-block;
  width: 100%;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #fff !important;
  cursor: pointer;
  padding: 0.8rem 0.8rem;
  text-align: center;
  border: none;
  border-radius: 50px;
  background-size: 300% 100%;
  background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
  box-shadow: 0 2px 15px 0 rgba(65, 132, 234, 0.75);
  transition: all 0.4s ease-in-out;
  white-space: nowrap;
  text-transform: uppercase;
  margin-top: 10px;
}

.btn-forgot:hover {
  background-position: 100% 0;
  box-shadow: 0 1px 8px 0 rgba(65, 132, 234, 0.85);
  transform: scale(1.05);
}

.btn-forgot:focus {
  outline: none;
}

/* Estado de carga */
.btn-forgot.loading {
  cursor: not-allowed;
  pointer-events: none;
  position: relative;
}

/* Ocultar texto cuando está cargando */
.btn-forgot.loading .btn-text {
  visibility: hidden;
}

/* Loader para "Enviar código" */
.forgot-loader {
  display: none;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: forgot-spin 0.8s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Mostrar el loader cuando el botón está en estado .loading */
.btn-forgot.loading .forgot-loader {
  display: block;
}

/* Animación del loader */
@keyframes forgot-spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ===========================
   BOTÓN "ENVIAR" (RESTABLECIMIENTO)
   =========================== */
.btn-reset {
  /* Copia el mismo estilo base que quieras de btn-register o btn-login */
  display: inline-block;
  width: 100%;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #fff !important;
  cursor: pointer;
  padding: 0.8rem 0.8rem;
  text-align: center;
  border: none;
  border-radius: 50px;
  background-size: 300% 100%;
  background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
  box-shadow: 0 2px 15px 0 rgba(65, 132, 234, 0.75);
  transition: all 0.4s ease-in-out;
  white-space: nowrap;
  text-transform: uppercase;
  margin-top: 10px;
}

.btn-reset:hover {
  background-position: 100% 0;
  box-shadow: 0 1px 8px 0 rgba(65, 132, 234, 0.85);
  transform: scale(1.05);
}

.btn-reset:focus {
  outline: none;
}

/* Estado de carga */
.btn-reset.loading {
  cursor: not-allowed;
  pointer-events: none;
  position: relative;
}

/* Ocultar texto cuando está cargando */
.btn-reset.loading .btn-text {
  visibility: hidden;
}

/* Loader para "Enviar" en restablecimiento */
.reset-loader {
  display: none;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: reset-spin 0.8s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Mostrar el loader cuando el botón está en estado .loading */
.btn-reset.loading .reset-loader {
  display: block;
}

/* Animación del loader */
@keyframes reset-spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.btn-error-loader.loading .btn-text {
  visibility: hidden;
}

.btn-error-loader.loading .error-loader {
  display: block!important;
}

.error-loader {
  display: none;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: error-spin 0.8s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

@keyframes error-spin {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}


.btn-error {
  display: inline-block;
  position: relative;
  width: 100%;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #fff !important;
  cursor: pointer;
  padding: 0.8rem 0.8rem;
  text-align: center;
  border: none;
  border-radius: 50px;
  background-size: 300% 100%;
  background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
  box-shadow: 0 2px 15px 0 rgba(65, 132, 234, 0.75);
  transition: all 0.4s ease-in-out;
  white-space: nowrap;
  text-transform: uppercase;
  margin-top: 10px;
  text-align: center;
}

.btn-error:hover {
  background-position: 100% 0;
  box-shadow: 0 1px 8px 0 rgba(65, 132, 234, 0.85);
  transform: scale(1.05);
}

.btn-error:focus {
  outline: none;
}