/**
 * Rio360 — Mapa inteligente.
 *
 * Estilos compartidos por [rio360_home_map] y
 * [rio360_business_map]. Personalizable con CSS
 * normal: todo vive bajo la clase .rio360-map.
 */

.rio360-map {
	--rio360-map-radius: 20px;
	--rio360-map-border: #ecebe5;
	--rio360-map-bg: #ffffff;

	/*
	 * Alto fijo del bloque. Es lo que permite que el
	 * panel izquierdo tenga scroll: sin una altura
	 * definida, el flex crece con el contenido y el
	 * overflow nunca se dispara.
	 */
	--rio360-map-h: 520px;

	font-family: 'Outfit', sans-serif;
	display: flex;
	align-items: stretch;
	height: var( --rio360-map-h );
	border: 1px solid var(--rio360-map-border);
	border-radius: var(--rio360-map-radius);
	overflow: hidden;
	background: #fff;
	position: relative;
}

.rio360-map *,
.rio360-map *::before,
.rio360-map *::after {
	box-sizing: border-box;
}

/* ==========================================================
 * Panel izquierdo
 * ======================================================== */

/*
 * Todo el panel scrollea como un bloque: la información
 * (título, buscador, filtros) y la lista de negocios se
 * desplazan juntas. El alto lo marca el mapa, que no
 * cambia de tamaño.
 */
.rio360-map__panel {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 380px;
	flex-shrink: 0;
	min-height: 0;
	padding: 22px;
	background: var(--rio360-map-bg);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.rio360-map__panel::-webkit-scrollbar {
	width: 6px;
}

.rio360-map__panel::-webkit-scrollbar-thumb {
	background: #d8d3c6;
	border-radius: 999px;
}

.rio360-map__panel::-webkit-scrollbar-track {
	background: transparent;
}

.rio360-map__intro {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.rio360-map__title {
	margin: 0;
	font-size: 22px;
	font-weight: 800;
	color: #1c1c22;
}

.rio360-map__subtitle {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #6b7280;
}

.rio360-map__label {
	margin: 4px 0 -6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #9a958a;
}

/* Buscador (mapa completo) */

.rio360-map__search {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border-radius: 999px;
	background: #f4f4f5;
	color: #9a958a;
}

.rio360-map__search input {
	flex: 1;
	border: none;
	background: none;
	outline: none;
	font-size: 14px;
	font-family: inherit;
	color: #1c1c22;
}

/* Pastillas rápidas (Home) y "Todos · N" (mapa completo) */

.rio360-map__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.rio360-map__pill {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border: 1px solid var(--rio360-map-border);
	border-radius: 999px;
	background: #fff;
	color: #1c1c22;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	transition: transform 0.15s ease, background 0.15s ease;
}

.rio360-map__pill:hover {
	transform: translateY(-1px);
}

.rio360-map__pill.is-active,
.rio360-map__pill--all.is-active {
	background: #ffc61a;
	border-color: #ffc61a;
	color: #1c1c22;
}

/* Categorías con conteo (mapa completo) */

.rio360-map__categories {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.rio360-map__cat-btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 12px;
	border: 1px solid var(--rio360-map-border);
	border-radius: 12px;
	background: #fff;
	color: #1c1c22;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.rio360-map__cat-btn:hover {
	border-color: #d8d3c6;
}

.rio360-map__cat-btn.is-active {
	background: #1c1c22;
	border-color: #1c1c22;
	color: #fff;
}

.rio360-map__cat-count {
	color: #9a958a;
	font-weight: 700;
	font-size: 12px;
}

.rio360-map__cat-btn.is-active .rio360-map__cat-count {
	color: rgba(255, 255, 255, 0.7);
}

.rio360-map-card__dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* Filtros adicionales (chips) */

.rio360-map__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
}

.rio360-map__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #4b4838;
	cursor: pointer;
}

.rio360-map__chip input {
	accent-color: #1c1c22;
}

/* Barra: contador + orden */

.rio360-map__toolbar-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-top: 4px;
	border-top: 1px solid var(--rio360-map-border);
}

.rio360-map__count-label {
	font-size: 13px;
	color: #6b7280;
}

.rio360-map__sort {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #6b7280;
}

.rio360-map__sort select {
	border: 1px solid var(--rio360-map-border);
	border-radius: 8px;
	padding: 5px 8px;
	font-family: inherit;
	font-size: 13px;
	background: #fff;
	color: #1c1c22;
}

/* Lista de negocios */

.rio360-map__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.rio360-map__loading,
.rio360-map__empty {
	text-align: center;
	color: #9a958a;
	font-size: 13px;
	padding: 24px 0;
}

.rio360-map__load-more {
	appearance: none;
	border: 1px solid var(--rio360-map-border);
	border-radius: 12px;
	background: #fff;
	padding: 12px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	color: #1c1c22;
	cursor: pointer;
}

.rio360-map__load-more:hover {
	background: #f4f4f5;
}

/* ==========================================================
 * Tarjeta de negocio (lista)
 * ======================================================== */

