:root {
    --primary-blue: #012580;
    --white: #ffffff;
    --gray-light: #f4f7f6;
    --gray-border: #e0e4e8;
    --text-dark: #333333;
    --error-red: #d93025;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }

body { background-color: var(--gray-light); display: flex; justify-content: center; align-items: center; min-height: 100vh; }

body.has-login-background {
    background-image: url('/media/public/fundo_login');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.login-container { width: 100%; max-width: 400px; padding: 20px; }

.login-box { 
    background-color: var(--white); 
    padding: 40px 30px; 
    border-radius: 8px; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
}

/* Modificador caso o body possua imagem de fundo (garante contraste) */
body.has-login-background .login-box {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.login-box h2 { color: var(--primary-blue); text-align: center; margin-bottom: 24px; font-weight: 600; }

.login-logo {
    display: block;
    margin: 0 auto 24px;
    max-width: min(100%, 280px);
    max-height: 100px;
    object-fit: contain;
}

.input-group { margin-bottom: 20px; }
.input-group label { display: block; margin-bottom: 8px; color: var(--text-dark); font-size: 0.9rem; font-weight: 500; }
.input-group input { width: 100%; padding: 12px; border: 1px solid var(--gray-border); border-radius: 4px; font-size: 1rem; transition: border-color 0.3s; }
.input-group input:focus { outline: none; border-color: var(--primary-blue); box-shadow: 0 0 0 2px rgba(1, 37, 128, 0.2); }

button { width: 100%; padding: 14px; background-color: var(--primary-blue); color: var(--white); border: none; border-radius: 4px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background-color 0.3s, opacity 0.3s; }
button:hover { opacity: 0.9; }
button:disabled { opacity: 0.6; cursor: not-allowed; }

.alert.error { background-color: #fce8e6; color: var(--error-red); padding: 12px; border-radius: 4px; margin-bottom: 20px; font-size: 0.9rem; text-align: center; }

.cf-turnstile { margin-bottom: 20px; display: flex; justify-content: center; }
.forgot-password { text-align: center; margin-top: 20px; }
.forgot-password a { color: var(--primary-blue); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: color 0.3s; }
.forgot-password a:hover { color: #011855; text-decoration: underline; }

@media (max-width: 480px) { .login-box { padding: 30px 20px; } }