/* gestor-bms — dark-only, oklch, zero dependência.
   Herda os tokens do meta-bms para os dois painéis parecerem da mesma casa, mas o accent é
   AZUL (lá é roxo): com as duas abas abertas, você sabe em qual está sem ler o título. */

:root {
  color-scheme: dark;

  --bg: oklch(0.17 0.008 265);
  --painel: oklch(0.21 0.009 265);
  --painel-alto: oklch(0.25 0.011 265);
  --painel-fundo: oklch(0.19 0.009 265);
  --linha: oklch(0.29 0.012 265);
  --linha-forte: oklch(0.38 0.014 265);

  --ink: oklch(0.96 0.004 265);
  --ink-2: oklch(0.78 0.01 265);
  --ink-3: oklch(0.64 0.012 265);

  --accent: oklch(0.72 0.13 235);
  --accent-fraco: oklch(0.72 0.13 235 / 0.14);
  --accent-forte: oklch(0.62 0.15 235);

  --ok: oklch(0.74 0.14 155);
  --alerta: oklch(0.8 0.14 85);
  --erro: oklch(0.7 0.17 25);
  --inerte: oklch(0.55 0.012 265);

  --raio: 8px;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
  --largura: 1180px;
  --respiro: 32px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.faixa {
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--respiro);
}

/* ── Topo ───────────────────────────────────────────────────────────────────────────── */

.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in oklch, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}

.topo__conteudo {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 56px;
}

.marca { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; }
.marca:hover { text-decoration: none; }
.marca__ponto {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-fraco);
}
.marca__fraco { color: var(--ink-3); font-weight: 400; }

.trilha { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; color: var(--ink-3); font-size: 13px; }
.trilha__sep { color: var(--linha-forte); }
.trilha__atual { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.topo__acoes { display: flex; align-items: center; gap: 10px; }

.botao {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: var(--painel-alto);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  cursor: pointer;
  transition: background 140ms var(--curva), border-color 140ms var(--curva);
}
.botao:hover { background: var(--linha); }
/* `display: inline-flex` vence o atributo `hidden` — sem isto, um botão "escondido" continua
   na tela. Foi o mesmo erro que deixou o seletor de período aparecendo onde não devia. */
.botao[hidden] { display: none; }
.botao[data-carregando="true"] { pointer-events: none; opacity: 0.6; }
.botao[data-carregando="true"] .botao__icone { animation: gira 800ms linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ── Selos ──────────────────────────────────────────────────────────────────────────── */

.selo {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px; font-weight: 500;
  white-space: nowrap;
  border: 1px solid;
}
.selo::before { content: ''; width: 5px; height: 5px; border-radius: 999px; background: currentColor; }

.selo[data-tom="ok"]     { color: var(--ok);     border-color: color-mix(in oklch, var(--ok) 34%, transparent);     background: color-mix(in oklch, var(--ok) 11%, transparent); }
.selo[data-tom="alerta"] { color: var(--alerta); border-color: color-mix(in oklch, var(--alerta) 34%, transparent); background: color-mix(in oklch, var(--alerta) 11%, transparent); }
.selo[data-tom="erro"]   { color: var(--erro);   border-color: color-mix(in oklch, var(--erro) 34%, transparent);   background: color-mix(in oklch, var(--erro) 11%, transparent); }
.selo[data-tom="inerte"] { color: var(--inerte); border-color: color-mix(in oklch, var(--inerte) 34%, transparent); background: transparent; }

/* ── Barra de tokens no cabeçalho: validade sempre à vista (como no meta-bms) ── */
.tokens-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 0 10px;
}
.tokens-barra[hidden] { display: none; }

.token {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--linha);
  background: var(--painel);
  font-size: 11.5px;
  color: var(--ink-3);
  white-space: nowrap;
}
.token b { color: var(--ink-2); font-weight: 600; }
.token__cauda { font-family: var(--mono); font-size: 10.5px; color: var(--inerte); }
.token__estado { font-weight: 600; }

.token[data-tom="ok"]     { border-color: color-mix(in oklch, var(--ok) 32%, transparent); }
.token[data-tom="ok"]     .token__estado { color: var(--ok); }
.token[data-tom="leitura"] { border-color: color-mix(in oklch, var(--alerta) 40%, transparent); background: color-mix(in oklch, var(--alerta) 8%, var(--painel)); }
.token[data-tom="leitura"] .token__estado { color: var(--alerta); }
.token[data-tom="escrita"] { border-color: color-mix(in oklch, var(--ok) 40%, transparent); background: color-mix(in oklch, var(--ok) 8%, var(--painel)); }
.token[data-tom="escrita"] .token__estado { color: var(--ok); }
.token[data-tom="alerta"] { border-color: color-mix(in oklch, var(--alerta) 40%, transparent); background: color-mix(in oklch, var(--alerta) 8%, var(--painel)); }
.token[data-tom="alerta"] .token__estado { color: var(--alerta); }
.token[data-tom="erro"]   { border-color: color-mix(in oklch, var(--erro) 42%, transparent);   background: color-mix(in oklch, var(--erro) 9%, var(--painel)); }
.token[data-tom="erro"]   .token__estado { color: var(--erro); }
.token[data-tom="neutro"] .token__estado { color: var(--ink-3); }

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--painel-alto);
  border: 1px solid var(--linha);
  color: var(--ink-2);
  font-size: 11px;
  white-space: nowrap;
}
.chip--forte { background: var(--accent-fraco); border-color: color-mix(in oklch, var(--accent) 30%, transparent); color: var(--accent); }

/* ── Acordeão (os três níveis usam a mesma anatomia) ─────────────────────────────────── */

.acord {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--painel);
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color 140ms var(--curva);
}
.acord[data-aberto="true"] { border-color: var(--linha-forte); }
.acord[data-morto="true"] .acord__nome { color: var(--ink-3); }

/* seta · nome (encolhe) · métricas · configuração · veiculação
   O nome é o único que cede espaço: número e status nunca podem ser cortados. */
.acord__cabeca {
  display: grid;
  /* seta · nome · diagnóstico · métricas · meta · veiculação. A coluna de diagnóstico
     (.acord__diag) fica 0 quando vazia (campanha ok/cinza) e só ocupa espaço quando há aviso. */
  grid-template-columns: 16px minmax(0, 1fr) auto auto auto auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: background 140ms var(--curva);
}
.acord__cabeca:hover { background: var(--painel-alto); }

.acord__seta {
  width: 16px; height: 16px;
  color: var(--ink-3);
  transition: transform 160ms var(--curva), color 140ms var(--curva);
}
.acord[data-aberto="true"] .acord__seta { transform: rotate(90deg); color: var(--accent); }

.acord__nome { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acord__meta { display: flex; align-items: center; gap: 6px; }

.acord__corpo {
  padding: 2px 12px 12px;
  border-top: 1px solid var(--linha);
  background: var(--painel-fundo);
}
.acord__corpo[hidden] { display: none; }

/* Nível 2 e 3 aninhados: cada degrau afunda um pouco e perde peso de borda. */
.aninhado { margin-top: 14px; }
.aninhado__titulo {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 8px;
  color: var(--ink-3);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.aninhado .acord { background: var(--painel-alto); }
.aninhado .acord .acord__corpo { background: var(--painel); }

/* ── Ficha de configuração (o "antes → depois" do futuro mora aqui) ──────────────────── */

.ficha {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1px;
  margin: 8px 0 0;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--linha);
}
.ficha__item { padding: 5px 9px; background: var(--painel); line-height: 1.25; }
.ficha__rotulo { color: var(--ink-3); font-size: 10.5px; margin-bottom: 1px; }
.ficha__valor { color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ficha__valor--vazio { color: var(--inerte); }
.ficha__valor--dinheiro { font-weight: 600; }

/* Métrica interna com régua do Conda: texto (rótulo + valor) na cor do status, fundo leve.
   ruim=vermelho, alerta=amarelo, bom=verde. Só onde há análise; o resto fica neutro. */
.ficha__item--ruim   { background: color-mix(in oklch, var(--erro) 9%, var(--painel)); }
.ficha__item--alerta { background: color-mix(in oklch, var(--alerta) 9%, var(--painel)); }
.ficha__item--bom    { background: color-mix(in oklch, var(--ok) 9%, var(--painel)); }
.ficha__item--ruim   .ficha__rotulo, .ficha__item--ruim   .ficha__valor { color: var(--erro); }
.ficha__item--alerta .ficha__rotulo, .ficha__item--alerta .ficha__valor { color: var(--alerta); }
.ficha__item--bom    .ficha__rotulo, .ficha__item--bom    .ficha__valor { color: var(--ok); }

.bloco { margin-top: 8px; }
.bloco__texto { margin: 8px 2px 0; color: var(--ink-2); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.lista-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.lista-chips-titulo { color: var(--ink-3); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin: 10px 2px 0; }

/* Título de bloco: rótulo simples (usado no Diagnóstico, um <h4>) OU um <summary> recolhível. */
.bloco__titulo { color: var(--ink-3); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 6px; }

/* Bloco RECOLHÍVEL (<details>): o summary vira uma barra clicável, fechada por padrão, para o
   acordeão aberto não abrir gigante. Só a barra aparece até clicar. */
summary.bloco__titulo {
  cursor: pointer; user-select: none; list-style: none; margin: 0;
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px;
  background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio);
  transition: background .12s, color .12s;
}
summary.bloco__titulo::-webkit-details-marker { display: none; }
summary.bloco__titulo::before {
  content: ''; width: 6px; height: 6px; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s; opacity: .7;
}
details.bloco[open] > summary.bloco__titulo::before { transform: rotate(45deg); }
summary.bloco__titulo:hover { background: var(--painel-alto); color: var(--ink-2); }

.cru {
  margin-top: 12px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--painel);
}
.cru > summary { padding: 9px 12px; cursor: pointer; color: var(--ink-3); font-size: 12px; }
.cru > summary:hover { color: var(--ink-2); }
.cru pre {
  margin: 0; padding: 12px;
  border-top: 1px solid var(--linha);
  overflow-x: auto;
  font: 11px/1.55 var(--mono);
  color: var(--ink-2);
}

/* Reservado para a fase 2 — o lugar já existe, e é honesto sobre estar vazio. */
.metricas {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio);
  color: var(--ink-3);
  font-size: 12px;
}

/* ── Grade de anúncios ──────────────────────────────────────────────────────────────── */

.anuncio { display: block; }
/* 7 colunas: seta · thumb · texto · diagnóstico · métricas · meta · veiculação.
   Faltava a última — o selo ativo/pausado sobrava fora do grid e cortava. */
.anuncio .acord__cabeca {
  grid-template-columns: 16px 52px minmax(0, 1fr) auto auto auto auto;
  padding: 10px 12px;
}

