/*
 * Login do Wiser+ Flow (Login.razor e LoginMfa.razor, via MolduraLoginFlow). Carregado SÓ nessas páginas
 * (HeadContent): não usa nem altera o tokens.css; o resto do Blazor segue na marca antiga.
 * Tema: prefers-color-scheme, ou o wiserflow.theme salvo (js/login-tema.js põe data-tema-login no <html>).
 * Toda cor vive numa variável --fl-* do bloco .fl-login; as regras só usam var(--fl-*).
 * Referência visual: protótipo login-previa (brain/reports/identidade-wiserflow/aplicacoes/login-previa).
 */
@font-face {
    font-family: "Urbanist Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/urbanist-latin-wght-normal.woff2") format("woff2-variations");
}

@font-face {
    font-family: "DM Sans Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 1000;
    src: url("../fonts/dm-sans-latin-wght-normal.woff2") format("woff2-variations");
}

.fl-login {
    --fl-navy: #0F172A;
    --fl-azul: #3D5BFF;
    --fl-azul-hover: #2B44CC;
    --fl-ciano: #22D3EE;
    --fl-gradiente: linear-gradient(90deg, var(--fl-azul), #2E9BF5 60%, var(--fl-ciano));
    --fl-painel-texto: #FFFFFF;
    --fl-painel-apoio: #94A3B8;
    --fl-painel-pontos: rgba(61, 91, 255, 0.14);
    --fl-painel-brilho: rgba(61, 91, 255, 0.35);
    --fl-painel-brilho-fim: rgba(61, 91, 255, 0);
    --fl-barra-sombra: rgba(34, 211, 238, 0.18);
    --fl-botao-texto: #FFFFFF;
    --fl-botao-sombra: rgba(61, 91, 255, 0.28);
    --fl-foco: rgba(61, 91, 255, 0.25);
    --fl-anel: var(--fl-azul);             /* anel de foco do botão: azul no claro (ciano sobre branco = 1.81:1) */

    --fl-fundo: #FFFFFF;
    --fl-texto: #0F172A;
    --fl-texto-apoio: #475569;
    --fl-rotulo: #334155;
    --fl-icone: #64748B;
    --fl-borda: #CBD5E1;
    --fl-link: #3D5BFF;
    --fl-erro-fundo: #FEF2F2;
    --fl-erro-borda: #FECACA;
    --fl-erro-texto: #B91C1C;

    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
    font-family: "DM Sans Variable", "DM Sans", system-ui, -apple-system, sans-serif;
    color: var(--fl-texto);
    background: var(--fl-fundo);
    -webkit-font-smoothing: antialiased;
}

/* Escuro: tema salvo, ou o do sistema quando não há tema salvo (light salvo vence o sistema). */
:root[data-tema-login="dark"] .fl-login {
    --fl-fundo: #111C2E;
    --fl-texto: #E8EEF6;
    --fl-texto-apoio: #A3B0C2;
    --fl-rotulo: #C9D3E0;
    --fl-icone: #8995A8;
    --fl-borda: #33435A;
    --fl-link: #6FB8FF;
    --fl-anel: var(--fl-ciano);
    --fl-erro-fundo: #3A1414;
    --fl-erro-borda: #6B2525;
    --fl-erro-texto: #F97066;
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema-login="light"]) .fl-login {
        --fl-fundo: #111C2E;
        --fl-texto: #E8EEF6;
        --fl-texto-apoio: #A3B0C2;
        --fl-rotulo: #C9D3E0;
        --fl-icone: #8995A8;
        --fl-borda: #33435A;
        --fl-link: #6FB8FF;
        --fl-anel: var(--fl-ciano);
        --fl-erro-fundo: #3A1414;
        --fl-erro-borda: #6B2525;
        --fl-erro-texto: #F97066;
        color-scheme: dark;
    }
}

/* ── Painel da marca (esquerda) ── */
.fl-marca {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 56px 64px;
    box-sizing: border-box;
    background-color: var(--fl-navy);
    background-image: radial-gradient(var(--fl-painel-pontos) 1px, transparent 1px);
    background-size: 24px 24px;
    color: var(--fl-painel-texto);
}

