/* =====================================================================
   AG · Painel — casca, navegacao e paginas.
   Tokens vem de theme.css. Nenhuma cor literal nova aqui, exceto
   transparencias derivadas dos proprios tokens.

   Regra estrutural: a PAGINA nunca rola na horizontal. Tabela larga
   rola dentro do proprio conteiner.
   ===================================================================== */

html, body { max-width: 100%; overflow-x: hidden; }
body { min-height: 100vh; }

/* --- carga inicial -------------------------------------------------- */
.boot {
  min-height: 100vh; display: grid; place-content: center; gap: var(--e-3);
  justify-items: center; background: var(--fundo);
}
.boot-marca { font-weight: 700; letter-spacing: .04em; color: var(--texto-suave); }

/* =====================================================================
   LOGIN
   ===================================================================== */
.login-tela { min-height: 100vh; display: grid; place-items: center; padding: var(--e-4); }
.login-caixa {
  width: min(420px, 100%);
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--r-3); padding: var(--e-5); box-shadow: var(--sombra);
}
.login-marca { font-size: var(--t-titulo); font-weight: var(--peso-forte); letter-spacing: -0.7px; }
.login-sub { color: var(--texto-suave); font-size: var(--t-peq); margin: var(--e-2) 0 var(--e-5); }
.login-form { display: grid; gap: var(--e-2); }
.login-form label {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-fraco); margin-top: var(--e-2);
}
.login-rodape {
  margin-top: var(--e-5); padding-top: var(--e-4); border-top: 1px solid var(--borda);
  font-size: var(--t-micro); color: var(--texto-fraco);
}
.login-rodape p { margin: 0 0 var(--e-2); }
.login-msg:empty { display: none; }
.login-msg { margin-top: var(--e-3); }

/* --- formulario ----------------------------------------------------- */
input[type="email"], input[type="password"], input[type="search"] {
  width: 100%; padding: var(--e-2) var(--e-3);
  background: var(--fundo); color: var(--texto);
  border: 1px solid var(--borda-forte); border-radius: var(--r-1);
  font: var(--t-base)/1.4 var(--fonte);
}
input:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--ag-ciano); outline-offset: 2px;
}

.btn {
  padding: var(--e-2) var(--e-4); border-radius: var(--r-1);
  border: 1px solid var(--borda-forte); background: var(--superficie-alta);
  color: var(--texto); font: var(--peso-forte) var(--t-base)/1.4 var(--fonte); cursor: pointer;
}
.btn-primario {
  background: var(--ag-laranja); border-color: var(--ag-laranja); color: #fff;
  margin-top: var(--e-3);
}
.btn-primario:disabled { opacity: .6; cursor: progress; }
.btn-linha {
  background: none; border: none; color: var(--ag-ciano); cursor: pointer;
  font: var(--t-peq)/1.4 var(--fonte); padding: var(--e-1) 0; text-align: left;
}
.btn-linha:hover { text-decoration: underline; }
.btn-icone {
  background: none; border: 1px solid var(--borda); color: var(--texto-suave);
  border-radius: var(--r-1); padding: 3px var(--e-2); cursor: pointer;
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .05em;
}
.btn-icone:hover { color: var(--texto); border-color: var(--borda-forte); }

/* Icones da casca -- DESIGN_V6_EXTRAIDO.md §16. currentcolor resolve
   os dois temas sozinho: o icone so herda a cor do link/botao que o
   envolve, nunca declara cor propria. */
.icon {
  width: 19px; height: 19px; display: inline-block; vertical-align: middle;
  flex-shrink: 0; stroke: currentcolor; fill: none;
  stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round;
}

/* =====================================================================
   CASCA
   ===================================================================== */
.app { min-height: 100vh; display: flex; flex-direction: column; }

.topo {
  display: flex; align-items: center; gap: 17px;
  height: var(--topo-altura); padding: 0 24px;
  border-bottom: 1px solid var(--borda);
  background: var(--superficie);
  position: sticky; top: 0; z-index: 20;
}
/* .brand carregava o mark de texto "AG" + "Painel de gestão"
   (DESIGN_V6_EXTRAIDO.md §3.1/§9: a V6 usa um box escuro "AG" porque
   nao tem cor de marca propria, §5 "conflito nao resolvido" -- nos
   tinhamos cor, mas nao a logo oficial ainda). Trocado 20/09 pela logo
   de verdade (marca/*.svg, pedido do Artur) -- .brand agora so' molda
   a area clicavel; o conteudo e' a imagem. */
.brand {
  display: inline-flex; align-items: center;
  text-decoration: none; white-space: nowrap; min-width: 130px;
}
.brand:hover { text-decoration: none; }

/* Dois SVG empilhados (ver app.js) -- so' um visivel por vez, trocado
   por data-tema. viewBox 867x551 (razao 1,57:1): altura fixa, largura
   segue sozinha. 30px/24px medido contra o topbar real (63px de altura
   -- DESIGN_V6_EXTRAIDO.md nao cobre logo, medida nossa). */
.marca-logo { height: 30px; width: auto; display: block; }
.marca-logo-claro { display: none; }
:root[data-tema="claro"] .marca-logo-escuro { display: none; }
:root[data-tema="claro"] .marca-logo-claro  { display: block; }
@media (max-width: 820px) { .marca-logo { height: 24px; } }

/* Segmented control de ambiente (§3.1/§9, ".workspace"). Ativo em
   fundo escuro/texto branco -- mesmo --nav-fundo da sidebar, unico
   acento "solido" da casca (sem variar por ambiente: a V6 nao varia,
   e o antigo sublinhado por --acento por ambiente saiu daqui). */
