/*
 * Telas de acesso — entrar e criar conta.
 *
 * DIREÇÃO: a comanda. A tela é dividida em duas: à esquerda a VITRINE, que
 * mostra o sistema trabalhando (sempre escura, nos dois temas — é uma janela
 * para a cozinha à noite, não uma superfície da interface); à direita o
 * CARTÃO, que segue o tema escolhido pela pessoa.
 *
 * A assinatura da página é a comanda térmica que se imprime sozinha ao
 * carregar. Não é enfeite: é literalmente o que o Menuxy cospe na impressora
 * a noite inteira, e é a coisa mais reconhecível do mundo de quem faz login
 * aqui. A arte dos aparelhos fica ATRÁS dela, escurecida, como ambiente — se
 * as duas disputassem o olho, nenhuma venceria.
 *
 * Os tokens vêm de assets/css/app.css, que as duas páginas carregam antes.
 */

:root {
    --auth-noite:  #0E0B09;   /* o chão da vitrine */
    --auth-carvao: #1C1613;   /* corpo da impressora */
    --auth-brasa:  #F68B36;   /* a marca; o único acento da página */
    --auth-papel:  #F4EFE7;   /* papel térmico */
    --auth-tinta:  #14100D;   /* o que a impressora escreve */
    --auth-creme:  #FBF8F3;   /* o chão do lado do formulário, no claro */
    --auth-linha:  #E4DACB;   /* traço quente; o cinza puro esfriava a tela */
    --auth-mono: 'IBM Plex 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 + cartão
   ========================================================== */

.login-palco {
    min-height: 100svh;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) 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 imagem de fundo pedida: a arte do produto, já achatada sobre o noite.
   Fica baixa de propósito — quem manda na tela é a comanda. */
.auth-vitrine::before {
    content: ''; position: absolute; inset: 0; z-index: -2;
    background: url('../../img/auth/vitrine-1440.webp') center 38% / cover no-repeat;
    opacity: .3;
    filter: saturate(.75);
}
.auth-vitrine::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(ellipse 70% 55% at 28% 42%, rgba(246,139,54,.16), transparent 70%),
        linear-gradient(to right, rgba(14,11,9,.88), rgba(14,11,9,.52) 55%, rgba(14,11,9,.9));
}

.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.9rem);
    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: var(--auth-brasa); }

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

/* ---- A comanda ------------------------------------------------------
   O papel sai da impressora: a borda de baixo é serrilhada (o corte), e o
   bloco todo tem uma leve inclinação, como folha solta sobre o balcão. */

/* Duas camadas de propósito: a máscara do corte serrilhado vive no PAPEL, e a
   sombra no invólucro. Numa só, a máscara comeria a sombra junto — máscara é
   aplicada depois do filtro, então o recorte apagaria o que ele desenhou. */
