/* ============================================================
   entrada.css — as telas de ENTRAR dos produtos DataWave (kit, 21/10/2026)

   Entrar, verificação em duas etapas, criar/trocar a senha, esqueci a senha, sem acesso, meus dados (agência) e a entrada dos dois painéis.
   O desenho é o do sistema das agências (cartão escuro, marca em quadrado com degradê, brilho da cor do produto no alto), aprovado pelo
   Diego em 18/10/2026; das Avaliações vieram o "Esqueci minha senha" e o rodapé de ajuda. Antes cada tela tinha o estilo copiado dentro dela.

   A COR é de cada produto: a tela pode redefinir --brand, --brand-2 e --brand-brilho (o padrão é o laranja da agência).
     Avaliações: :root{--brand:#3B6EF6;--brand-2:#7FA2FF;--brand-brilho:rgba(59,110,246,.16);--brand-sombra:rgba(59,110,246,.38);--brand-anel:rgba(59,110,246,.25);--link:#9DB8FF;--link-claro:#2457E0}
     (--link-claro é a cor dos links no tema claro: mais escura, para ler no branco)
   O TEMA segue a escolha da pessoa neste navegador (a mesma chave 'tema-visual' do visual.js; sem escolha, escuro). A tela põe no <head>,
   antes do primeiro desenho:
     <script>try{if(localStorage.getItem('tema-visual')==='claro')document.documentElement.setAttribute('data-tema','claro')}catch(e){}</script>
   Marcação:
     <main class="card"> <div class="logo">(a onda ou a letra)</div> <h1>…</h1> <p class="sub">…</p> <form>…</form>
       <div class="rod-ajuda">Precisa de ajuda? <a …>WhatsApp</a> · <a …>e-mail</a></div> </main>
   ============================================================ */
:root{
  --ink:#F2F2F2;--ink-2:#BDBDBD;--ink-3:#9D9FA1;--paper:#212121;--surface:#212121;
  --line:#363636;--line-2:#2E2E2E;--danger:#F0645A;--ok:#3DD68C;--on-brand:#fff;
  --brand:#FF5000;--brand-2:#FF7A4B;--brand-brilho:rgba(255,80,0,.16);--brand-sombra:rgba(255,80,0,.38);--brand-anel:rgba(255,80,0,.25);--link:#FF9068;--link-claro:#B53F15;
  --campo:#0D0D0D;--fundo-2:#0D0D0D;--ico:#2C2C2C;--realce:#fff;--hover:rgba(255,255,255,.04);--sombra-card:0 30px 70px rgba(0,0,0,.45);
  --erro-ink:#F58A82;--aviso-ink:#F1BE6B;
  --body:'DM Sans','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;color-scheme:dark;
}
/* o tema claro (a mesma escolha do sol/lua do sistema) */
html[data-tema="claro"]{
  --ink:#111111;--ink-2:#4B4B4B;--ink-3:#6F7173;--paper:#F2F2F2;--surface:#FFFFFF;
  --line:#DDDDDD;--line-2:#E9E9E9;--danger:#D32F2F;--ok:#177A50;
  --campo:#FFFFFF;--fundo-2:#F5F5F5;--ico:#F0F0F0;--realce:var(--ink);--hover:rgba(17,17,17,.04);--sombra-card:0 24px 60px rgba(17,17,17,.10);
  --erro-ink:#B3261E;--aviso-ink:#8A5A00;--link:var(--link-claro);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
body{font-family:var(--body);color:var(--ink);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(900px 520px at 50% -8%,var(--brand-brilho),transparent 62%),var(--paper);background-color:var(--paper)}

/* o cartão */
.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:36px 32px;width:100%;max-width:420px;box-shadow:var(--sombra-card)}
@media (max-width:420px){body{padding:16px}.card{padding:28px 22px;border-radius:18px}}
.logo{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--brand-2),var(--brand));color:var(--on-brand);display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:700;margin-bottom:22px;box-shadow:0 10px 26px var(--brand-sombra)}
.logo svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.olho{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--link);font-weight:700;margin-bottom:6px}
html[data-tema="claro"] .olho{color:var(--brand)}
h1{font-size:20px;font-weight:500;letter-spacing:-.015em;margin-bottom:6px;line-height:1.25}
p.sub{font-size:14px;color:var(--ink-2);line-height:1.55;margin-bottom:26px}