.workspace {
  display: flex; gap: 3px; padding: 3px; border: 1px solid var(--borda);
  border-radius: 10px; background: var(--superficie-alta); overflow-x: auto;
}
.workspace a {
  padding: 7px 15px; border-radius: 7px; white-space: nowrap;
  color: var(--texto-suave); font-size: var(--t-peq); font-weight: var(--peso-forte);
}
.workspace a:hover { color: var(--texto); text-decoration: none; }
.workspace a.active { background: var(--nav-fundo); color: #fff; }

#mode-switch { display: flex; }
.mode-control {
  display: flex; gap: 3px; padding: 3px; border: 1px solid var(--borda);
  border-radius: 10px; background: var(--superficie-alta);
}
.mode-control a {
  padding: 7px 15px; border-radius: 7px; white-space: nowrap;
  color: var(--texto-suave); font-size: var(--t-peq); font-weight: var(--peso-forte);
}
.mode-control a:hover { color: var(--texto); text-decoration: none; }
.mode-control a.active { background: var(--superficie); color: var(--texto); }
.mode-control a.active.demo { background: var(--demo-fundo); color: var(--demo); }

.topo-dir { margin-left: auto; display: flex; align-items: center; gap: var(--e-3); }
.topo-usuario {
  font-size: var(--t-micro); color: var(--texto-fraco);
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ficha-fase { text-transform: uppercase; letter-spacing: .05em; }

/* --- acento por ambiente: a casca inteira muda ---------------------- */
/* "crescimento" usava --ag-laranja como acento -- contradiz a regra
   escrita em 17/09 (decisao do Artur, porte da paleta V6): "--ag-laranja
   permanece e e SO marca: logo, .marca, identidade. Nao vira acento, nao
   vira link, nao vira positivo." Corrigido para unificar com "operacao" --
   ag-ciano resolve para teal no tema claro (V6) e continua ciano no
   escuro (AG//COCKPIT, inalterado por decisao separada do Artur). */
.app[data-ambiente="operacao"]    { --acento: var(--ag-ciano); }
.app[data-ambiente="crescimento"] { --acento: var(--ag-ciano); }
.app[data-ambiente="conteudo"]    { --acento: var(--preench-baixo); }
.app[data-ambiente="sistema"]     { --acento: var(--texto-fraco); }

/* Hex cru, nao var() -- CSS nao aceita `var(--x)` + sufixo de alfa
   colado. Precisam acompanhar --ag-ciano/--ag-laranja a mao quando o
   hex da marca mudar (corrigido 20/09 junto com theme.css). */
.app[data-ambiente="operacao"] .frame {
  background: linear-gradient(180deg, #2CAEE80A 0%, transparent 220px);
}
.app[data-ambiente="crescimento"] .frame {
  background: linear-gradient(180deg, #F26C2012 0%, transparent 220px);
}
.app[data-ambiente="conteudo"] .frame {
  background: linear-gradient(180deg, #8957E512 0%, transparent 220px);
}

/* modo demonstracao marca a casca inteira, nao so o bloco */
.app-demo { box-shadow: inset 0 0 0 3px var(--demo); }
.faixa-demo-topo {
  display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap;
  border-radius: 0; border-left: 0; border-right: 0;
  position: sticky; top: var(--topo-altura); z-index: 19;
}
.faixa-demo-topo .btn-linha { color: var(--demo); font-weight: 700; }

/* --- frame: sidebar + conteudo (DESIGN_V6_EXTRAIDO.md §3.2/§8) ------
   Larguras e breakpoints [dom], nao arredondados -- §3.2 achou cinco
   `.frame{grid-template-columns}` sem escopo na V6, so estes tres
   sobrevivem depois de resolver a cascata. */
.frame { display: grid; grid-template-columns: 218px minmax(0, 1fr); flex: 1; }
@media (max-width: 1150px) { .frame { grid-template-columns: 185px minmax(0, 1fr); } }
@media (max-width: 960px)  { .frame { grid-template-columns: 166px minmax(0, 1fr); } }

.sidebar {
  background: var(--nav-fundo); color: var(--nav-texto);
  height: calc(100vh - var(--topo-altura)); position: sticky; top: var(--topo-altura); overflow-y: auto;
  padding: 24px 13px; display: flex; flex-direction: column; gap: var(--e-4);
  min-width: 0;
}
.sideintro { padding: 0 12px 17px; }
.sideintro .eyebrow { color: var(--nav-texto-fraco); }
.sideintro strong { display: block; font-size: 20px; color: #fff; letter-spacing: -.5px; margin-top: 5px; }
.sideintro p { font-size: var(--t-micro); color: var(--nav-texto); margin-top: 5px; line-height: 1.4; }

.sidenav, .sidenav-sistema { display: flex; flex-direction: column; gap: 4px; }
.sidenav-item {
  display: flex; align-items: center; gap: 11px; border-radius: 9px;
  color: var(--nav-texto); text-align: left; padding: 11px 12px; font-size: var(--t-peq);
}
.sidenav-item:hover { background: var(--nav-fundo-hover); color: #fff; text-decoration: none; }
.sidenav-item.active { background: var(--nav-ativo-fundo); color: var(--nav-ativo-texto); font-weight: var(--peso-forte); }
.sidenav-item span { flex: 1 1 0%; }
.sidenav-item .icon { width: 17px; height: 17px; }
.sidenav-item.item-espera { color: var(--nav-texto-fraco); }
.sidenav-item .estado { font-size: 9px; padding: 1px 5px; }

.sidenav-sistema { margin-top: var(--e-3); padding-top: var(--e-3); border-top: 1px solid var(--nav-borda); }
.sidenav-sistema .eyebrow { padding: 0 12px 5px; color: var(--nav-texto-fraco); }

.eyebrow {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
}

.conteudo { padding: var(--e-5) var(--e-4); min-width: 0; }

/* =====================================================================
   PAGINA
   ===================================================================== */
.pagina-topo {
  display: flex; align-items: flex-start; gap: var(--e-4); flex-wrap: wrap;
  margin-bottom: var(--e-5);
}
.pagina-id { min-width: 0; flex: 1 1 320px; }
.pagina-id .eyebrow { color: var(--texto-fraco); margin-bottom: 5px; }
/* h1 real (ver ui.js cabecalho()) -- bold ja vem do UA stylesheet do
   navegador, sem precisar declarar font-weight aqui. Tamanho e tracking
   de DESIGN_V6_EXTRAIDO.md §2 (26px/700/-0.7px). */
.pagina-titulo { font-size: var(--t-titulo); margin: 0; letter-spacing: -0.7px; }
.pagina-sub {
  color: var(--texto-suave); font-size: var(--t-peq);
  margin: var(--e-2) 0 0; max-width: 78ch; line-height: 1.5;
}
.pagina-acoes { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
/* grid-template-columns explicito -- sem ele a coluna implicita usa
   grid-auto-columns:auto, que dimensiona pelo CONTEUDO em vez de pelo
   espaco disponivel. E o mesmo motivo pelo qual .frame (acima) usa
   minmax(0,1fr) em vez de deixar a segunda coluna implicita.

   Achado da revisao ao vivo da coordenacao (17/09): a coluna Canais, com
   chips longos em white-space:nowrap, tinha largura minima de conteudo
   maior que o espaco disponivel -- e sem este minmax(0,1fr), essa largura
   minima vazava para .pagina-corpo inteiro (e dai para a pagina), mesmo
   com overflow-x:auto ja declarado em .tabela-wrap. overflow-x:auto so
   funciona quando o CONTEINER tem largura definida; minmax(0, ...) e o
   que define. */
.pagina-corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5); }

/* Selo de frescor em linha propria (DESIGN_V6_EXTRAIDO.md §12, ".quality
   line") -- fica entre o cabecalho e o corpo. O .dot muda de cor pelo
   MESMO estado que o resto do painel ja usa (--ok/--desatualizado/
   --erro/--demo/--sem-dado), nao uma paleta nova so pra ele. */
.qualityline {
  display: flex; align-items: center; gap: 9px;
  margin: 0 1px 18px; color: var(--texto-fraco); font-size: var(--t-micro);
}
.qualityline .dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; background: var(--sem-dado); }
.qualityline .dot.ok            { background: var(--ok); }
.qualityline .dot.desatualizado { background: var(--desatualizado); }
.qualityline .dot.erro          { background: var(--erro); }
.qualityline .dot.demo          { background: var(--demo); }
.qualityline strong { color: var(--texto-suave); font-weight: var(--peso-forte); }

/* `.textbtn` nasceu escopado a `.qualityline` mas ja' era usado solto
   em blog.js/aquisicao.js (botao "todos os pagos", "fechar" etc.) sem
   nenhum estilo -- virava botao cru do navegador. Base extraida aqui
   (20/09, casca V6) preserva byte a byte a aparencia de `.qualityline
   .textbtn` (so ganhou `margin-left:auto`, que continua so' dela) e
   corrige de tabela os usos que ja existiam sem estilo. */
.textbtn {
  white-space: nowrap; padding: 2px 0; border: 0; background: none;
  color: var(--ag-ciano); font-size: var(--t-peq); font-weight: var(--peso-forte);
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.textbtn:hover { text-decoration: none; }
.qualityline .textbtn { margin-left: auto; }

/* `.textbtn-pendente`: mesma posicao visual do link, sem comportamento
   -- usado quando o destino ainda nao foi definido (ver indicador(),
   ui.js). Cor neutra e cursor default deixam claro que nao e clicavel,
   sem inventar navegacao que a previa (PNG estatico) nao mostra. */
.textbtn-pendente { color: var(--texto-fraco); cursor: default; text-decoration: none; }
.textbtn-pendente:hover { text-decoration: none; }

.secao { display: grid; gap: var(--e-3); }
/* O titulo e o slot de acao opcional (ui.js secao(), ESPEC_TELA_BLOG_
   SEO_17-09-2026.md §3.6: o indicador de crescimento semanal vive aqui)
   dividem esta linha -- a borda que era do h2 sozinho virou da linha
   inteira, pra nao cortar so embaixo do titulo quando ha acao ao lado. */
.secao-cabecalho {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--e-3); flex-wrap: wrap;
  padding-bottom: var(--e-2); border-bottom: 1px solid var(--borda);
}
.secao-titulo {
  /* h2 base da V6: 17px/700/-0.3px (DESIGN_V6_EXTRAIDO.md §2). Era 15px/600. */
  font-size: var(--t-med); margin: 0; font-weight: var(--peso-forte);
  letter-spacing: -0.3px;
}

/* --- bloco de leitura do recorte (ui.js blocoLeituraRecorte(), 20/09,
   casca V6 -- v6-demo-operacao-00-visao-executiva.png) ---------------
   Faixa com friso colorido a esquerda -- unico bloco do painel com esse
   tratamento, de proposito: e' o unico lugar que interpreta o recorte
   em portugues corrido, em vez de so' declarar numero/estado. */
.bloco-leitura {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-4); flex-wrap: wrap;
  background: var(--superficie); border: 1px solid var(--borda);
  border-left: 3px solid var(--ag-ciano); border-radius: var(--r-2);
  padding: var(--e-3) var(--e-4);
}
.bloco-leitura-corpo { display: grid; gap: var(--e-1); }
.bloco-leitura-titulo {
  font-size: var(--t-med); font-weight: var(--peso-forte); letter-spacing: -0.2px;
}
.bloco-leitura-texto { margin: 0; color: var(--texto-suave); font-size: var(--t-peq); }

.chip-recorte {
  display: inline-flex; align-items: center; gap: var(--e-2); flex-shrink: 0;
  border: 1px solid var(--borda-forte); border-radius: var(--r-1);
  padding: var(--e-2) var(--e-3); font-size: var(--t-peq); font-weight: var(--peso-forte);
  color: var(--texto); white-space: nowrap;
}
a.chip-recorte:hover { border-color: var(--ag-ciano); text-decoration: none; }
.chip-recorte-pendente { color: var(--texto-fraco); cursor: default; }

/* --- indicador ------------------------------------------------------- */
.indicador { display: grid; gap: var(--e-2); align-content: start; }
.indicador .metrica.ausente { font-size: var(--t-base); }
.indicador-motivo { font-size: var(--t-micro); color: var(--texto-fraco); line-height: 1.45; }
.indicador-nota {
  font-size: var(--t-micro); color: var(--parcial);
  font-family: var(--fonte-num);
}
/* Selo "Fictício" + link "Cálculo", lado a lado (previa real: v6-demo-
   operacao-00-visao-executiva.png, linha de rodape de cada cartao de
   indicador em modo demo). Nasce so' aditivo -- ver indicador(), ui.js. */
.indicador-selo {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-2); padding-top: var(--e-1);
}
.indicador-selo .textbtn { font-size: var(--t-micro); }

/* --- bloco de estado -------------------------------------------------- */
.bloco-estado {
  border: 1px dashed var(--borda-forte); border-radius: var(--r-2);
  padding: var(--e-4); background: var(--superficie);
  display: grid; gap: var(--e-2);
}
.bloco-topo { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.bloco-motivo { margin: 0; color: var(--texto-suave); font-size: var(--t-peq); max-width: 80ch; }
.bloco-fonte { margin: 0; font-size: var(--t-micro); color: var(--texto-fraco); }
.bloco-sem-dado      { border-color: var(--sem-dado); }
.bloco-parcial       { border-color: var(--parcial);       background: var(--parcial-fundo); }
.bloco-desatualizado { border-color: var(--desatualizado); background: var(--desatualizado-fundo); }
.bloco-demo          { border-color: var(--demo);          background: var(--demo-fundo); }
.bloco-erro          { border-color: var(--erro);          background: var(--erro-fundo); }
.bloco-ok            { border-color: var(--ok);            background: var(--ok-fundo); }

/* --- aviso ------------------------------------------------------------ */
.aviso {
  border-left: 3px solid var(--sem-dado); border-radius: var(--r-1);
  padding: var(--e-3); font-size: var(--t-peq); color: var(--texto-suave);
  background: var(--sem-dado-fundo); line-height: 1.55;
}
.aviso-info     { border-color: var(--info);     background: var(--info-fundo); }
.aviso-ok       { border-color: var(--ok);       background: var(--ok-fundo); }
.aviso-atencao  { border-color: var(--atencao);  background: var(--atencao-fundo); }
.aviso-erro     { border-color: var(--erro);     background: var(--erro-fundo); color: var(--texto); }

/* --- tabela ----------------------------------------------------------- */
.tabela-wrap {
  border: 1px solid var(--borda); border-radius: var(--r-2);
  background: var(--superficie); max-width: 100%;
  /* README diz "tabela larga rola no proprio conteiner", mas esta regra
     nunca tinha o overflow-x que a cumpre -- achado da coordenacao
     (17/09, sessao real): a coluna Canais, com chips em white-space:
     nowrap (.estado, theme.css), estourava a largura da tabela e o body
     (overflow-x:hidden, linha 10 deste arquivo) cortava o excesso em
     silencio, sem barra de rolagem nenhuma. Sem isto a regra da casa era
     so intencao escrita, nunca aplicada. */
  overflow-x: auto;
}
table.dados th { background: var(--superficie-alta); }
table.dados tbody tr:last-child td { border-bottom: none; }
table.dados tbody tr:hover { background: var(--superficie-alta); }
.cod { font-family: var(--fonte-num); color: var(--ag-ciano); font-weight: 600; }
.sub-linha { color: var(--texto-fraco); font-size: var(--t-micro); }
.id-curto { color: var(--texto-fraco); }

.squad { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.ficha {
  font-size: var(--t-micro); padding: 1px var(--e-2);
  border: 1px solid var(--borda-forte); border-radius: var(--r-1);
  color: var(--texto-suave); white-space: nowrap;
}

.barra-filtro {
  display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap;
  margin-bottom: var(--e-3);
}
.busca { max-width: 340px; }

/* --- barra de controles (ui.js controles(), ESPEC_TELA_BLOG_SEO_17-09-
   2026.md §3.2) -- equivalente ao .o-controls da V6: campo sem borda
   propria, so o rotulo maiusculo em cima e' que separa um do outro. */
.barra-controles {
  display: flex; gap: var(--e-5); flex-wrap: wrap; align-items: flex-end;
  padding: 13px 17px; border: 1px solid var(--borda); border-radius: var(--r-3);
  background: var(--superficie); margin-bottom: var(--e-3);
}
.barra-controles > div { min-width: 155px; display: grid; gap: 4px; }
.barra-controles-rotulo {
  font-size: 11px; font-weight: var(--peso-forte); letter-spacing: 0.9px;
  text-transform: uppercase; color: var(--texto-fraco);
}
.barra-controles select {
  font-size: var(--t-peq); font-weight: 650; border: none; background: none;
  color: var(--texto); padding: 0; font-family: inherit;
}
/* O seletor EMPRESA (blocos.js, seletorDeEmpresa). A lista aberta do
   `<select>` não herda o `background: none` do campo: sem cor própria,
   no tema escuro ela abre com fundo claro do sistema e o texto claro do
   tema -- ilegível. */
.barra-controles select option { background: var(--superficie); color: var(--texto); }
.barra-controles select:disabled { color: var(--texto-suave); }
.campo-empresa { max-width: 320px; cursor: pointer; }
.campo-empresa-caixa { display: grid; gap: 2px; }
/* O seletor de PERÍODO (blocos.js, seletorDePeriodo): o mesmo campo. */
.campo-periodo { max-width: 240px; cursor: pointer; }
/* A conferencia do mes por campanha (aquisicao.js), embaixo da tabela. */
.aquisicao-conferencia {
  margin-top: 10px; font-size: var(--t-peq); color: var(--texto-suave); line-height: 1.45;
}
.aquisicao-conferencia ul { margin: 4px 0 0; padding-left: 18px; color: var(--texto-fraco); }
.aquisicao-conferencia[data-conferencia="diverge"] > strong { color: var(--atencao); }
.campo-periodo-caixa { display: grid; gap: 2px; }
.barra-controles-nota {
  font-size: 11px; color: var(--texto-fraco); max-width: 360px; line-height: 1.35;
}
.barra-controles-nota:empty { display: none; }
.estado-sem-recorte { white-space: nowrap; }
.texto-estatico { font-size: var(--t-peq); color: var(--texto-suave); }
/* Campo de busca desenhado e desabilitado -- ver `busca` em
   topoDeTela(). Placeholder nao entra no innerText, que e' o
   ponto: ele e' forma, nao conteudo da tela. */
.campo-busca {
  font: inherit; font-size: var(--t-peq); color: var(--texto-suave);
  background: none; border: 0; padding: 0; min-width: 200px;
}
.campo-busca::placeholder { color: var(--texto-fraco); }

/* Area direita da barra de filtros (ui.js controles(), 20/09 -- casca
   V6, toda barra medida nos PNGs termina assim: "Comparar com Jul/2026"
   + "Exportar recorte", ou so' o botao nas telas de acervo/listagem). */
.barra-controles-direita {
  margin-left: auto; padding-left: var(--e-4); border-left: 1px solid var(--borda);
  display: flex; align-items: center; gap: var(--e-3); align-self: center;
}
.btn-inerte {
  padding: 7px var(--e-3); font-size: var(--t-peq); font-weight: 600;
  color: var(--texto-fraco); cursor: default; background: none;
}

/* --- esqueleto -------------------------------------------------------- */
.esqueleto-tabela {
  display: grid; gap: var(--e-2); padding: var(--e-3);
  border: 1px solid var(--borda); border-radius: var(--r-2); background: var(--superficie);
}
.esqueleto-linha { display: flex; gap: var(--e-3); }
.esqueleto-linha .esqueleto { height: 12px; }

/* --- serie temporal (MRR) --------------------------------------------- */
.serie {
  display: flex; gap: var(--e-2); align-items: flex-end;
  overflow-x: auto; padding: var(--e-4) var(--e-3);
  border: 1px solid var(--borda); border-radius: var(--r-2); background: var(--superficie);
}
.serie-col { display: grid; gap: var(--e-2); justify-items: center; min-width: 74px; flex: 1; }
.serie-barra {
  height: 110px; width: 100%; display: flex; align-items: flex-end;
  background: var(--preench-vazio); border-radius: var(--r-1); overflow: hidden;
}
.serie-barra > i { width: 100%; background: var(--preench-alto); display: block; }
/* mes sem dado NAO vira barra no chao: vira lacuna marcada */
.serie-ausente {
  background: repeating-linear-gradient(45deg,
    var(--sem-dado-fundo) 0 6px, transparent 6px 12px);
  border: 1px dashed var(--sem-dado); align-items: center; justify-content: center;
}
.serie-marca-ausente {
  width: 100%; height: 1px; background: var(--sem-dado);
}
.serie-rotulo { font-size: var(--t-micro); color: var(--texto-fraco); font-family: var(--fonte-num); }
.serie-valor { font-size: var(--t-micro); font-family: var(--fonte-num); color: var(--texto-suave); }

/* Mes/semana EM CURSO (ou com dias_com_dado < periodo inteiro) -- cor
   diferente da barra cheia, de proposito (ESPEC_TELA_BLOG_SEO_17-09-
   2026.md §3.5): sem isto, um mes parcial de 14/30 dias parece um
   desabamento ao lado dos meses fechados. */
.serie-barra.serie-parcial > i { background: var(--parcial); }

/* Mes/semana correspondente ao que esta selecionado na barra de
   controles (paginas/blog.js) -- so um contorno, pra saber qual barra
   e' a "atual" sem precisar contar colunas. */
.serie-barra.selecionado { outline: 2px solid var(--ag-ciano); outline-offset: 1px; }

/* 16-17 colunas (mensal) ou 13 (semanal) nao cabem em 74px cada dentro
   dos ~1008px uteis do main -- §3.5 pede este segundo tamanho so pra
   series densas, a MRR (8 pontos) continua no padrao de 74px. */
.serie.serie-densa .serie-col { min-width: 44px; }

/* --- rodape de secao (ui.js nao tem componente pra isto -- e' texto
   simples abaixo de uma serie/tabela, ESPEC_TELA_BLOG_SEO_17-09-2026.md
   §3.5/§3.7/§3.9: cobertura, contagem do eixo, nota de nulos). --- */
.rodape-secao {
  font-size: var(--t-micro); color: var(--texto-fraco); line-height: 1.6;
  border-top: 1px solid var(--borda); padding-top: var(--e-2); margin: 0;
}

/* --- delta mes-a-mes / semana-a-semana (§3.4/§3.6) -- o SINAL da cor
   e' escolhido por SIGNIFICADO, nunca pela aritmetica crua: quem chama
   decide a classe (positive/negative/equal), porque em posicao media
   menor e' melhor -- o mesmo delta negativo que e' bom numa metrica e'
   ruim na outra. */
.delta {
  font-weight: var(--peso-forte); display: inline-flex; gap: 3px; align-items: center;
  font-variant-numeric: tabular-nums; font-size: var(--t-micro); font-family: var(--fonte-num);
}
.delta.positive { color: var(--ok); }
.delta.negative { color: var(--erro); }
.delta.equal    { color: var(--texto-suave); }

/* --- grade de detalhe (historico de pagina, §3.8) -------------------- */
.grade-detalhe {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); margin: var(--e-3) 0;
}
.grade-detalhe > div {
  background: var(--fundo); border: 1px solid var(--borda); border-radius: var(--r-2);
  padding: var(--e-3);
}
.grade-detalhe strong { font-size: var(--t-micro); color: var(--texto-fraco); }
@media (max-width: 720px) {
  .grade-detalhe { grid-template-columns: 1fr; }
}

/* --- galeria de estados ------------------------------------------------ */
.amostra { border-top: 1px solid var(--borda); padding-top: var(--e-4); }
.amostra-topo { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.amostra-id { font-size: var(--t-micro); color: var(--texto-fraco); }
.amostra-caixa {
  border: 1px solid var(--borda); border-radius: var(--r-2);
  padding: var(--e-4); background: var(--fundo); display: grid; gap: var(--e-3);
}
.amostra-frescor { display: flex; gap: var(--e-4); flex-wrap: wrap; }

.passos { margin: 0; padding-left: 1.2em; color: var(--texto-suave); font-size: var(--t-peq); }
.passos li { margin-bottom: var(--e-2); }

/* =====================================================================
   MOBILE-NAV -- barra inferior fixa (DESIGN_V6_EXTRAIDO.md §5/§10),
   etapa 3 bloco 6. So existe ≤700px -- ver bloco RESPONSIVO abaixo, que
   e o par: sidebar sumir E mobile-nav aparecer sao a MESMA mudanca,
   nunca uma sem a outra (achado da coordenacao, senao fica com as duas
   navegacoes juntas).

   Permanentemente escura, como a sidebar -- mesmos tokens --nav-*: e a
   mesma navegacao, so reposicionada pro rodape em tela estreita, nao
   um componente com identidade propria. Por isso NAO usa os hexes
   claros que a V6 usa aqui (#fffefc, --accent-soft): nossa barra nunca
   fica clara, e os pares pastel/escuro (ja resolvidos pra sidebar)
   servem de novo sem repetir a decisao. */
/* 🚨 SEM overflow-x:auto aqui, de proposito -- achado ao testar: um
   eixo de overflow nao-visible forca o OUTRO eixo tambem a nao-visible
   (regra da cascata de overflow do CSS), e isso cortava verticalmente
   o menu "Mais" (que precisa aparecer AC IMA da barra, via
   bottom:calc(100% + Npx)). A curadoria (MOBILE_PRINCIPAIS) ja garante
   ≤5 itens -- cabe sem rolar; se um dia precisar rolar, o scroll tem
   que ir num wrapper interno, nunca na propria .mobile-nav. */
.mobile-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  gap: 3px;
  padding: 7px 9px max(7px, env(safe-area-inset-bottom));
  background: var(--nav-fundo); border-top: 1px solid var(--nav-borda);
  box-shadow: 0 -3px 15px #0006;
}
.mobile-nav a, .mobile-mais-botao {
  flex: 1 0 56px; display: flex; flex-direction: column; align-items: center;
  gap: 3px; font-size: 9px; border: 0; background: none; cursor: pointer;
  color: var(--nav-texto); padding: 4px; border-radius: 7px; white-space: nowrap;
}
.mobile-nav a:hover { text-decoration: none; color: #fff; }
.mobile-nav a.active, .mobile-mais-botao.active {
  color: var(--nav-ativo-texto); background: var(--nav-ativo-fundo); font-weight: var(--peso-forte);
}
.mobile-nav .icon { width: 18px; height: 18px; }

.mobile-mais { position: relative; flex: 1 0 56px; display: flex; }
.mobile-mais-menu {
  position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 21;
  background: var(--nav-fundo); border: 1px solid var(--nav-borda); border-radius: 10px;
  padding: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 180px;
  box-shadow: 0 -4px 16px #0008;
}
.mobile-mais-menu[hidden] { display: none; }
.mobile-mais-menu a {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: 7px; color: var(--nav-texto); font-size: 13px; white-space: nowrap;
}
.mobile-mais-menu a:hover, .mobile-mais-menu a.active { background: var(--nav-fundo-hover); color: #fff; }
.mobile-mais-menu .icon { width: 16px; height: 16px; }

/* =====================================================================
   RESPONSIVO
   900px preserva ALGUMA navegacao antes do corte: a sidebar deita e
   vira faixa horizontal rolavel. So ≤700px (§3.2) e o corte de verdade
   da V6: sidebar sai, .mobile-nav assume.
   ===================================================================== */
@media (max-width: 900px) {
  .frame { grid-template-columns: 1fr; }
  .sidebar {
    height: auto;
    border-bottom: 1px solid var(--nav-borda);
    flex-direction: row; align-items: flex-start; gap: var(--e-4);
    overflow-x: auto; padding: var(--e-3);
  }
  .sideintro { display: none; }
  .sidenav, .sidenav-sistema {
    flex-direction: row; border-top: none; margin-top: 0; padding-top: 0;
  }
  .sidenav-sistema .eyebrow { display: none; }
  .sidenav-item { border-radius: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
  .sidenav-item.active { background: none; color: #fff; border-bottom-color: var(--nav-acento); }

  /* Achado da coordenacao (17/09, corrigido 18/09): entre 720 e 760px a
     faixa mede mais que a largura disponivel, e o ultimo item
     ("Execucao operacional") so aparece rolando -- sem indicio nenhum
     de que ha mais coisa a direita.

     🐛 Primeira tentativa usava .sidebar::after (position:absolute
     dentro do proprio .sidebar, que e' position:relative E o scroll
     container ao mesmo tempo) -- e um pseudo-elemento assim e'
     CONTEUDO da caixa que rola, entao ele rolava junto e passava a
     cobrir exatamente o item que deveria apontar (medido pela
     coordenacao com sonda real: o degrade ia parar em cima do proprio
     rotulo depois de rolar ate o fim).

     Correcao: gradiente como BACKGROUND do proprio .sidebar, nao um
     filho posicionado. `background-attachment` por padrao ja e' `scroll`
     (fixo em relacao a CAIXA do elemento, nao ao conteudo interno que
     rola) -- exatamente o oposto do bug do pseudo-elemento, e sem
     precisar de position:relative nem de um segundo elemento. */
  .sidebar {
    background-image: linear-gradient(to right, transparent calc(100% - 28px), var(--nav-fundo) 100%);
    background-repeat: no-repeat;
  }
}

/* =====================================================================
   Aquisicao e campanhas (ESPEC_TELA_AQUISICAO_17-09-2026.md §3.2/§4.1).
   ===================================================================== */

/* multisseletor de canais -- geometria de .ficha, medidas literais da
   especificacao: chip-botao, nao <select>, porque a marcacao e'
   independente por canal (§4.1). */
.multisseletor-canais { display: flex; gap: 4px; flex-wrap: wrap; }
.chip-canal {
  border: 1px solid var(--borda-forte); border-radius: var(--r-1);
  padding: 1px 8px; font-size: var(--t-micro); white-space: nowrap;
  background: none; color: var(--texto-suave); cursor: pointer;
}
.chip-canal.marcado { background: var(--ok-fundo); color: var(--ok); border-color: var(--ok); font-weight: 700; }
.chip-canal.desabilitado { opacity: .45; cursor: not-allowed; }
.multisseletor-atalhos { display: flex; gap: var(--e-3); margin-top: var(--e-2); }

/* custo por etapa -- grid de 5, tudo sem-dado hoje (§6.4) ate' o
   dominio comercial entrar. */
.grade-etapas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; margin-top: var(--e-4); }
.grade-etapas .indicador { padding: 4px 11px; }

/* graficos por canal -- um .serie por canal marcado. Modo matriz (4-5
   canais, §4.2) usa small multiples com escala JA' compartilhada (o
   maximo e' calculado por canal individualmente nesta primeira versao
   -- registrado como simplificacao, ver comentario no topo de
   paginas/aquisicao.js). */
.graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: var(--e-4); }
.graficos-small-multiples { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grafico-titulo { font-size: var(--t-peq); font-weight: var(--peso-forte); margin: 0 0 var(--e-2); }

@media (max-width: 980px) { .grade-etapas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .grade-etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* O par: nunca uma sem a outra. */
@media (max-width: 700px) {
  .sidebar { display: none; }
  .mobile-nav { display: flex; }
  .conteudo { padding-bottom: 80px; }
}

@media (max-width: 620px) {
  .topo { flex-wrap: wrap; height: auto; gap: var(--e-2); padding: var(--e-2) var(--e-3); }
  /* Quebra em duas linhas em vez de rolar. `.workspace` tem
     `overflow-x:auto`, que bastava com tres ambientes: o quarto
     (Onboarding, 20/09) passou a ficar FORA da tela no celular,
     alcancavel so por uma rolagem horizontal que nada anuncia --
     medido a 390px. Item de navegacao que some nao e item de
     navegacao. */
  .workspace { order: 3; width: 100%; flex-wrap: wrap; overflow-x: visible; }
  .workspace a { flex: 1 1 auto; text-align: center; }
  #mode-switch { order: 4; width: 100%; }
  .mode-control { width: 100%; }
  .mode-control a { flex: 1; text-align: center; }
  .topo-dir { gap: var(--e-2); }
  .topo-usuario { max-width: 120px; }
  .ficha-fase { display: none; }
  .faixa-demo-topo { top: 0; position: static; }
  .conteudo { padding: var(--e-4) var(--e-3); }
  .serie-col { min-width: 62px; }
}

/* =====================================================================
   BLOCOS DA REFERÊNCIA V6/V7 -- etapa 1, replicacao visual (20/09).

   Portado de `originais/preview-v6.html`, regra a regra, traduzido pros
   tokens do painel. As medidas vieram do `[css]` da previa (primeira
   declaracao de cada seletor, que e' a base de desktop), e a paleta NAO
   veio junto: "estrutura se copia, paleta nao" -- decisao do Artur.
   Onde a previa cravava `white` / `#fbfcfc` / `#edf6f3`, aqui entra
   --superficie / --superficie-alta, que resolvem os dois temas.

   ⚠️ O DESIGN_V6_EXTRAIDO.md (§5) avisa que o corpo das paginas NAO foi
   extraido -- so' a casca. Entao estas regras sao medicao nova, feita
   aqui, e nao herdam a garantia de procedencia daquele documento.
   ===================================================================== */

/* --- painel: o `.panel` da V6 --------------------------------------- */
/* [css] .panel{border:1px solid var(--line);border-radius:15px;padding:20px;margin-bottom:18px} */
.painel {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--r-3); padding: 20px; min-width: 0;
  margin-bottom: 18px; display: grid; gap: 0; align-content: start;
}
/* [css] .panel-head{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:12px} */
.painel-topo {
  display: flex; justify-content: space-between; align-items: start;
  gap: var(--e-3); margin-bottom: var(--e-3); flex-wrap: wrap;
}
.painel-id { display: grid; gap: 3px; min-width: 0; }
/* [css] .panel-head h2{font-size:16px} -- o painel usa --t-med (17px),
   que e' o h2 da propria V6 fora do painel-head; manter um h2 de 16 so'
   aqui criaria uma segunda escala de titulo por uma diferenca de 1px. */
.painel-sub { margin: 0; font-size: var(--t-peq); color: var(--texto-suave); line-height: 1.5; }
.painel-acao { display: flex; align-items: center; gap: var(--e-2); flex-shrink: 0; flex-wrap: wrap; }
/* [css] .chart-foot{font-size:10px;border-top:1px solid #e7edee;padding-top:10px;margin-top:8px}
   [css] .table-legend{font-size:11px;line-height:1.6;padding:12px 2px 0;border-top:1px solid var(--line)} */
.painel-rodape {
  margin: var(--e-2) 0 0; padding-top: var(--e-3);
  border-top: 1px solid var(--borda); font-size: var(--t-micro);
  color: var(--texto-fraco); line-height: 1.6;
}

/* --- a causa do bloco: uma linha embaixo de uma grade inteira -------- */
.bloco-causa {
  margin: var(--e-3) 0 0; font-size: var(--t-micro);
  color: var(--texto-fraco); line-height: 1.5;
}

/* --- selo de ausencia, em qualquer lugar ---------------------------- */
.ausente-bloco { display: flex; align-items: baseline; gap: var(--e-2); flex-wrap: wrap; }
.ausente-motivo { font-size: var(--t-micro); color: var(--texto-fraco); line-height: 1.5; }

/* --- grupos de cartoes economicos ----------------------------------- */
/* [css] .economic-groups{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px} */
.grade-grupos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
/* [css] .group-title{display:flex;gap:8px;justify-content:space-between;align-items:center;margin:0 1px 8px}
   [css] .group-title span{font-size:10px;font-weight:750;letter-spacing:1.1px} */
.grupo-titulo {
  display: flex; gap: var(--e-2); justify-content: space-between;
  align-items: center; margin: 0 1px var(--e-2);
}
.grupo-titulo span {
  font-size: var(--t-micro); font-weight: var(--peso-forte);
  letter-spacing: 1.1px; text-transform: uppercase; color: var(--texto-suave);
}
.grupo-titulo small { font-size: var(--t-micro); color: var(--texto-fraco); }
/* [css] .metric-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} */
.fileira-cartoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

/* [css] .econ-card{border:1px solid var(--line);border-radius:12px;padding:16px 13px;min-height:209px}
   A altura minima e' o que faz a fileira nao encolher quando o dado
   chegar -- a tela de hoje tem de ser maquete da de amanha. */
.econ-cartao {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--superficie-alta); border: 1px solid var(--borda);
  border-radius: 12px; padding: 16px 13px; min-height: 209px;
}
/* [css] .econ-card .metric-link{font-size:12px;font-weight:700;min-height:34px} */
.econ-rotulo {
  font-size: var(--t-peq); font-weight: var(--peso-forte);
  color: var(--texto); min-height: 34px; line-height: 1.35;
}
/* [css] .econ-unit{font-size:10px;line-height:1.5;margin-top:3px;min-height:30px} */
.econ-unidade {
  font-size: var(--t-micro); line-height: 1.5; color: var(--texto-fraco);
  margin-top: 3px; min-height: 30px;
}
/* [css] .econ-value{font-size:28px;...;margin:9px 0} + .pending{font-size:24px}
   Aqui o valor e' SEMPRE ausente, entao a caixa guarda a altura do
   numero grande em vez de o selo subir a fileira inteira. */
.econ-valor { margin: 9px 0; min-height: 36px; display: flex; align-items: center; }
/* [css] .econ-comparison -- linha miuda entre o valor e o rodape */
.econ-comparacao { font-size: var(--t-micro); color: var(--texto-fraco); }
/* [css] .econ-bottom{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:10px}
   Aqui so' sobra o "Cálculo": a condicao ("Sem valor utilizável") e' um
   julgamento sobre um valor, e nao ha valor. Alinhado a direita, que e'
   onde ele esta na previa. */
.econ-rodape {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 6px; margin-top: 10px;
}
.econ-rodape .textbtn { font-size: var(--t-micro); }
/* [css] .econ-reason{font-size:10px;line-height:1.5;margin-top:8px} */
.econ-motivo {
  font-size: var(--t-micro); line-height: 1.5; color: var(--texto-fraco);
  margin: var(--e-2) 0 0;
}
/* [css] .revenue-card{border-top:3px solid #bfd7d0;padding-top:14px}
   O friso do grupo de receita: cor da marca, nao o pastel da V6. */
.econ-cartao-receita { border-top: 3px solid var(--ag-ciano); padding-top: 14px; }

/* --- as cinco etapas ------------------------------------------------ */
/* [css] .five-stages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;
        border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:16px} */
.fileira-etapas {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
  border: 1px solid var(--borda); border-radius: var(--r-2);
  overflow: hidden; margin-top: var(--e-4);
}
/* [css] .funnel-step{border-right:1px solid var(--line);background:#fbfcfc;padding:15px 16px 16px} */
.etapa-funil {
  border-right: 1px solid var(--borda); background: var(--superficie-alta);
  padding: 15px 16px 16px; display: flex; flex-direction: column;
  gap: 6px; min-width: 0;
}
.etapa-funil:last-child { border-right: none; }
/* [css] .stage-index{font-size:10px;letter-spacing:1px;margin-bottom:6px} */
.etapa-indice {
  font-size: var(--t-micro); letter-spacing: 1px; color: var(--texto-fraco);
  font-family: var(--fonte-num);
}
/* [css] .step-label{font-size:12px;font-weight:750;line-height:1.4;min-height:34px} */
.etapa-rotulo {
  font-size: var(--t-peq); font-weight: var(--peso-forte);
  line-height: 1.4; min-height: 34px;
}
.etapa-valor { min-height: 28px; display: flex; align-items: center; }
.etapa-motivo { font-size: var(--t-micro); color: var(--texto-fraco); line-height: 1.45; }

/* --- taxas ----------------------------------------------------------- */
/* [css] .rates-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px} */
.grade-taxas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
/* [css] .rate-card{border:1px solid var(--line);border-radius:11px;padding:16px 17px;gap:7px} */
.taxa-cartao {
  border: 1px solid var(--borda); border-radius: 11px; padding: 16px 17px;
  background: var(--superficie-alta); display: flex; flex-direction: column; gap: 7px;
}
.taxa-rotulo { font-size: var(--t-peq); font-weight: var(--peso-forte); }
/* [css] .rate-value{font-size:30px;...} -- mesma logica do econ-valor */
.taxa-valor { min-height: 34px; display: flex; align-items: center; }
/* [css] .rate-base{font-size:13px;font-weight:700} + span{font-size:10px;font-weight:400} */
.taxa-base { font-size: var(--t-peq); color: var(--texto-suave); font-family: var(--fonte-num); }
.taxa-limite { font-size: var(--t-micro); color: var(--texto-fraco); line-height: 1.5; }

/* --- controle segmentado --------------------------------------------- */
/* [css] .segmented{display:flex;gap:3px;padding:3px;border-radius:8px;border:1px solid #e2e8ea} */
.segmentado {
  display: flex; gap: 3px; padding: 3px; background: var(--superficie-alta);
  border-radius: var(--r-2); border: 1px solid var(--borda);
}
/* [css] .segmented button{font-size:10px;font-weight:700;padding:4px 8px;border-radius:5px} */
.segmentado-opcao {
  font-size: var(--t-micro); font-weight: var(--peso-forte);
  padding: 4px 8px; border-radius: 5px; color: var(--texto-fraco);
  white-space: nowrap; cursor: default;
}
/* Ativo tem fundo, nao cor de marca: o azul e' do item de navegacao
   ativo da lateral, e repeti-lo aqui faria duas coisas diferentes
   parecerem a mesma. */
.segmentado-opcao.active { background: var(--superficie); color: var(--texto); }

/* --- corpo de tabela sem linhas -------------------------------------- */
.celula-ausente {
  padding: var(--e-5) var(--e-3); text-align: left;
}
.celula-ausente .estado { margin-right: var(--e-2); }

/* --- grafico ausente -------------------------------------------------- */
/* Altura de 224px = o viewBox do SVG da previa (chart(): h=224), pra a
   pagina nao mudar de tamanho quando a serie entrar. */
.grafico-ausente {
  min-height: 224px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--e-2);
  border: 1px dashed var(--borda-forte); border-radius: var(--r-2);
  background: var(--superficie-alta); padding: var(--e-4); text-align: center;
}
/* [css] .grid-charts{display:grid;grid-template-columns:1.23fr 1fr;gap:17px;margin-bottom:18px} */
.grade-graficos { display: grid; grid-template-columns: 1.23fr 1fr; gap: 17px; margin-bottom: 18px; }
.grade-graficos > .painel { margin-bottom: 0; }
/* [css] .analysis-section>.panel-head{margin:22px 0 14px} + h2{font-size:18px} */
.secao-analise > .painel-topo { margin: 22px 0 14px; }

/* --- prioridades ------------------------------------------------------ */
/* [css] .priorities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} */
.prioridades { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
/* [css] .priority{padding:16px;border:1px solid var(--line);border-radius:11px} */
.prioridade {
  padding: var(--e-4); border: 1px solid var(--borda); border-radius: 11px;
  display: grid; gap: var(--e-2); align-content: start;
  background: var(--superficie-alta);
}
/* [css] .priority .tag{font-size:9px;font-weight:750;letter-spacing:.6px;text-transform:uppercase} */
.prioridade-tag {
  font-size: 9px; font-weight: var(--peso-forte); letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--texto-fraco);
}
.prioridade h3 { margin: 0; font-size: var(--t-peq); font-weight: var(--peso-forte); }
.prioridade p { margin: 0; font-size: var(--t-micro); color: var(--texto-suave); line-height: 1.55; }

/* --- frase derivada de dado ------------------------------------------- */
.frase-derivada { display: grid; gap: var(--e-2); }
.frase-derivada-topo { display: flex; align-items: baseline; gap: var(--e-2); flex-wrap: wrap; }
.frase-derivada-regra { margin: 0; font-size: var(--t-peq); color: var(--texto-suave); }
.frase-derivada-ref { margin: 0; font-size: var(--t-micro); color: var(--texto-fraco); }
.frase-derivada-fonte { font-weight: var(--peso-forte); letter-spacing: 0.3px; }
.frase-derivada q { font-style: italic; }

/* --- bloco "outro dominio" da lateral (app.js sidebar) ---------------- */
/* [dom] rodape da lateral da V6: eyebrow, um link, e uma nota miuda.
   Vive dentro da casca escura dos dois temas, como o resto da lateral. */
.sidenav-dominio {
  padding: var(--e-3) 10px var(--e-2);
  margin-top: var(--e-2); border-top: 1px solid var(--nav-borda);
  display: grid; gap: 2px;
}
.sidenav-dominio small {
  font-size: 9px; color: var(--nav-texto-fraco); padding: 0 8px;
}

/* --- alternador de vista (`.view-switch`) ---------------------------- */
/* [css] .view-switch{display:flex;gap:8px;margin-bottom:18px}
   [css] .view-switch button{border:1px solid var(--line);border-radius:9px;padding:10px 14px;font-size:12px;font-weight:650} */
.alternador-vista { display: flex; gap: var(--e-2); margin-bottom: 18px; flex-wrap: wrap; }
.alternador-opcao {
  border: 1px solid var(--borda); border-radius: 9px; padding: 10px 14px;
  background: var(--superficie); font-size: var(--t-peq); font-weight: 650;
  color: var(--texto-fraco); cursor: default; display: inline-flex;
  align-items: center; gap: var(--e-2);
}
.alternador-opcao.active { background: var(--superficie-alta); color: var(--texto); border-color: var(--borda-forte); }
.alternador-opcao small { font-size: var(--t-micro); font-weight: 400; color: var(--texto-fraco); }

/* --- as cinco etapas, comparadas (`.stage-row`) ---------------------- */
/* [css] .stage-row{display:grid;grid-template-columns:148px 1fr 138px;align-items:center;gap:15px;
        padding:15px 0;border-bottom:1px solid #e9eff1} */
.linha-etapa {
  display: grid; grid-template-columns: 148px 1fr 220px; align-items: center;
  gap: 15px; padding: 15px 0; border-bottom: 1px solid var(--borda);
}
.linha-etapa:last-child { border-bottom: 0; }
/* [css] .stage-name{font-size:12px;font-weight:700;text-align:left} */
.linha-etapa-nome { font-size: var(--t-peq); font-weight: var(--peso-forte); }
/* [css] .stage-bars{display:grid;gap:5px} + .stage-track{height:15px;border-radius:3px;min-width:30px} */
.linha-etapa-barras { display: grid; gap: 5px; }
.trilha { height: 15px; background: var(--superficie-alta); border-radius: 3px; min-width: 30px; }
/* Trilha VAZIA, nao escondida: e' ela que mostra que existem duas
   medicoes sendo comparadas. A borda tracejada diz "cabe aqui, e nao
   veio" -- barra de largura zero pareceria valor zero. */
.trilha-anterior { border: 1px dashed var(--borda-forte); }
.trilha-recorte { border: 1px dashed var(--borda-forte); }
/* [css] .stage-val{text-align:right;font-size:13px;font-weight:750} */
.linha-etapa-valor {
  text-align: right; display: flex; flex-direction: column;
  align-items: flex-end; gap: 4px;
}

/* [css] .legend{display:flex;align-items:center;gap:12px;font-size:9px} */
.legenda { display: flex; align-items: center; gap: var(--e-3); font-size: 9px; color: var(--texto-fraco); }
.legenda span { display: inline-flex; align-items: center; gap: 5px; }
.legenda-marca { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
.legenda-anterior { background: var(--superficie-alta); border: 1px dashed var(--borda-forte); }
.legenda-recorte { background: var(--superficie-alta); border: 1px dashed var(--borda-forte); }

/* --- custo por etapa (`.cost-stages`) -------------------------------- */
/* [css] .cost-stages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px;margin-top:18px}
   [css] .cost-stages>div{border-left:2px solid #bfd7d0;padding:4px 11px} */
.custo-etapas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; margin-top: 18px; }
.custo-etapa {
  border-left: 2px solid var(--ag-ciano); padding: 4px 11px;
  display: grid; gap: 6px; align-content: start;
}
.custo-etapa-rotulo { font-size: var(--t-peq); color: var(--texto-suave); }

/* --- estreitando ------------------------------------------------------ */
@media (max-width: 1180px) {
  .grade-grupos { grid-template-columns: 1fr; gap: 18px; }
  .grade-graficos { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .custo-etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .linha-etapa { grid-template-columns: 1fr; gap: var(--e-2); }
  .linha-etapa-valor { text-align: left; align-items: flex-start; }
  .fileira-etapas { grid-template-columns: 1fr; border: 0; gap: 7px; }
  .etapa-funil { border: 1px solid var(--borda); border-radius: var(--r-2); }
  .grade-taxas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prioridades { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .fileira-cartoes { grid-template-columns: 1fr; }
  .grade-taxas { grid-template-columns: 1fr; }
  .painel { padding: 17px; }
}

/* --- heroi de plano (`.plan-hero`) ----------------------------------- */
.heroi-plano {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-4); flex-wrap: wrap; margin-bottom: 18px;
  background: var(--superficie); border: 1px solid var(--borda);
  border-left: 3px solid var(--ag-laranja); border-radius: var(--r-3);
  padding: var(--e-4) var(--e-5);
}
.heroi-plano-corpo { display: grid; gap: 6px; max-width: 78ch; }
.heroi-plano h2 { font-size: 19px; margin: 0; letter-spacing: -0.3px; }
.heroi-plano p { margin: 0; font-size: var(--t-peq); color: var(--texto-suave); line-height: 1.6; }

/* --- cartoes de indicador planejado (`.crm-card`) -------------------- */
.grade-planejados { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cartao-planejado {
  border: 1px solid var(--borda); border-radius: 12px; padding: 18px 16px;
  background: var(--superficie-alta); display: grid; gap: var(--e-2); align-content: start;
}
.cartao-planejado h3 { margin: 0; font-size: 15px; font-weight: var(--peso-forte); letter-spacing: -0.2px; }
.cartao-planejado-valor { min-height: 30px; display: flex; align-items: center; }
.cartao-planejado p { margin: 0; font-size: var(--t-micro); color: var(--texto-suave); line-height: 1.65; }

/* --- lista de perguntas planejadas (`.planning-row`) ----------------- */
.lista-planejada { display: grid; gap: 1px; background: var(--borda); border: 1px solid var(--borda); border-radius: var(--r-2); overflow: hidden; }
.linha-planejada {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  padding: 13px 15px; background: var(--superficie-alta); flex-wrap: wrap;
}
.linha-planejada-id { display: grid; gap: 3px; }
.linha-planejada-id small { font-size: var(--t-micro); color: var(--texto-fraco); }
.linha-planejada-estado { font-size: var(--t-micro); color: var(--texto-fraco); white-space: nowrap; }

/* --- ladrilhos "nao conectado" (`.pending-tile`/`.quality-summary`) --- */
/* [css] .pending-grid,.quality-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}
   [css] .pending-tile,.quality-summary>div{border:1px solid var(--line);padding:20px;border-radius:10px} */
.grade-ladrilhos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); }
.ladrilho {
  border: 1px solid var(--borda); padding: 20px; border-radius: var(--r-2);
  background: var(--superficie-alta); display: grid; gap: var(--e-2); align-content: start;
}
.ladrilho h3 { margin: 0; font-size: 14px; font-weight: var(--peso-forte); }
.ladrilho strong { font-size: 14px; }
.ladrilho p { margin: 0; font-size: var(--t-peq); color: var(--texto-suave); line-height: 1.7; }

/* --- grade de orcamento (`.budget-grid`) ------------------------------ */
/* [css] .budget-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin:20px 0}
   [css] .budget-grid>div{padding:19px;border:1px solid var(--line);border-radius:10px}
   [css] .budget-grid strong{font-size:27px;display:block;margin:12px 0 8px} */
.grade-orcamento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin: 20px 0 0; }
.caixa-orcamento {
  background: var(--superficie-alta); padding: 19px; border: 1px solid var(--borda);
  border-radius: var(--r-2); display: grid; gap: var(--e-2); align-content: start;
}
.caixa-orcamento > span { font-size: var(--t-peq); color: var(--texto-suave); }
.caixa-orcamento-valor { min-height: 34px; display: flex; align-items: center; margin: 4px 0; }
.caixa-orcamento small { font-size: 11px; color: var(--texto-fraco); line-height: 1.6; }

/* --- passos de implantacao (`.plan-steps`) ---------------------------- */
.passos-plano { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.passos-plano > article {
  border: 1px solid var(--borda); border-radius: var(--r-2); padding: var(--e-4);
  background: var(--superficie-alta); display: grid; gap: 6px; align-content: start;
}
.passo-indice { font-family: var(--fonte-num); font-size: var(--t-micro); color: var(--ag-ciano); letter-spacing: 1px; }
.passos-plano h3 { margin: 0; font-size: var(--t-peq); font-weight: var(--peso-forte); }
.passos-plano p { margin: 0; font-size: var(--t-micro); color: var(--texto-suave); line-height: 1.6; }

@media (max-width: 1180px) {
  .grade-orcamento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .passos-plano { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .grade-planejados, .grade-ladrilhos { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .grade-orcamento, .passos-plano { grid-template-columns: 1fr; }
}

/* =====================================================================
   BLOCOS DO AMBIENTE CONTEUDO & ORGANICO (`OrganicUI` na previa).
   Mesma casca, outra familia de cartao -- e' o vocabulario proprio
   daquele modulo da V6.
   ===================================================================== */

/* --- faixa de resultado do mes (`.month-executive`) ------------------ */
.faixa-resultado {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-4); flex-wrap: wrap; margin-bottom: 18px;
  background: var(--superficie); border: 1px solid var(--borda);
  border-left: 3px solid var(--ag-ciano); border-radius: var(--r-3);
  padding: var(--e-4) var(--e-5);
}
.faixa-resultado-corpo { display: grid; gap: 6px; max-width: 86ch; }

/* --- cartao mensal (`.monthly-card`) --------------------------------- */
.fileira-mensal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.cartao-mensal {
  border: 1px solid var(--borda); border-radius: 12px; padding: 18px 16px;
  background: var(--superficie); display: grid; gap: var(--e-2); align-content: start;
}
.cartao-mensal-rotulo { font-size: var(--t-peq); font-weight: var(--peso-forte); }
.cartao-mensal-valor { min-height: 36px; display: flex; align-items: center; }
.cartao-mensal-comp { font-size: var(--t-peq); font-weight: 650; color: var(--texto-suave); }
.cartao-mensal small { font-size: var(--t-micro); color: var(--texto-fraco); line-height: 1.55; }

/* --- cartao de canal (`.monthly-channel`) ---------------------------- */
.grade-canais { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cartao-canal {
  border: 1px solid var(--borda); border-top: 3px solid var(--ag-ciano);
  border-radius: 12px; padding: 18px; background: var(--superficie-alta);
  display: grid; gap: var(--e-3); align-content: start;
}
.cartao-canal-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }
.cartao-canal-topo h3 { margin: 0; font-size: 16px; font-weight: var(--peso-forte); letter-spacing: -0.2px; }
.cartao-canal-duas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); }
.canal-metrica { display: grid; gap: 6px; align-content: start; }
.canal-metrica > span { font-size: var(--t-peq); color: var(--texto-suave); }
.canal-metrica-valor { min-height: 28px; display: flex; align-items: center; }
.canal-metrica small { font-size: var(--t-micro); color: var(--texto-fraco); }
.cartao-canal-rodape { font-size: var(--t-micro); color: var(--texto-fraco); line-height: 1.55; }
.cartao-canal-acoes { display: flex; gap: var(--e-2); flex-wrap: wrap; }

/* --- ferramentas de tabela (`.o-table-tools`) ------------------------ */
.ferramentas-tabela {
  display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap;
  margin-bottom: var(--e-3);
}
.ferramenta { display: inline-flex; align-items: baseline; gap: var(--e-2); }
.ferramenta > span {
  font-size: var(--t-micro); color: var(--texto-fraco);
  text-transform: uppercase; letter-spacing: 0.7px; font-weight: var(--peso-forte);
}
.ferramenta-busca {
  flex: 1 1 220px; border: 1px solid var(--borda); border-radius: var(--r-1);
  padding: 7px 11px; background: var(--superficie-alta);
}

/* --- caixa vazia (`.empty`) ------------------------------------------ */
.caixa-vazia {
  border: 1px dashed var(--borda-forte); border-radius: var(--r-2);
  background: var(--superficie-alta); padding: var(--e-5);
  display: grid; gap: var(--e-2); justify-items: center; text-align: center;
}
.caixa-vazia h3 { margin: 0; font-size: 15px; font-weight: var(--peso-forte); }
.caixa-vazia p { margin: 0; font-size: var(--t-peq); color: var(--texto-suave); max-width: 72ch; }

/* --- lista de camadas (`.o-layer`) ------------------------------------ */
.lista-camadas { display: grid; gap: var(--e-2); }
.camada {
  display: flex; align-items: center; gap: var(--e-3);
  border: 1px solid var(--borda); border-radius: var(--r-2);
  padding: 12px 14px; background: var(--superficie-alta);
}
.camada-indice { font-family: var(--fonte-num); font-size: var(--t-micro); color: var(--ag-ciano); letter-spacing: 1px; }
.camada strong { display: block; font-size: var(--t-peq); }
.camada small { display: block; font-size: var(--t-micro); color: var(--texto-fraco); margin-top: 2px; }

/* --- prioridade com contagem (`.o-priority-number`) ------------------- */
.prioridade-contagem { min-height: 26px; display: flex; align-items: center; }

@media (max-width: 1180px) {
  .fileira-mensal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .grade-canais { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .fileira-mensal { grid-template-columns: 1fr; }
  .cartao-canal-duas { grid-template-columns: 1fr; }
}

/* --- cartao de acervo (`.o-card`) ------------------------------------ */
.grade-acervo { display: grid; gap: 14px; margin-bottom: 18px; }
.grade-acervo-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-acervo-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cartao-acervo {
  border: 1px solid var(--borda); border-radius: 12px; padding: 18px 16px;
  background: var(--superficie); display: grid; gap: var(--e-2);
  align-content: start; justify-items: start;
}
.cartao-acervo-rotulo { font-size: var(--t-peq); font-weight: var(--peso-forte); }
.cartao-acervo-valor { min-height: 36px; display: flex; align-items: center; }
.cartao-acervo-unidade { font-size: var(--t-micro); color: var(--texto-fraco); }
.cartao-acervo p { margin: 0; font-size: var(--t-micro); color: var(--texto-suave); line-height: 1.55; }

/* --- abertura escura do Conteudo (`.o-intro`) ------------------------ */
.abertura-conteudo {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-5); flex-wrap: wrap; margin-bottom: 18px;
  background: var(--nav-fundo); border: 1px solid var(--nav-borda);
  border-radius: var(--r-3); padding: var(--e-5);
}
.abertura-conteudo-corpo { display: grid; gap: var(--e-2); max-width: 70ch; }
.abertura-conteudo .eyebrow { color: var(--nav-texto-fraco); }
.abertura-conteudo h2 { margin: 0; font-size: 25px; line-height: 1.25; letter-spacing: -0.6px; color: #fff; }
.abertura-conteudo p { margin: 0; font-size: var(--t-peq); color: var(--nav-texto); line-height: 1.6; }
.abertura-rota { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.abertura-rota span {
  border: 1px solid var(--nav-borda); border-radius: var(--r-1);
  padding: 8px 13px; font-size: var(--t-peq); font-weight: 650; color: var(--nav-texto);
  background: var(--nav-fundo-hover);
}
.abertura-rota b { color: var(--nav-texto-fraco); }

/* --- passos numerados em fileira (`.o-process-steps`) ---------------- */
.passos-processo { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--e-2); }
.passos-processo > div {
  border-left: 2px solid var(--ag-ciano); padding: 4px 10px;
  display: grid; gap: 3px; align-content: start;
}
.passos-processo strong { font-size: var(--t-peq); }
.passos-processo small { font-size: 10px; color: var(--texto-fraco); line-height: 1.45; }

@media (max-width: 1180px) {
  .grade-acervo-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .passos-processo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .grade-acervo-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .grade-acervo-3, .grade-acervo-4 { grid-template-columns: 1fr; }
  .passos-processo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =====================================================================
   BLOCOS DO AMBIENTE ONBOARDING (previa V7).
   Outro documento, outro vocabulario de classe. As medidas vieram do
   `<style>` do proprio preview-v7-onboarding.html.
   ===================================================================== */

/* --- cartao de KPI (`.kpi`) ------------------------------------------ */
/* `auto-fit` em vez de 5 fixos: a faixa do Onboarding tem 5 cartoes e a
   do cockpit tem 6, e um numero cravado quebrava a segunda em 5+1 --
   medido na captura. A referencia poe as seis numa fileira so'. */
.fileira-kpi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px; margin-bottom: 18px;
}
.cartao-kpi {
  border: 1px solid var(--borda); border-radius: 12px; padding: 16px 14px;
  background: var(--superficie); display: grid; gap: 6px; align-content: start;
}
.cartao-kpi-rotulo { font-size: var(--t-peq); font-weight: var(--peso-forte); }
.cartao-kpi-valor { min-height: 32px; display: flex; align-items: center; }
.cartao-kpi small { font-size: var(--t-micro); color: var(--texto-fraco); line-height: 1.5; }

/* --- trilha de fases (`.phase-track`) -------------------------------- */
.trilha-fases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fase {
  border: 1px solid var(--borda); border-radius: var(--r-2); padding: 14px;
  background: var(--superficie-alta); display: grid; gap: 5px; align-content: start;
  border-top: 3px solid var(--borda-forte);
}
/* As quatro fases tem cor propria na previa. Aqui usam a mesma escala
   de acento, escurecendo -- nao a paleta dela: "estrutura se copia,
   paleta nao". A distincao entre fases fica na POSICAO e no numero. */
.fase-1 { border-top-color: var(--ag-ciano); }
.fase-2 { border-top-color: var(--ag-ciano); opacity: 0.92; }
.fase-3 { border-top-color: var(--ag-laranja); opacity: 0.92; }
.fase-4 { border-top-color: var(--ag-laranja); }
.fase-contagem { min-height: 24px; display: flex; align-items: center; }
.fase-numero {
  font-family: var(--fonte-num); font-size: 22px; font-weight: var(--peso-forte);
  color: var(--texto-fraco); line-height: 1;
}
.fase b { font-size: var(--t-peq); }
.fase small { font-size: var(--t-micro); color: var(--texto-fraco); line-height: 1.5; }

/* --- faixas de estagio (`.ribbon`) ----------------------------------- */
.faixas-estagio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-2); margin-top: var(--e-3); }
.faixa-estagio {
  border: 1px solid var(--borda); border-radius: var(--r-1); padding: 9px 12px;
  background: var(--superficie-alta); font-size: var(--t-micro);
}
.faixa-estagio strong { display: block; font-size: var(--t-peq); }
.faixa-estagio span { color: var(--texto-fraco); }

/* --- quadro do fluxo (`.flowboard`) ---------------------------------- */
.quadro-fluxo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.coluna-fluxo {
  border: 1px solid var(--borda); border-radius: var(--r-2); padding: 14px;
  background: var(--superficie-alta); display: grid; gap: var(--e-2); align-content: start;
  border-top: 3px solid var(--borda-forte);
}
.coluna-fluxo-1 { border-top-color: var(--ag-ciano); }
.coluna-fluxo-2 { border-top-color: var(--ag-ciano); }
.coluna-fluxo-3 { border-top-color: var(--ag-laranja); }
.coluna-fluxo-4 { border-top-color: var(--ag-laranja); }
.coluna-fluxo h3 { margin: 0; font-size: var(--t-peq); font-weight: var(--peso-forte); }
.coluna-fluxo > small { font-size: var(--t-micro); color: var(--texto-fraco); }
.marco {
  display: flex; gap: var(--e-2); border: 1px solid var(--borda);
  border-radius: var(--r-1); padding: 10px; background: var(--superficie);
}
.marco-numero {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  background: var(--superficie-alta); border: 1px solid var(--borda-forte);
  display: grid; place-content: center;
  font-family: var(--fonte-num); font-size: 10px; color: var(--texto-suave);
}
.marco b { font-size: var(--t-peq); }
.marco p { margin: 2px 0 5px; font-size: var(--t-micro); color: var(--texto-suave); line-height: 1.5; }
.marco-ferramenta {
  display: inline-block; font-size: 10px; color: var(--texto-fraco);
  border: 1px solid var(--borda); border-radius: var(--r-1); padding: 1px 6px;
}

/* --- regras de saida (`.rule`) --------------------------------------- */
.regras-saida { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.regra {
  display: flex; align-items: center; gap: var(--e-2);
  border: 1px solid var(--borda); border-radius: var(--r-2);
  padding: 13px 14px; background: var(--superficie-alta); font-size: var(--t-peq);
}
/* O marcador fica VAZIO de proposito: se a regra esta atendida e'
   pergunta sobre um cliente, e nao ha cliente. Circulo tracejado =
   "cabe um estado aqui, e ele nao veio". */
.regra-marca {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  border: 1px dashed var(--borda-forte); background: var(--superficie);
}

/* --- cartoes de fonte (`.source`) ------------------------------------ */
.grade-fontes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.cartao-fonte {
  border: 1px solid var(--borda); border-radius: 12px; padding: 16px;
  background: var(--superficie); display: grid; gap: var(--e-2); align-content: start;
  justify-items: start;
}
.cartao-fonte b { font-size: var(--t-peq); }
.cartao-fonte p { margin: 0; font-size: var(--t-micro); color: var(--texto-suave); line-height: 1.6; }
.cartao-fonte code {
  font-family: var(--fonte-num); font-size: var(--t-micro); color: var(--ag-ciano);
  border: 1px solid var(--borda); border-radius: var(--r-1); padding: 2px 7px;
  background: var(--superficie-alta);
}

@media (max-width: 1180px) {
  .fileira-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quadro-fluxo, .grade-fontes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trilha-fases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .regras-saida { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .fileira-kpi, .quadro-fluxo, .grade-fontes,
  .trilha-fases, .regras-saida, .faixas-estagio { grid-template-columns: 1fr; }
}

/* =====================================================================
   BLOCOS DO COCKPIT DE GESTAO (aba 4, PLANILHAS) -- piloto de 20/09.

   O cockpit original e terminal-like: monoespacado, denso, fundo quase
   preto. Aqui ele entra no NOSSO molde -- decisao do Artur, "o restante
   seguimos no mesmo molde" -- entao o que se copia e a DENSIDADE e a
   forma da matriz, nao a tipografia de terminal nem a paleta dele.

   A unica coisa monoespacada que fica e' o que ja' e' monoespacado nesta
   casa: numero e codigo (--fonte-num).
   ===================================================================== */

/* --- matriz com cabecalho de dois niveis ----------------------------- */
table.matriz th { vertical-align: bottom; }
.matriz-grupos th {
  border-bottom: 1px solid var(--borda);
  padding-bottom: 4px; font-size: 10px; letter-spacing: 1px;
  color: var(--texto-fraco); text-align: left;
}
/* Grupo com nome ganha borda a esquerda -- e' ela que mostra onde um
   canal comeca e o outro termina, que e o unico jeito de ler a matriz
   sem contar colunas. */
.matriz-grupo { border-left: 1px solid var(--borda); padding-left: 8px; }
.matriz-col { display: block; }
.matriz-sub {
  display: block; margin-top: 3px; font-weight: 400;
  font-size: 10px; color: var(--texto-fraco); white-space: normal; max-width: 12ch;
}
/* A segunda linha do cabecalho: a cobertura da coluna. Na referencia e
   "4/10 ok"; aqui e' o selo de ausencia, menor que o rotulo. */
.matriz-cob { display: block; margin-top: 5px; font-weight: 400; }
table.matriz th, table.matriz td { white-space: nowrap; }

/* --- legenda de glifos ------------------------------------------------ */
.legenda-glifos {
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4);
  font-size: var(--t-micro); color: var(--texto-suave); line-height: 1.7;
}
.glifo-item { display: inline-flex; align-items: baseline; gap: 6px; max-width: 52ch; }
/* O glifo herda a familia de numero: ele e' simbolo de estado, e a
   largura fixa mantem a coluna alinhada quando a legenda quebra. */
.glifo {
  font-family: var(--fonte-num); font-size: var(--t-peq);
  color: var(--ag-ciano); min-width: 1.1em; text-align: center;
  white-space: nowrap;
}
.legenda-corte { border: 0; border-top: 1px solid var(--borda); margin: var(--e-3) 0; }

/* --- barra de estado do rodape ---------------------------------------- */
.barra-estado {
  border: 1px solid var(--borda); border-radius: var(--r-2);
  background: var(--superficie); padding: var(--e-3) var(--e-4); margin-bottom: 18px;
}
.barra-estado-itens { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); }
.barra-estado-item { display: inline-flex; align-items: baseline; gap: 6px; }
.barra-estado-rotulo {
  font-size: var(--t-micro); letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--texto-fraco); font-weight: var(--peso-forte);
}

@media (max-width: 720px) {
  .glifo-item { max-width: none; }
}

/* --- a LINHA do cockpit ---------------------------------------------- */
.grade-linhas { display: grid; gap: 7px; margin-bottom: var(--e-3); }
.grade-linhas-2 { grid-template-columns: 1fr 1fr; }
.grade-linhas-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.linha-cockpit {
  display: flex; align-items: baseline; gap: var(--e-2);
  border: 1px solid var(--borda); border-radius: var(--r-1);
  background: var(--superficie); padding: 9px 13px;
}
.linha-cockpit-contagem { flex: 0 0 auto; }
.linha-cockpit-rotulo {
  font-family: var(--fonte-num); font-size: var(--t-peq);
  font-weight: var(--peso-forte); letter-spacing: 0.3px;
}
.linha-cockpit-nota {
  margin-left: auto; text-align: right; font-size: var(--t-micro);
  color: var(--texto-fraco); line-height: 1.5; max-width: 52%;
}

/* A linha de fonte pronta e a mesma forma da de ausencia, com a borda
   pela cor de info -- de relance a fileira mostra quantas ja tem fonte
   sem precisar ler selo por selo. */
.linha-fonte-pronta { border-color: var(--info); }

/* --- faixa de contexto ------------------------------------------------ */
.faixa-contexto {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2) 0;
  margin-bottom: var(--e-3); font-size: var(--t-micro);
  letter-spacing: 0.8px; text-transform: uppercase; color: var(--texto-fraco);
}
.faixa-contexto-item { display: inline-flex; align-items: baseline; gap: 6px; padding: 0 var(--e-3); }
.faixa-contexto-item + .faixa-contexto-item { border-left: 1px solid var(--borda); }
.faixa-contexto-item:first-child { padding-left: 0; }
.faixa-contexto-item.forte { color: var(--marca-texto); font-weight: var(--peso-forte); }

/* --- cabecalho de secao do cockpit ------------------------------------ */
.cabecalho-cockpit {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e-3); flex-wrap: wrap;
  margin: var(--e-4) 0 var(--e-2); font-size: var(--t-micro);
  letter-spacing: 0.9px; text-transform: uppercase; color: var(--texto-suave);
  font-weight: var(--peso-forte);
}
.cabecalho-cockpit-nota {
  text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--texto-fraco);
}

