/* Cor das fontes secundárias da Agency: quase-branca no dark, quase-preta no light.
   Sobrescreve var(--muted) só no escopo de #page-agency — Financeiro intocado. */
#page-agency {
  --ag-muted: rgba(255, 255, 255, 0.92);
  /* Tamanho UNIFORME pra textos comuns/secundários da Agency.
     Categoria 'Texto comum' do sistema tipográfico em 3 categorias:
     - Métrica: números grandes (.ag-metric-value 22px) — INTOCADO
     - Nome de algo: regra unificada .ag-label (12px peso 600 #d4d4d4
       uppercase letter-spacing .06em) — vide topo do arquivo
     - Texto comum: ESTA variável (--text-md = 13px)

     Aplicado em: comparações dos cards de métricas, breadcrumb,
     filtros (presets, dropdown cliente, range datas), todos os textos
     das tabelas Top 3 (nome publicação, data, números, Tipo, Duração,
     Ganchos), conclusões finais (texto, +Adicionar, undo toast),
     botão Exportar PDF.

     NÃO se aplica a:
     - Tudo da categoria 'Nome de algo' (vide .ag-label)
     - Números grandes (.ag-metric-value 22px)
     - Legenda do gráfico (.ag-chart-legend 11px)
     - Número decorativo das conclusões (.ag-insight-card-number 28px)
     - Setas dos cards (.ag-metric-arrow 13px — colada ao número)
     - Feedbacks discretos (.ag-postmeta-erro 10px, .ag-sort-indicator
       10px, .ag-insight-card-erro 11px, .ag-top-pos 11px). */
  --text-md: 13px;
}
html.light #page-agency {
  --ag-muted: rgba(0, 0, 0, 0.82);
}

/* (Regra unificada .ag-label foi MOVIDA pro fim do arquivo —
   garantia adicional de especificidade-via-ordem em qualquer empate
   de especificidade contra regras que possam ser adicionadas no
   futuro.) */


/* ════════════════════════════════════════════════════════════════════
   AGENCY — CSS isolado.
   Estrutura:
     .layout (flex row)
       .sidebar  (200px, fixo)
       .main     (flex:1, Financeiro — INTOCADO)
       #page-agency.agency-main (Agency — esta seção)
   Comportamento:
     - Default: Agency oculta (display:none). Financeiro visível.
     - body[data-active-page="agency"]: .main some, Agency aparece.
   Se este arquivo não carregar, Agency permanece oculta e o Financeiro
   funciona normalmente (estado default).
   ════════════════════════════════════════════════════════════════════ */

#page-agency.agency-main {
  display: none;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  background: var(--bg);
  color: var(--fg);
}

body[data-active-page="agency"] .main      { display: none; }
body[data-active-page="agency"] #page-agency.agency-main { display: flex; }

/* ── Container de conteúdo com scroll vertical próprio ─────────────── */
#page-agency .ag-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}
#page-agency .ag-inner {
  max-width: 1400px;
  margin: 0 auto;
}

#page-agency .ag-panel { display: none; }
#page-agency .ag-panel.active { display: block; }

/* ── Filtros sticky no topo da aba Relatórios ───────────────────────── */
#page-agency .ag-filters {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--surface, var(--bar));
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
#page-agency .ag-filter-group { display: flex; align-items: center; gap: 8px; }
/* ── Dropdown de cliente ────────────────────────────────────────────── */
#page-agency .ag-dd-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg);
  font-size: var(--text-md);
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s;
  min-width: 180px;
}
#page-agency .ag-dd-trigger:hover { border-color: var(--secondary); }
#page-agency .ag-dd-trigger svg {
  width: 12px; height: 12px;
  color: var(--ag-muted, var(--muted));
  flex-shrink: 0;
  margin-left: auto;
}
#page-agency .ag-dd-trigger .ag-dd-label {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#page-agency .ag-dd-wrap { position: relative; }
#page-agency .ag-dd-menu {
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 100%; max-height: 300px;
  overflow-y: auto;
  background: var(--surface, var(--bar));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  z-index: 100;
  display: none;
}
#page-agency .ag-dd-wrap.open .ag-dd-menu { display: block; }
#page-agency .ag-dd-item {
  padding: 8px 12px;
  font-size: var(--text-md);
  color: var(--fg);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  display: flex; align-items: center; gap: 8px;
}
#page-agency .ag-dd-item:hover { background: rgba(255,255,255,.05); }
#page-agency .ag-dd-item.active { background: var(--bar); }
#page-agency .ag-dd-sep { height: 1px; background: var(--border); margin: 4px 0; }

#page-agency .ag-cliente-actions {
  margin-left: auto;
  display: inline-flex; gap: 2px;
  visibility: hidden;
}
#page-agency .ag-dd-item:hover .ag-cliente-actions { visibility: visible; }
#page-agency .ag-cliente-actions button {
  background: none; border: none;
  color: var(--ag-muted, var(--muted));
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
}
#page-agency .ag-cliente-actions button:hover { color: var(--fg); }
#page-agency .ag-cliente-actions button.del:hover { color: var(--red, #ef4444); }
#page-agency .ag-cliente-actions svg { width: 12px; height: 12px; }

/* ── Presets de período ─────────────────────────────────────────────── */
#page-agency .ag-presets { display: flex; gap: 4px; flex-wrap: wrap; }
#page-agency .ag-preset {
  height: 30px; padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ag-muted, var(--muted));
  font-size: var(--text-md);
  font-family: inherit;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
#page-agency .ag-preset:hover { color: var(--fg); border-color: var(--secondary); }
#page-agency .ag-preset.active {
  color: var(--fg); background: var(--bar); border-color: var(--bar);
}

