/* shell.css — casca da v2: barra lateral fixa + conteúdo em tela cheia,
   na linguagem visual aprovada no mockup (cartão por plataforma, faixa de
   KPIs com divisores em vez de cartões soltos, rótulo de seção com régua).
   Carregado DEPOIS de layout/components, então sobrescreve o que era
   desenhado pra header horizontal — os componentes internos (tabela,
   gráfico, mapa de mídia, bullets) continuam os mesmos. */

:root {
  --rail-w: 268px;
  --rail-bg: rgba(10, 10, 10, 0.72);
  --warn: #f2b705;
}
[data-theme="light"] {
  --rail-bg: rgba(255, 255, 255, 0.78);
}

body.v2 { padding-left: var(--rail-w); }

/* ═══════════════════ BARRA LATERAL ═══════════════════ */
.rail {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--rail-w);
  height: 100vh;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: var(--rail-bg);
  border-right: 1px solid var(--glass-border);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}

.rail-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.25rem 1.15rem 1rem;
  flex-shrink: 0;
}
.rail-logo { height: 30px; width: auto; object-fit: contain; display: block; }
.rail-version {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(26, 107, 255, 0.14);
  border: 1px solid rgba(26, 107, 255, 0.3);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
}

/* Só o miolo rola — marca e rodapé ficam ancorados. */
.rail-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}
.rail-scroll::-webkit-scrollbar { width: 8px; }
.rail-scroll::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 999px; }
.rail-scroll::-webkit-scrollbar-track { background: transparent; }

.rail-block { display: flex; flex-direction: column; gap: 0.5rem; }
.rail-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  padding-left: 0.2rem;
}

.rail-footer {
  flex-shrink: 0;
  display: flex;
  gap: 0.5rem;
  padding: 0.85rem 1.15rem 1.1rem;
  border-top: 1px solid var(--glass-border);
}
.rail-footer .theme-toggle,
.rail-footer .logout-btn { flex: 1; height: 34px; font-size: 0.8rem; padding: 0 0.6rem; }

/* Seletor de cliente na lateral */
.rail .client-picker-trigger { width: 100%; }
.rail .client-picker-name {
  flex: 1; min-width: 0; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 0.88rem;
}
/* Abre no fluxo (empurra o resto) em vez de flutuar — num painel estreito
   um popover absoluto de 240px vazaria pra fora da lateral. */
.rail .client-picker-menu {
  position: static; min-width: 0; width: 100%;
  max-height: 260px; margin-top: 0.4rem; box-shadow: none;
}

.period-box {
  display: flex; flex-direction: column; gap: 0.55rem; padding: 0.75rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-glass);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.period-box .preset-select { width: 100%; }
.period-box .date-inputs { gap: 0.35rem; }
.period-box .date-inputs input[type="date"] { flex: 1; min-width: 0; padding: 0.35rem 0.4rem; font-size: 0.78rem; }
.period-box .date-inputs span { font-size: 0.75rem; flex-shrink: 0; }
.period-note { font-size: 0.68rem; color: var(--muted); line-height: 1.35; }

/* Menu: os 3 painéis sempre visíveis, cada um com suas seções listadas
   abaixo. O cabeçalho troca de painel; os itens rolam até a seção. */
.rail .site-nav {
  display: flex; flex-direction: column; gap: 0.9rem;
  overflow-x: visible; padding: 0;
}
.nav-group { display: flex; flex-direction: column; gap: 0.2rem; }

.rail .nav-group-head {
  width: 100%; text-align: left;
  padding: 0.5rem 0.75rem;
  background: none;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  color: var(--muted);
  font-family: var(--font); font-size: 0.82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  cursor: pointer;
}
.rail .nav-group-head:hover { color: var(--paper); border-color: var(--blue); }
.rail .nav-group-head.active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* Recuo + fio vertical: mostram que os itens pertencem ao painel acima,
   sem precisar de outro rótulo. */
.nav-group-items {
  display: flex; flex-direction: column; gap: 0.1rem;
  margin: 0.15rem 0 0 0.7rem;
  padding-left: 0.55rem;
  border-left: 1px solid var(--glass-border);
}
.rail .site-nav a {
  padding: 0.42rem 0.6rem;
  border-left: 2px solid transparent;
  border-radius: var(--radius-md);
  font-size: 0.78rem;
}
.rail .site-nav a.active {
  background: rgba(26, 107, 255, 0.13);
  border-left-color: var(--blue);
}

