/* =============================================================
   Kallifon Vendedor — design system portado do protótipo aprovado
   (prototipos/app-vendedor.html do monitor). Acento = vermelho
   oficial Kallifon #b61f18 nos DOIS temas (PRD UX-1/UX-2).
   ============================================================= */

:root{
  --bg:#0e1116;
  --bg-soft:#161b22;
  --card:#1b2230;
  --card-2:#212a3b;
  --line:#2a3344;
  --txt:#e7ecf3;
  --txt-dim:#9aa7bd;
  --txt-mute:#6b7890;
  --accent:#b61f18;
  --accent-soft:rgba(182,31,24,.18);
  --accent-text:#ffb3ae;          /* texto sobre accent-soft no escuro */
  --green:#34d399;
  --green-soft:rgba(52,211,153,.14);
  --yellow:#fbbf24;
  --yellow-soft:rgba(251,191,36,.14);
  --red:#f87171;
  --red-soft:rgba(248,113,113,.14);
  --blue:#60a5fa;
  --blue-soft:rgba(96,165,250,.14);
  --orange:#fb923c;
  --orange-soft:rgba(251,146,60,.16);
  --gray-soft:rgba(107,120,144,.16);
  --whats:#25d366;
  --radius:16px;
  --shadow:0 8px 24px rgba(0,0,0,.35);
  --inset:#0e1420;
  --nav-bg:rgba(22,27,34,.96);
  --hairline:rgba(255,255,255,.07);
  --secao-bg:#12161e;            /* painel de seção: 1 tom abaixo do card */
  --secao-line:#232b39;
}
body.light{
  --bg:#f3f5fa;
  --bg-soft:#ffffff;
  --card:#ffffff;
  --card-2:#eef1f7;
  --line:#e3e8f1;
  --txt:#1a2333;
  --txt-dim:#56627a;
  --txt-mute:#8794a8;
  --accent:#b61f18;
  --accent-soft:rgba(182,31,24,.10);
  --accent-text:#b61f18;
  --green:#0f9d6b; --green-soft:rgba(15,157,107,.12);
  --yellow:#c98a00; --yellow-soft:rgba(201,138,0,.13);
  --red:#dc4d4d; --red-soft:rgba(220,77,77,.11);
  --blue:#2563eb; --blue-soft:rgba(37,99,235,.12);
  --orange:#ea580c; --orange-soft:rgba(234,88,12,.13);
  --gray-soft:rgba(135,148,168,.14);
  --shadow:0 8px 24px rgba(40,55,80,.10);
  --inset:#eef1f7;
  --nav-bg:rgba(255,255,255,.96);
  --hairline:rgba(0,0,0,.07);
  --secao-bg:#e9edf4;            /* painel de seção: cinza sutil, card branco flutua */
  --secao-line:#dbe1ec;
}

/* Header e footer seguem o tema (claro/escuro) como o resto do app;
   o vermelho da marca fica só no acento (item ativo, sino, logo clara). */

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--txt);
  min-height:100vh;transition:background .2s;
  font-variant-numeric:tabular-nums;
}
.app{max-width:430px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--accent-text);text-decoration:none}

/* ---- Topbar ---- */
.topbar{
  position:sticky;top:0;z-index:20;background:var(--nav-bg);backdrop-filter:blur(8px);
  padding:calc(12px + env(safe-area-inset-top)) 18px 10px;
  display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);
}
.topbar .logo{height:26px;display:block}
/* logo por tema: branca (logo.png) no escuro, preta (logo-preta.png) no claro */
body.light .topbar .logo-escuro{display:none}
body:not(.light) .topbar .logo-claro{display:none}
/* relógio (data + hora) — empurra o bloco da direita */
.topbar .relogio{margin-left:auto;text-align:right;font-size:11px;color:var(--txt-mute);line-height:1.3;font-variant-numeric:tabular-nums}
.topbar .relogio b{display:block;color:var(--txt-dim);font-size:13px;font-weight:800}
.topbar .quem{text-align:right;font-size:11px;color:var(--txt-mute);line-height:1.3}
.topbar .quem b{display:block;color:var(--txt-dim);font-size:12.5px}

/* sino de avisos (topbar) */
.sino{position:relative;font-size:20px;line-height:1;padding:2px 4px}
/* o relógio já é o espaçador da direita, então o sino não precisa de auto */
.sino-solto{margin-left:0}
.sino-badge{
  position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;
  background:var(--red);color:#fff;font-size:10px;font-weight:800;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
}
.sino-badge.off{display:none}
/* com aviso não lido o sino balança (rajada curta a cada 4s) — a bolinha parada vira paisagem.
   :has() acompanha o badge sozinho, inclusive quando o oob do "marcar lido" põe .off */
