/* Fluxo — rastreio de produção.
   Visual claro (11/11/2026): fundo branco, uma só cor de marca (azul), cor de
   setor só no ícone, verde/âmbar/vermelho só para situação. Sem degradês,
   brilhos, vidro fosco nem animações de enfeite. Ícones de traço em icones.js.
   Os nomes de classe são os mesmos de antes: as telas não mudam de estrutura. */
:root{
  color-scheme: light;
  --fundo:#ffffff; --painel:#ffffff; --painel2:#f8f9fb; --painel3:#eef0f3;
  --linha:#e4e7ec; --linha2:#d0d5dd;
  --txt:#101828; --txt2:#475467; --txt3:#667085;
  /* a cor da marca. --ciano é o nome antigo, mantido porque as telas o usam */
  --marca:#1f4396; --marca-esc:#183677; --marca-bg:#eef2fa; --marca-bd:#c5d1ea;
  --ciano:var(--marca);
  --ok:#079455; --ok-txt:#067647; --ok-bg:#ecfdf3; --ok-bd:#abefc6;
  --alerta:#dc6803; --alerta-txt:#b54708; --alerta-bg:#fffaeb; --alerta-bd:#fedf89;
  --ruim:#d92d20; --ruim-txt:#b42318; --ruim-bg:#fef3f2; --ruim-bd:#fecdca;
  /* setores: os mesmos tons do campo hex do SET (base.js), usados nos PDFs */
  --corte:#2f6fb5; --costura:#6f4bb3; --travete:#b0427a; --lavanderia:#0f7f93; --acabamento:#a86b12; --expedicao:#2f7d55;
  --f-disp:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --f-corpo:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --r:10px;
  --sombra:0 1px 2px rgba(16,24,40,.06);
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ background:var(--fundo); color:var(--txt); font-family:var(--f-corpo); font-size:15px; line-height:1.5; min-height:100vh;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; }
body::before{ content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:50; background:var(--fundo); }
button{ font:inherit; color:inherit; cursor:pointer; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--marca); outline-offset:2px; }
.mono{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; }
h1,h2,h3{ font-family:var(--f-disp); font-weight:600; margin:0; letter-spacing:-.01em; text-wrap:balance; }
[hidden]{ display:none !important; }

/* icones (icones.js): seguem o tamanho e a cor do texto em volta */
.i{ width:1.2em; height:1.2em; flex:none; vertical-align:-.22em; }
.logo{ display:block; flex:none; }

/* ---------------------------------------------------------------- topo -- */
.topo{ position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:var(--fundo); border-bottom:1px solid var(--linha); padding-block:10px 8px;
  padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)); }
.topo-in{ max-width:1200px; margin:0 auto; display:flex; flex-direction:column; gap:8px; }
.marca{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-height:34px; }
.marca .logo{ width:26px; height:26px; }
.marca b{ font-weight:700; font-size:17px; letter-spacing:-.01em; }
.marca small{ color:var(--txt2); font-size:13px; max-width:44vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  border-left:1px solid var(--linha2); padding-left:10px; line-height:18px; }
.selo-previa,.selo-demo{ margin-left:auto; font-size:12px; font-weight:600; color:var(--alerta-txt); border:1px solid var(--alerta-bd);
  border-radius:6px; padding:2px 8px; background:var(--alerta-bg); white-space:nowrap; }
.selo-demo .curto{ display:none; }
.trilho{ display:flex; gap:4px; align-items:center; overflow-x:auto; scrollbar-width:none; }
.trilho::-webkit-scrollbar{ display:none; }
.trilho > span{ font-size:13px; color:var(--txt2); flex:0 0 auto; }
.setores-topo{ display:flex; gap:14px; flex-wrap:wrap; font-weight:500; padding:4px 0; }
.setores-topo span{ display:inline-flex; align-items:center; gap:6px; }
.papel{ flex:0 0 auto; border:1px solid var(--linha2); background:var(--painel); border-radius:7px; padding:6px 12px; font-size:13px;
  font-weight:600; color:var(--txt2); display:flex; gap:7px; align-items:center; }
.papel i{ width:8px; height:8px; border-radius:50%; background:var(--c); }
.papel.on{ color:var(--txt); border-color:var(--c); }
.aba{ flex:0 0 auto; border:0; background:transparent; color:var(--txt2); padding:7px 12px; border-radius:7px; font-weight:600; font-size:14px;
  display:flex; gap:6px; align-items:center; }