/* Selo de estado ao lado da seção no menu (ex: nº de alertas) — a cor é
   semântica, não decorativa. */
.nav-badge {
  margin-left: auto;
  font-size: 0.64rem; font-weight: 700;
  padding: 0.08rem 0.4rem; border-radius: 999px;
  text-transform: none; letter-spacing: 0;
}
.nav-badge.crit { background: rgba(230, 50, 50, 0.16); color: var(--red); }
.nav-badge.warn { background: rgba(242, 183, 5, 0.16); color: var(--warn); }

/* ═══════════════════ CONTEÚDO ═══════════════════ */
.app-main { min-height: 100vh; }
.app-main-inner { max-width: 1380px; margin: 0 auto; padding: 1.8rem 2.25rem 1rem; }

/* Cabeçalho da página: quem e qual período — o mockup abre assim, e sem
   isso o período só existiria na lateral. */
.page-head { margin-bottom: 1.8rem; }
.page-head h1 { font-size: 1.5rem; letter-spacing: -0.01em; text-wrap: balance; }
.page-head .page-sub { color: var(--muted); font-size: 0.82rem; margin-top: 0.2rem; }

/* Rótulo de seção com régua — separa blocos sem pesar como um título. */
.section-label {
  display: flex; align-items: center; gap: 0.7rem;
  font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--muted);
  margin-bottom: 0.85rem;
}
.section-label::after { content: ""; flex: 1; height: 1px; background: var(--glass-border); }

body.v2 .section {
  padding: 0; border-bottom: none;
  scroll-margin-top: 1.5rem; margin-bottom: 2.5rem;
}
body.v2 .section-inner { max-width: none; }

/* ── Cartão de plataforma ────────────────────────────────────────────
   O conteúdo da plataforma inteira vive dentro de um cartão só (era um
   cartão de vidro por KPI, soltos sobre o fundo). */
body.v2 .section > .section-inner {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-glass);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
  padding: 0 1.35rem 1.35rem;
  overflow: hidden;
}
body.v2 .section-title {
  font-size: 1.05rem;
  margin: 0 -1.35rem 0;
  padding: 1.1rem 1.35rem;
  border-bottom: 1px solid var(--glass-border);
}

/* Faixa de KPIs: divisores verticais em vez de cartões independentes. */
body.v2 .kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 0;
  margin: 0 -1.35rem 1.25rem;
  padding: 0.4rem 1.35rem 0;
  border-bottom: 1px solid var(--glass-border);
}
body.v2 .kpi-card {
  background: none; border: none; border-radius: 0;
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 0.9rem 0.95rem 1.1rem;
  border-left: 1px solid var(--glass-border);
}
body.v2 .kpi-card:hover { background: none; }
body.v2 .kpi-lbl { font-size: 0.72rem; margin-bottom: 0.3rem; }
body.v2 .kpi-val { font-size: 1.25rem; margin-bottom: 0.2rem; }
body.v2 .delta { font-size: 0.7rem; }
body.v2 .delta-prev { font-size: 0.66rem; }

/* Dentro do cartão, tabela e gráfico já estão sobre vidro — o próprio
   vidro deles viraria vidro sobre vidro. */
body.v2 .section .chart-card,
body.v2 .campaign-block .data-table-wrap,
body.v2 .campaign-block .media-map-wrap,
body.v2 .section > .section-inner > div > .data-table-wrap {
  background: transparent; border-color: var(--glass-border);
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.v2 .section .chart-card { padding: 1rem 0.25rem 0.5rem; }
body.v2 .subsection-title {
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin: 1.6rem 0 0.8rem;
}

.app-footer {
  color: var(--muted); font-size: 0.78rem; text-align: center;
  padding: 2rem 0 3rem; border-top: 1px solid var(--glass-border);
}

/* ═══════════════════ VISÃO GERAL ═══════════════════ */
/* 4 cartões fixos numa linha (pedido do usuário, 2026-08-04) — número de
   colunas explícito, não auto-fit: com auto-fit a quebra mudava conforme
   a largura do monitor e o mesmo painel parecia diferente em cada tela.
   O conjunto de cartões também é fixo (ver overview.js), então 4 colunas
   sempre preenchem exatamente uma linha. */
.overview-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0.9rem; margin-bottom: 2.5rem;
}
/* Ao estreitar vira 2x2 (pedido do usuário) — 4 cartões numa linha só
   espremem o valor, que é justamente o que se lê primeiro. Só abaixo de
   ~620px (celular) é que 2 colunas deixariam de caber e vira lista. */
