/* Movido de templates/auth/_layout.html (SEC-12, CSP sem 'unsafe-inline', 22/10/2026). */

:root {
    --q-navy-900: #062A47;
    --q-blue-600: #0B5A93;
    --q-blue-500: #1570B5;
    --q-slate-600: #44546A;
    --q-surface: #F5F8FB;

    --bg: var(--q-surface);
    --surface: #FFFFFF;
    --border: #DCE3EA;
    --text: #18181B;
    --text-secondary: var(--q-slate-600);
    --primary: var(--q-blue-600);
    --primary-hover: var(--q-blue-500);
    --danger: #EF4444;
}

body {
    /* Fundo de marca (navio/degradê) — só a tela de autenticação
       usa isto; o resto do app usa --bg do design system (tema
       claro/escuro). Ver docs/CORES.md e update/GUIA_DA_MARCA.md. */
    background: linear-gradient(160deg, var(--q-blue-600), var(--q-navy-900));
    color: var(--text);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.cartao-auth {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(6, 42, 71, 0.25);
    padding: 2rem;
    width: 100%;
    max-width: 420px;
}

.cartao-auth .marca {
    text-align: center;
    margin-bottom: 1.5rem;
}

.cartao-auth .marca .marca-logo {
    width: 100%;
    max-width: 280px;
    height: auto;
    margin-bottom: .6rem;
}

.cartao-auth .marca .marca-slogan {
    font-size: .72rem;
    letter-spacing: .04em;
    color: var(--q-slate-600);
    text-transform: uppercase;
}

.form-control, .form-control:focus {
    background: var(--q-surface);
    border-color: var(--border);
    color: var(--text);
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 .2rem rgba(11, 90, 147, .25);
}

label {
    color: var(--text-secondary);
    font-size: .875rem;
}

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
}

.btn-primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.alert {
    font-size: .9rem;
}

.qrcode-mfa {
    background: #fff;
    padding: 12px;
    border-radius: 8px;
    display: inline-block;
}

.codigo-recuperacao {
    font-family: ui-monospace, monospace;
    background: var(--q-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .5rem .75rem;
}