/* Metricas de Marketing -- sistema visual.
 *
 * Paleta validada (dataviz): categoricas em ordem fixa, status reservado para
 * estado, claro e escuro declarados nos dois escopos (preferencia do SO e botao).
 * Cor aqui nao decora: ou carrega identidade de serie, ou carrega estado.
 */

:root {
  color-scheme: light;

  --plano: #F4F6FA;          /* fundo da pagina */
  --card: #FFFFFF;           /* superficie de cartao e de grafico */
  --card-2: #F7F9FC;         /* faixa interna, cabecalho de tabela, coluna destacada */
  --card-3: #FAFBFD;         /* degrau intermediario: linha de grupo na arvore */
  --regra-no: #E7EBF2;       /* regua entre nos da arvore */
  --tinta: #171B24;
  --tinta-2: #596173;
  --tinta-3: #8A91A1;        /* ver ressalva de contraste em temas.js */
  --tinta-4: #AEB4C2;
  --grade: #EDF0F5;
  --eixo: #C6CCD9;
  --borda: #DFE4ED;
  --borda-forte: #C6CCD9;

  --s1: #1a73e8; --s2: #0f9d58; --s3: #3949ab; --s4: #e52592;
  --s5: #e8710a; --s6: #00a3a3; --s7: #9334e6; --s8: #d93025;

  --bom: #15704F; --atencao: #8A5A00; --grave: #8A5A00; --critico: #A32F2A;
  --subiu: #15704F; --caiu: #A32F2A;

  --linha-hover: rgba(23, 27, 36, .04);
  --linha-hover-opaco: #F6F6F6;   /* o mesmo cinza, sem alfa: ver tabelas */

  --acento: #3730A3;
  --acento-hover: #262073;
  --acento-fraco: #E9E8F7;
  --acento-medio: rgba(55, 48, 163, .28);

  --sombra: 0 12px 28px rgba(23, 27, 36, .14);        /* menu ancorado */
  --sombra-forte: -18px 0 48px rgba(23, 27, 36, .16); /* gaveta */
  --veu: rgba(23, 27, 36, .38);                       /* atras da gaveta */

  --r: 12px; --r-s: 10px;
  /* Controle de PAGINA (filtro, pausadas, colunas) tem raio menor que o
     controle de CHROME (barra do topo, menu): 6px contra 10px. A diferenca
     e do desenho e separa o que filtra a tabela do que navega o sistema. */
  --r-ctl: 6px;
  --menu: 248px;
  --barra-topo: 3.5rem;

  /* Tipografia e densidade: a direcao de design sobrescreve estes inline. */
  --fonte: "Plus Jakarta Sans", "Helvetica Neue", sans-serif;
  --fonte-tit: var(--fonte);
  --fonte-num: "Libre Franklin", "Helvetica Neue", sans-serif;
  --fonte-base: 0.8125rem; --fonte-tab: 0.8125rem;
  --pad-cel: 10px 12px;
  --tracking-tit: -0.025em; --peso-tit: 700; --peso-num: 500;
}

/* Os dois escopos escuros declaram os mesmos tokens: a media query cobre a
   preferencia do sistema, o data-aparencia cobre o botao -- e o botao ganha dos
   dois lados (o :not(...) deixa um "claro" explicito vencer o escuro do SO).
   A familia de display troca junto com o modo, entao --fonte entra aqui tambem;
   --fonte-num nao, que e Libre Franklin nos dois. */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-aparencia="claro"])) {
    color-scheme: dark;
    --plano: #0F1115; --card: #171A20; --card-2: #1C2029;
    --card-3: #14171D; --regra-no: #22262F;
    --tinta: #E6E8EC; --tinta-2: #9AA1AE; --tinta-3: #6B7280; --tinta-4: #4B515E;
    --grade: #22262F; --eixo: #3A4152; --borda: #272C36; --borda-forte: #3A4152;
    --s1: #4285f4; --s2: #34a853; --s3: #6574c4; --s4: #ec407a;
    --s5: #cc7410; --s6: #009aaa; --s7: #ab47bc; --s8: #e8564a;
    --bom: #58C08A; --atencao: #D4A24C; --grave: #D4A24C; --critico: #E8756C;
    --subiu: #58C08A; --caiu: #E8756C;
    --linha-hover: rgba(230, 232, 236, .06);
    --linha-hover-opaco: #23262C;
    --acento: #7AA2F7;
    --acento-hover: #A6C0FA;
    --acento-fraco: #1B2435;
    --acento-medio: rgba(122, 162, 247, .32);
    --sombra: 0 12px 28px rgba(0, 0, 0, .5);
    --sombra-forte: -18px 0 48px rgba(0, 0, 0, .6);
    --veu: rgba(0, 0, 0, .5);
    --fonte: "Space Grotesk", "Helvetica Neue", sans-serif;
  }
}
:root[data-aparencia="escuro"] {
  color-scheme: dark;
  --plano: #0F1115; --card: #171A20; --card-2: #1C2029;
  --card-3: #14171D; --regra-no: #22262F;
  --tinta: #E6E8EC; --tinta-2: #9AA1AE; --tinta-3: #6B7280; --tinta-4: #4B515E;
  --grade: #22262F; --eixo: #3A4152; --borda: #272C36; --borda-forte: #3A4152;
  --s1: #4285f4; --s2: #34a853; --s3: #6574c4; --s4: #ec407a;
  --s5: #cc7410; --s6: #009aaa; --s7: #ab47bc; --s8: #e8564a;
  --bom: #58C08A; --atencao: #D4A24C; --grave: #D4A24C; --critico: #E8756C;
  --subiu: #58C08A; --caiu: #E8756C;
  --linha-hover: rgba(230, 232, 236, .06);
  --linha-hover-opaco: #23262C;
  --acento: #7AA2F7;
  --acento-hover: #A6C0FA;
  --acento-fraco: #1B2435;
  --acento-medio: rgba(122, 162, 247, .32);
  --sombra: 0 12px 28px rgba(0, 0, 0, .5);
  --sombra-forte: -18px 0 48px rgba(0, 0, 0, .6);
  --veu: rgba(0, 0, 0, .5);
  --fonte: "Space Grotesk", "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }
/* Toda a tipografia e rem ancorada aqui: trocar --escala aumenta o sistema
   inteiro de uma vez, sem mexer em regra nenhuma. */
html { font-size: var(--escala, 16px); }
html, body { margin: 0; height: 100%; }
body {
  background: var(--plano); color: var(--tinta);
  font-family: var(--fonte); font-size: var(--fonte-base); line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  display: grid; grid-template-columns: var(--menu) minmax(0, 1fr);
  /* A largura do menu e um token para o recolhimento ser UMA propriedade,
     nao um reflow a mao. 248px aberto e 68px fechado saem do desenho. */
}
::selection { background: var(--acento-medio); }

/* ================================================================ navegacao */

#lateral {
  background: var(--card); border-right: 1px solid var(--borda);
  height: 100vh; position: sticky; top: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
.marca { display: flex; align-items: center; gap: 10px; padding: 16px 14px 18px; }
.bt-recolher {
  flex: 0 0 36px; width: 36px; height: 36px; border: 1px solid var(--borda);
  border-radius: var(--r-s); background: var(--plano); color: var(--tinta-2);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.bt-recolher:hover { border-color: var(--borda-forte); color: var(--tinta); }
.marca-txt { min-width: 0; }
.marca b {
  display: block; font-family: var(--fonte-tit); font-size: 0.8125rem;
  font-weight: 700; letter-spacing: -0.02em; white-space: nowrap;
}
.marca small {
  display: block; font-size: 0.625rem; color: var(--tinta-3); margin-top: 1px;
  white-space: nowrap;
}

/* Recolhido: some tudo que e texto e sobra a coluna de icones. O que NAO pode
   sumir e o alvo de clique -- por isso icone e botao mantem largura e altura,
   e so o rotulo e que desaparece. O title de cada item vira a unica etiqueta,
   entao todo item precisa ter um. */
#lateral.fechado .marca-txt,
#lateral.fechado .busca-gatilho .rot,
#lateral.fechado .busca-gatilho kbd,
#lateral.fechado #menu a .rot { display: none; }
#lateral.fechado .marca { justify-content: center; padding-left: 0; padding-right: 0; }
#lateral.fechado .busca-gatilho { justify-content: center; padding: 0; }
#lateral.fechado #menu a { justify-content: center; padding: 0; margin: 0 12px 3px; }
/* Sem rotulo, o titulo de secao nao tem o que rotular: vira um risco, que
   ainda separa os grupos sem fingir que ha palavra ali. */
#lateral.fechado #menu h4 {
  height: 1px; margin: 18px 14px 12px; padding: 0; background: var(--borda);
  text-indent: -9999px; overflow: hidden;
}

.busca-gatilho {
  margin: 0 14px 20px; padding: 0 11px; width: calc(100% - 28px); height: 38px;
  display: flex; align-items: center; gap: 10px; box-sizing: border-box;
  background: var(--plano); border: 1px solid var(--borda);
  border-radius: var(--r-s); color: var(--tinta-3); font: inherit; font-size: 0.8125rem;
  cursor: pointer; text-align: left;
}
.busca-gatilho .rot { flex: 1 1 auto; white-space: nowrap; }
.busca-gatilho:hover { border-color: var(--borda-forte); color: var(--tinta-2); }
.busca-gatilho kbd {
  font: inherit; font-size: 0.625rem; color: var(--tinta-3);
  border: 1px solid var(--borda); border-radius: 5px; padding: 1px 5px; background: var(--card);
}

/* O menu nao rola. Barra de rolagem aqui e pior que em qualquer outro lugar:
   a navegacao global some da vista e cada troca de tela vira uma cacada. O
   espacamento foi apertado ate os 14 itens caberem na altura util; overflow
   auto fica so como rede para janela muito baixa, onde cortar seria pior. */
#menu { flex: 1; overflow-y: auto; padding: 4px 0 6px; }
#menu h4 {
  margin: 18px 0 8px; padding: 0 18px; font-size: 0.625rem; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3);
}
#menu h4:first-child { margin-top: 0; }
#menu a {
  display: flex; align-items: center; gap: 12px; color: var(--tinta-2);
  text-decoration: none; font-size: 0.875rem;
}
#menu a svg { width: 17px; height: 17px; flex: none; }
#menu a .rot { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#menu a:hover { background: var(--card-2); color: var(--tinta); }
#menu a.ativo { background: var(--acento-fraco); color: var(--acento); }
/* O menu nao rola quando aberto, mas recolhido a coluna de icones e mais
   curta: o overflow fica como rede, nao como norma. */
