/* ==========================================================================
   Painel de Mídia — ALED
   Tokens da marca Atacadão LED (manual AT_001_26). Claro por padrão + escuro.
   ========================================================================== */

:root {
  /* base da marca */
  --azul-profundo: #03202D;
  --petroleo: #053041;
  --petroleo-900: #011C25;
  --petroleo-700: #06364A;
  --aco-500: #154E69;
  --ardosia-300: #4A798D;
  --gelo-100: #D4E3E8;
  --branco: #FFFFFF;

  /* gradiente da luz — assinatura, sempre verde -> turquesa -> ciano */
  --verde-luz: #5BE9A2;
  --turquesa: #43D2D8;
  --ciano: #16BDF5;
  --ciano-escuro: #0FA8D9;
  --grad-luz: linear-gradient(90deg, #5BE9A2 0%, #43D2D8 50%, #16BDF5 100%);
  --ink-on-grad: #03202D;

  /* sinal (nunca como cor de marca) */
  --coral: #FF6B6B;

  /* --- tema claro (padrão) --- */
  --bg: #FAFCFD;
  --surface: #FFFFFF;
  --surface-2: #F0F6F8;
  --line: #E3EDF1;
  --text: #053041;
  --text-soft: #3D5866;
  --text-mute: #5A7280;
  --eyebrow: #06364A;

  /* cor de DADO: validada com scripts/validate_palette.js do skill dataviz.
     Claro exige marca escura — #0FA8D9 dá só 2,75:1 contra branco (mínimo 3:1).
     Par válido se algum dia precisar de 2 séries no claro: #154E69 + #0FA8D9 (ΔE 28,9). */
  --dado: #154E69;
  --dado-2: #0493C3;
  --dado-fraco: #9FC0CE;
  --faixa-fds: #EDF3F6;

  /* --- PALETA CATEGÓRICA ---
     Uma cor por assunto, para o painel parar de ser azul sobre branco. Todas
     saem do gradiente da marca (verde-luz, ciano) mais o azul-aço e o coral
     de sinal — nenhuma cor inventada fora do manual.

     Estes são os tons ESCURECIDOS: as cores vibrantes da marca reprovam no
     tema claro (verde-luz dá 1,54:1 contra branco, mínimo 3:1). Aqui cada uma
     foi rebaixada em luminosidade até passar 3,5:1, mantendo o matiz. O tema
     escuro remapeia para as versões vivas, onde elas passam com folga.

     Turquesa ficou de fora de propósito: como cor de dado ela se confunde
     com verde e ciano lado a lado (distância 87 e 67 no RGB, contra 100+ das
     demais). Ela segue viva no gradiente da assinatura. */
  --cat-1: #154E69;   /* azul-aço  — volume, base, "tudo"          */
  --cat-2: #119C57;   /* verde     — o que avançou, ganho, receita */
  --cat-3: #0493C3;   /* ciano     — tempo, atividade, conversa    */
  --cat-4: #FF3A3A;   /* coral     — perda, descarte, alerta       */

  /* semântico */
  --bom: #0E8F5E;
  --ruim: #C4443F;

  --font: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;

  /* Espaçamento ÚNICO da página. Margem lateral, respiro entre as faixas e
     vão entre cards saem todos daqui — é o que garante que a distância seja
     a mesma em toda direção. Não introduzir um segundo valor: se algum canto
     precisar de outro respiro, o problema é o layout, não a medida. */
  --gap: 14px;

  /* Tamanho ÚNICO do texto dentro de qualquer gráfico (eixo X, eixo Y,
     rótulo de guia). Um valor só, num lugar só: dois gráficos lado a lado
     com fontes diferentes é o tipo de descuido que salta aos olhos. O valor
     é em unidades do viewBox (420x176), não em px de tela. */
  --fonte-grafico: 8px;

  /* escala de camadas — nunca valor solto tipo 9999 */
  --z-base: 0;
  --z-sticky: 10;
  --z-dropdown: 20;
  --z-overlay: 40;
  --z-toast: 60;
  --z-tooltip: 80;

  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --t-rapido: 150ms;
  --t: 200ms;
}

:root[data-theme="dark"] {
  --bg: #03202D;
  --surface: #053041;
  --surface-2: #011C25;
  --line: rgba(255, 255, 255, .10);
  --text: #FFFFFF;
  --text-soft: rgba(255, 255, 255, .72);
  --text-mute: rgba(255, 255, 255, .52);
  --eyebrow: #43D2D8;

  /* No escuro a marca de dado pode ser cor de luz: #43D2D8 passa 3:1 sobre petrol.
     Par válido para 2 séries no escuro: #0FA8D9 + #5BE9A2 (ΔE 22,9). */
  --dado: #43D2D8;
  --dado-2: #5BE9A2;
  --dado-fraco: #1D5266;
  --faixa-fds: rgba(255, 255, 255, .045);

  --bom: #5BE9A2;
  --ruim: #FF6B6B;

  /* No petróleo as cores VIVAS da marca passam com folga (verde-luz 9,05:1,
     turquesa 7,60:1, coral 5,03:1) — aqui elas aparecem como são. Mesmos
     papéis do tema claro, tons diferentes: é remapeamento semântico, não
     inversão mecânica. */
  --cat-1: #43D2D8;   /* turquesa  — volume, base, "tudo"          */
  --cat-2: #5BE9A2;   /* verde-luz — o que avançou, ganho, receita */
  --cat-3: #16BDF5;   /* ciano     — tempo, atividade, conversa    */
  --cat-4: #FF6B6B;   /* coral     — perda, descarte, alerta       */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #03202D;
    --surface: #053041;
    --surface-2: #011C25;
    --line: rgba(255, 255, 255, .10);
    --text: #FFFFFF;
    --text-soft: rgba(255, 255, 255, .72);
    --text-mute: rgba(255, 255, 255, .52);
    --eyebrow: #43D2D8;
    --dado: #43D2D8;
    --dado-2: #5BE9A2;
    --dado-fraco: #1D5266;
    --faixa-fds: rgba(255, 255, 255, .045);
    --bom: #5BE9A2;
    --ruim: #FF6B6B;
    --cat-1: #43D2D8;
    --cat-2: #5BE9A2;
    --cat-3: #16BDF5;
    --cat-4: #FF6B6B;
  }
}

* { box-sizing: border-box; }

