/* ==========================================================================
   Navegação em cascata por chips/cards — usada em Eleições (Nível → Estado →
   Município → Ano). Inspirada no fluxo "Meu Candidato" do
   portalpolitica.com.br, com acabamento mais moderno (sombra suave em vez
   de borda sólida, cantos arredondados, leve elevação no hover). Usa os
   tokens de cor que já existem em shell.css (--navy-700/--green-500 já são,
   por coincidência feliz, as mesmas cores do portal). Apesar do nome do
   arquivo, não é mais específico de Políticos — a navegação migrou pra
   Eleições; o arquivo continua com esse nome pra não quebrar o link já
   publicado, mas as classes aqui são genéricas (chip-categoria, card-estado).
   ========================================================================== */

.politicos-navegacao {
  margin-bottom: var(--space-6, 24px);
}

.politicos-navegacao__categorias {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.chip-categoria {
  border: none;
  border-radius: 999px;
  padding: 8px 18px;
  background: var(--slate-100);
  color: var(--navy-700);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.chip-categoria.is-active,
.chip-categoria:hover {
  background: var(--navy-700);
  color: var(--white);
}

/* Segunda camada (cargos, cascateada a partir do nível escolhido acima) —
   mesma pílula, cor de destaque diferente pra deixar a hierarquia visível. */
.politicos-navegacao__cargos {
  margin-top: -6px;
}

.politicos-navegacao__cargos .chip-categoria {
  font-size: 12.5px;
  padding: 6px 14px;
}

.politicos-navegacao__cargos .chip-categoria.is-active,
.politicos-navegacao__cargos .chip-categoria:hover {
  background: var(--green-500);
  color: var(--white);
}

.politicos-navegacao__estados {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.card-estado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(4, 27, 56, 0.06), 0 4px 12px -8px rgba(4, 27, 56, 0.18);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}

.card-estado:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px -6px rgba(4, 27, 56, 0.28);
}

.card-estado.is-active {
  background: var(--navy-700);
  box-shadow: 0 4px 16px -4px rgba(4, 27, 56, 0.4);
}

.card-estado.is-active .card-estado__sigla {
  color: var(--white);
}

.card-estado.is-active .card-estado__nome {
  color: var(--slate-300);
}

.card-estado__sigla {
  font-weight: 700;
  color: var(--navy-700);
  font-size: 13px;
}

.card-estado__nome {
  font-size: 11px;
  color: var(--slate-500);
  text-align: center;
}

/* A regra "[hidden] { display: none !important }" agora é global (topo de
   shell.css) — cobre qualquer classe daqui que declare display próprio, sem
   precisar de uma exceção específica por classe como antes. */

/* Combobox de município (Eleições) — busca com sugestões, pra estados com
   centenas de municípios (Bahia tem 417) onde uma grade de cards inteira
   ficaria inviável. Reaproveita a mesma moldura visual de "Localizar
   Político" (.politicos-busca__campo/__icone/__input, shell.css). */
.combobox {
  position: relative;
  margin-bottom: 20px;
}

.combobox__lista {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card-hover);
  z-index: 20;
}

.combobox__item {
  padding: 10px 16px;
  font-size: 13.5px;
  color: var(--ink-900);
  cursor: pointer;
}

.combobox__item:hover,
.combobox__item.is-active {
  background: var(--slate-100);
}

.combobox__vazio {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--slate-500);
}