.auth-comanda {
    position: relative;
    width: min(100%, 330px);
    transform: rotate(-1.4deg);
    filter: drop-shadow(0 24px 34px rgba(0,0,0,.62));
}
.auth-comanda-papel {
    --dente: radial-gradient(circle 7px at 7px 7px, #000 97%, transparent 100%);
    padding: 1.3rem 1.35rem 1.9rem;
    background: var(--auth-papel);
    color: var(--auth-tinta);
    font-family: var(--auth-mono);
    font-size: .76rem; line-height: 1.72;
    -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-comanda-papel b { font-weight: 600; }
.auth-comanda-papel hr {
    border: 0; border-top: 1px dashed rgba(20,16,13,.32);
    margin: .5rem 0; opacity: 1;
}
.auth-comanda-loja {
    display: block; text-align: center;
    font-weight: 600; font-size: .84rem; letter-spacing: .12em;
    text-transform: uppercase;
}
/* O que o papel imprime. Maior que uma linha de pedido: aqui a frase é o
   assunto, não um detalhe da conta. */
.auth-nota {
    margin: .35rem 0; text-align: center;
    font-size: .88rem; line-height: 1.75; text-wrap: balance;
}
.auth-nota--forte {
    font-weight: 600; font-size: 1.02rem;
    color: #A8500B;   /* a brasa escurecida até virar tinta legível no papel */
}
.auth-comanda-pe {
    display: block; text-align: center; margin-top: .5rem;
    font-size: .66rem; letter-spacing: .1em; color: rgba(20,16,13,.6);
}

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

    /* O atraso é calculado, não tabelado: com a lista escrita à mão, a linha
       que passasse do último nth-child ficava sem atraso e piscava antes do
       papel aparecer. */
    .auth-comanda-papel > * {
        animation: comanda-linha 260ms var(--ease-out) backwards;
        animation-delay: calc(430ms + var(--linha, 0) * 62ms);
    }
    .auth-comanda-papel > :nth-child(1)  { --linha: 1; }
    .auth-comanda-papel > :nth-child(2)  { --linha: 2; }
    .auth-comanda-papel > :nth-child(3)  { --linha: 3; }
    .auth-comanda-papel > :nth-child(4)  { --linha: 4; }
    .auth-comanda-papel > :nth-child(5)  { --linha: 5; }
    .auth-comanda-papel > :nth-child(6)  { --linha: 6; }
    .auth-comanda-papel > :nth-child(7)  { --linha: 7; }
    .auth-comanda-papel > :nth-child(8)  { --linha: 8; }
    .auth-comanda-papel > :nth-child(9)  { --linha: 9; }
    .auth-comanda-papel > :nth-child(10) { --linha: 10; }
    .auth-comanda-papel > :nth-child(n+11) { --linha: 11; }
    @keyframes comanda-linha { from { opacity: 0; transform: translateY(-5px); } }

    /* A manchete sobe de dentro de si mesma, como linha saindo do rolo — é o
       mesmo gesto da comanda, e não 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%); }
    }
}

/* ----------------------------------------------------------
   CARTÃO
   ---------------------------------------------------------- */

/* O lado do formulário ganha um creme quente e os campos ficam brancos — o
   inverso do padrão. Campo branco sobre papel lê como formulário em cima do
   balcão; campo cinza sobre branco lê como qualquer tela de cadastro. */
.auth-lado {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(2.6rem, 5vw, 3.4rem) var(--space-4) clamp(1.5rem, 4vw, 3rem);
    background: var(--auth-creme);
}
[data-bs-theme="dark"] .auth-lado { background: var(--bs-body-bg); }

.login-cartao {
    position: relative; z-index: 1;
    width: 100%; max-width: 412px;
    background: transparent;
    border: 0; border-radius: 0; box-shadow: none; padding: 0;
    animation: cartao-sobe 620ms var(--ease-out) backwards;
}
.login-cartao--largo { max-width: 560px; }
@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; }
.login-logo-caixa b {
    font-family: var(--auth-display);
    font-size: 1.18rem; font-weight: 800; letter-spacing: -.03em;
    color: var(--bs-body-color); line-height: 1;
}
/* Entrada sem o quique: girar e estufar um logotipo é 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 rótulo fala como gente: caixa e peso normais. A versão anterior era
   monoespaçada em caixa alta com entreletra larga em TODO campo — é o
   maquinário de template mais reconhecível que existe, e num formulário de
   cinco campos ele grita mais alto que o conteúdo. A monoespaçada continua,
   mas só onde carrega informação: a comanda e o rótulo do olho. */
.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 cartão, não ao .login-campo. Enquanto essa
   regra estava presa ao wrapper do olho, só a senha a tinha: ela saía 51px e
   os vizinhos 38px, na mesma linha do formulário. */
.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(41,22,8,.04);
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}
.login-cartao .form-control::placeholder { color: #A79B8C; }
.login-cartao .form-control:hover,
.login-cartao .form-select:hover { border-color: #D3C4B0; }
.login-cartao .form-control:focus,
.login-cartao .form-select:focus {
    background: #fff;
    border-color: var(--auth-brasa);
    box-shadow: 0 0 0 3px rgba(246,139,54,.16);
}
[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-brasa);
    box-shadow: 0 0 0 3px rgba(246,139,54,.22);
}

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

/* O olho tem alvo de toque de 40px: no balcão a pessoa erra um ícone 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-text-emphasis); background: var(--bs-secondary-bg); }
.login-campo-icone i { font-size: 1.05rem; }
/* .login-campo só embrulha campo COM botão — por isso a reserva de espaço
   pode ser incondicional, sem depender de :has(). */
.login-campo .form-control { padding-right: 2.8rem; }

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

/* ---- Rodapé do cartão ---- */
.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: .45rem;
    text-decoration: none; opacity: .8;
    transition: opacity var(--dur-fast) var(--ease-out);
}
.login-ap:hover { opacity: 1; }
.login-ap-nome {
    font-size: .74rem; font-weight: 500;
    color: var(--bs-secondary-color); line-height: 1;
}
.login-rodape-produto {
    font-size: .88rem; color: var(--bs-secondary-color);
    margin: 0 0 var(--space-4);
}
.login-ap-marca { height: 24px; 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; }

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

