/* ─────────────────────────────────────────────────────────────────────────
   ESPALHA ESSA — kit de interface do sistema (uma língua só)
   ─────────────────────────────────────────────────────────────────────────
   A linguagem nasceu nos mocks do chefe pro Painel de Mobilização e passou a
   valer pro produto inteiro (ordem da Marina, 18/ago): antes o painel e a
   mobilização pareciam dois sistemas.

   Quem usa: /painel (login, admin, área do candidato, ficha), /mobilizacao
   (visão geral, cidades, apoiadores, uso) e /termos.
   Fora daqui de propósito: a página da apoiadora (/c), que tem identidade
   PRÓPRIA de campanha — grito "ESPALHA ESSA IDEIA!" na cor do candidato.

   Regras da casa: cor de dado sempre em token, nunca literal na marcação;
   nome de classe é contrato com o JavaScript — renomear quebra tela.
   ───────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Nunito";
  src: url("/assets/fonts/Nunito-Variable.ttf") format("truetype-variations");
  font-weight: 200 1000; font-display: swap;
}

:root {
  /* marca */
  --c1:#2563FF; --c2:#1E3ABA; --c3:#5b8bff;
  /* superfícies e texto */
  --ink:#0D1117; --mut:#787f8c; --faint:#a4aab6;
  --line:#eceef2; --bg:#F1F5F9; --card:#fff; --trilho:#e7e9ee; --pilula:#e9efff;
  /* estados */
  --bom:#16A34A; --erro:#C0362C; --alerta:#d98a12; --roxo:#7c5cd6;
  --sombra:0 1px 2px rgba(20,30,60,.03);
  --sombra-alta:0 12px 34px rgba(20,30,60,.14);
  --corpo:"Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* apelidos dos nomes antigos: as telas do painel foram escritas com estes
     tokens, e trocar 400 usos por gosto de nome não melhora nada. */
  --tinta:var(--ink); --papel:var(--card); --fundo:var(--bg);
  --rotulo:var(--mut); --suave:var(--faint); --borda:var(--line); --chip:var(--trilho);
  --primaria:var(--c1); --secundaria:var(--c2); --destaque:var(--c3);
  --ambar:var(--alerta); --ambar-ico:var(--alerta);
  --titulo:var(--corpo);
}
/* Escuro por preferência do sistema — a menos que a pessoa tenha escolhido
   claro na mão (Ajustes). */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --c1:#5b8bff; --c2:#9db9f5; --c3:#4fb7f2;
    --ink:#f2f0ec; --mut:#a2a7ad; --faint:#7f858d;
    --line:#2b3038; --bg:#141619; --card:#202329; --trilho:#262a31; --pilula:#1d2836;
    --bom:#4fc57e; --erro:#ff8a7a; --alerta:#f0b45a; --roxo:#a58cf0;
    --sombra:0 1px 2px rgba(0,0,0,.35);
    --sombra-alta:0 12px 34px rgba(0,0,0,.5);
  }
}
/* Escolha manual vence o sistema, nos dois sentidos. */
:root[data-tema="escuro"] {
    --c1:#5b8bff; --c2:#9db9f5; --c3:#4fb7f2;
    --ink:#f2f0ec; --mut:#a2a7ad; --faint:#7f858d;
    --line:#2b3038; --bg:#141619; --card:#202329; --trilho:#262a31; --pilula:#1d2836;
    --bom:#4fc57e; --erro:#ff8a7a; --alerta:#f0b45a; --roxo:#a58cf0;
    --sombra:0 1px 2px rgba(0,0,0,.35);
    --sombra-alta:0 12px 34px rgba(0,0,0,.5);
}

* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--corpo);
       line-height:1.5; -webkit-font-smoothing:antialiased; }
a { color:var(--c1); text-decoration:none; }
button { font-family:inherit; cursor:pointer; }

/* ─── esqueleto da página ─── */
.page, .pagina { max-width:1200px; margin:0 auto; padding:22px 28px 40px; }
.card, .cartao { background:var(--card); border-radius:22px; box-shadow:var(--sombra); padding:20px 22px; }

