/* Tema escuro de monitoramento (mesmas cores da versão Dash) */
:root {
  --fundo: #0d1117;
  --painel: #161b22;
  --borda: #30363d;
  --trilho: #21262d;
  --suave: #8b949e;
  --texto: #e6edf3;
}

body { background: var(--fundo); color: var(--texto); }
.suave { color: var(--suave) !important; }
.titulo-painel { font-weight: 800; font-size: 1.6rem; letter-spacing: 1px; color: #fff; }
.faixa { height: 4px; margin-top: 14px; border-radius: 2px; background: linear-gradient(90deg, #00a859, #1b4f9c, #ffcc29); }
.painel { background: var(--painel); border: 1px solid var(--borda); border-radius: 10px; }
.detalhe { scroll-margin-top: 12px; }
.trilho, .progress-stacked { background-color: var(--trilho); }

/* Cards dos candidatos */
.card-cand { background: var(--fundo); border-radius: 8px; padding: 14px 16px; border-left: 8px solid; }
.card-cand .pct { font-size: 2.6rem; font-weight: 800; line-height: 1.1; }
.card-cand .min-w-0 { min-width: 0; }
/* Foto de urna é 3x4: o recorte redondo pega o rosto, perto do topo */
.foto-cand, .iniciais-cand { width: 84px; height: 84px; flex-shrink: 0; border-radius: 50%; }
.foto-cand { object-fit: cover; object-position: center 18%; border: 3px solid; background: var(--trilho); }
.iniciais-cand { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.6rem; color: #fff; }

/* Mapa */
#mapa, #mapa-apuracao { height: min(600px, 75vh); }

/* Barra da disputa: o que falta para 100% (outros, brancos, nulos) */
.seg-outros { background-color: #6e7681; }
.seg-brancos { background-color: #c9d1d9; color: #0d1117; }
.seg-nulos { background-color: #484f58; }
.legenda-barra .bolinha { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; }
#modo-mapa .btn { white-space: nowrap; }

/* Painel direito */
.mini-resumo .bloco { flex: 1; padding-left: 10px; border-left: 4px solid; }
.mini-resumo .bloco .valor { font-weight: 800; font-size: 1.4rem; }

/* Tabela de cidades/zonas */
.tabela-locais { width: 100%; font-size: .9rem; border-collapse: collapse; }
.tabela-locais th, .tabela-locais td { border: 1px solid var(--borda); padding: 6px 8px; text-align: left; white-space: nowrap; }
.tabela-locais th { background: var(--trilho); color: var(--texto); font-weight: 700; cursor: pointer; user-select: none; }
.tabela-locais th:hover { background: #2b323b; }
.tabela-locais td { background: var(--painel); }
.tabela-locais tbody tr:nth-child(odd) td { background: #1b2129; }
.tabela-locais td.lider { color: #fff; font-weight: 700; }
.tabela-rolagem { overflow-x: auto; }

@media (max-width: 767.98px) {
  .card-cand .pct { font-size: 2rem; }
  .foto-cand, .iniciais-cand { width: 60px; height: 60px; }
  .iniciais-cand { font-size: 1.2rem; }
  #mapa, #mapa-apuracao { height: min(70vh, 110vw); }   /* o Brasil é quase quadrado: sem faixa vazia em telas altas */
}