/* --- tile do cockpit -- valor em cima, rotulo embaixo ------------------ */
.fileira-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px; margin-bottom: var(--e-3);
}
.tile-cockpit {
  border: 1px solid var(--borda); border-radius: var(--r-2);
  background: var(--superficie); padding: 14px 16px;
  display: grid; gap: 4px; align-content: start;
}
.tile-cockpit-valor { min-height: 30px; display: flex; align-items: center; }
.tile-cockpit-rotulo {
  font-family: var(--fonte-num); font-size: var(--t-micro);
  letter-spacing: 0.8px; text-transform: uppercase; color: var(--texto-suave);
  font-weight: var(--peso-forte);
}
.tile-cockpit small { font-size: var(--t-micro); color: var(--texto-fraco); line-height: 1.5; }

@media (max-width: 980px) {
  .grade-linhas-2, .grade-linhas-3 { grid-template-columns: 1fr; }
  .linha-cockpit-nota { max-width: none; }
}

@media print {
  .sidebar, .mobile-nav, .topo-dir, .barra-filtro { display: none; }
}


/* =====================================================================
   Calendario editorial -- a grade do mes (`calendarGrid()` da previa,
   linha 294 de originais/preview-v6.html).

   Geometria copiada numero por numero: grid de 7 colunas com minimo de
   100px, celula de 149px de altura minima, 3px de borda no evento, o
   titulo cortado em 2 linhas. O `min-width` de 775px e o
   `.o-calendar-scroll` em volta sao o que faz a grade rolar na
   horizontal em vez de espremer sete colunas num telefone -- sem eles a
   celula fica com 40px e o calendario deixa de ser legivel.

   🚨 CORES SAO TOKEN, NUNCA HEX. A previa e' clara e este painel tem
   dois temas; as cores cruas dela entrariam ilegiveis no escuro. A cor
   por canal mora no theme.css, com a medicao de contraste que a
   justifica.
   ===================================================================== */