#page-agency .ag-custom-range {
  display: none;
  align-items: center; gap: 8px;
  margin-left: 8px;
  padding-left: 12px;
  border-left: 1px solid var(--border);
}
#page-agency .ag-custom-range.visible { display: inline-flex; }
#page-agency .ag-custom-range input[type="date"] {
  height: 30px; padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg);
  font-size: var(--text-md);
  font-family: inherit;
}
#page-agency .ag-custom-range .ag-range-sep { font-size: var(--text-md); color: var(--ag-muted, var(--muted)); }

/* ── Empty state ────────────────────────────────────────────────────── */
#page-agency .ag-empty-state {
  background: var(--surface, var(--bar));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 48px 24px;
  text-align: center;
  color: var(--ag-muted, var(--muted));
  font-size: 14px;
  line-height: 1.6;
}
#page-agency .ag-empty-state .ag-empty-title {
  font-size: 16px; font-weight: 600;
  color: var(--fg);
  margin-bottom: 8px;
}
#page-agency .ag-empty-state .ag-empty-action {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 16px;
  height: 32px; padding: 0 16px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg);
  font-size: var(--text-md);
  font-family: inherit;
  cursor: pointer;
}
#page-agency .ag-empty-state .ag-empty-action:hover { border-color: var(--secondary); }

/* ── Placeholder pras próximas fases ────────────────────────────────── */
#page-agency .ag-placeholder {
  background: var(--surface, var(--bar));
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 32px;
  text-align: center;
  color: var(--ag-muted, var(--muted));
  font-size: var(--text-md);
}

/* ════════════════════════════════════════════════════════════════════
   FASE 4 — Cards de métricas + gráficos
   ════════════════════════════════════════════════════════════════════ */

/* ── Loading / Error state dentro do conteúdo ──────────────────────── */
#page-agency .ag-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 24px;
  color: var(--ag-muted, var(--muted));
  font-size: 13px;
}
#page-agency .ag-loading .ag-spin {
  width: 14px; height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--fg);
  border-radius: 50%;
  animation: ag-spin 0.7s linear infinite;
}
@keyframes ag-spin { to { transform: rotate(360deg); } }

#page-agency .ag-error {
  background: var(--surface, var(--bar));
  border: 1px solid var(--border);
  border-left: 3px solid var(--red, #ef4444);
  border-radius: 10px;
  padding: 16px 20px;
  color: var(--fg);
  font-size: 13px;
  line-height: 1.5;
}
#page-agency .ag-error .ag-error-title {
  font-weight: 600;
  color: var(--red, #ef4444);
  margin-bottom: 4px;
}

/* ── Grid de 8 cards de métricas ────────────────────────────────────── */
#page-agency .ag-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 900px) {
  #page-agency .ag-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

#page-agency .ag-metric-card {
  background: var(--surface, var(--bar));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
#page-agency .ag-metric-label {
  /* Labels uppercase dos cards ('VISUALIZAÇÕES', 'ENGAJAMENTO', etc):
     tipografia (12px, peso 600, color #d4d4d4, uppercase, letter-spacing
     .06em) vem da regra unificada .ag-label no fim do arquivo.
     Sem regra própria aqui — não precisa de layout específico. */
}
#page-agency .ag-metric-value {
  font-size: 22px;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ── Linha do valor (flecha + número grande) ────────────────────── */
#page-agency .ag-metric-value-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
#page-agency .ag-metric-arrow {
  font-size: 13px;        /* 60% de 22px ≈ 13px — seta discreta colada ao número */
  font-weight: 600;
  line-height: 1.2;
  flex-shrink: 0;
  position: relative;
  top: -2px;              /* alinha visualmente com o baseline do número grande */
}
#page-agency .ag-metric-arrow.up   { color: var(--green, #16a34a); }
#page-agency .ag-metric-arrow.down { color: var(--red,   #ef4444); }
#page-agency .ag-metric-arrow.flat { color: var(--ag-muted, var(--muted)); }

#page-agency .ag-metric-compare {
  font-size: var(--text-md);
  color: var(--ag-muted, var(--muted));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Card único de chart (Alcance e visualizações diárias) ──────── */
#page-agency .ag-chart-card {
  background: var(--surface, var(--bar));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#page-agency .ag-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Margin maior agora — antes era 10px, mas a legenda tinha margin:8 12 antes
     e somava 30px total (10 header + 8 legend + 12 legend). Agora a legenda
     está DENTRO do header (sem margin própria) e este margin sozinho dá o
     respiro. 18px equilibra distância entre header e topo do gráfico. */
  margin-bottom: 18px;
}
/* .ag-chart-title: tipografia (12px, peso 600, color #d4d4d4, uppercase,
   letter-spacing .06em) vem da regra unificada .ag-label no fim do
   arquivo. Sem regra própria aqui — não precisa de layout específico. */
#page-agency .ag-chart-canvas-wrap {
  position: relative;
  height: 220px;
}

/* Legenda HTML externa (substitui a built-in do Chart.js). Agora vive
   DENTRO do .ag-chart-header (à direita), sem margin própria — alinhamento
   vertical vem do align-items:center do header pai. */
#page-agency .ag-chart-legend {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  margin: 0;
  font-size: 11px;
  color: var(--ag-muted, var(--muted));
}
#page-agency .ag-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
#page-agency .ag-chart-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}
/* Quadrado branco sólido pra Visualizações */
#page-agency .ag-chart-legend-swatch.sw-vis {
  background: var(--fg);
}
/* Quadrado AZUL SÓLIDO pra Contas alcançadas (era anel vazado antes) */
#page-agency .ag-chart-legend-swatch.sw-alc {
  background: #4a9eff;
}

/* ── Top 3 cards empilhados em coluna única ───────────────────── */
#page-agency .ag-tops-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

/* ── Donut chart de distribuição ────────────────────────────── */
/* Centro absoluto via HTML — fica desabilitado pelo JS (display:none)
   porque usamos plugin Chart.js pra desenhar no canvas. Mantemos a div
   como fallback caso o plugin falhe. */
