:root{
  color-scheme: light;
  --ink:#16241C; --ink-2:#47564B; --muted:#82907E;
  --paper:#F1F4EC; --surface:#FFFFFF; --surface-2:#E7ECE0;
  --line:rgba(22,36,28,.12); --line-strong:rgba(22,36,28,.22);
  --brand:#1F5D46; --brand-dark:#123726; --brand-tint:#DCEAE1; --on-brand:#F4F8F1;
  --accent:#D98F2B; --accent-dark:#A96C18; --accent-tint:#F7E4BF;
  --good:#0ca30c; --good-ink:#1a6b1a; --good-tint:#DDF1DA;
  --warning:#c9880f; --warning-ink:#8a5c06; --warning-tint:#FBEBCE;
  --critical:#c23a3a; --critical-ink:#9e2b2b; --critical-tint:#F6DEDC;
  --info:#2a78d6; --info-ink:#1c5cab; --info-tint:#DCE8F9;
  /* Cores dos donos de carteira no mapa. Sao oito porque quatro acabavam
     rapido e dois vendedores ficavam com a mesma cor; '--sem' e de quem esta
     sem dono, que precisa ser reconhecivel de longe. */
  --v1:#2a78d6; --v2:#eb6834; --v3:#1baf7a; --v4:#6a55c9;
  --v5:#c0392b; --v6:#0e8f8f; --v7:#b8860b; --v8:#8e44ad;
  --sem:#8a948c;
  --shadow:0 1px 2px rgba(22,36,28,.06), 0 8px 24px -12px rgba(22,36,28,.2);
  --f-display:"Bitter",Georgia,serif;
  --f-body:"Work Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --nav-h:62px;
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme: dark;
    --ink:#EAF0E6; --ink-2:#B7C4AF; --muted:#8C9986;
    --paper:#0E1712; --surface:#172119; --surface-2:#1E2A21;
    --line:rgba(234,240,230,.14); --line-strong:rgba(234,240,230,.26);
    --brand:#4CA07E; --brand-dark:#327A5D; --brand-tint:rgba(76,160,126,.18); --on-brand:#0E1712;
    --accent:#E7A94D; --accent-dark:#C98A2E; --accent-tint:rgba(231,169,77,.16);
    --good:#3FC13F; --good-ink:#7FD97F; --good-tint:rgba(63,193,63,.16);
    --warning:#E8AE3E; --warning-ink:#F0C271; --warning-tint:rgba(232,174,62,.16);
    --critical:#E17272; --critical-ink:#EE9494; --critical-tint:rgba(225,114,114,.16);
    --info:#5D9DE8; --info-ink:#8DBCF0; --info-tint:rgba(93,157,232,.16);
    --v1:#3987e5; --v2:#d95926; --v3:#199e70; --v4:#9085e9;
    --v5:#e05a52; --v6:#2aa7a7; --v7:#d4a017; --v8:#a569d6;
    --sem:#78837a;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  }
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* O atributo hidden do HTML tem que vencer SEMPRE. Sem esta linha, qualquer
   regra com display (.campo{display:flex}, por exemplo) sobrepoe o hidden e o
   elemento continua na tela mesmo mandado esconder. Ja causou vazamento de
   tela de gestor para vendedor uma vez; nao remova. */
[hidden]{ display:none !important; }
@media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important; } }
html,body{ margin:0; padding:0; }
body{ background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; }
h1,h2,h3{ font-family:var(--f-display); font-weight:700; margin:0; }
p{ margin:0; }
button{ font:inherit; }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* ---------- login ---------- */
#tela-login{ display:none; min-height:100dvh; align-items:center; justify-content:center; padding:24px; background:var(--brand-dark); }
body.tela-login #tela-login{ display:flex; }
.login-card{ width:min(400px,100%); background:var(--surface); border-radius:18px; padding:30px 26px; box-shadow:0 24px 60px -20px rgba(0,0,0,.5); }
.login-marca{ display:flex; align-items:center; gap:11px; margin-bottom:22px; }
.login-marca b{ font-family:var(--f-display); font-size:21px; font-weight:800; display:block; line-height:1.1; }
.login-marca span{ font-size:12px; color:var(--muted); display:block; }
.login-card label{ font-size:12.5px; font-weight:600; color:var(--ink-2); display:block; margin-bottom:6px; }
.login-card input{ width:100%; padding:12px 13px; border-radius:11px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); font:inherit; font-size:15px; margin-bottom:14px; }
.login-erro{ display:none; background:var(--critical-tint); color:var(--critical-ink); border-radius:10px; padding:11px 13px; font-size:13px; font-weight:600; margin-bottom:14px; }
.login-erro.show{ display:block; }
.login-aviso{ margin-top:18px; font-size:12px; color:var(--muted); text-align:center; }
.login-demo{ background:var(--accent-tint); color:var(--accent-dark); border-radius:10px; padding:11px 13px; font-size:12.5px; font-weight:600; margin-bottom:16px; }
.bloco-codigo{ background:var(--surface-2); border-radius:10px; padding:12px 14px; font-family:var(--f-mono); font-size:12px; line-height:1.6; overflow-x:auto; margin:12px 0; white-space:pre; }
code{ font-family:var(--f-mono); font-size:.92em; background:var(--surface-2); padding:1px 5px; border-radius:5px; }