#lateral { --menu-local: var(--menu); }
#menu a.ativo svg { opacity: 1; }
#menu a .tag {
  margin-left: auto; font-size: 0.6875rem; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tinta-3);
  border: 1px solid var(--borda-forte); border-radius: 3px; padding: 0 4px;
}

/* ===================================================================== topo */

#principal { min-width: 0; }
#topo {
  position: sticky; top: 0; z-index: 30; height: var(--barra-topo);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borda);
  display: flex; align-items: center; gap: 12px; padding: 0 20px;
}
/* O nome da pagina e o ultimo degrau da trilha, no tamanho da trilha. O <h1>
   fica pela semantica -- leitor de tela ainda precisa saber qual e o titulo --
   mas visualmente nao se destaca dos degraus anteriores, so pelo peso. Um <h1>
   de 20px ao lado de uma trilha de 13px repetia a mesma palavra em dois
   tamanhos. */
#topo h1 {
  margin: 0; font-family: inherit; font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0; white-space: nowrap;
  flex: 0 1 auto; min-width: 5rem; overflow: hidden; text-overflow: ellipsis;
}
#topo .frescor { font-size: 0.8125rem; color: var(--tinta-3); white-space: nowrap; flex: none; }
/* Abaixo disto a barra nao cabe, e o frescor do dado e o item menos urgente
   dela: sai antes de o nome da pagina ser cortado. */
@media (max-width: 1360px) { #topo .frescor { display: none; } }
/* Os rotulos soltos de "Servico" e "Periodo analisado" sairam da barra: o de
   servico entrou DENTRO do botao (.lente .campo-rot) e o de periodo deixou de
   existir, porque o botao mostra as datas e se explica. Com isso some tambem a
   media query que os escondia no estreito. */
/* A trilha vem antes do titulo, na mesma linha: o caminho e prefixo do nome,
   nao uma faixa propria. Encolhe antes de todo o resto e some no estreito. */
/* A trilha nao encolhe nem some: so orienta quem a encontra sempre no mesmo
   lugar. Quem cede espaco e o titulo, que ao lado dela e redundante e ellipsa
   sem feiura. No estreito ela encurta por elipse, nunca por display:none. */
/* display:block e nao flex: elipse so funciona em caixa de linha. E um teto
   de 42% para a trilha nunca engolir o titulo nem os controles da direita. */
#trilha-topo {
  flex: 0 1 auto; display: block; min-width: 2.5rem; max-width: 42%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: -4px;
}
#trilha-topo .aqui { color: var(--tinta-3); padding: 2px 5px; }
#trilha-topo::after { content: '›'; color: var(--tinta-3); opacity: .6; margin: 0 2px 0 4px; }
#topo .dir { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Avatar: o unico controle redondo da barra. Redondo aqui nao e decoracao --
   separa "quem sou eu" de "o que estou vendo", que sao os outros tres botoes. */
.bt.conta { border-radius: 999px; padding: 0 9px 0 4px; gap: 8px; }
.bt.conta .avatar {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 999px;
  background: var(--acento-fraco); color: var(--acento);
  font-size: 0.6875rem; font-weight: 700;
}
.bt.conta[aria-expanded="true"] { border-color: var(--borda-forte); }

/* A lente e um botao, nao mais um <select>. O <select> so aceita estilo
   FECHADO: a lista que ele abre e desenhada pelo sistema operacional, e nem a
   altura do item nem a largura da lista sao acessiveis por CSS -- saiam itens
   de ~18px colados e a lista estrangulada na largura do botao. E o botao
   precisava de max-width para nao empurrar a barra do topo, o que cortava
   "Suporte e Manutencao de Sistemas" no meio. Agora abre no menu ancorado
   (#modal.ancorado), o mesmo de Periodo e Frescor. */
.lente { gap: 7px; }
/* O rotulo do campo mora DENTRO do botao: fora, era um texto solto que so
   fazia sentido pela proximidade, e na barra apertada a proximidade se perdia.
   Dentro, o par rotulo+valor nao tem como se separar. */
.lente .campo-rot { color: var(--tinta-3); font-weight: 400; }
.lente .rot { font-weight: 700; color: var(--tinta); }
.lente .seta { color: var(--tinta-3); font-size: 0.75rem; line-height: 1; }
/* Com filtro ligado o botao se marca sozinho: e o unico controle da barra do
   topo que esconde dado da tela, entao nao pode passar despercebido. */
.lente.on { border-color: var(--acento-medio); background: var(--acento-fraco); }
.lente.on .rot { color: var(--acento); }

/* Rotulo de campo na barra do topo: diz o que o controle ao lado significa.
   Mesmo cinza da lente, porque os dois sao a mesma coisa -- nome de campo. */
.rot-topo { font-size: 0.875rem; color: var(--tinta-rotulo); white-space: nowrap; margin-left: 2px; }

.bt {
  font: inherit; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 6px;
  background: var(--card); color: var(--tinta-2); border: 1px solid var(--borda);
  border-radius: var(--r-s); padding: 5px 10px; cursor: pointer; white-space: nowrap;
}
.bt:hover { border-color: var(--borda-forte); color: var(--tinta); background: var(--card-2); }
.bt.quadrado { padding: 5px 7px; }
.bt.forte { border-color: var(--acento-medio); color: var(--acento); background: var(--acento-fraco); }
/* Alternador de dois estados: ligado tem de parecer ligado, nao so "clicavel". */
.bt.alterna.on { border-color: var(--acento-medio); color: var(--acento); background: var(--acento-fraco); }
.bt .n {
  font-size: 0.6875rem; font-weight: 400; color: var(--tinta-2);
  background: var(--card-2); border-radius: 4px; padding: 2px 6px;
  font-variant-numeric: tabular-nums;
}
.bt.alterna.on .n { background: var(--card); color: var(--acento); }
.bt svg { width: 14px; height: 14px; }

/* Padding do desenho: 28px em cima e nos lados, 48px embaixo. O teto de
   largura saiu -- as telas de tabela do desenho ocupam a largura toda, e com
   14 colunas qualquer teto so cria rolagem horizontal antes da hora. */
.conteudo { padding: 28px 28px 48px; }

/* ================================================================== cartoes */

.cartao {
  background: var(--card); border: 1px solid var(--borda); border-radius: var(--r);
  margin-bottom: 16px; overflow: hidden;
}
.cartao > header {
  padding: 14px 16px 12px; display: flex; align-items: flex-start; gap: 12px;
}
.cartao > header .tit { min-width: 0; }
.cartao > header h2 {
  margin: 0; font-family: var(--fonte-tit); font-size: 1.0938rem;
  font-weight: var(--peso-tit); letter-spacing: var(--tracking-tit);
}
.cartao > header p { margin: 3px 0 0; font-size: 0.875rem; color: var(--tinta-2); max-width: 86ch; }
.cartao > header .acoes { margin-left: auto; display: flex; gap: 6px; flex: none; }
.cartao > .corpo { padding: 0 16px 16px; }
.cartao > .corpo.rente { padding: 0 0 0; }