/* ==========================================================
   Claro / escuro
   Fica no canto do lado do formulário, não na vitrine: a vitrine é escura
   nos dois temas, e um botão de tema em cima dela não teria o que anunciar.
   ========================================================== */
.auth-tema {
    position: absolute; top: clamp(1rem, 3vw, 1.6rem); right: clamp(1rem, 3vw, 1.6rem);
    z-index: 3;
    display: inline-flex; align-items: center; gap: .45rem;
    height: 38px; padding: 0 .8rem;
    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(41,22,8,.05);
    transition: border-color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}
.auth-tema:hover { border-color: var(--auth-brasa); transform: translateY(-1px); }
.auth-tema i { font-size: .95rem; line-height: 1; }
[data-bs-theme="dark"] .auth-tema {
    background: var(--bs-tertiary-bg); border-color: var(--bs-border-color);
    box-shadow: none;
}
/* O par ícone+palavra troca junto com o tema. */
.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; }
.auth-tema-claro { display: inline-flex; align-items: center; gap: .45rem; }

@media (prefers-reduced-motion: no-preference) {
    .auth-tema { animation: passo-entra 520ms var(--ease-out) 260ms backwards; }
}

/* ==========================================================
   Bolinha do WhatsApp — a mesma do site
   ========================================================== */
.mx-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);
}
.mx-zap svg { width: 31px; height: 31px; }
.mx-zap:hover, .mx-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) {
    .mx-zap { animation: zap-entra 420ms var(--ease-out) 900ms backwards; }
    @keyframes zap-entra { from { opacity: 0; transform: translateY(14px) scale(.86); } }
    .mx-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: a comanda inteira num celular empurraria o formulário para fora da
   tela, e quem abre o login quer o campo de e-mail, não 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 { background-position: center 45%; opacity: .26; }
    .auth-vitrine::after {
        background:
            radial-gradient(ellipse 90% 70% at 50% 35%, rgba(246,139,54,.18), transparent 72%),
            linear-gradient(to bottom, rgba(14,11,9,.72), rgba(14,11,9,.94));
    }
    .auth-manchete { max-width: 20ch; font-size: clamp(1.55rem, 6.5vw, 2.1rem); }
    .auth-legenda, .auth-comanda { display: none; }   /* a faixa é só o recado */
    .auth-lado { padding-top: var(--space-6); }
    .mx-zap { width: 52px; height: 52px; }
    .mx-zap svg { width: 28px; height: 28px; }
}

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

/* CPF/CNPJ: número de documento lê melhor em mono, com algarismos de largura
   igual. O selo à direita diz o que foi reconhecido e se os dígitos conferem. */
.login-doc { position: relative; }
.login-doc .form-control {
    padding-right: 4.2rem;
    font-family: var(--auth-mono); font-size: .92rem; 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; }
@media (prefers-reduced-motion: reduce) { .login-doc-selo { transition: none; } }

/* Recuperação de acesso: cartão acolhedor, foco direto no formulário e
   confirmação de sucesso com movimento curto e opcional. */
