/* Romaneio de saída.
   Tela de galpão: alvo grande, contraste alto, nada decorativo disputando
   atenção com o que precisa ser lido de longe. */

: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{
    --papel:#f1f4f3;--carta:#fff;--tinta:#101816;--suave:#5c6b67;--linha:#d2dcd9;
    --acento:#0d6f63;--ok:#137a45;--aviso:#8a6512;--erro:#a8331f;
  }
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font:400 16px/1.5 system-ui,"Segoe UI",sans-serif;
  padding:0 16px;
}
main{max-width:1000px;margin:0 auto;padding-block:20px 60px}

/* ---------- porta ---------- */

/* `hidden` tem que vencer o `display` das classes.
   Sem isto, `.porta{display:grid}` ganha da regra padrão `[hidden]{display:none}`
   do navegador — o login funcionava e a porta continuava por cima da tela,
   cobrindo tudo com `position:fixed; inset:0`. Foi o que aconteceu no primeiro
   acesso de verdade, em 15/09/2026. */
[hidden]{display:none !important}

.porta{
  position:fixed;inset:0;background:var(--papel);
  display:grid;place-items:center;padding:16px;z-index:10;
}
.cartao-pin{
  width:100%;max-width:340px;background:var(--carta);
  border:1px solid var(--linha);border-radius:10px;padding:26px;
  display:flex;flex-direction:column;gap:6px;
}
.cartao-pin h1{margin:0 0 14px;font-size:21px;letter-spacing:-.01em}
.cartao-pin label{font-size:12.5px;color:var(--suave);margin-top:8px}
.cartao-pin input{
  padding:12px;font:inherit;border:1px solid var(--linha);border-radius:7px;
  background:var(--papel);color:inherit;
}
.cartao-pin button{
  margin-top:18px;padding:13px;border:0;border-radius:7px;
  background:var(--acento);color:var(--papel);font:inherit;font-weight:700;cursor:pointer;
}

/* ---------- topo ---------- */
.topo{
  display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;
  justify-content:space-between;border-bottom:1px solid var(--linha);padding-bottom:14px;
}
.eyebrow{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--acento);font-weight:700;
}
.topo h1{margin:4px 0 0;font-size:24px;letter-spacing:-.02em}
.rotulo-mini{display:block;font-size:11px;color:var(--suave);margin-bottom:4px}
select{
  padding:9px 10px;font:inherit;font-size:14px;border:1px solid var(--linha);
  border-radius:7px;background:var(--carta);color:inherit;
}

/* ---------- bipe ---------- */
.bipe{margin-top:22px}
.bipe label{display:block;font-size:13px;color:var(--suave);margin-bottom:7px}
#codigo{
  width:100%;padding:20px 18px;font:700 26px/1 ui-monospace,"JetBrains Mono",monospace;
  letter-spacing:.02em;border:2px solid var(--acento);border-radius:10px;
  background:var(--carta);color:inherit;
}
#codigo:focus{outline:3px solid var(--acento);outline-offset:2px}
.recado{
  margin:10px 0 0;padding:12px 14px;border-radius:8px;font-weight:600;font-size:15px;
  border-left:4px solid var(--suave);background:var(--carta);
}
.recado.ok{border-left-color:var(--ok);color:var(--ok)}
.recado.aviso{border-left-color:var(--aviso);color:var(--aviso)}
.recado.erro{border-left-color:var(--erro);color:var(--erro)}

/* ---------- números ---------- */
.numeros{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.num{
  flex:1;min-width:130px;background:var(--carta);border:1px solid var(--linha);
  border-radius:9px;padding:14px 16px;
}
.num span{display:block;font:700 30px/1 ui-monospace,monospace;font-variant-numeric:tabular-nums}
.num small{display:block;margin-top:5px;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--suave)}
.num:last-child span{font-size:15px;line-height:1.35;font-weight:600}

/* ---------- lista ---------- */
.lista-secao{margin-top:28px}
.lista-topo{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.lista-topo h2{margin:0;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--suave)}
.acoes{display:flex;gap:8px}
button.secundario{
  padding:9px 14px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  border:1px solid var(--acento);border-radius:7px;background:transparent;color:var(--acento);
}
button.secundario[disabled]{border-color:var(--linha);color:var(--suave);cursor:default}
button.link{
  border:0;background:none;color:var(--acento);font:inherit;font-size:12.5px;
  cursor:pointer;text-decoration:underline;padding:0;
}

