/* Puntos de interés de los mapas del portal (MapaGold, 2026-10-08). Ver assets/mapa-pois.js.
   La barra va ARRIBA del mapa, como el selector de zonas: se elige qué ver y después se mira. */

.mdpd-mapa-pois {
	--mdpd-pois-primario: var(--fs-color-primary, #168ea6);
	--mdpd-pois-borde: #dde1e6;
	--mdpd-pois-tinta: #2b3b45;
	position: relative;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .75rem;
	margin-bottom: .6rem;
	color: var(--mdpd-pois-tinta);
	font-size: 13px;
	line-height: 1.3;
}

/* Interruptor general: apagado, los botones quedan a la vista pero inactivos. */
.mdpd-mapa-pois__switch {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding-right: .75rem;
	border-right: 1px solid var(--mdpd-pois-borde);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
}
.mdpd-mapa-pois__switch input,
.mdpd-mapa-pois__3d input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	margin: 0;
}
.mdpd-mapa-pois__sw {
	position: relative;
	flex: none;
	width: 36px;
	height: 20px;
	border-radius: 999px;
	background: #cfd3da;
	transition: background .2s;
}
.mdpd-mapa-pois__sw::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
	transition: transform .2s;
}
.mdpd-mapa-pois__switch input:checked + .mdpd-mapa-pois__sw { background: var(--mdpd-pois-primario); }
.mdpd-mapa-pois__switch input:checked + .mdpd-mapa-pois__sw::after { transform: translateX(16px); }
.mdpd-mapa-pois__switch input:focus-visible + .mdpd-mapa-pois__sw { outline: 2px solid var(--mdpd-pois-primario); outline-offset: 2px; }

/* `overflow-x: clip`: los cartelitos, aun invisibles, ensanchaban la página en el celular.
   Cortados de costado y abiertos hacia abajo; cerca de un borde, el JS los alinea adentro. */
.mdpd-mapa-pois__chips {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	overflow-x: clip;
	transition: opacity .2s;
}
.mdpd-mapa-pois.is-apagado .mdpd-mapa-pois__chips {
	opacity: .35;
	pointer-events: none;
}

/* Cada categoría: solo el ícono; el nombre, en un cartelito al pasar el mouse o con el
   teclado. Apagada = ícono gris y tenue. La opacidad va en el ícono y no en el botón,
   para que el cartelito se vea entero en los dos estados. */
.mdpd-mapa-pois__chip {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid var(--mdpd-pois-borde);
	border-radius: 50%;
	background: #fff;
	box-shadow: none;
	font: inherit;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}