.secao-tit {
  display: flex; align-items: baseline; gap: 10px; margin: 26px 0 12px;
}
.secao-tit h2 {
  margin: 0; font-family: var(--fonte-tit); font-size: 1.1562rem;
  font-weight: var(--peso-tit); letter-spacing: var(--tracking-tit);
}
.secao-tit p { margin: 0; font-size: 0.875rem; color: var(--tinta-3); }

/* =================================================================== avisos */

.faixa {
  display: flex; gap: 10px; align-items: flex-start; font-size: 0.875rem; line-height: 1.45;
  border: 1px solid var(--borda); border-left: 3px solid var(--atencao);
  border-radius: var(--r-s); padding: 9px 12px; margin-bottom: 10px; background: var(--card);
}
.faixa b { color: var(--tinta); white-space: nowrap; }
.faixa span { color: var(--tinta-2); }
.faixa.exemplo { border-left-color: var(--s7); }
.faixa.boa { border-left-color: var(--bom); }

/* ===================================================================== KPIs */

.kpis { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); }
.kpi {
  background: var(--card); border: 1px solid var(--borda); border-radius: var(--r);
  padding: 13px 14px 11px; min-width: 0;
}
.kpi .rot {
  font-size: 0.8125rem; color: var(--tinta-2); font-weight: 500; letter-spacing: .01em;
  display: flex; align-items: center; gap: 5px;
}
.kpi .val {
  font-family: var(--fonte-num); font-size: 1.875rem; font-weight: var(--peso-num);
  letter-spacing: -.03em; line-height: 1.15; margin-top: 6px;
}
.kpi .pe { display: flex; align-items: baseline; gap: 8px; margin-top: 5px; min-height: 17px; flex-wrap: wrap; }
.kpi .nota { font-size: 0.8125rem; color: var(--tinta-3); }

.d {
  font-family: var(--fonte-num); font-size: 0.8438rem; font-weight: 650;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.d.pos { color: var(--subiu); }
.d.neg { color: var(--caiu); }
.d.zero { color: var(--tinta-3); font-weight: 500; }
/* O triangulo de direcao. Fora da tabela ele herda a cor do .d (o numero ja e
   verde ou vermelho e o triangulo acompanha); dentro dela e o UNICO pedaco
   colorido da variacao. */
.d .st { font-style: normal; font-size: .72em; margin-right: 2px; vertical-align: .08em; }

/* ================================================================== tabelas */

/* overflow-x: auto cria um scrollport nos DOIS eixos (a regra do CSS: se um eixo
   nao e visible, o outro deixa de ser). Entao o cabecalho gruda no topo DESTE
   container, nao da pagina -- e a tabela ganha altura maxima com rolagem
   propria, que e o que faz o cabecalho continuar visivel em tabela longa. */
.tab-env { overflow: auto; max-height: calc(100vh - var(--barra-topo) - 120px); }
.tab-env.curta { max-height: none; }
/* A tabela usa --fonte-num (Libre Franklin), nao a familia de display: e mais
   estreita e neutra, e le melhor em coluna de numero. Vale para a tabela
   INTEIRA, nao so para a celula numerica -- misturar duas familias na mesma
   linha faz o nome e o numero parecerem de sistemas diferentes. */
table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: var(--fonte-tab); font-family: var(--fonte-num);
}
thead th {
  position: sticky; top: 0; z-index: 10;
  background: var(--card-2); color: var(--tinta-3);
  font-size: 0.75rem; font-weight: 650; letter-spacing: .055em; text-transform: uppercase;
  text-align: right; white-space: nowrap; padding: var(--pad-cel);
  border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda);
  cursor: pointer; user-select: none;
}
thead th:first-child { text-align: left; }
/* So a tabela ordenavel (a que tem data-tab) oferece cabecalho clicavel. Na
   arvore a ordem e a hierarquia, entao o cursor nao promete o que nao cumpre. */
table:not([data-tab]) thead th { cursor: default; }
table:not([data-tab]) thead th:hover { color: var(--tinta-3); }
thead th.txt { text-align: left; }
thead th:hover { color: var(--tinta); }
/* A coluna ordenada se marca por peso e pela seta, nao por cor: era o unico
   azul do cabecalho e puxava o olho para uma informacao de estado da tabela,
   nao do dado. */
thead th.ord { color: var(--tinta); font-weight: 700; }
tbody td {
  padding: var(--pad-cel); text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--grade); vertical-align: middle;
}
tbody td:first-child, tbody td.txt { text-align: left; }

/* Reguas verticais entre TODAS as colunas. Vem como border-left de toda celula
   que tem uma vizinha a esquerda -- assim nenhuma regua sobra pendurada na
   borda direita da tabela. A coluna-mola nao recebe: ali nao ha coluna
   nenhuma do outro lado, so a sobra de largura. */
thead th + th, tbody td + td, tfoot td + td { border-left: 1px solid var(--grade); }
thead th.espaco, tbody td.espaco, tfoot td.espaco { border-left: none; }
tbody td.num { font-family: var(--fonte-num); font-variant-numeric: tabular-nums; }
/* Hover em cinza. Em azul, passar o mouse pela tabela acendia uma faixa da
   cor de ACAO numa linha em que nao se vai agir -- e com a coluna de nome
   fixa, a faixa azul ficava na tela inteira. O Ads faz cinza. */
tbody tr:hover > td { background: var(--linha-hover); }
tbody tr.clicavel { cursor: pointer; }
tbody tr.apagada > td { opacity: .5; }
tfoot td {
  padding: var(--pad-cel); text-align: right; font-weight: 650;
  font-family: var(--fonte-num); font-variant-numeric: tabular-nums;
  border-top: 1px solid var(--borda-forte); background: var(--card-2);
}
tfoot td:first-child { text-align: left; }
.celula-nome { display: flex; align-items: center; gap: 7px; min-width: 0; }
.celula-nome .rotulo { overflow: hidden; text-overflow: ellipsis; max-width: 380px; }
.rotulo.secundario { color: var(--tinta-2); display: inline-block; max-width: 260px;
  overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }

/* Coluna-mola. A tabela ocupa 100% da largura e as colunas de numero sao
   nowrap, entao a sobra toda caia na primeira coluna de texto -- um vao enorme
   entre o nome e o primeiro numero, que e justamente o pulo que o olho tem de
   dar a cada linha. Esta coluna vazia leva a sobra, e as colunas de verdade
   ficam do tamanho do conteudo. */
/* As colunas de texto ficam do tamanho do conteudo (nowrap ja impede encolher
   abaixo dele) e a sobra vai para as colunas de numero, que se espalham pela
   largura. A mola leva so o resto, limitada: com 100% ela levava TUDO e a
   tabela terminava na metade da tela. */
thead th.txt, tbody td.txt, tfoot td.txt { width: 1px; }
th.espaco, td.espaco { width: 8%; padding: 0; min-width: 0; }
thead th.espaco { cursor: default; }
.vazio { padding: 34px 16px; text-align: center; color: var(--tinta-3); font-size: 0.9062rem; }
.rodape-tab { padding: 9px 14px; font-size: 0.8125rem; color: var(--tinta-3); border-top: 1px solid var(--grade); }

/* ----------------------------------------------------------- paginacao
   Mora FORA do .tab-env, nao dentro: o .tab-env tem rolagem propria e um
   controle dentro dele desapareceria no meio da tabela. Aqui ele fica
   ancorado embaixo da moldura, no mesmo lugar em toda tela.
   Setas e nao numeros de pagina: com 248 paginas, uma fileira de numeros
   nao cabe nem ajuda -- quem precisa de um termo especifico filtra, quem
   quer o fim clica em «. */
.paginacao {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 10px; font-size: 0.8125rem; color: var(--tinta-2);
}
.paginacao .faixa { font-variant-numeric: tabular-nums; }
.paginacao .setas { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.paginacao .onde {
  font-variant-numeric: tabular-nums; color: var(--tinta-3);
  padding: 0 8px; white-space: nowrap;
}
.bt-pag {
  font: inherit; font-size: 0.9375rem; line-height: 1;
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--borda); border-radius: var(--r-ctl);
  background: var(--card); color: var(--tinta-2); cursor: pointer;
}
.bt-pag:hover { border-color: var(--acento); color: var(--acento); background: var(--acento-fraco); }
/* Desligado continua visivel, so sem resposta: esconder a seta da primeira
   pagina faria a fileira mudar de largura e as outras setas trocarem de
   lugar a cada clique. */