.thumb {
  position: relative;
  width: 52px; height: 52px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--painel-fundo);
  border: 1px solid var(--linha);
  flex-shrink: 0;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb__vazia { display: grid; place-items: center; height: 100%; color: var(--inerte); font-size: 10px; }
.thumb__play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: oklch(0 0 0 / 0.35);
  color: white;
}
.thumb__conta {
  position: absolute; right: 2px; bottom: 2px;
  padding: 0 4px;
  border-radius: 4px;
  background: oklch(0 0 0 / 0.7);
  font-size: 9px; font-weight: 600;
}

.anuncio__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.anuncio__nome { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anuncio__resumo { color: var(--ink-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Mídia aberta ───────────────────────────────────────────────────────────────────── */

.midia { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 16px; margin-top: 12px; }
@media (max-width: 780px) { .midia { grid-template-columns: 1fr; } }

.midia__palco {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--painel);
  overflow: hidden;
}
.midia__imagem { width: 100%; display: block; }
.midia__iframe { width: 100%; height: 620px; border: 0; background: white; }
.midia__carregando { padding: 40px; text-align: center; color: var(--ink-3); }

.abas { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; border-bottom: 1px solid var(--linha); background: var(--painel-alto); }
.aba {
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: var(--ink-3);
  font-size: 11px;
  cursor: pointer;
  transition: color 140ms var(--curva), background 140ms var(--curva);
}
.aba:hover { color: var(--ink); }
.aba[aria-selected="true"] { background: var(--accent-fraco); border-color: color-mix(in oklch, var(--accent) 30%, transparent); color: var(--accent); }

.carrossel { display: flex; gap: 8px; overflow-x: auto; padding: 8px; }
.carrossel img { width: 130px; height: 130px; object-fit: cover; border-radius: 6px; border: 1px solid var(--linha); flex-shrink: 0; }

.links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.link-externo {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  background: var(--painel-alto);
  color: var(--ink-2);
  font-size: 12px;
}
.link-externo:hover { background: var(--linha); color: var(--ink); text-decoration: none; }

/* ── Tela de seleção ────────────────────────────────────────────────────────────────── */

.busca {
  display: flex; align-items: center; gap: 8px;
  margin: 24px 0 16px;
  padding: 9px 12px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  background: var(--painel);
}
.busca input { flex: 1; background: none; border: 0; outline: none; }
.busca input::placeholder { color: var(--inerte); }
.busca svg { color: var(--ink-3); flex-shrink: 0; }

/* ── Busca por nomenclatura (tela de campanhas) ──────────────────────────────────────
   Fonte monoespaçada de propósito: o que se digita aqui é código — `[GOX][SPT-JUN26]` —
   e em fonte proporcional o colchete some no meio da palavra. */
.busca--nomenclatura { margin: 16px 0 10px; }
.busca--nomenclatura input {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px; letter-spacing: -0.01em;
}
.busca--nomenclatura .botao { padding: 3px 10px; font-size: 12px; }

.vazio code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; padding: 1px 5px;
  background: var(--painel); border: 1px solid var(--linha); border-radius: 4px;
}

.conta-linha {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background 140ms var(--curva), border-color 140ms var(--curva);
}
.conta-linha:hover { background: var(--painel-alto); border-color: var(--linha); }
.conta-linha__nome { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conta-linha__id { color: var(--ink-3); font: 11px var(--mono); }

/* A marca de "em gestão". Vazia quando não marcada — o check só aparece quando é verdade.
   NÃO se chama `.marca`: esse nome já é o do logotipo no topo, e a colisão transformava a
   marca do painel numa caixinha de 18px. Nome de classe é namespace global; trate como tal. */
.marca-gestao {
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  padding: 0;
  border: 1.5px solid var(--linha-forte);
  border-radius: 5px;
  background: var(--painel);
  color: transparent;
  cursor: pointer;
  transition: background 140ms var(--curva), border-color 140ms var(--curva), color 140ms var(--curva);
}
.marca-gestao:hover { border-color: var(--accent); }
.marca-gestao[aria-pressed="true"] {
  background: var(--accent-forte);
  border-color: var(--accent-forte);
  color: white;
}

/* ── Barra do gestor + filtro ───────────────────────────────────────────────────────── */

.barra-gestor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.barra-gestor__esq { display: flex; align-items: center; gap: 8px; }

.abas--filtro { border: 1px solid var(--linha); border-radius: 999px; padding: 3px; background: var(--painel); }
.abas--filtro .aba { padding: 5px 14px; font-size: 12px; }

.botao--fantasma {
  padding: 6px 10px;
  background: none;
  border-color: transparent;
  color: var(--ink-3);
  font-size: 12px;
}
.botao--fantasma:hover { background: var(--painel-alto); color: var(--erro); }

.convite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid color-mix(in oklch, var(--accent) 30%, transparent);
  border-radius: var(--raio);
  background: var(--accent-fraco);
  color: var(--ink-2);
}
.convite strong { color: var(--ink); }

.ver-mais { display: flex; justify-content: center; gap: 8px; margin: 16px 0 8px; }
.ver-mais .botao { padding: 9px 18px; }

/* ── Período ────────────────────────────────────────────────────────────────────────── */

.periodo { display: flex; align-items: center; gap: 8px; }
/* `display: flex` vence o atributo `hidden` — sem isto, o seletor de período continuava
   aparecendo na tela de seleção de contas, onde não há métrica nenhuma para filtrar. */
.periodo[hidden] { display: none; }
.periodo__rotulo { color: var(--ink-3); font-size: 12px; }
.periodo__select {
  padding: 6px 10px;
  background: var(--painel-alto);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  cursor: pointer;
}
.periodo__datas { display: flex; align-items: center; gap: 6px; }
.periodo__datas[hidden] { display: none; }
.periodo__datas input {
  padding: 5px 8px;
  background: var(--painel-alto);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  color-scheme: dark;
}
.periodo__ate { color: var(--ink-3); font-size: 12px; }

/* O "+ hoje": soma o dia corrente à janela fechada. Some nos períodos que não o aceitam —
   checkbox clicável sem efeito ensina o usuário a desconfiar da tela. */
.com-hoje {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: var(--painel-alto);
  color: var(--ink-3);
  font-size: 11px;
  cursor: pointer;
  user-select: none;
  transition: background 140ms var(--curva), color 140ms var(--curva), border-color 140ms var(--curva);
}
.com-hoje[hidden] { display: none; }
/* Inerte quando o período não aceita "incluir hoje" (Hoje/Ontem/Personalizado): visível para
   ser descoberto, mas apagado e sem clique. */
.com-hoje--inativo { opacity: .4; cursor: not-allowed; }
.com-hoje--inativo input { cursor: not-allowed; }
.com-hoje:not(.com-hoje--inativo):hover { color: var(--ink); }
.com-hoje input { margin: 0; accent-color: var(--accent-forte); cursor: pointer; }
.com-hoje:has(input:checked) {
  border-color: color-mix(in oklch, var(--accent) 40%, transparent);
  background: var(--accent-fraco);
  color: var(--accent);
}

/* As datas reais da janela, ao lado do seletor. "7 dias" é ambíguo; "05/07 a 11/07" não é. */
.periodo__intervalo {
  color: var(--ink-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bloco__datas {
  margin-left: 6px;
  color: var(--inerte);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

/* ── Métricas ───────────────────────────────────────────────────────────────────────── */

/* A faixa do cabeçalho: o veredito sem abrir nada. */
.faixa-metricas { display: flex; align-items: center; gap: 6px; }

.metrica-chip {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--linha);
  background: var(--painel-alto);
  color: var(--ink-3);
  font-size: 11px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.metrica-chip b { color: var(--ink); font-weight: 600; }
.metrica-chip--gasto b { color: var(--accent); }

.chip--frio { color: var(--inerte); border-style: dashed; }

/* O bloco do resultado: a única linha que responde "funcionou?". Por isso ele grita. */
.resultado {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  margin-bottom: 12px;
  border: 1px solid color-mix(in oklch, var(--accent) 28%, transparent);
  border-radius: var(--raio);
  background: color-mix(in oklch, var(--accent) 22%, transparent);
  overflow: hidden;
}
.resultado__bloco { padding: 12px 14px; background: color-mix(in oklch, var(--accent) 8%, var(--painel)); }
.resultado__rotulo { color: var(--ink-3); font-size: 11px; margin-bottom: 3px; }
.resultado__valor {
  font-size: 20px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.resultado--incerto {
  display: block;
  padding: 12px 14px;
  border-color: color-mix(in oklch, var(--alerta) 34%, transparent);
  background: color-mix(in oklch, var(--alerta) 9%, transparent);
}
.resultado--incerto .resultado__valor { color: var(--alerta); font-size: 15px; }
.resultado__nota { margin-top: 4px; color: var(--ink-3); font-size: 12px; }
.resultado__nota--solta { margin: -6px 0 12px; }

/* Resultado que a API não entrega (visita ao perfil). Âmbar, não azul: o número ao lado é uma
   aproximação, e a cor tem que dizer isso antes de o usuário ler a etiqueta. */
.resultado--aproximado { border-color: color-mix(in oklch, var(--alerta) 30%, transparent); }
.resultado--aproximado .resultado__bloco { background: color-mix(in oklch, var(--alerta) 6%, var(--painel)); }
.resultado__valor--indisponivel { color: var(--alerta); font-size: 14px; font-weight: 500; }
.resultado__valor small { color: var(--ink-3); font-size: 12px; font-weight: 400; }
.resultado__tag {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--alerta) 16%, transparent);
  color: var(--alerta);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.metrica-chip--proxy {
  border-color: color-mix(in oklch, var(--alerta) 30%, transparent);
  background: color-mix(in oklch, var(--alerta) 8%, transparent);
}
.metrica-chip--proxy b { color: var(--alerta); }

.ficha__formula {
  margin-top: 3px;
  color: var(--inerte);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.metricas--vazio { border-style: dashed; }

/* ── Fase 3: análise ────────────────────────────────────────────────────────────────── */

.barra-conta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 0 12px;
}
.barra-conta__acoes { display: flex; gap: 8px; }

.botao--analise {
  border-color: color-mix(in oklch, var(--accent) 40%, transparent);
  background: var(--accent-fraco);
  color: var(--accent);
}
.botao--analise:hover { background: color-mix(in oklch, var(--accent) 22%, transparent); }

.analise {
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid color-mix(in oklch, var(--accent) 26%, transparent);
  border-radius: var(--raio);
  background: var(--painel);
}
.analise__cabeca { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.analise__titulo { margin: 0; font-size: 15px; font-weight: 600; }
.analise__texto { margin: 8px 0; color: var(--ink-2); }
.analise__comando {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid var(--linha);
  border-radius: 6px;
  background: var(--bg);
  font: 12px var(--mono);
  color: var(--accent);
  overflow-x: auto;
}
.analise__pendente {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio);
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.55;
}
.analise__pendente strong { color: var(--ink-2); }

/* A série diária: a forma da curva de gasto é o dado. Barra, não tabela. */
.serie {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  padding: 12px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--painel-fundo);
  overflow-x: auto;
}
.serie__dia { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 26px; flex: 1; }
.serie__barra {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 64px;
  border-radius: 3px;
  background: var(--painel-alto);
  overflow: hidden;
}
/* `scaleY`, não `height`: animar altura força recálculo de layout a cada quadro. */
.serie__barra span {
  width: 100%;
  height: 100%;
  transform: scaleY(var(--altura, 0));
  transform-origin: bottom;
  background: linear-gradient(to top, var(--accent-forte), var(--accent));
  border-radius: 3px 3px 0 0;
  transition: transform 300ms var(--curva);
}
.serie__rotulo { color: var(--ink-3); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* O livro-razão */
.atividades {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
}
.atividade {
  display: grid;
  grid-template-columns: 130px 150px minmax(0, 1fr) minmax(0, 1.2fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--linha);
  font-size: 12px;
}
.atividade:last-child { border-bottom: 0; }
.atividade:nth-child(odd) { background: var(--painel-fundo); }
.atividade__quando { color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.atividade__tipo { color: var(--ink); font-weight: 500; }
.atividade__objeto { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atividade__mudanca { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atividade__de { color: var(--inerte); text-decoration: line-through; }
.atividade__seta { color: var(--linha-forte); }
.atividade__para { color: var(--ok); }
.atividade__quem { color: var(--inerte); font-size: 11px; white-space: nowrap; }

@media (max-width: 900px) {
  .atividade { grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr); }
  .atividade__objeto, .atividade__quem { display: none; }
}

/* ── Botão só-ícone (engrenagem) ────────────────────────────────────────────────────── */

.botao--icone {
  padding: 7px;
  color: var(--ink-2);
}
.botao--icone:hover { color: var(--ink); text-decoration: none; }

/* ── Terminal da coleta (overlay) ───────────────────────────────────────────────────── */

.terminal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 24px;
  background: color-mix(in oklch, var(--bg) 70%, transparent);
  backdrop-filter: blur(3px);
}
.terminal[hidden] { display: none; }

/* Com o terminal aberto o fundo não rola — junto com o `inert` que o coleta.js aplica, a página
   de trás fica realmente fora de alcance, não só escondida. */
body.terminal-aberto { overflow: hidden; }

/* Cancelar é destrutivo (interrompe trabalho em curso): não pode ter o mesmo peso de "Fechar". */
#terminal-cancelar { color: var(--erro); border-color: color-mix(in oklch, var(--erro) 38%, transparent); }
#terminal-cancelar:hover { background: color-mix(in oklch, var(--erro) 12%, transparent); }
#terminal-cancelar[hidden] { display: none; }

.terminal__caixa {
  display: flex;
  flex-direction: column;
  width: min(900px, 100%);
  height: min(560px, 85vh);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  background: var(--painel);
  overflow: hidden;
  box-shadow: 0 20px 60px oklch(0 0 0 / 0.5);
}
.terminal__topo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--linha);
  background: var(--painel-alto);
}
.terminal__titulo { font-weight: 600; font-size: 13px; }
.terminal__estado { flex: 1; font-size: 12px; color: var(--ink-3); }
.terminal__estado--rodando { color: var(--alerta); }
.terminal__estado--ok { color: var(--ok); }
.terminal__estado--erro { color: var(--erro); }

.terminal__saida {
  flex: 1;
  margin: 0;
  padding: 12px 14px;
  overflow-y: auto;
  background: var(--bg);
  font: 12px/1.5 var(--mono);
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-word;
}
.terminal__linha { min-height: 1.5em; }
.terminal__linha--ok { color: var(--ok); }
.terminal__linha--erro { color: var(--erro); }
.terminal__linha--aviso { color: var(--alerta); }
.terminal__linha--fraca { color: var(--inerte); }

/* O diagnóstico do fim: sai da fonte mono do terminal de propósito. Não é saída de processo — é a
   resposta em português para "e agora?". Rola sozinho se for longo, sem espremer o log. */
.terminal__diag {
  flex-shrink: 0;
  max-height: 45%;
  overflow-y: auto;
  padding: 12px 14px;
  border-top: 1px solid var(--linha);
  background: var(--painel-alto);
  font-size: 13px;
  line-height: 1.5;
}
.terminal__diag[hidden] { display: none; }

.terminal__diag-topo { display: flex; align-items: flex-start; gap: 10px; }
.terminal__diag-icone {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 20px; height: 20px;
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
  color: var(--bg);
}
.terminal__diag-titulo { font-weight: 600; color: var(--ink); }
.terminal__diag-resumo { color: var(--ink-3); font-size: 12px; margin-top: 1px; }

.terminal__diag-bloco {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--linha);
}
.terminal__diag-causa { color: var(--ink-2); font-size: 12.5px; }
.terminal__diag-fazer { margin: 6px 0 0; padding-left: 18px; color: var(--ink-3); font-size: 12.5px; }
.terminal__diag-fazer li { margin-bottom: 4px; }
.terminal__diag-fazer b { color: var(--ink-2); font-weight: 600; }
.terminal__diag-rodape { margin: 10px 0 0; color: var(--inerte); font-size: 12px; }

.terminal__diag--ok    { border-top-color: color-mix(in oklch, var(--ok) 40%, transparent); }
.terminal__diag--ok    .terminal__diag-icone { background: var(--ok); }
.terminal__diag--aviso { border-top-color: color-mix(in oklch, var(--alerta) 45%, transparent); }
.terminal__diag--aviso .terminal__diag-icone { background: var(--alerta); }
.terminal__diag--erro  { border-top-color: color-mix(in oklch, var(--erro) 48%, transparent); }
.terminal__diag--erro  .terminal__diag-icone { background: var(--erro); }

/* ── Tela de configurações ──────────────────────────────────────────────────────────── */

.config { max-width: 760px; }
.config__cabeca { display: flex; align-items: baseline; justify-content: space-between; margin: 24px 0 8px; }
.config__titulo { margin: 0; font-size: 20px; font-weight: 600; }

.config-bloco { margin-top: 20px; }
.config-bloco__titulo { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.config-bloco__nota { margin: 0 0 16px; color: var(--ink-3); font-size: 13px; line-height: 1.5; }

.tokens { display: grid; gap: 14px; }

.token-card {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--painel);
  padding: 14px 16px;
}
.token-card__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.token-card__nome { font: 12px var(--mono); color: var(--ink); font-weight: 600; }
.token-card__sub { color: var(--ink-3); font-size: 12px; margin-top: 2px; }

.token-card__corpo { margin: 12px 0; }
.token-card__ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0; }
.token-card__ficha dt { color: var(--ink-3); font-size: 11px; margin-bottom: 2px; }
.token-card__ficha dd { margin: 0; color: var(--ink); font-size: 13px; }
.token-card__escopos { display: flex; flex-wrap: wrap; gap: 4px; }
.token-card__erro { color: var(--erro); font-size: 13px; margin: 0; }
.token-card__vazio { color: var(--inerte); font-size: 13px; margin: 0; }

.token-form { margin-top: 12px; border-top: 1px solid var(--linha); padding-top: 12px; }
.token-form[hidden] { display: none; }
.token-form__campo { display: flex; flex-direction: column; gap: 5px; margin: 12px 0; }
.token-form__campo span { font-size: 12px; color: var(--ink-2); font-weight: 500; }
.token-form textarea {
  padding: 9px 11px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  background: var(--bg);
  font: 12px var(--mono);
  color: var(--ink);
  resize: vertical;
}
.token-form__acoes { display: flex; gap: 8px; }
.token-form__resultado { margin: 4px 0 12px; padding: 10px 12px; border-radius: var(--raio); font-size: 13px; background: var(--painel-alto); color: var(--ink-2); }
.token-form__resultado--ok { background: color-mix(in oklch, var(--ok) 12%, transparent); color: var(--ink); }
.token-form__resultado--erro { background: color-mix(in oklch, var(--erro) 12%, transparent); color: var(--ink); }

.aviso--atencao {
  border-color: color-mix(in oklch, var(--alerta) 34%, transparent);
  background: color-mix(in oklch, var(--alerta) 10%, transparent);
}
.aviso--atencao strong { color: var(--alerta); }
.aviso--atencao code { font: 11px var(--mono); background: var(--painel-alto); padding: 1px 5px; border-radius: 4px; }

/* ── Estados ────────────────────────────────────────────────────────────────────────── */

.carregando { padding: 32px; text-align: center; color: var(--ink-3); }
.vazio { padding: 28px; text-align: center; color: var(--ink-3); border: 1px dashed var(--linha); border-radius: var(--raio); }
.vazio strong { color: var(--ink-2); }
.vazio--conta { text-align: left; }
.vazio__sub { margin: 4px 0 0; font-size: 12px; color: var(--inerte); }

/* Aponta a conta homônima onde as campanhas de fato estão. */
.conta-irma {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid color-mix(in oklch, var(--accent) 30%, transparent);
  border-radius: var(--raio);
  background: var(--accent-fraco);
  color: var(--ink-2);
  font-size: 13px;
}
.conta-irma strong { color: var(--ink); }
.conta-irma__lista { margin: 8px 0 0; padding-left: 18px; }
.conta-irma__lista li { margin-bottom: 4px; }
.conta-irma__pf { color: var(--ink-3); font-size: 11px; margin-left: 8px; }

.aviso {
  margin: 16px 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in oklch, var(--erro) 34%, transparent);
  background: color-mix(in oklch, var(--erro) 10%, transparent);
  border-radius: var(--raio);
  color: var(--ink-2);
}
.aviso strong { color: var(--erro); }

