/**
 * ════════════════════════════════════════════════════════════════════
 * BORDER BI — DESIGN SYSTEM
 *
 * Desenvolvido para: Border Ltd (street alfaiataria independente)
 * Última revisão: 07/05/2026
 *
 * PRINCÍPIOS:
 *   • Toda cor usa variável CSS (--xx) — NUNCA hex direto
 *   • Tokens canônicos do DS em border-ds.css (carregado antes); este
 *     arquivo só tem a camada de componente. Só tema claro.
 *   • Mobile-first responsive (768px breakpoint)
 *   • Sem inline styles — tudo em classes
 *
 * ÍNDICE:
 *   1. Reset + Variáveis (theme claro/escuro)
 *   2. Base + Body
 *   3. Layout (shell, sidebar, main)
 *   4. Sidebar (nav, brand, status)
 *   5. Header (deploy bar, API key bar)
 *   6. Painéis (panels, headers)
 *   7. Cards, Grids, Métricas
 *   8. Inputs, Buttons, Outputs
 *   9. Componentes (tags, alerts, badges)
 *  10. Gráficos (charts, bars, rank)
 *  11. Timeline, Cards especiais
 *  12. Competidores, Posicionamento
 *  13. Estratégia (decisão, testes, aprendizados)
 *  14. Referências, Logs, Versões
 *  15. Mobile responsividade
 *  16. Monitoring
 * ════════════════════════════════════════════════════════════════════
 */

/* ─────────────────────────────────────────────────────────────────
   1. RESET + VARIÁVEIS CSS (Design System)
   ───────────────────────────────────────────────────────────────── */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* ══ CAMADA DE COMPONENTE DO BOARD ══════════════════════════════
     Os apelidos COMUNS (--bg, --bg2, --sidebar-bg/-fg/-muted/-line, --border,
     --text, --sub, --dim, --accent, --green/--red/--warn, --sans/--serif/--mono)
     vêm de border-ds-aliases.css (linkado ANTES desta folha). Aqui só os apelidos
     ESPECÍFICOS do board e os valores sem token equivalente no DS.            */

  /* Backgrounds — degraus sem token no DS */
  --bg3: #EFEFEF;                /* degrau entre bg-muted e border */
  --bg4: #E8E8E8;                /* idem */
  --sidebar-hover: var(--color-text);               /* #212121 — hover do item de nav */
  --sidebar-active: var(--color-text-sub);          /* #3d3d3d — item de nav ativo */

  /* Borders — degraus sem token no DS */
  --border2: #CFCFCF;            /* degrau entre border e border-strong */
  --border-hi: #BDBDBD;          /* idem */

  /* Accents — específicos do board */
  --accent2: var(--color-neutral-dark);
  --accent-bg: color-mix(in srgb, var(--color-brand-primary) 5%, transparent);
  --blue: #7090d0;              /* azul de categoria (mapa/seções) — sem par no DS */
  /* Paleta de categoria — VÍVIDA (data-viz do DS). Concorrentes, mapa, quadrantes.
     Sem gold/amber: hues fortes e distintas. */
  --cat-1: var(--viz-categorical-1);  /* verde   #1e9e45 */
  --cat-2: var(--viz-categorical-2);  /* azul    #2660e0 */
  --cat-3: var(--viz-categorical-3);  /* laranja #f06a1e */
  --cat-4: var(--viz-categorical-4);  /* magenta #d11d6b */
  --cat-5: var(--viz-categorical-6);  /* roxo    #7b3fe4 */
  --cat-6: var(--viz-negative);       /* vermelho #e5202e */
  --cat-7: #0aa3a3;                   /* teal vívido (extensão da paleta) */

  /* Semânticas — fundos tint 5% (as cores base --red/--green/--warn vêm dos aliases) */
  --red-bg: color-mix(in srgb, var(--color-danger) 5%, transparent);
  --green-bg: color-mix(in srgb, var(--color-success) 5%, transparent);
  --warn-bg: color-mix(in srgb, var(--color-feedback-warning-dark) 5%, transparent);

  /* Tag/pill do DS — pares tint + fg (Figma: color/tag/{role}/bg+fg).
     Regra do DS: pílula = tint claro + texto escuro; nunca outline nem data-viz. */
  --tag-success-bg: var(--color-feedback-success-lightest); /* #d6ebd8 */
  --tag-success-fg: var(--color-feedback-success-principal);/* #1b5e20 */
  --tag-danger-bg:  var(--color-feedback-danger-lightest);  /* #f7dad9 */
  --tag-danger-fg:  var(--color-feedback-danger-principal); /* #b71c1c */
  --tag-neutral-bg: var(--color-neutral-light);             /* var(--border) */
  --tag-neutral-fg: var(--color-neutral-dark);              /* #3d3d3d */
  --tag-warning-bg: var(--color-feedback-warning-lightest); /* #fbe7cd */
  --tag-warning-fg: var(--color-feedback-warning-dark);     /* #8a4b00 — a11y: nunca amarelo puro em texto */
  --tag-brand-bg:   var(--color-brand-tertiary-lightest);   /* #dbe4d6 — verde de marca (ativo/decisão) */
  --tag-brand-fg:   var(--color-brand-tertiary-dark);       /* #16280f */

  /* Cores adicionais para componentes específicos */
  --color-scale: var(--viz-categorical-2);      /* Decisão: Scale */
  --color-testing: var(--viz-categorical-2);    /* Status: Testando */
  --on-accent: var(--color-text-inverse);       /* Texto sobre fundo --accent */
  --gold: var(--viz-categorical-5);             /* Destaque editorial / cenário futuro */
  --gold-soft: var(--cat-7);                         /* variante suave — sem token no DS */
  --threat: var(--viz-categorical-3);           /* Indicador de ameaça em mapas */
  --tooltip-bg: var(--color-surface-dark);      /* Fundo de tooltips de canvas */
  --tooltip-border: var(--color-neutral-dark);  /* Borda de tooltips de canvas */
  --tooltip-text: var(--color-neutral-light);   /* Texto de tooltips de canvas */

  /* Typography (--sans/--serif/--mono) vem dos aliases compartilhados */

  /* Font sizes */
  --fs-body: var(--font-size-md);
  --fs-caption: var(--font-size-sm);
  --fs-nav: var(--font-size-sm);

  /* Spacing scale (8px base) → escala inline do DS */
  --sp1: var(--spacing-inline-nano);   /* 8px */
  --sp2: var(--spacing-inline-xxxs);   /* 16px */
  --sp3: var(--spacing-inline-xxs);    /* 24px */
  --sp4: var(--spacing-inline-xs);     /* 32px */
  --sp5: var(--spacing-inline-sm);     /* 40px */
  --sp6: var(--spacing-inline-md);     /* 48px */

  /* Respiro lateral do miolo — mesma régua do brandbook (border-site.css) */
  --pad-x: var(--spacing-stack-giant);

  /* Cores de tendência (pins) — hues específicas sem par no DS */
  --tend-desfem: #4a6a5a;   /* desfem · tomboy · feminino desconstruído */
  --tend-masc:   #6a4a74;   /* masc queer · transmasc · não-binário masc */

  /* Curva de easing do brandbook — única curva permitida fora de linear */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 1450px) {
  :root { --pad-x: var(--spacing-stack-xxxl); }
}
@media (max-width: 1180px) {
  :root { --pad-x: var(--spacing-stack-md); }
}

/* ─────────────────────────────────────────────────────────────────
   1b. COMPONENTES DE RELATÓRIO (.rpt-*) — ds-border puro
   Componentes globais (sem scope por ID) construídos só com tokens
   e tipografia do DS. Reutilizáveis por qualquer painel de Relatório.
   Tipografia: combinar com .ds-overline / .ds-data / .ds-label no HTML.
   ───────────────────────────────────────────────────────────────── */

/* Rótulo de seção — usar junto de .ds-overline no HTML */
.rpt-section-label {
  color: var(--color-text-helper);
  margin: var(--spacing-stack-xs) 0 var(--spacing-stack-xxxs);
  padding-bottom: var(--spacing-stack-nano);
  border-bottom: 1px solid var(--color-border);
}/* Grid de KPIs *//* combinar com .ds-h5 no HTML */   /* combinar com .ds-caption */

/* Funil */
.rpt-funil { display: flex; flex-direction: column; gap: var(--spacing-stack-nano); margin: var(--spacing-stack-xxxs) 0; }
.rpt-funil-row { display: grid; grid-template-columns: 180px 1fr 56px; align-items: center; gap: var(--spacing-inline-mini); }
.rpt-funil-label { color: var(--color-text-sub); text-align: right; }
.rpt-funil-track { background: var(--color-bg-muted); border: 1px solid var(--color-border); border-radius: var(--radius-pill); height: 26px; overflow: hidden; }
.rpt-funil-bar {
  height: 100%;
  display: flex; align-items: center;
  padding: 0 var(--spacing-inline-mini);
  color: var(--color-text-inverse);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  background: var(--color-brand-primary);
}
.rpt-funil-bar.is-loss { background: var(--viz-negative); }
.rpt-funil-num { text-align: right; color: var(--color-text); font-variant-numeric: tabular-nums; }
.rpt-funil-num.is-loss { color: var(--viz-negative); }

/* Tabela de dados */
.rpt-table { width: 100%; border-collapse: collapse; }
.rpt-table th {
  text-align: left;
  color: var(--color-text-helper);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700; font-size: var(--font-size-xs);
  padding: var(--spacing-inset-nano) var(--spacing-inset-mini);
  border-bottom: 1px solid var(--color-border);
}
.rpt-table td {
  padding: var(--spacing-inset-mini);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  vertical-align: top;
}
.rpt-table tr:last-child td { border-bottom: none; }
.rpt-table .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-family-mono); }
.rpt-table .num.is-success { color: var(--color-success); }
.rpt-table .num.is-muted   { color: var(--color-text-helper); }
.rpt-table .rpt-row-name { font-weight: 500; color: var(--color-text); }
/* Nº de carrinho copiável (painel Vendas·Nuvemshop) — .tag dá o chip+cpTag; aqui só vira mono */
.rpt-table .rpt-cart-id { font-family: var(--font-family-mono); font-variant-numeric: tabular-nums; }

/* Pílula / badge — regra do DS: tint claro + texto escuro, nunca outline */
.rpt-badge {
  display: inline-block;
  border-radius: var(--radius-pill);
  font-weight: 600; font-size: var(--font-size-xs);
  padding: var(--spacing-inset-micro) var(--spacing-inset-nano);
  margin-left: var(--spacing-inline-nano);
  vertical-align: middle;
}
.rpt-badge.is-success { background: var(--tag-success-bg); color: var(--tag-success-fg); }
.rpt-badge.is-danger  { background: var(--tag-danger-bg);  color: var(--tag-danger-fg); }
.rpt-badge.is-warning { background: var(--tag-warning-bg); color: var(--tag-warning-fg); }
.rpt-badge.is-neutral { background: var(--tag-neutral-bg); color: var(--tag-neutral-fg); }

/* Card de diagnóstico (causa raiz) */
.rpt-diag-list { display: flex; flex-direction: column; gap: var(--spacing-stack-mini); }
.rpt-diag-card {
  display: flex; gap: var(--spacing-inline-mini); align-items: flex-start;
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border-strong);
  border-radius: var(--radius-large);
  padding: var(--spacing-inset-xs);
}
.rpt-diag-card.is-critical { border-left-color: var(--color-danger); }
.rpt-diag-card.is-warning  { border-left-color: var(--color-feedback-warning-dark); }
.rpt-diag-icon { font-size: 24px; flex-shrink: 0; }
.rpt-diag-body { flex: 1; }
.rpt-diag-title { font-weight: 600; color: var(--color-text); margin-bottom: var(--spacing-stack-quarck); }
.rpt-diag-desc  { color: var(--color-text-sub); line-height: 1.55; }
.rpt-diag-desc strong { color: var(--color-text); }
.rpt-diag-tag {
  align-self: flex-start;
  border-radius: var(--radius-pill);
  font-weight: 600; font-size: var(--font-size-xs);
  padding: var(--spacing-inset-micro) var(--spacing-inset-nano);
  background: var(--tag-neutral-bg); color: var(--tag-neutral-fg);
}
.rpt-diag-tag.is-critical { background: var(--tag-danger-bg);  color: var(--tag-danger-fg); }
.rpt-diag-tag.is-warning  { background: var(--tag-warning-bg); color: var(--tag-warning-fg); }

/* Painel de destaque (caixa de leitura / resumo / aviso) */
.rpt-callout {
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  padding: var(--spacing-inset-sm);
}
.rpt-callout.is-note {
  font-size: var(--font-size-xs); color: var(--color-text-sub); line-height: 1.5;
  padding: var(--spacing-inset-mini) var(--spacing-inset-xs);
}
.rpt-callout strong { color: var(--color-text); }

/* Linha de resumo (label ↔ valor) */
.rpt-summary { display: flex; flex-direction: column; gap: var(--spacing-stack-nano); }
.rpt-summary-row {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--spacing-inline-nano);
  padding-top: var(--spacing-stack-nano);
  border-top: 1px solid var(--color-border);
}
.rpt-summary-row:first-child { border-top: none; padding-top: 0; }
.rpt-summary-row .k { color: var(--color-text-sub); }
.rpt-summary-row .v { color: var(--color-text); font-weight: 500; max-width: 420px; text-align: right; }
.rpt-summary-row .v.is-accent { color: var(--color-text); font-weight: 600; }

/* Grid de cenários/projeção */
.rpt-proj-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-inline-mini); }
.rpt-proj-card {
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  padding: var(--spacing-inset-sm);
  display: flex; flex-direction: column; gap: var(--spacing-stack-nano);
}
.rpt-proj-card.is-highlight { border-color: var(--color-text); border-width: 2px; }
.rpt-proj-cenario { color: var(--color-text-sub); font-weight: 600; font-size: var(--font-size-sm); }
.rpt-proj-val { color: var(--color-text); }   /* combinar com .ds-h4 */
.rpt-proj-val.is-success { color: var(--color-success); }
.rpt-proj-desc { color: var(--color-text-helper); font-size: var(--font-size-xs); line-height: 1.5; }

/* Barra de progresso (meta) */
.rpt-progress-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-stack-quarck); }
.rpt-progress-track { background: var(--color-bg-muted); border: 1px solid var(--color-border); border-radius: var(--radius-pill); height: 14px; overflow: hidden; }
.rpt-progress-fill { height: 100%; background: linear-gradient(90deg, var(--color-brand-tertiary-principal), var(--color-brand-tertiary-light)); border-radius: var(--radius-pill); }
.rpt-progress-labels { display: flex; justify-content: space-between; margin-top: var(--spacing-stack-quarck); color: var(--color-text-helper); font-size: var(--font-size-xs); }

/* Lista de insights */
.rpt-insight-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--spacing-stack-mini); }
.rpt-insight-item { display: flex; gap: var(--spacing-inline-mini); align-items: flex-start; }
.rpt-insight-icon { font-size: var(--font-size-md); flex-shrink: 0; margin-top: var(--spacing-stack-micro); }
.rpt-insight-body { color: var(--color-text); line-height: 1.55; }
.rpt-insight-body strong { color: var(--color-text); font-weight: 600; }
.rpt-insight-body .sub { color: var(--color-text-helper); font-size: var(--font-size-xs); }

/* ─────────────────────────────────────────────────────────────────
   2. BASE + BODY
   ───────────────────────────────────────────────────────────────── */

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.55; /* mesma régua do brandbook */
  min-height: 100vh;
}

/* Anel de foco do DS — #0011ff sobre claro, #5a9bff sobre escuro */
:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Skip link para acessibilidade */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--text);
  color: var(--bg);
  padding: var(--spacing-inset-nano) var(--spacing-inset-xs);
  font-size: var(--font-size-sm);
  font-weight: 600;
  z-index: 9999;
  text-decoration: none;
  transition: top 0.1s;
}

.skip-link:focus {
  top: 0;
}

/* ─────────────────────────────────────────────────────────────────
   3. LAYOUT (shell, sidebar, main)
   ───────────────────────────────────────────────────────────────── */

.shell {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  padding: var(--spacing-inset-md) var(--spacing-inset-xs) var(--spacing-inset-sm);
  scrollbar-width: none;
}

.sidebar::-webkit-scrollbar {
  display: none;
}

.main {
  overflow: hidden;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ─────────────────────────────────────────────────────────────────
   4. SIDEBAR — espelha o rail do brandbook (medidas idênticas)
   ───────────────────────────────────────────────────────────────── */

/* Brand do rail = logotipo (arte travada — asset PNG); clica e volta pra home */
.brand-mark {
  padding: 0 var(--spacing-inset-mini);
  margin-bottom: var(--spacing-stack-xxxs);
}

.brand-mark-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.brand-mark-logo {
  display: block;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.brand-mark-logo img {
  width: 120px;
  height: auto;
  display: block;
}

.brand-mark-logo:focus-visible {
  outline: 2px solid var(--color-focus-ring-inverse);
  outline-offset: 2px;
}

.brand-mark .sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--font-size-sm);
  color: var(--sidebar-muted);
  letter-spacing: 0.02em;
  text-transform: none;
  display: block;
  margin-top: var(--spacing-stack-nano);
}

/* Cada seção = grupo de itens, ritmo de 4px como o brandbook (sem bordas) */
.nav-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-quarck);
}

.nav-section + .nav-section {
  margin-top: var(--spacing-stack-quarck);
}

.nav-label {
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  color: var(--sidebar-muted);
  text-transform: uppercase;
  padding: var(--spacing-inset-xs) var(--spacing-inset-mini) var(--spacing-inset-nano);
  font-weight: 700;
}

/* Item de nav e título de grupo = link do brandbook: 14px, número .n + texto .t */
.nav-item,
.nav-accordion-title {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-stack-mini);
  width: 100%;
  padding: var(--spacing-inset-nano) var(--spacing-inset-mini); /* idêntico ao brandbook (.sidebar nav a) */
  border-radius: var(--radius-medium);
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--font-size-sm);
  line-height: 1.55; /* mesma régua do brandbook → item = 40px */
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sidebar-muted);
  background: none;
  border: none;
  text-align: left;
  transition: color 0.15s, background 0.15s;
}

.nav-item:hover,
.nav-accordion-title:hover {
  color: var(--sidebar-fg);
  background: var(--sidebar-hover);
}

.nav-item.active,
.nav-accordion-title.active {
  color: var(--sidebar-fg);
  background: var(--sidebar-active);
  font-weight: 500;
}

.nav-item:focus-visible,
.nav-accordion-title:focus-visible,
.nav-accordion-chevron:focus-visible {
  outline: 2px solid var(--color-focus-ring-inverse);
  outline-offset: 0;
}

/* Numeração — mono, igual ao brandbook (1–9 nos grupos, N.M nos sub-itens) */
.nav-item .n,
.nav-accordion-title .n {
  font-family: var(--mono);
  font-size: var(--font-size-xs);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.42);
  min-width: 20px;
  flex-shrink: 0;
}

.nav-item:hover .n,
.nav-item.active .n,
.nav-accordion-title:hover .n,
.nav-accordion-title.active .n,
.nav-accordion.acc-open .nav-accordion-title .n {
  color: rgba(255, 255, 255, 0.75);
}

.nav-item .t,
.nav-accordion-title .t {
  flex: 1;
}

/* ─────────────────────────────────────────────────────────────────
   ACCORDION — grupos do rail (linha + seta = UM elemento só, como o brandbook)
   ───────────────────────────────────────────────────────────────── */

.nav-accordion {
  padding: 0;
  /* block (não flex) — senão o body vira flex-item e o track 1fr colapsa pra 0 */
  display: block;
}

/* Seta dentro da própria linha do título (margin-left:auto a empurra pra direita) */
.nav-accordion-title .arrow {
  margin-left: auto;
  align-self: center;
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  line-height: 1;
  color: inherit;
  opacity: 0.45;
  transform: rotate(0deg);
  transition: transform 0.6s var(--ease), opacity 0.6s var(--ease); /* seta acompanha o corpo */
}

.nav-accordion-title:hover .arrow,
.nav-accordion.acc-open .nav-accordion-title .arrow {
  opacity: 0.75;
}

.nav-accordion.acc-open .nav-accordion-title .arrow {
  transform: rotate(90deg);
}

/* Expand/collapse fluido — altura animada (JS seta o px exato em _setAccordionState).
   Anima a altura real do conteúdo, sem número mágico; curva = --ease do brandbook. */
.nav-accordion-body {
  height: 0;
  overflow: hidden;
  transition: height 0.6s var(--ease); /* mais lenta e delicada (pedido Helena 10/jun) */
}

.nav-accordion-inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-quarck);
  padding-top: var(--spacing-inset-quarck); /* respiro título→1º filho, dentro da área animada */
}

/* Sub-itens indentados a 38px como o brandbook */
.nav-accordion-body .nav-item {
  padding: var(--spacing-inset-nano) var(--spacing-inset-mini) var(--spacing-inset-nano) var(--spacing-inset-lg);
}

/* ─────────────────────────────────────────────────────────────────
   PAINÉIS DE GRUPO — páginas-resumo de cada seção
   ───────────────────────────────────────────────────────────────── */

.grupo-grid {
  display: grid;
  /* auto-fit + min maior: cards esticam p/ preencher e os títulos não truncam */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp2);
  margin-top: var(--sp3);
}

.grupo-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-stack-nano);
  padding: var(--sp2);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-medium);
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
  transition: background 0.15s, border-color 0.15s;
  min-height: 100px;
}

.grupo-card:hover {
  background: var(--bg3);
  border-color: var(--border2);
}

.grupo-card-destaque {
  border-color: var(--border2);
  background: var(--bg);
}

.grupo-card-icon {
  font-size: var(--font-size-md);
  color: var(--dim);
  line-height: 1;
}