@media (max-width: 1200px) {
  .overview-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .overview-grid { grid-template-columns: 1fr; }
}
.ov-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-glass);
  padding: 1.1rem 1.2rem;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
}
.ov-card .ov-lbl { font-size: 0.76rem; color: var(--muted); margin-bottom: 0.45rem; }
.ov-card .ov-val { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; }
.ov-card .ov-sub { font-size: 0.74rem; color: var(--muted); margin-top: 0.35rem; line-height: 1.45; }

/* ═══════════════════ SAÚDE DA CONTA (Health Score) ═══════════════════ */
.hs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0.9rem; margin-bottom: 2.5rem; }
.hs-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-glass);
  padding: 1.1rem 1.2rem;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
}
/* Recolhido por padrão: o cartão fecha na altura do cabeçalho (nota +
   resumo) e abre no clique — a auditoria inteira aberta empurrava as
   seções de plataforma pra muito longe do topo. */
.hs-card { padding: 0; }
.hs-head {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 1.1rem 1.2rem;
  cursor: pointer; list-style: none;
  border-radius: var(--radius-glass);
}
.hs-head::-webkit-details-marker { display: none; }
.hs-head:hover { background: var(--glass-bg-hover); }
.hs-head:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.hs-head-body { min-width: 0; }
.hs-toggle {
  margin-left: auto; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--glass-border); color: var(--muted);
  transition: transform 0.18s ease;
}
.hs-card[open] .hs-toggle { transform: rotate(180deg); }
.hs-head:hover .hs-toggle { color: var(--paper); border-color: var(--blue); }
.hs-body { padding: 0 1.2rem 1.1rem; }
.hs-grade {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 62px; height: 62px; flex-shrink: 0;
  border-radius: 14px; border: 1px solid currentColor;
}
.hs-letter { font-size: 1.5rem; font-weight: 700; line-height: 1; }
.hs-score { font-size: 0.66rem; font-weight: 700; opacity: 0.75; margin-top: 0.1rem; }
.hs-nota-boa { color: var(--green); background: rgba(87, 196, 13, 0.12); }
.hs-nota-media { color: var(--warn); background: rgba(242, 183, 5, 0.12); }
.hs-nota-ruim { color: var(--red); background: rgba(230, 50, 50, 0.12); }
.hs-plataforma { font-weight: 700; font-size: 1rem; }
.hs-resumo { font-size: 0.76rem; color: var(--muted); margin-top: 0.15rem; }

.hs-cobertura {
  font-size: 0.73rem; color: var(--muted); line-height: 1.5;
  border-left: 2px solid var(--warn);
  padding: 0.45rem 0 0.45rem 0.7rem;
  margin-bottom: 0.9rem;
}
.hs-cobertura b { color: var(--paper); }
/* "Não se aplica" não é alerta — é informação. Barra neutra pra não
   competir com o amarelo do "não avaliado", que é dívida técnica nossa. */
.hs-cobertura-neutra { border-left-color: var(--glass-border); }

.hs-checks { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
.hs-check { display: flex; gap: 0.6rem; align-items: flex-start; }
/* Emoji em vez de forma geométrica (pedido do usuário) — já carrega a
   cor, então o ícone não depende mais de currentColor. */
.hs-check-icon { flex-shrink: 0; font-size: 0.9rem; line-height: 1.5; }
.hs-check-body { min-width: 0; }
.hs-check-title { font-weight: 700; line-height: 1.45; font-size: 0.92rem; }
.hs-check-tag {
  font-weight: 400; font-size: 0.7rem; color: var(--muted);
  margin-left: 0.4rem; white-space: nowrap;
}
.hs-check-detail { color: var(--muted); font-size: 0.82rem; line-height: 1.5; margin-top: 0.15rem; }

/* Estado também em texto, não só na cor — leitor de tela e daltonismo. */
.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;
}