.o-calendar-scroll { overflow-x: auto; }

.o-calendar {
  display: grid; grid-template-columns: repeat(7, minmax(100px, 1fr));
  gap: 7px; min-width: 775px; margin-top: var(--e-3);
}

.o-weekday {
  text-align: center; text-transform: uppercase; font-size: var(--t-micro);
  color: var(--texto-suave); padding: 10px; font-weight: 700;
}

.o-day {
  min-height: 149px; border: 1px solid var(--borda);
  background: var(--superficie); border-radius: var(--r-2);
  padding: 8px; min-width: 0;
}

/* Os quadrados antes do dia 1. Eles NAO sao enfeite: sem eles o dia 1
   nao cai na coluna do dia da semana certo e o mes inteiro desliza. */
.o-day.o-out { background: var(--superficie-alta); border-style: dashed; opacity: .5; }

/* O dia de hoje, na V6 uma borda de 2px. Aqui usa o acento de marca em
   vez do teal cru dela -- e' a mesma funcao (destacar sem colorir
   estado) com a cor que esta casa ja' decidiu. */
.o-day.o-today { border: 2px solid var(--ag-ciano); padding: 7px; }

.o-dayhead {
  display: flex; justify-content: space-between;
  font-size: var(--t-peq); padding: 2px 2px 6px;
}
.o-dayhead span { font-size: var(--t-micro); color: var(--texto-suave); }

/* `<button>` porque e' o que a referencia desenha -- o clique abre a
   pauta, e isso e' etapa 3. Fica `disabled`, e por isso precisa de
   `color: inherit`: o padrao do navegador acinzenta o texto todo e o
   titulo da pauta sumiria. */
.o-event {
  border: 0; border-left: 3px solid var(--canal-outro); border-radius: 5px;
  background: var(--canal-outro-fundo); width: 100%; padding: 7px 6px;
  margin: 4px 0; text-align: left; min-width: 0;
  color: var(--texto); font-family: inherit;
}
.o-event[disabled] { cursor: default; opacity: 1; }

.o-event.canal-blog_organico { background: var(--canal-blog-fundo); border-left-color: var(--canal-blog); }
.o-event.canal-youtube_organico { background: var(--canal-youtube-fundo); border-left-color: var(--canal-youtube); }
.o-event.canal-instagram_organico { background: var(--canal-instagram-fundo); border-left-color: var(--canal-instagram); }

.o-event > span {
  display: block; font-size: 9px; font-weight: 750;
  color: var(--texto-suave); line-height: 1.4;
}
/* O clamp de 2 linhas e' da previa. Sem ele, um titulo longo estica a
   celula e arrasta a linha inteira da grade junto. */
.o-event strong {
  font-size: var(--t-micro); line-height: 1.5; margin: 5px 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.o-event small { font-size: 9px; line-height: 1.4; display: block; color: var(--texto-fraco); }

/* "+ 3 registros". E' o que mantem a promessa de que a contagem do
   cabecalho do dia e' o total, e nao o que coube. */
.o-mais { display: block; font-size: var(--t-micro); color: var(--texto-suave); padding: 2px; }

/* =====================================================================
   ACABAMENTO BEHANCE — componentes comuns (24/09/2026)

   Esta camada troca apenas a pele. Ordem, rotulos, estados, ARIA e
   comportamento continuam definidos pelos mesmos modulos.
   ===================================================================== */
::selection { background: var(--acento-ui-fraco); color: var(--texto); }

input[type="email"], input[type="password"], input[type="search"] {
  background: var(--superficie);
  border-color: var(--borda-forte);
  border-radius: 10px;
  min-height: 40px;
}

input:focus-visible, button:focus-visible, a:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

.btn {
  border-color: var(--borda-forte);
  background: var(--tile);
  border-radius: 10px;
}
.btn-primario {
  background: var(--acento-ui);
  border-color: var(--acento-ui);
  color: var(--texto-inverso);
}
.btn-linha, .textbtn { color: var(--acento-ui); }
.btn-icone { border-color: var(--borda-forte); border-radius: 9px; }

.topo {
  height: var(--topo-altura);
  gap: 22px;
  padding: 0 24px;
  box-shadow: 0 4px 18px #102C3F08;
}
.workspace, .mode-control {
  background: var(--superficie-alta);
  border-radius: 11px;
}
.workspace a, .mode-control a {
  border-radius: 8px;
  padding: 8px 12px;
}
.workspace a.active {
  background: var(--nav-fundo);
  color: var(--nav-texto);
  box-shadow: 0 4px 14px #05172026;
}
.mode-control a.active {
  background: var(--acento-ui-fraco);
  color: var(--acento-ui);
}
.mode-control a.active.demo { background: var(--demo-fundo); color: var(--demo); }

.frame {
  background: var(--fundo);
  min-height: calc(100vh - var(--topo-altura));
}
.sidebar {
  height: calc(100vh - var(--topo-altura));
  top: var(--topo-altura);
  padding: 20px 13px;
}
.sideintro { padding: 0 11px 18px; }
.sideintro strong { font-size: 23px; letter-spacing: -.055em; margin-top: 8px; }
.sideintro p { font-size: 11px; color: var(--nav-texto); }
.sidenav, .sidenav-sistema { gap: 3px; }
.sidenav-item {
  border-radius: 10px;
  padding: 10px 11px;
  font-size: 11px;
}
.sidenav-item.active {
  box-shadow: 0 6px 18px #0002;
}

.conteudo {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 24px clamp(20px, 2.7vw, 48px) 35px;
}
.pagina-topo { align-items: flex-end; margin-bottom: 18px; }
.pagina-id .eyebrow { letter-spacing: .16em; }
.pagina-titulo { line-height: 1.1; letter-spacing: -.05em; }
.pagina-sub { font-size: 11px; color: var(--texto-suave); }
.pagina-corpo { gap: 17px; }

.barra-controles {
  align-items: stretch;
  gap: 0;
  padding: 12px 14px;
  border-radius: 16px;
  box-shadow: var(--sombra);
  margin-bottom: 10px;
}
.barra-controles > div:not(.barra-controles-direita) {
  flex: 1 1 170px;
  padding: 0 14px;
  border-right: 1px solid var(--borda);
}
.barra-controles > div:first-child { padding-left: 0; }
.barra-controles-rotulo { font-size: 9px; letter-spacing: .13em; }
.barra-controles-direita {
  margin-left: auto;
  padding: 1px 0 1px 15px;
  border-left: 0;
}
.btn-inerte { background: var(--tile); border-color: var(--borda-forte); border-radius: 10px; }

.qualityline { margin: 0 1px 18px; color: var(--texto-fraco); }
.qualityline strong { color: var(--texto-suave); }

.painel {
  border-radius: 18px;
  box-shadow: var(--sombra);
  margin-bottom: 17px;
}
.painel-topo { gap: 20px; margin-bottom: 14px; }
.painel-sub { font-size: 11px; }
.painel-rodape, .bloco-causa { color: var(--texto-fraco); }

.cartao, .bloco-leitura, .bloco-estado, .tabela-wrap,
.serie, .esqueleto-tabela, .login-caixa {
  border-radius: 13px;
}
.login-caixa { box-shadow: var(--sombra); }
.tabela-wrap { background: var(--superficie); }
table.dados th { background: var(--superficie-alta); color: var(--texto-fraco); }
table.dados td { border-color: var(--borda-tabela); }
table.dados tbody tr:hover { background: var(--selecao-fundo); }
.cod { color: var(--acento-ui); }
.ficha { background: var(--chip-fundo); }
.bloco-leitura { border-left-color: var(--acento-ui); }
.serie-barra > i { background: var(--serie-atual); }
.serie-barra.selecionado { outline-color: var(--acento-ui); }

:root:not([data-tema="claro"]) .workspace a.active {
  background: var(--ativo-gradiente);
  border-color: var(--ativo-borda);
}

@media (max-width: 900px) {
  .sidebar { height: auto; padding: var(--e-3); }
  .sidenav-item { border-radius: 0; }
  .sidenav-item.active { box-shadow: none; }
}

@media (max-width: 620px) {
  .topo { height: auto; }
  .frame { min-height: 0; }
}

@media (max-width: 700px) {
  .conteudo { padding: 18px 12px 84px; }
  .barra-controles { padding: 9px; }
  .barra-controles > div:not(.barra-controles-direita) {
    flex: 1 0 45%;
    padding: 7px 10px;
    border-right: 0;
  }
  .barra-controles > div:first-child { padding-left: 10px; }
  .painel { padding: 15px; }
}

/* =====================================================================
   ACABAMENTO BEHANCE — familias de pagina

   Superficies, densidade e hierarquia visual somente. Estados de dado,
   deltas e cores de canal continuam usando seus papeis semanticos.
   ===================================================================== */
.painel .secao-titulo {
  font-size: var(--t-med);
  line-height: 1.2;
  letter-spacing: -.03em;
}

.amostra-caixa {
  background: var(--tile);
  border-radius: 13px;
}

/* Growth: cartoes, funil, taxas e comparacao. */
.econ-cartao,
.taxa-cartao,
.cartao-planejado,
.ladrilho,
.caixa-orcamento,
.passos-plano > article {
  background: var(--tile);
  border-radius: 13px;
}

.econ-cartao-receita { border-top-color: var(--acento-ui); }
.fileira-etapas { border-radius: 12px; }
.etapa-funil {
  min-height: 157px;
  padding: 14px 14px 12px;
  background: var(--tile);
}
.etapa-funil-viva .etapa-valor {
  gap: var(--e-2);
  flex-wrap: wrap;
  font-size: 32px;
  line-height: 1.1;
  font-weight: var(--peso-forte);
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
}

.grade-taxas { gap: 12px; }
.taxa-cartao {
  min-height: 139px;
  padding: 14px 16px;
}
.taxa-cartao-viva .taxa-valor {
  gap: var(--e-2);
  flex-wrap: wrap;
  font-size: 28px;
  line-height: 1;
  font-weight: var(--peso-forte);
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
}

.segmentado {
  padding: 3px;
  border-radius: 10px;
  background: var(--superficie-alta);
}
.segmentado-opcao { padding: 5px 9px; border-radius: 7px; }
.segmentado-opcao.active {
  background: var(--superficie);
  color: var(--texto);
  box-shadow: 0 1px 4px #0001;
}

.alternador-opcao { border-radius: 10px; padding: 10px 15px; }
.alternador-opcao.active {
  background: var(--acento-ui-fraco);
  border-color: var(--acento-ui);
  color: var(--acento-ui);
}
:root:not([data-tema="claro"]) .alternador-opcao.active {
  background: var(--ativo-gradiente);
  border-color: var(--ativo-borda);
  color: var(--texto);
}

.grafico-ausente,
.prioridade {
  background: var(--tile);
  border-radius: 13px;
}

.linha-etapa {
  grid-template-columns: 175px minmax(0, 1fr) 100px;
  gap: 20px;
  padding: 11px 0;
}
.linha-etapa-barras { gap: 4px; }
.trilha { height: 10px; border-radius: 3px; overflow: hidden; }
.trilha-anterior,
.legenda-anterior { border-color: var(--serie-anterior); }
.trilha-recorte,
.legenda-recorte { border-color: var(--serie-atual); }
.legenda-anterior { background: var(--serie-anterior); }
.legenda-recorte { background: var(--serie-atual); }
.legenda-marca { width: 7px; height: 7px; border: 0; border-radius: 50%; }

.custo-etapa {
  min-height: 72px;
  border-left-color: var(--borda-forte);
  padding: 5px 13px;
}
.custo-etapa:first-child { border-left-color: var(--acento-ui); }

/* Planejamento e faixas executivas. */
.heroi-plano,
.faixa-resultado {
  border-left-color: var(--acento-ui);
  box-shadow: var(--sombra);
}
.lista-planejada { border-radius: 13px; }
.linha-planejada { background: var(--tile); }
.passo-indice { color: var(--acento-ui); }

/* Conteudo e Organico. */
.cartao-mensal,
.cartao-canal,
.cartao-acervo {
  background: var(--tile);
  border-radius: 13px;
}
.cartao-canal { border-top-color: var(--acento-ui); }
.ferramenta-busca {
  background: var(--tile);
  border-color: var(--borda-forte);
  border-radius: 10px;
}
.caixa-vazia { background: var(--tile); border-radius: 13px; }
.camada { background: var(--tile); border-radius: 10px; }
.camada-indice { color: var(--acento-ui); }
.abertura-conteudo { border-radius: 18px; box-shadow: var(--sombra); }
.passos-processo > div { border-left-color: var(--acento-ui); }

/* Onboarding. As cores de fase e fluxo permanecem posicionais. */
.cartao-kpi,
.fase,
.faixa-estagio,
.coluna-fluxo,
.regra,
.cartao-fonte { background: var(--tile); }
.cartao-kpi,
.fase,
.coluna-fluxo,
.cartao-fonte { border-radius: 13px; }
.faixa-estagio,
.regra { border-radius: 9px; }
.marco { background: var(--superficie); border-radius: 9px; }
.marco-numero {
  background: var(--acento-ui-fraco);
  border-color: var(--acento-ui);
  color: var(--acento-ui);
}
.cartao-fonte code {
  color: var(--acento-ui);
  background: var(--superficie-alta);
}

/* Cockpit e matriz. */
.matriz-grupo { border-left-color: var(--borda-forte); }
.barra-estado { border-radius: 13px; }
.linha-cockpit { background: var(--tile); border-radius: 9px; }
.linha-fonte-pronta { border-color: var(--info); }
.tile-cockpit { background: var(--tile); border-radius: 13px; }

/* Calendario. Cores canal-* permanecem exclusivas dos canais. */
.o-calendar-scroll {
  padding-bottom: 6px;
  scrollbar-color: var(--borda-forte) var(--superficie-alta);
}
.o-calendar { gap: 8px; }
.o-weekday { letter-spacing: .09em; }
.o-day { background: var(--tile); border-radius: 13px; padding: 9px; }
.o-day.o-out { background: var(--superficie-alta); }
.o-day.o-today { border-color: var(--acento-ui); padding: 8px; }
.o-event { border-radius: 8px; padding: 8px 7px; }

@media (max-width: 1100px) and (min-width: 981px) {
  .linha-etapa { grid-template-columns: 140px minmax(0, 1fr) 85px; }
}

@media (max-width: 980px) {
  .linha-etapa { grid-template-columns: 1fr; gap: var(--e-2); }
  .linha-etapa-valor { text-align: left; align-items: flex-start; }
  .etapa-funil { min-height: 0; }
}

/* =====================================================================
   EVOLUCAO EXECUTIVO CALMO — 25/09/2026

   Segunda passada visual orientada por referencias de dashboards B2B.
   Somente pele: nenhum bloco muda de ordem, nenhum texto muda e nenhum
   estado de dado ganha significado novo.
   ===================================================================== */

/* O grid do corpo ja separa os filhos. Margens herdadas dos componentes
   dobravam o intervalo e alongavam artificialmente as telas. */
.pagina-corpo > .painel,
.pagina-corpo > .grade-grupos,
.pagina-corpo > .alternador-vista,
.pagina-corpo > .grade-graficos,
.pagina-corpo > .heroi-plano,
.pagina-corpo > .faixa-resultado,
.pagina-corpo > .fileira-mensal,
.pagina-corpo > .grade-acervo,
.pagina-corpo > .abertura-conteudo,
.pagina-corpo > .grade-fontes,
.pagina-corpo > .barra-estado,
.pagina-corpo > .grade-linhas,
.pagina-corpo > .faixa-contexto,
.pagina-corpo > .secao-analise > .grade-graficos {
  margin-bottom: 0;
}

/* Dois niveis de elevacao: paineis comuns ficam quietos; filtros e
   aberturas de contexto recebem a enfase maior. */
.painel {
  border-radius: 16px;
  box-shadow: var(--sombra-baixa);
}
.pagina-titulo { letter-spacing: -.035em; }
.login-caixa { border-radius: 16px; }
.barra-controles,
.bloco-leitura,
.heroi-plano,
.faixa-resultado,
.abertura-conteudo,
.login-caixa {
  box-shadow: var(--sombra-alta);
}

/* Microtexto fica reservado a tags e rotulos. Explicacoes ganham o
   degrau de 12px sem alterar o conteudo nem a hierarquia do DOM. */
.painel-rodape,
.bloco-causa,
.ausente-motivo,
.pagina-sub,
.painel-sub,
.bloco-leitura-texto,
.bloco-motivo,
.bloco-fonte,
.aviso,
.econ-motivo,
.etapa-motivo,
.taxa-limite,
.prioridade p,
.frase-derivada-ref,
.cartao-planejado p,
.indicador-motivo,
.indicador-nota,
.rodape-secao,
.cartao-mensal small,
.cartao-canal-rodape,
.passos-plano p,
.cartao-acervo p,
.passos-processo small,
.cartao-kpi small,
.marco p,
.cartao-fonte p,
.linha-cockpit-nota,
.cabecalho-cockpit-nota,
.tile-cockpit small {
  font-size: var(--t-nota);
}

/* Acoes de cabecalho: ghost button apenas onde existe interacao real. */
.painel-acao > :is(a, button).textbtn:not(.textbtn-pendente) {
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--borda-forte);
  border-radius: 10px;
  background: transparent;
  color: var(--texto-suave);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    color var(--movimento-rapido) var(--easing-ui),
    border-color var(--movimento-rapido) var(--easing-ui),
    background-color var(--movimento-rapido) var(--easing-ui),
    transform var(--movimento-rapido) var(--easing-ui);
}
.painel-acao > :is(a, button).textbtn:not(.textbtn-pendente):hover {
  color: var(--acento-ui);
  border-color: var(--acento-ui);
  background: var(--acento-ui-fraco);
  text-decoration: none;
  transform: translateY(-1px);
}

/* Corrige a cascata da camada Behance: acao pendente nao pode recuperar
   a cor teal de link e parecer clicavel. */
.textbtn.textbtn-pendente,
.btn-linha.textbtn-pendente {
  color: var(--texto-fraco);
  cursor: default;
  text-decoration: none;
}
.textbtn.textbtn-pendente:hover,
.btn-linha.textbtn-pendente:hover {
  color: var(--texto-fraco);
  text-decoration: none;
}

/* Cada grupo economico vira uma familia visual; os cartoes e a ordem
   interna permanecem exatamente os mesmos. */
.grade-grupos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.grupo-cartoes {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--borda);
  border-radius: 16px;
  background: var(--superficie-alta);
}
.grupo-titulo {
  margin: 0 0 10px;
  padding: 0 2px 10px;
  border-bottom: 1px solid var(--borda-tabela);
}

/* Um grafico vazio continua explicitamente vazio, mas passa a ter a
   mesma moldura de leitura de um grafico que recebera dados. */
.grafico-ausente {
  background-color: var(--tile);
  background-image:
    linear-gradient(to right, var(--grade-grafico) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grade-grafico) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* O funil ganha continuidade de processo sem inventar progresso. A
   seta e neutra; dado existente usa acento, nunca a cor semantica OK. */
.etapa-funil { position: relative; }
.etapa-indice {
  min-width: 27px;
  height: 27px;
  padding: 0 7px;
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
  background: var(--superficie);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  color: var(--texto-suave);
  letter-spacing: .06em;
}
.etapa-funil:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 25px;
  right: 13px;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--texto-fraco);
  border-right: 1px solid var(--texto-fraco);
  transform: rotate(45deg);
}
.econ-cartao-vivo,
.etapa-funil-viva,
.taxa-cartao-viva {
  background: var(--selecao-fundo);
  box-shadow: inset 3px 0 0 var(--acento-ui);
}

.workspace { padding: 4px; }
.btn-inerte {
  background: transparent;
  border-style: dashed;
  box-shadow: none;
}

.sidenav-item,
.btn,
.btn-icone {
  transition:
    color var(--movimento-rapido) var(--easing-ui),
    border-color var(--movimento-rapido) var(--easing-ui),
    background-color var(--movimento-rapido) var(--easing-ui),
    box-shadow var(--movimento-padrao) var(--easing-ui);
}

@media (max-width: 980px) {
  .grade-grupos { grid-template-columns: 1fr; }
  .etapa-funil:not(:last-child)::after { content: none; }
}