.grupo-card-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}

.grupo-card-desc {
  font-size: var(--font-size-xs);
  color: var(--dim);
  line-height: 1.5;
}

/* Faixa de resumo numérico (Performance) */
.grupo-resumo-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp2);
  margin-top: var(--sp2);
}

/* cada KPI é um card próprio: label no topo-esquerda, número fixo no rodapé-direita,
   altura igual entre os cards (grid stretch + min-height de piso). */
.grupo-resumo-card {
  display: flex;
  flex-direction: column;
  min-height: 124px;
  padding: var(--sp2);
}

.grupo-resumo-label {
  font-size: var(--font-size-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: var(--spacing-stack-quarck);
}

.grupo-resumo-valor {
  margin-top: auto;
  text-align: right;
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}

/* Bloco "Resumo da seção" — usado em todas as páginas-grupo */
.grupo-resumo-block {
  margin-top: var(--sp2);
  padding: var(--sp2);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-medium);
}
.grupo-resumo-block-title {
  font-size: var(--font-size-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: var(--spacing-stack-mini);
  font-weight: 600;
}
.grupo-resumo-block-desc {
  font-size: var(--font-size-sm);
  color: var(--text);
  line-height: 1.55;
  margin-bottom: var(--sp2);
}
.grupo-update-list {
  display: grid;
  gap: var(--spacing-stack-nano);
}
.grupo-update-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--spacing-stack-mini);
  align-items: baseline;
  padding: var(--spacing-inset-nano) 0;
  border-bottom: 1px dashed var(--border);
  font-size: var(--font-size-sm);
}
.grupo-update-item:last-child { border-bottom: none; }
.grupo-update-label {
  color: var(--text);
}
.grupo-update-label strong {
  font-weight: 600;
}
.grupo-update-meta {
  color: var(--dim);
  font-size: var(--font-size-xs);
  font-family: var(--mono);
  letter-spacing: 0.02em;
  text-align: right;
}

/* Badge de automação */
.grupo-badges-row {
  margin-top: var(--sp2);
  margin-bottom: var(--sp1);
}

.grupo-badge-auto {
  display: inline-block;
  font-size: var(--font-size-xs);
  letter-spacing: 0.04em;
  padding: var(--spacing-inset-quarck) var(--spacing-inset-mini);
  border-radius: var(--radius-pill);
  background: var(--tag-success-bg);
  color: var(--tag-success-fg);
  border: none;
  font-weight: 700;
}

/* Rodapé do rail — status da IA + meta de deploy (movido do header) */
.side-foot {
  margin-top: auto;
  padding: var(--spacing-inset-sm) var(--spacing-inset-mini) 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-mini);
}

.status-bar {
  display: flex;
  align-items: center;
}

.side-foot-meta {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-quarck);
  padding-top: var(--spacing-inset-mini);
  border-top: 1px solid var(--sidebar-line);
  font-family: var(--mono);
  font-size: var(--font-size-xs);
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: var(--sidebar-muted);
}

.side-foot-item strong {
  color: var(--color-text-inverse-muted);
  font-weight: 700;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  display: inline-block;
  margin-right: var(--spacing-stack-nano);
  vertical-align: middle;
}

.status-text {
  font-size: var(--font-size-sm);
  font-family: var(--mono);
  letter-spacing: 0.04em;
  color: var(--sidebar-muted);
}

/* ─────────────────────────────────────────────────────────────────
   5. HEADER (deploy bar, API key bar)
   ───────────────────────────────────────────────────────────────── */

.deploy-bar {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: var(--spacing-inset-nano) var(--spacing-inset-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-stack-xxxs);
  flex-wrap: wrap;
}

.deploy-bar-brand {
  font-family: var(--sans);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text);
  text-transform: uppercase;
}

.deploy-bar-brand span {
  font-size: var(--font-size-sm);
  letter-spacing: 0.14em;
  color: var(--dim);
  text-transform: uppercase;
  margin-left: var(--spacing-stack-mini);
  font-family: var(--sans);
}

.deploy-bar-info {
  display: flex;
  gap: var(--spacing-stack-xxs);
  align-items: center;
  flex-wrap: wrap;
}

.deploy-item {
  font-size: var(--font-size-sm);
  color: var(--dim);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.deploy-item strong {
  color: var(--text);
  font-weight: 700;
}

.api-key-bar {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: var(--spacing-inset-mini) var(--spacing-inset-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-stack-mini);
}

.api-key-bar input {
  max-width: 300px;
  padding: var(--spacing-inset-nano) var(--spacing-inset-mini);
}

.api-key-bar .lbl {
  font-size: var(--font-size-sm);
  color: var(--dim);
  letter-spacing: 0.04em;
  white-space: nowrap;
  font-weight: 600;
}

.api-status {
  font-size: var(--font-size-xs);
  padding: var(--spacing-inset-quarck) var(--spacing-inset-mini);
  border: none;
  border-radius: var(--radius-pill);
  letter-spacing: 0.04em;
  font-weight: 700;
}

.api-status.ok {
  background: var(--tag-success-bg);
  color: var(--tag-success-fg);
}

.api-status.empty {
  background: var(--bg2);
  color: var(--dim);
  border: 1px solid var(--border);
}

/* ─────────────────────────────────────────────────────────────────
   6. PAINÉIS (panels, headers)
   ───────────────────────────────────────────────────────────────── */

.panel {
  display: none;
  padding: var(--spacing-inset-lg) var(--spacing-stack-xl) var(--spacing-stack-xxl);
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}

.panel.active {
  display: block;
}

/* Breadcrumb "Você está aqui" — espelha o do brandbook (Início / Seção / Painel).
   Vive no topo do .main, acima do painel ativo; go() preenche e mostra/esconde. */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-stack-nano); font-size: var(--font-size-sm); padding: var(--spacing-inset-sm) var(--spacing-stack-xl) 0; }
.breadcrumb[hidden] { display: none; }
.breadcrumb a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; padding: var(--spacing-inset-micro); border-radius: var(--radius-medium); }
.breadcrumb a:hover { opacity: .75; }
.breadcrumb .sep { color: var(--dim); }
.breadcrumb .crumb-sec { color: var(--sub); }
.breadcrumb .cur { font-weight: 500; color: var(--text); }

.panel-header {
  margin-bottom: var(--spacing-stack-sm);
  padding-bottom: var(--spacing-inset-sm);
  border-bottom: 1px solid var(--border);
}

/* H1 do brandbook: clamp(32–48px), lh 1.1, ls -.015em */
.panel-title {
  font-family: var(--sans);
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.1;
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--spacing-stack-mini);
  letter-spacing: -0.015em;
}

/* Kicker do brandbook: mono 12px, tracking .08em */
.panel-sub {
  font-family: var(--mono);
  font-size: var(--font-size-xs);
  color: var(--dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.panel-auto-badge {
  font-size: var(--font-size-xs);
  padding: var(--spacing-inset-quarck) var(--spacing-inset-mini);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg2);
  color: var(--dim);
  letter-spacing: 0.04em;
}

.panel-auto-badge.on {
  border: none;
  background: var(--tag-success-bg);
  color: var(--tag-success-fg);
  font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────
   7. SECTION LABELS + CARDS + GRIDS + MÉTRICAS
   ───────────────────────────────────────────────────────────────── */

.sec-label {
  font-size: var(--font-size-xs);
  letter-spacing: 0.22em;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: var(--spacing-stack-mini);
  display: block;
  font-weight: 700;
}

.sec-title {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
  margin-bottom: var(--spacing-stack-xxxs);
}

.card {
  background: var(--bg);                 /* DS: card branco + borda (era --bg2 cinza) */
  border: 1px solid var(--border);
  border-radius: var(--radius-large);    /* DS card radius (8px) */
  padding: var(--spacing-inset-sm) var(--spacing-inset-sm);
  margin-bottom: var(--spacing-stack-xxxs);
}

.card-label {
  font-size: var(--font-size-xs);
  letter-spacing: 0.22em;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: var(--spacing-stack-mini);
  font-weight: 700;
}

.card-title {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--spacing-stack-nano);
}

.card-body {
  font-size: var(--fs-body);
  color: var(--text);
  line-height: 1.85;
}

.card-body strong {
  color: var(--text);
  font-weight: 700;
}

.card-body a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.card-body a:hover {
  border-color: var(--text);
}

.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--spacing-stack-xxs) 0;
}

/* ── GRIDS ── */
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-stack-mini);
}

.grid3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--spacing-stack-mini);
}

.grid4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-stack-mini);
}

.grid-asym {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--spacing-stack-mini);
}

/* ── MÉTRICAS ── */
.metric {
  background: var(--bg);                 /* DS: card branco + borda */
  border: 1px solid var(--border);
  border-radius: var(--radius-large);    /* DS card radius (8px) */
  padding: var(--spacing-inset-sm) var(--spacing-inset-sm);
}

.metric-val {
  font-family: var(--sans);
  font-size: 40px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.03em;
}

.metric-val.sm {
  font-size: 24px;
}

.metric-val.accent {
  color: var(--accent);
}

.metric-label {
  font-size: var(--font-size-sm);
  color: var(--dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: var(--spacing-stack-nano);
  font-weight: 600;
}

/* metric-delta = texto auxiliar semântico do metric — NÃO é o Delta do DS.
   Variação numérica em pílula (componente Delta 2220:6) é o .stat-delta. */
.metric-delta {
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-stack-quarck);
  font-weight: 500;
}

.delta-up {
  color: var(--tag-success-fg);
}

.delta-down {
  color: var(--tag-danger-fg);
}

.delta-neu {
  color: var(--dim);
}

/* ─────────────────────────────────────────────────────────────────
   8. INPUTS + BUTTONS + OUTPUTS
   ───────────────────────────────────────────────────────────────── */

textarea,
input,
select {
  background: var(--bg);
  border: 1.5px solid var(--color-border-strong);  /* DS Input: stroke 1.5px #8A8A8A */
  border-radius: var(--radius-medium);        /* DS Input: radius 4px (era reto) */
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-body);
  padding: var(--spacing-inset-mini) var(--spacing-inset-xs);
  width: 100%;
  outline: none;
  resize: vertical;
  transition: border-color 0.15s;
}

/* Seta custom do select (fallback quando enhanceSelect não roda).
   appearance:none remove a seta nativa; o SVG fica alinhado à direita
   com padding-right reservado pra não sobrepor o texto. */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--spacing-inset-lg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8A8A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

textarea:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

textarea:focus,
input:focus,
select:focus {
  border-color: var(--text);
}

textarea {
  min-height: 88px;
}

select option {
  background: var(--bg2);
}

/* ── Select customizado (lista de opções estilizada) ──────────────────
   A popup de <option> nativa é renderizada pelo SO e não é estilizável.
   enhanceSelect() (board.js) esconde o <select> e desenha este componente,
   mantendo o nativo como fonte de verdade (value + change). */
.select {
  position: relative;
  display: block;
  width: 100%;
}
.select > select {            /* nativo escondido, mas presente p/ value/change */
  display: none;
}
.select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-stack-mini);
  width: 100%;
  background: var(--bg);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-medium);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-body);
  text-align: left;
  padding: var(--spacing-inset-mini) var(--spacing-inset-xs);
  cursor: pointer;
  transition: border-color 0.15s;
}
.select-trigger:hover,
.select[data-open="true"] .select-trigger {
  border-color: var(--text);
}
.select-trigger:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
.select-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.select-chevron {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--dim);
  transition: transform 0.18s var(--ease);
}
.select[data-open="true"] .select-chevron {
  transform: rotate(180deg);
}

.select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1000;
  width: 100%;
  margin: 0;
  padding: var(--spacing-inset-nano);
  list-style: none;
  background: var(--bg);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-medium);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  max-height: 280px;
  overflow-y: auto;
  animation: select-menu-in 0.16s var(--ease);  /* mesmo espírito do cross-fade das páginas */
}
.select-menu[hidden] {
  display: none;
}
@keyframes select-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-stack-nano);
  padding: var(--spacing-inset-nano) var(--spacing-inset-mini);
  border-radius: var(--radius-medium);
  color: var(--text);
  font-size: var(--fs-body);
  cursor: pointer;
}
.select-option:hover,
.select-option[data-active="true"] {
  background: var(--bg2);
}
.select-option[aria-selected="true"] {
  font-weight: 600;
  background: var(--bg3);
}
.select-option-check {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  opacity: 0;
}
.select-option[aria-selected="true"] .select-option-check {
  opacity: 1;
}

/* Variante compacta — bi-cont-sort e os selects "tom" */
.select--sm {
  display: inline-block;
  width: auto;
}
.select--sm .select-trigger {
  gap: var(--spacing-stack-nano);
  padding: var(--spacing-inset-quarck) var(--spacing-inset-nano);
  font-size: var(--font-size-xs);
}
.select--sm .select-menu {
  font-size: var(--font-size-xs);
}

/* ── Bloco "Plataformas e tom" (Image → Copy) ─────────────────────────
   Classes reutilizáveis no lugar do inline repetido das 3 linhas. */
.imgcopy-grid {
  display: grid;
  gap: var(--spacing-stack-nano);
}
.imgcopy-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-stack-mini);
  padding: var(--spacing-inset-mini) var(--spacing-inset-mini);
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
}
.imgcopy-check {
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.imgcopy-label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--spacing-stack-nano);
  font-size: var(--font-size-sm);
  color: var(--text);
  cursor: pointer;
}
.imgcopy-icon { font-size: var(--font-size-md); }
.imgcopy-icon.ig  { color: #E1306C; }   /* cores de marca das plataformas (externas ao DS) */
.imgcopy-icon.pin { color: #E60023; }

/* Dica "(opcional)" ao lado de labels — substitui o span inline repetido */
.opt-hint {
  color: var(--dim);
  font-weight: 400;
}

/* Texto auxiliar pequeno atenuado — substitui inline font-size+color repetido */
.text-dim-xs { font-size: var(--font-size-xs); color: var(--dim); }
.text-dim-sm { font-size: var(--font-size-xs); color: var(--dim); }

/* ── Rodapé "Histórico de versões" (ferramentas de IA) ────────────────
   Bloco idêntico em 8 painéis; classes no lugar do inline repetido. */
.versoes-section {
  margin-top: var(--spacing-stack-xs);
  padding-top: var(--spacing-inset-sm);
  border-top: 1px solid var(--border);
}
.versoes-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--spacing-stack-nano);
  background: none;
  border: none;
  padding: 0;
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
}
.versoes-wrap {
  display: none;        /* showVersoes() troca p/ block ao abrir */
  margin-top: var(--spacing-stack-mini);
}

.input-label {
  font-size: var(--font-size-sm);
  letter-spacing: 0.06em;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: var(--spacing-stack-nano);
  display: block;
  font-weight: 700;
}

/* Button do DS — primary sólido preto, secondary outline border-strong */
.btn {
  display: inline-flex;   /* label sempre centrada (Figma Button 25:223) */
  align-items: center;
  justify-content: center;
  gap: var(--spacing-stack-nano);
  background: var(--bg);
  border: 1px solid var(--color-border-strong);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--font-size-md);        /* text style .ds-button do DS (era 14px) */
  font-weight: var(--font-weight-bold, 700);  /* .ds-button do DS = Bold; fallback 700 (cópia border-ds.css do board ainda sem o token) */
  line-height: 1.2;       /* DS .ds-button — evita herdar o lh 1.7 do corpo (desalinhava o rótulo) */
  padding: var(--spacing-inset-mini) var(--spacing-inset-sm);     /* medidas do componente no BRANDBOOK/DS */
  border-radius: var(--radius-medium);
  cursor: pointer;
  letter-spacing: 0.01em;
  text-decoration: none;  /* .btn também é usado em <a> — nunca sublinhar */
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn:hover {
  background: var(--bg2);
  border-color: var(--text);
}

.btn-primary {
  border-color: var(--accent);
  color: var(--on-accent);
  background: var(--accent);
}

.btn-primary:hover {
  background: var(--color-surface-dark);
  border-color: var(--color-surface-dark);
  color: var(--on-accent);
}

.btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Tamanhos compactos do .btn (substituem padding/font-size inline) — padding na escala DS inset */
.btn-xs { padding: var(--spacing-inset-micro) var(--spacing-inset-nano);  font-size: var(--font-size-xs); }
.btn-sm { padding: var(--spacing-inset-quarck) var(--spacing-inset-mini); font-size: var(--font-size-xs); }
.btn-md { padding: var(--spacing-inset-quarck) var(--spacing-inset-mini); font-size: var(--font-size-sm); }

.btn-row {
  display: flex;
  gap: var(--spacing-stack-nano);
  margin-top: var(--spacing-stack-xxxs);
  flex-wrap: wrap;
}

.ai-output {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: var(--spacing-inset-sm);
  margin-top: var(--spacing-stack-xxxs);
  font-size: var(--fs-body);
  color: var(--text);
  line-height: 1.9;
  white-space: pre-wrap;
  display: none;
}

.ai-output.visible {
  display: block;
}

.ai-loading {
  display: none;
  align-items: center;
  gap: var(--spacing-stack-mini);
  margin-top: var(--spacing-stack-xxxs);
  font-size: var(--font-size-sm);
  color: var(--dim);
  font-weight: 600;
}

.ai-loading.visible {
  display: flex;
}

.spinner {
  width: 10px;
  height: 10px;
  border: 2px solid var(--border2);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ─────────────────────────────────────────────────────────────────
   9. COMPONENTES (alerts, badges, tags)
   ───────────────────────────────────────────────────────────────── */

/* Banner/callout do DS — borda neutra + filete semântico à esquerda + tint */
.alert {
  padding: var(--spacing-inset-xs) var(--spacing-inset-xs);
  font-size: var(--fs-body);
  line-height: 1.75;
  margin-bottom: var(--spacing-stack-xxxs);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius-medium);
}

.alert.warn {
  border-left-color: var(--color-warning);
  background: var(--tag-warning-bg);
  color: var(--tag-warning-fg);
}

.alert.warn strong {
  color: var(--tag-warning-fg);
}

.alert.info {
  border-left-color: var(--text);
  background: var(--bg2);
  color: var(--sub);
}

.alert.info strong {
  color: var(--text);
}

.alert.fix {
  border-left-color: var(--red);
  background: var(--tag-danger-bg);
  color: var(--color-danger-strong);
}

.alert.fix strong {
  color: var(--color-danger-strong);
}

/* Tag do DS — pílula tint claro + texto escuro (nunca outline) */
.badge {
  font-size: var(--font-size-xs);
  padding: var(--spacing-inset-quarck) var(--spacing-inset-mini);
  border: none;
  border-radius: var(--radius-pill);
  letter-spacing: 0.04em;
  display: inline-block;
  vertical-align: middle;
  font-weight: 700;
}

.badge-ok {
  background: var(--tag-success-bg);
  color: var(--tag-success-fg);
}

.badge-warn {
  background: var(--tag-warning-bg);
  color: var(--tag-warning-fg);
}

.badge-fix {
  background: var(--tag-danger-bg);
  color: var(--tag-danger-fg);
}

.badge-info {
  background: var(--tag-neutral-bg);
  color: var(--tag-neutral-fg);
}

.badge-ghost {
  background: var(--bg2);
  color: var(--dim);
  border: 1px solid var(--border);
}

/* ── TAGS / HASHTAGS ── */
.tag-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-stack-nano);
  margin: var(--spacing-stack-mini) 0;
}

.tag {
  font-size: var(--font-size-sm);
  padding: var(--spacing-inset-quarck) var(--spacing-inset-mini);
  border: 1px solid var(--border2);
  color: var(--sub);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  background: none;
  font-family: var(--sans);
  font-weight: 500;
}

.tag:hover {
  border-color: var(--text);
  color: var(--text);
}

.tag.copied {
  border-color: var(--green);
  color: var(--green);
}

/* Tags de tendência (Pinterest) — borda por categoria de público da Border.
   Cores de categoria do dashboard (fora da paleta de marca do DS). */
.tend-pin--desfem    { border-color: var(--tend-desfem); }            /* desfem · tomboy · feminino desconstruído */
.tend-pin--masc      { border-color: var(--tend-masc); }            /* masc queer · transmasc · não-binário masc */
.tend-pin--editorial { border-color: var(--accent2); }    /* conceitual · editorial · urbano */

.hashset {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: var(--spacing-inset-xs) var(--spacing-inset-sm);
  margin-bottom: var(--spacing-stack-mini);
}

.hashset-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-stack-mini);
}

.hashset-name {
  font-size: var(--font-size-sm);
  letter-spacing: 0.08em;
  color: var(--text);
  text-transform: uppercase;
  font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────
   10. GRÁFICOS (bar charts, rank rows, timeline)
   ───────────────────────────────────────────────────────────────── */

.bar-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-stack-mini);
  margin-bottom: var(--spacing-stack-mini);
}

.bar-lbl {
  font-size: var(--font-size-sm);
  color: var(--sub);
  min-width: 96px;
  font-weight: 500;
}

.bar-track {
  flex: 1;
  height: 12px;
  background: var(--bg3);
  border: none;
  border-radius: var(--radius-small);
  overflow: hidden;
  min-width: 0;
}

.bar-fill {
  height: 100%;
  background: var(--text);
  border-radius: var(--radius-small);
}

.bar-fill.green {
  background: var(--green);
}

.bar-fill.red {
  background: var(--red);
  opacity: 0.7;
}

.bar-pct {
  font-size: var(--font-size-sm);
  color: var(--sub);
  min-width: 36px;
  text-align: right;
  font-weight: 600;
}

.rank-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-stack-xxxs);
  padding: var(--spacing-inset-xs) 0;
  border-bottom: 1px solid var(--border);
}

.rank-row:last-child {
  border-bottom: none;
}

.rank-num {
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 700;
  color: var(--dim);
  min-width: 48px;
  opacity: 0.5;
}

