/**
 * Mapa Interactivo — estilos.
 * Los colores viven en custom properties para poder repintarlos por marca.
 */

.mapa-interactivo {
	--mapa-acento: #fbb900;
	--mapa-acento-osc: #d99f00;
	--mapa-texto: #2b2a2f;
	--mapa-alto: 400px;

	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	min-height: var( --mapa-alto );
}

/* Los iframes se apilan aquí: se precargan todos y solo cambia cuál se ve. */
.mapa-interactivo__lienzo {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	min-height: var( --mapa-alto );
}

.mapa-interactivo__frame {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease;
}

.mapa-interactivo__frame.is-visible {
	opacity: 1;
	visibility: visible;
}

/* Fila propia bajo el mapa: el embed de Google ya ocupa sus esquinas con la
   tarjeta de dirección y el enlace de ampliar. El botón está siempre
   presente, deshabilitado en el estado inicial, para no mover la altura. */
.mapa-interactivo__reset {
	flex: 0 0 auto;
	align-self: flex-start;
	margin: 12px 16px 16px;
	padding: 10px 18px;
	border: 0;
	border-radius: 50px;
	background: var( --mapa-acento );
	color: var( --mapa-texto );
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: opacity .2s ease, background-color .2s ease;
}

.mapa-interactivo__reset:hover:not( [disabled] ),
.mapa-interactivo__reset:focus-visible {
	background: var( --mapa-acento-osc );
}

.mapa-interactivo__reset[disabled] {
	opacity: .35;
	cursor: default;
}

/* Ítems de la lista de lugares cercanos. */

.lugar-item {
	cursor: pointer;
	transition: color .2s ease;
}

.lugar-item:hover,
.lugar-item.is-activo {
	color: #d99f00;
}

.lugar-item.is-activo {
	font-weight: 700;
}

.lugar-item.sin-direccion {
	cursor: default;
	opacity: .55;
}

@media ( prefers-reduced-motion: reduce ) {
	.lugar-item,
	.mapa-interactivo__frame,
	.mapa-interactivo__reset {
		transition: none;
	}
}