/* --- Estilos específicos para la página de login.php --- */

.login-wrapper {
    background-color: #eef2ff; /* Mismo fondo que otras páginas */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    min-height: 60vh;
}

.login-container {
    max-width: 450px;
    width: 100%;
    background-color: white;
    padding: 2.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.login-title {
    font-size: 2rem;
    font-weight: bold;
    color: #003366; /* Azul Oscuro */
    text-align: center;
    margin-bottom: 0.5rem;
}

.login-subtitle {
    text-align: center;
    color: #4f4f4f;
    margin-bottom: 2rem;
}

.login-label {
    font-weight: bold;
    color: #003366; /* Azul Oscuro */
    display: block;
    margin-bottom: 0.5rem;
}

.form-input {
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    width: 100%;
    color: #003366;
}
.form-input:focus {
    outline: none;
    border-color: #2c9dd7;
    box-shadow: 0 0 0 3px rgba(44, 157, 215, 0.2);
}

.login-button {
    width: 100%;
    background-color: #72b64f; /* Verde */
    color: white;
    font-weight: bold;
    padding: 0.6rem 1.8rem;
    border-radius: 1rem;
    transition: background-color 0.2s;
    margin-top: 1rem;
}
.login-button:hover {
    background-color: #5a9d3a;
}

.error-banner {
    background-color: #fef2f2;
    border: 1px solid #ef4444;
    color: #b91c1c;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.success-banner {
    background-color: #f0fdf4; /* Verde muy claro */
    border: 1px solid #22c55e; /* Verde */
    color: #166534; /* Verde oscuro */
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* --- Banner Superior --- */
.login-banner {
    background-size: cover;
    background-position: center;
    padding: 3rem 1rem;
}
.login-banner-content {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}
.login-banner-title {
    font-size: 2.4rem;
    color: white;
    font-weight: bold;
}

/* --- NUEVO: Estilos para el Overlay de Carga --- */
.loading-overlay {
    position: fixed;
    inset: 0; /* Equivalente a top:0, left:0, right:0, bottom:0 */
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.3s;
}

.loading-overlay.hidden {
    display: none;
}

.loading-overlay p {
    margin-top: 1rem;
    font-weight: bold;
    color: #003366; /* Azul Oscuro */
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f4f6; /* Gris claro */
    border-top: 5px solid #003366; /* Azul Oscuro */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- ESTILOS PARA EL BOTÓN DE MOSTRAR/OCULTAR CONTRASEÑA --- */

.password-container {
    position: relative;
    display: flex;
    align-items: center;
}

.password-container .form-input {
    padding-right: 2.5rem; /* Espacio para el botón */
}

.toggle-password-button {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #9ca3af; /* gris-400 */
}

.toggle-password-button:hover {
    color: #6b7280; /* gris-500 */
}

.toggle-password-button svg {
    width: 1.25rem; /* 20px */
    height: 1.25rem; /* 20px */
}
.loading-overlay {
    position: fixed;
    inset: 0; /* Equivalente a top:0, left:0, right:0, bottom:0 */
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.3s;
}

.loading-overlay.hidden {
    display: none;
}

.loading-overlay p {
    margin-top: 1rem;
    font-weight: bold;
    color: #003366; /* Azul Oscuro */
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f4f6; /* Gris claro */
    border-top: 5px solid #003366; /* Azul Oscuro */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}