.bt-pag[disabled] { opacity: .4; cursor: default; pointer-events: none; }

/* valor + variacao na mesma celula */
.mv { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.mv .v { font-family: var(--fonte-num); font-variant-numeric: tabular-nums; }
.mv .d { font-size: 0.75rem; font-weight: 600; }
.mv .a { font-size: 0.75rem; color: var(--tinta-2); font-family: var(--fonte-num); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Por que a tabela e cinza e a faixa de KPIs nao.
   A variacao aparece embaixo de CADA numero de CADA linha: dez colunas por
   trinta linhas sao trezentos pedacos de verde e vermelho saturados, e a
   tabela inteira vira um mosaico onde nada se destaca porque tudo grita. O
   proprio Ads so mostra variacao no modo de comparacao, pequena e discreta.
   Aqui o numero da variacao fica em tinta secundaria e a direcao -- com o
   julgamento de bom/ruim embutido, porque CPC que sobe e vermelho -- vai num
   triangulo de poucos pixels. Na faixa de KPIs, que tem seis numeros e nao
   seiscentos, a cor continua no texto inteiro: ali ela orienta em vez de
   poluir. */
/* Dois seletores de classe de cada lado: `.d.pos` tem especificidade 0-2-0 e
   ganharia de um `tbody .d` (0-1-1), e a variacao continuaria verde. */
tbody .d.pos, tbody .d.neg, tfoot .d.pos, tfoot .d.neg { color: var(--tinta-2); font-weight: 500; }
tbody .d.zero, tfoot .d.zero { color: var(--tinta-3); font-weight: 500; }
tbody .d.pos .st, tfoot .d.pos .st { color: var(--subiu); }
tbody .d.neg .st, tfoot .d.neg .st { color: var(--caiu); }

/* ==================================================================== arvore */

/* Recuo de 12px por nivel, como no desenho (0 / 12 / 24). */
.no-arvore .celula-nome { padding-left: calc(var(--nivel, 0) * 12px); }

/* Cada nivel tem o seu degrau de fundo: campanha na superficie do cartao,
   grupo um passo abaixo, palavra no plano. A profundidade passa a se ler pelo
   TOM, nao so pela indentacao -- numa tabela de 11 colunas a indentacao do
   nome fica longe demais da coluna que se esta olhando. */
tr.no-arvore[data-nivel="0"] > td { background: var(--card); }
tr.no-arvore[data-nivel="1"] > td { background: var(--card-3); }
tr.no-arvore[data-nivel="2"] > td { background: var(--plano); }
tr.no-arvore > td { border-bottom: 1px solid var(--regra-no); }
tr.no-arvore[data-nivel="1"] > td { border-bottom-color: var(--grade); }
/* A campanha e a linha-mae: corpo um ponto maior que os filhos. */
tr.no-arvore[data-nivel="0"] > td { font-size: 0.875rem; }
/* Peso da coluna-ancora por nivel: 600 na campanha, 400 nos filhos. */
tr.no-arvore[data-nivel="0"] > td.forte { font-weight: 600; }
tr.no-arvore[data-nivel="1"] > td.forte,
tr.no-arvore[data-nivel="2"] > td.forte { font-weight: 400; }
/* O realce sob o cursor vence o degrau do nivel, senao a linha apontada
   continua com a cor do seu nivel e o cursor parece nao ter efeito. */
tr.no-arvore:hover > td { background: var(--linha-hover-opaco); }
.giro {
  width: 16px; height: 16px; flex: none; display: inline-flex; align-items: center;
  justify-content: center; color: var(--tinta-3); border-radius: 4px; cursor: pointer;
}
.giro:hover { background: var(--grade); color: var(--tinta); }
.giro svg { width: 11px; height: 11px; transition: transform .14s ease; }
.giro.aberto svg { transform: rotate(90deg); }
.giro.folha { visibility: hidden; }
.nivel-marca {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--tinta-3); border: 1px solid var(--borda); border-radius: 3px;
  padding: 0 4px; flex: none;
}
/* A celula inteira abre e fecha o no -- alvo grande, Fitts agradece. */
td.alvo-abrir[data-abrir] { cursor: pointer; }
tr.ramo:hover .giro { background: var(--grade); color: var(--tinta); }
/* O nome e um LINK, entao se veste de link: azul do acento, sem sublinhado em
   repouso e com sublinhado no hover. Era tinta comum, e o que o distinguia da
   linha era negrito -- peso para dizer "clicavel", que e o que a cor ja diz
   melhor e mais barato. Vale para todo nivel da arvore: campanha, grupo,
   palavra e termo sao todos pagina, e azul em nome clicavel e tambem o que o
   proprio Ads faz. */
.no-arvore .rotulo.link-no { color: var(--acento); text-decoration: none; border-radius: 3px; }
.no-arvore .rotulo.link-no:hover { text-decoration: underline; }
.no-arvore .rotulo.link-no:focus-visible { outline: 2px solid var(--acento-medio); outline-offset: 2px; }
/* Nao ha mais negrito nenhum na arvore. Ele existia para destacar o no de
   primeiro nivel, mas o nome agora e azul de link -- e cor e peso dizendo a
   mesma coisa e redundancia que so engorda a mancha de texto. A profundidade
   se le pela indentacao e pela marca "grupo/palavra/termo"; o que e clicavel,
   pela cor. */

/* Faixa de indicadores, nao cinco cartoes.
   Antes: grid de auto-fit com 1fr, que esticava cada numero curto ("19,2%")
   para 221px, e border-radius: var(--r-s) -- o raio de PILULA (999px no tema
   Ads), que e para chip e botao, nunca para caixa. Cinco pilulas gigantes
   espacadas, cada uma com tres digitos perdidos no meio.
   Agora: um cartao so, dividido por reguas finas, cada celula do tamanho do
   que carrega. E o idioma do proprio Ads -- a barra de resumo acima da
   tabela -- e serve ao olho, que le os cinco numeros numa varredura. */
.mini-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  margin-bottom: 14px;
  background: var(--card); border: 1px solid var(--borda); border-radius: var(--r);
  box-shadow: var(--sombra); overflow: hidden;
}
/* Grade e nao flex: com flex, a celula sozinha na segunda fileira esticava por
   900px. Na grade as colunas se alinham entre as fileiras.
   As reguas vem de border-left/top em TODA celula, puxadas 1px para fora: as
   do primeiro da fileira e as da fileira de cima saem pela borda do cartao,
   que tem overflow:hidden, e sobra so o reticulado interno. */
.mini-kpi {
  padding: 10px 15px; min-width: 0;
  border-left: 1px solid var(--grade); border-top: 1px solid var(--grade);
  margin: -1px 0 0 -1px;
}
/* Travas de contencao: o trilho e dimensionado para caber tudo, mas se um
   rotulo novo ou um numero maior aparecer, ele corta DENTRO da propria celula
   em vez de invadir a vizinha. Texto cortado se le; texto sobreposto, nao.
   O rotulo carrega title, entao o que foi cortado volta no hover. */