/* ═══════════════════ FUNIL DO RD STATION ═══════════════════ */
.funnel-steps { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 0.5rem; }
.fstep { display: flex; align-items: center; gap: 0.75rem; }
.fstep .fname { width: 110px; flex-shrink: 0; font-size: 0.8rem; color: var(--muted); }
.fstep .fbar-wrap {
  flex: 1; height: 26px; border-radius: 7px; overflow: hidden;
  background: var(--glass-bg-hover); border: 1px solid var(--glass-border);
}
.fstep .fbar {
  height: 100%; min-width: 2px;
  background: linear-gradient(90deg, var(--rd), #7fe4ff);
  transition: width 0.4s ease;
}
.fstep .fnum { width: 44px; text-align: right; font-weight: 700; font-size: 0.9rem; flex-shrink: 0; }

/* ═══════════════════ PARCELA DE IMPRESSÕES ═══════════════════ */
.is-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.9rem; margin-bottom: 0.5rem; }
.is-card { border: 1px solid var(--glass-border); border-radius: var(--radius-glass); padding: 0.95rem 1.05rem; }
.is-card .is-name { font-weight: 700; font-size: 0.88rem; margin-bottom: 0.7rem; }
/* Barra empilhada: obtida + perdida por orçamento + perdida por rank
   somam ~100% do leilão elegível — a leitura é "onde foi parar o resto". */
.is-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--glass-bg-hover); }
.is-bar i { display: block; height: 100%; }
.is-bar .seg-got { background: var(--blue); }
.is-bar .seg-budget { background: var(--warn); }
.is-bar .seg-rank { background: rgba(255, 255, 255, 0.22); }
[data-theme="light"] .is-bar .seg-rank { background: rgba(10, 10, 10, 0.22); }
.is-legend { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.7rem; font-size: 0.72rem; color: var(--muted); }
.is-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.is-legend i { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.is-legend b { color: var(--paper); font-weight: 700; }

/* ═══════════════════ QUALITY SCORE ═══════════════════ */
/* Faixas do Google: 8-10 bom, 5-7 médio, 1-4 ruim. Cor semântica. */
.qs-flag {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; padding: 0.1rem 0.35rem;
  border-radius: 6px; font-weight: 700; font-size: 0.78rem;
}
.qs-good { color: var(--green); background: rgba(87, 196, 13, 0.16); }
.qs-mid { color: var(--warn); background: rgba(242, 183, 5, 0.16); }
.qs-bad { color: var(--red); background: rgba(230, 50, 50, 0.16); }

/* Saturação de público (Frequência) — limiares de benchmarks-br.md. */
.freq-flag { font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 6px; cursor: help; }
.freq-warn { color: var(--warn); background: rgba(242, 183, 5, 0.16); }
.freq-crit { color: var(--red); background: rgba(230, 50, 50, 0.16); }

/* ═══════════════════ BLOCO DE CAMPANHA (Meta Ads) ═══════════════════ */
.campaign-block {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-glass);
  padding: 0.95rem 1.05rem 0.35rem;
  margin-bottom: 1rem;
}
.campaign-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.campaign-name { font-weight: 700; font-size: 0.95rem; }
.campaign-objetivo {
  font-size: 0.64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted);
  border: 1px solid var(--glass-border);
  border-radius: 999px; padding: 0.15rem 0.55rem;
}
.campaign-meta { margin-left: auto; font-size: 0.75rem; color: var(--muted); }
.campaign-block .data-table-wrap,
.campaign-block .media-map-wrap { margin-bottom: 0.7rem; }

/* O mapa precisa de folga lateral própria: sem ela o conteúdo encostava
   nas duas bordas do bloco e parecia cortado. E precisa rolar quando os
   dias não couberem (períodos longos) em vez de espremer as células —
   por isso min-width: min-content aqui e ausência de min-width:0 nas
   linhas, que era o que permitia o encolhimento infinito. */
.campaign-block .media-map-wrap { overflow-x: auto; }
.campaign-block .media-map { padding: 0.35rem 0.5rem 0.6rem; min-width: min-content; }
.campaign-block .media-map-days { min-width: auto; }
.campaign-block .media-map-adname { width: 168px; }

.campaign-block .media-map-wrap::-webkit-scrollbar { height: 8px; }
.campaign-block .media-map-wrap::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 999px; }
.campaign-block .media-map-wrap::-webkit-scrollbar-track { background: transparent; }

