@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600;700&display=swap');* { box-sizing: border-box; }
body { margin: 0; }


:root {
  color-scheme: dark;
  --nx-bg: #050d1d;
  --nx-canvas: #071327;
  --nx-surface: #0b1a33;
  --nx-elevated: #102343;
  --nx-border: #1b3559;
  --nx-border-active: #247cff;
  --nx-primary: #087bff;
  --nx-primary-light: #42b7ff;
  --nx-primary-soft: rgba(8, 123, 255, 0.14);
  --nx-text: #eaf3ff;
  --nx-muted: #9db4d4;
  --nx-subtle: #6481a7;
  --nx-success: #22d3a0;
  --nx-success-soft: rgba(34, 211, 160, 0.14);
  --nx-warning: #f4b860;
  --nx-warning-soft: rgba(244, 184, 96, 0.14);
  --nx-danger: #ff627e;
  --nx-radius: 14px;
  --nx-radius-sm: 9px;
  --nx-gap: 10px;
  --nx-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
  --nx-focus: 0 0 0 2px rgba(36, 124, 255, 0.65);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(900px 480px at 10% -10%, rgba(8, 123, 255, 0.12), transparent 60%),
    radial-gradient(700px 420px at 100% 0%, rgba(66, 183, 255, 0.08), transparent 55%),
    #050d1d;
  background:
    radial-gradient(900px 480px at 10% -10%, rgba(8, 123, 255, 0.12), transparent 60%),
    radial-gradient(700px 420px at 100% 0%, rgba(66, 183, 255, 0.08), transparent 55%),
    var(--nx-bg);
  color: #eaf3ff;
  color: var(--nx-text);
  font-family: 'Inter', system-ui, sans-serif;
}

.app { max-width: 880px; margin: 0 auto; padding: 18px 14px 36px; }