.rio360-map-card {
	display: flex;
	gap: 12px;
	padding: 12px;
	border-radius: 14px;
	background: #fff;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.rio360-map-card:hover,
.rio360-map-card.is-active {
	background: #f4f4f5;
	border-color: #ffc61a;
}

.rio360-map-card__avatar {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	flex-shrink: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--rio360-map-avatar, #6366f1);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
}

.rio360-map-card__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rio360-map-card__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.rio360-map-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.rio360-map-card__name {
	font-size: 15px;
	font-weight: 700;
	color: #1c1c22;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Uno o dos círculos de WhatsApp, juntos a la derecha del nombre. */
.rio360-map-card__was {
	display: inline-flex;
	flex-shrink: 0;
	gap: 6px;
}

.rio360-map-card__was .rio360-map-card__whatsapp {
	position: relative;
}

/* El número de línea, en la esquina del círculo. */
.rio360-map-card__wa-num {
	background: #1c1c22;
	border: 2px solid #fff;
	border-radius: 999px;
	color: #fff;
	font-size: 9px;
	font-weight: 800;
	height: 16px;
	line-height: 12px;
	min-width: 16px;
	position: absolute;
	right: -4px;
	text-align: center;
	top: -4px;
	box-sizing: border-box;
}

.rio360-map-card__whatsapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	flex-shrink: 0;
}

.rio360-map-card__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 12.5px;
	color: #6b7280;
}

