/* santiana/walkable-map — presentación del bloque (front).
   Mapa full-bleed con leyenda-filtro flotante (tarjeta clara del mock),
   anotación «5 minute», puntos/chips de conteo y tarjeta de lugar. */

.sb-walkmap {
	position: relative;
}

.sb-walkmap__map {
	height: 80vh;
	min-height: 520px;
}

/* leyenda flotante derecha (tarjeta clara del mock) — también es filtro */
.sb-walkmap .sb-walkmap__legend {
	position: absolute;
	top: 50%;
	right: 40px;
	transform: translateY(-50%);
	list-style: none;
	margin: 0; /* el ul del theme mete margin-bottom 32 (en móvil colapsaba
	   fuera de la sección → banda vacía antes del siguiente bloque) */
	padding: 6px 0 !important; /* y padding-left */
	background: rgba(244, 246, 241, 0.94);
	border: 1px solid rgba(56, 69, 61, 0.15);
	border-radius: 6px;
	min-width: 250px;
	z-index: 5;
}

.sb-walkmap__legend li + li {
	border-top: 1px solid rgba(56, 69, 61, 0.12);
}

.sb-walkmap__cat {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	background: none;
	border: 0;
	padding: 9px 18px;
	cursor: pointer;
	color: #38453d;
	font-family: var(--global-body-font-family, inherit);
	font-size: 15px;
	line-height: 1.2;
	text-align: left;
	transition: color 0.15s ease, opacity 0.15s ease;
}

/* neutralizar el estilo global de botones del theme en TODOS los estados
   (sin tocar color/opacity aquí: eso lo decide el estado activo/inactivo) */
.sb-walkmap__cat:hover,
.sb-walkmap__cat:focus,
.sb-walkmap__cat:active {
	background: none;
	box-shadow: none;
	color: #38453d;
}

/* categoría deshabilitada: TODO en gris, inconfundible (Johann 2026-07-28).
   ⚠️ Incluye hover/focus/active: sin ellos, la fila recién desactivada
   conserva el :focus del clic y la regla de arriba la pintaba como activa
   hasta clicar otra — parecía que el clic cambiaba la fila equivocada. */
.sb-walkmap__cat:not(.is-active),
.sb-walkmap__cat:not(.is-active):hover,
.sb-walkmap__cat:not(.is-active):focus,
.sb-walkmap__cat:not(.is-active):active {
	color: #a3aaa1;
}

.sb-walkmap__cat:not(.is-active) .sb-walkmap__dot {
	filter: grayscale(1);
	opacity: 0.4;
}

.sb-walkmap__cat:not(.is-active) .sb-walkmap__cat-count {
	opacity: 1; /* hereda el gris del texto, sin doble atenuación */
}

.sb-walkmap__dot {
	flex: 0 0 15px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 1px solid rgba(56, 69, 61, 0.35);
}

.sb-walkmap__cat-count {
	margin-left: auto; /* el conteo remata a la derecha de la fila */
	font-size: 13px;
	opacity: 0.7;
}

/* insignia de Santiana — floatPane del mapa + z-index alto: nada la tapa */
.sb-walkmap__badge {
	position: absolute;
	width: 92px;
	height: 92px;
	transform: translate(-50%, -50%);
	z-index: 9999;
	pointer-events: none;
}

/* puntos y chips sobre el mapa (overlays absolutos en el pane del mapa) */
.sb-walkmap__place {
	position: absolute;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.sb-walkmap__place .sb-walkmap__dot {
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s ease;
}

.sb-walkmap__place:hover .sb-walkmap__dot {
	transform: scale(1.25);
}

.sb-walkmap__place:hover,
.sb-walkmap__place:focus,
.sb-walkmap__place:active {
	background: none;
	box-shadow: none;
}

.sb-walkmap__count {
	font-family: var(--global-body-font-family, inherit);
	font-size: 13px;
	font-weight: 700;
	color: #2f3a33;
	text-shadow: 0 1px 2px rgba(233, 238, 228, 0.9);
}

/* anotación 5 minute */
.sb-walkmap__annotation {
	position: absolute;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #2f3a33;
	font-family: var(--global-heading-font-family, inherit);
	pointer-events: none;
}

.sb-walkmap__ann-num {
	font-size: 44px;
	font-weight: 700;
	line-height: 1;
}

.sb-walkmap__ann-label {
	font-size: 16px;
	font-weight: 700;
	margin: 2px 0 8px;
}

.sb-walkmap__walker {
	width: 26px;
	height: 26px;
}

/* tarjeta de lugar */
.sb-walkmap__card {
	position: absolute;
	transform: translate(-50%, -100%);
	background: #38453d;
	color: #cfd9c9;
	border-radius: 6px;
	padding: 12px 16px;
	min-width: 180px;
	max-width: 240px;
	font-family: var(--global-body-font-family, inherit);
	font-size: 13px;
	line-height: 1.4;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
	z-index: 10;
}

.sb-walkmap__card strong {
	display: block;
	font-size: 15px;
	margin-bottom: 4px;
	color: #e2e8dd;
}

.sb-walkmap__rating,
.sb-walkmap__address {
	display: block;
}

.sb-walkmap__address {
	opacity: 0.8;
	margin-top: 2px;
}

.sb-walkmap__star {
	color: rgba(207, 217, 201, 0.35);
}

.sb-walkmap__star.is-full,
.sb-walkmap__star.is-half {
	color: #b2c2a8;
}

/* móvil: leyenda estática bajo el mapa en dos columnas */
@media (max-width: 767px) {
	.sb-walkmap__map {
		height: 75vh; /* 62vh se veía apretado (Johann 2026-07-28) */
		min-height: 560px;
	}

	.sb-walkmap .sb-walkmap__legend {
		position: static;
		transform: none;
		display: grid;
		grid-template-columns: 1fr 1fr;
		min-width: 0;
		border-radius: 0;
		border-left: 0;
		border-right: 0;
		padding: 20px 0 !important; /* 6 → 20 arriba/abajo en móvil
		   (Johann 2026-07-30); !important como la regla base */
	}

	.sb-walkmap__legend li + li {
		border-top: 0;
	}

	.sb-walkmap__cat {
		font-size: 13px;
		padding: 7px 14px;
	}

	.sb-walkmap__annotation {
		display: none;
	}
}