@media (max-width: 700px) {
  .painel-acao > :is(a, button).textbtn:not(.textbtn-pendente) { min-height: 44px; }
  .mobile-nav a,
  .mobile-mais-botao { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .sidenav-item,
  .btn,
  .btn-icone,
  .painel-acao > :is(a, button).textbtn:not(.textbtn-pendente) {
    transition: none;
  }
  .painel-acao > :is(a, button).textbtn:not(.textbtn-pendente):hover {
    transform: none;
  }
}

/* =====================================================================
   VARIACAO ESTRUTURAL · FUNIL COMO MESA DE DIAGNOSTICO

   Escopo local: estas classes so existem em crescimento/funil quando
   a URL traz `estrutura=diagnostico`. Cores usam papeis ja existentes
   no design system; atencao continua semantica e o acento continua UI.
   ===================================================================== */
.pagina-corpo-diagnostico {
  gap: 18px;
}

.diagnostico-contexto,
.diagnostico-resultado,
.diagnostico-estrategicos,
.diagnostico-cobertura {
  min-width: 0;
}

.diagnostico-contexto {
  display: grid;
  gap: 17px;
  padding: 20px;
  border: 1px solid var(--borda);
  border-radius: 16px;
  background: var(--superficie);
  box-shadow: var(--sombra-baixa);
}

.diagnostico-contexto-topo,
.diagnostico-secao-topo,
.diagnostico-cobertura > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.diagnostico-contexto h2,
.diagnostico-secao-topo h2 {
  margin: 3px 0 0;
  color: var(--texto);
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.15;
  letter-spacing: -.035em;
}

.diagnostico-eyebrow,
.diagnostico-contexto dt,
.diagnostico-kpi dt {
  color: var(--texto-fraco);
  font: 700 var(--t-micro)/1.3 var(--fonte-num);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.diagnostico-prototipo,
.diagnostico-cobertura-contagem {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
  color: var(--texto-suave);
  background: var(--tile);
  font: 700 var(--t-micro)/1 var(--fonte-num);
  letter-spacing: .08em;
  white-space: nowrap;
}

.diagnostico-contexto-grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 1px;
  border: 1px solid var(--borda-tabela);
  border-radius: 12px;
  overflow: hidden;
  background: var(--borda-tabela);
}

.diagnostico-contexto-grade > div {
  min-width: 0;
  padding: 12px 14px;
  background: var(--tile);
}

.diagnostico-contexto dt { margin-bottom: 7px; }
.diagnostico-contexto dd {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin: 0;
  color: var(--texto);
  font-size: var(--t-peq);
  font-weight: var(--peso-forte);
}
.diagnostico-contexto code,
.diagnostico-detalhes code {
  max-width: 100%;
  color: var(--texto-suave);
  font: inherit;
  overflow-wrap: anywhere;
}

.diagnostico-contexto-nota {
  margin: 0;
  padding: 11px 13px;
  border-left: 3px solid var(--info);
  border-radius: 8px;
  color: var(--texto-suave);
  background: var(--info-fundo);
  font-size: var(--t-nota);
  line-height: 1.55;
}
.diagnostico-contexto-estado {
  margin: 0;
  padding: 11px 13px;
  border-left: 3px solid var(--erro);
  border-radius: 8px;
  color: var(--texto-suave);
  background: var(--erro-fundo);
  font-size: var(--t-nota);
  line-height: 1.55;
}

.diagnostico-resultado,
.diagnostico-estrategicos {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.diagnostico-secao-topo { align-items: flex-end; padding: 0 2px; }
.diagnostico-secao-topo > p {
  margin: 0;
  color: var(--texto-fraco);
  font-size: var(--t-nota);
  text-align: right;
}

.diagnostico-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}
.diagnostico-kpis-bases { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.diagnostico-kpi {
  display: grid;
  align-content: space-between;
  gap: 14px;
  min-height: 138px;
  padding: 16px;
  border: 1px solid var(--borda);
  border-radius: 14px;
  background: var(--superficie);
  box-shadow: var(--sombra-baixa);
}
.diagnostico-kpi dt {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.diagnostico-kpi dd {
  display: grid;
  gap: 14px;
  min-width: 0;
  margin: 0;
}
.diagnostico-kpi-valor {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.diagnostico-kpi-valor > strong {
  color: var(--texto);
  font-size: clamp(27px, 3vw, 39px);
  line-height: .95;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
}
.diagnostico-kpi small {
  color: var(--texto-fraco);
  font-size: var(--t-nota);
  line-height: 1.45;
}
.diagnostico-kpi-base { min-height: 166px; }
.diagnostico-kpi-pendente {
  min-height: 190px;
  border-color: var(--sem-dado);
  border-style: dashed;
}
.diagnostico-kpi-escopo {
  color: var(--texto-fraco);
  font: 700 var(--t-micro)/1.2 var(--fonte-num);
  letter-spacing: .07em;
  text-align: right;
  text-transform: uppercase;
}
.diagnostico-kpi-identidade {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.diagnostico-kpi-codigo {
  color: var(--acento-ui);
  font: 700 var(--t-micro)/1 var(--fonte-num);
  letter-spacing: .11em;
}
.diagnostico-kpi-formula {
  margin: 0;
  color: var(--texto-suave);
  font-size: var(--t-nota);
  line-height: 1.5;
}
.diagnostico-kpi-dependencia {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--borda-tabela);
}
.diagnostico-kpi-fonte {
  font-family: var(--fonte-num);
  overflow-wrap: anywhere;
}
.diagnostico-resultado-nota,
.diagnostico-complementares-nota {
  margin: 0;
  padding: 11px 13px;
  border-left: 3px solid var(--info);
  border-radius: 8px;
  color: var(--texto-suave);
  background: var(--info-fundo);
  font-size: var(--t-nota);
  line-height: 1.55;
}

/* --- planejamento mensal + consolidado trimestral ------------------ */
.planejamento {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.planejamento-cabecalho-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.planejamento-cabecalho-meta p,
.planejamento-trimestre-topo p {
  margin: 0;
  color: var(--texto-fraco);
  font-size: var(--t-nota);
}
.planejamento-intro {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-left: 3px solid var(--acento-ui);
  border-radius: 10px;
  color: var(--texto-suave);
  background: var(--acento-ui-fraco);
  font-size: var(--t-nota);
  line-height: 1.55;
}
.planejamento-seletor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--superficie);
}
.planejamento-seletor > span {
  color: var(--texto-suave);
  font-size: var(--t-nota);
  font-weight: var(--peso-forte);
}
.planejamento-seletor > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}
.planejamento-mes {
  min-width: 44px;
  min-height: 44px;
  padding: 7px 11px;
  border: 1px solid var(--borda-forte);
  border-radius: 8px;
  color: var(--texto-suave);
  background: var(--superficie-alta);
  font: 700 var(--t-micro)/1 var(--fonte-num);
  cursor: pointer;
}
.planejamento-mes:hover { color: var(--texto); border-color: var(--acento-ui); }
.planejamento-mes.ativo,
.planejamento-mes[aria-pressed="true"] {
  color: var(--texto);
  border-color: var(--acento-ui);
  background: var(--acento-ui-fraco);
}
.planejamento-mes:focus-visible {
  outline: 2px solid var(--acento-ui);
  outline-offset: 2px;
}
.planejamento-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.planejamento-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--borda);
  border-top: 2px solid var(--acento-ui);
  border-radius: 14px;
  background: var(--superficie);
  box-shadow: var(--sombra-baixa);
}
.planejamento-card-topo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(128px, .7fr);
  gap: 12px;
  align-items: end;
}
.planejamento-card h3,
.planejamento-trimestre-topo h3 {
  margin: 3px 0 0;
  color: var(--texto);
  font-size: var(--t-base);
  line-height: 1.2;
  letter-spacing: -.025em;
}
.planejamento-card label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--borda-forte);
  border-radius: 9px;
  background: var(--tile);
  overflow: hidden;
}
.planejamento-card label:focus-within {
  border-color: var(--acento-ui);
  box-shadow: 0 0 0 2px var(--foco);
}
.planejamento-prefixo {
  padding: 9px 0 9px 10px;
  color: var(--texto-fraco);
  font: 700 var(--t-micro)/1 var(--fonte-num);
}
.planejamento-input {
  width: 100%;
  min-width: 0;
  padding: 8px 10px 8px 6px;
  border: 0;
  outline: 0;
  color: var(--texto);
  background: transparent;
  font: 700 var(--t-base)/1.2 var(--fonte-num);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.planejamento-input[aria-invalid="true"] { color: var(--erro); }
.planejamento-input::-webkit-inner-spin-button,
.planejamento-input::-webkit-outer-spin-button { margin: 0; }
.planejamento-ajuda,
.planejamento-fonte {
  color: var(--texto-fraco);
  font-size: var(--t-micro);
  line-height: 1.45;
}
.planejamento-erro {
  color: var(--erro);
  font-size: var(--t-micro);
  line-height: 1.4;
}
.planejamento-card-leitura {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--borda-tabela);
}
.planejamento-realizado {
  display: grid;
  gap: 5px;
}
.planejamento-realizado > span:first-child {
  color: var(--texto-fraco);
  font-size: var(--t-nota);
}
.planejamento-realizado > strong {
  color: var(--texto);
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}
.planejamento-progresso {
  height: 7px;
  border-radius: 999px;
  background: var(--borda-forte);
  overflow: hidden;
}
.planejamento-progresso > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--acento-ui);
  transition: width var(--movimento-rapido) var(--easing-ui);
}
.planejamento-card-rodape {
  display: grid;
  gap: 7px;
  color: var(--texto-fraco);
  font-size: var(--t-nota);
}
.planejamento-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: var(--t-micro);
  font-weight: var(--peso-forte);
  line-height: 1.2;
}
.planejamento-status.ok { color: var(--ok); background: var(--ok-fundo); }
.planejamento-status.atencao { color: var(--atencao); background: var(--atencao-fundo); }
.planejamento-status.sem-base { color: var(--texto-suave); background: var(--sem-dado-fundo); }
.planejamento-fonte {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--borda-tabela);
  font-family: var(--fonte-num);
  overflow-wrap: anywhere;
}
.planejamento-regra {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid var(--info);
  border-radius: 8px;
  color: var(--texto-suave);
  background: var(--info-fundo);
  font-size: var(--t-nota);
  line-height: 1.5;
}
.planejamento-trimestre-topo {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  padding: 0 2px;
}
.planejamento-tabela-wrap {
  max-width: 100%;
  border: 1px solid var(--borda);
  border-radius: 14px;
  background: var(--superficie);
  box-shadow: var(--sombra-baixa);
  overflow: auto;
}
.planejamento-tabela-wrap:focus-visible {
  outline: 2px solid var(--acento-ui);
  outline-offset: 2px;
}
.planejamento-tabela {
  width: 100%;
  min-width: 850px;
  border-collapse: collapse;
}
.planejamento-tabela th,
.planejamento-tabela td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--borda-tabela);
  text-align: left;
  vertical-align: top;
}
.planejamento-tabela thead th {
  color: var(--texto-fraco);
  background: var(--superficie-alta);
  font: 700 var(--t-micro)/1.3 var(--fonte-num);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.planejamento-tabela tbody th {
  min-width: 142px;
  color: var(--texto);
  font-size: var(--t-peq);
}
.planejamento-tabela td { min-width: 210px; }
.planejamento-tabela tbody tr:last-child > * { border-bottom: 0; }
.planejamento-tabela-valor {
  display: grid;
  gap: 4px;
  margin-bottom: 8px;
}
.planejamento-tabela-valor strong {
  color: var(--texto);
  font-size: var(--t-base);
  font-variant-numeric: tabular-nums;
}
.planejamento-tabela-valor small,
.planejamento-cobertura {
  color: var(--texto-fraco);
  font-size: var(--t-micro);
}
.planejamento-cobertura { display: block; margin-top: 6px; }
.planejamento-total > * {
  border-top: 2px solid var(--borda-forte);
  background: var(--superficie-alta);
}
.somente-leitor {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.diagnostico-atencao {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid var(--atencao);
  border-radius: 11px;
  background: var(--atencao-fundo);
}
.diagnostico-atencao p {
  margin: 0;
  color: var(--texto-suave);
  font-size: var(--t-nota);
  line-height: 1.5;
}
.diagnostico-atencao p strong { color: var(--texto); }
.diagnostico-atencao-funil { margin: 16px 16px 0; }

.diagnostico-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(280px, .8fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
}
.diagnostico-grade > .painel {
  margin: 0;
  min-width: 0;
}
.diagnostico-jornada,
.diagnostico-inspetor { gap: 0; }

.diagnostico-comparacao-toggle {
  gap: 9px;
  text-decoration: none;
}
.painel-acao > button.diagnostico-comparacao-toggle[aria-checked="true"] {
  border-color: var(--acento-ui);
  color: var(--acento-ui);
  background: var(--acento-ui-fraco);
}
.diagnostico-comparacao-trilho {
  position: relative;
  display: inline-flex;
  width: 30px;
  height: 17px;
  flex: 0 0 30px;
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
  background: var(--tile);
  transition:
    border-color var(--movimento-rapido) var(--easing-ui),
    background-color var(--movimento-rapido) var(--easing-ui);
}
.diagnostico-comparacao-cursor {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--texto-fraco);
  transition:
    transform var(--movimento-rapido) var(--easing-ui),
    background-color var(--movimento-rapido) var(--easing-ui);
}
.diagnostico-comparacao-toggle[aria-checked="true"] .diagnostico-comparacao-trilho {
  border-color: var(--acento-ui);
  background: var(--acento-ui);
}
.diagnostico-comparacao-toggle[aria-checked="true"] .diagnostico-comparacao-cursor {
  background: var(--texto-inverso);
  transform: translateX(13px);
}

.diagnostico-fluxo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.diagnostico-fluxo [hidden] { display: none; }
.diagnostico-comparacao-cabecalho {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: end;
  gap: 13px;
  padding: 0 13px 8px;
  color: var(--texto-fraco);
  font: 700 var(--t-micro)/1.2 var(--fonte-num);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.diagnostico-comparacao-colunas,
.diagnostico-etapa-valores {
  display: grid;
  align-items: center;
  justify-items: end;
  gap: 12px;
  min-width: 0;
}
.diagnostico-comparacao-colunas {
  grid-template-columns: repeat(3, minmax(72px, 1fr));
  width: 270px;
  text-align: right;
}
.diagnostico-etapa-valores {
  grid-template-columns: minmax(72px, 1fr);
  width: 82px;
  transition: width var(--movimento-rapido) var(--easing-ui);
}
.diagnostico-etapa.comparacao-ativa .diagnostico-etapa-valores {
  grid-template-columns: repeat(3, minmax(72px, 1fr));
  width: 270px;
}
.diagnostico-etapa.comparacao-ativa .diagnostico-etapa-valores .estado.demo,
.diagnostico-inspetor-metricas-comparando .estado.demo {
  inline-size: 8px;
  block-size: 8px;
  flex: 0 0 8px;
  gap: 0;
  overflow: hidden;
  padding: 0;
  border-radius: 50%;
  color: var(--demo);
  background: var(--demo);
  font-size: 0;
}
.diagnostico-etapa.comparacao-ativa .diagnostico-etapa-valores .estado.demo::before,
.diagnostico-inspetor-metricas-comparando .estado.demo::before {
  content: "";
}
.diagnostico-etapa {
  appearance: none;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 64px;
  padding: 11px 13px;
  border: 1px solid var(--borda-forte);
  border-radius: 12px;
  color: var(--texto);
  background: var(--tile);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--movimento-rapido) var(--easing-ui),
    background-color var(--movimento-rapido) var(--easing-ui),
    box-shadow var(--movimento-rapido) var(--easing-ui),
    transform var(--movimento-rapido) var(--easing-ui);
}
.diagnostico-etapa:hover {
  border-color: var(--borda-forte);
  background: var(--superficie-alta);
  transform: translateX(2px);
}
.diagnostico-etapa.selecionada {
  border-color: var(--acento-ui);
  background: var(--selecao-fundo);
  box-shadow: inset 4px 0 0 var(--acento-ui);
}
.diagnostico-etapa:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
}
.diagnostico-cobertura > summary:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 3px var(--foco);
}
.diagnostico-etapa-indice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--borda-forte);
  border-radius: 9px;
  color: var(--texto-suave);
  background: var(--superficie);
  font: 700 var(--t-micro)/1 var(--fonte-num);
  letter-spacing: .08em;
}
.diagnostico-etapa.selecionada .diagnostico-etapa-indice {
  border-color: var(--acento-ui);
  color: var(--texto-inverso);
  background: var(--acento-ui);
}
.diagnostico-etapa-nome {
  min-width: 0;
  font-size: var(--t-base);
  font-weight: var(--peso-forte);
}
.diagnostico-etapa-valor {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 78px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.diagnostico-etapa-valor > strong {
  font-size: 21px;
  line-height: 1;
  letter-spacing: -.035em;
}
.diagnostico-etapa-variacao > strong {
  font-size: var(--t-base);
  letter-spacing: -.02em;
}

.diagnostico-passagem {
  position: relative;
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  justify-content: start;
  gap: 7px;
  min-height: 39px;
  margin-left: 18px;
  padding: 6px 8px 6px 34px;
  color: var(--texto-fraco);
  font-size: var(--t-micro);
  line-height: 1.2;
}
.diagnostico-passagem-linha {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--borda-forte);
}
.diagnostico-passagem-linha::after {
  content: "";
  position: absolute;
  left: -3px;
  bottom: 0;
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--borda-forte);
  border-bottom: 1px solid var(--borda-forte);
  transform: rotate(45deg);
}
.diagnostico-passagem > strong {
  color: var(--texto-suave);
  font-size: var(--t-peq);
}
.diagnostico-passagem small { color: var(--texto-fraco); }
.diagnostico-passagem-atencao > strong { color: var(--atencao); }
.diagnostico-passagem-atencao .diagnostico-passagem-linha,
.diagnostico-passagem-atencao .diagnostico-passagem-linha::after {
  border-color: var(--atencao);
  background: var(--atencao);
}
/* As duas razões de ponta a ponta (funil.js, 27/09): uma linha PEQUENA
   embaixo das passagens, com a mesma tipografia delas. */
.funil-ponta-a-ponta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--borda);
  font-size: var(--t-peq); color: var(--texto-suave);
}
.funil-ponta-item { display: inline-flex; align-items: baseline; gap: 7px; }
.funil-ponta-item > strong { color: var(--texto-suave); }
.funil-ponta-item small,
.funil-ponta-nota { color: var(--texto-fraco); }
.funil-ponta-nota { flex-basis: 100%; }
.funil-ponta-item.diagnostico-passagem-atencao > span:first-child { color: var(--atencao); }

.diagnostico-inspetor {
  position: sticky;
  top: 82px;
}
.diagnostico-inspetor-metricas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
.diagnostico-inspetor-metricas-comparando {
  grid-template-columns: minmax(0, 1fr);
}
.diagnostico-inspetor-metrica {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: var(--tile);
}
.diagnostico-inspetor-metrica > span {
  color: var(--texto-fraco);
  font-size: var(--t-micro);
  font-weight: var(--peso-forte);
  letter-spacing: .11em;
  text-transform: uppercase;
}
.diagnostico-inspetor-metrica > div {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
}
.diagnostico-inspetor-metrica strong {
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.05em;
}
.diagnostico-detalhes {
  display: grid;
  gap: 0;
  margin: 14px 0 0;
  border-top: 1px solid var(--borda-tabela);
}
.diagnostico-detalhe-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 12px;
  align-items: start;
  padding: 11px 0;
  border-bottom: 1px solid var(--borda-tabela);
}
.diagnostico-detalhe-linha dt {
  color: var(--texto-fraco);
  font-size: var(--t-nota);
}
.diagnostico-detalhe-linha dd {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  margin: 0;
  color: var(--texto-suave);
  font-size: var(--t-nota);
  text-align: right;
}
.diagnostico-detalhe-linha dd small { color: var(--texto-fraco); }
.diagnostico-indisponivel {
  display: grid;
  gap: 5px;
  margin-top: 14px;
  padding: 12px;
  border: 1px dashed var(--borda-forte);
  border-radius: 10px;
  background: var(--sem-dado-fundo);
}
.diagnostico-indisponivel strong { font-size: var(--t-peq); }
.diagnostico-indisponivel p {
  margin: 0;
  color: var(--texto-fraco);
  font-size: var(--t-nota);
  line-height: 1.5;
}

.diagnostico-complementares {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.diagnostico-analise-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.diagnostico-analise-codigo {
  color: var(--acento-ui);
  font: 700 var(--t-micro)/1 var(--fonte-num);
  letter-spacing: .11em;
}
.diagnostico-analise-card h3 {
  margin: 0;
  color: var(--texto);
  font-size: var(--t-base);
  line-height: 1.25;
  letter-spacing: -.025em;
}

.diagnostico-analises-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.diagnostico-analise-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  min-height: 270px;
  padding: 17px;
  border: 1px solid var(--borda);
  border-top: 2px solid var(--borda-forte);
  border-radius: 14px;
  background: var(--superficie);
  box-shadow: var(--sombra-baixa);
}
.diagnostico-analise-pronta { border-top-color: var(--info); }
.diagnostico-analise-descricao {
  margin: 0;
  color: var(--texto-suave);
  font-size: var(--t-nota);
  line-height: 1.5;
}
.diagnostico-analise-lista {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--borda-tabela);
  border-radius: 9px;
  list-style: none;
  overflow: hidden;
}
.diagnostico-analise-lista li {
  position: relative;
  padding: 8px 10px 8px 28px;
  border-bottom: 1px solid var(--borda-tabela);
  color: var(--texto-suave);
  background: var(--tile);
  font-size: var(--t-nota);
}
.diagnostico-analise-lista li:last-child { border-bottom: 0; }
.diagnostico-analise-lista li::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 6px;
  height: 6px;
  border: 1px solid var(--borda-forte);
  border-radius: 50%;
  transform: translateY(-50%);
}
.diagnostico-analise-meta {
  display: grid;
  gap: 0;
  margin: auto 0 0;
  padding-top: 5px;
  border-top: 1px solid var(--borda-tabela);
}
.diagnostico-analise-meta > div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--borda-tabela);
}
.diagnostico-analise-meta > div:last-child { border-bottom: 0; }
.diagnostico-analise-meta dt {
  color: var(--texto-fraco);
  font: 700 var(--t-micro)/1.4 var(--fonte-num);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.diagnostico-analise-meta dd {
  margin: 0;
  color: var(--texto-suave);
  font-size: var(--t-nota);
  line-height: 1.45;
}

.diagnostico-cobertura {
  border: 1px solid var(--borda);
  border-radius: 14px;
  background: var(--superficie);
  box-shadow: var(--sombra-baixa);
  overflow: clip;
}
.diagnostico-cobertura > summary {
  align-items: center;
  min-height: 62px;
  padding: 13px 16px;
  color: var(--texto);
  cursor: pointer;
  list-style: none;
}
.diagnostico-cobertura > summary::-webkit-details-marker { display: none; }
.diagnostico-cobertura > summary::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 1px solid var(--borda-forte);
  border-radius: 50%;
  color: var(--texto-suave);
  font-size: 18px;
  line-height: 1;
}
.diagnostico-cobertura[open] > summary::after { content: "−"; }
.diagnostico-cobertura > summary > span:first-child {
  display: grid;
  gap: 4px;
}
.diagnostico-cobertura > summary strong { font-size: var(--t-base); }
.diagnostico-cobertura > summary small {
  color: var(--texto-fraco);
  font-size: var(--t-nota);
}
.diagnostico-cobertura[open] > summary {
  border-bottom: 1px solid var(--borda);
  background: var(--superficie-alta);
}
.diagnostico-cobertura-corpo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
}
.diagnostico-cobertura-item {
  display: grid;
  grid-template-columns: 23px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--borda);
  border-radius: 11px;
  background: var(--tile);
}
.diagnostico-cobertura-estado {
  color: var(--texto-fraco);
  font-size: 20px;
  line-height: 1;
}
.diagnostico-cobertura-item h3 {
  margin: 0 0 5px;
  color: var(--texto);
  font-size: var(--t-peq);
}
.diagnostico-cobertura-item p,
.diagnostico-cobertura-item small {
  display: block;
  margin: 0;
  color: var(--texto-fraco);
  font-size: var(--t-nota);
  line-height: 1.5;
}
.diagnostico-cobertura-item small { margin-top: 7px; }
.diagnostico-cobertura-nota,
.diagnostico-cobertura-corpo > .aviso {
  grid-column: 1 / -1;
}
.diagnostico-cobertura-nota {
  padding: 12px 14px;
  border-radius: 9px;
  color: var(--texto-suave);
  background: var(--info-fundo);
  font-size: var(--t-nota);
  line-height: 1.55;
}