/* ═══════════════════ MENU EM TELAS ESTREITAS ═══════════════════ */
.rail-toggle {
  display: none;
  position: fixed; top: 0.85rem; left: 0.85rem; z-index: 300;
  background: var(--card-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  color: var(--paper); cursor: pointer; padding: 0.45rem 0.6rem;
}

@media (max-width: 1000px) {
  body.v2 { padding-left: 0; }
  .rail-toggle { display: flex; align-items: center; justify-content: center; }
  .rail { transform: translateX(-100%); transition: transform 0.22s ease; box-shadow: var(--glass-shadow); }
  .rail.open { transform: translateX(0); }
  .app-main-inner { padding: 4rem 1.1rem 1rem; }
  body.v2 .section > .section-inner { padding: 0 1rem 1rem; }
  body.v2 .section-title { margin: 0 -1rem 0; padding: 1rem; }
  body.v2 .kpi-grid { margin: 0 -1rem 1.25rem; padding: 0.4rem 1rem 0; grid-template-columns: repeat(2, 1fr); }
  .rail .site-nav { display: flex !important; }
}

@media (prefers-reduced-motion: reduce) {
  .rail, .fstep .fbar { transition: none; }
  html { scroll-behavior: auto; }
}

/* ═══════════════════ POP-UP DO QUALITY SCORE ═══════════════════ */
/* Vive no <body> (ver bindQsPopovers) porque .data-table-wrap recorta. */
.qs-has-pop { cursor: help; }
.qs-pop {
  position: fixed;
  z-index: 200;
  max-width: 280px;
  padding: 0.7rem 0.85rem;
  background: var(--card-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: var(--glass-shadow);
  font-size: 0.76rem;
  line-height: 1.45;
  pointer-events: none;  /* o balão nunca rouba o hover da própria célula */
}
.qs-pop-title { font-weight: 700; margin-bottom: 0.5rem; font-size: 0.82rem; }
.qs-pop-row { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.35rem; }
.qs-pop-row span { color: var(--muted); }
.qs-pop-row b { white-space: nowrap; font-weight: 700; }
.qs-above { color: var(--green); }
.qs-avg   { color: var(--muted); }
.qs-below { color: var(--red); }

.ga4-unset { color: var(--muted); cursor: help; font-style: italic; }

/* ═══════════════════ FILTROS EM CHIP (mês / etapa do funil) ═══════════ */
.subsection-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.month-filter, .stage-filter { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.stage-filter { margin-bottom: 0.9rem; }
.month-chip, .stage-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.32rem 0.7rem;
  font-family: var(--font);
  font-size: 0.76rem;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.month-chip:hover, .stage-chip:hover { color: var(--paper); border-color: var(--blue); }
.month-chip.active, .stage-chip.active {
  color: var(--blue);
  border-color: var(--blue);
  background: rgba(26, 107, 255, 0.12);
  font-weight: 700;
}
.stage-chip-count {
  font-size: 0.68rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}

/* Variação vs. período anterior no Panorama — o .delta já tem cor/peso;
   aqui só o espaçamento entre o número grande e o rodapé do cartão. */
.ov-delta { margin-top: 0.3rem; }

/* ═══════════════ ORGÂNICO × PAGO (faixa por seção) ═══════════════ */
/* Pedido do usuário (2026-08-05): saber quanto de cada número do painel
   Orgânico é orgânico de verdade. O teto do que dá pra separar muda por
   plataforma — por isso a faixa vem sempre acompanhada da nota. */
.split-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-glass);
  padding: 1rem 1.15rem;
  margin-bottom: 1rem;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.split-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.split-title { font-size: 0.8rem; color: var(--muted); }
.split-nums { font-size: 0.82rem; color: var(--muted); }
.split-org { color: var(--chart-green); font-weight: 700; }
.split-pago { color: var(--chart-red); font-weight: 700; }
.split-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--glass-bg); }
.split-bar i { display: block; height: 100%; }
.seg-org { background: var(--chart-green); }
.seg-pago { background: var(--chart-red); }
.split-legend { display: flex; gap: 1.1rem; margin-top: 0.55rem; font-size: 0.72rem; color: var(--muted); }
.split-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.split-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.split-nota, .split-aviso {
  font-size: 0.73rem;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 0.6rem;
}
.split-aviso {
  border-left: 2px solid var(--glass-border);
  padding: 0.15rem 0 0.15rem 0.7rem;
  margin: 0 0 1rem;
}
.split-aviso b, .split-nota b { color: var(--paper); font-weight: 700; }