.mapa-puntos-wrapper {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	--mapa-puntos-acento: #2271b1;
}

.mapa-puntos-mapa {
	width: 100%;
	border-radius: 6px;
	z-index: 0;
	order: 1;
}

.mapa-puntos-mapa .leaflet-popup-content img {
	max-width: 100%;
	height: auto;
}

.mapa-puntos-mapa .leaflet-popup-content p {
	margin: 0 0 8px;
}

.mapa-puntos-mapa .leaflet-popup-content p:last-child {
	margin-bottom: 0;
}

/* Icono del marcador: nunca se estira ni se deforma, se ajusta manteniendo proporción. */
.mapa-puntos-icono-marcador {
	background: transparent;
	border: none;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.mapa-puntos-icono-marcador img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/* Color de acento configurable desde Ajustes. */
.mapa-puntos-mapa .leaflet-popup-content strong {
	color: var( --mapa-puntos-acento );
}

.mapa-puntos-mapa .leaflet-popup-content a {
	color: var( --mapa-puntos-acento );
	font-weight: 600;
}

/* Listado de nombres: debajo del mapa en móvil (mobile-first). */
.mapa-puntos-lista {
	order: 2;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	max-height: 240px;
	overflow-y: auto;
	background: #fff;
}

.mapa-puntos-lista-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-bottom: 1px solid #eee;
	border-left: 3px solid transparent;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

.mapa-puntos-lista-item:last-child {
	border-bottom: none;
}

.mapa-puntos-lista-item:hover,
.mapa-puntos-lista-item:focus {
	background-color: #f5f5f5;
	outline: none;
}

.mapa-puntos-lista-item.is-activo {
	background-color: #f5f8fb;
	border-left-color: var( --mapa-puntos-acento );
	font-weight: 600;
}

.mapa-puntos-lista-icono {
	width: 22px;
	height: 22px;
	object-fit: contain;
	flex-shrink: 0;
}

.mapa-puntos-lista-icono-vacio {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var( --mapa-puntos-acento );
	opacity: .5;
	flex-shrink: 0;
}

.mapa-puntos-lista-titulo {
	padding: 8px 14px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #666;
	background: #f5f5f5;
	border-bottom: 1px solid #e0e0e0;
	position: sticky;
	top: 0;
	z-index: 1;
}

.mapa-puntos-lista-texto {
	font-size: 14px;
	line-height: 1.3;
}

/* En escritorio, la lista pasa a lateral izquierdo junto al mapa. */
@media ( min-width: 783px ) {
	.mapa-puntos-wrapper {
		flex-direction: row;
		align-items: flex-start;
	}

	.mapa-puntos-lista {
		order: 0;
		width: 280px;
		flex-shrink: 0;
		max-height: var( --mapa-puntos-alto, 500px );
	}

	.mapa-puntos-mapa {
		order: 1;
		flex: 1;
	}
}