/* ===== Radar Político — design system (v2: vidro fosco, paleta da bandeira) =====
   Interface: azul-marinho e verde, amarelo só como destaque. Cores de ideologia ficam restritas aos dados. */
:root, :root[data-theme="dark"] {
  --flag-green: #009C3B; --flag-yellow: #FFDF00; --flag-blue: #002776;
  --bg: #00163D; --page-gradient: linear-gradient(155deg, #00122E 0%, #00205A 52%, #013B2A 125%);
  --blob-1: rgba(32, 110, 255, .34); --blob-2: rgba(0, 200, 110, .20); --blob-3: rgba(255, 223, 0, .07);
  --surface: rgba(255, 255, 255, .065); --surface-2: rgba(255, 255, 255, .09); --surface-3: rgba(255, 255, 255, .15);
  --line: rgba(255, 255, 255, .12); --line-strong: rgba(255, 255, 255, .26);
  --text: #F2F6FF; --muted: #A9BADB;
  --primary: #1FBF63; --primary-ink: #03210F; --popover: #0A2250;
  --red: #F2677A; --blue: #6CA8FF; --yellow: #FFD84A; --green: #2FD07A; --purple: #B7A1FF;
  --shadow: 0 18px 50px -18px rgba(0, 8, 30, .75); --shadow-sm: 0 6px 22px -10px rgba(0, 8, 30, .6);
  --on-accent: #00163D; --glass: rgba(4, 22, 62, .55); --glass-border: rgba(255, 255, 255, .13);
  --blur: blur(18px) saturate(140%);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #EEF5FF; --page-gradient: linear-gradient(160deg, #FFFFFF 0%, #EAF3FF 48%, #DDF2E4 100%);
  --blob-1: rgba(70, 140, 255, .24); --blob-2: rgba(40, 190, 110, .22); --blob-3: rgba(255, 223, 0, .16);
  --surface: rgba(255, 255, 255, .62); --surface-2: rgba(255, 255, 255, .8); --surface-3: rgba(0, 39, 118, .08);
  --line: rgba(0, 39, 118, .12); --line-strong: rgba(0, 39, 118, .28);
  --text: #0A1E45; --muted: #4D6190;
  --primary: #00873A; --primary-ink: #FFFFFF; --popover: #FFFFFF;
  --red: #D33F54; --blue: #1F62D6; --yellow: #B88A00; --green: #00873A; --purple: #6D4FDB;
  --shadow: 0 18px 50px -20px rgba(0, 39, 118, .3); --shadow-sm: 0 6px 20px -10px rgba(0, 39, 118, .22);
  --on-accent: #FFFFFF; --glass: rgba(255, 255, 255, .7); --glass-border: rgba(255, 255, 255, .9);
  color-scheme: light;
}
:root {
  /* apelidos usados pelos templates antigos */
  --fundo: var(--bg); --cartao: var(--surface); --cartao2: var(--surface-2); --tinta: var(--text); --suave: var(--muted);
  --vermelho: var(--red); --azul: var(--blue); --amarelo: var(--yellow); --vivo: var(--green);
  --radius: 20px; --radius-sm: 12px; --max: 1360px;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif; --ui: Inter, "Barlow", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 130px; background: var(--bg); }
body { margin: 0; color: var(--text); font: 400 15.5px/1.55 var(--ui); -webkit-font-smoothing: antialiased; min-height: 100vh; background: var(--page-gradient) fixed; background-color: var(--bg); position: relative; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--display); margin: 0; line-height: 1.05; letter-spacing: .005em; font-weight: 700; }
button, input, select { font-family: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 8px; }
::selection { background: var(--blue); color: #fff; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ----- Ideologia: --a/--b alimentam degradês ----- */
.i-esquerda        { --a: var(--red);    --b: var(--red); }
.i-centro-esquerda { --a: var(--yellow); --b: var(--red); }
.i-centro          { --a: var(--yellow); --b: var(--yellow); }
.i-centro-direita  { --a: var(--yellow); --b: var(--blue); }
.i-direita         { --a: var(--blue);   --b: var(--blue); }
.i-indefinido      { --a: var(--muted);  --b: var(--muted); }
.grad { background: linear-gradient(90deg, var(--a), var(--b)); color: var(--on-accent); }
.txt-grad { background: linear-gradient(90deg, var(--a), var(--b)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ----- Topo ----- */
.topbar { position: sticky; top: 0; z-index: 50; background: var(--glass); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); }
.topbar-in { max-width: var(--max); margin: 0 auto; padding: 10px 28px; display: flex; align-items: center; gap: 22px; }
.marca { display: flex; align-items: center; gap: 10px; font: 700 1.55rem var(--display); letter-spacing: .01em; white-space: nowrap; }
.marca b { color: var(--yellow); }
.marca svg { width: 30px; height: 30px; flex: none; }
.nav { display: flex; gap: 4px; margin-left: 8px; }
.nav a { padding: 8px 14px; border-radius: 999px; color: var(--muted); font-weight: 600; font-size: .92rem; transition: .15s; }
.nav a:hover { color: var(--text); background: var(--surface-2); }
.nav a.ativo { color: var(--text); background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-strong); }
.topbar-dir { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.busca { position: relative; width: min(340px, 36vw); }
.busca input { width: 100%; background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 9px 44px 9px 38px; font-size: .92rem; transition: .15s; }
.busca input::placeholder { color: var(--muted); }
.busca input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(76, 141, 255, .25); background: var(--surface); }
.busca > svg { position: absolute; left: 13px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.busca kbd { position: absolute; right: 10px; top: 50%; translate: 0 -50%; font: 600 .72rem var(--ui); color: var(--muted); border: 1px solid var(--line-strong); border-radius: 6px; padding: 1px 6px; }
.resultados { position: absolute; top: calc(100% + 8px); left: 0; right: 0; min-width: 320px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; display: none; max-height: 70vh; overflow-y: auto; }
.resultados.aberto { display: block; }
.resultados a { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; padding: 9px 12px; }
.resultados a:hover, .resultados a.foco { background: var(--surface-2); }
.resultados img { width: 38px; height: 48px; object-fit: cover; object-position: 50% 18%; border-radius: 8px; background: var(--surface-3); }
.resultados b { display: block; font-weight: 600; line-height: 1.2; } .resultados small { color: var(--muted); }
.resultados .pt { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--a), var(--b)); }
.resultados .nada { padding: 16px; color: var(--muted); }
.icon-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); cursor: pointer; transition: .15s; }
.icon-btn:hover { background: var(--surface-3); } .icon-btn svg { width: 18px; height: 18px; }
.menu-btn { display: none; }
@media (max-width: 960px) {
  .topbar-in { padding: 10px 16px; gap: 12px; flex-wrap: wrap; }
  .menu-btn { display: grid; }
  .nav { display: none; order: 5; width: 100%; margin: 0; flex-direction: column; padding-top: 6px; }
  .nav.aberto { display: flex; } .nav a { padding: 12px 14px; background: var(--surface-2); border-radius: 12px; }
  .busca { width: 100%; order: 4; } .busca kbd { display: none; } .topbar-dir { flex: 1; justify-content: flex-end; }
}

main { max-width: var(--max); margin: 0 auto; padding: 28px 28px 72px; }
@media (max-width: 700px) { main { padding: 18px 16px 56px; } }
.pagina-cab { margin: 6px 0 22px; }
.pagina-cab h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.pagina-cab p { color: var(--muted); max-width: 72ch; margin: 8px 0 0; font-size: 1.02rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 700; color: var(--yellow); margin-bottom: 8px; }

/* ----- Botões e chips ----- */
.btn { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font: 600 .84rem var(--ui); cursor: pointer; transition: .15s; white-space: nowrap; }
.btn:hover { background: var(--surface-3); border-color: var(--line-strong); }
.btn.primario { background: linear-gradient(135deg, var(--blue), #6C63FF); border-color: transparent; color: #fff; }
.btn.primario:hover { filter: brightness(1.1); }
.chip { display: inline-flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); border-radius: 999px; padding: 7px 14px; font: 600 .86rem var(--ui); cursor: pointer; transition: .15s; }
.chip:hover { border-color: var(--line-strong); } .chip[aria-pressed="true"], .chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.chip i { width: 22px; height: 8px; border-radius: 4px; display: inline-block; } .chip small { opacity: .7; font-weight: 500; }
.mais { display: block; margin: 12px auto 0; background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 9px 22px; font: 600 .9rem var(--ui); cursor: pointer; transition: .15s; }
.mais:hover { background: var(--surface-3); border-color: var(--line-strong); }
.tag { display: inline-flex; align-items: center; font-size: .7rem; font-weight: 700; letter-spacing: .02em; padding: 2px 9px; border-radius: 999px; background: var(--surface-3); color: var(--text); margin-right: 6px; vertical-align: 2px; }
.tag.ok { background: rgba(52, 211, 153, .18); color: var(--green); } .tag.ruim { background: rgba(255, 84, 112, .18); color: var(--red); } .tag.parado { background: rgba(255, 201, 74, .18); color: var(--yellow); }
.v-Sim { background: rgba(52, 211, 153, .2) !important; color: var(--green) !important; } .v-Não { background: rgba(255, 84, 112, .2) !important; color: var(--red) !important; }
.selo { display: inline-block; padding: 4px 14px; border-radius: 999px; font: 700 .8rem var(--ui); margin-right: 8px; }
.aviso { background: rgba(255, 201, 74, .09); border: 1px solid rgba(255, 201, 74, .35); border-radius: 14px; padding: 12px 16px; font-size: .88rem; color: var(--text); margin-top: 14px; }
.nota { color: var(--muted); font-size: .88rem; margin: 2px 0 14px; }
.vazio { color: var(--muted); padding: 14px 0; text-align: center; }
code { background: var(--surface-2); border: 1px solid var(--line); padding: 1px 6px; border-radius: 6px; font-size: .85em; }

/* ----- Layout de painel + filtros ----- */
.painel { display: grid; grid-template-columns: 290px 1fr; gap: 24px; align-items: start; }
.filtros { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; position: sticky; top: 84px; display: grid; gap: 14px; box-shadow: var(--shadow-sm); }
.filtros label, .campo label { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; display: block; margin-bottom: 5px; }
.filtros input, .filtros select, .campo select, .campo input, select.sel { width: 100%; background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: .92rem; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2396A4C6' stroke-width='2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px !important; }
.filtros input:focus, .filtros select:focus, .campo select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(76, 141, 255, .22); }
.legenda { display: grid; gap: 6px; }
.legenda button { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); padding: 8px 10px; border-radius: 12px; font: 600 .88rem var(--ui); cursor: pointer; text-align: left; transition: .15s; }
.legenda button:hover { border-color: var(--line-strong); } .legenda button[aria-pressed="true"] { border-color: var(--text); background: var(--surface-3); }
.legenda i { width: 28px; height: 10px; border-radius: 5px; flex: none; } .legenda span { margin-left: auto; color: var(--muted); font-weight: 500; }
@media (max-width: 960px) { .painel { grid-template-columns: 1fr; } .filtros { position: static; } }

