/* ═══════════════════════════════════════════════════════════════════════════
   SPEC 159 · F2 — CSS da tela de login
   Task: T051 · Carregado no App.razor via @Assets["css/login.css"]
   ═══════════════════════════════════════════════════════════════════════════
   Regras do repositório aplicadas aqui:
   • CSS inline é PROIBIDO (ADR-0006) — todo visual mora neste arquivo.
   • Cor sempre por token --fn-*, nunca hex cru.
   • Copper com parcimônia: UM destaque por vista (o botão de certificado).
   • Convenção 1 página ↔ 1 .css de mesmo nome.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Tokens específicos do login F2 — o prefixo isola esta tela do global.
       Os --fn-* referenciados abaixo vêm do design-system (colors_and_type.css)
       e NÃO são redefinidos aqui. */
    --fn-login-f2-card-max:      420px;
    --fn-login-f2-gap-bloco:     1.5rem;
    --fn-login-f2-alvo-toque:    44px;
    --fn-login-f2-faixa-erro-bg: var(--fn-red-pale);
    --fn-login-f2-faixa-erro-bd: var(--fn-red);
    --fn-login-f2-faixa-info-bg: var(--fn-teal-pale);
    --fn-login-f2-faixa-info-bd: var(--fn-teal);
    /* Copper escurecido, usado como FAIXA de destaque do CTA (nunca como
       fundo de texto: o --fn-copper puro da 3,3:1 com branco e reprova AA —
       foi o achado que devolveu esta tela no gate de legibilidade).
       Derivacao local: o token do design-system continua intacto. */
    --fn-login-f2-destaque:      #a35f30;
    --fn-login-f2-foco-anel:     0 0 0 3px rgba(61, 140, 140, .35);
}

/* ─── Estrutura ──────────────────────────────────────────────────────────── */

.fn-login {
    max-width: var(--fn-login-f2-card-max);
    margin: 0 auto;
    padding: 3rem 1rem;
}

.fn-login__marca {
    text-align: center;
    margin-bottom: 2rem;
}

.fn-login__titulo {
    font-family: "Literata", Georgia, serif;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--fn-navy);
    margin: 0;
}

.fn-login__subtitulo {
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 1rem;
    color: var(--fn-text-secondary);
    margin: .25rem 0 0;
}

.fn-login__bloco {
    background: var(--fn-surface);
    border: 1px solid var(--fn-border);
    border-radius: var(--fn-radius);
    box-shadow: var(--fn-shadow-sm);
    padding: 1.25rem;
    margin-bottom: var(--fn-login-f2-gap-bloco);
}

.fn-login__rotulo-bloco {
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    /* --fn-text-muted (3,0:1) reprovaria AA neste corpo de 13px. */
    color: var(--fn-text-secondary);
    margin: 0 0 .75rem;
}

.fn-login__instrucao {
    font-size: .875rem;
    color: var(--fn-text-secondary);
    margin: 0 0 1rem;
}

/* ─── Faixas de mensagem ─────────────────────────────────────────────────── */

.fn-login__faixa {
    border-left: 4px solid transparent;
    border-radius: var(--fn-radius);
    padding: .75rem 1rem;
    font-size: .875rem;
    font-weight: 500;
    margin-bottom: var(--fn-login-f2-gap-bloco);
}

.fn-login__faixa--erro {
    background: var(--fn-login-f2-faixa-erro-bg);
    border-left-color: var(--fn-login-f2-faixa-erro-bd);
    color: var(--fn-text);
}

.fn-login__faixa--info {
    background: var(--fn-login-f2-faixa-info-bg);
    border-left-color: var(--fn-login-f2-faixa-info-bd);
    color: var(--fn-text);
}

/* A faixa recebe foco programático quando é de erro (a11y — T052);
   sem outline visível o usuário de teclado se perde. */
.fn-login__faixa:focus {
    outline: none;
    box-shadow: var(--fn-login-f2-foco-anel);
}

/* ─── Campos ─────────────────────────────────────────────────────────────── */

.fn-login__campo {
    margin-bottom: 1rem;
}

.fn-login__label {
    display: block;
    font-size: .875rem;
    font-weight: 500;
    color: var(--fn-text);
    margin-bottom: .5rem;
}

.fn-login__input {
    width: 100%;
    min-height: var(--fn-login-f2-alvo-toque);
    padding: .5rem .75rem;
    /* 1rem evita o zoom automático do iOS ao focar o campo. */
    font-size: 1rem;
    color: var(--fn-text);
    background: var(--fn-surface);
    border: 1px solid var(--fn-border);
    border-radius: var(--fn-radius);
}

/* O cinza default de placeholder do navegador fica em ~4,4:1 — no limite do
   AA. Fixar a cor tira a tela da dependencia do agente do usuario. */
.fn-login__input::placeholder {
    color: var(--fn-text-secondary);
    opacity: 1;
}

/* Matrícula tem formato fixo (00/00000) — monoespaçada alinha os dígitos. */
.fn-login__input--matricula {
    font-family: "JetBrains Mono", ui-monospace, monospace;
}

.fn-login__input:focus {
    outline: none;
    border-color: var(--fn-teal);
    box-shadow: var(--fn-login-f2-foco-anel);
}

/* ─── Botões ─────────────────────────────────────────────────────────────── */

.fn-login__acoes {
    display: flex;
    justify-content: flex-end;   /* grupo à direita (convenção do ecossistema) */
    gap: .5rem;
}

.fn-login__botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    min-height: var(--fn-login-f2-alvo-toque);
    padding: .5rem 1.25rem;
    font-size: .9375rem;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: var(--fn-radius);
    cursor: pointer;
    text-decoration: none;
}

/* CTA de certificado.
   O copper como FUNDO nao serve para texto branco: o --fn-copper puro da
   3,3:1 e mesmo escurecido nao chega ao contraste que um CTA principal
   precisa (o velinho devolveu a tela por dissonancia — elemento que se
   propoe protagonista com tinta fraca). Solucao: fundo navy (contraste
   maximo) e o copper preservado como FAIXA de destaque — continua sendo o
   unico ponto copper da vista, agora sem custo de legibilidade. */
.fn-login__botao--certificado {
    width: 100%;
    background: var(--fn-navy);
    color: #fff;
    border-left: 4px solid var(--fn-login-f2-destaque);
}

.fn-login__botao--principal {
    background: var(--fn-navy);
    color: #fff;
}

.fn-login__botao--secundario {
    background: transparent;
    border-color: var(--fn-border);
    color: var(--fn-text-secondary);
}

.fn-login__botao--indisponivel {
    opacity: .5;
    cursor: not-allowed;
}

.fn-login__instrucao--apos-botao {
    margin-top: .75rem;
    margin-bottom: 0;
}

.fn-login__botao:focus-visible {
    outline: none;
    box-shadow: var(--fn-login-f2-foco-anel);
}

/* ─── Aviso de desenvolvimento (só aparece em Development) ───────────────── */

.fn-login__dev {
    background: var(--fn-login-f2-faixa-info-bg);
    border-radius: var(--fn-radius);
    padding: .75rem 1rem;
    font-size: .8125rem;
    color: var(--fn-text-secondary);
}

/* ─── Telas estreitas ────────────────────────────────────────────────────── */

@media (max-width: 400px) {
    .fn-login {
        padding: 1.5rem .75rem;
    }

    .fn-login__acoes {
        flex-direction: column-reverse;   /* principal fica em cima ao empilhar */
    }

    .fn-login__botao {
        width: 100%;
    }
}