.rank-info {
  flex: 1;
}

.rank-name {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text);
}

.rank-sub {
  font-size: var(--font-size-sm);
  color: var(--dim);
  margin-top: var(--spacing-stack-micro);
}

.rank-val {
  font-family: var(--sans);
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--text);
}

.timeline-item {
  border-left: 2px solid var(--border);
  padding: 0 0 var(--spacing-inset-sm) var(--spacing-inset-sm);
  position: relative;
}

.timeline-item::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text);
  position: absolute;
  left: -4px;
  top: 4px;
}

.timeline-date {
  font-size: var(--font-size-sm);
  color: var(--dim);
  letter-spacing: 0.04em;
  margin-bottom: var(--spacing-stack-quarck);
  font-weight: 600;
}

.timeline-title {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--spacing-stack-quarck);
}

.timeline-body {
  font-size: var(--font-size-sm);
  color: var(--sub);
}

/* ─────────────────────────────────────────────────────────────────
   11. SPECIAL CARDS (month, mini, scroll horizontal)
   ───────────────────────────────────────────────────────────────── */

.month-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: var(--spacing-inset-xs) var(--spacing-inset-sm);
}

.month-head {
  font-size: var(--font-size-xs);
  letter-spacing: 0.18em;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: var(--spacing-stack-xxxs);
}

.month-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--spacing-inset-nano) 0;
  border-bottom: 1px solid var(--border);
}

.month-stat:last-child {
  border-bottom: none;
}

.month-key {
  font-size: var(--fs-body);
  color: var(--sub);
}

.month-v {
  font-family: var(--sans);
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text);
}

.month-d {
  font-size: var(--font-size-xs);
  margin-top: var(--spacing-stack-micro);
}

.scroll-h {
  display: flex;
  gap: var(--spacing-stack-nano);
  overflow-x: auto;
  padding-bottom: var(--spacing-inset-nano);
  margin-bottom: var(--spacing-stack-xxxs);
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
}

.mini-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: var(--spacing-inset-mini) var(--spacing-inset-xs);
  min-width: 130px;
  flex-shrink: 0;
}

.mini-views {
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}

.mini-desc {
  font-size: var(--font-size-xs);
  color: var(--sub);
  margin-top: var(--spacing-stack-quarck);
  line-height: 1.4;
}

.mini-date {
  font-size: var(--font-size-xs);
  color: var(--dim);
  margin-top: var(--spacing-stack-quarck);
}

/* ─────────────────────────────────────────────────────────────────
   12. COMPETIDORES + POSICIONAMENTO
   ───────────────────────────────────────────────────────────────── */

.comp-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: var(--spacing-inset-sm) var(--spacing-inset-sm);
  margin-bottom: var(--spacing-stack-xxxs);
}

.comp-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--spacing-stack-xxxs);
}

.comp-name {
  font-size: 24px;
  font-weight: 500;
  color: var(--text);
  font-family: var(--serif);
}

.comp-followers {
  font-size: var(--font-size-xs);
  color: var(--accent);
  margin-top: var(--spacing-stack-micro);
}

.comp-links {
  display: flex;
  gap: var(--spacing-stack-mini);
  margin-top: var(--spacing-stack-nano);
}

.comp-links a {
  font-size: var(--font-size-xs);
  color: var(--dim);
  text-decoration: none;
  border-bottom: 1px solid var(--border2);
  padding-bottom: var(--spacing-inset-micro);
}

.comp-links a:hover {
  color: var(--accent);
  border-color: var(--accent2);
}

.comp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-stack-nano) var(--spacing-stack-xxxs);
  margin-bottom: var(--spacing-stack-xxxs);
}

.comp-field {
  padding: var(--spacing-inset-nano) 0;
  border-bottom: 1px solid var(--border);
}

.comp-field:last-child {
  border-bottom: none;
}

.comp-field-label {
  font-size: var(--font-size-xs);
  letter-spacing: 0.12em;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: var(--spacing-stack-quarck);
  font-weight: 700;
}

.comp-field-val {
  font-size: var(--fs-body);
  color: var(--sub);
  line-height: 1.5;
}

.comp-field-val .est {
  font-size: var(--font-size-xs);
  color: var(--dim);
  font-style: italic;
  margin-left: var(--spacing-stack-quarck);
}

.comp-forces {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-stack-nano);
  margin-top: var(--spacing-stack-mini);
}

.comp-forces-card {
  padding: var(--spacing-inset-mini) var(--spacing-inset-xs);
  border: 1px solid;
  border-radius: var(--radius-medium);
}

.comp-forces-card.force {
  border-color: color-mix(in srgb, var(--viz-categorical-1) 25%, transparent);
  background: var(--green-bg);
}

.comp-forces-card.weak {
  border-color: color-mix(in srgb, var(--red) 20%, transparent);
  background: var(--red-bg);
}

.comp-forces-label {
  font-size: var(--font-size-xs);
  letter-spacing: 0.12em;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: var(--spacing-stack-nano);
  font-weight: 700;
}

.comp-forces-text {
  font-size: var(--fs-body);
  color: var(--sub);
  line-height: 1.65;
}

.pos-map {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: var(--sp3) var(--sp3) var(--sp2);
  margin-bottom: var(--sp3);
  border-radius: var(--radius-medium);
  position: relative;
}

/* Bloco de seleção de cenário */
.pos-cenario-box {
  margin-bottom: var(--sp3);
  padding: var(--sp2);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
}

.pos-cenario-label {
  font-size: var(--font-size-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: var(--sp1);
  font-weight: 700;
}

.pos-cenario-btns {
  display: flex;
  gap: var(--sp1);
  flex-wrap: wrap;
  margin-bottom: var(--sp1);
}

.pos-cenario-btn {
  padding: var(--spacing-inset-mini) var(--sp2) var(--spacing-inset-mini) var(--spacing-inset-mini);   /* -4px à esq: balanço óptico do ícone (📍/🎯) */
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: .04em;
  border: 1px solid var(--border);
  border-radius: var(--radius-medium);
  cursor: pointer;
  font-family: var(--mono);
  background: none;
  color: var(--dim);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.pos-cenario-btn.active,
.pos-cenario-btn[aria-pressed="true"] {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

.pos-cenario-desc {
  font-size: var(--font-size-sm);
  color: var(--sub);
  line-height: 1.65;
  margin-top: var(--sp1);
}

/* Cabeçalho de seção dos mapas */
.pos-map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp1);
  margin-bottom: var(--sp2);
}

.pos-map-title {
  font-size: var(--font-size-xs);
  letter-spacing: 0.12em;
  color: var(--dim);
  text-transform: uppercase;
  font-weight: 700;
}

/* Filtros do mapa */
.pos-filters {
  display: flex;
  gap: var(--spacing-stack-nano);
  flex-wrap: wrap;
}

.pos-filter-btn {
  font-size: var(--font-size-sm);
  padding: var(--spacing-inset-quarck) var(--sp2);
}

/* ── Filtros de tipo de concorrência ─────────────────────────────── */
.tipo-filter-bar {
  display: flex;
  align-items: flex-start;
  gap: var(--sp2);
  padding: var(--spacing-inset-mini) 0 var(--spacing-inset-xs);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp2);
}
.tipo-filter-label {
  font-size: var(--font-size-xs);
  color: var(--dim);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-top: var(--spacing-inset-nano);
  min-width: 80px;
}
.tipo-filter-btns {
  display: flex;
  gap: var(--spacing-stack-nano);
  flex-wrap: wrap;
  flex: 1;
}
.tipo-filter-btn {
  font-size: var(--font-size-xs);
  padding: var(--spacing-inset-quarck) var(--spacing-inset-xs);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  letter-spacing: .03em;
}
.tipo-filter-btn.has-icon { padding-left: var(--spacing-inset-mini); }   /* -4px à esq: balanço óptico do ícone */
.tipo-filter-btn:hover { border-color: var(--accent2); color: var(--text); }
.tipo-filter-btn.active[data-tipo="all"]           { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.tipo-filter-btn.active[data-tipo="produto"]       { background: color-mix(in srgb, var(--viz-categorical-3) 90%, transparent); color: var(--on-accent); border-color: var(--viz-categorical-3); }
.tipo-filter-btn.active[data-tipo="posicionamento"]{ background: color-mix(in srgb, var(--viz-categorical-6) 90%, transparent); color: var(--on-accent); border-color: var(--viz-categorical-6); }
.tipo-filter-btn.active[data-tipo="vendas"]        { background: color-mix(in srgb, var(--viz-categorical-1) 90%, transparent); color: var(--on-accent); border-color: var(--viz-categorical-1); }
.tipo-filter-desc {
  font-size: var(--font-size-xs);
  color: var(--sub);
  line-height: 1.6;
  width: 100%;
  padding: var(--spacing-inset-quarck) var(--spacing-inset-nano);
  border-left: 3px solid var(--border);
  margin-top: var(--spacing-stack-micro);
}
.tipo-filter-count { font-size: var(--font-size-xs); color: var(--dim); padding: var(--spacing-inset-quarck) 0; white-space: nowrap; }
.comp-card.tipo-hidden { display: none; }
.tipo-badge {
  display: inline-flex; align-items: center; gap: var(--spacing-stack-quarck);
  font-size: var(--font-size-xs); letter-spacing: .08em; text-transform: uppercase;
  padding: var(--spacing-inset-micro) var(--spacing-inset-nano) var(--spacing-inset-micro) var(--spacing-inset-quarck); border-radius: var(--radius-medium); margin-right: var(--spacing-stack-quarck);  /* -4px à esq: balanço óptico do ícone */
}
.tipo-badge--produto    { background: color-mix(in srgb, var(--viz-categorical-3) 12%, transparent); color: color-mix(in srgb, var(--viz-categorical-3) 75%, black); border: 1px solid color-mix(in srgb, var(--viz-categorical-3) 30%, transparent); }
.tipo-badge--posicao    { background: color-mix(in srgb, var(--viz-categorical-6) 12%, transparent); color: color-mix(in srgb, var(--viz-categorical-6) 75%, black); border: 1px solid color-mix(in srgb, var(--viz-categorical-6) 30%, transparent); }
.tipo-badge--vendas     { background: color-mix(in srgb, var(--viz-categorical-1) 12%, transparent); color: color-mix(in srgb, var(--viz-categorical-1) 75%, black); border: 1px solid color-mix(in srgb, var(--viz-categorical-1) 30%, transparent); }
.tipo-badges-row { display: flex; flex-wrap: wrap; gap: var(--spacing-stack-quarck); margin: var(--spacing-stack-nano) 0 0; }

/* Canvas dos mapas */
.pos-canvas-wrap {
  position: relative;
  margin: 0 calc(-1 * var(--sp3));
}

.pos-canvas-hint {
  margin-top: var(--sp1);
  font-size: var(--font-size-xs);
  color: var(--dim);
  text-align: right;
  letter-spacing: .04em;
}

/* Seções internas dos gráficos */
.pos-section {
  margin: var(--sp3) calc(-1 * var(--sp3)) 0;
  padding: var(--sp3);
  border-top: 1px solid var(--border);
}

.pos-section--alt {
  background: var(--bg2);
}

.pos-section-subtitle {
  font-size: var(--font-size-sm);
  color: var(--dim);
  margin-bottom: var(--sp2);
  line-height: 1.5;
}

/* Leitura do mapa de valor */
.pos-valor-reading {
  margin-top: var(--sp2);
  padding: var(--sp2);
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-medium);
  font-size: var(--font-size-sm);
  color: var(--sub);
  line-height: 1.75;
}

.pos-valor-reading-label {
  color: var(--text);
  display: block;
  margin-bottom: var(--spacing-stack-nano);
  font-size: var(--font-size-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
}

.pos-map-svg-wrap {
  position: relative;
  width: 100%;
  height: 260px;
}

.pos-map-svg-wrap svg {
  width: 100%;
  height: 100%;
}

/* Bloco de leitura dos mapas */
.map-reading {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-medium);
  padding: var(--sp3);
  margin-top: var(--sp3);
}

.map-reading-title {
  font-size: var(--font-size-xs);
  letter-spacing: 0.12em;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: var(--sp2);
  font-weight: 700;
}

.map-reading-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--sp3);
  padding: var(--sp2) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-body);
  align-items: start;
  line-height: 1.65;
}

.map-reading-row:first-of-type {
  padding-top: 0;
}

.map-reading-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.map-reading-key {
  color: var(--sub);
  font-weight: 600;
  word-break: break-word;
  font-size: var(--font-size-sm);
}

.map-reading-val {
  color: var(--text);
  font-size: var(--fs-body);
}

/* ─────────────────────────────────────────────────────────────────
   13. ESTRATÉGIA (decisão, testes, aprendizados)
   ───────────────────────────────────────────────────────────────── */

.decision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-stack-mini);
  margin-bottom: var(--spacing-stack-xxs);
}

.decision-card {
  border: 1px solid var(--border);
  padding: var(--spacing-inset-xs) var(--spacing-inset-sm);
  background: var(--bg2);
}

.decision-label {
  font-size: var(--font-size-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: var(--spacing-stack-mini);
  font-weight: 700;
}

.decision-label.stop {
  color: var(--red);
}

.decision-label.continue {
  color: var(--green);
}

.decision-label.test {
  color: var(--accent);
}

.decision-label.scale {
  color: var(--color-scale);
}

.decision-content {
  font-size: var(--fs-body);
  color: var(--sub);
  line-height: 1.8;
}

.decision-content strong {
  color: var(--text);
}

.decision-input {
  background: var(--bg);                       /* DS Input: superfície branca */
  border: 1.5px solid var(--color-border-strong);  /* DS Input: stroke 1.5px #8A8A8A */
  color: var(--text);
  font-family: var(--mono);
  font-size: var(--fs-body);
  padding: var(--spacing-inset-nano) var(--spacing-inset-mini);
  width: 100%;
  outline: none;
  resize: none;
  transition: border-color 0.15s;
  min-height: 70px;
}

.decision-input:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.decision-input:focus {
  border-color: var(--accent2);
}

.test-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1fr 1.5fr;
  gap: 0;
  border-bottom: 1px solid var(--border);
}

.test-row:last-child {
  border-bottom: none;
}

.test-cell {
  padding: var(--spacing-inset-mini) var(--spacing-inset-xs);
  font-size: var(--fs-body);
  color: var(--sub);
  border-right: 1px solid var(--border);
}

.test-cell:last-child {
  border-right: none;
}

.test-cell.header {
  font-size: var(--font-size-xs);
  letter-spacing: 0.14em;
  color: var(--dim);
  text-transform: uppercase;
  padding-top: var(--spacing-inset-mini);
  padding-bottom: var(--spacing-inset-mini);
  background: var(--bg3);
  font-weight: 700;
}

.test-cell strong {
  color: var(--text);
}

.status-pill {
  font-size: var(--font-size-xs);
  padding: var(--spacing-inset-quarck) var(--spacing-inset-mini);
  border: none;
  border-radius: var(--radius-pill);
  letter-spacing: 0.04em;
  display: inline-block;
  font-weight: 700;
}

.status-ativo {
  background: var(--tag-brand-bg);
  color: var(--tag-brand-fg);
}

.status-pausado {
  background: var(--bg2);
  color: var(--dim);
  border: 1px solid var(--border);
}

.status-concluido {
  background: var(--tag-success-bg);
  color: var(--tag-success-fg);
}

.learn-block {
  margin-bottom: var(--spacing-stack-xxs);
}

.learn-header {
  font-size: var(--font-size-xs);
  letter-spacing: 0.18em;
  color: var(--dim);
  text-transform: uppercase;
  padding-bottom: var(--spacing-inset-nano);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--spacing-stack-mini);
  font-weight: 700;
}

.learn-item {
  padding: var(--spacing-inset-mini) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-body);
  color: var(--sub);
  display: flex;
  gap: var(--spacing-stack-mini);
  align-items: flex-start;
}

.learn-item:last-child {
  border-bottom: none;
}

.learn-item .marker {
  font-size: var(--font-size-xs);
  color: var(--dim);
  min-width: 64px;
  padding-top: var(--spacing-inset-micro);
  font-weight: 700;
}

.learn-item strong {
  color: var(--text);
}

.layer-card {
  border: 1px solid var(--border);
  padding: var(--spacing-inset-sm) var(--spacing-inset-sm);
  margin-bottom: var(--spacing-stack-mini);
  background: var(--bg2);
}

.layer-num {
  font-family: var(--sans);
  font-size: 32px;
  font-weight: 700;
  color: var(--dim);
  opacity: 0.3;
  float: right;
  line-height: 1;
  margin-top: -var(--spacing-stack-quarck);
}

.layer-label {
  font-size: var(--font-size-xs);
  letter-spacing: 0.2em;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: var(--spacing-stack-quarck);
  font-weight: 700;
}

.layer-title {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text);
  margin-bottom: var(--spacing-stack-mini);
}

.layer-desc {
  font-size: var(--fs-body);
  color: var(--text);
  line-height: 1.85;
}

.layer-desc strong {
  color: var(--text);
}

.layer-desc em {
  color: var(--accent);
  font-style: normal;
}

/* ─────────────────────────────────────────────────────────────────
   14. LOGS + VERSÕES + REFERÊNCIAS
   ───────────────────────────────────────────────────────────────── */

.log-entry {
  border: 1px solid var(--border);
  padding: var(--spacing-inset-xs) var(--spacing-inset-sm);
  margin-bottom: var(--spacing-stack-mini);
  background: var(--bg2);
}

.log-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-stack-nano);
}

.log-entry-date {
  font-size: var(--font-size-xs);
  letter-spacing: 0.12em;
  color: var(--dim);
  font-weight: 600;
}

.log-entry-title {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text);
}

.log-entry-body {
  font-size: var(--fs-body);
  color: var(--sub);
  line-height: 1.75;
}

.exec-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-stack-mini);
  margin-bottom: var(--spacing-stack-xs);
}

.exec-card {
  border: 1px solid var(--border);
  padding: var(--spacing-inset-xs) var(--spacing-inset-xs);
  background: var(--bg2);
}

.exec-label {
  font-size: var(--font-size-xs);
  letter-spacing: 0.16em;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: var(--spacing-stack-nano);
  font-weight: 700;
}

.exec-val {
  font-size: var(--fs-body);
  color: var(--text);
  line-height: 1.6;
}

.exec-card.risco {
  border-top: 2px solid var(--red);
}

.exec-card.oportunidade {
  border-top: 2px solid var(--green);
}

.exec-card.aprendizado {
  border-top: 2px solid var(--accent2);
}

.exec-card.foco {
  border-top: 2px solid var(--color-scale);
}

.ver-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-stack-xxxs);
  padding: var(--spacing-inset-mini) 0;
  border-bottom: 1px solid var(--border);
}

.ver-item:last-child {
  border-bottom: none;
}

.ver-date {
  font-size: var(--font-size-sm);
  color: var(--dim);
  min-width: 130px;
  font-weight: 600;
}

.ver-type {
  font-size: var(--font-size-xs);
  padding: var(--spacing-inset-micro) var(--spacing-inset-nano);
  border: 1px solid var(--border2);
  color: var(--dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

.ver-type.ia {
  border-color: var(--text);
  color: var(--text);
}

.ver-preview {
  flex: 1;
  font-size: var(--font-size-sm);
  color: var(--sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ver-actions {
  display: flex;
  gap: var(--spacing-stack-nano);
}

.ver-btn {
  font-size: var(--font-size-sm);
  padding: var(--spacing-inset-quarck) var(--spacing-inset-mini);
  border: 1px solid var(--border2);
  color: var(--dim);
  cursor: pointer;
  background: none;
  font-family: var(--sans);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  font-weight: 600;
}

.ver-btn:hover {
  border-color: var(--text);
  color: var(--text);
}

.ref-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: var(--spacing-inset-xs) var(--spacing-inset-sm);
  margin-bottom: var(--spacing-stack-xxxs);
}

.ref-card-label {
  font-size: var(--font-size-xs);
  letter-spacing: 0.22em;
  color: var(--dim);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: var(--spacing-stack-mini);
}

.ref-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-stack-mini);
  padding: var(--spacing-inset-mini) 0;
  border-bottom: 1px solid var(--border);
}

.ref-item:last-child {
  border-bottom: none;
}

.ref-type {
  font-size: var(--font-size-xs);
  padding: var(--spacing-inset-micro) var(--spacing-inset-nano);
  border: 1px solid var(--border2);
  color: var(--dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  align-self: center;
  font-weight: 700;
}

.ref-content {
  flex: 1;
  font-size: var(--font-size-sm);
  color: var(--sub);
  line-height: 1.6;
}

.ref-content a {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.ref-content a:hover {
  border-color: var(--text);
}

.ref-del {
  font-size: var(--font-size-md);
  color: var(--dim);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 var(--spacing-inset-quarck);
  line-height: 1;
  transition: color 0.15s;
}

.ref-del:hover {
  color: var(--red);
}

/* ─────────────────────────────────────────────────────────────────
   15. STATUS CONTEÚDO + MODO PRODUÇÃO
   ───────────────────────────────────────────────────────────────── */

.cs-pill {
  display: inline-block;
  font-size: var(--font-size-xs);
  padding: var(--spacing-inset-quarck) var(--spacing-inset-mini);
  border: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: var(--radius-pill);
}

.cs-ideia {
  background: var(--bg2);
  color: var(--dim);
  border: 1px solid var(--border);
}

.cs-producao {
  background: var(--tag-warning-bg);
  color: var(--tag-warning-fg);
}

.cs-publicado {
  background: var(--tag-success-bg);
  color: var(--tag-success-fg);
}

.cs-testando {
  background: color-mix(in srgb, var(--color-testing) 12%, white);
  color: color-mix(in srgb, var(--color-testing) 75%, black);
}

.cs-bem {
  background: var(--tag-success-bg);
  color: var(--tag-success-fg);
}

.cs-mal {
  background: var(--tag-danger-bg);
  color: var(--tag-danger-fg);
}

.modo-pill {
  display: inline-block;
  font-size: var(--font-size-xs);
  padding: var(--spacing-inset-quarck) var(--spacing-inset-mini);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: var(--radius-pill);
  background: var(--text);
  color: var(--bg);
}

.modo-simples {
  opacity: 0.5;
}

.modo-intermediario {
  opacity: 0.75;
}

.modo-completo {
  opacity: 1;
}

/* ─────────────────────────────────────────────────────────────────
   16. HOME DASHBOARD
   ───────────────────────────────────────────────────────────────── */

.home-shortcuts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-stack-mini);
  margin-bottom: 0;
}

.home-shortcut {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: var(--spacing-inset-sm) var(--spacing-inset-sm) var(--spacing-inset-xs);
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
  transition: border-color 0.15s, background 0.15s;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-quarck);
}