/* O atributo hidden do HTML tem que vencer o display das classes. Sem isto, um
   .campo{display:flex} ou .btn{display:inline-flex} continua na tela mesmo com
   hidden — foi o que fez os campos de data e o "Limpar filtros" aparecerem. */
[hidden] { display: none !important; }


html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  /* toda métrica do painel usa algarismo de largura fixa: as casas decimais
     param de dançar quando o número muda */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

button, select, input { font: inherit; color: inherit; }

/* ============================ esqueleto =================================
   Padrão sysled-page-layout adaptado: a navegação vai para a lateral (pedido do
   Antonio), e o miolo mantém o esqueleto vertical da skill —
   topbar CARTÃO FLUTUANTE (margin 10px 14px 0, padding 12px 18px, margin-bottom 0)
   -> faixa de filtros colada nela (padding 11px 24px)
   -> corpo único que rola (flex:1, min-height:0, padding 0 32px, padding-top 0).
   Quem rola é o corpo; a raiz não rola.
   ======================================================================== */

.app {
  display: grid;
  grid-template-columns: 64px 1fr;   /* 64px = ícone 24px + 20px de folga cada lado */
  height: 100vh;
  height: 100dvh;
}

/* --------------------- lateral: só ícones, com tooltip ------------------ */

.lateral {
  background: var(--petroleo);
  border-right: 1px solid rgba(255, 255, 255, .07);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  padding: 12px 0;
  gap: 6px;
}

.marca { display: block; padding: 2px 0 14px; }
.marca img { width: 32px; height: 32px; display: block; }

.lateral nav { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }

.aba {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;                       /* alvo de toque */
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, .62);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-rapido) var(--ease), color var(--t-rapido) var(--ease);
}

.aba > svg { width: 21px; height: 21px; }
.aba > img { width: 21px; height: 21px; display: block; }

/* logo de plataforma fica cinza quando a aba está inativa: identidade sem gritar */
.aba > img { filter: grayscale(1); opacity: .62; transition: filter var(--t-rapido) var(--ease), opacity var(--t-rapido) var(--ease); }
.aba:hover > img, .aba[aria-current="page"] > img { filter: none; opacity: 1; }

.aba:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.aba:active { transform: scale(.95); }

.aba[aria-current="page"] { background: rgba(255, 255, 255, .12); color: #fff; }

/* estado ativo não depende só de cor: tem a barra de luz à esquerda */
.aba[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--grad-luz);
}

/* tooltip: obrigatório quando a lateral é só ícone */
.aba::after {
  content: attr(data-rotulo);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-tooltip);
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--petroleo-900);
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 4px 14px rgba(3, 32, 45, .35);
  transition: opacity var(--t-rapido) var(--ease);
}

.aba:hover::after, .aba:focus-visible::after { opacity: 1; }

.aba-selo {
  position: absolute;
  top: 5px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--turquesa);
}

.lateral-pe { margin-top: auto; display: grid; place-items: center; width: 100%; }

.sinc-ponto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--verde-luz);
  position: relative;
}

.sinc-ponto[data-ok="0"] { background: var(--coral); }

.sinc-ponto::after {
  content: attr(data-quando);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--petroleo-900);
  color: #fff;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-rapido) var(--ease);
}

.sinc-ponto:hover::after { opacity: 1; }

/* ------------- miolo: topbar cartão + filtros + corpo que rola ---------- */

/* O ESPAÇAMENTO SAI DAQUI, de um lugar só.
   Antes a topbar tinha margem própria e o corpo tinha padding próprio: os
   dois valores conviviam e a distância vertical entre a barra e os cards
   nunca batia com a das laterais. Agora a coluna inteira tem um padding e
   um gap — ambos --gap —, e nem a topbar nem o corpo carregam margem. */
.principal {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  padding: var(--gap);
  gap: var(--gap);
}