.mini-kpi .r {
  font-size: 0.75rem; color: var(--tinta-2); letter-spacing: .01em; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.mini-kpi .v {
  font-family: var(--fonte-num); font-size: 1.3125rem; font-weight: var(--peso-num);
  letter-spacing: -.02em; margin-top: 2px; font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
/* A variacao fica sob o numero. As celulas sem comparacao nao encurtam a
   faixa: o flex estica todas a altura da mais alta. */
.mini-kpi .d { font-size: 0.75rem; }

/* ================================================================== pilulas */

.p {
  display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 650;
  letter-spacing: .02em; padding: 1px 6px; border-radius: 4px; white-space: nowrap;
  border: 1px solid currentColor; line-height: 1.6;
}
.p.cinza { color: var(--tinta-3); }
.p.ok { color: var(--bom); }
.p.aviso { color: var(--grave); }
.p.ruim { color: var(--critico); }
.p.info { color: var(--acento); }
.p.roxo { color: var(--s7); }
.p.solida { background: var(--acento-fraco); border-color: transparent; color: var(--acento); }

.ponto-linha { width: 8px; height: 8px; border-radius: 2px; flex: none; display: inline-block; }

/* ==================================================================== barras */

.bar { height: 6px; border-radius: 3px; background: var(--grade); overflow: hidden; min-width: 56px; }
.bar > i { display: block; height: 100%; border-radius: 3px; background: var(--acento); }
.bar-rot { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.bar-rot .bar { width: 72px; }

/* ================================================================== graficos */

svg.g { display: block; width: 100%; height: auto; overflow: visible; }
svg.g text { fill: var(--tinta-3); font-size: 10px; }
svg.g .grade { stroke: var(--grade); stroke-width: 1; }
svg.g .eixo { stroke: var(--eixo); stroke-width: 1; }
svg.g .ln { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
svg.g .area { stroke: none; opacity: .10; }
svg.g .pt { stroke: var(--card); stroke-width: 2; }
svg.g .rot-dir { fill: var(--tinta); font-size: 10.5px; font-weight: 650; }
svg.g .anotacao { stroke: var(--tinta-3); stroke-width: 1; stroke-dasharray: 2 3; }

.multi { display: grid; gap: 0 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.multi .item { padding: 10px 0; border-bottom: 1px solid var(--grade); }
.multi .item:last-child { border-bottom: none; }
.multi .cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.multi .cab b { font-size: 0.9062rem; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.multi .cab span {
  font-size: 0.8125rem; color: var(--tinta-2);
  font-family: var(--fonte-num); font-variant-numeric: tabular-nums;
}

/* Saiu daqui a aba lateral (#ficha, #fundo, .barra-ficha) e tudo que a
   acomodava: largura do painel, faixa de indicadores com trilho proprio, mola
   de 100%, nome de tabela em duas linhas. Clicar na linha leva a pagina de
   detalhe, que tem a largura inteira e dispensa todos esses remendos. */

/* =============================================================== paleta cmd */

#cmdk {
  position: fixed; inset: 0; z-index: 80; display: none;
  background: rgba(0, 0, 0, .3); padding-top: 12vh; justify-content: center;
}
#cmdk.on { display: flex; }
#cmdk .caixa {
  width: min(620px, 92vw); max-height: 64vh; background: var(--card);
  border: 1px solid var(--borda-forte); border-radius: 12px; box-shadow: var(--sombra-forte);
  display: flex; flex-direction: column; overflow: hidden;
}
#cmdk input {
  font: inherit; font-size: 1.0312rem; padding: 14px 16px; border: none; outline: none;
  background: transparent; color: var(--tinta); border-bottom: 1px solid var(--borda);
}
#cmdk .lista { overflow-y: auto; padding: 6px; }
#cmdk .it {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-s);
  cursor: pointer; font-size: 0.9375rem;
}
#cmdk .it.sel { background: var(--acento-fraco); }
#cmdk .it .tipo {
  font-size: 0.7188rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tinta-3); min-width: 72px;
}
#cmdk .it .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#cmdk .it .meta { margin-left: auto; font-size: 0.8125rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
#cmdk .nada { padding: 26px; text-align: center; color: var(--tinta-3); font-size: 0.9062rem; }

/* ================================================================== tooltip */

#dica {
  position: fixed; z-index: 90; pointer-events: none; opacity: 0; transition: opacity .08s;
  background: var(--card); border: 1px solid var(--borda-forte); border-radius: 8px;
  box-shadow: var(--sombra); padding: 9px 11px; font-size: 0.8438rem; max-width: 280px;
}
#dica.on { opacity: 1; }
#dica b { display: block; margin-bottom: 5px; font-size: 0.875rem; }
#dica dl { margin: 0; display: grid; grid-template-columns: auto auto; gap: 2px 14px; }
#dica dt { color: var(--tinta-2); }
#dica dd {
  margin: 0; text-align: right; font-weight: 600;
  font-family: var(--fonte-num); font-variant-numeric: tabular-nums;
}

/* ==================================================================== modal */

#modal { position: fixed; inset: 0; z-index: 70; display: none; background: rgba(0, 0, 0, .3);
  justify-content: center; align-items: flex-start; padding-top: 10vh; }
#modal.on { display: flex; }
#modal .caixa {
  width: min(460px, 92vw); background: var(--card); border: 1px solid var(--borda-forte);
  border-radius: 12px; box-shadow: var(--sombra-forte); padding: 18px 20px;
}
/* Ancorado no botao que o abriu: o fundo deixa de escurecer a tela e passa a
   ser so o apanhador de clique fora, e a caixa recebe top/left do JS. */
#modal.ancorado { background: transparent; padding: 0; display: block; }
#modal.ancorado .caixa { position: absolute; width: min(420px, calc(100vw - 16px)); overflow: auto; }
/* O menu da lente se dimensiona pelo CONTEUDO -- "Suporte e Manutencao de
   Sistemas" cabe inteiro em uma linha -- em vez de herdar a largura do botao,
   que era o estrangulamento da lista nativa. O teto continua, para a caixa nao
   atravessar a tela numa janela estreita. */
#modal.ancorado .caixa.lista-lente {
  width: max-content; min-width: 250px; max-width: min(480px, calc(100vw - 16px));
}
/* Altura de alvo: 9px em cima e embaixo sobre 0.9375rem dao ~36px de linha,
   contra os ~18px que o sistema desenhava. */
#modal .op[data-lente] { padding: 9px 12px; cursor: pointer; font-size: 0.9375rem; }
#modal .op[data-lente]:hover { background: var(--linha-hover); color: var(--tinta); }
#modal .op[data-lente].on:hover { background: var(--acento-medio); }
#modal .op[data-lente]:focus-visible { outline: 2px solid var(--acento-medio); outline-offset: -2px; }
/* Separa "Todas" dos servicos: ela nao e um servico, e a ausencia de filtro. */
#modal .risco { height: 1px; background: var(--grade); margin: 6px 0; }
/* Opcao de periodo que a janela baixada nao cobre: visivel e explicada, nao
   escondida. Sumir com ela faria o seletor mentir sobre o que existe. */
#modal .op.off { opacity: .45; cursor: default; }
#modal .op[data-periodo] { cursor: pointer; }
#modal .op[data-periodo]:hover { background: var(--linha-hover); color: var(--tinta); }
/* Calendario do intervalo personalizado. Substituiu os dois <input type="date">,
   que funcionavam mas pediam que a pessoa SOUBESSE a data antes de abrir: nao
   mostravam onde a janela baixada comeca e acaba. Aqui o mes inteiro aparece de
   uma vez, e o dia fora da janela nem e botao. */
.cal { padding: 11px 2px 2px; border-top: 1px solid var(--borda); margin-top: 10px; }
.cal-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.cal-topo p { flex: 1 1 auto; margin: 0; font-size: 0.75rem; color: var(--tinta-2); }
.cal-topo p.on { color: var(--acento); font-weight: 600; }
.cal-nav {
  width: 24px; height: 24px; flex: none; border: 1px solid var(--borda);
  border-radius: 7px; background: var(--plano); color: var(--tinta-2);
  font: inherit; font-size: 0.75rem; cursor: pointer;
}
.cal-nav:hover:not(:disabled) { border-color: var(--borda-forte); color: var(--tinta); }
.cal-nav:disabled { opacity: .4; cursor: default; }
.cal-mes { min-width: 104px; text-align: center; font-size: 0.75rem; font-weight: 600; }
.cal-semana, .cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-semana span {
  text-align: center; font-size: 0.625rem; letter-spacing: .06em; color: var(--tinta-3);
  padding-bottom: 2px;
}
.cal .dia {
  height: 30px; border: 0; background: transparent; color: var(--tinta);
  font: inherit; font-variant-numeric: tabular-nums; font-size: 0.75rem;
  border-radius: 8px; cursor: pointer; display: flex; align-items: center;
  justify-content: center; padding: 0;
}
.cal .dia.vazio { visibility: hidden; }
/* Dia fora da janela baixada nao e botao: e um numero apagado. Deixar clicavel
   so para recusar depois seria pedir o gesto e negar o resultado. */
.cal .dia.fora { color: var(--tinta-4); cursor: not-allowed; }
.cal .dia:hover:not(.fora):not(.ponta) { background: var(--linha-hover); }
/* O miolo da faixa perde o raio para os dias se lerem como um bloco so. */
.cal .dia.dentro { background: var(--acento-fraco); border-radius: 0; }
/* A tinta do dia selecionado e --card, nao branco fixo: sobre o acento claro
   (#3730A3) isso da branco, e sobre o acento escuro (#7AA2F7) da o proprio
   fundo do cartao. Branco fixo no escuro seria texto claro sobre azul claro. */