/* ════════════════════════════════════════════════════════════════════
   FASE 5 — Top 3 publicações
   ════════════════════════════════════════════════════════════════════ */

#page-agency .ag-top-card {
  background: var(--surface, var(--bar));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px 18px;
  /* sem margin-bottom — o gap do .ag-tops-stack (16px) cuida do espaço
     entre os 2 cards de Top 3 empilhados. */
}
/* Regras .ag-top-header, .ag-top-title, .ag-top-subtitle, .ag-top-list
   removidas — eram do título grande que ficava acima de cada tabela
   Top 3, agora substituído pelo header da 1ª coluna ('TOP 3 REELS' /
   'TOP 3 CARROSSÉIS/ESTÁTICOS') via .ag-label. JS já não emite mais
   esses elementos no DOM. */
/* ════════════════════════════════════════════════════════════════════
   Tabela do Top 3 (Reels e Carrosséis) — etapa 2
   <table class="ag-top3-table"> com table-layout: fixed.
   Linha por publicação, sem scroll horizontal em desktop ≥1100px.
   Layout vertical (card) abaixo de 1100px.
   ════════════════════════════════════════════════════════════════════ */

#page-agency .ag-top3-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-top: 8px;
}
#page-agency .ag-top3-table th,
#page-agency .ag-top3-table td {
  text-align: left;
  /* vertical-align: middle — TUDO centralizado verticalmente. Quando uma
     célula da linha tem texto multi-linha (gancho longo), todas as outras
     células ficam centralizadas verticalmente em torno do meio da linha
     (não mais alinhadas no topo). Linha alta + capa/nome/números no
     meio = visual equilibrado. */
  vertical-align: middle;
  /* Padding simétrico horizontal cria respiro entre colunas. */
  padding: 14px 12px;
  box-sizing: border-box;
}
/* Primeira coluna sem padding-left (cola na borda esquerda do card) */
#page-agency .ag-top3-table th:first-child,
#page-agency .ag-top3-table td:first-child { padding-left: 0; }
/* Última sem padding-right */
#page-agency .ag-top3-table th:last-child,
#page-agency .ag-top3-table td:last-child { padding-right: 0; }
/* Headers permanecem alinhados no topo (não muda visualmente — eles têm
   só uma linha de texto), mas garantimos consistência */
#page-agency .ag-top3-table thead th { vertical-align: bottom; }

/* Header: label discreto.
   Tipografia (font-size, font-weight, color, text-transform,
   letter-spacing) vem da regra unificada .ag-label no fim do arquivo. */
#page-agency .ag-top3-table thead th {
  border-bottom: 1px solid var(--border);
  padding-top: 0;
  padding-bottom: 8px;
  white-space: nowrap;
  /* SEM overflow:hidden + text-overflow:ellipsis: causava 'VISUALIZAÇÕES…'
     quando a coluna não tinha largura suficiente. As larguras do <colgroup>
     agora garantem que tudo cabe sem precisar truncar. */
}
/* 1ª coluna (header com 'TOP 3 REELS' ou 'TOP 3 CARROSSÉIS/ESTÁTICOS')
   permite quebrar em 2 linhas em viewports apertados (~1100px desktop
   com sidebar aberta = ~700px úteis × 24% = ~168px, e o texto longo
   'TOP 3 CARROSSÉIS/ESTÁTICOS' ocupa ~195px nesse caso).
   normal-spacing preserva o espaço entre 'TOP', '3', 'CARROSSÉIS/ESTÁTICOS',
   e a tipografia uppercase + .06em garante que mesmo em 2 linhas o
   visual continua coeso com os outros headers. */
#page-agency .ag-top3-table thead th:first-child {
  white-space: normal;
}
/* Centralização das colunas numéricas (Visualizações, Interações, Cards):
   .ag-num agora text-align: center (era right). Visualmente equilibra com
   as outras colunas que já são centralizadas. */
#page-agency .ag-top3-table thead th.ag-num,
#page-agency .ag-top3-table td.ag-num { text-align: center; }
/* O wrapper inline do número também precisa centralizar pro tabular-nums */
#page-agency .ag-top3-table td.ag-num .ag-num-val { display: inline-block; text-align: center; }

/* Linhas: separador sutil, altura confortável */
#page-agency .ag-top3-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
html.light #page-agency .ag-top3-table tbody tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
#page-agency .ag-top3-table tbody tr:last-child { border-bottom: none; }

/* Coluna 1: Publicação (capa + ranking + nome + tipo + data) */
#page-agency .ag-pub-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
#page-agency .ag-pub-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
#page-agency .ag-pub-nome {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--fg);
  line-height: 1.3;
  /* Quebra em até 3 linhas. 4ª linha trunca com … via -webkit-line-clamp.
     Era nowrap + ellipsis (truncava na 1ª linha) — aproveita espaço
     vertical disponível (capa 60px = ~3 linhas de texto a 13px*1.3). */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
#page-agency .ag-pub-meta-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-md);
  color: var(--ag-muted, var(--muted));
}
#page-agency .ag-pub-data { font-variant-numeric: tabular-nums; }

/* Colunas numéricas: alinhamento à direita, font-numeric tabular */

#page-agency .ag-num-val {
  /* Fonte/peso/cor IDÊNTICOS aos outros campos editáveis (.ag-postmeta-value):
     mesmo font-size 12, weight default (~400), cor secundária. Antes era
     13px + weight 600 + cor branca → numéricas ficavam visualmente mais
     pesadas que as outras colunas, quebrando uniformidade visual. */
  font-size: var(--text-md);
  font-weight: 400;
  color: var(--ag-muted, var(--muted));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Células editáveis: ag-td-edit + ag-postmeta-field aplicadas no <td> */