.mdpd-mapa-pois__chip svg {
	width: 22px;
	height: 22px;
	opacity: .4;
	filter: grayscale(1);
	transition: opacity .15s, filter .15s;
}
.mdpd-mapa-pois__chip[aria-pressed="true"] {
	border-color: var(--c);
	box-shadow: inset 0 0 0 1px var(--c);
	background: color-mix(in srgb, var(--c) 8%, #fff);
}
.mdpd-mapa-pois__chip[aria-pressed="true"] svg { opacity: 1; filter: none; }
.mdpd-mapa-pois__chip:hover { border-color: var(--c); }
.mdpd-mapa-pois__chip:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.mdpd-mapa-pois__chip::after {
	content: attr(data-nombre);
	position: absolute;
	top: calc(100% + 9px);
	left: 50%;
	z-index: 30;
	transform: translate(-50%, -4px);
	padding: 5px 10px;
	border-radius: 8px;
	background: var(--mdpd-pois-tinta);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s, transform .15s;
}
.mdpd-mapa-pois__chip::before {
	content: "";
	position: absolute;
	top: calc(100% + 4px);
	left: 50%;
	z-index: 30;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top: 0;
	border-bottom-color: var(--mdpd-pois-tinta);
	opacity: 0;
	transition: opacity .15s;
}
.mdpd-mapa-pois__chip:hover::after,
.mdpd-mapa-pois__chip:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.mdpd-mapa-pois__chip.is-izq::after { left: 0; transform: translate(0, -4px); }
.mdpd-mapa-pois__chip.is-der::after { left: auto; right: 0; transform: translate(0, -4px); }
.mdpd-mapa-pois__chip.is-izq:hover::after, .mdpd-mapa-pois__chip.is-izq:focus-visible::after,
.mdpd-mapa-pois__chip.is-der:hover::after, .mdpd-mapa-pois__chip.is-der:focus-visible::after { transform: translate(0, 0); }
.mdpd-mapa-pois__chip:hover::before,
.mdpd-mapa-pois__chip:focus-visible::before { opacity: 1; }

/* Botón 3D. */
.mdpd-mapa-pois__3d {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 7px 14px 7px 11px;
	border: 1px solid var(--mdpd-pois-borde);
	border-radius: 999px;
	background: #fff;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
	transition: background .15s, color .15s, border-color .15s;
}
.mdpd-mapa-pois__3d svg {
	width: 20px;
	height: 20px;
	color: var(--mdpd-pois-primario);
	transition: transform .4s;
}
.mdpd-mapa-pois__3d:hover { border-color: var(--mdpd-pois-primario); }
.mdpd-mapa-pois__3d:has(input:checked) { background: var(--mdpd-pois-primario); border-color: var(--mdpd-pois-primario); color: #fff; }
.mdpd-mapa-pois__3d:has(input:checked) svg { color: #fff; transform: rotate(-25deg); }
.mdpd-mapa-pois__3d:has(input:focus-visible) { outline: 2px solid var(--mdpd-pois-primario); outline-offset: 2px; }

/* Cartel de un punto al pasar el mouse: el del modelo (.globo-poi de marcadores.html).
   Lo ubica el JS para que no se salga del mapa. */
.mdpd-mapa-pois__globo {
	position: absolute;
	z-index: 7;
	pointer-events: none;
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	color: var(--mdpd-pois-tinta, #2b3b45);
	padding: 6px 12px 6px 7px;
	border-radius: 10px;
	box-shadow: 0 6px 16px rgba(20, 24, 40, .22);
	width: max-content;
	max-width: 240px;
}
.mdpd-mapa-pois__globo[hidden] { display: none; }
.mdpd-mapa-pois__globo-ico { width: 24px; height: 24px; flex: none; }
.mdpd-mapa-pois__globo-ico svg { display: block; width: 100%; height: 100%; }
/* min-width: 0 deja que el texto se achique dentro del flex; sin eso un nombre largo
   empuja la caja y se sale. El nombre corta en dos líneas como mucho, con «…». */
.mdpd-mapa-pois__globo > span:last-child { min-width: 0; }
.mdpd-mapa-pois__globo b {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.25;
	overflow-wrap: anywhere;
}
.mdpd-mapa-pois__globo small { display: block; font-size: 11px; color: #666; }

/* --- Plegado (el botón solo se ve en el celular). En la computadora el panel es
   `display: contents`: sus hijos quedan en la fila de la barra, como siempre. */
.mdpd-mapa-pois__abrir,
.mdpd-mapa-pois__chip-nombre {
	display: none;
}

.mdpd-mapa-pois__panel {
	display: contents;
}

/* --- Celular: la barra es UN botón «Puntos de interés» (con la cantidad de categorías
   prendidas) y el 3D. El panel se despliega SOBRE el mapa, a todo el ancho, con cada
   categoría en una fila con su nombre: no hay mouse para el cartelito. Se pliega con el
   mismo botón, tocando afuera o con Escape. */
@media (max-width: 549px) {
	.mdpd-mapa-pois {
		flex-wrap: nowrap;
	}

	.mdpd-mapa-pois__abrir {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-height: 0;
		margin: 0;
		padding: 7px 12px 7px 11px;
		border: 1px solid var(--mdpd-pois-borde);
		border-radius: 999px;
		background: #fff;
		box-shadow: none;
		color: var(--mdpd-pois-tinta);
		font: inherit;
		font-size: 13px;
		font-weight: 600;
		line-height: 1.3;
		letter-spacing: normal;
		text-transform: none;
		cursor: pointer;
	}

	.mdpd-mapa-pois__abrir-ico {
		width: 20px;
		height: 20px;
		color: var(--mdpd-pois-primario);
	}

	.mdpd-mapa-pois__abrir-flecha {
		width: 16px;
		height: 16px;
		transition: transform 0.2s;
	}

	.mdpd-mapa-pois__cuenta {
		min-width: 20px;
		padding: 1px 6px;
		border-radius: 999px;
		background: var(--mdpd-pois-primario);
		color: #fff;
		font-size: 11px;
		font-weight: 700;
		text-align: center;
	}

	.mdpd-mapa-pois__cuenta.is-no {
		background: #cfd3da;
		color: var(--mdpd-pois-tinta);
	}

	.mdpd-mapa-pois.is-abierta .mdpd-mapa-pois__abrir {
		border-color: var(--mdpd-pois-primario);
	}

	.mdpd-mapa-pois.is-abierta .mdpd-mapa-pois__abrir-flecha {
		transform: rotate(180deg);
	}

	.mdpd-mapa-pois__3d {
		margin-left: auto;
	}

	/* El panel plegado no está; desplegado, flota sobre el mapa. */
	.mdpd-mapa-pois__panel {
		display: none;
	}

	.mdpd-mapa-pois.is-abierta .mdpd-mapa-pois__panel {
		position: absolute;
		top: calc(100% + 6px);
		left: 0;
		right: 0;
		z-index: 20;
		display: block;
		max-height: min(70vh, 420px);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 12px;
		background: #fff;
		border: 1px solid var(--mdpd-pois-borde);
		border-radius: 14px;
		box-shadow: 0 12px 30px rgba(20, 24, 40, 0.22);
	}

	.mdpd-mapa-pois__switch {
		display: flex;
		margin-bottom: 10px;
		padding: 0 0 10px;
		border-right: 0;
		border-bottom: 1px solid var(--mdpd-pois-borde);
	}

	/* Las categorías, de a dos por fila, con el ícono y el nombre. */
	.mdpd-mapa-pois__chips {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 6px;
		overflow: visible;
	}

	.mdpd-mapa-pois__chip {
		display: flex;
		justify-content: flex-start;
		gap: 8px;
		width: auto;
		height: auto;
		min-height: 44px;
		padding: 6px 10px;
		border-radius: 12px;
		text-align: left;
	}

	.mdpd-mapa-pois__chip svg {
		flex: none;
	}

	.mdpd-mapa-pois__chip-nombre {
		display: block;
		color: var(--mdpd-pois-tinta);
		font-size: 12px;
		font-weight: 600;
		line-height: 1.25;
	}

	.mdpd-mapa-pois__chip[aria-pressed="false"] .mdpd-mapa-pois__chip-nombre {
		color: #8a8f99;
	}

	/* Sin cartelito: el nombre ya está a la vista. */
	.mdpd-mapa-pois__chip::before,
	.mdpd-mapa-pois__chip::after {
		display: none;
	}
}