.cal .dia.ponta { background: var(--acento); color: var(--card); font-weight: 700; }
.cal-pe { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.cal-faixa {
  flex: 1 1 auto; min-width: 0; font-variant-numeric: tabular-nums;
  font-size: 0.75rem; color: var(--tinta-3);
}
.cal-faixa.pronta { color: var(--tinta); }
.cal-aplicar { height: 30px; font-size: 0.75rem; font-weight: 600; }
.cal-aplicar:disabled { color: var(--tinta-4); cursor: default; }
.cal-aplicar.pronta {
  border-color: var(--acento); background: var(--acento-fraco); color: var(--acento);
}
#modal h3 { margin: 0 0 4px; font-family: var(--fonte-tit); font-size: 1.1562rem; font-weight: var(--peso-tit); }
#modal > .caixa > p { margin: 0 0 14px; font-size: 0.875rem; color: var(--tinta-2); line-height: 1.5; }
#modal .op {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-s);
  font-size: 0.9375rem; color: var(--tinta-2);
}
#modal .op.on { color: var(--tinta); font-weight: 600; background: var(--acento-fraco); }
#modal .op .ck { width: 14px; color: var(--acento); font-weight: 700; }
#modal .op .dp { margin-left: auto; font-size: 0.7812rem; color: var(--tinta-3); }
/* Fora do escopo .menu-conta: o painel de Atualizar usa a mesma linha .op, e sem
   isto o rotulo nao empurrava a data para a direita quando ele era o unico
   conteudo flexivel da linha. */
#modal .op .cresce { flex: 1 1 auto; min-width: 0; }
/* O detalhe de cada fonte no painel de Atualizar: por que aquela fonte esta onde
   esta. Alinhado ao TEXTO da linha, nao a borda da caixa -- os 34px sao o
   padding da .op mais a largura do .ck e o gap, para a nota ficar debaixo do
   nome da fonte e nao debaixo do visto. */
#modal .op-nota {
  margin: 2px 10px 12px 34px; font-size: 0.75rem; line-height: 1.5;
  color: var(--tinta-3); text-wrap: pretty;
}
#modal .op-nota.ruim { color: var(--critico); }
/* flex em vez de text-align: o painel de Atualizar tem DOIS botoes no rodape, e
   inline-flex colados precisariam de margem a mao. Com um botao so o resultado
   e identico ao text-align: right de antes. */
#modal footer {
  border-top: 1px solid var(--grade); margin-top: 12px; padding-top: 12px;
  display: flex; justify-content: flex-end; gap: 8px;
}

/* ------------------------------------------------- menu de conta e ajustes
   Menu estreito e sem titulo: o gatilho e o avatar, e quem clicou nele ja sabe
   do que se trata. O cabecalho aqui identifica a PESSOA, que e o unico dado
   que o menu de periodo ou o de lente nao tem. */
#modal .caixa.menu-conta { width: 260px; min-width: 0; padding: 0; }
.menu-conta .conta-cab {
  padding: 13px 16px 12px; border-bottom: 1px solid var(--borda);
}
.menu-conta .conta-cab b { display: block; font-size: 0.8125rem; font-weight: 700; }
.menu-conta .conta-cab span {
  display: block; margin-top: 2px; font-size: 0.6875rem; color: var(--tinta-3);
  overflow-wrap: anywhere;
}
.menu-conta .conta-cab.volta { display: flex; align-items: center; gap: 8px; padding: 11px 14px 10px; }
.menu-conta .bt-volta {
  width: 24px; height: 24px; flex: none; border: 1px solid var(--borda);
  border-radius: 7px; background: var(--plano); color: var(--tinta-2);
  font: inherit; font-size: 0.75rem; cursor: pointer;
}
.menu-conta .bt-volta:hover { border-color: var(--borda-forte); color: var(--tinta); }
.menu-conta .op { margin: 0 6px; padding: 9px 10px; border-radius: 8px; gap: 10px; }
.menu-conta .op:first-of-type { margin-top: 6px; }
.menu-conta .op:last-child { margin-bottom: 6px; }
.menu-conta .op[data-conta] { cursor: pointer; }
.menu-conta .op[data-conta]:hover { background: var(--linha-hover); color: var(--tinta); }
.menu-conta .op .cresce { flex: 1 1 auto; min-width: 0; }
.menu-conta .risco { margin: 6px 0; border-top: 1px solid var(--borda); }

.grupo-cfg { padding: 13px 16px 14px; border-bottom: 1px solid var(--borda); }
.grupo-cfg:last-child { border-bottom: 0; }
.cfg-rot {
  margin: 0 0 9px; font-size: 0.6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-3);
}
.cfg-nota { margin: 9px 0 0; font-size: 0.6875rem; color: var(--tinta-3); text-wrap: pretty; }
/* Segmentos lado a lado em vez de ciclo: as opcoes aparecem TODAS, com a atual
   marcada. O botao que ciclava obrigava a clicar as cegas ate acertar. */
.segs { display: flex; gap: 6px; }
.seg {
  flex: 1 1 0; min-width: 0; height: 32px; border: 1px solid var(--borda);
  border-radius: 9px; background: var(--plano); color: var(--tinta-2);
  font: inherit; font-size: 0.75rem; cursor: pointer;
}
.seg:hover { border-color: var(--borda-forte); color: var(--tinta); }
.seg.on {
  border-color: var(--acento); background: var(--acento-fraco);
  color: var(--acento); font-weight: 700;
}

/* =================================================================== filtros

   UMA barra por tela. Antes eram duas empilhadas, uma de cada lado da borda do
   cartao: a de filtro (texto, pausadas) fora e a de ferramentas (colunas, ou
   abrir/recolher a arvore) dentro -- controles da mesma tabela, separados por
   uma borda, com duas dicas de uso que chegaram a se contradizer.
   Agora: filtro a esquerda, alternadores no meio, contagem a direita, colada
   no topo da tabela a que pertence. */
.barra-ctl {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--borda); background: var(--card);
}
.barra-ctl .fim {
  margin-left: auto; font-size: 0.8125rem; color: var(--tinta-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.barra-ctl .bt[disabled] { opacity: .45; pointer-events: none; }
.barra-ctl .n {
  font-size: 0.6875rem; font-weight: 600; color: var(--tinta-3);
  background: var(--card-2); border-radius: 999px; padding: 1px 7px;
  font-variant-numeric: tabular-nums;
}
.chip {
  font: inherit; font-size: 0.875rem; padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--borda); background: var(--card); color: var(--tinta-2); cursor: pointer;
}
.chip:hover { border-color: var(--borda-forte); color: var(--tinta); }
.chip.on { background: var(--acento-fraco); border-color: var(--acento-medio); color: var(--acento); font-weight: 600; }
.campo {
  font: inherit; font-size: 0.875rem; padding: 4px 10px; border-radius: var(--r-s);
  border: 1px solid var(--borda); background: var(--card); color: var(--tinta);
}
.campo:focus { outline: none; border-color: var(--acento-medio); }

@media (max-width: 1100px) {
  body { grid-template-columns: 1fr; }
  #lateral { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--borda); }
  #menu { max-height: 190px; }
  .tab-env { max-height: none; }
}

/* ====================================================== navegacao em pagina */

.cabeca-pagina { margin-bottom: 18px; }

/* Primeira linha da pagina de detalhe: a volta a esquerda, os vizinhos a
   direita. O caminho esta na barra fixa acima e o nome da entidade tambem --
   repetir os dois aqui embaixo eram tres faixas de cromo antes do primeiro
   numero. O subtitulo desceu para a sua propria linha porque agora divide
   espaco com a navegacao lateral. */
.cabeca-pagina .acima {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px;
}
.cabeca-pagina .acima > .bt { text-decoration: none; }
.sub-pagina {
  margin: 0 0 12px; font-size: 0.8125rem; color: var(--tinta-2);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0;
}

/* Vizinhos: a anterior e a proxima na mesma ordem da lista de onde se veio.
   Cada uma e um link com o NOME, nao uma seta anonima -- seta sozinha obriga a
   clicar para descobrir para onde vai. */
.vizinhos {
  margin-left: auto; display: flex; align-items: center; gap: 10px;
  min-width: 0; font-size: 0.75rem;
}
.viz-rot { color: var(--tinta-3); white-space: nowrap; }
.viz {
  max-width: 22ch; display: inline-flex; align-items: center; gap: 2px;
  color: var(--tinta-2); text-decoration: none; padding: 3px 8px;
  border: 1px solid var(--borda); border-radius: var(--r-s); background: var(--card);
}
.viz span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viz:hover { color: var(--acento); border-color: var(--acento-medio); }
/* Ponta da lista: fica visivel e apagada, nao some. Sumir mudaria a posicao do
   outro lado a cada entidade, e o alvo passaria a dancar. */
.viz.off { color: var(--tinta-4); }
.trilha { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; font-size: 0.875rem; }
.trilha a { color: var(--tinta-3); text-decoration: none; padding: 2px 5px; border-radius: 5px; }
.trilha a:hover { color: var(--acento); background: var(--acento-fraco); }
.trilha i { color: var(--tinta-3); font-style: normal; opacity: .6; }



/* Saiu daqui o botao "Detalhes" de fim de linha (.bt-acao) e a coluna que o
   segurava. Ele abria a aba lateral, que nao existe mais; hoje a propria
   linha leva a pagina. */

/* ========================================================= abas de pagina
   O trilho sublinhado do Google Ads: entrar numa campanha mostra abas, nao uma
   rolagem unica. Cada aba tem URL propria, entao o voltar do navegador anda
   entre elas. */
.abas {
  display: flex; gap: 2px; margin: 14px 0 0; border-bottom: 1px solid var(--borda);
  overflow-x: auto; scrollbar-width: none;
}
.abas::-webkit-scrollbar { display: none; }
.abas a {
  display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px;
  color: var(--tinta-2); text-decoration: none; font-size: 0.875rem; font-weight: 500;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.abas a:hover { color: var(--tinta); background: var(--acento-fraco); }
.abas a.on { color: var(--acento); border-bottom-color: var(--acento); }
.abas .n {
  font-size: 0.6875rem; font-weight: 600; color: var(--tinta-3);
  background: var(--card-2); border-radius: 999px; padding: 1px 6px;
  font-variant-numeric: tabular-nums;
}
.abas a.on .n { color: var(--acento); background: var(--acento-fraco); }
.corpo-aba > .tab-env { border: 1px solid var(--borda); border-radius: var(--r); background: var(--card); }
.sub-tit {
  margin: 20px 0 8px; font-size: 0.8125rem; font-weight: 650; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tinta-3);
}

/* ================================================= idiomas da direcao Pauta
   Invertem o que a direcao Ads fazia: o cartao se separa por BORDA, nao por
   sombra, e o controle tem raio de 10px em vez de pilula. A sombra fica
   reservada para o que de fato flutua -- menu ancorado (--sombra) e gaveta
   (--sombra-forte). Estas regras vem depois das definicoes de componente de
   proposito: e a cascata que as faz valer.

   Duas pilulas sobraram, porque no desenho elas sao pilula: o alternador de
   colunas (.bt.alterna) e o contador de aba (.abas .n). Pilula ali nao e
   decoracao -- marca o que e opcional ao lado do que e estrutural. */
.cartao { border: 1px solid var(--borda); box-shadow: none; }
.kpi { border: 1px solid var(--borda); box-shadow: none; }
.bt { height: 32px; padding: 0 13px; font-weight: 500; border-radius: var(--r-s); }
.bt.quadrado { padding: 0 9px; }
/* A pilula de 30px e o idioma da Visao geral, nao o da barra de pagina. Eu a
   tinha aplicado a .bt.alterna, que e o "Mostrar pausadas" -- botao que no
   desenho das telas de tabela e retangular como os vizinhos. */
.chip { font-weight: 500; padding: 5px 12px; border-radius: var(--r-s); }
.campo { border-radius: var(--r-s); padding: 7px 13px; }
#menu a {
  height: 42px; padding: 0 16px; margin: 0 12px 3px; border-radius: var(--r-s);
  font-weight: 500;
}
#menu a.ativo { font-weight: 700; }
.p { border-radius: 999px; padding: 2px 9px; }
/* Cabecalho de tabela: 12px/700 na tinta-2, sem caixa alta. O desenho sobe
   para 800 e tinta cheia so na coluna destacada, que e onde o olho deve cair. */
