/* ==================================================================
   B_SCHOOL · secretaria_login.css
   ================================================================== */

:root {
    --azul-900: #0b1f3a; --azul-700: #16365f; --azul-600: #1b4d89;
    --azul-500: #2565a8; --branco: #ffffff; --cinza-100: #f4f6f9;
    --cinza-300: #cbd5e1; --cinza-500: #6b7280; --cinza-700: #374151;
    --vermelho: #b91c1c;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body.sec-login-page {
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: linear-gradient(135deg, var(--azul-900) 0%, var(--azul-700) 55%, var(--azul-600) 100%);
}

.sec-login-box {
    width: 100%; max-width: 420px;
    background: var(--branco); border-radius: 14px;
    padding: 40px 34px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    animation: secSurgir .5s ease;
}
@keyframes secSurgir {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

.sec-login-brand { text-align: center; margin-bottom: 26px; }
.sec-login-logo {
    width: 72px; height: 72px; object-fit: contain;
    margin: 0 auto 10px; border-radius: 12px;
    border: 1px solid var(--cinza-300); padding: 4px; background: var(--cinza-100);
}
.sec-login-brand h1 { font-size: 1.4rem; font-weight: 800; color: var(--azul-900); letter-spacing: .5px; }
.sec-login-brand p { font-size: .85rem; color: var(--cinza-500); margin-top: 2px; }

.alert {
    display: flex; align-items: center; gap: 8px;
    font-size: .88rem; border-radius: 8px; padding: 12px 14px; margin-bottom: 18px;
}
.alert-error { background: #fef2f2; color: var(--vermelho); border: 1px solid #fecaca; }

.form-group { margin-bottom: 18px; }
.form-group label {
    display: block; font-size: .85rem; font-weight: 600;
    color: var(--cinza-700); margin-bottom: 8px;
}
.form-group label i { color: var(--azul-500); margin-right: 6px; }
.form-group input {
    width: 100%; padding: 12px 14px;
    border: 1px solid var(--cinza-300); border-radius: 8px;
    font-size: .95rem; font-family: inherit; color: var(--cinza-700);
    background: var(--cinza-100);
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.form-group input:focus {
    outline: none; border-color: var(--azul-500);
    box-shadow: 0 0 0 3px rgba(37, 101, 168, .15); background: var(--branco);
}

.password-field { position: relative; }
.password-toggle {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--cinza-500);
    cursor: pointer; font-size: 1rem; padding: 6px;
}
.password-toggle:hover { color: var(--azul-600); }

.btn-login {
    width: 100%; padding: 13px;
    background: var(--azul-600); color: var(--branco);
    border: none; border-radius: 8px;
    font-size: 1rem; font-weight: 700; font-family: inherit; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    transition: background .2s, transform .2s;
}
.btn-login:hover { background: var(--azul-700); transform: translateY(-2px); }

.sec-login-hint {
    text-align: center; margin-top: 20px;
    font-size: .78rem; color: var(--cinza-500);
}
.sec-login-back {
    display: block; text-align: center; margin-top: 10px;
    font-size: .85rem; color: var(--azul-600); font-weight: 600;
}
.sec-login-back:hover { text-decoration: underline; }

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