/* topbar = cartão flutuante, exatamente como o .nfp-header do sysled-page-layout */
.topo {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0;                 /* o espaçamento vem do .principal, um lugar só */
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.topo h1 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.015em;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.topo h1 img { height: 17px; width: auto; display: block; }
.topo h1 small { font-weight: 400; font-size: 12px; color: var(--text-mute); }

/* o subtítulo do canal some quando a barra aperta: o logo e o nome bastam */
@media (max-width: 1400px) { .topo h1 small { display: none; } }

.acoes { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }

/* campos de data do intervalo personalizado */
.campo-intervalo { gap: 6px; }
.campo-intervalo input[type="date"] {
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  padding: 0;
  outline: none;
  color-scheme: light;
}
:root[data-theme="dark"] .campo-intervalo input[type="date"] { color-scheme: dark; }
.campo-intervalo .rot-ate { color: var(--text-mute); }

/* faixa de filtros: colada na topbar (gap 0), respiro 12px até o corpo */
/* Os filtros vivem DENTRO da topbar (uma barra só). Ficam entre o título e as
   ações, encolhendo primeiro quando falta largura — o título e os botões são
   os últimos a ceder. */
.filtros {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 0 0 6px;
  min-width: 0;
}

.btn-limpar { padding: 7px 11px; font-size: 12px; }

/* filtros específicos de uma aba (hoje: Comercial), na mesma barra */
.filtros-aba { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.filtros-aba .campo.cresce { flex: 1 1 170px; min-width: 130px; }
.filtros-aba input[type="search"] {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  outline: none;
}


/* ---------------------- campos de filtro e botões ---------------------- */

.campo {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-soft);
  font-size: 12.5px;
  transition: border-color var(--t-rapido) var(--ease);
}

.campo:hover { border-color: var(--ardosia-300); }

.campo > label {
  color: var(--text-mute);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.campo select, .campo input {
  border: 0;
  background: transparent;
  outline: 0;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  max-width: 150px;
}

.campo input[type="date"] { width: 118px; cursor: text; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--t-rapido) var(--ease),
              background var(--t-rapido) var(--ease),
              border-color var(--t-rapido) var(--ease);
}

/* sem isto o SVG herda a altura da linha e estoura o botão */
.btn > svg { width: 15px; height: 15px; flex: none; }

.btn:hover { background: var(--surface-2); border-color: var(--ardosia-300); }
.btn:active { transform: scale(.97); }        /* resposta física ao clique */
.btn[disabled] { opacity: .45; cursor: default; transform: none; }

.btn-luz {
  background: var(--grad-luz);
  color: var(--ink-on-grad);
  border-color: transparent;
  font-weight: 600;
}

.btn-luz:hover { background: var(--grad-luz); filter: brightness(1.05); }

.btn-icone { width: 34px; padding: 0; }

:focus-visible {
  outline: 2px solid var(--ciano);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ------------------------------- corpo --------------------------------- */

.corpo {
  flex: 1;
  min-height: 0;
  /* A primeira tela mostra cards + gráficos inteiros; a tabela fica logo
     abaixo da dobra, a um scroll curto. Sem padding próprio: a sangria e o
     respiro até a topbar vêm do .principal, para as duas distâncias serem
     literalmente o mesmo valor. */
  overflow-y: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* O painel ocupa a largura do corpo; a altura de cada faixa é resolvida por
   dentro (a dos gráficos é calculada pelo JS a partir da janela). */
.corpo > .painel:not([hidden]) { min-height: 0; }

.painel[hidden] { display: none; }

.secao {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.secao-nota {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--text-mute);
}

.bloco { margin-bottom: 26px; }

.cartao {
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 18px;
}


/* ===================== grade de 12 colunas (16px) =======================
   Pesquisa aplicada: faixa de 4 a 6 indicadores no topo, e abaixo uma grade de
   12 colunas onde cada gráfico ocupa 4 a 8 colunas. Gráfico sozinho ocupando a
   linha inteira desperdiça tela — por isso ninguém aqui usa .c12 para gráfico.
   ======================================================================= */

.grade {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  align-items: start;
  margin-bottom: 16px;
}

/* ---- modo relatório de uma tela (abas Meta e Google) ----
   A altura é REPARTIDA, não empilhada: título e cards ficam no tamanho
   natural (auto) e a grade inferior recebe todo o resto (1fr). Assim o
   branco que sobrava embaixo vira altura de gráfico, e a distância entre a
   linha dos cards, a primeira linha de gráficos, a segunda e o fim da tela
   é sempre o mesmo --gap. */
.grade.uma-tela {
  min-height: 0;
  align-content: start;
  margin-bottom: 0;
}

/* No modo relatório o ÚNICO espaçamento é o gap. Margem de título ou de
   bloco somaria por cima e quebraria a equidistância — foi o que deixava
   45px entre os cards e a primeira linha de gráficos, contra 14px nas
   laterais. */
.grade.uma-tela > .tit { margin: 0; }

/* A altura dos gráficos é CALCULADA pelo JS (medirAlturaGraficos), não
   herdada por uma cadeia de height:100% — a cadeia colapsava para o tamanho
   do título quando qualquer elo ficava em auto. */
.grade.uma-tela > .c12:last-child { min-height: 0; }

/* o título de seção não deve puxar margem extra: a distância vem do gap */
.grade.uma-tela > .tit { margin: 0; }

.c3  { grid-column: span 3; }
.c4  { grid-column: span 4; }
.c5  { grid-column: span 5; }
.c6  { grid-column: span 6; }
.c7  { grid-column: span 7; }
.c8  { grid-column: span 8; }
.c12 { grid-column: span 12; }

@media (max-width: 1500px) {
  .c3 { grid-column: span 4; }
}

@media (max-width: 1200px) {
  .c3, .c4, .c5 { grid-column: span 6; }
  .c6, .c7, .c8 { grid-column: span 12; }
}

@media (max-width: 760px) {
  .c3, .c4, .c5, .c6, .c7, .c8 { grid-column: span 12; }
}

/* grade própria de 5 colunas — frações de 12 não dão 5 partes iguais
   (5/12≠1/5). Usada pelos 5 cards de KPI fechados do topo e, mais adiante,
   pela grade inferior (funil/heatmap/pareto/geo/anúncios). */
.grade-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--gap);
}

@media (max-width: 1200px) {
  .grade-5 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .grade-5 { grid-template-columns: 1fr; }
}

/* ---- grade inferior: malha de 5 colunas ----
   Especificação do Antonio: funil de atendimento nas colunas 1-2, conversas
   por dia e hora nas 3-5, e a linha de baixo repetindo a MESMA malha. As
   duas linhas se alinham verticalmente — é isso que dá a simetria. */
/* Regra do Antonio: a PRIMEIRA TELA mostra os 5 cards + os 4 gráficos
   inteiros; a tabela fica logo abaixo da dobra, a um scroll curto.

   As duas linhas de gráfico têm altura CALCULADA a partir do espaço que
   sobra na janela — não 1fr, que dependeria de uma cadeia de alturas
   definidas e colapsava para o tamanho do título quando qualquer elo da
   cadeia ficava em auto. --altura-graficos é medida pelo JS (que conhece a
   altura real da topbar, dos filtros e dos cards) e escrita aqui. */
.grade-baixo {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  /* A altura vai na FAIXA, não no bloco: com height no bloco a faixa ainda
     crescia pelo conteúdo (o SVG empurrava) e sobrava um vão de 26px entre
     as linhas. Fixando a faixa, o bloco preenche exatamente e o único
     espaço vertical passa a ser o gap. */
  grid-template-rows: var(--altura-grafico, 240px) var(--altura-grafico, 240px) auto;
  gap: var(--gap);
}

.grade-baixo .col-1-2 { grid-column: 1 / 3; }
.grade-baixo .col-3-5 { grid-column: 3 / 6; }
.grade-baixo .col-1-5 { grid-column: 1 / -1; }

.bloco {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 13px 15px;
  min-width: 0;
  /* preenche a célula inteira: o card vira a moldura da faixa, e o conteúdo
     (lista ou gráfico) cresce dentro dele em vez de deixar branco embaixo */
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* A classe de categoria só troca --cor-metrica; as primitivas de gráfico já
   leem essa variável, então nenhuma função de desenho precisou mudar.
   .gbarra e .gcelula usavam --dado fixo — passam a herdar daqui também. */
.cat-1 { --cor-metrica: var(--cat-1); }
.cat-2 { --cor-metrica: var(--cat-2); }
.cat-3 { --cor-metrica: var(--cat-3); }
.cat-4 { --cor-metrica: var(--cat-4); }

.bloco .gbarra { fill: var(--cor-metrica, var(--dado)); }
.bloco .gcelula { fill: var(--cor-metrica, var(--dado)); }
.bloco .etapa .barra { background: var(--cor-metrica, var(--dado)); }

/* o título ganha um marcador na cor do bloco: identifica o assunto sem
   depender de o leitor associar a cor do gráfico sozinho */
.bloco-tit::before {
  content: "";
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: var(--cor-metrica, var(--dado));
  flex: none;
}

.bloco-tit {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.bloco-nota { font-size: 11px; font-weight: 400; color: var(--text-mute); }

/* O gráfico ocupa a altura que sobrar no bloco (height:100% sobre a caixa
   .alvo, que é flex:1). object-fit:contain mantém a proporção do viewBox —
   o desenho cresce até encostar na borda sem esticar nem cortar rótulo. */
.bloco .alvo { flex: 1; min-height: 0; display: flex; }
.bloco svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* tabela de fechamento: rola só ela se a lista crescer, sem empurrar a
   página — o relatório continua sendo de uma tela */
.tab-rolo { overflow: auto; min-height: 0; }
.bloco .tab-rolo { flex: 1; }
.bloco table.tab { width: 100%; }
.bloco table.tab th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.bloco table.tab td, .bloco table.tab th { padding: 5px 8px; font-size: 11.5px; }

/* ---- tabela em árvore: campanha > grupo > anúncio ----
   A hierarquia se lê pelo RECUO e pelo peso do texto, não por cor: cor aqui
   competiria com a paleta dos gráficos ao lado. */
.tab-arvore .seta-arv {
  display: inline-block;
  width: 12px;
  color: var(--text-mute);
  font-size: 10px;
}

.tab-arvore tr.abrivel { cursor: pointer; }
.tab-arvore tr.abrivel:hover { background: var(--surface-2); }

.tab-arvore .lin-campanha td:first-child { font-weight: 600; }
.tab-arvore .lin-grupo td:first-child { padding-left: 22px; font-weight: 500; }
.tab-arvore .lin-anuncio td:first-child {
  padding-left: 44px;
  font-weight: 400;
  color: var(--text-soft);
}
.tab-arvore .lin-anuncio a { color: inherit; }

/* mapa de leads: preenche o bloco, como o gráfico faria */
.mapa-leads {
  flex: 1;
  min-height: 150px;
  border-radius: var(--r-sm);
  overflow: hidden;
}
.mapa-leads canvas { outline: none; }

/* o bloco do mapa precisa ser referência para o botão flutuar dentro dele */
.bloco:has(> .mapa-leads) { position: relative; }

.btn-expandir {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-soft);
  cursor: pointer;
  /* acima dos controles do MapLibre, que ficam em z-index 2 */
  z-index: 3;
}
.btn-expandir:hover { background: var(--surface-2); color: var(--text); }
.btn-expandir svg { width: 15px; height: 15px; }

/* no modal o mapa ocupa a altura toda que a folha permite */
.mapa-modal {
  height: min(62vh, 520px);
  border-radius: var(--r-sm);
  overflow: hidden;
}

/* aviso de período sem dado: fica no lugar do conteúdo, não no lugar da
   página — a estrutura toda continua desenhada embaixo dele */
.aviso-vazio {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.aviso-vazio strong { font-weight: 600; }

/* gráfico de categoria é clicável: os rótulos do eixo cortam nomes longos
   ("Cliente Sumiu (Sem Retorno)"), e o clique abre a lista por extenso */
.abrir-tabela { cursor: pointer; border-radius: var(--r-sm); }
.abrir-tabela:hover { background: var(--surface-2); }
.abrir-tabela:focus-visible { outline: 2px solid var(--cor-metrica, var(--dado)); outline-offset: 2px; }

.bloco-vazio {
  margin: 0;
  padding: 18px 0 22px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-mute);
}
.bloco-vazio code {
  font-size: 11.5px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

@media (max-width: 1200px) {
  .grade-baixo { grid-template-columns: minmax(0, 1fr); }
  .grade-baixo .col-1-2, .grade-baixo .col-3-5 { grid-column: 1 / -1; }
}

/* título de bloco dentro da grade, sem virar seção solta */
.grade > .tit {
  grid-column: span 12;
  margin: 6px 0 -6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.grade > .tit:first-child { margin-top: 0; }

.grade > .tit .secao-nota {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

/* ------------------ cartão de controle (com meta, bullet) --------------- */

/* os cartões agora são células da .grade — sem grid próprio para não brigar */
.controles, .verificacoes { display: contents; }

.kpi {
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px 16px 15px;
}

.kpi dt {
  margin: 0 0 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-mute);
  display: flex;
  align-items: center;
  gap: 6px;
}

.kpi dd {
  margin: 0;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.1;
}

.kpi .unid { font-size: 15px; font-weight: 600; color: var(--text-soft); }

/* barra estilo bullet: realizado + marca da meta */
.bullet {
  position: relative;
  height: 6px;
  margin-top: 11px;
  border-radius: 3px;
  background: var(--surface-2);
  overflow: visible;
}

/* Sem transição de largura de propósito: a barra desenha junto com o dado, e uma
   animação a cada recarga não comunicaria nada num painel visto o dia inteiro. */
.bullet i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 3px;
  background: var(--dado);
}

.bullet i.ok { background: var(--bom); }
.bullet i.nao { background: var(--ruim); }

/* marca da meta */
.bullet b {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  border-radius: 1px;
  background: var(--text);
  opacity: .55;
}

.delta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-mute);
}

/* o ícone é o que carrega o sinal — cor sozinha não basta */
.delta .seta { font-size: 12px; line-height: 1; }
.delta.ok { color: var(--bom); }
.delta.nao { color: var(--ruim); }
/* sem classe = variação neutra (ou métrica sem direção "boa"): cinza */
.delta .mom {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-mute);
  cursor: help;
}

