/**
 * EJ Decide — estilos funcionais mínimos dos widgets "Plano de Governo por
 * RA" (mapa, obras, metas e participação por área). Reaproveita as
 * variáveis de cor e classes (.area, .aprops, .ejd-ej-block, ...) já
 * definidas em ejd-plano.css. Refinamento visual fica para uma etapa
 * posterior — aqui o objetivo é só o recurso funcionar de forma legível.
 */

.ejd-ra-map-widget .mapwrap {
	background: #fff;
	padding: 10px;
}

/**
 * Mapa vetorial das 35 RAs (assets/images/ejd-ra-mapa.svg, extraído dos
 * mapas do Wikimedia Commons — ver .tmp_build_ra_map.py). Cinza por
 * padrão, com prévia no hover/foco e destaque na RA selecionada.
 *
 * Cor padrão, cor de destaque, cor e espessura do traço são
 * configuráveis na aba "Estilo" do widget "EJ Decide — RA: Mapa" no
 * Elementor (EJD_Elementor_Ra_Map_Widget), que grava essas variáveis
 * CSS no wrapper do widget. Os valores abaixo (segundo argumento de
 * cada `var()`) são só o padrão para quando o widget não estiver dentro
 * do Elementor (ex.: o shortcode [ej-decide-ra-preview]).
 */
.ejd-ra-shape {
	fill: var(--ejd-ra-shape-color, #d6dade);
	stroke: var(--ejd-ra-shape-stroke-color, #fff);
	stroke-width: var(--ejd-ra-shape-stroke-width, 0.6px);
	cursor: pointer;
	transition: fill 0.15s;
}

/**
 * RAs com estatística de execução recebem `fill` inline (ver
 * EJD_RA_Renderer::get_map_svg_parts()), que tem precedência sobre a
 * regra acima. Como o hover não pode sobrescrever esse fill via cor
 * fixa (cada RA tem uma cor diferente), escurece com `filter` — exceto
 * na RA ativa, que sempre usa a cor de destaque fixa.
 */
.ejd-ra-shape:hover,
.ejd-ra-shape:focus {
	filter: brightness(0.85);
	outline: none;
}

.ejd-ra-shape.is-active {
	fill: var(--ejd-ra-shape-highlight-color, var(--ejd-az)) !important;
}

.ejd-ra-shape.is-active:hover,
.ejd-ra-shape.is-active:focus {
	fill: var(--ejd-ra-shape-highlight-color, var(--ejd-az)) !important;
	filter: none;
}

/**
 * No mobile, o mapa é só feedback visual (continua mostrando a RA
 * selecionada em destaque) — a seleção em si é sempre feita pelo
 * `<select>` abaixo, nunca tocando diretamente nas formas do mapa
 * (áreas de toque pequenas/vizinhas demais para precisão no dedo).
 */
@media (max-width: 768px) {
	.ejd-ra-shape {
		pointer-events: none;
		cursor: default;
	}
}

.ejd-ra-title {
	font-family: Montserrat, sans-serif;
	font-weight: 800;
	font-size: 26px;
	color: var(--ejd-az);
	margin: 0 0 14px;
	letter-spacing: -0.3px;
}

.ejd-ra-select-label {
	display: block;
}

.ejd-ra-select {
	margin-top: 14px;
	width: 100%;
	max-width: 360px;
	padding: 10px 12px;
	border: 1px solid var(--ejd-ln);
	border-radius: 3px;
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	background: #fff;
}

.ejd-ra-panel .racab {
	font-family: Montserrat, sans-serif;
	font-weight: 800;
	font-size: 24px;
	color: var(--ejd-az);
	margin: 0 0 4px;
}

/**
 * Grid de resumo de obras (render_obras_content()): total catalogado e
 * obras paradas lado a lado na mesma linha, e a terceira célula (obras
 * em andamento) funciona como botão que abre/fecha a tabela abaixo.
 * Números e textos em elementos próprios para permitir destaque
 * customizado via CSS.
 */
.ejd-ra-obras-summary {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 24px;
	margin-bottom: 16px;
}

.ejd-ra-obras-stat {
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.ejd-ra-obras-stat-number {
	font-family: Montserrat, sans-serif;
	font-weight: 800;
	font-size: 26px;
	color: var(--ejd-az);
}

.ejd-ra-obras-stat-label {
	color: var(--ejd-cz);
	font-size: 14px;
}

/**
 * A cor de fundo real (a mesma cor — e intensidade conforme o
 * percentual de execução — que a RA aparece no mapa territorial) é
 * calculada em PHP e injetada via `style="background:..."` por
 * EJD_RA_Renderer::render_obras_content() (mesma função de
 * interpolação do mapa, EJD_RA_Renderer::color_with_opacity()). O
 * valor abaixo é só o fallback para quando o widget não informa uma
 * "Cor de execução" (ex.: o shortcode [ej-decide-ra-preview]).
 */
.ejd-ra-obras-toggle {
	grid-column: 1 / -1;
	align-items: center;
	background: #d6dade;
	border: 1px solid transparent;
	border-radius: 3px;
	padding: 12px 16px;
	margin-top: 8px;
	cursor: pointer;
	width: 100%;
	text-align: left;
	font: inherit;
}

.ejd-ra-obras-toggle .ejd-ra-obras-stat-number,
.ejd-ra-obras-toggle .ejd-ra-obras-stat-label,
.ejd-ra-obras-toggle .ejd-ra-obras-stat-percent {
	color: #1a1a2e;
}

.ejd-ra-obras-stat-percent {
	color: var(--ejd-cz);
	font-size: 14px;
}

.ejd-ra-obras-toggle-icon {
	margin-left: auto;
	color: #1a1a2e;
	transition: transform 0.15s;
}

.ejd-ra-obras-toggle[aria-expanded="true"] .ejd-ra-obras-toggle-icon {
	transform: rotate(180deg);
}

.ejd-ra-obras-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid var(--ejd-ln);
	font-size: 14.5px;
	margin-top: 8px;
}

.ejd-ra-obras-table th {
	font-family: Montserrat, sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	background: var(--ejd-az);
	color: #fff;
	padding: 11px 12px;
	text-align: left;
}

.ejd-ra-obras-table td {
	padding: 10px 12px;
	border-top: 1px solid var(--ejd-ln);
	vertical-align: top;
}

.ejd-ra-obras-table tr:nth-child(even) td {
	background: #fcfbf9;
}

.ejd-ra-obras-table td.n {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ejd-ra-panel .pendente {
	background: #fff8e6;
	border: 1px solid #f0d9a0;
	border-left: 4px solid var(--ejd-am);
	padding: 14px 18px;
	margin-top: 16px;
	border-radius: 3px;
	font-size: 15px;
}

.ejd-ra-areas-widget .areas {
	padding: 6px 0 0;
}

/**
 * Legenda da escala de execução do mapa (widget independente
 * EJD_Elementor_Ra_Exec_Legend_Widget) — barra em gradiente de branco
 * (0%) até a cor de execução configurada (100%).
 */
.ejd-ra-exec-legend-bar {
	height: 14px;
	border-radius: 3px;
	border: 1px solid var(--ejd-ln);
}

.ejd-ra-exec-legend-labels {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	font-size: 12px;
	color: var(--ejd-cz);
	font-family: Montserrat, sans-serif;
}

.ejd-ra-exec-legend-caption {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--ejd-cz);
}