/* mesma paleta do painel (ServiceManager, 60-30-10 sobre #0a1628): esta e a
   primeira tela que o cliente ve, e duas identidades no mesmo produto se notam */
:root{--page:#0a1628;--surface:#0e1d38;--surface2:#15284d;--ink:#f1f5f9;--ink2:#cbd5e1;--muted:#94a3b8;
  --border:rgba(56,189,248,.14);--accent:#38bdf8;--crit:#ef4444;--sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}html,body{height:100%;margin:0}
/* o gradiente fica como rede de seguranca: sem WebGL o canvas nao pinta nada,
   e a tela precisa continuar sendo uma tela de login utilizavel */
body{background:radial-gradient(1200px 700px at 50% 22%,#0e1d38 0%,var(--page) 62%);color:var(--ink);
  font-family:var(--sans);display:grid;place-items:center;overflow:auto}
#bg3d{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:-1;border:0}
/* cortina: entra quando o globo ja tomou a tela e cobre a troca de pagina */
#passa{position:fixed;inset:0;background:var(--page);opacity:0;pointer-events:none;
  z-index:60;transition:opacity .46s cubic-bezier(.4,0,.9,.6)}
#passa.on{opacity:1}
@media (prefers-reduced-motion:reduce){#passa{transition:opacity .15s linear}}
/* estreito: o cartao no meio, o globo grande atras dele.
   largo (body.lado): globo a esquerda e cartao a direita, posicionados pelo
   mesmo calculo em JS — ver `poe()` no fim do arquivo. */
.palco{min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:40px 16px;transition:opacity .38s ease,transform .38s ease}
/* o cartao recua e some quando a travessia comeca: ele parado no meio da tela
   enquanto o globo avanca por tras sao duas coisas contando historias diferentes */
body.indo .palco{opacity:0;transform:scale(.96)}
body.indo .wm{opacity:0;transition:opacity .3s ease}
body.lado .palco{justify-content:flex-start;padding-left:0}
body.lado .card{margin-left:var(--cardx,0px)}
/* Wordmark: copiado do projeto imagetech-logo3d. O degradê e a paleta do
   proprio globo — azul claro, azul, magenta, oliva —, por isso as letras e a
   peca 3D parecem a mesma marca e nao duas. */
.wm{position:fixed;left:var(--wmx,50%);top:var(--wmy,80%);transform:translateX(-50%);
  text-align:center;pointer-events:none;white-space:nowrap;
  opacity:0;animation:wmSobe 1.1s .45s cubic-bezier(.2,.8,.25,1) forwards}
.wm b{display:block;font-size:clamp(22px,2.9vw,42px);font-weight:600;
  letter-spacing:.34em;text-indent:.34em;
  background:linear-gradient(100deg,#4aa8ee 0%,#0061AE 26%,#8C0370 60%,#B3B329 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.wm small{display:block;margin-top:.8em;font-size:clamp(9px,.85vw,11px);
  letter-spacing:.36em;text-indent:.36em;text-transform:uppercase;color:var(--muted)}
@keyframes wmSobe{from{opacity:0;transform:translateX(-50%) translateY(14px)}
                  to{opacity:1;transform:translateX(-50%)}}
/* so no arranjo largo: no estreito o cartao flutua sobre o globo e o wordmark
   cairia atras dele, ora visivel ora cortado conforme a altura da janela */
body:not(.lado) .wm{display:none}
@media (prefers-reduced-motion:reduce){.wm{animation:none;opacity:1}}
.card{width:340px;max-width:100%;background:rgba(14,29,56,.80);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  border:1px solid var(--border);border-radius:14px;padding:26px 26px 28px;
  box-shadow:0 24px 70px rgba(0,0,0,.55)}
/* sem a logo achatada, e o titulo do cartao que diz de qual painel se trata —
   e como se distingue homologacao de producao antes de entrar */
.card-t{text-align:center;margin-bottom:14px}
.card-t .tit{display:flex;align-items:center;justify-content:center;gap:9px}
.card-t .escudo{width:26px;height:26px;flex:0 0 auto;display:block}
.card-t b{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:.2px}
.card-t small{display:block;font-size:11.5px;color:var(--muted);margin-top:4px}
h1{font-size:15px;margin:0}.sub{font-size:11.5px;color:var(--muted);margin-top:2px}
label{display:block;font-size:12px;color:var(--ink2);margin:14px 0 6px;font-weight:600}
input{width:100%;background:var(--surface2);border:1px solid var(--border);color:var(--ink);
  padding:11px 12px;border-radius:9px;font-size:14px;outline:none;font-family:var(--sans)}
input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(56,189,248,.22)}
/* botao do SM: fundo no accent, texto no azul do fundo — nao branco */
button{width:100%;margin-top:22px;background:var(--accent);color:#0a1628;border:0;padding:12px;border-radius:9px;
  font-size:14px;font-weight:700;cursor:pointer;font-family:var(--sans)}
button:hover{filter:brightness(1.08)}button:disabled{opacity:.6;cursor:default}
.err{margin-top:14px;font-size:12.5px;color:#f07272;background:rgba(208,59,59,.12);border:1px solid rgba(208,59,59,.3);
  border-radius:8px;padding:9px 11px;display:none}
.linha-aj{margin-top:14px;text-align:center}
.linha-aj a{font-size:12px;color:var(--muted);text-decoration:none;cursor:pointer}
.linha-aj a:hover{color:var(--accent)}
.ov{position:fixed;inset:0;background:rgba(0,0,0,.66);display:grid;place-items:center;z-index:10}
.mdl{width:360px;max-width:92vw;background:var(--surface);border:1px solid var(--border);
  border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.55);overflow:hidden}
.mdl-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:15px 20px;border-bottom:1px solid var(--border)}
.mdl-cab h2{margin:0;font-size:15px;font-weight:700}
.mdl-x{background:transparent;border:0;color:var(--muted);font-size:22px;line-height:1;
  cursor:pointer;width:auto;margin:0;padding:0 2px;font-weight:400}