/* ----- Cards genéricos ----- */
.sec, .mapa-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
.sec h2 { font-size: 1.7rem; margin-bottom: 4px; } .sec h3 { font-size: 1.2rem; margin: 6px 0 8px; }
.sec.larga { grid-column: 1 / -1; }
.colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 18px; margin-top: 18px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 16px; }
.kpi { background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.kpi b { display: block; font: 700 2rem var(--display); line-height: 1.05; font-variant-numeric: tabular-nums; }
.kpi small { color: var(--muted); font-size: .8rem; display: block; margin-top: 4px; line-height: 1.3; }
.linha { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .93rem; }
.linha:last-child { border: 0; } .linha span:last-child { color: var(--muted); text-align: right; }
.barra { height: 8px; border-radius: 5px; background: var(--surface-3); overflow: hidden; display: flex; }
.barra i { display: block; height: 100%; border-radius: 5px; }
.tempo { display: flex; height: 38px; border-radius: 12px; overflow: hidden; margin: 8px 0 12px; gap: 2px; }
.tempo div { display: grid; place-items: center; font: 700 .78rem var(--ui); color: #07102A; min-width: 0; overflow: hidden; white-space: nowrap; padding: 0 6px; }
.anos { display: grid; gap: 8px; } .ano { display: grid; grid-template-columns: 52px 1fr 130px; gap: 12px; align-items: center; font-variant-numeric: tabular-nums; font-size: .92rem; } .ano b { text-align: right; }
.proj { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; gap: 5px; }
.proj b { font: 700 1.2rem var(--display); display: block; } .proj p { margin: 0; color: var(--muted); font-size: .9rem; }
.votos { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .votos span { font-size: .72rem; padding: 2px 8px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); }
.sel-voto { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; align-items: center; }
.tab { width: 100%; border-collapse: collapse; font-size: .92rem; } .tab td, .tab th { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: right; } .tab td:first-child, .tab th:first-child { text-align: left; } .tab th { color: var(--muted); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.rk-det { background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; padding: 8px 18px 16px; margin: 4px 0 12px; }
.rk-det h3 { font-size: 1.2rem; margin: 10px 0 6px; }

/* ----- Home: hero e cards ----- */
.hero { position: relative; border: 1px solid var(--line); border-radius: 28px; padding: clamp(26px, 5vw, 52px); overflow: hidden; background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%); box-shadow: var(--shadow); margin-bottom: 26px; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(520px 260px at 90% 0%, rgba(255, 84, 112, .22), transparent 70%), radial-gradient(520px 260px at 60% 120%, rgba(76, 141, 255, .26), transparent 70%), radial-gradient(420px 220px at 10% 120%, rgba(255, 201, 74, .18), transparent 70%); pointer-events: none; }
.hero > * { position: relative; }
.hero h1 { font-size: clamp(2.6rem, 6.4vw, 4.6rem); max-width: 16ch; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--red), var(--yellow), var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { color: var(--muted); max-width: 62ch; font-size: 1.05rem; margin: 14px 0 22px; }
.hero-busca { max-width: 560px; }
.hero-busca .busca { width: 100%; } .hero-busca .busca input { padding: 15px 48px 15px 44px; font-size: 1.02rem; background: var(--surface); }
.hero-busca .busca > svg { left: 16px; width: 18px; height: 18px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 26px; max-width: 760px; }
.stat { background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px; backdrop-filter: blur(4px); }
.stat b { display: block; font: 700 2rem var(--display); line-height: 1; } .stat small { color: var(--muted); font-size: .78rem; }
.espectro { display: flex; height: 10px; border-radius: 6px; overflow: hidden; gap: 2px; margin: 4px 0 16px; }
.espectro i { display: block; height: 100%; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 18px; }
.toolbar .campo { min-width: 150px; } .toolbar .grow { flex: 1; min-width: 230px; }
.resumo-res { color: var(--muted); font-size: .9rem; margin: 0 0 14px; }
.grupo { margin-bottom: 36px; }
.grupo-cab { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding-bottom: 10px; position: relative; }
.grupo-cab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--a), var(--b)); opacity: .9; }
.grupo-cab h2 { font-size: 2.1rem; } .grupo-cab small { color: var(--muted); margin-left: auto; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 14px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 10px; display: grid; gap: 8px; position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s, border-color .2s; box-shadow: var(--shadow-sm); }
.card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--a), var(--b)); z-index: 2; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.card .foto { position: relative; border-radius: 12px; overflow: hidden; margin-top: 4px; aspect-ratio: 3/4; background: var(--surface-3); }
.card .foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; display: block; transition: transform .35s; }
.card:hover .foto img { transform: scale(1.05); }
.card .foto::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px transparent; border-radius: 12px; }
.card b { font: 700 1.15rem var(--display); line-height: 1.1; letter-spacing: .01em; }
.card small { color: var(--muted); font-size: .8rem; display: flex; align-items: center; gap: 6px; }
.card .logo { width: auto; max-width: 70%; height: 28px; justify-self: center; }
.card .ver { position: absolute; left: 10px; right: 10px; bottom: 10px; }
.cardlogo { display: flex; justify-content: center; min-height: 28px; }
.skel { position: relative; overflow: hidden; background: var(--surface-2); border-radius: 12px; }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }

@media (max-width: 700px) { .kpis { grid-template-columns: repeat(2, 1fr); } .kpi b { font-size: 1.6rem; } .heroi .kpi b { font-size: 1.6rem; } .stats { grid-template-columns: repeat(2, 1fr); } .stat b { font-size: 1.7rem; } .hero { padding: 22px 18px; border-radius: 22px; } .grade { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .toolbar .campo { flex: 1 1 140px; } }

/* ----- Perfil ----- */
.voltar { color: var(--muted); display: inline-flex; gap: 6px; margin-bottom: 14px; font-weight: 600; font-size: .9rem; } .voltar:hover { color: var(--text); }
.heroi { display: grid; grid-template-columns: 240px 1fr; gap: 30px; background: linear-gradient(135deg, var(--surface), var(--surface-2)); border: 1px solid var(--line); border-radius: 28px; padding: 28px; position: relative; overflow: hidden; box-shadow: var(--shadow); }
.heroi::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 8px; background: linear-gradient(90deg, var(--a), var(--b)); }
.heroi::after { content: ""; position: absolute; width: 520px; height: 520px; right: -140px; top: -220px; background: radial-gradient(circle, var(--a), transparent 65%); opacity: .12; pointer-events: none; }
.heroi > * { position: relative; z-index: 1; }
.heroi-foto { display: grid; gap: 12px; align-content: start; justify-items: center; }
.heroi-foto > img:not(.logo) { width: 240px; aspect-ratio: 3/4; object-fit: cover; object-position: 50% 15%; border-radius: 20px; border: 4px solid transparent; background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, linear-gradient(135deg, var(--a), var(--b)) border-box; box-shadow: var(--shadow); }
.heroi h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); margin: 8px 0 4px; }
.meta { color: var(--muted); margin: 6px 0 14px; max-width: 70ch; }
.heroi .btn { margin: 0 6px 6px 0; }
.heroi .kpi b { font-size: 1.85rem; white-space: nowrap; }
.subnav { position: sticky; top: 62px; z-index: 40; margin: 18px -28px 0; padding: 10px 28px; background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { padding: 7px 14px; border-radius: 999px; color: var(--muted); font-weight: 600; font-size: .86rem; white-space: nowrap; transition: .15s; }
.subnav a:hover { color: var(--text); background: var(--surface-2); } .subnav a.ativo { color: var(--text); background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-strong); }
.sec[id] { scroll-margin-top: 130px; }
@media (max-width: 960px) { .heroi { grid-template-columns: 1fr; padding: 20px; } .heroi-foto > img:not(.logo) { width: 150px; } .subnav { margin: 14px -16px 0; padding: 10px 16px; top: 108px; } }
@media (max-width: 960px) { html { scroll-padding-top: 170px; } }

