/* tela de acesso do painel - tema escuro, sem framework
   A paleta e a copia fiel do :root de style.css. A duplicacao e proposital: o
   login e a unica barreira entre a internet e o painel, entao ele nao pode
   depender de nenhum outro arquivo para renderizar de forma utilizavel. */

:root{
  --bg:#0d1014;
  --bg-2:#12171f;
  --elev:#161c26;
  --elev-2:#1c2431;
  --linha:#242d3b;
  --linha-2:#334054;
  --txt:#e9eef6;
  --txt-2:#98a5b8;
  --txt-3:#68768c;
  --ok:#3ddc84;
  --ok-fraco:rgba(61,220,132,.13);
  --erro:#ff5f6d;
  --erro-fraco:rgba(255,95,109,.13);
  --alerta:#ffb020;
  --alerta-fraco:rgba(255,176,32,.13);
  --down:#5aa9ff;
  --raio:14px;
  --raio-p:9px;
  --sombra:0 10px 30px rgba(0,0,0,.5);
  --fonte:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100dvh;
  background:
    radial-gradient(1100px 520px at 12% -10%, #17202c 0%, transparent 62%),
    radial-gradient(900px 420px at 100% 0%, #151d29 0%, transparent 55%),
    var(--bg);
  color:var(--txt);
  font-family:var(--fonte);
  font-size:15px;
  line-height:1.45;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:24px 16px calc(24px + env(safe-area-inset-bottom));
}
h1{margin:0;font-size:21px;font-weight:650;letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--down);outline-offset:2px}

/* ---------- cartao ---------- */
.cartao-acesso{
  width:min(410px,100%);
  background:var(--elev);
  border:1px solid var(--linha-2);
  border-radius:var(--raio);
  box-shadow:var(--sombra);
  padding:22px 22px 24px;
}

.marca{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.marca-icone{width:30px;height:30px;color:var(--ok);flex:none}
.marca-txt{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.marca-txt strong{font-size:18px;letter-spacing:.02em}
.marca-txt small{color:var(--txt-3);font-size:11.5px;text-transform:uppercase;letter-spacing:.09em}

/* ---------- palco das duas etapas ---------- */
/* as etapas ocupam a mesma celula: durante a troca as duas coexistem sem pular */
.palco{display:grid;overflow:hidden;transition:height .22s cubic-bezier(.2,.7,.3,1)}
.passo{grid-area:1/1;display:flex;flex-direction:column;min-width:0}
.passo .sub{margin:5px 0 18px;color:var(--txt-2);font-size:13.5px}
.passo .sub strong{color:var(--txt);font-weight:600;overflow-wrap:anywhere}

@keyframes entrar-dir{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes entrar-esq{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
@keyframes sair-esq{from{opacity:1;transform:none}to{opacity:0;transform:translateX(-22px)}}
@keyframes sair-dir{from{opacity:1;transform:none}to{opacity:0;transform:translateX(22px)}}
.passo.entra-dir{animation:entrar-dir .2s ease-out both}
.passo.entra-esq{animation:entrar-esq .2s ease-out both}
.passo.sai-esq{animation:sair-esq .14s ease-in both;pointer-events:none}
.passo.sai-dir{animation:sair-dir .14s ease-in both;pointer-events:none}

/* ---------- campos ---------- */
label{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--txt-3);margin-bottom:6px}
label+.campo,label+.campo-senha{margin-bottom:14px}

.campo{
  width:100%;
  background:var(--bg-2);
  border:1px solid var(--linha-2);
  border-radius:var(--raio-p);
  color:var(--txt);
  font:inherit;
  font-size:16px;              /* abaixo de 16px o iOS aplica zoom ao focar */
  padding:12px 13px;
  min-height:48px;
}
.campo::placeholder{color:var(--txt-3)}
.campo:focus{border-color:var(--down);outline:none;box-shadow:0 0 0 3px rgba(90,169,255,.15)}
.campo:disabled{opacity:.55;cursor:not-allowed}
.campo.errado{border-color:var(--erro);box-shadow:0 0 0 3px rgba(255,95,109,.13)}
/* o autofill do Chrome pinta o campo de branco; o inset repinta por cima */
.campo:-webkit-autofill,
.campo:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--txt);
  -webkit-box-shadow:0 0 0 40px var(--bg-2) inset;
  caret-color:var(--txt);
}

.campo-senha{position:relative}
.campo-senha .campo{padding-right:46px}
.olho{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  appearance:none;background:none;border:0;color:var(--txt-3);
  width:38px;height:38px;display:grid;place-items:center;
  border-radius:8px;cursor:pointer;
}
.olho:hover{color:var(--txt);background:rgba(255,255,255,.05)}
.olho svg{width:19px;height:19px;display:block}

.lembrar{
  display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none;
  text-transform:none;letter-spacing:0;font-size:13.5px;color:var(--txt-2);
  margin:2px 0 16px;padding:4px 0;
}
.lembrar input{accent-color:var(--ok);width:17px;height:17px;flex:none}

/* ---------- codigo de 6 digitos ---------- */
.campo-codigo{
  font-family:var(--mono);
  font-size:27px;
  letter-spacing:.34em;
  text-indent:.34em;            /* compensa o espaco que o letter-spacing joga a direita */
  text-align:center;
  padding:13px 10px;
  min-height:60px;
}
.pontos{display:flex;gap:6px;margin:10px 0 16px}
.pontos span{
  flex:1;height:3px;border-radius:2px;background:var(--linha-2);
  transition:background .15s;
}
.pontos span.cheio{background:var(--ok)}

/* ---------- botoes ---------- */
.btn{
  appearance:none;font:inherit;font-weight:600;
  border-radius:var(--raio-p);border:1px solid var(--linha-2);
  background:var(--elev-2);color:var(--txt);
  padding:9px 13px;cursor:pointer;white-space:nowrap;
  transition:background .12s,border-color .12s,opacity .12s,filter .12s;
}
.btn:hover:not(:disabled){filter:brightness(1.18)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-primario{background:var(--ok);border-color:var(--ok);color:#07220f}
.btn-primario:hover:not(:disabled){filter:brightness(1.08)}
.btn-grande{
  width:100%;min-height:50px;font-size:15.5px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
}
/* o cursor de espera precisa vencer o :disabled do estado carregando */
.btn.carregando{cursor:progress;opacity:.85}
.btn.carregando .rotulo{opacity:.75}

.girador{
  width:16px;height:16px;flex:none;display:none;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:girar .7s linear infinite;
}
.btn.carregando .girador{display:block}
@keyframes girar{to{transform:rotate(360deg)}}

.link{
  appearance:none;background:none;border:0;padding:0;
  font:inherit;font-size:13.5px;color:var(--down);cursor:pointer;
  border-radius:6px;
}
.link:hover:not(:disabled){text-decoration:underline}
.link:disabled{color:var(--txt-3);cursor:default;text-decoration:none}

.voltar{
  appearance:none;background:none;border:0;padding:4px 0;margin:0 0 12px;
  align-self:flex-start;font:inherit;font-size:13px;color:var(--txt-2);cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;border-radius:6px;
}
.voltar:hover{color:var(--txt)}
.voltar svg{width:14px;height:14px}

.reenvio{margin:16px 0 0;text-align:center;color:var(--txt-3);font-size:13px}

/* ---------- recados ---------- */
.recado{
  margin:0 0 14px;padding:10px 12px;font-size:13.5px;
  border-radius:0 var(--raio-p) var(--raio-p) 0;
  border:1px solid rgba(255,95,109,.35);border-left:3px solid var(--erro);
  background:var(--erro-fraco);color:#ffd7da;
}
.recado.espera{border-color:rgba(255,176,32,.4);border-left-color:var(--alerta);background:var(--alerta-fraco);color:#f3e2c4}
.recado .tempo{font-variant-numeric:tabular-nums;font-weight:650}

.aviso{
  margin:0 0 14px;padding:9px 11px;font-size:12.5px;
  border-radius:0 8px 8px 0;
  border-left:2px solid var(--alerta);background:var(--elev-2);color:var(--txt-2);
}

.rodape{margin:0;color:var(--txt-3);font-size:12px;text-align:center}

/* ---------- responsivo ---------- */
@media (max-width:480px){
  body{justify-content:flex-start;padding-top:28px}
  .cartao-acesso{
    padding:20px 17px 22px;
    border-radius:var(--raio);
  }
  h1{font-size:20px}
  .campo-codigo{font-size:24px;letter-spacing:.28em;text-indent:.28em}
}
@media (max-height:560px){
  body{justify-content:flex-start}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}