/* ─── cabeçalho: marca · menu-pílula · chip de quem está logado ─── */
.top, .topo { display:flex; align-items:center; gap:18px; margin-bottom:26px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px;
         color:var(--ink); white-space:nowrap; }
.brand img { width:34px; height:34px; border-radius:11px; }
.menu, .abas { display:flex; align-items:center; background:var(--trilho); border-radius:999px;
               padding:4px; margin:0 auto; height:48px; }
.menu a, .abas button { border:none; background:transparent; padding:0 20px; height:40px;
        border-radius:999px; font-weight:700; font-size:13.5px; color:var(--mut);
        display:flex; align-items:center; gap:8px; white-space:nowrap; }
.menu a.on, .abas button.ativa { background:var(--card); color:var(--c1); box-shadow:0 2px 8px rgba(20,30,60,.08); }
.me { display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line);
      border-radius:999px; padding:5px 14px 5px 5px; }
.me img, .me .letra, .me .avatar { width:36px; height:36px; border-radius:50%; object-fit:cover;
      display:grid; place-items:center; color:#fff; font-weight:800; flex:0 0 auto; }
/* nowrap nas duas linhas: quebrar o nome ou o cargo faz a pílula crescer em
   altura e empurrar o resto da barra pra fora (visto em 1180px). Quem cede
   espaço numa barra apertada e o menu, nao a identificacao. */
/* Pílula só com a inicial: o vão da direita existia pro texto que não há. */
.me.so-letra { padding:5px; }
.me .n { font-weight:700; font-size:13px; line-height:1.15; white-space:nowrap; }
.me .r { font-weight:500; font-size:11.5px; color:var(--mut); white-space:nowrap; }

/* ─── saudação / título da tela ─── */
.hello { display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
         flex-wrap:wrap; margin:0 4px 22px; }
.hello h1 { margin:0; font-weight:600; font-size:34px; line-height:1.05; letter-spacing:-.01em; }
.hello p, p.sub { margin:6px 0 0; font-weight:500; font-size:14.5px; color:var(--mut); }
h1, h2, h3 { font-weight:700; }

/* ─── botões ─── */
/* Base pra QUALQUER botão: sem isto, um botão sem classe aparece com a cara
   nativa do navegador no meio de telas arredondadas. As variantes abaixo — e
   .seg/.abas/.zoom/.icone/.gal-x, de seletor mais específico — sobrescrevem. */
button { border:none; border-radius:999px; font-weight:700; font-size:13.5px;
         padding:11px 20px; background:var(--pilula); color:var(--c1); }
.btn, button.primario, .bt-claro, .btg, .mini {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:999px; font-weight:700; font-size:13.5px;
  padding:11px 20px; background:var(--pilula); color:var(--c1);
}
button.primario { background:var(--c1); color:#fff; }
.bt-claro { background:var(--card); border:1px solid var(--line); color:var(--ink); border-radius:14px; }
.btg { background:transparent; color:var(--mut); }
.mini { padding:7px 14px; font-size:12.5px; }
button:disabled { opacity:.45; cursor:not-allowed; }
button:active:not(:disabled) { transform:scale(.985); }

/* ─── formulário ─── */
/* Rótulo de campo em caixa normal: em CAIXA-ALTA com espaçamento ele grita
   mais que o próprio dado, e as telas novas (mobilização e os mocks do chefe)
   não usam isso em lugar nenhum. */
label { display:block; font-size:12.5px; font-weight:600; color:var(--mut); margin-bottom:6px; }
input, textarea, select {
  font:inherit; width:100%; padding:11px 14px; border:1px solid var(--line);
  border-radius:14px; background:var(--card); color:var(--ink);
}
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--c1); }
input:-webkit-autofill, input:-webkit-autofill:focus {
  -webkit-box-shadow:0 0 0 100px var(--card) inset; -webkit-text-fill-color:var(--ink); caret-color:var(--ink);
}
/* Rótulo de campo é etiqueta (caixa alta, pequena). Rótulo que ABRAÇA um
   controle — caixa de marcar, pincel de cor — é frase, e frase não grita. */