.lista{list-style:none;margin:12px 0 0;padding:0}
.item{
  display:grid;gap:4px 14px;align-items:baseline;
  grid-template-columns:auto auto auto 1fr auto auto auto;
  padding:11px 0;border-bottom:1px solid var(--linha);font-size:14.5px;
}
.item .hora{font:400 13px/1 ui-monospace,monospace;color:var(--suave)}
.item .nota{font-weight:700;font-variant-numeric:tabular-nums}
.item .conta{
  font-size:11.5px;padding:3px 7px;border-radius:3px;
  background:var(--linha);color:var(--suave);white-space:nowrap;
}
.item .cliente{color:var(--suave);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .itens{font:400 12.5px/1.4 ui-monospace,monospace;color:var(--suave);white-space:nowrap}
.item .pecas{
  font:700 17px/1 ui-monospace,monospace;font-variant-numeric:tabular-nums;
  min-width:2ch;text-align:right;
}
.tirar{
  border:0;background:none;color:var(--suave);font-size:20px;line-height:1;
  cursor:pointer;padding:0 2px;
}
.tirar:hover{color:var(--erro)}
.vazio{color:var(--suave);font-style:italic;margin-top:14px}

.rodape{
  margin-top:34px;padding-top:14px;border-top:1px solid var(--linha);
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;
  color:var(--suave);font-size:12.5px;
}

body.fechado #codigo{border-color:var(--suave);opacity:.55}

@media (max-width:640px){
  .item{grid-template-columns:auto 1fr auto auto;}
  .item .cliente,.item .itens{grid-column:1 / -1;white-space:normal}
}

/* ---------- impressão: é o papel que o motorista assina ---------- */
@media print{
  :root{--papel:#fff;--carta:#fff;--tinta:#000;--suave:#444;--linha:#999;--acento:#000}
  body{padding:0;font-size:11pt}
  .porta,.bipe,.acoes,.rodape,.tirar,#transportadora,.vazio{display:none !important}
  main{max-width:none;padding:0}
  .topo{border-bottom:2px solid #000}
  .numeros{border:1px solid #000;padding:8px;margin:12px 0}
  .num{border:0;padding:0 14px}
  .item{grid-template-columns:auto auto auto 1fr auto auto;page-break-inside:avoid}
  .lista-secao::after{
    content:"Conferido por ______________________________     Data ____/____/______     Assinatura ______________________________";
    display:block;margin-top:34px;padding-top:12px;border-top:1px solid #000;font-size:10pt;
  }
}

/* ---------- configuração: contas do Tiny ---------- */

.topo-dir{display:flex;align-items:flex-end;gap:12px}
.engrenagem{
  border:1px solid var(--linha);background:var(--carta);color:var(--suave);
  font-size:20px;line-height:1;width:40px;height:38px;border-radius:7px;cursor:pointer;
}
.engrenagem:hover{color:var(--acento);border-color:var(--acento)}

.modal{
  position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.62);
  display:grid;place-items:center;padding:16px;overflow-y:auto;
}
.modal-cartao{
  width:100%;max-width:660px;background:var(--carta);
  border:1px solid var(--linha);border-radius:12px;padding:24px;
}
.modal-topo{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.modal-topo h2{margin:0;font-size:19px;letter-spacing:-.01em}
.fechar-x{
  border:0;background:none;color:var(--suave);font-size:26px;line-height:1;cursor:pointer;padding:0 4px;
}
.fechar-x:hover{color:var(--tinta)}
.ajuda{margin:0 0 16px;color:var(--suave);font-size:13px}

.contas{list-style:none;margin:0 0 20px;padding:0}
.conta-item{
  display:grid;gap:4px 14px;align-items:center;
  grid-template-columns:1fr auto auto;
  padding:12px 0;border-bottom:1px solid var(--linha);font-size:14px;
}
.conta-id strong{display:block}
.conta-cnpj{font:400 12px/1.4 ui-monospace,monospace;color:var(--suave)}
.conta-token{font:400 13px/1 ui-monospace,monospace;color:var(--suave)}
.conta-notas{font-size:12.5px;color:var(--suave);white-space:nowrap}
.conta-teste{grid-column:1 / -1;font-size:12px;color:var(--suave)}
.conta-teste.bom{color:var(--ok)}
.conta-teste.ruim{color:var(--erro)}
.conta-acoes{grid-column:1 / -1;display:flex;gap:14px;margin-top:2px}
.link.perigo{color:var(--erro)}

.form-conta{
  display:flex;flex-direction:column;gap:10px;
  border-top:1px solid var(--linha);padding-top:18px;
}
.form-conta .campos{display:flex;gap:10px;flex-wrap:wrap}
.form-conta .campos label{flex:1;min-width:180px}
.form-conta label{display:flex;flex-direction:column;gap:5px}
.form-conta label span{font-size:12.5px;color:var(--suave)}
.form-conta input{
  padding:11px;font:inherit;border:1px solid var(--linha);border-radius:7px;
  background:var(--papel);color:inherit;
}
.form-conta button[type=submit]{
  margin-top:6px;padding:12px;border:0;border-radius:7px;
  background:var(--acento);color:var(--papel);font:inherit;font-weight:700;cursor:pointer;
}
.erro{color:var(--erro);font-size:13px;margin:4px 0 0}

@media print{ .modal,.engrenagem{display:none !important} }