.sino:has(.sino-badge:not(.off)){animation:sino-balanca 4s ease-in-out infinite;transform-origin:50% 10%}
@keyframes sino-balanca{
  0%,20%,100%{transform:rotate(0)}
  3%{transform:rotate(18deg)} 6%{transform:rotate(-16deg)} 9%{transform:rotate(12deg)}
  12%{transform:rotate(-8deg)} 15%{transform:rotate(4deg)}
}
@media (prefers-reduced-motion:reduce){.sino{animation:none!important}}
.ponto-novo{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:6px;vertical-align:1px}
.aviso.novo{border-color:var(--accent)}
.aviso + .aviso{margin-top:8px}

/* badge de impersonação (gestor) */
.leitura-badge{
  display:flex;align-items:center;gap:8px;justify-content:center;
  background:var(--yellow-soft);color:var(--yellow);
  font-size:12px;font-weight:700;padding:7px 12px;border-bottom:1px solid var(--line);
}
.leitura-badge a{color:inherit;text-decoration:underline}

/* ---- Conteúdo ---- */
.conteudo{flex:1;padding:16px 16px calc(84px + env(safe-area-inset-bottom))}
.secao-titulo{font-size:13px;font-weight:700;color:var(--txt-dim);margin:18px 2px 10px;text-transform:uppercase;letter-spacing:.4px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.card + .card{margin-top:12px}

/* Atalho "Consignado em aberto" (aba Vendas) com ênfase: card de ação com o
   valor a cobrar em destaque + acento da marca. Estado vazio = "em dia" (verde). */
.consig-acao{display:flex;align-items:center;gap:13px;margin-top:10px;padding:15px;
  text-decoration:none;color:var(--txt);
  background:var(--accent-soft);border-color:var(--accent)}
.consig-acao .consig-ico{flex:none;width:44px;height:44px;border-radius:13px;
  display:grid;place-items:center;font-size:21px;background:var(--accent);color:#fff;box-shadow:var(--shadow)}
.consig-mid{flex:1;min-width:0}
.consig-rot{display:block;font-size:10.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;color:var(--accent-text)}
.consig-val{display:block;font-size:21px;font-weight:800;color:var(--txt);line-height:1.15;
  margin-top:1px;font-variant-numeric:tabular-nums}
.consig-sub{display:block;font-size:12px;color:var(--txt-dim);margin-top:2px}
.consig-chev{flex:none;font-size:20px;font-weight:700;color:var(--accent-text)}
.consig-vazio{display:flex;align-items:center;gap:10px;margin-top:10px;padding:14px;
  text-decoration:none;color:var(--txt)}
.consig-vazio .consig-ico-ok{flex:none;width:32px;height:32px;border-radius:9px;
  display:grid;place-items:center;font-size:15px;background:var(--green-soft);color:var(--green)}
.consig-rot-ok{display:block;font-size:13px;font-weight:700;color:var(--txt)}

/* Seção da Home: painel sutil que agrupa um assunto (Cobertura/Promoções/Metas).
   Fundo 1 tom diferente do card, para os cards internos "flutuarem" sem cor forte. */
.secao{background:var(--secao-bg);border:1px solid var(--secao-line);
  border-radius:18px;padding:12px 12px 14px;margin-top:14px}
.secao:first-child{margin-top:2px}
.secao-cab{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:2px 4px 4px}
.secao-cab h2{margin:0;font-size:15px;font-weight:800}
.secao-cab .cab-extra{font-size:12px;color:var(--txt-dim);font-weight:700;white-space:nowrap}
/* dentro da seção o primeiro card não precisa empurrar (o cabeçalho já espaça) */
.secao > .faixa:first-of-type{margin-top:8px}

/* faixa de meta (dia principal / semana compacta) */
.faixa{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-top:12px}
.faixa .rotulo{font-size:12px;color:var(--txt-dim);font-weight:700}
.faixa .valor{font-size:22px;font-weight:800;margin:2px 0 8px}
.faixa.compacta .valor{font-size:16px}
.bar{height:10px;border-radius:6px;background:var(--inset);overflow:hidden}
.bar>span{display:block;height:100%;border-radius:6px;background:var(--accent)}
.bar>span.t-ok{background:var(--green)} .bar>span.t-warn{background:var(--yellow)} .bar>span.t-bad{background:var(--red)}
.pct-ok{color:var(--green)} .pct-warn{color:var(--yellow)} .pct-bad{color:var(--red)}
.extra-tit{font-size:12.5px;color:var(--txt-dim);font-weight:700;margin-bottom:8px}
.extra-linha{padding:9px 0;border-top:1px solid var(--line)}
.extra-linha:first-of-type{border-top:none;padding-top:2px}
.extra-topo{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:5px}
.extra-nome{font-size:13px;font-weight:600;color:var(--txt);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.extra-selo{font-size:14px;font-weight:800;flex:none}
.extra-sub{font-size:11.5px;color:var(--txt-mute);margin-top:4px}
.faixa .sub{display:flex;justify-content:space-between;font-size:12px;color:var(--txt-dim);margin-top:6px}

/* Número da meta-alvo: sublinhado e maior (legível no celular). O "de"/"/" que
   antecede fica em peso normal e apagado — só o número ganha destaque. */
.meta-alvo{font-size:16px;font-weight:800;color:var(--txt);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1.5px}
.de-alvo{font-size:13px;font-weight:400;color:var(--txt-dim)}

/* Semanas do mês: a atual em destaque, as demais compactas numa linha */
.semana-atual{background:var(--card);border:1.5px solid var(--accent);border-radius:var(--radius);padding:13px 15px;margin-top:12px}
.semana-atual-topo{display:flex;align-items:center;gap:10px}
.semana-atual .ini{width:38px;height:38px;flex:0 0 38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;background:var(--accent-soft);color:var(--accent-text)}
.semana-atual-per{flex:1;min-width:0;font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.semana-atual-valor{font-size:20px;font-weight:800;margin:8px 0 6px}
.semana-mini{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--card);border:1px solid var(--line);border-radius:12px;margin-top:8px}
.semana-mini .ini-mini{flex:0 0 auto;min-width:22px;font-weight:800;font-size:11.5px;color:var(--txt-mute)}
.semana-mini-per{flex:0 0 auto;font-size:12px;font-weight:600;color:var(--txt-dim)}
.semana-mini-meta{flex:1;min-width:0;text-align:right;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.semana-mini .meta-alvo{font-size:12.5px}
.semana-mini .de-alvo{font-size:12px}

/* Meta do dia: mesmo padrão "realizado de meta" da Meta do mês */
.faixa.meta-dia .md-dica{font-size:11px;color:var(--txt-mute);margin-top:8px}
/* status + motivo da planilha ("sem meta · Aniversario da cidade"): o motivo
   pode ser longo, então ele fica à direita e quebra em vez de espremer o % */
.faixa.meta-dia .sub #md-status{flex:1;min-width:0;text-align:right}

/* Dia do calendário: hoje anelado, selecionado em destaque, feedback ao tocar */
.cal-dia.hoje{box-shadow:inset 0 0 0 1.5px var(--accent)}
.cal-dia.sel{outline:2px solid var(--accent);outline-offset:1px}
.cal-dia:active{transform:scale(.94)}

/* Placar da loja (anônimo) */
.placar-resumo{font-size:13px;color:var(--txt-dim);margin-bottom:10px}
.placar-resumo b{font-size:15px}
.placar-linha{display:flex;align-items:center;gap:9px;padding:8px 0;border-top:1px solid var(--line)}
.placar-linha:first-of-type{border-top:none;padding-top:2px}
.placar-linha.eu{background:var(--inset);margin:0 -8px;padding-left:8px;padding-right:8px;border-radius:8px;border-top:none}
.placar-pos{font-size:12px;font-weight:700;color:var(--txt-mute);min-width:22px;font-variant-numeric:tabular-nums}
.placar-quem{font-size:13px;font-weight:600;color:var(--txt);min-width:48px}
.placar-linha.eu .placar-quem{color:var(--accent)}
.placar-bar{flex:1}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.kpis.duas{grid-template-columns:repeat(2,1fr)}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px}
.kpi .k-rotulo{font-size:11px;color:var(--txt-mute);font-weight:700}
.kpi .k-valor{font-size:17px;font-weight:800;margin-top:3px}
.kpi .k-sub{font-size:11px;color:var(--txt-dim);margin-top:2px}
/* Sequência do faturamento previsto (22/09/2026): já no TOTVS em verde, a acertar em amarelo */
.kpi.kpi-pago{background:var(--green-soft)} .kpi.kpi-pago .k-rotulo{color:var(--green)}
.kpi.kpi-pendente{background:var(--yellow-soft)} .kpi.kpi-pendente .k-rotulo{color:var(--yellow)}
.kpi.kpi-total{border:1.5px solid var(--green)} .kpi.kpi-total .k-valor{color:var(--green)}

/* lista de clientes / cards de item */
.cli{display:flex;align-items:center;gap:12px;padding:13px 14px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;cursor:pointer;transition:.15s;margin-top:8px}
.cli:active{transform:scale(.985)}
.cli .ini{width:40px;height:40px;border-radius:11px;flex:0 0 40px;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:14px;background:var(--card-2);color:var(--txt-dim)}
.cli .info{flex:1;min-width:0}
.cli .nome{font-weight:700;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cli .meta-linha{font-size:12px;color:var(--txt-dim);margin-top:2px}

/* card da carteira: empilhado (nome/cód no topo + carimbos embaixo) */
.cli-carteira{flex-direction:column;align-items:stretch;gap:8px}
.cli-topo{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.cli-topo .nome{flex:1;min-width:0}
.cli-cod{flex:none;font-size:11.5px;font-weight:600;color:var(--txt-mute)}
.cli-tags{display:flex;flex-wrap:wrap;gap:6px}

/* fundo de cor do card por status (mesma paleta dos chips) */
.cli-ativo{background:var(--green-soft)}
.cli-novo{background:var(--blue-soft)}
.cli-reativado{background:var(--orange-soft)}
.cli-inativo{background:var(--red-soft)}
.cli-excluido{background:var(--gray-soft)}

.badge{font-size:11px;font-weight:700;padding:3px 8px;border-radius:8px;display:inline-block}
.b-danger{background:var(--red-soft);color:var(--red)}
.b-ok{background:var(--green-soft);color:var(--green)}
.b-warn{background:var(--yellow-soft);color:var(--yellow)}
.b-info{background:var(--blue-soft);color:var(--blue)}
.b-orange{background:var(--orange-soft);color:var(--orange)}
.b-accent{background:var(--accent-soft);color:var(--accent-text)}
.b-tag{background:var(--card-2);color:var(--txt-dim)}
.b-mute{background:var(--card-2);color:var(--txt-mute)}
/* níveis do Kallicash: cada medalha na sua cor (ouro/prata/bronze) */
.b-ouro{background:var(--yellow-soft);color:var(--yellow)}
.b-prata{background:var(--gray-soft);color:var(--txt-dim)}
.b-bronze{background:var(--orange-soft);color:var(--orange)}
/* carimbo de faturamento acumulado: mesmo fundo dos outros, valor em verde */
.b-fat{color:var(--green)}
/* carimbo de faturamento DO MÊS: destaque por borda+texto colorido, fundo opaco
   (card-2) p/ não borrar sobre o fundo colorido do card. Vem primeiro na fileira. */
.b-mes{background:var(--card-2);font-weight:800;border:1.5px solid var(--line);padding:4px 10px}
.b-mes-pos{color:var(--green);border-color:var(--green)}
.b-mes-neg{color:var(--red);border-color:var(--red)}
.b-mes-zero{color:var(--txt-mute)}

/* card do faturamento DO MÊS no detalhe do cliente: destaque colorido por sinal */
.kpi-mes{border-width:1.5px}
.kpi-mes.pos{border-color:var(--green)} .kpi-mes.pos .k-valor{color:var(--green)}
.kpi-mes.neg{border-color:var(--red)}   .kpi-mes.neg .k-valor{color:var(--red)}
/* bloco destacado da última compra (ênfase de recência no detalhe) */
.ultima-compra{display:flex;align-items:center;gap:8px;background:var(--card-2);
  border-radius:10px;padding:8px 10px;margin-top:10px}

/* chips de filtro */
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;font-size:13px;font-weight:600;padding:8px 14px;border-radius:20px;
  border:1px solid var(--line);background:var(--card);color:var(--txt-dim);cursor:pointer}
.chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-text)}
/* cor por status: Ativo verde · Novo azul · Reativado laranja · Inativo vermelho · Excluído cinza */
.chip-ativo{color:var(--green)}
.chip-novo{color:var(--blue)}
.chip-reativado{color:var(--orange)}
.chip-inativo{color:var(--red)}
.chip-excluido{color:var(--txt-mute)}
.chip-ativo.on{background:var(--green-soft);border-color:var(--green);color:var(--green)}
.chip-novo.on{background:var(--blue-soft);border-color:var(--blue);color:var(--blue)}
.chip-reativado.on{background:var(--orange-soft);border-color:var(--orange);color:var(--orange)}
.chip-inativo.on{background:var(--red-soft);border-color:var(--red);color:var(--red)}
.chip-excluido.on{background:var(--card-2);border-color:var(--txt-mute);color:var(--txt-dim)}

/* filtro de perfil (carteira) */
.filtro-perfil{display:flex;align-items:center;gap:10px;margin-top:10px}
.filtro-perfil label{font-size:13px;font-weight:700;color:var(--txt-dim);flex:none}
.filtro-perfil select{flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--txt);
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 12px;cursor:pointer}
.filtro-perfil select:focus{outline:none;border-color:var(--accent)}
.filtros-contador{font-size:12px;font-weight:700;color:var(--txt-mute);text-align:right;margin:8px 2px 0}

/* switch de recência R4 "inativando em até 10 dias" (carteira) */
.switch-linha{display:flex;align-items:center;gap:10px;margin-top:12px;padding:2px}
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;flex:1;min-width:0}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .trilho{flex:none;position:relative;width:40px;height:22px;border-radius:22px;
  background:var(--line);transition:background .18s}
