.zc-toggle {
	display: inline-flex;
	gap: 7.2px;
	margin-block: 5.4px 12.6px;
}

.zc-toggle-concelho {
	padding: 9px 18px;
	border: 1px solid var(--c-svc-input-border, rgba(10, 45, 77, 0.13));
	border-radius: var(--radius-md, 7.2px);
	background: var(--c-white, #fff);
	color: var(--c-ink, #0a2d4d);
	font-size: 13.05px;
	font-weight: 600;
	cursor: pointer;
}

.zc-toggle-concelho.is-active {
	border-color: var(--c-blue, #008bbd);
	background: var(--c-blue-soft, #e6f4fa);
	color: var(--c-blue, #008bbd);
}

.zc-mapa {
	display: flex;
	gap: 16.2px;
	align-items: stretch;
	margin-block: 5.4px 21.6px;
}

.zc-mapa__canvas-wrap {
	flex: 1 1 60%;
	min-width: 0;
	border: 1px solid var(--c-border-footer, rgba(10, 45, 77, 0.1));
	border-radius: var(--radius-lg, 12.6px);
	box-shadow: var(--sh-card-lg, 0 7.2px 21.6px rgba(10, 45, 77, 0.07));
	overflow: hidden;
}

.zc-mapa__canvas {
	width: 100%;
	height: 522px;
	background: #f4f9fc;
}

.zc-mapa__side {
	flex: 0 0 300px;
	display: flex;
	flex-direction: column;
	gap: 12.6px;
}

#zc-painel {
	display: flex;
	flex-direction: column;
	gap: 10.8px;
	padding: 18px 19.8px;
	border: 1px solid var(--c-border-footer, rgba(10, 45, 77, 0.1));
	border-radius: var(--radius-lg, 12.6px);
	background: var(--c-white, #fff);
	box-shadow: var(--sh-card, 0 7.2px 10.8px rgba(10, 45, 77, 0.07));
	min-height: 220px;
}

.zc-painel__placeholder {
	font-size: 13.5px;
	line-height: 20.7px;
	color: var(--c-slate, #465b6e);
}

.zc-painel__titulo {
	font-size: 16.2px;
	font-weight: 600;
	line-height: 21.6px;
	color: var(--c-ink, #0a2d4d);
}

.zc-concelho {
	font-weight: 400;
	color: var(--c-slate, #465b6e);
}

.zc-painel__linhas {
	display: flex;
	flex-direction: column;
	gap: 6.3px;
}

.zc-painel__linha {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10.8px;
	padding-block: 3.6px;
	border-bottom: 1px solid var(--c-border-footer, rgba(10, 45, 77, 0.08));
}

.zc-painel__label {
	font-size: 12.15px;
	font-weight: 500;
	color: var(--c-slate, #465b6e);
}

.zc-painel__valor {
	font-size: 13.05px;
	font-weight: 600;
	color: var(--c-ink, #0a2d4d);
	text-align: right;
}

.zc-painel__aviso {
	margin-top: 3.6px;
	padding: 10.8px 12.6px;
	border-radius: var(--radius-md, 7.2px);
	background: #fdf3e3;
	color: #7a5a10;
	font-size: 11.7px;
	line-height: 17.1px;
}

.zc-legenda {
	display: flex;
	flex-direction: column;
	gap: 7.2px;
	padding: 14.4px 16.2px;
	border: 1px solid var(--c-border-footer, rgba(10, 45, 77, 0.1));
	border-radius: var(--radius-lg, 12.6px);
	background: var(--c-blue-soft, #e6f4fa);
	list-style: none;
	margin: 0;
}

.zc-legenda li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 12.15px;
	color: var(--c-ink, #0a2d4d);
}

.zc-legenda-swatch {
	width: 14.4px;
	height: 14.4px;
	border-radius: 3.6px;
	flex-shrink: 0;
}

.zc-legenda-swatch--contencao_absoluta { background: #c0392b; }
.zc-legenda-swatch--contencao_relativa { background: #e67e22; }
.zc-legenda-swatch--crescimento_sustentavel { background: #d4ac0d; }
.zc-legenda-swatch--sem_restricao { background: #1e8f5f; }

.zc-badge {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	padding: 3.6px 10.8px;
	border-radius: 999px;
	font-size: 11.25px;
	font-weight: 600;
	color: #fff;
}

.zc-badge--contencao_absoluta { background: #c0392b; }
.zc-badge--contencao_relativa { background: #e67e22; }
.zc-badge--crescimento_sustentavel { background: #d4ac0d; color: #4a3a06; }
.zc-badge--sem_restricao { background: #1e8f5f; }
.zc-badge--sem_dados { background: #9aa5ad; }

.leaflet-control-attribution { display: none; }

.leaflet-tooltip.zc-tooltip {
	padding: 6.3px 10.8px;
	border: 1px solid var(--c-border-footer, rgba(10, 45, 77, 0.1));
	border-radius: var(--radius-md, 7.2px);
	background: var(--c-white, #fff);
	box-shadow: var(--sh-card-lg, 0 7.2px 21.6px rgba(10, 45, 77, 0.14));
	font-size: 12.15px;
	font-weight: 600;
	color: var(--c-ink, #0a2d4d);
}

/* ---------------------------------------------------------------
   Tabela completa (as 24 freguesias de Lisboa + as 15 freguesias
   históricas do Porto — a única forma de ver o detalhe do Porto ao
   nível exato do regulamento, já que o mapa só distingue ao nível da
   união de freguesias; ver inc/zonas-contencao.php).
   --------------------------------------------------------------- */
.zc-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--c-border-footer, rgba(10, 45, 77, 0.1));
	border-radius: var(--radius-lg, 12.6px);
}

.zc-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.05px;
}

.zc-table th,
.zc-table td {
	padding: 10.8px 14.4px;
	text-align: left;
	white-space: nowrap;
	border-bottom: 1px solid var(--c-border-footer, rgba(10, 45, 77, 0.08));
}

.zc-table th {
	font-size: 11.7px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.36px;
	color: var(--c-slate, #465b6e);
	background: var(--c-band, #eef5f9);
}

.zc-table tbody tr:last-child td { border-bottom: none; }

/* ---------------------------------------------------------------
   Secção explicativa ("como funciona este mapa") — lista numerada com
   destaque visual, para se distinguir claramente do texto corrido.
   --------------------------------------------------------------- */
.zc-explica {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.zc-explica__item {
	display: flex;
	gap: 14.4px;
	padding: 16.2px 18px;
	border: 1px solid var(--c-svc-card-border, #d7ecf5);
	border-radius: var(--radius-lg, 12.6px);
	background: var(--c-svc-card-bg, #f4f9fc);
}

.zc-explica__num {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 28.8px;
	height: 28.8px;
	border-radius: 50%;
	background: var(--c-blue, #008bbd);
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
}

.zc-explica__corpo h3 {
	font-size: 14.85px;
	font-weight: 600;
	line-height: 20.7px;
	color: var(--c-ink, #0a2d4d);
	margin-bottom: 4.5px;
}

.zc-explica__corpo p {
	font-size: 13.05px;
	line-height: 20.7px;
	color: var(--c-body, #536373);
}

.zc-explica__corpo p + p { margin-top: 8.1px; }

.zc-disclaimer {
	margin-top: 5.4px;
	padding: 14.4px 16.2px;
	border-radius: var(--radius-lg, 12.6px);
	background: #fdf3e3;
	color: #7a5a10;
	font-size: 12.6px;
	line-height: 19.8px;
}

@media (max-width: 900px) {
	.zc-mapa {
		flex-direction: column;
	}

	.zc-mapa__side {
		flex: none;
	}

	.zc-mapa__canvas {
		height: 396px;
	}
}

@media (max-width: 560px) {
	.zc-mapa__canvas {
		height: 342px;
	}

	.zc-explica__item {
		flex-direction: column;
		gap: 7.2px;
	}
}