/* =============================================================
   Mapa de representantes
   O mapa é a camada visual; a lista de estados ao lado é a
   navegação de verdade — funciona sem script, com teclado e com
   leitor de tela, e resolve a leitura em telas pequenas, onde
   rótulos dentro do mapa seriam ilegíveis.
   ============================================================= */

.mapa {
	display: grid;
	gap: var(--e-6);
}

@media (min-width: 62em) {
	.mapa {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		align-items: start;
		/* Linha menor que coluna: a faixa de siglas fica perto do mapa. */
		gap: var(--e-6) var(--e-8);
	}
}

.mapa__figura {
	margin: 0;
}

.mapa__svg {
	width: 100%;
	height: auto;
}

.mapa__uf {
	fill: var(--c-fundo-sunk);
	stroke: var(--c-fundo);
	stroke-width: 1.5;
	stroke-linejoin: round;
	transition: fill var(--transicao);
}

/* Estado com representante: clicável e na cor da marca. */
.mapa__uf--ativo {
	fill: var(--c-acao-media);
	cursor: pointer;
}

.mapa__uf--ativo:hover {
	fill: var(--c-acao-hover);
}

.mapa__uf--ativo:focus-visible {
	outline: 3px solid var(--c-foco);
	outline-offset: 2px;
}

.mapa__uf--ativo.is-selecionado {
	fill: var(--c-acao);
}

/* Estado sem representante: cor neutra, sem foco e sem clique. */
.mapa__uf--vazio {
	pointer-events: none;
}

.mapa__legenda {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-2) var(--e-5);
	margin-block-start: var(--e-4);
	font-size: var(--t-xs);
	color: var(--c-texto-suave);
}

.mapa__legenda span {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
}

.mapa__legenda span::before {
	content: "";
	width: 0.85rem;
	height: 0.85rem;
	border-radius: var(--raio-sm);
	background: var(--c-fundo-sunk);
}

.mapa__legenda .is-com::before {
	background: var(--c-acao);
}

/* Lista de estados -------------------------------------------- */
/* Vem antes do mapa e ocupa a largura toda, em siglas: a navegação
   inteira cabe numa faixa de uma ou duas linhas. Em coluna, com o
   nome por extenso, ela crescia a cada estado novo e empurrava os
   representantes para longe do mapa que os explica. */
.mapa__estados {
	margin-top: 20px;
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-1);
}

.mapa__estado a {
	display: inline-flex;
	align-items: baseline;
	gap: var(--e-2);
	padding: var(--e-2) var(--e-3);
	border: 1px solid var(--c-borda);
	border-radius: var(--raio-sm);
	font-size: var(--t-xs);
	font-weight: var(--peso-medio);
	line-height: 1;
	color: var(--c-texto-medio);
	text-decoration: none;
	transition: background-color var(--transicao), color var(--transicao), border-color var(--transicao);
}

.mapa__estado a:hover,
.mapa__estado a[aria-current="true"] {
	background: var(--c-acao-suave);
	border-color: var(--c-acao-media);
	color: var(--c-acao-escura);
}

.mapa__estado span {
	font-weight: var(--peso-normal);
	color: var(--c-texto-suave);
}

.mapa__estado a:hover span,
.mapa__estado a[aria-current="true"] span {
	color: inherit;
}

/* Painéis ------------------------------------------------------ */
.mapa__painel {
	padding-block-start: var(--e-5);
	border-block-start: 2px solid var(--c-borda);
}

.mapa__painel-titulo {
	margin-block-end: var(--e-5);
	font-size: var(--t-lg);
}

.mapa__orgao+.mapa__orgao {
	margin-block-start: var(--e-6);
}

/* Só a sigla, e só quando o estado tem um órgão: com mais de um,
   quem nomeia o bloco é a aba. */
.mapa__orgao-nome {
	margin-block-end: var(--e-5);
	font-size: var(--t-base);
	font-weight: var(--peso-medio);
	color: var(--c-texto-forte);
}

.mapa__pessoas {
	--grade-min: 12rem;
}