/* MiRed Mapa Regiones — namespace raíz .mired-mapa (ver check-css-namespaces.sh) */

/* Contenedor de consulta: el layout se apila según el ancho REAL del widget, no del viewport,
   así ambos widgets se comportan igual dentro de cualquier contenedor de Elementor. */
.mired-mapa-wrap {
	container-type: inline-size;
	width: 100%;
}

/* En contenedores flex de Elementor con align-items ≠ stretch (p. ej. "centro" en tablet) el widget
   se encogía a 0px; el widget siempre ocupa el 100% del contenedor. */
.e-con > .elementor-widget.elementor-widget-mired-mapa-regiones,
.e-con > .elementor-widget.elementor-widget-mired-mapa-cobertura,
.elementor-column .elementor-widget-mired-mapa-regiones,
.elementor-column .elementor-widget-mired-mapa-cobertura {
	width: 100%;
	max-width: 100%;
	flex-shrink: 0;
}

.mired-mapa {
	--mired-mapa-bar: #1c9fe0;
	display: grid;
	width: 100%;
	box-sizing: border-box;
	grid-template-columns: var(--mired-mapa-cols-reg, minmax(0, 1fr) minmax(0, 1fr)); /* en ≤1024px siempre 1 columna */
	gap: 24px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.mired-mapa--solo,
.mired-mapa--cob.mired-mapa--solo {
	grid-template-columns: 1fr;
}

/* Apilado a una columna (ambos widgets, mismo punto): viewport ≤1024px (tablet de Elementor)
   o widget más estrecho que 760px (contenedores angostos en escritorio). */
@media (max-width: 1024px) {
	.mired-mapa-wrap .mired-mapa {
		grid-template-columns: 1fr;
	}
	.mired-mapa:not(.mired-mapa--cob) .mired-mapa__svg {
		max-width: 560px;
	}
	.mired-mapa--cob .mired-mapa__aside {
		align-self: auto;
	}
}

@container (max-width: 760px) {
	.mired-mapa-wrap .mired-mapa {
		grid-template-columns: 1fr;
	}
	.mired-mapa:not(.mired-mapa--cob) .mired-mapa__svg {
		max-width: 560px;
	}
	.mired-mapa--cob .mired-mapa__aside {
		align-self: auto;
	}
}

@media (max-width: 767px) {
	.mired-mapa {
		gap: 16px;
	}
	.mired-mapa__map {
		padding: 16px;
	}
	.mired-mapa__data {
		padding: 20px;
	}
	.mired-mapa__list {
		gap: 14px;
	}
}

/* ── Mapa ─────────────────────────────────────────────────────────────── */
.mired-mapa__map {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f0f0f0;
	border-radius: 16px;
	padding: 24px;
	box-sizing: border-box;
	min-width: 0;
	width: 100%;
}

.mired-mapa__data {
	min-width: 0;
	width: 100%;
}

/* ── SVG ──────────────────────────────────────────────────────────────── */
.mired-mapa__svg {
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}

.mired-mapa__zona {
	stroke: #fff;
	stroke-width: 1.5;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke; /* grosor en px reales, no escala con el mapa */
	cursor: pointer;
	transition: filter 0.2s, opacity 0.2s;
}

.mired-mapa.is-hovering .mired-mapa__zona:not(.is-active) {
	opacity: 0.35;
}

.mired-mapa__zona.is-active {
	filter: brightness(1.1);
}

.mired-mapa__tip {
	position: absolute;
	pointer-events: none;
	background: #1a1d23;
	color: #fff;
	font-size: 13px;
	line-height: 1.2;
	padding: 6px 10px;
	border-radius: 6px;
	white-space: nowrap;
	transform: translate(-50%, calc(-100% - 10px));
	z-index: 2;
}

/* ── Datos ────────────────────────────────────────────────────────────── */
.mired-mapa__data {
	background: #fff;
	border: 1px solid #e8eaed;
	border-radius: 16px;
	padding: 28px 32px;
	box-sizing: border-box;
}

.mired-mapa__title {
	font-size: 16px;
	font-weight: 700;
	color: #1a1d23;
	margin: 0 0 24px;
	line-height: 1.3;
}

.mired-mapa__list {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.mired-mapa__item {
	border-radius: 6px;
	transition: background 0.2s;
}

.mired-mapa__item.is-active {
	background: #f6f8fa;
	box-shadow: 0 0 0 6px #f6f8fa;
}

.mired-mapa__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 7px;
}

.mired-mapa__name {
	font-size: 14px;
	color: #1a1d23;
}

.mired-mapa__pct {
	font-size: 14px;
	color: #9ba1ab;
	white-space: nowrap;
	margin-left: 12px;
}

/* Barras con el color de su zona (switch en Estilo; variables --mired-mapa-zone-* las pone Elementor) */
.mired-mapa-bars-zone [data-zone-row="metropolitana"] { --mired-mapa-bar: var(--mired-mapa-zone-metropolitana, #e30613); }
.mired-mapa-bars-zone [data-zone-row="cibao"]         { --mired-mapa-bar: var(--mired-mapa-zone-cibao, #50b940); }
.mired-mapa-bars-zone [data-zone-row="sur"]           { --mired-mapa-bar: var(--mired-mapa-zone-sur, #f09420); }
.mired-mapa-bars-zone [data-zone-row="este"]          { --mired-mapa-bar: var(--mired-mapa-zone-este, #00aef0); }

.mired-mapa__desc {
	margin: -3px 0 8px;
	font-size: 12px;
	line-height: 1.4;
	color: #6b7280;
}

.mired-mapa__track {
	width: 100%;
	height: 6px;
	background: #f0f2f4;
	border-radius: 99px;
	overflow: hidden;
}

.mired-mapa__fill {
	height: 100%;
	background: var(--mired-mapa-bar);
	border-radius: 99px;
	width: 0%;
	transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.mired-mapa__fill.animating {
	background: linear-gradient(90deg, var(--mired-mapa-bar) 0%, #fff 50%, var(--mired-mapa-bar) 100%);
	background-size: 200% 100%;
	animation: mired-mapa-shimmer 1.2s ease infinite;
}

@keyframes mired-mapa-shimmer {
	0%   { background-position: 200% center; }
	100% { background-position: -200% center; }
}

@media (prefers-reduced-motion: reduce) {
	.mired-mapa__fill { transition: none; }
	.mired-mapa__fill.animating { animation: none; }
}

/* ── Variante cobertura: logo + leyenda | mapa ─────────────────────────── */
.mired-mapa--cob {
	grid-template-columns: var(--mired-mapa-cols, auto 1fr); /* en móvil siempre 1 columna (media query abajo) */
	gap: 40px;
	align-items: center;
	background: #f4f4f4;
	border-radius: 16px;
	padding: 40px;
	box-sizing: border-box;
}

.mired-mapa--cob .mired-mapa__map {
	background: transparent;
	padding: 0;
	border-radius: 0;
	min-width: 0; /* deja que la celda 1fr encoja sin desbordar */
	width: 100%;
}

/* Tablet y menor: una columna, mapa a todo el ancho */
.mired-mapa__aside {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-self: flex-start;
	align-items: flex-start;
	gap: 32px;
}

.mired-mapa__logo {
	width: 220px;
	max-width: 100%;
	height: auto;
	display: block;
}

.mired-mapa__legend {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
	font-size: 18px;
	font-weight: 700;
	color: #1a1d23;
}

.mired-mapa__legend li {
	display: flex;
	align-items: center;
	gap: 16px;
}

.mired-mapa__legend i {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border-radius: 6px;
	background: var(--mired-mapa-nivel, #ccc);
}

.mired-mapa--cob.is-hovering .mired-mapa__zona:not(.is-active) {
	opacity: 0.55;
}

@media (max-width: 767px) {
	.mired-mapa--cob {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 20px;
	}
	.mired-mapa--cob .mired-mapa__map {
		padding: 0;
	}
	.mired-mapa__legend {
		font-size: 15px;
		gap: 12px;
	}
	.mired-mapa__legend i {
		flex-basis: 22px;
		width: 22px;
		height: 22px;
	}
}