.aba:hover{ background:var(--painel2); color:var(--txt); }
.aba.on{ background:var(--marca-bg); color:var(--marca); }
.aba.lanc{ color:var(--marca); box-shadow:inset 0 0 0 1px var(--marca-bd); }
.aba .n{ background:var(--ruim); color:#fff; font-size:11px; font-weight:600; border-radius:9px; padding:0 6px; min-width:18px; line-height:18px; text-align:center; }
.eu-chip{ margin-left:auto; display:flex; align-items:center; gap:8px; border:1px solid var(--linha2); background:var(--painel);
  border-radius:20px; padding:3px 4px 3px 12px; font-size:13.5px; font-weight:600; color:var(--txt); }
.eu-chip:hover{ background:var(--painel2); }
.eu-chip .avatar{ width:28px; height:28px; font-size:11.5px; }

/* ------------------------------------------------------- estrutura ---- */
main{ padding-block:22px 130px; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)); }
.area{ max-width:1200px; margin:0 auto; display:flex; flex-direction:column; gap:18px; }
.area.celular{ max-width:480px; }
.cab{ display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; }
.cab h1{ font-size:26px; line-height:1.25; }
.cab p{ margin:4px 0 0; color:var(--txt2); max-width:68ch; }
.cab .acoes{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.rotulo{ font-size:13px; color:var(--txt2); font-weight:600; }
p.rotulo{ font-weight:400; color:var(--txt3); }
.h-set{ display:flex; align-items:center; gap:10px; }
.h-set .ic{ width:36px; height:36px; border-radius:9px; display:grid; place-items:center; color:var(--c); background:color-mix(in srgb,var(--c) 10%,#fff); }
.h-set .ic .i{ width:21px; height:21px; }
h2.h-set{ font-size:20px; }
h2.h-set .ic{ width:32px; height:32px; }
h2.h-set .ic .i{ width:19px; height:19px; }

/* ----------------------------------------------------------- botoes ---- */
.btn{ border:1px solid var(--linha2); background:var(--painel); color:var(--txt); border-radius:8px; padding:10px 15px; font-weight:600; font-size:14.5px;
  display:inline-flex; gap:8px; align-items:center; justify-content:center; box-shadow:var(--sombra); text-decoration:none; line-height:1.3; }
.btn:hover{ background:var(--painel2); }
.btn.prim{ background:var(--marca); border-color:var(--marca); color:#fff; }
.btn.prim:hover{ background:var(--marca-esc); border-color:var(--marca-esc); }
.btn.grande{ width:100%; padding:14px 16px; font-size:16px; }
.btn.mais{ width:46px; height:46px; padding:0; }
.btn.peq{ padding:6px 10px; font-size:13px; border-radius:7px; }
.btn .i{ width:18px; height:18px; }
.btn.grande .i{ width:20px; height:20px; }
.btn.peq .i{ width:15px; height:15px; }
.lapis{ border:1px solid var(--linha2); background:var(--painel); border-radius:7px; padding:4px 9px; font-size:12.5px; font-weight:600; color:var(--txt2);
  display:inline-flex; gap:5px; align-items:center; }
.lapis:hover{ color:var(--txt); border-color:var(--txt3); }
.lapis .i{ width:14px; height:14px; }
.fecha{ margin-left:auto; border:1px solid var(--linha2); background:var(--painel); border-radius:7px; padding:5px 10px; color:var(--txt2); font-size:13px;
  font-weight:600; display:inline-flex; gap:5px; align-items:center; flex:none; }
.fecha:hover{ color:var(--txt); background:var(--painel2); }
.fecha .i{ width:16px; height:16px; }
.so-ic{ padding:6px; }
.so-ic .i{ width:18px; height:18px; }

/* ---------------------------------------------------- blocos comuns ---- */
.cartao{ background:var(--painel); border:1px solid var(--linha); border-radius:var(--r); padding:16px; }
.pill{ font-size:12px; font-weight:500; border-radius:6px; padding:2px 8px; border:1px solid var(--linha2); color:var(--txt2); background:var(--painel);
  white-space:nowrap; display:inline-flex; align-items:center; gap:5px; }
.pill.ruim{ color:var(--ruim-txt); border-color:var(--ruim-bd); background:var(--ruim-bg); }
.pill.ok{ color:var(--ok-txt); border-color:var(--ok-bd); background:var(--ok-bg); }
.pill.al{ color:var(--alerta-txt); border-color:var(--alerta-bd); background:var(--alerta-bg); }
.pill .i{ width:14px; height:14px; }
.cod{ font-family:var(--f-mono); font-weight:600; font-size:18px; letter-spacing:.02em; }
.vazio-ok{ display:inline-flex; align-items:center; gap:7px; color:var(--ok-txt); font-weight:500; }

/* periodo */
.periodo{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; border:1px solid var(--linha); border-radius:var(--r); padding:10px 12px; background:var(--painel2); }
.periodo .datas{ display:flex; gap:6px; align-items:center; margin-left:auto; flex-wrap:wrap; }
.periodo .datas .rotulo{ font-weight:500; }
.periodo input{ background:var(--painel); border:1px solid var(--linha2); border-radius:7px; padding:7px 9px; color:var(--txt); font:inherit; font-size:14px; }
.chip{ border:1px solid var(--linha2); background:var(--painel); border-radius:7px; padding:6px 12px; font-size:13px; font-weight:600; color:var(--txt2);
  display:inline-flex; align-items:center; gap:6px; }
.chip:hover{ color:var(--txt); }
.chip.on{ border-color:var(--marca); background:var(--marca-bg); color:var(--marca); }
.chip .k{ color:var(--txt3); font-weight:500; }
.chips{ display:flex; gap:6px; flex-wrap:wrap; }

/* veredito */
.veredito{ border-radius:var(--r); padding:16px 18px; display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center;
  background:var(--ruim-bg); border:1px solid var(--ruim-bd); }
.veredito.bom{ background:var(--ok-bg); border-color:var(--ok-bd); }
.veredito .sinal{ width:46px; height:46px; border-radius:10px; display:grid; place-items:center; background:var(--painel); color:var(--ruim-txt); border:1px solid var(--ruim-bd); }
.veredito.bom .sinal{ color:var(--ok-txt); border-color:var(--ok-bd); }
/* um setor cresceu e outro caiu */
.veredito.misto{ background:var(--alerta-bg); border-color:var(--alerta-bd); }
.veredito.misto .sinal{ color:var(--alerta-txt); border-color:var(--alerta-bd); }
.veredito .sinal .i{ width:24px; height:24px; }
.veredito h2{ font-size:19px; }
.veredito p{ margin:4px 0 0; color:var(--txt2); }

/* numeros do painel */
.tiles{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.tile{ border:1px solid var(--linha); border-radius:var(--r); padding:14px; background:var(--painel); display:flex; flex-direction:column; gap:2px; }
.tile small{ color:var(--txt2); font-size:13px; font-weight:500; }
.tile b{ font-size:26px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1.2; }
.tile span{ font-size:12.5px; color:var(--txt3); }
.tile.ruim b{ color:var(--ruim-txt); } .tile.bom b{ color:var(--ok-txt); }
.medidor{ height:6px; border-radius:3px; background:var(--painel3); position:relative; margin-top:8px; }
.medidor i{ position:absolute; inset:0 auto 0 0; border-radius:3px; background:var(--c); }
.medidor em{ position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--txt); }

/* mapa de calor */
.mapa{ overflow-x:auto; border:1px solid var(--linha); border-radius:var(--r); background:var(--painel); }
.mapa table{ border-collapse:separate; border-spacing:4px; width:100%; min-width:640px; }
.mapa th{ font-size:12.5px; color:var(--txt2); font-weight:600; padding:6px 4px; text-align:center; }
.mapa th .is{ display:block; margin:0 auto 3px; width:18px; height:18px; }
.mapa th.l{ text-align:left; }
.mapa td.l{ font-family:var(--f-mono); font-weight:600; font-size:14px; white-space:nowrap; padding-right:6px; }
.mapa td.l small{ display:block; font-family:var(--f-corpo); font-weight:400; color:var(--txt3); font-size:12px; }
.cel{ width:100%; min-height:42px; border-radius:6px; border:1px solid transparent; font-weight:600; font-size:13px; display:grid; place-items:center;
  font-variant-numeric:tabular-nums; }
.cel .i{ width:17px; height:17px; }
.cel.ok{ background:var(--ok-bg); color:var(--ok-txt); border-color:var(--ok-bd); }
.cel.al{ background:var(--alerta-bg); color:var(--alerta-txt); border-color:var(--alerta-bd); }
.cel.ruim{ background:var(--ruim); color:#fff; border-color:var(--ruim); }
.cel.and{ background:var(--marca-bg); color:var(--marca); border-color:var(--marca-bd); }
.cel.vaz{ background:var(--painel2); color:var(--txt3); border-color:var(--linha); }
.legenda{ display:flex; gap:6px 14px; flex-wrap:wrap; font-size:12.5px; color:var(--txt2); padding:10px 12px 12px; border-top:1px solid var(--linha); }
.legenda > span{ display:inline-flex; align-items:center; }
.legenda i{ display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; border:1px solid transparent; }
.legenda .lg-ok{ background:var(--ok-bg); border-color:var(--ok-bd); }
.legenda .lg-al{ background:var(--alerta-bg); border-color:var(--alerta-bd); }
.legenda .lg-ruim{ background:var(--ruim); border-color:var(--ruim); }
.legenda .lg-and{ background:var(--marca-bg); border-color:var(--marca-bd); }
.legenda .dica{ color:var(--txt3); }

.tres{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.duas{ display:grid; grid-template-columns:1.2fr 1fr; gap:14px; }
.barras{ display:flex; flex-direction:column; gap:10px; }
.bar .l{ display:flex; justify-content:space-between; gap:8px; font-size:13.5px; }
.bar .l span{ display:inline-flex; align-items:center; gap:6px; }
.bar .l b{ font-variant-numeric:tabular-nums; font-weight:600; }
.barra{ height:8px; border-radius:4px; background:var(--painel3); overflow:hidden; margin-top:5px; }
.barra i{ display:block; height:100%; border-radius:4px; background:var(--c,var(--marca)); }

/* balanco */
.balanco{ display:grid; grid-template-columns:repeat(5,1fr); border:1px solid var(--linha); border-radius:var(--r); overflow:hidden; }
.balanco > div{ padding:14px 16px; background:var(--painel); border-right:1px solid var(--linha); display:flex; flex-direction:column; gap:2px; }
.balanco > div:last-child{ border-right:0; }
.balanco b{ font-size:28px; font-weight:600; line-height:1.15; font-variant-numeric:tabular-nums; }
.balanco span{ font-size:12.5px; color:var(--txt2); }
.balanco .grave{ background:var(--ruim-bg); }
.balanco .grave b{ color:var(--ruim-txt); }

/* esteira: um cartao por setor */
.esteira{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.est{ position:relative; border:1px solid var(--linha); background:var(--painel); text-align:left; border-radius:var(--r);
  padding:12px; display:flex; flex-direction:column; gap:4px; }
.est:hover{ border-color:var(--linha2); background:var(--painel2); }
.est .top{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:14.5px; }
.est .ic{ width:28px; height:28px; border-radius:7px; display:grid; place-items:center; color:var(--c); background:color-mix(in srgb,var(--c) 10%,#fff); }
.est .ic .i{ width:17px; height:17px; }
.est .big{ font-size:26px; font-weight:600; line-height:1.15; font-variant-numeric:tabular-nums; margin-top:4px; }
.est .sub{ font-size:12px; color:var(--txt3); }
.est .flag{ font-size:12px; font-weight:600; color:var(--ruim-txt); display:flex; align-items:center; gap:4px; }
.est .flag .i{ width:14px; height:14px; }
.est.vermelho{ border-color:var(--ruim-bd); }

/* remessas */
.lista{ display:flex; flex-direction:column; gap:8px; }
.rem{ display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; text-align:left; width:100%;
  border:1px solid var(--linha); border-radius:var(--r); padding:12px 14px; background:var(--painel); }
button.rem:hover{ border-color:var(--linha2); background:var(--painel2); }
.rem .info{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.rem .info .nome{ color:var(--txt2); font-size:13px; }
.trilha{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.trilha i{ height:6px; border-radius:3px; background:var(--painel3); }
.trilha i.feito{ background:var(--c); }
/* onde a remessa esta agora: o tom do setor mais claro, com contorno */
.trilha i.aqui{ background:color-mix(in srgb,var(--c) 35%,#fff); box-shadow:inset 0 0 0 1.5px var(--c); }
.trilha i.furo{ background:var(--ruim); }

/* cadeia de custodia */
.cadeia{ display:flex; flex-direction:column; }
.elo{ border:1px solid var(--linha); border-radius:var(--r); background:var(--painel); padding:14px; display:flex; flex-direction:column; gap:10px; }
.elo.futuro{ background:var(--painel2); border-style:dashed; color:var(--txt3); }
.elo-h{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.elo-h h3{ font-size:17px; }
.elo-h .ic{ width:32px; height:32px; border-radius:8px; display:grid; place-items:center; color:var(--c); background:color-mix(in srgb,var(--c) 10%,#fff); }
.elo-h .ic .i{ width:19px; height:19px; }
.elo-h .lapis{ margin-left:auto; }
.maos{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mao{ border:1px solid var(--linha); border-radius:8px; padding:9px 11px; background:var(--painel2); }
.mao small{ display:block; font-size:12px; color:var(--txt2); }
.mao b{ font-size:14.5px; font-weight:600; }
.mao .q{ font-size:21px; font-weight:600; display:block; font-variant-numeric:tabular-nums; }
.campos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:8px; }
.campo{ border:1px solid var(--linha); border-radius:8px; padding:8px 10px; background:var(--painel2); }
.campo small{ display:block; font-size:12px; color:var(--txt2); }
.campo b{ font-weight:600; font-size:14px; }
.campo.mexido{ border-color:var(--alerta-bd); background:var(--alerta-bg); }
.campo.mexido small::after{ content:" · editado"; color:var(--alerta-txt); font-weight:600; }
.passagem{ display:flex; align-items:center; gap:8px; padding:6px 0 6px 18px; color:var(--txt2); font-size:13px; }
.passagem .fio{ width:2px; align-self:stretch; min-height:26px; background:var(--linha2); margin-right:4px; }
.passagem .i{ width:16px; height:16px; color:var(--ok); }
.passagem.furo{ color:var(--ruim-txt); font-weight:600; }
.passagem.furo .fio{ background:var(--ruim); }
.passagem.furo .i{ color:var(--ruim); }
.nota{ border:1px solid var(--linha); background:var(--painel2); padding:8px 11px; border-radius:8px; font-size:13.5px; color:var(--txt2); }
.nota.al{ border-color:var(--alerta-bd); background:var(--alerta-bg); color:var(--alerta-txt); }
.nota.ruim{ border-color:var(--ruim-bd); background:var(--ruim-bg); color:var(--ruim-txt); }
.avs{ display:flex; gap:6px; flex-wrap:wrap; }
.av{ font-size:12.5px; border-radius:6px; padding:3px 8px; border:1px solid var(--ok-bd); color:var(--ok-txt); background:var(--ok-bg);
  display:inline-flex; align-items:center; gap:4px; }
.av.falta{ border-color:var(--ruim-bd); color:var(--ruim-txt); background:var(--ruim-bg); }
.av .i{ width:13px; height:13px; }
.formula{ border:1px solid var(--marca-bd); border-radius:8px; padding:12px 14px; background:var(--marca-bg); display:flex; flex-direction:column; gap:4px; }
.formula .conta{ font-family:var(--f-mono); font-size:13.5px; color:var(--txt2); }
.formula .res{ font-size:24px; font-weight:600; font-variant-numeric:tabular-nums; }
.formula .res small{ font-size:14px; color:var(--txt2); font-weight:500; }
.rolos{ width:100%; border-collapse:collapse; font-size:13px; }
.rolos th{ text-align:left; color:var(--txt2); font-size:12px; font-weight:600; padding:5px 6px; }
.rolos td{ padding:5px 6px; border-top:1px solid var(--linha); font-variant-numeric:tabular-nums; }
.hist{ display:flex; flex-direction:column; gap:6px; }
.hist div{ font-size:12.5px; color:var(--alerta-txt); border:1px solid var(--alerta-bd); background:var(--alerta-bg); border-radius:8px; padding:6px 10px;
  display:flex; gap:7px; align-items:flex-start; }
.hist div .i{ width:14px; height:14px; margin-top:2px; }
.hist div.neutro{ color:var(--txt2); border-color:var(--linha); background:var(--painel2); }
.valor{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; border:1px solid var(--linha); border-radius:8px; padding:10px 13px; background:var(--painel2); }
.valor b{ font-size:20px; font-weight:600; }

/* ocorrencias (Atencao e Perdas) */
.oc{ display:grid; grid-template-columns:auto 1fr auto; gap:12px; border:1px solid var(--linha); border-radius:var(--r);
  background:var(--painel); align-items:center; padding:12px 13px; }
.oc .sev{ width:34px; height:34px; border-radius:8px; display:grid; place-items:center; background:var(--alerta-bg); color:var(--alerta-txt); align-self:start; }
.oc.alta .sev{ background:var(--ruim-bg); color:var(--ruim-txt); }
.oc .sev .i{ width:19px; height:19px; }
.oc .t{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.oc .t b{ font-size:14.5px; font-weight:600; }
.oc .t span{ color:var(--txt2); font-size:13.5px; }
.oc .meta{ font-size:12px !important; color:var(--txt3) !important; }
.tabela{ overflow-x:auto; border:1px solid var(--linha); border-radius:var(--r); }
table.rel{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:760px; }
table.rel th{ text-align:left; color:var(--txt2); font-size:12.5px; font-weight:600; padding:10px; background:var(--painel2); border-bottom:1px solid var(--linha); }
table.rel td{ padding:10px; border-top:1px solid var(--linha); vertical-align:top; font-variant-numeric:tabular-nums; }
table.rel tr:first-child td{ border-top:0; }
table.rel tr.alta td:first-child{ color:var(--ruim-txt); font-weight:600; }

/* estoque */
.itens{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px; }
.item{ border:1px solid var(--linha); border-radius:var(--r); padding:14px; background:var(--painel); display:flex; flex-direction:column; gap:9px; }
.item .l1{ display:flex; gap:8px; align-items:center; }
.uni{ font-family:var(--f-mono); font-size:11.5px; font-weight:600; padding:1px 7px; border-radius:6px; background:var(--painel3); color:var(--txt2); }
.saldo{ font-size:24px; font-weight:600; font-variant-numeric:tabular-nums; }
.mov{ font-size:12.5px; color:var(--txt2); display:flex; justify-content:space-between; gap:8px; }
.mov b{ font-weight:600; }
.mov b.menos{ color:var(--ruim-txt); } .mov b.mais{ color:var(--ok-txt); }

/* lancar: escolha grande */
.duasop{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.grandeop{ position:relative; border:1px solid var(--linha2); border-radius:var(--r); padding:16px 14px; text-align:left; display:flex; flex-direction:column; gap:3px;
  background:var(--painel); box-shadow:var(--sombra); }
.grandeop:hover{ border-color:var(--c,var(--marca)); background:var(--painel2); }
.grandeop .e{ width:40px; height:40px; border-radius:9px; display:grid; place-items:center; margin-bottom:6px;
  color:var(--c,var(--marca)); background:color-mix(in srgb,var(--c,var(--marca)) 10%,#fff); }
.grandeop .e .i{ width:22px; height:22px; }
.grandeop b{ font-size:17px; font-weight:600; }
.grandeop span{ font-size:13px; color:var(--txt2); }
.grandeop .k{ font-size:12.5px; font-weight:600; color:var(--c,var(--marca)); background:color-mix(in srgb,var(--c,var(--marca)) 10%,#fff);
  border-radius:6px; padding:2px 8px; align-self:flex-start; margin-top:6px; }
.grandeop .marca-ok{ position:absolute; top:10px; right:10px; width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  background:var(--c,var(--marca)); color:#fff; }
.grandeop .marca-ok .i{ width:14px; height:14px; stroke-width:2.5; }
.setgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.barra-lancar{ position:fixed; left:0; right:0; bottom:0; z-index:35; padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  background:var(--fundo); border-top:1px solid var(--linha); display:flex; justify-content:center; }
.barra-lancar .btn{ width:min(448px,100%); padding:15px; font-size:16.5px; }
.barra-lancar .btn .i{ width:21px; height:21px; }

/* folha (painel que sobe de baixo) */
.veu{ position:fixed; inset:0; background:rgba(16,24,40,.45); z-index:80; display:none; }
.veu.on{ display:block; }
.folha{ position:fixed; left:50%; bottom:0; transform:translate(-50%,105%); width:min(620px,100%); max-height:93vh; overflow-y:auto; z-index:90;
  background:var(--painel); border:1px solid var(--linha); border-bottom:0; border-radius:14px 14px 0 0;
  padding:18px max(18px,env(safe-area-inset-right,0px)) calc(22px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));
  transition:transform .25s ease-out; display:flex; flex-direction:column; gap:14px; }
.folha.on{ transform:translate(-50%,0); box-shadow:0 -10px 30px -10px rgba(16,24,40,.25); }
.folha.larga{ width:min(880px,100%); }
.folha .alca{ width:40px; height:4px; border-radius:2px; background:var(--linha2); margin:-6px auto 0; }
.folha h2{ font-size:20px; }
.folha .sub{ color:var(--txt2); margin:-8px 0 0; font-size:14px; }
.menu{ display:flex; flex-direction:column; border:1px solid var(--linha); border-radius:var(--r); overflow:hidden; }
.menu button{ display:flex; align-items:center; gap:12px; width:100%; padding:13px 14px; border:0; border-top:1px solid var(--linha);
  background:var(--painel); text-align:left; font-weight:500; font-size:15px; color:var(--txt); }
.menu button:first-child{ border-top:0; }
.menu button:hover{ background:var(--painel2); }
.menu .i{ width:20px; height:20px; color:var(--txt2); }

/* formularios */
.grade-f{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.f{ display:flex; flex-direction:column; gap:5px; }
.f.w{ grid-column:1/-1; }
.f label,.f > .lbl{ font-size:13px; color:var(--txt2); font-weight:600; }
.f input,.f select,.f textarea{ background:var(--painel); border:1px solid var(--linha2); border-radius:8px; padding:11px 12px; color:var(--txt); font:inherit; width:100%;
  box-shadow:var(--sombra); }
.f input:focus,.f select:focus,.f textarea:focus,.ins input.pp:focus,.mod-linha input:focus,.periodo input:focus{ border-color:var(--marca); }
.f input.num{ font-size:20px; font-weight:600; text-align:center; font-variant-numeric:tabular-nums; }
.f textarea{ min-height:62px; resize:vertical; }
.com-uni{ display:grid; grid-template-columns:1fr auto; gap:6px; }
.seg{ display:flex; border:1px solid var(--linha2); border-radius:8px; overflow:hidden; }
.seg button{ border:0; background:var(--painel); padding:0 14px; font-weight:600; color:var(--txt2); }
.seg button + button{ border-left:1px solid var(--linha2); }
.seg button.on{ background:var(--marca); color:#fff; }
.opcoes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:8px; }
.op{ border:1px solid var(--linha2); background:var(--painel); border-radius:8px; padding:10px 8px; font-weight:600; text-align:center; font-size:14px; color:var(--txt); }
.op:hover{ background:var(--painel2); }
.op.on{ border-color:var(--marca); background:var(--marca-bg); color:var(--marca); box-shadow:inset 0 0 0 1px var(--marca); }
.op.falta{ border-color:var(--ruim-bd); background:var(--ruim-bg); color:var(--ruim-txt); }
.op small{ display:block; font-weight:400; font-size:11.5px; color:var(--txt3); }
.aviso{ border:1px solid var(--alerta-bd); background:var(--alerta-bg); border-radius:8px; padding:10px 13px; color:var(--alerta-txt); font-size:13.5px; }
.aviso.ruim{ border-color:var(--ruim-bd); background:var(--ruim-bg); color:var(--ruim-txt); }
.aviso.info{ border-color:var(--linha); background:var(--painel2); color:var(--txt2); }
.aviso.info b{ color:var(--txt); }
.passos{ display:flex; gap:6px; }
.passos i{ flex:1; height:4px; border-radius:2px; background:var(--painel3); }
.passos i.on{ background:var(--marca); }

/* PIN */
.pin{ display:flex; gap:8px; justify-content:center; }
.pin span{ width:42px; height:50px; border-radius:8px; border:1px solid var(--linha2); display:grid; place-items:center; font-size:22px; background:var(--painel); }
.pin span.on{ border-color:var(--marca); box-shadow:inset 0 0 0 1px var(--marca); }
.teclado{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.teclado button{ border:1px solid var(--linha); background:var(--painel2); border-radius:8px; padding:13px; font-size:21px; font-weight:600;
  display:grid; place-items:center; font-variant-numeric:tabular-nums; }
.teclado button:active{ background:var(--painel3); }
.teclado .i{ width:24px; height:24px; }
.pin-capa{ position:fixed; inset:0; z-index:110; background:rgba(16,24,40,.45); display:flex; align-items:flex-end; justify-content:center; }
.pin-caixa{ width:min(440px,100%); background:var(--painel); border:1px solid var(--linha); border-bottom:0; border-radius:14px 14px 0 0; box-shadow:0 -10px 30px -10px rgba(16,24,40,.25);
  padding:18px 18px calc(22px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; gap:14px; }
.pin-caixa h2{ font-size:20px; }
.pin-caixa .sub{ color:var(--txt2); margin:-6px 0 0; font-size:14px; }

.codigo-novo{ text-align:center; padding:12px 0; }
.codigo-novo .cod{ font-size:44px; display:block; }
.toast{ position:fixed; left:50%; bottom:calc(92px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,300%); z-index:120;
  background:var(--txt); color:#fff; padding:11px 16px; border-radius:8px; font-weight:500; font-size:14.5px; transition:transform .25s ease-out, opacity .25s;
  max-width:90vw; box-shadow:0 8px 24px -8px rgba(16,24,40,.4); }
.toast.on{ transform:translate(-50%,0); }
.toast:not(.on){ opacity:0; pointer-events:none; }

/* desempenho */
.desgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.desemp{ border:1px solid var(--linha); border-radius:var(--r); padding:15px; background:var(--painel); display:flex; flex-direction:column; gap:12px; }
.desemp-h{ display:flex; align-items:center; gap:10px; }
.desemp-h .ic{ width:34px; height:34px; border-radius:8px; display:grid; place-items:center; color:var(--c); background:color-mix(in srgb,var(--c) 10%,#fff); flex:none; }
.desemp-h .ic .i{ width:20px; height:20px; }
.desemp-h b{ font-size:16px; font-weight:600; display:block; }
.desemp-h small{ color:var(--txt3); font-size:12px; }
.grande-pct{ margin-left:auto; font-size:22px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--txt3); white-space:nowrap;
  display:inline-flex; align-items:center; gap:4px; }
.grande-pct .i{ width:20px; height:20px; }
.grande-pct.bom{ color:var(--ok-txt); } .grande-pct.ruim{ color:var(--ruim-txt); }
.desemp .frase{ margin:0; font-size:14px; color:var(--txt2); }
.dtiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.dtiles div{ border:1px solid var(--linha); border-radius:8px; padding:9px 11px; background:var(--painel2); display:flex; flex-direction:column; gap:2px; align-items:flex-start; }
.dtiles small{ font-size:12px; color:var(--txt2); }
.dtiles b{ font-size:20px; font-weight:600; font-variant-numeric:tabular-nums; }
.dl{ font-size:12px; font-weight:600; border-radius:6px; padding:1px 7px; display:inline-flex; align-items:center; gap:3px; }
.dl .i{ width:13px; height:13px; }
.dl.bom{ color:var(--ok-txt); background:var(--ok-bg); } .dl.ruim{ color:var(--ruim-txt); background:var(--ruim-bg); } .dl.neutro{ color:var(--txt3); }
.semanas{ display:grid; grid-template-columns:repeat(6,1fr); gap:6px; align-items:end; margin-top:8px; }
.semanas div{ display:flex; flex-direction:column; align-items:center; gap:3px; font-size:11px; color:var(--txt3); font-variant-numeric:tabular-nums; }
.semanas i{ width:100%; border-radius:3px 3px 1px 1px; background:var(--c); opacity:.3; }
.semanas .atual i{ opacity:1; }
.semanas .atual span{ color:var(--txt); font-weight:600; }
.avatar{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-weight:600; font-size:14px; flex:none;
  color:var(--c); background:color-mix(in srgb,var(--c) 12%,#fff); border:1px solid color-mix(in srgb,var(--c) 30%,#fff); }

/* entrada (login) */
.entrada-tela{ min-height:calc(100vh - 140px); display:grid; place-items:center; }
.entrada-col{ width:min(470px,100%); display:flex; flex-direction:column; gap:16px; padding-block:10px; }
.entrada-col .caixa-login{ width:100%; }
.caixa-login{ width:min(420px,100%); display:flex; flex-direction:column; gap:14px; }
.marca-g{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:4px; }
.marca-g .logo{ width:48px; height:48px; margin-bottom:8px; }
.marca-g b{ font-weight:700; font-size:28px; letter-spacing:-.015em; line-height:1.2; }
.marca-g small{ color:var(--txt2); font-size:14px; }
.empresa-g{ margin-top:10px; font-weight:600; font-size:14px; color:var(--txt); border:1px solid var(--linha); border-radius:8px; padding:5px 12px;
  background:var(--painel2); display:inline-flex; align-items:center; gap:7px; }
.empresa-g .i{ color:var(--txt2); }
.caixa-login .marca-g{ margin-bottom:6px; }
.ou{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--txt3); }
.ou::before,.ou::after{ content:""; flex:1; height:1px; background:var(--linha); }
.erro-msg{ color:var(--ruim-txt); font-size:13.5px; min-height:1em; }
.carregando{ text-align:center; color:var(--txt3); padding:60px 0; }
.sem-rede{ position:fixed; top:calc(8px + env(safe-area-inset-top,0px)); left:50%; transform:translateX(-50%); z-index:130; background:var(--ruim-bg);
  border:1px solid var(--ruim-bd); color:var(--ruim-txt); border-radius:8px; padding:6px 14px; font-size:13px; font-weight:600; box-shadow:var(--sombra); }
.demo-entrar{ display:flex; flex-direction:column; gap:10px; }
.selo-demo-g{ align-self:center; font-size:12px; font-weight:600; color:var(--alerta-txt); border:1px solid var(--alerta-bd); border-radius:6px; padding:3px 10px; background:var(--alerta-bg); }
.demo-txt{ margin:0; text-align:center; color:var(--txt2); font-size:13.5px; }
.perfil{ display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; text-align:left; width:100%;
  border:1px solid var(--linha2); border-radius:var(--r); padding:12px 14px; background:var(--painel); box-shadow:var(--sombra); }
.perfil:hover{ border-color:var(--c,var(--marca)); background:var(--painel2); }
.perfil .e{ width:40px; height:40px; border-radius:9px; display:grid; place-items:center; color:var(--c,var(--marca)); background:color-mix(in srgb,var(--c,var(--marca)) 10%,#fff); }
.perfil .e .i{ width:21px; height:21px; }
.perfil b{ display:block; font-size:16px; font-weight:600; }
.perfil small{ display:block; color:var(--txt2); font-size:12.5px; }
.perfil .ir{ color:var(--txt3); display:grid; }
.perfil .ir .i{ width:20px; height:20px; }
.perfil.adm{ padding:14px 16px; border-color:var(--marca-bd); background:var(--marca-bg); }
.perfil.adm .e{ background:var(--marca); color:#fff; }
.perfil.adm:hover{ border-color:var(--marca); }
.perfis{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.perfis .perfil{ grid-template-columns:auto 1fr; gap:10px; padding:10px 11px; }
.perfis .perfil .e{ width:32px; height:32px; border-radius:8px; }
.perfis .perfil .e .i{ width:18px; height:18px; }
.perfis .perfil b{ font-size:15px; }
.perfis .perfil small{ font-size:12px; }
.demo-dica{ margin:2px 0 0; text-align:center; font-size:13px; color:var(--txt2); }
.demo-dica b{ color:var(--txt); }
.rodape-marca{ text-align:center; color:var(--txt3); font-size:12px; margin:0; }

.sobre-bloco{ display:flex; flex-direction:column; gap:6px; }
.sobre-bloco p{ margin:0; color:var(--txt2); font-size:14px; }
.sobre-lista{ margin:0; padding-left:18px; color:var(--txt2); font-size:14px; display:flex; flex-direction:column; gap:5px; }
.sobre-lista li::marker{ color:var(--marca); }

.reg{ display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:13px; padding:9px 0; border-top:1px solid var(--linha); }
.reg .q{ color:var(--txt3); font-family:var(--f-mono); font-size:12px; white-space:nowrap; }
.reg.al b{ color:var(--alerta-txt); }
.lanc-por{ font-size:12px; color:var(--txt3); }
.ins{ display:grid; grid-template-columns:1fr 92px; gap:6px; align-items:center; }
.ins label{ font-size:14px; display:flex; gap:8px; align-items:center; }
.ins input[type=checkbox]{ width:20px; height:20px; accent-color:var(--marca); }
.ins input.pp{ background:var(--painel); border:1px solid var(--linha2); border-radius:7px; padding:8px; color:var(--txt); font:inherit; text-align:center; }
.mod-linha{ display:grid; grid-template-columns:1fr 110px 40px; gap:6px; }
.mod-linha input{ background:var(--painel); border:1px solid var(--linha2); border-radius:8px; padding:10px; color:var(--txt); font:inherit; width:100%; }
.mod-linha .btn{ padding:0; }
input[type=checkbox]{ accent-color:var(--marca); }

/* ======================================================================
   v5 (11/11/2026): lugares (internos e terceirizados), remessa dividida em
   partes e a tela "leva e traz" do motorista.
   ====================================================================== */
.est{ padding:11px 10px; }
.est .big{ font-size:24px; }
.est .nat{ font-size:11.5px; color:var(--txt2); display:flex; align-items:center; gap:4px; margin-top:2px; }
.est .nat .i{ width:13px; height:13px; }
.trilha i.div{ background:repeating-linear-gradient(135deg, var(--c) 0 3px, color-mix(in srgb,var(--c) 30%,#fff) 3px 6px); }
.cel.div{ background:var(--painel2); color:var(--txt2); border:1px dashed var(--linha2); }
.cel.herd{ background:transparent; border:1px dashed var(--linha); }
.legenda .lg-div{ background:var(--painel2); border:1px dashed var(--txt3); }
.pill.terc{ color:var(--marca); border-color:var(--marca-bd); background:var(--marca-bg); }
.rem.parte .info .nome b{ color:var(--txt); font-weight:600; }

/* entrada: em mais de um lugar / saida: so uma parte */
.chk{ display:flex !important; flex-direction:row !important; gap:10px; align-items:flex-start; font-size:14px; color:var(--txt); padding:10px 12px;
  border:1px solid var(--linha); border-radius:8px; background:var(--painel2); cursor:pointer; }
.chk input{ width:20px; height:20px; margin:0; flex:none; accent-color:var(--marca); }
.partes{ display:flex; flex-direction:column; gap:6px; }
.parte-linha{ display:grid; grid-template-columns:auto 1fr 110px; gap:10px; align-items:center; padding:8px 10px; border:1px solid var(--linha2);
  border-radius:8px; background:var(--painel); font-size:15px; font-weight:500; }
.parte-linha .e{ color:var(--txt2); display:grid; }
.parte-linha input{ background:var(--painel); border:1px solid var(--linha2); border-radius:7px; padding:9px; font:inherit; font-size:18px; font-weight:600;
  text-align:center; width:100%; color:var(--txt); font-variant-numeric:tabular-nums; }
.partes-lista{ display:flex; flex-direction:column; gap:6px; }
.parte-item{ display:grid; grid-template-columns:auto 1fr auto auto; gap:10px; align-items:center; text-align:left; width:100%;
  border:1px solid var(--linha); border-radius:8px; background:var(--painel2); padding:8px 10px; font-size:13.5px; }
.parte-item:hover{ border-color:var(--linha2); background:var(--painel); }
.parte-item .cod{ font-size:15px; }
.parte-item .t{ color:var(--txt2); }
.parte-item > .i{ color:var(--txt3); }
.partes-novas{ display:flex; flex-direction:column; gap:8px; }
.partes-novas > div{ display:grid; grid-template-columns:auto 1fr; gap:2px 14px; align-items:center; border:1px solid var(--linha); border-radius:10px;
  padding:12px 14px; background:var(--painel2); }
.partes-novas .cod{ font-size:26px; grid-row:span 2; }
.partes-novas b{ font-size:16px; }
.partes-novas small{ color:var(--txt2); font-size:13px; }

/* leva e traz */
.mot-acoes{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mot-btn{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; min-height:128px; padding:16px;
  border:1px solid var(--linha2); border-radius:12px; background:var(--painel); box-shadow:var(--sombra); }
.mot-btn:hover{ border-color:var(--marca); background:var(--marca-bg); }
.mot-btn .e{ width:46px; height:46px; border-radius:10px; display:grid; place-items:center; background:var(--marca); color:#fff; margin-bottom:8px; }
.mot-btn .e .i{ width:26px; height:26px; }
/* pegar e deixar com cores diferentes: quem le pouco reconhece pela cor */
.mot-btn.deixar .e{ background:var(--expedicao); }
.mot-btn.deixar:hover{ border-color:var(--expedicao); background:color-mix(in srgb,var(--expedicao) 8%,#fff); }
.mot-btn b{ font-size:22px; font-weight:700; line-height:1.2; }
.mot-btn span:last-child{ font-size:13.5px; color:var(--txt2); }
.mot-sec{ margin-top:6px; }
.mot-sec h2{ font-size:18px; display:flex; align-items:center; gap:8px; }
.mot-sec h2 .i{ color:var(--txt2); }
.mot-sec p{ margin:2px 0 0; font-size:13px; color:var(--txt3); }
.cartao.vazio{ text-align:center; color:var(--txt2); }
.mot-rem{ display:flex; flex-direction:column; gap:6px; border:1px solid var(--linha); border-radius:10px; padding:12px 14px; background:var(--painel); }
.mot-rem .l1{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.mot-rem .cod{ font-size:22px; }
.mot-rem .qtd{ font-size:20px; font-weight:600; font-variant-numeric:tabular-nums; }
.mot-rem .l2{ font-size:13.5px; color:var(--txt2); }
.mot-rem .rota{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:13.5px; color:var(--txt2); }
.mot-rem .rota .i{ width:16px; height:16px; color:var(--txt3); }
.mot-rem .rota b{ color:var(--c); }
.mot-rem .btn{ margin-top:4px; }
.mot-lugar{ border:1px solid var(--linha); border-radius:10px; overflow:hidden; background:var(--painel); }
.mot-lugar-h{ display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--painel2); border-bottom:1px solid var(--linha); }
.mot-lugar-h .ic{ width:34px; height:34px; border-radius:8px; display:grid; place-items:center; flex:none; color:var(--c); background:color-mix(in srgb,var(--c) 10%,#fff); }
.mot-lugar-h .t b{ display:block; font-size:15.5px; font-weight:600; }
.mot-lugar-h .t small{ display:block; font-size:12.5px; color:var(--txt3); }
.mot-lugar-h .btn{ margin-left:auto; }
.mot-linha{ display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:10px 12px; border-top:1px solid var(--linha); }
.mot-lugar-h + .mot-linha{ border-top:0; }
.mot-linha .cod{ font-size:16px; }
.mot-linha .info{ font-size:13px; color:var(--txt2); min-width:0; }
.mot-linha .info b{ color:var(--txt); }
.mot-opcoes{ display:flex; flex-direction:column; gap:8px; }
.mot-op{ display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; width:100%; min-height:64px; padding:12px 14px; text-align:left;
  border:1px solid var(--linha2); border-radius:10px; background:var(--painel); }
.mot-op:hover{ border-color:var(--c,var(--marca)); background:var(--painel2); }
.mot-op.on{ border-color:var(--marca); background:var(--marca-bg); box-shadow:inset 0 0 0 1px var(--marca); }
.mot-op .e{ width:40px; height:40px; border-radius:9px; display:grid; place-items:center; color:var(--c,var(--marca)); background:color-mix(in srgb,var(--c,var(--marca)) 10%,#fff); }
.mot-op .e .i{ width:22px; height:22px; }
.mot-op .t b{ display:block; font-size:16px; font-weight:600; }
.mot-op .t small{ display:block; font-size:13px; color:var(--txt2); }
.mot-op .cod{ font-size:17px; }
.mot-op > .i{ color:var(--txt3); }
.mot-op.dividir{ border-style:dashed; }
.mot-resumo{ display:flex; flex-direction:column; gap:2px; border:1px solid var(--linha); border-radius:10px; padding:12px 14px; background:var(--painel2); font-size:14px; color:var(--txt2); }
.mot-resumo .cod{ font-size:20px; color:var(--txt); }
.mot-resumo b{ color:var(--txt); }
.qtd-grande{ display:grid; grid-template-columns:1fr auto; gap:8px; }
.qtd-grande input{ font:inherit; font-size:32px; font-weight:600; text-align:center; padding:12px; border:1px solid var(--linha2); border-radius:10px;
  background:var(--painel); color:var(--txt); width:100%; min-width:0; font-variant-numeric:tabular-nums; }
.qtd-grande input:focus{ border-color:var(--marca); outline:none; box-shadow:0 0 0 3px var(--marca-bg); }
.qtd-grande .btn{ white-space:nowrap; }
.mot-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.mot-chips .op{ padding:8px 12px; }
.mot-mais summary{ cursor:pointer; padding:6px 0; }

/* equipe: onde cada setor trabalha */
.locais-resumo{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:8px; }
.loc-set{ display:flex; align-items:center; gap:10px; border:1px solid var(--linha); border-radius:8px; padding:9px 11px; }
.loc-set .ic{ width:32px; height:32px; border-radius:8px; display:grid; place-items:center; flex:none; color:var(--c); background:color-mix(in srgb,var(--c) 10%,#fff); }
.loc-set .t{ min-width:0; }
.loc-set .t b{ display:block; font-size:14.5px; font-weight:600; }
.loc-set .t small{ display:block; font-size:12.5px; color:var(--txt3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.loc-set .pill{ margin-left:auto; }
.loc-bloco{ border:1px solid var(--linha); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:8px; }
.loc-bloco-h{ display:flex; align-items:center; gap:8px; }
.loc-bloco-h .ic{ width:30px; height:30px; border-radius:7px; display:grid; place-items:center; color:var(--c); background:color-mix(in srgb,var(--c) 10%,#fff); }
.loc-bloco-h b{ font-size:15.5px; }
.loc-bloco-h .pill{ margin-left:auto; }
.loc-linha{ display:grid; grid-template-columns:1.4fr auto 1fr auto; gap:6px; align-items:center; }
.loc-linha input{ background:var(--painel); border:1px solid var(--linha2); border-radius:8px; padding:9px 10px; color:var(--txt); font:inherit; width:100%; min-width:0; }
.loc-linha .seg{ height:100%; }
.loc-linha .seg button{ padding:0 10px; font-size:13px; }
.loc-linha.off{ opacity:.55; }
.tresop{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media (max-width:760px){
  .tresop{ grid-template-columns:1fr; }
  .loc-linha{ grid-template-columns:1fr auto; }
}
@media (max-width:560px){
  .mot-btn{ min-height:116px; padding:14px; }
  .mot-btn b{ font-size:20px; }
  .parte-linha{ grid-template-columns:auto 1fr 90px; }
}

/* ------------------------------------------------------------ celular -- */
@media (max-width:1000px){
  .desgrid{ grid-template-columns:repeat(2,1fr); }
  .esteira,.setgrid{ grid-template-columns:repeat(3,1fr); }
  .balanco{ grid-template-columns:repeat(2,1fr); }
  .balanco > div{ border-bottom:1px solid var(--linha); }
  /* o 5o numero do balanco ocupa a linha inteira em vez de ficar sozinho e torto */
  .balanco > div:last-child:nth-child(odd){ grid-column:1 / -1; }
  .tiles{ grid-template-columns:repeat(2,1fr); }
  .tres,.duas{ grid-template-columns:1fr; }
}
/* no celular as abas nao cabem; a borda direita esmaece para mostrar que a
   fila se arrasta (e a ultima aba, Equipe, nao fica escondida) */
@media (max-width:760px){
  .trilho{ -webkit-mask-image:linear-gradient(90deg,#000 80%,transparent); mask-image:linear-gradient(90deg,#000 80%,transparent); padding-right:76px; }
}
@media (max-width:560px){
  .desgrid{ grid-template-columns:1fr; }
  .esteira,.setgrid{ grid-template-columns:repeat(2,1fr); }
  .cab h1{ font-size:22px; }
  .grade-f,.maos{ grid-template-columns:1fr; }
  .rem{ grid-template-columns:1fr; }
  .veredito{ grid-template-columns:1fr; }
  /* topo numa linha so: o nome da empresa encolhe com reticencias */
  .marca{ flex-wrap:nowrap; gap:8px; }
  .marca small{ flex:1 1 auto; min-width:0; max-width:none; font-size:12px; padding-left:8px; }
  .selo-demo{ margin-left:0; flex:0 0 auto; }
  .selo-demo .longo{ display:none; } .selo-demo .curto{ display:inline; }
  .eu-chip{ flex:0 0 auto; }
  .marca-g b{ font-size:26px; }
  /* periodo: chips em grade 2x2 e as duas datas numa linha so */
  .periodo{ gap:7px; padding:9px 10px; }
  .periodo > .rotulo{ display:none; }
  .periodo > .chip{ flex:1 1 calc(50% - 4px); justify-content:center; padding:8px 6px; }
  .periodo .datas{ width:100%; display:grid; grid-template-columns:auto 1fr auto 1fr; gap:6px; align-items:center; margin-left:0; }
  .periodo .datas input{ width:100%; min-width:0; font-size:13px; padding:7px 5px; }
  .balanco b{ font-size:24px; }
  .balanco > div{ padding:12px 13px; }
  .cab .acoes{ margin-left:0; width:100%; }
  .cab .acoes .btn{ flex:1; }
  .cab .acoes .btn.mais{ flex:0 0 46px; }
}
@media (prefers-reduced-motion:reduce){ .folha,.toast{ transition:none; } }