label:has(input[type="checkbox"]), label:has(input[type="radio"]), label.frase {
  display:flex; align-items:center; gap:10px; margin-bottom:0;
  text-transform:none; letter-spacing:0; font-size:13.5px; font-weight:600; color:var(--ink);
}
label input[type="checkbox"], label input[type="radio"] {
  width:18px; height:18px; flex:0 0 auto; margin:0; accent-color:var(--c1);
}
.campo { margin-bottom:14px; }
.ajuda, .desc { font-size:12.5px; font-weight:500; color:var(--mut); margin:4px 0 0; }
.ajuda.ruim { color:var(--erro); font-weight:700; }

/* ─── tabela ─── */
.tab, table.cidades { width:100%; border-collapse:collapse; font-size:13.5px; }
.tab th, table.cidades th { text-align:left; font-size:11px; font-weight:800; letter-spacing:.06em;
        text-transform:uppercase; color:var(--faint); padding:12px 8px 8px; }
.tab td, table.cidades td { padding:11px 8px; border-top:1px solid var(--line);
        font-weight:500; font-variant-numeric:tabular-nums; }
.tab td.num, .tab th.num, table.cidades td.num, table.cidades th.num { text-align:right; }

/* ─── etiquetas e avisos ─── */
.etiq, .chip-status { display:inline-flex; padding:4px 12px; border-radius:999px;
        font-weight:700; font-size:11.5px; background:var(--trilho); color:var(--mut); }
