/*
 * PDV Soft — telas de acesso (entrar e criar conta).
 *
 * DIRECAO: o fechamento de caixa. A tela e dividida em duas: a esquerda a
 * VITRINE, sempre escura nos dois temas (e uma janela para a loja depois que
 * fecha, nao uma superficie da interface); a direita o CARTAO, que segue o
 * tema escolhido pela pessoa.
 *
 * A assinatura da pagina e o cupom de fechamento que se imprime sozinho ao
 * carregar, terminando na linha invertida "DIFERENCA 0,00". Nao e enfeite: e
 * literalmente a promessa do produto ("no fim do dia, o caixa bate") dita no
 * unico formato que todo lojista reconhece sem legenda. A arte dos aparelhos
 * fica ATRAS dele, escurecida, como ambiente — se as duas disputassem o olho,
 * nenhuma venceria.
 *
 * A tipografia e a mesma do site: Archivo no display, Inter no corpo e
 * JetBrains Mono onde o numero precisa alinhar. Os tokens de espaco, sombra e
 * movimento vem de assets/css/app.css, carregado antes.
 */

:root {
    --auth-noite:    #060B16;   /* o chao da vitrine */
    --auth-marinho:  #0E1B33;   /* corpo da bobina, no escuro */
    --auth-eletrico: #2F7DF6;   /* a marca; o acento principal da pagina */
    --auth-bobina:   #F6F3EC;   /* papel termico */
    --auth-tinta:    #121821;   /* o que a impressora escreve */
    --auth-confere:  #12854B;   /* o verde de "bateu" — o unico segundo acento */
    --auth-claro:    #F6F8FC;   /* o chao do lado do formulario, no claro */
    --auth-linha:    #DCE3ED;
    --auth-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --auth-display: Archivo, Inter, system-ui, sans-serif;
}

body { display: block; padding-bottom: 0; background: var(--bs-body-bg); }

/* ==========================================================
   O palco: vitrine + cartao
   ========================================================== */

.login-palco {
    min-height: 100svh;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    background: var(--bs-body-bg);
}

/* ----------------------------------------------------------
   VITRINE
   ---------------------------------------------------------- */

.auth-vitrine {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column; justify-content: center;
    gap: var(--space-6);
    padding: clamp(2rem, 4vw, 3.5rem);
    background: var(--auth-noite);
    color: #fff;
}

/* A arte do produto encosta no CHAO da vitrine, nao cobre a coluna inteira.
   Espalhada com cover num painel alto e estreito, sobrava uma tira horizontal
   do meio da arte, em que nao se reconhecia nem o monitor nem os celulares —
   fundo generico. Ancorada embaixo, ela vira o que e: os aparelhos apoiados
   no balcao, com o cupom flutuando na frente. */
.auth-vitrine::before {
    content: ''; position: absolute; inset: auto 0 0 0; z-index: -2;
    height: min(56%, 470px);
    /* O recorte tem so os aparelhos: a arte completa traz o logotipo no topo,
       e nesta faixa ele reaparecia por tras do cupom, em fantasma. */
    background: url('../img/aparelhos-recorte.webp') center bottom / cover no-repeat;
    opacity: .42;
    filter: saturate(.9) contrast(1.05);
}
.auth-vitrine::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(ellipse 72% 58% at 30% 40%, rgba(47,125,246,.22), transparent 70%),
        linear-gradient(to bottom, var(--auth-noite) 18%, rgba(6,11,22,.35) 58%, rgba(6,11,22,.82)),
        linear-gradient(to right, rgba(6,11,22,.72), rgba(6,11,22,.28) 55%, rgba(6,11,22,.8));
}

.auth-eyebrow {
    font-family: var(--auth-mono);
    font-size: .68rem; font-weight: 600;
    letter-spacing: .26em; text-transform: uppercase;
    color: rgba(255,255,255,.56);
    margin: 0;
}