/* ------------------- cartão de verificação (sem meta) ------------------- */



.vk {
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 11px 13px;
}

.vk dt {
  margin: 0 0 3px;
  font-size: 11px;
  color: var(--text-mute);
  display: flex;
  align-items: center;
  gap: 5px;
}

.vk dd {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.015em;
}

.ajuda {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--text-mute);
  font-size: 9px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  flex: none;
}

/* ------------------------------ funil ---------------------------------- */

.funil { display: flex; flex-direction: column; gap: 0; }

.etapa {
  display: grid;
  grid-template-columns: 152px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
}

.etapa .nome { font-size: 12.5px; color: var(--text-soft); font-weight: 500; }

/* mesma razão da .bullet i: a barra nasce com o dado, sem animar largura */
.etapa .barra {
  height: 26px;
  border-radius: 5px;
  background: var(--cor-metrica, var(--dado));
  min-width: 3px;
}

/* a última etapa recebe o gradiente da luz: é a assinatura da marca */
.etapa:last-of-type .barra { background: var(--grad-luz); }

.etapa .valor {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.015em;
  min-width: 74px;
  text-align: right;
}

/* taxa ENTRE as etapas — é o número que diz onde o funil vaza */
.taxa {
  display: grid;
  grid-template-columns: 152px 1fr;
  gap: 12px;
  padding: 1px 0 2px;
}