/* ---------- topo ---------- */
.topbar{ position:sticky; top:0; z-index:1200; background:var(--brand-dark); color:var(--on-brand); padding:max(10px,env(safe-area-inset-top)) 16px 10px; display:flex; align-items:center; gap:12px; }
.marca-logo{ display:block; flex:none; object-fit:contain; border-radius:9px; }
.brand{ display:flex; align-items:center; gap:9px; margin-right:auto; min-width:0; }
.brand b{ font-family:var(--f-display); font-size:16px; font-weight:800; display:block; line-height:1.1; }
.brand span{ font-size:11px; opacity:.72; display:block; }
.quem-sou{ font-size:12px; font-weight:700; color:rgba(255,255,255,.85); background:rgba(255,255,255,.12); padding:6px 11px; border-radius:8px; white-space:nowrap; }
.btn-sair{ border:0; background:rgba(255,255,255,.12); color:var(--on-brand); font-size:12px; font-weight:700; padding:8px 11px; border-radius:9px; cursor:pointer; }

/* ---------- status de conexao ---------- */
.statusbar{ display:none; background:var(--warning-tint); color:var(--warning-ink); font-size:12px; font-weight:600; padding:7px 16px; text-align:center; }
.statusbar.show{ display:block; }
.statusbar.sync{ background:var(--info-tint); color:var(--info-ink); }

/* ---------- modos ---------- */
.view{ display:none; }
/* A tela do vendedor tem que caber EXATAMENTE na altura do celular: a faixa
   verde de cima + o conteudo + o menu de baixo. Antes o conteudo sozinho ja
   media a tela inteira (100dvh) e a faixa verde era somada por cima, entao
   sobrava altura demais e o rodape — junto com o botao de fechar pedido —
   ficava cortado embaixo. Agora o proprio body e a coluna de 100dvh. */
body.mode-vendedor{ overflow:hidden; height:100dvh; display:flex; flex-direction:column; }
body.mode-vendedor .topbar, body.mode-vendedor .statusbar{ flex:0 0 auto; }
body.mode-vendedor #view-vendedor{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; width:100%; }
body.mode-gestor #view-gestor{ display:block; }
body.mode-gestor .bottomnav{ display:none; }
body.tela-login #view-vendedor, body.tela-login #view-gestor, body.tela-login .topbar, body.tela-login .bottomnav{ display:none!important; }
#view-vendedor{ max-width:560px; margin-inline:auto; background:var(--paper); position:relative; }
@media (min-width:900px){
  body.mode-vendedor{ background:var(--surface-2); }
  #view-vendedor{ box-shadow:0 0 0 1px var(--line), 0 20px 60px -20px rgba(0,0,0,.35); }
}
.vsub{ display:none; flex:1; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch; }
.vsub.active{ display:flex; flex-direction:column; }
.vpad{ padding:16px 16px calc(var(--nav-h) + 20px); }

.bottomnav{ position:sticky; bottom:0; z-index:1100; display:grid; grid-template-columns:repeat(4,1fr); background:var(--surface); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); }
.bottomnav button{ border:0; background:transparent; color:var(--muted); cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 4px 10px; font-size:11px; font-weight:600; }
.bottomnav button b{ font-size:17px; line-height:1; font-weight:400; }
.bottomnav button[aria-selected="true"]{ color:var(--brand); }

