/*
 * TELA DE ACESSO -- NUVEM PDV.
 *
 * Vale para o login e o "esqueci minha senha". O CADASTRO usa o mesmo layout Blade
 * (layouts/header_auth) e ficou de fora do redesenho de proposito.
 *
 * ============ POR QUE TUDO ESTA PRESO A `body.nv-auth` ============
 *
 * As tres telas publicas dividem o mesmo <body>. Pintar o fundo de navy no layout deixaria o
 * formulario de cadastro -- cartao branco, texto escuro, herdado do tema -- ilegivel. A classe
 * `nv-auth` e declarada VIEW A VIEW (`@section('body_class', 'nv-auth')`), entao quem nao pede
 * nao recebe. O cadastro nao muda um pixel.
 *
 * ============ POR QUE NAO CARREGO `nuvem-tokens.css` AQUI ============
 *
 * Ele reescreve as variaveis `--ct-*` do Bootstrap inteiro. O `header_auth` carrega o
 * `app.min.css`, que ainda desenha o cadastro: trocar as variaveis do tema na area publica para
 * estilizar DUAS telas mudaria a TERCEIRA de lambuja. As cores daqui sao locais (`--nva-*`).
 *
 * ============ POR QUE NADA DEPENDE DE `data-bs-theme` ============
 *
 * O `assets/js/config.js` restaura o tema salvo no sessionStorage e o crava no <html> antes de
 * qualquer coisa. Se este arquivo reagisse a `[data-bs-theme=light]`, quem tivesse "light"
 * guardado abriria uma tela metade clara sobre o fundo escuro. As cores aqui sao fixas: esta tela
 * e escura nos dois temas, como o mockup.
 *
 * ============ SUBIR O ?v= NO header_auth A CADA ALTERACAO ============
 *
 * O projeto nao versiona asset. Sem trocar o `?v=`, o navegador serve o CSS velho junto do HTML
 * novo -- e o resultado nao e "nada mudou", e a tela deformada.
 */

/* =====================================================================
   1. TOKENS
   ===================================================================== */

body.nv-auth {
    --nva-fundo-1: #0d3a96;   /* canto superior esquerdo, o mais claro */
    --nva-fundo-2: #0a2570;
    --nva-fundo-3: #061845;
    --nva-fundo-4: #04102e;   /* canto inferior direito, o mais fundo */

    --nva-marca: #1a6dff;
    --nva-marca-clara: #4d9bff;
    --nva-marca-viva: #2f8bff;

    --nva-texto: #ffffff;
    --nva-texto-2: rgba(255, 255, 255, .72);
    --nva-texto-3: rgba(255, 255, 255, .45);

    --nva-cartao: rgba(13, 34, 84, .58);
    --nva-borda: rgba(255, 255, 255, .10);
    --nva-borda-forte: rgba(255, 255, 255, .18);

    --nva-campo: rgba(3, 12, 34, .55);
    --nva-campo-borda: rgba(255, 255, 255, .12);

    --nva-perigo: #ff6b6b;
    --nva-perigo-bg: rgba(214, 52, 44, .16);
    --nva-sucesso: #4ade80;
    --nva-sucesso-bg: rgba(18, 144, 90, .18);

    --nva-raio: 20px;
    --nva-raio-campo: 10px;
}

/*
 * BARRA DE ROLAGEM -- a contraparte clara da do sistema (nuvem-tokens.css,
 * secao 8). Aqui ela e CLARA, nao navy: o fundo destas telas e #04102e e o
 * thumb navy do sistema sumiria dentro dele.
 *
 * Vai em `html`, e nao em `body.nv-auth`, porque a barra da janela pertence ao
 * elemento raiz. Nao vaza para o resto do sistema porque este arquivo so e
 * servido nas telas de acesso (layouts/header_auth.blade.php), que nem chegam a
 * carregar o nuvem-tokens.css.
 *
 * OS TOKENS FICAM AQUI, no `html`, e nao no bloco de tokens de `body.nv-auth`:
 * variavel custom desce na arvore, nao sobe -- declarada no body ela seria
 * invisivel para a regra do html.
 */
html {
    --nva-scroll-thumb: rgba(255, 255, 255, .28);
    --nva-scroll-thumb-hover: rgba(255, 255, 255, .45);

    scrollbar-width: thin;
    scrollbar-color: var(--nva-scroll-thumb) transparent;
}