.switch .trilho::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;
  border-radius:50%;background:#fff;transition:transform .18s;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.switch input:checked + .trilho{background:var(--accent)}
.switch input:checked + .trilho::after{transform:translateX(18px)}
.switch .rotulo{font-size:13px;font-weight:600;color:var(--txt-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* controle segmentado (compra/contato no mês: 3 estados) */
.seg-linha{display:flex;align-items:center;gap:10px;margin-top:10px}
.seg-rotulo{font-size:13px;font-weight:700;color:var(--txt-dim);flex:none}
.segmento{display:flex;flex:1;min-width:0;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:3px;gap:3px}
.seg{flex:1;text-align:center;font-size:12.5px;font-weight:700;color:var(--txt-dim);
  padding:7px 4px;border-radius:9px;cursor:pointer;white-space:nowrap}
.seg.on{background:var(--accent-soft);color:var(--accent-text)}
/* <button> usando a casca de .cli / .seg (Perfil: tema, instalar, atualizar) */
button.cli,button.seg{font:inherit;color:inherit;-webkit-appearance:none;appearance:none}
button.seg{background:none;border:none}
button.cli{width:100%;text-align:left}
/* .cli .nome corta com ellipsis; instruções longas precisam quebrar */
.cli .meta-linha.texto-solto{white-space:normal;line-height:1.45}
.info-btn{border:none;background:none;color:var(--txt-mute);font-size:13px;
  cursor:pointer;padding:0 0 0 3px;line-height:1;vertical-align:baseline}
.ajuda{font-size:11.5px;line-height:1.45;color:var(--txt-dim);background:var(--card-2);
  border:1px solid var(--line);border-radius:10px;padding:8px 11px;margin-top:6px}
.ajuda strong{color:var(--txt);font-weight:700}

/* botões */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:46px;
  border:none;border-radius:13px;font-size:14.5px;font-weight:700;cursor:pointer;transition:.15s}
.btn:active{transform:scale(.98)}
.btn-primario{background:var(--accent);color:#fff}
.btn-whats{background:var(--whats);color:#04331a}
.btn-fantasma{background:var(--card);border:1px solid var(--line);color:var(--txt)}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* formulários */
.campo{margin-top:14px}
.campo label{display:block;font-size:12.5px;font-weight:700;color:var(--txt-dim);margin-bottom:6px}
.campo input,.campo textarea,.campo select{
  width:100%;background:var(--inset);border:1px solid var(--line);border-radius:12px;
  color:var(--txt);font-size:15px;padding:12px 14px;outline:none}
.campo input:focus,.campo textarea:focus{border-color:var(--accent)}
.erros{background:var(--red-soft);color:var(--red);border-radius:12px;padding:10px 14px;font-size:13px;margin-top:12px}

/* ---- Carimbo de frescor do estoque (aba Estoque) ----
   A HORA em destaque, não só a data: o ETL regrava o saldo de hora em hora e a
   vendedora decide em cima disso. Fica âmbar quando a carga atrasou. */
.coleta{display:inline-flex;align-items:baseline;gap:5px;flex:none;
  background:var(--card-2);border:1px solid var(--line);border-radius:20px;
  padding:5px 11px;font-size:11.5px;color:var(--txt-dim);white-space:nowrap}
.coleta strong{font-size:14px;font-weight:800;color:var(--txt);
  font-variant-numeric:tabular-nums}
.coleta-dia{color:var(--txt-mute)}
.coleta-velha{background:var(--yellow-soft);border-color:transparent;color:var(--yellow)}
.coleta-velha strong{color:var(--yellow)}
.coleta-velha .coleta-dia{color:var(--yellow)}

/* ---- Filtros da aba Estoque: tipo / grupo / tema ----
   Três dropdowns lado a lado em 430px. Viraram select (e não chips) porque são
   listas longas — a loja 8 tem 10 grupos e 13+ temas, e uma fileira de chips
   roláveis esconderia a maioria das opções atrás de um arraste horizontal. */
.filtros-est{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.filtros-est label{display:flex;flex-direction:column;gap:3px;min-width:0}
.filtros-est label > span{font-size:10px;font-weight:700;color:var(--txt-mute);
  text-transform:uppercase;letter-spacing:.4px;padding-left:2px}
.filtros-est select{width:100%;background:var(--inset);border:1px solid var(--line);
  border-radius:11px;color:var(--txt);font-size:12.5px;padding:9px 8px;outline:none;
  appearance:none;text-overflow:ellipsis}
.filtros-est select:focus{border-color:var(--accent)}
/* filtro ativo se destaca: ela precisa ver que a lista está recortada */
.filtros-est select:not([data-vazio]){border-color:var(--line)}
/* 2ª linha: ordenar + situação, DUAS colunas. Cinco selects numa fileira só
   deixariam cada um com ~85px em 430px e "Mais vende na rede" viraria "Mais ve…".
   Esta linha sobrevive à busca (a de cima não) — ver _estoque_filtros.html. */
.filtros-est-2{grid-template-columns:repeat(2,1fr)}

/* linha do ⓘ que abre a explicação do cálculo */
.ajuda-linha{display:flex;align-items:center;gap:5px;margin:10px 2px 0;
  font-size:11.5px;color:var(--txt-mute)}
.ajuda-linha .info-btn{font-size:13px}
.ajuda .amarelo-ex{color:var(--yellow);font-weight:700}
.ajuda .vermelho-ex{color:var(--red);font-weight:700}

/* ---- Tabela "Bom pra oferecer hoje" (aba Estoque) ----
   Desenhada p/ CABER nos 430px sem rolar: 4 colunas visuais carregando 7 dados.
   A 1ª agrupa peça/cor/tam/ref em duas linhas; os números vão à direita, sob um
   cabeçalho de 2 níveis que separa VENDE/MÊS de ESTOQUE (senão "rede/loja/CD/
   loja" viram quatro números sem sentido). Grupo virou chip, não coluna. */
.tab-est{width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed}
.tab-est th{font-size:9.5px;font-weight:700;color:var(--txt-mute);text-transform:uppercase;
  letter-spacing:.3px;padding:4px 2px;text-align:center;white-space:nowrap}
.tab-est th.peca{text-align:left;padding-left:8px}
/* linha de cima do cabeçalho: agrupa os pares e separa venda de estoque */
.tab-est th.gr{border-bottom:1px solid var(--line);font-size:9px;color:var(--txt-dim)}
.tab-est th.gr-vende{border-left:1px solid var(--line)}
.tab-est th.gr-est{border-left:1px solid var(--line)}
.tab-est td{padding:7px 2px;text-align:center;vertical-align:middle;
  border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.tab-est td.peca{text-align:left;padding-left:8px;overflow:hidden}
.tab-est td.sep{border-left:1px solid var(--line)}
.tab-est tr:active{background:var(--card-2)}
/* célula da peça: nome em 1 linha + cor/tam/ref embaixo, ambos truncados */
.tab-est .pos{font-size:10px;font-weight:700;color:var(--txt-mute);margin-right:4px}
.tab-est .pnome{font-weight:700;font-size:12.5px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;display:block}
.tab-est .pmeta{font-size:10.5px;color:var(--txt-dim);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;display:block;margin-top:1px}
/* número forte = o que ela decide olhando; fraco = contexto */
.tab-est .n-forte{font-weight:700;font-size:13px}
.tab-est .n-fraco{color:var(--txt-dim)}
.preco-de{font-size:10px;font-weight:600;color:var(--txt-dim)}
/* Semáforo de duas faixas no estoque da loja, sem gastar uma coluna.
   Classes PRÓPRIAS com as MESMAS variáveis da régua de tier (.pct-*), e não as
   classes dela: o hue é vocabulário do app inteiro (vermelho = atenção já
   aparece em chip inativo, badge danger, KPI negativo), mas .pct-bad nasceu
   para percentual de meta — reusar a classe faria uma mudança na Meta mexer
   no estoque em silêncio.
   `n-zero` vem DEPOIS de propósito: com estoque 0 o cinza ganha. */
.tab-est .n-acabando{color:var(--red);font-weight:800}
.tab-est .n-risco{color:var(--yellow);font-weight:800}
.tab-est .n-zero{color:var(--txt-mute)}

/* ---- Grade cor × tamanho da REFERÊNCIA (tela do produto) ----
   Aqui a matriz tem colunas de verdade (a referência da loja 8 tem até 74
   códigos), então ela ROLA na horizontal dentro do próprio card — o corpo da
   página nunca rola de lado. A coluna da cor fica presa à esquerda: rolando
   até o GG, sem ela a linha vira uma fileira de números órfãos. */
.grade-wrap{padding:8px 0;overflow-x:auto}
.grade{border-collapse:collapse;font-size:12.5px;min-width:100%}
.grade th{font-size:10px;font-weight:700;color:var(--txt-mute);text-transform:uppercase;
  letter-spacing:.3px;padding:5px 9px;text-align:center;white-space:nowrap}
.grade td{padding:7px 9px;text-align:center;border-top:1px solid var(--line);
  font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.grade .cor-col{position:sticky;left:0;background:var(--card);text-align:left;
  padding-left:10px;font-weight:700;z-index:1}
.grade th.cor-col{background:var(--card)}
.grade .total-col{color:var(--txt-dim);font-weight:800;border-left:1px solid var(--line)}
.grade .g-vazia{color:var(--txt-mute);font-weight:400}
/* a peça em que ela clicou: ponto de partida numa matriz que pode ser grande */
.grade .g-clicada{background:var(--accent-soft);color:var(--accent-text);
  border-radius:8px;font-weight:800}

/* estados vazios */
.vazio{text-align:center;color:var(--txt-dim);font-size:14px;padding:28px 10px}

/* ---- Bottom nav ---- */
.bottomnav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;z-index:30;
  background:var(--nav-bg);backdrop-filter:blur(10px);border-top:1px solid var(--hairline);
  display:flex;padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
.bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 0;color:var(--txt-mute);font-size:10.5px;font-weight:700;border-radius:10px}
.bottomnav a .ic{font-size:20px;line-height:1}
.bottomnav a.on{color:var(--accent-text)}
/* botão central elevado (Início), estilo FAB do modelo */
.bottomnav .central .ic{
  width:46px;height:46px;margin-top:-26px;margin-bottom:1px;
  display:flex;align-items:center;justify-content:center;font-size:23px;
  border-radius:50%;background:var(--accent);color:#fff;
  border:4px solid var(--nav-bg);box-shadow:0 6px 16px rgba(182,31,24,.38);
  transition:transform .12s ease}
.bottomnav .central:active .ic{transform:scale(.94)}
.bottomnav .central.on{color:var(--accent-text)}
.bottomnav .central.on .ic{box-shadow:0 7px 18px rgba(182,31,24,.5)}

/* ---- Bottom sheet ---- */
.sheet-fundo{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:40;display:none}
.sheet-fundo.aberto{display:block}
.sheet{position:fixed;bottom:0;left:50%;transform:translate(-50%,105%);width:100%;max-width:430px;z-index:41;
  background:var(--bg-soft);border-radius:20px 20px 0 0;padding:18px 18px calc(20px + env(safe-area-inset-bottom));
  transition:transform .22s ease;box-shadow:var(--shadow)}
.sheet.aberto{transform:translate(-50%,0)}
.sheet .alca{width:44px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 14px}
.sheet h3{margin:0 0 12px;font-size:16px}

/* ---- Toast ---- */
#toast{position:fixed;bottom:calc(92px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  z-index:60;background:var(--card-2);color:var(--txt);border:1px solid var(--line);
  padding:11px 18px;border-radius:13px;font-size:13.5px;font-weight:600;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:opacity .2s;max-width:90%;text-align:center}
#toast.mostrar{opacity:1}

/* ---- Skeleton (loading htmx) ---- */
.htmx-indicator{display:none}
.htmx-request .htmx-indicator{display:block}
.htmx-request .esconde-carregando{display:none}
.skeleton{border-radius:14px;background:linear-gradient(90deg,var(--card) 25%,var(--card-2) 50%,var(--card) 75%);
  background-size:200% 100%;animation:brilho 1.2s infinite;height:64px;margin-top:8px}
@keyframes brilho{from{background-position:200% 0}to{background-position:-200% 0}}

/* ---- Calendário de metas (aba Meta) ---- */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-h{text-align:center;font-size:10.5px;font-weight:800;color:var(--txt-mute);padding:2px 0}
.cal-dia{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:44px;border-radius:10px;background:var(--card-2);border:1px solid transparent}
.cal-dia b{font-size:12px}
.cal-dia i{font-style:normal;font-size:9.5px;font-weight:700;margin-top:1px}
.cal-dia.bateu{background:var(--green-soft);color:var(--green);border-color:var(--green)}
.cal-dia.quase{background:var(--yellow-soft);color:var(--yellow);border-color:var(--yellow)}
.cal-dia.nao{background:var(--red-soft);color:var(--red)}
.cal-dia.folga{color:var(--txt-mute)}
.cal-dia.sem_meta{color:var(--txt-mute);opacity:.7}
.cal-dia.futuro{opacity:.35}

/* ---- Telas soltas (login / sem perfil / offline) ---- */
.tela-solta{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px}
.tela-solta .marca{margin-bottom:26px;text-align:center}
.tela-solta .marca img{height:38px}
.tela-solta .cartao{width:100%;max-width:360px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px}
.tela-solta h1{font-size:19px;margin:0 0 4px}
.tela-solta .sub{font-size:13.5px;color:var(--txt-dim);margin:0 0 10px}

/* ---- Equipe (seletor do gestor) ---- */
.loja-grupo{margin-top:16px}
.loja-grupo .loja-nome{font-size:13.5px;font-weight:800;color:var(--txt-dim);margin:0 2px 8px}

/* Aniversários: linha da tela de acompanhamento (nome + form de data).
   O form fica DENTRO da linha e encolhe primeiro no celular estreito. */
.linha-aniv{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 14px;border-bottom:1px solid var(--line)}
.linha-aniv:last-child{border-bottom:none}
.linha-aniv input[type=date]{font-size:13px;padding:6px 8px;border-radius:8px;
  border:1px solid var(--line);background:var(--bg);color:var(--txt);min-width:0}
.btn-mini{font-size:13px;font-weight:700;padding:7px 12px;border-radius:8px;
  border:1px solid var(--accent);background:var(--accent-soft);color:var(--accent-text);
  cursor:pointer;white-space:nowrap}

/* ---- Leitor de código de barras pela câmera (tela de preço) ----
   O botão nasce com [hidden] no HTML e só aparece quando o JS confirma que este
   navegador tem getUserMedia. A regra [hidden] abaixo é obrigatória porque
   `display` vindo de classe do autor VENCE o `[hidden]{display:none}` que o
   navegador aplica — sem ela o botão apareceria em aparelho sem câmera. */
.campo-bipe{position:relative}
.campo-bipe input[type=search]{padding-right:52px}
/* O botão nasceu em `accent-soft` e o dono não o achava na tela (09/09): num
   campo cinza-claro, um cinza-avermelhado de 18% de opacidade não é botão, é
   textura. Fundo cheio, branco por cima e a sombra que o descola do campo. */
.bipe-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  border:none;border-radius:10px;background:var(--accent);color:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.28);
  font-size:20px;line-height:1;cursor:pointer}
.bipe-btn[hidden]{display:none}
.bipe-btn:active{transform:translateY(-50%) scale(.94)}

/* Faixa com a borda da marca — para o atalho que precisa ser achado de
   primeira no meio de uma tela cheia de cards iguais. */
.faixa.destaque{border-color:var(--accent)}
.preco-peca{border:1.5px solid var(--accent)}

/* O overlay é controlado por CLASSE (.aberto), como os sheets do app, e não por
   [hidden] — mesma armadilha de especificidade da regra acima. */
.leitor{position:fixed;inset:0;z-index:80;background:#000;
  display:none;flex-direction:column;align-items:center;justify-content:center}
.leitor.aberto{display:flex}
.leitor video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.leitor-moldura{position:relative;width:min(82vw,420px);height:150px;
  border:2px solid rgba(255,255,255,.9);border-radius:14px;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.45)}
.leitor-rodape{position:absolute;left:0;right:0;bottom:0;padding:18px 20px 26px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  background:linear-gradient(transparent,rgba(0,0,0,.75) 40%)}
.leitor-msg{color:#fff;font-size:14px;line-height:1.4;text-align:center;max-width:340px;
  text-shadow:0 1px 3px rgba(0,0,0,.8)}
.leitor-diag{color:rgba(255,255,255,.75);font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em;text-align:center}
.leitor-diag[hidden]{display:none}
.leitor-fechar{border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.5);
  color:#fff;font-size:15px;font-weight:700;padding:11px 26px;border-radius:12px;
  cursor:pointer}