/* =====================================================================
   Logística ESD — visual (sufixo lg). Mesma linguagem do App de Vendas
   (app-vendas-esd/css/app_vd.css): topo azul da marca em duas linhas com
   o avatar descendo da faixa, cartões brancos com título em caixa alta,
   ladrilhos de número, abas brancas embaixo. Mesmas cores por FUNÇÃO.
   ===================================================================== */
:root{
  --lg-azul:#0b4f9e; --lg-azul2:#1266c6; --lg-claro:#eef3f9;
  --lg-txt:#16202e; --lg-txt2:#5d6b81; --lg-linha:#dde5ef; --lg-fundo:#f5f7fa;
  --lg-sup:#fff; --lg-sup2:#f8fafc; --lg-sup3:#f1f5f9;
  --lg-ok:#16a34a; --lg-ok-tx:#15803d; --lg-ok-bg:#dcfce7; --lg-ok-bd:#bbf7d0;
  --lg-er-tx:#b91c1c; --lg-er-bg:#fee2e2; --lg-er-bd:#fecaca;
  --lg-al-tx:#b45309; --lg-al-bg:#fef3c7; --lg-al-bd:#fde68a;
  --lg-az-bg:#eff6ff; --lg-az-bd:#cfe0f2; --lg-az-tx:#1e40af;
  --lg-sombra:0 1px 3px rgba(16,32,46,.07);
  --lg-topo-bg:#0b4f9e; --lg-topo-tx:#fff;
  --lg-h-topo:76px; --lg-h-abas:62px;
}
/* o tema vem de js/tema_lg.js (Automático segue o celular) */
:root[data-tema="escuro"]{
  --lg-azul:#5b9bd8; --lg-azul2:#7bb0e4; --lg-claro:#1e3350;
  --lg-txt:#e6ecf4; --lg-txt2:#aab8ca; --lg-linha:#2a3644; --lg-fundo:#0f1722;
  --lg-sup:#16202e; --lg-sup2:#1c2836; --lg-sup3:#22303f;
  --lg-ok:#4ade80; --lg-ok-tx:#5ee08a; --lg-ok-bg:#12331f; --lg-ok-bd:#1d5233;
  --lg-er-tx:#ff9090; --lg-er-bg:#3a1618; --lg-er-bd:#5c2226;
  --lg-al-tx:#fcd34d; --lg-al-bg:#3a2a0e; --lg-al-bd:#5c4415;
  --lg-az-bg:#13233a; --lg-az-bd:#24405f; --lg-az-tx:#9cc3ff;
  --lg-sombra:none; --lg-topo-bg:#13233a;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--lg-fundo);color:var(--lg-txt);font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;overflow-x:hidden}
input,select,textarea,button{font-family:inherit;font-size:16px;color:inherit}

/* ---------- topo: duas linhas, avatar descendo da faixa ---------- */
.lg-topo{position:fixed;top:0;left:0;right:0;min-height:var(--lg-h-topo);z-index:20;background:var(--lg-topo-bg);
  color:var(--lg-topo-tx);display:flex;flex-direction:column;justify-content:center;gap:2px;padding:6px 14px;overflow:visible}
.lg-topo .l1,.lg-topo .l2{display:flex;align-items:center;gap:8px;min-width:0}
.lg-topo .tit{font-size:16px;font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg-topo .hora{font-size:12px;opacity:.9;white-space:nowrap;font-variant-numeric:tabular-nums}
.lg-topo .emp{font-size:11px;background:rgba(255,255,255,.18);padding:3px 8px;border-radius:10px;font-weight:700;letter-spacing:.3px;white-space:nowrap}
.lg-topo .av{flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:16px;transform:translateY(12px);position:relative;z-index:2;
  box-shadow:0 0 0 3px var(--lg-topo-bg),0 2px 8px rgba(0,0,0,.28)}
.lg-topo .quem{flex:1;min-width:0;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:2px}
.lg-topo .quem small{font-weight:400;opacity:.85}
.lg-topo .btn-topo{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:#fff;
  display:grid;place-items:center;cursor:pointer}
.lg-topo .btn-topo svg{width:20px;height:20px}
.lg-topo .fila{font-size:11px;background:#f59e0b;color:#111;padding:3px 8px;border-radius:10px;font-weight:800}

.lg-corpo{padding:calc(var(--lg-h-topo) + 22px) 12px calc(var(--lg-h-abas) + 22px);max-width:640px;margin:0 auto}

/* ---------- abas ---------- */
.lg-abas{position:fixed;bottom:0;left:0;right:0;height:var(--lg-h-abas);z-index:20;background:var(--lg-sup);
  border-top:1px solid var(--lg-linha);display:flex;padding-bottom:env(safe-area-inset-bottom)}
.lg-abas button{flex:1 1 0;min-width:0;background:none;border:0;color:var(--lg-txt2);font-size:11px;padding:0 2px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer}
.lg-abas button svg{width:23px;height:23px}
.lg-abas button.ativo{color:var(--lg-azul);font-weight:700}

/* ---------- blocos ---------- */
.lg-card{background:var(--lg-sup);border:1px solid var(--lg-linha);border-radius:12px;padding:14px;margin-bottom:12px;box-shadow:var(--lg-sombra)}
.lg-card h3{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.4px;color:var(--lg-txt2);display:flex;align-items:center;gap:6px}
.lg-card h3 .dir{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:600}
.lg-card.destaque{border:2px solid var(--lg-azul)}
.lg-sub{color:var(--lg-txt2);font-size:13px}
.lg-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:2px 0 4px}
.lg-kpis.k3{grid-template-columns:repeat(3,1fr)}.lg-kpis.k4{grid-template-columns:repeat(4,1fr)}
.lg-kpi{background:var(--lg-sup2);border:1px solid var(--lg-linha);border-radius:10px;padding:9px 6px;text-align:center}
.lg-kpi small{display:block;color:var(--lg-txt2);font-size:10.5px;text-transform:uppercase;letter-spacing:.4px}
.lg-kpi b{display:block;font-size:19px;margin-top:2px;font-variant-numeric:tabular-nums}
.lg-kpi.ok b{color:var(--lg-ok-tx)}.lg-kpi.al b{color:var(--lg-al-tx)}
.lg-dia{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.lg-dia b{font-size:17px}
/* seletor Hoje / Amanhã (igual ao Planejamento do App de Vendas) */
.lg-seg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.lg-seg button{background:var(--lg-sup);border:1px solid var(--lg-linha);border-radius:10px;padding:9px 6px;cursor:pointer;line-height:1.2}
.lg-seg button b{display:block;font-size:15px}.lg-seg button small{font-size:12px;color:var(--lg-txt2)}
.lg-seg button.ativo{background:var(--lg-azul);border-color:var(--lg-azul);color:#fff}
.lg-seg button.ativo small{color:#dbeafe}
/* chips de etapa */
.lg-chip{display:inline-flex;align-items:center;gap:4px;border-radius:20px;padding:3px 10px;font-size:12px;font-weight:700;white-space:nowrap;
  background:var(--lg-sup3);color:var(--lg-txt2);border:1px solid var(--lg-linha)}
.lg-chip.az{background:var(--lg-az-bg);color:var(--lg-az-tx);border-color:var(--lg-az-bd)}
.lg-chip.ok{background:var(--lg-ok-bg);color:var(--lg-ok-tx);border-color:var(--lg-ok-bd)}
.lg-chip.al{background:var(--lg-al-bg);color:var(--lg-al-tx);border-color:var(--lg-al-bd)}
.lg-chip.er{background:var(--lg-er-bg);color:var(--lg-er-tx);border-color:var(--lg-er-bd)}
/* botões */
.lg-btn{text-decoration:none;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;border-radius:10px;border:0;
  background:var(--lg-azul);color:#fff;font-weight:700;font-size:16px;margin-top:8px;cursor:pointer}
.lg-btn svg{width:20px;height:20px}
.lg-btn.sec{background:var(--lg-sup);color:var(--lg-azul);border:1px solid var(--lg-azul)}
.lg-btn.ok{background:var(--lg-ok)}.lg-btn.peq{min-height:42px;font-size:14px}
.lg-btn:disabled{opacity:.5}
.lg-campo{width:100%;min-height:48px;border:1px solid var(--lg-linha);border-radius:10px;padding:0 12px;background:var(--lg-sup);color:var(--lg-txt)}
.lg-campo:focus{outline:2px solid var(--lg-azul2);border-color:var(--lg-azul2)}
.lg-busca{display:flex;gap:8px}
.lg-busca .lg-btn{width:auto;margin:0;padding:0 18px;min-height:48px}
/* listas com › (como o "Mais" do App de Vendas) */
.lg-lista{display:flex;flex-direction:column;gap:8px}
.lg-item{display:flex;align-items:center;gap:12px;background:var(--lg-sup);border:1px solid var(--lg-linha);border-radius:12px;padding:12px 14px;
  cursor:pointer;color:inherit;text-decoration:none;width:100%;text-align:left}
.lg-item .ic{width:34px;height:34px;border-radius:10px;background:var(--lg-claro);color:var(--lg-azul);display:grid;place-items:center;flex:0 0 auto}
.lg-item .ic svg{width:19px;height:19px}
.lg-item .meio{flex:1;min-width:0}.lg-item .meio b{display:block;font-size:15px;font-weight:600}
.lg-item .meio small{display:block;color:var(--lg-txt2);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg-item .seta{color:var(--lg-txt2);font-size:20px}
/* leitor */
.lg-leitor{position:relative;border-radius:12px;overflow:hidden;background:#0b1220;aspect-ratio:4/3;max-height:46vh;margin:0 auto 10px}
.lg-leitor video{width:100%;height:100%;object-fit:cover;display:block}
.lg-leitor .mira{position:absolute;left:50%;top:50%;width:58%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:18px;
  box-shadow:0 0 0 999px rgba(0,0,0,.45);outline:3px solid rgba(255,255,255,.9)}
.lg-leitor .msg{position:absolute;left:10px;right:10px;bottom:10px;text-align:center;color:#fff;font-weight:600;font-size:13px;
  background:rgba(0,0,0,.45);border-radius:8px;padding:6px}
.lg-leitor.sem{aspect-ratio:auto;height:96px;display:grid;place-items:center}
.lg-leitor.sem .mira{display:none}.lg-leitor.sem .msg{position:static;background:none;padding:0 16px}
.lg-leitor .msg{z-index:2}
/* carga */
.lg-carga .reg{font-size:12px;font-weight:700;color:var(--lg-azul);text-transform:uppercase;letter-spacing:.4px}
.lg-carga .cod{font-size:22px;font-weight:800;letter-spacing:.3px;margin:1px 0 2px}
.lg-carga .plan{font-size:13px;color:var(--lg-txt2);margin-top:8px}
.lg-carga .plan b{color:var(--lg-txt)}
.lg-hist{margin:0;padding:0 0 0 14px;border-left:2px solid var(--lg-linha)}
.lg-hist li{list-style:none;position:relative;padding:0 0 10px 6px;font-size:13.5px}
.lg-hist li::before{content:'';position:absolute;left:-21px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--lg-azul);
  box-shadow:0 0 0 3px var(--lg-sup)}
.lg-hist li small{display:block;color:var(--lg-txt2);font-size:12px}
details.lg-mais summary{list-style:none;cursor:pointer;color:var(--lg-txt2);font-size:13px;padding:10px 2px;text-align:center}
details.lg-mais summary::-webkit-details-marker{display:none}
/* retorno */
.lg-ret{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.lg-ret button{border:1px solid var(--lg-linha);background:var(--lg-sup);border-radius:10px;min-height:40px;font-size:12.5px;font-weight:700;cursor:pointer;color:var(--lg-txt2)}
.lg-ret button.on{border-color:var(--lg-azul);background:var(--lg-az-bg);color:var(--lg-az-tx)}
.lg-ret button.on[data-r="ENTREGUE"]{border-color:var(--lg-ok);background:var(--lg-ok-bg);color:var(--lg-ok-tx)}
.lg-ret button.on[data-r="FALTOU_PRODUTO"]{border-color:var(--lg-er-tx);background:var(--lg-er-bg);color:var(--lg-er-tx)}
/* freteiro */
.lg-valor{font-size:32px;font-weight:800;color:var(--lg-ok-tx);line-height:1.1;font-variant-numeric:tabular-nums}
.lg-mapa{position:relative;z-index:0;isolation:isolate;height:240px;border-radius:10px;overflow:hidden;border:1px solid var(--lg-linha);margin:8px 0 4px}
.lg-parada{cursor:pointer;display:grid;grid-template-columns:48px 28px 1fr;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--lg-linha)}
.lg-parada:last-child{border-bottom:0}
.lg-parada .h{font-weight:800;text-align:right;font-size:13.5px;font-variant-numeric:tabular-nums}
.lg-parada .h small{display:block;font-weight:400;font-size:10.5px;color:var(--lg-txt2)}
.lg-parada .n{width:28px;height:28px;border-radius:50%;background:#94a3b8;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800}
.lg-parada .n.ok{background:var(--lg-ok)}
.lg-parada b{font-size:14px;font-weight:600}.lg-parada small{display:block;color:var(--lg-txt2);font-size:12px}
.lg-pino{width:26px;height:26px;border-radius:50%;background:#94a3b8;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800;
  border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.lg-pino.ok{background:#16a34a}
/* 07/10: parada ainda nao entregue = cinza; entregue = verde */
.lg-pino.cd{border-radius:7px;width:34px;background:#111}
.lg-aviso{background:var(--lg-az-bg);border:1px solid var(--lg-az-bd);color:var(--lg-az-tx);border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:12px}
.lg-vazio{text-align:center;color:var(--lg-txt2);padding:26px 10px}
/* aviso flutuante */
.lg-toast{position:fixed;left:12px;right:12px;bottom:calc(var(--lg-h-abas) + 12px);z-index:40;background:#16202e;color:#fff;border-radius:12px;
  padding:12px 14px;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.3);transform:translateY(20px);opacity:0;pointer-events:none;
  transition:transform .2s,opacity .2s;max-width:616px;margin:0 auto}
.lg-toast.on{transform:none;opacity:1}.lg-toast.erro{background:#b91c1c}.lg-toast.ok{background:#15803d}

/* avatar com foto */
.lg-topo .av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.lg-topo .av{overflow:hidden}
/* endereco da parada (aba Freteiro) */
.lg-end{display:flex;gap:5px;align-items:flex-start;font-size:12.5px;color:var(--lg-txt);margin:2px 0 1px;line-height:1.3}
.lg-end svg{width:14px;height:14px;flex:0 0 auto;margin-top:1px;color:var(--lg-azul)}
.lg-end i{font-style:normal;color:var(--lg-txt2);font-size:12px}
/* bolinha e horario CENTRALIZADOS na altura da parada (07/10) */
.lg-parada{align-items:center}
/* indicativo da carga (Pet/Purina, Termo, Seca) -- cores de logistica.classe_carga */
.lg-classes{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.lg-classe{display:inline-flex;align-items:center;gap:4px;border-radius:20px;padding:3px 10px;font-size:12px;font-weight:700;
  border:1.5px solid var(--cor);color:var(--cor);background:transparent;white-space:nowrap}
.lg-classe.pred{background:var(--cor);color:#fff}
.lg-classe small{font-weight:600;opacity:.85}
:root[data-tema="escuro"] .lg-classe:not(.pred){filter:brightness(1.5)}
.lg-cg{padding:9px 0;border-bottom:1px solid var(--lg-linha)}.lg-cg:last-child{border-bottom:0}
.lg-cg .lg-classes{margin-top:5px}
/* checklist de volumes no carregamento */
.lg-vols{display:grid;gap:6px}
.lg-vol{display:flex;align-items:center;gap:8px;border:1.5px dashed var(--lg-linha);border-radius:10px;padding:9px 10px;font-weight:600;font-size:14px}
.lg-vol .ck{width:22px;height:22px;border-radius:50%;border:2px solid var(--lg-linha);display:grid;place-items:center;font-size:13px;color:#fff;flex:0 0 auto}
.lg-vol.ok{border-style:solid;border-color:var(--lg-ok);background:var(--lg-ok-bg)}
.lg-vol.ok .ck{background:var(--lg-ok);border-color:var(--lg-ok)}
.lg-vol.fria:not(.ok){border-color:#7aa7d8}
/* icones do que a entrega leva */
/* nome do cliente + icones na MESMA linha, icones a direita (nunca quebram) */
.lg-nome{display:flex;align-items:flex-start;gap:6px}
.lg-nome b{flex:1;min-width:0}
.lg-ics{display:inline-flex;gap:3px;flex:0 0 auto;font-size:13px;line-height:1}
.lg-ics span{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--lg-sup3);border:1px solid var(--lg-linha)}
/* folha de baixo: detalhe da entrega (GPS + o que foi faturado) */
.lg-folha-fundo{position:fixed;inset:0;z-index:1200;background:rgba(8,16,28,0);transition:background .2s}
.lg-folha-fundo.on{background:rgba(8,16,28,.45)}
.lg-folha{position:absolute;left:0;right:0;bottom:0;max-height:88vh;overflow-y:auto;background:var(--lg-fundo);border-radius:18px 18px 0 0;
  padding:8px 14px calc(18px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .22s ease;max-width:640px;margin:0 auto;
  box-shadow:0 -10px 30px rgba(0,0,0,.25)}
.lg-folha-fundo.on .lg-folha{transform:none}
.lg-folha .pega{width:42px;height:5px;border-radius:3px;background:var(--lg-linha);margin:2px auto 10px}
.lg-folha-cab{display:flex;gap:10px;align-items:flex-start;background:var(--lg-sup);border:1px solid var(--lg-linha);border-radius:12px;padding:12px;margin-bottom:10px}
.lg-folha-x{flex:0 0 auto;width:32px;height:32px;border-radius:50%;border:0;background:var(--lg-sup3);color:var(--lg-txt2);font-size:20px;cursor:pointer}
.lg-nf{background:var(--lg-sup);border:1px solid var(--lg-linha);border-radius:12px;margin-bottom:10px;overflow:hidden}
.lg-nf-cab{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:9px 12px;background:var(--lg-sup2);border-bottom:1px solid var(--lg-linha)}
.lg-nf-cab span{font-size:12px;color:var(--lg-txt2)}
.lg-item-nf{display:grid;grid-template-columns:26px 1fr auto;gap:8px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--lg-linha)}
.lg-item-nf:last-child{border-bottom:0}
.lg-item-nf .ic{font-size:16px;text-align:center}
.lg-item-nf .meio{min-width:0}.lg-item-nf .meio b{display:block;font-size:13.5px;font-weight:600;line-height:1.25}
.lg-item-nf .meio small{color:var(--lg-txt2);font-size:11.5px}
.lg-item-nf .qt{text-align:right;white-space:nowrap}.lg-item-nf .qt b{display:block;font-size:15px}
.lg-item-nf .qt small{color:var(--lg-txt2);font-size:11px}
/* fluxo pelo QR (08/10) */
.lg-trava{background:var(--lg-er-bg);border:1px solid var(--lg-er-bd);color:var(--lg-er-tx);border-radius:12px;padding:12px 14px;font-weight:700;font-size:14px}
.lg-etapa-ok{background:var(--lg-ok-bg);border:1px solid var(--lg-ok-bd);color:var(--lg-ok-tx);border-radius:10px;padding:8px 12px;font-weight:700;font-size:13px;margin-bottom:10px}
.lg-seg button.ativo.ok{background:var(--lg-ok);border-color:var(--lg-ok)}
.lg-seg button.ativo.nao{background:var(--lg-er-tx);border-color:var(--lg-er-tx)}
.lg-nf-sel{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.lg-nf-sel input{width:22px;height:22px;margin-top:2px;flex:0 0 auto;accent-color:var(--lg-azul)}
.lg-nf-sel small{display:block;color:var(--lg-txt2);font-size:12px;margin-top:2px}
.lg-conf{margin-top:10px;border-top:1px solid var(--lg-linha)}
.lg-conf-it{display:grid;grid-template-columns:30px 1fr 64px 18px;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--lg-linha)}
.lg-conf-it:last-child{border-bottom:0}
.lg-conf-it .ck{width:28px;height:28px;border-radius:50%;border:2px solid var(--lg-linha);background:var(--lg-sup);color:#fff;font-weight:800;cursor:pointer}
.lg-conf-it.ok .ck{background:var(--lg-ok);border-color:var(--lg-ok)}
.lg-conf-it .meio{min-width:0}.lg-conf-it .meio b{display:block;font-size:13px;font-weight:600;line-height:1.25}
.lg-conf-it .meio small{color:var(--lg-txt2);font-size:11.5px}
.lg-conf-it input{width:64px;min-height:38px;border:1px solid var(--lg-linha);border-radius:8px;text-align:center;background:var(--lg-sup);color:var(--lg-txt)}
.lg-conf-it .un{font-size:11px;color:var(--lg-txt2)}

/* 08/10: registro na entrega, canhotos, outras acoes */
.lg-vis{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px}
.lg-vis .lg-btn{margin-top:0;min-height:46px;font-size:14px}
.lg-btn.sec.nao{color:var(--lg-er-tx);border-color:var(--lg-er-bd)}
#visNE{margin-top:10px}
.lg-parada .n.nao{background:#dc2626;color:#fff}
.lg-parada .n.ch{background:#f59e0b;color:#111}
.lg-canhoto{display:flex;align-items:center;gap:10px;cursor:pointer;padding:11px 12px}
.lg-canhoto input{width:22px;height:22px;flex:0 0 auto;accent-color:var(--lg-ok)}
.lg-canhoto .ck{width:22px;text-align:center;font-weight:800;color:var(--lg-ok-tx);flex:0 0 auto}
.lg-canhoto .meio{flex:1;min-width:0}
.lg-canhoto .meio small{display:block;color:var(--lg-txt2);font-size:12px;margin-top:2px}
.lg-canhoto .lg-chip{flex:0 0 auto}

/* =====================================================================
   CHAT (08/10/2026) -- o mesmo da intranet e do App de Vendas. Estilos
   adaptados de app-vendas-esd/css/app_vd.css (.vd-chat-*) para os
   tokens --lg-*; o tema escuro vem sozinho pelos tokens.
   ===================================================================== */
.lg-abas button{position:relative}
.lg-abas-bolha{position:absolute;top:6px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:#dc2626;color:#fff;font-size:10.5px;font-weight:800;font-style:normal;line-height:18px;text-align:center}
.lg-chat{display:flex;flex-direction:column;min-height:0;background:var(--lg-sup);border:1px solid var(--lg-linha);
  border-radius:12px;overflow:hidden;box-shadow:var(--lg-sombra)}
.lg-chat-barra{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--lg-linha);background:var(--lg-sup)}
.lg-chat-barra b{font-size:15px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-chat-voltar{border:0;background:transparent;color:var(--lg-azul);font-size:28px;line-height:1;width:34px;height:34px;padding:0;cursor:pointer}
.lg-chat-novo{border:1px solid var(--lg-azul);background:var(--lg-sup);color:var(--lg-azul);border-radius:16px;padding:6px 12px;
  font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.lg-chat-novo.com-ic{display:inline-flex;align-items:center;gap:5px}
.lg-chat-novo:disabled{opacity:.45;cursor:default}
.lg-chat-busca{padding:10px 12px;background:var(--lg-sup);border-bottom:1px solid var(--lg-linha)}
.lg-chat-busca input,.lg-chat-grupo-cab input,.lg-chat-busca-m{width:100%;padding:9px 12px;border:1px solid var(--lg-linha);
  border-radius:10px;background:var(--lg-fundo);color:var(--lg-txt)}
.lg-chat-busca-m{margin:0 0 10px;font-size:14px}
.lg-chat-aviso{display:none}
.lg-chat-aviso.vendo{display:block;padding:8px 12px;font-size:13px;background:var(--lg-er-bg);color:var(--lg-er-tx);border-bottom:1px solid var(--lg-er-bd)}
.lg-chat-aviso.vendo.info{background:var(--lg-az-bg);color:var(--lg-az-tx);border-color:var(--lg-az-bd)}
/* lista */
.lg-chat-lista{background:var(--lg-sup)}
.lg-chat-item{width:100%;display:flex;align-items:center;gap:10px;padding:11px 12px;border:0;border-bottom:1px solid var(--lg-linha);
  background:var(--lg-sup);text-align:left;cursor:pointer;color:var(--lg-txt)}
.lg-chat-item:last-child{border-bottom:0}
.lg-chat-item:active{background:var(--lg-claro)}
.lg-chat-item.nao-lida,.lg-chat-item.marcado{background:var(--lg-az-bg)}
.lg-chat-av{flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:var(--lg-claro);color:var(--lg-azul);
  display:grid;place-items:center;font-size:13px;font-weight:700;position:relative;overflow:hidden}
.lg-chat-av.peq{flex-basis:30px;width:30px;height:30px;font-size:11px}
.lg-chat-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lg-chat-item__tx{flex:1;min-width:0;display:block}
.lg-chat-item__tx b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-chat-item__tx small{display:block;color:var(--lg-txt2);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-chat-item.nao-lida .lg-chat-item__tx b,.lg-chat-item.nao-lida .lg-chat-item__tx small{font-weight:700;color:var(--lg-txt)}
.lg-chat-item__pe{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.lg-chat-item__pe em{font-style:normal;color:var(--lg-txt2);font-size:11px}
.lg-chat-bolha{min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--lg-azul);color:#fff;font-size:11px;
  font-weight:700;line-height:19px;text-align:center}
.lg-chat-marca{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:2px solid var(--lg-linha);color:#fff;
  font-size:12px;font-weight:700;line-height:1;flex:0 0 auto}
.lg-chat-item.marcado .lg-chat-marca,.lg-chat-cand.on .lg-chat-marca{background:var(--lg-azul);border-color:var(--lg-azul)}
.lg-chat-grupo-cab{padding:10px 12px;background:var(--lg-sup);border-bottom:1px solid var(--lg-linha)}
.lg-chat-grupo-pe{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.lg-chat-grupo-pe span{font-size:12.5px;color:var(--lg-txt2)}
/* conversa: ocupa o que sobra entre o topo e as abas (o corpo tem 22px em cima e embaixo) */
.lg-chat--aberta{height:calc(100vh - var(--lg-h-topo) - var(--lg-h-abas) - 44px);height:calc(100dvh - var(--lg-h-topo) - var(--lg-h-abas) - 44px)}
.lg-chat-fluxo{flex:1;min-height:0;overflow-y:auto;padding:12px;background:var(--lg-fundo);display:flex;flex-direction:column;gap:6px}
.lg-chat-dia{text-align:center;margin:8px 0 2px}
.lg-chat-dia span{display:inline-block;padding:3px 10px;border-radius:10px;background:var(--lg-az-bg);color:var(--lg-txt2);font-size:11px}
.lg-chat-msg{display:flex;justify-content:flex-start}
.lg-chat-msg.minha{justify-content:flex-end}
.lg-chat-balao{position:relative;max-width:78%;padding:7px 10px 5px;border-radius:12px;background:var(--lg-sup);border:1px solid var(--lg-linha);
  border-bottom-left-radius:4px}
.lg-chat-msg.minha .lg-chat-balao{background:var(--lg-az-bg);border-color:var(--lg-az-bd);border-bottom-left-radius:12px;border-bottom-right-radius:4px}
.lg-chat-balao.apagada{background:var(--lg-sup3);color:var(--lg-txt2);font-size:13px}
.lg-chat-de{display:block;font-size:11.5px;color:var(--lg-azul);margin-bottom:1px}
.lg-chat-corpo{display:block;white-space:pre-wrap;word-break:break-word;font-size:14.5px}
.lg-chat-hora{display:block;text-align:right;font-style:normal;color:var(--lg-txt2);font-size:10.5px;margin-top:2px}
.lg-chat-x{position:absolute;top:-8px;right:-8px;width:26px;height:26px;border-radius:50%;border:1px solid var(--lg-linha);
  background:var(--lg-sup);color:var(--lg-er-tx);font-size:15px;line-height:1;cursor:pointer;padding:0;opacity:.55}
.lg-chat-x:hover,.lg-chat-x:active{opacity:1}
.lg-chat-balao.com-img{padding:5px 5px 4px}
.lg-chat-img{display:block;width:100%;max-width:260px;min-height:120px;border-radius:9px;background:var(--lg-sup3);object-fit:cover;cursor:zoom-in}
.lg-chat-balao.com-img .lg-chat-corpo{padding:5px 6px 0;font-size:13.5px}
.lg-chat-balao.com-img .lg-chat-hora{padding-right:5px}
.lg-chat-img-erro{display:block;padding:16px 10px;text-align:center;color:var(--lg-txt2);font-size:12.5px;background:var(--lg-sup3);border-radius:9px;min-width:150px}
.lg-chat-balao.com-audio{padding:6px 7px 4px}
.lg-chat-audio{display:block;width:230px;max-width:100%;height:36px}
.lg-chat-doc{display:flex;align-items:center;gap:10px;min-width:200px;padding:8px 10px;border:1px solid var(--lg-az-bd);border-radius:10px;
  background:var(--lg-sup);text-decoration:none;color:var(--lg-txt);min-height:52px}
.lg-chat-doc__ic{flex:0 0 auto;color:var(--lg-azul);line-height:0}
.lg-chat-doc__tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.lg-chat-doc__tx b{font-size:13.5px;font-weight:600;line-height:1.3;word-break:break-word}
.lg-chat-doc__tx small{font-size:11.5px;color:var(--lg-txt2)}
/* escrever */
.lg-chat-escrever{position:relative;flex:0 0 auto;display:flex;align-items:flex-end;gap:6px;padding:8px 10px;background:var(--lg-sup);
  border-top:1px solid var(--lg-linha)}
.lg-chat-escrever textarea{flex:1;min-width:0;min-height:44px;max-height:120px;resize:none;padding:9px 12px;border:1px solid var(--lg-linha);
  border-radius:18px;background:var(--lg-fundo);line-height:1.35;color:var(--lg-txt)}
.lg-chat-escrever textarea:focus{outline:2px solid var(--lg-azul2);border-color:var(--lg-azul2)}
.lg-chat-anexo{flex:0 0 32px;width:32px;height:44px;border:0;background:transparent;cursor:pointer;color:var(--lg-txt2);padding:0;
  display:grid;place-items:center}
.lg-chat-enviar{flex:0 0 42px;width:42px;height:42px;border:0;border-radius:50%;background:var(--lg-azul);color:#fff;cursor:pointer;
  display:grid;place-items:center;margin-bottom:1px}
.lg-chat-enviar:disabled{opacity:.5}
/* vazio e esqueleto */
.lg-chat-vazio{padding:38px 24px;text-align:center;color:var(--lg-txt2);display:flex;flex-direction:column;align-items:center;gap:6px}
.lg-chat-vazio span{line-height:0;color:var(--lg-txt2);opacity:.6;margin-bottom:4px}
.lg-chat-vazio b{color:var(--lg-txt);font-size:15px}
.lg-chat-vazio small{font-size:12.5px;max-width:260px}
.lg-chat-esq{padding:12px;display:flex;flex-direction:column;gap:10px}
.lg-chat-esq i{display:block;height:52px;border-radius:10px;background:linear-gradient(90deg,var(--lg-sup3),var(--lg-az-bg),var(--lg-sup3));
  background-size:200% 100%;animation:lg-chat-esq 1.2s linear infinite}
@keyframes lg-chat-esq{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion: reduce){.lg-chat-esq i{animation:none}}
/* modal "quem esta" */
.lg-chat-modal{position:fixed;inset:0;background:rgba(8,16,28,.45);z-index:1300;display:grid;place-items:end center}
.lg-chat-modal__cx{width:100%;max-width:640px;background:var(--lg-sup);color:var(--lg-txt);border-radius:16px 16px 0 0;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));max-height:75vh;overflow-y:auto}
.lg-chat-modal__cx h3{margin:0 0 10px;font-size:15px}
.lg-chat-modal__cx ul{list-style:none;margin:0;padding:0}
.lg-chat-modal__cx li{display:flex;align-items:center;gap:8px;min-height:38px;padding:8px 0;border-bottom:1px solid var(--lg-linha);font-size:14px}
.lg-chat-modal__cx li em{font-style:normal;color:var(--lg-txt2);font-size:12px}
.lg-chat-modal__pe{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:14px}
.lg-chat-sair{border:1px solid var(--lg-er-tx);background:var(--lg-sup);color:var(--lg-er-tx);border-radius:16px;padding:6px 12px;
  font-size:13px;font-weight:600;cursor:pointer}
.lg-chat-tirar{margin-left:auto;flex:0 0 32px;width:32px;height:32px;border-radius:50%;border:1px solid var(--lg-linha);background:var(--lg-sup);
  color:var(--lg-er-tx);font-size:17px;line-height:1;cursor:pointer;padding:0}
.lg-chat-cand{display:flex;align-items:center;gap:10px;width:100%;padding:6px 0;border:0;background:none;font-size:14px;text-align:left;
  cursor:pointer;color:var(--lg-txt)}
.lg-chat-cand small{color:var(--lg-txt2);font-size:12px}
.lg-chat-cand.on{color:var(--lg-azul);font-weight:600}
.lg-chat-nada{color:var(--lg-txt2);font-size:13px;border-bottom:0!important}
.lg-chat-enviar-txt{border:0;border-radius:16px;padding:7px 14px;font-size:13px;font-weight:700;background:var(--lg-azul);color:#fff;cursor:pointer}
.lg-chat-enviar-txt:disabled{opacity:.45;cursor:default}
/* imagem grande */
.lg-chat-lupa{position:fixed;inset:0;background:rgba(8,14,22,.92);z-index:1400;display:grid;place-items:center;padding:12px}
.lg-chat-lupa img{max-width:100%;max-height:100%;border-radius:8px}
.lg-chat-lupa__x{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));right:12px;width:38px;height:38px;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:20px;cursor:pointer}
/* seletor de emoji (js/emoji_lg.js), ancorado na caixa de escrever */
.lg-emo-painel{position:absolute;left:8px;right:8px;bottom:calc(100% + 8px);z-index:50;background:var(--lg-sup);border:1px solid var(--lg-linha);
  border-radius:12px;box-shadow:0 -6px 24px rgba(16,32,46,.18);max-height:46vh;overflow-y:auto;padding:8px 10px 10px}
.lg-emo-g h4{margin:8px 0 4px;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--lg-txt2);font-weight:700}
.lg-emo-g:first-child h4{margin-top:2px}
.lg-emo-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:2px}
.lg-emo-b{height:40px;border:0;background:none;font-size:22px;line-height:1;cursor:pointer;border-radius:8px;padding:0}
.lg-emo-b:hover{background:var(--lg-sup3)}

/* computador (08/10): cabecalho e barra de baixo na mesma coluna do conteudo */
@media (min-width:700px){
  .lg-topo{padding-left:calc((100% - 616px) / 2);padding-right:calc((100% - 616px) / 2)}
  .lg-abas{padding-left:calc((100% - 640px) / 2);padding-right:calc((100% - 640px) / 2)}
}

/* "Pesquisar dia" (08/10): lupa desenhada ao lado do texto */
.lg-seg button.lg-seg-lupa b{display:flex;align-items:center;justify-content:center;gap:5px;line-height:1.2}
.lg-seg button.lg-seg-lupa b svg{display:block;width:15px;height:15px;flex:0 0 auto;margin-top:1px}

/* parada resolvida antes do dia da carga (carga reprogramada, 08/10) */
.lg-parada.antes{opacity:.5}
/* linha do tempo da carga (22/10) */
.lg-lt{margin-top:10px;border-top:1px solid var(--lg-borda,#dfe5ee);padding-top:8px;display:grid;gap:3px}
.lg-lt div{display:flex;justify-content:space-between;gap:8px;font-size:13px}
.lg-lt span{color:var(--lg-txt2);text-align:right}
.lg-lt .ok b{color:var(--lg-ok-tx,#1f8a4c)}
.lg-lt .pulou b,.lg-lt .pulou span{color:var(--lg-al-tx,#c0392b)}
.lg-lt .falta b{color:var(--lg-txt2);font-weight:600}

/* PAINEL DA CARGA + MAPA DAS ETAPAS (22/10) */
.lg-leitor.compacto{aspect-ratio:auto;height:17vh;max-height:17vh}
.lg-pn-cab{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.lg-pn-cab .cod{font-size:22px;font-weight:800;letter-spacing:.3px}
.lg-etapas{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:12px 0 4px}
.lg-mp{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;opacity:.55}
.lg-mp i{font-style:normal;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid var(--lg-borda,#c9d3df);font-weight:800;font-size:14px;background:var(--lg-card,#fff)}
.lg-mp b{font-size:11.5px;line-height:1.15}
.lg-mp small{font-size:10px;color:var(--lg-txt2)}
.lg-mp.ok{opacity:1}.lg-mp.ok i{background:#1f8a4c;border-color:#1f8a4c;color:#fff}
.lg-mp.at{opacity:1}.lg-mp.at i{background:var(--lg-azul,#1f5fae);border-color:var(--lg-azul,#1f5fae);color:#fff;box-shadow:0 0 0 4px rgba(31,95,174,.25)}
.lg-mp.at b{color:var(--lg-azul,#1f5fae)}
.lg-agora{margin-top:12px;border:2px solid var(--lg-azul,#1f5fae);border-radius:12px;padding:10px 12px}
.lg-agora small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.8px;color:var(--lg-azul,#1f5fae)}
.lg-agora>b{display:block;font-size:16px;margin:2px 0 6px}
.lg-prox{margin-top:10px;font-size:15px;padding:10px 12px;border-radius:10px;background:#fff8e6;color:#7a4b00}
.lg-prox b{font-size:16px}
/* painel compacto (22/10, "deixa bonitinho, compacto") */
.lg-pn{padding:12px 12px 10px}
.lg-pn-cab .cod{font-size:20px;line-height:1.1}
.lg-pn-cab .lg-sub{font-size:12px;line-height:1.35}
.lg-etapas{margin:10px 0 0;padding:8px 2px;border-radius:10px;background:var(--lg-fundo2,rgba(127,127,127,.06))}
.lg-mp i{width:26px;height:26px;font-size:12px;border-width:2px}
.lg-mp b{font-size:11px}
.lg-mp small{font-size:9.5px;line-height:1.15}
.lg-agora{margin-top:10px;padding:8px 10px;border-width:1.5px}
.lg-agora>b{font-size:15px;margin:1px 0 6px}
.lg-pn .lg-vols{gap:6px}
.lg-pn .lg-vol{padding:7px 10px;font-size:14px;min-height:0}
.lg-pn .lg-vol .ck{width:22px;height:22px;font-size:12px}
.lg-pn .lg-agora .lg-sub{font-size:11.5px;line-height:1.3}
.lg-pn .lg-btn{margin-top:8px}
.lg-prox{margin-top:8px;font-size:13.5px;padding:8px 10px}
.lg-prox b{font-size:14.5px}
/* mais compacto (22/10) */
.lg-leitor.compacto{height:11vh;max-height:11vh}
.lg-etapas{padding:6px 2px}
.lg-mp{gap:1px}
.lg-mp i{width:24px;height:24px}
.lg-pn .lg-vols{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.lg-pn .lg-vol{padding:6px 8px;font-size:13px}
.lg-dica-mao{font-size:11px;color:var(--lg-txt2);margin-top:4px}
.lg-prox{margin-top:8px;padding:7px 10px}
.lg-agora{margin-top:8px}
.lg-agora>b{font-size:14.5px;margin:0 0 6px}
.lg-pn .lg-campo{padding-top:9px;padding-bottom:9px}

/* CARGAS DO DIA (22/10) */
.lg-ac-topo{display:grid;grid-template-columns:auto 1fr;gap:8px;margin-bottom:8px}
.lg-ac-topo .lg-campo{padding-top:9px;padding-bottom:9px}
.lg-ac-filtros{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:6px;-webkit-overflow-scrolling:touch}
.lg-ac-filtros button{flex:0 0 auto;border:1px solid var(--lg-linha);background:var(--lg-card,#fff);color:inherit;border-radius:20px;padding:6px 11px;font-size:12.5px;font-weight:600}
.lg-ac-filtros button b{margin-left:3px}
.lg-ac-filtros button.ativo{background:var(--lg-azul,#1f5fae);border-color:var(--lg-azul,#1f5fae);color:#fff}
.lg-ac{background:var(--lg-card,#fff);border:1px solid var(--lg-linha);border-radius:12px;padding:9px 12px;margin-bottom:7px;cursor:pointer}
.lg-ac-l1{display:flex;gap:8px;align-items:baseline}
.lg-ac-l1 b{font-size:15px}.lg-ac-l1 span{font-size:13px;color:var(--lg-txt2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-ac-otr{font-size:10px;font-weight:800;border-radius:6px;padding:1px 6px;background:#fff3e0;color:#b26a00}
.lg-ac-l2{display:flex;gap:8px;align-items:center;margin-top:5px;font-size:12.5px}
.lg-ac-l2 small{margin-left:auto;color:var(--lg-txt2)}
.lg-ac-dots{display:inline-flex;gap:3px}
.lg-ac-dots i{width:16px;height:7px;border-radius:4px;background:var(--lg-linha,#d6dde6)}
.lg-ac-dots i.ok{background:#1f8a4c}.lg-ac-dots i.at{background:var(--lg-azul,#1f5fae)}
.lg-ac-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 8px;font-size:13px;padding:6px 0;border-top:1px solid var(--lg-linha)}
.lg-ac-h span{color:var(--lg-txt2)}.lg-ac-h small{width:100%;color:var(--lg-al-tx,#b26a00)}
/* camera com a carga aberta (22/10): media, nao uma tira -- dava para ver
   pouco e cortado. A mira acompanha a altura. */
.lg-leitor.compacto{height:30vh;max-height:30vh;min-height:170px}
.lg-leitor.compacto .mira{width:auto;height:72%;aspect-ratio:1}

/* proxima etiqueta com icone (22/10) */
.lg-prox{display:flex;align-items:center;gap:12px}
.lg-prox .ic{font-size:34px;line-height:1;flex:0 0 auto}
.lg-prox small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;opacity:.8}
.lg-prox b{display:block;font-size:18px;line-height:1.15}
.lg-prox span:not(.ic){display:block;font-size:12px;opacity:.85}

/* etapa pulada (22/10) */
.lg-mp.pul{opacity:1}.lg-mp.pul i{background:#f59e0b;border-color:#f59e0b;color:#fff}
.lg-mp.pul b{color:#b26a00}.lg-mp.pul small{display:block;color:#b26a00;font-weight:700}

/* excluir bipes (22/10) */
.lg-excluir{color:#c0392b!important;border-color:rgba(192,57,43,.35)!important;margin-top:10px}

.lg-ac-dots i.pul{background:#f59e0b}.lg-ac-pul{font-size:11.5px;color:#b26a00;font-weight:700}