/* === ESTILOS TIPOGRÁFICOS LOGIN (Opción Montserrat) === */

.login-form-container h4 {
  font-family: 'Montserrat', sans-serif; /* Aplicar Montserrat al título h4 */
  font-size: 1.5rem; /* Tamaño adecuado para Montserrat */
  line-height: 1.4;
  color: #3A5A75;
}

/* Estilo para la primera línea del título */
.login-form-container h4 span:first-child {
  font-weight: 600; /* Semi-negrita */
  display: block;
  margin-bottom: 0.25rem;
}

/* Estilo para la segunda línea */
.login-form-container h4 span.text-muted {
  font-family: 'Montserrat', sans-serif; /* Mantenemos Montserrat */
  font-weight: 300; /* Ligero */
  font-size: 1rem;
  color: #6c757d;
}

/* Opcional: Aplicar Montserrat a las etiquetas también */
.login-form-container label {
   font-family: 'Montserrat', sans-serif;
   font-weight: 500; /* Peso medio */
   color: #495057;
   font-size: 0.9rem; /* Ligeramente más pequeño */
}


/* === ESTILOS PARA EL LOGIN === */

/* Ajustes opcionales para los iconos en los inputs */
.login-form-container .input-group-text {
    /* Ajusta el color de fondo o del icono si no coincide con tu diseño */
    /* background-color: #e9ecef; */ /* Fondo por defecto de Bootstrap 4 */
    /* border-right: none; */ /* Para quitar el borde entre icono y input si prefieres */
}

.login-form-container .input-group-text i {
   color: #6c757d; /* Color gris suave para los iconos */
   width: 1.2em; /* Asegura un ancho consistente */
   text-align: center;
}

/* Ajusta el padding del input si el icono se superpone (raro con input-group) */
/*
.login-form-container .input-group .form-control {
    padding-left: 0.75rem;
}
*/

/* [MEJORA 1: Fondo Gradiente Suave para la Columna Derecha] */
.login-gradient-bg {
  /* Azul grisáceo claro/medio a tu color oscuro */
  background: linear-gradient(135deg, #a3b4c2 0%, #3A5A75 100%); 
}

/* [MEJORA 2: Ajustes al Contenedor del Formulario] */
/* Bootstrap ya añade padding (p-4/p-5), shadow y rounded. */
/* Podemos añadir un max-width si es necesario en pantallas muy grandes */
.login-form-container {
   max-width: 550px; /* Ajusta según necesites */
   width: 100%;
}


/* [MEJORA 3: Estilo del Logo] */
.login-logo-img {
  max-width: 280px; /* Ajusta el tamaño máximo del logo */
  height: auto;     /* Mantiene la proporción */
}

/* [MEJORA Adicional: Inputs un poco más estilizados (Opcional)] */
.login-form-container .form-control-lg {
  /* Puedes añadir estilos sutiles aquí si Bootstrap no es suficiente */
  /* Por ejemplo, un borde un poco más grueso al enfocar */
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.login-form-container .form-control-lg:focus {
   border-color: #3A5A75; /* Color de foco de Bootstrap */
   box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Sombra de foco de Bootstrap */
}

/* [MEJORA Adicional: Botón Ingresar con énfasis] */
.login-form-container .btn-primary {
    /* Bootstrap ya lo hace primario. Puedes añadir más si quieres */
    /* Por ejemplo, un ligero efecto al pasar el ratón */
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.login-form-container .btn-primary:hover {
    /* transform: translateY(-2px); */ /* Ligero levantamiento */
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); */ /* Sombra más pronunciada */
}

/* Asegurar que el carrusel mantenga su altura en pantallas pequeñas si es necesario */
@media (max-width: 991.98px) {
    .login-gradient-bg {
        min-height: 100vh; /* Asegura que ocupe toda la altura en móvil */
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}