.fl-marca-brilho {
    position: absolute;
    width: 900px;
    height: 900px;
    right: -420px;
    bottom: -460px;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--fl-painel-brilho), var(--fl-painel-brilho-fim));
    pointer-events: none;
}

.fl-marca-logo {
    position: relative;
    display: block;
    width: 210px;
    max-width: 60%;
    height: auto;
}

.fl-marca-detalhe {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: 520px;
}

.fl-barras {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fl-barra {
    display: block;
    height: 22px;
    border-radius: 999px;
    background: var(--fl-gradiente);
    box-shadow: 0 8px 24px var(--fl-barra-sombra);
    animation: fl-entra 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.fl-barra:nth-child(1) { width: 88%; }
.fl-barra:nth-child(2) { width: 66%; animation-delay: 0.12s; }
.fl-barra:nth-child(3) { width: 44%; animation-delay: 0.24s; }

@keyframes fl-entra {
    from { transform: translateX(-24px); opacity: 0.001; }
    to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .fl-barra { animation: none; }
}

.fl-marca-titulo {
    margin: 0;
    font-family: "Urbanist Variable", "Urbanist", system-ui, sans-serif;
    font-weight: 800;
    font-size: 44px;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--fl-painel-texto);
}

.fl-marca-sub {
    margin: 0;
    max-width: 44ch;
    font-size: 16px;
    line-height: 1.6;
    color: var(--fl-painel-apoio);
}

.fl-marca-rodape {
    position: relative;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--fl-painel-apoio);
}

/* ── Formulário (direita) ── */
.fl-form-coluna {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
    box-sizing: border-box;
    background: var(--fl-fundo);
}

.fl-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 380px;
    max-width: 100%;
}

.fl-titulo {
    margin: 0;
    font-family: "Urbanist Variable", "Urbanist", system-ui, sans-serif;
    font-weight: 800;
    font-size: 30px;
    letter-spacing: -0.02em;
    color: var(--fl-texto);
}

.fl-subtitulo {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--fl-texto-apoio);
}

.fl-erro {
    padding: 10px 12px;
    border: 1px solid var(--fl-erro-borda);
    border-radius: 10px;
    background: var(--fl-erro-fundo);
    color: var(--fl-erro-texto);
    font-size: 14px;
}

.fl-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--fl-rotulo);
}

.fl-entrada {
    position: relative;
    display: block;
}

.fl-entrada-icone {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--fl-icone);
    pointer-events: none;
}

.fl-entrada input {
    width: 100%;
    height: 44px;
    box-sizing: border-box;
    padding: 0 12px 0 40px;
    border: 1px solid var(--fl-borda);
    border-radius: 10px;
    font: inherit;
    font-size: 16px; /* 16px: o Safari do iPhone não dá zoom ao focar */
    color: var(--fl-texto);
    background: var(--fl-fundo);
}

.fl-entrada input::placeholder { color: var(--fl-icone); }

.fl-entrada input:focus {
    outline: 3px solid var(--fl-foco);
    outline-offset: 0;
    border-color: var(--fl-azul);
}

.fl-entrada input.fl-codigo {
    padding-left: 40px;
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
    font-size: 20px;
    letter-spacing: 6px;
    text-align: center;
}

.fl-botao {
    height: 46px;
    border: 0;
    border-radius: 10px;
    background: var(--fl-azul);
    color: var(--fl-botao-texto);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 20px var(--fl-botao-sombra);
}

.fl-botao:hover { background: var(--fl-azul-hover); }
.fl-botao:focus-visible { outline: 3px solid var(--fl-anel); outline-offset: 2px; }

.fl-acoes { text-align: center; }

.fl-link {
    color: var(--fl-link);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.fl-link:hover { text-decoration: underline; }

/* ── < 900px: uma coluna; o painel vira só o topo navy com a logo (150px) ── */
@media (max-width: 899.98px) {
    .fl-login {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 1fr;
    }
    .fl-marca {
        min-height: 0;
        padding: 24px 20px;
    }
    .fl-marca-logo { width: 150px; }
    .fl-marca-detalhe,
    .fl-marca-rodape { display: none; }
    .fl-form-coluna {
        align-items: flex-start;
        padding: 32px 20px 40px;
    }
}