.taxa span {
  grid-column: 2;
  font-size: 11px;
  color: var(--text-mute);
  display: flex;
  align-items: center;
  gap: 5px;
}

.taxa b { font-weight: 600; color: var(--text-soft); }
.taxa .meta-taxa { color: var(--text-mute); font-weight: 400; }

/* ------------------------------ gráficos -------------------------------- */



.grafico { position: relative; }

.grafico h3 {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.grafico .eixo-nota { margin: 0 0 10px; font-size: 11px; color: var(--text-mute); }

.grafico svg { display: block; width: 100%; height: auto; }

/* TODO texto de gráfico sai do mesmo token — eixo X, eixo Y e rótulos de
   guia. Nunca declarar font-size solto num gráfico específico. */
.gx, .gy, .gguia80-rotulo { fill: var(--text-mute); font-size: var(--fonte-grafico); }

/* O SVG escala com a largura do cartão: num celular de 390px o viewBox de
   420 renderiza a 0,76x e o texto encolhe junto até ficar ilegível. Como o
   tamanho está em unidades do viewBox, subir o token aqui devolve o texto ao
   patamar legível sem tocar em coordenada nenhuma do desenho. */
@media (max-width: 760px) {
  :root { --fonte-grafico: 12px; }
}
.glinha { stroke: var(--line); stroke-width: 1; }
/* --cor-metrica com fallback para --dado: quem define a cor é o CONTÊINER
   (um bloco .cat-N, o .alvo de um gráfico), e a primitiva só obedece. Assim
   colorir um gráfico novo é pôr uma classe nele, sem tocar aqui. */
.gbarra { fill: var(--cor-metrica, var(--dado)); transition: opacity var(--t-rapido) var(--ease); }
.gbarra:hover { opacity: .72; }
.gfds { fill: var(--faixa-fds); }

/* ---- linha suavizada + área em degradê ----
   --cor-metrica é setada pelo CHAMADOR — troca de tema e troca de métrica no
   carrossel do modal são a MESMA operação (mudar uma custom property), sem
   redesenhar o SVG.

   O padrão NÃO pode ser declarado aqui como `.alvo { --cor-metrica: ... }`:
   isso reatribuía a variável dentro do wrapper e matava a cor herdada do
   bloco pai — era por isso que os gráficos saíam todos azuis mesmo com o
   bloco marcado como .cat-2/.cat-3/.cat-4. O fallback correto mora no
   `var(--cor-metrica, var(--dado))` de cada primitiva: sem ancestral
   colorido, cai no azul do tema; com ancestral, herda a cor dele. */
/* vector-effect: a espessura passa a ser em PIXELS DE TELA, não em unidades
   do viewBox — sem isso a linha engrossa junto com o gráfico e, num bloco
   largo, o traço fica pesado. Com ele, 1,5px é 1,5px em qualquer tamanho. */
.glin {
  stroke: var(--cor-metrica, var(--dado));
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.garea-defs stop:first-child { stop-color: var(--cor-metrica, var(--dado)); stop-opacity: .28; }
.garea-defs stop:last-child  { stop-color: var(--cor-metrica, var(--dado)); stop-opacity: 0; }
.gponto { cursor: pointer; }

/* sparkline: só a forma, sem eixo — mini-cards do modal */
.gspark {
  stroke: var(--cor-metrica, var(--dado));
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* vector-effect: o SVG é esticado (preserveAspectRatio="none") e sem isso a
   base sairia com espessura desigual em relação à curva */
.gspark-base { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* heatmap: um matiz só (a mesma regra do mapa de zonas), opacidade que já
   vem calculada por célula via fill-opacity inline */
.gcelula { fill: var(--cor-metrica, var(--dado)); cursor: pointer; transition: fill-opacity var(--t-rapido) var(--ease); }
.gcelula:hover { fill-opacity: 1 !important; }

/* pareto: linha acumulada some do resto pelo estilo pontilhado, não pela cor
   — mesma disciplina do resto do painel de não depender só de matiz */
/* mesma disciplina da .glin: espessura em pixel de tela, não do viewBox */
.glinAcum {
  stroke: var(--eyebrow);
  stroke-width: 1.5;
  fill: none;
  vector-effect: non-scaling-stroke;
}
.gguia80 {
  stroke: var(--text-mute);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}
.glinha { vector-effect: non-scaling-stroke; }

.dica {
  position: absolute;
  z-index: var(--z-tooltip);
  pointer-events: none;
  background: var(--petroleo-900);
  color: #fff;
  border-radius: var(--r-sm);
  padding: 7px 10px;
  font-size: 11.5px;
  line-height: 1.45;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(3, 32, 45, .28);
  opacity: 0;
  transition: opacity var(--t-rapido) var(--ease);
}

.dica.on { opacity: 1; }
.dica b { color: var(--turquesa); }

/* ------------------------------ tabela ---------------------------------- */

.rolo { overflow-x: auto; }

table.tab {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

table.tab th, table.tab td {
  padding: 8px 10px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}

table.tab th:first-child, table.tab td:first-child { text-align: left; }

table.tab thead th {
  color: var(--text-mute);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: var(--z-base);
}

table.tab thead th:hover { color: var(--text); }

table.tab tbody tr { cursor: pointer; transition: background var(--t-rapido) var(--ease); }
table.tab tbody tr:hover { background: var(--surface-2); }
table.tab tbody tr.foco { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--ciano); }

table.tab tfoot td {
  font-weight: 700;
  border-top: 2px solid var(--line);
  border-bottom: 0;
}

.pl { display: inline-flex; align-items: center; gap: 5px; }
.pl img { width: 13px; height: 13px; }

/* --------------------- estados: carregando / vazio / erro --------------- */

/* esqueleto no formato final da peça, não um rodinha genérica */
.esq {
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%);
  background-size: 300% 100%;
  animation: brilho 1.3s ease-in-out infinite;
}

@keyframes brilho {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Pista visual de progresso do botão Sincronizar — sem ela, o texto fica
   parado por até 1-2 minutos (a varredura da conta inteira é mais lenta que
   os 4 conjuntos fixos de antes) e parece que travou. Pedido do Antonio,
   2026-08-05. */
@keyframes girar {
  to { transform: rotate(360deg); }
}
.btn-luz .girando {
  display: inline-block;
  animation: girar 0.9s linear infinite;
  margin-right: 6px;
  vertical-align: -3px;
}

/* ================== aba "Quem pode entrar" + quem está logado =============
   Tela de configuração, lida linha a linha. Por isso o título usa caixa baixa
   em vez do .secao (11px, caixa alta, tracking .07em): aquele padrão é bom para
   rotular um gráfico e vira ruído numa lista de decisões.
   ======================================================================== */

.usuario { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-soft); }
.usuario-ini {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--grad-luz);
  color: var(--ink-on-grad);
  font-size: 10.5px;
  font-weight: 700;
}
.usuario-nome { font-weight: 500; }
@media (max-width: 1100px) { .usuario-nome { display: none; } }

.ac-tit { margin: 0 0 4px; font-size: 14.5px; font-weight: 700; letter-spacing: -.015em; }
.ac-nota { margin: 0 0 16px; max-width: 62ch; font-size: 12.5px; line-height: 1.55; color: var(--text-soft); }

.ac-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ac-add-campo {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1 1 220px;
  height: 34px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  transition: border-color var(--t-rapido) var(--ease), background var(--t-rapido) var(--ease);
}
.ac-add-campo:hover { border-color: var(--ardosia-300); }
.ac-add-campo:focus-within { border-color: var(--petroleo-700); background: var(--surface); }
:root[data-theme="dark"] .ac-add-campo:focus-within { border-color: var(--ciano); }
.ac-add-campo .arroba { color: var(--text-mute); font-size: 13px; font-weight: 600; }
.ac-add-campo input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: 0;
  font-family: var(--font); font-size: 13px; color: var(--text);
}
.ac-add-campo input::placeholder { color: var(--text-soft); opacity: 1; }

.ac-erro, .ac-ok { margin: 8px 0 0; font-size: 12px; line-height: 1.45; }
.ac-erro { color: var(--ruim); }
.ac-ok { color: var(--text-soft); }
.ac-erro:empty, .ac-ok:empty { display: none; }

.ac-lista { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--line); }
.ac-item { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.ac-item-nome { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
.ac-item-meta { margin-top: 2px; font-size: 11.5px; line-height: 1.45; color: var(--text-mute); }
.ac-item-dir { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.ac-chip {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-mute);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

.ac-remover {
  height: 30px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-mute);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--t-rapido) var(--ease), background var(--t-rapido) var(--ease),
              border-color var(--t-rapido) var(--ease), transform var(--t-rapido) var(--ease);
}
.ac-remover:hover {
  color: var(--ruim);
  background: color-mix(in oklab, var(--ruim) 10%, var(--surface));
  border-color: color-mix(in oklab, var(--ruim) 35%, transparent);
}
.ac-remover:active { transform: scale(.96); }
.ac-remover[disabled] {
  opacity: .45; cursor: not-allowed; transform: none;
  background: none; border-color: transparent; color: var(--text-mute);
}
/* segundo clique: o botão já assumiu a cor do risco */
.ac-remover.ac-sim {
  color: var(--ruim);
  background: color-mix(in oklab, var(--ruim) 12%, var(--surface));
  border-color: color-mix(in oklab, var(--ruim) 45%, transparent);
}

@media (max-width: 1100px) {
  .ac-item { flex-wrap: wrap; }
  .ac-item-dir { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ac-remover:active { transform: none; }
}

.vazio {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-mute);
}

.vazio strong {
  display: block;
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 5px;
}

.erro {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--coral);
  border-radius: var(--r);
  background: color-mix(in oklab, var(--coral) 9%, var(--surface));
  font-size: 12.5px;
  color: var(--text);
}