html::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html::-webkit-scrollbar-track { background: transparent; }

html::-webkit-scrollbar-thumb {
    background: var(--nva-scroll-thumb);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}

html::-webkit-scrollbar-thumb:hover {
    background: var(--nva-scroll-thumb-hover);
    background-clip: padding-box;
}

/* =====================================================================
   2. FUNDO
   ===================================================================== */

/*
 * O `.authentication-bg` do tema fica no <body> e traz fundo proprio. Sobrescrevo aqui em vez de
 * tirar a classe do layout: ela e compartilhada com o cadastro.
 */
/*
 * As FAIXAS DIAGONAIS ficam no proprio <body>, e nao nos pseudo-elementos.
 *
 * O `::after` leva uma mascara que recorta os cantos (para a malha de pontos) e o `::before` gira
 * numa animacao lenta. Faixa retilinea nao pode nem ser recortada nem escalada: numa ela sumiria,
 * na outra ela andaria pela tela. Aqui, sobre o gradiente-base, ela fica parada e inteira.
 */
body.nv-auth {
    position: relative;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background: #04102e;
    background-image:
        /* faixa diagonal do canto superior esquerdo */
        linear-gradient(115deg, transparent 0 13%, rgba(255, 255, 255, .06) 13% calc(13% + 1px), transparent calc(13% + 1px) 100%),
        /* faixa diagonal do canto inferior direito */
        linear-gradient(115deg, transparent 0 84%, rgba(255, 255, 255, .05) 84% calc(84% + 1px), transparent calc(84% + 1px) 100%),
        /* clareado do canto superior esquerdo */
        radial-gradient(120% 90% at 0% 0%, var(--nva-fundo-1) 0%, transparent 55%),
        linear-gradient(145deg, var(--nva-fundo-2) 0%, var(--nva-fundo-3) 52%, var(--nva-fundo-4) 100%);
    background-attachment: fixed;
    color: var(--nva-texto);
    overflow-x: hidden;
}

/*
 * As camadas decorativas sao PSEUDO-ELEMENTOS FIXOS, e nao <div> no Blade.
 *
 * Duas razoes: as duas telas herdam o cenario sem repetir marcacao, e `position: fixed` mantem o
 * fundo parado quando o cartao cresce e a pagina rola (no celular, com o teclado aberto, ele
 * rola). Fundo que acompanha a rolagem denuncia que sao camadas.
 *
 * `pointer-events: none` porque eles cobrem a tela inteira: sem isso, engoliriam o clique nos
 * campos.
 */
body.nv-auth::before,
body.nv-auth::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* Brilhos -- os dois halos azuis do mockup. */
body.nv-auth::before {
    background-image:
        radial-gradient(38% 32% at 14% 10%,  rgba(56, 130, 255, .40) 0%, transparent 70%),
        radial-gradient(45% 40% at 88% 92%,  rgba(20, 80, 210, .32) 0%, transparent 70%),
        radial-gradient(30% 26% at 78% 18%,  rgba(88, 204, 255, .10) 0%, transparent 70%);
    will-change: transform;
}

/*
 * MALHA DE PONTOS, recortada nos cantos.
 *
 * Os pontos sao um `radial-gradient` de 1px repetido a cada 22px. Sem mascara a malha cobriria a
 * tela toda e passaria por tras do cartao -- viraria textura de fundo, e nao o detalhe de canto do
 * mockup. As duas mascaras radiais deixam a malha aparecer so no canto superior direito e no
 * inferior esquerdo; multiplas camadas de mascara ja se somam por padrao, entao nao ha
 * `mask-composite` aqui (a palavra-chave difere entre o padrao e o prefixo -webkit, e escrever as
 * duas erradas custa mais do que aceitar o padrao, que e o que eu quero).
 *
 * `-webkit-mask-image` junto: e o que Safari e WebView antiga entendem. Onde nem isso existe, a
 * malha aparece inteira -- discreta o bastante (.13 de alfa) para nao estragar a tela.
 */