.mdl-x:hover{color:var(--ink);filter:none}
.mdl-corpo{padding:6px 20px 20px}
.mdl-corpo label:first-of-type{margin-top:12px}
.mdl-txt{font-size:12.5px;color:var(--ink2);line-height:1.5;margin-top:14px}
/* os dois passos do cartao: credenciais e codigo. A travessia e curta de
   proposito — passo de entrada nao e lugar de esperar animacao. */
#passo1,#passo2{transition:opacity .17s ease}
.p2-txt{font-size:12.5px;color:var(--ink2);line-height:1.5;margin:2px 0 2px}
.p2-txt b{color:var(--ink)}
/* "confiar neste dispositivo": caixa pequena, nao o input de largura total */
.confia{display:flex;align-items:center;gap:9px;margin:14px 0 0;font-weight:500;cursor:pointer;
  color:var(--ink2);font-size:12.5px;user-select:none}
.confia input{width:16px;height:16px;margin:0;padding:0;flex:none;accent-color:var(--accent);cursor:pointer}
.confia small{display:block;color:var(--muted);font-size:11px;font-weight:400;margin-top:1px}
#p2c,#mic{font:17px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:6px;
  text-align:center}
#miChave,#miConta{font:13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1px}
/* o QR fica sobre branco mesmo no tema escuro: e assim que a camera le */
.qrbox{margin-top:14px;background:#fff;border-radius:11px;padding:10px;display:grid;place-items:center}
.qrbox img{width:190px;height:190px;display:block}
.msg{margin-top:14px;font-size:12.5px;border-radius:8px;padding:9px 11px;display:none}
.msg.err{color:#f07272;background:rgba(208,59,59,.12);border:1px solid rgba(208,59,59,.3)}
.msg.ok{color:#41c941;background:rgba(12,163,12,.12);border:1px solid rgba(12,163,12,.3)}
.troca{margin-top:16px;text-align:center;font-size:11.5px;color:var(--muted)}
.troca a{color:var(--accent);text-decoration:none;cursor:pointer}
.foot{margin-top:18px;font-size:10.5px;color:var(--muted);text-align:center}