thead th {
  text-transform: none; letter-spacing: 0; font-size: 0.75rem; font-weight: 700;
  color: var(--tinta-2);
}
.corpo-aba > .tab-env { border: 1px solid var(--borda); box-shadow: none; }

/* ===================================================== melhorias de UX
   Cada bloco aqui responde a uma diretriz citada em docs/UX.md. */

/* Primeira coluna congelada. NN/g, Data Tables: congelar a linha de cabecalho
   E a primeira coluna e o que permite saber qual registro se esta lendo quando
   a tabela rola de lado. */
tbody td:first-child, thead th:first-child, tfoot td:first-child {
  position: sticky; left: 0; z-index: 4; background: var(--card);
}
thead th:first-child { z-index: 11; background: var(--card-2); }
tfoot td:first-child { background: var(--card-2); }
/* A primeira coluna e sticky e passa POR CIMA das outras ao rolar de lado:
   precisa de fundo OPACO, entao nao pode herdar o --linha-hover, que e
   translucido. Por isso o realce dela e misturado a mao -- e tem de ser o
   mesmo cinza, senao a linha fica meio azul e meio cinza, que foi o que
   aconteceu quando o resto virou neutro e este ficou para tras. */
/* ...e por isso o realce opaco e um TOKEN, nao um color-mix escrito aqui: a
   opacidade do --linha-hover muda entre claro e escuro (4% e 6%), e um mix com
   percentual fixo acertava num tema e errava no outro -- foi o que deixou a
   coluna fixa mais escura que o resto da linha no escuro. Os dois valores
   nascem juntos no temas.js. */
tbody tr:hover > td:first-child { background: var(--linha-hover-opaco); }
tbody td:first-child::after, thead th:first-child::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: var(--grade);
}

/* Chips de filtro ativo: o filtro precisa ser visivel onde o dado esta. */
.chip-ativo {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem;
  background: var(--acento-fraco); color: var(--acento);
  border: 1px solid var(--acento-medio); border-radius: 999px; padding: 4px 6px 4px 11px;
}
.chip-ativo b { font-weight: 600; }
.chip-ativo button {
  border: none; background: transparent; color: inherit; cursor: pointer;
  font-size: 0.75rem; line-height: 1; padding: 3px 5px; border-radius: 999px;
}
.chip-ativo button:hover { background: var(--acento-medio); }


/* ================================================== anuncios (lista fechada)
   A tela de anuncios abre com UMA linha por anuncio. O inventario de titulo a
   titulo e o segundo olhar, nao o primeiro -- <details> entrega isso sem
   estado em JS e sem redesenho, logo sem perder a posicao da rolagem. */
.lista-anuncios { display: flex; flex-direction: column; }
.anuncio { border-top: 1px solid var(--grade); }
.anuncio:first-child { border-top: none; }
.anuncio > summary {
  display: flex; align-items: center; gap: 9px; padding: 9px 2px;
  cursor: pointer; list-style: none; user-select: none; border-radius: var(--r);
}
.anuncio > summary::-webkit-details-marker { display: none; }
.anuncio > summary:hover { background: var(--acento-fraco); }
.anuncio > summary:focus-visible { outline: 2px solid var(--acento-medio); outline-offset: -2px; }
.anuncio[open] > summary { background: var(--card-2); }
.anuncio[open] > summary .giro svg { transform: rotate(90deg); }
.anuncio-id { flex: none; font-size: 0.875rem; font-weight: 600; }
.anuncio-vitrine {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--tinta-2); font-size: 0.9062rem;
}
.anuncio-selos { flex: none; display: flex; align-items: center; gap: 4px; }
.anuncio-conta {
  flex: none; font-size: 0.75rem; color: var(--tinta-3);
  font-variant-numeric: tabular-nums; min-width: 96px; text-align: right;
}
.anuncio-corpo { padding: 4px 2px 16px 27px; }
.anuncio-limite { margin: 0 0 6px; font-size: 0.875rem; color: var(--grave); }
.anuncio-url { margin: 0 0 10px; font-size: 0.8438rem; color: var(--tinta-3); }
.anuncio-ativos {
  display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.rotulo-bloco {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-3); margin-bottom: 4px;
}
@media (max-width: 900px) {
  .anuncio-vitrine, .anuncio-conta { display: none; }
}

/* Nota de procedencia logo abaixo de uma tabela: explica um numero do rodape
   sem roubar a linha dele. Tom de texto secundario, nunca caixa de aviso -- o
   usuario planejou o sistema e nao precisa de alarme, precisa da ressalva. */
.nota-fonte {
  margin: 8px 2px 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--tinta-3);
}

/* ===================================================================== gaveta
   Painel que entra pela direita com os leads por tras de um numero da tabela.
   Nao e a antiga aba lateral de detalhes: mostra UMA coisa e fecha. */