body.nv-auth::after {
    background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(58% 48% at 96% 4%, #000 0%, transparent 100%),
                        radial-gradient(52% 42% at 4% 96%, #000 0%, transparent 100%);
    mask-image: radial-gradient(58% 48% at 96% 4%, #000 0%, transparent 100%),
                radial-gradient(52% 42% at 4% 96%, #000 0%, transparent 100%);
}

/*
 * O ARCO da direita, que no mockup passa por tras do cartao.
 *
 * Elemento proprio (`.nv-auth-arco`) porque o <body> ja gastou os dois pseudo-elementos. E uma
 * circunferencia enorme, so a borda, quase invisivel -- sugere a curva da nuvem sem desenhar
 * nada.
 */
.nv-auth-arco {
    position: fixed;
    top: 50%;
    right: -22vw;
    width: 76vw;
    height: 76vw;
    max-width: 1100px;
    max-height: 1100px;
    transform: translateY(-50%);
    border: 1px solid rgba(255, 255, 255, .055);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.nv-auth-arco::after {
    content: "";
    position: absolute;
    inset: 12%;
    border: 1px solid rgba(255, 255, 255, .035);
    border-radius: 50%;
}

/* =====================================================================
   3. ESTRUTURA
   ===================================================================== */

.nv-auth-palco {
    position: relative;
    z-index: 1;                 /* acima das camadas decorativas */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px 16px 28px;
}

.nv-auth-coluna {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 34px;                  /* respiro entre marca, cartao e selo, como no layout de origem */
}

/*
 * A logo tem um INVOLUCRO em vez de estar solta na coluna.
 *
 * `.nv-auth-coluna > *` recebe a animacao de entrada e a logo tem a de flutuacao -- as duas
 * animam `transform`. No mesmo elemento, a segunda declaracao de `animation` apaga a primeira e a
 * logo entraria sem transicao (ou pior, ficaria com o `opacity: 0` do keyframe de entrada). Com o
 * involucro, cada animacao tem seu elemento.
 */
.nv-auth-marca {
    display: block;
    width: 100%;
    text-align: center;
}

.nv-auth-logo {
    display: block;
    width: 100%;
    max-width: 316px;           /* largura nativa do PNG -- acima disso borra */
    height: auto;
    margin: 0 auto;
}

/* =====================================================================
   4. CARTAO
   ===================================================================== */

.nv-auth-cartao {
    position: relative;
    width: 100%;
    padding: 34px 30px 30px;
    border: 1px solid var(--nva-borda);
    border-radius: var(--nva-raio);
    /*
     * O rgba de base e opaco o bastante para a tela ficar legivel SEM o blur. `backdrop-filter`
     * nao existe em Firefox com aceleracao desligada nem em WebView antiga -- e o que se ve ali e
     * exatamente esta cor. Vidro e o bonus, nao o piso.
     */
    background: var(--nva-cartao);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
    overflow: hidden;           /* segura a nuvem do rodape dentro do raio */
}

/* A silhueta de nuvem no pe do cartao, como no mockup. */
.nv-auth-nuvem {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    fill: rgba(255, 255, 255, .05);
    pointer-events: none;
}

/* O conteudo sobe acima da nuvem -- senao ela cobriria o ultimo campo. */
.nv-auth-cartao > *:not(.nv-auth-nuvem) {
    position: relative;
    z-index: 1;
}

.nv-auth-titulo {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    color: var(--nva-texto);
}

.nv-auth-subtitulo {
    margin: 0 0 26px;
    font-size: 14px;
    text-align: center;
    color: var(--nva-texto-2);
}

/* =====================================================================
   5. CAMPOS
   ===================================================================== */

/*
 * Classes proprias, e nao `.form-control`.
 *
 * O `app.min.css` crava cor, borda, sombra, altura e estado de foco no `.form-control`, e ainda
 * repinta tudo por `[data-bs-theme]`. Reaproveita-lo aqui viraria uma fila de `!important` contra
 * o tema -- que voltaria a quebrar na proxima atualizacao do template.
 */

.nv-auth-grupo {
    margin-bottom: 18px;
}

.nv-auth-rotulo {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--nva-marca-clara);
}

.nv-auth-campo {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--nva-campo-borda);
    border-radius: var(--nva-raio-campo);
    background: var(--nva-campo);
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.nv-auth-campo > i {
    flex: 0 0 auto;
    padding: 0 12px 0 16px;
    font-size: 18px;
    color: var(--nva-texto-3);
    transition: color .18s ease;
}

.nv-auth-campo input {
    flex: 1 1 auto;
    min-width: 0;               /* deixa o input encolher em vez de estourar o flex */
    height: 52px;
    padding: 0 14px 0 0;
    border: 0;
    background: transparent;
    color: var(--nva-texto);
    font-size: 15px;
    font-family: inherit;
    outline: none;
}

.nv-auth-campo input::placeholder {
    color: var(--nva-texto-3);
}

/*
 * O AUTOFILL DO CHROME PINTA O CAMPO DE AMARELO.
 *
 * E ele PRECISA disparar aqui: o login guarda e-mail e senha em cookie (`ckLogin`/`ckPass`), e o
 * gerenciador do navegador tambem preenche. Sem este bloco, quem tem credencial salva abre a tela
 * e ve duas tarjas claras no meio do cartao escuro.
 *
 * A transicao gigantesca e o truque conhecido: o Chrome nao deixa mudar o fundo do autofill, mas
 * deixa adiar a pintura -- 10000s adia para sempre. `-webkit-text-fill-color` e o unico jeito de
 * corrigir a cor do texto.
 */
.nv-auth-campo input:-webkit-autofill,
.nv-auth-campo input:-webkit-autofill:hover,
.nv-auth-campo input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--nva-texto);
    -webkit-box-shadow: 0 0 0 1000px transparent inset;
    transition: background-color 10000s ease-in-out 0s;
    caret-color: var(--nva-texto);
}

.nv-auth-campo:focus-within {
    border-color: var(--nva-marca-viva);
    background: rgba(3, 12, 34, .72);
    box-shadow: 0 0 0 3px rgba(47, 139, 255, .20);
}

.nv-auth-campo:focus-within > i {
    color: var(--nva-marca-clara);
}

/* Estado invalido -- as duas telas usam `@error` do Blade. */
.nv-auth-campo.e-invalido {
    border-color: var(--nva-perigo);
}

.nv-auth-erro {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--nva-perigo);
}

/* Olho de mostrar/ocultar a senha. */
.nv-auth-olho {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-right: 4px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--nva-texto-3);
    font-size: 18px;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

.nv-auth-olho:hover,
.nv-auth-olho:focus-visible {
    color: var(--nva-texto);
    background: rgba(255, 255, 255, .07);
}

/* =====================================================================
   6. LINHA DO "LEMBRAR" + "ESQUECI"
   ===================================================================== */

.nv-auth-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;            /* em tela estreita o link cai para baixo em vez de espremer */
    margin: 4px 0 24px;
}