.etiq.no-ar { background:#e7f4ec; color:#177245; }
.etiq.suspenso { background:#fdeeee; color:var(--erro); }
.aviso { border-radius:16px; padding:12px 16px; background:var(--card); box-shadow:var(--sombra);
         border-left:5px solid var(--c1); font-size:13.5px; font-weight:500; margin-bottom:18px; }
.aviso.ruim { border-left-color:var(--erro); }
.vazio { padding:34px 20px; text-align:center; color:var(--mut); font-weight:500; }

/* ─── números / KPIs ─── */
.kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:14px; margin-bottom:14px; }
.kpi { position:relative; }
.kpi .rot, .rot { display:block; font-size:12.5px; font-weight:600; color:var(--mut); margin-bottom:8px; }
.kpi strong { font-weight:800; font-size:2rem; line-height:1; font-variant-numeric:tabular-nums; }
.kpi .chip-ico { position:absolute; top:16px; right:16px; width:38px; height:38px;
                 border-radius:12px; display:grid; place-items:center; }
.kpi .delta, .kpi-sub { display:block; margin-top:8px; font-size:12.5px; font-weight:500; color:var(--faint); }
.delta-bom { color:var(--bom); font-weight:800; }
.delta-ruim { color:var(--erro); font-weight:800; }
.ico-azul { background:color-mix(in srgb, var(--c1) 11%, var(--card)); color:var(--c1); }
.ico-verde { background:color-mix(in srgb, var(--bom) 11%, var(--card)); color:var(--bom); }
.ico-roxo { background:color-mix(in srgb, var(--roxo) 11%, var(--card)); color:var(--roxo); }
.ico-ambar { background:color-mix(in srgb, var(--alerta) 13%, var(--card)); color:var(--alerta); }

/* ─── busca em pílula ─── */
.tsearch { display:flex; align-items:center; gap:9px; background:var(--bg); border:1px solid var(--line);
           border-radius:999px; padding:0 15px; height:42px; flex:1; min-width:200px; }
.tsearch input { border:none; outline:none; background:none; padding:0; font-weight:500; font-size:13px; }

/* ─── trilho segmentado (períodos, filtros) ─── */
.seg { display:inline-flex; gap:4px; padding:4px; background:var(--trilho); border-radius:999px; }
.seg button { padding:7px 14px; border-radius:999px; font-weight:700; font-size:12.5px;
              color:var(--mut); background:transparent; border:none; }
.seg button[aria-pressed="true"], .seg button.on { background:var(--c1); color:#fff; }

/* ─── gráficos desenhados à mão (sem biblioteca) ─── */
.grafico svg { display:block; width:100%; height:auto; }
.grade-h { stroke:var(--line); stroke-width:1; stroke-dasharray:3 5; }
.rotulo-g, .grafico .rotulo { font-size:10px; fill:var(--faint); font-family:var(--corpo); }

/* ─── diálogo ─── */
dialog { border:none; border-radius:22px; box-shadow:var(--sombra-alta); background:var(--card);
         color:var(--ink); padding:24px; max-width:440px; width:calc(100% - 32px); }
dialog::backdrop { background:rgba(10,22,48,.45); }
dialog h2 { margin:0 0 8px; font-weight:700; font-size:19px; }
dialog.largo { max-width:820px; max-height:88dvh; overflow:auto; }

/* ─── espera ─── */
@keyframes girar { to { transform:rotate(360deg); } }
.carregando { display:flex; align-items:center; gap:10px; justify-content:center;
              padding:28px 12px; color:var(--mut); font-weight:500; font-size:13.5px; }
.carregando::before { content:""; width:18px; height:18px; border:3px solid var(--trilho);
              border-top-color:var(--c1); border-radius:50%; animation:girar .8s linear infinite; }
.btgira { position:relative; color:transparent !important; pointer-events:none; }
.btgira::after { content:""; position:absolute; inset:0; margin:auto; width:16px; height:16px;
              border:3px solid currentColor; border-top-color:transparent; border-radius:50%;
              color:#fff; animation:girar .8s linear infinite; }

/* ─── dica flutuante dos gráficos ─── */
.tip, .mob-tip { position:fixed; display:none; z-index:50; background:var(--ink); color:var(--bg);
       font-size:12.5px; font-weight:600; padding:8px 11px; border-radius:10px;
       pointer-events:none; box-shadow:var(--sombra-alta); }

/* ─── tela de um ato só (login, erro) ─── */
.centro { min-height:100dvh; display:grid; place-items:center; text-align:center; padding:26px; }

/* ─── gaveta do celular (o menu-pílula não cabe em tela estreita) ─── */
.hamb { display:none; border:1px solid var(--line); background:var(--card); width:44px; height:44px;
        border-radius:14px; place-items:center; cursor:pointer; flex:0 0 auto; padding:0; }
.scrim { position:fixed; inset:0; background:rgba(10,22,48,.4); z-index:59; opacity:0;
         pointer-events:none; transition:opacity .25s; }
.scrim.on { opacity:1; pointer-events:auto; }
.drawer { position:fixed; top:0; bottom:0; left:0; width:270px; background:var(--card); z-index:60;
          transform:translateX(-105%); transition:transform .28s ease; padding:22px 18px;
          display:flex; flex-direction:column; gap:4px; box-shadow:20px 0 60px rgba(10,20,50,.18); }
.drawer { visibility:hidden; }
  .drawer.open { transform:none; visibility:visible; }
.drawer button, .drawer a { display:flex; align-items:center; gap:10px; font-weight:700; font-size:14.5px;
          color:var(--mut); background:none; border:none; text-align:left; width:100%;
          padding:12px 14px; border-radius:14px; }
.drawer button.ativa, .drawer a.on { background:var(--pilula); color:var(--c1); }

/* Faixa apertada (entre a gaveta e a tela larga): quem cede espaço é o MENU,
   não a identificação nem o sair. Os rótulos ficam, só encostam mais nos
   ícones — antes disso a barra estourava e o botão de sair escapava dela. */
@media (max-width: 1240px) and (min-width: 1101px) {
  .menu a, .abas button { padding:0 12px; font-size:12.5px; gap:6px; }
}

@media (max-width: 1100px) {
  .page, .pagina { padding:16px 14px 60px; }
  .top, .topo { flex-wrap:wrap; }
  .hamb { display:grid; }
  .menu, .abas { display:none; }
  .me .txt { display:none; }
  .hello h1 { font-size:27px; }
}