.email-auth-page { --recovery-orange:#f58232; --recovery-ink:#261d18; --recovery-muted:#756b64; }
.email-auth-page .email-auth-aside {
    position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column;
    justify-content:space-between; padding:clamp(2rem,5vw,4.5rem); color:#fff;
    background:radial-gradient(ellipse at 15% 85%,rgba(245,130,50,.22),transparent 44%),linear-gradient(145deg,#211a16,#12100e 72%);
}
.email-auth-page .email-auth-aside::after {
    content:""; position:absolute; z-index:-1; width:30rem; height:30rem; right:-16rem; top:15%;
    border:1px solid rgba(255,255,255,.08); border-radius:50%; box-shadow:0 0 0 3rem rgba(255,255,255,.018),0 0 0 6rem rgba(255,255,255,.014);
}
.email-auth-brand { display:inline-flex; align-items:center; gap:.75rem; width:max-content; color:#fff; font-size:1.2rem; font-weight:800; text-decoration:none; }
.email-auth-brand img,.email-auth-mobile-brand img { display:block; object-fit:contain; border-radius:14px; }
.email-auth-aside-copy { max-width:30rem; margin:auto 0; padding:3rem 0; }
.email-auth-kicker,.email-auth-overline { display:inline-flex; align-items:center; gap:.5rem; color:#a94d12; font-size:.72rem; font-weight:800; letter-spacing:.12em; }
.email-auth-kicker { color:#ffc08f; padding:.5rem .75rem; border:1px solid rgba(255,255,255,.14); border-radius:999px; background:rgba(255,255,255,.06); }
.email-auth-aside-copy h2 { max-width:12ch; margin:1.2rem 0 .8rem; font-size:clamp(2.5rem,4.4vw,4.6rem); font-weight:850; line-height:.99; letter-spacing:-.055em; }
.email-auth-aside-copy h2 span { color:var(--recovery-orange); }
.email-auth-aside-copy p { max-width:34ch; color:rgba(255,255,255,.68); font-size:1rem; line-height:1.65; }
.email-auth-trust { display:flex; align-items:center; gap:.8rem; color:#fff; font-weight:700; }
.email-auth-trust>i { color:#8de1b1; font-size:1.25rem; }
.email-auth-trust small { color:rgba(255,255,255,.58); font-weight:500; }
.email-auth-powered { display:flex; align-items:center; gap:.65rem; color:rgba(255,255,255,.62); font-size:.75rem; text-decoration:none; }
.email-auth-powered img { width:auto; max-width:142px; object-fit:contain; }
.email-auth-mobile-brand { display:none; }
.email-auth-page .auth-lado { min-width:0; min-height:100svh; padding:clamp(1rem,4vw,3rem); }
.email-auth-page .email-auth-card { max-width:470px; padding:clamp(1.4rem,4vw,2.5rem); background:#fff; border:1px solid #ece4dc; border-radius:24px; box-shadow:0 24px 70px rgba(49,32,19,.10); }
.email-auth-page .login-marca { margin-bottom:1.5rem; }
.email-auth-page .login-titulo { margin-top:.65rem; color:var(--recovery-ink); font-size:clamp(1.9rem,4vw,2.35rem); }
.email-auth-page .login-sub { color:var(--recovery-muted); line-height:1.6; }
.email-auth-page .form-label { display:block; margin:1rem 0 .45rem; color:#3c332e; font-size:.84rem; font-weight:700; }
.email-auth-page .form-control { min-height:52px; border-color:#e3d9cf; border-radius:12px; }
.email-auth-page .btn-entrar { min-height:52px; margin-top:.2rem; color:#26180e; background:var(--recovery-orange); box-shadow:0 8px 18px rgba(190,91,25,.16); }
.email-auth-page .btn-entrar:hover { color:#26180e; filter:brightness(1.04); }
.email-auth-page .btn-entrar:focus-visible,.email-auth-page a:focus-visible,.email-auth-page .form-control:focus-visible { outline:3px solid rgba(245,130,50,.42); outline-offset:3px; }
.email-auth-back { margin:1.15rem 0 0; text-align:left; }
.email-auth-back a { display:inline-flex; align-items:center; gap:.45rem; color:#9b470e; font-size:.88rem; font-weight:700; text-decoration:none; }
.email-auth-back a:hover { text-decoration:underline; }
.email-auth-page .alert { border-radius:12px; }
.recovery-hint { margin:.5rem 0 0; color:var(--recovery-muted); font-size:.78rem; line-height:1.55; }
.recovery-password-wrap { position:relative; }
.recovery-password-wrap .form-control { padding-right:3rem; }
.recovery-toggle-password { position:absolute; top:50%; right:.45rem; display:grid; width:40px; height:40px; place-items:center; transform:translateY(-50%); border:0; border-radius:10px; color:#655b54; background:transparent; }
.recovery-toggle-password:hover { background:#f5f1ed; }
.recovery-meter { height:5px; margin:.6rem 0 .25rem; overflow:hidden; border-radius:99px; background:#eee8e2; }
.recovery-meter span { display:block; width:0; height:100%; border-radius:inherit; background:#db7550; transition:width .25s ease,background-color .25s ease; }
.recovery-meter[data-level="2"] span { background:#d8a038; }
.recovery-meter[data-level="3"] span { background:#279668; }
.recovery-match { min-height:1.2rem; margin:.25rem 0 1rem; font-size:.78rem; color:var(--recovery-muted); }
.recovery-match.is-valid { color:#16834f; }
.recovery-success { text-align:center; }
.recovery-success-icon { position:relative; display:grid; width:76px; height:76px; place-items:center; margin:0 auto 1.2rem; color:#16834f; background:#e9f7ef; border-radius:50%; font-size:2.4rem; }
.recovery-success-icon::before,.recovery-success-icon::after { content:""; position:absolute; inset:-8px; border:1px solid rgba(22,131,79,.2); border-radius:50%; }
.recovery-success-icon::after { inset:-17px; border-color:rgba(22,131,79,.1); }
.recovery-success h2 { margin:0 0 .55rem; color:var(--recovery-ink); font-size:1.7rem; font-weight:800; letter-spacing:-.035em; }
.recovery-success p { color:var(--recovery-muted); line-height:1.65; }
.recovery-success .btn-entrar { display:flex; align-items:center; justify-content:center; gap:.5rem; margin-top:1.35rem; text-decoration:none; }
.recovery-success-countdown { margin:.85rem 0 0!important; font-size:.76rem; }
@media (prefers-reduced-motion:no-preference) {
    .recovery-success-icon { animation:recovery-check-in .55s cubic-bezier(.18,.89,.32,1.25) both; }
    .recovery-success-icon i { animation:recovery-tick .35s .22s ease-out both; }
    .recovery-success-icon::before { animation:recovery-ring .75s .2s ease-out both; }
    .recovery-success-icon::after { animation:recovery-ring .9s .3s ease-out both; }
    @keyframes recovery-check-in { from { opacity:0; transform:scale(.65) rotate(-12deg); } to { opacity:1; transform:scale(1) rotate(0); } }
    @keyframes recovery-tick { from { opacity:0; transform:scale(.5); } to { opacity:1; transform:scale(1); } }
    @keyframes recovery-ring { from { opacity:0; transform:scale(.7); } to { opacity:1; transform:scale(1); } }
}
@media (max-width:991.98px) {
    .email-auth-page { grid-template-columns:1fr; }
    .email-auth-page .email-auth-aside { min-height:108px; flex-direction:row; align-items:center; gap:1rem; padding:1rem clamp(1.1rem,5vw,2rem); }
    .email-auth-page .email-auth-aside-copy,.email-auth-page .email-auth-trust { display:none; }
    .email-auth-page .email-auth-brand img { width:52px; height:52px; }
    .email-auth-page .email-auth-powered { margin-left:auto; }
    .email-auth-page .email-auth-powered img { max-width:112px; }
    .email-auth-page .auth-lado { min-height:calc(100svh - 108px); padding:1.2rem clamp(1rem,5vw,2.4rem) 2rem; }
}
@media (max-width:575.98px) {
    .email-auth-page .email-auth-aside { min-height:78px; }
    .email-auth-page .email-auth-brand img { width:46px; height:46px; }
    .email-auth-page .email-auth-powered { gap:.4rem; font-size:.68rem; }
    .email-auth-page .email-auth-powered img { max-width:90px; height:20px; }
    .email-auth-page .email-auth-card { padding:1.35rem 1.2rem; border-radius:19px; }
    .email-auth-mobile-brand { display:flex; align-items:center; gap:.55rem; margin-bottom:1.5rem; color:#2b211b; font-size:.95rem; font-weight:800; }
    .email-auth-mobile-brand img { width:43px; height:43px; }
    .email-auth-secure { display:inline-flex; align-items:center; gap:.3rem; margin-left:auto; padding:.35rem .55rem; border-radius:99px; color:#18854e; background:#eaf7ef; font-size:.7rem; }
    .email-auth-page .login-marca { margin-bottom:1.15rem; }
    .email-auth-page .email-auth-overline { font-size:.64rem; }
}
@media (prefers-reduced-motion:reduce) {
    .email-auth-page *, .email-auth-page *::before, .email-auth-page *::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}