/* ==================================================
1. LOGIN PAGE
=================================================== */
.login-container {
    max-width: 400px;
    margin: 50px auto;
    background: var(--bg-container); /* Usa variable para fondo */
    border: 1px solid var(--border);
    padding: 20px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: var(--shadow);
}

    .login-container h2 {
        font-size: 1.5rem;
        color: var(--text); /* Texto adaptable */
    }

    .login-container form {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .login-container input {
        width: 100%;
        padding: 10px;
        background: var(--input-bg); /* Fondo inputs adaptable */
        border: 1px solid var(--input-border);
        border-radius: 5px;
        color: var(--input-text); /* Texto inputs adaptable */
    }

        .login-container input::placeholder {
            color: #aaa; /* Placeholder fijo, pero legible en ambos temas */
        }

    .login-container button {
        width: 100%;
        padding: 10px;
        background-color: var(--success);
        color: #fff;
        border-radius: 5px;
        cursor: pointer;
    }

        .login-container button:hover {
            background-color: var(--button-hover);
        }

@media (min-width: 768px) {
    .login-container {
        max-width: 450px;
        padding: 25px;
    }
}

/* Mensajes de error y éxito (adaptables) */
.error p {
    color: #ff4d4d !important; /* Rojo para error, legible en oscuro */
    font-weight: bold;
}

.exito p {
    color: #28a745 !important; /* Verde para éxito */
    font-weight: bold;
}

/* Títulos fuera del contenedor */
div[style="text-align: center;"] h2 {
    color: var(--text); /* Adaptable */
}