.rio360-map-card__cat {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.rio360-map-card__distance {
	font-weight: 600;
}

.rio360-map-card__rating {
	color: #b8860b;
	font-weight: 700;
}

.rio360-map-card__status {
	font-weight: 700;
	font-size: 12px;
}

.rio360-map-card__status--open {
	color: #17c964;
}

.rio360-map-card__status--closed {
	color: #f04444;
}

.rio360-map-card__address,
.rio360-map-card__amenities {
	font-size: 12px;
	color: #9a958a;
}

.rio360-map-card__amenities {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.rio360-map-card__amenity {
	padding: 2px 8px;
	border-radius: 999px;
	background: #f4f4f5;
}

/* En Home: tarjeta compacta, sin dirección ni amenidades. */
.rio360-home-map .rio360-map-card__address,
.rio360-home-map .rio360-map-card__amenities {
	display: none;
}

/* ==========================================================
 * Mapa y controles
 * ======================================================== */

.rio360-map__canvas-wrap {
	position: relative;
	flex: 1;
	min-width: 0;
}

.rio360-map__canvas {
	width: 100%;
	height: 100%;
	background: #f4f4f5;
}

/* Alto de cada shortcode (lo hereda el panel). */
.rio360-home-map {
	--rio360-map-h: 520px;
}

.rio360-business-map {
	--rio360-map-h: 640px;
}

/*
 * A la derecha del zoom, no encima.
 *
 * Leaflet pone su "+ / −" arriba a la izquierda y ahí estaba también
 * esta barra: los botones se montaban unos sobre otros en todas las
 * resoluciones. Se corre lo justo para dejar pasar esa columna.
 */
.rio360-map__toolbar {
	position: absolute;
	top: 16px;
	left: 62px;
	z-index: 401;
	display: flex;
	gap: 10px;
}

.rio360-map__tool {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: none;
	border-radius: 999px;
	background: #fff;
	color: #1c1c22;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(28, 28, 34, 0.14);
}

.rio360-map__tool--icon {
	padding: 10px;
}

.rio360-map__tool.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

.rio360-map__tool.is-active {
	background: #1c1c22;
	color: #fff;
}

/* Marcador personalizado (L.divIcon) */

.rio360-map-marker {
	width: 30px;
	height: 30px;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	background: var(--rio360-marker-color, #6366f1);
	border: 3px solid #fff;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}

.rio360-map-marker--closed {
	filter: saturate(0.35) brightness(0.95);
}

.rio360-map-marker.is-active {
	width: 38px;
	height: 38px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
	animation: rio360MapMarkerPop 0.35s ease;
}

@keyframes rio360MapMarkerPop {
	0% { transform: rotate(-45deg) scale(1); }
	45% { transform: rotate(-45deg) scale(1.3); }
	100% { transform: rotate(-45deg) scale(1); }
}

/* Botón flotante "Buscar en esta zona" */

.rio360-map__search-area {
	position: absolute;
	top: 16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 401;
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: none;
	border-radius: 999px;
	background: #1c1c22;
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(28, 28, 34, 0.3);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.rio360-map__search-area.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(-50%) translateY(4px);
}

.rio360-map-marker__icon {
	transform: rotate(45deg);
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 13px;
	line-height: 1;
}

/* Cluster */

.rio360-map-cluster {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(28, 28, 34, 0.9);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	border: 3px solid #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Popup de Leaflet: se limpian los estilos por
   defecto para que mande el diseño de Rio360. */

.leaflet-popup-content-wrapper {
	border-radius: 16px;
	padding: 0;
	overflow: hidden;
	box-shadow: 0 16px 40px rgba(28, 28, 34, 0.25);
}

/*
 * La tarjeta del marcador, compacta.
 *
 * Con 280px y una foto en 16/9 tapaba media pantalla del celular: para
 * ver dónde queda el negocio había que cerrarla, que es lo contrario de
 * lo que vino a hacer. Todo se aprieta un punto —foto, letra, botones—
 * sin quitar nada.
 */
.leaflet-popup-content {
	margin: 0;
	width: 244px !important;
}

.leaflet-popup-tip-container {
	display: none;
}

/*
 * El popup lo inyecta Leaflet fuera del flujo de la página, y ahí manda
 * la tipografía del tema: sus reglas pesan más que las de aquí y se
 * comían todos los tamaños. Por eso cada medida de esta tarjeta va con
 * !important; sin eso, en el sitio real salía con la letra del cuerpo
 * de Divi y la tarjeta ocupaba el doble.
 */
.rio360-map-popup {
	font-family: 'Outfit', sans-serif;
}

.rio360-map-popup p,
.rio360-map-popup h3,
.rio360-map-popup span,
.rio360-map-popup a,
.rio360-map-popup button {
	line-height: 1.25 !important;
	margin: 0 !important;
	letter-spacing: normal !important;
}

/*
 * El tema le pone relleno inferior a los títulos y a los párrafos, y
 * dentro de una tarjeta de 244px eso son huecos de 10px por todas
 * partes. Los botones conservan el suyo, que sí lo necesitan.
 */
.rio360-map-popup p,
.rio360-map-popup h3,
.rio360-map-popup .rio360-map-popup__cat {
	padding: 0 !important;
}

.rio360-map-popup__media {
	position: relative;
	/* Alto fijo y no 16/9: la foto aquí solo tiene que dar contexto. */
	height: 92px;
	overflow: hidden;
	background: #f4f4f5;
}

.rio360-map-popup__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* El mismo sello azul de las tarjetas del directorio. */
.rio360-map-popup__sello {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #1d9bf0;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.28 );
}

.rio360-map-popup__sello svg {
	width: 15px;
	height: 15px;
	fill: #fff;
}

.rio360-map-popup__body {
	padding: 10px 11px 11px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.rio360-map-popup__head {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* El nombre y su categoría, pegados: son una sola cosa. */
.rio360-map-popup__head > div {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.rio360-map-popup__logo {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	object-fit: cover;
	flex-shrink: 0;
}

/*
 * Doble clase y !important: el tema pinta los h3 con una regla más
 * fuerte y se comía este tamaño, que es justo el que hay que sujetar.
 */
.rio360-map-popup .rio360-map-popup__name {
	margin: 0 !important;
	font-size: 13.5px !important;
	font-weight: 800;
	color: #1c1c22;
	line-height: 1.2 !important;

	/*
	 * Relleno a cero además del margen: el tema le pone un
	 * padding-bottom a los h3, y ese era el hueco que quedaba entre el
	 * nombre y su categoría.
	 */
	padding: 0 !important;

	/*
	 * Dos renglones como mucho. Un nombre largo estiraba la tarjeta
	 * justo cuando lo que se busca es que ocupe poco.
	 */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rio360-map-popup .rio360-map-popup__cat {
	font-size: 11px !important;
	color: #9a958a;
}

/*
 * El estado puede ser largo ("Cerrado · Abre martes a las 5 AM") y se
 * parte en dos renglones sin problema. La puntuación no: partida dejaba
 * el "(2)" solo en la línea de abajo, que se leía como otro dato.
 */
.rio360-map-popup .rio360-map-popup__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	font-size: 11.5px !important;
}

.rio360-map-popup .rio360-map-popup__meta > * {
	font-size: 11.5px !important;
}

.rio360-map-popup .rio360-map-popup__rating {
	flex: none;
	white-space: nowrap;
}

/*
 * El estado llega con un salto de línea escrito: "Cerrado" arriba y
 * "Abre martes a las 5 AM" abajo. pre-line es lo que hace que ese
 * salto se respete sin volver monoespaciado el resto.
 */
.rio360-map-popup .rio360-map-card__status {
	white-space: pre-line;
	min-width: 0;
}

.rio360-map-popup__rating {
	color: #b8860b;
	font-weight: 700;
}

.rio360-map-popup .rio360-map-popup__address {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 11.5px !important;
	color: #6b7280;
	display: flex;
	align-items: center;
	gap: 5px;
}

.rio360-map-popup__address svg {
	flex: none;
	width: 13px;
	height: 13px;
}

/*
 * Dos columnas parejas en vez de botones flotando.
 *
 * Con flex-wrap cada botón medía lo que midiera su texto, así que la
 * fila se cortaba en sitios distintos según el negocio tuviera teléfono
 * o no, y ninguna tarjeta se parecía a la anterior.
 */
.rio360-map-popup__actions {
	display: grid;
	gap: 5px;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	margin-top: 4px;
}

/* "Ver negocio" cierra la tarjeta a lo ancho. */
.rio360-map-popup__actions .rio360-map-popup__btn--primary {
	grid-column: 1 / -1;
}

/*
 * El número va a lo ancho y arriba del todo.
 *
 * A lo ancho porque un número colombiano no cabe en media tarjeta sin
 * partirse en dos renglones; arriba porque si se quedara en su sitio
 * dejaría media fila vacía a su lado.
 */
.rio360-map-popup__btn--phone {
	grid-column: 1 / -1;
	order: -1;
}

/*
 * Cuando los botones de media fila son impares, el último se estira
 * para no dejar hueco.
 *
 * Cuáles son impares depende del aparato: en el computador el teléfono
 * ocupa su propia fila y no cuenta, en el celular es un botón más.
 */
@media ( hover: hover ) and ( pointer: fine ) {

	/*
	 * Quedan WhatsApp + Cómo llegar + Compartir: impar. Con dos
	 * WhatsApp son cuatro, par, y Compartir se queda en su mitad.
	 */
	.rio360-map-popup__actions--wa:not( .rio360-map-popup__actions--wa2 ) [data-map-share] {
		grid-column: 1 / -1;
	}
}

@media ( hover: none ), ( pointer: coarse ) {

	/* Aquí "Llamar" también ocupa media fila y cambia la cuenta. */
	.rio360-map-popup__actions--wa:not( .rio360-map-popup__actions--wa2 ):not( .rio360-map-popup__actions--tel ) [data-map-share],
	.rio360-map-popup__actions--tel:not( .rio360-map-popup__actions--wa ) [data-map-share],
	.rio360-map-popup__actions--wa2.rio360-map-popup__actions--tel [data-map-share] {
		grid-column: 1 / -1;
	}
}

/*
 * Orden de apilado explícito.
 *
 * El icono del botón vecino se dibujaba encima del desplegable de
 * "Cómo llegar". Con todas las celdas posicionadas y en z-index 0, el
 * menú abierto queda por encima sin depender del orden del HTML.
 */
.rio360-map-popup__actions > * {
	position: relative;
	z-index: 0;
}

.rio360-map-popup__go[open] {
	z-index: 20;
}

/* Dentro de la rejilla, cada botón llena su celda. */
.rio360-map-popup__actions > .rio360-map-popup__btn,
.rio360-map-popup__actions > .rio360-map-popup__go > .rio360-map-popup__btn {
	justify-content: center;
	width: 100%;
}

.rio360-map-popup__actions > .rio360-map-popup__go {
	display: block;
}

/**
 * El contenido del popup se inyecta dentro del mapa
 * (Leaflet), fuera del flujo normal de la página, así
 * que temas como Divi suelen resetear el color de los
 * enlaces/botones ahí dentro. Se fuerza con !important
 * para que el texto sea siempre legible.
 */
.rio360-map-popup__btn,
.rio360-map-popup__btn:visited {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 8px !important;
	border-radius: 999px;
	border: 1px solid var(--rio360-map-border);
	background: #fff;
	color: #1c1c22 !important;
	font-family: inherit;
	font-size: 10.5px !important;
	line-height: 1.2 !important;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	/*
	 * Nunca dos renglones. Un botón partido en dos líneas descoloca
	 * toda la fila y se lee peor que uno con la letra un punto menor.
	 */
	white-space: nowrap;
}

/* El icono no se encoge cuando el texto aprieta. */
.rio360-map-popup__btn svg {
	flex: 0 0 auto;
}

.rio360-map-popup__btn:hover {
	color: #1c1c22 !important;
	border-color: #c9c4b6;
}

.rio360-map-popup__btn--whatsapp,
.rio360-map-popup__btn--whatsapp:visited,
.rio360-map-popup__btn--whatsapp:hover {
	background: #25d366;
	border-color: #25d366;
	color: #fff !important;
}

.rio360-map-popup__btn--primary,
.rio360-map-popup__btn--primary:visited,
.rio360-map-popup__btn--primary:hover {
	background: #1c1c22;
	border-color: #1c1c22;
	color: #fff !important;
}

/* Confirmación al copiar el enlace. */
.rio360-map-popup__btn.is-copied {
	background: #1c1c22;
	border-color: #1c1c22;
	color: #fff !important;
}

/* ----------------------------------------------------------
 * Teléfono: llamar en el celular, ver el número en el PC
 * -------------------------------------------------------- */

/*
 * Por defecto manda el botón de llamar, que es lo correcto en un
 * teléfono. En equipos con ratón, donde "tel:" no lleva a ninguna
 * parte, se cambia por el número a la vista.
 */
.rio360-map-popup__btn--phone {
	display: none;
}

@media ( hover: hover ) and ( pointer: fine ) {

	.rio360-map-popup__btn--call {
		display: none;
	}

	.rio360-map-popup__btn--phone {
		cursor: text;
		display: inline-flex;
		user-select: text;
	}
}

/* ----------------------------------------------------------
 * Cómo llegar: Google Maps, Apple Maps o Waze
 * -------------------------------------------------------- */

.rio360-map-popup__go {
	position: relative;
}

.rio360-map-popup__go summary {
	list-style: none;
}

.rio360-map-popup__go summary::-webkit-details-marker {
	display: none;
}

.rio360-map-popup__go summary::after {
	content: '▾';
	font-size: 10px;
	margin-left: 1px;
}

.rio360-map-popup__go[open] summary::after {
	content: '▴';
}

.rio360-map-popup__go-menu {
	background: #fff;
	border: 1px solid var(--rio360-map-border);
	border-radius: 12px;
	bottom: calc(100% + 6px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
	display: flex;
	flex-direction: column;
	left: 0;
	min-width: 148px;
	overflow: hidden;
	position: absolute;
	z-index: 21;
}

.rio360-map-popup__go-menu a,
.rio360-map-popup__go-menu a:visited {
	color: #1c1c22 !important;
	font-size: 12px;
	font-weight: 600;
	padding: 9px 13px;
	text-decoration: none;
	white-space: nowrap;
}

.rio360-map-popup__go-menu a:hover {
	background: #f5f3ee;
	color: #1c1c22 !important;
}

/* ==========================================================
 * Bottom sheet (móvil, mapa completo)
 * ======================================================== */

.rio360-map__sheet-handle {
	display: none;
}

/* ==========================================================
 * Responsive
 * ======================================================== */

@media (max-width: 960px) {

	.rio360-map__panel {
		width: 320px;
	}

}

@media (max-width: 720px) {

	/*
	 * Apilado: el alto fijo del escritorio se libera y
	 * cada zona define el suyo (mapa 60vh, panel debajo).
	 */
	.rio360-map {
		flex-direction: column;
		height: auto;
		border-radius: 0;
	}

	.rio360-map__canvas-wrap {
		order: 1;
		min-height: 60vh;
	}

	.rio360-map__canvas {
		min-height: 60vh;
	}

	/* Mapa de Home: panel simplemente debajo del mapa. */
	.rio360-home-map .rio360-map__panel {
		order: 2;
		width: 100%;
		max-height: 60vh;
	}

	/* Mapa completo: panel como bottom sheet deslizable. */
	.rio360-business-map {
		position: relative;
		height: 100vh;
		overflow: hidden;
	}

	.rio360-business-map .rio360-map__canvas-wrap {
		position: absolute;
		inset: 0;
		min-height: 0;
	}

	.rio360-business-map .rio360-map__canvas {
		min-height: 0;
		height: 100%;
	}

	.rio360-business-map .rio360-map__panel {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 500;
		width: 100%;
		max-height: 78vh;
		border-radius: 20px 20px 0 0;
		box-shadow: 0 -10px 30px rgba(28, 28, 34, 0.18);
		transform: translateY(calc(100% - 128px));
		transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.rio360-business-map .rio360-map__panel.is-expanded {
		transform: translateY(0);
	}

	.rio360-map__sheet-handle {
		display: block;
		position: absolute;
		left: 50%;
		bottom: 110px;
		transform: translateX(-50%);
		width: 44px;
		height: 5px;
		border-radius: 999px;
		background: #d8d3c6;
		border: none;
		z-index: 501;
		transition: bottom 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	}

	/* JS agrega .is-sheet-expanded al contenedor cuando
	   el bottom sheet está desplegado, para mover la
	   manija junto con el panel. */
	.rio360-business-map.is-sheet-expanded .rio360-map__sheet-handle {
		bottom: calc(78vh - 18px);
	}


	.rio360-map__toolbar {
		flex-wrap: wrap;
	}

	.rio360-map__tool span {
		display: none;
	}

	.rio360-map__tool {
		padding: 10px;
	}

}

/*
 * Móvil pequeño: la información (título/buscador,
 * filtros y lista de negocios) va arriba y el mapa
 * abajo, en los dos shortcodes. En el directorio se
 * desactiva el bottom sheet y el panel vuelve al flujo
 * normal del documento.
 */
@media (max-width: 500px) {

	.rio360-map {
		flex-direction: column;
		height: auto;
	}

	.rio360-map__panel {
		order: 1;
		width: 100%;
		max-height: 58vh;
	}

	.rio360-map__canvas-wrap {
		order: 2;
		min-height: 55vh;
	}

	.rio360-map__canvas {
		min-height: 55vh;
	}

	/* Directorio: se deshace el bottom sheet. */
	.rio360-business-map {
		position: relative;
		height: auto;
		overflow: visible;
	}

	/*
	 * Relativo, no estático: la barra de herramientas se coloca contra
	 * este bloque, y sin referencia se iba a la esquina de la sección
	 * entera, o sea encima del buscador del panel.
	 */
	.rio360-business-map .rio360-map__canvas-wrap {
		position: relative;
		inset: auto;
		min-height: 55vh;
	}

	.rio360-business-map .rio360-map__canvas {
		height: 100%;
		min-height: 55vh;
	}

	.rio360-business-map .rio360-map__panel {
		position: static;
		z-index: auto;
		max-height: 58vh;
		border-radius: 0;
		box-shadow: none;
		transform: none;
	}

	.rio360-map__sheet-handle {
		display: none;
	}

}

/* ==========================================================
 * Botón "Filtros" y su ventana
 * ======================================================== */

/*
 * La barra siempre envuelve: los botones "Todos" y
 * "Filtros" nunca se recortan ni quedan fuera de vista,
 * en ninguna resolución.
 */
.rio360-map__pills {
	flex-wrap: wrap;
	overflow: visible;
}

.rio360-map__pill--filters.is-active {
	background: #1c1c22;
	border-color: #1c1c22;
	color: #fff;
}

.rio360-map__pill-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: #ffc61a;
	color: #1c1c22;
	font-size: 11px;
	font-weight: 800;
}

.rio360-map__modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(13, 14, 21, 0.6);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	opacity: 0;

	/*
	 * Mientras no está abierto no debe interceptar
	 * clics ni scroll: ocupa toda la pantalla.
	 */
	pointer-events: none;
	transition: opacity 0.2s ease;
	font-family: 'Outfit', sans-serif;
}

/*
 * display:flex de la regla anterior anula el atributo
 * hidden (que solo aplica display:none), así que hay
 * que ocultarlo explícitamente.
 */
.rio360-map__modal[hidden] {
	display: none;
}

.rio360-map__modal.is-open {
	opacity: 1;
	pointer-events: auto;
}

.rio360-map__modal-panel {
	background: #fff;
	border-radius: 20px;
	width: 100%;
	max-width: 440px;

	/* Nunca más alto que la pantalla: la cabecera y el
	   pie quedan fijos y solo el cuerpo hace scroll, así
	   los botones de acción siempre se ven. */
	max-height: min(640px, 88vh);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(13, 14, 21, 0.3);
}

.rio360-map__modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--rio360-map-border, #ecebe5);
	flex-shrink: 0;
}

.rio360-map__modal-title {
	margin: 0;
	font-size: 17px;
	font-weight: 800;
	color: #1c1c22;
}

.rio360-map__modal-close {
	appearance: none;
	border: none;
	background: #f4f4f5;
	color: #1c1c22;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
}

.rio360-map__modal-close:hover {
	background: #e8e8ea;
}

.rio360-map__modal-body {
	padding: 18px 20px;
	overflow-y: auto;
	overscroll-behavior: contain;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Opciones de categoría */

.rio360-map__cat-options {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.rio360-map__cat-opt {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border-radius: 10px;
	cursor: pointer;
	font-size: 14px;
	color: #1c1c22;
	transition: background 0.15s ease;
}

.rio360-map__cat-opt:hover {
	background: #f4f4f5;
}

.rio360-map__cat-opt input {
	accent-color: #1c1c22;
	flex-shrink: 0;
}

.rio360-map__cat-opt > span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	min-width: 0;
}

.rio360-map__cat-opt .rio360-map__cat-count {
	margin-left: auto;
}

/* Pie con acciones */

.rio360-map__modal-foot {
	display: flex;
	gap: 10px;
	padding: 16px 20px;
	border-top: 1px solid var(--rio360-map-border, #ecebe5);
	flex-shrink: 0;
}

.rio360-map__modal-btn {
	appearance: none;
	flex: 1;
	padding: 12px 16px;
	border-radius: 12px;
	border: 1px solid var(--rio360-map-border, #ecebe5);
	background: #fff;
	color: #1c1c22;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease;
}

.rio360-map__modal-btn:hover {
	background: #f4f4f5;
}

.rio360-map__modal-btn--primary {
	background: #1c1c22;
	border-color: #1c1c22;
	color: #fff;
}

.rio360-map__modal-btn--primary:hover {
	background: #000;
}

@media (max-width: 500px) {

	.rio360-map__modal {
		padding: 0;
		align-items: flex-end;
	}

	.rio360-map__modal-panel {
		max-width: none;
		max-height: 90vh;
		border-radius: 20px 20px 0 0;
	}

}

/* ==========================================================
 * Controles de Leaflet
 * ======================================================== */

/*
 * El "+" y el "−" del zoom se veían blancos sobre blanco: Divi pinta
 * de blanco los enlaces de la sección y esa regla también alcanza a
 * los controles del mapa, que son <a>. Se fuerza el color aquí, igual
 * que con los botones del popup.
 */
.leaflet-container .leaflet-bar a,
.leaflet-container .leaflet-bar a:visited {
	background: #fff;
	color: #1c1c22 !important;
	font-weight: 700;
	text-decoration: none;
}

.leaflet-container .leaflet-bar a:hover {
	background: #f5f3ee;
	color: #1c1c22 !important;
}

.leaflet-container .leaflet-bar a.leaflet-disabled {
	background: #f7f7f7;
	color: #b9b3aa !important;
}

/* ==========================================================
 * Riel para desplazar la página
 * ==========================================================
 *
 * En el celular esta sección ocupa la pantalla entera y las
 * dos mitades se quedan con el dedo: la lista tiene su
 * propio scroll y el mapa se mueve él. Quien llega aquí no
 * puede seguir bajando ni volver.
 *
 * La franja del borde derecho no hace nada: está por encima
 * de las dos y no atrapa el gesto, así que arrastrar ahí
 * desplaza la página como en cualquier otro sitio. Se ve
 * apenas —un degradado suave— pero lleva un cartel con dos
 * flechas y las palabras "Desliza aquí": una franja
 * transparente no la entiende nadie, y nadie prueba a
 * arrastrar por un sitio que no dice para qué sirve.
 * ======================================================== */

.rio360-map__riel {
	display: none;
}

@media ( max-width: 720px ) {

	.rio360-map__riel {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 44px;

		/*
		 * Por encima del panel (500) y de su manija (501). Si
		 * quedara debajo, el mapa se seguiría llevando el gesto.
		 */
		z-index: 600;

		/*
		 * La clave de todo: el navegador sabe que aquí el dedo
		 * solo sirve para desplazar en vertical, así que ni el
		 * mapa ni el panel llegan a ver el gesto.
		 */
		touch-action: pan-y;

		background: linear-gradient(
			to left,
			rgba( 28, 28, 34, 0.14 ),
			rgba( 28, 28, 34, 0 )
		);
	}

	/*
	 * El cartel que explica para qué es.
	 *
	 * Una franja transparente no se entiende sola: nadie prueba
	 * a arrastrar por un sitio que no dice nada. Con las dos
	 * flechas y las dos palabras se lee de un vistazo, y como va
	 * escrito en vertical cabe sin robarle ancho al mapa.
	 */
	.rio360-map__riel-tirador {
		position: absolute;
		top: 50%;
		right: 6px;
		transform: translateY( -50% );
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
		padding: 9px 5px;
		border-radius: 999px;
		background: rgba( 255, 255, 255, 0.9 );
		border: 1px solid rgba( 28, 28, 34, 0.1 );
		box-shadow: 0 2px 10px rgba( 28, 28, 34, 0.14 );
		color: #4b5563;
		-webkit-backdrop-filter: blur( 6px );
		backdrop-filter: blur( 6px );
	}

	.rio360-map__riel-flecha {
		width: 11px;
		height: 7px;
		flex: none;
	}

	.rio360-map__riel-texto {
		writing-mode: vertical-rl;
		font-family: 'Outfit', sans-serif;
		font-size: 9.5px;
		font-weight: 700;
		letter-spacing: 0.09em;
		text-transform: uppercase;
		white-space: nowrap;
		color: #4b5563;
	}

	/*
	 * Las flechas se mecen las primeras veces. Es lo que
	 * convierte el cartel en una invitación: enseña el gesto en
	 * vez de describirlo.
	 */
	@media ( prefers-reduced-motion: no-preference ) {

		.rio360-map__riel-flecha:first-child {
			animation: rio360RielArriba 2.4s ease-in-out 4;
		}

		.rio360-map__riel-flecha:last-child {
			animation: rio360RielAbajo 2.4s ease-in-out 4;
		}
	}

	@keyframes rio360RielArriba {
		0%, 70%, 100% { transform: translateY( 0 ); opacity: 0.55; }
		35%           { transform: translateY( -3px ); opacity: 1; }
	}

	@keyframes rio360RielAbajo {
		0%, 70%, 100% { transform: translateY( 0 ); opacity: 0.55; }
		35%           { transform: translateY( 3px ); opacity: 1; }
	}
}

/* ==========================================================
 * La tarjeta del marcador, en el celular
 * ==========================================================
 *
 * Un punto más apretada. En una pantalla de 390px la
 * tarjeta y el mapa se reparten lo mismo, así que cada
 * píxel que gana la tarjeta lo pierde el mapa, que es lo
 * que la persona vino a mirar.
 * ======================================================== */

@media ( max-width: 500px ) {

	.leaflet-popup-content {
		width: 216px !important;
	}

	.rio360-map-popup__media {
		height: 76px;
	}

	.rio360-map-popup__body {
		padding: 9px 10px 10px;
		gap: 5px;
	}

	.rio360-map-popup__logo {
		width: 26px;
		height: 26px;
		border-radius: 7px;
	}

	.rio360-map-popup .rio360-map-popup__name {
		font-size: 12.5px !important;
	}

	.rio360-map-popup .rio360-map-popup__cat,
	.rio360-map-popup .rio360-map-popup__meta,
	.rio360-map-popup .rio360-map-popup__meta > *,
	.rio360-map-popup .rio360-map-popup__address {
		font-size: 10.5px !important;
	}

	.rio360-map-popup__btn,
	.rio360-map-popup__btn:visited {
		padding: 6px 7px !important;
		font-size: 10px !important;
	}
}

/* ==========================================================
 * Altos que no se mueven con la barra del navegador
 * ==========================================================
 *
 * Con vh el alto lo marca la ventana, y en el celular la
 * ventana cambia de tamaño cada vez que el navegador
 * esconde o saca su barra de abajo: el mapa daba un salto
 * a mitad del desplazamiento.
 *
 * svh es el alto de la ventana con la barra puesta, y ese
 * no cambia nunca. Va aparte y detrás para que un navegador
 * que no lo entienda se quede con los vh de arriba.
 * ======================================================== */

@supports ( height: 100svh ) {

	@media ( max-width: 720px ) {

		.rio360-map__canvas-wrap,
		.rio360-map__canvas {
			min-height: 60svh;
		}

		.rio360-home-map .rio360-map__panel {
			max-height: 60svh;
		}

		.rio360-business-map {
			height: 100svh;
		}

		.rio360-business-map .rio360-map__canvas-wrap,
		.rio360-business-map .rio360-map__canvas {
			min-height: 0;
		}

		.rio360-business-map .rio360-map__panel {
			max-height: 78svh;
		}

		.rio360-business-map.is-sheet-expanded .rio360-map__sheet-handle {
			bottom: calc( 78svh - 18px );
		}
	}

	@media ( max-width: 500px ) {

		.rio360-map__panel {
			max-height: 58svh;
		}

		.rio360-map__canvas-wrap,
		.rio360-map__canvas {
			min-height: 55svh;
		}

		.rio360-business-map {
			height: auto;
		}

		.rio360-business-map .rio360-map__canvas-wrap,
		.rio360-business-map .rio360-map__canvas {
			min-height: 55svh;
		}

		.rio360-business-map .rio360-map__panel {
			max-height: 58svh;
		}
	}
}

/* ==========================================================
 * El alto que fija el guion
 * ==========================================================
 *
 * --rio360-map-alto lo escribe map-core.js en píxeles, ya
 * resuelto. Va al final y con !important porque tiene que
 * ganarle a todas las medidas en vh y svh de arriba: son
 * ellas las que se movían con la barra del navegador.
 * ======================================================== */

@media ( max-width: 720px ) {

	.rio360-map[ style*="--rio360-map-alto" ] .rio360-map__canvas-wrap,
	.rio360-map[ style*="--rio360-map-alto" ] .rio360-map__canvas {
		min-height: var( --rio360-map-alto ) !important;
		height: var( --rio360-map-alto ) !important;
	}

	/*
	 * El panel va encima del mapa en el celular, así que si su tope de
	 * alto se mueve con la barra del navegador, el mapa baja empujado
	 * desde arriba. Ese era el movimiento que se veía en Edge: el mapa
	 * no se movía solo, lo movían.
	 */
	.rio360-map[ style*="--rio360-map-panel-alto" ] .rio360-map__panel {
		max-height: var( --rio360-map-panel-alto ) !important;
	}
}

/* ==========================================================
 * Pantalla completa
 * ==========================================================
 *
 * La de mentira, con CSS, para el iPhone: ahí la API nativa
 * no existe para nada que no sea un vídeo —da igual el
 * navegador, todos son WebKit por dentro— y el botón no
 * hacía nada.
 *
 * Estas reglas van sobre la SECCIÓN, no sobre el lienzo: el
 * alto fijado y la maquetación viven ahí, y aplicárselas al
 * lienzo suelto lo dejaba sin tamaño.
 * ======================================================== */

.rio360-map.is-fullscreen-css {
	position: fixed !important;
	inset: 0 !important;
	z-index: 2147482000;
	width: 100% !important;
	height: 100% !important;
	max-height: none !important;
	margin: 0 !important;
	border: 0;
	border-radius: 0;
	background: #fff;
}

body.rio360-map-fs {
	overflow: hidden;
}

/*
 * A pantalla completa se ve el mapa y nada más: con la lista
 * puesta no caben los dos, y el riel no tiene página detrás
 * que desplazar.
 */
.rio360-map.is-fullscreen-css .rio360-map__panel,
.rio360-map.is-fullscreen-css .rio360-map__sheet-handle,
.rio360-map.is-fullscreen-css .rio360-map__riel {
	display: none !important;
}

.rio360-map.is-fullscreen-css .rio360-map__canvas-wrap,
.rio360-map.is-fullscreen-css .rio360-map__canvas {
	position: relative !important;
	inset: auto !important;
	order: 0 !important;
	flex: 1 1 auto !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	max-height: none !important;
}

/*
 * El botón se queda a la vista y es por donde se sale: aquí
 * no hay gesto del sistema que valga, así que si no se ve,
 * quien entró se queda dentro.
 */
.rio360-map.is-fullscreen-css .rio360-map__toolbar {
	z-index: 402;
}

/*
 * La nativa expande solo el bloque del lienzo, que es lo que
 * se le pasa. Basta con que dentro el mapa ocupe todo.
 */
.rio360-map__canvas-wrap.is-fullscreen,
.rio360-map__canvas-wrap.is-fullscreen .rio360-map__canvas {
	height: 100% !important;
	min-height: 0 !important;
	max-height: none !important;
}

/* Salió un rato: ámbar, ni abierto ni cerrado. */
.rio360-map-card__status--away {
	background: rgba( 255, 149, 0, 0.12 );
	color: #b36200;
}

/* Ni abierto ni cerrado: atiende con cita. */
.rio360-map-card__status--agenda {
	background: rgba( 10, 132, 255, 0.12 );
	color: #0a5cb8;
}

/* El que todavía no abre, en morado: ni abierto ni cerrado. */
.rio360-map-card__status--soon {
	background: rgba( 149, 92, 255, 0.12 );
	color: #6b2fd6;
}

/* ------------------------------------------------------------------ */
/* «Estás aquí»                                                        */
/* ------------------------------------------------------------------ */

/*
 * Un punto azul con un halo que late, como el de cualquier mapa. Azul
 * a propósito: los alfileres de los negocios llevan el color de su
 * categoría, y si este fuera de la paleta parecería uno más.
 */
.rio360-map-yo {
	position: relative;
}

.rio360-map-yo__punto {
	background: #1a73e8;
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.35 );
	height: 14px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate( -50%, -50% );
	width: 14px;
}

.rio360-map-yo__pulso {
	animation: rio360-map-yo-late 2s ease-out infinite;
	background: rgba( 26, 115, 232, 0.28 );
	border-radius: 50%;
	height: 22px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate( -50%, -50% );
	width: 22px;
}

@keyframes rio360-map-yo-late {
	0%   { opacity: 0.9; transform: translate( -50%, -50% ) scale( 0.6 ); }
	70%  { opacity: 0;   transform: translate( -50%, -50% ) scale( 2.2 ); }
	100% { opacity: 0;   transform: translate( -50%, -50% ) scale( 2.2 ); }
}

/* Quien pide que no se muevan las cosas, que no se le muevan. */
@media ( prefers-reduced-motion: reduce ) {

	.rio360-map-yo__pulso {
		animation: none;
		opacity: 0.35;
	}

}

/*
 * Los pines vistos de lejos.
 *
 * Ya no se agrupan —en un pueblo, una burbuja con un número esconde
 * justo lo que la gente vino a ver—, así que al alejar el mapa se
 * encogen para no taparse entre ellos. Siguen estando todos.
 */
.rio360-map__canvas.is-lejos .rio360-map-marker {
	width: 22px;
	height: 22px;
	border-width: 2px;
}

.rio360-map__canvas.is-lejos .rio360-map-marker__icon {
	font-size: 11px;
}

.rio360-map__canvas.is-muy-lejos .rio360-map-marker {
	width: 15px;
	height: 15px;
	border-width: 2px;
}

/* Tan pequeño ya no cabe el emoji: manda el color de la categoría. */
.rio360-map__canvas.is-muy-lejos .rio360-map-marker__icon {
	display: none;
}

/* El que está abierto en la tarjeta no se encoge: hay que saber cuál es. */
.rio360-map__canvas.is-lejos .rio360-map-marker.is-active,
.rio360-map__canvas.is-muy-lejos .rio360-map-marker.is-active {
	width: 38px;
	height: 38px;
	border-width: 3px;
}

.rio360-map__canvas.is-muy-lejos .rio360-map-marker.is-active .rio360-map-marker__icon {
	display: block;
}