@media (max-width: 1100px) {
  .diagnostico-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diagnostico-grade { grid-template-columns: minmax(0, 1fr); }
  .diagnostico-inspetor { position: static; }
  .diagnostico-analises-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planejamento-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planejamento-tabela { min-width: 650px; }
  .planejamento-tabela th,
  .planejamento-tabela td { padding: 11px 9px; }
  .planejamento-tabela tbody th { min-width: 118px; }
  .planejamento-tabela td { min-width: 152px; }
}

@media (max-width: 820px) {
  .diagnostico-contexto-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diagnostico-cobertura-corpo { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .diagnostico-contexto,
  .diagnostico-kpi { padding: 14px; }
  .diagnostico-contexto-topo,
  .diagnostico-secao-topo,
  .planejamento-trimestre-topo { align-items: flex-start; flex-direction: column; }
  .diagnostico-secao-topo > p { text-align: left; }
  .diagnostico-contexto-grade,
  .diagnostico-kpis,
  .diagnostico-analises-grade,
  .planejamento-cards { grid-template-columns: minmax(0, 1fr); }
  .planejamento-cabecalho-meta {
    align-items: flex-start;
    flex-direction: column;
  }
  .planejamento-seletor {
    align-items: stretch;
    flex-direction: column;
  }
  .planejamento-seletor > div { justify-content: flex-start; }
  .planejamento-card-topo { grid-template-columns: minmax(0, 1fr); }
  .diagnostico-contexto-grade > div {
    border: 0;
  }
  .diagnostico-etapa { grid-template-columns: 38px minmax(0, 1fr); }
  .diagnostico-etapa-valores {
    grid-column: 2;
    justify-items: start;
    width: 100%;
  }
  .diagnostico-etapa.comparacao-ativa .diagnostico-etapa-valores {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }
  .diagnostico-etapa-valores .diagnostico-etapa-valor {
    grid-column: auto;
    justify-content: flex-start;
    min-width: 0;
  }
  .diagnostico-comparacao-cabecalho {
    grid-template-columns: 38px minmax(0, 1fr);
  }
  .diagnostico-comparacao-cabecalho > :nth-child(2) { display: none; }
  .diagnostico-comparacao-colunas {
    grid-column: 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: start;
    width: 100%;
    text-align: left;
  }
  .diagnostico-inspetor-metricas-comparando {
    grid-template-columns: minmax(0, 1fr);
  }
  .diagnostico-passagem {
    grid-template-columns: auto auto;
    margin-left: 18px;
  }
  .diagnostico-passagem small { grid-column: 1 / -1; }
  .diagnostico-cobertura > summary { min-height: 68px; }
  .diagnostico-cobertura-contagem { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .diagnostico-etapa,
  .diagnostico-etapa-valores,
  .diagnostico-comparacao-trilho,
  .diagnostico-comparacao-cursor,
  .planejamento-progresso > span { transition: none; }
  .diagnostico-etapa:hover { transform: none; }
}

/* =====================================================================
   AQUISICAO E CAMPANHAS · COCKPIT OPERACIONAL

   Extensao aditiva do sistema existente: superficies, estados, deltas,
   controles, serie e tabela continuam sendo os componentes canonicos.
   Estas classes resolvem apenas a composicao especifica da pagina.
   ===================================================================== */
.pagina-corpo-aquisicao {
  gap: 18px;
  min-width: 0;
}
.pagina-corpo-aquisicao .painel {
  grid-template-columns: minmax(0, 1fr);
}

.aquisicao-sinais {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}
.aquisicao-sinal {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  min-height: 142px;
  padding: 16px;
  border: 1px solid var(--borda);
  border-top: 2px solid var(--borda-forte);
  border-radius: 14px;
  background: var(--tile);
  box-shadow: var(--sombra-baixa);
}
.aquisicao-sinal > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.aquisicao-sinal :is(h2, h3),
.aquisicao-sinal p { margin: 0; }
.aquisicao-sinal :is(h2, h3) {
  color: var(--texto);
  font-size: var(--t-base);
  line-height: 1.25;
  letter-spacing: -.025em;
}
.aquisicao-sinal p {
  color: var(--texto-suave);
  font-size: var(--t-peq);
  line-height: 1.5;
}
.aquisicao-sinal > :is(.estado, .delta) { justify-self: start; }

.aquisicao-pulso-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}
.aquisicao-pulso-grupo {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--borda);
  border-radius: 14px;
  background: var(--tile);
}
.aquisicao-pulso-grupo > .grupo-titulo { margin: 0; }
.aquisicao-pulso-metricas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  min-width: 0;
}
.aquisicao-pulso-item {
  display: grid;
  align-content: space-between;
  gap: 10px;
  min-width: 0;
  min-height: 112px;
  padding: 12px;
  border: 1px solid var(--borda-tabela);
  border-radius: 11px;
  background: var(--superficie);
}
.aquisicao-pulso-item .metrica {
  font-size: clamp(24px, 2.35vw, 34px);
  overflow-wrap: anywhere;
}
.aquisicao-pulso-item :is(.estado, .delta) { justify-self: start; }
.aquisicao-pulso-item small {
  color: var(--texto-fraco);
  font-size: var(--t-micro);
  line-height: 1.45;
}
.aquisicao-pulso-item .preench { align-self: end; }

.aquisicao-tendencia-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}
.aquisicao-tendencia-topo > :first-child { min-width: 0; }
.aquisicao-tendencia-topo .segmentado { flex: 0 0 auto; }

.aquisicao-tendencia-serie {
  min-width: 0;
}
:is(.aquisicao-tendencia-serie.serie, .aquisicao-tendencia-serie > .serie) {
  min-height: 178px;
  background:
    repeating-linear-gradient(
      to top,
      transparent 0 34px,
      var(--grade-grafico) 34px 35px
    ),
    var(--superficie);
}
:is(.aquisicao-tendencia-serie.serie, .aquisicao-tendencia-serie > .serie) .serie-col {
  min-width: 44px;
}
:is(.aquisicao-tendencia-serie.serie, .aquisicao-tendencia-serie > .serie) .serie-barra {
  height: 132px;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  padding: 0 4px;
  background: transparent;
  border-radius: 0;
}
:is(.aquisicao-tendencia-serie.serie, .aquisicao-tendencia-serie > .serie) .serie-barra > i {
  width: calc(50% - 2px);
  max-width: 18px;
  border-radius: 4px 4px 0 0;
  background: var(--serie-atual);
  transition:
    height var(--movimento-padrao) var(--easing-ui),
    opacity var(--movimento-rapido) var(--easing-ui);
}
:is(.aquisicao-tendencia-serie.serie, .aquisicao-tendencia-serie > .serie) .serie-barra > i:only-child {
  width: min(70%, 22px);
}
:is(.aquisicao-tendencia-serie.serie, .aquisicao-tendencia-serie > .serie) .serie-barra > i:nth-child(2),
:is(.aquisicao-tendencia-serie.serie, .aquisicao-tendencia-serie > .serie) .serie-barra > i[data-serie="anterior"] {
  background: var(--serie-anterior);
  opacity: .82;
}
:is(.aquisicao-tendencia-serie.serie, .aquisicao-tendencia-serie > .serie) .serie-barra > i[data-serie="atual"] {
  background: var(--serie-atual);
}
:is(.aquisicao-tendencia-serie.serie, .aquisicao-tendencia-serie > .serie) .serie-barra > i[hidden] {
  display: none;
}
.pagina-corpo-aquisicao [data-legenda-serie] {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-radius: 3px;
  vertical-align: -1px;
  background: var(--serie-atual);
}
.pagina-corpo-aquisicao [data-legenda-serie="anterior"] {
  background: var(--serie-anterior);
  opacity: .82;
}
.aquisicao-tendencia-serie[data-janela="30"] .serie-col,
.aquisicao-tendencia-serie[data-janela="30d"] .serie-col { min-width: 34px; }

.aquisicao-workspace-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  flex-wrap: wrap;
}
.aquisicao-workspace-topo > * { min-width: 0; }
.aquisicao-workspace-topo .barra-filtro { margin: 0; }

.aquisicao-visoes {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}
.aquisicao-visoes .segmentado {
  width: max-content;
  min-width: 100%;
}
.pagina-corpo-aquisicao button.segmentado-opcao {
  appearance: none;
  min-height: 44px;
  flex: 0 0 auto;
  border: 0;
  color: var(--texto-suave);
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  transition:
    color var(--movimento-rapido) var(--easing-ui),
    background-color var(--movimento-rapido) var(--easing-ui),
    box-shadow var(--movimento-rapido) var(--easing-ui);
}
.pagina-corpo-aquisicao button.segmentado-opcao:hover {
  color: var(--texto);
  background: var(--superficie);
}
.pagina-corpo-aquisicao button.segmentado-opcao:is(.active, [aria-pressed="true"], [aria-selected="true"]) {
  color: var(--texto);
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--borda-forte);
}
.pagina-corpo-aquisicao button.segmentado-opcao:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}
.pagina-corpo-aquisicao button.segmentado-opcao:disabled {
  color: var(--texto-fraco);
  cursor: not-allowed;
  opacity: .65;
}
.pagina-corpo-aquisicao .chip-canal { min-height: 44px; }

.aquisicao-tabela {
  min-width: 840px;
  border-collapse: separate;
  border-spacing: 0;
}
.aquisicao-tabela th.num { text-align: right; }
.aquisicao-tabela :is(th, td):first-child:not([colspan]) {
  position: sticky;
  left: 0;
  width: 280px;
  min-width: 280px;
  max-width: 340px;
  box-shadow: 1px 0 0 var(--borda-tabela);
}
.aquisicao-tabela thead th:first-child {
  z-index: 4;
  background: var(--superficie-alta);
}
.aquisicao-tabela tbody td:first-child {
  z-index: 2;
  background: var(--superficie);
}
.aquisicao-tabela tbody tr:hover > td:first-child,
.aquisicao-tabela tbody tr:focus-within > td:first-child,
.aquisicao-tabela tbody tr[aria-selected="true"] > td:first-child {
  background: var(--selecao-fundo);
}
.pagina-corpo-aquisicao .tabela-wrap:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
}

.aquisicao-identidade {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.aquisicao-identidade > strong {
  color: var(--texto);
  font-size: var(--t-peq);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.aquisicao-identidade > :is(small, span:not(.estado)) {
  color: var(--texto-fraco);
  font-size: var(--t-micro);
  line-height: 1.4;
}
.aquisicao-identidade > .estado {
  width: fit-content;
  margin-bottom: 2px;
}

.aquisicao-linha-detalhe:not(tr),
tr.aquisicao-linha-detalhe > td > :first-child {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(250px, .6fr);
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: var(--tile);
}
.aquisicao-linha-detalhe > *,
tr.aquisicao-linha-detalhe > td > :first-child > * { min-width: 0; }
tr.aquisicao-linha-detalhe > td {
  padding: 0;
  border-bottom-color: var(--borda-forte);
  background: var(--superficie-alta);
}
tr.aquisicao-linha-detalhe[hidden] { display: none; }

@media (max-width: 1100px) {
  .aquisicao-sinais { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aquisicao-sinal:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    min-height: 0;
  }
  .aquisicao-pulso-grade { grid-template-columns: minmax(0, 1fr); }
  .aquisicao-tendencia-topo,
  .aquisicao-workspace-topo {
    align-items: stretch;
    flex-direction: column;
  }
  .aquisicao-tendencia-topo > *,
  .aquisicao-visoes { width: 100%; min-width: 0; }
  :is(.aquisicao-tendencia-serie.serie, .aquisicao-tendencia-serie > .serie) .serie-col {
    min-width: 32px;
  }
  .aquisicao-tendencia-serie:is([data-janela="14d"], [data-janela="30d"], [data-janela="30"])
    .serie-valor { display: none; }
}

@media (max-width: 820px) {
  .aquisicao-sinais,
  .aquisicao-pulso-grade { grid-template-columns: minmax(0, 1fr); }
  .aquisicao-workspace-topo {
    align-items: stretch;
    flex-direction: column;
  }
  .aquisicao-visoes { width: 100%; }
  .aquisicao-linha-detalhe:not(tr),
  tr.aquisicao-linha-detalhe > td > :first-child {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .aquisicao-pulso-metricas { grid-template-columns: minmax(0, 1fr); }
  .aquisicao-sinal,
  .aquisicao-pulso-grupo { padding: 14px; }
  .aquisicao-tendencia-topo {
    align-items: stretch;
    flex-direction: column;
  }
  .aquisicao-tendencia-topo .segmentado,
  .aquisicao-visoes .segmentado { width: max-content; }
  .aquisicao-tabela { min-width: 720px; }
  .aquisicao-tabela :is(th, td):first-child:not([colspan]) {
    width: 220px;
    min-width: 220px;
  }
  .aquisicao-linha-detalhe:not(tr),
  tr.aquisicao-linha-detalhe > td > :first-child { padding: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .pagina-corpo-aquisicao button.segmentado-opcao,
  :is(.aquisicao-tendencia-serie.serie, .aquisicao-tendencia-serie > .serie) .serie-barra > i {
    transition: none;
  }
}

/* =====================================================================
   VENDAS · DIRECAO, CARTEIRA E QUALIDADE

   Uma pagina, tres perspectivas. O namespace evita que o cockpit
   altere tabelas e paineis das telas historicas.
   ===================================================================== */
.pagina-corpo-vendas {
  gap: 18px;
  min-width: 0;
}

.vendas-filtros {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--borda);
  border-radius: 14px;
  background: var(--superficie);
  box-shadow: var(--sombra-baixa);
}
.vendas-filtros-grupo {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}
.vendas-filtro,
.vendas-periodo {
  display: grid;
  gap: 6px;
  min-width: 155px;
  color: var(--texto-fraco);
  font: 700 var(--t-micro)/1.2 var(--fonte-num);
  letter-spacing: .11em;
  text-transform: uppercase;
}
.vendas-select {
  min-height: 40px;
  padding: 8px 34px 8px 11px;
  border: 1px solid var(--borda-forte);
  border-radius: 9px;
  color: var(--texto);
  background: var(--tile);
  font: 600 var(--t-peq)/1.2 var(--fonte);
  letter-spacing: 0;
  text-transform: none;
}
.vendas-select:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}
.vendas-select:disabled { cursor: not-allowed; opacity: .68; }
.vendas-periodo {
  min-width: max-content;
  padding: 0 2px 6px;
  text-align: right;
}
.vendas-periodo strong {
  color: var(--texto);
  font-family: var(--fonte);
  font-size: var(--t-peq);
  letter-spacing: 0;
  text-transform: none;
}

.vendas-abertura {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr);
  gap: 18px;
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--borda);
  border-radius: 16px;
  color: var(--texto);
  background:
    radial-gradient(circle at 89% 12%, var(--acento-ui-fraco), transparent 34%),
    var(--superficie);
  box-shadow: var(--sombra-baixa);
}
.vendas-abertura-principal,
.vendas-abertura-meta { min-width: 0; }
.vendas-eyebrow {
  color: var(--acento-ui);
  font: 800 var(--t-micro)/1.3 var(--fonte-num);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.vendas-abertura h2,
.vendas-intro-visao h2,
.vendas-recorte h3,
.vendas-detalhe h3,
.vendas-regras h3 {
  margin: 5px 0 7px;
  color: var(--texto);
  font-size: clamp(22px, 2.2vw, 31px);
  line-height: 1.08;
  letter-spacing: -.04em;
}
.vendas-abertura p,
.vendas-intro-visao p,
.vendas-recorte p,
.vendas-detalhe p,
.vendas-regras p { margin: 0; color: var(--texto-suave); line-height: 1.55; }
.vendas-abertura-meta {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 15px 0 15px 20px;
  border-left: 1px solid var(--borda-forte);
}
.vendas-abertura-meta .estado { justify-self: start; }
.vendas-abertura-meta strong { font-size: var(--t-base); }
.vendas-abertura-meta span:last-child { color: var(--texto-fraco); font-size: var(--t-nota); }

.vendas-abas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  padding: 4px;
  border: 1px solid var(--borda);
  border-radius: 14px;
  overflow: hidden;
  background: var(--tile);
}
.vendas-aba {
  display: grid;
  gap: 5px;
  min-height: 64px;
  padding: 11px 14px;
  border: 0;
  border-radius: 10px;
  color: var(--texto-suave);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--movimento-rapido) var(--easing-ui), color var(--movimento-rapido) var(--easing-ui);
}
.vendas-aba:hover { color: var(--texto); background: var(--superficie); }
.vendas-aba.active {
  color: var(--texto);
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--borda-forte), var(--sombra-baixa);
}
.vendas-aba span { font-weight: 800; }
.vendas-aba small { color: var(--texto-fraco); font-size: var(--t-micro); line-height: 1.35; }
.vendas-aba:focus-visible { outline: 3px solid var(--foco); outline-offset: -3px; }

.vendas-visao {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.vendas-intro-visao {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  min-width: 0;
  padding: 4px 2px;
}
.vendas-intro-visao > div:first-child { min-width: 0; }
.vendas-intro-visao h2 { font-size: clamp(21px, 2vw, 28px); }
.vendas-intro-pergunta {
  max-width: 440px;
  padding: 11px 14px;
  border-left: 3px solid var(--acento-ui);
  border-radius: 8px;
  color: var(--texto-suave);
  background: var(--acento-ui-fraco);
  font-size: var(--t-peq);
  line-height: 1.45;
}

.vendas-kpis,
.vendas-carteira-resumo {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}
.vendas-kpi {
  display: grid;
  align-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 125px;
  padding: 14px;
  border: 1px solid var(--borda);
  border-top: 2px solid var(--borda-forte);
  border-radius: 12px;
  color: var(--texto);
  background: var(--superficie);
  box-shadow: var(--sombra-baixa);
  text-align: left;
}
button.vendas-kpi {
  appearance: none;
  font: inherit;
  cursor: pointer;
}
.vendas-kpi.destaque { border-top-color: var(--acento-ui); }
.vendas-kpi-clicavel:hover {
  border-color: var(--acento-ui);
  transform: translateY(-1px);
}
.vendas-kpi-clicavel:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.vendas-kpi-rotulo {
  color: var(--texto-fraco);
  font: 800 var(--t-micro)/1.3 var(--fonte-num);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.vendas-kpi-valor {
  min-width: 0;
  font: 800 clamp(23px, 2.2vw, 34px)/1 var(--fonte-num);
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
}
.vendas-kpi small { color: var(--texto-suave); font-size: var(--t-micro); line-height: 1.4; }
.vendas-kpi .estado { justify-self: start; }
.vendas-kpi-acao {
  color: var(--acento-ui);
  font-size: var(--t-micro);
  font-weight: 700;
}

.vendas-resumo-direcao {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.vendas-regra-mql {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 1.4fr);
  gap: 5px 18px;
  padding: 14px 16px;
  border: 1px solid var(--acento-ui);
  border-radius: 12px;
  background: var(--acento-ui-fraco);
}
.vendas-regra-mql .vendas-eyebrow { grid-column: 1 / -1; }
.vendas-regra-mql strong { color: var(--texto); font-size: var(--t-base); }
.vendas-regra-mql p { margin: 0; color: var(--texto-suave); font-size: var(--t-nota); line-height: 1.45; }
.vendas-resumo-grupos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.vendas-grupo-resumo {
  display: grid;
  align-content: start;
  min-width: 0;
  border: 1px solid var(--borda);
  border-radius: 13px;
  overflow: hidden;
  background: var(--superficie);
  box-shadow: var(--sombra-baixa);
}
.vendas-grupo-resumo > header { display: grid; gap: 5px; padding: 14px 15px; border-bottom: 1px solid var(--borda); }
.vendas-grupo-resumo > header p { margin: 0; color: var(--texto-suave); font-size: var(--t-micro); line-height: 1.4; }
.vendas-grupo-resumo > div { display: grid; }
.vendas-metrica-resumo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  min-width: 0;
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid var(--borda-tabela);
  color: var(--texto);
  background: transparent;
  font: inherit;
  text-align: left;
}
.vendas-metrica-resumo:last-child { border-bottom: 0; }
.vendas-metrica-resumo > span { color: var(--texto-suave); font-size: var(--t-nota); font-weight: 700; }
.vendas-metrica-resumo > strong { color: var(--texto); font: 800 var(--t-base)/1 var(--fonte-num); }
.vendas-metrica-resumo > small { grid-column: 1 / -1; color: var(--texto-fraco); font-size: var(--t-micro); }
button.vendas-metrica-resumo { appearance: none; cursor: pointer; }
button.vendas-metrica-resumo:hover { background: var(--selecao-fundo); }
button.vendas-metrica-resumo:focus-visible { outline: 3px solid var(--foco); outline-offset: -3px; }
.vendas-metrica-resumo.destaque { box-shadow: inset 3px 0 0 var(--acento-ui); }

.pagina-corpo-vendas .painel { min-width: 0; }
.pagina-corpo-vendas .tabela-wrap:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
.vendas-tabela { min-width: 980px; border-collapse: separate; border-spacing: 0; }
.vendas-tabela :is(th, td):first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 190px;
  box-shadow: 1px 0 0 var(--borda-tabela);
}
.vendas-tabela thead th:first-child { z-index: 4; background: var(--superficie-alta); }
.vendas-tabela tbody td:first-child { background: var(--superficie); }
.vendas-tabela tbody tr:hover td:first-child,
.vendas-tabela tbody tr.selecionado td:first-child { background: var(--selecao-fundo); }
.vendas-tabela td > small,
.vendas-tabela td > strong + small {
  display: block;
  margin-top: 4px;
  color: var(--texto-fraco);
  font-size: var(--t-micro);
  line-height: 1.35;
}
.vendas-tabela tbody tr.selecionado > td { background: var(--selecao-fundo); }
.vendas-tabela-vendedores { min-width: 1640px; }
.vendas-vendedor,
.vendas-negocio,
.vendas-numero {
  appearance: none;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.vendas-vendedor,
.vendas-negocio { display: grid; gap: 3px; width: 100%; text-align: left; }
.vendas-vendedor small,
.vendas-negocio small { color: var(--texto-fraco); font-size: var(--t-micro); }
.vendas-vendedor:hover strong,
.vendas-negocio:hover strong,
.vendas-numero:hover { color: var(--acento-ui); text-decoration: underline; }
:is(.vendas-vendedor, .vendas-negocio, .vendas-numero):focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  border-radius: 3px;
}
.vendas-numero { min-width: 28px; min-height: 28px; font-family: var(--fonte-num); }
.vendas-aging { min-width: 760px; }
.vendas-aging td:first-child small { display: block; margin-top: 5px; color: var(--texto-fraco); }
.vendas-aging-critico { background: var(--erro-fundo); }
.vendas-aging-critico .vendas-numero { color: var(--erro); font-weight: 800; }

.vendas-atividade {
  display: grid;
  grid-template-columns: repeat(8, minmax(90px, 1fr));
  gap: 1px;
  overflow-x: auto;
  border: 1px solid var(--borda-tabela);
  border-radius: 12px;
  background: var(--borda-tabela);
}
.vendas-atividade-passo {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 100px;
  padding: 13px 12px;
  background: var(--tile);
}
.vendas-atividade-indice {
  color: var(--acento-ui);
  font: 800 var(--t-micro)/1 var(--fonte-num);
  letter-spacing: .12em;
}
.vendas-atividade-passo strong { font: 800 25px/1 var(--fonte-num); }
.vendas-atividade-passo > span:not(.vendas-atividade-indice) { min-height: 28px; color: var(--texto-suave); font-size: var(--t-micro); }
.vendas-atividade-passo i {
  display: block;
  height: 4px;
  margin-top: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--borda-tabela);
}
.vendas-atividade-passo i::after {
  content: '';
  display: block;
  width: var(--progresso);
  height: 100%;
  border-radius: inherit;
  background: var(--acento-ui);
}

.vendas-perdas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.vendas-perdas > section {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--tile);
}
.vendas-perdas > section > strong { margin-bottom: 3px; color: var(--texto-fraco); font-size: var(--t-micro); text-transform: uppercase; }
.vendas-perdas button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 9px;
  border: 1px solid var(--borda-tabela);
  border-radius: 7px;
  color: var(--texto);
  background: var(--superficie);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.vendas-perdas button:hover { border-color: var(--acento-ui); }
.vendas-perdas button:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.vendas-perdas button b { font-family: var(--fonte-num); }
.vendas-perdas p { margin: 0; color: var(--texto-fraco); font-size: var(--t-nota); }
.vendas-zappy { min-width: 620px; }

.vendas-recorte {
  display: grid;
  gap: 13px;
  padding: 17px;
  border: 1px solid var(--acento-ui);
  border-radius: 13px;
  background: var(--acento-ui-fraco);
  box-shadow: inset 3px 0 0 var(--acento-ui);
}
.vendas-recorte > header,
.vendas-detalhe > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.vendas-recorte h3,
.vendas-detalhe h3 { font-size: 21px; }
.vendas-recorte-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.vendas-recorte-lista button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--borda);
  border-radius: 9px;
  color: var(--texto);
  background: var(--superficie);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.vendas-recorte-lista button:hover { border-color: var(--acento-ui); }