.nv-auth-lembrar {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--nva-texto-2);
    cursor: pointer;
    user-select: none;
    margin: 0;
}

/*
 * Checkbox desenhado no proprio <input> (`appearance: none`), sem span auxiliar.
 *
 * Assim ele continua sendo o campo de verdade: recebe foco pelo teclado, entra no `form`, e o
 * `<label for>` continua alternando no clique do texto. Um quadrado falso ao lado de um input
 * escondido perde tudo isso.
 */
.nv-auth-lembrar input {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1px solid var(--nva-borda-forte);
    border-radius: 5px;
    background: var(--nva-campo);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.nv-auth-lembrar input:checked {
    background: var(--nva-marca);
    border-color: var(--nva-marca);
}

/* O "check" e desenhado com duas bordas de um retangulo girado -- nao depende de fonte de icone. */
.nv-auth-lembrar input:checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(43deg);
}

.nv-auth-lembrar input:focus-visible {
    box-shadow: 0 0 0 3px rgba(47, 139, 255, .28);
}

.nv-auth-link {
    font-size: 14px;
    color: var(--nva-marca-clara);
    text-decoration: none;
    border-bottom: 1px solid rgba(77, 155, 255, .45);
    transition: color .15s ease, border-color .15s ease;
}

.nv-auth-link:hover,
.nv-auth-link:focus-visible {
    color: #ffffff;
    border-color: #ffffff;
}

/* =====================================================================
   7. BOTAO
   ===================================================================== */

