/* ============================================================
   Telas de entrada (login, 2FA, troca de senha) -- includes/login_visual.php
   Visual corporativo: fundo azul-escuro sóbrio, cartão centralizado, sem animação e sem brilho.
   As variáveis abaixo redefinem as de main.css só aqui dentro, então alertas, links e o seletor de idioma
   herdam cores legíveis no fundo escuro sem regra própria.
   ============================================================ */
.login-page {
    --fg: #e9f0fa;
    --fg-2: #bfcde0;
    --fg-3: #8b9db6;
    --border: rgba(160, 190, 230, .16);
    --bg: #0b1d36;
    --bg-2: #10284a;
    --bg-3: #143259;
    --bg-4: rgba(255, 255, 255, .08);
    --accent: #2a8fd6;
    --login-campo: #0d2442;
    --login-azul: #1f6fbf;
    min-height: 100vh;
    display: block;                 /* main.css deixava .login-page em flex; aqui quem centraliza é .login-centro */
    position: relative;
    overflow: hidden;
    color: var(--fg);
    font-family: 'Inter', system-ui, sans-serif;
    background: linear-gradient(180deg, #0a1a31 0%, #0d2342 100%);
}
body:has(.login-page) { background: #0a1a31; margin: 0; }

/* fundo: poucas linhas de rede estáticas, quase transparentes */
.login-bg { position: absolute; inset: 0; pointer-events: none; }
.login-linhas { position: absolute; inset: 0; width: 100%; height: 100%; }
.login-linhas path { fill: none; stroke: rgba(120, 170, 230, .10); stroke-width: 1; }
.login-linhas circle { fill: rgba(120, 170, 230, .22); }

.login-centro {
    position: relative; z-index: 1; min-height: 100vh; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center; padding: 32px 16px;
}

/* cartão */
.login-page .login-card {
    width: 100%; max-width: 400px; box-sizing: border-box; position: relative;
    background: #10284a;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 36px 32px 24px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
}
.login-page .login-logo { text-align: center; margin-bottom: 8px; }
.login-page .login-logo img { width: 66%; max-width: 210px; height: auto; display: inline-block; }
.login-page .login-logo-placa img { background: #fff; border-radius: 8px; padding: 10px 14px; box-sizing: border-box; }
.login-marca { font-family: 'Rajdhani', sans-serif; font-size: 2.2rem; font-weight: 700; letter-spacing: 3px; color: #fff; }
.login-titulo { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1.2rem; text-align: center; margin: 18px 0 4px; color: #fff; }
.login-sub { text-align: center; font-size: .8rem; color: var(--fg-3); margin: 0 0 24px; }
.login-texto { text-align: center; font-size: .85rem; color: var(--fg-2); margin: 0 0 18px; line-height: 1.5; }

/* campos */
.login-campo { position: relative; margin-bottom: 14px; }
.login-campo .login-campo-icone { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--fg-3); pointer-events: none; }
.login-page .login-campo input {
    width: 100%; box-sizing: border-box; height: 46px; margin: 0;
    padding: 0 44px 0 44px; border-radius: 8px;
    background: var(--login-campo); border: 1px solid rgba(160, 190, 230, .22);
    color: #fff; font-size: .93rem;
}
.login-page .login-campo input::placeholder { color: rgba(200, 215, 235, .55); }
.login-page .login-campo input:focus { outline: none; border-color: #3d8fda; box-shadow: 0 0 0 2px rgba(61, 143, 218, .25); }
.login-page .login-campo input:-webkit-autofill { -webkit-text-fill-color: #fff; caret-color: #fff; -webkit-box-shadow: 0 0 0 40px #0d2442 inset; }
.login-page .login-campo input.login-codigo { letter-spacing: .3em; text-align: center; font-family: var(--font-mono, monospace); font-size: 1.1rem; }
.login-olho {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; border-radius: 6px; border: 0; background: transparent; color: var(--fg-3);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.login-olho:hover, .login-olho:focus-visible { color: #fff; background: rgba(255, 255, 255, .06); outline: none; }
.login-caps { font-size: .75rem; color: #f2c46d; margin: -6px 0 10px 2px; }
.login-caps[hidden] { display: none; }
.login-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* botões */
.login-botao {
    display: flex; width: 100%; margin: 18px 0 0; height: 46px; border: 0; border-radius: 8px; cursor: pointer;
    align-items: center; justify-content: center; gap: 8px; box-sizing: border-box;
    font-family: 'Inter', sans-serif; font-size: .98rem; font-weight: 600; color: #fff; text-decoration: none;
    background: var(--login-azul);
}
.login-botao:hover { background: #2479cf; color: #fff; text-decoration: none; }
.login-botao:focus-visible { outline: 2px solid #8ec3f2; outline-offset: 2px; }
.login-botao-sec { background: transparent; border: 1px solid rgba(160, 190, 230, .35); font-weight: 500; margin-top: 12px; }
.login-botao-sec:hover { background: rgba(255, 255, 255, .05); }
.login-ou { display: flex; align-items: center; gap: 10px; margin: 20px 0 0; color: var(--fg-3); font-size: .78rem; }
.login-ou::before, .login-ou::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.login-link { text-align: center; margin-top: 16px; font-size: .82rem; }
.login-link a { color: #8ec3f2; text-decoration: none; }
.login-link a:hover { text-decoration: underline; }
.login-rodape { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
.login-versao { font-size: .72rem; color: var(--fg-3); }
.login-page .alert { margin-bottom: 16px; border-radius: 8px; }
.login-page .alert-error { background: rgba(220, 53, 69, .14); border-color: rgba(240, 120, 130, .4); color: #ffd3d7; }
.login-page .alert-warning { background: rgba(255, 193, 7, .1); border-color: rgba(240, 200, 110, .4); color: #ffe5ad; }
.login-page .alert-success { background: rgba(40, 167, 69, .14); border-color: rgba(120, 210, 150, .4); color: #d4f7de; }
.login-page .lang-seletor { background: rgba(255, 255, 255, .04); border-color: var(--border); box-shadow: none; }
.login-page .lang-seletor .lang-btn { color: var(--fg-2); }
.login-page .lang-seletor .lang-btn.ativo { background: var(--login-azul); color: #fff; box-shadow: none; }

@media (max-width: 420px) {
    .login-page .login-card { padding: 28px 20px 20px; }
    .login-rodape { flex-direction: column; }
}