main { padding-bottom: 60px; padding-top: 8px; }

.rodape {
  padding-bottom: 40px;
  color: var(--inerte);
  font-size: 11px;
}

/* ── Tela de análise ────────────────────────────────────────────────────────────────── */

.voltar {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 20px 0 12px;
  color: var(--ink-3);
  font-size: 13px;
}
.voltar:hover { color: var(--accent); text-decoration: none; }

.analise-cabeca {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--linha);
}
.analise-cabeca__titulo { margin: 0; font-size: 20px; font-weight: 600; }
.analise-cabeca__sub { margin: 4px 0 0; color: var(--ink-3); font-size: 12px; }

.analise-bloco {
  margin-top: 24px;
  padding: 18px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--painel);
  break-inside: avoid;
}
.analise-bloco--pendente { border-color: color-mix(in oklch, var(--alerta) 35%, transparent); background: color-mix(in oklch, var(--alerta) 6%, var(--painel)); }
.analise-bloco--nota { background: var(--painel-fundo); }
.analise-bloco__titulo {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 12px;
  font-size: 14px; font-weight: 600;
}
.analise-nota { margin: 10px 0 0; color: var(--ink-3); font-size: 11px; line-height: 1.5; }

/* O perfil — a régua */
.perfil-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  align-items: end;
}
.perfil-campo { display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.perfil-campo > span { color: var(--ink-2); font-weight: 500; }
.perfil-campo select,
.perfil-campo input {
  padding: 8px 10px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  background: var(--painel-alto);
}
.perfil-campo small { color: var(--ink-3); font-size: 11px; line-height: 1.4; }
.perfil-acoes { display: flex; gap: 8px; }

/* Perfil já definido: uma LINHA, não um formulário. A régua é contexto, não a tarefa — um
   formulário aberto aqui empurraria o veredito (o que a pessoa veio ver) para baixo da dobra. */
.perfil-resumo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 16px;
}
.perfil-resumo__dados { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; }
.perfil-resumo__rotulo { color: var(--ink-3); font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: 0.06em; }
.perfil-resumo__cac { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.perfil-resumo__cac b { color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; }
.perfil-resumo__ticket { color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Vereditos */
.vereditos { display: grid; gap: 10px; }
/* A severidade já vem no selo ("Pausar", "Reduzir a verba"), que tem cor e texto. O cartão
   apenas ECOA essa cor, de leve — sem a tarja lateral grossa, que grita sem informar. */
.veredito {
  padding: 13px 15px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--painel-fundo);
  break-inside: avoid;
}
.veredito[data-nivel="pausar"] {
  border-color: color-mix(in oklch, var(--erro) 30%, transparent);
  background: color-mix(in oklch, var(--erro) 6%, var(--painel-fundo));
}
.veredito[data-nivel="reduzir"],
.veredito[data-nivel="sem_regua"],
.veredito[data-nivel="lancamento"] {
  border-color: color-mix(in oklch, var(--alerta) 28%, transparent);
  background: color-mix(in oklch, var(--alerta) 5%, var(--painel-fundo));
}
.veredito[data-nivel="ok"],
.veredito[data-nivel="escalar"] {
  border-color: color-mix(in oklch, var(--ok) 25%, transparent);
  background: color-mix(in oklch, var(--ok) 4%, var(--painel-fundo));
}

.veredito__topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.veredito__nome { margin: 0; font-size: 13px; font-weight: 600; }
.veredito__detalhe { margin: 0 0 8px; color: var(--ink-2); font-size: 12px; line-height: 1.5; }
.veredito__numeros { display: flex; gap: 14px; flex-wrap: wrap; color: var(--ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.veredito__numeros b { color: var(--ink); }
.veredito__tendencia[data-t="piorando"] { color: var(--erro); }
.veredito__tendencia[data-t="melhorando"] { color: var(--ok); }
.veredito__dias { color: var(--inerte); }

/* ── O diagnóstico do funil: dentro do cartão da campanha ───────────────────────────── */

.funil {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--linha);
}

.funil__sinais { display: flex; flex-wrap: wrap; gap: 6px; }

/* Um sinal é rótulo + número + faixa. A cor mora na FAIXA, não no número: o número é fato, a
   faixa é juízo — e só o juízo pode estar errado. */
.sinal {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 3px 9px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  font-size: 11px;
  white-space: nowrap;
}
.sinal__rotulo { color: var(--ink-3); }
.sinal__valor { color: var(--ink); font-variant-numeric: tabular-nums; }
.sinal__faixa { font-size: 10px; font-weight: 600; text-transform: lowercase; }

.sinal[data-faixa="ruim"]      { border-color: color-mix(in oklch, var(--erro) 42%, transparent);   background: color-mix(in oklch, var(--erro) 9%, transparent); }
.sinal[data-faixa="ruim"]      .sinal__faixa { color: var(--erro); }
.sinal[data-faixa="aceitavel"] { border-color: color-mix(in oklch, var(--alerta) 40%, transparent); background: color-mix(in oklch, var(--alerta) 8%, transparent); }
.sinal[data-faixa="aceitavel"] .sinal__faixa { color: var(--alerta); }
.sinal[data-faixa="bom"]       { border-color: color-mix(in oklch, var(--ok) 34%, transparent); }
.sinal[data-faixa="bom"]       .sinal__faixa { color: var(--ok); }
/* Excelente é o único preenchido: é o topo da escala e tem que se distinguir de "bom" a 1 m. */
.sinal[data-faixa="excelente"] { border-color: color-mix(in oklch, var(--ok) 55%, transparent);     background: color-mix(in oklch, var(--ok) 14%, transparent); }
.sinal[data-faixa="excelente"] .sinal__faixa { color: var(--ok); }
/* Imaturo é CINZA de propósito — não é ruim, é "ainda não significa nada". Pintar de vermelho um
   CTR de 380 impressões seria a tela mentindo com confiança. */
.sinal[data-faixa="imaturo"]   { border-style: dashed; opacity: 0.65; }
.sinal[data-faixa="imaturo"]   .sinal__faixa { color: var(--inerte); }
.sinal[data-faixa="neutro"]    .sinal__valor { color: var(--ink-2); }

.funil__etapa {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: var(--raio);
  background: var(--painel);
  border: 1px solid var(--linha);
}
.funil__etapa[data-acusa="sim"] {
  border-color: color-mix(in oklch, var(--alerta) 38%, transparent);
  background: color-mix(in oklch, var(--alerta) 7%, var(--painel));
}
.funil__etapa-rotulo {
  flex-shrink: 0;
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-3);
  padding-top: 2px;
}
.funil__etapa b { font-size: 12.5px; }
.funil__porque { margin: 3px 0 0; color: var(--ink-2); font-size: 12px; line-height: 1.5; }
.funil__acao { margin: 5px 0 0; color: var(--ink-3); font-size: 12px; line-height: 1.5; }

/* ── As faixas do funil (editáveis) ─────────────────────────────────────────────────── */

.faixas-fechado { display: flex; align-items: center; gap: 12px; }
.faixas-fechado__rotulo { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); }
.faixas-fechado__resumo { flex: 1; color: var(--ink-3); font-size: 12px; }
.faixas-fechado__resumo b { color: var(--ink-2); }

