/* api/static/v2/dashboard.css
   Dashboard v2 — light mode, tokens Heavy Design System.
   Mobile-first com breakpoint em 768px. */

:root {
  /* Cores Heavy */
  --red: #c20517;
  --red-hover: #a30412;
  --red-bg-soft: rgba(194, 5, 23, 0.06);
  --positive: #16a34a;
  --negative: #c20517;
  --warning: #d97706;
  /* Versões escuras p/ uso como TEXTO pequeno (foreground). Os tokens acima
     passam como fundo/fill, mas como COR DE TEXTO <18px falham WCAG AA
     (--positive ~3,3:1 / --warning ~3,2:1 sobre branco). Em `color:` usar estes:
     #15803d ~5:1 e #92400e ~6:1. NÃO trocar onde --positive/--warning são fundo. */
  --positive-text: #15803d;
  --warning-text: #92400e;

  /* Light mode */
  --bg: #ffffff;
  --bg-elev: #f9fafb;
  --bg-soft: #f3f4f6;
  --border: #e5e7eb;
  --border-strong: #d1d5db;
  --t1: #0d0d0d;
  --t2: #374151;
  --t3: #6b7280;
  /* --t4 era #9ca3af, mas falhava WCAG AA como TEXTO no conteúdo light
     (~2,5:1). Escurecido para passar AA (~4,8:1 sobre branco). No tema
     escuro (topbar/sidebar) os rótulos usam --sidebar-fg-muted/--topbar-fg-muted,
     não --t4, então o grafite continua claro lá. */
  --t4: #6b7280;

  /* Cores de rede social (texto sobre tint claro) — fonte ÚNICA, todas WCAG AA.
     Antes havia ~15 hex soltos com variações por rede; o Kwai (#d97706) falhava
     contraste (~2,8:1) e foi escurecido. */
  --net-instagram: #c2185b;
  --net-facebook:  #1565c0;
  --net-youtube:   #c62828;
  --net-tiktok:    #0d0d0d;
  --net-kwai:      #b45309;
  --net-reddit:    #c2410c;
  --net-google:    #0b57d0;   /* Google Ads (badge admin/orçamentos) — 5,7:1 sobre tint */

  /* Layout */
  --sidebar-w: 220px;
  --topbar-h: 64px;
  --period-h: 48px;
  --bottom-tabs-h: 64px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;

  /* Fontes */
  --fd: 'Barlow Condensed', sans-serif;
  --fb: 'DM Sans', sans-serif;
  --fm: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; }

/* === Foco de teclado visível (WCAG 2.4.7) ===
   Anel global em todo controle focável (links, botões, inputs, pills,
   toggles). Em superfícies escuras (topbar/sidebar/drawer/bottom tabs) e
   em pills ativas, o anel fica claro para manter contraste >= 3:1.
   Só dispara na navegação por teclado (:focus-visible), não no clique. */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.dash-topbar :focus-visible,
.dash-sidebar :focus-visible,
.drawer :focus-visible,
.btabs :focus-visible,
.pb-pill.is-active:focus-visible,
.filtros-seg-pill.is-active:focus-visible {
  outline-color: #fff;
}

/* === Movimento reduzido (WCAG 2.3.3) — baseline ===
   Quem ativou "reduzir movimento" no SO recebe transições/animações quase
   instantâneas em TODA a UI (cobre post-card, drawer, sheets, barras, thumbs
   etc. que os blocos específicos abaixo não pegavam). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === Estados de botão: desabilitado e em envio ===
   Antes inexistentes — botão desabilitado parecia clicável (convidava ao
   duplo-clique). Cobre os CTAs (Atualizar período, Salvar classificação…). */
button:disabled,
button[aria-busy="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}
button:disabled { pointer-events: none; }

/* Utilitario a11y: visualmente oculto mas audivel para leitor de tela. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  margin: 0;
  font-family: var(--fb);
  font-size: 14px;
  color: var(--t1);
  background: var(--bg);
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

/* Layout principal */
.dash-app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) var(--period-h) 1fr;
  grid-template-areas:
    "topbar topbar"
    "sidebar period"
    "sidebar main";
}

/* min-width:0 nos itens da coluna 1fr: sem isso, o track 1fr (== minmax(auto,1fr))
   assume o min-content do conteúdo mais largo (a .pb-form da barra de período, com
   pills/datas/botão flex-shrink:0) e infla a coluna além da viewport — a página
   estourava horizontalmente na faixa de tablet (768–820px). Ver §dashboard. */
.dash-topbar  { grid-area: topbar; min-width: 0; }
.dash-sidebar { grid-area: sidebar; }
.dash-period  { grid-area: period; min-width: 0; }
.dash-main    { grid-area: main; padding: 24px; overflow-x: hidden; min-width: 0; }

/* Mobile */
@media (max-width: 767px) {
  .dash-app {
    grid-template-columns: 1fr;
    grid-template-rows: var(--topbar-h) var(--period-h) 1fr;
    grid-template-areas:
      "topbar"
      "period"
      "main";
  }
  .dash-sidebar { display: none; }
  .dash-main    { padding: 16px; padding-bottom: calc(var(--bottom-tabs-h) + 16px); }
}

/* === Topbar === */
.dash-topbar {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 30;
}
.topbar-inner {
  display: flex; align-items: center; gap: 14px;
  height: 100%;
  padding: 0 20px;
}
.topbar-logo { display: flex; align-items: center; color: var(--t1); }
.topbar-div {
  width: 1px; height: 28px; background: var(--border);
}
.topbar-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid var(--t1);   /* preto neutro — nao usar vermelho p/ cliente */
  object-fit: cover;
  flex-shrink: 0;
}
.topbar-avatar--ph {
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-soft); color: var(--t2);
  font-family: var(--fd); font-weight: 800; font-size: 16px;
}
.topbar-info { min-width: 0; }
.topbar-name {
  font-family: var(--fd); font-weight: 800; font-size: 20px;
  color: var(--t1); line-height: 1; letter-spacing: 0.4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px;
}
.topbar-handle {
  font-family: var(--fm); font-size: 11px; color: var(--t3); margin-top: 2px;
}
.topbar-spacer { flex: 1; }
.topbar-actions { display: flex; gap: 8px; }
.topbar-btn {
  background: transparent;
  color: var(--t2);
  border: 1px solid var(--border-strong);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.topbar-btn:hover { background: var(--bg-soft); }

/* Hamburguer: escondido por padrao, aparece so no mobile.
   Fica ANTES da @media mobile para que as regras display:block
   abaixo tenham a ultima palavra na cascata. */
.topbar-burger {
  display: none;
  background: transparent;
  border: none;
  font-size: 22px;
  color: var(--t1);
  cursor: pointer;
  padding: 4px 6px;
  position: relative;
}

/* Mobile: oculta handle, mostra hamburguer, ordena items */
@media (max-width: 767px) {
  .topbar-burger { display: block; order: 0; }
  .topbar-logo { order: 1; }
  .topbar-handle { display: none; }
  .topbar-div { display: none; }
  .topbar-logo svg { height: 18px; }
  .topbar-inner { gap: 10px; padding: 0 14px; }
  .topbar-avatar { order: 2; width: 30px; height: 30px; }
  .topbar-info { order: 3; flex: 1; min-width: 0; }
  .topbar-name { font-size: 16px; max-width: 50vw; }
  .topbar-spacer { display: none; }    /* .topbar-info ja faz o push */
  .topbar-actions { display: none; }   /* Sair vai pro drawer */
}

/* === Sidebar === */
.dash-sidebar {
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  position: sticky;
  top: var(--topbar-h);
  align-self: start;
  height: calc(100vh - var(--topbar-h));
}
.sb-inner { padding: 14px 0; }
.sb-plan {
  margin: 0 12px 12px;
  padding: 10px 12px;
  background: var(--bg-soft);    /* cinza neutro — nao representa cliente em vermelho */
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.sb-plan-lbl {
  display: block;
  color: var(--t4);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.sb-plan-val {
  display: block;
  color: var(--t1);              /* preto neutro */
  font-family: var(--fd);
  font-weight: 700;
  font-size: 15px;
  margin-top: 2px;
  line-height: 1.2;
}
.sb-group { margin-bottom: 8px; }
.sb-group-label {
  color: var(--t4);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 8px 16px 4px;
}
.sb-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  position: relative;   /* p/ a barra ::before do estado ativo */
  color: var(--t2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.sb-item:hover { background: var(--bg-soft); }
.sb-item.is-active {
  background: var(--red-bg-soft);
  color: var(--red);
  font-weight: 700;
}
/* Indicador do item ativo: barra absoluta (não consome largura, dispensa o
   antigo hack de compensar padding por causa do border-left de 3px). */
.sb-item.is-active::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--red);
}
/* Ícones de nav agora são <svg> (macro _icones.html): dimensionados por
   width/height e herdam a cor via currentColor (acendem no estado ativo). */
.sb-ic {
  width: 18px; height: 18px;
  flex-shrink: 0;
  display: block;
}
.sb-badge {
  margin-left: auto;
  background: var(--red); color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 11px;
  min-width: 18px; text-align: center;
}
.sb-badge--dot {
  width: 8px; height: 8px;
  min-width: 8px;            /* anula o min-width:18px do .sb-badge (senão vira oval) */
  padding: 0;
  border-radius: 50%;
  background: var(--warning);
}
.sb-sub {
  list-style: none;
  padding: 0;
  margin: 4px 0 8px 28px;
  border-left: 1px solid var(--border);
}
.sb-sub-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--t2);
  text-decoration: none;
  border-radius: 4px;
  line-height: 1.3;
}
/* Ícone do "Visão geral" e avatar dos concorrentes — mesma coluna (20px). */
.sb-sub-ic { width: 20px; height: 20px; flex-shrink: 0; display: block; }
.sb-sub-avatar {
  width: 20px; height: 20px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.sb-sub-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sb-sub-avatar-ph { font-size: 10px; font-weight: 700; color: var(--sidebar-fg-muted); }
.sb-sub-item:hover {
  background: var(--bg-soft);
  color: var(--t1);
}
.sb-sub-item.is-active {
  color: var(--red);
  font-weight: 600;
}
/* Variante quando a sub-lista É o conteúdo do grupo (rótulo "Concorrência"),
   sem item-pai acima: alinha rente ao rótulo, sem o filete de árvore. */
.sb-sub--raiz { margin-left: 0; border-left: none; }
.sb-sub--raiz .sb-sub-item { padding-left: 16px; }

/* === Drawer (mobile) === */
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 90;
}
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 78%; max-width: 320px;
  background: var(--bg);
  z-index: 100;
  transform: translateX(-100%);
  transition: transform 0.22s ease-out;
  box-shadow: 4px 0 20px rgba(0,0,0,0.18);
  overflow-y: auto;
}
.drawer[aria-hidden="false"] { transform: translateX(0); }
.drawer-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.drawer-close {
  background: transparent; border: none;
  font-size: 20px; color: var(--t1);
  cursor: pointer; padding: 0;
  width: 28px; height: 28px;
}
.drawer-head-label { color: var(--t2); font-weight: 600; font-size: 13px; }

/* No desktop, drawer e overlay sempre escondidos */
@media (min-width: 768px) {
  .drawer, .drawer-overlay { display: none !important; }
}

/* === Bottom tabs (mobile) === */
.btabs {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 12px rgba(0,0,0,0.04);
  padding: 8px 0 12px;
  justify-content: space-around;
  z-index: 50;
}
@media (max-width: 767px) {
  .btabs { display: flex; }
}

.btab {
  background: transparent; border: none;
  color: var(--t3);
  font-size: 10px; font-weight: 500;
  text-align: center;
  flex: 1;
  padding: 0 4px;
  cursor: pointer;
  font-family: var(--fb);
}
.btab.is-active { color: var(--red); font-weight: 700; }
.btab-ic { width: 22px; height: 22px; display: block; margin: 0 auto 2px; }
.btab-lbl { display: block; }

/* === Pagina (titulo + sub) === */
.page-head { margin-bottom: 18px; }
.page-title {
  font-family: var(--fd);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin: 0;
  color: var(--t1);
}
.page-sub { color: var(--t3); margin: 4px 0 0; font-size: 12.5px; }

/* === Banner de alerta === */
.banner-alerta {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.45;
}
.banner-alerta--critico {
  background: rgba(194, 5, 23, 0.08);
  border: 1px solid rgba(194, 5, 23, 0.25);
  color: var(--negative);
}
.banner-alerta--atencao {
  background: rgba(217, 118, 6, 0.08);
  border: 1px solid rgba(217, 118, 6, 0.25);
  color: var(--warning-text);
}
.banner-alerta-ic { font-size: 18px; flex-shrink: 0; }
.banner-alerta-ic-svg { width: 18px; height: 18px; display: block; }
.banner-alerta-mais {
  text-align: right; font-size: 11px; color: var(--t3);
  margin-bottom: 12px;
}
.banner-alerta-mais a { color: var(--red); text-decoration: underline; }
.banner-alerta-x {
  margin-left: auto; flex-shrink: 0;
  background: none; border: 0; cursor: pointer;
  color: inherit; opacity: 0.6; padding: 2px; line-height: 0;
  border-radius: var(--r-sm);
}
.banner-alerta-x:hover { opacity: 1; }
.banner-alerta-x-svg { width: 16px; height: 16px; display: block; }

/* === KPIs principais === */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.kpi {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.kpi-lbl {
  color: var(--t3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Icone de rede dentro do .kpi-lbl: tom levemente mais escuro pra
   contrastar do texto uppercase fininho. */
.kpi-lbl .ico-rede {
  flex-shrink: 0;
  color: var(--t2);
}
.kpi-val {
  color: var(--t1);
  font-family: var(--fm);
  font-size: 22px;
  font-weight: 700;
  margin-top: 4px;
}
.kpi-dlt { font-size: 11.5px; font-weight: 600; margin-top: 3px; }
.kpi-dlt--up { color: var(--positive-text); }
.kpi-dlt--dn { color: var(--negative); }
.kpi-dlt--neutral { color: var(--t4); font-weight: 500; }   /* "sem comparacao" / "estavel" */

/* Mobile: KPIs em 2 colunas + cards mais compactos (padding, fontes
   menores) — dashboard com 5+ KPIs em telas estreitas ficava poluido. */
@media (max-width: 767px) {
  .kpi-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi { padding: 10px 12px; }
  .kpi-lbl { font-size: 10px; letter-spacing: 0.5px; }
  .kpi-val { font-size: 18px; margin-top: 2px; }
  .kpi-dlt { font-size: 10.5px; margin-top: 2px; }
}

/* Variante para KPI rows com quantidade dinamica de cards (ex: Audiencia,
   onde temos Total + 1 por rede ativa, de 1 ate 5). auto-fit acomoda de
   2 a 6 colunas no desktop e quebra naturalmente em telas menores. */
.kpi-row--fluid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
@media (max-width: 767px) {
  .kpi-row--fluid { grid-template-columns: 1fr 1fr; }
}

/* === Charts === */
.charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.chart-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  min-width: 0;   /* grid items tem min-width:auto por padrao — sem isso, o
                     canvas do Chart.js empurra a coluna alem do viewport */
}
.chart-title {
  color: var(--t1);
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 8px;
}
.chart-sub {
  color: var(--t3);
  font-size: 10px;
  font-weight: 400;
  margin-left: 6px;
}
.chart-wrap {
  position: relative;
  height: 200px;
}
/* Variante para charts solo (sem grid de 2 colunas) — usada na Audiencia,
   onde o chart de "Crescimento por rede" ocupa a largura toda. */
.chart-wrap--alto { height: 320px; }
/* Chart.js seta width inline no canvas — forca a respeitar o container.
   !important e necessario porque o inline style tem maior especificidade. */
.chart-wrap canvas { max-width: 100% !important; }
/* Empty state: mensagem amigavel quando o payload do chart nao tem dados. */
.chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--t4);
  font-size: 12px;
  font-style: italic;
  text-align: center;
  padding: 0 12px;
}