.erro strong { display: block; margin-bottom: 2px; }
.erro code { font-size: 11.5px; color: var(--text-soft); word-break: break-word; }

.aviso {
  padding: 11px 13px;
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-mute);
  font-size: 12px;
}

/* selo de "aguardando fonte" — usado na aba Comercial */
.selo-v2 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-mute);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .03em;
}

.futuro { opacity: .55; }
.futuro .kpi dd, .futuro .vk dd { color: var(--text-mute); }

/* ------------------------------- mapa ---------------------------------- */

#mapa {
  height: 340px;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface-2);
}

.mapa-legenda {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--text-mute);
}

.mapa-legenda i {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: -1px;
}

.maplibregl-popup-content {
  font-family: var(--font) !important;
  font-size: 12px !important;
  border-radius: var(--r-sm) !important;
  padding: 9px 12px !important;
}

/* ------------------------------- metas --------------------------------- */

.form-metas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.campo-meta { display: flex; flex-direction: column; gap: 5px; }

.campo-meta label { font-size: 12px; font-weight: 500; color: var(--text-soft); }

.campo-meta small { font-size: 11px; color: var(--text-mute); }

.campo-meta .entrada {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  transition: border-color var(--t-rapido) var(--ease);
}

.campo-meta .entrada:focus-within { border-color: var(--ciano); }
.campo-meta .entrada span { color: var(--text-mute); font-size: 12px; }

.campo-meta input {
  border: 0;
  background: transparent;
  outline: 0;
  width: 100%;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
}

.derivadas { display: grid; gap: 8px; }