#page-agency .ag-top3-table td.ag-td-edit {
  cursor: pointer;
  position: relative;
  vertical-align: middle;
}
/* Inner da célula editável: aplica padding/border simulando input */
#page-agency .ag-postmeta-cell-inner {
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 5px 8px;
  min-height: 30px;
  display: flex;
  align-items: center;  /* centralizado verticalmente (Fase 4 — alinhamento todo center) */
  transition: background 0.1s, border-color 0.1s;
  /* SEM overflow:hidden — texto pode ter quantas linhas precisar */
}
#page-agency .ag-top3-table td.ag-td-edit:hover .ag-postmeta-cell-inner {
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.03);
}
html.light #page-agency .ag-top3-table td.ag-td-edit:hover .ag-postmeta-cell-inner {
  background: rgba(0, 0, 0, 0.03);
}
/* Estado editing: borda mais clara + fundo destacado, cursor texto */
#page-agency .ag-top3-table td.ag-td-edit.editing { cursor: text; }
#page-agency .ag-top3-table td.ag-td-edit.editing .ag-postmeta-cell-inner {
  border-color: var(--secondary);
  background: rgba(255, 255, 255, 0.05);
}
html.light #page-agency .ag-top3-table td.ag-td-edit.editing .ag-postmeta-cell-inner {
  background: rgba(0, 0, 0, 0.05);
}

/* Valor exibido (não-editing): line-clamp 2, color secundário */
#page-agency .ag-postmeta-value {
  font-size: var(--text-md);
  color: var(--ag-muted, var(--muted));
  line-height: 1.5;
  /* SEM line-clamp — texto exibe inteiro em quantas linhas precisar.
     A linha da tabela cresce naturalmente; vertical-align:top alinha
     todas as outras células no topo. */
  white-space: pre-wrap;       /* preserva \n vindos do textarea */
  word-break: break-word;
  overflow-wrap: break-word;
  width: 100%;
}
/* Coluna Duração: valor mm:ss (ex: 11:20) NUNCA pode quebrar.
   word-break:break-word do bloco genérico acima quebrava no ':' quando
   a coluna ficava apertada (caso típico: PDF capturado em viewport
   1200px com colgroup 7%, coluna ~64px com texto necessitando ~38px).
   Override: nowrap garante que mm:ss fique sempre numa linha; se a
   coluna for menor que o texto, o texto sangra horizontalmente
   (preferível a quebrar verticalmente). A coluna Duração tem 7%
   no colgroup atual, suficiente pra '99:59' em 13px no normal mas
   pode estourar em capturas mais apertadas — ainda assim, melhor
   sangrar invisivelmente que partir um valor de tempo no ':'. */
#page-agency .ag-postmeta-field[data-campo="duracao_video"] .ag-postmeta-value,
#page-agency .ag-postmeta-field[data-campo="duracao_video"] .ag-postmeta-input,
#page-agency .ag-postmeta-field[data-campo="duracao_video"] .ag-postmeta-empty {
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}
#page-agency .ag-postmeta-empty {
  color: var(--ag-muted, var(--muted));
  opacity: 0.5;
}

/* Input editável: parece o display, sem borda própria (a borda é do inner) */
#page-agency .ag-postmeta-input {
  width: 100%;
  font-size: var(--text-md);
  font-family: inherit;
  color: var(--ag-muted, var(--muted));
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  line-height: 1.4;
}
#page-agency .ag-postmeta-erro {
  position: absolute;
  bottom: -14px;
  left: 8px;
  font-size: 10px;
  color: var(--red, #ef4444);
  white-space: nowrap;
}

/* Última célula com link externo: layout flex com link à direita */
#page-agency .ag-postmeta-cell-with-link {
  display: flex;
  align-items: stretch;
  gap: 6px;
  width: 100%;
}
#page-agency .ag-postmeta-cell-with-link .ag-postmeta-cell-inner {
  flex: 1;
  min-width: 0;
}

/* ── Indicador de ordenação no header (↓ na coluna Visualizações) ─────── */
#page-agency .ag-sort-indicator {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  color: var(--ag-muted, var(--muted));
  opacity: 0.7;
}

/* ── Dropdown custom da coluna Tipo (lista fechada de 9 opções) ───────── */
/* Dropdown de Tipo: trigger DISCRETO sem caixa visual em estado normal.
   Visual idêntico aos outros campos editáveis (Duração, Gancho) — só
   texto + chevron pequeno colado. A borda em hover/aberto vem do
   .ag-postmeta-cell-inner ancestral (igual aos outros campos), não
   do trigger em si. */
#page-agency .ag-postmeta-dd {
  position: relative;
  width: 100%;
  min-width: 0;
}
#page-agency .ag-postmeta-dd-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--ag-muted, var(--muted));
  font-size: var(--text-md);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  line-height: 1.4;
  /* SEM height/border/bg próprios — herda visual do .ag-postmeta-cell-inner
     que envolve a célula (com hover e estado aberto destacado via classe
     .dd-open na td) */
}
#page-agency .ag-postmeta-dd-trigger:focus-visible {
  outline: none;  /* outline vem do cell-inner */
}
#page-agency .ag-postmeta-dd-trigger svg {
  width: 10px; height: 10px;
  flex-shrink: 0;
  margin-left: 6px;
  opacity: 0.7;
  transition: transform 0.15s;
}
/* Quando o dd está aberto, td.ag-td-edit ganha class .dd-open
   (setada via JS) e o chevron rotaciona */
