/* =========================================================
   Painel do cliente — Gerando Movimento
   Mesma identidade do site: vidro sobre fundo claro, com os
   brilhos da marca por tras. Tema claro por decisao de projeto.
   ========================================================= */
:root{
  --ink:#0E101D;
  --ink-2:#3A4050;
  --ink-3:#666E82;
  --ink-4:#8A91A3;

  --laranja:#FF914D;
  --amarelo:#FFDE59;
  --verde:#7ED957;
  --verde-forte:#3E8E24;
  --laranja-forte:#C25A14;
  --vermelho:#C62B45;

  --glass:linear-gradient(158deg,rgba(255,255,255,.94),rgba(255,255,255,.82));
  --glass-strong:linear-gradient(158deg,rgba(255,255,255,.98),rgba(255,255,255,.92));
  --glass-edge:rgba(14,16,29,.055);
  --glass-shadow:0 10px 42px rgba(14,16,29,.065);
  --glass-inset:inset 0 1px 0 rgba(255,255,255,.9);
  --hairline:rgba(14,16,29,.10);

  --display:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  --r:26px;
  --r-sm:16px;
}

*{box-sizing:border-box}

/* O atributo hidden vem do navegador com display:none de baixa força, e
   qualquer regra nossa com display o atropela — .barra-linha é grid,
   as linhas da tabela empilhada são block. Sem este !important, esconder
   um item por JavaScript simplesmente não acontecia. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:1.55;letter-spacing:-.008em;
  -webkit-font-smoothing:antialiased;
  background-color:#FCFCFD;
  background-image:
    radial-gradient(46vw 62vh at -6% 2%,   rgba(255,145,77,.20), transparent 66%),
    radial-gradient(42vw 56vh at 104% 14%, rgba(126,217,87,.16), transparent 66%),
    radial-gradient(38vw 48vh at -4% 72%,  rgba(255,222,89,.13), transparent 66%),
    radial-gradient(40vw 52vh at 103% 82%, rgba(255,145,77,.12), transparent 66%);
  background-attachment:fixed;background-repeat:no-repeat;
}
img{max-width:100%;display:block}
a{color:var(--ink)}
.container{max-width:1180px;margin:0 auto;padding:0 22px}

.glass{
  background:var(--glass);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  backdrop-filter:blur(30px) saturate(180%);
  border:1px solid var(--glass-edge);
  box-shadow:var(--glass-shadow),var(--glass-inset);
  border-radius:var(--r);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:rgba(255,255,255,.9)}
}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:120;padding:14px 22px 0}
.nav::before{content:"";position:absolute;top:0;left:0;right:0;height:14px;
  pointer-events:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.nav-in{
  max-width:1180px;margin:0 auto;min-height:58px;padding:0 10px 0 16px;
  display:flex;align-items:center;gap:20px;border-radius:999px;
  background:var(--glass-strong);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  backdrop-filter:blur(26px) saturate(180%);
  border:1px solid var(--glass-edge);
  box-shadow:0 8px 26px rgba(14,16,29,.10),var(--glass-inset);
}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none;color:var(--ink)}
.brand img{height:26px;width:auto}
.brand span{font-family:var(--display);font-weight:600;font-size:16px;
  letter-spacing:-.022em;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:18px;margin-left:auto}
.nav-links a{color:var(--ink-2);text-decoration:none;font-size:14px;font-weight:500;white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
.nav-quem{font-size:14px;color:var(--ink-4);white-space:nowrap}
.nav-cta{
  background:var(--ink);color:#fff!important;padding:9px 18px;border-radius:999px;
  font-weight:600!important;box-shadow:0 4px 14px rgba(14,16,29,.22);
  transition:transform .16s,box-shadow .2s;
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 7px 20px rgba(14,16,29,.28)}
@media (max-width:640px){.nav-quem{display:none}.brand span{display:none}}


/* ---------- abas do painel ---------- */
/* Ficam no centro da pilula: e o primeiro lugar onde o olho procura
   "onde mais eu posso ir". */
/* A tira de abas monta para baixo — nunca corta, nunca sobrepõe.

   O que quebrava: .nav-abas tinha min-width:0 e as abas dentro dela vêm
   com white-space:nowrap. Faltando espaço, a caixa encolhia abaixo do
   conteúdo e as abas passavam a imprimir POR CIMA do seletor de empresa,
   em vez de empurrar. Com quatro abas cabia; a quinta — "Instagram e
   Facebook" — estourou. Medido em 04/09/2026: inteiro em 1100px,
   sobreposto em 1000px, cortado em 390px.

   Agora a barra quebra linha, como o cliente prefere: rolagem lateral,
   nunca. */
.nav-abas{display:flex;align-items:center;gap:4px;margin-left:6px;min-width:0;flex-wrap:wrap;row-gap:6px}
.nav-in{flex-wrap:wrap;row-gap:8px}

/* Abaixo de 1100 as abas ganham a linha inteira, sob a marca e os
   atalhos. É a mesma ideia que já valia no celular, só que começando
   antes — 1000px é largura de notebook, e é lá que quebrava. */
@media (max-width:1100px){
  .nav-abas{order:3;flex:1 1 100%;margin-left:0}
}
.nav-aba{
  display:inline-flex;align-items:center;padding:8px 14px;border-radius:999px;
  font-size:14px;font-weight:500;color:var(--ink-3);text-decoration:none;
  white-space:nowrap;transition:background .16s,color .16s;
}
.nav-aba:hover{background:rgba(14,16,29,.05);color:var(--ink)}
.nav-aba.on{background:rgba(14,16,29,.07);color:var(--ink);font-weight:600}

/* ---------- trocador de empresa ---------- */
.trocador{position:relative}
.trocador summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:999px;font-size:14px;font-weight:500;
  color:var(--ink-2);background:rgba(14,16,29,.045);max-width:210px;
  transition:background .16s;
}
.trocador summary::-webkit-details-marker{display:none}
.trocador summary:hover{background:rgba(14,16,29,.09);color:var(--ink)}
.trocador[open] summary{background:var(--ink);color:#fff}
.trocador-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trocador-lista{
  position:absolute;right:0;top:calc(100% + 9px);z-index:130;
  min-width:250px;max-width:min(330px,calc(100vw - 32px));padding:8px;
  border-radius:20px;max-height:60vh;overflow:auto;
}
.trocador-titulo{
  font-family:var(--display);font-size:.68rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-4);padding:8px 12px 6px;
}
.trocador-item{
  display:block;padding:10px 12px;border-radius:12px;text-decoration:none;
  font-size:.93rem;color:var(--ink-2);transition:background .14s;
}
.trocador-item:hover{background:rgba(14,16,29,.055);color:var(--ink)}
.trocador-item.on{background:rgba(255,145,77,.14);color:var(--ink);font-weight:600}
@media (max-width:860px){
  .nav-abas{order:3;width:100%;margin:0 0 10px;overflow-x:auto;
    padding-bottom:2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav-abas::-webkit-scrollbar{display:none}
  .nav-in{flex-wrap:wrap;padding:10px 10px 0 14px;border-radius:26px}
  .nav-links{margin-left:auto;order:2}
  .trocador summary{max-width:150px}
}

/* ---------- tipografia ---------- */
h1,h2,h3{margin:0;font-family:var(--display);font-weight:700;
  letter-spacing:-.034em;line-height:1.1;text-wrap:balance}
h1{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:800;letter-spacing:-.042em}
h2{font-size:clamp(1.25rem,2.2vw,1.6rem);letter-spacing:-.03em}
h3{font-size:1.02rem;letter-spacing:-.022em}
p{margin:0}
.kicker{font-family:var(--display);font-size:.72rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-4);margin-bottom:9px}
.sub{color:var(--ink-3);font-size:.95rem;margin-top:8px}

/* ---------- topo da pagina ---------- */
.topo{padding:34px 0 6px}
.topo-linha{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}

/* ---------- filtro de periodo ---------- */
.filtro{margin:22px 0 26px;padding:16px 18px;display:flex;flex-direction:column;gap:14px}

/* Atalhos em cima, quebrando à vontade; datas embaixo, centralizadas.
   Já foram lado a lado: com margin-left:auto as datas desciam sozinhas
   para o canto direito e sobrava uma faixa vazia no meio; espremidas na
   mesma linha, "Este ano" e "Tudo" ficavam cortados. Quebrar é o que
   cabe em qualquer largura sem esconder atalho. */
.filtro-linha{display:flex;flex-direction:column;gap:13px}
/* Centralizados: quebrando em duas ou três linhas no celular, alinhados
   pelo meio ficam equilibrados — encostados à esquerda, a última linha
   sobra torta. */
.filtro-atalhos{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pill{
  display:inline-flex;align-items:center;padding:8px 15px;border-radius:999px;
  font-size:.86rem;font-weight:500;text-decoration:none;color:var(--ink-2);
  background:rgba(255,255,255,.66);border:1px solid rgba(14,16,29,.08);
  box-shadow:inset 0 1px 2px rgba(14,16,29,.03);
  transition:background .16s,color .16s,border-color .16s;white-space:nowrap;
}
.pill:hover{background:rgba(255,255,255,.95);color:var(--ink)}
.pill.on{background:var(--ink);color:#fff;border-color:var(--ink);
  box-shadow:0 4px 12px rgba(14,16,29,.2)}
.filtro-datas{display:flex;align-items:center;justify-content:center;
  gap:8px;flex-wrap:wrap}
.filtro-datas label{font-size:.82rem;color:var(--ink-3)}
input[type=date],input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  font-family:var(--body);font-size:15px;color:var(--ink);
  background:rgba(255,255,255,.72);border:1px solid rgba(14,16,29,.13);
  border-radius:12px;padding:9px 12px;-webkit-appearance:none;appearance:none;
  box-shadow:inset 0 1px 2px rgba(14,16,29,.04);
  transition:border-color .18s,background .18s,box-shadow .18s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--ink);background:rgba(255,255,255,.96);
  box-shadow:0 0 0 3px rgba(14,16,29,.10);
}
select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23666E82' stroke-width='1.7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:11px;padding-right:36px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--ink);color:#fff;text-decoration:none;border:none;cursor:pointer;
  padding:11px 22px;border-radius:999px;font-size:15px;font-weight:600;
  font-family:var(--body);letter-spacing:-.012em;
  box-shadow:0 6px 18px rgba(14,16,29,.22);transition:transform .16s,box-shadow .2s;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(14,16,29,.28)}