@media (max-width: 767px) {
  .charts-row { grid-template-columns: 1fr; }
  .chart-wrap { height: 180px; }
  .chart-wrap--alto { height: 240px; }
}

/* === Card de IA contextual === */
.card-ia {
  /* Fundo chapado de token + borda do sistema. Antes: gradiente decorativo a
     135deg + borda tingida fora da paleta (tell de template). O card de IA se
     distingue pelo leve realce do fundo (--bg-elev) + o rótulo, não por enfeite. */
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 14px 18px;
  margin-bottom: 20px;
}
.card-ia-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.card-ia-ic { width: 16px; height: 16px; flex-shrink: 0; color: var(--t2); }
.card-ia-ttl {
  margin: 0;   /* reset do h3 default — visual identico ao span anterior */
  color: var(--t2);   /* #374151 — cinza-escuro neutro, casa com tom informativo */
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.card-ia-bullets {
  margin: 0;
  padding-left: 22px;
  color: var(--t2);
  font-size: 13px;
  line-height: 1.55;
}
.card-ia-bullets li { margin-bottom: 4px; }

/* === Bloco generico (titulo + corpo) === */
.bloco { margin-bottom: 24px; }
.bloco-head {
  margin-bottom: 10px;
  /* Default: empilha titulo + subtitulo verticalmente — subtitulo fica
     numa linha abaixo, mesmo padrao do .page-head. Variantes com toggle
     (Audiencia) sao colocadas em linha via :has(.chart-toggle) abaixo. */
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bloco-ttl {
  font-family: var(--fd);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--t1);
  letter-spacing: 0.3px;
}
.bloco-sub {
  color: var(--t3);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2px;
}

/* === Lista de top posts ===
   Desktop: grid de 3 colunas; cada card e horizontal (thumb 110px a
   esquerda + info a direita), rank como numero no canto sup. esq. da
   thumb. Mobile: 1 coluna, mesma estrutura interna (overrides no media
   query abaixo: thumb maior 90px, gap menor). */
.post-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: start;   /* cards crescem so o necessario quando caption expande no hover */
}
.post-card {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  align-items: start;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px;
  position: relative;          /* base para o rank overlay */
  color: inherit;              /* <a> sem cor azul de link */
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
/* Hover destaca o card mesmo quando nao tem permalink (seed sem href).
   Cursor pointer so quando ha href — preserva semantica de "clicavel". */
.post-card[href] { cursor: pointer; }
.post-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}
/* Tooltip com a caption completa — aparece no hover (so em devices com
   ponteiro real; no mobile o usuario apenas tap no card). Pseudo-elemento
   ::after dispensa marcacao extra; data-tip="..." e setado no template. */
@media (hover: hover) {
  .post-card[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    background: var(--t1);
    color: #fff;
    padding: 10px 14px;
    border-radius: var(--r-sm);
    font-size: 12.5px;
    line-height: 1.45;
    width: max-content;
    max-width: 280px;
    min-width: 180px;
    text-align: left;
    white-space: normal;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0.18s ease;
  }
  .post-card[data-tip]:hover::after {
    opacity: 1;
    visibility: visible;
  }
}
.post-card-rank {
  position: absolute;
  top: 8px; left: 8px;   /* sobre o canto sup-esq do thumb (que esta em 14,14) */
  z-index: 1;
  width: 26px; height: 26px;
  background: var(--red);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fd);
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.post-card-thumb {
  width: 110px;
  aspect-ratio: 3 / 4;    /* formato portrait padrao de IG/TT */
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--bg-soft);
  display: block;
}
.post-card-thumb--ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: var(--t4);
}
.post-card-info {
  min-width: 0;
}
.post-card-meta {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.rede-pill {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.rede-pill--instagram { background: rgba(228,64,95,0.12); color: var(--net-instagram); }
.rede-pill--facebook  { background: rgba(24,119,242,0.12); color: var(--net-facebook); }
.rede-pill--tiktok    { background: rgba(0,0,0,0.08); color: var(--net-tiktok); }
.rede-pill--youtube   { background: rgba(255,0,0,0.1); color: var(--net-youtube); }
.rede-pill--kwai      { background: rgba(255,140,0,0.10); color: var(--net-kwai); }
.rede-pill--reddit    { background: rgba(255,69,0,0.10); color: var(--net-reddit); }
.mencao-tipo-reddit {
  display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: 0.3px; text-transform: uppercase;
  padding: 2px 7px; border-radius: 3px;
  background: var(--bg-soft); color: var(--t2);
}
.post-card-tipo { color: var(--t4); font-size: 10px; letter-spacing: 0.4px; }
.post-card-caption {
  color: var(--t2);
  font-size: 12.5px;
  line-height: 1.4;
  margin-bottom: 6px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* Stats viram destaque visual: numeros grandes em mono, com separador acima
   para "respirar" da caption. Esses sao os dados de analise do post.
   Layout: linha 1 = likes / coments / compart. (numeros brutos),
           linha 2 = engajamento% (resumo destacado em verde). */
.post-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;        /* row 8px (entre linhas) / col 18px */
  align-items: baseline;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 10px;
  color: var(--t3);
}
.post-card-stats > span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
/* Ícones de métrica (curtidas/coments/compart./seguidores) agora SVG: cinza
   neutro e centrados na linha do número (que está em baseline). */
.post-card-stats svg { width: 14px; height: 14px; align-self: center; flex-shrink: 0; color: var(--t3); }
.post-card-stats strong {
  color: var(--t1);
  font-family: var(--fm);
  font-size: 16px;      /* numero em destaque */
  font-weight: 700;
  line-height: 1;
}
.post-card-eng {
  flex-basis: 100%;     /* sempre quebra para a linha de baixo */
  color: var(--positive-text);
  font-weight: 700;
  font-size: 14px;
}
@media (min-width: 768px) and (max-width: 1024px) {
  /* Tablet: 2 colunas. Sem isto o grid ficava em 3 colunas dentro da área já
     reduzida pela sidebar (220px) e a coluna de texto do card colapsava p/ ~62px. */
  .post-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  /* Mobile: lista vira 1 coluna, card mantem layout horizontal
     (thumb esquerda, info direita), thumb menor e rank some. */
  .post-list { grid-template-columns: 1fr; gap: 8px; }
  .post-card {
    grid-template-columns: 90px 1fr;
    gap: 10px;
    padding: 8px 10px;
  }
  .post-card-rank { display: none; }   /* ordem ja obvia no mobile */
  .post-card-thumb { width: 90px; }    /* aspect 3:4 = 120px alto, casa
                                          com altura do info (meta + caption
                                          + 2 linhas de stats incl. eng%) */
  /* No mobile o numero grande de stats fica desproporcional, reduz. */
  .post-card-stats {
    margin-top: 6px;
    padding-top: 6px;
    gap: 10px 14px;
  }
  .post-card-stats strong { font-size: 13px; }
  .post-card-eng { font-size: 12px; }
}

/* === Avatar das tabelas comparativas (parcial _tabela_comparativa.html) === */
.tab-vs-av {
  width: 26px; height: 26px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-soft);
  flex-shrink: 0;
}
.tab-vs-av--ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--t2);
}
/* Delta inline ao lado do valor (B.1-#3). Fica na mesma linha do numero;
   no mobile, a tabela ja rola horizontal, entao o gap nao espreme. */
.tab-vs-dlt {
  display: inline-block;
  font-family: var(--fb);
  font-size: 10.5px;
  font-weight: 600;
  margin-left: 6px;
  white-space: nowrap;
}
.tab-vs-dlt--up { color: var(--positive-text); }
.tab-vs-dlt--dn { color: var(--negative); }
/* Delta neutro: usado nas linhas de CONCORRENTE — só indica direção, sem
   juízo verde/bom ou vermelho/ruim (o avanço do concorrente não é "bom"
   para o cliente). Verde/vermelho ficam reservados à linha do cliente. */
.tab-vs-dlt--neu { color: var(--t3); }

/* === Comparativo de Stories (IG × FB) — tabela PRÓPRIA, limpa ===
   NÃO reusa .tab-vs (grid de 5 colunas da tabela do Resumo, que espremia
   esta — Stories só tem Métrica + 1 coluna por rede). Cabeçalho com ícone +
   nome na cor da rede; célula vencedora em negrito + tint leve da cor da rede
   (identidade das duas redes do PRÓPRIO cliente, não juízo verde/vermelho). */
.stories-vs { width: 100%; border-collapse: collapse; }
.stories-vs thead th {
  padding: 4px 14px 10px;
  text-align: right;
  font-family: var(--fb);
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--t3);
  border-bottom: 2px solid var(--border-strong);
  white-space: nowrap;
}
.stories-vs thead th:first-child { text-align: left; }
.stories-vs thead th .ico-rede { vertical-align: -2px; margin-right: 5px; }
.stories-vs thead th[data-rede="instagram"] { color: var(--net-instagram); }
.stories-vs thead th[data-rede="facebook"]  { color: var(--net-facebook); }
.stories-vs thead th[data-rede="tiktok"]    { color: var(--net-tiktok); }
.stories-vs tbody td {
  padding: 11px 14px;
  text-align: right;
  font-family: var(--fm);
  font-size: 13.5px;
  color: var(--t2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.stories-vs tbody td:first-child {
  text-align: left;
  font-family: var(--fb);
  font-size: 13px; font-weight: 500;
  color: var(--t1);
}
.stories-vs tbody tr:last-child td { border-bottom: none; }
.stories-vs tbody tr:hover td { background: var(--bg-soft); }
/* Vencedor da linha: negrito + cor da rede NO NUMERO. Antes era uma faixa
   de fundo rosa/azul que, como o IG vence quase tudo, virava uma barra solida
   descendo a coluna inteira (parecia alerta — §5 #14 reserva rosa/vermelho
   pra alerta). Cor no numero marca o vencedor de leve e amarra com o
   cabecalho colorido da rede; perdedor fica cinza (--t2). */
.stories-vs td.is-win { font-weight: 700; }
.stories-vs td.is-win[data-rede="instagram"] { color: var(--net-instagram); }
.stories-vs td.is-win[data-rede="facebook"]  { color: var(--net-facebook); }
.stories-vs td.is-win[data-rede="tiktok"]    { color: var(--net-tiktok); }
@media (max-width: 767px) {
  /* Stories comparativo so tem 3 colunas — CABE no mobile sem rolar. Aperta o
     passo (padding/fonte menores) e deixa o rotulo da metrica quebrar linha
     ("Compartilhamentos", "Engajamento medio") pra a tabela caber no card. */
  .stories-vs thead th { padding-left: 6px; padding-right: 6px; font-size: 9.5px; letter-spacing: 0; }
  .stories-vs thead th .ico-rede { margin-right: 3px; }
  .stories-vs tbody td { padding-left: 6px; padding-right: 6px; font-size: 12.5px; }
  .stories-vs tbody td:first-child { font-size: 11.5px; white-space: normal; line-height: 1.3; }
  /* O .tab-vs-scroll foi feito pra tabela de 5 colunas do Resumo: forcava
     scroll (min-width:520) e pintava uma sombra-gradiente SEMPRE na direita
     (o "espaco na direita" que parecia scroll). Some a sombra pra Stories
     (a tabela ja cabe). overflow-x:auto continua como rede de seguranca. */
  .tab-vs-scroll:has(.stories-vs) { background: none; }
  /* Tooltip dentro da tabela: a regra global mobile (right:0) jogava o balao
     ~90px pra fora da tela A ESQUERDA, inflando o scroll horizontal em ~170px.
     O icone fica na 1a coluna (esquerda), entao recentrar nele mantem o balao
     dentro da tela e zera o transbordo. max-width travado no viewport. */
  .stories-vs .info-tip-bubble {
    left: 50%; right: auto; transform: translateX(-50%);
    max-width: calc(100vw - 48px);
  }
  .stories-vs .info-tip-bubble::after { left: 50%; right: auto; transform: translateX(-50%); }
}
@media (max-width: 359px) {
  /* Telas minusculas (≤359px, ex.: iPhone SE / Galaxy antigo): cabecalho das
     colunas de rede vira SO o icone (o nome fica acessivel ao leitor de tela
     via .th-net-nome). Garante caber sem scroll ate ~300px. */
  .stories-vs thead th .th-net-nome {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .stories-vs thead th .ico-rede { width: 16px; height: 16px; margin-right: 0; }
}

/* === Stories: comparativo + extras do IG lado a lado (2 colunas) ===
   Reaproveita .dois-blocos/.bloco--col. A tabela (mais larga) fica a
   esquerda; a lista de extras do IG, mais estreita, a direita. Selecionado
   por classe composta para vencer o `1fr 1fr` base do .dois-blocos sem
   depender da ordem no arquivo. Sem extras (cliente so-FB) a coluna da
   direita nao existe e a tabela ocupa tudo. align-items:stretch deixa os
   dois cards com a MESMA altura — a lista de extras (mais curta) preenche
   o espaco distribuindo as linhas (ver .ig-extras), em vez de deixar um
   buraco embaixo. */
.dois-blocos.stories-2col {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: stretch;
}
.dois-blocos.stories-2col:not(:has(.bloco--ig)) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) {
  /* minmax(0,1fr) e NAO 1fr: 1fr == minmax(auto,1fr), cujo minimo `auto` e o
     min-content da TABELA — que e largo e estoura a coluna alem do container
     (o card vazava ~53px no mobile). minmax(0,...) trava o minimo em 0; o
     .tab-vs-scroll cuida do scroll horizontal interno da tabela. */
  .dois-blocos.stories-2col { grid-template-columns: minmax(0, 1fr); }
}

/* Card de extras vira coluna flex pra a lista (.ig-extras) poder esticar
   e preencher a altura herdada do card mais alto (a tabela). */
.bloco--ig { display: flex; flex-direction: column; }

/* Identidade do Instagram no cabecalho da coluna de extras: so o icone
   leva a cor da rede; o titulo segue neutro (--t1) pra nao competir. */
.bloco--ig .bloco-ttl {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}
.bloco--ig .bloco-ttl .ico-rede {
  width: 16px; height: 16px;
  color: var(--net-instagram);
  flex-shrink: 0;
}

/* Lista rotulo -> valor dos extras do IG. Cada linha ecoa o ritmo das
   linhas da tabela de comparativo ao lado (mesma divisoria, mesmo passo).
   flex:1 + space-between distribui as 5 linhas pela altura do card (igualada
   a da tabela), eliminando o buraco que sobrava embaixo. */
.ig-extras {
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ig-extra {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--border);
}
.ig-extra:last-child { border-bottom: none; }
.ig-extra-lbl {
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 500;
  color: var(--t2);
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  line-height: 1.35;
}
.ig-extra-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--t4);
}
.ig-extra-val {
  margin: 0;                 /* reset do default do <dd> */
  font-family: var(--fm);
  font-size: 16px;
  font-weight: 700;
  color: var(--t1);
  white-space: nowrap;
}
.ig-extra-val--pos { color: var(--positive-text); }