.vendas-recorte-lista button > span { display: grid; gap: 3px; min-width: 0; }
.vendas-recorte-lista small { color: var(--texto-fraco); font-size: var(--t-micro); }

.vendas-contagem {
  padding: 6px 9px;
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
  color: var(--texto-suave);
  background: var(--tile);
  font: 700 var(--t-micro)/1 var(--fonte-num);
}
.vendas-fila { min-width: 1260px; }
.vendas-fila :is(th, td):first-child { min-width: 310px; max-width: 360px; }
.vendas-estados { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.vendas-estados .estado { font-size: 9px; }

.vendas-detalhe {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--borda);
  border-radius: 14px;
  background: var(--superficie);
  box-shadow: var(--sombra-baixa);
}
.vendas-detalhe-vazio { place-items: center; min-height: 180px; text-align: center; }
.vendas-detalhe-status { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vendas-detalhe-grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.vendas-detalhe dl {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 1px;
  border: 1px solid var(--borda-tabela);
  border-radius: 10px;
  overflow: hidden;
  background: var(--borda-tabela);
}
.vendas-detalhe dl > div { padding: 10px 11px; background: var(--tile); }
.vendas-detalhe dt {
  margin-bottom: 5px;
  color: var(--texto-fraco);
  font: 700 var(--t-micro)/1.2 var(--fonte-num);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vendas-detalhe dd { margin: 0; color: var(--texto); font-size: var(--t-peq); font-weight: 700; }
.vendas-timeline { display: grid; gap: 10px; }
.vendas-timeline ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 7px;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
}
.vendas-timeline li {
  display: grid;
  gap: 7px;
  min-width: 130px;
  padding: 11px;
  border-left: 3px solid var(--acento-ui);
  border-radius: 8px;
  background: var(--tile);
}
.vendas-timeline li span { color: var(--acento-ui); font: 800 var(--t-micro)/1 var(--fonte-num); }
.vendas-timeline li strong { font-size: var(--t-micro); line-height: 1.35; }
.vendas-timeline li small,
.vendas-timeline li time { color: var(--texto-fraco); font-size: 10px; line-height: 1.35; }
.vendas-detalhe-nota {
  padding: 11px 13px;
  border-left: 3px solid var(--info);
  border-radius: 8px;
  background: var(--info-fundo);
  font-size: var(--t-nota);
}

.vendas-qualidade-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}
.vendas-qualidade-kpi {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  min-height: 130px;
  padding: 14px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: var(--tile);
}
.vendas-qualidade-kpi > span:first-child { color: var(--texto-fraco); font-size: var(--t-micro); font-weight: 700; text-transform: uppercase; }
.vendas-qualidade-kpi > strong { font: 800 clamp(23px, 2vw, 32px)/1 var(--fonte-num); }
.vendas-qualidade-kpi small { color: var(--texto-suave); font-size: var(--t-micro); }
.vendas-qualidade-kpi .estado { justify-self: start; margin-top: auto; }

.vendas-fontes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}
.vendas-fontes article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-content: start;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--borda);
  border-radius: 11px;
  background: var(--tile);
}
.vendas-fonte-sigla {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: var(--acento-ui);
  background: var(--acento-ui-fraco);
  font: 800 var(--t-micro)/1 var(--fonte-num);
}
.vendas-fontes article > div { display: grid; gap: 5px; min-width: 0; }
.vendas-fontes p { margin: 0; color: var(--texto-suave); font-size: var(--t-micro); line-height: 1.4; }
.vendas-fontes small { color: var(--texto-fraco); font-size: 10px; }
.vendas-fontes .estado { grid-column: 1 / -1; justify-self: start; }

.vendas-excecoes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.vendas-excecoes article {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 120px;
  padding: 13px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--tile);
}
.vendas-excecoes .estado { justify-self: start; }
.vendas-excecoes p { margin: 0; color: var(--texto-fraco); font: 600 var(--t-micro)/1.5 var(--fonte-num); }

.vendas-regras {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--borda);
  border-radius: 14px;
  background: var(--superficie);
}
.vendas-regras h3 { font-size: 22px; }
.vendas-regras-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.vendas-regras article { padding: 12px 13px; border-left: 3px solid var(--acento-ui); border-radius: 8px; background: var(--tile); }
.vendas-regras article p { margin-top: 5px; font-size: var(--t-nota); }

.vendas-real-grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.vendas-real-grade article {
  display: grid;
  align-content: start;
  gap: 9px;
  min-height: 170px;
  padding: 15px;
  border: 1px solid var(--borda);
  border-radius: 11px;
  background: var(--tile);
}
.vendas-real-grade .estado { justify-self: start; }
.vendas-real-grade h3,
.vendas-real-grade p { margin: 0; }
.vendas-real-grade p { color: var(--texto-suave); font-size: var(--t-peq); line-height: 1.5; }
.vendas-contrato { display: flex; gap: 7px; flex-wrap: wrap; }
.vendas-contrato code { padding: 6px 8px; border: 1px solid var(--borda); border-radius: 6px; color: var(--texto-suave); background: var(--tile); }
.vendas-real > .btn { justify-self: start; }

@media (max-width: 1180px) {
  .vendas-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vendas-resumo-grupos { grid-template-columns: minmax(0, 1fr); }
  .vendas-carteira-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vendas-qualidade-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vendas-fontes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 850px) {
  .vendas-filtros,
  .vendas-intro-visao { align-items: stretch; flex-direction: column; }
  .vendas-periodo { text-align: left; }
  .vendas-abertura { grid-template-columns: minmax(0, 1fr); }
  .vendas-abertura-meta { padding: 14px 0 0; border-top: 1px solid var(--borda-forte); border-left: 0; }
  .vendas-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vendas-detalhe-grade,
  .vendas-perdas,
  .vendas-excecoes,
  .vendas-real-grade { grid-template-columns: minmax(0, 1fr); }
  .vendas-intro-pergunta { max-width: none; }
}

@media (max-width: 620px) {
  .vendas-filtros-grupo,
  .vendas-filtro,
  .vendas-select { width: 100%; }
  .vendas-abas { display: flex; max-width: 100%; overflow-x: auto; }
  .vendas-aba { flex: 0 0 190px; }
  .vendas-kpis,
  .vendas-carteira-resumo,
  .vendas-qualidade-kpis,
  .vendas-fontes,
  .vendas-recorte-lista,
  .vendas-regras-grade { grid-template-columns: minmax(0, 1fr); }
  .vendas-regra-mql { grid-template-columns: minmax(0, 1fr); }
  .vendas-kpi { min-height: 108px; }
  .vendas-recorte > header,
  .vendas-detalhe > header { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .vendas-aba,
  .vendas-kpi-clicavel { transition: none; }
  .vendas-kpi-clicavel:hover { transform: none; }
}

/* =====================================================================
   SEO / SUPREMA DO BLOG · TORRE DE CONTROLE ORGANICA

   O desenho separa sintoma (ranking) de causa operacional (cluster,
   linkagem, CTR e saude). Cores continuam usando os papeis semanticos
   da casa; nenhuma cor de marca representa desempenho.
   ===================================================================== */
.pagina-corpo-seo { gap: 20px; }

.seo-contexto {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  border: 1px solid var(--borda-tabela);
  border-radius: 13px;
  overflow: hidden;
  background: var(--borda-tabela);
}
.seo-contexto > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px 14px;
  background: var(--tile);
}
.seo-contexto span,
.seo-eyebrow,
.seo-resumo-rotulo,
.seo-nicho-indice,
.seo-nicho-metricas dt {
  color: var(--texto-fraco);
  font: 700 var(--t-micro)/1.3 var(--fonte-num);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.seo-contexto strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--texto);
  font-size: var(--t-peq);
}

.seo-resumo,
.seo-nichos,
.seo-detalhe {
  display: grid;
  gap: 13px;
  min-width: 0;
}
.seo-secao-topo,
.seo-subtitulo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.seo-secao-topo h2,
.seo-subtitulo h2,
.seo-subtitulo h3 {
  margin: 3px 0 0;
  color: var(--texto);
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.15;
  letter-spacing: -.035em;
}
.seo-subtitulo h3 { font-size: 18px; }
.seo-secao-topo > p,
.seo-subtitulo p {
  margin: 0;
  color: var(--texto-fraco);
  font-size: var(--t-nota);
  line-height: 1.45;
  text-align: right;
}

.seo-resumo-grade,
.seo-detalhe-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
}
.seo-resumo-card {
  display: grid;
  align-content: space-between;
  gap: 12px;
  min-height: 128px;
  padding: 15px;
  border: 1px solid var(--borda);
  border-radius: 13px;
  background: var(--superficie);
  box-shadow: var(--sombra-baixa);
}
.seo-resumo-rotulo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.seo-resumo-valor {
  color: var(--texto);
  font-size: clamp(27px, 3vw, 40px);
  font-weight: var(--peso-forte);
  line-height: .95;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
}
.seo-resumo-card p {
  margin: 0;
  color: var(--texto-fraco);
  font-size: var(--t-nota);
  line-height: 1.4;
}

.seo-nichos-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.seo-nicho-card {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--borda);
  border-radius: 14px;
  background: var(--superficie);
  box-shadow: var(--sombra-baixa);
  transition: border-color var(--movimento-rapido) var(--easing-ui),
    transform var(--movimento-rapido) var(--easing-ui);
}
.seo-nicho-card:hover { border-color: var(--borda-forte); transform: translateY(-1px); }
.seo-nicho-card.selecionado { border-color: var(--acento-ui); box-shadow: 0 0 0 2px var(--acento-ui-fraco); }
.seo-nicho-topo,
.seo-nicho-posicao,
.seo-detalhe-status {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.seo-nicho-topo h3 { margin: 3px 0 0; font-size: 19px; letter-spacing: -.025em; }
.seo-status {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 5px 8px;
  border: 1px solid currentcolor;
  border-radius: 999px;
  font: 700 var(--t-micro)/1 var(--fonte-num);
  letter-spacing: .04em;
  white-space: nowrap;
  text-transform: uppercase;
}
.seo-status-top3 { color: var(--ok); background: var(--ok-fundo); }
.seo-status-risco { color: var(--parcial); background: var(--parcial-fundo); }
.seo-status-ataque { color: var(--atencao); background: var(--atencao-fundo); }
.seo-status-fora { color: var(--erro); background: var(--erro-fundo); }
.seo-status-sem-dado { color: var(--sem-dado); background: var(--sem-dado-fundo); }

.seo-nicho-posicao > strong {
  color: var(--texto);
  font-size: clamp(34px, 4vw, 48px);
  line-height: .9;
  letter-spacing: -.065em;
  font-variant-numeric: tabular-nums;
}
.seo-nicho-posicao > div { display: grid; justify-items: end; gap: 4px; text-align: right; }
.seo-nicho-posicao small { color: var(--texto-fraco); font-size: var(--t-micro); }
.seo-variacao { font-size: var(--t-nota); font-weight: var(--peso-forte); }
.seo-variacao.melhorou { color: var(--ok); }
.seo-variacao.piorou { color: var(--erro); }

.seo-nicho-alvo {
  display: grid;
  gap: 5px;
  padding: 11px 12px;
  border-left: 3px solid var(--acento-ui);
  border-radius: 7px;
  background: var(--tile);
}
.seo-nicho-alvo span { color: var(--texto-fraco); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .08em; }
.seo-nicho-alvo strong { font-size: var(--t-peq); }
.seo-nicho-alvo code { color: var(--texto-suave); font-size: var(--t-micro); overflow-wrap: anywhere; }

.seo-nicho-metricas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 1px;
  border: 1px solid var(--borda-tabela);
  border-radius: 9px;
  overflow: hidden;
  background: var(--borda-tabela);
}
.seo-nicho-metricas > div { min-width: 0; padding: 9px 10px; background: var(--tile); }
.seo-nicho-metricas dt { margin-bottom: 4px; }
.seo-nicho-metricas dd { margin: 0; color: var(--texto); font-size: var(--t-peq); font-weight: var(--peso-forte); }
.seo-nicho-estrutura { display: flex; gap: 7px; flex-wrap: wrap; }
.seo-nicho-estrutura span,
.seo-acao {
  display: inline-flex;
  padding: 5px 7px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  color: var(--texto-suave);
  background: var(--tile);
  font-size: var(--t-micro);
}
.seo-nicho-estrutura .critico { color: var(--erro); border-color: var(--erro); background: var(--erro-fundo); }
.seo-nicho-ameaca {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-top: 11px;
  border-top: 1px solid var(--borda-tabela);
  color: var(--texto-suave);
  font-size: var(--t-nota);
  line-height: 1.45;
}
.seo-nicho-ameaca span { color: var(--texto-fraco); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .08em; }
.seo-nicho-abrir {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--borda-forte);
  border-radius: 8px;
  color: var(--texto);
  background: transparent;
  font: var(--peso-forte) var(--t-peq)/1.2 var(--fonte);
  cursor: pointer;
}
.seo-nicho-abrir:hover { border-color: var(--acento-ui); color: var(--acento-ui); }
.seo-nicho-card > .estado { justify-self: start; }

#seo-detalhe-conteudo { scroll-margin-top: calc(var(--topo-altura) + 18px); }
.seo-detalhe {
  padding: 19px;
  border: 1px solid var(--borda);
  border-radius: 16px;
  background: var(--superficie);
  box-shadow: var(--sombra-baixa);
}
.seo-detalhe-kpis .seo-resumo-card { min-height: 110px; background: var(--tile); box-shadow: none; }
.seo-detalhe-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(250px, .7fr);
  gap: 12px;
}
.seo-rede-wrap,
.seo-cobertura {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--borda);
  border-radius: 11px;
  background: var(--tile);
}
.seo-rede { display: grid; justify-items: center; gap: 0; min-width: 0; }
.seo-rede-pilar {
  display: grid;
  justify-items: center;
  gap: 4px;
  width: min(420px, 100%);
  padding: 13px;
  border: 1px solid var(--acento-ui);
  border-radius: 10px;
  color: var(--texto);
  background: var(--acento-ui-fraco);
  text-align: center;
}
.seo-rede-pilar span { color: var(--acento-ui); font: 700 var(--t-micro)/1 var(--fonte-num); letter-spacing: .1em; }
.seo-rede-pilar small { color: var(--texto-suave); overflow-wrap: anywhere; }
.seo-rede-ligacao { width: 1px; height: 24px; background: var(--borda-forte); }
.seo-rede-artigos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  padding-top: 13px;
}
.seo-rede-artigos::before {
  content: '';
  position: absolute;
  top: 0;
  left: 16.66%;
  right: 16.66%;
  height: 1px;
  background: var(--borda-forte);
}
.seo-rede-no {
  position: relative;
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--borda);
  border-radius: 9px;
  background: var(--superficie);
}
.seo-rede-no::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 50%;
  width: 1px;
  height: 13px;
  background: var(--borda-forte);
}
.seo-rede-no strong { font-size: var(--t-peq); line-height: 1.35; }
.seo-rede-no > span { color: var(--texto); font-size: 18px; font-weight: var(--peso-forte); }
.seo-rede-no small { color: var(--texto-fraco); font-size: var(--t-micro); }

.seo-cobertura dl { display: grid; gap: 1px; margin: 0; background: var(--borda-tabela); }
.seo-cobertura dl > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  background: var(--superficie);
}
.seo-cobertura dt { color: var(--texto-suave); font-size: var(--t-nota); }
.seo-cobertura dd { margin: 0; color: var(--texto); font-weight: var(--peso-forte); }
.seo-cobertura-barra { height: 8px; border-radius: 999px; overflow: hidden; background: var(--preench-vazio); }
.seo-cobertura-barra span { display: block; height: 100%; border-radius: inherit; background: var(--ok); }
.seo-cobertura > p { margin: 0; color: var(--texto-suave); font-size: var(--t-nota); line-height: 1.45; }
.seo-cobertura > p.seo-cobertura-alerta { color: var(--atencao); }
.seo-subtitulo-tabela { margin-top: 4px; }
.seo-tabela-cluster .dados { min-width: 860px; }

.seo-operacao-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .72fr);
  gap: 12px;
}
.seo-operacao-card {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--borda);
  border-radius: 14px;
  background: var(--superficie);
  box-shadow: var(--sombra-baixa);
}
.seo-operacao-card .dados { min-width: 620px; }
.seo-alertas-lista { display: grid; gap: 7px; }
.seo-alerta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--tile);
}
.seo-alerta-ponto { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: var(--sem-dado); }
.seo-alerta-ponto.erro { background: var(--erro); }
.seo-alerta-ponto.atencao { background: var(--atencao); }
.seo-alerta-ponto.parcial { background: var(--parcial); }
.seo-alerta strong { font-size: var(--t-peq); }
.seo-alerta p { margin: 4px 0 0; color: var(--texto-fraco); font-size: var(--t-nota); line-height: 1.4; }
.seo-regra-leitura {
  padding: 13px 15px;
  border-left: 3px solid var(--info);
  border-radius: 9px;
  color: var(--texto-suave);
  background: var(--info-fundo);
  font-size: var(--t-nota);
  line-height: 1.55;
}