.topo {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
  background: linear-gradient(180deg, #0b1a33, #071327);
  background: linear-gradient(180deg, var(--nx-surface), var(--nx-canvas));
  border: 1px solid #1b3559;
  border: 1px solid var(--nx-border);
  border-radius: 9px;
  border-radius: var(--nx-radius-sm);
  padding: 12px 16px;
  margin-bottom: 14px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
  box-shadow: var(--nx-shadow);
}
.topo h1 {
  margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em;
  color: #eaf3ff;
  color: var(--nx-text); /* cor sólida: o que navegadores sem background-clip:text mostram */
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) or (-webkit-background-clip: text) {
  .topo h1 {
    background: linear-gradient(90deg, #eaf3ff, #42b7ff);
    background: linear-gradient(90deg, var(--nx-text), var(--nx-primary-light));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}
.sub { margin: 1px 0 0; color: #6481a7; color: var(--nx-subtle); font-size: .76rem; }

.live-pill {
  display: inline-flex; align-items: center; gap: 6px; background: rgba(8, 123, 255, 0.14); background: var(--nx-primary-soft);
  border: 1px solid #247cff;
  border: 1px solid var(--nx-border-active);
  color: #42b7ff;
  color: var(--nx-primary-light); border-radius: 999px; padding: 4px 11px;
  font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  box-shadow: 0 0 16px rgba(8, 123, 255, 0.25);
}
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #42b7ff; background: var(--nx-primary-light);
  box-shadow: 0 0 8px #42b7ff;
  box-shadow: 0 0 8px var(--nx-primary-light); -webkit-animation: pulse 1.6s infinite; animation: pulse 1.6s infinite; }
@-webkit-keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) { .live-dot { -webkit-animation: none; animation: none; } }

.filtros { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }

.dropdown { position: relative; flex: 1 1 160px; min-width: 0; }
.dropdown-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font: inherit; font-size: .8rem; padding: 7px 10px 7px 11px; border-radius: 9px; border-radius: var(--nx-radius-sm);
  border: 1px solid #1b3559;
  border: 1px solid var(--nx-border); background: #0b1a33; background: var(--nx-surface); color: #eaf3ff; color: var(--nx-text);
  transition: border-color .15s, box-shadow .15s; cursor: pointer;
}
.dropdown-trigger:hover { border-color: #6481a7; border-color: var(--nx-subtle); }
.dropdown-trigger:focus-visible { outline: none; border-color: #247cff; border-color: var(--nx-border-active); box-shadow: 0 0 0 2px rgba(36, 124, 255, 0.65); box-shadow: var(--nx-focus); }
.dropdown-valor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-chevron { color: #6481a7; color: var(--nx-subtle); flex-shrink: 0; transition: -webkit-transform .15s; transition: transform .15s; transition: transform .15s, -webkit-transform .15s; }
.dropdown-chevron.aberto { -webkit-transform: rotate(180deg); transform: rotate(180deg); }

.dropdown-lista {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 260px; overflow-y: auto; list-style: none; margin: 0; padding: 4px;
  background: #102343;
  background: var(--nx-elevated); border: 1px solid #1b3559; border: 1px solid var(--nx-border); border-radius: 9px; border-radius: var(--nx-radius-sm);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
  box-shadow: var(--nx-shadow);
}
.dropdown-opcao {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: .8rem; padding: 7px 9px; border-radius: 7px; color: #9db4d4; color: var(--nx-muted); cursor: pointer;
}
.dropdown-opcao.ativo { background: rgba(8, 123, 255, 0.14); background: var(--nx-primary-soft); color: #eaf3ff; color: var(--nx-text); }
.dropdown-opcao.selecionado { color: #42b7ff; color: var(--nx-primary-light); font-weight: 600; }
.dropdown-opcao svg { flex-shrink: 0; color: #42b7ff; color: var(--nx-primary-light); }

.search-field { position: relative; flex: 1 1 220px; display: flex; align-items: center; }
.search-field .search-icon { position: absolute; left: 11px; color: #6481a7; color: var(--nx-subtle); pointer-events: none; }
.search-field input {
  width: 100%; font: inherit; font-size: .8rem; padding: 7px 30px 7px 32px; border-radius: 9px; border-radius: var(--nx-radius-sm);
  border: 1px solid #1b3559;
  border: 1px solid var(--nx-border); background: #0b1a33; background: var(--nx-surface); color: #eaf3ff; color: var(--nx-text);
  transition: border-color .15s, box-shadow .15s;
}
.search-field input::-webkit-input-placeholder { color: #6481a7; color: var(--nx-subtle); }
.search-field input::-moz-placeholder { color: #6481a7; color: var(--nx-subtle); }
.search-field input::placeholder { color: #6481a7; color: var(--nx-subtle); }
.search-field input::-webkit-search-cancel-button { display: none; }
.search-field input:focus { outline: none; border-color: #247cff; border-color: var(--nx-border-active); box-shadow: 0 0 0 2px rgba(36, 124, 255, 0.65); box-shadow: var(--nx-focus); }
.search-clear {
  position: absolute; right: 7px; display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border: none; border-radius: 6px; background: transparent;
  color: #6481a7;
  color: var(--nx-subtle); cursor: pointer; transition: background .15s, color .15s;
}
.search-clear:hover { background: #102343; background: var(--nx-elevated); color: #eaf3ff; color: var(--nx-text); }

.turno-toggle {
  display: flex; border: 1px solid #1b3559; border: 1px solid var(--nx-border); border-radius: 9px; border-radius: var(--nx-radius-sm); overflow: hidden;
  background: #0b1a33;
  background: var(--nx-surface);
}
.turno-toggle button {
  font: inherit; font-size: .8rem; padding: 7px 12px; border: none; background: transparent;
  color: #9db4d4;
  color: var(--nx-muted); cursor: pointer; transition: background .15s, color .15s;
}
.turno-toggle button:hover { color: #eaf3ff; color: var(--nx-text); }
.turno-toggle button.active {
  background: #087bff;
  background: var(--nx-primary); color: #fff;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.2);
}

.status-msg { padding: 28px; text-align: center; color: #9db4d4; color: var(--nx-muted); }
.status-msg.aviso { color: #f4b860; color: var(--nx-warning); }
.status-msg.erro { color: #ff627e; color: var(--nx-danger); }
.candidatos-preview-aviso { padding: 0 0 12px; font-size: .76rem; }
.turno-aviso { padding: 0 0 10px; font-size: .74rem; text-align: left; }

.painel-apuracao {
  background: #0b1a33;
  background: var(--nx-surface); border: 1px solid #1b3559; border: 1px solid var(--nx-border); border-radius: 9px; border-radius: var(--nx-radius-sm);
  overflow: hidden; margin-bottom: 14px; box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35); box-shadow: var(--nx-shadow);
}

.resumo { display: flex; flex-wrap: wrap; }
.resumo .tile {
  background: transparent; padding: 5px 8px; flex: 1 1 110px; min-width: 110px;
  border-right: 1px solid #1b3559;
  border-right: 1px solid var(--nx-border); border-bottom: 1px solid #1b3559; border-bottom: 1px solid var(--nx-border);
}
.resumo .tile:last-child { border-right: none; }
.tile-head { display: flex; align-items: center; gap: 4px; }
.tile-icon { color: #42b7ff; color: var(--nx-primary-light); flex-shrink: 0; width: 11px; height: 11px; }
.resumo .label { font-size: .56rem; text-transform: uppercase; letter-spacing: .04em; color: #6481a7; color: var(--nx-subtle); }
.resumo .val { font-family: 'JetBrains Mono', monospace; font-size: .82rem; font-weight: 700; margin-top: 1px; color: #eaf3ff; color: var(--nx-text); }
.resumo .val.small { font-size: .62rem; font-weight: 400; color: #9db4d4; color: var(--nx-muted); }
.apuracao-bar { height: 4px; border-radius: 3px; background: #102343; background: var(--nx-elevated); overflow: hidden; margin-top: 4px; }
.apuracao-bar > span {
  display: block; height: 100%; background: linear-gradient(90deg, #087bff, #42b7ff); background: linear-gradient(90deg, var(--nx-primary), var(--nx-primary-light));
  box-shadow: 0 0 8px rgba(8, 123, 255, 0.6);
}

.info-complementar { background: transparent; }
.info-complementar .resumo { border-top: 1px solid #1b3559; border-top: 1px solid var(--nx-border); }
.info-complementar .tile:first-child { border-left: none; }
.val-sub { font-size: .56rem; color: #6481a7; color: var(--nx-subtle); margin-top: 1px; }

.grafico-wrap {
  background: #0b1a33;
  background: var(--nx-surface); border: 1px solid #1b3559; border: 1px solid var(--nx-border); border-radius: 9px; border-radius: var(--nx-radius-sm);
  padding: 12px; margin-bottom: 10px; box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35); box-shadow: var(--nx-shadow); position: relative;
}
.grafico-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.grafico-titulo { font-size: .78rem; font-weight: 600; color: #9db4d4; color: var(--nx-muted); }
.grafico-legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.grafico-legenda li { display: flex; align-items: center; gap: 5px; font-size: .68rem; color: #9db4d4; color: var(--nx-muted); }
.legenda-swatch { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.grafico-svg { width: 100%; height: auto; max-height: 7cm; display: block; overflow: visible; }
.grafico-grade { stroke: #1b3559; stroke: var(--nx-border); stroke-width: .15; }
.semicirculo-svg { max-height: 8cm; }
.semicirculo-pct {
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 7px;
  fill: #eaf3ff;
  fill: var(--nx-text);
}
.semicirculo-nome {
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 3.4px;
  fill: #9db4d4;
  fill: var(--nx-muted); text-transform: uppercase; letter-spacing: .03em;
}
.grafico-vazio {
  background: #0b1a33;
  background: var(--nx-surface); border: 1px solid #1b3559; border: 1px solid var(--nx-border); border-radius: 9px; border-radius: var(--nx-radius-sm);
  padding: 16px; margin-bottom: 10px; text-align: center; color: #6481a7; color: var(--nx-subtle); font-size: .76rem;
}

.lista-candidatos { list-style: none; margin: 0; padding: 0; }
.card-candidato {
  display: flex; align-items: center; gap: 11px;
  background: #0b1a33;
  background: var(--nx-surface); border: 1px solid #1b3559; border: 1px solid var(--nx-border); border-radius: 9px; border-radius: var(--nx-radius-sm);
  padding: 10px; margin-bottom: 7px; transition: border-color .15s, -webkit-transform .15s; transition: border-color .15s, transform .15s; transition: border-color .15s, transform .15s, -webkit-transform .15s;
}
.card-candidato:hover { border-color: #247cff; border-color: var(--nx-border-active); }
.posicao {
  font-family: 'JetBrains Mono', monospace; font-weight: 700; color: #6481a7; color: var(--nx-subtle);
  flex-shrink: 0; padding-top: 2px;
}
.foto-wrap { position: relative; width: 50px; height: 68px; flex-shrink: 0; }
.foto-candidato {
  width: 50px; height: 68px; border-radius: 8px; -o-object-fit: cover; object-fit: cover; -o-object-position: top; object-position: top;
  border: 1px solid #1b3559;
  border: 1px solid var(--nx-border); background: #102343; background: var(--nx-elevated); display: block;
}
.foto-placeholder {
  width: 50px; height: 68px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: #102343;
  background: var(--nx-elevated); border: 1px solid #1b3559; border: 1px solid var(--nx-border); color: #6481a7; color: var(--nx-subtle);
  font-size: .85rem; font-weight: 700;
}
.info-candidato { flex: 1; min-width: 0; }
.linha-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.topo-direita { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.partido-sigla {
  font-size: .66rem; font-weight: 700; letter-spacing: .02em; color: #6481a7; color: var(--nx-subtle);
  flex-shrink: 0;
}
.numero-badge {
  font-family: 'JetBrains Mono', monospace; font-size: .66rem; font-weight: 700;
  background: rgba(8, 123, 255, 0.14);
  background: var(--nx-primary-soft); color: #42b7ff; color: var(--nx-primary-light);
  border-radius: 6px; padding: 2px 6px; flex-shrink: 0;
}
.nome { font-weight: 600; font-size: .92rem; margin-left: 2px; }
.status {
  margin-left: auto; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 3px 8px; border-radius: 999px; border: 1px solid transparent;
}
.status.eleito { background: rgba(34, 211, 160, 0.14); background: var(--nx-success-soft); color: #22d3a0; color: var(--nx-success); border-color: rgba(34,211,160,.3); }
.status.segundo-turno { background: rgba(244, 184, 96, 0.14); background: var(--nx-warning-soft); color: #f4b860; color: var(--nx-warning); border-color: rgba(244,184,96,.3); }

.barra-linha { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.barra-trilho { flex: 1; height: 7px; border-radius: 4px; background: #102343; background: var(--nx-elevated); overflow: hidden; }
.barra-fill { display: block; height: 100%; border-radius: 4px; background: #6481a7; background: var(--nx-subtle); transition: width .5s ease; }
.barra-fill[data-cls=eleito] { background: linear-gradient(90deg, #22d3a0, #34f0b8); background: linear-gradient(90deg, var(--nx-success), #34f0b8); box-shadow: 0 0 8px rgba(34,211,160,.5); }
.barra-fill[data-cls=segundo-turno] { background: linear-gradient(90deg, #f4b860, #ffd18c); background: linear-gradient(90deg, var(--nx-warning), #ffd18c); box-shadow: 0 0 8px rgba(244,184,96,.5); }
.pct { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: .85rem; width: 62px; text-align: right; }
.delta-badge {
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: .62rem;
  padding: 2px 7px; border-radius: 999px; letter-spacing: .02em;
}
.delta-badge.subiu { background: rgba(34, 211, 160, 0.14); background: var(--nx-success-soft); color: #22d3a0; color: var(--nx-success); border: 1px solid rgba(34,211,160,.3); }
.delta-badge.desceu { background: rgba(255,98,126,.14); background: var(--nx-danger-soft, rgba(255,98,126,.14)); color: #ff627e; color: var(--nx-danger); border: 1px solid rgba(255,98,126,.3); }
.votos { font-family: 'JetBrains Mono', monospace; font-size: .68rem; color: #6481a7; color: var(--nx-subtle); margin-top: 3px; }

/* Android <= 5 (Chrome < 84) não suporta `gap` em flexbox: compensa com
   margens nos filhos só quando `gap` não é suportado (evita espaçamento
   duplicado nos navegadores modernos). */
@supports not (gap: 1px) {
  .topo > * + *, .filtros > * + *, .linha-topo > * + *,
  .grafico-legenda > * + *, .turno-toggle > * + * { margin-left: 8px; }
  .filtros { margin-left: -7px; }
  .filtros > * { margin-left: 7px; margin-top: 7px; }
}

.vazio { text-align: center; color: #9db4d4; color: var(--nx-muted); padding: 24px 0; }
.rodape { font-size: .7rem; color: #6481a7; color: var(--nx-subtle); text-align: center; margin-top: 8px; }
.rodape-app {
  margin-top: 20px; font-size: .7rem; color: #6481a7; color: var(--nx-subtle); border-top: 1px solid #1b3559; border-top: 1px solid var(--nx-border); padding-top: 12px;
}
.rodape-app p { margin: 0 0 6px; }
.rodape-app p:last-child { margin-bottom: 0; }
.contador { display: flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; color: #9db4d4; color: var(--nx-muted); }
.contador-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #22d3a0; background: var(--nx-success);
  box-shadow: 0 0 6px #22d3a0;
  box-shadow: 0 0 6px var(--nx-success); flex-shrink: 0;
}
.creditos { margin-top: 8px; font-size: .62rem; color: #6481a7; color: var(--nx-subtle); opacity: .7; }

.live-pill.aguardando { background: rgba(244, 184, 96, 0.14); background: var(--nx-warning-soft); border-color: #f4b860; border-color: var(--nx-warning); color: #f4b860; color: var(--nx-warning); }
.live-pill.aguardando .live-dot { background: #f4b860; background: var(--nx-warning); box-shadow: 0 0 8px #f4b860; box-shadow: 0 0 8px var(--nx-warning); }

.countdown {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  background: #0b1a33;
  background: var(--nx-surface); border: 1px solid #1b3559; border: 1px solid var(--nx-border); border-radius: 9px; border-radius: var(--nx-radius-sm);
  padding: 20px 16px; margin-bottom: 14px; box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35); box-shadow: var(--nx-shadow);
}
.countdown-icon { color: #42b7ff; color: var(--nx-primary-light); }
.countdown-titulo { margin: 0; color: #9db4d4; color: var(--nx-muted); font-size: .76rem; }
.countdown-clock {
  font-family: 'JetBrains Mono', monospace; font-size: 1.7rem; font-weight: 700;
  letter-spacing: .02em; color: #eaf3ff; color: var(--nx-text);
  text-shadow: 0 0 20px rgba(8, 123, 255, 0.35);
}
.countdown-clock span { font-variant-numeric: tabular-nums; }
.countdown-sub { margin: 0; color: #6481a7; color: var(--nx-subtle); font-size: .68rem; }