#page-agency .ag-top3-table td.ag-td-edit.dd-open .ag-postmeta-dd-trigger svg {
  transform: rotate(180deg);
  opacity: 1;
}
/* Estado aberto: cell-inner com borda destacada (mesmo visual de .editing) */
#page-agency .ag-top3-table td.ag-td-edit.dd-open .ag-postmeta-cell-inner {
  border-color: var(--secondary);
  background: rgba(255, 255, 255, .05);
}
html.light #page-agency .ag-top3-table td.ag-td-edit.dd-open .ag-postmeta-cell-inner {
  background: rgba(0, 0, 0, .05);
}
#page-agency .ag-postmeta-dd-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
#page-agency .ag-postmeta-dd-menu {
  /* position: fixed pra escapar de overflow:hidden do .ag-postmeta-cell-inner.
     Top/left/width são setados inline pelo JS via getBoundingClientRect. */
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  z-index: 1000;
  max-height: 280px;
  overflow-y: auto;
  background: var(--surface, var(--bar));
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  padding: 4px;
}
#page-agency .ag-postmeta-dd.open .ag-postmeta-dd-menu { display: block; }
#page-agency .ag-postmeta-dd-item {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  font-size: var(--text-md);
  color: var(--fg);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
#page-agency .ag-postmeta-dd-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
html.light #page-agency .ag-postmeta-dd-item:hover {
  background: rgba(0, 0, 0, 0.06);
}
#page-agency .ag-postmeta-dd-item.active {
  color: var(--ag-muted, var(--muted));
}
#page-agency .ag-postmeta-dd-item.active::before {
  content: '✓ ';
  margin-right: 4px;
}

/* ── Textarea (Gancho falado/visual): auto-resize + sem borda própria ─── */
#page-agency .ag-postmeta-textarea {
  display: block;
  width: 100%;
  min-height: 18px;
  resize: none;
  overflow-y: hidden;
  font-family: inherit;
  line-height: 1.4;
}

/* ── Input com máscara mm:ss: alinhamento numérico ─────────────────────── */
#page-agency .ag-postmeta-mask {
  font-variant-numeric: tabular-nums;
}

/* Posição: badge metálico estável em ambos os temas */
/* Badge de ranking (1/2/3): NEUTRO — borda fina + número branco + fundo
   transparente. Sem hierarquia de cor entre as 3 posições; a ordem visual
   da tabela já comunica o ranking. */
#page-agency .ag-top-pos {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
}
/* As classes .p1, .p2, .p3 ainda recebidas do JS — sobrescritas como vazias
   pra anular gradientes metálicos antigos. Mantidas pra não quebrar o
   markup (JS continua passando p1/p2/p3 baseado no índice). */
#page-agency .ag-top-pos.p1,
#page-agency .ag-top-pos.p2,
#page-agency .ag-top-pos.p3 {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
}

/* Capa: gradiente CSS estável com 8 paletas */
#page-agency .ag-top-cover {
  /* Proporção 4:5 (1080x1350 do Instagram pra reels e carrosséis).
     Largura 48 / altura 60 = 4:5 exato. */
  width: 48px;
  height: 60px;
  border-radius: 6px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
#page-agency .ag-top-cover::after {
  /* leve overlay pra dar textura sem precisar de imagem */
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.15), transparent 60%);
  pointer-events: none;
}
#page-agency .ag-top-cover.c0 { background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%); }
#page-agency .ag-top-cover.c1 { background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%); }
#page-agency .ag-top-cover.c2 { background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%); }
#page-agency .ag-top-cover.c3 { background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%); }
#page-agency .ag-top-cover.c4 { background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%); }
#page-agency .ag-top-cover.c5 { background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%); }
#page-agency .ag-top-cover.c6 { background: linear-gradient(135deg, #14b8a6 0%, #0ea5e9 100%); }
#page-agency .ag-top-cover.c7 { background: linear-gradient(135deg, #f97316 0%, #f59e0b 100%); }

/* Coluna do meio: legenda + tipo + data */
#page-agency .ag-top-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#page-agency .ag-top-legenda {
  font-size: 13px;
  color: var(--fg);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
#page-agency .ag-top-meta-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--ag-muted, var(--muted));
}

/* Métricas à direita */
#page-agency .ag-top-stat {
  text-align: right;
  min-width: 60px;
}
#page-agency .ag-top-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ag-muted, var(--muted));
  margin-bottom: 2px;
}
#page-agency .ag-top-stat-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

/* Botão "abrir no Instagram" */
#page-agency .ag-top-link {
  width: 30px; height: 30px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ag-muted, var(--muted));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: color .15s, border-color .15s;
}
#page-agency .ag-top-link:hover { color: var(--fg); border-color: var(--secondary); }
#page-agency .ag-top-link svg { width: 14px; height: 14px; }

/* ── Layout vertical abaixo de 1100px ─────────────────────────────
   A tabela vira card vertical: cada <tr> empilhado, cada <td> em linha
   própria com label inline gerada via ::before (do data-label).
   Mantemos a <table> semanticamente (a11y); só muda a apresentação. */
@media (max-width: 1100px) {
  #page-agency .ag-top3-table { table-layout: auto; }
  #page-agency .ag-top3-table thead { display: none; }
  #page-agency .ag-top3-table tbody, 
  #page-agency .ag-top3-table tr,
  #page-agency .ag-top3-table td { display: block; width: auto; }
  #page-agency .ag-top3-table tr {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  html.light #page-agency .ag-top3-table tr {
    border-bottom: 1px solid rgba(0,0,0,0.08);
  }
  #page-agency .ag-top3-table td {
    padding: 4px 0;
    text-align: left;
  }
  #page-agency .ag-top3-table td.ag-num { text-align: left; }
  /* Coluna de Publicação ocupa toda a largura no topo, sem indent */
  #page-agency .ag-top3-table td.ag-pub-cell {
    padding: 0 0 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    margin-bottom: 6px;
  }
  /* Métricas (Views/Interações) em linha lado a lado */
  #page-agency .ag-top3-table tr td:nth-child(2),
  #page-agency .ag-top3-table tr td:nth-child(3) {
    display: inline-block;
    width: 48%;
    vertical-align: top;
  }
  /* Adiciona mini-label antes dos valores numéricos */
  #page-agency .ag-top3-table tr td:nth-child(2)::before {
    content: 'Visualizações';
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ag-muted, var(--muted));
    margin-bottom: 2px;
  }
  #page-agency .ag-top3-table tr td:nth-child(3)::before {
    content: 'Interações';
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ag-muted, var(--muted));
    margin-bottom: 2px;
  }
  /* Células editáveis: cada uma em linha própria com label inline */
  #page-agency .ag-top3-table td.ag-td-edit {
    margin-top: 8px;
  }
  #page-agency .ag-top3-table td.ag-td-edit::before {
    content: attr(data-campo-label);
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ag-muted, var(--muted));
    margin-bottom: 2px;
  }
}