.nv-auth-botao {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 54px;
    border: 0;
    border-radius: var(--nva-raio-campo);
    background: linear-gradient(100deg, #0b53d4 0%, var(--nva-marca) 45%, var(--nva-marca-viva) 100%);
    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;           /* segura a varredura de brilho dentro do raio */
    box-shadow: 0 12px 30px rgba(26, 109, 255, .32);
    transition: box-shadow .2s ease, transform .2s ease, filter .2s ease;
}

.nv-auth-botao .nv-auth-seta {
    font-size: 20px;
    transition: transform .2s ease;
}

.nv-auth-botao:hover:not(:disabled),
.nv-auth-botao:focus-visible:not(:disabled) {
    box-shadow: 0 16px 38px rgba(26, 109, 255, .45);
    filter: brightness(1.06);
}

.nv-auth-botao:hover:not(:disabled) .nv-auth-seta {
    transform: translateX(4px);
}

.nv-auth-botao:active:not(:disabled) {
    transform: translateY(1px);
}

/*
 * Estado de envio: o botao fica apagado e sem clique enquanto o POST viaja.
 *
 * Nao e enfeite. O `LoginController` grava um `AcessoLog` a cada login bem-sucedido; sem trava,
 * clicar duas vezes em conexao lenta manda dois POST e grava duas entradas de acesso para a mesma
 * sessao -- e o IP do topo passa a vir de um registro duplicado.
 */
.nv-auth-botao:disabled {
    cursor: default;
    filter: saturate(.6) brightness(.85);
    box-shadow: none;
}

/* Varredura de brilho no hover. */
.nv-auth-botao::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
    transform: skewX(-18deg);
    opacity: 0;
}

/* =====================================================================
   8. AVISOS
   ===================================================================== */

.nv-auth-aviso {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: var(--nva-raio-campo);
    font-size: 13.5px;
    line-height: 1.4;
}

.nv-auth-aviso > i {
    flex: 0 0 auto;
    font-size: 17px;
    line-height: 1.25;
}

.nv-auth-aviso--erro {
    border-color: rgba(255, 107, 107, .35);
    background: var(--nva-perigo-bg);
    color: #ffd5d5;
}

.nv-auth-aviso--erro > i { color: var(--nva-perigo); }

.nv-auth-aviso--ok {
    border-color: rgba(74, 222, 128, .35);
    background: var(--nva-sucesso-bg);
    color: #d6f7e4;
}

.nv-auth-aviso--ok > i { color: var(--nva-sucesso); }

/*
 * Os `.alert` do Bootstrap que o PROPRIO LAYOUT imprime (`flash_success` / `flash_error`), antes
 * do @yield e portanto fora do meu cartao. Sao do tema, claros, e sobre o navy ficariam como duas
 * tarjas brancas no topo da tela. Aqui eles ganham o tratamento de vidro do resto.
 *
 * Chegam aqui, por exemplo, quando o e-mail de redefinicao e enviado e o usuario volta ao login.
 */
body.nv-auth > .container {
    position: relative;
    z-index: 2;
    max-width: 460px;
    padding-top: 18px;
}

body.nv-auth .alert {
    border-radius: var(--nva-raio-campo);
    border-width: 1px;
    font-size: 13.5px;
}

body.nv-auth .alert-success {
    border-color: rgba(74, 222, 128, .35);
    background: var(--nva-sucesso-bg);
    color: #d6f7e4;
}

body.nv-auth .alert-danger {
    border-color: rgba(255, 107, 107, .35);
    background: var(--nva-perigo-bg);
    color: #ffd5d5;
}

/* Com um alerta no topo, o palco nao pode mais exigir a tela inteira -- somados, os dois
   passariam de 100vh e a tela nasceria rolada. */
body.nv-auth > .container ~ .nv-auth-palco {
    min-height: calc(100vh - 90px);
}

/* =====================================================================
   9. RODAPE
   ===================================================================== */

.nv-auth-rodape {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.nv-auth-selo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--nva-texto-2);
}

.nv-auth-selo > i {
    font-size: 26px;
    color: var(--nva-marca-clara);
}

.nv-auth-selo strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--nva-texto);
}

.nv-auth-selo span {
    display: block;
    font-size: 12.5px;
    color: var(--nva-texto-3);
}

.nv-auth-suporte {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    color: var(--nva-texto-2);
    text-decoration: none;
    transition: color .15s ease;
}