/* ----- Logos de partido ----- */
.logo { background: #fff !important; border: 0 !important; border-radius: 6px !important; object-fit: contain !important; padding: 2px 6px; box-shadow: var(--shadow-sm); }
.logo-badge { display: inline-block; color: var(--on-accent); font: 700 .82rem var(--display); letter-spacing: .05em; padding: 3px 12px; border-radius: 7px; text-align: center; white-space: nowrap; }
.heroi .logo { width: auto; max-width: 190px; height: 50px; } .heroi .logo-badge { font-size: 1.25rem; padding: 8px 22px; }
.card .logo-badge { justify-self: center; }

/* ----- Ranking ----- */
.rk { border-bottom: 1px solid var(--line); }
.rk-lin { display: grid; grid-template-columns: 44px 58px 1fr auto; gap: 16px; align-items: center; padding: 12px 10px; cursor: pointer; border-radius: 14px; transition: background .15s; }
.rk-lin:hover { background: var(--surface); }
.rk .pos { font: 700 1.7rem var(--display); color: var(--muted); text-align: center; }
.rk:nth-child(-n+3) .pos { color: var(--yellow); }
.rk-foto { display: grid; justify-items: center; gap: 5px; }
.rk-foto > img:not(.logo) { width: 58px; height: 72px; object-fit: cover; object-position: 50% 15%; border-radius: 12px; border: 3px solid transparent; background: linear-gradient(var(--surface-3), var(--surface-3)) padding-box, linear-gradient(135deg, var(--a), var(--b)) border-box; }
.rk .logo { max-width: 56px; height: 18px; padding: 1px 4px; } .rk .logo-badge { font-size: .65rem; padding: 1px 6px; }
.rk-nome b { font: 700 1.25rem var(--display); display: block; } .rk-nome small { color: var(--muted); display: block; margin-bottom: 6px; }
.rk-val { font: 700 1.7rem var(--display); font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .rk-lin { grid-template-columns: 30px 48px 1fr; gap: 10px; } .rk-val { grid-column: 2 / -1; } }

/* ----- Rodapé ----- */
.rodape { max-width: var(--max); margin: 0 auto; color: var(--muted); font-size: .82rem; padding: 26px 28px 44px; border-top: 1px solid var(--line); }
.rodape a { text-decoration: underline; text-underline-offset: 3px; }
.rodape .rodape-links { margin-top: 10px; display: flex; gap: 16px; flex-wrap: wrap; }
.topo { display: none; }

/* ----- Impressão ----- */
@media print { .topbar, .subnav, #imprimir, .busca { display: none !important; } body { background: #fff; color: #000; } }

/* logos maiores no ranking de partidos */
#rank .rk .logo { height: 36px; max-width: 70px; padding: 3px 6px; } #rank .rk .logo-badge { font-size: .85rem; padding: 4px 10px; }
#rank .rk-lin { grid-template-columns: 44px 76px 1fr auto; }

/* ===================== v2: vidro fosco, sobriedade ===================== */
/* luz de fundo (como no sncr-suite): blobs fixos atrás do conteúdo */
body::before, body::after { content: ""; position: fixed; z-index: -1; border-radius: 50%; filter: blur(34px); pointer-events: none; }
body::before { width: 620px; height: 620px; top: -220px; right: -140px; background: radial-gradient(circle, var(--blob-1), transparent 70%); }
body::after { width: 540px; height: 540px; bottom: -220px; left: 18%; background: radial-gradient(circle, var(--blob-2), transparent 70%); }
main::before { content: ""; position: fixed; z-index: -1; width: 380px; height: 380px; top: 38%; left: -160px; border-radius: 50%; filter: blur(40px); background: radial-gradient(circle, var(--blob-3), transparent 70%); pointer-events: none; }

/* superfícies de vidro */
.sec, .mapa-box, .filtros, .card, .kpi, .heroi, .hero, .stat, .rk-det, .mapa-cab, .ind, .legenda button, .aviso, .topbar, .subnav {
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.sec, .mapa-box, .filtros, .card, .heroi, .hero, .mapa-cab, .ind { border-color: var(--glass-border); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .06); }
:root[data-theme="light"] .sec, :root[data-theme="light"] .mapa-box, :root[data-theme="light"] .filtros, :root[data-theme="light"] .card, :root[data-theme="light"] .heroi, :root[data-theme="light"] .hero { box-shadow: var(--shadow-sm); }
.hero, .heroi { background: linear-gradient(135deg, var(--surface-2), var(--surface)); box-shadow: var(--shadow); }
.kpi, .stat { background: var(--surface); border-color: var(--line); }
.resultados, #tip { background: var(--popover) !important; backdrop-filter: none; }
.topbar { background: var(--glass); border-bottom-color: var(--glass-border); }
.subnav { background: var(--glass); }

/* botões de vidro */
.btn, .chip, .mais, .icon-btn, .legenda button, .filtros input, .filtros select, .campo select, .campo input, select.sel, .busca input {
  backdrop-filter: blur(10px) saturate(130%); -webkit-backdrop-filter: blur(10px) saturate(130%);
}
.btn, .chip, .mais, .icon-btn { background: var(--surface-2); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.btn:hover, .chip:hover, .mais:hover, .icon-btn:hover { background: var(--surface-3); border-color: var(--line-strong); transform: translateY(-1px); }
.btn.primario, .chip[aria-pressed="true"], .chip.on {
  background-image: linear-gradient(180deg, color-mix(in oklab, var(--primary) 82%, white), var(--primary)); background-color: var(--primary);
  color: var(--primary-ink); border-color: transparent; box-shadow: 0 8px 20px -6px color-mix(in oklab, var(--primary) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.legenda button[aria-pressed="true"] { background: var(--surface-3); border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 35%, transparent); }
.nav a.ativo, .subnav a.ativo { color: var(--text); background: color-mix(in oklab, var(--primary) 20%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary) 55%, transparent); }
.nav a:hover, .subnav a:hover { background: var(--surface-2); }
.busca input, .filtros input, .filtros select, .campo select, .campo input { background: var(--surface-2); border-color: var(--glass-border); }
.busca input:focus, .filtros input:focus, .filtros select:focus, .campo select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 28%, transparent); }
::selection { background: var(--primary); color: var(--primary-ink); }
:focus-visible { outline-color: var(--primary); }

/* marca */
.marca { gap: 11px; text-transform: uppercase; font-weight: 800; letter-spacing: .05em; font-size: 1.28rem; line-height: 1; }
.marca b { color: var(--primary); }
.marca .lock { display: grid; gap: 4px; }
.marca small { font: 500 .56rem var(--ui); letter-spacing: .26em; color: var(--muted); }
.marca svg { width: 36px; height: 36px; color: var(--primary); }
@media (max-width: 520px) { .marca small { display: none; } .marca svg { width: 32px; height: 32px; } }

/* sobriedade: nomes sem degradê, ideologia só como acento */
.txt-grad { background: none; -webkit-text-fill-color: currentColor; color: var(--text); }
.grupo-cab h2::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 10px; vertical-align: 2px; background: linear-gradient(135deg, var(--a), var(--b)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--a) 28%, transparent); }
.grupo-cab::after { height: 2px; opacity: .55; }
.card::before { height: 3px; } .heroi::before { height: 4px; }
.heroi::after { display: none; }
.heroi h1 { text-shadow: none; }
.hero::before { background: radial-gradient(520px 260px at 92% 0%, rgba(32, 110, 255, .28), transparent 70%), radial-gradient(480px 260px at 55% 125%, rgba(0, 200, 110, .22), transparent 70%), radial-gradient(360px 200px at 8% 120%, rgba(255, 223, 0, .10), transparent 70%); }
.hero h1 em { background: linear-gradient(90deg, var(--flag-yellow), #35D07F); -webkit-background-clip: text; background-clip: text; }
:root[data-theme="light"] .hero h1 em { background: linear-gradient(90deg, #B58A00, #00873A); -webkit-background-clip: text; background-clip: text; }
.eyebrow { color: var(--primary); }
.espectro { height: 6px; opacity: .9; }
.rk:nth-child(-n+3) .pos { color: var(--primary); }
.heroi-foto > img:not(.logo), .rk-foto > img:not(.logo) { background: linear-gradient(var(--surface-3), var(--surface-3)) padding-box, linear-gradient(135deg, var(--a), var(--b)) border-box; }
.aviso { background: color-mix(in oklab, var(--yellow) 10%, transparent); border-color: color-mix(in oklab, var(--yellow) 38%, transparent); }
.logo { background: #fff !important; }
.skel { background: var(--surface-2); }
.rodape { border-top-color: var(--glass-border); }

.rodape .direitos { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); text-align: center; font-size: .8rem; }
.rodape .direitos a { font-weight: 600; color: var(--text); }
@media print { .rodape .rodape-links { display: none; } }

/* gráfico de projeção */
.proj-legenda { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .8rem; color: var(--muted); margin: 6px 0 10px; }
.proj-legenda span { display: inline-flex; align-items: center; gap: 7px; }
.proj-legenda i { display: inline-block; }
.proj-legenda .l-real { width: 22px; height: 3px; border-radius: 2px; background: var(--text); }
.proj-legenda .l-proj { width: 22px; height: 0; border-top: 3px dotted var(--text); }
.proj-legenda .l-b50 { width: 16px; height: 10px; border-radius: 3px; background: color-mix(in oklab, var(--text) 38%, transparent); }
.proj-legenda .l-b80 { width: 16px; height: 10px; border-radius: 3px; background: color-mix(in oklab, var(--text) 16%, transparent); }
.proj-legenda .l-cen { width: 22px; height: 0; border-top: 2px dashed var(--yellow); }
.proj-tip { position: absolute; z-index: 5; min-width: 190px; max-width: 230px; pointer-events: none; background: var(--popover); border: 1px solid var(--line-strong); border-radius: 14px; padding: 10px 14px; box-shadow: var(--shadow); display: grid; gap: 2px; }
.proj-tip b { font: 700 1.3rem var(--display); } .proj-tip span { color: var(--muted); font-size: .78rem; } .proj-tip strong { font: 700 1.15rem var(--display); }
.proj-tip small { color: var(--muted); font-size: .76rem; line-height: 1.3; }
.proj-tip[hidden] { display: none; }

/* gráficos */
.chart-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .8rem; color: var(--muted); margin: 4px 0 8px; }
.chart-legenda span { display: inline-flex; align-items: center; gap: 7px; } .chart-legenda i { width: 11px; height: 11px; border-radius: 4px; display: inline-block; }
.chart-tip { position: absolute; z-index: 6; min-width: 200px; max-width: 280px; pointer-events: none; background: var(--popover); border: 1px solid var(--line-strong); border-radius: 14px; padding: 10px 14px; box-shadow: var(--shadow); font-size: .82rem; }
.chart-tip[hidden] { display: none; }
.chart-tip b { display: block; font: 700 1.25rem var(--display); margin-bottom: 4px; }
.chart-tip .lin { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; padding: 1px 0; } .chart-tip .lin i { width: 10px; height: 10px; border-radius: 3px; }
.chart-tip .lin strong { font-variant-numeric: tabular-nums; } .chart-tip .lin span { color: var(--muted); }
.chart-tip .tot { grid-template-columns: 1fr auto; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 5px; } .chart-tip .tot span { color: var(--text); font-weight: 700; }
.chart-tip small { display: block; color: var(--muted); margin-top: 4px; }
.chart svg .b { transition: opacity .12s; }
.rosca { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; justify-content: center; }
.rosca-leg { display: grid; gap: 8px; min-width: 220px; flex: 1; }
.rosca-leg .lin { display: grid; grid-template-columns: 12px 1fr auto 44px; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); transition: .12s; }
.rosca-leg .lin i { width: 12px; height: 12px; border-radius: 4px; } .rosca-leg .lin strong { font-variant-numeric: tabular-nums; } .rosca-leg .lin em { font-style: normal; color: var(--muted); text-align: right; font-size: .85rem; }
.gauges { display: grid; gap: 14px; } .medidor { display: flex; align-items: center; gap: 16px; padding: 10px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.medidor b { display: block; font: 700 1.15rem var(--display); } .medidor small { color: var(--muted); font-size: .8rem; line-height: 1.3; display: block; }

.anos .barra i { background: linear-gradient(90deg, var(--primary), color-mix(in oklab, var(--primary) 55%, white)); }

/* =====================================================================
   v3 — LED / neon futurista (inspirado no SNCR Suite, cores vivas)
   ===================================================================== */
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
:root, :root[data-theme="dark"] {
  --bg: #020817; --page-gradient: linear-gradient(180deg, #020817 0%, #03112F 55%, #02161F 130%);
  --surface: rgba(255, 255, 255, .045); --surface-2: rgba(255, 255, 255, .075); --surface-3: rgba(255, 255, 255, .13);
  --line: rgba(130, 170, 255, .15); --line-strong: rgba(130, 170, 255, .36); --glass-border: rgba(150, 190, 255, .2);
  --text: #F5F9FF; --muted: #9DB0D6; --popover: #061230; --solid: #06122E;
  --primary: #19F58B; --primary-ink: #021A0E; --neon-yellow: #FFE600; --neon-blue: #2F8BFF; --cyan: #22E3FF;
  --red: #FF4D7A; --blue: #4DA3FF; --yellow: #FFE24A; --green: #19F58B; --purple: #B58CFF;
  --glass: rgba(3, 12, 36, .6); --on-accent: #021A0E;
  --glow-a: rgba(25, 245, 139, .38); --glow-b: rgba(47, 139, 255, .5); --glow-c: rgba(255, 230, 0, .16); --grade: rgba(120, 170, 255, .08);
  --display: "Space Grotesk", Inter, system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; --logo: "Barlow Condensed", "Arial Narrow", sans-serif;
}
:root[data-theme="light"] {
  --bg: #F2F7FF; --page-gradient: linear-gradient(180deg, #FFFFFF 0%, #EDF4FF 55%, #E6F7EE 130%);
  --surface: rgba(255, 255, 255, .66); --surface-2: rgba(255, 255, 255, .85); --surface-3: rgba(0, 39, 118, .08);
  --line: rgba(0, 39, 118, .12); --line-strong: rgba(0, 39, 118, .3); --glass-border: rgba(255, 255, 255, .95);
  --text: #07173F; --muted: #4A5E8F; --popover: #FFFFFF; --solid: #FFFFFF;
  --primary: #00B25B; --primary-ink: #FFFFFF; --neon-yellow: #E0A800; --neon-blue: #1F6BFF; --cyan: #0098C4;
  --red: #E0305A; --blue: #1F6BFF; --yellow: #B58500; --green: #00B25B; --purple: #7A52E8;
  --glass: rgba(255, 255, 255, .75); --on-accent: #FFFFFF;
  --glow-a: rgba(0, 190, 100, .22); --glow-b: rgba(31, 107, 255, .2); --glow-c: rgba(255, 210, 0, .22); --grade: rgba(0, 39, 118, .06);
}
body { font-family: var(--ui); }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.025em; font-weight: 700; }
.marca { font-family: var(--logo); }
body::before, body::after, main::before { display: none !important; }

/* fundo: aurora animada + grade que se dissolve nas bordas */
.fx { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fx::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, var(--grade) 1px, transparent 1px), linear-gradient(to bottom, var(--grade) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 25%, transparent 78%); mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 25%, transparent 78%); }
.aur { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .9; animation: flutuar 22s ease-in-out infinite alternate; }
.a1 { width: 620px; height: 620px; left: -160px; top: -180px; background: radial-gradient(circle, var(--glow-a), transparent 68%); }
.a2 { width: 720px; height: 720px; right: -220px; top: 4%; background: radial-gradient(circle, var(--glow-b), transparent 68%); animation-duration: 28s; animation-direction: alternate-reverse; }
.a3 { width: 560px; height: 560px; left: 28%; bottom: -260px; background: radial-gradient(circle, var(--glow-c), transparent 68%); animation-duration: 25s; }
@keyframes flutuar { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(60px, 40px, 0) scale(1.12); } }