.home-shortcut:hover {
  border-color: var(--border-hi);
  background: var(--bg3);
}

.home-shortcut-icon {
  font-size: var(--font-size-md);
  margin-bottom: var(--spacing-stack-quarck);
  line-height: 1;
}

.home-shortcut-label {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}

.home-shortcut-desc {
  font-size: var(--font-size-sm);
  color: var(--dim);
  letter-spacing: 0.03em;
}

.home-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-stack-xxs);
  margin-top: var(--spacing-stack-nano);
}

.home-update-item {
  display: flex;
  gap: var(--spacing-stack-mini);
  align-items: flex-start;
  padding: var(--spacing-inset-xs) 0;
  border-bottom: 1px solid var(--border);
}

.home-update-item:last-child {
  border-bottom: none;
}

.home-update-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: var(--spacing-stack-nano);
}

.home-update-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}

.home-update-meta {
  font-size: var(--font-size-sm);
  color: var(--dim);
  margin-top: var(--spacing-stack-quarck);
  letter-spacing: 0.02em;
}

.home-oport-item {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: var(--spacing-inset-xs) var(--spacing-inset-xs);
  margin-bottom: var(--spacing-stack-mini);
}

.home-oport-num {
  font-size: var(--font-size-xs);
  letter-spacing: 0.2em;
  color: var(--dim);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: var(--spacing-stack-nano);
}

.home-oport-text {
  font-size: var(--font-size-sm);
  color: var(--text);
  line-height: 1.7;
}

/* ─────────────────────────────────────────────────────────────────
   17. MONITORING
   ───────────────────────────────────────────────────────────────── */

.monitor-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-stack-xxs);
}

.monitor-updated {
  font-size: var(--font-size-xs);
  color: var(--dim);
  letter-spacing: 0.1em;
}

.monitor-updated span {
  color: var(--accent);
  font-weight: 500;
}

.comp-monitor-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: var(--spacing-inset-xs) var(--spacing-inset-sm);
  margin-bottom: var(--spacing-stack-mini);
}

.comp-monitor-name {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text);
  font-family: var(--serif);
  margin-bottom: var(--spacing-stack-mini);
  display: flex;
  align-items: center;
  gap: var(--spacing-stack-mini);
}

.comp-monitor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-stack-nano) var(--spacing-stack-xxs);
}

.comp-monitor-field {
  padding: var(--spacing-inset-nano) 0;
  border-bottom: 1px solid var(--border);
}

.comp-monitor-field:last-child {
  border-bottom: none;
}

.comp-monitor-label {
  font-size: var(--font-size-xs);
  letter-spacing: 0.15em;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: var(--spacing-stack-micro);
  font-weight: 700;
}

.comp-monitor-val {
  font-size: var(--font-size-md);        /* corpo = .ds-body */
  color: var(--sub);
  line-height: 1.55;
}

.monitor-section {
  margin-bottom: var(--spacing-stack-xxs);
}

.monitor-section-title {
  font-family: var(--serif);      /* nome de marca = mesma hierarquia do card-lista (ds-h5) */
  font-size: 24px;
  font-weight: 400;
  color: var(--text);
  padding-bottom: var(--spacing-inset-nano);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--spacing-stack-mini);
}

.monitor-bullet {
  padding: var(--spacing-inset-nano) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--font-size-sm);
  color: var(--sub);
  line-height: 1.65;
}

.monitor-bullet:last-child {
  border-bottom: none;
}

.monitor-bullet strong {
  color: var(--text);
}

.monitor-empty {
  font-size: var(--font-size-sm);
  color: var(--dim);
  padding: var(--spacing-inset-sm) 0;
  text-align: center;
}

.monitor-alert {
  padding: var(--spacing-inset-mini) var(--spacing-inset-xs);
  background: var(--tag-warning-bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-medium);
  color: var(--tag-warning-fg);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-stack-nano);
  font-weight: 500;
}

.benchmark-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-inset-mini) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--font-size-sm);
}

.benchmark-row:last-child {
  border-bottom: none;
}

.benchmark-brand {
  color: var(--text);
  font-weight: 500;
  min-width: 160px;
}

.benchmark-followers {
  color: var(--accent);
  font-family: var(--serif);
  font-size: var(--font-size-md);
  min-width: 80px;
}

.benchmark-note {
  color: var(--dim);
  font-size: var(--font-size-xs);
  flex: 1;
  text-align: right;
}

.monitor-pulse {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: var(--spacing-inset-xs) var(--spacing-inset-sm);
  margin-bottom: var(--spacing-stack-xxs);
  font-size: var(--font-size-sm);
  color: var(--text);
  line-height: 1.85;
  border-left: 3px solid var(--accent);
}

.monitor-rec {
  background: var(--bg3);
  border: 1px solid var(--border);
  padding: var(--spacing-inset-xs) var(--spacing-inset-sm);
  margin-top: var(--spacing-stack-xxs);
  font-size: var(--font-size-sm);
  color: var(--sub);
  line-height: 1.75;
}

.monitor-rec strong {
  color: var(--text);
}

.monitor-rec-label {
  font-size: var(--font-size-xs);
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: var(--spacing-stack-nano);
  font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────
   18. MOBILE + HAMBURGER
   ───────────────────────────────────────────────────────────────── */

.mobile-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-inset-mini) var(--spacing-inset-xs);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 50;
}

.mobile-logo {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: block;
}

.mobile-logo img {
  height: 22px;
  width: auto;
  display: block;
}

.hamburger {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-quarck);
  padding: var(--spacing-inset-quarck);
}

.hamburger span {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--text);
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 99;
}

.sidebar-overlay.open {
  display: block;
}

/* ─────────────────────────────────────────────────────────────────
   19. SCROLLBAR — NATIVA, como o brandbook.
   NUNCA estilizar ::-webkit-scrollbar global: isso desliga a overlay
   nativa do macOS e cria um trilho branco fora do conteúdo.
   (Custom só em scrollers internos escopados, ex. .mdl-scroll)
   ───────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────
   20. RESPONSIVE (768px breakpoint)
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .mobile-bar {
    display: flex;
  }

  .shell {
    grid-template-columns: 1fr;
    position: relative;
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 248px;
    height: 100vh;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.28s var(--ease);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .grid2,
  .grid3,
  .grid4,
  .grid-asym {
    grid-template-columns: 1fr;
  }

  .panel {
    padding: var(--spacing-inset-sm) var(--spacing-inset-xs) var(--spacing-stack-lg);
  }

  .breadcrumb { padding: var(--spacing-inset-xs) var(--spacing-inset-xs) 0; font-size: var(--font-size-sm); }

  .panel-title {
    font-size: 24px;
  }

  .home-shortcuts {
    grid-template-columns: 1fr 1fr;
  }

  .home-bottom-grid {
    grid-template-columns: 1fr;
  }

  .decision-grid {
    grid-template-columns: 1fr;
  }

  .comp-grid {
    grid-template-columns: 1fr;
  }

  .comp-forces {
    grid-template-columns: 1fr;
  }

  .comp-monitor-grid {
    grid-template-columns: 1fr;
  }

  .exec-grid {
    grid-template-columns: 1fr 1fr;
  }

  .test-row {
    grid-template-columns: 1fr;
  }

  .test-cell {
    border-right: none;
    padding: var(--spacing-inset-nano) var(--spacing-inset-mini);
  }

  .api-key-bar {
    flex-wrap: wrap;
    padding: var(--spacing-inset-nano) var(--spacing-inset-xs);
    gap: var(--spacing-stack-nano);
  }

  .api-key-bar input {
    max-width: 100%;
    flex: 1;
    min-width: 0;
  }

  .metric-val {
    font-size: 32px;
  }

  .metric-val.sm {
    font-size: 24px;
  }

  .map-reading-row {
    grid-template-columns: 1fr;
    gap: var(--spacing-stack-quarck);
  }

  #p-planejador [style*='grid-template-columns:repeat(3'],
  #p-planejador [style*='grid-template-columns:repeat(4'] {
    display: flex;
    flex-wrap: wrap;
  }

  .comp-charts-grid {
    grid-template-columns: 1fr !important;
  }

  .brand-mark {
    display: none;
  }

  .deploy-bar {
    padding: var(--spacing-inset-nano) var(--spacing-inset-xs);
  }

  .deploy-bar-brand span {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────────
   21. (dark mode removido — rebranding 2026-06)
   ───────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────
   UTILITIES & HELPERS
   ───────────────────────────────────────────────────────────────── */

/* ── FLEXBOX LAYOUTS ── */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-start {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-stack-mini);
}

.flex-gap {
  display: flex;
  gap: var(--spacing-stack-mini);
  align-items: center;
}

.flex-gap-6 {
  display: flex;
  gap: var(--spacing-stack-nano);
  align-items: center;
}

.flex-gap-8  { display: flex; gap: var(--spacing-stack-nano);  align-items: center; }
.flex-gap-12 { display: flex; gap: var(--spacing-stack-mini); align-items: center; }

.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-col-end { display: flex; flex-direction: column; align-items: flex-end; gap: var(--spacing-stack-nano); }
/* Linha de edição (oculta via style="display:none"; JS mostra com display:flex).
   display:flex na classe p/ funcionar mesmo quando o JS limpa o inline. */
.flex-edit-row { display: flex; align-items: center; gap: var(--spacing-stack-nano); margin-top: var(--spacing-stack-quarck); }
/* Campo de edição compacto mono (dentro da .flex-edit-row) — sem par no DS.
   Sobrepõe a base input só nos deltas; tokens onde dá. */
.input-edit {
  width: 160px;
  padding: var(--spacing-inset-micro) var(--spacing-inset-nano);                          /* inset micro × nano (DS) */
  font-size: var(--font-size-xs);
  font-family: var(--mono);
  background: var(--bg3);
  border: 1px solid var(--accent2);
  color: var(--text);
}
/* Label de opção clicável (checkbox/radio) — sem par no DS */
.check-label {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-stack-mini);                                 /* stack-mini (DS) */
  cursor: pointer;
  font-size: var(--font-size-sm);                           /* tamanho .ds-data/.ds-tab */
  color: var(--sub);
}
/* Bloco-seção com regra no topo (≠ .divider, que é <hr> com margem) */
.section-divider {
  margin-top: var(--spacing-stack-md);       /* 48 */
  padding-top: var(--spacing-inset-sm);      /* 24 (era 20, snap DS) */
  border-top: 1px solid var(--border);
}
/* Header de seção: título à esq + ações à dir, quebra no mobile */
.flex-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--spacing-stack-mini); }

.items-start { align-items: flex-start; }
.flex-shrink-0 { flex-shrink: 0; }
.pad-12-16 { padding: var(--spacing-inset-mini) var(--spacing-inset-xs); }   /* inset-mini × inset-xs (DS) */

/* ── GRID LAYOUTS ── */
[class*="grid-"]{
  display: grid;
  gap: var(--spacing-stack-mini);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-asym { grid-template-columns: 2fr 1fr; }

/* ─────────────────────────────────────────────────────────────────
   SIDEBAR & HEADER COMPONENTS (removido inline styles)
   ───────────────────────────────────────────────────────────────── */

.brand-mark-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.brand-mark-logo {
  display: block;
}

.brand-mark-controls {
  display: flex;
  gap: var(--spacing-stack-nano);
  align-items: center;
}



.close-sidebar-btn {
  background: none;
  border: none;
  color: var(--dim);
  font-size: var(--font-size-md);
  cursor: pointer;
  display: none;
  padding: 0;
  transition: color 0.15s;
}

.close-sidebar-btn:hover {
  color: var(--text);
}

.mobile-bar-controls {
  display: flex;
  gap: var(--spacing-stack-mini);
  align-items: center;
}




.header-clock {
  color: var(--accent);
}



.api-key-input {
  flex: 1;
  max-width: 300px;
}

.api-status-text {
  font-size: var(--font-size-xs);
  color: var(--dim);
}

.api-status-separator {
  font-size: var(--font-size-xs);
  color: var(--dim);
  border-left: 1px solid var(--border);
  padding-left: var(--spacing-inset-sm);
  margin-left: auto;
  white-space: nowrap;
  display: none;
}

.api-status-date {
  color: var(--accent);
}

/* ─────────────────────────────────────────────────────────────────
   PANEL CONTENT STYLES (card overrides, badges spacing, etc.)
   ───────────────────────────────────────────────────────────────── */

.card.card-success {
  border-color: color-mix(in srgb, var(--viz-categorical-1) 25%, transparent);
  background: var(--green-bg);
}

.card.card-error {
  border-color: color-mix(in srgb, var(--red) 30%, transparent);
  background: var(--red-bg);
}
/* Variante só-borda (nota de alerta sem tint de fundo). .card.X (0,2,0)
   pra vencer o reset agrupado `.card, .metric, …` que vem depois. */
.card.card--alert {
  border-color: color-mix(in srgb, var(--red) 20%, transparent);
}

.card.card-warning {
  border-color: color-mix(in srgb, var(--warn) 20%, transparent);
  background: color-mix(in srgb, var(--warn) 5%, transparent);
}

.card-label.label-success {
  color: var(--green);
}

.badge-spacing {
  margin-bottom: var(--spacing-stack-nano);
}

.sec-label-spaced {
  margin-top: var(--spacing-stack-xs);
  display: block;
}

.card-title-serif {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--font-size-md);
  font-weight: 300;
}

.card-body-tight {
  margin-top: var(--spacing-stack-nano);
}

.alert-tight {
  margin-bottom: var(--spacing-stack-xxs);
}

.grid-tight {
  margin-top: var(--spacing-stack-mini);
}

/* ── TABS ── */
/* Tabs do DS — active 500 + sublinhado 2px; inactive 400 helper */
.tab-container {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin: -var(--spacing-stack-quarck) -var(--spacing-stack-xxs) var(--spacing-stack-xs) -var(--spacing-stack-xxs);
  padding: 0 var(--spacing-inset-sm);
}

.tab-btn {
  padding: var(--spacing-inset-mini) var(--spacing-inset-sm);
  font-size: var(--font-size-sm);
  letter-spacing: 0.01em;
  background: none;
  border: none;
  margin-bottom: -var(--spacing-stack-micro);
  cursor: pointer;
  font-family: var(--sans);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.tab-btn.active {
  border-bottom: 2px solid var(--text);
  color: var(--text);
  font-weight: 500;
}

.tab-btn.inactive {
  border-bottom: 2px solid transparent;
  color: var(--dim);
  font-weight: 400;
}

.tab-btn.inactive:hover {
  color: var(--text);
}

/* ── SCENARIO BOX ── */
.scenario-box {
  margin-bottom: var(--spacing-stack-xxs);
  padding: var(--spacing-inset-xs) var(--spacing-inset-xs);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
}

.scenario-title {
  font-size: var(--font-size-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: var(--spacing-stack-mini);
  font-weight: 700;
}

.scenario-buttons {
  display: flex;
  gap: var(--spacing-stack-nano);
  flex-wrap: wrap;
}

.scenario-btn {
  padding: var(--spacing-inset-nano) var(--spacing-inset-xs);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid var(--accent);
  border-radius: var(--radius-medium);
  cursor: pointer;
  font-family: var(--mono);
  background: var(--accent);
  color: var(--on-accent);
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}

.scenario-btn.inactive {
  border-color: var(--border);
  background: none;
  color: var(--dim);
}

.scenario-desc {
  margin-top: var(--spacing-stack-mini);
  font-size: var(--font-size-xs);
  color: var(--sub);
  line-height: 1.6;
}

.scenario-desc.future {
  color: var(--gold);
  display: none;
}

/* Helper para .pos-map-title sem margem inferior */
.pos-map-title-no-margin {
  margin-bottom: 0;
}

/* ── CANVAS SECTIONS ── */
.canvas-hint {
  margin-top: var(--spacing-stack-mini);
  font-size: var(--font-size-xs);
  color: var(--dim);
  text-align: right;
  letter-spacing: 0.04em;
}

/* ── MAP READING ── */
.map-reading-future {
  margin-top: var(--spacing-stack-xs);
  display: none;
  border-color: color-mix(in srgb, var(--viz-categorical-5) 30%, transparent);
}

.map-reading-key-future {
  color: var(--gold-soft);
}

.map-reading-key-threat {
  color: var(--threat);
}

/* ── EDIT COMPONENTS ── */
.edit-inline {
  display: none;
  align-items: center;
  gap: var(--spacing-stack-nano);
  margin-top: var(--spacing-stack-quarck);
}

.edit-inline.visible {
  display: flex;
}

.edit-inline input {
  width: 120px;
  padding: var(--spacing-inset-quarck) var(--spacing-inset-nano);
  font-size: var(--font-size-xs);
  background: var(--bg3);
  border: 1px solid var(--accent2);
  color: var(--text);
  font-family: var(--mono);
}

.edit-inline button {
  padding: var(--spacing-inset-micro) var(--spacing-inset-nano);
  font-size: var(--font-size-xs);
}

.followers-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-stack-nano);
}

.followers-btn {
  font-size: var(--font-size-xs);
  padding: var(--spacing-inset-quarck) var(--spacing-inset-nano);
}

.followers-updated {
  font-size: var(--font-size-xs);
  color: var(--dim);
}

/* ── VISIBILIDADE ── */
.hidden {
  display: none !important;
}

.visible {
  display: block !important;
}

.inline-block {
  display: inline-block;
}

/* ── TEXT UTILITIES ── */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.uppercase {
  text-transform: uppercase;
}

.font-mono {
  font-family: var(--mono);
}

.font-serif {
  font-family: var(--serif);
}

/* ── SPACING (8px scale) ── */
/* Espaçamento — utilitários ancorados nos tokens de spacing do DS
   (stack = vertical/margin · inset = padding). Mesmos px de antes. */
.mt-0  { margin-top: 0; }
.mt-4  { margin-top: var(--spacing-stack-quarck); }   /* 4 */
.mt-8  { margin-top: var(--spacing-stack-nano); }     /* 8 */
.mt-12 { margin-top: var(--spacing-stack-mini); }     /* 12 */
.mt-16 { margin-top: var(--spacing-stack-xxxs); }     /* 16 */
.mt-24 { margin-top: var(--spacing-stack-xxs); }      /* 24 */
.mt-32 { margin-top: var(--spacing-stack-xs); }       /* 32 */
.mt-auto { margin-top: auto; }

.mb-0  { margin-bottom: 0; }
.mb-4  { margin-bottom: var(--spacing-stack-quarck); }
.mb-8  { margin-bottom: var(--spacing-stack-nano); }
.mb-12 { margin-bottom: var(--spacing-stack-mini); }
.mb-16 { margin-bottom: var(--spacing-stack-xxxs); }
.mb-24 { margin-bottom: var(--spacing-stack-xxs); }
.mb-32 { margin-bottom: var(--spacing-stack-xs); }

.p-16 { padding: var(--spacing-inset-xs); }   /* 16 */
.p-20 { padding: var(--spacing-inset-sm); }                       /* ⚠ fora da escala DS (16/24) — revisar na Fase D */
.p-24 { padding: var(--spacing-inset-sm); }   /* 24 */

/* ── Utilitários atômicos (substituem inline repetido) ────────────────────
   Cor/peso via tokens; tamanho/entrelinha na escala DS. Compõem-se:
   class="fs-12 c-dim", class="fs-14 c-sub lh-18". */
.c-text  { color: var(--text); }
.c-sub   { color: var(--sub); }
.c-dim   { color: var(--dim); }
.c-red   { color: var(--red); }
.c-green { color: var(--green); }
.c-blue  { color: var(--blue); }
.ls-08 { letter-spacing: 0.08em; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.underline { text-decoration: underline; }
.w-full { width: 100%; }
.mt-2 { margin-top: var(--spacing-stack-micro); }   /* 2 */
.fs-12 { font-size: var(--font-size-xs); }   /* escala DS — .ds-caption */
.fs-14 { font-size: var(--font-size-sm); }   /* .ds-data */
.fs-16 { font-size: var(--font-size-md); }   /* .ds-body */
.fs-24 { font-size: 24px; }   /* .ds-h5 */
.lh-16 { line-height: 1.6; }
.lh-18 { line-height: 1.8; }
.lh-19 { line-height: 1.9; }
.bg-3  { background: var(--bg3); }
.ml-auto { margin-left: auto; }
.relative { position: relative; }
.minh-120 { min-height: 120px; }
.gap-6 { gap: var(--spacing-stack-nano); }
.gap-8 { gap: var(--spacing-stack-nano); }
.gap-10 { gap: var(--spacing-stack-mini); }
.gap-12 { gap: var(--spacing-stack-mini); }
.gap-16 { gap: var(--spacing-stack-xxxs); }
.gap-4-16 { gap: var(--spacing-stack-quarck) var(--spacing-stack-xxxs); }
.italic { font-style: italic; }
/* Nota de rodapé separada por regra no topo (sem par no DS) */
.foot-note { font-size: var(--font-size-sm); color: var(--dim); margin-top: var(--spacing-stack-mini); padding-top: var(--spacing-inset-mini); border-top: 1px solid var(--border); }
/* Chip de valor/código inline (fundo sutil) — usar com .ds-caption p/ o texto */
.chip { background: var(--bg3); padding: var(--spacing-inset-micro) var(--spacing-inset-nano); border-radius: var(--radius-small); }
/* Estado vazio centralizado (sem par no DS) */
.empty-state { font-size: var(--font-size-sm); color: var(--dim); padding: var(--spacing-inset-xs) 0; text-align: center; }
/* Callout / caixa de destaque semântica (tint + borda) */
/* Callout — tint do DS + filete semântico à esquerda (espelha o board financeiro) */
.callout { border: 1px solid var(--border); border-left: 3px solid; border-radius: var(--radius-medium); padding: var(--spacing-inset-xs) var(--spacing-inset-xs); }
.callout-red    { background: var(--color-feedback-danger-lightest);  border-left-color: var(--color-feedback-danger-principal); }
.callout-green  { background: var(--color-feedback-success-lightest); border-left-color: var(--color-feedback-success-principal); }
.callout-orange { background: var(--color-feedback-warning-lightest); border-left-color: var(--color-feedback-warning-dark); }

/* ── BORDERS ── */
.border-top {
  border-top: 1px solid var(--border);
}

.border-bottom {
  border-bottom: 1px solid var(--border);
}

.border-left {
  border-left: 2px solid var(--border);
}

/* ── OPACITY ── */
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }

/* ── MARKDOWN OUTPUT (from mdToHtml) ── */
.md-heading {
  font-size: var(--font-size-xs);
  letter-spacing: 0.15em;
  color: var(--dim);
  text-transform: uppercase;
  margin: var(--spacing-stack-xxxs) 0 var(--spacing-stack-nano);
  padding-top: var(--spacing-inset-xs);
  border-top: 1px solid var(--border);
  font-weight: 700;
}

.md-subheading {
  font-size: var(--font-size-xs);
  color: var(--text);
  font-weight: 600;
  margin: var(--spacing-stack-mini) 0 var(--spacing-stack-quarck);
}

.md-numbered {
  padding: var(--spacing-inset-quarck) 0 var(--spacing-inset-quarck) var(--spacing-inset-quarck);
  border-left: 2px solid var(--border2);
  margin: var(--spacing-stack-quarck) 0;
  color: var(--sub);
}

.md-bullet {
  padding: var(--spacing-inset-quarck) 0 var(--spacing-inset-quarck) var(--spacing-inset-mini);
  color: var(--sub);
}

.md-bullet::before {
  content: '· ';
  margin-right: var(--spacing-stack-quarck);
}

/* ─────────────────────────────────────────────────────────────────
   PAINÉIS AO VIVO — estilos compartilhados
   ───────────────────────────────────────────────────────────────── */

.bi-toolbar {
  display: flex;
  align-items: center;
  gap: var(--spacing-stack-nano);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-stack-xxs);
}
.bi-period-btn {
  background: var(--bg2);
  color: var(--dim);
  border: 1px solid var(--border);
  border-radius: var(--radius-medium);
  height: 28px;                 /* altura unificada do toolbar */
  padding: 0 var(--spacing-inset-mini);
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  font-size: var(--font-size-xs);
  font-weight: 500;
  cursor: pointer;
  font-family: var(--sans);
}
.bi-period-btn.active {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.bi-sort-select {
  border: 1.5px solid var(--color-border-strong);  /* DS Input stroke */
  border-radius: var(--radius-medium);
  padding: var(--spacing-inset-quarck) var(--spacing-inset-nano);
  font-size: var(--font-size-xs);
  color: var(--text);
  background: var(--bg);
  cursor: pointer;
  font-family: var(--sans);
}
.bi-divider { width: 1px; height: 18px; background: var(--border); }
.bi-date-inputs { display: flex; align-items: center; gap: var(--spacing-stack-quarck); }
.bi-date-inputs input {
  border: 1.5px solid var(--color-border-strong);  /* DS Input stroke */
  border-radius: var(--radius-medium);
  height: 28px;                 /* mesma altura dos botões do toolbar */
  padding: 0 var(--spacing-inset-nano);
  box-sizing: border-box;
  font-size: var(--font-size-xs);
  color: var(--text);
  background: var(--bg);
  font-family: var(--sans);
}
.bi-date-inputs span { font-size: var(--font-size-xs); color: var(--dim); }
.bi-apply-btn {
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--accent);   /* botão primário DS */
  border-radius: var(--radius-medium);
  height: 28px;                       /* mesma altura do toolbar */
  padding: 0 var(--spacing-inset-xs);
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  font-size: var(--font-size-xs);
  font-weight: 500;
  cursor: pointer;
  font-family: var(--sans);
}
.bi-refresh-btn {
  background: transparent;
  color: var(--dim);
  border: 1px solid var(--border);
  border-radius: var(--radius-medium);
  padding: var(--spacing-inset-quarck) var(--spacing-inset-nano);
  font-size: var(--font-size-sm);
  cursor: pointer;
  margin-left: auto;
}
.bi-refresh-btn--flush { margin-left: 0; }   /* sem o margin-left:auto (encosta à esquerda) */
.bi-lu { font-size: var(--font-size-xs); color: var(--dim); }

/* ════════════════════════════════════════════════════════════════════════
   .stat-card — COMPONENTE ÚNICO de KPI do board (label + valor + legenda).
   Unifica as antigas .kpi-card, .bi-kpi-card, .d-kpi, .ac-kpi, .w-kpi, .rpt-kpi.
   PADRÃO: label no topo-esquerda; valor + legenda no rodapé-direita.
   ════════════════════════════════════════════════════════════════════════ */
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--spacing-stack-xxxs); margin-bottom: var(--spacing-stack-xxs);
  /* Trio semântico legível sobre o surface-dark (hero) — AA contra #0a0a0a */
  --stat-pos-on-dark: var(--viz-sequential-2);  /* verde claro ~9:1 */
  --stat-neg-on-dark: #ff8a80;                   /* vermelho claro ~8:1 */
  --stat-warn-on-dark: #ffcc80;                  /* âmbar claro ~12:1 */
}
.stat-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
  padding: var(--spacing-inset-sm);               /* --spacing-inset-sm */
  display: flex;
  flex-direction: column;
  min-height: 128px;           /* grid de 8 */
  box-shadow: var(--shadow-soft);
}
/* min-height = 2 linhas reservadas: labels de 1 e 2 linhas ocupam o mesmo bloco,
   então o valor começa no MESMO Y em todos os cards da fileira (não samba). */
.stat-label { font-size: var(--font-size-xs); font-weight: 700; color: var(--dim); margin-bottom: var(--spacing-stack-nano); text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.2; min-height: 2.4em; }  /* = ds-label */
.stat-value { font-size: 24px; font-weight: 700; color: var(--text); line-height: 1.2; text-align: left; font-variant-numeric: tabular-nums; }  /* = ds-h5 — alinhado à esquerda como o .ds-stat canônico */
/* cor semântica do valor — serve tanto .stat-value (painéis BI em JS) quanto
   .ds-stat__value (cards estáticos migrados pra folha do DS) */
.stat-value.accent, .ds-stat__value.accent { color: var(--accent); }
.stat-value.red,    .stat-value.is-danger,    .ds-stat__value.red,    .ds-stat__value.is-danger  { color: var(--red); }
.stat-value.green,  .stat-value.is-success,   .ds-stat__value.green,  .ds-stat__value.is-success { color: var(--green); }
.stat-value.yellow, .stat-value.is-warning,   .ds-stat__value.yellow, .ds-stat__value.is-warning { color: var(--warn); }
/* cards estáticos (.ds-stat) na grade: mesma altura mínima + label reservado p/ 2 linhas
   (não-sambar) + dígitos tabulares, igual ao .stat-card local */
.stat-grid .ds-stat { min-height: 128px; }
.stat-grid .ds-stat .ds-stat__label { min-height: 2.4em; }
.stat-grid .ds-stat .ds-stat__value { font-variant-numeric: tabular-nums; }
.stat-sub { font-size: var(--font-size-xs); color: var(--dim); margin-top: var(--spacing-stack-quarck); text-align: left; }
/* Hero — KPI manchete do painel, card escuro (espelha o board financeiro) */
.stat-card.hero { background: var(--color-surface-dark); border-color: var(--color-surface-dark); color: var(--sidebar-fg); }
.stat-card.hero .stat-label { color: var(--sidebar-muted); }
.stat-card.hero .stat-value { color: var(--sidebar-fg); font-size: 32px; line-height: 1.18; letter-spacing: -0.005em; }  /* = ds-h4 */
.stat-card.hero .stat-sub { color: var(--sidebar-muted); }
/* Semânticas sobre o surface-dark — tons claros legíveis (sem token inverso no DS) */
.stat-card.hero .stat-value.green,  .stat-card.hero .stat-value.is-success { color: var(--stat-pos-on-dark); }
.stat-card.hero .stat-value.red,    .stat-card.hero .stat-value.is-danger  { color: var(--stat-neg-on-dark); }
.stat-card.hero .stat-value.yellow, .stat-card.hero .stat-value.is-warning { color: var(--stat-warn-on-dark); }
/* Variação (delta) — só texto colorido, sem pílula (quebra melhor em 2 linhas) */
.stat-delta { font-size: var(--font-size-xs); margin-top: var(--spacing-stack-nano); font-weight: 600; text-align: left; line-height: 1.35; }
.stat-delta.trend-up,   .stat-delta.bi-trend-up   { color: var(--viz-positive); }
.stat-delta.trend-down, .stat-delta.bi-trend-down { color: var(--viz-negative); }
.stat-delta.trend-flat, .stat-delta.bi-trend-flat { color: var(--warn); }
/* Delta sobre o hero — recolore para os tons claros legíveis (o flat marrom some no preto) */
.stat-card.hero .stat-delta.trend-up,   .stat-card.hero .stat-delta.bi-trend-up   { color: var(--stat-pos-on-dark); }
.stat-card.hero .stat-delta.trend-down, .stat-card.hero .stat-delta.bi-trend-down { color: var(--stat-neg-on-dark); }
.stat-card.hero .stat-delta.trend-flat, .stat-card.hero .stat-delta.bi-trend-flat { color: var(--stat-warn-on-dark); }
/* Variante de linhas rotuladas (ex-"triple") — fica no topo-esquerda */
.stat-card.stat-rows { min-height: auto; }
.stat-rows { display: flex; flex-direction: column; gap: var(--spacing-stack-nano); }
.stat-rows .stat-value { margin-top: 0; text-align: left; }
.stat-rows-row { display: flex; align-items: center; gap: var(--spacing-stack-nano); font-size: var(--font-size-xs); cursor: help; }
.stat-rows-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.stat-rows-key { color: var(--dim); font-weight: 600; min-width: 56px; }
.stat-rows-val { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-rows-pct { color: var(--dim); font-weight: 400; font-size: var(--font-size-xs); margin-left: var(--spacing-stack-micro); }
.stat-rows-spend { color: var(--viz-negative); font-size: var(--font-size-xs); font-weight: 600; margin-left: var(--spacing-stack-quarck); }
/* fora de .stat-delta (valores soltos), só cor */
.bi-trend-up { color: var(--viz-positive); }
.bi-trend-down { color: var(--viz-negative); }
.bi-trend-flat { color: var(--warn); }

.bi-chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-stack-xxxs); margin-bottom: var(--spacing-stack-xxs); }
.bi-chart-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-large); padding: var(--spacing-inset-xs); min-width: 0; box-shadow: var(--shadow-soft); }  /* min-width:0 = grid item pode encolher; impede o canvas do Chart.js de estourar a track */
.bi-chart-card.full { grid-column: 1 / -1; }
.bi-chart-title { font-size: var(--font-size-xs); font-weight: 600; margin-bottom: var(--spacing-stack-xxxs); color: var(--text); }
.bi-chart-wrap { position: relative; height: 180px; min-width: 0; }
/* Trava o canvas do Chart.js dentro do wrap — evita estouro horizontal do body */
.bi-chart-wrap canvas, .chart-wrap canvas { max-width: 100% !important; }

.bi-alert-box { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-large); padding: var(--spacing-inset-xs); margin-bottom: var(--spacing-stack-xxs); }
.bi-alert-item { display: flex; gap: var(--spacing-stack-mini); padding: var(--spacing-inset-nano) 0; border-bottom: 1px solid var(--border); align-items: flex-start; }
.bi-alert-item:last-child { border-bottom: none; padding-bottom: 0; }
.bi-alert-item:first-child { padding-top: 0; }
.bi-alert-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: var(--spacing-stack-quarck); flex-shrink: 0; }
.bi-dot-warn { background: var(--color-warning); }
.bi-dot-ok { background: var(--viz-positive); }
.bi-dot-bad { background: var(--viz-negative); }
.bi-alert-text { font-size: var(--font-size-sm); color: var(--sub); line-height: 1.5; }
.bi-alert-text strong { color: var(--text); }

.bi-empty { color: var(--dim); font-size: var(--font-size-sm); text-align: center; padding: var(--spacing-stack-md); }
.bi-spinner { display: inline-block; width: 15px; height: 15px; border: 2px solid var(--border); border-top-color: var(--text); border-radius: 50%; animation: bi-spin 0.8s linear infinite; margin-right: var(--spacing-stack-quarck); vertical-align: middle; }
@keyframes bi-spin { to { transform: rotate(360deg); } }

/* crescimento mensal */
.bi-months-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--spacing-stack-mini); margin-bottom: var(--spacing-stack-xxs); }
.bi-month-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-large); padding: var(--spacing-inset-xs); }
.bi-month-name { font-size: var(--font-size-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--spacing-stack-mini); color: var(--text); }
.bi-month-flag { display: inline-block; margin-left: var(--spacing-stack-nano); padding: var(--spacing-inset-micro) var(--spacing-inset-nano); border-radius: var(--radius-pill); background: var(--bg-warning, #fef3c7); color: var(--text-warning, #92400e); font-size: 9px; font-weight: 700; letter-spacing: 0.04em; vertical-align: middle; cursor: help; }
.bi-month-row { display: flex; justify-content: space-between; align-items: baseline; padding: var(--spacing-inset-quarck) 0; border-bottom: 1px solid var(--border); }
.bi-month-row:last-child { border-bottom: none; }
.bi-month-key { font-size: var(--font-size-xs); color: var(--dim); }
.bi-month-val { font-size: var(--font-size-sm); font-weight: 600; color: var(--text); }
.bi-month-val.accent { color: var(--accent); }
.bi-month-val.dim { color: var(--dim); }
/* Delta de variação (▲▼) — só texto colorido, sem pílula (padrão de dado analítico) */
.bi-trend-badge { font-size: var(--font-size-xs); font-weight: 600; margin-left: var(--spacing-stack-nano); white-space: nowrap; }
.bi-badge-up { color: var(--viz-positive); }
.bi-badge-down { color: var(--viz-negative); }
.bi-badge-flat { color: var(--warn); }
.bi-chart-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-stack-xxxs); margin-bottom: var(--spacing-stack-xxxs); }

/* métricas */
.bi-eng-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-large); padding: var(--spacing-inset-sm); }
.bi-eng-label { font-size: var(--font-size-xs); color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--spacing-stack-mini); }
.bi-eng-bar-wrap { background: var(--bg2); border-radius: var(--radius-pill); height: 12px; overflow: hidden; margin-bottom: var(--spacing-stack-nano); }
.bi-eng-bar-fill { height: 100%; border-radius: var(--radius-pill); transition: width 0.8s ease; }
.bi-eng-value { font-size: 24px; font-weight: 700; }
.bi-eng-context { font-size: var(--font-size-xs); color: var(--dim); margin-top: var(--spacing-stack-quarck); }
.bi-breakdown { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-large); padding: var(--spacing-inset-xs); margin-bottom: var(--spacing-stack-xxs); }
.bi-breakdown-row { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-inset-nano) 0; border-bottom: 1px solid var(--border); }
.bi-breakdown-row:last-child { border-bottom: none; }
.bi-breakdown-key { font-size: var(--font-size-sm); color: var(--dim); }
.bi-breakdown-val { font-size: var(--font-size-md); font-weight: 600; color: var(--text); }
.bi-breakdown-pct { font-size: var(--font-size-xs); color: var(--dim); margin-left: var(--spacing-stack-nano); }