@media (max-width: 1180px) {
  .seo-contexto,
  .seo-resumo-grade,
  .seo-detalhe-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-operacao-grade { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .seo-nichos-grade,
  .seo-detalhe-grade { grid-template-columns: minmax(0, 1fr); }
  .seo-secao-topo,
  .seo-subtitulo { align-items: flex-start; flex-direction: column; }
  .seo-secao-topo > p,
  .seo-subtitulo p { text-align: left; }
}

@media (max-width: 620px) {
  .seo-contexto,
  .seo-resumo-grade,
  .seo-detalhe-kpis,
  .seo-rede-artigos { grid-template-columns: minmax(0, 1fr); }
  .seo-rede-artigos { padding-top: 0; }
  .seo-rede-artigos::before,
  .seo-rede-no::before,
  .seo-rede-ligacao { display: none; }
  .seo-nicho-metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-nicho-topo,
  .seo-nicho-posicao { align-items: flex-start; flex-direction: column; }
  .seo-nicho-posicao > div { justify-items: start; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .seo-nicho-card { transition: none; }
  .seo-nicho-card:hover { transform: none; }
}


/* =====================================================================
   VARIACOES LOCAIS DE ACABAMENTO — 25/09/2026

   Ativacao, sem persistencia e sem alterar a estrutura:
     /?visual=editorial#/crescimento/funil?demo=1
     /?visual=pulse#/crescimento/funil?demo=1
     /?visual=impacto#/crescimento/funil?demo=1

   Os tokens semanticos (ok, atencao, erro, demo e parcial) continuam
   vindo de theme.css. Estas peles mudam somente identidade, superficies,
   tipografia, elevacao e linguagem grafica.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. EDITORIAL PREMIUM — relatorio estrategico, quente e tipografico
   --------------------------------------------------------------------- */
:root[data-visual="editorial"] {
  --fundo: #14130F;
  --superficie: #201F1C;
  --superficie-alta: #292720;
  --tile: #24221D;
  --borda: #49443A;
  --borda-forte: #887B68;
  --borda-tabela: #3D3931;
  --texto: #F4EBDD;
  --texto-suave: #C4B8A4;
  --texto-fraco: #A89A86;
  --texto-inverso: #1D120D;
  --marca-texto: #FF9B62;
  --acento-ui: #FF8B52;
  --acento-ui-fraco: #3A241B;
  --foco: #B1A3FF;
  --selecao-fundo: #342820;
  --chip-fundo: #392E25;
  --serie-atual: #FF8B52;
  --serie-anterior: #B8A68E;
  --grade-grafico: #887B6829;
  --ativo-gradiente: linear-gradient(135deg, #4B2A20, #372D25);
  --ativo-borda: #FF8B52;
  --nav-fundo: #171613;
  --nav-fundo-hover: #302D27;
  --nav-borda: #4A443A;
  --nav-texto: #F1E6D6;
  --nav-texto-fraco: #B7A792;
  --nav-acento: #FF9B62;
  --nav-ativo-fundo: #F2D2BE;
  --nav-ativo-texto: #492019;
  --sombra-baixa: 0 1px 0 #0008;
  --sombra-alta: 0 18px 48px #0005;
}

:root[data-tema="claro"][data-visual="editorial"] {
  --fundo: #F4EFE6;
  --superficie: #FFFCF7;
  --superficie-alta: #F8F1E7;
  --tile: #FFF9EF;
  --borda: #D9C8B4;
  --borda-forte: #8E7968;
  --borda-tabela: #E7DACB;
  --texto: #2B211B;
  --texto-suave: #655248;
  --texto-fraco: #6E5A50;
  --texto-inverso: #FFFFFF;
  --marca-texto: #A9450A;
  --acento-ui: #8B2F45;
  --acento-ui-fraco: #F6E4E8;
  --foco: #176B73;
  --selecao-fundo: #FAE7D2;
  --chip-fundo: #F2E0CF;
  --serie-atual: #8B2F45;
  --serie-anterior: #8A7365;
  --grade-grafico: #8E796826;
  --ativo-gradiente: linear-gradient(135deg, #F6E4E8, #FAE7D2);
  --ativo-borda: #8B2F45;
  --nav-fundo: #2B211B;
  --nav-fundo-hover: #41322A;
  --nav-borda: #57443A;
  --nav-texto: #FFF8F1;
  --nav-texto-fraco: #CDB8AA;
  --nav-acento: #FFB07A;
  --nav-ativo-fundo: #F2D2BE;
  --nav-ativo-texto: #492019;
  --sombra-baixa: 0 1px 0 #2B211B18;
  --sombra-alta: 0 14px 38px #3A2A1817;
}

:root[data-visual="editorial"] body,
:root[data-visual="editorial"] .frame {
  background-color: var(--fundo);
  background-image:
    linear-gradient(90deg, transparent 0 49.8%, var(--grade-grafico) 50%, transparent 50.2%),
    radial-gradient(circle at 86% 4%, var(--acento-ui-fraco), transparent 28%);
  background-size: 84px 84px, auto;
}
:root[data-visual="editorial"] .topo {
  border-bottom: 2px solid var(--borda-forte);
  box-shadow: none;
}
:root[data-visual="editorial"] .workspace,
:root[data-visual="editorial"] .mode-control,
:root[data-visual="editorial"] .workspace a,
:root[data-visual="editorial"] .mode-control a {
  border-radius: 2px;
}
:root[data-visual="editorial"] .sidebar {
  border-right: 1px solid var(--nav-borda);
}
:root[data-visual="editorial"] .sidenav-item {
  border-left: 3px solid transparent;
  border-radius: 0;
}
:root[data-visual="editorial"] .sidenav-item.active {
  border-left-color: var(--nav-acento);
  box-shadow: none;
}
:root[data-visual="editorial"] .pagina-titulo,
:root[data-visual="editorial"] .painel .secao-titulo,
:root[data-visual="editorial"] .sideintro strong {
  font-family: Georgia, Cambria, "Times New Roman", serif;
}
:root[data-visual="editorial"] .pagina-titulo {
  max-width: 780px;
  font-size: clamp(34px, 3.2vw, 48px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.045em;
}
:root[data-visual="editorial"] .pagina-id .eyebrow,
:root[data-visual="editorial"] .barra-controles-rotulo,
:root[data-visual="editorial"] .grupo-titulo span {
  font-family: var(--fonte-num);
  letter-spacing: .18em;
}
:root[data-visual="editorial"] .pagina-corpo > .painel {
  border-radius: 3px;
  border-top: 3px solid var(--acento-ui);
  box-shadow: none;
}
:root[data-visual="editorial"] .pagina-corpo > .painel > .painel-topo {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--borda);
}
:root[data-visual="editorial"] .barra-controles,
:root[data-visual="editorial"] .grupo-cartoes,
:root[data-visual="editorial"] .alternador-opcao,
:root[data-visual="editorial"] .grafico-ausente,
:root[data-visual="editorial"] .cartao,
:root[data-visual="editorial"] .tabela-wrap {
  border-radius: 3px;
}
:root[data-visual="editorial"] .etapa-funil {
  background: transparent;
}
:root[data-visual="editorial"] .etapa-indice {
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--acento-ui);
  font: 700 30px/1 Georgia, Cambria, serif;
  letter-spacing: -.04em;
}
:root[data-visual="editorial"] .taxa-cartao,
:root[data-visual="editorial"] .econ-cartao {
  border-radius: 2px;
  border-bottom: 2px solid var(--acento-ui);
}
:root[data-visual="editorial"] .painel-acao > :is(a, button).textbtn:not(.textbtn-pendente) {
  border-radius: 2px;
}

/* ---------------------------------------------------------------------
   2. DATA PULSE — sala de comando, sinal, grid e luz controlada
   --------------------------------------------------------------------- */
:root[data-visual="pulse"] {
  --fundo: #060914;
  --superficie: #0B1220;
  --superficie-alta: #101B2B;
  --tile: #0E1928;
  --borda: #20344A;
  --borda-forte: #5C7893;
  --borda-tabela: #1B2D41;
  --texto: #F5F8FF;
  --texto-suave: #B7C9DA;
  --texto-fraco: #91A8BD;
  --texto-inverso: #04130F;
  --marca-texto: #FF8D4D;
  --acento-ui: #35F2D0;
  --acento-ui-fraco: #0C3835;
  --foco: #FF5CC8;
  --selecao-fundo: #112E44;
  --chip-fundo: #12323A;
  --serie-atual: #35F2D0;
  --serie-anterior: #7C8DFF;
  --grade-grafico: #35F2D01A;
  --ativo-gradiente: linear-gradient(125deg, #0D4B50, #321B50);
  --ativo-borda: #35F2D0;
  --nav-fundo: #070D18;
  --nav-fundo-hover: #111D2D;
  --nav-borda: #24364B;
  --nav-texto: #EEF6FF;
  --nav-texto-fraco: #A6BED1;
  --nav-acento: #35F2D0;
  --nav-ativo-fundo: #35F2D0;
  --nav-ativo-texto: #06231F;
  --sombra-baixa: 0 10px 30px #0006, inset 0 1px 0 #35F2D014;
  --sombra-alta: 0 20px 56px #0008, 0 0 0 1px #35F2D010;
}

:root[data-tema="claro"][data-visual="pulse"] {
  --fundo: #EAF3F7;
  --superficie: #F8FCFE;
  --superficie-alta: #E7F1F6;
  --tile: #F3F9FC;
  --borda: #B8CED9;
  --borda-forte: #567085;
  --borda-tabela: #D4E3EA;
  --texto: #102333;
  --texto-suave: #425E70;
  --texto-fraco: #567085;
  --texto-inverso: #FFFFFF;
  --marca-texto: #A9450A;
  --acento-ui: #006D84;
  --acento-ui-fraco: #D6F5FA;
  --foco: #7149D8;
  --selecao-fundo: #DDF2F8;
  --chip-fundo: #D8EBF1;
  --serie-atual: #007F99;
  --serie-anterior: #667C8B;
  --grade-grafico: #3D7E9224;
  --ativo-gradiente: linear-gradient(125deg, #D6F5FA, #E9E2FF);
  --ativo-borda: #006D84;
  --nav-fundo: #0B1B2A;
  --nav-fundo-hover: #153047;
  --nav-borda: #294961;
  --nav-texto: #F2FAFE;
  --nav-texto-fraco: #ACC5D2;
  --nav-acento: #58E6FF;
  --nav-ativo-fundo: #CFF7F2;
  --nav-ativo-texto: #073C46;
  --sombra-baixa: 0 10px 28px #0A39501A, inset 0 1px 0 #FFFFFF;
  --sombra-alta: 0 20px 52px #0A395026, 0 0 0 1px #006D8412;
}

:root[data-visual="pulse"] body,
:root[data-visual="pulse"] .frame {
  background-color: var(--fundo);
  background-image:
    radial-gradient(var(--grade-grafico) 1px, transparent 1px),
    radial-gradient(circle at 82% 0, var(--acento-ui-fraco), transparent 30%);
  background-size: 22px 22px, auto;
}
:root[data-visual="pulse"] .topo {
  background-image: linear-gradient(90deg, var(--superficie), var(--superficie-alta));
  border-bottom-color: var(--acento-ui);
  box-shadow: 0 8px 30px #0002;
}
:root[data-visual="pulse"] .workspace,
:root[data-visual="pulse"] .mode-control {
  border-color: var(--borda-forte);
}
:root[data-visual="pulse"] .workspace a.active {
  background: var(--ativo-gradiente);
  border: 1px solid var(--ativo-borda);
  color: var(--texto);
  box-shadow: 0 0 18px var(--acento-ui-fraco);
}
:root[data-visual="pulse"] .sidebar {
  background-image: linear-gradient(180deg, var(--nav-fundo), #0A1727);
  border-right: 1px solid var(--nav-borda);
}
:root[data-visual="pulse"] .sidenav-item.active {
  box-shadow: 0 0 0 1px var(--nav-acento), 0 0 22px #35F2D026;
}
:root[data-visual="pulse"] .pagina-titulo {
  font-size: clamp(32px, 3vw, 43px);
  letter-spacing: -.055em;
  text-shadow: 0 0 26px var(--acento-ui-fraco);
}
:root[data-visual="pulse"] .pagina-id .eyebrow,
:root[data-visual="pulse"] .barra-controles-rotulo,
:root[data-visual="pulse"] .etapa-indice,
:root[data-visual="pulse"] .grupo-titulo span {
  font-family: var(--fonte-num);
  letter-spacing: .16em;
}
:root[data-visual="pulse"] .pagina-corpo > .painel {
  border-top: 2px solid var(--acento-ui);
  border-radius: 12px;
  background-image: linear-gradient(145deg, var(--superficie), var(--superficie-alta));
  box-shadow: var(--sombra-alta);
}
:root[data-visual="pulse"] .pagina-corpo > .painel > .painel-topo::after {
  content: "";
  order: 99;
  width: 100%;
  height: 2px;
  margin-top: 8px;
  background: linear-gradient(90deg, var(--acento-ui), var(--foco), transparent 78%);
}
:root[data-visual="pulse"] .barra-controles,
:root[data-visual="pulse"] .grupo-cartoes {
  border-color: var(--borda-forte);
  background-image: linear-gradient(145deg, var(--superficie), var(--superficie-alta));
}
:root[data-visual="pulse"] .etapa-indice {
  width: 33px;
  min-width: 33px;
  height: 33px;
  padding: 0;
  border: 0;
  border-radius: 0;
  clip-path: polygon(25% 7%, 75% 7%, 100% 50%, 75% 93%, 25% 93%, 0 50%);
  background: var(--acento-ui-fraco);
  color: var(--acento-ui);
}
:root[data-visual="pulse"] .etapa-funil:not(:last-child)::after {
  border-color: var(--acento-ui);
  filter: drop-shadow(0 0 4px var(--acento-ui));
}
:root[data-visual="pulse"] .econ-cartao-vivo,
:root[data-visual="pulse"] .etapa-funil-viva,
:root[data-visual="pulse"] .taxa-cartao-viva {
  box-shadow: inset 3px 0 0 var(--acento-ui), 0 0 22px var(--acento-ui-fraco);
}
:root[data-visual="pulse"] .linha-etapa-barras > .trilha {
  background-image: repeating-linear-gradient(90deg, transparent 0 16px, var(--grade-grafico) 16px 17px);
}
:root[data-visual="pulse"] .grafico-ausente {
  background-image:
    radial-gradient(var(--grade-grafico) 1px, transparent 1px),
    linear-gradient(145deg, var(--tile), var(--superficie-alta));
  background-size: 18px 18px, auto;
}
:root[data-visual="pulse"] .btn-primario {
  box-shadow: 0 0 20px var(--acento-ui-fraco);
}

/* A mesa de diagnostico e uma estrutura aninhada; ela nao passa pelo
   seletor historico `.pagina-corpo > .painel`. O acabamento Pulse e
   estendido explicitamente para estas novas superficies, sem vazar
   para as demais paginas que compartilham o mesmo query externo. */
:root[data-visual="pulse"] .pagina-corpo-diagnostico .diagnostico-contexto,
:root[data-visual="pulse"] .pagina-corpo-diagnostico .diagnostico-grade > .painel,
:root[data-visual="pulse"] .pagina-corpo-diagnostico .diagnostico-cobertura {
  border-top: 2px solid var(--acento-ui);
  border-radius: 12px;
  background-image: linear-gradient(145deg, var(--superficie), var(--superficie-alta));
  box-shadow: var(--sombra-alta);
}
:root[data-visual="pulse"] .pagina-corpo-diagnostico .diagnostico-kpi {
  background-image:
    radial-gradient(circle at 90% 8%, var(--acento-ui-fraco), transparent 38%),
    linear-gradient(145deg, var(--superficie), var(--superficie-alta));
}
:root[data-visual="pulse"] .pagina-corpo-diagnostico .diagnostico-analise-card {
  background-image: linear-gradient(145deg, var(--superficie), var(--superficie-alta));
}
:root[data-visual="pulse"] .pagina-corpo-diagnostico .diagnostico-analise-pronta {
  box-shadow: inset 3px 0 0 var(--acento-ui), var(--sombra-baixa);
}
:root[data-visual="pulse"] .pagina-corpo-diagnostico .diagnostico-contexto-topo::after,
:root[data-visual="pulse"] .pagina-corpo-diagnostico .diagnostico-grade > .painel > .painel-topo::after {
  content: "";
  order: 99;
  width: 100%;
  height: 2px;
  margin-top: 8px;
  background: linear-gradient(90deg, var(--acento-ui), var(--foco), transparent 78%);
}
:root[data-visual="pulse"] .pagina-corpo-diagnostico .diagnostico-contexto-topo {
  flex-wrap: wrap;
}
:root[data-visual="pulse"] .pagina-corpo-diagnostico .diagnostico-etapa-indice {
  border: 0;
  border-radius: 0;
  clip-path: polygon(25% 7%, 75% 7%, 100% 50%, 75% 93%, 25% 93%, 0 50%);
  background: var(--acento-ui-fraco);
  color: var(--acento-ui);
}
:root[data-visual="pulse"] .pagina-corpo-diagnostico .diagnostico-etapa.selecionada {
  box-shadow: inset 4px 0 0 var(--acento-ui), 0 0 24px var(--acento-ui-fraco);
}
:root[data-visual="pulse"] .pagina-corpo-diagnostico .diagnostico-etapa.selecionada .diagnostico-etapa-indice {
  color: var(--texto-inverso);
  background: var(--acento-ui);
}
:root[data-visual="pulse"] .pagina-corpo-diagnostico .diagnostico-passagem:not(.diagnostico-passagem-atencao) .diagnostico-passagem-linha {
  background: var(--acento-ui);
  box-shadow: 0 0 8px var(--acento-ui);
}
:root[data-visual="pulse"] .pagina-corpo-diagnostico .diagnostico-passagem:not(.diagnostico-passagem-atencao) .diagnostico-passagem-linha::after {
  border-color: var(--acento-ui);
}

/* O cockpit de Aquisição compartilha a linguagem da mesa de
   diagnóstico, mas mantém uma raiz própria para não acoplar as duas
   arquiteturas de informação. */
:root[data-visual="pulse"] .pagina-corpo-aquisicao > .painel,
:root[data-visual="pulse"] .pagina-corpo-aquisicao .diagnostico-contexto,
:root[data-visual="pulse"] .pagina-corpo-aquisicao .aquisicao-sinal,
:root[data-visual="pulse"] .pagina-corpo-aquisicao .aquisicao-pulso-grupo,
:root[data-visual="pulse"] .pagina-corpo-aquisicao .diagnostico-cobertura {
  border-top: 2px solid var(--acento-ui);
  border-radius: 12px;
  background-image: linear-gradient(145deg, var(--superficie), var(--superficie-alta));
  box-shadow: var(--sombra-alta);
}
:root[data-visual="pulse"] .pagina-corpo-aquisicao .aquisicao-pulso-item {
  background-image:
    radial-gradient(circle at 90% 8%, var(--acento-ui-fraco), transparent 38%),
    linear-gradient(145deg, var(--tile), var(--superficie));
}
:root[data-visual="pulse"] .pagina-corpo-aquisicao .aquisicao-tendencia-serie:is(.serie),
:root[data-visual="pulse"] .pagina-corpo-aquisicao .aquisicao-tendencia-serie > .serie {
  background-image:
    repeating-linear-gradient(
      to top,
      transparent 0 34px,
      var(--grade-grafico) 34px 35px
    ),
    radial-gradient(var(--grade-grafico) 1px, transparent 1px),
    linear-gradient(145deg, var(--tile), var(--superficie-alta));
  background-size: auto, 18px 18px, auto;
}
:root[data-visual="pulse"] .pagina-corpo-aquisicao .aquisicao-tendencia-serie .serie-barra > i,
:root[data-visual="pulse"] .pagina-corpo-aquisicao .aquisicao-tendencia-serie.serie .serie-barra > i {
  box-shadow: 0 0 12px var(--acento-ui-fraco);
}
:root[data-visual="pulse"] .pagina-corpo-aquisicao button.segmentado-opcao:is(.active, [aria-pressed="true"], [aria-selected="true"]) {
  border-color: var(--acento-ui);
  background: var(--ativo-gradiente);
  box-shadow: inset 0 0 0 1px var(--acento-ui), 0 0 16px var(--acento-ui-fraco);
}
:root[data-visual="pulse"] .pagina-corpo-aquisicao .aquisicao-tabela tbody tr[aria-selected="true"] > td,
:root[data-visual="pulse"] .pagina-corpo-aquisicao .aquisicao-tabela tbody tr:focus-within > td {
  background: var(--selecao-fundo);
}
:root[data-visual="pulse"] .pagina-corpo-aquisicao .aquisicao-linha-detalhe:not(tr),
:root[data-visual="pulse"] .pagina-corpo-aquisicao tr.aquisicao-linha-detalhe > td > :first-child {
  background-image: linear-gradient(145deg, var(--tile), var(--superficie-alta));
  box-shadow: inset 3px 0 0 var(--acento-ui), var(--sombra-baixa);
}
:root[data-visual="pulse"] .pagina-corpo-aquisicao .diagnostico-contexto-topo {
  flex-wrap: wrap;
}
:root[data-visual="pulse"] .pagina-corpo-aquisicao .diagnostico-contexto-topo::after {
  content: "";
  order: 99;
  width: 100%;
  height: 2px;
  margin-top: 8px;
  background: linear-gradient(90deg, var(--acento-ui), var(--foco), transparent 78%);
}

/* Vendas usa a mesma energia Pulse sem reaproveitar a arquitetura de
   Aquisição: aqui a hierarquia é sinal → contribuinte → negócio. */
:root[data-visual="pulse"] .pagina-corpo-vendas .vendas-filtros,
:root[data-visual="pulse"] .pagina-corpo-vendas .vendas-abertura,
:root[data-visual="pulse"] .pagina-corpo-vendas .vendas-abas,
:root[data-visual="pulse"] .pagina-corpo-vendas .vendas-visao > .painel,
:root[data-visual="pulse"] .pagina-corpo-vendas .vendas-detalhe,
:root[data-visual="pulse"] .pagina-corpo-vendas .vendas-regras {
  border-top: 2px solid var(--acento-ui);
  border-radius: 12px;
  background-image: linear-gradient(145deg, var(--superficie), var(--superficie-alta));
  box-shadow: var(--sombra-alta);
}
:root[data-visual="pulse"] .pagina-corpo-vendas .vendas-kpi,
:root[data-visual="pulse"] .pagina-corpo-vendas .vendas-qualidade-kpi {
  background-image:
    radial-gradient(circle at 90% 8%, var(--acento-ui-fraco), transparent 40%),
    linear-gradient(145deg, var(--tile), var(--superficie));
}
:root[data-visual="pulse"] .pagina-corpo-vendas .vendas-kpi.destaque {
  box-shadow: inset 3px 0 0 var(--acento-ui), 0 0 20px var(--acento-ui-fraco);
}
:root[data-visual="pulse"] .pagina-corpo-vendas .vendas-aba.active {
  border-color: var(--acento-ui);
  background: var(--ativo-gradiente);
  box-shadow: inset 0 0 0 1px var(--acento-ui), 0 0 16px var(--acento-ui-fraco);
}
:root[data-visual="pulse"] .pagina-corpo-vendas .vendas-recorte,
:root[data-visual="pulse"] .pagina-corpo-vendas .vendas-detalhe {
  box-shadow: inset 3px 0 0 var(--acento-ui), var(--sombra-alta);
}
:root[data-visual="pulse"] .pagina-corpo-vendas .vendas-tabela tbody tr.selecionado > td,
:root[data-visual="pulse"] .pagina-corpo-vendas .vendas-tabela tbody tr:focus-within > td {
  background: var(--selecao-fundo);
}
:root[data-visual="pulse"] .pagina-corpo-vendas .vendas-atividade-passo i::after {
  box-shadow: 0 0 9px var(--acento-ui);
}

/* ---------------------------------------------------------------------
   3. IMPACTO GRAFICO — cartaz editorial, blocos e identidade corajosa
   --------------------------------------------------------------------- */
:root[data-visual="impacto"] {
  --fundo: #111318;
  --superficie: #191C22;
  --superficie-alta: #242831;
  --tile: #1E222A;
  --borda: #59616F;
  --borda-forte: #FFF4E7;
  --borda-tabela: #424955;
  --texto: #FFF4E7;
  --texto-suave: #D7C8B8;
  --texto-fraco: #B8A795;
  --texto-inverso: #17120C;
  --marca-texto: #FF9B62;
  --acento-ui: #FF8B45;
  --acento-ui-fraco: #442314;
  --foco: #67D2F7;
  --selecao-fundo: #2E3440;
  --chip-fundo: #303640;
  --serie-atual: #32B5E5;
  --serie-anterior: #FF5F91;
  --grade-grafico: #FFF4E72B;
  --nav-fundo: #0C0E12;
  --nav-fundo-hover: #262B34;
  --nav-borda: #59616F;
  --nav-texto: #FFF4E7;
  --nav-texto-fraco: #C2B09D;
  --nav-acento: #FF8B45;
  --nav-ativo-fundo: #FFD43B;
  --nav-ativo-texto: #2A2100;
  --visual-laranja: #FF8B45;
  --visual-azul: #32B5E5;
  --visual-amarelo: #FFD43B;
  --visual-rosa: #FF5F91;
  --cabecalho-visual-texto: #111727;
  --sombra-baixa: 4px 4px 0 #000000;
  --sombra-alta: 7px 7px 0 #000000;
}

:root[data-tema="claro"][data-visual="impacto"] {
  --fundo: #EEF1F6;
  --superficie: #FFFFFF;
  --superficie-alta: #F4F6FA;
  --tile: #FFFFFF;
  --borda: #CCD4E1;
  --borda-forte: #68758B;
  --borda-tabela: #DDE3EC;
  --texto: #111727;
  --texto-suave: #44516A;
  --texto-fraco: #58657B;
  --texto-inverso: #FFFFFF;
  --marca-texto: #A63F00;
  --acento-ui: #1746C8;
  --acento-ui-fraco: #E2E9FF;
  --foco: #C62F63;
  --selecao-fundo: #E9EEFF;
  --chip-fundo: #E3E8F3;
  --serie-atual: #1746C8;
  --serie-anterior: #C62F63;
  --grade-grafico: #1746C81F;
  --nav-fundo: #111727;
  --nav-fundo-hover: #202A43;
  --nav-borda: #35405A;
  --nav-texto: #F8FAFF;
  --nav-texto-fraco: #B9C4D8;
  --nav-acento: #87A8FF;
  --nav-ativo-fundo: #FFD43B;
  --nav-ativo-texto: #2A2100;
  --visual-laranja: #F26C20;
  --visual-azul: #1746C8;
  --visual-amarelo: #FFD43B;
  --visual-rosa: #C62F63;
  --cabecalho-visual-texto: #FFFFFF;
  --sombra-baixa: 4px 4px 0 #111727;
  --sombra-alta: 7px 7px 0 #111727;
}

:root[data-visual="impacto"] body,
:root[data-visual="impacto"] .frame {
  background-color: var(--fundo);
  background-image:
    linear-gradient(135deg, transparent 0 88%, var(--visual-amarelo) 88% 90%, transparent 90%),
    linear-gradient(45deg, transparent 0 92%, var(--visual-rosa) 92% 93%, transparent 93%);
}
:root[data-visual="impacto"] .topo {
  border-bottom: 3px solid var(--borda-forte);
  box-shadow: none;
}
:root[data-visual="impacto"] .workspace,
:root[data-visual="impacto"] .mode-control {
  padding: 2px;
  border: 2px solid var(--borda-forte);
  border-radius: 4px;
}
:root[data-visual="impacto"] .workspace a,
:root[data-visual="impacto"] .mode-control a {
  border-radius: 1px;
}
:root[data-visual="impacto"] .workspace a.active {
  background: var(--visual-amarelo);
  color: #2A2100;
  box-shadow: none;
}
:root[data-visual="impacto"] .sidebar {
  border-right: 3px solid var(--visual-laranja);
}
:root[data-visual="impacto"] .sidenav-item {
  border: 2px solid transparent;
  border-radius: 3px;
}
:root[data-visual="impacto"] .sidenav-item.active {
  border-color: #2A2100;
  box-shadow: 3px 3px 0 var(--visual-laranja);
}
:root[data-visual="impacto"] .pagina-titulo {
  display: inline;
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.06em;
  background: linear-gradient(transparent 72%, var(--visual-laranja) 72% 91%, transparent 91%);
}
:root[data-visual="impacto"] .pagina-id .eyebrow {
  color: var(--visual-rosa);
  font-weight: 800;
}
:root[data-visual="impacto"] .pagina-corpo > .painel {
  border: 2px solid var(--borda-forte);
  border-radius: 4px;
  box-shadow: var(--sombra-alta);
}
:root[data-visual="impacto"] .pagina-corpo > .painel > .painel-topo {
  margin: -20px -20px 18px;
  padding: 15px 20px;
  background: var(--visual-azul);
  color: var(--cabecalho-visual-texto);
}
:root[data-visual="impacto"] .pagina-corpo > .painel > .painel-topo .painel-sub {
  color: var(--cabecalho-visual-texto);
  opacity: .82;
}
:root[data-visual="impacto"] .pagina-corpo > .painel > .painel-topo .textbtn {
  color: var(--cabecalho-visual-texto);
  border-color: currentcolor;
}
:root[data-visual="impacto"] .pagina-corpo > .painel > .painel-topo .btn-inerte {
  color: var(--cabecalho-visual-texto);
  border-color: currentcolor;
  background: transparent;
}
:root[data-visual="impacto"] .barra-controles,
:root[data-visual="impacto"] .grupo-cartoes {
  border: 2px solid var(--borda-forte);
  border-radius: 4px;
  box-shadow: var(--sombra-baixa);
}
:root[data-visual="impacto"] .fileira-etapas {
  border: 2px solid var(--borda-forte);
  border-radius: 3px;
}
:root[data-visual="impacto"] .fileira-etapas > .etapa-funil:nth-child(odd) {
  background: var(--acento-ui-fraco);
}
:root[data-visual="impacto"] .etapa-indice {
  min-width: 29px;
  height: 29px;
  border: 2px solid var(--borda-forte);
  border-radius: 3px;
  background: var(--visual-amarelo);
  color: #2A2100;
  box-shadow: 2px 2px 0 var(--borda-forte);
}
:root[data-visual="impacto"] .etapa-funil:not(:last-child)::after {
  width: 10px;
  height: 10px;
  border-width: 3px 3px 0 0;
  border-color: var(--visual-rosa);
}
:root[data-visual="impacto"] .taxa-cartao,
:root[data-visual="impacto"] .econ-cartao,
:root[data-visual="impacto"] .cartao,
:root[data-visual="impacto"] .grafico-ausente,
:root[data-visual="impacto"] .tabela-wrap,
:root[data-visual="impacto"] .alternador-opcao {
  border: 2px solid var(--borda-forte);
  border-radius: 3px;
}
:root[data-visual="impacto"] .taxa-cartao,
:root[data-visual="impacto"] .econ-cartao {
  box-shadow: 3px 3px 0 var(--borda-forte);
}
:root[data-visual="impacto"] .alternador-opcao.active {
  background: var(--visual-amarelo);
  border-color: var(--borda-forte);
  color: #2A2100;
}
:root[data-visual="impacto"] table.dados th {
  background: var(--visual-azul);
  color: var(--cabecalho-visual-texto);
}
:root[data-visual="impacto"] .btn-primario {
  border: 2px solid var(--borda-forte);
  box-shadow: 3px 3px 0 var(--borda-forte);
}
:root[data-visual="impacto"] .painel-acao > :is(a, button).textbtn:not(.textbtn-pendente) {
  border-width: 2px;
  border-radius: 3px;
}

@media (max-width: 980px) {
  :root[data-visual] .pagina-titulo { font-size: clamp(31px, 7vw, 42px); }
  :root[data-visual="impacto"] .pagina-corpo > .painel { box-shadow: 4px 4px 0 var(--borda-forte); }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-visual="pulse"] .sidenav-item.active,
  :root[data-visual="pulse"] .btn-primario { box-shadow: none; }
}