/* Empty state interno do top card (quando não há Reels/Estáticos no período) */
#page-agency .ag-top-empty {
  padding: 16px 0 4px;
  font-size: 12px;
  color: var(--ag-muted, var(--muted));
  text-align: left;
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════════════
   Padrões e Recomendações — caixa externa + cards internos
   ════════════════════════════════════════════════════════════════════ */

/* Section = caixa externa. Reusa .ag-top-card (mesma classe que envolve
   o gráfico e os Top 3) pra visual contínuo na página. Sem regras próprias
   de bg/borda/padding — herda do .ag-top-card. */
#page-agency .ag-insight-section {
  margin-top: 24px;  /* mesmo gap entre seções da página */
}

/* Header da caixa: título+subtítulo à esquerda, botão + Adicionar à direita */
#page-agency .ag-insight-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}
#page-agency .ag-insight-titles {
  /* Wrapper do título — agora só envolve o <h3>, mas mantemos como
     div pra preservar o layout flex do .ag-insight-header (título à
     esquerda, botão '+ Adicionar' à direita via space-between).
     Antes envolvia título + subtítulo "Padrões e recomendações"
     (removido por spec), por isso era flex-column com gap. */
  min-width: 0;
}
#page-agency .ag-insight-titulo {
  /* Tipografia (font-size, font-weight, color, text-transform,
     letter-spacing) vem da regra unificada .ag-label no fim do arquivo.
     Aqui mantemos só layout. Antes era um título grande 16px peso 600
     em var(--fg) — agora entra no padrão "Nome de algo". */
  margin: 0;
}
/* .ag-insight-subtitulo: regra removida — subtítulo "Padrões e
   recomendações" eliminado por spec. Caixa de Conclusões finais agora
   tem só o título + botão "+ Adicionar" no header. */

/* Botão '+ Adicionar' no header — REPLICA visual do .btn-add-custo do
   Financeiro (declarado em index.html linha 246). NÃO toca em
   index.html — copia valores aqui pra Agency ter regras isoladas em
   agency.css. Mantém consistência visual sem dependência cruzada. */
#page-agency .ag-insight-add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  /* border separado em 3 props pra evitar bug de shorthand+var no JSDOM
     (browsers reais aceitam ambos, mas smoke precisa enxergar style) */
  border-width: 1px;
  border-style: dashed;
  border-color: var(--border);
  background: none;
  color: var(--muted);
  font-size: var(--text-md);
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, color .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
#page-agency .ag-insight-add-btn:hover {
  border-color: var(--bar-h);
  color: var(--secondary);
}
#page-agency .ag-insight-add-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* Grid de cards: 3 colunas desktop ≥1100, 2 cols 700-1099, 1 col <700.
   align-items: stretch (default do grid) garante altura uniforme por linha. */
#page-agency .ag-insight-grid {
  display: grid;
  /* 2 colunas em desktop ≥1100px, 1 coluna abaixo. Antes era 3 cols
     mas pra Conclusões finais ficou denso demais — 2 cols dão respiro
     horizontal aos cards e dão espaço pro número decorativo destacado. */
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 1099px) {
  #page-agency .ag-insight-grid { grid-template-columns: 1fr; }
}

/* Estado vazio: mensagem discreta centralizada no espaço onde estariam
   os cards. Sem caixa em volta — só texto secundário. */
#page-agency .ag-insight-empty {
  text-align: center;
  font-size: var(--text-md);
  color: var(--ag-muted, var(--muted));
  padding: 28px 16px;
  opacity: 0.7;
}

/* Card individual: VIDRO SOBRE VIDRO com diferença sutil de opacidade.
   A caixa externa (.ag-top-card) tem bg var(--surface). Cards internos
   ganham bg ligeiramente mais claro pra criar profundidade real. */
#page-agency .ag-insight-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 8px;
  padding: 18px 20px;
  position: relative;
  min-height: 96px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  /* Conteúdo no canto superior esquerdo do card:
     - número decorativo no topo (.ag-insight-card-number)
     - texto logo abaixo, encostado à esquerda
     flex-direction:column empilha; align-items:flex-start +
     justify-content:flex-start puxam o conjunto pro canto sup.esq.
     text-align:left mantém quebras de linha do texto alinhadas à
     esquerda. .ag-insight-card-text tem width:100% próprio pra a
     área clicável cobrir o card todo (independente do flex-start). */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}
html.light #page-agency .ag-insight-card {
  background: rgba(0, 0, 0, .04);
  border: 1px solid rgba(0, 0, 0, .06);
}
#page-agency .ag-insight-card:hover {
  border-color: var(--secondary);
  background: rgba(255, 255, 255, .06);
}
html.light #page-agency .ag-insight-card:hover {
  background: rgba(0, 0, 0, .06);
}

/* Número decorativo no canto superior do card ('01', '02', '03'...).
   Inter (família global) com peso/tamanho diferenciados — fica dentro
   do sistema tipográfico já estabelecido na página. Sem fonte custom
   externa (sem @import). */
