/* Layout da Página de Login Baseado no ProjetaGrid */
body.login-page { display: flex; min-height: 100vh; margin: 0; }
.login-wrapper { display: flex; width: 100%; }

.branding-column {
    flex: 1;
    background-color: var(--primary-blue);
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    text-align: center;
    border-right: 6px solid var(--accent-yellow);
}

.branding-column h2 { font-size: 38px; margin-bottom: 20px; color: var(--accent-yellow); }
.branding-column p { font-size: 18px; max-width: 450px; line-height: 1.6; opacity: 0.9; }

.form-column {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--light-gray);
    padding: 40px;
}

.auth-container {
    background-color: var(--white);
    padding: 45px;
    border-radius: var(--border-radius);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 450px;
}

.input-group { margin-bottom: 20px; }
.input-group label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--dark-blue); }
.input-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--medium-gray);
    border-radius: var(--border-radius);
    font-size: 16px;
    background-color: #FAFAFA;
}
.input-group input:focus { border-color: var(--primary-blue); outline: none; background-color: var(--white); }

/* Responsividade do Login */
@media (max-width: 768px) {
    .login-wrapper { flex-direction: column; }
    .branding-column { padding: 40px 20px; border-right: none; border-bottom: 5px solid var(--accent-yellow); }
}