.faixas__cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }

table.faixas { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 12px; }
table.faixas th {
  text-align: left; padding: 6px 8px;
  color: var(--ink-3); font-weight: 600; font-size: 11px;
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
}
table.faixas td { padding: 7px 8px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.faixas__metrica { line-height: 1.5; }
.faixas__metrica b { display: inline-block; margin-right: 6px; }
.faixas__formula { display: block; color: var(--inerte); font-size: 10.5px; margin-top: 2px; }
.faixas__de { display: block; font-weight: 400; color: var(--inerte); font-size: 10px; }

.faixas__campo {
  width: 62px;
  padding: 4px 6px;
  border: 1px solid var(--linha);
  border-radius: 6px;
  background: var(--painel-fundo);
  color: var(--ink);
  font: inherit; font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.faixas__campo:focus { outline: none; border-color: var(--accent); }
.faixas__un { color: var(--inerte); font-size: 11px; margin-left: 3px; }

.faixas__acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.faixas__aviso { font-size: 12px; }
.faixas__aviso[data-tom="ok"] { color: var(--ok); }
.faixas__aviso[data-tom="erro"] { color: var(--erro); }

/* ── O ladrão do CBO ────────────────────────────────────────────────────────────────── */

.ladrao {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: var(--raio);
  border: 1px solid color-mix(in oklch, var(--erro) 42%, transparent);
  background: color-mix(in oklch, var(--erro) 8%, transparent);
}
.ladrao__selo {
  display: inline-block;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--erro);
}
.ladrao__detalhe { margin: 4px 0 0; color: var(--ink-2); font-size: 12px; line-height: 1.5; }

/* ── Gráficos ───────────────────────────────────────────────────────────────────────── */

.graficos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.grafico {
  margin: 0;
  padding: 12px 14px 8px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--painel-fundo);
  break-inside: avoid;
}
.grafico--largo { margin-top: 16px; }
.grafico--vazio { display: grid; place-items: center; min-height: 120px; }

.grafico__titulo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 6px;
  font-size: 12px; font-weight: 600;
}
.grafico__sub { color: var(--ink-3); font-size: 11px; font-weight: 400; font-variant-numeric: tabular-nums; }
.grafico__svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico__nota { margin: 6px 0 0; color: var(--ink-3); font-size: 11px; line-height: 1.5; }
.grafico__nota--alerta { color: var(--alerta); }

/* Grade e eixos: hairline SÓLIDA, um passo acima da superfície. Recessiva — nunca tracejada. */
.g-grade, .g-base { stroke: var(--linha); stroke-width: 1; }
.g-tick { fill: var(--inerte); font-size: 9px; text-anchor: end; font-variant-numeric: tabular-nums; }
.g-tick--x { text-anchor: middle; }
.g-nome { fill: var(--ink-2); font-size: 10px; }
.g-rotulo { fill: var(--ink-2); font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* A série: uma só, então sem legenda — o título já diz o que é. Linha de 2px. */
.g-linha { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* Anel na cor da superfície: o ponto continua legível onde cruza a linha. */
.g-ponto { fill: var(--accent); stroke: var(--painel-fundo); stroke-width: 2; }
.g-ponto--alto { fill: var(--erro); }

/* Linhas de referência: cor de STATUS, porque significam status (o teto e o limite de pausa). */
.g-ref { stroke-width: 1.5; }
.g-ref--cac { stroke: var(--alerta); }
.g-ref--pausar { stroke: var(--erro); }
.g-ref-rotulo { fill: var(--ink-3); font-size: 9px; font-weight: 600; }

/* Barras: topo arredondado, base reta, nunca preenchem a faixa inteira (a sobra é ar). */
.g-barra { fill: var(--accent); opacity: 0.85; }
.g-barra:hover { opacity: 1; }
.g-barra-h { fill: var(--accent); }
/* Âmbar = comeu orçamento e não entregou. É status, não identidade. */
.g-barra-h--alerta { fill: var(--alerta); }

/* A tabela das janelas */
.tabela-rolagem { overflow-x: auto; }
.j-marca { width: 30px; text-align: center !important; }
.j-marca .marca-gestao { margin: 0 auto; }
/* Linha fora do recorte: continua legível (é o "table view"), mas recua. */
.j-fora { opacity: 0.4; }

.selecao-barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-top: 16px;
  padding: 10px 16px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--painel-fundo);
  color: var(--ink-3);
  font-size: 12px;
}
.selecao-barra strong { color: var(--ink); }