.vhead{ background:var(--surface); border-bottom:1px solid var(--line); padding:12px 16px; display:flex; align-items:center; gap:10px; }
.avatar{ width:36px; height:36px; border-radius:50%; background:var(--brand); color:var(--on-brand); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex:none; }
.vhead select{ font:inherit; font-size:13px; font-weight:600; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); border-radius:9px; padding:7px 9px; max-width:100%; }
.vhead-nome{ font-size:14px; font-weight:700; }
.vhead-sub{ font-size:11.5px; color:var(--muted); margin-top:2px; }

.chips{ display:flex; gap:7px; padding:11px 16px; overflow-x:auto; background:var(--surface); border-bottom:1px solid var(--line); scrollbar-width:none; }
.chips::-webkit-scrollbar{ display:none; }
.chip{ border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-2); font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:999px; white-space:nowrap; cursor:pointer; display:flex; align-items:center; gap:6px; }
.chip[aria-pressed="true"]{ background:var(--brand); border-color:var(--brand); color:var(--on-brand); }
.chip i{ width:8px; height:8px; border-radius:50%; display:block; font-style:normal; }
.chip b{ font-family:var(--f-mono); font-size:11px; font-weight:600; opacity:.8; }

.mapwrap{ flex:1; min-height:240px; position:relative; }
#mapVend,#mapGestor{ width:100%; height:100%; background:var(--surface-2); }
#mapGestor{ height:460px; border-radius:14px; }
.leaflet-container{ font-family:var(--f-body); }
.pin{ width:26px; height:26px; border-radius:50% 50% 50% 4px; transform:rotate(-45deg); border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; }
.pin span{ transform:rotate(45deg); color:#fff; font-size:12px; font-weight:800; line-height:1; letter-spacing:-.3px; }
/* duas iniciais ainda cabem no alfinete, so precisam encolher um pouco */
.pin span:not(:empty){ font-size:11px; }
.pin.ativo{ background:var(--good); }
.pin.inativo{ background:var(--critical); } .pin.nunca_comprou{ background:var(--info); }
.pin.v1{ background:var(--v1); } .pin.v2{ background:var(--v2); } .pin.v3{ background:var(--v3); } .pin.v4{ background:var(--v4); }
.pin.v5{ background:var(--v5); } .pin.v6{ background:var(--v6); } .pin.v7{ background:var(--v7); } .pin.v8{ background:var(--v8); }
.pin.sem{ background:var(--sem); }
.maplegend{ position:absolute; left:10px; bottom:10px; z-index:900; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:9px 11px; box-shadow:var(--shadow); font-size:11.5px; display:flex; flex-direction:column; gap:5px; }
.maplegend div{ display:flex; align-items:center; gap:6px; white-space:nowrap; }
.maplegend b{ font-family:var(--f-mono); color:var(--muted); font-weight:700; }
.maplegend{ max-height:42%; overflow-y:auto; }
.maplegend i{ width:9px; height:9px; border-radius:50%; display:block; }

.sheet-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1300; opacity:0; pointer-events:none; transition:opacity .2s; }
.sheet-backdrop.show{ opacity:1; pointer-events:auto; }
.sheet{ position:fixed; left:50%; bottom:0; width:min(560px,100%); transform:translate(-50%,100%); background:var(--surface); border-radius:18px 18px 0 0; z-index:1400; transition:transform .25s ease; max-height:86dvh; overflow:auto; padding:8px 18px calc(22px + env(safe-area-inset-bottom)); box-shadow:0 -10px 40px rgba(0,0,0,.25); }
.sheet.show{ transform:translate(-50%,0); }
.sheet-grab{ width:42px; height:4px; background:var(--line-strong); border-radius:99px; margin:6px auto 14px; }

