:root{ --tinta:#12212e; --papel:#f6f7f8; --linha:#dfe4e8; --acento:#0b6b53;
       --alerta:#a4471c; --suave:#6b7a86; }
*{box-sizing:border-box}
body{margin:0;background:var(--papel);color:var(--tinta);
     font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
header{background:var(--tinta);color:#fff;padding:14px 20px;display:flex;
       justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
header h1{margin:0;font-size:17px;font-weight:600;letter-spacing:.3px}
header nav{display:flex;flex-wrap:wrap;gap:16px}
header nav a{color:#fff;opacity:.75;text-decoration:none;font-size:13px}
header nav a:hover{opacity:1}
header nav a.sair{opacity:.55}
main{max-width:1000px;margin:0 auto;padding:20px}
h2{font-size:16px;margin:0 0 14px;letter-spacing:.3px}
.caixa{background:#fff;border:1px solid var(--linha);border-radius:8px;padding:18px;margin-bottom:18px}
label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.6px;
      color:var(--suave);margin:0 0 4px}
input[type=text],input[type=password],input[type=date],input[type=number],select,textarea{
      width:100%;padding:10px;font:inherit;border:1px solid var(--linha);
      border-radius:6px;background:#fff}
input[type=file]{font:inherit}
button,.botao{background:var(--acento);color:#fff;border:0;border-radius:6px;
       padding:10px 18px;font:inherit;font-weight:600;cursor:pointer;
       text-decoration:none;display:inline-block}
button.claro,.botao.claro{background:#fff;color:var(--tinta);border:1px solid var(--linha)}
button.perigo{background:var(--alerta)}
button.mini{padding:4px 10px;font-size:13px}
button:hover{filter:brightness(1.08)}
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:16px}
.resumo{display:flex;flex-wrap:wrap;gap:22px}
.resumo div{min-width:100px}
.resumo b{display:block;font-size:22px;font-variant-numeric:tabular-nums}
.resumo span{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--suave)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.6px;
   color:var(--suave);border-bottom:1px solid var(--linha);padding:8px 6px}
td{border-bottom:1px solid var(--linha);padding:10px 6px;vertical-align:top}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.feita{opacity:.55}
a{color:var(--acento)}
.cli{font-weight:600}
.end{font-size:13px;color:#3b4a55}
.fone{font-size:12px;color:var(--suave)}
.tag{display:inline-block;font-size:10px;padding:1px 7px;border-radius:99px;
     background:#e8f1ee;color:var(--acento);vertical-align:1px;margin-left:6px;
     text-transform:uppercase;letter-spacing:.5px}
.tag.d{background:#fdeee6;color:var(--alerta)}
.tag.cinza{background:#eef1f3;color:var(--suave)}
.aviso{border-left:3px solid var(--alerta);background:#fdeee6}
.ok{border-left:3px solid var(--acento);background:#e8f1ee}
.acoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.vazio{color:var(--suave);text-align:center;padding:30px 0}
/* ---------- portal do motorista ---------- */
.parada{background:#fff;border:1px solid var(--linha);border-radius:10px;overflow:hidden}
.parada .topo{background:var(--tinta);color:#fff;padding:12px 18px;font-size:13px;
              letter-spacing:.6px;text-transform:uppercase}
.parada .corpo{padding:18px}
.parada .nome{font-size:20px;font-weight:600;line-height:1.25}
.parada .endereco{font-size:17px;margin:10px 0;line-height:1.4}
.parada .dados{color:var(--suave);font-size:14px}
.mapa{display:inline-block;margin-top:12px}
canvas#assinatura{width:100%;height:190px;border:2px dashed var(--linha);
                  border-radius:8px;background:#fff;touch-action:none}
.escondido{display:none}
.progresso{height:6px;background:var(--linha);border-radius:99px;overflow:hidden;margin:12px 0}
.progresso i{display:block;height:100%;background:var(--acento)}
@media(max-width:640px){
  th.esc,td.esc{display:none}
  main{padding:14px}
  .parada .nome{font-size:19px}
  button,.botao{padding:14px 18px;width:100%;text-align:center}
  .acoes button,.acoes .botao{width:100%}
}
/* mercadoria da nota, no celular do motorista */
.produtos{margin-top:16px;border-top:1px solid var(--linha);padding-top:14px}
.tab-prod{width:100%;font-size:14px}
.tab-prod td{padding:7px 0;border-bottom:1px solid var(--linha);vertical-align:top}
.tab-prod td.q{width:78px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.tab-prod .cod{font-size:11px;color:var(--suave)}
/* painel da rua */
#mapa{height:360px;width:100%}
.linha-topo{display:flex;justify-content:space-between;align-items:flex-start;
            flex-wrap:wrap;gap:10px;margin-bottom:10px}
.proxima{margin-top:12px;padding-top:12px;border-top:1px solid var(--linha)}
.rodape{margin-top:12px;font-size:13px}
@media(max-width:640px){ #mapa{height:260px} }