@media (max-width: 767px) {
  /* Wrapper de scroll horizontal reusado pela tabela de Stories (.stories-vs).
     Em vez de esconder colunas, deixa o usuario rolar pra ver tudo. */
  .tab-vs-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Sombra sutil no canto direito sugerindo "tem mais pra direita". */
    background:
      linear-gradient(to right, rgba(0,0,0,0.08), transparent) right center / 12px 100% no-repeat;
  }
}

/* === Placeholder das secoes pendentes (P2-P4) === */
.placeholder-wrap {
  background: var(--bg);
  border: 2px dashed var(--border);
  border-radius: var(--r-lg);
  padding: 60px 32px;
  text-align: center;
  margin-top: 20px;
}
.placeholder-ic { font-size: 38px; margin-bottom: 14px; }
.placeholder-ttl {
  font-family: var(--fd);
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--t1);
}
.placeholder-text {
  color: var(--t3);
  font-size: 13px;
  margin: 0 auto;
  max-width: 420px;
}
.placeholder-text a { color: var(--red); font-weight: 600; }

/* === Period bar === */
.dash-period {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  position: sticky;
  top: var(--topbar-h);
  z-index: 20;
}
.pb-form {
  display: flex; align-items: center; gap: 8px;
  padding: 0 20px;
  flex-wrap: nowrap;
  width: 100%;
  overflow-x: auto;
}
.pb-form::-webkit-scrollbar { display: none; }
.pb-lbl {
  color: var(--t4);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 700;
  flex-shrink: 0;
}
.pb-pill {
  background: var(--bg-soft);
  color: var(--t2);
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 14px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 120ms ease;
}
.pb-pill:hover { background: var(--border); }
.pb-pill.is-active {
  background: var(--red);
  color: #fff;
}
.pb-pill.is-active:hover { background: var(--red-hover); }
.pb-sep {
  width: 1px; height: 22px;
  background: var(--border);
  margin: 0 6px;
  flex-shrink: 0;
}
.pb-date {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 4px 8px;
  font-family: var(--fm);
  font-size: 11.5px;
  color: var(--t1);
  background: var(--bg);
  flex-shrink: 0;
}
.pb-arrow { color: var(--t4); flex-shrink: 0; }
.pb-apply {
  background: var(--red);
  color: #fff;
  border: none;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--r-sm);
  cursor: pointer;
  flex-shrink: 0;
}
.pb-apply:hover { background: var(--red-hover); }

/* Trigger e sheet: invisiveis por padrao no desktop. */
.pb-mobile-trigger { display: none; }
.pb-sheet, .pb-sheet-overlay { display: none; }

@media (max-width: 767px) {
  /* Esconde a barra horizontal e mostra o botao colapsado */
  .pb-form { display: none; }

  .pb-mobile-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    height: 100%;
    background: var(--bg);
    border: none;
    padding: 0 16px;
    font-family: var(--fb);
    font-size: 13px;
    color: var(--t1);
    cursor: pointer;
    text-align: left;
  }
  .pb-mobile-lbl {
    color: var(--t3);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 700;
  }
  .pb-mobile-val {
    font-weight: 700;
    color: var(--t1);
  }
  .pb-mobile-caret {
    margin-left: auto;
    color: var(--t3);
    font-size: 14px;
  }

  /* Bottom sheet — slide-in de baixo. z-index 80/81 fica acima dos
     bottom tabs (50) com folga, mesmo se algum ancestral criar
     stacking context inesperado. */
  .pb-sheet-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 80;
  }
  .pb-sheet-overlay[hidden] { display: none; }

  .pb-sheet {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--bg);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 28px rgba(0,0,0,0.18);
    z-index: 81;
    /* dvh respeita a UI do navegador mobile (address bar etc.) */
    max-height: 90vh;
    max-height: 90dvh;
    padding: 14px 16px 0;
    animation: pbSheetIn 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .pb-sheet[hidden] { display: none; }

  @keyframes pbSheetIn {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  .pb-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
    flex-shrink: 0;
  }
  .pb-sheet-title {
    font-family: var(--fd);
    font-size: 18px;
    font-weight: 700;
    color: var(--t1);
  }
  .pb-sheet-close {
    background: transparent;
    border: none;
    font-size: 20px;
    color: var(--t2);
    cursor: pointer;
    padding: 4px 8px;
  }

  .pb-sheet-body {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    flex-shrink: 0;
    padding-bottom: 14px;
  }

  .pb-sheet-opt {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    background: var(--bg-soft);
    border-radius: var(--r-sm);
    color: var(--t1);
    font-weight: 600;
    font-size: 13px;
    text-align: center;
    white-space: nowrap;
  }
  .pb-sheet-opt.is-active {
    background: var(--red);
    color: #fff;
  }

  /* Footer fixo no fundo da sheet — Aplicar sempre acessivel */
  .pb-sheet-foot {
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    padding: 10px 0 14px;
    background: var(--bg);
  }
  .pb-sheet-sep {
    margin: 0 0 8px;
    color: var(--t4);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 700;
  }
  .pb-sheet-form {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: nowrap;
    margin-bottom: 8px;
  }
  .pb-sheet-date {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    padding: 9px 10px;
    font-family: var(--fm);
    font-size: 13px;
    color: var(--t1);
    background: var(--bg);
  }
  .pb-sheet-arrow { color: var(--t4); flex-shrink: 0; }
  .pb-sheet-apply {
    width: 100%;
    background: var(--red);
    color: #fff;
    border: none;
    padding: 12px;
    font-size: 13px;
    font-weight: 700;
    border-radius: var(--r-sm);
    cursor: pointer;
  }
  .pb-sheet-apply:hover { background: var(--red-hover); }
}

/* === Heatmap === */
.heatmap-wrap {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px;
  overflow-x: auto;
}
.heatmap-grid {
  display: grid;
  /* 1 coluna pra label do dia + 24 colunas pras horas */
  grid-template-columns: 40px repeat(24, minmax(18px, 1fr));
  gap: 2px;
  min-width: 520px;  /* garante leitura no mobile com scroll */
}
.heatmap-corner { }
.heatmap-hora-lbl,
.heatmap-dia-lbl {
  font-family: var(--fm);
  font-size: 9px;
  color: var(--t4);
  display: flex;
  align-items: center;
  font-weight: 600;
}
.heatmap-hora-lbl {
  justify-content: center;
  height: 16px;
}
.heatmap-hora-lbl.is-hidden { visibility: hidden; }
.heatmap-dia-lbl {
  padding-right: 6px;
  justify-content: flex-end;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.heatmap-cell {
  background: var(--bg-soft);
  border-radius: 2px;
  height: 18px;
  cursor: default;
  /* intensidade aplicada via style inline pelo JS */
}

/* === Performance por formato === */
.formato-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}
.formato-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.formato-card--lider {
  border-color: var(--red);
  box-shadow: 0 0 0 2px rgba(194,5,23,0.08);
}
.formato-ic { line-height: 1; color: var(--t2); }
/* Ícones de formato/troféu agora são SVG (macro _icones); tamanho pelo container. */
.formato-ic svg { display: block; width: 22px; height: 22px; }
.formato-badge-ic svg { display: inline-block; vertical-align: -2px; width: 14px; height: 14px; }
.formato-rk-ic svg { display: block; margin: 0 auto; width: 18px; height: 18px; }
.formato-nome {
  font-family: var(--fd);
  font-size: 16px;
  font-weight: 700;
  color: var(--t1);
}
.formato-stats {
  color: var(--t2);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.formato-stats strong { color: var(--t1); font-weight: 700; }
.formato-eng {
  font-family: var(--fm);
  font-size: 12px;
  color: var(--t3);
}
.formato-badge {
  position: absolute;
  top: -10px;
  right: 10px;
  background: var(--red);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 10px;
  white-space: nowrap;
  text-transform: uppercase;
}


.post-list-empty {
  text-align: center;
  color: var(--t3);
  font-style: italic;
  padding: 32px 16px;
  background: var(--bg-soft);
  border-radius: var(--r-md);
}

/* Mini ranking de seguidores dentro do KPI card (Concorrencia > Visao geral).
   Barras compactas, nome sobre a barra; numero exato no tooltip nativo
   do browser (title). Cliente em azul royal; concorrentes na cor_chart
   atribuida pelos charts comparativos (CLAUDE.md §5 #14). */
.seg-ranking {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.seg-ranking--mini { gap: 4px; margin-top: 6px; }
.seg-rank-bar {
  position: relative;
  background: var(--bg-soft);
  border-radius: 3px;
  height: 18px;
  overflow: hidden;
  cursor: default;
}
.seg-ranking--mini .seg-rank-bar { height: 20px; }
.seg-rank-fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  border-radius: 3px;
  opacity: .9;
  transition: width .35s ease, opacity .15s ease;
}
.seg-rank-bar:hover .seg-rank-fill { opacity: 1; }
.seg-rank-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  pointer-events: none;
}
/* Card de Seguidores mini: ocupa o mesmo card que os demais KPIs.
   Sem kpi-val (numero grande) — o "valor" e o proprio chart.
   Recebe mais espaco horizontal (~1.6x) pra caber 4 barras com nomes
   legiveis; os outros 3 KPIs (texto curto) se contentam com menos. */
.kpi--seg-rank { display: flex; flex-direction: column; }
.kpi-row--p4c:has(.kpi--seg-rank) {
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
}

@media (max-width: 767px) {
  /* Mobile: 2x2 com Seguidores ocupando linha inteira (mais espaco
     pras barras horizontais; outros 3 KPIs ficam em 2x2 abaixo). */
  .kpi-row--p4c:has(.kpi--seg-rank) {
    grid-template-columns: 1fr 1fr;
  }
  .kpi--seg-rank { grid-column: 1 / -1; }
}

/* Resumo Top dias / Top horarios — visual de legenda colada ao heatmap.
   Sem border-top nem margem grande: parece extensao do proprio heatmap. */
.heatmap-topos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  padding: 0 4px;
}
.heatmap-topos-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font-size: 12px;
  line-height: 1.4;
}
.heatmap-topos-lbl {
  font-family: var(--fd);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--t4);
}
.heatmap-topos-vals { color: var(--t2); }
.heatmap-topos-vals strong { color: var(--t1); font-weight: 600; }
.heatmap-topos-sep { color: var(--b1); margin: 0 1px; }

@media (max-width: 640px) {
  .heatmap-topos-lbl { flex-basis: 100%; }
}

/* Mobile: heatmap horizontal scroll + cards de formato empilhados em
   uma coluna, com layout interno HORIZONTAL (ic esquerda · nome ·
   stats direita). Ocupa menos espaco vertical que o grid 2x2 anterior. */
@media (max-width: 767px) {
  .heatmap-grid { min-width: 580px; }
  .heatmap-topos { grid-template-columns: 1fr; gap: 16px; }

  .formato-row {
    gap: 6px;
    grid-template-columns: 1fr;  /* uma coluna, cards empilhados */
  }
  .formato-card {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
  }
  .formato-ic { font-size: 22px; flex-shrink: 0; line-height: 1; }
  .formato-nome { font-size: 14px; flex: 1; min-width: 0; }
  .formato-stats {
    flex-direction: row;
    gap: 12px;
    align-items: baseline;
    font-size: 12px;
    flex-shrink: 0;
  }
  .formato-stats strong { font-size: 13px; }
  .formato-eng { font-size: 11px; }
  /* Badge do lider no mobile: pin discreto com so o trofeu (sem texto)
     a esquerda do icone. O texto "Maior engajamento" fica no atributo
     title pra hover/screenreader; a borda vermelha do card-lider ja
     reforca visualmente. */
  .formato-card--lider { padding-left: 10px; }
  .formato-badge {
    position: static;
    background: rgba(194,5,23,0.12);
    color: var(--red);
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    order: -1;  /* aparece antes do icone */
  }
  .formato-badge-ic { font-size: 14px; line-height: 1; }
  .formato-badge-txt { display: none; }  /* so trofeu no mobile */

  /* Ranking de formato no mobile: esconde "X posts" se ficar apertado e
     compacta o gap pra caber tudo numa linha. */
  .formato-rk { grid-template-columns: 20px minmax(60px, max-content) 1fr auto; gap: 8px; }
  .formato-rk-qtd { display: none; }

  .bloco { margin-bottom: 18px; }
  .bloco-ttl { font-size: 16px; }
  .bloco-sub { font-size: 10.5px; }
}

/* === Layout de 2 blocos lado a lado (sentimento + temas / nuvens) === */
.dois-blocos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
.bloco--col {
  /* Equivalente a .bloco mas sem margin-bottom — controlado pelo .dois-blocos */
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px;
  margin-bottom: 0;
}
.bloco--col .bloco-head { margin-bottom: 12px; }
@media (max-width: 767px) {
  .dois-blocos { grid-template-columns: 1fr; gap: 10px; }
}

