/* kit.css — componentes do Jerico sobre o design system herdado (base.css).
   Os tokens (--bg, --purple-light, --font-display…) vêm do base.css. */

/* ============================================================
   0. ESTRUTURA DA PÁGINA
   ============================================================ */
body { overflow-x: hidden; }

.kit-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
  background: rgba(7, 5, 15, .18);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, .03);
  position: sticky; top: 0; z-index: 50;
}
.kit-brand { display: flex; align-items: baseline; gap: 12px; }
.kit-brand b {
  font-family: var(--font-display); font-size: 22px; font-weight: 800;
  letter-spacing: -.02em; color: #fff;
}
.kit-brand span {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--purple-light);
}
.kit-meta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  color: var(--text-muted); text-align: right; line-height: 1.6;
}

.kit-layout {
  display: grid; grid-template-columns: 220px 1fr;
  gap: 28px; padding: 28px 24px 80px; max-width: 1560px; margin: 0 auto;
  position: relative; z-index: 1;
}

/* --- índice lateral --- */
.kit-nav { position: sticky; top: 90px; align-self: start; }
.kit-nav-title {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 10px 12px; font-family: var(--font-mono);
}
.kit-nav a {
  display: block; padding: 7px 12px; border-radius: 8px;
  font-size: 13px; color: var(--text-dim); text-decoration: none;
  border-left: 2px solid transparent; transition: all .15s;
}
.kit-nav a:hover { color: #fff; background: rgba(255, 255, 255, .03); }
.kit-nav a.on { color: #fff; border-left-color: var(--purple-light); background: rgba(139, 92, 246, .1); }
.kit-nav hr { border: none; border-top: 1px solid var(--border); margin: 14px 12px; }
.kit-nav .grp {
  font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.28); margin: 16px 0 6px 12px; font-family: var(--font-mono);
}

/* --- seções --- */
.kit-sec { margin-bottom: 46px; scroll-margin-top: 90px; }
.kit-sec > h2 {
  font-family: var(--font-display); font-size: 20px; font-weight: 800;
  margin: 0 0 4px; color: #fff; display: flex; align-items: center; gap: 10px;
}
.kit-sec > h2 .tag {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 20px;
  background: rgba(74, 222, 128, .12); border: 1px solid rgba(74, 222, 128, .35);
  color: var(--green); font-weight: 700;
}
.kit-sec > h2 .tag.herdado {
  background: rgba(139, 92, 246, .12); border-color: rgba(167, 139, 250, .35);
  color: var(--purple-light);
}
.kit-sec > p.desc {
  font-size: 13px; color: var(--text-muted); margin: 0 0 18px; max-width: 760px; line-height: 1.7;
}
.kit-demo {
  background: rgba(255, 255, 255, .012);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
}
.kit-note {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
  margin-top: 12px; padding-left: 12px; border-left: 2px solid rgba(167,139,250,.3);
  line-height: 1.7;
}

/* ============================================================
   1. KPI CARD  (herdado do ASNO)
   ============================================================ */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; }

.kpi {
  background: rgba(255, 255, 255, .02);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 18px;
  position: relative; overflow: hidden;
  transition: border-color .2s, transform .2s;
}
.kpi:hover { border-color: var(--border-neon); transform: translateY(-2px); }
.kpi::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--purple-light), transparent);
  opacity: .5;
}
.kpi-head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.kpi-ico {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  font-size: 12px; flex-shrink: 0;
  background: rgba(139, 92, 246, .14); border: 1px solid rgba(139, 92, 246, .3);
  color: var(--purple-light);
}
.kpi-ico.cyan  { background: rgba(56,189,248,.12);  border-color: rgba(56,189,248,.3);  color: var(--cyan); }
.kpi-ico.green { background: rgba(74,222,128,.12);  border-color: rgba(74,222,128,.3);  color: var(--green); }
.kpi-ico.amber { background: rgba(251,191,36,.12);  border-color: rgba(251,191,36,.3);  color: var(--amber); }
.kpi-ico.pink  { background: rgba(244,114,182,.12); border-color: rgba(244,114,182,.3); color: var(--pink); }
.kpi-label {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-muted); font-family: var(--font-mono); line-height: 1.4;
}
.kpi-val {
  font-family: var(--font-num); font-size: 34px; font-weight: 900;
  line-height: 1; color: #fff; letter-spacing: -.01em;
  /* dígitos de mesma largura: sem isto o número muda de comprimento a
     cada atualização e o card treme */
  font-variant-numeric: tabular-nums;
}
.kpi-val .cur { font-size: 17px; font-weight: 700; color: var(--text-muted); margin-right: 3px; }
.kpi-val .suf { font-size: 15px; font-weight: 600; color: var(--text-muted); margin-left: 4px; }
.kpi-sub { font-size: 12px; color: var(--text-dim); margin-top: 7px; line-height: 1.5; }

/* ============================================================
   2. DELTA vs. período anterior  (herdado)
   ============================================================ */
.delta { font-size: 12px; font-family: var(--font-mono); display: inline-flex; align-items: center; gap: 5px; }
.delta.up   { color: var(--green); }
.delta.down { color: var(--red); }
.delta.flat { color: var(--text-muted); }
.delta .ref { color: var(--text-muted); }

/* ============================================================
   3. BARRA POR FAIXA  (herdado — verde <60, âmbar 60–80, vermelho ≥80)
   ============================================================ */