.btn.pequeno{padding:8px 16px;font-size:14px}
.btn.claro{background:rgba(255,255,255,.9);color:var(--ink);
  border:1px solid var(--glass-edge);box-shadow:0 4px 14px rgba(14,16,29,.08)}
.btn.perigo{background:var(--vermelho);box-shadow:0 6px 18px rgba(198,43,69,.28)}

/* ---------- cartoes de numero ---------- */
.kpis{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));margin-bottom:20px}
.kpi{padding:20px 22px 18px;display:flex;flex-direction:column;gap:3px;min-width:0}
.kpi .rotulo{font-size:.82rem;color:var(--ink-3);font-weight:500;display:flex;
  align-items:center;gap:6px}
.kpi .valor{
  font-family:var(--display);font-size:clamp(1.42rem,2.3vw,1.92rem);
  font-weight:800;letter-spacing:-.042em;line-height:1.1;margin-top:5px;
  overflow-wrap:anywhere;font-variant-numeric:tabular-nums;
  /* valor financeiro sai por inteiro, com centavos: precisa caber
     "R$ 61.954,41" sem estourar o cartão */
  text-wrap:nowrap;
}
@media (max-width:400px){.kpi .valor{font-size:1.34rem}}
.kpi .apoio{font-size:.82rem;color:var(--ink-4);margin-top:4px;line-height:1.4}
/* De onde veio o número, quando há mais de uma conta. Fica abaixo do
   apoio, menor e mais claro: quem quer só o total não tropeça nela. */
.kpi .reparte{
  display:flex;flex-direction:column;gap:3px;
  font-size:.74rem;color:var(--ink-4);margin-top:9px;
  padding-top:8px;border-top:1px dashed rgba(14,16,29,.10);
  font-variant-numeric:tabular-nums;
}
/* Plataforma, nome, valor — nesta ordem e sempre nas mesmas colunas. O
   valor encostado à direita é o que deixa comparar as contas de relance. */
