/*
 * A mesma língua visual do recebimento: quem troca de aplicativo no meio do
 * turno não deveria ter de reaprender onde as coisas ficam.
 */
:root{
  --papel:#0e1412;
  --carta:#161f1d;
  --tinta:#e8efec;
  --suave:#8fa39d;
  --linha:#25332f;
  --acento:#35c4a8;
  --ok:#2fbf71;
  --aviso:#d9a441;
  --erro:#e05c45;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --papel:#f1f4f3;--carta:#fff;--tinta:#101816;--suave:#5c6b67;--linha:#d2dcd9;
    --acento:#0d6f63;--ok:#137a45;--aviso:#8a6512;--erro:#a8331f;
  }
}

/* `hidden` tem que vencer o `display` das classes.
   Sem isto, `.porta{display:grid}` ganha da regra padrão `[hidden]{display:none}`
   — que vem do navegador e por isso perde para qualquer classe — e a tela de
   login continua por cima depois de alguém entrar. */
[hidden]{display:none !important}

*{box-sizing:border-box}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font:400 15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  padding-bottom:env(safe-area-inset-bottom,0);
}
h1{font-size:21px;margin:0}
h2{font-size:15px;margin:0}

/* ---------- a porta ---------- */
.porta{
  position:fixed;inset:0;background:var(--papel);
  display:grid;place-items:center;padding:24px;z-index:10;
}
.carta-porta{
  width:100%;max-width:330px;background:var(--carta);border:1px solid var(--linha);
  border-radius:14px;padding:26px 22px;display:flex;flex-direction:column;gap:10px;
}
.carta-porta label{
  font:600 10.5px/1 inherit;letter-spacing:.14em;text-transform:uppercase;color:var(--suave);
}

/* ---------- abas ---------- */
.abas{
  position:sticky;top:0;z-index:5;display:flex;gap:2px;overflow-x:auto;
  background:var(--papel);border-bottom:1px solid var(--linha);
  padding:6px 8px;padding-top:calc(6px + env(safe-area-inset-top,0));
}
.aba{
  display:flex;align-items:center;gap:7px;white-space:nowrap;
  border:0;background:none;color:var(--suave);cursor:pointer;
  font:600 13.5px/1 inherit;padding:10px 13px;border-radius:9px;
}
.aba.ativa{background:var(--carta);color:var(--tinta)}
.aba.fraca{margin-left:auto;opacity:.75}
.aba-icone{font-size:15px}
.selo{
  background:var(--aviso);color:var(--papel);border-radius:999px;
  font:700 11px/1 ui-monospace,monospace;padding:3px 7px;
}

main{max-width:760px;margin:0 auto;padding:18px 16px 60px}
.topo{margin-bottom:16px}
.trilha{
  margin:0 0 4px;font:600 10.5px/1 inherit;letter-spacing:.16em;
  text-transform:uppercase;color:var(--acento);
}
.sub{margin:6px 0 0;font-size:13.5px;color:var(--suave)}

/* ---------- campos ---------- */
.passo{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.passo label{
  font:600 10.5px/1 inherit;letter-spacing:.14em;text-transform:uppercase;color:var(--suave);
}
input,select,button{font:inherit;color:inherit}
input[type="text"],input[type="password"],input[type="search"],input[type="number"],select{
  width:100%;padding:13px 14px;border-radius:10px;
  border:1px solid var(--linha);background:var(--carta);
}
input:focus-visible,select:focus-visible,button:focus-visible{
  outline:2px solid var(--acento);outline-offset:2px;
}
.filtro{max-width:240px;padding:9px 12px;font-size:13.5px}

button{
  border:1px solid var(--linha);background:var(--carta);border-radius:10px;
  padding:12px 16px;cursor:pointer;font-weight:600;
}
button.acao{border-color:var(--acento);color:var(--acento)}
button.acao:hover:not(:disabled){background:var(--acento);color:var(--papel)}
button:disabled{opacity:.45;cursor:default}
button.link{
  border:0;background:none;color:var(--acento);padding:2px 0;
  font-weight:500;font-size:13px;text-decoration:underline;text-underline-offset:3px;
}
.carta-porta button{border-color:var(--acento);background:var(--acento);color:var(--papel)}

/* ---------- o painel de reposição ---------- */
.painel{
  margin:14px 0 4px;padding:16px;border-radius:12px;
  background:var(--carta);border:1px solid var(--linha);border-left:4px solid var(--acento);
}
.painel > .link{float:right;margin:-4px 0 0}
/* A VARIAÇÃO EM DESTAQUE: é o que distingue uma caixa da outra. O nome longo
   é igual em todas e vai pequeno, embaixo. */
.variacao{
  margin:0;font:700 22px/1.15 ui-monospace,monospace;letter-spacing:.02em;
  overflow-wrap:anywhere;
}
.nome-longo{margin:5px 0 0;font-size:12px;line-height:1.4;color:var(--suave);overflow-wrap:anywhere}
.resta{margin:11px 0 0;font-size:15px}
.resta b{font:700 20px/1 ui-monospace,monospace;color:var(--acento)}
.campos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.campos label{display:flex;flex-direction:column;gap:5px}
.campos label span{
  font:600 10.5px/1 inherit;letter-spacing:.13em;text-transform:uppercase;color:var(--suave);
}
.total{margin:12px 0 10px;font-size:15px}
.total b{font:700 22px/1 ui-monospace,monospace;color:var(--acento)}
.total b.erro{color:var(--erro)}
#mover{width:100%;padding:14px}

/* ---------- a lista ---------- */
.dobra-titulo{
  display:flex;gap:12px;align-items:center;justify-content:space-between;
  margin:26px 0 4px;flex-wrap:wrap;
}
.lista{list-style:none;margin:0;padding:0}
.item{
  display:grid;gap:5px 14px;align-items:center;grid-template-columns:1fr auto auto;
  padding:13px 0;border-bottom:1px solid var(--linha);
}
.item .oque strong{display:block;font:700 15px/1.2 ui-monospace,monospace}
.item .oque span{font-size:12px;color:var(--suave)}
.item .num{
  text-align:right;font:700 17px/1.2 ui-monospace,monospace;font-variant-numeric:tabular-nums;
}
.item .num small{
  display:block;font:400 10.5px/1.3 inherit;letter-spacing:.08em;
  text-transform:uppercase;color:var(--suave);margin-top:3px;
}
.item .num.pouco{color:var(--aviso)}
.item .num.zero{color:var(--erro)}
.item .aviso-linha{grid-column:1 / -1;font-size:12px;color:var(--aviso)}
.item .aviso-linha b{color:var(--tinta)}
.item button{grid-column:1 / -1;justify-self:start;margin-top:6px;font-size:12.5px;padding:8px 12px}

/* ---------- recados ---------- */
.recado{
  margin:12px 0 0;padding:11px 13px;border-radius:9px;font-size:13.5px;line-height:1.45;
  background:var(--carta);border-left:3px solid var(--linha);
}
.recado.ok{border-left-color:var(--ok)}
.recado.aviso{border-left-color:var(--aviso)}
.recado.erro{border-left-color:var(--erro);color:var(--erro)}
.vazio{color:var(--suave);font-style:italic;padding:22px 0}
.rodape-nota{margin:14px 0 0;font-size:11.5px;color:var(--suave)}

@media (max-width:560px){
  .campos{grid-template-columns:1fr}
  main{padding:14px 14px 50px}
}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}