#page-agency .ag-insight-card-number {
  /* font-family herda do body (Inter); explicito pra documentar */
  font-family: inherit;
  font-weight: 600;       /* semibold: presença sem competir com conteúdo */
  font-size: 28px;        /* Inter é visualmente mais pesada que Cormorant
                             no mesmo size — 28 ≈ 32 da Cormorant */
  line-height: 1;         /* compacto, sem extra */
  letter-spacing: -0.02em; /* Inter em tamanho grande fica mais elegante com
                              tracking levemente apertado */
  /* Cor IGUAL ao texto do card (.ag-insight-card-text). Mesmo tom, sem
     diferença de opacidade — número e texto formam unidade visual.
     A diferenciação visual vem do tamanho (28px vs 13px) e peso (600 vs 400),
     não da cor. */
  color: var(--ag-muted, var(--muted));
  margin-bottom: 12px;
  /* Não bloquear o click no card pra editar */
  pointer-events: none;
  user-select: none;
  /* Posiciona em bloco no topo, alinhado à esquerda */
  display: block;
  align-self: flex-start;
}


/* No modo edit o número some (não distrai a edição) */
#page-agency .ag-insight-card.editing .ag-insight-card-number {
  display: none;
}

/* Texto do card (modo display).
   Valores espelhados do nome da publicação no Top 3 (.ag-pub-nome) pra
   uniformidade visual: peso visual igual ao do nome de uma publicação.
   - font-size:   var(--text-md) (12px)
   - font-weight: 500
   - color:       var(--fg) (era --ag-muted — texto agora é primário, não secundário)
   - line-height: 1.3 (era 1.55 — apertado pra bater com o nome do Top 3)
   Demais propriedades (white-space, word-break, etc) preservadas. */
#page-agency .ag-insight-card-text {
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1.3;
  color: var(--fg);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  outline: none;
  border-radius: 4px;
  width: 100%;  /* ocupa o card inteiro pra clicável total */
}
#page-agency .ag-insight-card-text:focus-visible {
  box-shadow: 0 0 0 2px var(--secondary);
}

/* Botão X de remover (canto superior direito, aparece em hover) */
#page-agency .ag-insight-card-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--ag-muted, var(--muted));
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, color .15s, background .15s, border-color .15s;
}
#page-agency .ag-insight-card:hover .ag-insight-card-remove {
  opacity: 1;
}
#page-agency .ag-insight-card-remove:hover {
  color: var(--red, #ef4444);
  background: rgba(239, 68, 68, .1);
  border-color: var(--red, #ef4444);
}
#page-agency .ag-insight-card-remove svg {
  width: 12px;
  height: 12px;
}

/* Card em modo edição: borda destacada, textarea ocupa o card */
#page-agency .ag-insight-card.editing {
  border-color: var(--secondary);
  background: rgba(255, 255, 255, .07);
  cursor: text;
  padding: 14px 16px;
}
html.light #page-agency .ag-insight-card.editing {
  background: rgba(0, 0, 0, .07);
}

#page-agency .ag-insight-card-input {
  display: block;
  width: 100%;
  min-height: 64px;
  resize: none;
  overflow-y: hidden;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  outline: none;
  font-family: inherit;
  /* Mesmos 4 valores do .ag-insight-card-text (modo display) — evita
     shift visual ao alternar entre display e edit no mesmo card. */
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1.3;
  color: var(--fg);
  white-space: pre-wrap;
  word-break: break-word;
  text-align: left;  /* horizontal esquerda, centralização vertical via flex do pai */
}
#page-agency .ag-insight-card-input::placeholder {
  color: var(--ag-muted, var(--muted));
  opacity: 0.4;
}
#page-agency .ag-insight-card-erro {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--red, #ef4444);
  min-height: 14px;
}

/* Toast de undo (sem mudança da fase anterior) */
#page-agency .ag-insight-undo-host {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
#page-agency .ag-insight-undo-toast {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: rgba(20, 20, 22, .96);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
  color: var(--fg);
  font-size: var(--text-md);
  pointer-events: auto;
  animation: ag-undo-slide-in .2s ease-out;
}
html.light #page-agency .ag-insight-undo-toast {
  background: rgba(255, 255, 255, .98);
  color: #111;
}
@keyframes ag-undo-slide-in {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);  opacity: 1; }
}
#page-agency .ag-insight-undo-msg {
  color: var(--ag-muted, var(--muted));
}
#page-agency .ag-insight-undo-btn {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--secondary);
  cursor: pointer;
}
#page-agency .ag-insight-undo-btn:hover {
  text-decoration: underline;
}



/* Breadcrumb da Agency: alinha com o tamanho uniforme dos textos
   secundários. O .topbar-crumb global (em index.html) é 13px e é
   compartilhado com o Financeiro — sobrescrevemos APENAS no scope
   #page-agency pra não afetar o Financeiro. */
#page-agency .topbar-crumb {
  font-size: var(--text-md);
}

/* ════════════════════════════════════════════════════════════════════
   FASE EXPORTAR PDF — modo de captura
   Quando body.exporting-pdf, escondemos elementos interativos pro PDF.

   Estratégia atual: captura SEÇÃO POR SEÇÃO (não o #page-agency inteiro).
   As seções capturadas são:
   - .ag-metrics-grid (cards de métricas)
   - .ag-chart-card (gráfico)
   - #ag-top-reels-host (Top 3 Reels)
   - #ag-top-estaticos-host (Top 3 Carrosséis)
   - #ag-notas-host (Conclusões finais)

   Como a topbar (breadcrumb + botão Exportar) e #ag-filters-host
   (presets de período + dropdown cliente) NÃO são capturados, não
   precisam ser escondidos via CSS — ficam de fora por seleção.

   Dentro das seções capturadas, escondemos elementos interativos
   (X remover, + Adicionar, ↗ link externo, chevron de dropdown) e
   transformamos inputs em texto plano.
   ════════════════════════════════════════════════════════════════════ */

