/* ===== TOKENS (os da MAQUETE_LOGISTICA.html = config.py: tema "azul" claro e "noite" escuro) ===== */
:root{
  --bg:#F5F6FA;--card:#FFFFFF;--surface:#FBFCFE;--tx:#1E293B;--tx2:#475569;--tx3:#5F6E82;
  --bd:#E2E8F0;--bd-strong:#8391A7;--ac:#2563EB;--ac-solid:#2563EB;--on-ac:#FFFFFF;--ac-bg:#DBEAFE;
  --gr:#16A34A;--gr-solid:#15803D;--gr-bg:#DCFCE7;--wait:#A16207;--ok-tx:#15803D;--warn-bg:#FEF3C7;--or:#B45309;
  --rd:#DC2626;--err-bg:#FEE2E2;--info:#2563EB;
  --shadow:0 1px 2px rgba(15,23,42,.06);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0F172A;--card:#1E293B;--surface:#243349;--tx:#F1F5F9;--tx2:#B4C0D3;--tx3:#94A3B8;
    --bd:#334155;--bd-strong:#6B7C93;--ac:#60A5FA;--ac-solid:#2563EB;--on-ac:#FFFFFF;--ac-bg:#1E3A5F;
    --gr:#4ADE80;--gr-solid:#15803D;--gr-bg:#14532D;--wait:#FBBF24;--ok-tx:#4ADE80;--warn-bg:#422006;--or:#FB923C;
    --rd:#F87171;--err-bg:#450A0A;--info:#60A5FA;
    --shadow:none;color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0F172A;--card:#1E293B;--surface:#243349;--tx:#F1F5F9;--tx2:#B4C0D3;--tx3:#94A3B8;
  --bd:#334155;--bd-strong:#6B7C93;--ac:#60A5FA;--ac-solid:#2563EB;--on-ac:#FFFFFF;--ac-bg:#1E3A5F;
  --gr:#4ADE80;--gr-solid:#15803D;--gr-bg:#14532D;--wait:#FBBF24;--ok-tx:#4ADE80;--warn-bg:#422006;--or:#FB923C;
  --rd:#F87171;--err-bg:#450A0A;--info:#60A5FA;
  --shadow:none;color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--tx);font-family:"Segoe UI",system-ui,-apple-system,"SF Pro Text",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:15px;line-height:1.4;-webkit-text-size-adjust:100%;overflow-wrap:anywhere}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
a{color:var(--ac)}
.mono{font-family:Consolas,ui-monospace,"SF Mono",Menlo,monospace;font-variant-numeric:tabular-nums}
.muted{color:var(--tx2)} .faint{color:var(--tx3)} .small{font-size:13px} .micro{font-size:12px}
.spacer{flex:1 1 auto}

/* ===== casca: UMA rolagem (a da página); nada rola por dentro ===== */
.topbar{display:flex;align-items:center;gap:10px;min-height:56px;padding:6px 16px;padding-top:max(6px,env(safe-area-inset-top));background:var(--card);border-bottom:1px solid var(--bd)}
.brand{font-weight:700;font-size:18px;white-space:nowrap}
.brand small{display:block;font-weight:500;font-size:12px;color:var(--tx3)}
.brand,#bt-tema{flex:0 0 auto}
/* 375 px: o login longo encurta com "…" em vez de empurrar o topo para fora da tela */
.who{min-height:36px;line-height:34px;border-radius:999px;border:1px solid var(--bd);padding:0 12px;display:block;min-width:0;max-width:45vw;overflow:hidden;text-overflow:ellipsis;font-size:13px;font-weight:600;background:var(--surface);white-space:nowrap}
.offline{background:var(--warn-bg);color:var(--tx);border-bottom:2px solid var(--or);padding:10px 16px;font-weight:600;font-size:14px}
.aviso{background:var(--err-bg);color:var(--tx);border-bottom:2px solid var(--rd);padding:10px 16px;font-size:14px}
.aviso.ok{background:var(--gr-bg);border-bottom-color:var(--gr-solid)}
main{max-width:1100px;margin:0 auto;padding:12px 16px calc(24px + env(safe-area-inset-bottom))}

/* controles: 44 px só aqui */
.btn{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--bd-strong);background:var(--card);color:var(--tx);font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}
.btn.primary{background:var(--ac-solid);color:var(--on-ac);border-color:transparent}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ac)}
.btn.sm{min-width:44px;padding:0 12px;font-size:13px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.seg{display:inline-flex;flex-wrap:wrap;gap:2px;background:var(--surface);border:1px solid var(--bd);border-radius:22px;padding:3px}
.seg button{min-height:44px;border:0;border-radius:999px;background:transparent;color:var(--tx2);font-weight:600;padding:0 16px;white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--ac-solid);color:var(--on-ac)}
input.fld{min-height:44px;border:1px solid var(--bd-strong);border-radius:10px;background:var(--card);padding:0 12px;width:100%}
label.lb{display:block;font-size:12.5px;color:var(--tx2);font-weight:600;margin:12px 0 4px}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