.reparte-linha{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:6px;line-height:1.5;
}
.reparte-onde{
  font-size:.6rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 6px;border-radius:6px;white-space:nowrap;
  background:rgba(0,129,255,.12);color:#0064C8;
}
.reparte-onde.google{background:rgba(234,67,53,.12);color:#B4271C}
/* Nome comprido encolhe; o valor nunca. */
.reparte-conta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpi .reparte b{font-weight:650;color:var(--ink-3);white-space:nowrap}

.kpi.destaque{background:linear-gradient(158deg,rgba(255,255,255,.98),rgba(255,241,232,.92));
  border-color:rgba(255,145,77,.28)}

/* ---------- a fileira de cartoes de um grupo de campanhas ----------

   Colunas CONTADAS, e nao auto-fit: cada grupo tem uma quantidade
   diferente de numeros, e com auto-fit os dois cartoes do reconhecimento
   esticavam ate o dobro da largura dos tres da captacao logo acima.
   Contando as colunas, o cartao do grupo de cima tem a mesma largura do
   cartao do grupo de baixo.

   Uma, duas ou quatro — nunca tres. Sao dez cartoes por grupo, e dez
   dividido por tres deixa UM sozinho na ultima fileira, que e defeito
   conhecido daqui. Em quatro colunas os dez fecham 4+4+2; nas outras
   contas quem cuida do sozinho e o cartoes_do_objetivo, e o que escapar
   dele cai na rede de seguranca logo abaixo.

   Aqui a media query vale: esta grade e filha direta do bloco, que ocupa
   a largura do container. A armadilha do componente espremido dentro de
   uma celula de outra grade nao se aplica. */
.kpis-grupo{grid-template-columns:1fr;gap:14px}
@media (min-width:560px){.kpis-grupo{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.kpis-grupo{grid-template-columns:repeat(4,1fr)}}
/* Rede de seguranca: cartao sozinho na ultima fileira ocupa dois lugares
   em vez de ficar espremido num canto. Em duas colunas isso e todo numero
   impar; em quatro, so o que deixa resto 1 — e a faixa de duas colunas
   precisa de max-width, senao a regra dela vaza para a de quatro e
   engorda o ultimo cartao de uma fileira que estava certa. */
@media (min-width:560px) and (max-width:999px){
  .kpis-grupo>.kpi:last-child:nth-child(odd){grid-column:span 2}}
@media (min-width:1000px){.kpis-grupo>.kpi:last-child:nth-child(4n+1){grid-column:span 2}}

.chip{
  display:inline-flex;align-items:center;gap:4px;align-self:flex-start;
  margin-top:9px;padding:4px 10px;border-radius:999px;
  font-size:.76rem;font-weight:600;letter-spacing:-.01em;
  background:rgba(14,16,29,.055);color:var(--ink-3);
}
.chip.bom{background:#E3F6DA;color:var(--verde-forte)}
.chip.ruim{background:#FDE7EB;color:var(--vermelho)}
.chip.neutro{background:rgba(14,16,29,.055);color:var(--ink-3)}

/* O "?" — 15px de bolinha, 44px de alvo.

   Medido em 375px: a bolinha tinha 15×15 e a explicacao vivia so no
   atributo title, que no celular NAO ABRE. Ou seja: no aparelho em que a
   maior parte da gente acessa, a explicacao de "Pessoas alcancadas"
   simplesmente nao existia. Agora o toque abre o texto (ver ajuda.js) e
   o ::after estica a area clicavel sem mexer no desenho. */
.ajuda{
  position:relative;width:16px;height:16px;flex:none;border-radius:50%;border:none;padding:0;
  cursor:pointer;background:rgba(14,16,29,.10);color:var(--ink-3);
  font-size:10px;font-weight:700;line-height:16px;text-align:center;font-family:var(--body);
}
.ajuda::after{content:"";position:absolute;inset:-14px;border-radius:50%}
.ajuda:hover,.ajuda[aria-expanded="true"]{background:var(--ink);color:#fff}
.ajuda:focus-visible{outline:2px solid var(--verde-forte);outline-offset:2px}

/* O texto que o toque abre. Ancorado no cartao, largura limitada para
   nao virar uma parede de texto no celular. */
.ajuda-balao{
  position:absolute;z-index:40;max-width:min(280px,calc(100vw - 32px));
  background:var(--ink);color:#fff;border-radius:12px;padding:11px 13px;
  font-size:12.5px;line-height:1.5;font-weight:400;
  box-shadow:0 10px 30px rgba(14,16,29,.28);
}
.ajuda:hover{background:var(--ink);color:#fff}

/* ---------- blocos ---------- */
.bloco{padding:26px 26px 28px;margin-bottom:20px}
.bloco > h2{margin-bottom:4px}
.bloco-cabeca{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:8px;margin-bottom:18px}
.duas{display:grid;gap:20px;grid-template-columns:1.55fr 1fr;align-items:start}
@media (max-width:900px){.duas{grid-template-columns:1fr}}

/* ---------- graficos ---------- */
.grafico{width:100%;overflow:visible}
.grafico text{font-family:var(--body);fill:var(--ink-4);font-size:11px}
.grafico .eixo{stroke:var(--hairline);stroke-width:1}
.grafico .grade{stroke:rgba(14,16,29,.06);stroke-width:1}
/* Regra de folha de estilo ganha de atributo de apresentação: o fill e o
   font-size que graficos.js escrevia no <text> não pintavam nada, porque
   a regra acima já tinha dito cinza e 11px. Eram dois números errados na
   tela — o eixo da direita saía cinza igual ao da esquerda, sem dizer
   qual escala é o dinheiro, e o total no meio da rosca ficava do mesmo
   tamanho da palavra "investidos" embaixo dele. Quem pinta os dois é
   daqui, não de lá. */
.grafico text.eixo-b{fill:var(--verde-forte)}
.grafico text.rosca-total{fill:var(--ink);font-size:15px;font-weight:700}
.legenda{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px;font-size:.83rem;color:var(--ink-3)}
.legenda span{display:inline-flex;align-items:center;gap:7px}
.legenda i{width:11px;height:11px;border-radius:4px;display:block;flex:none}
.dica{
  position:fixed;z-index:200;pointer-events:none;opacity:0;transition:opacity .12s;
  background:var(--ink);color:#fff;border-radius:12px;padding:9px 12px;
  font-size:.78rem;line-height:1.45;box-shadow:0 10px 30px rgba(14,16,29,.28);
  max-width:230px;
}
.dica.on{opacity:1}
.dica b{font-weight:600}
.dica .l{color:rgba(255,255,255,.66)}

/* ---------- barras horizontais ---------- */
.barras{display:flex;flex-direction:column;gap:14px;margin-top:4px}
.barra-linha{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:baseline}
.barra-nome{font-size:.9rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barra-val{font-size:.86rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.barra-trilho{grid-column:1/-1;display:block;height:9px;border-radius:999px;
  background:rgba(14,16,29,.06);overflow:hidden}
/* span e inline por padrao, e altura nao se aplica a inline: sem o display
   block a barra fica vazia. */
.barra-preenche{display:block;height:100%;min-width:3px;border-radius:999px;
  background:linear-gradient(90deg,var(--laranja),var(--amarelo))}
.barra-preenche.verde{background:linear-gradient(90deg,var(--verde),#B6E88F)}

/* ---------- tabela ---------- */
.rolagem{overflow-x:auto;margin:0 -4px;padding:0 4px}
table.dados{width:100%;border-collapse:collapse;font-size:.9rem;min-width:640px}
table.dados th,table.dados td{padding:11px 12px;text-align:right;white-space:nowrap}
table.dados th:first-child,table.dados td:first-child{text-align:left;white-space:normal;min-width:190px}
table.dados thead th{
  font-family:var(--display);font-size:.74rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4);border-bottom:1px solid var(--hairline);
}
table.dados tbody tr{border-bottom:1px solid rgba(14,16,29,.055)}
table.dados tbody tr:last-child{border-bottom:none}
table.dados tbody tr:hover{background:rgba(255,255,255,.5)}
table.dados td{font-variant-numeric:tabular-nums;color:var(--ink-2)}
table.dados td:first-child{color:var(--ink);font-weight:500}
table.dados tfoot td{font-weight:700;border-top:1px solid var(--hairline);color:var(--ink)}
.tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.7rem;
  font-weight:600;letter-spacing:.02em;background:rgba(14,16,29,.06);color:var(--ink-3)}
.tag.meta{background:rgba(0,129,255,.12);color:#0064C8}
.tag.google{background:rgba(234,67,53,.12);color:#B4271C}

/* ---------- explicacao ---------- */
.explica{display:flex;flex-direction:column;gap:16px}
.explica-item{padding:18px 20px 19px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.9);
  border-left:3px solid var(--ink-4)}
.explica-item.bom{border-left-color:var(--verde-forte);background:rgba(227,246,218,.5)}
.explica-item.atencao{border-left-color:var(--laranja-forte);background:rgba(255,241,232,.62)}
.explica-item h3{margin-bottom:7px}
.explica-item p{color:var(--ink-2);font-size:.96rem;line-height:1.6}
.explica-item b{font-weight:600;color:var(--ink)}

.glossario{margin-top:22px;border-top:1px solid var(--hairline);padding-top:8px}
.glossario summary{cursor:pointer;list-style:none;padding:14px 0;font-weight:600;
  font-size:.95rem;display:flex;align-items:center;gap:9px}
.glossario summary::-webkit-details-marker{display:none}
.glossario summary::before{content:"+";width:20px;height:20px;flex:none;border-radius:50%;
  background:rgba(14,16,29,.07);color:var(--ink-3);font-size:13px;line-height:20px;
  text-align:center;font-weight:600}
.glossario[open] summary::before{content:"–"}
.glossario dl{margin:0 0 16px;display:grid;gap:12px}
.glossario dt{font-weight:600;font-size:.9rem}
.glossario dd{margin:2px 0 0;color:var(--ink-3);font-size:.9rem;line-height:1.55}

/* ---------- avisos ---------- */
.aviso{padding:16px 20px;border-radius:var(--r-sm);font-size:.93rem;line-height:1.55;
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95);
  border-left:3px solid var(--ink-4);margin-bottom:18px;color:var(--ink-2)}
.aviso.erro{border-left-color:var(--vermelho);background:rgba(253,231,235,.75);color:#8A1B2E}
.aviso.ok{border-left-color:var(--verde-forte);background:rgba(227,246,218,.6);color:#2C6B18}
.vazio{text-align:center;padding:52px 24px;color:var(--ink-3)}
.vazio h2{margin-bottom:10px;color:var(--ink)}

/* ---------- entrar ---------- */
body.entrar{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100vh;padding:26px 0;gap:8px}
body.entrar .rodape{padding:26px 0 0;margin:0}
.caixa-entrar{width:min(430px,calc(100vw - 36px));padding:38px 34px 32px;text-align:center}
.caixa-entrar .marca{width:124px;height:auto;margin:0 auto 20px}
.caixa-entrar h1{font-size:1.6rem;margin-bottom:6px}
.caixa-entrar .sub{margin-bottom:24px}
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:15px;text-align:left}
.campo label{font-size:.86rem;font-weight:500;color:var(--ink-2)}
.campo input{width:100%;padding:13px 14px;font-size:16px;border-radius:14px}
.caixa-entrar .btn{width:100%;margin-top:8px;padding:14px}
.fino{font-size:.8rem;color:var(--ink-4);line-height:1.5;margin-top:16px}

/* ---------- rodape ---------- */
.rodape{padding:44px 0 40px;margin-top:16px;text-align:center;color:var(--ink-3);font-size:.9rem}
.rodape p{margin-bottom:6px}
.rodape a{color:var(--ink-2)}
.rodape .fino{color:var(--ink-4)}

/* ---------- admin ---------- */
.admin-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
/* Dois campos lado a lado enquanto couberem. O auto-fit olha para a
   largura do cartão, não a da janela: dentro de uma coluna estreita do
   admin-grid eles empilham sozinhos, coisa que um @media na viewport não
   fazia — e por isso o rótulo quebrava e o campo virava um risco. */
.linha-form{display:grid;gap:0 16px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

/* Tabelas dentro dos cartões do admin: a regra geral reserva 640px de
   largura mínima e 190px na primeira coluna, o que estoura um cartão de
   400px e empurra o botão para fora da borda. */
.admin-grid table.dados{min-width:0;font-size:.84rem}
.admin-grid table.dados th,
.admin-grid table.dados td{padding:9px 6px}
.admin-grid table.dados th:first-child,
.admin-grid table.dados td:first-child{min-width:0;white-space:normal;overflow-wrap:anywhere}
.admin-grid .rolagem{overflow:visible}
.admin-grid table.dados form{margin:0}
.acoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem}

@media print{
  body{background:#fff}
  .nav,.filtro,.rodape,.btn{display:none!important}
  .glass{box-shadow:none;border:1px solid #ddd;background:#fff}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- lista de caixas de selecao ---------- */
.caixa-lista{
  display:flex;flex-direction:column;gap:2px;max-height:290px;overflow:auto;
  padding:10px 12px;border-radius:14px;
  background:rgba(255,255,255,.6);border:1px solid rgba(14,16,29,.1);
}
.caixa-lista label{
  display:flex;align-items:center;gap:9px;padding:7px 6px;border-radius:9px;
  font-size:.93rem;color:var(--ink-2);cursor:pointer;
}
.caixa-lista label:hover{background:rgba(14,16,29,.04);color:var(--ink)}
.campo label input[type=checkbox]{width:auto;margin-right:8px}
.campo > label:has(input[type=checkbox]){display:flex;align-items:center;font-weight:400}

/* =========================================================
   Catalogo de anuncios — prateleiras horizontais.
   O cliente reconhece a peca pela imagem antes de ler o nome,
   entao a imagem manda e o texto vem depois.
   ========================================================= */
.prateleira{margin:0 0 34px}
.prateleira-cabeca{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin:0 2px 14px;
}
.prateleira-cabeca h2{font-size:1.16rem;letter-spacing:-.026em}
.prateleira-conta{font-size:.85rem;color:var(--ink-4);white-space:nowrap}

/* Campanha com 36 anúncios não cabe numa linha, e rolagem lateral esconde
   peça — o cliente não sabe que existe o que ficou fora da tela. Então a
   fileira quebra para baixo e mostra tudo de uma vez. */
.fileira{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));
  gap:22px 16px;padding:4px 2px 12px;
}

.cartao-anuncio{
  text-decoration:none;color:inherit;
  transition:transform .18s cubic-bezier(.22,.61,.36,1);
}
.cartao-anuncio:hover{transform:translateY(-4px)}
.cartao-anuncio:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:20px}

.poster{
  position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;
  background:linear-gradient(155deg,#F1F3F7,#E4E8F0);
  border:1px solid var(--glass-edge);
  box-shadow:0 8px 24px rgba(14,16,29,.10);
  display:flex;align-items:center;justify-content:center;
}
.poster img{width:100%;height:100%;object-fit:cover;display:block}
.cartao-anuncio:hover .poster{box-shadow:0 14px 34px rgba(14,16,29,.18)}

/* Peca sem imagem: o texto vira o poster, com os tons da marca. */
.poster-texto{background:linear-gradient(155deg,rgba(255,145,77,.22),rgba(126,217,87,.20))}
.poster-frase{
  padding:22px 18px;font-family:var(--display);font-weight:700;font-size:1.02rem;
  line-height:1.24;letter-spacing:-.026em;color:var(--ink);text-align:center;
}

/* Anuncio de pesquisa do Google, com a cara que ele tem la. */
.busca-mock{
  width:100%;height:100%;background:#fff;padding:18px 15px;
  display:flex;flex-direction:column;gap:5px;justify-content:center;text-align:left;
}
.busca-selo{
  align-self:flex-start;font-size:.62rem;font-weight:700;letter-spacing:.04em;
  border:1px solid rgba(14,16,29,.22);border-radius:4px;padding:1px 5px;color:var(--ink-2);
}
.busca-url{font-size:.7rem;color:#3A7D2C;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.busca-titulo{
  font-size:.95rem;line-height:1.24;color:#1A4FBF;font-weight:500;letter-spacing:-.014em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.busca-corpo{
  font-size:.73rem;line-height:1.4;color:var(--ink-3);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}

.poster-pe{
  position:absolute;left:0;right:0;bottom:0;padding:26px 12px 11px;
  background:linear-gradient(to top,rgba(8,9,16,.86),rgba(8,9,16,.5) 45%,transparent);
}
.poster-nome{
  color:#fff;font-size:.8rem;font-weight:600;line-height:1.3;letter-spacing:-.012em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  text-shadow:0 1px 5px rgba(0,0,0,.45);
}

.selo{
  position:absolute;top:10px;left:10px;z-index:2;
  padding:3px 9px;border-radius:999px;font-size:.66rem;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;
  background:rgba(255,255,255,.94);color:var(--ink-2);
  box-shadow:0 2px 8px rgba(14,16,29,.18);
}
/* Um selo por veiculação. Só o que está no ar ganha fundo cheio: de longe,
   a prateleira mostra o que está rodando antes de qualquer leitura. */
.selo-ativo{background:#2E7D1B;color:#fff}
.selo-agendado{background:rgba(255,255,255,.94);color:#1F6FB2}
.selo-analise{background:rgba(255,255,255,.94);color:var(--laranja-forte)}
.selo-concluido{background:rgba(255,255,255,.94);color:var(--ink-2)}
.selo-desativado{background:rgba(255,255,255,.94);color:var(--laranja-forte)}
.selo-rejeitado{background:rgba(255,255,255,.94);color:var(--vermelho)}
.selo-arquivado{background:rgba(255,255,255,.9);color:var(--ink-4)}
.selo-plat{position:absolute;top:10px;right:10px;z-index:2;
  background:rgba(255,255,255,.94)!important;box-shadow:0 2px 8px rgba(14,16,29,.14)}
.selo-video{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.9);color:var(--ink);box-shadow:0 4px 16px rgba(14,16,29,.3);
  padding-left:3px;
}

.cartao-dados{display:flex;flex-direction:column;gap:1px;padding:11px 3px 0}
.cartao-gasto{font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:-.026em}
.cartao-metrica{font-size:.79rem;color:var(--ink-3);line-height:1.35}

.pill-n{
  margin-left:7px;padding:1px 7px;border-radius:999px;font-size:.72rem;font-weight:600;
  background:rgba(14,16,29,.08);color:var(--ink-3);
}
.pill.on .pill-n{background:rgba(255,255,255,.22);color:#fff}

@media (max-width:560px){
  .fileira{grid-template-columns:repeat(auto-fill,minmax(142px,1fr));gap:18px 12px}
  .prateleira-conta{display:none}
}

/* ---------- ficha do anuncio ---------- */
.ficha{display:grid;gap:22px;grid-template-columns:340px 1fr;align-items:start}
@media (max-width:820px){.ficha{grid-template-columns:1fr}}

/* Moldura de celular: o cliente ve a peca como o publico dele ve. */
.previa{padding:22px;display:flex;flex-direction:column;align-items:center;gap:16px}
.telefone{
  width:100%;max-width:290px;border-radius:26px;overflow:hidden;background:#fff;
  border:1px solid rgba(14,16,29,.1);box-shadow:0 12px 38px rgba(14,16,29,.14);
}
.telefone-topo{
  display:flex;align-items:center;gap:9px;padding:11px 13px;border-bottom:1px solid rgba(14,16,29,.07);
}
.telefone-avatar{
  width:32px;height:32px;border-radius:50%;flex:none;
  background:linear-gradient(150deg,var(--laranja),var(--verde));
}
.telefone-quem{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.telefone-nome{font-size:.82rem;font-weight:600;letter-spacing:-.012em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.telefone-pat{font-size:.7rem;color:var(--ink-4)}
.telefone-texto{padding:11px 13px;font-size:.85rem;line-height:1.5;color:var(--ink-2);
  white-space:pre-line;word-break:break-word}
.telefone-img{width:100%;display:block;background:#F1F3F7}
.telefone-cta{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 13px;background:#F5F6F9;
}
.telefone-cta-txt{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.telefone-dominio{font-size:.68rem;color:var(--ink-4);text-transform:uppercase;letter-spacing:.04em}
.telefone-titulo{font-size:.82rem;font-weight:600;letter-spacing:-.014em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.telefone-botao{
  flex:none;background:rgba(14,16,29,.08);color:var(--ink);border-radius:8px;
  padding:7px 11px;font-size:.76rem;font-weight:600;white-space:nowrap;
}
.copia{display:flex;flex-direction:column;gap:14px}
.copia-item{padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.6);
  border:1px solid rgba(14,16,29,.08)}
.copia-rot{font-family:var(--display);font-size:.68rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:5px}
.copia-txt{font-size:.93rem;line-height:1.55;color:var(--ink-2);white-space:pre-line;word-break:break-word}

/* ---------- tres colunas (demografia) ---------- */
.tres{display:grid;gap:26px 30px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.tres h3{font-size:.98rem;color:var(--ink-2)}

/* ---------- grade de publicacoes ---------- */
.grade-posts{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
}
.post{
  text-decoration:none;color:inherit;display:flex;flex-direction:column;
  transition:transform .18s cubic-bezier(.22,.61,.36,1);
}
.post:hover{transform:translateY(-4px)}
.post-arte{
  position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden;
  background:linear-gradient(150deg,rgba(255,145,77,.2),rgba(126,217,87,.18));
  border:1px solid var(--glass-edge);box-shadow:0 6px 20px rgba(14,16,29,.09);
  display:flex;align-items:center;justify-content:center;
}
.post-arte img{width:100%;height:100%;object-fit:cover;display:block}
.post:hover .post-arte{box-shadow:0 12px 30px rgba(14,16,29,.16)}
.post-sem-arte{
  padding:16px;font-size:.82rem;line-height:1.4;color:var(--ink-2);text-align:center;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
}
.selo-tipo{
  top:9px;left:9px;background:rgba(255,255,255,.94);color:var(--ink-2);
  font-size:.62rem;padding:3px 8px;
}
.post-dados{display:flex;flex-direction:column;gap:3px;padding:11px 3px 0}
.post-data{font-size:.72rem;color:var(--ink-4);letter-spacing:.02em}
.post-legenda{
  font-size:.83rem;line-height:1.36;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.post-numeros{font-size:.8rem;color:var(--ink-2);margin-top:3px;line-height:1.4}
.post-numeros b{font-weight:700;color:var(--ink)}
.post-numeros.fraco{color:var(--ink-4);font-size:.76rem;margin-top:0}
@media (max-width:520px){
  /* 128, e nao 140. Medido em 375px: sobram 277px uteis dentro do bloco,
     e duas colunas de 140 com 14 de espaco pedem 294 — faltavam 17px, e
     a grade caia para UMA coluna. Dez publicacoes viravam quatro mil
     pixels de rolagem no celular. Com 128 e espaco de 12, cabem duas. */
  .grade-posts{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px}
}

/* ---------- checagens do instalador ---------- */
.checagens{display:flex;flex-direction:column;gap:8px;margin:0 0 22px;text-align:left}
.checagem{
  display:flex;align-items:flex-start;gap:10px;padding:9px 13px;border-radius:12px;
  font-size:.88rem;background:rgba(255,255,255,.6);border:1px solid rgba(14,16,29,.07);
}
.checagem span{
  flex:none;width:19px;height:19px;border-radius:50%;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.checagem.ok span{background:#E3F6DA;color:var(--verde-forte)}
.checagem.falha{background:rgba(253,231,235,.6);border-color:rgba(198,43,69,.2)}
.checagem.falha span{background:#FDE7EB;color:var(--vermelho)}

/* ---------- botao de play sobre a capa ---------- */
.poster-area{position:relative}
.poster-link{display:block;text-decoration:none;color:inherit;border-radius:18px}
.poster-link:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.cartao-dados{text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:1px}
.botao-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:52px;height:52px;border-radius:50%;border:none;cursor:pointer;padding:0 0 0 3px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.94);color:var(--ink);
  box-shadow:0 6px 20px rgba(14,16,29,.34);
  transition:transform .16s,background .16s;
}
.botao-play:hover{transform:translate(-50%,-50%) scale(1.09);background:#fff}
.botao-play:active{transform:translate(-50%,-50%) scale(.96)}
.botao-play:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.cartao-anuncio:hover .botao-play{background:#fff}

/* ---------- player ---------- */
.player{
  border:0;padding:0;background:transparent;max-width:none;max-height:none;
  width:100%;height:100%;
}
.player::backdrop{background:rgba(8,9,16,.82);backdrop-filter:blur(6px)}
.player-caixa{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(420px,calc(100vw - 28px));
  display:flex;flex-direction:column;gap:12px;
}
.player-topo{display:flex;align-items:center;gap:12px}
.player-nome{
  flex:1;min-width:0;color:#fff;font-family:var(--display);font-weight:600;
  font-size:.98rem;letter-spacing:-.018em;line-height:1.3;
  text-shadow:0 1px 6px rgba(0,0,0,.4);
}
.player-x{
  flex:none;width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;font-size:15px;line-height:1;
  transition:background .16s;
}
.player-x:hover{background:rgba(255,255,255,.3)}
.player-quadro{
  position:relative;width:100%;height:min(78vh,760px);border-radius:20px;
  overflow:hidden;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.player-quadro iframe{width:100%;height:100%;border:0;display:block}
.player-carregando{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  margin:0;color:var(--ink-3);font-size:.92rem;text-align:center;padding:24px;
}
/* display:flex numa classe vence o [hidden] padrão do navegador; sem esta
   linha o "carregando" fica atrás da prévia depois de ela abrir. */
.player-carregando[hidden]{display:none}
/* Anuncio de imagem abre com uma lupa; video, com o play. */
.botao-play.botao-ver{width:44px;height:44px;padding:0}
.player-dica{
  color:rgba(255,255,255,.6);font-size:.8rem;text-align:center;line-height:1.45;
}
@media (prefers-reduced-motion:no-preference){
  .player[open] .player-caixa{animation:sobe .24s cubic-bezier(.22,.61,.36,1)}
}
@keyframes sobe{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
/* video dentro da moldura do telefone */
.telefone video.telefone-img{width:100%;display:block;background:#000;max-height:62vh}

/* ---------- frescor dos numeros ---------- */
.frescor{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px 18px;margin-top:20px;padding-top:16px;border-top:1px solid var(--hairline);
}
.frescor form{flex:none}

/* ---------- previa dentro da ficha do anuncio ---------- */
.quadro-previa{
  position:relative;width:100%;max-width:330px;height:min(70vh,700px);
  border-radius:20px;overflow:hidden;background:#fff;
  border:1px solid rgba(14,16,29,.1);box-shadow:0 12px 38px rgba(14,16,29,.14);
}
.quadro-previa iframe{width:100%;height:100%;border:0;display:block}

/* ---------- seletor de posicionamento da previa ---------- */
.player-formatos{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.player-formatos .formato{
  border:none;cursor:pointer;padding:6px 12px;border-radius:999px;
  font-family:var(--body);font-size:.78rem;font-weight:500;
  background:rgba(255,255,255,.16);color:rgba(255,255,255,.82);
  transition:background .16s,color .16s;
}
.player-formatos .formato:hover{background:rgba(255,255,255,.3);color:#fff}
.player-formatos .formato.on{background:#fff;color:var(--ink);font-weight:600}
/* na ficha do anúncio o fundo é claro, então o seletor inverte */
.player-formatos.clara .formato{background:rgba(14,16,29,.06);color:var(--ink-3)}
.player-formatos.clara .formato:hover{background:rgba(14,16,29,.12);color:var(--ink)}
.player-formatos.clara .formato.on{background:var(--ink);color:#fff}
/* o filtro de conta acompanha o seletor de empresa, um pouco mais discreto */
.trocador.conta summary{background:rgba(14,16,29,.03);color:var(--ink-3);font-weight:400}
.trocador.conta summary:hover{background:rgba(14,16,29,.08)}
.trocador.conta[open] summary{background:var(--ink);color:#fff}
@media (max-width:1000px){.trocador.conta summary{max-width:130px}}
/* selo de anuncio com varios posts: fica abaixo do de situacao */
.selo-multi{top:38px;left:10px;background:rgba(14,16,29,.82);color:#fff;font-size:.6rem}

/* =====================================================================
   Empresa suspensa — o cliente entra, vê que os números dele estão ali,
   e sabe o que fazer para voltar a lê-los.

   O borrão é sobre o conteúdo, nunca sobre a navegação: o topo continua
   nítido e clicável para quem tem mais de uma empresa poder trocar para
   outra que esteja ativa.
   ===================================================================== */
body.suspenso main,
body.suspenso .rodape{
  filter:blur(7px);
  -webkit-user-select:none;user-select:none;pointer-events:none;
}
body.suspenso main{opacity:.85}

.cortina{
  position:fixed;inset:0;z-index:60;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(252,252,253,.55);
  backdrop-filter:saturate(140%) blur(2px);
}
.cortina-caixa{
  max-width:520px;width:100%;text-align:center;
  padding:34px 30px;border-radius:24px;
  box-shadow:0 24px 60px rgba(14,16,29,.18);
}
.cortina-caixa img{margin-bottom:14px}
.cortina-caixa h2{font-size:1.35rem;margin:0 0 12px}
.cortina-caixa p{color:var(--ink-3);margin:0 0 12px;line-height:1.55}
.cortina-caixa .acoes{justify-content:center;margin:22px 0 6px}
.cortina-caixa .fino{margin:0}

@media (max-width:520px){
  .cortina{align-items:flex-start;padding-top:80px}
  .cortina-caixa{padding:26px 20px}
}

/* A chave de serviço da empresa, na lista da administração. Verde é
   cliente ativo; cinza é contrato parado. */
.chave{
  appearance:none;border:0;cursor:pointer;padding:0;
  width:44px;height:24px;border-radius:999px;
  background:#C9CDD8;transition:background .18s ease;
  display:inline-flex;align-items:center;
}
.chave.on{background:#2E7D1B}
.chave-bola{
  width:18px;height:18px;border-radius:50%;background:#fff;
  margin-left:3px;transition:transform .18s ease;
  box-shadow:0 1px 3px rgba(14,16,29,.35);
}
.chave.on .chave-bola{transform:translateX(20px)}
.chave:focus-visible{outline:2px solid var(--laranja-forte);outline-offset:2px}

/* =====================================================================
   Lista de empresas da administração — cabe na tela, sem rolagem lateral.

   A regra geral de table.dados reserva 190px para a primeira coluna e um
   mínimo de 640px para a tabela. Aqui a primeira coluna é a chave, que
   ocupa 44px, e o nome vem na segunda: as duas exceções abaixo existem
   só por causa disso.
   ===================================================================== */
.tabela-empresas{min-width:0;table-layout:auto;font-size:.86rem}
.tabela-empresas th,
.tabela-empresas td{padding:10px 8px}

.tabela-empresas th.col-chave,
.tabela-empresas td.col-chave{
  width:56px;min-width:56px;text-align:left;padding-left:0;padding-right:0;
}
.tabela-empresas td.col-nome{
  text-align:left;white-space:normal;color:var(--ink);font-weight:500;
  min-width:150px;
}
/* A regra geral (table.dados td:first-child) tem especificidade maior que
   uma classe sozinha — por isso o seletor abaixo repete o table.dados. Sem
   isso, a coluna da chave herdava os 190px reservados para o nome e abria
   um vão entre a chave e a empresa. */
table.dados.tabela-empresas th:first-child,
table.dados.tabela-empresas td:first-child{min-width:0;width:56px}
/* O nome saiu da primeira coluna, mas continua sendo texto: o cabeçalho
   dele acompanha, senão fica pendurado na direita de uma coluna larga. */
table.dados.tabela-empresas th:nth-child(2){text-align:left}
.tabela-empresas td.num{font-variant-numeric:tabular-nums}
.tabela-empresas .col-carga{font-size:.82rem}

/* Editar e ver painel, um embaixo do outro em tela estreita e lado a
   lado quando sobra espaço — sempre sem empurrar a tabela para fora. */
.tabela-empresas td.col-acoes{white-space:nowrap;font-size:.82rem}
.tabela-empresas td.col-acoes a{margin-left:10px}
.tabela-empresas td.col-acoes a:first-child{margin-left:0}

/* Empresa suspensa fica visivelmente fora do ar, sem sumir da lista. */
.tabela-empresas tr.linha-suspensa td.col-nome{color:var(--ink-4)}
.tabela-empresas tr.linha-suspensa td.num{color:var(--ink-4)}

@media (max-width:900px){
  .tabela-empresas{font-size:.8rem}
  .tabela-empresas th,.tabela-empresas td{padding:9px 6px}
  .tabela-empresas td.col-acoes a{display:block;margin:0}
}

/* Empresa com serviço pausado no seletor: vem depois de uma linha, com um
   ponto discreto. Continua clicável — o cliente entra e a cortina explica. */
.trocador-corte{
  margin-top:6px;padding-top:12px;
  border-top:1px solid var(--hairline);
}
.trocador-item.pausada{color:var(--ink-4)}
.trocador-item.pausada::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#C9CDD8;margin-right:8px;vertical-align:middle;
}

/* O número da agência: tudo que já passou pelo painel, somando todas as
   empresas. Fica no topo da administração, com peso, porque é o que se
   olha primeiro ao abrir. */
.total-geral{
  margin:14px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
}
.total-geral-rotulo{
  font-family:var(--display);font-size:.7rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-4);
}
.total-geral b{font-size:1.5rem;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.total-geral .fino{margin:0}

/* Faixa que separa Meta de Google no catálogo, quando a empresa anuncia
   nos dois. Anúncio de busca é texto e anúncio de feed é imagem — lado a
   lado na mesma prateleira, um parece defeito do outro. */
.faixa-plataforma{
  margin:34px 0 14px;
  padding-top:20px;
  border-top:1px solid var(--hairline);
}
.faixa-plataforma:first-of-type{margin-top:6px;padding-top:0;border-top:none}
.faixa-plataforma h2{margin:0 0 4px;font-size:1rem}
.faixa-plataforma .tag{font-size:.78rem;padding:4px 12px}
.faixa-plataforma .sub{margin:0}
.faixa-plataforma .fino{margin:0;display:inline}


/* ---------- busca e paginação de empresas (admin) ---------- */

.visualmente-oculto{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Mora no cabeçalho da lista, do lado direito do título. Sem quebrar em
   duas linhas: o campo encolhe, o botão não. */
.busca-empresas{display:flex;gap:8px;align-items:center;align-self:center;flex-wrap:nowrap}
.busca-empresas input[type=search]{
  flex:0 1 230px;min-width:120px;padding:9px 13px;border-radius:11px;
  border:1px solid var(--glass-edge);background:rgba(255,255,255,.72);
  font:inherit;font-size:.88rem;color:var(--ink);
}
.busca-empresas .btn{flex:0 0 auto}
@media (max-width:640px){
  .busca-empresas{width:100%}
  .busca-empresas input[type=search]{flex:1 1 auto}
}
.busca-empresas input[type=search]:focus{
  outline:none;border-color:rgba(255,145,77,.55);
  box-shadow:0 0 0 3px rgba(255,145,77,.16);
}

/* Fica depois da tabela: primeiro o admin lê as empresas, depois decide
   se vira a folha. */
.paginacao{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-top:16px;
}
.paginacao .fino{margin:0}
.paginacao-passos{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pag-n{
  min-width:30px;padding:5px 8px;border-radius:9px;text-align:center;
  font-size:.84rem;font-weight:600;text-decoration:none;color:var(--ink-3);
  border:1px solid transparent;
}
a.pag-n:hover{background:rgba(14,16,29,.06);color:var(--ink)}
.pag-n.atual{background:var(--ink);color:#fff}


/* ---------- seletor de contas ---------- */

/* Mora dentro do filtro, acima do período: é a primeira pergunta ("de qual
   conta?") antes da segunda ("de quando?"). */
.seletor-contas{border-bottom:1px solid var(--hairline);padding-bottom:14px}
.seletor-cabeca{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:11px;
}
.seletor-rotulo{font-size:.82rem;color:var(--ink-3)}
.seletor-rotulo b{color:var(--ink);font-weight:600}

.btn-verde{
  font-size:.78rem;font-weight:600;text-decoration:none;white-space:nowrap;
  border:1.5px solid #8FD46A;background:#F1FAEA;color:var(--verde-forte);
  border-radius:999px;padding:6px 14px;transition:background .16s,border-color .16s;
}
.btn-verde:hover{background:#E3F6DA;border-color:var(--verde)}

/* Colunas de largura igual: é o que faz a plataforma, o nome e o valor
   caírem sempre na mesma altura de um botão para o outro. */
.seletor-grade{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:10px;
}

.conta-botao{
  display:flex;flex-direction:column;gap:5px;min-width:0;
  padding:12px 14px;border-radius:var(--r-sm);text-decoration:none;
  border:1.5px solid rgba(14,16,29,.11);background:rgba(255,255,255,.66);
  transition:background .16s,border-color .16s,color .16s;
}
.conta-botao:hover{background:rgba(255,255,255,.95);border-color:rgba(14,16,29,.2)}
.conta-botao:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.conta-plat{
  align-self:flex-start;font-size:.62rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:3px 8px;border-radius:6px;
  background:rgba(14,16,29,.06);color:var(--ink-4);
}
.conta-nome{
  font-size:.9rem;color:var(--ink-4);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* --ink-4, e não #A2A8B7: aquele cinza dava 2,38:1 de contraste, abaixo
   do mínimo legível. É o valor gasto de uma conta desligada — apagado de
   propósito, mas ainda tem de dar para ler. */
.conta-valor{font-size:.82rem;color:var(--ink-4);font-variant-numeric:tabular-nums}

/* Acesa: o mesmo verde do botão "Ligar as N" — borda, fundo e texto. */
.conta-botao.on{background:#F1FAEA;border-color:#8FD46A}
.conta-botao.on:hover{background:#E3F6DA;border-color:var(--verde)}
.conta-botao.on .conta-plat{background:rgba(126,217,87,.20);color:var(--verde-forte)}
.conta-botao.on .conta-nome{color:var(--verde-forte);font-weight:600}
.conta-botao.on .conta-valor{color:var(--verde-forte);font-weight:500}
.conta-botao.travada{cursor:default}
.conta-botao.travada:hover{background:#F1FAEA;border-color:#8FD46A}

@media (max-width:760px){
  /* Na tela estreita a linha única não cabe: as datas descem inteiras, e
     não espremidas num canto. */
  /* Os dois campos de data não cabem inteiros em 375px: perdem a largura
     fixa e dividem a linha, em vez de vazar pela direita. */
  .filtro-datas{gap:8px 10px}
  .filtro-datas input[type=date]{flex:1 1 128px;min-width:0;width:auto}
  .seletor-grade{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
  .conta-botao{padding:11px 12px}
}


/* Nome, id e histórico da conta, um por linha, dentro de uma célula só.
   width:100% dá a ela toda a folga da tabela — sem isso, num cartão
   estreito o navegador espremia a coluna até uma letra por linha. */
table.dados td.col-conta{
  text-align:left;white-space:normal;width:100%;line-height:1.45;padding-right:14px;
}
table.dados td.col-conta b{font-weight:600;overflow-wrap:anywhere}
table.dados td.col-conta .sub{font-size:.82rem;margin:0}
table.dados td.col-conta .conta-id{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.74rem;color:var(--ink-4);overflow-wrap:anywhere;
}
table.dados td.col-conta .conta-vida{font-size:.78rem;color:var(--ink-3)}


/* A tabela de contas NUNCA é tabela — é uma lista de fichas, em qualquer
   largura de tela.

   O erro que me custou três tentativas: eu prendi a correção a
   @media (max-width:900px), e media query mede a JANELA. Só que esta
   tabela vive dentro de um cartão do admin-grid, que tem
   minmax(290px, 1fr) — numa janela de 2000px o cartão continua com uns
   470px, a media query não dispara, e a tabela quebra do mesmo jeito.
   O tamanho que importa é o do cartão, não o do monitor.

   Como o cartão é sempre estreito, a resposta certa é não depender de
   largura nenhuma: ficha sempre. Três colunas, sendo uma com dois
   botões de largura fixa, nunca vão caber ali. */
.rolagem:has(table.contas){overflow:visible;margin:0;padding:0}
table.dados.contas,
table.dados.contas tbody,
table.dados.contas tr,
table.dados.contas td{display:block;width:auto;min-width:0}
table.dados.contas thead{display:none}
table.dados.contas tr{
  border:1px solid var(--hairline);border-radius:var(--r-sm);
  background:rgba(255,255,255,.55);padding:12px 14px;margin-bottom:10px;
}
table.dados.contas td{border:0;padding:3px 0;text-align:left}
table.dados.contas td.col-conta{padding-right:0;width:auto}
table.dados.contas td::before{
  content:attr(data-rotulo);color:var(--ink-3);font-size:.82rem;margin-right:8px;
}
table.dados.contas td[data-rotulo=""]::before,
table.dados.contas td:not([data-rotulo])::before{content:none}
/* Os botões lado a lado: empilhados eles viram uma torre num cartão que
   já é alto. Continuam separados o bastante para o dedo não errar. */
table.dados.contas td.col-conta-acoes{
  flex-direction:row;gap:8px;margin-top:10px;
}
table.dados.contas td.col-conta-acoes .btn{width:auto;flex:1 1 0}

/* Desligar em cima, Excluir embaixo — a ação perigosa nunca encostada na
   inofensiva, para o dedo não errar. */
table.dados td.col-conta-acoes{display:flex;flex-direction:column;gap:7px;align-items:stretch}
table.dados td.col-conta-acoes form{margin:0}
table.dados td.col-conta-acoes .btn{width:100%;justify-content:center}
/* Aqui dentro, e só aqui, o Excluir é contorno em vez de vermelho cheio:
   ele fica colado no Desligar, ocupando a largura toda da ficha da conta,
   e dois botões maciços lado a lado viram um bloco de tinta que puxa o
   olho para a ação perigosa. Fora da ficha o vermelho é cheio, como manda
   o bloco lá de cima — o seletor precisa do escopo, senão ele venceria
   por ser o último e apagaria o vermelho do painel inteiro (o "Cancelar"
   da carteira, o "Excluir usuário", o botão da caixa de confirmação). */
table.dados td.col-conta-acoes .btn.perigo{
  background:transparent;color:var(--vermelho);border:1px solid rgba(198,43,69,.35);
  box-shadow:none;
}
table.dados td.col-conta-acoes .btn.perigo:hover{
  background:rgba(198,43,69,.08);border-color:var(--vermelho);
}


/* ---------- caixa de confirmação ---------- */

/* O confirm() do navegador escreve "gerandomovimento.com.br diz" em cima
   da mensagem e usa os botões do sistema — nada indica qual ação é a
   perigosa. Esta usa o mesmo vidro, a mesma fonte e os mesmos botões do
   resto do painel. */
dialog.modal-gm{
  border:none;padding:0;background:transparent;color:var(--ink);
  max-width:min(460px,calc(100vw - 32px));
}
dialog.modal-gm::backdrop{
  background:rgba(14,16,29,.52);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}

.modal-gm-corpo{
  background:var(--glass-strong);border:1px solid var(--glass-edge);
  border-radius:var(--r);box-shadow:0 24px 70px rgba(14,16,29,.24);
  padding:26px 26px 22px;
}
.modal-gm-titulo{
  font-family:var(--display);font-size:1.16rem;font-weight:700;
  letter-spacing:-.026em;margin:0 0 10px;line-height:1.3;
}
.modal-gm-texto{margin:0;color:var(--ink-2);font-size:.94rem;line-height:1.6}
.modal-gm-acoes{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}
.modal-gm-acoes .btn{flex:0 0 auto}

@media (max-width:480px){
  /* No celular os botões ocupam a linha inteira: alvo grande, sem erro
     de dedo entre cancelar e confirmar. */
  .modal-gm-acoes{flex-direction:column-reverse}
  .modal-gm-acoes .btn{width:100%;justify-content:center}
}


/* =========================================================
   Celular — o painel do cliente é lido no telefone.

   Medido em 375px: a barra do topo pedia 353px numa faixa de
   331 e cortava o "Sair"; a lista de empresas abria em x=-107,
   com os nomes fora da tela; o nome da campanha ficava com 60px
   para um texto de 214; e duas tabelas de 800px viviam dentro de
   uma janelinha de 285, só na rolagem lateral.
   ========================================================= */
/* =========================================================
   Celular: alvo de toque e campo que nao da zoom.

   Medido no aparelho de 375px, dentro da aba de redes sociais:
   62 alvos abaixo dos 44px que o dedo pede — abas de 38, atalhos de
   periodo de 39, itens do trocador de 42, o botao "Ver" de 33 — e os
   campos de data em 15px, que fazem o iPhone dar zoom na pagina inteira
   assim que o cliente toca neles, sem desfazer depois.
   ========================================================= */
@media (max-width:760px){
  .pill,.nav-aba,.trocador-item,.nav-cta,.btn,.filtro-atalhos a{min-height:44px}
  /* Links que sao controle, e nao texto corrido: "Administracao", a
     marca, os do rodape. Link dentro de frase fica como esta — esticar
     um "Resultados" no meio de um paragrafo abriria buraco na leitura. */
  .nav-links > a,.brand,.rodape-links a,.rodape a{min-height:44px;display:inline-flex;align-items:center}
  .pill,.nav-aba,.filtro-atalhos a{display:inline-flex;align-items:center}
  .trocador summary{min-height:44px}
  .conta-botao{min-height:48px}

  /* 16px e' o limite abaixo do qual o iOS decide dar zoom no campo. */
  input[type=date],input[type=text],input[type=email],input[type=password],
  input[type=number],input[type=search],select,textarea{font-size:16px;min-height:44px}
}

@media (max-width:560px){

  /* O trocador de empresa ganha a linha inteira: é o controle mais
     usado, e espremido entre "Administração" e "Sair" não cabia. */
  .nav-in{gap:10px;padding:10px 12px;border-radius:24px}
  .nav-links{width:100%;margin-left:0;gap:12px;flex-wrap:wrap;
    justify-content:space-between;align-items:center}
  .trocador{flex:1 1 100%;order:-1}
  .trocador summary{max-width:100%;width:100%;justify-content:space-between;padding:9px 14px}
  .trocador-nome{min-width:0}
  /* Ancorada nas duas bordas: right:0 sozinho jogava a lista para
     fora da tela pela esquerda. */
  .trocador-lista{left:0;right:0;min-width:0;max-width:100%}
  .nav-quem{width:100%;order:-1}

  /* Nome da campanha em cima, número embaixo. Lado a lado, o valor
     comia a linha e sobravam 60px para o nome — que é justamente o
     que o cliente precisa ler. */
  .barra-linha{grid-template-columns:1fr;gap:2px}
  .barra-nome{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
  .barra-val{justify-self:start}

  /* Tabelas viram fichas, uma embaixo da outra. O cabeçalho some e
     cada valor carrega o próprio rótulo, então dá para ler tudo sem
     arrastar a tela para o lado. */
  .rolagem:has(table.empilha){overflow:visible;margin:0;padding:0}
  table.dados.empilha,
  table.dados.empilha tbody,
  table.dados.empilha tfoot,
  table.dados.empilha tr,
  table.dados.empilha td{display:block;width:auto;min-width:0}
  table.dados.empilha thead{display:none}
  table.dados.empilha tr{
    border:1px solid var(--hairline);border-radius:var(--r-sm);
    background:rgba(255,255,255,.55);padding:12px 14px;margin-bottom:10px;
  }
  table.dados.empilha td{
    display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    padding:5px 0;border:none;text-align:right;white-space:normal;
  }
  table.dados.empilha td::before{
    content:attr(data-rotulo);flex:0 0 auto;text-align:left;
    color:var(--ink-3);font-size:.84rem;font-weight:400;
  }
  /* A primeira célula é o nome da ficha: linha inteira, em destaque. */
  table.dados.empilha td:first-child{
    display:block;text-align:left;font-weight:600;
    padding:0 0 9px;margin-bottom:5px;border-bottom:1px solid var(--hairline);
  }
  table.dados.empilha td:first-child::before{display:none}
  table.dados.empilha td:empty{display:none}
  table.dados.empilha tfoot tr{background:rgba(14,16,29,.045);border-color:transparent}
}


/* ---------- de onde vieram, o que procuraram, para quem ---------- */

/* Os estados da Meta ficam abaixo das cidades do Google, separados por
   uma linha: são contagens diferentes e não se somam. */
.geo-estados{margin-top:22px;padding-top:16px;border-top:1px solid var(--hairline)}
.geo-fichas,.publico-fichas,.publico-linha{display:flex;flex-wrap:wrap;gap:8px}
.geo-ficha{
  font-size:.82rem;color:var(--ink-3);background:rgba(255,255,255,.66);
  border:1px solid var(--glass-edge);border-radius:999px;padding:7px 14px;
}
.geo-ficha b{color:var(--ink);font-weight:600;margin-right:5px}

/* minmax(0,1fr), e não 1fr: a coluna de grade tem largura mínima
   automática, e a tabela lá dentro carrega min-width:640px — duas delas
   somavam 1.280 e punham a página inteira em rolagem lateral. */
.duas-listas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;align-items:start}
.duas-listas h3{font-size:.98rem}
@media (max-width:760px){.duas-listas{grid-template-columns:1fr;gap:28px}}

/* Estas tabelas são estreitas de propósito: termo à esquerda, dois
   números à direita. O min-width das tabelas largas não vale aqui. */
/* O min-width:0 na tabela não basta: table.dados td:first-child carrega
   190px próprios, e duas tabelas dessas lado a lado se sobrepunham. */
table.dados.termos{min-width:0;width:100%}
table.dados.termos td:first-child,
table.dados.termos th:first-child{min-width:0}
table.dados.termos td:first-child{
  text-align:left;white-space:normal;overflow-wrap:anywhere;line-height:1.4;
}
table.dados.termos th:first-child{text-align:left}

.publico-alvo{
  font-size:.9rem;color:var(--ink-2);background:rgba(255,145,77,.10);
  border:1px solid rgba(255,145,77,.24);border-radius:var(--r-sm);padding:9px 15px;
}
.publico-alvo b{color:var(--ink);font-weight:600}
.publico-ficha{
  font-size:.84rem;color:var(--ink-2);background:rgba(14,16,29,.05);
  border-radius:999px;padding:6px 13px;
}


/* A caixa do gráfico reserva altura antes do desenho chegar.

   Sem isto ela nasce com zero de altura e a página inteira dá um pulo
   quando o SVG aparece — o que, somado ao filtro que recarrega, fazia o
   cliente perder o lugar duas vezes no mesmo clique. */
.grafico-caixa{min-height:250px}
@media (max-width:560px){.grafico-caixa{min-height:210px}}

/* Mapa de calor de dia da semana x faixa do dia. Grade simples de
   retângulos: o tom conta a história, o número confirma. */
.calor{display:grid;grid-template-columns:auto repeat(7,1fr);gap:5px;align-items:stretch}
.calor-topo{
  font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4);
  text-align:center;padding-bottom:2px;
}
.calor-lado{
  font-size:.78rem;color:var(--ink-3);display:flex;align-items:center;
  padding-right:10px;white-space:nowrap;
}
.calor-cel{
  border-radius:9px;min-height:46px;display:flex;align-items:center;justify-content:center;
  background:rgba(14,16,29,.04);font-size:.8rem;color:var(--ink);
}
.calor-cel b{font-weight:700;font-variant-numeric:tabular-nums}
.calor-cel.fraca{color:var(--ink-4);background:rgba(14,16,29,.02)}
@media (max-width:560px){
  .calor{gap:3px}
  .calor-cel{min-height:38px;font-size:.7rem;border-radius:7px}
  .calor-topo{font-size:.62rem}
  .calor-lado{font-size:.7rem;padding-right:6px}
}

/* A barra empilhada das interações — flex de spans com largura em %,
   sem uma linha de JavaScript. O min-width impede que uma fatia de 1%
   vire um fio invisível. */
.barra-pilha{
  display:flex;height:22px;border-radius:999px;overflow:hidden;
  background:rgba(14,16,29,.06);
}
.pilha-fatia{display:block;min-width:4px;transition:filter .16s}
.pilha-fatia:hover{filter:brightness(1.08)}
.pilha-legenda{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px;font-size:.86rem;color:var(--ink-2)}
.pilha-item{display:inline-flex;align-items:center;gap:7px}
.pilha-item i{width:10px;height:10px;border-radius:3px;flex:none}
.pilha-item b{color:var(--ink);font-weight:700}
.pilha-item .fino{font-size:.78rem}
@media (max-width:560px){.pilha-legenda{gap:7px 14px;font-size:.82rem}}

/* Salvamento e compartilhamento no cartão da publicação.
   Compartilhar leva a marca para fora da audiência de quem já segue —
   por isso vem primeiro e mais forte que salvar. */
.post-selos{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.post-selo{
  font-size:.7rem;font-weight:600;letter-spacing:.01em;
  border-radius:6px;padding:2px 6px;
  background:rgba(14,16,29,.05);color:var(--ink-3);
}
.post-selo.forte{background:rgba(62,142,36,.12);color:var(--verde-forte)}

/* A faísca dentro do cartão: o desenho miúdo dos últimos 14 dias.
   Cor herdada do texto de apoio, para não competir com o número — quem
   manda no cartão é o valor, a faísca só diz o feitio. */
/* Faísca e selo colados no rodapé do cartão.

   Os cartões têm quantidades diferentes de linhas — uns têm frase de
   apoio, outros não; uns têm selo de variação, outros não têm período
   anterior para comparar. Fluindo de cima para baixo, cada faísca
   parava numa altura e a fileira ficava serrilhada. Com margin-top:auto
   a faísca é empurrada para o fim do cartão e todas se alinham, tenha o
   cartão duas linhas de texto ou quatro. */
.faisca-caixa{display:block;margin-top:auto;padding-top:10px;color:var(--verde-forte);opacity:.55;line-height:0}
/* Sem faísca, quem desce é o selo — para ele não subir e encostar no
   texto num cartão curto ao lado de um cartão alto. */
.kpi .faisca-caixa + .chip{margin-top:9px}
/* Sem :first-of-type. Ele conta SPAN, e antes do selo já vieram o rótulo,
   o valor e o apoio — então a regra nunca pegava, e numa fileira de quatro
   cartões o selo de quem não tem repartição por conta ficava uma linha
   acima dos vizinhos. Serrilhado é o defeito que mais se vê e o que menos
   se procura. */
.kpi > .chip:not(.faisca-caixa + .chip){margin-top:auto}
.faisca{display:block;overflow:visible}
@media (max-width:560px){.faisca-caixa{margin-top:8px}}

/* Paginação de lista (cidades, termos). Mais discreta que a do admin:
   aqui ela é um detalhe da lista, não o assunto da tela. */
.paginacao-lista{margin-top:14px;padding-top:12px;border-top:1px solid var(--hairline)}
.paginacao-lista .pag-n,
.paginacao-lista .btn{font-size:.8rem;cursor:pointer}
.paginacao-lista button.pag-n{background:none;border:1px solid transparent;font-family:inherit}
.paginacao-lista button.pag-n:hover{background:rgba(14,16,29,.06);color:var(--ink)}
/* A reticência entre saltos de página: marca que existe caminho no meio
   sem virar mais um botão para o olho decidir. */
.pag-corte{color:var(--ink-2);opacity:.6;padding:0 2px;user-select:none}
@media (max-width:560px){
  .paginacao-lista{flex-direction:column;align-items:stretch;gap:10px}
  .paginacao-lista .paginacao-passos{justify-content:center}
}


/* Prova social no rodapé. Discreta de propósito: o cliente tem de ver
   que existe, e ao mesmo tempo nunca confundir com o número dele. Por
   isso o rótulo vem antes do valor, e a frase termina dizendo o que o
   número não é. */
.rodape-agencia{
  margin:0 auto 12px;max-width:640px;padding:13px 18px;
  border:1px dashed rgba(14,16,29,.16);border-radius:var(--r-sm);
  background:rgba(14,16,29,.028);
  font-size:.84rem;color:var(--ink-3);line-height:1.55;
}
.rodape-agencia-rotulo{
  display:block;font-size:.66rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:3px;
}
.rodape-agencia b{
  font-family:var(--display);font-size:1.12rem;font-weight:700;
  letter-spacing:-.026em;color:var(--ink-2);margin-right:5px;
  font-variant-numeric:tabular-nums;
}


/* ---------- mapa das cidades ----------
   Onde as barras dizem quanto, o mapa diz onde. O desenho do Paraná e os
   rios são SVG escrito na mão em graficos.js — sem biblioteca, sem CDN.

   As cores do mapa ficam em variáveis próprias, todas juntas na primeira
   regra: são o único ponto do painel que precisa de um cinza de "terra" e
   de um halo atrás das letras. Tudo o mais sai das variáveis do sistema.

   O painel é de tema claro por decisão de projeto. Havia aqui um bloco
   [data-tema="escuro"] esperando um dia que não chegou: era o único
   data-tema do projeto inteiro, nenhuma página escrevia o atributo, e ele
   virava mentira ao trocar quatro cores de um mapa que tem mais que
   quatro. Tema escuro, se vier, vem pela paleta do :root inteira — e
   estas variáveis viram junto, na mesma passada. */
.mapa-cidades{
  --mapa-terra:rgba(14,16,29,.05);
  --mapa-borda:rgba(14,16,29,.3);
  --mapa-rio:rgba(14,16,29,.2);
  --mapa-halo:#fff;
  /* A lista lateral é uma caixa clara sobre o vidro do cartão — mesmo tom
     de .explica-item e .aviso. Fica aqui em cima, com as outras cores do
     mapa, em vez de solta lá embaixo em número cru. */
  --mapa-lista:rgba(255,255,255,.6);
  --mapa-lista-borda:rgba(255,255,255,.9);
  display:grid;gap:20px;align-items:start;
}
/* A lista vai para o lado só quando o CARTÃO é largo — quem decide é o
   JavaScript, medindo o cartão. Media query aqui mediria a janela, e um
   cartão de 300px dentro de uma tela de 2000px continuaria espremido. */
.mapa-cidades.lado{grid-template-columns:minmax(0,1fr) 212px}

/* A caixa da página é .grafico-caixa mais esta, e a segunda existe pela
   reserva de altura. graficos.js roda no fim do body: até ele desenhar, a
   caixa está vazia, e os 250px de .grafico-caixa — que servem para a
   linha e para a rosca — deixam o mapa nascer com o triplo disso,
   empurrando as barras e o rodapé para baixo com a página já na tela.

   O recorte do Paraná é um retângulo fixo, então a altura sai da largura:
   é a proporção do viewBox desenhado em graficos.js. Só vale enquanto a
   caixa está vazia; depois quem manda é o conteúdo — e por isso ninguém
   deve pôr um "carregando..." aqui dentro, que mataria a reserva.

   A conta não fecha ao centavo, e nem tem como: quem decide o formato é o
   JavaScript, medindo o cartão depois. Medido em 04/09/2026, num cartão
   de 1082px: sem esta regra a página descia 466px de uma vez; com ela
   sobra 63px para um lado ou 135px para o outro, conforme a lista de fora
   do recorte caiba ao lado do desenho ou não. No cartão estreito a lista
   empilha embaixo e ainda chega sem aviso — é o resto do erro, e nenhuma
   proporção de CSS dá conta dele. */
.mapa-caixa:empty{aspect-ratio:1000/714}

.mapa-tela{min-width:0}
.mapa-svg{width:100%;height:auto;display:block;overflow:visible}
/* O mapa nao usa .grafico: ver o comentario em graficos.js. Estas duas
   linhas repoem o que aquela classe dava de util. */
.mapa-svg text{font-family:var(--body);fill:var(--ink-4)}

.mapa-terra{fill:var(--mapa-terra);stroke:var(--mapa-borda);
  stroke-linejoin:round;stroke-linecap:round}
.mapa-rio{stroke:var(--mapa-rio);stroke-linejoin:round;stroke-linecap:round}
.mapa-rio-nome{fill:var(--ink-4);font-style:italic;letter-spacing:.02em}

/* Bolha translúcida: cidades vizinhas se sobrepõem e as duas precisam
   continuar visíveis. */
.mapa-bolha{fill:var(--laranja);fill-opacity:.5;stroke:var(--laranja-forte);
  stroke-opacity:.85}
/* Cidade que apareceu mas não trouxe número: anel vazio, para dizer
   "chegou até aqui" sem inventar tamanho. */
.mapa-bolha.vazia{fill:none;stroke:var(--ink-4);stroke-opacity:.6}
/* Alvo do dedo, invisível e generoso — 44px de diâmetro. */
.mapa-alvo{fill:transparent;cursor:pointer}
.mapa-rotulo{fill:var(--ink);font-weight:600;stroke:var(--mapa-halo);
  paint-order:stroke;stroke-linejoin:round}

.mapa-ref{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  margin-top:14px;font-size:.83rem;color:var(--ink-3)}
.mapa-ref-item{display:inline-flex;align-items:center;gap:8px;
  font-variant-numeric:tabular-nums}
.mapa-ref-item i{display:block;flex:none;border-radius:50%}
.mapa-ref-item i.bolha{background:var(--laranja);opacity:.5;
  box-shadow:inset 0 0 0 1px var(--laranja-forte)}
.mapa-ref-item i.bolha.vazia{background:none;opacity:1;
  box-shadow:inset 0 0 0 1.5px var(--ink-4)}
/* O traço do rio na legenda não é um círculo: é o próprio fio. */
.mapa-ref-item i.rio{width:20px!important;height:0!important;border-radius:0;
  border-top:2px solid var(--mapa-rio)}
.mapa-ref-obs{color:var(--ink-4);font-size:.78rem}

/* ---- a lista do que não coube no recorte ---- */
.mapa-fora{
  border-radius:var(--r-sm);padding:14px 15px 6px;
  background:var(--mapa-lista);border:1px solid var(--mapa-lista-borda);
}
.mapa-fora h4{margin:0 0 4px;font-size:.9rem;font-weight:600;
  display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.mapa-fora-conta{font-size:.72rem;font-weight:500;color:var(--ink-4);
  white-space:nowrap}
.mapa-fora .fino{margin:0 0 10px;font-size:.76rem;line-height:1.45;color:var(--ink-4)}
/* A altura vem do JavaScript, casada com a do mapa, para a fileira não
   serrilhar. O que passar disso rola aqui dentro — nenhuma cidade sai
   da lista. */
.mapa-fora ul{list-style:none;margin:0;padding:0 2px 8px 0;overflow-y:auto}
.mapa-fora li{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;padding:7px 0;border-bottom:1px solid rgba(14,16,29,.055);font-size:.84rem}
.mapa-fora li:last-child{border-bottom:none}
.mapa-fora-nome{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.mapa-fora-nome i{font-style:normal;font-size:.7rem;color:var(--ink-4);margin-left:5px}
.mapa-fora-val{color:var(--ink);font-weight:600;white-space:nowrap;
  font-variant-numeric:tabular-nums}