/* top conteúdo */
.bi-source-tabs { display: flex; gap: var(--spacing-stack-quarck); background: var(--bg2); border-radius: var(--radius-large); padding: var(--spacing-inset-quarck); }
.bi-source-tab { background: transparent; color: var(--dim); border: none; border-radius: var(--radius-medium); padding: var(--spacing-inset-quarck) var(--spacing-inset-mini); font-size: var(--font-size-xs); font-weight: 600; cursor: pointer; font-family: var(--sans); transition: background 0.15s, color 0.15s; white-space: nowrap; letter-spacing: 0.03em; }
.bi-source-tab.active { background: var(--bg); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.bi-source-tab[data-source="pago"].active { background: var(--text); color: var(--bg); box-shadow: none; }
.bi-source-badge { display: inline-block; font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.08em; padding: var(--spacing-inset-micro) var(--spacing-inset-nano); border-radius: var(--radius-pill); margin-left: var(--spacing-stack-quarck); vertical-align: middle; }
.bi-badge-organico { background: var(--tag-success-bg); color: var(--tag-success-fg); }
.bi-badge-pago { background: var(--tag-danger-bg); color: var(--tag-danger-fg); }
.bi-source-banner { display: flex; align-items: center; gap: var(--spacing-stack-nano); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-large); padding: var(--spacing-inset-mini) var(--spacing-inset-xs); font-size: var(--font-size-xs); color: var(--dim); margin-bottom: var(--spacing-stack-xxs); }
.bi-source-banner strong { color: var(--text); }
.bi-source-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.bi-dot-green { background: var(--viz-positive); }
.bi-dot-warn { background: var(--color-warning); }
/* tooltip CSS puro */
[data-bi-tip] { position: relative; cursor: help; }
[data-bi-tip]::after { content: attr(data-bi-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--text); color: var(--on-accent); font-size: var(--font-size-xs); font-weight: 400; line-height: 1.5; padding: var(--spacing-inset-nano) var(--spacing-inset-mini); border-radius: var(--radius-medium); pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 300; width: 190px; text-align: center; text-transform: none; letter-spacing: 0; white-space: normal; }
[data-bi-tip]:hover::after { opacity: 1; }
.bi-type-pills { display: flex; gap: var(--spacing-stack-nano); flex-wrap: wrap; margin-bottom: var(--spacing-stack-xxxs); }
.bi-type-pill { background: var(--bg2); color: var(--dim); border: none; border-radius: var(--radius-pill); padding: var(--spacing-inset-quarck) var(--spacing-inset-mini); font-size: var(--font-size-xs); font-weight: 600; cursor: pointer; letter-spacing: 0.04em; font-family: var(--sans); }
.bi-type-pill.active { background: var(--text); color: var(--bg); }
.bi-posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--spacing-stack-mini); }
.bi-post-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-large); display: flex; flex-direction: column; }
.bi-post-head { display: flex; justify-content: space-between; align-items: baseline; padding: var(--spacing-inset-mini) var(--spacing-inset-xs) 0; }
.bi-post-rank { font-size: var(--font-size-xs); font-weight: 700; color: var(--dim); letter-spacing: 0.08em; }
.bi-post-rank span { color: var(--text); font-size: var(--font-size-md); }
.bi-post-tags { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-stack-nano); padding: var(--spacing-inset-nano) var(--spacing-inset-xs) 0; }
.bi-post-type-badge { display: inline-block; font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.08em; padding: var(--spacing-inset-micro) var(--spacing-inset-nano); border-radius: var(--radius-pill); }
.bi-badge-REELS { background: color-mix(in srgb, var(--viz-categorical-6) 12%, white); color: color-mix(in srgb, var(--viz-categorical-6) 75%, black); }
.bi-badge-IMAGE { background: color-mix(in srgb, var(--viz-categorical-2) 12%, white); color: color-mix(in srgb, var(--viz-categorical-2) 75%, black); }
.bi-badge-CAROUSEL_ALBUM { background: var(--tag-warning-bg); color: var(--tag-warning-fg); }
.bi-post-caption { font-size: var(--font-size-xs); color: var(--dim); line-height: 1.6; padding: var(--spacing-inset-nano) var(--spacing-inset-xs); flex: 1; word-break: break-word; }
.bi-post-stats { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--border); }
.bi-post-stat { padding: var(--spacing-inset-nano) var(--spacing-inset-quarck); text-align: center; border-right: 1px solid var(--border); cursor: help; }
.bi-post-stat:last-child { border-right: none; background: var(--bg2); }
.bi-post-stat-val { font-size: var(--font-size-sm); font-weight: 700; color: var(--text); }
.bi-post-stat-val.accent { color: var(--accent); }
.bi-post-stat-val.bi-trend-up { color: var(--viz-positive); }
.bi-post-stat-val.bi-trend-down { color: var(--viz-negative); }
.bi-post-stat-lbl { font-size: var(--font-size-xs); color: var(--dim); text-transform: uppercase; letter-spacing: 0.04em; margin-top: var(--spacing-stack-micro); }
.bi-post-card-top { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.bi-post-card-top .bi-post-rank span { color: var(--accent); }
.bi-boost-badge { display: inline-block; margin-left: var(--spacing-stack-nano); font-size: var(--font-size-xs); font-weight: 700; padding: var(--spacing-inset-micro) var(--spacing-inset-nano); border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); letter-spacing: 0.04em; cursor: help; }
.bi-caveat { background: var(--bg2); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-medium); padding: var(--spacing-inset-mini) var(--spacing-inset-xs); font-size: var(--font-size-xs); color: var(--dim); line-height: 1.5; margin-bottom: var(--spacing-stack-xxxs); }
.bi-caveat strong { color: var(--text); font-weight: 600; }
.bi-badge-dark { background: var(--text); color: var(--on-accent); }
.bi-badge-hibrido { background: var(--viz-categorical-6); color: var(--on-accent); }
.bi-badge-boost-ig { background: var(--tag-danger-bg); color: var(--tag-danger-fg); }
.bi-badge-ads-mgr { background: color-mix(in srgb, var(--viz-categorical-2) 12%, white); color: color-mix(in srgb, var(--viz-categorical-2) 75%, black); }
.bi-badge-mixed { background: color-mix(in srgb, var(--viz-categorical-6) 12%, white); color: color-mix(in srgb, var(--viz-categorical-6) 75%, black); }
.bi-tbl-adname { font-size: var(--font-size-xs); font-family: var(--mono, monospace); color: var(--text); line-height: 1.4; padding: var(--spacing-inset-micro) var(--spacing-inset-nano); background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-medium); margin-bottom: var(--spacing-stack-micro); display: inline-block; }
.bi-tbl-adname-boost { font-family: var(--sans); background: color-mix(in srgb, var(--viz-negative) 10%, white); color: var(--red); border-color: transparent; cursor: help; }
.bi-tbl-campaign { font-size: var(--font-size-xs); color: var(--text); line-height: 1.4; padding: var(--spacing-inset-micro) var(--spacing-inset-nano); background: var(--bg2); border-radius: var(--radius-medium); margin-bottom: var(--spacing-stack-micro); display: inline-block; }
.bi-tbl-camp { vertical-align: top; }
.bi-cmp-wrap { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-large); padding: var(--spacing-inset-xs); }
.bi-cmp-tbl { background: transparent; }
.bi-cmp-tbl th { background: transparent; }
.bi-cmp-win { background: color-mix(in srgb, var(--viz-positive) 10%, transparent); color: var(--green); font-weight: 700; }
.bi-cmp-verdict { margin-top: var(--spacing-stack-xxxs); padding: var(--spacing-inset-mini) var(--spacing-inset-xs); background: var(--bg2); border-left: 3px solid var(--accent); border-radius: var(--radius-medium); font-size: var(--font-size-sm); color: var(--text); line-height: 1.5; }
.bi-cmp-verdict strong { color: var(--text); }
.bi-mixed-wrap { display: flex; flex-direction: column; gap: var(--spacing-stack-mini); }
.bi-mixed-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-stack-nano); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-large); padding: var(--spacing-inset-mini) var(--spacing-inset-xs); }
.bi-mixed-head { grid-column: 1 / -1; font-size: var(--font-size-xs); color: var(--dim); margin-bottom: var(--spacing-stack-quarck); }
.bi-mixed-head a { color: var(--accent); text-decoration: none; font-family: var(--mono, monospace); font-weight: 600; }
.bi-mixed-head a:hover { text-decoration: underline; }
.bi-mixed-side { font-size: var(--font-size-xs); color: var(--text); line-height: 1.6; padding: var(--spacing-inset-nano) var(--spacing-inset-mini); border-radius: var(--radius-medium); }
.bi-mixed-ig { background: rgba(254,226,226,0.4); }
.bi-mixed-mgr { background: color-mix(in srgb, var(--viz-categorical-2) 6%, transparent); }
@media (max-width: 700px) { .bi-mixed-row { grid-template-columns: 1fr; } }
.bi-tbl-feed-flag { display: inline-block; font-size: var(--font-size-xs); font-weight: 600; color: var(--viz-positive); margin-top: var(--spacing-stack-quarck); cursor: help; }
.bi-tbl-feed-flag.bi-tbl-feed-missing { color: var(--dim); font-style: italic; font-weight: 400; }.bi-dot-red { background: var(--viz-negative); }.bi-month-sub { padding-left: var(--spacing-inset-nano); font-size: var(--font-size-xs); cursor: help; }
.bi-month-sub .bi-month-key { color: var(--dim); }
.bi-month-pct { color: var(--dim); font-weight: 400; font-size: var(--font-size-xs); margin-left: var(--spacing-stack-micro); }
.bi-month-spend { color: var(--viz-negative); font-weight: 600; font-size: var(--font-size-xs); margin-left: var(--spacing-stack-quarck); }
.bi-breakdown-sub { padding-left: var(--spacing-inset-mini); font-size: var(--font-size-xs); }
.bi-breakdown-sub .bi-breakdown-key { color: var(--dim); }
.bi-creative-summary { display: flex; flex-wrap: wrap; gap: var(--spacing-stack-nano); font-size: var(--font-size-xs); color: var(--dim); margin-bottom: var(--spacing-stack-mini); }
.bi-creative-summary strong { color: var(--text); }
.bi-tbl-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-large); background: var(--bg); }
.bi-tbl { width: 100%; border-collapse: collapse; font-size: var(--font-size-xs); }
.bi-tbl th { text-align: left; font-weight: 700; color: var(--dim); padding: var(--spacing-inset-mini) var(--spacing-inset-mini); border-bottom: 1px solid var(--color-border-strong); background: var(--bg); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; }
.bi-tbl td { padding: var(--spacing-inset-mini) var(--spacing-inset-mini); border-bottom: 1px solid var(--border); vertical-align: top; }
.bi-tbl tbody tr:hover { background: var(--bg2); }
.bi-tbl-num { text-align: right; font-variant-numeric: tabular-nums; }
.bi-tbl-spend { color: var(--viz-negative); font-weight: 700; }
.bi-tbl-dim { color: var(--dim); }
.bi-tbl-link a { color: var(--accent); text-decoration: none; font-family: var(--mono, monospace); font-size: var(--font-size-xs); }
.bi-tbl-link a:hover { text-decoration: underline; }
.bi-tbl-cap { font-size: var(--font-size-xs); color: var(--dim); margin-top: var(--spacing-stack-micro); line-height: 1.4; }
.bi-tbl-tag { white-space: nowrap; }
.bi-tbl tfoot td { background: var(--bg2); font-weight: 700; border-bottom: none; }
.bi-tbl-foot { color: var(--dim); text-transform: uppercase; font-size: var(--font-size-xs); letter-spacing: 0.04em; }
.bi-tbl-reconcile { margin-top: var(--spacing-stack-nano); padding: var(--spacing-inset-mini) var(--spacing-inset-xs); font-size: var(--font-size-xs); color: var(--dim); border-left: 2px solid var(--color-border-strong); background: var(--bg2); border-radius: var(--radius-small); cursor: help; }
.bi-tbl-reconcile strong { color: var(--text); }
.bi-post-paid-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--spacing-stack-nano); padding: var(--spacing-inset-nano) var(--spacing-inset-xs); border-top: 1px solid var(--border); background: linear-gradient(0deg, color-mix(in srgb, var(--viz-negative) 4%, transparent), transparent); cursor: help; }
.bi-paid-lbl { font-size: var(--font-size-xs); font-weight: 700; color: var(--dim); letter-spacing: 0.06em; text-transform: uppercase; }
.bi-paid-val { font-size: var(--font-size-sm); font-weight: 700; color: var(--viz-negative); }
.bi-paid-sub { font-size: var(--font-size-xs); color: var(--dim); }
.bi-post-link { display: block; padding: var(--spacing-inset-nano) var(--spacing-inset-xs) var(--spacing-inset-mini); font-size: var(--font-size-xs); color: var(--accent); text-decoration: none; }
.bi-post-link:hover { text-decoration: underline; }
.bi-post-date { font-size: var(--font-size-xs); color: var(--dim); cursor: help; }
.bi-source-badge.bi-post-source-badge { margin-left: 0; }
.bi-boost-badge { margin-left: 0 !important; }
.bi-type-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--spacing-stack-mini); margin-bottom: var(--spacing-stack-xxs); }
.bi-type-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-large); padding: var(--spacing-inset-xs); }
.bi-type-label { font-size: var(--font-size-xs); color: var(--dim); margin-bottom: var(--spacing-stack-quarck); text-transform: uppercase; letter-spacing: 0.06em; }
.bi-type-val { font-size: 24px; font-weight: 700; color: var(--text); }
.bi-type-sub { font-size: var(--font-size-xs); color: var(--dim); margin-top: var(--spacing-stack-micro); }

@media (max-width: 600px) {
  .bi-chart-grid, .bi-chart-grid2 { grid-template-columns: 1fr; }}

/* histórico de análises (Insights / Orgânico) */
.bi-hist-list { display: flex; flex-direction: column; gap: var(--spacing-stack-mini); margin-bottom: var(--spacing-stack-xxs); }
.bi-hist-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-large); overflow: hidden; }
.bi-hist-card[open] { border-color: var(--text); }
.bi-hist-summary { padding: var(--spacing-inset-xs) var(--spacing-inset-xs); cursor: pointer; display: flex; align-items: center; gap: var(--spacing-stack-xxxs); flex-wrap: wrap; font-size: var(--font-size-sm); list-style: none; }
.bi-hist-summary::-webkit-details-marker { display: none; }
.bi-hist-summary::before { content: '▸'; color: var(--dim); font-size: var(--font-size-xs); transition: transform 0.15s ease; }
.bi-hist-card[open] .bi-hist-summary::before { transform: rotate(90deg); }
.bi-hist-date { font-weight: 700; color: var(--text); font-family: var(--serif); font-size: var(--font-size-md); }
.bi-hist-meta { font-size: var(--font-size-xs); color: var(--dim); text-transform: uppercase; letter-spacing: 0.04em; }
.bi-hist-body { padding: 0 var(--spacing-inset-xs) var(--spacing-inset-xs); border-top: 1px solid var(--border); }
.bi-hist-resumo { font-size: var(--font-size-sm); color: var(--text); line-height: 1.6; margin: var(--spacing-stack-xxxs) 0 var(--spacing-stack-nano); }
.bi-hist-section { font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dim); margin: var(--spacing-stack-xxxs) 0 var(--spacing-stack-nano); }
.bi-hist-grid { display: flex; flex-direction: column; gap: 0; }
.bi-hist-row { display: flex; justify-content: space-between; align-items: baseline; padding: var(--spacing-inset-nano) 0; border-bottom: 1px solid var(--border); gap: var(--spacing-stack-mini); }
.bi-hist-row:last-child { border-bottom: none; }
.bi-hist-key { font-size: var(--font-size-xs); color: var(--dim); flex-shrink: 0; }
.bi-hist-val { font-size: var(--font-size-sm); color: var(--text); text-align: right; font-weight: 500; }
.bi-hist-chips { display: flex; flex-wrap: wrap; gap: var(--spacing-stack-nano); }
.bi-hist-chip { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: var(--spacing-inset-quarck) var(--spacing-inset-mini); font-size: var(--font-size-xs); color: var(--text); }
.bi-hist-alert { margin-top: var(--spacing-stack-xxxs); padding: var(--spacing-inset-mini) var(--spacing-inset-xs); background: color-mix(in srgb, var(--red) 7%, transparent); border-left: 3px solid color-mix(in srgb, var(--red) 50%, transparent); border-radius: var(--radius-medium); font-size: var(--font-size-xs); color: var(--text); line-height: 1.5; }
.bi-hist-alert strong { color: var(--red); }

/* heatmap de horários ativos (Insights) */
.iv-hr-grid { display: grid; grid-template-columns: repeat(24, 1fr); gap: var(--spacing-stack-micro); align-items: end; height: 110px; margin-bottom: var(--spacing-stack-mini); }
.iv-hr-cell { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: var(--spacing-stack-quarck); min-height: 100%; }
.iv-hr-bar { width: 100%; min-height: 2px; background: var(--accent); opacity: 0.55; border-radius: var(--radius-small) var(--radius-small) 0 0; transition: opacity 0.2s; }
.iv-hr-cell:hover .iv-hr-bar { opacity: 1; }
.iv-hr-top .iv-hr-bar { background: var(--green); opacity: 1; }
.iv-hr-h { font-size: var(--font-size-xs); color: var(--dim); font-family: var(--mono); }
.iv-hr-top-row { display: flex; flex-wrap: wrap; gap: var(--spacing-stack-nano); padding-top: var(--spacing-inset-quarck); }

/* geografia dos seguidores (Insights) — top cidades + estados */
.iv-geo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp3);
}
@media (max-width: 720px) {
  .iv-geo-grid { grid-template-columns: 1fr; gap: var(--sp2); }
}
.iv-geo-col-title {
  font-size: var(--font-size-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: var(--spacing-stack-mini);
  padding-bottom: var(--spacing-inset-nano);
  border-bottom: 1px solid var(--border);
}
.iv-geo-row {
  display: grid;
  grid-template-columns: 1fr 90px 78px;
  gap: var(--spacing-stack-mini);
  align-items: center;
  padding: var(--spacing-inset-nano) 0;
  font-size: var(--font-size-sm);
}
.iv-geo-label {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.iv-geo-name {
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.iv-geo-sub {
  font-size: var(--font-size-xs);
  color: var(--dim);
  letter-spacing: 0.02em;
}
.iv-geo-bar-wrap {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  height: 8px;
  overflow: hidden;
}
.iv-geo-bar {
  background: var(--accent);
  height: 100%;
  border-radius: var(--radius-small);
  transition: width 0.3s;
}
.iv-geo-val {
  text-align: right;
  font-family: var(--mono);
  font-size: var(--font-size-xs);
  color: var(--text);
}
.iv-geo-share {
  color: var(--dim);
  margin-left: var(--spacing-stack-quarck);
  font-size: var(--font-size-xs);
}


/* ─────────────────────────────────────────────────────────────────
   22. COMPETIDORES — accordion cards (p-competitors)
   ───────────────────────────────────────────────────────────────── */

/* ── Tabela de modelagem (HTML, substitui o canvas) ───────────────────── */
#modelagem-tables { margin-top: var(--spacing-stack-nano); }
.mdl-section { margin-bottom: var(--spacing-stack-xs); }
.mdl-section:last-child { margin-bottom: 0; }
.mdl-shead { margin-bottom: var(--spacing-stack-mini); }
.mdl-stitle { display: block; font-size: var(--font-size-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dim); }
.mdl-ssub { display: block; font-size: var(--font-size-xs); color: var(--dim); margin-top: var(--spacing-stack-quarck); }

.mdl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border); border-radius: var(--radius-medium); background: var(--bg); }
.mdl-scroll::-webkit-scrollbar { height: 8px; }
.mdl-scroll::-webkit-scrollbar-track { background: var(--bg2); }
.mdl-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-medium); }
.mdl-scroll::-webkit-scrollbar-thumb:hover { background: var(--dim); }

.mdl-tbl { border-collapse: separate; border-spacing: 0; width: 100%; background: var(--bg);
  min-width: calc(150px + var(--mdl-cols) * 148px); }

/* coluna de atributo (sticky à esquerda) */
.mdl-tbl th.mdl-attr { position: sticky; left: 0; z-index: 2; background: var(--bg2);
  text-align: left; font-size: var(--font-size-xs); font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--dim); padding: var(--spacing-inset-xs) var(--spacing-inset-xs);
  width: 150px; min-width: 150px; border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border2); white-space: nowrap; vertical-align: top; }
.mdl-tbl .mdl-corner { border-bottom: 1px solid var(--border); }

/* header de marca */
.mdl-col-h { padding: var(--spacing-inset-mini) var(--spacing-inset-xs) var(--spacing-inset-mini); text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border); background: var(--bg2); white-space: nowrap; }
.mdl-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: var(--spacing-stack-nano); vertical-align: middle; }
.mdl-cname { font-size: var(--font-size-sm); font-weight: 600; color: var(--sub); line-height: 1.2;
  vertical-align: middle; }

/* coluna Border destacada */
.mdl-bcol { background: var(--accent-bg, rgba(0,0,0,.045)); }
.mdl-col-h.mdl-bcol { box-shadow: inset 0 2px 0 var(--text); }
.mdl-col-h.mdl-bcol .mdl-cname { color: var(--text); font-weight: 700; }

/* células de dados */
.mdl-tbl td { padding: var(--spacing-inset-mini) var(--spacing-inset-xs); border-bottom: 1px solid var(--border2); vertical-align: top; }
.mdl-tbl tbody tr:last-child td,
.mdl-tbl tbody tr:last-child th.mdl-attr { border-bottom: none; }

/* valor de medida (só número, alinhado à esquerda) */
.mdl-num { font-size: var(--font-size-sm); font-weight: 600; color: var(--sub);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.mdl-num small { font-size: var(--font-size-xs); font-weight: 500; color: var(--dim); margin-left: var(--spacing-stack-micro); }
.mdl-num-b { color: var(--text); font-weight: 700; }
.mdl-num.mdl-nd { color: var(--dim); font-weight: 500; font-style: italic; }

/* células de texto */
.mdl-txt { font-size: 12.5px; color: var(--sub); line-height: 1.4; }
.mdl-txt-b { color: var(--text); font-weight: 600; }
.mdl-muted { color: var(--dim); font-style: italic; }

.mdl-foot { font-size: var(--font-size-xs); color: var(--dim); margin-top: var(--spacing-stack-micro); line-height: 1.5; }


.comp-card { border:1px solid var(--border);border-radius: var(--radius-medium);margin-bottom:var(--spacing-stack-mini);overflow:hidden;transition:border-color .2s }
.comp-card.tipo-direto { border-left:3px solid var(--warn) }
.comp-card.tipo-indireto { border-left:3px solid var(--viz-categorical-2) }
.comp-card.tipo-inspiracao { border-left:3px solid var(--accent) }
.comp-card-header { display:flex;align-items:center;gap:var(--spacing-stack-mini);padding:var(--spacing-inset-xs) var(--spacing-inset-xs);cursor:pointer;user-select:none;background:var(--card) }
.comp-card-header:hover { background:var(--hover,rgba(255,255,255,.03)) }
.comp-card-nome { font-family:var(--serif);font-size:24px;font-weight:400;flex:1 }  /* escala DS (ds-h5) */
.comp-card-meta { display:flex;align-items:center;gap:var(--spacing-stack-nano) }
.comp-card-ig { font-size:var(--font-size-xs);color:var(--dim);white-space:nowrap }
.comp-card-chevron { font-size:var(--font-size-xs);color:var(--dim);transition:transform .2s;margin-left:var(--spacing-stack-quarck) }
.comp-card.open .comp-card-chevron { transform:rotate(180deg) }
.comp-card-tagline { font-size:var(--font-size-xs);color:var(--sub);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px }
.comp-body { display:none;padding:0 var(--spacing-inset-xs) var(--spacing-inset-xs);border-top:1px solid var(--border) }
.comp-card.open .comp-body { display:block }
.comp-row { display:flex;gap:var(--spacing-stack-quarck);margin-top:var(--spacing-stack-mini);flex-wrap:wrap }
.comp-kv { font-size:var(--font-size-xs);color:var(--dim);line-height:1.7 }
.comp-kv span { color:var(--text) }
.comp-kv-accent span { color:var(--accent) }
.comp-insight { margin-top:var(--spacing-stack-mini);padding:var(--spacing-inset-xs) var(--spacing-inset-xs);background:rgba(255,255,255,.03);border-radius: var(--radius-medium);font-size:var(--font-size-md);color:var(--sub);line-height:1.6;border:1px solid var(--border) }  /* corpo = .ds-body */
.comp-insight strong { color:var(--text) }
.comp-links { display:flex;gap:var(--spacing-stack-nano);flex-wrap:wrap;margin-top:var(--spacing-stack-mini) }
.comp-novidade { margin-top:var(--spacing-stack-mini);padding:var(--spacing-inset-nano) var(--spacing-inset-mini);border-left:2px solid var(--green);font-size:var(--font-size-xs);color:var(--dim);line-height:1.6 }
.comp-novidade strong { color:var(--green) }


/* ─────────────────────────────────────────────────────────────────
   23. DIAGNÓSTICO DE CONVERSÃO (p-diagnostico-conversao)
   ───────────────────────────────────────────────────────────────── */

#p-diagnostico-conversao .d-section-label,
#p-diagnostico-jun10 .d-section-label {
  font-size: var(--font-size-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--spacing-inset-nano);
  margin: var(--spacing-stack-xs) 0 var(--spacing-stack-xxxs);
}
/* Funil visual */
#p-diagnostico-conversao .d-funil,
#p-diagnostico-jun10 .d-funil {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-nano);
  margin-bottom: var(--spacing-stack-quarck);
}
#p-diagnostico-conversao .d-funil-row,
#p-diagnostico-jun10 .d-funil-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-stack-mini);
}
#p-diagnostico-conversao .d-funil-bar-wrap,
#p-diagnostico-jun10 .d-funil-bar-wrap {
  flex: 1;
  background: var(--border2);
  border-radius: var(--radius-medium);
  height: 32px;
  overflow: hidden;
}
#p-diagnostico-conversao .d-funil-bar,
#p-diagnostico-jun10 .d-funil-bar {
  height: 100%;
  border-radius: var(--radius-medium);
  display: flex;
  align-items: center;
  padding-left: var(--spacing-inset-mini);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--on-accent);
  white-space: nowrap;
}
#p-diagnostico-conversao .d-funil-label,
#p-diagnostico-jun10 .d-funil-label {
  font-size: var(--font-size-xs);
  color: var(--sub);
  width: 140px;
  flex-shrink: 0;
  text-align: right;
}
#p-diagnostico-conversao .d-funil-num,
#p-diagnostico-jun10 .d-funil-num {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--fg);
  width: 60px;
  flex-shrink: 0;
}

