/* Estilos compartidos para las páginas de Login, Registro y Recuperación de Usuario.
  Este único archivo controla la apariencia de todas esas páginas.
*/

/* Regla fundamental para que el layout ocupe el 100% de la altura */
html, body {
  height: 100%;
  margin: 0;
}

/* Contenedor principal de dos columnas */
.login-split {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* Columna izquierda (la del formulario) */
.login-left {
  flex: 1;
  background-color: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  box-sizing: border-box;
  overflow-y: auto; /* Permite scroll si el formulario es muy largo */
}

/* Contenedor del formulario */
.login-form {
  width: 100%;
  max-width: 380px;
}

/* Columna derecha (la de la imagen) */
.login-right {
  flex: 1;
  background: url('../../../images/login-bg.jpg') center/cover no-repeat;
  position: relative;
}

/* Línea divisoria sutil (opcional) */
.login-right::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.7);
}

/* Estilo para el ícono del ojo en la contraseña */
.password-toggle-icon {
  cursor: pointer;
}

/* --- REGLA PARA LOS ENLACES (NUEVO) --- */
/* Estilos para los enlaces "¿Olvidaste tu contraseña?" y "Regístrate" */
.login-form a {
  text-decoration: none; /* Quita el subrayado por defecto */
  color: #0d6efd;       /* Le asigna el color azul de Bootstrap */
  transition: color 0.2s ease; /* Añade una transición suave al color */
}

/* Opcional: Vuelve a poner el subrayado solo cuando el usuario pasa el mouse por encima */
.login-form a:hover {
  text-decoration: underline;
  color: #0d6efd; /* Un azul un poco más oscuro */
}


/* Media query para hacer que el layout sea responsive en móviles */
@media (max-width: 767.98px) {
  .login-split {
    flex-direction: column;
  }

  .login-left,
  .login-right {
    height: auto;
  }

  .login-right {
    display: none; /* Oculta la imagen en pantallas pequeñas */
  }
}

/* --- FIX PARA LIBRERÍA intl-tel-input --- */
/* Forzamos al contenedor de la bandera/input a ocupar el 100% del ancho */
.iti {
  width: 100%;
}