.btn{ appearance:none; border:1px solid transparent; border-radius:11px; padding:12px 16px; font-weight:700; font-size:14px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:7px; text-decoration:none; }
.btn.primary{ background:var(--brand); color:var(--on-brand); }
.btn.ghost{ background:var(--surface); color:var(--ink); border-color:var(--line-strong); }
.btn.block{ width:100%; }
.btn.sm{ padding:8px 12px; font-size:12.5px; border-radius:9px; }
.btn[disabled]{ opacity:.5; cursor:default; }
.btnrow{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:14px; }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px; box-shadow:var(--shadow); }
.card + .card{ margin-top:12px; }
.pill{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:4px 9px; border-radius:999px; white-space:nowrap; }
.pill::before{ content:""; width:6px; height:6px; border-radius:50%; }
.pill.good{ background:var(--good-tint); color:var(--good-ink);} .pill.good::before{ background:var(--good); }
.pill.warning{ background:var(--warning-tint); color:var(--warning-ink);} .pill.warning::before{ background:var(--warning); }
.pill.critical{ background:var(--critical-tint); color:var(--critical-ink);} .pill.critical::before{ background:var(--critical); }
.pill.info{ background:var(--info-tint); color:var(--info-ink);} .pill.info::before{ background:var(--info); }
.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.kpi{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 15px; box-shadow:var(--shadow); }
.kpi small{ font-size:12px; color:var(--muted); font-weight:600; display:block; }
.kpi b{ font-family:var(--f-display); font-size:22px; font-weight:700; display:block; margin-top:5px; }
.kpi em{ font-style:normal; font-size:11.5px; font-weight:700; color:var(--muted); display:block; margin-top:4px; }
.kpi em.up{ color:var(--good-ink); }
.rowitem{ display:flex; gap:12px; align-items:center; padding:13px 0; border-bottom:1px solid var(--line); }
.rowitem:last-child{ border-bottom:0; }
.rowitem .grow{ flex:1; min-width:0; }
.rowitem strong{ display:block; font-size:14px; }
.rowitem span{ display:block; font-size:12.5px; color:var(--muted); margin-top:2px; }
.searchbox{ width:100%; padding:11px 13px; border-radius:11px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); font:inherit; font-size:14px; }
.sectitle{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:22px 0 8px; }
.meter{ height:8px; background:var(--surface-2); border-radius:99px; overflow:hidden; margin-top:9px; }
.meter i{ display:block; height:100%; background:var(--brand); border-radius:99px; }
.stepper{ display:flex; align-items:center; gap:10px; }
.stepper button{ width:32px; height:32px; border-radius:9px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); font-size:17px; font-weight:700; cursor:pointer; line-height:1; }
.stepper button:disabled{ opacity:.35; cursor:default; }
.stepper b{ font-family:var(--f-mono); font-size:14px; min-width:22px; text-align:center; }

/* Catalogo do pedido: um produto por linha, em corpo grande. O vendedor usa
   esta tela em pe, no balcao do cliente, entao nome e preco precisam ser
   lidos de relance e o +/- tem que caber no dedo. */
.produto-linha{ padding:14px 0; gap:16px; align-items:center; }
.produto-linha strong{ font-size:17px; line-height:1.3; }
.produto-linha .produto-preco{ font-size:16px; font-weight:700; color:var(--ink); margin-top:4px; }
.produto-linha .produto-emb{ font-size:13px; font-weight:500; color:var(--muted); }
.produto-linha .produto-meta{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:6px; }
.produto-linha .cod-produto{ font-size:12.5px; }
.produto-linha .stepper{ flex:none; gap:8px; }
.produto-linha .stepper button{ width:44px; height:44px; border-radius:11px; font-size:22px; }
.produto-linha .stepper b{ font-size:18px; min-width:26px; }
/* Campo de quantidade: da para digitar direto, sem apertar o + varias vezes.
   As setinhas nativas do navegador saem — ja temos o - e o +, e elas roubam
   espaco e sao pequenas demais para o dedo. */
.stepper input.qtd{ width:58px; height:44px; text-align:center; font-family:var(--f-mono);
  font-size:18px; font-weight:700; color:var(--ink); background:var(--surface);
  border:1px solid var(--line-strong); border-radius:11px; padding:0; -moz-appearance:textfield; }
.stepper input.qtd::-webkit-outer-spin-button,
.stepper input.qtd::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.stepper input.qtd:focus{ outline:2px solid var(--brand); outline-offset:1px; }
.produto-linha.no-carrinho{ background:var(--brand-tint); border-radius:12px; padding-inline:12px; }
.aviso-mapa{ font-size:12.5px; color:var(--warning-ink); background:var(--warning-tint); padding:9px 13px; line-height:1.45; }


/* Hora em que o pedido caiu na central. Fica grande porque e a primeira coisa
   que quem atende procura quando o alarme toca. */