/* Diagnóstico cards */
#p-diagnostico-conversao .d-diag-list,
#p-diagnostico-jun10 .d-diag-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-xxxs);
}
#p-diagnostico-conversao .d-diag-card,
#p-diagnostico-jun10 .d-diag-card {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-large);
  padding: var(--spacing-inset-xs) var(--spacing-inset-xs);
  display: flex;
  gap: var(--spacing-stack-xxxs);
  align-items: flex-start;
}
#p-diagnostico-conversao .d-diag-card.critical,
#p-diagnostico-jun10 .d-diag-card.critical {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 5%, var(--bg3));
}
#p-diagnostico-conversao .d-diag-icon { font-size: 24px; flex-shrink: 0; }
#p-diagnostico-jun10 .d-diag-icon { font-size: 24px; flex-shrink: 0; }
#p-diagnostico-conversao .d-diag-body { flex: 1; }
#p-diagnostico-jun10 .d-diag-body { flex: 1; }
#p-diagnostico-conversao .d-diag-title,
#p-diagnostico-jun10 .d-diag-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--fg);
  margin-bottom: var(--spacing-stack-nano);
}
#p-diagnostico-conversao .d-diag-desc,
#p-diagnostico-jun10 .d-diag-desc {
  font-size: var(--font-size-sm);
  color: var(--sub);
  line-height: 1.6;
}
#p-diagnostico-conversao .d-diag-desc strong { color: var(--fg); }
#p-diagnostico-jun10 .d-diag-desc strong { color: var(--fg); }
#p-diagnostico-conversao .d-diag-badge,
#p-diagnostico-jun10 .d-diag-badge {
  font-size: var(--font-size-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: var(--spacing-inset-micro) var(--spacing-inset-nano);
  border-radius: var(--radius-medium);
  font-weight: 600;
  flex-shrink: 0;
  height: fit-content;
}
#p-diagnostico-conversao .d-diag-badge.critical { background: color-mix(in srgb, var(--red) 13%, transparent); color: var(--red); }
#p-diagnostico-jun10 .d-diag-badge.critical { background: color-mix(in srgb, var(--red) 13%, transparent); color: var(--red); }
#p-diagnostico-conversao .d-diag-badge.warning  { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
#p-diagnostico-jun10 .d-diag-badge.warning  { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
#p-diagnostico-conversao .d-diag-badge.info     { background: var(--border2); color: var(--sub); }
#p-diagnostico-jun10 .d-diag-badge.info     { background: var(--border2); color: var(--sub); }

/* Estratégia 30 dias */
#p-diagnostico-conversao .d-fase-grid,
#p-diagnostico-jun10 .d-fase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-stack-xxxs);
}
#p-diagnostico-conversao .d-fase-card,
#p-diagnostico-jun10 .d-fase-card {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-large);
  padding: var(--spacing-inset-xs) var(--spacing-inset-xs);
}
#p-diagnostico-conversao .d-fase-num,
#p-diagnostico-jun10 .d-fase-num {
  font-size: var(--font-size-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: var(--spacing-stack-nano);
}
#p-diagnostico-conversao .d-fase-title,
#p-diagnostico-jun10 .d-fase-title {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--fg);
  margin-bottom: var(--spacing-stack-mini);
}
#p-diagnostico-conversao .d-fase-itens,
#p-diagnostico-jun10 .d-fase-itens {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-nano);
}
#p-diagnostico-conversao .d-fase-itens li,
#p-diagnostico-jun10 .d-fase-itens li {
  font-size: var(--font-size-xs);
  color: var(--sub);
  line-height: 1.5;
  padding-left: var(--spacing-inset-xs);
  position: relative;
}
#p-diagnostico-conversao .d-fase-itens li::before,
#p-diagnostico-jun10 .d-fase-itens li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: var(--font-size-xs);
}
#p-diagnostico-conversao .d-fase-budget,
#p-diagnostico-jun10 .d-fase-budget {
  margin-top: var(--spacing-stack-mini);
  padding-top: var(--spacing-inset-mini);
  border-top: 1px solid var(--border);
  font-size: var(--font-size-xs);
  color: var(--sub);
}
#p-diagnostico-conversao .d-fase-budget strong { color: var(--fg); }
#p-diagnostico-jun10 .d-fase-budget strong { color: var(--fg); }

/* Jornada */
#p-diagnostico-conversao .d-jornada,
#p-diagnostico-jun10 .d-jornada {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  margin-bottom: var(--spacing-stack-quarck);
}
#p-diagnostico-conversao .d-jornada-step,
#p-diagnostico-jun10 .d-jornada-step {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-large);
  padding: var(--spacing-inset-mini) var(--spacing-inset-xs);
  font-size: var(--font-size-xs);
  color: var(--sub);
  text-align: center;
  min-width: 100px;
}
#p-diagnostico-conversao .d-jornada-step.active,
#p-diagnostico-jun10 .d-jornada-step.active {
  border-color: var(--accent);
  color: var(--fg);
  font-weight: 600;
}
#p-diagnostico-conversao .d-jornada-step .d-j-icon { font-size: var(--font-size-md); display: block; margin-bottom: var(--spacing-stack-quarck); }
#p-diagnostico-jun10 .d-jornada-step .d-j-icon { font-size: var(--font-size-md); display: block; margin-bottom: var(--spacing-stack-quarck); }
#p-diagnostico-conversao .d-jornada-arrow,
#p-diagnostico-jun10 .d-jornada-arrow {
  font-size: var(--font-size-md);
  color: var(--border2);
  padding: 0 var(--spacing-inset-nano);
}
#p-diagnostico-conversao .d-jornada-arrow.active { color: var(--accent); }
#p-diagnostico-jun10 .d-jornada-arrow.active { color: var(--accent); }


/* ─────────────────────────────────────────────────────────────────
   24. WINDSOR MAI18 (p-windsor-mai18)
   ───────────────────────────────────────────────────────────────── */

/* ── estilos locais deste painel ── */
#p-windsor-mai18 .w-section-label,
#p-custo-jun10 .w-section-label {
  font-size: var(--font-size-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--spacing-inset-nano);
  margin: var(--spacing-stack-xs) 0 var(--spacing-stack-xxxs);
}
#p-windsor-mai18 .w-camp-table,
#p-diagnostico-jun10 .w-camp-table,
#p-custo-jun10 .w-camp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
#p-windsor-mai18 .w-camp-table th,
#p-diagnostico-jun10 .w-camp-table th,
#p-custo-jun10 .w-camp-table th {
  text-align: left;
  font-size: var(--font-size-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sub);
  padding: var(--spacing-inset-nano) var(--spacing-inset-mini);
  border-bottom: 1px solid var(--border);
}
#p-windsor-mai18 .w-camp-table td,
#p-diagnostico-jun10 .w-camp-table td,
#p-custo-jun10 .w-camp-table td {
  padding: var(--spacing-inset-mini) var(--spacing-inset-mini);
  border-bottom: 1px solid var(--border);
  color: var(--fg);
  vertical-align: top;
}
#p-windsor-mai18 .w-camp-table tr:last-child td { border-bottom: none; }
#p-diagnostico-jun10 .w-camp-table tr:last-child td { border-bottom: none; }
#p-custo-jun10 .w-camp-table tr:last-child td { border-bottom: none; }
#p-windsor-mai18 .w-camp-table .num { text-align: right; font-variant-numeric: tabular-nums; }
#p-diagnostico-jun10 .w-camp-table .num { text-align: right; font-variant-numeric: tabular-nums; }
#p-custo-jun10 .w-camp-table .num { text-align: right; font-variant-numeric: tabular-nums; }
#p-windsor-mai18 .w-camp-table .camp-name { font-weight: 500; color: var(--fg); }
#p-diagnostico-jun10 .w-camp-table .camp-name { font-weight: 500; color: var(--fg); }
#p-custo-jun10 .w-camp-table .camp-name { font-weight: 500; color: var(--fg); }
/* Tags da tabela de campanha = pílula tint+fg do DS (semântica: melhor=success, pior/custo=danger) */
#p-windsor-mai18 .w-camp-table .badge-top { background: var(--tag-success-bg); color: var(--tag-success-fg); border-radius: var(--radius-pill); font-size: var(--font-size-xs); font-weight: 600; padding: var(--spacing-inset-micro) var(--spacing-inset-nano); margin-left: var(--spacing-stack-nano); vertical-align: middle; }
#p-diagnostico-jun10 .w-camp-table .badge-top { background: var(--tag-success-bg); color: var(--tag-success-fg); border-radius: var(--radius-pill); font-size: var(--font-size-xs); font-weight: 600; padding: var(--spacing-inset-micro) var(--spacing-inset-nano); margin-left: var(--spacing-stack-nano); vertical-align: middle; }
#p-custo-jun10 .w-camp-table .badge-top { background: var(--tag-success-bg); color: var(--tag-success-fg); border-radius: var(--radius-pill); font-size: var(--font-size-xs); font-weight: 600; padding: var(--spacing-inset-micro) var(--spacing-inset-nano); margin-left: var(--spacing-stack-nano); vertical-align: middle; }
#p-windsor-mai18 .w-camp-table .badge-warn { background: var(--tag-danger-bg); color: var(--tag-danger-fg); border-radius: var(--radius-pill); font-size: var(--font-size-xs); font-weight: 600; padding: var(--spacing-inset-micro) var(--spacing-inset-nano); margin-left: var(--spacing-stack-nano); vertical-align: middle; }
#p-diagnostico-jun10 .w-camp-table .badge-warn { background: var(--tag-danger-bg); color: var(--tag-danger-fg); border-radius: var(--radius-pill); font-size: var(--font-size-xs); font-weight: 600; padding: var(--spacing-inset-micro) var(--spacing-inset-nano); margin-left: var(--spacing-stack-nano); vertical-align: middle; }
#p-custo-jun10 .w-camp-table .badge-warn { background: var(--tag-danger-bg); color: var(--tag-danger-fg); border-radius: var(--radius-pill); font-size: var(--font-size-xs); font-weight: 600; padding: var(--spacing-inset-micro) var(--spacing-inset-nano); margin-left: var(--spacing-stack-nano); vertical-align: middle; }

#p-windsor-mai18 .w-proj-grid,
#p-custo-jun10 .w-proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-stack-xxxs);
  margin-bottom: var(--spacing-stack-quarck);
}
#p-windsor-mai18 .w-proj-card,
#p-custo-jun10 .w-proj-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
  padding: var(--spacing-inset-xs) var(--spacing-inset-xs);
}
#p-windsor-mai18 .w-proj-card.highlight,
#p-custo-jun10 .w-proj-card.highlight {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg3));
}
#p-windsor-mai18 .w-proj-cenario,
#p-custo-jun10 .w-proj-cenario {
  font-size: var(--font-size-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sub);
  margin-bottom: var(--spacing-stack-nano);
}
#p-windsor-mai18 .w-proj-val,
#p-custo-jun10 .w-proj-val {
  font-size: 24px;
  font-weight: 700;
  color: var(--fg);
}
#p-windsor-mai18 .w-proj-val.accent { color: var(--accent); }
#p-custo-jun10 .w-proj-val.accent { color: var(--accent); }
#p-windsor-mai18 .w-proj-desc,
#p-custo-jun10 .w-proj-desc {
  font-size: var(--font-size-xs);
  color: var(--dim);
  margin-top: var(--spacing-stack-nano);
  line-height: 1.5;
}

#p-windsor-mai18 .w-insight-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--spacing-stack-mini); }
#p-custo-jun10 .w-insight-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--spacing-stack-mini); }
#p-windsor-mai18 .w-insight-item { display: flex; gap: var(--spacing-stack-mini); align-items: flex-start; }
#p-custo-jun10 .w-insight-item { display: flex; gap: var(--spacing-stack-mini); align-items: flex-start; }
#p-windsor-mai18 .w-insight-icon { font-size: var(--font-size-md); flex-shrink: 0; margin-top: var(--spacing-stack-micro); }
#p-custo-jun10 .w-insight-icon { font-size: var(--font-size-md); flex-shrink: 0; margin-top: var(--spacing-stack-micro); }
#p-windsor-mai18 .w-insight-body { font-size: var(--font-size-sm); color: var(--fg); line-height: 1.55; }
#p-custo-jun10 .w-insight-body { font-size: var(--font-size-sm); color: var(--fg); line-height: 1.55; }
#p-windsor-mai18 .w-insight-body strong { color: var(--fg); font-weight: 600; }
#p-custo-jun10 .w-insight-body strong { color: var(--fg); font-weight: 600; }
#p-windsor-mai18 .w-insight-body span.sub { color: var(--sub); font-size: var(--font-size-xs); }
#p-custo-jun10 .w-insight-body span.sub { color: var(--sub); font-size: var(--font-size-xs); }

#p-windsor-mai18 .w-followers-bar,
#p-custo-jun10 .w-followers-bar {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
  padding: var(--spacing-inset-sm);
  margin-bottom: var(--spacing-stack-quarck);
}
#p-windsor-mai18 .w-bar-track,
#p-custo-jun10 .w-bar-track {
  background: var(--border2);
  border-radius: var(--radius-pill);
  height: 10px;
  position: relative;
  margin: var(--spacing-stack-mini) 0;
}
#p-windsor-mai18 .w-bar-fill,
#p-custo-jun10 .w-bar-fill {
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--green)));
  border-radius: var(--radius-pill);
  height: 100%;
  width: 53.7%; /* 322/600 */
}
#p-windsor-mai18 .w-bar-labels,
#p-custo-jun10 .w-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--sub);
  margin-top: var(--spacing-stack-quarck);
}


/* ─────────────────────────────────────────────────────────────────
   25. ANÁLISE CRUZADA (p-analise-cruzada)
   ───────────────────────────────────────────────────────────────── */

.ac-tab {
  background: var(--bg3);
  border: 1px solid var(--border2);
  color: var(--dim);
  font-family: var(--mono);
  font-size: var(--font-size-xs);
  letter-spacing: .06em;
  padding: var(--spacing-inset-quarck) var(--spacing-inset-mini);
  cursor: pointer;
  border-radius: var(--radius-small);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ac-tab.active, .ac-tab:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.ac-sub { display: none; }
.ac-sub.active { display: block; }.ac-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-xs);
  font-family: var(--mono);
  margin-bottom: var(--spacing-stack-xxs);
}
.ac-table th {
  text-align: left;
  font-size: var(--font-size-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  border-bottom: 1px solid var(--border);
  padding: var(--spacing-inset-nano) var(--spacing-inset-mini);
  font-weight: 500;
}
.ac-table td {
  padding: var(--spacing-inset-nano) var(--spacing-inset-mini);
  border-bottom: 1px solid var(--border2);
  color: var(--sub);
  vertical-align: top;
}
.ac-table tr:hover td { background: var(--bg3); }
.ac-table .hi { color: var(--text); font-weight: 500; }
.ac-badge {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-family: var(--mono);
  letter-spacing: .06em;
  padding: var(--spacing-inset-micro) var(--spacing-inset-nano);
  border-radius: var(--radius-small);
  font-weight: 500;
}
.ac-badge.ok  { background: color-mix(in srgb, var(--viz-categorical-1) 15%, transparent); color: var(--green); border: 1px solid color-mix(in srgb, var(--viz-categorical-1) 30%, transparent); }
.ac-badge.warn{ background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.ac-badge.crit{ background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); border: 1px solid color-mix(in srgb, var(--red) 30%, transparent); }
.ac-badge.info{ background: var(--bg3); color: var(--dim); border: 1px solid var(--border); }
.ac-section-label {
  font-size: var(--font-size-xs);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--dim);
  margin: var(--spacing-stack-xxs) 0 var(--spacing-stack-mini);
  padding-bottom: var(--spacing-inset-nano);
  border-bottom: 1px solid var(--border2);
}
.ac-funnel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-quarck);
  max-width: 600px;
  margin-bottom: var(--spacing-stack-xxs);
}
.ac-funnel-step {
  display: flex;
  align-items: center;
  gap: var(--spacing-stack-mini);
}
.ac-funnel-bar-wrap {
  flex: 1;
  height: 32px;
  background: var(--bg3);
  border-radius: var(--radius-small);
  overflow: hidden;
  position: relative;
}
.ac-funnel-bar {
  height: 100%;
  background: var(--accent);
  opacity: .85;
  border-radius: var(--radius-small);
  transition: width .4s ease;
}
.ac-funnel-label {
  font-size: var(--font-size-xs);
  font-family: var(--mono);
  color: var(--sub);
  min-width: 130px;
}
.ac-funnel-val {
  font-size: var(--font-size-xs);
  font-family: var(--mono);
  font-weight: 600;
  color: var(--text);
  min-width: 55px;
  text-align: right;
}
.ac-funnel-drop {
  font-size: var(--font-size-xs);
  color: var(--red);
  min-width: 60px;
  font-family: var(--mono);
}
.ac-acao {
  display: flex;
  gap: var(--spacing-stack-mini);
  align-items: flex-start;
  padding: var(--spacing-inset-mini) var(--spacing-inset-xs);
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-medium);
  margin-bottom: var(--spacing-stack-nano);
}
.ac-acao-num {
  font-family: var(--mono);
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--border2);
  min-width: 28px;
  line-height: 1.2;
}
.ac-acao-body { flex: 1; }
.ac-acao-title {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text);
  margin-bottom: var(--spacing-stack-quarck);
  line-height: 1.3;
}
.ac-acao-desc {
  font-size: var(--font-size-xs);
  color: var(--sub);
  line-height: 1.6;
}
.ac-coherence-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: var(--spacing-stack-nano);
  align-items: center;
  padding: var(--spacing-inset-mini) var(--spacing-inset-mini);
  border-bottom: 1px solid var(--border2);
  font-size: var(--font-size-xs);
}
.ac-coherence-row:last-child { border-bottom: none; }
.ac-coherence-header {
  grid-template-columns: 2fr 1fr 1fr auto;
  font-size: var(--font-size-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}
@media (max-width:600px) {
  .ac-coherence-row { grid-template-columns: 1fr 1fr; }
  .ac-coherence-row > *:nth-child(3),
  .ac-coherence-row > *:nth-child(4) { grid-column: span 1; }
}

/* ── Dois Momentos · tabelas de concorrência ── */
.mom-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  min-width: 540px;
}
.mom-table th {
  text-align: left;
  font-size: var(--font-size-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  padding: var(--spacing-inset-nano) var(--spacing-inset-mini);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.mom-table td {
  padding: var(--spacing-inset-mini) var(--spacing-inset-mini);
  border-bottom: 1px solid var(--border);
  color: var(--sub);
  vertical-align: top;
  line-height: 1.5;
}
.mom-table tbody tr:hover { background: var(--accent-bg); }
.mom-table td strong { color: var(--text); }
.mom-note {
  font-size: var(--font-size-xs);
  color: var(--dim);
  font-style: italic;
  margin-left: var(--spacing-stack-quarck);
}
.mom-conf-ok { color: var(--green); font-size: var(--font-size-xs); }

/* ── Painel Diário · Ao Vivo (nativo, ex-iframe) ───────────────── */
#p-painel-diario .pd-content { max-width: 1100px; }
#p-painel-diario .loading-wrap { color: var(--dim); font-size: var(--font-size-sm); text-align: center; padding: var(--spacing-stack-xl); }
#p-painel-diario .section-title { font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dim); margin: var(--spacing-stack-xs) 0 var(--spacing-stack-mini); }/* valor + legenda encostam no rodapé e alinham à direita; só a label fica no topo-esquerda */#p-painel-diario .trend-up { color: var(--viz-positive); }
#p-painel-diario .trend-down { color: var(--viz-negative); }
#p-painel-diario .trend-flat { color: var(--warn); }
#p-painel-diario .chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-stack-xxxs); }
#p-painel-diario .chart-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-large); padding: var(--spacing-inset-sm); min-width: 0; }
#p-painel-diario .chart-card.full { grid-column: 1 / -1; }
#p-painel-diario .chart-title { font-size: var(--font-size-sm); font-weight: 600; margin-bottom: var(--spacing-stack-xxxs); color: var(--text); }
#p-painel-diario .chart-wrap { position: relative; height: 200px; }
#p-painel-diario .insight-box { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-large); padding: var(--spacing-inset-sm); }
#p-painel-diario .insight-item { display: flex; align-items: flex-start; gap: var(--spacing-stack-mini); padding: var(--spacing-inset-mini) 0; border-bottom: 1px solid var(--bg3); }
#p-painel-diario .insight-item:last-child { border-bottom: none; padding-bottom: 0; }
#p-painel-diario .insight-item:first-child { padding-top: 0; }
#p-painel-diario .insight-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: var(--spacing-stack-quarck); flex-shrink: 0; }
#p-painel-diario .dot-warn { background: var(--color-warning); }
#p-painel-diario .dot-ok { background: var(--viz-positive); }
#p-painel-diario .dot-info { background: var(--viz-categorical-2); }
#p-painel-diario .insight-text { font-size: var(--font-size-sm); color: var(--sub); line-height: 1.5; }
#p-painel-diario .insight-text strong { color: var(--text); }
#p-painel-diario .pd-gsc-bar { display: flex; align-items: center; gap: var(--spacing-stack-mini); flex-wrap: wrap; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-large); padding: var(--spacing-inset-mini) var(--spacing-inset-xs); margin-top: var(--spacing-stack-xxxs); font-size: var(--font-size-sm); color: var(--sub); }
#p-painel-diario .pd-gsc-bar .btn { white-space: nowrap; }
@media (max-width: 640px) {
  #p-painel-diario .chart-grid { grid-template-columns: 1fr; }}




.card,
.metric,
.decision-card,
.month-card,
.mini-card,
.layer-card,
.grupo-card,
.grupo-resumo-card,
.grupo-resumo-block,
.map-reading,
.scenario-box,
.exec-card,
.ref-card,
.cs-ideia,
.comp-monitor-card,
.comp-card,
.home-shortcut,
.home-oport-item,
.monitor-pulse,
.monitor-rec,
.ai-output,
.hashset,
.pos-valor-reading,
.ac-acao {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
}
#p-diagnostico-conversao .d-diag-card,
#p-diagnostico-jun10 .d-diag-card,
#p-diagnostico-conversao .d-fase-card,
#p-diagnostico-jun10 .d-fase-card,
#p-diagnostico-conversao .d-jornada-step,
#p-diagnostico-jun10 .d-jornada-step {
  background: var(--bg);
  border-color: var(--border);
  border-radius: var(--radius-large);
}

.log-entry {
  border-radius: var(--radius-medium);
}


.card-label,
.sec-label,
.panel-sub,
.input-label,
.grupo-resumo-label,
.grupo-resumo-block-title,
.scenario-title,
.map-reading-title,
.pos-valor-reading-label,
.learn-header,
.monitor-rec-label,
.decision-label,
.bi-eng-label {
  font-family: var(--mono);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Headings — tracking da ramp do DS (h4 32px = -0.005em) */
.panel-title {
  letter-spacing: -0.005em;
}

.metric-val {
  letter-spacing: -0.01em; /* ds-h3 40px */
}

/* Tooltip sobre superfície escura do DS */
[data-bi-tip]::after {
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
}

/* Tooltip de KPI (o quê + como é calculado): mais largo, texto corrido à esquerda,
   ancorado à esquerda do label pra não estourar a lateral do card */
.bi-kpi-tip[data-bi-tip]::after {
  width: 250px;
  text-align: left;
  left: 0;
  transform: none;
}
.bi-kpi-tip { display: inline-block; }

/* ─────────────────────────────────────────────────────────────────
   22. HOME — pattern Landing do brandbook (hero + sumário)
   ───────────────────────────────────────────────────────────────── */

/* CAPA — pattern Landing do brandbook, medidas idênticas (border-site.css .hero):
   padding clamp(64–112px) topo · --pad-x lados · clamp(48–64px) base, gap 24px */
#p-home {
  padding: 0 0 var(--spacing-stack-xxl);
}

#p-home > :not(.home-hero) {
  margin-left: var(--pad-x);
  margin-right: var(--pad-x);
}

.home-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--spacing-stack-xxs);
  margin: 0 0 var(--sp6);
  padding: clamp(var(--spacing-stack-xl), 9vw, var(--spacing-stack-xxxl)) var(--pad-x) clamp(var(--spacing-stack-md), 6vw, var(--spacing-stack-xl));
  background: var(--color-brand-primary);
  color: var(--color-brand-secondary);
}