.derivada {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.derivada:last-child { border-bottom: 0; }
.derivada .conta { font-size: 11px; color: var(--text-mute); }
.derivada .res { font-size: 17px; font-weight: 700; letter-spacing: -.015em; }

/* ----------------------------- responsivo ------------------------------ */

@media (max-width: 1100px) {
  .app { grid-template-columns: 62px 1fr; }
  .marca { justify-content: center; padding: 6px 0 16px; }
  .marca span { display: none; }
  .aba { justify-content: center; padding: 0; }
  .aba span, .aba-selo { display: none; }
  .lateral-pe { display: none; }
}

@media (max-width: 720px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: auto; min-height: 100dvh; }
  .lateral { flex-direction: row; overflow-x: auto; padding: 8px; }
  .marca { padding: 0 8px 0 4px; }
  .aba[aria-current="page"]::before { left: 8px; right: 8px; top: auto; bottom: -8px; width: auto; height: 3px; border-radius: 3px 3px 0 0; }
  .corpo, .topo { padding-left: 14px; padding-right: 14px; }
  .filtros { margin-left: 0; }
}

/* ------------------------- movimento reduzido -------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .esq { background: var(--surface-2); }
}

/* ====================== aba Comercial: leads do CRM ====================== */
/* Tudo aqui usa as variáveis do tema — assim claro e escuro saem de graça,
   sem um segundo bloco de regras para manter. */

.filtros-leads {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.filtros-leads .campo.cresce { flex: 1 1 260px; }
.filtros-leads .campo input[type="search"] {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  outline: none;
}

/* ------- etiqueta de canal ------- */
.selo-canal {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: lowercase;
  border: 1px solid transparent;
}
.selo-canal.c-g  { background: color-mix(in oklab, var(--ciano) 16%, var(--surface));
                   border-color: color-mix(in oklab, var(--ciano) 40%, transparent); }
.selo-canal.c-m  { background: color-mix(in oklab, var(--verde-luz) 16%, var(--surface));
                   border-color: color-mix(in oklab, var(--verde-luz) 40%, transparent); }
.selo-canal.c-gm { background: var(--surface-2); border-color: var(--line); }

/* ------- etiqueta de sinal de origem -------
   Uma letra só, porque a coluna é estreita e a legenda fica no rodapé.
   A diferença entre elas é o ponto central da aba: R é clique comprovado,
   T é o vendedor afirmando, C é o campo Origem da ficha. */
.selo-sinal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px; height: 17px;
  margin-right: 2px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 800;
  cursor: help;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-mute);
}
.selo-sinal.s-rastreio { background: color-mix(in oklab, var(--bom) 20%, var(--surface));
                         border-color: color-mix(in oklab, var(--bom) 45%, transparent);
                         color: var(--text); }
.selo-sinal.s-tag      { background: color-mix(in oklab, var(--ciano) 16%, var(--surface));
                         border-color: color-mix(in oklab, var(--ciano) 38%, transparent);
                         color: var(--text); }

/* ------- etiqueta de resultado ------- */
[class^="selo-"].selo-ok, .selo-ruim, .selo-neutro, .selo-vazio {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  border: 1px solid var(--line);
}
.selo-ok     { background: color-mix(in oklab, var(--bom) 18%, var(--surface));
               border-color: color-mix(in oklab, var(--bom) 45%, transparent); }
.selo-ruim   { background: color-mix(in oklab, var(--ruim) 15%, var(--surface));
               border-color: color-mix(in oklab, var(--ruim) 40%, transparent); }
.selo-neutro { background: color-mix(in oklab, var(--ciano) 13%, var(--surface));
               border-color: color-mix(in oklab, var(--ciano) 32%, transparent); }
.selo-vazio  { background: var(--surface-2); color: var(--text-mute); }

/* ------- tabela de leads ------- */
.rolagem {
  overflow: auto;
  max-height: 62vh;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
}
table.tab-leads td { text-align: left; white-space: normal; vertical-align: top; }
table.tab-leads th { text-align: left; }
table.tab-leads tbody tr { cursor: default; }

.lead-nome { font-weight: 600; font-size: 12.5px; line-height: 1.3; }
.lead-sub  { font-size: 11px; color: var(--text-mute); line-height: 1.35; margin-top: 1px; }
.fraco     { color: var(--text-mute); }

/* ============================ modal de cartão ============================
   Detalhe de um dos 5 cards fechados: carrossel de sub-indicadores + o
   gráfico principal (linha suavizada) + um bloco extra por card (ex.:
   clusters A-E em Vendas/Oportunidades). */

.modal-fundo {
  position: fixed;
  inset: 0;
  background: rgba(3, 32, 45, .55);
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}

/* Três faixas fixas: cabeça, corpo rolante, pé. Só o corpo rola — título e
   ações ficam sempre alcançáveis, mesmo com muita etapa na distribuição. */
.modal {
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  width: min(940px, 100%);
  max-height: calc(100vh - 56px);
  overflow: hidden;
  box-shadow: 0 28px 70px rgba(3, 32, 45, .42);
}

/* ---- cabeça ---- */

.modal-cabeca {
  flex: none;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.modal-marca {
  flex: none;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: color-mix(in oklab, var(--dado) 15%, var(--surface));
  color: var(--dado);
}
.modal-marca svg { width: 19px; height: 19px; }

.modal-cabeca-texto { flex: 1; min-width: 0; }
.modal-titulo { margin: 0; font-size: 16.5px; font-weight: 700; letter-spacing: -.015em; }
.modal-sub { margin: 2px 0 0; font-size: 12px; color: var(--text-mute); }

.modal-fechar {
  flex: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-mute);
  cursor: pointer;
}
.modal-fechar:hover { background: var(--surface-2); color: var(--text); }

/* ---- corpo ---- */

.modal-corpo { flex: 1; overflow-y: auto; padding: 20px 22px 22px; }

.modal-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.modal-barra:not(:empty) { margin-bottom: 18px; }
.modal-barra-nota { margin: 0; font-size: 11.5px; color: var(--text-mute); }

/* Indicadores em linha, TODOS visíveis: um carrossel esconderia número atrás
   de rolagem, e aqui cada número é o assunto da tela, não um detalhe. */
.modal-indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.mini-card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  padding: 13px 14px 12px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  min-width: 0;
  transition: border-color var(--t-rapido) var(--ease);
}
.mini-card:hover { border-color: color-mix(in oklab, var(--dado) 45%, var(--line)); }
.mini-card.ativo { border-color: var(--dado); box-shadow: inset 0 0 0 1px var(--dado); }