.pedido-hora{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin-top:7px; }
.pedido-hora b{ font-family:var(--f-mono); font-size:21px; font-weight:700; line-height:1; color:var(--ink); }
.pedido-hora span{ font-size:12.5px; color:var(--muted); font-weight:600; }
.linha-check{ display:flex; gap:11px; align-items:flex-start; margin-top:16px; padding:13px; border:1px solid var(--line); border-radius:12px; cursor:pointer; }
.linha-check input{ margin-top:2px; flex:none; width:18px; height:18px; }
.linha-check strong{ display:block; font-size:14px; }
.linha-check .ajuda{ margin-top:3px; }
.totalbar{ position:sticky; bottom:0; background:var(--surface); border-top:1px solid var(--line); padding:13px 0 0; margin-top:14px; }
.money{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; }
.muted{ color:var(--muted); font-size:12.5px; }
select.full{ width:100%; padding:11px 12px; border-radius:11px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); font:inherit; font-size:14px; }
textarea{ width:100%; padding:11px 12px; border-radius:11px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); font:inherit; font-size:14px; resize:vertical; }

#view-gestor{ padding:24px 20px 70px; max-width:1200px; margin-inline:auto; }
.ghead h1{ font-size:24px; }
.ghead p{ color:var(--ink-2); font-size:14px; margin-top:6px; max-width:62ch; }
.panel{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:var(--shadow); margin-top:16px; }
.panel h2{ font-size:17px; }
.panel .sub{ font-size:12.5px; color:var(--muted); margin-top:3px; }
.table-wrap{ overflow-x:auto; margin-top:14px; }
table{ width:100%; border-collapse:collapse; min-width:720px; }
thead th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; padding:0 11px 9px; border-bottom:1px solid var(--line-strong); white-space:nowrap; }
tbody td{ padding:11px; border-bottom:1px solid var(--line); font-size:13.5px; }
tbody tr:last-child td{ border-bottom:0; }
tbody tr:hover td{ background:var(--surface-2); }
td.num, th.num{ text-align:right; font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-size:13px; }
.who{ display:flex; align-items:center; gap:9px; }
.dotv{ width:10px; height:10px; border-radius:50%; flex:none; }
.bar{ height:7px; background:var(--surface-2); border-radius:99px; overflow:hidden; min-width:70px; }
.bar i{ display:block; height:100%; border-radius:99px; background:var(--brand); }
.alert{ display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:13px 0; border-bottom:1px solid var(--line); }
.alert:last-child{ border-bottom:0; }
/* ---------- fila de pedidos ---------- */
.chip-alerta{ background:var(--critical); color:#fff; font-family:var(--f-mono); font-size:11px; font-weight:700;
              padding:1px 7px; border-radius:999px; margin-left:6px; }
.alerta-novo{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:18px;
              background:var(--critical-tint); border:1px solid var(--critical); border-radius:14px; padding:16px 18px; }
.alerta-novo div{ flex:1; min-width:200px; }
.alerta-novo strong{ display:block; font-size:16px; color:var(--critical-ink); }
.alerta-novo span{ display:block; font-size:12.5px; color:var(--ink-2); margin-top:3px; }
.pedido-item{ border-bottom:1px solid var(--line); padding:14px 0; }
.pedido-item:last-child{ border-bottom:0; }
.pedido-item.destaque{ background:var(--critical-tint); border-radius:12px; padding:14px; margin-bottom:8px; border-bottom:0; }
.pedido-topo{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pedido-topo strong{ flex:1; min-width:140px; font-size:14.5px; }
.pedido-valor{ font-weight:700; font-size:15px; }
.pedido-meta{ font-size:12.5px; color:var(--muted); margin-top:5px; }
/* Itens do pedido: um por linha, com o ID de 6 digitos na frente. Antes era
   tudo numa tira so separada por virgula, e quem ia separar a mercadoria no
   deposito tinha que garimpar. */
.pedido-itens{ margin-top:9px; }
.item-pedido{ display:flex; align-items:center; gap:9px; padding:5px 0;
              border-top:1px solid var(--line); font-size:14px; }
.item-pedido:first-child{ border-top:0; }
.item-qtd{ font-family:var(--f-mono); font-weight:700; font-size:15px; color:var(--ink);
           min-width:42px; text-align:right; flex:none; }
.item-nome{ color:var(--ink); min-width:0; }
.celula-itens{ min-width:230px; }
.celula-itens .item-pedido{ font-size:13px; padding:3px 0; }
.pedido-item .btn{ margin-top:10px; }
.linha-sigilo{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:20px; }

.alerta-vend{ display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:var(--ink-2); background:var(--surface-2); padding:6px 11px; border-radius:999px; white-space:nowrap; }
.alerta-vend .dotv{ width:9px; height:9px; }
@media (max-width:700px){
  .alert{ grid-template-columns:auto 1fr; }
  .alerta-vend{ grid-column:2; justify-self:start; margin-top:2px; }
}
.gmapwrap{ position:relative; margin-top:14px; }
/* ---------- abas do gestor ---------- */
.gtabs{ display:flex; gap:22px; border-bottom:1px solid var(--line); margin-top:20px; overflow-x:auto; }
.gtabs button{ appearance:none; background:none; border:0; border-bottom:2px solid transparent; cursor:pointer; font:inherit; font-weight:600; font-size:14.5px; color:var(--muted); padding:10px 2px 12px; white-space:nowrap; }
.gtabs button:hover{ color:var(--ink); }
.gtabs button[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--brand); }
.gsub{ display:none; }
.gsub.active{ display:block; }