.home-hero-top {
  font-family: var(--mono);
  font-weight: var(--font-weight-regular); /* h1 semântico: neutraliza o bold padrão do UA */
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-inverse-muted);
}

.home-hero-center img {
  width: min(420px, 70vw);
  height: auto;
  display: block;
}

.home-hero-desc {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(var(--font-size-lg), 3vw, 28px);
  color: var(--color-text-inverse-muted);
  margin-top: var(--sp2);
}

.home-hero-cta {
  display: flex;
  gap: var(--spacing-stack-mini);
  flex-wrap: wrap;
}

/* CTAs sobre o escuro: primário invertido (branco), secundário fantasma */
.home-hero .btn-primary {
  background: var(--color-brand-secondary);
  color: var(--color-brand-primary);
  border-color: var(--color-brand-secondary);
}
.home-hero .btn-primary:hover {
  background: var(--color-neutral-lightest);
  border-color: var(--color-neutral-lightest);
}
.home-hero .btn:not(.btn-primary) {
  background: transparent;
  color: var(--color-brand-secondary);
  border-color: rgba(255, 255, 255, 0.4);
}
.home-hero .btn:not(.btn-primary):hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.7);
}

.home-hero-bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--sp3);
  flex-wrap: wrap;
  width: 100%;
  margin-top: var(--sp4);
  font-family: var(--mono);
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-inverse-muted);
}

.home-toc-section {
  margin-bottom: var(--sp5);
}

/* H2 do brandbook: clamp(26–32px), lh 1.2 */
.home-toc-title {
  font-size: clamp(26px, 3.2vw, 32px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: var(--spacing-stack-nano) 0 var(--sp3);
}

.toc {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 920px;
}

.toc li {
  border-bottom: 1px solid var(--border);
}

.toc-link {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-stack-xxxs);
  width: 100%;
  padding: var(--spacing-inset-xs) var(--spacing-inset-quarck);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
  transition: padding 0.15s, background 0.15s;
}

.toc-link:hover {
  padding-left: var(--spacing-inset-mini);
  background: var(--bg2);
}

.toc-link .n {
  font-family: var(--mono);
  font-size: var(--font-size-xs);
  color: var(--color-neutral-principal);
  min-width: 30px;
}

.toc-link .t {
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--text);
}

.toc-link .d {
  margin-left: auto;
  font-size: var(--font-size-sm);
  color: var(--dim);
  text-align: right;
}

@media (max-width: 768px) {
  .toc-link .d {
    display: none;
  }

  /* mesma régua do brandbook @680: hero/miolo com 32px/16px */
  .home-hero {
    margin: 0 0 var(--sp5);
    padding: var(--sp4) var(--sp2);
  }

  #p-home > :not(.home-hero) {
    margin-left: var(--sp2);
    margin-right: var(--sp2);
  }

  .home-hero-bottom {
    flex-direction: column;
    gap: var(--spacing-stack-nano);
  }
}

/* ─────────────────────────────────────────────────────────────────
   23. WIDGET BRANDBOOK na home — Voice block verde do DS
   ───────────────────────────────────────────────────────────────── */

.home-brandbook {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp3);
  flex-wrap: wrap;
  margin-bottom: var(--sp5);
  padding: var(--sp4);
  background: var(--color-surface-accent);
  color: var(--color-text-inverse);
  border-radius: var(--radius-large);
  text-decoration: none;
  transition: background 0.15s;
}

.home-brandbook:hover {
  background: var(--color-green-strong);
}

.home-brandbook:focus-visible {
  outline: 2px solid var(--color-focus-ring-inverse);
  outline-offset: 2px;
}

.home-brandbook-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-nano);
  max-width: 560px;
}

.home-brandbook-kicker {
  font-family: var(--mono);
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-inverse-muted);
}

.home-brandbook-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
}

.home-brandbook-desc {
  font-size: var(--font-size-md);
  line-height: 1.6;
  color: var(--color-text-inverse);
}

.home-brandbook-cta {
  font-family: var(--sans);
  font-size: var(--font-size-sm);
  font-weight: 500;
  white-space: nowrap;
  padding-bottom: var(--spacing-inset-quarck);
}

/* Transição de página suave (View Transitions API).
   Equivale ao @view-transition do brandbook, aqui same-document (SPA):
   a troca de painel em go() faz cross-fade na mesma curva --ease dos dois sites. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.28s;
  animation-timing-function: var(--ease);
}

/* Acessibilidade — mesma regra do brandbook */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  /* Pseudos da View Transition não são alcançados por '*' — desligar explicitamente */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

/* ── DATA VIZ — única exceção ao piso de marca (12px) ─────────────────────
   Só texto DENTRO de gráficos (eixos/ticks/funil) usa o token miúdo. Todo o
   resto (badges, th, KPI-labels) segue 12px. Vem por último p/ vencer o snap. */
.iv-hr-h, .iv-geo-sub, .ac-funnel-drop {
  font-size: var(--font-size-data-viz);
}

/* ══════════════════════════════════════
   CRUZAMENTOS — painel de retorno real (ROAS/CPA, atribuição, funil)
   espaçamento múltiplos de 8px · cores via var() · sem inline (exceto width/cor calc em JS)
══════════════════════════════════════ */
.cz-block { margin-bottom: var(--spacing-stack-xs); }
.cz-h { font-size: var(--font-size-md); font-weight: 700; color: var(--text); margin: 0 0 var(--spacing-stack-xxxs); padding-bottom: var(--spacing-inset-nano); border-bottom: 1px solid var(--border); }
.cz-grid-4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.cz-note { font-size: var(--font-size-xs); color: var(--dim); margin-top: var(--spacing-stack-nano); line-height: 1.5; }
.cz-note strong { color: var(--text); }

.cz-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.cz-table th { text-align: left; padding: var(--spacing-inset-nano); border-bottom: 2px solid var(--border); color: var(--dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--font-size-xs); }
.cz-table td { padding: var(--spacing-inset-nano); border-bottom: 1px solid var(--border); color: var(--text); }
.cz-table .cz-num { text-align: right; font-variant-numeric: tabular-nums; }
.cz-table tbody tr:hover { background: var(--bg2); }

.cz-funnel { display: flex; flex-direction: column; gap: var(--spacing-stack-nano); margin-bottom: var(--spacing-stack-xxxs); }
.cz-funnel-row { display: flex; align-items: center; gap: var(--spacing-stack-xxxs); }
.cz-funnel-label { flex: 0 0 160px; font-size: var(--font-size-sm); color: var(--dim); }
.cz-funnel-track { flex: 1; height: 24px; background: var(--bg2); border-radius: var(--radius); overflow: hidden; }
.cz-funnel-fill { height: 24px; border-radius: var(--radius); transition: width 0.4s ease; }
.cz-funnel-val { flex: 0 0 96px; text-align: right; font-size: var(--font-size-sm); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.cz-funnel-rate { color: var(--dim); font-weight: 400; font-size: var(--font-size-xs); }

/* ════════════════════════════════════════════════════════════════════════
   IMPRESSÃO / PDF — relatório do board (lógica em board-print.js)
   Modelo portado do site financeiro: capa 100vh, índice, folha-capa de
   capítulo, cabeçalho/rodapé corrido, thead repetido, toggle Cor/P&B.
   Os gráficos (Chart.js/canvas) são trocados por <img> PNG no print.
   ════════════════════════════════════════════════════════════════════════ */

/* — Ações de impressão no rodapé do rail — */
.side-foot-actions { display: flex; flex-direction: column; gap: var(--spacing-stack-nano); padding-bottom: var(--spacing-inset-mini); border-bottom: 1px solid var(--sidebar-line); }
.side-foot-actions .rail-print { width: 100%; }
.print-pref { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-stack-nano); }
.print-pref .pp-label { font-family: var(--mono); font-size: var(--font-size-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sidebar-muted); }
.print-pref .pp-seg { display: inline-flex; border: 1px solid var(--sidebar-line); border-radius: var(--radius-medium); overflow: hidden; }
.print-pref .pp-seg button { font-family: var(--mono); font-size: var(--font-size-xs); padding: var(--spacing-inset-quarck) var(--spacing-inset-mini); background: transparent; border: 0; color: var(--sidebar-muted); cursor: pointer; }
.print-pref .pp-seg button.is-active { background: var(--color-text-inverse-muted, #fff); color: var(--color-surface-dark, #111); }

/* — Overlay "Montando relatório…" (modo completo, enquanto espera as APIs) — */
#print-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); }
#print-overlay .print-overlay-box { display: flex; align-items: center; gap: var(--spacing-stack-mini); background: var(--bg); color: var(--text); font-family: var(--sans); font-size: var(--font-size-md); padding: var(--spacing-inset-xs) var(--spacing-inset-sm); border-radius: var(--radius-large); box-shadow: var(--shadow-soft); }

/* — Andaime só existe no papel: invisível na tela (revelado no @media print) — */
#print-cover-host, .ch-top, .ch-foot, .print-chart-img { display: none; }

@media print {
  /* uma orientação só — retrato, margens generosas */
  @page { size: A4 portrait; margin: 22mm 20mm 20mm; }
  html, body { background: var(--color-brand-secondary); }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; color: var(--color-text); font-size: 11pt; line-height: 1.5; }

  /* —— esconde tudo que é de tela / interativo —— */
  .sidebar, .sidebar-overlay, .mobile-bar, .breadcrumb, .skip-link, #p-home,
  button[data-print], [data-printcolor], .print-pref, .side-foot-actions,
  .bi-toolbar, .bi-refresh-btn, .bi-apply-btn, .bi-period-group, .bi-date-inputs,
  .panel-auto-badge, .bi-empty, .loading-wrap, #print-overlay { display: none !important; }
  .shell { display: block; }
  .main { padding: 0; max-width: none; margin: 0; }
  .panel { padding: 0; }
  #print-cover-host { display: block; }

  /* ===== CAPA INICIAL — editorial (rodapé ancorado no fim da folha) ===== */
  .print-cover { break-after: page; min-height: 100vh; display: flex; flex-direction: column; padding: 0; }
  .print-cover .pc-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp3); font-family: var(--mono); font-size: 9.5pt; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-helper); border-bottom: 1.5px solid var(--color-neutral-darkest); padding-bottom: 5mm; }
  .print-cover .pc-mid { margin: auto 0; }
  .print-cover .pc-brand { margin-bottom: 28mm; }
  .print-cover .pc-logo { width: 60mm; height: auto; filter: invert(1); display: block; margin-bottom: 5mm; }
  .print-cover .pc-signature { font-family: var(--serif); font-style: italic; font-size: 13pt; color: var(--color-neutral-principal); margin: 0; }
  .print-cover .pc-eyebrow { font-family: var(--mono); font-size: 10pt; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-neutral-principal); margin-bottom: 3mm; }
  .print-cover .pc-title { font-size: 48pt; line-height: 1.02; font-weight: 800; letter-spacing: -0.02em; margin: 0; color: var(--color-neutral-darkest); }
  .print-cover .pc-sub { font-family: var(--serif); font-style: italic; font-size: 17pt; color: var(--color-text-helper); margin: 4mm 0 0; max-width: 130mm; }
  .print-cover .pc-foot { display: flex; justify-content: space-between; gap: var(--sp3); font-family: var(--mono); font-size: 9pt; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-helper); border-top: 1px solid var(--color-neutral-light); padding-top: 5mm; }

  /* ===== ÍNDICE (modo completo) ===== */
  .print-index { break-after: page; padding: 0 2mm; }
  .print-index .sec-label { display: block; font-size: 10pt; letter-spacing: 0.2em; color: var(--color-neutral-principal); margin: 0; border: 0; text-transform: uppercase; }
  .print-index .toc-title { font-size: 26pt; font-weight: 800; color: var(--color-neutral-darkest); margin: 4mm 0 9mm; }
  .print-index .toc { list-style: none; margin: 0; padding: 0; max-width: none; }
  .print-index .toc li { display: flex; align-items: baseline; gap: var(--spacing-stack-mini); padding: var(--spacing-inset-mini) var(--spacing-inset-micro); border-bottom: 1px solid var(--color-neutral-lightest); }
  .print-index .toc .n { font-size: 11pt; color: var(--color-neutral-principal); min-width: 30px; }
  .print-index .toc .t { font-size: 13pt; font-weight: 700; color: var(--color-neutral-darkest); flex: 0 0 auto; }
  .print-index .toc .d { font-size: 9.5pt; color: var(--color-text-helper); }

  /* ===== PAINÉIS: página vs completo ===== */
  body[data-print="pagina"] .panel { display: none !important; }
  body[data-print="pagina"] .panel.active { display: block !important; }
  body[data-print="pagina"] .panel-header { display: none; }   /* a capa já traz título + lead */

  body[data-print="completo"] .panel { display: none !important; }
  body[data-print="completo"] #p-painel-diario,
  body[data-print="completo"] #p-insights,
  body[data-print="completo"] #p-metrics,
  body[data-print="completo"] #p-pago,
  body[data-print="completo"] #p-organico,
  body[data-print="completo"] #p-mensais,
  body[data-print="completo"] #p-conteudo,
  body[data-print="completo"] #p-publico { display: block !important; break-before: page; counter-increment: secao; }
  body[data-print="completo"] .main { counter-reset: secao; }
  /* cada capítulo abre numa FOLHA-CAPA própria: número grande + título + lead */
  body[data-print="completo"] .panel-header { min-height: 100vh; break-after: page; padding: 0; margin: 0; border: 0; display: flex; flex-direction: column; }
  body[data-print="completo"] .panel-header::before { content: counter(secao, decimal-leading-zero); margin-top: auto; font-size: 130pt; font-weight: 800; line-height: 0.82; letter-spacing: -0.03em; color: var(--color-neutral-darkest); margin-bottom: 4mm; }
  body[data-print="completo"] .panel-title { font-size: 40pt; font-weight: 800; letter-spacing: -0.02em; line-height: 1.02; margin: 0; }
  body[data-print="completo"] .panel-sub { font-family: var(--serif); font-style: italic; font-size: 15pt; color: var(--color-text-helper); max-width: 150mm; margin-top: 4mm; text-transform: none; letter-spacing: 0; }

  /* topo + rodapé de capítulo (= os da capa principal) molduram a folha-capa */
  .ch-top, .ch-foot { display: flex; justify-content: space-between; gap: var(--sp3); font-family: var(--mono); font-size: 9pt; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-helper); }
  .ch-top { border-bottom: 1.5px solid var(--color-neutral-darkest); padding-bottom: 5mm; order: -1; }
  .ch-top span:first-child { color: var(--color-neutral-darkest); font-weight: 700; }
  .ch-foot { border-top: 1px solid var(--color-neutral-light); padding-top: 5mm; margin-top: 18mm; }

  /* ===== EDITORIAL: tira a cara de "tela" ===== */
  .card, .metric, .bi-chart-card, .chart-card, .stat-card, .bi-kpi { box-shadow: none !important; break-inside: avoid; }

  /* —— KPIs: UM só visual flat "RÓTULO / valor", 4 por linha. Unifica os dois
        sistemas do board: .metric (HTML estático) e .stat-card (render em JS). —— */
  .grid4, .grid3, .grid2, .stat-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 7mm 8mm !important; margin: 8mm 0 !important; }
  .metric, .stat-card, .stat-card.hero, .ds-stat {
    background: none !important; border: 0 !important; box-shadow: none !important;
    border-radius: 0 !important; padding: 0 !important; min-height: 0 !important; color: var(--color-neutral-darkest) !important;
  }
  /* rótulo: mono, régua fina embaixo (igual financeiro) */
  .metric-label, .stat-label, .ds-stat__label {
    display: block; font-family: var(--mono); font-size: 8.5pt; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-helper);
    border-bottom: 1.5px solid var(--color-neutral-darkest); padding-bottom: var(--spacing-inset-quarck); margin-bottom: var(--spacing-stack-nano); min-height: 0 !important;
  }
  .metric-val, .metric-val.sm, .metric-val.accent,
  .stat-value, .stat-card.hero .stat-value, .ds-stat__value { font-size: 16pt !important; font-weight: 700; color: var(--color-neutral-darkest) !important; line-height: 1.15; text-align: left !important; }
  .metric-delta, .stat-delta, .stat-sub, .stat-card.hero .stat-sub, .ds-stat__sub { font-size: 8.5pt !important; color: var(--color-text-helper) !important; margin-top: var(--spacing-stack-quarck); text-align: left !important; }
  /* breakdown em linhas (stat-rows) continua legível */
  .stat-card.stat-rows .stat-value { font-size: 13pt !important; }
  .stat-rows-key, .stat-rows-val, .stat-rows-pct { font-size: 8.5pt; }

  /* —— sec-label vira título de seção mono —— */
  .sec-label { display: block; break-after: avoid; font-family: var(--mono); font-size: 11pt; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-dark); margin: 10mm 0 3mm !important; }
  .section-title, .chart-title, .bi-chart-title { break-after: avoid; }

  /* —— gráficos: canvas vivo escondido, imprime o snapshot <img> —— */
  .bi-chart-card, .chart-card, .stat-card { border: 0 !important; padding: 0 !important; background: none !important; border-radius: 0 !important; }
  .bi-chart-grid, .bi-chart-grid2, .chart-grid { display: block !important; }
  canvas { display: none !important; }
  .bi-chart-wrap, .chart-wrap { position: static !important; height: auto !important; }
  .print-chart-img { display: block; width: 100%; max-width: 170mm; height: auto; margin: 0 auto 4mm; }
  .bi-chart-title, .chart-title { font-family: var(--mono); font-size: 11pt; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text); border-bottom: 1px solid var(--color-neutral-light); padding-bottom: var(--spacing-inset-nano); margin: 8mm 0 var(--spacing-stack-nano); }

  /* —— cards genéricos: só agrupadores, sem caixa —— */
  .card { border: 0 !important; padding: 0 !important; background: none !important; margin: 8mm 0; }

  /* —— Top Conteúdo: UM post por linha, largura cheia (em vez de grid) —— */
  .bi-posts-grid { display: block !important; }
  .bi-post-card { width: 100% !important; margin: 0 0 6mm !important; border: 1px solid var(--color-neutral-light) !important; border-radius: 0 !important; box-shadow: none !important; break-inside: avoid; }
  .bi-post-card-top { border-color: var(--color-neutral-darkest) !important; box-shadow: none !important; }
  .bi-post-caption { font-size: 9.5pt; }
  .bi-post-link { display: none !important; }   /* "ver no Instagram" não faz sentido no papel */

  /* ===== TABELAS: cabeçalho repete por folha, linhas com folga ===== */
  table { width: 100%; border-collapse: collapse; font-size: 10.5pt; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }
  th, td { border-color: var(--color-neutral-light); padding: var(--spacing-inset-nano) var(--spacing-inset-mini); }
  thead th { background: none !important; color: var(--color-text-helper); font-size: 10pt; letter-spacing: 0.04em; border-bottom: 1.5px solid var(--color-neutral-darkest); }

  /* ============ MODO PRETO & BRANCO (body[data-print-color="bw"]) ============ */
  body[data-print-color="bw"] { color: var(--color-neutral-darkest); }
  body[data-print-color="bw"] .print-chart-img,
  body[data-print-color="bw"] svg { filter: grayscale(1) contrast(1.04); }
  body[data-print-color="bw"] .accent, body[data-print-color="bw"] .green,
  body[data-print-color="bw"] .red, body[data-print-color="bw"] .warn,
  body[data-print-color="bw"] .delta-pos, body[data-print-color="bw"] .delta-neg { color: var(--color-neutral-darkest) !important; }
}