/* topo com faixa LED */
.topbar { background: var(--glass); border-bottom: 1px solid var(--glass-border); }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, #19F58B, #FFE600, #2F8BFF, #22E3FF, #19F58B); background-size: 300% 100%; animation: ledflow 9s linear infinite; box-shadow: 0 0 14px rgba(25, 245, 139, .55), 0 0 30px rgba(47, 139, 255, .3); }
:root[data-theme="light"] .topbar::after { box-shadow: none; opacity: .85; }
@keyframes ledflow { to { background-position: 300% 0; } }
.marca svg { filter: drop-shadow(0 0 10px color-mix(in oklab, var(--primary) 55%, transparent)); }
.marca b { text-shadow: 0 0 16px color-mix(in oklab, var(--primary) 55%, transparent); }
.nav a.ativo, .subnav a.ativo { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary) 60%, transparent), 0 0 18px -4px color-mix(in oklab, var(--primary) 60%, transparent); }

/* holofote que segue o cursor */
.glow { position: relative; --mx: 50%; --my: 0%; }
.glow::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(380px circle at var(--mx) var(--my), color-mix(in oklab, var(--spot, var(--primary)) 20%, transparent), transparent 62%); }
.glow:hover::after { opacity: 1; }
.heroi.glow::after { display: block; }
.sec:hover, .feat:hover, .mapa-box:hover { border-color: color-mix(in oklab, var(--primary) 38%, var(--glass-border)); }

/* cartões: borda que acende na cor da ideologia */
.card { --spot: var(--a); }
.card:hover { border-color: color-mix(in oklab, var(--a) 70%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--a) 40%, transparent), 0 18px 50px -14px color-mix(in oklab, var(--a) 60%, transparent); }
.card::before { height: 3px; box-shadow: 0 0 12px color-mix(in oklab, var(--a) 70%, transparent); }
.card .foto { box-shadow: 0 0 0 1px var(--line); } .card:hover .foto { box-shadow: 0 0 0 2px color-mix(in oklab, var(--a) 70%, transparent), 0 0 26px -4px color-mix(in oklab, var(--a) 70%, transparent); }
.heroi-foto > img:not(.logo) { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 0 46px -6px color-mix(in oklab, var(--a) 65%, transparent); }
.heroi::before { height: 3px; box-shadow: 0 0 18px color-mix(in oklab, var(--a) 75%, transparent); }