.chip--cac { cursor: pointer; font-variant-numeric: tabular-nums; }
.chip--cac:hover { border-color: var(--accent); color: var(--accent); }
.janelas { width: 100%; border-collapse: collapse; font-size: 12px; }
.janelas th, .janelas td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--linha);
  text-align: right;
  white-space: nowrap;
}
.janelas thead th { color: var(--ink-3); font-size: 11px; font-weight: 600; }
.j-nome {
  text-align: left !important;
  max-width: 260px;
  overflow: hidden; text-overflow: ellipsis;
  font-weight: 500;
}
.j-custo { font-weight: 600; font-variant-numeric: tabular-nums; }
.j-apoio { color: var(--inerte); font-size: 10px; font-variant-numeric: tabular-nums; }
.j-vazia { color: var(--inerte); }
/* A janela de decisão (7 dias) é a que manda — destaque para o olho ir nela primeiro.
   Quando há CAC, a célula ganha o tom do veredito: o olho acha a campanha que sangra sem ler. */
.j-decisao { background: var(--accent-fraco); }
.j-decisao[data-tom="pausar"] { background: color-mix(in oklch, var(--erro) 14%, transparent); }
.j-decisao[data-tom="pausar"] .j-custo { color: var(--erro); }
.j-decisao[data-tom="reduzir"] { background: color-mix(in oklch, var(--alerta) 13%, transparent); }
.j-decisao[data-tom="reduzir"] .j-custo { color: var(--alerta); }
.j-decisao[data-tom="ok"] { background: color-mix(in oklch, var(--ok) 11%, transparent); }
.j-decisao[data-tom="ok"] .j-custo { color: var(--ok); }
/* As janelas com o dia corrente: incompletas. A cor avisa antes da legenda. */
.j-parcial { color: var(--ink-3); background: color-mix(in oklch, var(--alerta) 5%, transparent); }

/* Verba mexida fora do horário — o Facebook gasta até a meia-noite e acelera. */
.atividade--suspeita { background: color-mix(in oklch, var(--alerta) 9%, transparent); }
.atividade--suspeita .atividade__quando { color: var(--alerta); font-weight: 600; }

.avisos-leitura { margin: 0; padding-left: 18px; color: var(--ink-3); font-size: 12px; line-height: 1.6; }
.avisos-leitura li { margin-bottom: 6px; }

.aviso--info {
  border-color: color-mix(in oklch, var(--accent) 34%, transparent);
  background: var(--accent-fraco);
}
.aviso--info strong { color: var(--accent); }

.analise-rodape {
  margin: 28px 0 40px;
  padding-top: 14px;
  border-top: 1px solid var(--linha);
  color: var(--inerte);
  font-size: 11px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── Impressão / PDF ────────────────────────────────────────────────────────────────── */

/**
 * O PDF sai do próprio navegador (Ctrl+P → Salvar como PDF). Zero dependências: uma biblioteca
 * de PDF seriam centenas de KB para fazer pior do que o navegador já faz nativamente.
 *
 * O tema do painel é escuro. Papel é branco. Imprimir o escuro gastaria meio cartucho e sairia
 * ilegível — então a impressão INVERTE para tinta preta sobre branco.
 */
@media print {
  :root {
    color-scheme: light;
    --bg: white;
    --painel: white;
    --painel-alto: white;
    --painel-fundo: #f7f7f8;
    --linha: #d8d8dc;
    --linha-forte: #b0b0b8;
    --ink: #111;
    --ink-2: #333;
    --ink-3: #666;
    --inerte: #999;
    --accent: #0b63c5;
    --accent-forte: #0b63c5;
    --accent-fraco: #eaf2fc;
    --ok: #1a7f37;
    --alerta: #9a6700;
    --erro: #b42318;
  }

  body { background: white; color: black; }

  /* Fora da folha: navegação, botões, tudo que não é conteúdo. */
  .topo, .nao-imprime, .voltar, .rodape { display: none !important; }

  main { padding: 0; }
  .faixa { max-width: none; padding: 0; }

  .analise-bloco {
    border-color: #d8d8dc;
    box-shadow: none;
    /* Um bloco não pode ser cortado ao meio pela quebra de página. */
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .analise-bloco__titulo { break-after: avoid; }
  .veredito { break-inside: avoid; page-break-inside: avoid; }

  /* A tabela precisa caber na folha: sem rolagem no papel. */
  .tabela-rolagem { overflow: visible; }
  .janelas { font-size: 9px; }
  .janelas th, .janelas td { padding: 4px 5px; }
  .j-nome { max-width: 150px; }

  /* O formulário do perfil vira leitura, não entrada — em papel ninguém digita. */
  .perfil-form button { display: none; }
  .perfil-campo select, .perfil-campo input {
    border: 0;
    padding: 0;
    background: none;
    font-weight: 600;
    appearance: none;
  }

  a { color: inherit; text-decoration: none; }
  .atividades { font-size: 9px; }
}

@media (max-width: 900px) {
  /* A faixa de métricas some antes do nome ser cortado: o número está na ficha, o nome não
     tem outro lugar. Custo por resultado e gasto sobrevivem — são o veredito. */
  .faixa-metricas .metrica-chip:not(.metrica-chip--gasto):nth-child(1) { display: none; }
  .acord__meta .chip:not(.chip--forte) { display: none; }
}

@media (max-width: 640px) {
  :root { --respiro: 16px; }
  .trilha { display: none; }
  .periodo__rotulo { display: none; }
  .faixa-metricas .metrica-chip:not(.metrica-chip--gasto) { display: none; }
}

/* ── Campanhas paradas: presentes, mas sem disputar atenção ─────────────────────────── */

.paradas-fechado {
  display: flex; align-items: center; gap: 12px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--linha);
}
.paradas-fechado__resumo { flex: 1; color: var(--ink-3); font-size: 12px; }

.paradas { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linha); }
.paradas__cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.paradas__titulo { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.paradas__nota { margin: 6px 0 12px; color: var(--ink-3); font-size: 12px; line-height: 1.5; }

/* Rebaixadas de propósito: o dinheiro que sai AGORA é que manda. Elas voltam ao normal no hover
   e ao imprimir — no papel não existe "passar o mouse". */
.vereditos--paradas .veredito { opacity: 0.72; transition: opacity 140ms var(--curva); }
.vereditos--paradas .veredito:hover { opacity: 1; }
@media print { .vereditos--paradas .veredito { opacity: 1; } }

/* ── Relatório ────────────────────────────────────────────────────────────────────── */

.relatorio {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid color-mix(in oklch, var(--accent) 26%, transparent);
  border-radius: var(--raio);
  background: var(--painel);
}
.relatorio__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--linha);
}
.relatorio__titulo {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.relatorio__acoes {
  display: flex;
  gap: 8px;
}
.relatorio__texto {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--linha);
  border-radius: 6px;
  background: var(--bg);
  font: 12px/1.6 var(--mono);
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  max-height: 60vh;
  overflow-y: auto;
}
.botao--relatorio-header {
  border-color: color-mix(in oklch, var(--accent) 40%, transparent);
  background: var(--accent-fraco);
  color: var(--accent);
}
.botao--relatorio-header:hover {
  background: color-mix(in oklch, var(--accent) 22%, transparent);
}
.botao--relatorio {
  flex-shrink: 0;
}
.botao--relatorio-fechar {
  border-color: color-mix(in oklch, var(--ink-3) 40%, transparent);
  background: var(--painel-alto);
  color: var(--ink-3);
}
.botao--relatorio-fechar:hover {
  background: color-mix(in oklch, var(--erro) 15%, transparent);
  border-color: color-mix(in oklch, var(--erro) 40%, transparent);
  color: var(--erro);
}

/* ── Dialogo de configurações ───────────────────────────────────────────────── */

.dialogo {
  width: min(560px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--linha-forte);
  border-radius: 12px;
  background: var(--painel);
  color: var(--ink);
}
.dialogo::backdrop { background: oklch(0.1 0.01 265 / 0.7); }
.dialogo__form { display: grid; gap: 18px; padding: 20px 22px 18px; }
.dialogo__topo { display: flex; align-items: center; justify-content: space-between; }
.dialogo__topo h2 { margin: 0; font-size: 15px; font-weight: 600; }
.fechar { padding: 2px 6px; background: transparent; border: 0; color: var(--ink-3); font-size: 14px; cursor: pointer; border-radius: 5px; }
.fechar:hover { color: var(--ink); background: var(--painel-alto); }

.campo { display: grid; gap: 6px; }
.campo label { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.campo input { width: 100%; padding: 8px 10px; background: var(--bg); border: 1px solid var(--linha); border-radius: var(--raio); transition: border-color 140ms var(--curva); }
.campo input:focus { outline: none; border-color: var(--accent); }
.campo__ajuda { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-3); max-width: 68ch; }
.campo__ajuda code { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }

.campo--duplo { grid-template-columns: 1fr 1fr; gap: 14px; }
.campo--duplo > div { display: grid; gap: 6px; }
.campo--duplo label { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.campo--duplo input { width: 100%; padding: 8px 10px; background: var(--bg); border: 1px solid var(--linha); border-radius: var(--raio); transition: border-color 140ms var(--curva); }
.campo--duplo input:focus { outline: none; border-color: var(--accent); }

.conexao { padding: 11px 13px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--bg); }
.conexao__quem { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.conexao__nome { font-size: 15px; font-weight: 600; color: var(--ink); }
.conexao__tipo { font-size: 11.5px; color: var(--ink-3); }
.conexao__vazio { margin: 0; font-size: 12.5px; color: var(--ink-3); }

.gestores-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gestor-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 9px 11px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--bg); }
.gestor-item__nome { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.gestor-item__ativo { padding: 1px 7px; border-radius: 999px; background: var(--accent-fraco); border: 1px solid color-mix(in oklch, var(--accent) 40%, transparent); color: var(--accent); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.gestor-item .token-item__acoes { grid-row: 1 / span 2; grid-column: 2; }

.token-novo { display: flex; gap: 8px; }
.token-novo input { flex: 1; min-width: 0; }

.troca { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.troca input { width: 15px; height: 15px; accent-color: var(--accent-forte); cursor: pointer; }

.dialogo__resultado { margin: 0; padding: 9px 11px; border-radius: var(--raio); border: 1px solid var(--linha); background: var(--bg); font-size: 12.5px; color: var(--ink-2); white-space: pre-wrap; }
.dialogo__resultado[hidden] { display: none; }
.dialogo__resultado[data-tom="ok"] { border-color: color-mix(in oklch, var(--ok) 34%, transparent); }
.dialogo__resultado[data-tom="erro"] { border-color: color-mix(in oklch, var(--erro) 34%, transparent); }

.dialogo__pe { display: flex; align-items: center; gap: 8px; padding-top: 2px; }
.espaco { flex: 1; }

/* ══════════════════════════════════════════════════════════════════════════════════════
   DIAGNÓSTICO DO CONDA — o semáforo (verde/amarelo/vermelho/cinza)
   ══════════════════════════════════════════════════════════════════════════════════════ */

:root { --neutro: var(--inerte); }

/* A cor do status na LINHA fechada: uma faixa na borda esquerda do acordeão. */
.acord[data-status="ruim"]   { box-shadow: inset 3px 0 0 var(--erro); }
.acord[data-status="alerta"] { box-shadow: inset 3px 0 0 var(--alerta); }
.acord[data-status="bom"]    { box-shadow: inset 3px 0 0 var(--ok); }

.acord__diag { display: inline-flex; align-items: center; }
.aviso-diag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500; line-height: 1;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.aviso-diag__ponto { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.aviso-diag--erro   { color: var(--erro);   background: color-mix(in oklch, var(--erro) 14%, transparent); }
.aviso-diag--alerta { color: var(--alerta); background: color-mix(in oklch, var(--alerta) 18%, transparent); }
.aviso-diag--erro   .aviso-diag__ponto { background: var(--erro); }
.aviso-diag--alerta .aviso-diag__ponto { background: var(--alerta); }

/* O bloco DETALHADO dentro do acordeão. O status é carregado pelo selo colorido no título
   (.diag__selo) e pelas linhas — sem faixa lateral grossa. */
.diag .bloco__titulo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.diag__selo {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; text-transform: lowercase;
}
.diag__selo--erro   { color: var(--erro);   background: color-mix(in oklch, var(--erro) 15%, transparent); }
.diag__selo--alerta { color: var(--alerta); background: color-mix(in oklch, var(--alerta) 18%, transparent); }
.diag__selo--bom    { color: var(--ok);     background: color-mix(in oklch, var(--ok) 15%, transparent); }
.diag__selo--neutro { color: var(--inerte); background: color-mix(in oklch, var(--inerte) 15%, transparent); }
.diag__faixa-preco  { font-size: 11px; color: var(--ink-3); font-weight: 400; }
.diag__aviso-preco  { font-size: 11px; color: var(--alerta); font-weight: 500; }
.diag__vazio        { color: var(--ink-3); font-size: 13px; margin: 0; }

.diag__grade { display: grid; gap: 5px; margin-top: 4px; }
.diag__linha {
  display: grid; grid-template-columns: 11px minmax(130px, 1.4fr) 64px 1fr auto;
  align-items: center; gap: 10px; padding: 6px 9px; border-radius: 6px;
  background: var(--painel-fundo); font-size: 13px;
}
.diag__ponto { width: 9px; height: 9px; border-radius: 50%; }
.diag__linha--erro   .diag__ponto { background: var(--erro); }
.diag__linha--alerta .diag__ponto { background: var(--alerta); }
.diag__linha--bom    .diag__ponto { background: var(--ok); }
.diag__linha--neutro .diag__ponto { background: var(--inerte); }
.diag__rotulo { color: var(--ink-2); }
.diag__valor  { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.diag__faixa  { color: var(--ink-3); font-size: 11.5px; }
.diag__base   { color: var(--inerte); font-size: 11px; white-space: nowrap; }

/* Texto da métrica de análise colorido pelo status: ruim=vermelho, alerta=amarelo, bom=verde.
   Rótulo + valor + faixa entram na cor, com um leve fundo tingido, para a leitura ser imediata
   em campanha, conjunto e anúncio. Neutro (não se aplica) fica cinza. */
.diag__linha--erro   { background: color-mix(in oklch, var(--erro) 8%, var(--painel-fundo)); }
.diag__linha--alerta { background: color-mix(in oklch, var(--alerta) 8%, var(--painel-fundo)); }
.diag__linha--bom    { background: color-mix(in oklch, var(--ok) 8%, var(--painel-fundo)); }
.diag__linha--erro   .diag__rotulo, .diag__linha--erro   .diag__valor, .diag__linha--erro   .diag__faixa { color: var(--erro); }
.diag__linha--alerta .diag__rotulo, .diag__linha--alerta .diag__valor, .diag__linha--alerta .diag__faixa { color: var(--alerta); }
.diag__linha--bom    .diag__rotulo, .diag__linha--bom    .diag__valor, .diag__linha--bom    .diag__faixa { color: var(--ok); }

.diag__video { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; padding: 0 9px; }
.diag__etapa {
  font-size: 11.5px; font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--linha);
}
.diag__etapa--erro { color: var(--erro);   border-color: color-mix(in oklch, var(--erro) 45%, var(--linha)); }
.diag__etapa--bom  { color: var(--ok);     border-color: color-mix(in oklch, var(--ok) 45%, var(--linha)); }
.diag__etapa--neutro { color: var(--inerte); }
.diag__video-ajuda { font-size: 11px; color: var(--inerte); }

/* ══ Painel de abertura ══ */
.painel-geral {
  background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 14px 16px; margin: 4px 0 14px;
}
.painel-geral__topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.painel-geral__stats { margin-top: 12px; display: grid; gap: 12px; }
.painel-vazio { color: var(--ink-3); font-size: 13px; margin: 4px 0 0; }

.preco-control { display: flex; flex-direction: column; gap: 4px; }
.preco-control > label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.preco-control__campo { display: flex; align-items: center; gap: 6px; }
.preco-control__cifra { color: var(--ink-3); font-size: 14px; }
.preco-control__campo input {
  width: 90px; padding: 6px 8px; font-size: 15px; font-weight: 600;
  background: var(--painel-fundo); color: var(--ink);
  border: 1px solid var(--linha-forte); border-radius: 6px; outline: none;
}
.preco-control__campo input:focus { border-color: var(--acento, var(--ok)); }
.preco-control__faixa { font-size: 11.5px; color: var(--ink-3); }
.preco-control__faixa[data-sem="sim"] { color: var(--alerta); }

/* Totais gerais do período — a régua de números crus, acima do semáforo. */
.painel-geral-metricas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px;
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--linha);
}
.geral-tile {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 10px;
  background: var(--painel-fundo); border: 1px solid var(--linha); border-radius: 7px;
}
.geral-tile__rotulo { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-3); }
.geral-tile__valor { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }

.rodape-fraco { color: var(--inerte); }

/* Aviso de que o painel está somando só o subconjunto da busca. */
.painel-filtro {
  font-size: 12px; color: var(--accent); margin-bottom: 10px;
  padding: 6px 10px; border-radius: 6px;
  background: var(--accent-fraco); border: 1px solid color-mix(in oklch, var(--accent) 30%, transparent);
}
.painel-filtro code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; padding: 1px 5px; border-radius: 4px;
  background: color-mix(in oklch, var(--accent) 12%, transparent);
}