/* campos */
.campo{margin-bottom:16px}
label{display:block;font-size:13px;font-weight:500;color:var(--ink-2);margin:0 0 8px;letter-spacing:0;text-transform:none}
form label{margin:16px 0 8px}
form .campo label{margin:0 0 8px}
input,select{width:100%;height:46px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--campo);color:var(--ink);font-size:15px;font-family:inherit;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-anel)}
input[name="codigo"]{height:56px;font-size:24px;letter-spacing:.32em;text-align:center;font-weight:500}
input[type="checkbox"]{height:auto;width:auto;padding:0;box-shadow:none}
.dica{font-size:13px;color:var(--ink-3);margin-top:6px}

/* botões e links */
button,a.bt{display:block;width:100%;height:46px;line-height:46px;padding:0 16px;border:none;border-radius:10px;background:var(--brand);color:var(--on-brand);font-size:15px;font-weight:600;font-family:inherit;margin-top:24px;cursor:pointer;transition:background .15s;text-align:center;text-decoration:none}
button:hover,a.bt:hover{background:var(--brand-2);color:var(--on-brand)}
button:disabled{opacity:.6;cursor:default}
button:focus-visible,a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
button.sec{background:transparent;color:var(--ink);border:1px solid var(--line);margin-top:8px;text-align:left;height:auto;line-height:1.4;padding:12px 14px}
button.sec:hover{background:var(--hover);color:var(--ink)}
button.sec small{display:block;color:var(--ink-3);font-weight:400;font-size:13px}
button.link{display:inline-block;background:none;border:0;color:var(--link);padding:0;margin:16px 0 0;width:auto;height:auto;line-height:1.4;font-weight:500;font-size:14px}
button.link:hover{color:var(--realce);background:none}
html[data-tema="claro"] button:not(.sec):not(.link):hover,html[data-tema="claro"] a.bt:hover{background:var(--brand);filter:brightness(.92)}
a{color:var(--link);font-size:14px;font-weight:500;text-decoration:none}
a:hover{color:var(--realce)}
a.cancelar{display:inline-block;color:var(--ink-3);font-size:14px;margin-top:18px}
a.cancelar:hover{color:var(--ink)}

/* avisos */
.erro,.msg,.ok,.aviso{border-radius:12px;padding:12px 14px;font-size:14px;margin-bottom:16px}
.erro{background:rgba(240,100,90,.12);color:var(--erro-ink);border:1px solid rgba(240,100,90,.32)}
.ok,.msgok{background:rgba(61,214,140,.12);color:var(--ok);border:1px solid rgba(61,214,140,.3)}
.aviso{background:rgba(232,163,61,.12);color:var(--aviso-ink);border:1px solid rgba(232,163,61,.35);line-height:1.5}
.erro:empty,.msgok:empty{display:none}
.msgok{border-radius:12px;padding:12px 14px;font-size:14px;margin-top:16px}
form .erro{margin:16px 0 0}

/* o rodapé de ajuda (o mesmo contato do menu: suporte da DataWave, que mora em enderecos.js) */
.rod-ajuda{margin-top:24px;padding-top:16px;border-top:1px solid var(--line-2);font-size:13px;color:var(--ink-3);line-height:1.6}
.rod-ajuda a{font-size:13px}

/* "Sem acesso" */
.card:has(.ico){padding:40px 32px;text-align:center}
.ico{width:68px;height:68px;border-radius:50%;background:var(--ico);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.card:has(.ico) p{font-size:14px;color:var(--ink-2);margin-bottom:26px}
.card:has(.ico) a.botao,.card:has(.ico) > a{display:inline-block;padding:13px 22px;border-radius:10px;background:var(--brand);color:#fff;font-size:15px;font-weight:600}

/* Meus dados (agência) */
.acesso{border-radius:12px;background:var(--fundo-2);font-size:13px;padding:11px 14px}
.foto-box{border-radius:14px;background:var(--fundo-2);padding:16px}
.foto-box h2{font-size:13px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--ink-2)}
.foto-bt{border-radius:10px;background:var(--surface);font-weight:500;padding:9px 14px}
.foto-pub{font-size:13px}

/* configurar a verificação em duas etapas */
.passo b{color:var(--link)}
#qr{border-radius:14px;padding:18px}
.chave-manual{border-radius:10px;background:var(--fundo-2)}
.codigos{border-radius:12px;background:var(--fundo-2)}