#gaveta { display: none; }
#gaveta.on { display: block; }
.g-veu { position: fixed; inset: 0; background: var(--veu); z-index: 40; }
.g-painel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 100%;
  box-sizing: border-box; background: var(--card); border-left: 1px solid var(--borda);
  box-shadow: var(--sombra-forte); display: flex; flex-direction: column; z-index: 41;
}
.g-painel > header {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 20px 22px 16px; border-bottom: 1px solid var(--borda);
}
.g-painel > header > div { flex: 1 1 auto; min-width: 0; }
.g-sup {
  margin: 0 0 5px; font-size: 0.6875rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-3);
}
.g-painel h2 {
  margin: 0; font-family: var(--fonte-tit); font-size: 1.125rem; font-weight: 700;
  letter-spacing: -0.02em; text-wrap: pretty;
}
.g-fechar {
  flex: 0 0 34px; width: 34px; height: 34px; border: 1px solid var(--borda);
  border-radius: var(--r-s); background: var(--plano); color: var(--tinta-2);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.g-fechar:hover { border-color: var(--borda-forte); color: var(--tinta); }
.g-corpo { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; }
.g-lead { padding: 14px 22px 15px; border-bottom: 1px solid var(--grade); }
.g-cab { display: flex; align-items: baseline; gap: 10px; margin-bottom: 2px; }
.g-cab h3 {
  flex: 1 1 auto; min-width: 0; margin: 0; font-family: var(--fonte-tit);
  font-size: 0.875rem; font-weight: 700; text-wrap: pretty;
}
.g-icp { flex: 0 0 auto; font-size: 0.6875rem; font-weight: 700; color: var(--acento); }
.g-data {
  flex: 0 0 auto; font-variant-numeric: tabular-nums; font-size: 0.75rem; color: var(--tinta-3);
}
.g-contato { margin: 0 0 11px; font-size: 0.8125rem; color: var(--tinta-2); text-wrap: pretty; }
.g-campos { display: flex; flex-wrap: wrap; gap: 9px 18px; }
.g-campo { flex: 1 1 170px; min-width: 0; }
.g-rot {
  margin: 0 0 2px; font-size: 0.625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-3);
}
.g-val { margin: 0; font-size: 0.8125rem; text-wrap: pretty; }
.g-pe {
  margin: 0; padding: 12px 22px; border-top: 1px solid var(--borda);
  background: var(--card-2); font-size: 0.75rem; color: var(--tinta-3); text-wrap: pretty;
}

/* A contagem de leads e o unico numero da tabela que abre alguma coisa, entao
   tem de PARECER que abre: sublinhado com folga, na cor de acao. */
.cel-leads {
  border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
  font-variant-numeric: tabular-nums; color: var(--acento);
  text-decoration: underline; text-underline-offset: 3px;
}
.cel-leads:hover { color: var(--acento-hover); }

/* Coluna-ancora da tabela: a que o olho deve achar primeiro. Uma so por
   tabela -- duas nao ancoram nada. Custo nas telas do Ads, Impressoes nas de
   SEO. O cabecalho ganha peso e tinta cheia; a coluna inteira ganha um fundo
   de meio tom, que e o que separa sem pintar. */
thead th.forte {
  font-weight: 800; color: var(--tinta); background: var(--card-2);
}
tbody td.forte { background: var(--card-2); font-weight: 600; }
tfoot td.forte { background: var(--card-2); }
/* Sob o cursor a linha inteira muda de fundo: a ancora tambem, senao ela fica
   uma ilha clara no meio da faixa realcada. */
tbody tr:hover > td.forte { background: var(--linha-hover-opaco); }

/* ------------------------------------------ cabecalho de secao (Visao geral)
   O desenho poe o controle de colunas AQUI, ao lado do titulo da secao, e nao
   numa barra sobre a tabela: a tabela de servicos nao tem filtro proprio, e
   uma barra so para esse botao seria uma faixa vazia atravessando a tela. */
.cabeca-secao {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 6px;
}
.cabeca-secao h2 {
  margin: 0; font-family: var(--fonte-tit); font-size: 1.75rem; font-weight: 700;
  letter-spacing: -0.025em;
}
/* Secao DENTRO de uma pagina que ja tem h1: o desenho a poe em 18px, nao em
   28px. "Resultado por servico" abre a Visao geral, que nao tem h1 -- la o h2
   e o titulo da tela e fica no tamanho grande. */
.cabeca-secao h2.media { font-size: 1.125rem; letter-spacing: -0.02em; }
.cabeca-secao .lado { display: flex; align-items: center; gap: 10px; }
.cabeca-secao .conta {
  font-variant-numeric: tabular-nums; font-size: 0.75rem; color: var(--tinta-3);
}

/* --------------------------------------------------- quebras (tela de Leads)
   Dois cartoes lado a lado, cada um com uma tabela curta. flex-basis 380px:
   acima de ~800px uteis eles ficam em paralelo, abaixo disso empilham, e
   nenhuma das duas tabelas fica estreita demais para o nome do canal. */
.quebras { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 30px; }
.quebra {
  flex: 1 1 380px; min-width: 0; background: var(--card);
  border: 1px solid var(--borda); border-radius: var(--r); overflow: hidden;
}
.quebra > header { padding: 16px 18px 13px; border-bottom: 1px solid var(--borda); }
.quebra > header h2 {
  margin: 0 0 4px; font-family: var(--fonte-tit); font-size: 0.9375rem;
  font-weight: 700; letter-spacing: -0.015em;
}
.quebra > header p { margin: 0; font-size: 0.75rem; color: var(--tinta-3); text-wrap: pretty; }
/* A tabela da quebra nao rola e nao tem cabecalho fixo: sao poucas linhas e
   ela vive dentro da moldura do cartao, nao num .tab-env. */
.quebra table thead th { position: static; border-top: 0; cursor: default; }
.quebra table tbody td:first-child, .quebra table tbody th:first-child { position: static; }

/* ----------------------------------------------- chips de recorte (Leads)
   Nao sao os .chip-ativo da barra de filtro: aquele mostra um filtro LIGADO e
   traz um X para desligar. Estes sao um seletor de dois estados em que um dos
   dois esta sempre ligado, por isso cada um carrega a sua contagem. */
.recortes { display: flex; flex-wrap: wrap; gap: 7px; }
.recorte {
  display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px;
  font: inherit; font-size: 0.75rem; cursor: pointer;
  border: 1px solid var(--borda); border-radius: 999px;
  background: var(--plano); color: var(--tinta-2);
}
.recorte:hover { border-color: var(--borda-forte); }
.recorte .n { font-variant-numeric: tabular-nums; font-weight: 700; }
.recorte.on {
  border-color: var(--acento); background: var(--acento-fraco); color: var(--acento);
}

/* ======================================================= pagina de tabela
   Formato do desenho: titulo grande com a contagem ao lado, barra de
   controles SOLTA, e a tabela numa moldura propria. Antes tudo isso vivia
   dentro de um .cartao e a barra era a primeira faixa dele, grudada na borda
   de cima -- o que fazia filtro, contagem e tabela parecerem uma coisa so.
   Visao geral e Leads nao usam este bloco. */
.cabeca-tabela {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px; margin-bottom: 14px;
}
.cabeca-tabela h1 {
  margin: 0; font-family: var(--fonte-tit); font-size: 1.875rem; font-weight: 800;
  letter-spacing: -0.035em;
}
.cabeca-tabela .contagem {
  font-variant-numeric: tabular-nums; font-size: 0.875rem; color: var(--tinta-3);
}
/* Solta: sem fundo e sem borda, porque nao e mais a tampa de um cartao. */
.pagina-tabela > .barra-ctl {
  padding: 0 0 14px; border-bottom: 0; background: transparent;
}
/* A moldura agora e da TABELA, nao da pagina. */
.pagina-tabela > .tab-env {
  border: 1px solid var(--borda); border-radius: var(--r); background: var(--card);
}
.nota-tabela {
  margin: 14px 2px 0; font-size: 0.75rem; color: var(--tinta-3);
  max-width: 100ch; text-wrap: pretty;
}
.nota-tabela code {
  font-family: ui-monospace, monospace; font-size: 0.95em;
  background: var(--card-2); border: 1px solid var(--borda);
  border-radius: 4px; padding: 0 4px;
}

/* ------------------------------------------------ controles de pagina
   O desenho so poe barra de controles em Campanhas e Palavras-chave, e nas
   duas com a mesma medida: 34px de altura, raio 6px, fundo de cartao. Sao
   outras medidas que as da barra do topo (32px, raio 10px) -- de proposito:
   um filtra a tabela, o outro navega o sistema. */
.pagina-tabela > .barra-ctl .bt,
.pagina-tabela > .barra-ctl .campo {
  height: 34px; padding: 0 12px; border-radius: var(--r-ctl); font-size: 0.8125rem;
}
.pagina-tabela > .barra-ctl .campo {
  /* 230px e a largura do desenho: cabe um nome de campanha enquanto se digita
     sem empurrar os botoes para a linha de baixo. */
  flex: 0 1 230px; min-width: 0;
}
/* O controle que abre e fecha a arvore inteira e o unico em cor de acao da
   barra: e o unico que muda a FORMA da tabela, nao o seu conteudo. */
.bt.destaque { color: var(--acento); font-weight: 600; }
.bt.destaque:hover { border-color: var(--acento-medio); background: var(--acento-fraco); }
/* Colunas vai para a direita, separado dos filtros: nao filtra nada, mostra
   mais do que ja esta ali. */
.pagina-tabela > .barra-ctl .bt.colunas { margin-left: auto; }