.painel-dist { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.painel-dist__item { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; }
.painel-dist__item b { font-size: 14px; }
.painel-dist__item--erro   { color: var(--erro);   background: color-mix(in oklch, var(--erro) 12%, transparent); }
.painel-dist__item--alerta { color: var(--alerta); background: color-mix(in oklch, var(--alerta) 15%, transparent); }
.painel-dist__item--ok     { color: var(--ok);     background: color-mix(in oklch, var(--ok) 12%, transparent); }
.painel-dist__item--neutro { color: var(--inerte); background: color-mix(in oklch, var(--inerte) 12%, transparent); }
.painel-dist__total { color: var(--ink-3); margin-left: auto; }

.painel-funil { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.painel-funil__card {
  display: flex; flex-direction: column; gap: 2px; padding: 9px 11px;
  border-radius: 7px; border: 1px solid var(--linha); background: var(--painel-fundo);
}
.painel-funil__card--erro   { border-color: color-mix(in oklch, var(--erro) 40%, var(--linha)); }
.painel-funil__card--alerta { border-color: color-mix(in oklch, var(--alerta) 40%, var(--linha)); }
.painel-funil__card--bom    { border-color: color-mix(in oklch, var(--ok) 40%, var(--linha)); }
.painel-funil__rotulo { font-size: 11.5px; color: var(--ink-3); }
.painel-funil__valor { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.painel-funil__card--erro   .painel-funil__valor { color: var(--erro); }
.painel-funil__card--alerta .painel-funil__valor { color: var(--alerta); }
.painel-funil__card--bom    .painel-funil__valor { color: var(--ok); }
.painel-funil__faixa { font-size: 11px; color: var(--inerte); }

/* Melhores campanhas / anúncios — ranking por menor CPA. */
.melhores-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.melhores__titulo { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.melhores__titulo small { color: var(--inerte); font-weight: 400; }
.melhores__lista { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; counter-reset: melhor; }
.melhor {
  display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 10px;
  padding: 5px 9px 5px 26px; border-radius: 6px; position: relative;
  background: var(--painel-fundo); border: 1px solid var(--linha); font-size: 12.5px;
}
.copiar-id {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; border-radius: 5px; cursor: pointer;
  color: var(--ink-3); background: var(--painel); border: 1px solid var(--linha);
}
.copiar-id:hover { color: var(--ink-1); border-color: var(--linha-forte); }
.copiar-id--ok { color: var(--ok); border-color: currentColor; }
.melhor::before {
  counter-increment: melhor; content: counter(melhor);
  position: absolute; left: 8px; color: var(--inerte); font-size: 11px; font-weight: 700;
}
.melhor--clicavel { cursor: pointer; }
.melhor--clicavel:hover { border-color: var(--linha-forte); }
.melhor__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }
.melhor__cpa { font-weight: 700; color: var(--ok); font-variant-numeric: tabular-nums; white-space: nowrap; }
.melhor__cpa small { color: var(--inerte); font-weight: 400; }
.melhor__compras { color: var(--ink-3); font-size: 11px; white-space: nowrap; }

.painel-ofensores { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.painel-ofensores__titulo { font-size: 12px; color: var(--ink-3); margin-right: 2px; }
.ofensor {
  font-size: 11.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 3px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linha); background: var(--painel-fundo); color: var(--ink-2);
}
.ofensor:hover { border-color: var(--linha-forte); }
.ofensor--erro   { border-color: color-mix(in oklch, var(--erro) 45%, var(--linha)); color: var(--erro); }
.ofensor--alerta { border-color: color-mix(in oklch, var(--alerta) 45%, var(--linha)); color: var(--alerta); }

/* ══ Barra de período (linha própria, botões) ══ */
.barra-periodo {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 0; border-top: 1px solid var(--linha);
}
.barra-periodo__rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.periodo-botoes { display: flex; gap: 4px; flex-wrap: wrap; }
.periodo-botao {
  font-size: 12.5px; padding: 4px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linha); background: var(--painel); color: var(--ink-2);
}
.periodo-botao:hover { border-color: var(--linha-forte); color: var(--ink); }
.periodo-botao[aria-checked="true"] {
  background: var(--accent); color: var(--painel); border-color: var(--accent); font-weight: 600;
}

/* Frescor do dado — à direita da barra de período. Sempre à vista; acende quando envelhece. */
.periodo__atualizado { margin-left: auto; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.periodo__atualizado b { color: var(--ink-2); font-weight: 600; }
.periodo__atualizado--velho,
.periodo__atualizado--nunca {
  color: var(--alerta); font-weight: 600;
  background: color-mix(in oklch, var(--alerta) 14%, transparent);
  padding: 3px 9px; border-radius: 999px;
}
.periodo__atualizado--nunca b { color: inherit; }

/* ══ Tokens: aviso no topo (só quando há problema) + pílulas na config ══ */
.tokens-aviso {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 0; border-top: 1px solid var(--linha);
}
.tokens-aviso__rotulo { font-size: 12px; font-weight: 600; color: var(--alerta); }
.tokens-config { display: flex; flex-direction: column; gap: 6px; }

/* ══════════════════════════════════════════════════════════════════════════════════════
   ABAS DO TOPO — Dashboard | Área de otimização
   ══════════════════════════════════════════════════════════════════════════════════════ */
.abas-topo { display: flex; gap: 4px; margin-left: 4px; }
.aba-topo {
  padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--ink-3); text-decoration: none; border: 1px solid transparent;
  white-space: nowrap;
}
.aba-topo:hover { color: var(--ink-1); background: var(--painel-alto); }
.aba-topo[aria-current="page"] {
  color: var(--accent); background: var(--accent-fraco);
  border-color: color-mix(in oklch, var(--accent) 30%, transparent);
}
/* Aba de área privada, para quem não entrou: cadeado + esmaecida, mas ainda clicável (leva ao login). */
.aba-topo--travada { color: var(--inerte); opacity: 0.75; }
.aba-topo--travada::after { content: " 🔒"; font-size: 10px; opacity: 0.8; }
.aba-topo--travada:hover { color: var(--ink-2); opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════════════════════
   DASHBOARD (tela executiva, dados do Facebook) — separada da otimização
   ══════════════════════════════════════════════════════════════════════════════════════ */
.dsec {
  margin: 26px 0 10px; font-size: 11px; font-weight: 700; color: var(--ink-3);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.dsec:first-child { margin-top: 6px; }

.dkpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.dkpi {
  background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 15px 17px;
}
.dkpi__topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.dkpi__rotulo { font-size: 11px; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; }
/* Número GRANDE — o destaque de leitura pedido (modelo do Conda). */
.dkpi__valor { font-size: clamp(30px, 3.2vw, 36px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; font-variant-numeric: tabular-nums; color: var(--ink); }
.dkpi__sub { font-size: 12px; color: var(--ink-2); margin-top: 7px; }
.dkpi.brand { border-color: color-mix(in oklch, var(--accent) 40%, var(--linha)); background: var(--accent-fraco); }
.dkpi.brand .dkpi__valor { color: var(--accent); }
.dkpi.neg { border-color: color-mix(in oklch, var(--erro) 40%, var(--linha)); }
.dkpi.neg .dkpi__valor { color: var(--erro); }

/* Pílula de tendência (Δ% vs período anterior) no canto de cada KPI */
.dpill { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dpill--bom { color: var(--ok); background: color-mix(in oklch, var(--ok) 14%, transparent); }
.dpill--ruim { color: var(--erro); background: color-mix(in oklch, var(--erro) 14%, transparent); }
.dpill--flat { color: var(--ink-3); background: color-mix(in oklch, var(--inerte) 12%, transparent); font-weight: 600; }

.dcard {
  background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px;
}
.dcard__nota { font-size: 11.5px; color: var(--inerte); margin-top: 10px; }
.dcard__obs {
  font-size: 12.5px; line-height: 1.5; color: var(--ink-2); margin: 12px 8px 0;
  padding: 10px 12px; border: 1px solid var(--linha);
  background: var(--painel-fundo); border-radius: var(--raio);
}
.dcard__obs b { color: var(--ink); }

/* Filtro "tag do projeto" */
.dfiltro { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 4px; }
.dfiltro > label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 600; }
.dfiltro__campo {
  display: flex; align-items: center; gap: 6px; flex: 1; min-width: 260px;
  background: var(--painel); border: 1px solid var(--linha-forte); border-radius: var(--raio); padding: 4px 10px;
}
.dfiltro__campo input {
  flex: 1; background: none; border: 0; outline: none; color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px;
}
.dfiltro__campo input::placeholder { color: var(--inerte); }
.dfiltro__info { font-size: 12px; color: var(--accent); font-weight: 600; }

/* Prévia da tag (item 3): as campanhas que casaram, ANTES de carregar os dados pesados */
.dprevia {
  width: 100%; margin-top: 8px; padding: 12px 14px;
  background: var(--painel-fundo); border: 1px solid var(--linha); border-radius: var(--raio);
}
.dprevia__topo { font-size: 12.5px; color: var(--ink-2); margin-bottom: 8px; }
.dprevia__topo b { color: var(--accent); font-variant-numeric: tabular-nums; }
.dprevia__topo code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--ink); background: var(--painel-alto); padding: 1px 5px; border-radius: 5px; }
.dprevia__topo--vazio { color: var(--alerta); margin-bottom: 0; }
.dprevia__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dprevia__lista li {
  font-size: 11.5px; color: var(--ink-2); background: var(--painel); border: 1px solid var(--linha);
  border-radius: 999px; padding: 3px 10px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dprevia__mais { color: var(--ink-3) !important; font-style: italic; }

/* Gráfico diário — três mini-gráficos empilhados, compactos (gasto · compras · valor) */
.dcard--graficos { display: flex; flex-direction: column; gap: 20px; }
.dmini { display: flex; flex-direction: column; gap: 8px; }
.dmini__cab {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: var(--ink-2);
}
.dmini__pico { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--ink-3); }

.dchart-wrap { overflow-x: auto; padding-bottom: 2px; }
/* Gráfico de LINHA compacto (SVG). Densidade FIXA por dia (STEP no JS) — o tamanho por ponto é o
   MESMO em qualquer período; período curto fica compacto (à esquerda), longo rola no eixo X.
   Sem esticar para preencher a largura (era isso que deixava períodos curtos exagerados). */
.dline { display: block; width: auto; max-width: none; height: auto; }
.dline__area { stroke: none; opacity: 0.10; }
.dline__linha { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dline__dot { stroke: var(--painel); stroke-width: 1.4; }
.dline__dot--hoje { stroke: var(--painel); stroke-width: 1.8; }
.dline__val { font-size: 11px; font-weight: 700; fill: var(--ink); font-variant-numeric: tabular-nums; }
.dline__dia { font-size: 11px; fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.dline__dia--hoje { fill: var(--accent); font-weight: 700; }
/* cores por série */
.dline--gasto  .dline__linha { stroke: var(--accent); } .dline--gasto  .dline__area { fill: var(--accent); } .dline--gasto  .dline__dot { fill: var(--accent); }
.dline--compras .dline__linha { stroke: var(--ok); }    .dline--compras .dline__area { fill: var(--ok); }    .dline--compras .dline__dot { fill: var(--ok); }
.dline--valor  .dline__linha { stroke: var(--alerta); } .dline--valor  .dline__area { fill: var(--alerta); } .dline--valor  .dline__dot { fill: var(--alerta); }
.dleg { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; }
.dleg--gasto { background: var(--accent); }
.dleg--compras { background: var(--ok); }
.dleg--valor { background: var(--alerta); }

/* Tabelas do dashboard */
.dtable-wrap { overflow-x: auto; }
.dtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.dtable th, .dtable td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.dtable th { font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.dtable td.num, .dtable th.num { text-align: right; font-variant-numeric: tabular-nums; }
.dtable td.num { font-weight: 600; color: var(--ink); }
.dtable td.dim { color: var(--ink-3); font-weight: 400; }
.dtable .num--alerta { color: var(--erro); }
.dtd-dia { font-weight: 600; }
.dtr--hoje { background: var(--accent-fraco); }
.dtag { font-size: 9.5px; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

.d-up { color: var(--ok); font-size: 11px; font-weight: 600; }
.d-down { color: var(--erro); font-size: 11px; font-weight: 600; }
.d-flat { color: var(--inerte); font-size: 11px; }

/* ── Alertas (topo do dashboard) ── */
.dalertas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin: 4px 0 4px; }
.dalerta { display: flex; gap: 11px; align-items: flex-start; padding: 13px 15px; border-radius: var(--raio); border: 1px solid var(--linha); background: var(--painel); }
.dalerta__icone { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-weight: 800; font-size: 12px; color: #fff; }
.dalerta__titulo { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.dalerta__texto { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.dalerta--ok { border-color: color-mix(in oklch, var(--ok) 35%, var(--linha)); background: color-mix(in oklch, var(--ok) 6%, var(--painel)); }
.dalerta--ok .dalerta__icone { background: var(--ok); }
.dalerta--alerta { border-color: color-mix(in oklch, var(--alerta) 40%, var(--linha)); background: color-mix(in oklch, var(--alerta) 7%, var(--painel)); }
.dalerta--alerta .dalerta__icone { background: var(--alerta); }
.dalerta--erro { border-color: color-mix(in oklch, var(--erro) 40%, var(--linha)); background: color-mix(in oklch, var(--erro) 7%, var(--painel)); }
.dalerta--erro .dalerta__icone { background: var(--erro); }

/* (o funil "da impressão à compra" foi removido do dashboard em 28/07/2026 — CSS junto.) */

/* ── Vídeo: retenção por marco ── */
.dvideo { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 10px; align-items: end; }
.dvid__col { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.dvid__valor { font-size: 18px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.dvid__trilho { width: 100%; max-width: 46px; height: 96px; background: var(--painel-fundo); border-radius: 6px; display: flex; align-items: flex-end; overflow: hidden; }
.dvid__barra { width: 100%; background: var(--accent); border-radius: 6px 6px 0 0; min-height: 2px; }
.dvid__n { font-size: 11px; color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.dvid__rot { font-size: 11px; color: var(--ink-3); }

/* ── Heatmap: custo por compra por dia ── */
.dheat { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.dheat__cel { border-radius: 8px; padding: 9px 8px; text-align: center; border: 1px solid transparent; }
.dheat__cel--hoje { outline: 2px solid var(--accent); outline-offset: 1px; }
.dheat__dia { font-size: 10.5px; opacity: .8; font-variant-numeric: tabular-nums; }
.dheat__valor { font-size: 14px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }
.dheat__leg { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: middle; margin-right: 2px; }
.dheat__leg--bom { background: oklch(0.62 0.14 145 / 0.5); }
.dheat__leg--ruim { background: oklch(0.62 0.14 25 / 0.5); }

/* Tabela com coluna Dia fixa ao rolar */
.dtable--fixa th:first-child, .dtable--fixa td:first-child {
  position: sticky; left: 0; background: var(--painel); z-index: 1;
}
.dtable--fixa .dtr--hoje td:first-child { background: color-mix(in oklch, var(--accent) 12%, var(--painel)); }

/* ── Vendas Hotmart ─────────────────────────────────────────────────────────────────── */

/* Estado vazio honesto — o caso enquanto a credencial não está de pé */
.hm-aguardando {
  max-width: 560px; margin: 40px auto; padding: 34px 30px; text-align: center;
  border: 1px dashed var(--linha-forte); border-radius: 14px; background: var(--painel-fundo);
}
.hm-aguardando__icone { font-size: 34px; line-height: 1; margin-bottom: 12px; filter: grayscale(.2); }
.hm-aguardando__titulo { margin: 0 0 8px; font-size: 18px; color: var(--ink); }
.hm-aguardando__texto { margin: 0 0 12px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.hm-aguardando__dica {
  margin: 0 auto; max-width: 440px; padding: 11px 14px; font-size: 13px; line-height: 1.5;
  color: var(--ink-2); background: var(--accent-fraco); border-radius: var(--raio);
}
.hm-aguardando__frescor { margin: 16px 0 0; font-size: 12px; color: var(--ink-3); }

/* Barras de receita por dia — leves, sem SVG */
.hm-barras {
  display: flex; align-items: flex-end; gap: 6px; overflow-x: auto; padding: 8px 2px 4px;
  min-height: 150px;
}
.hm-barra { flex: 1 0 34px; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 140px; justify-content: flex-end; }
.hm-barra__val { font-size: 10.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm-barra__col {
  width: 60%; max-width: 30px; min-height: 2px; border-radius: 4px 4px 0 0;
  background: linear-gradient(var(--accent), var(--accent-forte));
}
.hm-barra__dia { font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Quebra por produto + seleção */
.hm-prod__contagem { font-size: 11px; color: var(--ink-3); font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 8px; }
.hm-prod__acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 2px 8px; }
.hm-prod__ajuda { font-size: 12px; color: var(--ink-3); }
.hm-prod { display: flex; flex-direction: column; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; max-height: 360px; overflow-y: auto; }
.hm-prod__cab {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) 104px 96px 124px; gap: 10px; align-items: center;
  padding: 8px 12px; background: var(--painel-alto); position: sticky; top: 0; z-index: 1;
  font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3);
}
.hm-prod__cab-num { text-align: right; }
.hm-prod__linha {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) 104px 96px 124px; gap: 10px; align-items: center;
  padding: 8px 12px; border-top: 1px solid var(--linha); cursor: pointer; font-size: 13px;
}
.hm-prod__linha:first-child { border-top: 0; }
.hm-prod__linha:hover { background: var(--painel-fundo); }
.hm-prod__linha--off { opacity: .45; }
.hm-prod__check { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.hm-prod__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.hm-prod__preco { text-align: right; font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 600; }
.hm-prod__precomais { color: var(--ink-3); font-weight: 400; margin-left: 1px; cursor: help; }
.hm-prod__n { text-align: right; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.hm-prod__rec { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
@media (max-width: 720px) {
  .hm-prod__cab, .hm-prod__linha { grid-template-columns: 18px minmax(0, 1fr) 104px 124px; }
  .hm-prod__n, .hm-prod__cab > :nth-child(4) { display: none; }
}
@media (max-width: 520px) {
  .hm-prod__cab, .hm-prod__linha { grid-template-columns: 18px minmax(0, 1fr) 104px; }
  .hm-prod__rec, .hm-prod__cab > :nth-child(5) { display: none; }
}

/* Tabela de vendas recentes (sem comprador) */
.hm-tabela { border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.hm-tabela__cab, .hm-tabela__linha {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) 130px 110px; gap: 10px;
  align-items: center; padding: 9px 12px;
}
.hm-tabela__cab { background: var(--painel-alto); color: var(--ink-3); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.hm-tabela__linha { border-top: 1px solid var(--linha); font-size: 13px; }
.hm-tabela__prod { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.hm-tabela__num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.hm-frescor { margin: 14px 2px 0; font-size: 12px; color: var(--ink-3); }

/* Tabela de vendas COM pagamento — 5 colunas (Dia · Produto · Pagamento · Status · Valor) */
.hm-tabela--pag .hm-tabela__cab, .hm-tabela--pag .hm-tabela__linha {
  grid-template-columns: 52px minmax(0, 1fr) 108px 92px 128px;
}
.hm-tabela__forma { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-tabela__intl {
  font-size: 10px; font-weight: 700; color: var(--alerta);
  background: color-mix(in oklch, var(--alerta) 16%, transparent);
  padding: 1px 5px; border-radius: 5px; margin-left: 5px;
}

/* Nota de receita internacional (abaixo dos KPIs) — €/$ nunca somados ao R$ */
.hm-nota-moeda {
  margin: 8px 2px 0; font-size: 12.5px; color: var(--ink-2);
  padding: 8px 12px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--painel-fundo);
}
.hm-nota-moeda b { color: var(--ink); }
.hm-nota-moeda small { color: var(--ink-3); }

/* Aviso de vendas de teste ocultadas */
.hm-nota-teste {
  margin: 8px 2px 0; font-size: 12.5px; color: var(--ink-2);
  padding: 8px 12px; border: 1px dashed var(--linha-forte); border-radius: var(--raio);
  background: color-mix(in oklch, var(--alerta) 6%, var(--painel-fundo));
}
.hm-nota-teste b { color: var(--ink); }

/* Formas de pagamento (à vista × parcelado × PIX × boleto × internacional) */
.hm-pag { border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.hm-pag__item { display: grid; grid-template-columns: 130px 1fr 82px; align-items: center; gap: 12px; }
.hm-pag__forma { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-pag__trilho { height: 10px; border-radius: 999px; background: var(--painel-alto); overflow: hidden; }
.hm-pag__barra { display: block; height: 100%; background: var(--accent); border-radius: 999px; min-width: 3px; }
.hm-pag__n { text-align: right; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.hm-pag__n small { color: var(--ink-3); font-weight: 500; }
.hm-pag .dcard__nota { margin-top: 4px; }
@media (max-width: 560px) {
  .hm-pag__item { grid-template-columns: 96px 1fr 62px; gap: 8px; }
  .hm-tabela--pag .hm-tabela__cab, .hm-tabela--pag .hm-tabela__linha { grid-template-columns: 44px minmax(0, 1fr) 78px 70px 90px; gap: 7px; }
}

/* ── Lançamento ─────────────────────────────────────────────────────────────────────── */
.lc-config {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px;
  padding: 12px 14px; margin: 2px 0 6px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--painel-fundo);
}
.lc-config__campo { display: flex; flex-direction: column; gap: 5px; min-width: 220px; flex: 1 1 260px; }
.lc-config__campo--imposto { flex: 0 0 auto; min-width: 0; }
.lc-config label { font-size: 11px; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }
.lc-config select, .lc-imposto input {
  padding: 8px 10px; font-size: 13px; background: var(--bg); color: var(--ink);
  border: 1px solid var(--linha-forte); border-radius: var(--raio); outline: none;
}
.lc-config select:focus, .lc-imposto input:focus { border-color: var(--accent); }
.lc-imposto { display: flex; align-items: center; gap: 6px; }
.lc-imposto input { width: 76px; text-align: right; }
.lc-imposto span { color: var(--ink-3); }
.lc-bumps { flex: 1 1 100%; }
.lc-bumps > summary { cursor: pointer; font-size: 12.5px; color: var(--ink-2); padding: 6px 0; }
.lc-bumps__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; margin-top: 8px; }
.lc-bumpopt {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; align-items: center;
  padding: 6px 9px; border: 1px solid var(--linha); border-radius: var(--raio); font-size: 12.5px; cursor: pointer; color: var(--ink-2);
}
.lc-bumpopt--on { border-color: color-mix(in oklch, var(--accent) 45%, var(--linha)); background: var(--accent-fraco); }
.lc-bumpopt span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-bumpopt__q { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lc-bumpopt input { accent-color: var(--accent); }

.lc-sub, .lc-tab { font-weight: 400; }
.lc-sub { font-size: 12px; color: var(--ink-3); }
.lc-tab { border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.lc-tab__cab, .lc-tab__linha, .lc-tab__total {
  display: grid; gap: 10px; align-items: center; padding: 8px 12px; font-size: 13px; font-variant-numeric: tabular-nums;
}
.lc-tab--ing .lc-tab__cab, .lc-tab--ing .lc-tab__linha, .lc-tab--ing .lc-tab__total { grid-template-columns: 64px 1fr 1fr 1.3fr 1.3fr; }
.lc-tab--org .lc-tab__cab, .lc-tab--org .lc-tab__linha, .lc-tab--org .lc-tab__total { grid-template-columns: 64px 1fr 1fr 1fr; }
.lc-tab__cab { background: var(--painel-alto); color: var(--ink-3); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; }
.lc-tab__linha { border-top: 1px solid var(--linha); }
.lc-tab__total { border-top: 2px solid var(--linha-forte); font-weight: 700; background: var(--painel-fundo); }
.lc-num { text-align: right; }
.lc-neg { color: var(--erro); }

.lc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.lc-card { border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 14px; background: var(--painel-fundo); }
.lc-card__topo { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.lc-card__topo--bump { font-size: 12.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.lc-card__share { font-size: 12px; color: var(--accent); font-weight: 700; }
.lc-card__ticket { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.lc-card__ticket span { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.lc-card__ticket b { font-size: 18px; font-variant-numeric: tabular-nums; }
.lc-card__ticket small { color: var(--ink-3); }
.lc-card__linha { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; color: var(--ink-2); }
.lc-card__linha b { color: var(--ink); font-variant-numeric: tabular-nums; }

@media (max-width: 620px) {
  .hm-tabela__cab, .hm-tabela__linha { grid-template-columns: 48px minmax(0, 1fr) 92px; }
  .hm-tabela__num { display: none; }
}