.auth-manchete {
    font-family: var(--auth-display);
    font-size: clamp(1.9rem, 3.1vw, 2.95rem);
    font-weight: 800; line-height: 1.04; letter-spacing: -.03em;
    color: #fff; margin: .7rem 0 0; max-width: 15ch;
    text-wrap: balance;
}
.auth-manchete span,
.auth-manchete em { display: block; }
.auth-manchete em { font-style: normal; color: #7FB0FF; }

.auth-legenda {
    max-width: 34ch; margin: var(--space-3) 0 0;
    color: rgba(255,255,255,.66); font-size: .92rem; line-height: 1.6;
}

/* ---- O cupom ----------------------------------------------------------
   O papel sai da impressora: a borda de baixo e serrilhada (o corte), e o
   bloco todo tem uma leve inclinacao, como folha solta sobre o balcao.

   Duas camadas de proposito: a mascara do corte serrilhado vive no PAPEL, e a
   sombra no involucro. Numa so, a mascara comeria a sombra junto — mascara e
   aplicada depois do filtro, entao o recorte apagaria o que ele desenhou. */
.auth-cupom {
    position: relative;
    width: min(100%, 312px);
    transform: rotate(-1.2deg);
    filter: drop-shadow(0 24px 34px rgba(0,0,0,.66));
}
.auth-cupom-papel {
    --dente: radial-gradient(circle 7px at 7px 7px, #000 97%, transparent 100%);
    padding: 1.25rem 1.3rem 1.85rem;
    background: var(--auth-bobina);
    color: var(--auth-tinta);
    font-family: var(--auth-mono);
    font-size: .74rem; line-height: 1.5;
    font-variant-numeric: tabular-nums;
    -webkit-mask-image: var(--dente), linear-gradient(#000 0 0);
    mask-image: var(--dente), linear-gradient(#000 0 0);
    -webkit-mask-size: 14px 14px, 100% calc(100% - 7px);
    mask-size: 14px 14px, 100% calc(100% - 7px);
    -webkit-mask-position: bottom left, top left;
    mask-position: bottom left, top left;
    -webkit-mask-repeat: repeat-x, no-repeat;
    mask-repeat: repeat-x, no-repeat;
}

.auth-cupom-papel hr {
    border: 0; border-top: 1px dashed rgba(18,24,33,.32);
    margin: .55rem 0; opacity: 1;
}
.auth-cupom-loja {
    display: block; text-align: center;
    font-weight: 700; font-size: .84rem; letter-spacing: .14em;
    text-transform: uppercase;
}
.auth-cupom-titulo {
    display: block; text-align: center; margin-top: .15rem;
    font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
    color: rgba(18,24,33,.6);
}

/* A frase e o corpo do cupom. Maior que uma linha de conta: aqui ela e o
   assunto, nao um detalhe do fechamento. */
.auth-cupom-frase {
    margin: .5rem 0; text-align: center;
    font-size: .88rem; line-height: 1.72; text-wrap: balance;
}
.auth-cupom-frase::before { content: '\201C'; }
.auth-cupom-frase::after  { content: '\201D'; }

/* O unico momento alto da pagina: a assinatura do autor inverte, no mesmo
   lugar em que uma bobina de verdade imprime o total. */
.auth-cupom-selo {
    display: block; text-align: center;
    margin: .55rem 0 0;
    padding: .42rem .6rem;
    background: var(--auth-confere); color: #fff;
    font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    font-size: .72rem;
}
.auth-cupom-pe {
    display: block; text-align: center; margin-top: .55rem;
    font-size: .64rem; letter-spacing: .12em; color: rgba(18,24,33,.6);
}

/* ---- A impressao ---------------------------------------------------
   Cada linha desce como se o rolo estivesse alimentando o papel. */
@media (prefers-reduced-motion: no-preference) {
    /* O papel sobe no involucro; o RECORTE fica no papel. Com o clip-path no
       involucro e fill both, o estado final seguia valendo e cortava fora a
       propria sombra do drop-shadow. */
    .auth-cupom { animation: cupom-sobe 700ms var(--ease-out) backwards; }
    @keyframes cupom-sobe {
        from { opacity: 0; transform: rotate(-1.2deg) translateY(-26px); }
    }
    .auth-cupom-papel { animation: cupom-sai 760ms var(--ease-out) backwards; }
    @keyframes cupom-sai { from { clip-path: inset(0 0 100% 0); } }

    /* O atraso e calculado, nao tabelado: com a lista escrita a mao, a linha
       que passasse do ultimo nth-child ficava sem atraso e piscava antes do
       papel aparecer. */
    .auth-cupom-papel > * {
        animation: cupom-linha 240ms var(--ease-out) backwards;
        animation-delay: calc(420ms + var(--linha, 0) * 54ms);
    }
    .auth-cupom-papel > :nth-child(1)  { --linha: 1; }
    .auth-cupom-papel > :nth-child(2)  { --linha: 2; }
    .auth-cupom-papel > :nth-child(3)  { --linha: 3; }
    .auth-cupom-papel > :nth-child(4)  { --linha: 4; }
    .auth-cupom-papel > :nth-child(5)  { --linha: 5; }
    .auth-cupom-papel > :nth-child(6)  { --linha: 6; }
    .auth-cupom-papel > :nth-child(7)  { --linha: 7; }
    .auth-cupom-papel > :nth-child(8)  { --linha: 8; }
    .auth-cupom-papel > :nth-child(9)  { --linha: 9; }
    .auth-cupom-papel > :nth-child(10) { --linha: 10; }
    .auth-cupom-papel > :nth-child(11) { --linha: 11; }
    .auth-cupom-papel > :nth-child(12) { --linha: 12; }
    .auth-cupom-papel > :nth-child(n+13) { --linha: 13; }
    @keyframes cupom-linha { from { opacity: 0; transform: translateY(-5px); } }

    /* A manchete sobe de dentro de si mesma, como linha saindo do rolo — e o
       mesmo gesto do cupom, e nao mais um fade solto. */
    .auth-vitrine .auth-eyebrow,
    .auth-vitrine .auth-legenda { animation: vitrine-entra 620ms var(--ease-out) backwards; }
    .auth-vitrine .auth-legenda { animation-delay: 260ms; }
    @keyframes vitrine-entra { from { opacity: 0; transform: translateY(12px); } }

    .auth-manchete span,
    .auth-manchete em { animation: manchete-sobe 760ms var(--ease-out) backwards; }
    .auth-manchete span { animation-delay: 90ms; }
    .auth-manchete em   { animation-delay: 190ms; }
    @keyframes manchete-sobe {
        from { opacity: 0; transform: translateY(18px); clip-path: inset(0 0 100% 0); }
        to   { opacity: 1; transform: translateY(0);    clip-path: inset(-25% -25% -25% -25%); }
    }
}

/* ----------------------------------------------------------
   CARTAO
   ---------------------------------------------------------- */

/* O lado do formulario ganha um cinza levemente azulado e os campos ficam
   brancos — o inverso do padrao. Campo branco sobre o chao lê como formulario
   em cima do balcao; campo cinza sobre branco lê como qualquer cadastro. */
.auth-lado {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(3.6rem, 6vw, 4.4rem) var(--space-4) clamp(1.5rem, 4vw, 3rem);
    background: var(--auth-claro);
}
[data-bs-theme="dark"] .auth-lado { background: var(--bs-body-bg); }

.login-cartao {
    position: relative; z-index: 1;
    width: 100%; max-width: 412px;
    animation: cartao-sobe 620ms var(--ease-out) backwards;
}
.login-cartao--largo { max-width: 580px; }
@keyframes cartao-sobe {
    from { opacity: 0; transform: translateY(18px); }
}

/* ---- Marca ---- */
.login-marca { margin-bottom: var(--space-5); }
.login-logo-caixa {
    display: inline-flex; align-items: center; gap: .6rem;
    margin: 0 0 var(--space-5);
    animation: logo-entra 620ms var(--ease-out) backwards;
}
.login-logo-caixa img { width: auto; height: 40px; display: block; border-radius: 9px; }
.login-logo-caixa b {
    font-family: var(--auth-display);
    font-size: 1.2rem; font-weight: 800; letter-spacing: -.03em;
    color: var(--bs-body-color); line-height: 1;
}
.login-logo-caixa b span { color: var(--bs-primary); }
/* Entrada sem o quique: girar e estufar um logotipo e truque de slide. */
@keyframes logo-entra { from { opacity: 0; transform: translateY(8px); } }

.login-titulo {
    font-family: var(--auth-display);
    font-size: clamp(1.6rem, 2.6vw, 2rem); font-weight: 800;
    letter-spacing: -.03em; line-height: 1.08; margin: 0;
}
.login-sub { font-size: .9rem; color: var(--bs-secondary-color); margin: .45rem 0 0; }

/* Entrada escalonada dos campos. */
.login-passo { animation: passo-entra 520ms var(--ease-out) backwards; animation-delay: calc(var(--ordem, 0) * 70ms + 180ms); }
@keyframes passo-entra {
    from { opacity: 0; transform: translateY(10px); }
}

/* ---- Campos ---- */
.login-campo { position: relative; }

/* O rotulo fala como gente: caixa e peso normais. Monoespacada em caixa alta
   com entreletra larga em TODO campo e o maquinario de template mais
   reconhecivel que existe. A mono continua, mas so onde carrega informacao:
   o cupom e a etiqueta das secoes. */
.login-cartao .form-label {
    font-size: .84rem; font-weight: 600; letter-spacing: 0;
    text-transform: none;
    color: var(--bs-body-color);
    margin-bottom: .35rem;
}

/* A altura do campo pertence ao cartao, nao ao .login-campo: presa ao wrapper
   do olho, so a senha a teria, e ela sairia mais alta que os vizinhos da
   mesma linha do formulario. */
.login-cartao .form-control,
.login-cartao .form-select {
    padding: .68rem .9rem;
    background: #fff;
    border: 1px solid var(--auth-linha);
    border-radius: 10px;
    font-size: .95rem;
    box-shadow: 0 1px 2px rgba(14,27,46,.04);
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}
.login-cartao .form-control::placeholder { color: #9AA5B5; }
.login-cartao .form-control:hover,
.login-cartao .form-select:hover { border-color: #BFCBDB; }
.login-cartao .form-control:focus,
.login-cartao .form-select:focus {
    background: #fff;
    border-color: var(--auth-eletrico);
    box-shadow: 0 0 0 3px rgba(47,125,246,.18);
}
[data-bs-theme="dark"] .login-cartao .form-control,
[data-bs-theme="dark"] .login-cartao .form-select {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    box-shadow: none;
}
[data-bs-theme="dark"] .login-cartao .form-control::placeholder { color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .login-cartao .form-control:focus,
[data-bs-theme="dark"] .login-cartao .form-select:focus {
    background: var(--bs-body-bg);
    border-color: var(--auth-eletrico);
    box-shadow: 0 0 0 3px rgba(47,125,246,.26);
}

/* A dica embaixo do campo e apoio, nao legenda de tabela. */
.login-cartao form small { display: block; margin-top: .3rem; font-size: .78rem; }

/* O olho tem alvo de toque de 38px: no balcao a pessoa erra um icone de 16. */
.login-campo-icone {
    position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px; display: grid; place-items: center;
    color: var(--bs-secondary-color);
    background: none; border: 0; padding: 0; line-height: 1;
    border-radius: var(--radius-sm); cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.login-campo-icone:hover { color: var(--bs-primary); background: var(--bs-secondary-bg); }
.login-campo-icone i { font-size: 1.05rem; }
/* .login-campo so embrulha campo COM botao — por isso a reserva de espaco
   pode ser incondicional, sem depender de :has(). */
.login-campo .form-control { padding-right: 2.8rem; }

/* CPF/CNPJ: numero de documento le melhor em mono, com algarismos de largura
   igual. O selo a direita diz o que foi reconhecido e se os digitos conferem. */
.login-doc { position: relative; }
.login-doc .form-control {
    padding-right: 4.2rem;
    font-family: var(--auth-mono); font-size: .9rem; letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.login-doc .form-control::placeholder { font-family: var(--auth-mono); }
.login-doc-selo {
    position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .18rem .45rem; border-radius: 6px;
    font: 700 .64rem/1.2 var(--auth-mono); letter-spacing: .1em;
    color: var(--bs-secondary-color); background: var(--bs-tertiary-bg);
    pointer-events: none;
    transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.login-doc-selo:empty { display: none; }
.login-doc[data-doc-estado="ok"] .login-doc-selo { color: #0f6b3a; background: #dcf5e6; }
.login-doc[data-doc-estado="ok"] .login-doc-selo::after { content: '\2713'; font-size: .8rem; }
.login-doc[data-doc-estado="erro"] .login-doc-selo { color: #a3202c; background: #fde2e4; }
.login-cartao .login-doc[data-doc-estado="erro"] .form-control,
.login-cartao .login-doc[data-doc-estado="erro"] .form-control:focus { border-color: #e35d6a; }
.login-cartao .login-doc[data-doc-estado="erro"] .form-control:focus { box-shadow: 0 0 0 3px rgba(227,93,106,.2); }
.login-doc[data-doc-estado="erro"] + small { color: #b42330 !important; font-weight: 600; }
[data-bs-theme="dark"] .login-doc[data-doc-estado="ok"] .login-doc-selo { color: #86efac; background: rgba(34,197,94,.16); }
[data-bs-theme="dark"] .login-doc[data-doc-estado="erro"] .login-doc-selo { color: #fca5a5; background: rgba(239,68,68,.16); }
[data-bs-theme="dark"] .login-doc[data-doc-estado="erro"] + small { color: #fca5a5 !important; }

/* Titulo de secao do cadastro: a mono aqui numera a etapa, nao decora. */
.login-secao {
    display: flex; align-items: center; gap: .7rem;
    font-family: var(--auth-mono);
    font-size: .68rem; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin: 0 0 var(--space-3); padding: 0; float: none; width: auto;
}
.login-secao::after { content: ''; flex: 1; height: 1px; background: var(--bs-border-color); }

/* ---- A trilha do teste ------------------------------------------------
   Tres momentos em ordem, com o trilho a esquerda. A linha vertical nao e
   enfeite: ela e o tempo passando, e e por isso que a lista e <ol>. O ultimo
   marcador troca de cor porque e o unico em que a pessoa decide algo. */
.login-trilha {
    list-style: none;
    margin: var(--space-4) 0 var(--space-6);
    padding: 0;
}
.login-trilha li {
    position: relative;
    padding: 0 0 .95rem 1.5rem;
    display: flex; flex-direction: column; gap: .12rem;
}
/* O trilho. Para no ultimo item para nao sobrar um risco solto embaixo. */
.login-trilha li::before {
    content: '';
    position: absolute; left: 4px; top: .5rem; bottom: -.1rem;
    width: 1px; background: var(--bs-border-color);
}
.login-trilha li:last-child { padding-bottom: 0; }
.login-trilha li:last-child::before { display: none; }
/* O marcador. */
.login-trilha li::after {
    content: '';
    position: absolute; left: 0; top: .34rem;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--bs-body-bg);
    box-shadow: inset 0 0 0 2px var(--auth-eletrico);
}
.login-trilha--fim::after { box-shadow: inset 0 0 0 2px var(--auth-confere) !important; }

.login-trilha-quando {
    font-family: var(--auth-mono);
    font-size: .68rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--auth-eletrico);
}
.login-trilha--fim .login-trilha-quando { color: var(--auth-confere); }
.login-trilha-oque {
    font-size: .86rem; line-height: 1.5;
    color: var(--bs-secondary-color);
}

.btn-entrar {
    width: 100%; padding: .85rem; font-weight: 700; letter-spacing: .01em;
    border: 0; border-radius: 10px;
    background: var(--bs-primary); color: #fff;
    box-shadow: var(--shadow-sm);
    transition: filter var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}
.btn-entrar:hover  { filter: brightness(1.08); color: #fff; box-shadow: var(--shadow-md); }
.btn-entrar:active { transform: scale(.985); }
.btn-entrar[disabled] { filter: grayscale(.5); opacity: .8; }
[data-bs-theme="dark"] .btn-entrar { color: #0B1220; }
[data-bs-theme="dark"] .btn-entrar:hover { color: #0B1220; }

.login-troca {
    text-align: center; margin: var(--space-5) 0 0;
    font-size: .9rem; color: var(--bs-secondary-color);
}

/* ---- Rodape do cartao ---- */
.login-rodape {
    margin-top: var(--space-5); padding-top: var(--space-4);
    border-top: 1px solid var(--bs-border-color); text-align: center;
    animation: passo-entra 520ms var(--ease-out) backwards; animation-delay: .48s;
}
.login-ap {
    display: inline-flex; flex-direction: column; align-items: center;
    gap: .35rem;
    text-decoration: none; opacity: .82;
    transition: opacity var(--dur-fast) var(--ease-out);
}
.login-ap:hover { opacity: 1; }
.login-ap-nome {
    font-size: .72rem; font-weight: 500;
    color: var(--bs-secondary-color); line-height: 1;
}
.login-ap-linha { display: inline-flex; align-items: center; gap: .4rem; }
.login-ap-linha b {
    font-size: .84rem; font-weight: 700; color: var(--bs-body-color); line-height: 1;
}
.login-ap-marca { height: 20px; width: auto; display: block; }
.login-ap-marca--escuro { display: none; }
[data-bs-theme="dark"] .login-ap-marca--claro  { display: none; }
[data-bs-theme="dark"] .login-ap-marca--escuro { display: block; }
.login-rodape-legal { margin-top: .55rem; }
.login-rodape-legal a {
    font-size: .76rem; color: var(--bs-secondary-color); text-decoration: none;
}
.login-rodape-legal a:hover { text-decoration: underline; }

.hp-field { display: none !important; position: absolute; left: -9999px; }

/* ==========================================================
   Barra de controles (idioma + tema)
   Fica no canto do lado do formulario, nao na vitrine: a vitrine e escura nos
   dois temas, e um botao de tema em cima dela nao teria o que anunciar.
   ========================================================== */
.auth-controles {
    position: absolute; top: clamp(1rem, 3vw, 1.6rem); right: clamp(1rem, 3vw, 1.6rem);
    z-index: 5;
    display: flex; align-items: center; gap: .5rem;
}
@media (prefers-reduced-motion: no-preference) {
    .auth-controles { animation: passo-entra 520ms var(--ease-out) 260ms backwards; }
}

.auth-tema,
.auth-idioma-gatilho {
    display: inline-flex; align-items: center; gap: .45rem;
    height: 38px; padding: 0 .75rem;
    border: 1px solid var(--auth-linha); border-radius: 999px;
    background: #fff; color: var(--bs-body-color);
    font-size: .8rem; font-weight: 600; cursor: pointer;
    box-shadow: 0 1px 2px rgba(14,27,46,.05);
    transition: border-color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}
.auth-tema:hover,
.auth-idioma-gatilho:hover { border-color: var(--auth-eletrico); transform: translateY(-1px); }
.auth-tema i { font-size: .95rem; line-height: 1; }
[data-bs-theme="dark"] .auth-tema,
[data-bs-theme="dark"] .auth-idioma-gatilho {
    background: var(--bs-tertiary-bg); border-color: var(--bs-border-color);
    box-shadow: none;
}
/* O par icone+palavra troca junto com o tema. */
.auth-tema-claro  { display: inline-flex; align-items: center; gap: .45rem; }
.auth-tema-escuro { display: none; }
[data-bs-theme="dark"] .auth-tema-claro  { display: none; }
[data-bs-theme="dark"] .auth-tema-escuro { display: inline-flex; align-items: center; gap: .45rem; }

/* ---- Seletor de idioma ---- */
.auth-idioma { position: relative; }
.auth-bandeira {
    width: 20px; height: 14px; display: block; flex: none;
    border-radius: 2px; box-shadow: 0 0 0 1px rgba(14,27,46,.16);
}
.auth-idioma-gatilho .bi-chevron-down { font-size: .62rem; opacity: .6; }
.auth-idioma-gatilho[aria-expanded="true"] { border-color: var(--auth-eletrico); }

.auth-idioma-lista {
    position: absolute; top: calc(100% + .4rem); right: 0;
    z-index: 10; min-width: 168px;
    margin: 0; padding: .3rem; list-style: none;
    background: #fff;
    border: 1px solid var(--auth-linha); border-radius: 12px;
    box-shadow: var(--shadow-lg);
}
[data-bs-theme="dark"] .auth-idioma-lista {
    background: var(--bs-tertiary-bg); border-color: var(--bs-border-color);
}
.auth-idioma-lista li {
    display: flex; align-items: center; gap: .55rem;
    padding: .5rem .6rem; border-radius: 8px;
    font-size: .86rem; font-weight: 500; cursor: pointer;
    color: var(--bs-body-color);
    transition: background-color var(--dur-fast) var(--ease-out);
}
.auth-idioma-lista li:hover,
.auth-idioma-lista li:focus-visible { background: var(--bs-secondary-bg); outline: none; }
.auth-idioma-lista li:focus-visible { box-shadow: inset 0 0 0 2px var(--auth-eletrico); }
.auth-idioma-lista li[aria-selected="true"] { font-weight: 700; }
.auth-idioma-lista li[aria-selected="true"]::after {
    content: '\F26E'; font-family: 'bootstrap-icons';
    margin-left: auto; font-size: .8rem; color: var(--auth-eletrico);
}

/* ==========================================================
   Bolinha do WhatsApp — a mesma do site
   ========================================================== */
.pdv-zap {
    position: fixed; right: clamp(.9rem, 3vw, 1.5rem); bottom: clamp(.9rem, 3vw, 1.5rem);
    z-index: 90;
    display: grid; place-items: center;
    width: 56px; height: 56px; border-radius: 50%;
    background: #25D366; color: #fff;
    box-shadow: 0 10px 26px -8px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.06);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.pdv-zap svg { width: 31px; height: 31px; }
.pdv-zap:hover, .pdv-zap:focus-visible {
    color: #fff; transform: translateY(-2px) scale(1.05);
    box-shadow: 0 14px 32px -8px rgba(37,211,102,.6), 0 0 0 1px rgba(0,0,0,.06);
}
@media (prefers-reduced-motion: no-preference) {
    .pdv-zap { animation: zap-entra 420ms var(--ease-out) 900ms backwards; }
    @keyframes zap-entra { from { opacity: 0; transform: translateY(14px) scale(.86); } }
    .pdv-zap::after {
        content: ''; position: absolute; inset: 0; border-radius: 50%;
        border: 2px solid #25D366;
        animation: zap-pulso 2.2s var(--ease-out) 1.6s 3;
    }
    @keyframes zap-pulso {
        0%   { opacity: .7; transform: scale(1); }
        70%  { opacity: 0;  transform: scale(1.55); }
        100% { opacity: 0;  transform: scale(1.55); }
    }
}

/* ==========================================================
   Estreito
   Abaixo de 992px a vitrine deixa de ser coluna e vira uma faixa curta no
   topo: o cupom inteiro num celular empurraria o formulario para fora da
   tela, e quem abre o login quer o campo de e-mail, nao a arte.
   ========================================================== */
@media (max-width: 991.98px) {
    .login-palco { grid-template-columns: 1fr; }
    .auth-vitrine {
        gap: var(--space-4);
        padding: clamp(1.6rem, 6vw, 2.4rem) var(--space-4);
        text-align: center; align-items: center;
    }
    .auth-vitrine::before { height: 62%; opacity: .34; }
    .auth-vitrine::after {
        background:
            radial-gradient(ellipse 90% 70% at 50% 35%, rgba(47,125,246,.24), transparent 72%),
            linear-gradient(to bottom, rgba(6,11,22,.7), rgba(6,11,22,.94));
    }
    .auth-manchete { max-width: 20ch; font-size: clamp(1.55rem, 6.5vw, 2.1rem); }
    .auth-legenda, .auth-cupom { display: none; }   /* a faixa e so o recado */
    .auth-lado { padding-top: var(--space-6); }
    .pdv-zap { width: 52px; height: 52px; }
    .pdv-zap svg { width: 28px; height: 28px; }
}

@media (max-width: 420px) {
    /* Com os dois controles por extenso a barra encostava no logotipo. */
    .auth-tema span { font-size: 0; gap: 0; }
    .auth-tema i { font-size: 1.05rem; }
    .auth-tema { padding: 0 .7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .login-cartao, .login-logo-caixa, .login-passo, .login-rodape, .auth-controles,
    .auth-cupom, .auth-cupom-papel, .auth-cupom-papel > *,
    .auth-manchete span, .auth-manchete em,
    .auth-legenda, .auth-eyebrow, .pdv-zap, .pdv-zap::after {
        animation: none !important;
    }
    .pdv-zap { transition: none; }
}