.mini-card .rotulo {
  margin: 0 0 7px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-card .valor {
  margin: 0 0 9px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
}
.mini-card svg { display: block; width: 100%; height: 20px; }

/* ---- painéis ---- */

/* UM painel por linha. O modal é estreito (940px, menos que a página): duas
   colunas aqui espremiam gráfico e lista a ponto de nenhum dos dois ser
   legível. Empilhado, cada bloco tem a largura inteira. */
.modal-paineis {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

/* Conversão, Custos e ROE não têm recorte: sem coluna vizinha, o gráfico
   toma a largura toda em vez de deixar metade da faixa vazia. */
/* O gráfico tem proporção fixa (viewBox 420x176): solto na largura inteira
   do modal ele viraria um bloco de ~380px de altura. Teto de largura
   centralizado mantém a leitura igual em todos os cards. */
.modal-grafico { max-width: 620px; margin: 0 auto; width: 100%; }
/* o mapa é a exceção: teto de 620px o espremeria justamente no modo em que
   o pedido é vê-lo GRANDE */
.modal-grafico:has(> .mapa-modal) { max-width: none; }

.modal-painel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 18px 14px;
  min-width: 0;
}

/* O gráfico é o assunto e fica à esquerda, mais largo que os recortes — mas
   NÃO ocupa a linha inteira: sozinho numa faixa de ~870px ele ficaria alto
   demais (a proporção do viewBox é fixa) e empurraria os recortes para fora
   da primeira tela. Lado a lado, gráfico e recortes são lidos juntos.

   Sem grid-row fixo: o gráfico é mais baixo que a lista de etapas, e forçá-lo
   a ocupar duas linhas abriria um vão morto embaixo dele. Cada coluna se
   empilha na altura do próprio conteúdo. */
/* uma coluna: todos os painéis ocupam a faixa inteira, na ordem em que vêm */
.modal-painel-larga,
.modal-extra > * { grid-column: 1; }

.modal-painel-tit {
  margin: 0 0 12px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.005em;
}

/* O viewBox de 420x176 escala junto com a largura: solto num painel de
   ~870px o gráfico passaria de 360px de altura e empurraria os recortes
   para fora da tela. Segurar a LARGURA mantém a proporção original — o
   texto dos eixos vive dentro do viewBox e esticar o SVG o deformaria. */
.modal-grafico svg { display: block; width: 100%; height: auto; }

/* #modalExtra é só um passe-adiante: os painéis que ele monta é que são as
   células da grade, não ele. */
.modal-extra { display: contents; }

.modal-painel-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.modal-painel-cabeca .modal-painel-tit { margin: 0; }

/* taxa de passagem entre duas etapas do funil de conversão: alinhada com a
   coluna da barra, para ler como "o que sobrou entre uma e outra" */
.modal-painel .funil-taxa {
  display: grid;
  grid-template-columns: minmax(88px, 42%) 1fr;
  gap: 12px;
  font-size: 10.5px;
  color: var(--text-mute);
  padding: 1px 0 2px;
}
.modal-painel .funil-taxa span { grid-column: 2; }

.modal-painel .etapa { grid-template-columns: minmax(88px, 42%) 1fr auto; padding: 5px 0; }
.modal-painel .etapa .nome { font-size: 12px; }
.modal-painel .etapa .barra { height: 20px; }
.modal-painel .etapa .valor { font-size: 13px; }

/* O gradiente da marca marca o FIM do funil de métricas, onde ele significa
   "chegou". Numa lista ordenada por tamanho (clusters, etapas) a última
   linha é só a menor — destacá-la inverteria a leitura. */
.modal-painel .etapa:last-of-type .barra { background: var(--dado); }

/* ---- pé ---- */

.modal-pe {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 22px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.modal-pe-nota { margin: 0; font-size: 11.5px; color: var(--text-mute); }

/* seletor de ambiente (topo) e toggle Qtd/R$ (nos painéis): mesmo
   componente, dois usos — um refaz a busca, o outro só troca a leitura. */
.modal-abas {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

.modal-aba {
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-mute);
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  padding: 5px 11px;
  cursor: pointer;
}
.modal-aba:hover { color: var(--text); }
.modal-aba.ativo { background: var(--surface); color: var(--text); font-weight: 600; }
.modal-painel .modal-abas { background: var(--surface-2); }
.modal-painel .modal-aba.ativo { background: var(--surface); }

.vazio-nota { margin: 0; font-size: 12px; color: var(--text-mute); }

@media (max-width: 900px) {
  .modal-paineis { grid-template-columns: minmax(0, 1fr); }
  /* Sem limpar as colunas fixas, os painéis continuariam apontando para a
     coluna 2 (que não existe mais) e se empilhariam na mesma linha. */
  .modal-painel-larga, .modal-extra > * { grid-column: 1 !important; }
  .modal-paineis.so-grafico .modal-grafico { max-width: none; }
}

@media (max-width: 760px) {
  .modal-fundo { padding: 0; align-items: flex-end; }
  .modal {
    width: 100%;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    max-height: 92vh;
  }
  .modal-cabeca, .modal-corpo, .modal-pe { padding-left: 16px; padding-right: 16px; }
  /* dois por linha em vez de espremer quatro numa faixa de 380px */
  .modal-indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal-pe { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  .modal-pe .btn { width: 100%; justify-content: center; }
  .modal-pe-nota { text-align: center; }
}

.lead-links { display: flex; flex-direction: column; gap: 2px; }
.lead-links a {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--dado-2);
  text-decoration: none;
  white-space: nowrap;
}
.lead-links a:hover { text-decoration: underline; }

/* ------- tabelinhas dos cartões ------- */
.cartao-tit { margin: 0 0 10px; font-size: 13px; font-weight: 600; }
table.tab-mini { font-size: 12px; }
table.tab-mini th, table.tab-mini td { padding: 6px 8px; }
table.tab-mini tbody tr { cursor: default; }
.nota-mini { margin: 10px 0 0; font-size: 11px; color: var(--text-mute); line-height: 1.45; }
.vazio-mini { padding: 14px 0; font-size: 12px; color: var(--text-mute); text-align: center; }

.motivos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.motivo {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: 12px;
}
.motivo b { font-variant-numeric: tabular-nums; }

.vk dd small { font-size: 12px; font-weight: 500; color: var(--text-mute); margin-left: 4px; }

.aviso-fonte { line-height: 1.6; }
.aviso-fonte code {
  font-size: 11px;
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
}