/* === Donut de sentimento (Comentarios) === */
.sent-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  align-items: center;
}
.sent-donut-wrap {
  position: relative;
  height: 140px;
}
.sent-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sent-bar-row {
  display: grid;
  grid-template-columns: 70px 1fr 90px;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.sent-bar-lbl {
  font-weight: 600;
  font-size: 11px;
}
.sent-bar-lbl--positivo { color: var(--positive-text); }
.sent-bar-lbl--negativo { color: var(--negative); }
.sent-bar-lbl--neutro   { color: var(--t2); }
.sent-bar-track {
  height: 8px;
  background: var(--bg-soft);
  border-radius: 4px;
  overflow: hidden;
}
.sent-bar-fill { height: 100%; border-radius: 4px; transition: width 0.3s ease-out; }
.sent-bar-fill--positivo { background: var(--positive); }
.sent-bar-fill--negativo { background: var(--negative); }
.sent-bar-fill--neutro   { background: var(--t4); }
.sent-bar-val {
  color: var(--t2);
  font-family: var(--fm);
  font-size: 11px;
}
.sent-bar-val strong { color: var(--t1); }
@media (max-width: 767px) {
  .sent-card { grid-template-columns: 100px 1fr; gap: 10px; }
  .sent-donut-wrap { height: 100px; }
  .sent-bar-row { grid-template-columns: 56px 1fr 70px; font-size: 11px; }
}

/* === Ranking de temas (categorias) === */
.temas-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tema-row {
  display: grid;
  grid-template-columns: 100px 1fr 80px;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.tema-nome {
  font-weight: 600;
  color: var(--t2);
  text-transform: capitalize;
}
.tema-bar-track {
  height: 8px;
  background: var(--bg-soft);
  border-radius: 4px;
  overflow: hidden;
}
.tema-bar-fill {
  height: 100%;
  background: var(--t3);
  border-radius: 4px;
  transition: width 0.3s ease-out;
  /* Animacao de entrada (B.4-#1): scaleX(0→1) preserva o width:X% inline.
     transform-origin:left faz a barra crescer da esquerda. Stagger via
     animation-delay seria ideal mas exigiria JS — animar todas juntas
     ainda da a sensacao de "loading". */
  transform-origin: left;
  animation: temaBarEnter 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes temaBarEnter {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
/* Respeita preferencia de reduzir movimento */
@media (prefers-reduced-motion: reduce) {
  .tema-bar-fill { animation: none; }
}
/* Cores por categoria (consistencia com sentimento) */
.tema-bar-fill--elogio      { background: var(--positive); }
.tema-bar-fill--ataque      { background: var(--negative); }
.tema-bar-fill--reclamacao  { background: var(--warning); }
.tema-bar-fill--duvida      { background: var(--t3); }
.tema-val {
  color: var(--t2);
  font-family: var(--fm);
  font-size: 11px;
}
.tema-val strong { color: var(--t1); }
@media (max-width: 767px) {
  .tema-row { grid-template-columns: 80px 1fr 70px; font-size: 11px; }
}

/* === Nuvem de palavras / emojis === */
.cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: baseline;
  line-height: 1.4;
  min-height: 60px;
}
.cloud-item {
  font-family: var(--fb);
  color: var(--t2);
  cursor: default;
  display: inline-block;
  transition: transform 160ms cubic-bezier(0.2, 0.7, 0.2, 1), color 160ms;
  transform-origin: center;
}
/* Hover zoom (B.4-#2): destaca o item passado pelo cursor. Palavras
   ganham um tom mais escuro; emojis so escalam (cor nao se aplica). */
.cloud--palavras .cloud-item:hover { transform: scale(1.2); color: var(--t1); }
.cloud--emojis .cloud-item:hover { transform: scale(1.35); }
@media (prefers-reduced-motion: reduce) {
  .cloud-item, .cloud-item:hover { transition: none; transform: none; }
}
.cloud--palavras .cloud-item { text-transform: lowercase; }
.cloud--emojis .cloud-item { line-height: 1; }
.cloud-size-1 { font-size: 11px; color: var(--t4); }
.cloud-size-2 { font-size: 13px; color: var(--t3); }
.cloud-size-3 { font-size: 16px; font-weight: 600; }
.cloud-size-4 { font-size: 20px; font-weight: 700; color: var(--t1); }
.cloud-size-5 { font-size: 26px; font-weight: 700; color: var(--red); }
.cloud--emojis .cloud-size-1 { font-size: 16px; }
.cloud--emojis .cloud-size-2 { font-size: 20px; }
.cloud--emojis .cloud-size-3 { font-size: 26px; }
.cloud--emojis .cloud-size-4 { font-size: 32px; }
.cloud--emojis .cloud-size-5 { font-size: 38px; }

/* === Destaques (positivos + negativos) === */
.destaques-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.destaques-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.destaques-col-ttl {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.destaques-col-ttl--pos { color: var(--positive-text); }
.destaques-col-ttl--neg { color: var(--negative); }
@media (max-width: 767px) {
  .destaques-row { grid-template-columns: 1fr; gap: 12px; }
}

/* === Coment card (destaques + lista completa) === */
.coment-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.coment-card--compacto { padding: 10px 12px; }
.coment-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.coment-card-autor {
  font-weight: 700;
  color: var(--t1);
  font-size: 13px;
}
.coment-card-texto {
  color: var(--t2);
  font-size: 13px;
  line-height: 1.45;
  word-break: break-word;
}
.coment-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--t4);
}
.coment-card-data { font-family: var(--fm); }
.coment-card-likes { color: var(--t3); }
.coment-card-replies { color: var(--t3); }
/* Icones inline (SVG) das curtidas/respostas — substituem os emojis ♥/💬.
   Herdam a cor (--t3) do span via currentColor. */
.coment-card-likes,
.coment-card-replies { display: inline-flex; align-items: center; gap: 3px; }
.coment-ic { width: 12px; height: 12px; flex-shrink: 0; }
.coment-card-link {
  color: var(--red);
  font-weight: 600;
  text-decoration: none;
  margin-left: auto;
}
.coment-card-link:hover { text-decoration: underline; }

/* Sentiment pill (dentro do coment card) */
.sent-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.sent-pill--positivo { background: rgba(22,163,74,0.12); color: var(--positive-text); }
.sent-pill--negativo { background: rgba(194,5,23,0.12); color: var(--negative); }
.sent-pill--neutro   { background: var(--bg-soft); color: var(--t2); }
.sent-pill--indefinido { background: var(--bg-soft); color: var(--t2); }

/* Categoria badge */
.cat-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  background: var(--bg-soft);
  color: var(--t2);
  text-transform: lowercase;
}
.cat-badge--elogio     { background: rgba(22,163,74,0.10); color: var(--positive-text); }
.cat-badge--ataque     { background: rgba(194,5,23,0.12); color: var(--negative); }
.cat-badge--reclamacao { background: rgba(217,119,6,0.12); color: var(--warning-text); }
.cat-badge--duvida     { background: var(--bg-soft); color: var(--t2); }
.cat-badge--spam       { background: var(--bg-soft); color: var(--t2); }

/* === Filtros de comentarios (sentimento + rede + sort) === */
.filtros-comentarios {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 20px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.filtro-grupo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.filtro-grupo-lbl {
  font-size: 10px;
  font-weight: 700;
  color: var(--t4);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* Lista de comentarios scrollavel */
.coment-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 720px;
  overflow-y: auto;
  padding-right: 4px;
}
/* Mobile: empilha grupos (label em cima, segment control embaixo) e
   reduz spacing. As pills do .filtros-seg viram scroll horizontal
   automaticamente via @media do proprio .filtros-seg. */
@media (max-width: 767px) {
  .coment-list { max-height: 520px; }

  .filtros-comentarios {
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
  .filtro-grupo {
    width: 100%;
    gap: 4px;
  }
  .filtro-grupo-lbl {
    font-size: 9.5px;
    letter-spacing: 0.5px;
  }
}

/* Empty state generico (ja usado em outras secoes) */
.empty-state {
  color: var(--t3);
  font-style: italic;
  font-size: 12px;
  padding: 16px 12px;
  text-align: center;
  background: var(--bg-soft);
  border-radius: var(--r-md);
}

/* === Chart toggle (pills Total/Variacao) ===
   Usado no header de blocos de chart que aceitam alternancia de modo.
   Fica colado a direita do titulo via margin-left:auto. */
.chart-toggle {
  margin-left: auto;
  display: inline-flex;
  gap: 0;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 2px;
}
.chart-toggle-btn {
  background: transparent;
  border: none;
  color: var(--t3);
  font-family: var(--fb);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  letter-spacing: 0.2px;
}
.chart-toggle-btn:hover { color: var(--t1); }
.chart-toggle-btn.is-active {
  background: var(--bg);
  color: var(--t1);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
@media (max-width: 767px) {
  .chart-toggle-btn { font-size: 10px; padding: 4px 10px; }
}
/* .bloco-head com toggle (Audiencia) volta pra linha — titulo a esquerda,
   pills de modo a direita (.chart-toggle ja usa margin-left:auto). */
.bloco-head:has(.chart-toggle) {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

/* =================================================================
   SECAO MIDIA PAGA (P4b)
   ================================================================= */

/* Chip "Meta" colado no label de KPI Meta-only (Alcance/CPM/Freq) */
.kpi-tag-meta {
  display: inline-block;
  font-family: var(--fb);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #0668E1;
  background: rgba(6, 104, 225, 0.10);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
  vertical-align: middle;
}

/* Cards plataforma (Meta + Google lado a lado) */
.cards-plataforma {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 767px) {
  .cards-plataforma { grid-template-columns: 1fr; gap: 12px; }
}
/* Card plataforma (Meta / Google) — padrao "fundo cinza + caixas brancas
   internas + delta abaixo", alinhado aos KPIs relacionais da Concorrencia
   (B.5-#2 do spec pre-cutover). Container neutro; cada metrica e um
   mini-card branco para ressaltar visualmente como bloco proprio. */
.plataforma-card {
  background: var(--bg-soft);
  border-radius: var(--r-md);
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.plataforma-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.plataforma-card-gasto {
  font-family: var(--fm);
  font-size: 15px;
  font-weight: 700;
  color: var(--t1);
}
.plataforma-badge {
  display: inline-block;
  font-family: var(--fb);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 4px 10px;
  border-radius: 999px;
}
.plataforma-badge--meta {
  color: #fff;
  background: #0668E1;
}
.plataforma-badge--google {
  color: #fff;
  background: var(--red);
}
.plataforma-card-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
/* Mini-card branco interno: reusa o "feeling" do .kpi. */
.plataforma-metric {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.plataforma-metric-lbl {
  font-family: var(--fb);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--t3);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.plataforma-metric-val {
  font-family: var(--fm);
  font-size: 18px;
  font-weight: 700;
  color: var(--t1);
  margin-top: 2px;
}
.plataforma-metric-dlt {
  font-family: var(--fb);
  font-size: 11px;
  font-weight: 600;
  margin-top: 2px;
}
.plataforma-metric-dlt--up { color: var(--positive-text); }
.plataforma-metric-dlt--dn { color: var(--negative); }
@media (max-width: 767px) {
  .plataforma-card-metrics { grid-template-columns: 1fr 1fr; }
  .plataforma-metric { padding: 8px 10px; }
  .plataforma-metric-val { font-size: 15px; }
}

/* Filtros das tabelas de campanhas (status + sort) */
.campanha-filtros {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
/* Headers sortable nas tabelas de campanhas (mesmo padrao da tab-vs do
   Resumo). Visual neutro -> chevron cinza apagado; ativo -> cor t1 e
   chevron rotacionado quando ascending. */
.tab-camp-th--sort {
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}
.tab-camp-th--sort:hover { color: var(--t1); }
.tab-camp-sort-ico {
  display: inline-block;
  margin-left: 2px;
  font-size: 9px;
  color: var(--t4);
  transition: transform 0.15s, color 0.15s;
}
.tab-camp-th--sort[aria-sort="ascending"] .tab-camp-sort-ico,
.tab-camp-th--sort[aria-sort="descending"] .tab-camp-sort-ico {
  color: var(--t1);
}
.tab-camp-th--sort[aria-sort="ascending"] .tab-camp-sort-ico {
  transform: rotate(180deg);
}

/* Tabela de campanhas (desktop) */
.tab-campanhas-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.tab-campanhas {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg);
}
.tab-campanhas th,
.tab-campanhas td {
  padding: 10px 12px;
  text-align: left;
  font-family: var(--fb);
  font-size: 12.5px;
  border-bottom: 1px solid var(--border);
}
.tab-campanhas tr:last-child td { border-bottom: none; }
.tab-campanhas th {
  background: var(--bg-soft);
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--t3);
}
.tab-campanhas .num { font-family: var(--fm); text-align: right; }
.tab-campanhas th.num { text-align: right; }
.tab-campanhas td.tab-c-nome {
  font-weight: 600;
  color: var(--t1);
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tab-campanhas tbody tr:hover { background: var(--bg-soft); }

/* Status dot reusavel */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  background: var(--t4);
}
.status-dot--ativa    { background: var(--positive); }
.status-dot--pausada  { background: var(--warning); }
.status-dot--encerrada{ background: var(--t4); }

/* Em mobile a tabela rola horizontalmente (mantemos formato tabular —
   mais facil ler que cards quando ha 7 colunas comparativas). Padding e
   font menores pra caber mais coluna por viewport. */
@media (max-width: 767px) {
  .campanha-filtros { gap: 10px; }
  .tab-campanhas th,
  .tab-campanhas td { padding: 8px 10px; font-size: 12px; }
  .tab-campanhas td.tab-c-nome { max-width: 180px; }
  /* Hint visual de que rola: sombra a direita quando ha overflow */
  .tab-campanhas-wrap {
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right, var(--bg), var(--bg)),
      linear-gradient(to right, rgba(0,0,0,0.06), rgba(255,255,255,0)) 100% 0;
    background-repeat: no-repeat;
    background-color: var(--bg);
    background-size: 100% 100%, 20px 100%;
    background-attachment: local, scroll;
  }
}

/* Empty state da secao midia paga */
.empty-state-mp {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 48px 24px;
  text-align: center;
  max-width: 520px;
  margin: 24px auto;
}
.empty-state-ic {
  margin-bottom: 12px;
  color: var(--t3);
}
.empty-state-ic svg { display: block; width: 40px; height: 40px; margin: 0 auto; }
.empty-state-ttl {
  font-family: var(--fd);
  font-size: 18px;
  font-weight: 600;
  color: var(--t1);
  margin: 0 0 8px;
}
.empty-state-text {
  font-family: var(--fb);
  font-size: 13px;
  color: var(--t3);
  margin: 0;
  line-height: 1.55;
}

/* ========================================================================
   P4c — Concorrencia (Visao geral)
   Estilos especificos da secao Concorrencia. Reaproveita .kpi, .bloco,
   .filtros-seg e .chart-wrap ja existentes.
   ======================================================================== */

/* KPI relacional: complementos do .kpi base.
   - .kpi-of   : "de N" cinza ao lado da posicao
   - .kpi-val--pos/neg/neu : cor do valor conforme status
   - .kpi-sub  : linha de detalhe abaixo do valor */
.kpi-of { font-size: 13px; opacity: 0.55; font-weight: 400; }
.kpi-val--pos { color: var(--positive-text); }
.kpi-val--neg { color: var(--negative); }
.kpi-val--neu { color: var(--t2); }
/* Diferença numérica explícita vs média dos concorrentes (ex.: "+1.1 p.p.
   vs média") — evita o usuário ter que subtrair Você − Média de cabeça. */
.kpi-diff { font-family: var(--fm); font-size: 11px; font-weight: 600; color: var(--t3); margin-top: 3px; }
.kpi-sub { font-family: var(--fm); font-size: 11px; color: var(--t3); margin-top: 3px; }

/* Subtitulo do KPI com "Voce:" em negrito + numero do cliente colorido
   conforme status (verde=acima/lidera, vermelho=abaixo, cinza=empate).
   Vermelho aqui sinaliza problema/queda — coerente com convencao §14
   do CLAUDE.md (vermelho nunca representa o cliente em UI estatica,
   so quando indica delta/status negativo). */
.kpi-sub strong { color: var(--t2); font-weight: 600; }
.kpi-sub-voce { font-family: var(--fm); font-weight: 700; }
.kpi-sub-voce--pos { color: var(--positive-text); }
.kpi-sub-voce--neg { color: var(--negative); }
.kpi-sub-voce--neu { color: var(--t2); }
/* Empilha "Voce: X" e "Media: Y" em linhas separadas dentro do .kpi-sub */
.kpi-sub-linha { display: block; line-height: 1.5; }
.kpi-sub-linha + .kpi-sub-linha { margin-top: 2px; }

/* Variante do .bloco-head que poe titulo + (tooltip/acao) na mesma linha. */
.bloco-head--inline {
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

/* Charts comparativos da Visao geral — altura maior que o default para
   acomodar 3 series (cliente + ate 4 concorrentes) sem sobreposicao. */
.chart-wrap--p4c { height: 240px; }
@media (max-width: 767px) { .chart-wrap--p4c { height: 200px; } }

/* Mobile: cards de KPI menos apertados em telas estreitas.
   Concorrencia usa .kpi-row--p4c, que SEMPRE fica 2x2 no mobile (nao
   cai pra 1 coluna mesmo em telas < 480px) — pedido do cliente pra
   manter os 4 KPIs comparativos visiveis sem precisar rolar. */
@media (max-width: 767px) {
  .kpi-row--p4c .kpi-lbl { font-size: 10px; }
  .kpi-row--p4c .kpi-sub { font-size: 10.5px; line-height: 1.4; }
  /* Reforco explicito 2x2 mesmo herdando do .kpi-row global. */
  .kpi-row--p4c { grid-template-columns: 1fr 1fr; gap: 8px; }
}
/* Telas muito estreitas (< 480px): aperta padding e fontes do KPI
   pra caber 2 colunas sem cortar texto. */
@media (max-width: 479px) {
  .kpi-row--p4c .kpi { padding: 10px 10px; }
  .kpi-row--p4c .kpi-val { font-size: 16px; }
  .kpi-row--p4c .kpi-of { font-size: 11px; }
  .kpi-row--p4c .kpi-lbl { font-size: 9.5px; letter-spacing: 0.4px; }
  .kpi-row--p4c .kpi-sub { font-size: 9.5px; }
}

/* Movimentos do periodo: grid 2-col no desktop, 1-col no mobile. */
.movimentos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mov-item {
  /* Warning soft do design system — destaca como "atencao/novidade" sem
   ser alarmante. Diferencia de outros .bloco cinza-claros da pagina. */
  background: rgba(217, 119, 6, 0.06);
  border: 1px solid rgba(217, 119, 6, 0.18);
  border-radius: var(--r-md);
  padding: 10px 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.mov-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.mov-ic { width: 14px; height: 14px; }
.mov-text {
  font-size: 13px;
  line-height: 1.4;
  color: var(--t1);
}
/* Nome do cliente/concorrente no inicio do texto fica em destaque.
   Reforco explicito porque DM Sans 700 default pode visualmente
   parecer parecido com 400 dependendo da renderizacao do browser. */
.mov-text strong { font-weight: 800; color: var(--t1); }
@media (max-width: 767px) {
  .movimentos-grid { grid-template-columns: 1fr; }
}

/* Tabela "Panorama de mercado" — ordenavel (desktop + mobile).
   No mobile rola horizontalmente (overflow-x: auto) preservando o
   <th> ordenavel — bem mais util que a versao em cards anterior,
   que escondia colunas e tirava o sort do alcance do usuario.
   Linha do cliente (.tabela-cliente) usa fundo neutro (--bg-soft),
   nunca vermelho — vermelho e cor de alerta, nao representa o cliente. */
.tabela-comparacao-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tc-nome { display: flex; align-items: center; gap: 8px; }
.tabela-comparacao {
  width: 100%;
  /* Em viewports estreitos, forca a largura minima e ativa o scroll
     horizontal — caso contrario as colunas "Seg. IG/FB" empurram o
     texto e ficam ilegiveis. 560px cabe as 6 colunas com folga. */
  min-width: 560px;
  border-collapse: collapse;
  font-size: 13px;
}
.tabela-comparacao th,
.tabela-comparacao td {
  padding: 10px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.tabela-comparacao th {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--t3);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  letter-spacing: 0.5px;
}
.tabela-comparacao th:hover { color: var(--red); }
.tabela-comparacao th.is-sorted { color: var(--red); }
.tabela-comparacao th.is-sorted .sort-ic { color: var(--red); }
.tabela-comparacao tr.tabela-cliente {
  background: var(--bg-soft);
  font-weight: 600;
}
.tabela-comparacao td {
  font-family: var(--fm);
  color: var(--t1);
}
.sort-ic {
  font-size: 9px;
  margin-left: 4px;
  opacity: 0.4;
}

@media (max-width: 767px) {
  /* Mobile: a tabela ja rola na horizontal, entao priorizamos respiro
     lateral (padding-x maior) pros valores + delta inline nao ficarem
     apertados. Fade no canto direito sugere "tem mais a direita". */
  .tabela-comparacao th,
  .tabela-comparacao td {
    padding: 9px 16px;
    font-size: 12px;
  }
  .tabela-comparacao-wrap {
    background:
      linear-gradient(to right, transparent, rgba(0,0,0,0.06)) right center / 14px 100% no-repeat;
  }
}

/* ========================================================================
   P4c — Concorrência · Página individual
   ======================================================================== */
.voltar-link { display: inline-block; margin-bottom: 12px; font-size: 12px; color: var(--t3); text-decoration: none; }
.voltar-link:hover { color: var(--red); }

/* Card: background sutil + bordas arredondadas + padding interno generoso —
   ajuda a "soltar" o stroke rosa do avatar do conteudo (que no mobile fica
   alinhado a esquerda) e da identidade visual de bloco. */
.concorrente-header {
  display: flex; gap: 18px; align-items: center;
  background: var(--bg-soft);
  border-radius: var(--r-md);
  padding: 18px 20px;
}

/* Mega-card consolidado: periodo + identidade + mini-cards + comparativo + KPIs.
   Substitui o page-head + concorrente-header + bloco-comparativo separados. */
.conc-mega-header {
  background: var(--bg-soft);
  border-radius: var(--r-md);
  padding: 18px 20px;
}
.conc-mh-periodo {
  font-family: var(--fm);
  font-size: 12px;
  color: var(--t3);
  margin-bottom: 14px;
  letter-spacing: 0.3px;
}
.conc-mh-identidade {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.conc-mh-avatar-bloco {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}
.conc-mh-text { min-width: 0; }
.conc-mh-nome {
  font-family: var(--fd);
  font-size: 32px;
  font-weight: 800;
  margin: 0 0 4px 0;
  color: var(--t1);
  line-height: 1.05;
  letter-spacing: 0.3px;
}
.conc-mh-divisor {
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: 18px 0 14px;
}
.conc-mh-comparativo-ttl {
  font-family: var(--fd);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--t1);
  letter-spacing: 0.3px;
}
/* KPIs dentro do mega-card ficam BRANCOS pra contrastar com o fundo cinza
   do .conc-mega-header (mesmo padrao dos mini-cards .ch-stat). Fora do
   mega-card o .kpi-vs continua bg-soft (regra base ainda valida). */
.conc-mega-header .kpi-vs { background: var(--bg); }
.ch-avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; border: 2px solid #6d28d9; flex-shrink: 0; }
.ch-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ch-avatar-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--bg-soft); }
.ch-info { flex: 1; min-width: 0; }
.ch-handle { font-family: var(--fm); font-size: 12px; color: var(--t3); }
.ch-badges { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
/* Mesmo padrao de cor do .rede-pill (top posts) para manter associacao visual */
.ch-badge { font-size: 10px; padding: 3px 9px; border-radius: 3px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; background: var(--bg-soft); color: var(--t2); }
.ch-badge--instagram { background: rgba(228,64,95,0.12); color: var(--net-instagram); }
.ch-badge--facebook  { background: rgba(24,119,242,0.12); color: var(--net-facebook); }
.ch-badge--tiktok    { background: rgba(0,0,0,0.08); color: var(--net-tiktok); }
.ch-badge--youtube   { background: rgba(255,0,0,0.1); color: var(--net-youtube); }
.ch-badge--kwai      { background: rgba(255,140,0,0.14); color: var(--net-kwai); }
/* Mini-cards de KPI dentro do header (cartao de visitas).
   Background branco contrasta com o bg-soft do card pai, dando "destaque". */
.ch-meta { display: flex; gap: 10px; flex-shrink: 0; }
.ch-stat {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 6px);
  padding: 10px 14px;
  min-width: 110px;
  text-align: center;
}
.ch-stat-val {
  font-family: var(--fd);
  font-size: 24px;
  font-weight: 700;
  color: var(--t1);
  line-height: 1.1;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
/* Quando o valor e uma faixa "R$ X – R$ Y", a string passa de 12 chars
   e nao cabe em 24px. Reduz o tamanho e permite quebra. */
.ch-stat-val--faixa { font-size: 18px; white-space: normal; word-break: break-word; }
.ch-stat-lbl {
  font-size: 11px;
  color: var(--t3);
  font-weight: 500;
  margin-top: 4px;
  display: flex; align-items: center; justify-content: center; gap: 2px;
}
.ch-stat-lbl .info-tip { margin-left: 2px; }

.kpi-vs-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.kpi-vs { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; }
.kpi-vs-lbl { font-size: 10px; text-transform: uppercase; color: var(--t3); font-weight: 600; margin-bottom: 8px; }
.kpi-vs-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.kpi-vs-side { padding: 6px; border-radius: 4px; }
.kpi-vs-conc { background: rgba(190,24,93,0.08); }
.kpi-vs-voce { background: rgba(37,99,235,0.08); }
.kpi-vs-side-lbl { font-size: 8px; text-transform: uppercase; color: var(--t3); font-weight: 600; }
.kpi-vs-side-val { font-family: var(--fm); font-size: 14px; font-weight: 700; color: var(--t1); }
.kpi-vs-diff { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 11px; }
.kpi-vs-diff--vermelho { color: var(--negative); }
.kpi-vs-diff--verde { color: var(--positive-text); }
.kpi-vs-diff--neutro { color: var(--t2); }

.bloco-sub-ttl { font-size: 12px; text-transform: uppercase; color: var(--t3); font-weight: 600; margin: 18px 0 10px; }
.bloco-vazio { color: var(--t3); font-size: 13px; }

.conteudo-top-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.conteudo-card { background: var(--bg-soft); border-radius: var(--r-md); padding: 14px; }
/* Titulo do card em case normal (sem uppercase) — leitura mais agradavel
   pro cliente final. */
.conteudo-card-ttl {
  font-size: 13px;
  color: var(--t2);
  font-weight: 700;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.conteudo-card-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 12px; }
.conteudo-card-row b { font-family: var(--fm); }

/* Ranking de performance por formato — lista em barras horizontais.
   Cada linha: emoji · nome · barra proporcional · % engajamento · qtd posts.
   Lider (1a linha) ganha barra verde; demais em cinza. */
.formato-rank { display: flex; flex-direction: column; gap: 10px; }
.formato-rk {
  display: grid;
  grid-template-columns: 22px minmax(72px, max-content) 1fr auto auto;
  align-items: center;
  gap: 10px;
}
.formato-rk-ic { font-size: 18px; line-height: 1; text-align: center; }
.formato-rk-nome { font-size: 12.5px; font-weight: 600; color: var(--t1); white-space: nowrap; }
.formato-rk-bar {
  position: relative;
  height: 8px;
  background: rgba(0,0,0,0.06);
  border-radius: 4px;
  overflow: hidden;
}
.formato-rk-fill {
  display: block;
  height: 100%;
  background: var(--t3);
  border-radius: 4px;
}
.formato-rk--lider .formato-rk-fill { background: var(--positive); }
.formato-rk-val {
  font-family: var(--fm);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t1);
  min-width: 38px;
  text-align: right;
}
.formato-rk-qtd { font-size: 11px; color: var(--t3); white-space: nowrap; }

/* === Lista de posts do concorrente (P4c · individual) ===
   Reusa o componente .post-list do dashboard do cliente (grid 3 col desktop,
   1 col mobile, cards horizontais com rank). Mostra 6 cards iniciais;
   acordeao expande pro resto. Filtro de rede client-side via pills. */
.posts-head {
  display: flex;
  /* Empilhado: titulo em cima, filtro embaixo (em qualquer viewport). */
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin: 18px 0 12px;
}
.posts-head-ttl-wrap { margin: 0; }

/* Fallback CSS pre-JS: esconde do 7o card em diante. JS toma controle
   assim que roda e tira essa classe pra controlar visibilidade combinando
   filtro de rede + estado expandido. */
.post-list--collapsed > .post-card:nth-child(n+7) { display: none; }

/* Botao acordeao "Ver todos os X posts" */
.posts-acordeao-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  padding: 11px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 600;
  color: var(--t2);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.posts-acordeao-btn:hover {
  background: var(--bg);
  border-color: var(--t3);
  color: var(--t1);
}
.posts-acordeao-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
  font-size: 11px;
}
.posts-acordeao-btn[aria-expanded="true"] .posts-acordeao-arrow {
  transform: rotate(180deg);
}
.posts-acordeao-txt-aberto { display: none; }
.posts-acordeao-btn[aria-expanded="true"] .posts-acordeao-txt-fechado { display: none; }
.posts-acordeao-btn[aria-expanded="true"] .posts-acordeao-txt-aberto { display: inline; }
.conteudo-card-empty { color: var(--t3); font-size: 12px; }
.conteudo-card-resumo { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 11px; color: var(--t2); line-height: 1.4; }
.conteudo-card-resumo b { font-family: var(--fm); }

.freq-heatmap { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
/* Escala de azul SÓLIDA (sem opacity): assim o número fica legível em
   qualquer célula — texto azul-escuro nas claras, branco nas escuras
   (antes o branco sobre célula clara dava ~1,2:1, ilegível). WCAG AA. */
.freq-cell { aspect-ratio: 1; background: #eef2ff; color: #1e3a8a; border-radius: 2px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; }
.freq-cell[data-intensidade="1"] { background: #bfdbfe; color: #1e3a8a; }
.freq-cell[data-intensidade="2"] { background: #2563eb; color: #fff; }
.freq-cell[data-intensidade="3"] { background: #1d4ed8; color: #fff; }
.freq-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; font-size: 9px; color: var(--t3); text-align: center; margin-top: 4px; }

.ads-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
/* Fallback CSS pre-JS: esconde do 5o card em diante quando ha >4 ads.
   JS toma controle (conectarAcordeaoAds) assim que roda. */
.ads-grid--collapsed > .ad-card:nth-child(n+5) { display: none; }
/* === Card de anuncio (redesenhado — Heavy DS) ===
   Card branco com borda fina + leve elevacao no hover (familia .bloco/.ch-stat).
   Hierarquia: thumb -> badges/status -> copy -> CTA -> EIA (numero-heroi) ->
   metricas -> rodape (periodo/financiador/link). */
.ad-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 120ms, box-shadow 120ms;
}
.ad-card:hover { border-color: var(--border-strong); box-shadow: 0 2px 10px rgba(13,13,13,0.07); }
.ad-thumb { width: 100%; aspect-ratio: 4/5; background: var(--bg-soft); object-fit: cover; display: block; }
.ad-thumb--ph { display: flex; align-items: center; justify-content: center; color: var(--t4); font-size: 22px; }
/* Icone (SVG) dos placeholders de imagem sem thumb — substitui 👤/📷/📢.
   Herda a cor (--t4) do container via currentColor; avatar menor que post/ad. */
.ph-ic { width: 30px; height: 30px; color: var(--t4); }
.ch-avatar-ph .ph-ic { width: 22px; height: 22px; }
.ad-card-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
/* Cabecalho: badges de rede (reusa .ch-badge) + status alinhado a direita */
.ad-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.ad-redes { display: flex; gap: 4px; flex-wrap: wrap; }
.ad-card .ch-badge { font-size: 9px; padding: 2px 7px; letter-spacing: 0.3px; }
.ad-status { flex-shrink: 0; font-size: 9px; padding: 2px 7px; border-radius: 3px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; background: var(--bg-soft); color: var(--t3); border: 1px solid var(--border); }
.ad-status--ativo { background: rgba(22,163,74,0.10); color: var(--positive-text); border-color: rgba(22,163,74,0.30); }
/* Copy: 2 linhas (clamp). Copy completa vem no `title` (tooltip nativo no hover),
   sem expandir o card. */
.ad-copy { margin: 0; font-size: 12px; line-height: 1.45; color: var(--t2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: help; }
/* CTA do anuncio (pill); vira <a> quando ha link_destino */
.ad-cta { align-self: flex-start; font-size: 11px; padding: 4px 11px; background: var(--bg-soft); color: var(--t1); border: 1px solid var(--border-strong); border-radius: 999px; font-weight: 600; white-space: nowrap; text-decoration: none; }
a.ad-cta { transition: background 120ms, border-color 120ms; }
a.ad-cta:hover { background: var(--bg); border-color: var(--t3); }
.ad-cta-arrow { font-size: 10px; color: var(--t3); }
/* EIA — numero-heroi (investimento estimado por dia) em Barlow Condensed */
.ad-eia { background: var(--bg-soft); border-radius: var(--r-sm); padding: 9px 11px; }
.ad-eia-val { font-family: var(--fd); font-size: 26px; font-weight: 700; color: var(--t1); line-height: 1; }
.ad-eia-unit { font-family: var(--fb); font-size: 12px; font-weight: 600; color: var(--t3); margin-left: 3px; }
.ad-eia-lbl { margin-top: 4px; font-size: 10px; color: var(--t3); display: flex; align-items: center; gap: 3px; }
.ad-card--encerrado { opacity: 0.7; }
.ad-card--encerrado .ad-thumb { filter: grayscale(0.4); }
/* Sub-header dos blocos com KPIs inline ("N anuncios no periodo · media R$ Y por anuncio") */
.bloco-sub-kpi { color: var(--t3); }
.bloco-sub-kpi strong { color: var(--t1); font-weight: 700; font-family: var(--fm); }
.bloco-sub-sep { color: var(--t4); margin: 0 4px; }
/* Metricas (faixa de gasto / impressoes / alcance): grid de 2 colunas
   justificado a esquerda — label (cinza) e valor (mono) ambos alinhados à esquerda,
   valores comecando na mesma coluna. */
.ad-stats { display: grid; grid-template-columns: max-content 1fr; gap: 5px 12px; align-items: baseline; font-size: 11px; }
.ad-stat { display: contents; }
.ad-stat-lbl { color: var(--t3); }
.ad-stat-val { font-family: var(--fm); color: var(--t1); font-weight: 600; text-align: left; }
/* Rodape: periodo + financiador + link da biblioteca, separados por filete.
   margin-top:auto ancora o rodape na base (cards da linha tem alturas diferentes). */
.ad-foot { margin-top: auto; border-top: 1px solid var(--border); padding-top: 9px; display: flex; flex-direction: column; gap: 6px; }
.ad-foot-meta { display: flex; flex-direction: column; gap: 2px; }
.ad-periodo { font-size: 10px; color: var(--t4); font-family: var(--fm); }
.ad-financiador { font-size: 10px; color: var(--t3); }
.ad-biblioteca-link { align-self: flex-start; font-size: 11px; font-weight: 600; color: var(--t2); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: color 120ms; }
.ad-biblioteca-link:hover { color: var(--red); }
.ad-biblioteca-link:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.com-resumo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.sent-donut { width: 88px; height: 88px; border-radius: 50%; margin: 8px auto; background: var(--bg-soft); }
.sent-legenda { text-align: center; font-size: 11px; color: var(--t2); }
.com-lista { padding: 12px; }
.com-filtros { display: flex; gap: 6px; margin-bottom: 10px; font-size: 11px; flex-wrap: wrap; align-items: center; }
.com-list { max-height: 400px; overflow-y: auto; }
.com-item { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12px; line-height: 1.5; }
.com-sent { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.com-sent--positivo { background: var(--positive); }
.com-sent--negativo { background: var(--negative); }
.com-sent--neutro { background: var(--t3); }
.com-list-truncated { text-align: center; margin-top: 8px; font-size: 10px; color: var(--t3); }

@media (max-width: 767px) {
  /* Mobile: stack vertical, mantem o card (padding + background + radius) */
  .concorrente-header { flex-direction: column; align-items: flex-start; gap: 14px; padding: 16px; }
  .ch-info { width: 100%; }
  .ch-handle { font-size: 13px; }
  .ch-badges { margin-top: 10px; gap: 8px; }
  /* Mini-cards de KPI ocupam toda a largura, 2 colunas iguais */
  .ch-meta { width: 100%; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,0.08); }
  .ch-stat { flex: 1; min-width: 0; padding: 12px 10px; }
  .ch-stat-val { font-size: 22px; }

  /* Mega-card no mobile: identidade empilha + mini-cards ocupam linha cheia */
  .conc-mega-header { padding: 16px; }
  .conc-mh-identidade { flex-direction: column; align-items: stretch; gap: 14px; }
  .conc-mh-avatar-bloco { width: 100%; }
  .conc-mh-nome { font-size: 26px; }
  .conc-mh-comparativo-ttl { font-size: 16px; }
  .kpi-vs-row { grid-template-columns: 1fr; }
  .conteudo-top-grid, .com-resumo-grid { grid-template-columns: 1fr; }
  .ads-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  /* Card de anúncio compacto no mobile (2 col estreitas):
     - miolo com menos padding;
     - cabeçalho pode quebrar (badges + status) sem espremer;
     - número-herói (EIA) um pouco menor;
     - MÉTRICAS EMPILHADAS: rótulo em cima, valor embaixo ocupando a largura
       cheia do card — evita o valor da faixa ("R$ 4.000 – R$ 4.500") quebrar
       no meio em 3 linhas. */
  .ad-card-body { padding: 10px; gap: 8px; }
  .ad-card-head { flex-wrap: wrap; }
  .ad-eia { padding: 8px 10px; }
  .ad-eia-val { font-size: 22px; }
  .ad-stats { grid-template-columns: 1fr; gap: 7px; font-size: 10.5px; }
  .ad-stat { display: flex; flex-direction: column; gap: 1px; }
  /* Posts do concorrente no mobile: .post-list e .post-card ja viram
     1 col / layout compacto via regras do componente base. .posts-head
     ja vem empilhado por default (ver regra global). */
}

/* ========================================================================
   Tooltip reusavel — componente .info-tip
   Partial: api/templates/cliente/v2/_partials/info_tooltip.html
   JS:      conectarInfoTooltips() em api/static/v2/dashboard.js
   Usar em qualquer secao do dashboard v2 para explicar metricas/criterios.
   ======================================================================== */
.info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 6px;
}
.info-tip-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg-soft); color: var(--t3);
  border: 1px solid var(--border);
  font-family: var(--fb, sans-serif); font-size: 11px; font-weight: 700; font-style: italic;
  cursor: help; padding: 0;
}
.info-tip-icon:hover, .info-tip-icon:focus-visible {
  background: var(--t1); color: #fff; border-color: var(--t1);
}
.info-tip-bubble {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  min-width: 200px; max-width: 320px;
  background: var(--t1); color: #fff;
  padding: 8px 12px; border-radius: 6px;
  font-size: 12px; line-height: 1.4; font-weight: 400;
  /* NÃO herdar caixa-alta/tracking do rótulo pai (ex.: .kpi-lbl é uppercase). */
  text-transform: none; letter-spacing: normal; font-family: var(--fb); text-align: left;
  /* preserva quebras de linha do texto (\n) p/ tooltips com varias frases;
     tooltips de 1 linha (sem \n) ficam identicos a white-space: normal. */
  white-space: pre-line;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s, visibility .15s;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.info-tip-bubble::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--t1);
}
.info-tip:hover .info-tip-bubble,
.info-tip:focus-within .info-tip-bubble,
.info-tip.is-open .info-tip-bubble {
  opacity: 1; visibility: visible;
}
@media (max-width: 767px) {
  .info-tip-bubble {
    left: auto; right: 0; transform: none;
    max-width: 280px;
  }
  .info-tip-bubble::after { left: auto; right: 12px; transform: none; }
}

/* ============================================================
 * P4d · Reputacao
 * ============================================================ */

/* Topo da Reputacao: Score (col esquerda) + 3 KPIs (col direita), lado a lado.
   Em <980px empilha; KPIs continuam em 3 colunas ate <600px e ai vira 1col. */
.rep-topo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 16px;
  align-items: stretch;
}
.rep-topo-score { margin: 0; }
.rep-topo-kpis {
  /* sobrescreve .kpi-row (que usa repeat(4, 1fr) + margin-bottom: 20px) */
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  align-content: center;  /* centraliza vertical pra casar com a altura do gauge */
}
@media (max-width: 980px) {
  .rep-topo { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .rep-topo-kpis { grid-template-columns: 1fr; }
}

.rep-score {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: center;
  padding: 12px 4px;
}
.rep-gauge {
  width: 200px;
  height: 110px;
  display: block;
}
/* Animacao de entrada do ponteiro: comeca em -90deg (esquerda/verde),
   vai ate o angulo final exposto via --rep-gauge-ang inline. CSS transform
   substitui o SVG attribute quando presente — funciona em browsers modernos.
   900ms da uma sensacao de "medidor calibrando". */
.rep-gauge-needle {
  transform-origin: 100px 100px;
  transform: rotate(var(--rep-gauge-ang, 0deg));
  animation: repGaugeNeedle 900ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes repGaugeNeedle {
  from { transform: rotate(-90deg); }
  to   { transform: rotate(var(--rep-gauge-ang, 0deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .rep-gauge-needle { animation: none; }
}
/* Estado vazio: sem dado nas ultimas 24h. Gauge esmaecido + dessaturado e
   ponteiro fixo no centro (norte) — le como "sem leitura", nao "risco baixo". */
.rep-gauge--vazio {
  opacity: 0.4;
  filter: grayscale(0.65);
}
.rep-gauge--vazio .rep-gauge-needle {
  transform: rotate(0deg);
  animation: none;
}
.rep-score-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

/* Badge da faixa — chip colorido pequeno, em CAIXA-ALTA com tracking */
.rep-score-badge {
  display: inline-block;
  font-family: var(--fb, 'DM Sans'), sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  line-height: 1.2;
}
.rep-score-badge--baixo {
  color: #166534;
  background: rgba(22, 163, 74, 0.12);
}
.rep-score-badge--atencao {
  color: #92400e;
  background: rgba(217, 119, 6, 0.12);
}
.rep-score-badge--critico {
  color: #991b1b;
  background: rgba(194, 5, 23, 0.10);
}
.rep-score-badge--vazio {
  color: var(--t2);
  background: var(--bg-soft);
}

/* Numero + "/100" alinhados pela baseline */
.rep-score-num {
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1;
}
.rep-score-val {
  font-family: var(--fd, 'Barlow Condensed'), sans-serif;
  font-size: 52px;
  line-height: 1;
  font-weight: 800;
}
.rep-score-val--baixo   { color: #16a34a; }
.rep-score-val--atencao { color: #d97706; }
.rep-score-val--critico { color: #c20517; }
.rep-score-val--vazio   { color: var(--t3); }
.rep-score-max {
  font-family: var(--fd, 'Barlow Condensed'), sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--t2, #64748b);
}
.rep-score-frase {
  margin: 0;
  font-family: var(--fb, 'DM Sans'), sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: var(--t2, #64748b);
  max-width: 320px;
}

@media (max-width: 767px) {
  .rep-score {
    grid-template-columns: 1fr;
    gap: 12px;
    justify-items: center;
    text-align: center;
  }
  .rep-score-info { align-items: center; }
  .rep-score-val { font-size: 48px; }
}

/* --- Sentimento por rede (3a) --- */
.rep-rede-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 4px;
}
.rep-rede-row {
  display: grid;
  grid-template-columns: 110px 1fr 56px;
  align-items: center;
  gap: 12px;
}
.rep-rede-bar {
  display: flex;
  height: 10px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-soft, #f1f5f9);
  /* Animacao de entrada: revela a barra da esquerda pra direita via
     clip-path (mantem proporcao interna dos segmentos pos/neu/neg). */
  animation: repRedeBarReveal 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes repRedeBarReveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  .rep-rede-bar { animation: none; }
}
.rep-rede-bar-seg--pos { background: #16a34a; }
.rep-rede-bar-seg--neu { background: #9ca3af; }
.rep-rede-bar-seg--neg { background: #c20517; }
.rep-rede-tot {
  font-family: var(--fm, 'JetBrains Mono'), monospace;
  font-size: 14px;
  text-align: right;
}
/* Cabecalho do bloco "Sentimento por rede": legenda de cores + rotulo "Total" */
.rep-rede-head { padding-bottom: 2px; }
.rep-rede-legenda { display: flex; flex-wrap: wrap; gap: 12px; }
.rep-leg {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--t2);
}
.rep-leg::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.rep-leg--pos::before { background: #16a34a; }
.rep-leg--neu::before { background: #9ca3af; }
.rep-leg--neg::before { background: #c20517; }
.rep-rede-head-tot {
  font-family: var(--fb); font-size: 11px; font-weight: 600; color: var(--t2);
}

/* --- Historico de crises (3b) --- */
.rep-crises-list {
  list-style: none;
  margin: 0;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rep-crises-item {
  display: grid;
  grid-template-columns: 28px 140px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg-soft, #f1f5f9);
}
.rep-crises-item--ataque {
  background: rgba(194, 5, 23, 0.06);
}
.rep-crises-item--negatividade {
  background: rgba(217, 119, 6, 0.06);
}
.rep-crises-icone { font-size: 18px; line-height: 1; }
.rep-crises-ic { width: 16px; height: 16px; }
.rep-crises-hora {
  font-family: var(--fm, 'JetBrains Mono'), monospace;
  font-size: 13px;
}
.rep-crises-vol {
  font-family: var(--fb, 'DM Sans'), sans-serif;
  font-weight: 600;
  font-size: 14px;
}

@media (max-width: 767px) {
  .rep-rede-row { grid-template-columns: 88px 1fr 40px; gap: 8px; }
  .rep-crises-item { grid-template-columns: 24px 110px 1fr; gap: 8px; }
}

/* ============================================================
   Filtros pillshape unificados (G-#1 do spec pre-cutover P5)
   Substitui as 3 familias antigas (.filtro-status*, .filtro-rede*,
   .chart-pill). Desenho: segment control (container com borda
   externa, pills internas sem borda). Pill ativa em --red (#c20517).
   Estado: .is-active. Variante .filtros-seg--sm para gráficos
   compactos da Concorrência.
   ============================================================ */
.filtros-seg {
  display: inline-flex;
  gap: 0;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
/* Quando dentro de um .filtro-grupo (Comentarios/Reputacao/Conc individual),
   o margin-bottom e controlado pelo container, nao pelo segment. */
.filtro-grupo .filtros-seg { margin-bottom: 0; }
/* Quando dentro de .campanha-filtros (Midia paga), tambem; o container
   ja tem margin-bottom proprio de 12px. */
.campanha-filtros .filtros-seg { margin-bottom: 0; }
/* Quando dentro de .posts-head (lista de posts do concorrente / Conteudo),
   o spacing e controlado pelo gap do .posts-head. */
.posts-head .filtros-seg { margin-bottom: 0; }
.filtros-seg-pill {
  background: transparent;
  border: none;
  color: var(--t3);
  font-family: var(--fb);
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.filtros-seg-pill:hover { color: var(--t1); }
/* Estado ativo em grafite neutro (não vermelho): em Comentários/Reputação
   o vermelho significa "negativo/alerta" e brigava com a seleção do filtro
   (uma pill "Positivos" ativa ficava vermelha). Grafite = seleção, vermelho
   reservado a alerta real. */
.filtros-seg-pill.is-active {
  background: var(--t1);
  color: #fff;
  font-weight: 700;
}

/* Variante compacta: usada nos 3 graficos da Concorrencia
   (Posts/dia, Seguidores/dia, Engajamento/dia). Menor font e padding
   pra nao competir visualmente com o canvas do chart abaixo. */
.filtros-seg--sm {
  /* Override do margin global pra respirar do canvas do chart logo abaixo
     sem competir com o titulo do .bloco-head acima. */
  margin-top: 4px;
  margin-bottom: 12px;
}
.filtros-seg--sm .filtros-seg-pill {
  font-size: 11px;
  padding: 3px 10px;
}

/* Mobile: scroll horizontal sem quebrar linha. */
@media (max-width: 767px) {
  .filtros-seg {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .filtros-seg-pill { flex-shrink: 0; }
}

/* === Alvos de toque confortáveis no mobile (WCAG 2.5.5 / 2.5.8) ===
   Sobe a área tocável dos controles compactos sem inchar o visual no
   desktop (só dentro deste breakpoint). */
@media (max-width: 767px) {
  .filtros-seg-pill,
  .chart-toggle-btn,
  .pb-pill {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  .filtros-seg--sm .filtros-seg-pill { min-height: 38px; }
  .btab {
    min-height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .drawer-close,
  .pb-sheet-close,
  .topbar-btn,
  .topbar-burger { min-width: 44px; min-height: 44px; }
  /* "i" e selo de classificação: mantém o visual compacto, amplia só a
     área de toque com um pseudo-elemento transparente. */
  .info-tip-icon,
  .cls-trigger { position: relative; }
  .info-tip-icon::before,
  .cls-trigger::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    min-width: 44px; min-height: 44px;
    width: 100%; height: 100%;
  }
}

/* ============================================================
   Tooltip rico para charts diarios (G-#2 / B.2-#3 / B.6-#3 / B.6-#4)
   Mostra ate ~6 thumbs dos posts publicados no dia/grupo selecionado.
   Um unico div #chartTipRico reusado por todos os charts; posicao
   absoluta em coords da pagina (calculadas via canvas.getBoundingClientRect).
   ============================================================ */
.chart-tip-rico {
  position: absolute;
  z-index: 9999;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  padding: 10px 12px;
  font-family: var(--fb);
  max-width: 280px;
  transition: opacity 0.12s;
}
.chart-tip-rico-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.chart-tip-rico-titulo {
  font-size: 12px;
  font-weight: 700;
  color: var(--t1);
}
.chart-tip-rico-data {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--t3);
}
.chart-tip-rico-valor {
  font-family: var(--fm);
  font-size: 15px;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 8px;
  line-height: 1.2;
}
.chart-tip-rico-unidade {
  font-family: var(--fb);
  font-size: 11px;
  font-weight: 600;
  color: var(--t3);
  margin-left: 4px;
}
.chart-tip-rico-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.chart-tip-rico-thumb {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: var(--r-sm);
  background: var(--bg-soft);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: transform .12s ease, box-shadow .12s ease;
}
a.chart-tip-rico-thumb { cursor: pointer; }
a.chart-tip-rico-thumb:hover { transform: scale(1.04); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.chart-tip-rico-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.chart-tip-rico-thumb-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  font-size: 18px;
  color: var(--t4);
}
.chart-tip-ph-ic { width: 22px; height: 22px; opacity: 0.5; }
.chart-tip-rico-empty {
  font-size: 11px;
  font-style: italic;
  color: var(--t4);
  text-align: center;
  padding: 4px 0 2px;
}

/* ============================================================
   EXPERIMENTAL — Tema escuro na topbar + sidebar (rascunho P5)
   Para reverter: apagar deste bloco ate o fim do arquivo, OU rodar
   `git restore api/static/v2/dashboard.css` no terminal.
   Conteudo principal (cards, charts, KPIs) continua em light mode.
   ============================================================ */
:root {
  --topbar-bg:        #0d0d0d;   /* preto Heavy (--black do Design System) */
  --topbar-fg:        #f3f4f6;   /* texto claro sobre preto */
  --topbar-fg-muted:  #9ca3af;
  --topbar-divider:   #262626;
  --sidebar-bg:       #1a1a1a;   /* grafite escuro */
  --sidebar-bg-elev:  #242424;   /* card "Plano" e hover */
  --sidebar-fg:       #d1d5db;
  --sidebar-fg-muted: #9ca3af;
  --sidebar-border:   #2a2a2a;
}

/* Topbar */
.dash-topbar {
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-divider);
}
.dash-topbar .topbar-logo { color: var(--topbar-fg); }
.dash-topbar .topbar-div  { background: var(--topbar-divider); }
.dash-topbar .topbar-name { color: var(--topbar-fg); }
.dash-topbar .topbar-handle { color: var(--topbar-fg-muted); }
.dash-topbar .topbar-avatar { border-color: var(--topbar-fg); }
.dash-topbar .topbar-avatar--ph {
  background: var(--sidebar-bg-elev);
  color: var(--topbar-fg);
}
.dash-topbar .topbar-btn {
  background: transparent;
  color: var(--topbar-fg);
  border-color: #3a3a3a;
}
.dash-topbar .topbar-btn:hover {
  background: var(--sidebar-bg-elev);
  color: #fff;
}
.dash-topbar .topbar-burger { color: var(--topbar-fg); }

/* Sidebar (desktop) */
.dash-sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
}
.dash-sidebar .sb-plan {
  background: var(--sidebar-bg-elev);
  border-color: var(--sidebar-border);
}
.dash-sidebar .sb-plan-lbl { color: var(--sidebar-fg-muted); }
.dash-sidebar .sb-plan-val { color: var(--topbar-fg); }
.dash-sidebar .sb-group-label { color: var(--sidebar-fg-muted); }
.dash-sidebar .sb-item { color: var(--sidebar-fg); }
.dash-sidebar .sb-item:hover { background: var(--sidebar-bg-elev); }
.dash-sidebar .sb-item.is-active {
  background: rgba(194, 5, 23, 0.18);   /* vermelho Heavy sobre grafite */
  color: #fff;
}
.dash-sidebar .sb-sub { border-left-color: var(--sidebar-border); }
.dash-sidebar .sb-sub-item { color: var(--sidebar-fg-muted); }
.dash-sidebar .sb-sub-item:hover {
  background: var(--sidebar-bg-elev);
  color: var(--topbar-fg);
}
.dash-sidebar .sb-sub-item.is-active {
  color: #fff;
  background: rgba(194, 5, 23, 0.14);
}

/* Drawer mobile (contem o mesmo sidebar.html — segue o tema escuro) */
.drawer {
  background: var(--sidebar-bg);
}
.drawer .drawer-head { border-bottom-color: var(--sidebar-border); }
.drawer .drawer-close { color: var(--topbar-fg); }
.drawer .drawer-head-label { color: var(--sidebar-fg-muted); }
.drawer .sb-plan {
  background: var(--sidebar-bg-elev);
  border-color: var(--sidebar-border);
}
.drawer .sb-plan-lbl { color: var(--sidebar-fg-muted); }
.drawer .sb-plan-val { color: var(--topbar-fg); }
.drawer .sb-group-label { color: var(--sidebar-fg-muted); }
.drawer .sb-item { color: var(--sidebar-fg); }
.drawer .sb-item:hover { background: var(--sidebar-bg-elev); }
.drawer .sb-item.is-active {
  background: rgba(194, 5, 23, 0.18);
  color: #fff;
}
.drawer .sb-sub { border-left-color: var(--sidebar-border); }
.drawer .sb-sub-item { color: var(--sidebar-fg-muted); }
.drawer .sb-sub-item:hover {
  background: var(--sidebar-bg-elev);
  color: var(--topbar-fg);
}
.drawer .sb-sub-item.is-active { color: #fff; }

/* Bottom tabs (mobile) */
.btabs {
  background: var(--topbar-bg);
  border-top: 1px solid var(--sidebar-border);
  box-shadow: 0 -2px 12px rgba(0,0,0,0.4);
}
.btab { color: var(--sidebar-fg-muted); }
.btab.is-active { color: #fff; }

/* ===== Editor de classificacao (admin) ===== */
.cls-editor { position: relative; display: inline-block; }
.cls-trigger {
  cursor: pointer;
  /* Affordance "clique para corrigir" visível em repouso (antes só no hover,
     que não existe no toque) — borda tracejada sutil sempre presente. */
  border: 1px dashed var(--border-strong);
  border-radius: 4px;
  font: inherit;
}
.cls-trigger:hover, .cls-trigger:focus-visible { border-color: currentColor; }
.cls-pen { opacity: 0.75; width: 0.9em; height: 0.9em; vertical-align: -0.12em; }

.cls-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  min-width: 220px;
  max-width: min(260px, calc(100vw - 32px));
  padding: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* hidden precisa vencer o display:flex acima (mesmo padrao de .pb-sheet[hidden]) */
.cls-pop[hidden] { display: none; }
@media (max-width: 767px) {
  .cls-pop { left: auto; right: 0; }
}
.cls-pop-row { display: flex; flex-direction: column; gap: 3px; }
.cls-pop-lbl {
  font-family: var(--fb, sans-serif);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--t3, #777);
}
.cls-pop-row select {
  font: inherit;
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
}
.cls-pop-acoes { display: flex; gap: 8px; justify-content: flex-end; margin-top: 2px; }
.cls-pop-btn {
  cursor: pointer;
  font: inherit;
  padding: 5px 12px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--bg-soft, #f4f4f4);
}
.cls-pop-salvar { background: var(--t1, #0d0d0d); color: #fff; border-color: var(--t1, #0d0d0d); }
.cls-pop-erro { color: var(--negative, #c20517); font-size: 12px; }

/* ========================================================================
   B3 — Clipping de imprensa (cards)
   ======================================================================== */
.clip-grid-titulo {
  font: 700 15px/1.2 var(--fd, inherit);
  color: var(--t1);
  margin: 18px 0 2px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.clip-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin-top: 10px;
}
.clip-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-soft, #f8fafc);
  text-decoration: none;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.clip-card:hover {
  border-color: var(--t3);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.clip-grid--collapsed .clip-card:nth-child(n+19) { display: none; }
.clip-ver-todas {
  margin-top: 12px; width: 100%;
  padding: 10px 14px;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: var(--r-md); color: var(--t2);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.clip-ver-todas:hover { border-color: var(--t3); color: var(--t1); }
.clip-card-sent {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 2px 8px;
  border-radius: 999px;
}
/* Mesmos tokens dos demais chips de sentimento (sent-pill/cat-badge) — um só
   par verde/vermelho em toda a UI, em vez de hex próprios. */
.clip-card-sent--positivo   { color: var(--positive-text); background: rgba(22,163,74,0.12); }
.clip-card-sent--negativo   { color: var(--negative); background: rgba(194,5,23,0.12); }
.clip-card-sent--neutro     { color: var(--t2); background: var(--bg-soft); }
.clip-card-sent--indefinido { color: var(--t2); background: var(--bg-soft); }
.clip-card-titulo {
  color: var(--t1);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clip-card-titulo strong { font-weight: 800; }
.clip-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: auto;
  font-size: 12px;
  color: var(--t3);
}
.clip-card-fonte { font-weight: 600; color: var(--t2); }
.clip-sep { color: var(--t3); }
/* Sub-rotulo do score de risco (Reputacao) */
.rep-score-sub { display: block; margin: -2px 0 10px; }


/* === Stories section (secao_stories.html) — spec 2026-06-23 ===
   Cores via TOKENS do tema (antes eram hex cravados: badges fora dos --net-*,
   cinzas fora de --border, --bg-* e --t*, e .story-date reintroduzia o #9ca3af
   de baixo contraste já abandonado em --t4).
   ATENCAO: um asterisco seguido de barra, em QUALQUER lugar deste comentario,
   o fecha ali — e o lixo que sobra engole a regra seguinte ate achar a proxima
   chave. Foi assim que a .bloco-sub-inline morreu de 24/06 a 15/07: o
   comentario listava tokens no formato "--bg-<asterisco><barra>--t", e "so o IG
   fornece" passou a renderizar 18px/700 igual ao <h2> ao lado. Ao listar tokens
   com curinga aqui, separe-os com virgula. */
.bloco-sub-inline{font-size:12px;color:var(--t3);font-weight:500;margin-left:6px;}
.stories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-top:12px;}
.story-card{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--bg);}
.story-thumb{position:relative;aspect-ratio:9/16;background:linear-gradient(135deg,var(--border),var(--bg-soft));}
.story-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.story-badge{position:absolute;top:8px;left:8px;width:24px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:700;}
.story-badge--instagram{background:var(--net-instagram);} .story-badge--facebook{background:var(--net-facebook);}
.story-body{padding:10px 11px;font-size:12px;}
.story-date{color:var(--t3);font-size:11px;margin-bottom:7px;}
.story-kpis{display:flex;gap:6px;margin-bottom:8px;}
.story-kpis>div{flex:1;text-align:center;background:var(--bg-elev);border-radius:7px;padding:5px 2px;}
.story-k-val{display:block;font-weight:800;font-size:13px;color:var(--t1);}
.story-k-lbl{display:block;font-size:9px;color:var(--t3);text-transform:uppercase;}
.story-meta{display:flex;flex-direction:column;gap:2px;color:var(--t3);}
.story-meta strong{color:var(--t1);font-variant-numeric:tabular-nums;}

/* ============================================================
   Pessoas engajadas (Fase 4) — bloco "Quem mais comenta" na Audiência
   (secao_audiencia_pessoas.html + _pessoas_listas.html + _pessoas_drawer.html).
   JS: conectarPessoasEngajadas() / abrirDrawerPessoa() em dashboard.js.
   ============================================================ */
.pes-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 4px;
}
/* Mesmo ajuste já feito p/ .filtro-grupo/.campanha-filtros/.posts-head:
   dentro de uma linha de filtros compostos o espaçamento é do container,
   não do segment individual (senão os itens desalinham no eixo vertical). */
.pes-filtros .filtros-seg { margin-bottom: 0; }
/* #pesAllTime é um .chart-toggle-btn AVULSO (fora de um .chart-toggle) —
   ganha borda/fundo próprios pra não virar só texto sem afordância de botão. */
.pes-filtros .chart-toggle-btn {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 14px;
}
.pes-filtros .chart-toggle-btn.is-active {
  background: var(--t1);
  color: #fff;
  border-color: var(--t1);
}
/* Filtro de rede: mora no TOPO do fragmento #pessoasListas (refresca por
   fonte). Controla o próprio espaçamento; zera o margin do segment interno. */
.pes-rede-filtro { margin: 4px 0 14px; }
.pes-rede-filtro .filtros-seg { margin-bottom: 0; }

.pes-aviso {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--warning-text);
  margin: 0 0 12px;
}

/* 3 colunas fixas (Mais ativos / Fãs / Críticos) — tablet e mobile empilham
   (mesmo breakpoint combinado usado no .post-list). */
.pes-colunas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1024px) {
  .pes-colunas { grid-template-columns: 1fr; gap: 12px; }
}
.pes-coluna-ttl {
  font-family: var(--fd);
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--t1);
  letter-spacing: 0.2px;
}
/* Fã (verde) / Crítico (vermelho) só fazem sentido em cliente/menção — em
   concorrente (fonte neutra, CLAUDE.md §5 #14) as 3 colunas ficam grafite. */
.pes-colunas:not(.pes-colunas--neutro) .pes-coluna--fas .pes-coluna-ttl { color: var(--positive-text); }
.pes-colunas:not(.pes-colunas--neutro) .pes-coluna--criticos .pes-coluna-ttl { color: var(--negative); }

.pes-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pes-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px;
}
.pes-card-topo { display: flex; gap: 10px; align-items: center; }
.pes-foto {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-soft);
  flex-shrink: 0;
}
.pes-foto--vazia { display: flex; align-items: center; justify-content: center; color: var(--t3); }
.pes-foto-ic { width: 20px; height: 20px; }
.pes-ident { min-width: 0; }
.pes-nome {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  font-size: 13px;
  color: var(--t1);
}
.pes-nome span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pes-nome .ico-rede { flex-shrink: 0; }
.pes-aprox {
  font-size: 10px;
  color: var(--t3);
  background: var(--bg-soft);
  padding: 1px 6px;
  border-radius: 999px;
  white-space: nowrap;
}
.pes-handle { font-size: 12px; color: var(--t3); margin-top: 1px; }
.pes-metricas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11.5px;
  color: var(--t2);
  margin-top: 8px;
}
.pes-total { font-weight: 600; color: var(--t1); }
.pes-alcance { color: var(--t3); }
.pes-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pes-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--fb);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--t1);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 5px 10px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pes-btn:hover { background: var(--bg); border-color: var(--t3); }
.pes-btn--sec { color: var(--t2); font-weight: 500; }
.pes-ic { width: 12px; height: 12px; flex-shrink: 0; }
.pes-vazio { font-size: 12.5px; color: var(--t3); padding: 6px 0; }
/* sanfona "ver mais" — mostra 5 comentaristas e esconde o resto (native <details>) */
.pes-mais { margin-top: 10px; }
.pes-mais > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--t2); list-style: none; padding: 6px 0; user-select: none; }
.pes-mais > summary::-webkit-details-marker { display: none; }
.pes-mais > summary::before { content: "\25be  "; }
.pes-mais[open] > summary::before { content: "\25b4  "; }
.pes-mais > .pes-lista { margin-top: 10px; }

/* Drawer da pessoa (Fase 4) — painel lateral PRÓPRIO (#pessoaDrawer no
   _layout.html), tema CLARO, visível em desktop E mobile. NÃO é o drawer de
   navegação mobile (#drawer, grafite). Recebe o fetch de _pessoas_drawer.html
   em #pessoaDrawerCorpo; o focus-trap é o genérico abrirModal/fecharModal.
   z-index 60/61: acima do header sticky (30), das bottom tabs (50) e do
   conteúdo. O drawer de nav (90/100) e o period sheet (80/81) são maiores mas
   nunca abrem junto com este (1 overlay por vez). */
.pes-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 60; }
.pes-drawer {
  position: fixed; top: 0; right: 0; height: 100%;
  width: min(420px, 92vw);
  background: var(--bg); color: var(--t1); z-index: 61;
  display: flex; flex-direction: column;
  box-shadow: -4px 0 24px rgba(0,0,0,0.18);
}
.pes-drawer[aria-hidden="true"] { display: none; }
.pes-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.pes-drawer-ttl { font-family: var(--fd); font-weight: 600; font-size: 16px; color: var(--t1); }
.pes-drawer-close {
  background: none; border: none; font-size: 18px; line-height: 1;
  cursor: pointer; color: var(--t2); padding: 4px;
}
.pes-drawer-corpo { padding: 12px 16px; overflow-y: auto; flex: 1; }
.pes-drawer-lista { display: flex; flex-direction: column; gap: 10px; }

/* --- Demografia da audiência (Etapa 3 + redesign jul/2026) ---
   Denso e legível: cada FONTE é um cartão; cada recorte, uma micro-seção com
   rótulo em caps. Barra COMPACTA (largura = it.bar, normalizada ao líder do
   recorte no shaping) — glifo de ranking, não faixa que atravessa a tela — com
   a % em MONO como herói e o nº ABSOLUTO ao lado (só IG/FB; ver
   demografia_shape). As colunas são LIMITADAS p/ as linhas curtas não
   esticarem no desktop; mobile vira 1 coluna. */
.demog-cards { display: flex; flex-direction: column; gap: 14px; }
.demog-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px;
  --demog-g1: #2563eb; --demog-g2: #888780; --demog-g3: #c3c2b7; }
.demog-hint { font-size: 12px; color: var(--t2); background: var(--bg-soft); border-radius: var(--r-md); padding: 8px 12px; margin: 0 0 12px; }
/* cabeçalho do cartão (fonte) — separado do conteúdo por um filete */
.demog-src { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.demog-src-t { font-family: var(--fd); font-size: 16px; font-weight: 700; letter-spacing: .3px; color: var(--t1); }
.demog-src .ico-rede { width: 18px; height: 18px; color: var(--t2); flex-shrink: 0; }
.demog-tag { font-size: 10.5px; padding: 2px 8px; border-radius: 20px; background: var(--bg-soft); color: var(--t3); }
.demog-n { margin-left: auto; font-family: var(--fm); color: var(--t1); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.demog-n small { font-family: var(--fb); color: var(--t3); font-size: 11px; font-weight: 400; margin-left: 5px; }
.demog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 468px)); justify-content: start; gap: 10px 40px; }
.demog-rec { min-width: 0; }
.demog-lbl { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--t3); margin: 0 0 8px; }
.demog-lbl--sep { margin-top: 14px; }
/* linha: rótulo · barra compacta · % (herói) · absoluto · delta */
.demog-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.demog-k { flex: 0 0 auto; width: 88px; color: var(--t2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demog-track { flex: 1 1 auto; max-width: 132px; height: 8px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; }
.demog-fill { display: block; height: 100%; background: #2563eb; border-radius: 999px; }
.demog-v { flex: 0 0 auto; min-width: 46px; text-align: right; font-family: var(--fm); font-weight: 600; font-size: 13.5px; color: var(--t1); font-variant-numeric: tabular-nums; }
.demog-abs { flex: 0 0 auto; min-width: 52px; text-align: right; font-family: var(--fm); font-size: 12px; color: var(--t3); font-variant-numeric: tabular-nums; }
/* delta de variação no período — tom NEUTRO (a seta indica direção; §5 #14) */
.demog-dlt { flex: 0 0 auto; font-size: 11px; color: var(--t3); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* gênero em donut (conic-gradient inline + máscara p/ o furo) */
.demog-donut-wrap { display: flex; align-items: center; gap: 16px; }
.demog-donut { width: 84px; height: 84px; border-radius: 50%; flex-shrink: 0;
  -webkit-mask: radial-gradient(circle at center, transparent 54%, #000 55%);
  mask: radial-gradient(circle at center, transparent 54%, #000 55%); }
.demog-leg { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 12px; color: var(--t2); }
.demog-leg li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.demog-leg-k { color: var(--t2); }
.demog-leg-v { font-family: var(--fm); font-weight: 600; color: var(--t1); font-variant-numeric: tabular-nums; }
.demog-leg-abs { font-family: var(--fm); color: var(--t3); font-variant-numeric: tabular-nums; }
.demog-dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
.demog-gen-1 { background: var(--demog-g1); }
.demog-gen-2 { background: var(--demog-g2); }
.demog-gen-3 { background: var(--demog-g3); }
.demog-pais { font-size: 13px; color: var(--t2); line-height: 1.7; margin: 0; }
.demog-pais b { color: var(--t1); }
/* sanfona "ver todas as cidades" (native <details>) */
.demog-mais { margin-top: 8px; }
.demog-mais > summary { cursor: pointer; font-size: 12px; color: var(--t3); font-weight: 600; list-style: none; padding: 6px 0; user-select: none; }
.demog-mais > summary::-webkit-details-marker { display: none; }
.demog-mais > summary::before { content: "\25be  "; }
.demog-mais[open] > summary::before { content: "\25b4  "; }
.demog-mais[open] > summary { margin-bottom: 8px; }
@media (max-width: 640px) {
  .demog-grid { grid-template-columns: 1fr; }
  /* trilha com largura FIXA no mobile: sem o flex-grow, a % e o absoluto ficam
     na mesma coluna quer a linha tenha delta ou não (alinhamento vertical). */
  .demog-row { gap: 6px; }
  .demog-k { width: 78px; }
  .demog-track { flex: 0 0 56px; max-width: 56px; }
}

/* ============================================================
   Midia paga — redesenho Fase 1 (spec §6)
   Vermelho NAO entra aqui: e cor de crise no dashboard do cliente (§5 #14).
   Gastar adiantado e aviso (ambar), nao crise.
   ============================================================ */

/* RITMO DA SECAO — 2 valores, nao 5.
   Media antes: 18/18/20/0/26/0/26/26/28px entre os blocos de topo. Cinco valores
   p/ a mesma funcao, com DUAS colisoes de 0px (B3 encostava no B4; B5 no B6 —
   dois cards borda-com-borda leem como um card so), e o resto tudo a ~26px de
   tudo: espacamento uniforme = zero agrupamento = 9 prioridades iguais. Esse era
   o mecanismo da queixa de "muita informacao concentrada" — o problema nunca foi
   densidade (o dado e pedido), foi nao haver o que dissesse onde olhar.
   Agora: 12px DENTRO do grupo, 32px ENTRE grupos, e os 9 blocos viram 4 grupos
   (veredito / dinheiro / resultado / detalhe) + o glossario.
   As colisoes de 0px somem por consequencia disso, nao por `margin` avulso.
   px cru e o idioma do arquivo (zero tokens de espacamento em ~3900 linhas);
   escala global e decisao de fora, nao de uma task de secao. */
.mp-secao { display: flex; flex-direction: column; gap: 32px; }
.mp-grupo { display: flex; flex-direction: column; gap: 12px; }
/* Quem espaca e o `gap` do grupo: as margens proprias destes se somariam a ele e
   trariam de volta os valores arbitrarios. */
.mp-grupo > .kpi-row,
.mp-grupo > .mp-vazio,
.mp-grupo > .mp-crt-mais,
.mp-grupo .mp-blk-head { margin: 0; }
.mp-secao > .mp-glossario { margin-top: 0; }

/* Cartao DESTA SECAO (blocos 3/5/6) — nao e utilitario global.
   Nao existia um cartao compartilhado no dashboard.css: o .chart-card ja tinha
   este visual, isolado. Prefixado mp-* de proposito: um `.card` solto poria um
   nome curto no vocabulario CSS compartilhado e qualquer template futuro que
   escrevesse class="card X" herdaria este estilo sem querer. Se um dia virar
   utilitario de verdade, isso e decisao a tomar de fora — nao aqui. */
.mp-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 16px;
}

/* A meta do periodo (B1) — logo abaixo do periodo, no page-head. Discreta de
   proposito: contextualiza o resto da aba, nao compete com os KPIs. */
.mp-meta { margin: 6px 0 0; font-size: 13px; color: var(--t2); }
.mp-meta strong { color: var(--t1); font-weight: 600; }

.mp-vazio {
  margin: 0 0 16px; padding: 10px 12px; border-radius: var(--r-lg);
  background: var(--bg-soft); color: var(--t2); font-size: 13px;
}

/* O 26px era o UNICO 26 como spacing em todo o dashboard.css — valor solto fora
   da escala de facto do arquivo. Some: quem espaca agora e o gap do grupo. */
.mp-blk-head { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; }
.mp-blk-ttl {
  display: flex; align-items: center; gap: 8px;
  margin: 0; font-family: var(--fd); font-size: 18px; color: var(--t1);
}
/* Segundo nivel de titulo. Havia UM so (6 h2 identicos em 18px/700 sob um h1 de
   32px), entao "Orçamento de julho" (a resposta) e "Campanhas Google Ads" (a
   conferencia) gritavam igual. --det e o tier do grupo "detalhe": mesmo elemento
   semantico (h2), voz mais baixa. */
.mp-blk-ttl--det { font-size: 15px; font-weight: 600; color: var(--t2); }
.mp-blk-ttl--det .mp-blk-ic { width: 15px; height: 15px; }
.mp-blk-ic { width: 18px; height: 18px; color: var(--t3); }

/* --- B5 resultado por objetivo --- */
.mp-obj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.mp-obj { padding: 14px; }
.mp-obj--heroi { border: 1px solid var(--t1); }
.mp-obj-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.mp-obj-plat { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; color: #fff; }
.mp-obj-plat--meta   { background: var(--net-facebook); }
.mp-obj-plat--google { background: var(--net-google); }
.mp-obj-fam { font-family: var(--fd); font-size: 15px; color: var(--t1); }
.mp-obj-linha { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
.mp-obj-k { color: var(--t2); }
.mp-obj-v { font-family: var(--fm); color: var(--t1); }

/* --- B6 chart --- */
.mp-chart-sub { font-weight: 400; color: var(--t3); }
.mp-chart-leitura { margin: 8px 0 0; font-size: 12px; color: var(--t2); }

/* --- B7 galeria de criativos --- */
.mp-crt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.mp-crt { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--bg); }
/* 3:4 (retrato) por decisao do dono, 15/07/2026. Casa com a arte que a Meta
   entrega: pedimos 810x1080 e ela devolve 640x853, que e 3:4 exato (ver
   collector/meta_ads/creatives.THUMB_LARGURA) — logo o object-fit: cover abaixo
   nao corta nada no caso comum. Trocar so este numero sem trocar o THUMB_ALTURA
   volta a cortar as artes. */
.mp-crt-arte { aspect-ratio: 3 / 4; background: var(--bg-soft); display: flex; align-items: center; justify-content: center; }
.mp-crt-arte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-crt-sem-arte { color: var(--t4); }
.mp-crt-ic { width: 32px; height: 32px; }
.mp-crt-corpo { padding: 10px; }
.mp-crt-ttl { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--t1);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mp-crt-copy { margin: 0 0 8px; font-size: 12px; color: var(--t2); }
.mp-crt-metricas { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--t2); }
.mp-crt-metricas strong { font-family: var(--fm); color: var(--t1); }
.mp-crt-mais { margin-top: 10px; }
.mp-crt-mais > summary { cursor: pointer; font-size: 13px; color: var(--t2); padding: 6px 0; }
.mp-crt-mais[open] > summary { margin-bottom: 10px; }

/* --- B8 tabelas --- */
.mp-tag-obj { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--bg-soft); color: var(--t2); }
.mp-un { font-size: 11px; color: var(--t3); }

/* --- B9 glossario --- */
.mp-glossario { margin-top: 28px; border-top: 1px solid var(--border); padding-top: 12px; }
.mp-glossario > summary { cursor: pointer; font-size: 13px; color: var(--t2); }
.mp-gloss-lista { margin: 12px 0 0; font-size: 13px; }
.mp-gloss-lista dt { font-weight: 600; color: var(--t1); margin-top: 8px; }
.mp-gloss-lista dd { margin: 2px 0 0; color: var(--t2); }

/* ============================================================
   Midia paga — mobile
   O bloco .mp-* inteiro nao tinha NENHUMA media query: nada dele foi pensado
   p/ 375px. Media antes em 375x812: a aba tinha 6.057px = 7,5 TELAS, das quais
   a galeria de criativos sozinha era 3.596px (59%) — e a tabela de campanhas,
   que e o numero que o cliente veio conferir, so comecava na tela 6,8. Ele
   desiste na galeria.
   ============================================================ */
@media (max-width: 767px) {
  /* O ar entre grupos e o que faz a hierarquia — encolhe, mas nao some. */
  .mp-secao { gap: 24px; }

  /* A CAUSA da galeria de 1 coluna: minmax(180px) precisava de 180x2+12 = 372px
     e a largura util aqui e 328px — 44px a menos. O breakpoint era ACIDENTAL:
     ninguem escolheu 1 coluna, o auto-fill e que nao coube. 150px cabe em 2
     (150x2+12 = 312 <= 328) e corta a galeria pela metade. */
  .mp-crt-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .mp-crt-corpo { padding: 8px; }
  .mp-crt-ttl { font-size: 12px; }
  .mp-crt-copy { display: none; }  /* a copy nao cabe em 158px sem virar sopa */

  .mp-card { padding: 14px; }
}