.nv-auth-suporte:hover { color: #ffffff; }

.nv-auth-suporte > i {
    font-size: 17px;
    color: #4ade80;             /* verde do WhatsApp -- e o unico ponto de cor do rodape */
}

/* =====================================================================
   10. BLOCO DE DEMONSTRACAO
   ===================================================================== */

/*
 * So aparece com APP_ENV=demo. Continua existindo porque e o que faz a instancia publica de
 * demonstracao ser utilizavel -- os botoes chamam a funcao `login()` da propria tela.
 */
.nv-auth-demo {
    margin-bottom: 22px;
    padding: 16px;
    border: 1px dashed var(--nva-borda-forte);
    border-radius: var(--nva-raio-campo);
    background: rgba(255, 255, 255, .04);
}

.nv-auth-demo p {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--nva-texto-2);
}

.nv-auth-demo-botoes {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.nv-auth-demo-botoes button {
    flex: 1 1 140px;
    height: 40px;
    border: 1px solid var(--nva-borda-forte);
    border-radius: 8px;
    background: rgba(255, 255, 255, .07);
    color: var(--nva-texto);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background-color .15s ease;
}

.nv-auth-demo-botoes button:hover {
    background: rgba(255, 255, 255, .14);
}

/* =====================================================================
   11. TELAS ESTREITAS
   ===================================================================== */

@media (max-width: 480px) {
    .nv-auth-palco {
        gap: 22px;
        padding: 28px 14px 22px;
    }

    .nv-auth-cartao {
        padding: 26px 20px 24px;
    }

    .nv-auth-titulo { font-size: 22px; }

    .nv-auth-logo { max-width: 230px; }

    /* O arco sai de cena: em tela estreita ele passaria por cima do cartao. */
    .nv-auth-arco { display: none; }
}

/* Tela baixa (celular deitado): o palco deixa de centralizar e passa a rolar. */
@media (max-height: 640px) {
    .nv-auth-palco {
        justify-content: flex-start;
    }
}

/* =====================================================================
   12. MOVIMENTO
   ===================================================================== */

/*
 * Todo o movimento vive DENTRO de `prefers-reduced-motion: no-preference`, e nao numa regra de
 * desligamento depois. A diferenca importa: assim o estado final -- tela pronta, cartao visivel --
 * e o padrao, e a animacao e o acrescimo. Escrito ao contrario, um erro de media query esconde o
 * cartao de quem pediu menos movimento, porque o `opacity: 0` inicial fica valendo.
 */
@media (prefers-reduced-motion: no-preference) {

    /* Os halos do fundo respiram devagar. So `transform`: nao repinta layout. */
    body.nv-auth::before {
        animation: nv-auth-deriva 34s ease-in-out infinite alternate;
    }

    @keyframes nv-auth-deriva {
        from { transform: translate3d(0, 0, 0) scale(1); }
        to   { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
    }

    /* A logo flutua de leve. */
    .nv-auth-logo {
        animation: nv-auth-flutua 7s ease-in-out infinite alternate;
    }

    @keyframes nv-auth-flutua {
        from { transform: translateY(0); }
        to   { transform: translateY(-7px); }
    }

    /* Entrada: logo primeiro, cartao logo atras, rodape por ultimo. */
    .nv-auth-coluna > * {
        animation: nv-auth-entra .55s cubic-bezier(.22, .9, .3, 1) both;
    }

    .nv-auth-coluna > *:nth-child(1) { animation-delay: .04s; }
    .nv-auth-coluna > *:nth-child(2) { animation-delay: .12s; }
    .nv-auth-coluna > *:nth-child(3) { animation-delay: .20s; }

    @keyframes nv-auth-entra {
        from { opacity: 0; transform: translateY(14px); }
        to   { opacity: 1; transform: none; }
    }

    .nv-auth-botao:hover:not(:disabled)::after {
        animation: nv-auth-varre .75s ease;
    }

    @keyframes nv-auth-varre {
        from { left: -60%; opacity: 1; }
        to   { left: 120%; opacity: 0; }
    }

    /*
     * Giro do estado de envio.
     *
     * Preso a `.esta-girando`, e nao a `:disabled`: o JS TROCA o icone da seta pelo de carregando
     * antes de girar. Girar a seta em si nao leria como "aguarde", leria como seta bugada.
     */
    .nv-auth-seta.esta-girando {
        animation: nv-auth-gira .8s linear infinite;
    }

    @keyframes nv-auth-gira {
        to { transform: rotate(360deg); }
    }
}