/* ===== entrar ===== */
.painel{max-width:440px;margin:8px auto;display:grid;gap:12px}
.form{padding:14px 16px 16px;display:grid}
.form .btn{margin-top:16px;width:100%}
.form .small{margin:0}
.hint{font-size:13px;color:var(--tx2);background:var(--surface);border:1px dashed var(--bd-strong);border-radius:10px;padding:10px 12px;margin:14px 0 0}

/* ===== app ===== */
.barra{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:12px}
.savest{font-size:12px;color:var(--tx3);white-space:nowrap}
.savest.err{color:var(--rd)}
.rodape{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:24px;padding-top:12px;border-top:1px solid var(--bd)}
.card{background:var(--card);border:1px solid var(--bd);border-radius:12px;box-shadow:var(--shadow)}
.sec{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tx2);margin:20px 0 8px;display:flex;gap:8px;align-items:center}
.sec .n{font-weight:600;letter-spacing:0;text-transform:none;color:var(--tx3)}
.vazio{padding:14px 12px;font-size:14px;color:var(--tx2)}
.mt{margin-top:12px}

/* resumo "como estamos" */
.resumo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.resumo .r{padding:10px 12px}
.resumo .r b{display:block;font-size:18px}
.resumo .r span{font-size:12.5px;color:var(--tx2)}
.resumo .r.venc{background:var(--warn-bg);border-color:transparent}

/* filtros (quebram linha: sem rolagem de lado) */
.filtros{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.filtros button{min-height:44px;border-radius:999px;border:1px solid var(--bd);background:var(--surface);padding:0 14px;display:inline-flex;gap:8px;align-items:center;font-weight:600;color:var(--tx2)}
.filtros button[aria-pressed="true"]{background:var(--ac-bg);color:var(--ac);border-color:transparent}
.filtros .n{font-weight:700;opacity:.85}

/* listas */
.lista{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.item{display:block;width:100%;text-align:left;padding:12px;background:var(--card);border:1px solid var(--bd);border-radius:12px;box-shadow:var(--shadow);color:var(--tx);text-decoration:none}
a.item:hover{border-color:var(--bd-strong)}
.item .t{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-weight:700}
.item .t .val{margin-left:auto}
.item .sub{font-size:13px;color:var(--tx2);margin-top:2px}
.item .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:600;background:var(--surface);color:var(--tx2);border:1px solid var(--bd);white-space:nowrap}
.chip.warn{background:var(--warn-bg);color:var(--tx);border-color:transparent}
.chip.err{background:var(--err-bg);color:var(--tx);border-color:transparent}
.chip.ok{background:var(--gr-bg);color:var(--tx);border-color:transparent}
.chip.info{background:var(--ac-bg);color:var(--ac);border-color:transparent}
/* sem nowrap: "último dia … · entregue em …" mede 278 px e em 320 px o cartão tem 262; quebra só quando não cabe */
.pz{font-size:12.5px;font-weight:600}
.pz.venc{color:var(--or)} .pz.perto{color:var(--wait)} .pz.ok{color:var(--tx2)} .pz.sem{color:var(--tx3);font-weight:500}

/* ficha da NE (painel na própria página, nunca popup) */
.ficha{padding:14px 16px}
.ficha h2{margin:4px 0 2px;font-size:20px;line-height:1.2}
.ficha .org{font-size:14px;color:var(--tx2)}
.dl{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:6px 12px;margin:12px 0 0;font-size:14px}
.dl dt{color:var(--tx2)}
.dl dd{margin:0;font-weight:600}
.acoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.obs{white-space:pre-wrap;font-size:13.5px;color:var(--tx2);background:var(--surface);border-radius:10px;padding:10px 12px;margin:0}

/* checklist (leitura) */
.ck{list-style:none;margin:0;padding:0}
.ck li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:8px;padding:10px 0;border-bottom:1px solid var(--bd);font-size:14.5px}
.ck li:last-child{border-bottom:0}
.ck .m{width:26px;height:26px;border-radius:8px;border:2px solid var(--bd-strong);display:grid;place-items:center;font-size:14px;font-weight:700;line-height:1}
.ck li.feito .m{background:var(--gr-solid);border-color:var(--gr-solid);color:#FFFFFF}
.ck li.falta .m{border-color:var(--rd);color:var(--rd)}
.ck li.aberto .m{border-style:dashed;border-color:var(--wait);color:var(--wait)}
.ck li.dispensado .m{border-color:var(--bd);color:var(--tx2)}
.ck .by{display:block;font-size:12.5px;color:var(--tx2);margin-top:2px}
.card.pad{padding:4px 14px}

/* tablet */
@media (min-width:768px){
  .resumo{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lista{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ficha{padding:18px 22px}
  .dl{grid-template-columns:max-content minmax(0,1fr)}
}
@media (min-width:1100px){
  .lista{grid-template-columns:repeat(3,minmax(0,1fr))}
}