/* ---------- formularios do gestor ---------- */
.form-box{ background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:18px; margin-top:16px; }
.form-grid2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; }
.campo{ display:flex; flex-direction:column; gap:6px; }
.campo label{ font-size:12.5px; font-weight:600; color:var(--ink-2); }
.campo input, .campo select{ width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); font:inherit; font-size:14px; }
.campo input:hover, .campo select:hover{ border-color:var(--brand); }
.campo .ajuda{ font-size:11.5px; color:var(--muted); line-height:1.35; }
.form-acoes{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:16px; }
.form-acoes .muted{ font-size:12.5px; }
.ok-msg{ color:var(--good-ink); font-weight:700; font-size:12.5px; }
.erro-msg{ color:var(--critical-ink); font-weight:700; font-size:12.5px; }
.preco-input{ width:110px; padding:7px 9px; border-radius:8px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); font:inherit; font-size:13px; font-family:var(--f-mono); text-align:right; }
/* ---------- pedido em passos ---------- */
.passos{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; background:var(--surface); border-bottom:1px solid var(--line); flex:none; }
.passo{ appearance:none; background:none; border:0; border-bottom:2px solid transparent; cursor:pointer; padding:11px 4px 10px; display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--muted); font:inherit; }
.passo b{ width:22px; height:22px; border-radius:50%; background:var(--surface-2); color:var(--muted); font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.passo span{ font-size:11.5px; font-weight:600; }
.passo[aria-current="true"]{ color:var(--ink); border-bottom-color:var(--brand); }
.passo[aria-current="true"] b{ background:var(--brand); color:var(--on-brand); }
.passo.feito b{ background:var(--brand-tint); color:var(--brand-dark); }
.passo[disabled]{ cursor:default; opacity:.5; }
.passo-conteudo{ display:none; flex:1; min-height:0; flex-direction:column; overflow:hidden; }
.passo-conteudo.active{ display:flex; }
/* Só esta área rola. A barra de baixo fica fora do fluxo de rolagem,
   senão ela era empurrada para fora da tela e o botão aparecia cortado. */
.passo-conteudo .vpad{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:24px; }
.barra-fixa{ flex:0 0 auto; background:var(--surface); border-top:1px solid var(--line);
             padding:13px 16px calc(16px + env(safe-area-inset-bottom)); }
/* Botão de finalizar: alto o bastante para o dedo, e sempre inteiro na
   tela. O problema anterior era ele ficar espremido numa faixa fina. */
.barra-fixa .btn{ min-height:54px; font-size:15px; }
.barra-resumo{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.barra-resumo #pedTotal2{ font-size:20px; white-space:nowrap; }
.dica-passo{ display:block; font-size:12px; color:var(--muted); margin-top:3px; }
.dica-passo b{ color:var(--brand); }
/* O número do passo é a navegação agora — precisa de área de toque. */
.passo{ min-height:52px; }
.escolhido{ flex:none; background:var(--brand-tint); padding:11px 16px; display:flex; align-items:center; gap:10px; }
.escolhido .grow{ flex:1; min-width:0; }
.escolhido strong{ display:block; font-size:13.5px; }
.escolhido span{ display:block; font-size:12px; color:var(--ink-2); margin-top:1px; }
.escolhido button{ appearance:none; background:var(--surface); border:1px solid var(--line-strong); border-radius:8px; padding:6px 11px; font:inherit; font-size:12px; font-weight:700; color:var(--ink); cursor:pointer; white-space:nowrap; }
/* O pedido gerencia a própria rolagem por dentro (passo a passo + barra
   fixa). Se a aba também rolasse, a barra saía da tela. */
body.mode-vendedor #vs-pedido.active{ display:flex; flex-direction:column; overflow:hidden; }

.pagamento{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; }
.forma-btn{ appearance:none; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); border-radius:11px; padding:11px 12px; font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; text-align:left; display:flex; flex-direction:column; gap:2px; }
.forma-btn small{ font-size:11px; color:var(--muted); font-weight:500; }
.forma-btn:hover{ border-color:var(--brand); }
.forma-btn[aria-pressed="true"]{ border-color:var(--brand); background:var(--brand-tint); }
.forma-btn[aria-pressed="true"] small{ color:var(--ink-2); }
.aviso-regra{ margin-top:10px; background:var(--warning-tint); color:var(--warning-ink); border-radius:10px; padding:10px 13px; font-size:12.5px; font-weight:600; }
.cod-produto{ font-family:var(--f-mono); font-size:12px; background:var(--surface-2); padding:2px 6px; border-radius:5px; color:var(--ink-2); }
.data-input{ padding:6px 8px; border-radius:8px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); font:inherit; font-size:12.5px; }
.data-input:hover{ border-color:var(--brand); }
input[type="date"], input[type="month"]{ color-scheme:inherit; }
.linha-inativa td{ opacity:.55; }
.aviso-box{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; padding:13px 0; border-bottom:1px solid var(--line); }
.aviso-box:last-child{ border-bottom:0; }
.aviso-box strong{ display:block; font-size:13.5px; }
.aviso-box span{ display:block; font-size:12.5px; color:var(--muted); margin-top:2px; }
.senha-linha{ display:flex; gap:8px; align-items:center; }
.senha-linha input{ flex:1; font-family:var(--f-mono); }
.senha-pronta{ display:flex; align-items:center; gap:12px; margin-top:12px; background:var(--good-tint); border-radius:11px; padding:12px 14px; }
.senha-pronta div{ flex:1; min-width:0; }
.senha-pronta small{ display:block; font-size:11.5px; color:var(--good-ink); font-weight:600; }
.senha-pronta code{ display:block; font-family:var(--f-mono); font-size:17px; font-weight:600; color:var(--ink); margin-top:3px; letter-spacing:.04em; user-select:all; }
.sheet-sec{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.sheet-sec h3{ font-size:14px; margin-bottom:10px; }
.perigo{ border-color:var(--critical); color:var(--critical-ink); }

.toast{ position:fixed; left:50%; bottom:calc(var(--nav-h) + 18px); transform:translate(-50%,14px); background:var(--ink); color:var(--paper); padding:12px 18px; border-radius:11px; font-size:13px; font-weight:600; opacity:0; pointer-events:none; z-index:2000; transition:opacity .2s, transform .2s; max-width:calc(100% - 32px); text-align:center; }
.toast.show{ opacity:1; transform:translate(-50%,0); }
.tag-pend{ background:var(--warning-tint); color:var(--warning-ink); font-size:10.5px; font-weight:700; padding:2px 6px; border-radius:5px; margin-left:6px; }

/* Lista de clientes para transferir, com caixinha de marcar. Rola por dentro
   para uma carteira de 80 petshops nao empurrar os botoes para fora da tela. */
.lista-carteira{ margin-top:10px; max-height:300px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.item-carteira{ cursor:pointer; gap:11px; }
.item-carteira input{ width:18px; height:18px; flex:none; margin:0; }
.item-carteira:hover{ background:var(--surface-2); }
/* Botao do WhatsApp na ficha do cliente. Verde do proprio WhatsApp, para a
   pessoa achar sem ler — e do lado do Ligar, que e a outra coisa que ela faz
   ali. */
.btn.zap{ background:#25D366; color:#0B2B14; border-color:#1FA850; font-weight:700; }
.btn.zap:hover{ background:#1FBE59; }
@media (prefers-color-scheme: dark){ .btn.zap{ color:#07200F; } }

/* Barra de busca + "todos" na tela de transferir clientes. */
.linha-busca{ display:flex; gap:10px; align-items:center; margin-top:14px; }
.linha-busca .searchbox{ flex:1; min-width:0; }
.linha-busca .linha-check{ padding:10px 13px; white-space:nowrap; }
/* segunda linha de uma celula (categoria/embalagem do produto) */
.cell-sub{ display:block; font-size:12px; color:var(--muted); margin-top:2px; font-weight:400; }