/* botões neon e vidro */
.btn-neon { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 14px; font: 700 1rem var(--ui); color: var(--primary-ink); background: linear-gradient(135deg, #3DFFA2, var(--primary) 55%, #00D26A); border: 1px solid rgba(255, 255, 255, .35); box-shadow: 0 0 0 1px rgba(255, 255, 255, .15) inset, 0 10px 34px -6px color-mix(in oklab, var(--primary) 70%, transparent), 0 0 50px -10px color-mix(in oklab, var(--primary) 70%, transparent); transition: transform .18s, box-shadow .18s; cursor: pointer; }
.btn-neon svg { width: 18px; height: 18px; transition: transform .18s; } .btn-neon:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 14px 44px -6px color-mix(in oklab, var(--primary) 85%, transparent), 0 0 70px -8px color-mix(in oklab, var(--primary) 80%, transparent); } .btn-neon:hover svg { transform: translateX(4px); }
.btn-glass { display: inline-flex; align-items: center; padding: 14px 24px; border-radius: 14px; font: 600 1rem var(--ui); color: var(--text); background: var(--surface-2); border: 1px solid var(--glass-border); backdrop-filter: blur(12px); transition: .18s; }
.btn-glass:hover { border-color: color-mix(in oklab, var(--primary) 60%, transparent); box-shadow: 0 0 26px -6px color-mix(in oklab, var(--primary) 55%, transparent); transform: translateY(-2px); }
.btn.primario, .chip[aria-pressed="true"], .chip.on { background-image: linear-gradient(135deg, #3DFFA2, var(--primary)); box-shadow: 0 0 22px -4px color-mix(in oklab, var(--primary) 65%, transparent), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn:hover, .chip:hover, .mais:hover { border-color: color-mix(in oklab, var(--primary) 55%, transparent); box-shadow: 0 0 20px -6px color-mix(in oklab, var(--primary) 50%, transparent); }

/* hero da home */
.hero2 { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center; padding: 30px 0 18px; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font: 500 .72rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--primary); padding: 7px 14px; border-radius: 999px; background: color-mix(in oklab, var(--primary) 10%, transparent); border: 1px solid color-mix(in oklab, var(--primary) 35%, transparent); }
.led { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 10px var(--primary); animation: pulso 1.8s ease-out infinite; flex: none; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--primary) 70%, transparent), 0 0 10px var(--primary); } 100% { box-shadow: 0 0 0 12px transparent, 0 0 10px var(--primary); } }
.hero2 h1 { font-size: clamp(2.6rem, 5.6vw, 4.7rem); line-height: 1.02; margin: 20px 0 18px; letter-spacing: -.035em; }
.neon { display: inline-block; background: linear-gradient(90deg, #19F58B, #E8FF3A 60%, #FFE600); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(25, 245, 139, .45)); transition: opacity .38s, transform .38s, filter .38s; }
.neon.sai { opacity: 0; transform: translateY(14px); filter: blur(6px) drop-shadow(0 0 18px rgba(25, 245, 139, .45)); }
:root[data-theme="light"] .neon { background-image: linear-gradient(90deg, #00A855, #5A9A00 60%, #B58500); filter: none; }
.hero2 p { color: var(--muted); font-size: 1.08rem; max-width: 60ch; margin: 0 0 26px; } .hero2 p b { color: var(--text); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.hero2 .hero-busca { max-width: 520px; margin-bottom: 20px; }
.hero2 .hero-busca .busca input { background: linear-gradient(var(--solid), var(--solid)) padding-box, conic-gradient(from var(--ang), #19F58B, #FFE600, #2F8BFF, #22E3FF, #19F58B) border-box; border: 1.5px solid transparent; animation: giro 7s linear infinite; padding: 15px 52px 15px 46px; font-size: 1.02rem; border-radius: 16px; }
@keyframes giro { to { --ang: 360deg; } }
.checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; color: var(--muted); font-size: .92rem; }
.checks li { display: flex; align-items: center; gap: 9px; } .checks li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; flex: none; background: color-mix(in oklab, var(--primary) 18%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2319F58B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8.5 2.6 2.6L12 5.5'/%3E%3C/svg%3E") center/12px no-repeat; box-shadow: 0 0 10px -2px var(--primary); }
.hero2-r { display: grid; gap: 14px; }
.feat { display: grid; grid-template-columns: 54px 1fr; gap: 16px; align-items: center; padding: 18px 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--glass-border); backdrop-filter: blur(16px) saturate(140%); box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s, border-color .2s; }
.feat:hover { transform: translateX(-6px); box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 35%, transparent), 0 18px 50px -16px color-mix(in oklab, var(--primary) 50%, transparent); }
.feat .ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; color: var(--primary); background: linear-gradient(145deg, color-mix(in oklab, var(--primary) 22%, transparent), color-mix(in oklab, var(--neon-blue) 18%, transparent)); border: 1px solid color-mix(in oklab, var(--primary) 40%, transparent); box-shadow: 0 0 24px -6px color-mix(in oklab, var(--primary) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .14); }
.feat .ico svg { width: 26px; height: 26px; filter: drop-shadow(0 0 6px currentColor); }
.feat b { display: block; font: 700 1.15rem var(--display); letter-spacing: -.01em; } .feat small { color: var(--muted); font-size: .88rem; line-height: 1.4; display: block; margin-top: 2px; }
@media (max-width: 980px) { .hero2 { grid-template-columns: 1fr; gap: 28px; } .feat:hover { transform: translateY(-3px); } }
@media (max-width: 560px) { .checks { grid-template-columns: 1fr; } .cta > * { flex: 1 1 100%; justify-content: center; } }

/* painel de números e ticker LED */
.stats { max-width: none; margin: 18px 0 0; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.stat { border-radius: 18px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--glass-border); }
.stat b { font: 700 2.5rem var(--display); letter-spacing: -.03em; background: linear-gradient(90deg, #fff, color-mix(in oklab, var(--primary) 70%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 14px color-mix(in oklab, var(--primary) 45%, transparent)); }
:root[data-theme="light"] .stat b { background-image: linear-gradient(90deg, #07173F, #00A855); filter: none; }
.stat small { font: 500 .7rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ticker { margin: 22px 0 28px; overflow: hidden; border-block: 1px solid var(--line); background: color-mix(in oklab, var(--primary) 4%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.ticker-in { display: flex; gap: 46px; width: max-content; padding: 11px 0; animation: marquee 48s linear infinite; font: 500 .78rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ticker-in span { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; } .ticker-in span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 10px var(--primary); }
.ticker-in b { color: var(--text); text-shadow: 0 0 12px color-mix(in oklab, var(--primary) 50%, transparent); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* títulos, rótulos e números no estilo HUD */
.sec h2::before { content: ""; display: inline-block; width: 4px; height: .85em; border-radius: 3px; margin-right: 11px; vertical-align: -.08em; background: linear-gradient(var(--primary), var(--neon-blue)); box-shadow: 0 0 14px var(--primary); }
.eyebrow, .filtros label, .campo label, .tab th { font-family: var(--mono); letter-spacing: .12em; font-weight: 500; }
.kpi b, .rk-val, .rk .pos { font-family: var(--display); letter-spacing: -.03em; }
.kpi b { font-size: 1.85rem; } .heroi .kpi b { font-size: 1.7rem; }
.kpi { border-radius: 16px; } .kpi small { font-size: .78rem; }
.heroi h1, .pagina-cab h1 { font-size: clamp(2.2rem, 4.6vw, 3.7rem); letter-spacing: -.035em; }
.grupo-cab h2 { font-size: 1.9rem; } .rk-nome b, .proj b, .card b, .feat b, .medidor b, .proj-tip b, .chart-tip b { font-family: var(--display); letter-spacing: -.01em; }
.card b { font-size: 1rem; line-height: 1.2; } .rk-nome b { font-size: 1.1rem; } .rk-val { font-size: 1.45rem; } .rk .pos { font-size: 1.4rem; }
.espectro { height: 5px; box-shadow: 0 0 18px -2px rgba(47, 139, 255, .5); } .espectro i { box-shadow: 0 0 10px currentColor; }
.barra i { box-shadow: 0 0 12px -2px currentColor; }
.hero { display: none; }
.rodape .direitos a { text-shadow: 0 0 12px color-mix(in oklab, var(--primary) 50%, transparent); }
@media print { .fx, .ticker { display: none !important; } }

.busca > svg { z-index: 1; }
.a1 { opacity: 1; width: 760px; height: 760px; } .a2 { opacity: 1; } .a3 { opacity: 1; }
:root[data-theme="dark"] { --glow-a: rgba(25, 245, 139, .5); --glow-b: rgba(47, 139, 255, .62); --glow-c: rgba(255, 230, 0, .2); --grade: rgba(130, 180, 255, .11); }
html { background: var(--page-gradient) fixed; background-color: var(--bg); }
body { background: transparent !important; }
:root[data-theme="dark"] .kpi b { background: linear-gradient(90deg, #fff, color-mix(in oklab, var(--primary) 65%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 12px color-mix(in oklab, var(--primary) 38%, transparent)); }
.rk:nth-child(-n+3) .pos { text-shadow: 0 0 16px color-mix(in oklab, var(--primary) 70%, transparent); }
#svg path { stroke: var(--solid); } #svg path:hover { filter: brightness(1.3) drop-shadow(0 0 10px rgba(255, 255, 255, .5)); stroke: #fff; }
#svg path.sel { stroke: #fff; filter: drop-shadow(0 0 12px rgba(255, 255, 255, .6)); }

/* corrige quadrados luminosos: o ::after antigo do .heroi tinha largura/posição fixas */
.glow::after, .heroi.glow::after { width: auto !important; height: auto !important; inset: 0 !important; right: 0; top: 0; left: 0; bottom: 0; filter: none; transform: none; border-radius: inherit; }
.glow .glow::after { background: radial-gradient(260px circle at var(--mx) var(--my), color-mix(in oklab, var(--spot, var(--primary)) 16%, transparent), transparent 62%); }
.heroi.glow:hover::after { opacity: .55; }
.heroi .kpis { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.heroi .kpi b { font-size: 1.55rem; white-space: nowrap; }
.kpi b { padding-bottom: .08em; }

/* ===== menus suspensos de vidro ===== */
.dd { position: relative; width: 100%; }
.dd-nativo { position: absolute !important; inset: 0; opacity: 0; pointer-events: none; width: 100%; height: 100%; }
.dd-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer; background: var(--surface-2); color: var(--text); border: 1px solid var(--glass-border); border-radius: 12px; padding: 10px 12px; font: 500 .92rem var(--ui); backdrop-filter: blur(10px) saturate(130%); -webkit-backdrop-filter: blur(10px) saturate(130%); transition: border-color .15s, box-shadow .15s, background .15s; }
.dd-btn:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--glass-border)); }
.dd.aberto .dd-btn, .dd-btn:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 26%, transparent), 0 0 22px -6px color-mix(in oklab, var(--primary) 55%, transparent); }
.dd-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dd-chev { width: 12px; height: 8px; flex: none; color: var(--muted); transition: transform .2s, color .2s; } .dd.aberto .dd-chev { transform: rotate(180deg); color: var(--primary); }
.dd-lista { position: absolute; z-index: 90; left: 0; top: calc(100% + 8px); min-width: 100%; width: max-content; max-width: min(420px, 92vw); background: var(--popover); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .7), 0 0 0 1px color-mix(in oklab, var(--primary) 14%, transparent), 0 0 40px -14px color-mix(in oklab, var(--primary) 40%, transparent); padding: 6px; display: none; transform-origin: top; }
:root[data-theme="light"] .dd-lista { box-shadow: 0 24px 60px -20px rgba(0, 39, 118, .35); }
.dd.aberto .dd-lista { display: block; animation: ddIn .16s ease-out; }
.dd.acima .dd-lista { top: auto; bottom: calc(100% + 8px); transform-origin: bottom; }
@keyframes ddIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.dd-corpo { max-height: 300px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.dd-op { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 12px; border-radius: 10px; cursor: pointer; font-size: .92rem; color: var(--text); position: relative; }
.dd-op svg { width: 15px; height: 15px; flex: none; opacity: 0; color: var(--primary); }
.dd-op.foco { background: color-mix(in oklab, var(--primary) 12%, var(--surface-3)); }
.dd-op.sel { color: var(--primary); font-weight: 600; } .dd-op.sel svg { opacity: 1; filter: drop-shadow(0 0 6px var(--primary)); }
.dd-op.sel::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 3px; background: var(--primary); box-shadow: 0 0 10px var(--primary); }
.dd-op.off { opacity: .4; cursor: default; }
.dd-busca { padding: 4px 4px 8px; } .dd-busca input { width: 100%; background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: .88rem var(--ui); } .dd-busca input:focus { outline: none; border-color: var(--primary); }
.toolbar .campo .dd-lista, .filtros .dd-lista { max-width: min(360px, 92vw); }

.dd-anc { position: relative; z-index: 60 !important; }

/* menus não podem ultrapassar o painel */
.filtros { grid-template-columns: minmax(0, 1fr); }
.filtros > *, .toolbar .campo, .mapa-cab > div, .campo { min-width: 0; }
.dd, .dd-btn { min-width: 0; max-width: 100%; }

/* legenda do gráfico de projeção: mesmas cores do gráfico */
.proj-legenda { gap: 8px 20px; font-size: .82rem; }
.proj-legenda .l-real { width: 24px; height: 4px; border-radius: 3px; background: var(--c); box-shadow: 0 0 8px var(--c); }
.proj-legenda .l-proj { width: 24px; height: 0; border-top: 4px dotted var(--c); background: none; }
.proj-legenda .l-b50 { width: 20px; height: 12px; border-radius: 4px; background: color-mix(in oklab, var(--c) 42%, transparent); border: 1px solid color-mix(in oklab, var(--c) 60%, transparent); }
.proj-legenda .l-b80 { width: 20px; height: 12px; border-radius: 4px; background: color-mix(in oklab, var(--c) 16%, transparent); border: 1px solid color-mix(in oklab, var(--c) 35%, transparent); }
.proj-legenda .l-cen { width: 24px; height: 0; border-top: 2px dashed var(--yellow); }
.proj-legenda span[title] { cursor: help; }
.proj-legenda .l-parc { width: 11px; height: 11px; border-radius: 50%; border: 2.4px solid var(--c); background: var(--bg); }

.kpi b, .stat b { white-space: nowrap; overflow: hidden; max-width: 100%; text-overflow: clip; }

/* =====================================================================
   v4 — Institucional (azul, verde e amarelo da bandeira): sóbrio, plano, legível
   Sobrescreve o visual neon/vidro das versões anteriores.
   ===================================================================== */
:root[data-theme="light"], :root:not([data-theme]) {
  --bg: #F4F6FA; --page-gradient: none; --solid: #FFFFFF;
  --surface: #FFFFFF; --surface-2: #F8FAFD; --surface-3: #E9EEF6;
  --line: #D5DBE5; --line-strong: #B4BFD2; --glass-border: #D5DBE5;
  --text: #1A2433; --muted: #53607A; --popover: #FFFFFF;
  --primary: #1351B4; --primary-ink: #FFFFFF; --header: #0B3C8C; --header-2: #0A3478;
  --flag-green: #168821; --flag-yellow: #FFCD07;
  --red: #C62828; --blue: #2C7BE5; --yellow: #A67C00; --green: #168821; --purple: #6B4FD8; --cyan: #0F8B8D;
  --neon-yellow: #FFCD07; --neon-blue: #1351B4;
  --shadow: 0 2px 8px rgba(16, 36, 80, .08); --shadow-sm: 0 1px 2px rgba(16, 36, 80, .06);
  --glass: #0B3C8C; --on-accent: #FFFFFF; --grade: transparent;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0A1426; --page-gradient: none; --solid: #101E3A;
  --surface: #101E3A; --surface-2: #14264A; --surface-3: #1B3160;
  --line: #243A66; --line-strong: #37507F; --glass-border: #243A66;
  --text: #E8EEF9; --muted: #98A9CB; --popover: #14264A;
  --primary: #6C9BFF; --primary-ink: #06122E; --header: #0B2A66; --header-2: #09245A;
  --flag-green: #2FB84B; --flag-yellow: #FFCD07;
  --red: #FF6B6B; --blue: #5EA2FF; --yellow: #FFCD07; --green: #3DBE5A; --purple: #A78BFF; --cyan: #34C3C6;
  --neon-yellow: #FFCD07; --neon-blue: #6C9BFF;
  --shadow: 0 2px 10px rgba(0, 0, 0, .35); --shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);
  --glass: #0B2A66; --on-accent: #06122E; --grade: transparent;
  color-scheme: dark;
}
:root { --display: Inter, system-ui, sans-serif; --mono: Inter, system-ui, sans-serif; --radius: 8px; --radius-sm: 6px; }
html { background: var(--bg) !important; }
body { background: transparent !important; }
.fx, .ticker, .led { display: none !important; }
.glow::after { display: none !important; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; }

/* ----- topo institucional ----- */
.topbar { background: var(--header) !important; border-bottom: 3px solid var(--flag-yellow) !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
.topbar::after { display: none !important; }
.marca, .marca span { color: #fff; } .marca b { color: var(--flag-yellow); text-shadow: none; }
.marca small { color: rgba(255, 255, 255, .72); }
.marca svg { filter: none; color: #2FD35C; }
.nav a { color: rgba(255, 255, 255, .82); border-radius: 6px; }
.nav a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.nav a.ativo { background: rgba(255, 255, 255, .18); color: #fff; box-shadow: inset 0 -3px 0 var(--flag-yellow); border-radius: 6px 6px 0 0; }
.busca input { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .28); border-radius: 6px; backdrop-filter: none; }
.busca input::placeholder { color: rgba(255, 255, 255, .72); }
.busca input:focus { background: #fff; color: #1A2433; border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 205, 7, .55); }
.busca input:focus::placeholder { color: #53607A; }
.busca > svg { color: rgba(255, 255, 255, .8); } .busca input:focus ~ svg { color: #53607A; }
.busca kbd { color: rgba(255, 255, 255, .75); border-color: rgba(255, 255, 255, .35); }
.icon-btn { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .35); box-shadow: none; backdrop-filter: none; }
.icon-btn:hover { background: rgba(255, 255, 255, .14); transform: none; }
.resultados { background: var(--popover) !important; color: var(--text); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: var(--shadow); }

/* ----- superfícies planas ----- */
.sec, .mapa-box, .filtros, .card, .kpi, .heroi, .stat, .rk-det, .mapa-cab, .ind, .feat, .medidor, .rosca-leg .lin, .legenda button, .aviso, .subnav {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.sec, .mapa-box, .filtros, .card, .heroi, .mapa-cab, .ind, .feat, .stat { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-sm); }
.sec:hover, .feat:hover, .mapa-box:hover { border-color: var(--line); }
.kpi { background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; }
.medidor, .rosca-leg .lin { background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; }
.rk-det { background: var(--surface-2); border-radius: 6px; }
.heroi { background: var(--surface); box-shadow: var(--shadow); border-left: 6px solid var(--a); }
.heroi::before, .heroi::after { display: none !important; }
.heroi-foto > img:not(.logo) { border: 1px solid var(--line-strong); border-left: 5px solid var(--a); border-radius: 4px; background: var(--surface-3); box-shadow: none; }
.heroi h1 { color: var(--header); } :root[data-theme="dark"] .heroi h1 { color: var(--text); }
.heroi .kpi b { font-size: 1.5rem; }
.sec h2 { font-size: 1.35rem; color: var(--header); } :root[data-theme="dark"] .sec h2 { color: var(--text); }
.sec h2::before { width: 4px; height: .9em; background: var(--flag-yellow); box-shadow: none; border-radius: 1px; }
.kpi b, .stat b { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--header) !important; filter: none !important; font-family: var(--display); font-weight: 700; letter-spacing: -.02em; }
:root[data-theme="dark"] .kpi b, :root[data-theme="dark"] .stat b { color: var(--text) !important; }
.kpi small, .stat small, .eyebrow, .filtros label, .campo label, .tab th { font-family: var(--ui); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; font-size: .7rem; color: var(--muted); }
.kpi small { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .8rem; }
.txt-grad { color: inherit; }
.barra, .barra i { box-shadow: none !important; }
.barra { background: var(--surface-3); height: 8px; }
.espectro { box-shadow: none; height: 6px; border-radius: 3px; } .espectro i { box-shadow: none; }
.nota { color: var(--muted); }
.aviso { background: #FFF8DC; border: 1px solid #E8D27A; color: #5A4500; border-radius: 6px; }
:root[data-theme="dark"] .aviso { background: rgba(255, 205, 7, .1); border-color: rgba(255, 205, 7, .4); color: #FFE48A; }

/* ----- botões ----- */
.btn, .chip, .mais { background: var(--surface); color: var(--primary); border: 1px solid var(--line-strong); border-radius: 6px; box-shadow: none; backdrop-filter: none; font-weight: 600; }
.btn:hover, .chip:hover, .mais:hover { background: var(--surface-3); border-color: var(--primary); box-shadow: none; transform: none; }
.btn.primario, .chip[aria-pressed="true"], .chip.on, .btn-neon { background: var(--primary) !important; background-image: none !important; color: var(--primary-ink) !important; border: 1px solid var(--primary); box-shadow: none; text-shadow: none; }
.btn-neon { border-radius: 6px; padding: 12px 22px; font-weight: 600; } .btn-neon:hover { filter: brightness(1.1); transform: none; box-shadow: none; }
.btn-glass { background: var(--surface); color: var(--primary); border: 1px solid var(--primary); border-radius: 6px; padding: 12px 22px; backdrop-filter: none; } .btn-glass:hover { background: var(--surface-3); box-shadow: none; transform: none; }
.chip i { border-radius: 2px; }
.legenda button { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; color: var(--text); }
.legenda button[aria-pressed="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: var(--surface-2); }
.filtros input, .filtros select, .campo select, .campo input, .dd-btn { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px; backdrop-filter: none; box-shadow: none; }
.filtros input:focus, .dd.aberto .dd-btn, .dd-btn:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 25%, transparent); }
.dd-lista { border-radius: 8px; box-shadow: var(--shadow); border: 1px solid var(--line-strong); }
.dd-op { border-radius: 4px; } .dd-op.foco { background: var(--surface-3); } .dd-op.sel::before { box-shadow: none; } .dd-op.sel svg { filter: none; }
.nav a:focus-visible, :focus-visible { outline: 3px solid color-mix(in oklab, var(--flag-yellow) 85%, transparent); outline-offset: 2px; }

/* ----- subnav do perfil ----- */
.subnav { background: var(--surface) !important; border-bottom: 1px solid var(--line); border-top: 0; top: 63px; }
.subnav a { color: var(--muted); border-radius: 0; padding: 9px 14px; font-weight: 600; }
.subnav a:hover { background: var(--surface-3); color: var(--text); }
.subnav a.ativo { background: transparent; color: var(--header); box-shadow: inset 0 -3px 0 var(--header); border-radius: 0; }
:root[data-theme="dark"] .subnav a.ativo { color: var(--text); box-shadow: inset 0 -3px 0 var(--flag-yellow); }

/* ----- home ----- */
.hero2 { padding: 22px 0 10px; }
.kicker { font: 600 .74rem var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--header); background: #FFF3C4; border: 1px solid #E8D27A; border-radius: 4px; padding: 5px 12px; } :root[data-theme="dark"] .kicker { color: #FFE48A; background: rgba(255, 205, 7, .12); border-color: rgba(255, 205, 7, .4); }
.hero2 h1 { color: var(--header); letter-spacing: -.03em; } :root[data-theme="dark"] .hero2 h1 { color: var(--text); }
.neon, :root[data-theme="light"] .neon { background: none !important; -webkit-text-fill-color: currentColor; color: var(--flag-green) !important; filter: none !important; }
:root[data-theme="dark"] .neon { color: #4BD16A !important; }
.hero2 p { color: var(--muted); } .hero2 p b { color: var(--text); }
.hero2 .hero-busca .busca input { background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); animation: none; border-radius: 6px; box-shadow: var(--shadow-sm); }
.hero2 .hero-busca .busca input::placeholder { color: var(--muted); } .hero2 .hero-busca .busca > svg { color: var(--muted); }
.hero2 .hero-busca .busca kbd { color: var(--muted); border-color: var(--line-strong); }
.checks li::before { background-color: #E3F3E6; box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23168821' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8.5 2.6 2.6L12 5.5'/%3E%3C/svg%3E"); }
.feat { border-left: 4px solid var(--flag-green); border-radius: 6px; padding: 16px 18px; } .feat:hover { transform: none; border-color: var(--line); border-left-color: var(--primary); box-shadow: var(--shadow); }
.feat .ico { background: #E7EEFB; color: var(--primary); border: 1px solid #C9D7F2; border-radius: 8px; box-shadow: none; } :root[data-theme="dark"] .feat .ico { background: #1B3160; border-color: #37507F; }
.feat .ico svg { filter: none; } .feat b { color: var(--header); } :root[data-theme="dark"] .feat b { color: var(--text); }
.stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.stat { border-radius: 6px; border-left: 4px solid var(--flag-yellow); }
.stat b { font-size: 2.1rem; }

/* ----- cartões de parlamentar ----- */
.card { border-radius: 6px; padding: 10px 10px 12px 14px; --spot: var(--a); }
.card::before { inset: 0 auto 0 0; width: 5px; height: auto; background: var(--a); box-shadow: none; }
.card:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.card .foto { border-radius: 3px; box-shadow: none !important; } .card:hover .foto img { transform: none; }
.card b { font-weight: 600; color: var(--text); font-size: .98rem; }
.grupo-cab::after { height: 2px; background: var(--line-strong); opacity: 1; }
.grupo-cab h2 { color: var(--header); } :root[data-theme="dark"] .grupo-cab h2 { color: var(--text); }
.grupo-cab h2::before { width: 12px; height: 12px; border-radius: 2px; background: var(--a); box-shadow: none; }

/* ----- ranking ----- */
.rk-lin:hover { background: var(--surface-2); }
.rk .pos, .rk:nth-child(-n+3) .pos { color: var(--header); text-shadow: none; } :root[data-theme="dark"] .rk .pos { color: var(--muted); }
.rk-foto > img:not(.logo) { border: 1px solid var(--line-strong); border-left: 4px solid var(--a); border-radius: 3px; background: var(--surface-3); }
.rk-val { color: var(--header); } :root[data-theme="dark"] .rk-val { color: var(--text); }
.rk .barra i, .grupo .barra i { background: var(--a); }

/* ----- tags, selos, logos ----- */
.tag { border-radius: 4px; background: var(--surface-3); color: var(--muted); }
.tag.ok { background: #E3F3E6; color: #0F6B1A; } .tag.ruim { background: #FBE5E5; color: #A11F1F; } .tag.parado { background: #FFF3C4; color: #6B5200; }
:root[data-theme="dark"] .tag.ok { background: rgba(61, 190, 90, .18); color: #7BE095; } :root[data-theme="dark"] .tag.ruim { background: rgba(255, 107, 107, .18); color: #FF9C9C; } :root[data-theme="dark"] .tag.parado { background: rgba(255, 205, 7, .15); color: #FFE48A; }
.v-Sim { background: #E3F3E6 !important; color: #0F6B1A !important; } .v-Não { background: #FBE5E5 !important; color: #A11F1F !important; }
:root[data-theme="dark"] .v-Sim { background: rgba(61, 190, 90, .2) !important; color: #7BE095 !important; } :root[data-theme="dark"] .v-Não { background: rgba(255, 107, 107, .2) !important; color: #FF9C9C !important; }
.selo { border-radius: 4px; } .selo.grad { color: #fff; }
.i-centro .selo.grad, .i-centro-esquerda .selo.grad, .i-centro-direita .selo.grad { color: #1A2433; }
.logo-badge { border-radius: 4px; color: #fff; background: var(--header) !important; background-image: none !important; }
.logo { box-shadow: none; border: 1px solid var(--line) !important; border-radius: 4px !important; }
.grad { background: var(--a); color: #fff; }
.i-centro .grad, .i-centro-esquerda .grad, .i-centro-direita .grad { color: #1A2433; }

/* ----- gráficos / dicas ----- */
.chart-tip, .proj-tip, #tip { background: var(--surface) !important; border: 1px solid var(--line-strong); border-radius: 6px; box-shadow: var(--shadow); }
.proj-legenda .l-real { box-shadow: none; }
.hit { cursor: default; }

/* ----- rodapé ----- */
.rodape { max-width: none; margin-top: 32px; background: var(--header); color: rgba(255, 255, 255, .8); border-top: 3px solid var(--flag-yellow); padding: 26px max(28px, calc((100vw - var(--max)) / 2 + 28px)) 34px; }
.rodape a, .rodape .direitos a { color: #fff; text-shadow: none; } .rodape code { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); color: #fff; }
.rodape .direitos { border-top-color: rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .85); }
.rodape .rodape-links span { color: rgba(255, 255, 255, .8); }

/* ----- mapa ----- */
#svg path { stroke: var(--surface); stroke-width: 1; } #svg path:hover { filter: brightness(1.08); stroke: var(--header); stroke-width: 2; } #svg path.sel { stroke: var(--header); stroke-width: 3; filter: none; }
#svg text { fill: #1A2433; stroke: rgba(255, 255, 255, .6); }
:root[data-theme="dark"] #svg path { stroke: var(--surface); } :root[data-theme="dark"] #svg path:hover, :root[data-theme="dark"] #svg path.sel { stroke: #fff; }
@media print { .rodape { background: none; color: #000; } }
.logo-badge, .grad.logo-badge, .i-centro .logo-badge, .i-centro-esquerda .logo-badge, .i-centro-direita .logo-badge { color: #fff !important; }
:root[data-theme="dark"], :root[data-theme="light"] { --display: Inter, system-ui, sans-serif; --mono: Inter, system-ui, sans-serif; }
@media (max-width: 640px) { .heroi .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .heroi .kpi b { font-size: 1.3rem; } }

/* Partidos, Cargos e Votações nominais lado a lado */
.linha3 { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
@media (max-width: 1100px) { .linha3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .linha3 > #votacoes { grid-column: 1 / -1; } }
@media (max-width: 700px) { .linha3 { grid-template-columns: minmax(0, 1fr); } }
.linha3 .rosca { justify-content: center; } .linha3 .rosca-leg { min-width: 0; width: 100%; flex-basis: 100%; }
.linha3 { align-items: stretch; }

/* filtros em estado pressionado e itens clicáveis da rosca */
.btn[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.rosca-leg .lin.clic { cursor: pointer; } .rosca-leg .lin.clic:hover, .rosca-leg .lin.clic:focus-visible { border-color: var(--primary); background: var(--surface-3); }
.rosca-leg .lin.clic::after { content: "→"; display: none; }
.rosca-dica { margin: 4px 2px 0; font-size: .8rem; color: var(--muted); }
.arco:hover { stroke-width: 28; }

/* interruptor "R$ de hoje" e faixa de aviso */
.tgl { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid rgba(255, 255, 255, .35); color: #fff; border-radius: 999px; padding: 5px 12px 5px 6px; font: 600 .78rem var(--ui); cursor: pointer; white-space: nowrap; }
.tgl i { width: 30px; height: 18px; border-radius: 9px; background: rgba(255, 255, 255, .25); position: relative; transition: background .15s; }
.tgl i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s; }
.tgl[aria-pressed="true"] i { background: var(--flag-green); } .tgl[aria-pressed="true"] i::after { transform: translateX(12px); }
.tgl:hover { background: rgba(255, 255, 255, .12); }
.infl-faixa { background: #FFF3C4; color: #5A4500; border-bottom: 1px solid #E8D27A; font-size: .85rem; text-align: center; padding: 7px 16px; display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }
.infl-faixa .btn { padding: 3px 10px; font-size: .78rem; }
:root[data-theme="dark"] .infl-faixa { background: #2E2A12; color: #FFE48A; border-color: #5A4A12; }
@media (max-width: 960px) { .tgl span { display: none; } .tgl { padding: 5px 6px; } }

/* cabeçalho: cabe em telas médias; rodapé sem estourar a largura */
.rodape { padding: 26px max(28px, calc((100% - var(--max)) / 2 + 28px)) 34px; box-sizing: border-box; }
body { overflow-x: hidden; }
.topbar-in { flex-wrap: nowrap; }
.nav { flex-wrap: nowrap; }
.busca { width: min(300px, 26vw); flex: 0 1 auto; }
@media (max-width: 1360px) { .nav a { padding: 8px 10px; font-size: .86rem; } .busca { width: min(240px, 22vw); } .tgl span { display: none; } .tgl { padding: 5px 6px; } .marca small { display: none; } }
@media (max-width: 1180px) and (min-width: 961px) {
  .nav { display: none; order: 5; width: 100%; margin: 0; flex-direction: row; flex-wrap: wrap; gap: 6px; padding-top: 8px; }
  .nav.aberto { display: flex; } .menu-btn { display: grid; } .topbar-in { flex-wrap: wrap; } .busca { width: 260px; }
}
/* a busca encolhe para o cabeçalho caber em qualquer largura */
.topbar-dir { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
.busca { flex: 1 1 140px; min-width: 140px; max-width: 300px; width: auto; }
.nav a { padding: 8px 11px; font-size: .88rem; }
.marca { flex: none; }

/* =====================================================================
   Mobile first — regras para telas até 640 px (celular) e 900 px (tablet)
   ===================================================================== */
@media (max-width: 640px) {
  html { scroll-padding-top: 150px; }
  main { padding: 14px 14px 48px; }
  .pagina-cab h1 { font-size: 1.85rem; line-height: 1.15; } .pagina-cab p { font-size: .95rem; }
  .hero2 h1 { font-size: 2.3rem; } .hero2 p { font-size: .98rem; }
  /* grades: uma coluna e sem largura mínima que estoure */
  .painel, .colunas, .linha3, .cmp-cab, .mapa-grid, .pres-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .painel > *, .colunas > *, .linha3 > *, .sec, .mapa-box { min-width: 0; }
  .kpis, .stats, .heroi .kpis, #detalhe .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
  .kpi, .stat { padding: 10px 12px; } .kpi b, .stat b { font-size: 1.3rem !important; white-space: normal !important; overflow-wrap: anywhere; line-height: 1.1; } .kpi small, .stat small { font-size: .74rem; letter-spacing: .02em; }
  .sec { padding: 16px 14px; border-radius: 8px; } .sec h2 { font-size: 1.2rem; } .sec h3 { font-size: 1.05rem; }
  .heroi { padding: 16px 14px; gap: 14px; } .heroi h1 { font-size: 1.9rem; } .heroi-foto > img:not(.logo) { width: 140px; } .meta { font-size: .9rem; }
  .subnav { top: 108px; margin: 12px -14px 0; padding: 8px 14px; } .subnav a { padding: 7px 11px; font-size: .82rem; }
  /* listas de ranking e anos */
  .rk-lin, #rank .rk-lin { grid-template-columns: 28px 46px minmax(0, 1fr) !important; gap: 10px; padding: 10px 4px; }
  .rk-val { grid-column: 2 / -1; font-size: 1.15rem; text-align: left; } .rk .pos { font-size: 1.1rem; } .rk-nome b { font-size: 1rem; } .rk-nome small { font-size: .78rem; }
  .rk-foto > img:not(.logo) { width: 46px; height: 58px; }
  .ano { grid-template-columns: 42px minmax(0, 1fr) auto !important; gap: 8px; font-size: .85rem; } .ano b { white-space: nowrap; }
  .anos .ano[data-ano] { grid-template-columns: 42px minmax(0, 1fr) auto !important; }
  .linha { font-size: .88rem; gap: 10px; } .linha span:last-child { min-width: 0; }
  .hb { grid-template-columns: minmax(0, 1fr) !important; gap: 4px; } .hb-v { text-align: left; }
  /* tabelas: rolam de lado dentro do cartão */
  #detalhe .colunas > div, .sec > .tab-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab { font-size: .8rem; min-width: 320px; } .tab td, .tab th { padding: 6px 6px; }
  /* comparador: título ocupa a linha, valores lado a lado */
  .cmp, .cmp tbody { display: block; } .cmp tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .cmp tr.grp { display: block; padding: 6px 0; } .cmp th { grid-column: 1 / -1; border: 0; padding: 0 0 4px; } .cmp td { width: auto; border: 0; padding: 2px 0; text-align: left; } .cmp td:nth-child(3) { text-align: right; }
  /* controles: toque confortável, sem estourar */
  .btn, .chip, .mais, .dd-btn, .filtros input, .campo input { min-height: 38px; } .chip, .btn { padding: 7px 12px; }
  .sel-voto { gap: 6px; } .sel-voto input, .sel-voto > label, .sel-voto select { flex: 1 1 100%; min-width: 0 !important; max-width: 100%; width: 100%; }
  .toolbar { gap: 8px; } .toolbar .campo { flex: 1 1 calc(50% - 8px); min-width: 0; } .toolbar .campo.grow { flex-basis: 100%; }
  .legenda { gap: 6px; } .legenda button, .chip { font-size: .82rem; }
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .card { padding: 8px 8px 10px 12px; } .card b { font-size: .92rem; }
  .grupo-cab h2 { font-size: 1.4rem; } .grupo-cab small { font-size: .78rem; }
  .proj b { font-size: 1rem; } .proj p { font-size: .86rem; } .tag { font-size: .64rem; padding: 2px 7px; }
  .rosca { flex-direction: column; } .rosca-leg .lin { grid-template-columns: 12px 1fr auto 40px; font-size: .86rem; }
  .medidor { gap: 12px; } .medidor svg { width: 88px !important; height: 88px !important; }
  .chart-legenda, .proj-legenda { font-size: .76rem; gap: 4px 12px; }
  .chart-tip, .proj-tip { max-width: 230px; font-size: .78rem; }
  .mapa-cab { padding: 12px; } #svg text { font-size: 9px; } .escala { font-size: .74rem; }
  .pres .kv { font-size: .84rem; } .pres .n b { font-size: 1.2rem; }
  .outros { gap: 6px; } .outros a { font-size: .8rem; }
  .fonte .meta { font-size: .78rem; } .fonte p { font-size: .88rem; }
  .rodape { padding: 20px 14px 28px; font-size: .78rem; } .rodape-links { gap: 10px; }
  .infl-faixa { font-size: .8rem; padding: 6px 12px; }
  .aviso { font-size: .82rem; padding: 10px 12px; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .kpis, .heroi .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rk-lin, #rank .rk-lin { grid-template-columns: 36px 52px minmax(0, 1fr) auto !important; }
  .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .painel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  html, body { overflow-x: clip; }
  #grupos .linha { grid-template-columns: 78px minmax(0, 1fr) auto !important; gap: 8px; } #grupos .linha span:nth-child(4) { display: none; }
  .sec > * { max-width: 100%; min-width: 0; }
  .anos > div > .ano { grid-template-columns: 42px minmax(0, 1fr) auto !important; }
}
@media (max-width: 640px) {
  .linha { align-items: flex-start; } .linha > span { min-width: 0; overflow-wrap: anywhere; } .linha > span:first-child { flex: 1 1 auto; } .linha > span:last-child { flex: 0 0 auto; max-width: 48%; white-space: normal; }
}
@media (max-width: 960px) {
  .topbar-in { flex-wrap: wrap !important; row-gap: 8px; }
  .topbar-dir { flex: 1 1 auto; justify-content: flex-end; gap: 8px; }
  .busca { order: 4; flex: 1 1 100%; max-width: none; min-width: 0; }
  .marca { font-size: 1.1rem; }
}
@media (max-width: 640px) {
  .cmp td { width: auto !important; min-width: 0; display: block; }
  .cmp td .barra { width: 100%; }
  .cmp td .pos { white-space: nowrap; font-size: .72rem; }
  .cmp td.lead::before { font-size: .6rem; }
}
@media (max-width: 640px) { #titulo { font-size: 1.55rem !important; } .pres-grid .pres .foto img { aspect-ratio: 16 / 9; } }

/* comparadores: vencedor circulado em verde, o outro apagado */
.cmp td .cel { position: relative; padding: 8px 10px; border: 2px solid transparent; border-radius: 10px; transition: opacity .15s; }
.cmp td.win .cel { border-color: var(--green); background: color-mix(in oklab, var(--green) 13%, transparent); }
.cmp td.win .cel::after { content: "✓ melhor"; position: absolute; top: -9px; right: 8px; background: var(--green); color: #fff; font: 700 .62rem var(--ui); letter-spacing: .03em; padding: 1px 8px; border-radius: 999px; }
.cmp td.lose .cel { opacity: .5; }
.cmp td.lead::before { display: none !important; }
.cmp th .crit { display: inline-block; margin-left: 6px; font: 600 .62rem var(--ui); padding: 1px 6px; border-radius: 999px; background: var(--surface-3); color: var(--muted); vertical-align: 1px; white-space: nowrap; }
.placar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; margin: 0 0 14px; }
.placar .lado { display: grid; gap: 2px; } .placar .lado.b { text-align: right; } .placar b { font: 700 2rem var(--display); line-height: 1; } .placar small { color: var(--muted); }
.placar .lado.vence b { color: var(--green); } .placar .meio { text-align: center; color: var(--muted); font-size: .8rem; max-width: 200px; }
.placar .barra-placar { grid-column: 1 / -1; display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--surface-3); } .placar .barra-placar i { display: block; height: 100%; }
@media (max-width: 640px) { .placar { grid-template-columns: 1fr 1fr; } .placar .meio { grid-column: 1 / -1; order: 3; max-width: none; } .cmp td .cel { padding: 6px 8px; } }

/* coroa e porcentagem do placar */
.coroa { width: 30px; height: 30px; flex: none; filter: drop-shadow(0 2px 4px rgba(180, 120, 0, .45)); }
.placar .lado .topo { display: flex; align-items: center; gap: 8px; } .placar .lado.b .topo { justify-content: flex-end; }
.placar .lado .pct { font: 700 1rem var(--ui); color: var(--muted); } .placar .lado.vence .pct { color: var(--green); }
.placar .lado.vence { background: color-mix(in oklab, var(--green) 10%, transparent); border-radius: 10px; padding: 6px 10px; margin: -6px -10px; }
.placar .veredito { grid-column: 1 / -1; font-size: .9rem; margin: 2px 0 0; } .placar .veredito b { color: var(--text); }
.placar-det { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 8px; font-size: .86rem; } .placar-det summary { cursor: pointer; font-weight: 600; color: var(--primary); }
.placar-det .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; } .placar-det ul { margin: 4px 0 0; padding-left: 18px; color: var(--muted); } .placar-det b { font-size: .8rem; }
.coroa-card { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); z-index: 2; }
.cmp-pessoa, .cp { position: relative; }
.cmp-pessoa.venceu, .cp.venceu { box-shadow: 0 0 0 2px var(--green), var(--shadow-sm); }
@media (max-width: 640px) { .placar .lado.vence { margin: 0; } .placar-det .cols { grid-template-columns: 1fr; } }
.placar .veredito b, .placar-det b, .placar .meio b { font: 700 inherit var(--ui); font-size: inherit; line-height: inherit; } .placar .veredito { line-height: 1.5; color: var(--muted); }
.placar .topo b { font: 700 2rem var(--display); line-height: 1; }

/* seletor de tipo de comparação */
.seg{display:inline-flex;gap:0;margin:14px 0 4px;border:1px solid var(--border,#d5dbe6);border-radius:10px;overflow:hidden;background:var(--card,#fff)}
.seg a{padding:9px 18px;font-size:.92rem;font-weight:600;color:var(--muted,#55627a);text-decoration:none}
.seg a.on{background:#0B3C8C;color:#fff}
.seg a:not(.on):hover{background:rgba(11,60,140,.08)}