/* --- Reseteo Básico y Fuentes --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* --- Estilos del Body para Centrar --- */
.login-body-l {
    font-family: 'Lato', Arial, sans-serif; /* O tu fuente preferida */
    background-color: #f8f9fa; /* Fondo gris claro para la página */
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    min-height: 100vh; /* Asegura que ocupe toda la altura */
    padding: 20px; /* Espacio por si el contenido es muy alto en pantallas pequeñas */
}

/* --- Contenedor del Login --- */
.login-container-l {
    background-color: #ffffff; /* Fondo blanco para la caja de login */
    padding: 40px 30px; /* Relleno interior */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Sombra suave */
    width: 100%; /* Ancho completo por defecto */
    max-width: 450px; /* Ancho máximo para la caja */
    text-align: center; /* Centra el texto interno como el h1 */
}

.login-container-l > img{
    max-height: 150px;
    height: auto;
}

/* --- Encabezado del Login --- */
.login-heading-l {
    color: #333;
    margin-top: 20px;
    margin-bottom: 30px; /* Espacio debajo del título */
    font-size: 2em;
    font-weight: 700;
}

/* --- Grupos del Formulario --- */
.form-group-l {
    margin-bottom: 20px; /* Espacio entre grupos (label/input y botón) */
    text-align: left; /* Alinea labels e inputs a la izquierda */
}

/* --- Etiquetas --- */
.login-label-l {
    display: block; /* Hace que ocupe toda la línea */
    margin-bottom: 8px; /* Espacio entre label e input */
    color: #555;
    font-weight: bold;
    font-size: 0.9em;
}

/* --- Campos de Entrada (Inputs) --- */
.login-input-l {
    width: 100%; /* Ocupa todo el ancho del contenedor */
    padding: 12px 15px; /* Relleno interior */
    border: 1px solid #ccc; /* Borde sutil */
    border-radius: 5px; /* Bordes redondeados */
    font-size: 1em;
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Transición suave */
}

.login-input-l:focus {
    outline: none; /* Quita el outline por defecto */
    border-color: #0097B2; /* Cambia el color del borde al enfocar (color acento) */
    box-shadow: 0 0 0 3px rgba(0, 151, 178, 0.2); /* Sombra suave con color acento */
}

.login-input-l::placeholder {
    color: #aaa; /* Color del texto placeholder */
}

/* --- Botón de Envío --- */
.login-button-l {
    width: 100%; /* Ocupa todo el ancho */
    padding: 12px 20px;
    background-color: #0097B2; /* Color de acento */
    color: #ffffff; /* Texto blanco */
    border: none; /* Sin borde */
    border-radius: 5px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer; /* Cursor de mano */
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 10px; /* Espacio extra arriba del botón */
}

.login-button-l:hover {
    background-color: #0C2D59; /* Color más oscuro al pasar el mouse */
    transform: translateY(-2px); /* Ligero efecto de levantamiento */
}

/* --- Enlace "Olvidaste Contraseña" --- */
.forgot-password-l {
    margin-top: 20px; /* Espacio después del botón */
    text-align: center; /* Centra el enlace */
    font-size: 0.9em;
}

.forgot-password-l a {
    color: #0097B2; /* Color de acento para el enlace */
    text-decoration: none; /* Sin subrayado por defecto */
}

.forgot-password-l a:hover {
    text-decoration: underline; /* Subrayado al pasar el mouse */
}

/* --- Adaptabilidad (Opcional, ya es bastante adaptable) --- */
@media (max-width: 480px) {
    .login-container-l {
        padding: 30px 20px; /* Menos padding en pantallas muy pequeñas */
    }

    .login-heading-l {
        font-size: 1.8em; /* Título ligeramente más pequeño */
    }
}