.bar { height: 5px; background: rgba(255, 255, 255, .06); border-radius: 4px; overflow: hidden; margin-top: 12px; }
.bar > i { display: block; height: 100%; border-radius: 4px; transition: width .6s cubic-bezier(.4,0,.2,1), background .3s; }
.bar > i.ok    { background: linear-gradient(90deg, #22c55e, #4ade80); }
.bar > i.warn  { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.bar > i.crit  { background: linear-gradient(90deg, #dc2626, #f87171); }
.bar > i.info  { background: linear-gradient(90deg, var(--cyan), var(--purple-light)); }
.bar.lg { height: 8px; }

/* ============================================================
   4. QUOTA DE IA
   ============================================================ */
.quota {
  background: rgba(139, 92, 246, .05);
  border: 1px solid rgba(167, 139, 250, .25);
  border-radius: var(--radius); padding: 18px; max-width: 420px;
}
.quota-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.quota-name { display: flex; align-items: center; gap: 9px; }
.quota-name b { font-size: 14px; color: #fff; font-weight: 700; }
.quota-pct { font-family: var(--font-num); font-size: 26px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.quota-win { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: var(--text-muted); margin-top: 3px; }
.quota-nums { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-dim); margin-top: 10px; }
/* Rate limit responde outra pergunta que o orcamento: quanto resta na janela
   de minutos, nao no mes. Separado para nao ser lido como parte do gasto. */
.quota-rate {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-dim);
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
}
.quota-rate b { color: #fff; font-variant-numeric: tabular-nums; }
.quota-proj {
  margin-top: 12px; padding: 8px 12px; border-radius: 8px; font-size: 12px;
  background: rgba(251, 191, 36, .08); border: 1px solid rgba(251, 191, 36, .28);
  color: var(--amber); display: flex; align-items: center; gap: 7px;
}

/* ============================================================
   5. TOGGLE DE PERÍODO  (herdado do Mensal/Anual)
   ============================================================ */
/* `flex-wrap` entrou com as janelas longas (mês passado, 90, 180, ano): são
   nove botões, e sem quebra a fileira passava da largura do bloco e o
   "Personalizado" saía da tela em vez de descer uma linha. */
.seg {
  display: inline-flex; flex-wrap: wrap; background: rgba(255, 255, 255, .03);
  border: 1px solid var(--border-2); border-radius: 10px; padding: 3px; gap: 2px;
}
.seg button {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
  padding: 7px 15px; border-radius: 8px; color: var(--text-muted); transition: all .18s;
}
.seg button:hover { color: var(--text); }
.seg button.on {
  background: linear-gradient(135deg, rgba(139,92,246,.35), rgba(99,102,241,.3));
  color: #fff; font-weight: 700;
}
.seg .off-tag {
  font-size: 9px; padding: 2px 6px; border-radius: 20px; margin-left: 6px;
  background: rgba(74,222,128,.15); color: var(--green); font-weight: 700;
}

/* ============================================================
   6. SPLIT BAR  (herdado do Voz/Chat)
   ============================================================ */
.split { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.split-track { flex: 1; min-width: 180px; height: 6px; border-radius: 4px; overflow: hidden; display: flex; }
.split-track > i { height: 100%; transition: width .5s; }
.split-legend { display: flex; align-items: center; gap: 6px; font-size: 12px; font-family: var(--font-mono); color: var(--text-dim); }
.split-legend .dot { width: 8px; height: 8px; border-radius: 50%; }

/* ============================================================
   7. CARD DE DEPARTAMENTO  (herdado do card de tier/plano)
   ============================================================ */
.dep-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.dep {
  border: 1px solid var(--border-2); border-radius: var(--radius); padding: 16px;
  position: relative; transition: all .2s; cursor: pointer;
  background: rgba(255, 255, 255, .015);
}
.dep:hover { transform: translateY(-2px); }
.dep.lead { border-width: 1px; }
.dep-badge {
  position: absolute; top: -9px; left: 14px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 20px; font-weight: 700;
}
.dep-name { font-family: var(--font-display); font-size: 16px; font-weight: 800; margin-bottom: 8px; }
.dep-val  { font-size: 20px; font-weight: 700; color: #fff; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.dep-share { font-size: 12px; color: var(--text-muted); margin-top: 3px; font-family: var(--font-mono); }

/* ============================================================
   8. ABAS  (herdado do switchConTab)
   ============================================================ */
.tabs-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.tab {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 9px 16px; border-radius: 10px; font-size: 13px;
  background: rgba(255, 255, 255, .025); border: 1px solid var(--border-2);
  color: var(--text-muted); transition: all .18s;
}
.tab:hover { color: var(--text); border-color: var(--border-neon); }
.tab.on { background: rgba(139, 92, 246, .16); border-color: rgba(167, 139, 250, .5); color: #fff; font-weight: 600; }
.tab .st { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.tab-panel { display: none; }
.tab-panel.on { display: block; animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ============================================================
   9. GRÁFICO DE SÉRIE TEMPORAL  (novo — o ASNO não tem nenhum)
   ============================================================ */
.chart-wrap { position: relative; }
.chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.chart-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: #fff; }
.chart-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; font-family: var(--font-mono); }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-svg .grid-line { stroke: rgba(255, 255, 255, .05); stroke-width: 1; }
.chart-svg .axis-lbl { fill: rgba(255, 255, 255, .35); font-size: 9px; font-family: var(--font-mono); }
.chart-svg .dot { transition: r .15s; cursor: pointer; }
.chart-tip {
  position: absolute; pointer-events: none; opacity: 0; transition: opacity .15s;
  background: rgba(14, 9, 25, .96); backdrop-filter: blur(14px);
  border: 1px solid var(--border-neon); border-radius: 10px;
  padding: 9px 13px; font-family: var(--font-mono); font-size: 11px;
  box-shadow: var(--glow-soft); white-space: nowrap; z-index: 10;
}
.chart-tip .t-d { color: var(--text-muted); font-size: 10px; letter-spacing: .1em; margin-bottom: 5px; }
.chart-tip .t-v { color: #fff; font-weight: 700; font-size: 13px; }
.chart-legend { display: flex; gap: 18px; margin-top: 14px; flex-wrap: wrap; }
.chart-legend span { display: flex; align-items: center; gap: 7px; font-size: 12px; font-family: var(--font-mono); color: var(--text-dim); cursor: pointer; user-select: none; }
.chart-legend span.mute { opacity: .35; }
.chart-legend i { width: 14px; height: 3px; border-radius: 2px; display: block; }

/* ============================================================
   10. TABELA  (novo — com ordenação, busca e filtro)
   ============================================================ */
.tbl-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.tbl-search {
  flex: 1; min-width: 200px; background: rgba(255, 255, 255, .03);
  border: 1px solid var(--border-2); border-radius: 10px; padding: 9px 14px;
  color: #fff; font-size: 13px; font-family: var(--font-mono); outline: none; transition: border-color .2s;
}
.tbl-search:focus { border-color: var(--border-neon); }
.tbl-search::placeholder { color: #6b7280; }
.tbl-chip {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  padding: 7px 13px; border-radius: 20px; cursor: pointer;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--border-2);
  color: var(--text-muted); transition: all .18s;
}
.tbl-chip:hover { color: var(--text); }
.tbl-chip.on { background: rgba(139, 92, 246, .18); border-color: rgba(167, 139, 250, .5); color: #fff; }

.tbl-scroll { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; }
table.tbl thead th {
  text-align: left; padding: 12px 14px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted); background: rgba(255, 255, 255, .02);
  border-bottom: 1px solid var(--border-2); cursor: pointer; user-select: none; transition: color .15s;
}
table.tbl thead th:hover { color: var(--purple-light); }
table.tbl thead th.num, table.tbl tbody td.num { text-align: right; }
table.tbl thead th .ord { opacity: .35; margin-left: 5px; font-size: 9px; }
table.tbl thead th.sorted { color: var(--purple-light); }
table.tbl thead th.sorted .ord { opacity: 1; }
table.tbl tbody td { padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, .035); color: var(--text-dim); }
table.tbl tbody tr:last-child td { border-bottom: none; }
table.tbl tbody tr { transition: background .15s; }
table.tbl tbody tr:hover { background: rgba(255, 255, 255, .022); }
table.tbl tbody td.name { color: #fff; max-width: 330px; }
table.tbl tbody td.num { font-family: var(--font-mono); white-space: nowrap; }
table.tbl tbody td.money { color: #fff; font-weight: 700; font-family: var(--font-num-tbl); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); flex-wrap: wrap; gap: 10px; }

.pill {
  display: inline-block; padding: 3px 9px; border-radius: 20px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; font-weight: 700;
}
.pill.longtail { background: rgba(251,191,36,.13); color: var(--amber); border: 1px solid rgba(251,191,36,.3); }

/* ============================================================
   11. MÉTRICA DERIVADA / RPC  (novo)
   ============================================================ */
.derived-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.derived {
  border: 1px solid var(--border-2); border-radius: var(--radius); padding: 18px;
  background: linear-gradient(160deg, rgba(139, 92, 246, .06), transparent 70%);
}
.derived-lbl {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* selo que separa número calculado de número que espelha a fonte */
.selo-calc, .selo-fonte {
  font-size: 8px; letter-spacing: .1em; padding: 2px 7px; border-radius: 20px;
  font-weight: 700; white-space: nowrap; text-transform: none;
}
.selo-calc {
  background: rgba(251, 191, 36, .12); border: 1px solid rgba(251, 191, 36, .32);
  color: var(--amber);
}
.selo-fonte {
  background: rgba(74, 222, 128, .1); border: 1px solid rgba(74, 222, 128, .3);
  color: var(--green);
}
.derived.calculada { border-left: 2px solid rgba(251, 191, 36, .38); }
.derived.do-painel { border-left: 2px solid rgba(74, 222, 128, .38); }
.derived-val {
  font-family: var(--font-num); font-weight: 900; color: #fff; line-height: 1;
  font-variant-numeric: tabular-nums;
  font-size: clamp(22px, 2.2vw, 30px); white-space: nowrap;
}
.derived-formula {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
  font-family: var(--font-code); font-size: 11px; color: var(--purple-light); line-height: 1.6;
}
.derived-formula em { color: var(--text-muted); font-style: normal; }

/* ============================================================
   12. LISTA DE ATIVIDADE + ESTADO VAZIO  (herdado)
   ============================================================ */
.act { display: flex; align-items: flex-start; gap: 14px; padding: 11px 4px; border-bottom: 1px solid rgba(255, 255, 255, .035); }
.act:last-child { border-bottom: none; }
.act-time { font-family: var(--font-mono); font-size: 12px; color: var(--purple-light); line-height: 1.3; min-width: 46px; }
.act-time small { display: block; font-size: 9px; letter-spacing: .12em; color: var(--text-muted); }
.act-body { flex: 1; font-size: 13px; color: var(--text); line-height: 1.4; }
.act-kind { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; margin-top: 4px; display: flex; align-items: center; gap: 5px; color: var(--text-muted); }
.act-kind .d { width: 6px; height: 6px; border-radius: 50%; }
.act-x { background: none; border: none; color: rgba(255,255,255,.25); cursor: pointer; font-size: 15px; padding: 0 4px; transition: color .15s; }
.act-x:hover { color: var(--red); }

.empty { text-align: center; padding: 42px 20px; }
.empty .e-ico { font-size: 34px; margin-bottom: 12px; opacity: .55; }
.empty .e-tit { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 7px; }
.empty .e-desc { font-size: 13px; color: var(--text-muted); max-width: 380px; margin: 0 auto; line-height: 1.7; }

/* ============================================================
   13. BADGE ADMIN-ONLY  (novo — RLS do Jerico)
   ============================================================ */
.admin-only {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 700; padding: 3px 8px; border-radius: 20px;
  background: rgba(248, 113, 113, .1); border: 1px solid rgba(248, 113, 113, .32); color: var(--red);
}
/* A classe .masked foi removida de propósito: era `filter: blur()`, que
   só embaça a pintura — o número seguia no DOM, legível no inspetor ou
   desligando o CSS.

   O cadeado que a substituiu também saiu: anunciar "restrito" para a
   equipe o tempo todo é pior do que simplesmente não ter aquilo na tela.
   `.so-admin` some da árvore quando a página não está em visão admin —
   o JS marca <html> com data-visao. */
:root:not([data-visao="admin"]) .so-admin { display: none !important; }

/* De onde veio o número. Métrica sem fonte à vista gera dúvida —
   "isso é Shopee ou Mercado Livre?" — e dúvida vira retrabalho. */
.fonte-tag {
  display: inline-block; margin-left: 9px; vertical-align: middle;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700;
  padding: 3px 9px; border-radius: 20px;
  background: rgba(255,255,255,.05); color: var(--text-muted);
}
.fonte-tag.ml     { background: rgba(255,224,54,.1);  color: #ffe036; }
.fonte-tag.shopee { background: rgba(238,77,45,.12);  color: #ff7a5c; }
.fonte-tag.magalu { background: rgba(0,134,255,.14);  color: #4da6ff; }
/* selo de origem do número: planilha da empresa contra conta nossa
   (invariante 6 — o que o Jerico calcula anda com a conta à vista) */
.fonte-tag.calc   { background: rgba(255,255,255,.05); color: var(--text-muted); }

/* Abas de fonte: a cor identifica o canal de longe, e a aba acesa diz
   qual número está na tela. Sem isso, "pedidos do dia" não revela se é
   Mercado Livre, Shopee ou os dois somados. */
.fonte-abas { display: flex; gap: 7px; margin-left: 14px; flex-wrap: wrap; }
.fonte-aba {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .09em;
  text-transform: uppercase; font-weight: 700;
  padding: 5px 12px; border-radius: 20px; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid transparent;
  color: var(--text-muted); transition: background .18s, color .18s, border-color .18s;
  display: inline-flex; align-items: center; gap: 6px;
}
.fonte-aba:hover { background: rgba(255,255,255,.08); color: var(--text-dim); }
.fonte-aba .pt { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .55; }
.fonte-aba.on .pt { opacity: 1; box-shadow: 0 0 7px currentColor; }
.fonte-aba .qt { opacity: .6; font-weight: 500; }

.fonte-aba.on.ml     { background: rgba(255,224,54,.13); color: #ffe036; border-color: rgba(255,224,54,.34); }
.fonte-aba.on.shopee { background: rgba(255,122,92,.13); color: #ff7a5c; border-color: rgba(255,122,92,.34); }
.fonte-aba.on.magalu { background: rgba(0,134,255,.15);  color: #4da6ff; border-color: rgba(0,134,255,.38); }
.fonte-aba.on.total  { background: rgba(74,222,128,.13); color: #4ade80; border-color: rgba(74,222,128,.34); }

/* Empresa sem nenhum pedido no banco continua VISÍVEL e clicável — some
   só o convite ao clique. A aba que desaparece faz a pessoa achar que a
   empresa não está cadastrada (ARMADILHAS 30: estado vazio é do assunto). */
.fonte-aba.vazia { opacity: .45; }

@media (max-width: 640px) { .fonte-abas { margin-left: 0; width: 100%; } }

/* ------------------------------------------------------------
   Barra de escopo — o recorte que vale para UM widget
   ------------------------------------------------------------
   Separada das abas de período do bloco "Fonte dos dados", que
   governam os cards do topo. Aqui o recorte é da tabela logo abaixo,
   e o padrão é um dia só: a lista de 180 dias era a tela mais pesada
   do painel e a menos útil para ler um relatório. */
.escopo-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.escopo-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.escopo-chip {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .09em;
  text-transform: uppercase; font-weight: 700;
  padding: 5px 12px; border-radius: 20px; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid transparent;
  color: var(--text-muted); transition: background .18s, color .18s, border-color .18s;
}
.escopo-chip:hover { background: rgba(255,255,255,.08); color: var(--text-dim); }
.escopo-chip.on {
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22);
  color: var(--text);
}
.escopo-datas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.escopo-datas label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted);
}
@media (max-width: 640px) { .escopo-datas { margin-left: 0; } }

/* Período — governa os cards de cima E a lista de dias.
   O estado "on" é neutro (branco translúcido) de propósito: cor cravada
   aqui viraria mais uma regra para espelhar em private.css, e a lista
   dessas cópias já é o assunto da ARMADILHAS 18. */
/* O seletor de período de #/vendas virou a janela `.perd` em 02/08/2026.
   `.periodo-abas` continua sendo o contêiner (é o id estático do HTML e
   quem recebe a delegação do clique); as regras dos botões saíram porque
   não havia mais botão nenhum para elas pintarem. */
.periodo-abas { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }

/* ============================================================
   13b. CARD DE SINAL  (novo — a saída principal do Jerico)
   ============================================================ */
.sig {
  border: 1px solid var(--border-2); border-left-width: 3px;
  border-radius: var(--radius); padding: 18px;
  background: rgba(255, 255, 255, .015);
  transition: transform .2s, border-color .2s;
}
.sig:hover { transform: translateY(-2px); }
.sig.alta  { border-left-color: var(--red); }
.sig.media { border-left-color: var(--amber); }
.sig.baixa { border-left-color: var(--cyan); }

.sig-top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.sig-kind {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 700; padding: 3px 9px; border-radius: 20px;
}
.sig-kind.pre_venda     { background: rgba(167,139,250,.14); color: var(--purple-light); border: 1px solid rgba(167,139,250,.35); }
.sig-kind.lancamento    { background: rgba(56,189,248,.13);  color: var(--cyan);         border: 1px solid rgba(56,189,248,.34); }
.sig-kind.queima        { background: rgba(251,191,36,.13);  color: var(--amber);        border: 1px solid rgba(251,191,36,.34); }
.sig-kind.comportamento { background: rgba(74,222,128,.12);  color: var(--green);        border: 1px solid rgba(74,222,128,.32); }
.sig-kind.risco         { background: rgba(248,113,113,.12); color: var(--red);          border: 1px solid rgba(248,113,113,.32); }

.sig-janela {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 5px;
}
.sig-conf { margin-left: auto; text-align: right; }
.sig-conf b { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: #fff; }
.sig-conf small { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; color: var(--text-muted); }

.sig h4 { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 8px; line-height: 1.4; }
.sig p  { font-size: 13px; color: var(--text-dim); line-height: 1.65; margin: 0 0 14px; }
.sig-acao {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 14px; border-radius: 10px; font-size: 13px; line-height: 1.55;
  background: rgba(139, 92, 246, .08); border: 1px solid rgba(167, 139, 250, .25); color: #fff;
}
.sig-acao b { color: var(--purple-light); font-weight: 700; }

/* --- confiança em barra --- */
.conf-bar { height: 4px; background: rgba(255,255,255,.06); border-radius: 3px; overflow: hidden; margin-top: 12px; }
.conf-bar > i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--violet), var(--purple-light)); }

/* ============================================================
   13c. TIMELINE DE JANELAS  (novo — pré-venda / lançamento / queima)
   ============================================================ */
.tl { position: relative; padding-left: 26px; }
.tl::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 1px; background: var(--border-2); }
.tl-item { position: relative; padding: 12px 0; }
.tl-item::before {
  content: ''; position: absolute; left: -23px; top: 18px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--surface-3); border: 2px solid var(--text-muted);
}
.tl-item.abre_em::before  { border-color: var(--purple-light); box-shadow: 0 0 10px rgba(167,139,250,.5); }
.tl-item.fechando::before { border-color: var(--amber);        box-shadow: 0 0 10px rgba(251,191,36,.5); animation: pulse-dot 1.6s infinite; }
.tl-item.aberta::before   { border-color: var(--green);        box-shadow: 0 0 10px rgba(74,222,128,.5); }
.tl-item.encerrada::before{ border-color: rgba(255,255,255,.18); }
.tl-item.encerrada { opacity: .45; }
.tl-when { font-family: var(--font-mono); font-size: 11px; color: var(--purple-light); letter-spacing: .06em; }
.tl-tit { font-size: 14px; color: #fff; font-weight: 600; margin: 3px 0 4px; }
.tl-note { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.tl-state {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 20px; margin-left: 8px; font-weight: 700;
}
.tl-state.abre_em  { background: rgba(167,139,250,.14); color: var(--purple-light); }
.tl-state.fechando { background: rgba(251,191,36,.14);  color: var(--amber); }
.tl-state.aberta   { background: rgba(74,222,128,.12);  color: var(--green); }
.tl-state.encerrada{ background: rgba(255,255,255,.05); color: var(--text-muted); }

/* ============================================================
   13d. EQUIPE
   ============================================================ */
.crew { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.crew-card {
  border: 1px solid var(--border-2); border-radius: var(--radius); padding: 15px;
  background: rgba(255,255,255,.015); display: flex; align-items: center; gap: 13px;
}
.crew-av {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-family: var(--font-display);
  font-weight: 800; font-size: 15px; color: #fff;
  background: linear-gradient(135deg, var(--violet), var(--indigo));
  position: relative;
}
.crew-av::after {
  content: ''; position: absolute; right: -1px; bottom: -1px;
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--bg); background: var(--text-muted);
}
.crew-card.on .crew-av::after { background: var(--green); box-shadow: 0 0 7px var(--green); }
.crew-name { font-size: 14px; color: #fff; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.crew-role { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; padding: 2px 7px; border-radius: 20px; background: rgba(255,255,255,.06); color: var(--text-muted); }
.crew-role.admin { background: rgba(167,139,250,.15); color: var(--purple-light); }
.crew-cargo { font-size: 12px; color: var(--purple-light); margin-top: 3px; font-weight: 500; }
/* e-mail é longo e não pode esticar o card */
.crew-mail {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-dim);
  margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crew-live-row { display: flex; align-items: center; gap: 7px; margin-top: 7px; flex-wrap: wrap; }
.crew-live {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; display: inline-flex; align-items: center; gap: 5px;
}
.crew-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.crew-live.on  { color: var(--green); }
.crew-live.on::before { box-shadow: 0 0 7px var(--green); animation: crewPulse 2s ease-in-out infinite; }
.crew-live.off { color: var(--text-muted); }
@keyframes crewPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.crew-turno {
  font-size: 10px; padding: 2px 7px; border-radius: 20px;
  background: rgba(255,255,255,.05); color: var(--text-muted);
}
.crew-turno.dentro { background: rgba(74,222,128,.12); color: var(--green); }
.crew-turno.pausa  { background: rgba(251,191,36,.12); color: var(--amber); }
/* folga é estado normal, não alerta — cinza como o offline */
.crew-turno.folga  { background: rgba(255,255,255,.04); color: var(--text-muted); font-style: italic; }
/* trabalho fora de qualquer escala */
.crew-turno.plantao { background: rgba(167,139,250,.14); color: var(--purple-light); }

.cobertura {
  border-left: 3px solid var(--text-muted); padding: 12px 16px; margin-bottom: 16px;
  background: rgba(255,255,255,.02); border-radius: 0 10px 10px 0;
}
.cobertura-tit { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.cobertura-txt { font-size: 12px; color: var(--text-dim); line-height: 1.6; }

.crew-stat { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* ============================================================
   13e. FAIXAS DE INTENÇÃO (barra empilhada com rótulo)
   ============================================================ */
.intent { display: flex; flex-direction: column; gap: 11px; }
.intent-row { display: flex; align-items: center; gap: 12px; }
.intent-lbl { font-size: 13px; color: var(--text-dim); min-width: 190px; }
.intent-track { flex: 1; height: 8px; background: rgba(255,255,255,.05); border-radius: 5px; overflow: hidden; }
.intent-track > i { display: block; height: 100%; border-radius: 5px; transition: width .6s; }
.intent-pct { font-family: var(--font-mono); font-size: 13px; color: #fff; font-weight: 700; min-width: 52px; text-align: right; }

/* ============================================================
   14. BARRA DE AÇÕES FLUTUANTE  (herdado do /profile)
   ============================================================ */
.sticky-actions {
  position: sticky; bottom: 16px;
  display: flex; justify-content: flex-end; gap: 10px;
  background: rgba(14, 9, 25, .9); backdrop-filter: blur(18px);
  border: 1px solid var(--border-2); border-radius: var(--radius);
  padding: 12px 16px; box-shadow: var(--glow-soft);
}

/* ============================================================
   15. MODAL
   ============================================================ */
.ovl {
  position: fixed; inset: 0; z-index: 900; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(0, 0, 0, .82); backdrop-filter: blur(12px);
}
.ovl.on { display: flex; }
.ovl-box {
  background: #0f0f1a; border: 1px solid var(--border-neon);
  border-radius: var(--radius-lg); max-width: 440px; width: 100%;
  padding: 28px; position: relative; text-align: center;
  animation: fadeIn .22s ease;
}
.ovl-box h3 { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: #fff; margin: 0 0 10px; }
.ovl-box p { font-size: 13px; color: var(--text-muted); line-height: 1.7; margin: 0 0 20px; }
.ovl-x { position: absolute; top: 12px; right: 16px; background: none; border: none; color: rgba(255,255,255,.4); font-size: 19px; cursor: pointer; }
.ovl-btns { display: flex; gap: 10px; }
.ovl-btns .btn { flex: 1; justify-content: center; }

/* ============================================================
   16. FAB
   ============================================================ */
.fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 300;
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  background: linear-gradient(135deg, rgba(139, 92, 246, .95), rgba(99, 102, 241, .95));
  border: 1px solid rgba(167, 139, 250, .6); color: #fff; font-size: 21px;
  display: grid; place-items: center; box-shadow: var(--glow-purple);
  transition: transform .2s;
}
.fab:hover { transform: scale(1.06); }

/* os toasts sobem acima do FAB para não colidirem */
.toast-host { bottom: 92px !important; }

/* ============================================================
   17. CATÁLOGO — espelho do Consumer Games
   ============================================================
   Cartão com capa: aqui a foto é o que identifica o produto, não o
   texto. A caixa do jogo traz a tarja da plataforma que o título às
   vezes omite — é o mesmo sinal que sustenta a classificação por
   departamento em vendas.js.

   As cores saem de variáveis de propósito: `private.css` copia as
   regras que trazem rgba(139,92,246,…) escrito no valor, e uma regra
   nova com a cor cravada entraria naquela dívida sem precisar
   (ARMADILHAS 18). */
.cg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 14px; }
/* o estado vazio é filho da grade: sem isto ele vira um item de uma
   coluna só e o "nada encontrado" aparece espremido na esquerda */
.cg-grid .empty { grid-column: 1 / -1; }

.cg-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: rgba(255, 255, 255, .015);
  border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color .16s, transform .16s;
}
.cg-card:hover { border-color: var(--border-neon); transform: translateY(-2px); }
/* produto inativo continua na grade, apagado: sumir com ele faria a
   contagem da tela discordar da contagem do banco sem explicar por quê */
.cg-card.off { opacity: .5; }

.cg-capa {
  position: relative; aspect-ratio: 3 / 4;
  background: var(--surface-2); display: grid; place-items: center; overflow: hidden;
}
/* `contain`, não `cover`: a tarja de plataforma da caixa fica no topo da
   arte (é o que sustenta a classificação por capa em vendas.js), e uma
   imagem quadrada dentro de uma caixa 3:4 com `cover` corta justamente
   o topo e o rodapé. Sobra tarja preta nas laterais — melhor que perder
   a informação. */
.cg-capa img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cg-capa .cg-semfoto { font-size: 30px; opacity: .28; }
.cg-marcas {
  position: absolute; top: 8px; left: 8px; right: 8px;
  display: flex; flex-wrap: wrap; gap: 5px;
}
.cg-marcas .pill { backdrop-filter: blur(6px); }

.cg-body { display: flex; flex-direction: column; gap: 7px; flex: 1; padding: 11px 12px 13px; }
.cg-dep {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase;
}
.cg-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* três linhas e reticências: título de catálogo passa fácil de 90
   caracteres, e cartão de altura variável desalinha a grade inteira */
.cg-tit {
  font-size: 13px; line-height: 1.45; font-weight: 600; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.cg-preco {
  font-family: var(--font-num); font-size: 19px; font-weight: 800; color: #fff;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.cg-preco .cur { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-right: 3px; }
.cg-preco.sem { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text-muted); }
.cg-min { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.cg-min b { color: var(--text-dim); }
.cg-lanc { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); letter-spacing: .06em; }

.cg-lojas { margin-top: auto; padding-top: 4px; display: flex; flex-wrap: wrap; gap: 5px; }
.cg-loja {
  font-family: var(--font-mono); font-size: 10px; line-height: 1.5;
  padding: 3px 8px; border-radius: 20px;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--border-2);
  color: var(--text-dim);
}
a.cg-loja:hover { border-color: var(--border-neon); color: #fff; }
.cg-loja.mais { color: var(--text-muted); background: none; }

.cg-mais { text-align: center; padding-top: 18px; }
.cg-mais .sub { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: .06em; }

/* os dois segmentados do catálogo têm cinco botões cada e dividem a
   barra com a busca — sem quebra eles empurram a linha para fora */
#cgMarca, #cgOrdem { flex-wrap: wrap; }
#cgDeps { margin-top: -4px; }

/* 138px, não 150: medido em 375px de largura sobram 289px para a grade,
   e 150 + 150 + 10 de vão não cabem — a tela cairia para UMA coluna, com
   um cartão gigante por linha. Com 138 cabem dois. */
@media (max-width: 620px) {
  .cg-grid { grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 10px; }
  .cg-preco { font-size: 17px; }
  .cg-tit { font-size: 12.5px; }
  /* num cartão de 140px cada loja ocupa uma linha inteira, e cinco lojas
     dobram a altura do cartão. Uma faixa que rola de lado mostra as
     mesmas cinco sem esconder nenhuma. */
  .cg-lojas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .cg-lojas::-webkit-scrollbar { display: none; }
  .cg-loja { white-space: nowrap; }
}

/* ============================================================
   17a. RELATÓRIO DE VENDAS — a ficha de um produto
   ============================================================
   A grade da busca é a `.cg-grid`/`.cg-card` do catálogo, sem uma linha
   nova: cartão de produto é a mesma coisa nas duas telas. Aqui mora só
   o que o catálogo não tem — o cartão clicável e o desenho da ficha.

   Tudo escrito com variáveis, de propósito: é o que mantém estas regras
   fora da dívida das ~45 copiadas em `private.css` e `tres-d.css`
   (ARMADILHAS 18). Cor cravada aqui obrigaria a mexer em três arquivos. */
.vd-card { cursor: pointer; }
.vd-card:focus-visible { outline: 2px solid var(--border-neon); outline-offset: 2px; }

/* Com a ficha aberta, o resto do relatório sai da leitura. A busca fica:
   trocar de produto não pode obrigar a voltar antes. */
.screen[data-s="/vendas"].vd-focado > .blk:not(#vdBuscaBlk):not(#vdFichaBlk) { display: none; }

.vd-ficha-head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 14px; }
.vd-ficha-capa { width: 132px; flex: 0 0 auto; border-radius: var(--radius); }
.vd-ficha-nome {
  font-size: 17px; line-height: 1.32; font-weight: 700; color: #fff;
  margin: 7px 0 4px;
}
.vd-ficha-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }

.vd-comp { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px; }
.vd-comp-item {
  padding: 12px 14px; border-radius: var(--radius);
  border: 1px solid var(--border); background: rgba(255, 255, 255, .015);
}
.vd-comp-val {
  font-family: var(--font-num); font-size: 21px; font-weight: 800; color: #fff;
  font-variant-numeric: tabular-nums; line-height: 1; margin: 6px 0 8px;
}

/* no celular a capa em coluna própria come metade da largura do nome */
@media (max-width: 620px) {
  .vd-ficha-head { flex-direction: column; }
  .vd-ficha-capa { width: 100%; max-width: 170px; }
}

/* ============================================================
   17b. VITRINE SHOPEE — o on/off e a lista de avisos
   ============================================================
   Os cartões reaproveitam `.cg-card` inteiro: são a mesma coisa na
   tela, e duplicar a folha faria as duas grades divergirem no primeiro
   ajuste (foi o que aconteceu com `private.css` — ARMADILHAS 18). Só o
   que não existe no catálogo mora aqui. */
.vt-toggle {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 6px 8px; margin: 2px 0;
  background: rgba(255, 255, 255, .02);
  border: 1px solid var(--border-2); border-radius: 20px;
  color: var(--text-muted); cursor: pointer;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  transition: border-color .16s, color .16s, background .16s;
}
.vt-toggle:hover { border-color: var(--border-neon); color: var(--text-dim); }

/* o trilho, do tamanho de um dedo em telas pequenas */
.vt-toggle-tr {
  position: relative; flex: 0 0 auto;
  width: 26px; height: 15px; border-radius: 20px;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--border-2);
  transition: background .16s, border-color .16s;
}
.vt-toggle-bola {
  position: absolute; top: 2px; left: 2px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--text-muted);
  transition: transform .16s, background .16s;
}
.vt-toggle.on { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.vt-toggle.on .vt-toggle-tr { background: color-mix(in srgb, var(--green) 28%, transparent); border-color: var(--green); }
.vt-toggle.on .vt-toggle-bola { transform: translateX(11px); background: var(--green); }
.vt-toggle-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.vt-estado {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em;
  color: var(--text-muted); margin-top: auto; padding-top: 4px;
}
.vt-estado.off { color: var(--amber); }

.vt-eventos { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.vt-ev {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 6px; border-bottom: 1px solid var(--border-2);
}
.vt-ev:last-child { border-bottom: 0; }
/* aviso já lido continua na lista, apagado: sumir com ele apagaria o
   histórico de "isto já foi avisado" junto com a notificação */
.vt-ev.lido { opacity: .45; }
/* LINHA ARRASTÁVEL — a fila das páginas vigiadas, ordenável a partir de
   06/08/2026. `cursor: grab` na linha inteira e a alça como sinal visual:
   sem ela, arrastar é um recurso que existe e ninguém descobre. */
.vt-ev.vt-ord { cursor: grab; }
.vt-ev.vt-ord:active { cursor: grabbing; }
.vt-ev.vt-ord:hover { background: var(--surface-3); }
.vt-grip { color: var(--text-muted); cursor: grab; user-select: none; }
.vt-ev-ico { font-size: 14px; line-height: 1.3; flex: 0 0 auto; }
.vt-ev-txt { min-width: 0; }
.vt-ev-tit {
  font-size: 12.5px; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

#vtFiltro, #vtOrdem { flex-wrap: wrap; }
#vtLojas { margin-top: -4px; }
#vtNotificar.on { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); }

/* ============================================================
   18. RESPONSIVO
   ============================================================ */
@media (max-width: 1000px) {
  .kit-layout { grid-template-columns: 1fr; }
  .kit-nav { display: none; }
}
@media (max-width: 620px) {
  .kit-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .kit-meta { text-align: left; }
  .kpi-val { font-size: 28px; }
}

/* ============================================================
   SELETOR DE PERÍODO  (.perd)  — a janela que substituiu a fileira
   ============================================================
   Substitui o `.seg` de período em #/metricas, #/vendas e no Jerico 3D.
   A forma é a do painel de afiliados do ML: controle fechado com o
   recorte atual, janela com título + datas resolvidas em cada linha.

   ATENÇÃO AO MEXER: este bloco é escrito SÓ com variáveis de cor. É o
   que o mantém fora da dívida das ~45 regras copiadas em private.css e
   tres-d.css (ARMADILHAS 18) — os tokens já mudam por modo, então ele
   fica roxo, dourado e verde sozinho. Cravar um rgba() aqui obriga a
   copiar a regra nos dois arquivos, e esquecer é o defeito discreto de
   sempre. */
.perd { position: relative; display: inline-block; }

.perd-btn {
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  min-width: 232px; padding: 9px 14px; text-align: left;
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: 10px; color: var(--text); font: inherit;
  transition: border-color .18s, background .18s;
}
.perd-btn:hover { border-color: var(--border-neon); }
.perd.aberto .perd-btn { border-color: var(--border-neon); background: var(--surface-3); }

.perd-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.perd-cap {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-muted);
}
/* o rótulo do período e as datas que ele resolve, um sobre o outro:
   "90 dias" sozinho não diz quais dias, e era metade da reclamação */
.perd-val { font-size: 13.5px; font-weight: 600; display: flex; flex-direction: column; }
.perd-val i {
  font-style: normal; font-family: var(--font-mono); font-size: 10.5px;
  font-weight: 400; color: var(--purple-light); letter-spacing: .04em;
}
.perd-ch { color: var(--text-muted); font-size: 11px; transition: transform .2s; }
.perd.aberto .perd-ch { transform: rotate(180deg); }

.perd-pop {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
  min-width: 100%; width: max-content; max-width: min(92vw, 380px);
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: 12px; box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.perd-pop[hidden] { display: none; }

/* rola em vez de crescer: nove períodos numa tela baixa passariam do
   rodapé, e o de baixo — Personalizado — é o que mais se procura */
.perd-lista { display: flex; flex-direction: column; max-height: 336px; overflow-y: auto; }

.perd-op {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 10px 15px; background: none; border: none; cursor: pointer;
  text-align: left; font: inherit; color: var(--text); width: 100%;
  border-left: 2px solid transparent; transition: background .14s;
}
.perd-op:hover { background: var(--surface-3); }
.perd-op.on { background: var(--surface-3); border-left-color: var(--violet); }
.perd-op-t { font-size: 13.5px; font-weight: 500; }
.perd-op.on .perd-op-t { font-weight: 700; color: var(--purple-light); }
.perd-op-s {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted);
  letter-spacing: .04em;
}

/* o par de datas do "Personalizado", dentro da própria janela */
.perd-custom {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 12px 15px; border-top: 1px solid var(--border-2);
  background: var(--surface);
}
.perd-custom input[type="date"] { max-width: 138px; }