/* Esconde elementos interativos dentro das seções capturadas */
body.exporting-pdf .ag-insight-add-btn,
body.exporting-pdf .ag-insight-card-remove,
body.exporting-pdf .ag-top-link,
body.exporting-pdf .ag-postmeta-dd-trigger svg {
  display: none !important;
}

/* Inputs e textareas viram texto plano (sem borda/fundo) — usuário vê
   o valor, sem affordance de "editável". Vazio: o JS já preenche com
   '—' nos placeholders, mas garantimos que campos de input vazios
   também ficam discretos. */
body.exporting-pdf #page-agency input[type="text"],
body.exporting-pdf #page-agency input[type="number"],
body.exporting-pdf #page-agency .ag-postmeta-input,
body.exporting-pdf #page-agency textarea,
body.exporting-pdf #page-agency .ag-insight-card-input {
  border: none !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

/* Trigger do dropdown Tipo: sem o chevron, é só texto. Tira borda e
   padding excessivo pra ficar visualmente igual a uma célula normal. */
body.exporting-pdf #page-agency .ag-postmeta-dd-trigger {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  cursor: default !important;
  pointer-events: none !important;
}

/* Disable hover effects durante exportação — evita destaque visual
   acidental se o cursor estiver em cima de algo durante o screenshot. */
body.exporting-pdf #page-agency *:hover {
  background-color: inherit !important;
  border-color: inherit !important;
}

/* ════════════════════════════════════════════════════════════════════
   Botão "Exportar PDF" no topbar da Agency, à direita do breadcrumb.
   Estilo discreto espelhado em .ag-insight-add-btn ('+ Adicionar' das
   Conclusões finais): borda dashed sutil + ícone + texto, cor secundária.
   ════════════════════════════════════════════════════════════════════ */
#page-agency .ag-export-pdf-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  border-width: 1px;
  border-style: dashed;
  border-color: var(--border);
  background: none;
  color: var(--muted);
  font-size: var(--text-md);
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, color .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
#page-agency .ag-export-pdf-btn:hover {
  border-color: var(--bar-h);
  color: var(--secondary);
}
#page-agency .ag-export-pdf-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* ════════════════════════════════════════════════════════════════════
   .ag-label — SISTEMA TIPOGRÁFICO UNIFICADO "Nome de algo"
   ────────────────────────────────────────────────────────────────────
   POSICIONADO NO FIM DO ARQUIVO INTENCIONALMENTE.
   Razão: garantia de que em qualquer empate de especificidade, esta
   regra ganha por ser declarada por último (cascade order). Ainda que
   não devesse haver empates hoje, isso blinda contra regras futuras
   adicionadas em outros pontos do arquivo.

   Categoria 2 do sistema tipográfico (vide spec):
   - Métrica: números grandes (.ag-metric-value 22px) — não se aplica
   - Nome de algo: ESTA classe (.ag-label) — labels de cards, header
     do gráfico, headers de coluna das tabelas Top 3, headers de seção
     ("TOP 3 REELS", "TOP 3 CARROSSÉIS/ESTÁTICOS", "CONCLUSÕES FINAIS")
   - Texto comum: tudo o resto via var(--text-md)=13px

   Aplicada como classe canônica para uso direto em HTML novo, e como
   "alias" via lista agrupada de seletores existentes — evita renomear
   classes no JS, mantendo nomes semânticos (.ag-metric-label,
   .ag-chart-title, etc).

   font-smoothing: garante que o anti-aliasing é idêntico em todos os
   contextos (fundos diferentes, cards/headers/células de tabela
   produzem renderizações ligeiramente diferentes do mesmo peso 600 em
   alguns sistemas — antialiased força consistência).

   font-family: inherit garante que mesmo se algum container pai (ex:
   <table>) tiver font-family própria, .ag-label puxa a do
   #page-agency (Inter via body/html).
   ════════════════════════════════════════════════════════════════════ */
#page-agency .ag-label,
#page-agency .ag-metric-label,
#page-agency .ag-chart-title,
#page-agency .ag-top3-table thead th,
#page-agency .ag-insight-titulo {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #d4d4d4;
  text-transform: uppercase;
  letter-spacing: .06em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ════════════════════════════════════════════════════════════════════
   FASE META API — Estados vazios "Conta não conectada" e "Sincronizando"
   ────────────────────────────────────────────────────────────────────
   Renderizados em #ag-content-host quando /relatorio retorna 404
   NO_TOKEN ou 503 PENDING_SYNC/PERIODO_NAO_SUPORTADO. Reusam o padrão
   visual de .ag-empty-state (já existente, fundo surface, padding 48
   24, centralizado), com adições:
   - Padding maior (72px vertical) pra não parecer apertado quando é a
     única coisa na tela
   - Título usa .ag-label (sistema tipográfico unificado: 12px peso 600
     #d4d4d4 uppercase letter-spacing .06em — vide bloco no fim do
     arquivo que aplica essa tipografia)
   - Mensagem em texto secundário, 13px, line-height 1.5
   - Botão "Conectar Instagram" / "Atualizar" reusa .ag-empty-action
   ════════════════════════════════════════════════════════════════════ */

#page-agency .ag-empty-state.ag-not-connected,
#page-agency .ag-empty-state.ag-pending-sync {
  padding: 72px 24px;
}

#page-agency .ag-not-connected-titulo {
  margin-bottom: 6px;
}

#page-agency .ag-not-connected-msg {
  font-size: var(--text-md);
  color: var(--ag-muted, var(--muted));
  line-height: 1.5;
  max-width: 420px;
  margin: 0 auto;
}

/* Spinner do estado pending-sync usa as mesmas classes do .ag-spin
   global. Aqui só ajusta tamanho via inline style do JS (24x24). A
   classe .ag-pending-spin é só pra hooks futuros (ex: testes
   automatizados procurando por esse seletor) — não tem regra própria. */