/* Vendas · Custo do produto — filtro subiu/desceu e coluna de variação.
   CSS próprio (não em components.css) pra não mexer em arquivo compartilhado por todos os setores. */

/* chip de filtro: .sw-chip existe, mas não tem estado ativo — como é um FILTRO e não um selo,
   precisa ficar claro qual está valendo. Mesmo tratamento do chip de conta do chat. */
.vc-wrap .sw-chip { cursor: pointer; }
.vc-wrap .sw-chip.on { background: var(--chocolate, #c75d2c); color: #fff; border-color: var(--chocolate, #c75d2c); }

/* alta de custo = ruim pra margem (vermelho); queda = bom (verde). Mesma convenção do resto do Sistema. */
.vc-sobe  { color: var(--danger, #c0532a); }
.vc-desce { color: var(--ok, #2e7d6b); }

/* ── ✓ Conferido + atalhos de filtro (02/10). SÓ tokens — régua do front. ── */
.vc-barra { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin: 4px 0 10px; }
.vc-atalhos { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.vc-grp { display: inline-flex; align-items: center; gap: 5px; padding-right: 10px; margin-right: 4px; border-right: 1px solid var(--line); }
.vc-grp:last-child { border-right: none; }
.vc-grp-t { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); margin-right: 2px; }
.vc-grp .sw-chip b { font-weight: 800; margin-left: 2px; }
.vc-exp { flex: 0 0 auto; white-space: nowrap; }
/* .vc-conf é o VISUAL do estado; clique (cursor/hover) só no <button>. Quem só lê Vendas recebe o mesmo
   estado num <span> — com hover de botão ele parecia clicável e não era. Fonte em propriedades separadas:
   `font: 600 12px inherit` é inválido (inherit não entra no atalho) e o navegador descartava a linha —
   o span herdava a fonte da célula e o botão a do navegador, e os dois não ficavam iguais. */
.vc-conf { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; white-space: nowrap;
  border: 1px dashed var(--line-2); background: var(--surface); color: var(--ink-soft);
  border-radius: 9px; padding: 4px 10px; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.3; }
button.vc-conf { cursor: pointer; }
span.vc-conf { cursor: default; }
button.vc-conf:hover { border-color: var(--primary); color: var(--primary); }
.vc-conf small { font-weight: 500; }
.vc-conf-ok { border: 1px solid var(--ok); border-style: solid; background: var(--ok-bg); color: var(--ok); font-weight: 700; }
button.vc-conf-ok:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
.vc-conf-re { border: 1px solid var(--warn); border-style: solid; background: var(--warn-bg); color: var(--warn); font-weight: 700; }
.vc-conf[disabled] { opacity: .55; cursor: progress; }