/**
 * Estilos del buscador de puntos de atención.
 *
 * Los colores salen del sistema visual de Vardí y se exponen como variables
 * para poder reajustarlos desde el tema sin tocar el plugin. Todo va acotado
 * bajo .vpa para no pelearse con Elementor ni con el tema.
 *
 * @package VardiPuntosAtencion
 */

.vpa {
	--vpa-navy: #112e6b;
	--vpa-green: #4caf51;
	--vpa-green-dark: #3f9c44;
	--vpa-green-text: #008000;
	--vpa-green-soft: #eefaef;
	--vpa-yellow: #fdd10b;
	--vpa-border: #e3ebf5;
	--vpa-border-soft: #d8e3f1;
	--vpa-text: #112e6b;
	--vpa-text-muted: #4a5f92;
	--vpa-text-dim: #6b7fa8;
	--vpa-bg-alt: #f5f8fd;
	--vpa-radius-pill: 99px;
	--vpa-radius-card: 16px;
	--vpa-radius-map: 22px;
	--vpa-shadow: 0 1px 3px rgba(17, 46, 107, 0.05);
	/* Color al que funde el velo del final de la lista. Si la sección donde se
	   inserta el bloque no es blanca, se redefine esto desde el tema. */
	--vpa-fade: #fff;

	/* Alto de referencia del bloque: lo inyecta el shortcode desde los ajustes.
	   De aquí cuelgan el mínimo del mapa y el alto de la lista, para que las
	   dos columnas midan siempre lo mismo. */
	--vpa-h: 560px;

	box-sizing: border-box;
	color: var(--vpa-text);
	font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.vpa *,
.vpa *::before,
.vpa *::after {
	box-sizing: inherit;
}

/* ---------------------------------------------------------------------------
 * Blindaje contra el tema
 *
 * El bloque vive dentro de un tema que estiliza button, input y select por
 * etiqueta, con estados hover propios: de ahí el fondo magenta que tapaba la
 * tarjeta activa y dejaba su texto ilegible. Se neutraliza aquí de una vez.
 *
 * Dos decisiones deliberadas:
 *   - Los componentes interactivos se escriben como `.vpa .vpa-x`, no `.vpa-x`.
 *     Así ganan por especificidad tanto al tema como al reseteo de abajo.
 *   - !important solo en fondo, color, borde y sombra, que son exactamente las
 *     propiedades que el tema pisa. El resto del archivo es CSS normal.
 * ------------------------------------------------------------------------ */

.vpa button,
.vpa input,
.vpa select {
	margin: 0;
	font-family: inherit;
	line-height: 1.35;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	background-image: none;
	-webkit-appearance: none;
	appearance: none;
}

.vpa button {
	border: 0;
	min-height: 0;
}

.vpa-grid {
	display: grid;
	grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
	gap: 24px;
	/* stretch (el valor por defecto) es lo que deja que el mapa crezca hasta el
	   alto de la columna de la lista en lugar de quedarse cuadrado. */
	align-items: stretch;
}

.vpa-grid--nolist {
	grid-template-columns: minmax(0, 1fr);
}

/* ---------------------------------------------------------------------------
 * Panel lateral
 * ------------------------------------------------------------------------ */

.vpa-panel {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.vpa-filters {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* ---------------------------------------------------------------------------
 * Selector de ciudad
 *
 * Se pinta dos veces a propósito. El <select> nativo queda estilizado y es lo
 * que se ve si el JavaScript no llega a ejecutarse; cuando sí llega, lo
 * sustituye el desplegable propio (.vpa-combo), porque la lista de opciones de
 * un <select> abierto la dibuja el sistema operativo y no hay CSS que la
 * alcance.
 * ------------------------------------------------------------------------ */

.vpa-select {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.vpa .vpa-city {
	width: 100%;
	padding: 13px 44px 13px 18px;
	font-size: 14px;
	font-weight: 600;
	color: var(--vpa-text) !important;
	background: #fff !important;
	border: 1.5px solid var(--vpa-border-soft) !important;
	border-radius: var(--vpa-radius-pill);
	box-shadow: var(--vpa-shadow) !important;
	outline: none;
	cursor: pointer;
	text-overflow: ellipsis;
}

.vpa-select-caret {
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--vpa-text-dim);
	pointer-events: none;
	transition: transform 0.18s, color 0.15s;
}

/* Con el desplegable propio montado, el <select> sigue en el DOM como fuente
   de la verdad (lo leen el filtro y el botón Limpiar), pero deja de verse. */
.vpa-select.is-enhanced .vpa-city {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0 !important;
	pointer-events: none;
}

.vpa .vpa-combo {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 13px 44px 13px 18px;
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	color: var(--vpa-text) !important;
	background: #fff !important;
	border: 1.5px solid var(--vpa-border-soft) !important;
	border-radius: var(--vpa-radius-pill);
	box-shadow: var(--vpa-shadow) !important;
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.vpa .vpa-combo:hover {
	color: var(--vpa-text) !important;
	background: #fff !important;
	border-color: #bcd3ef !important;
}

.vpa .vpa-combo:focus-visible,
.vpa .vpa-combo[aria-expanded="true"] {
	border-color: var(--vpa-green) !important;
	box-shadow: 0 0 0 4px rgba(76, 175, 81, 0.16) !important;
	outline: none;
}

.vpa-combo[aria-expanded="true"] ~ .vpa-select-caret {
	transform: translateY(-50%) rotate(180deg);
	color: var(--vpa-green);
}

.vpa-combo-value {
	display: block;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.vpa-combo-panel {
	position: absolute;
	z-index: 30;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	max-height: 288px;
	padding: 8px;
	overflow-y: auto;
	overflow-x: hidden;
	background: #fff;
	border: 1px solid var(--vpa-border);
	border-radius: 18px;
	box-shadow: 0 18px 40px rgba(17, 46, 107, 0.16);
	scrollbar-width: thin;
	scrollbar-color: #cbd8ea transparent;
	overscroll-behavior: contain;
}

.vpa-combo-panel[hidden] {
	display: none;
}

.vpa-combo-panel::-webkit-scrollbar {
	width: 6px;
}

.vpa-combo-panel::-webkit-scrollbar-thumb {
	background: #cbd8ea;
	border-radius: var(--vpa-radius-pill);
}

.vpa-combo-panel::-webkit-scrollbar-track {
	background: transparent;
}

.vpa-combo-opt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--vpa-text-muted);
	border-radius: 12px;
	cursor: pointer;
	user-select: none;
}

/* Palomita de "opción aplicada", dibujada con bordes para no cargar un SVG por
   cada ciudad. Ocupa sitio siempre, así el texto no baila al seleccionar. */
.vpa-combo-opt::after {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 12px;
	border: solid transparent;
	border-width: 0 2.2px 2.2px 0;
	transform: rotate(45deg) translate(-1px, -1px);
}

/* is-active es la opción bajo el cursor o recorrida con el teclado;
   aria-selected es la que está aplicada al filtro. */
.vpa-combo-opt.is-active {
	color: var(--vpa-navy);
	background: var(--vpa-bg-alt);
}

.vpa-combo-opt[aria-selected="true"] {
	color: var(--vpa-green-text);
	background: var(--vpa-green-soft);
}

.vpa-combo-opt[aria-selected="true"]::after {
	border-color: var(--vpa-green);
}

/* ---------------------------------------------------------------------------
 * Botones del panel
 * ------------------------------------------------------------------------ */

.vpa .vpa-reset,
.vpa .vpa-near {
	flex: 0 0 auto;
	padding: 13px 20px;
	font-size: 13px;
	font-weight: 700;
	color: var(--vpa-text) !important;
	background: #fff !important;
	border: 1.5px solid var(--vpa-border-soft) !important;
	border-radius: var(--vpa-radius-pill);
	box-shadow: var(--vpa-shadow) !important;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.vpa .vpa-reset:hover,
.vpa .vpa-reset:focus-visible {
	color: var(--vpa-green-text) !important;
	background: #fff !important;
	border-color: var(--vpa-green) !important;
}

/* Encabeza el panel, en el sitio que antes ocupaba el campo de búsqueda, y
   hereda su peso visual: ancho completo, borde verde de 2px y algo más de aire
   que el resto de controles, para que se lea como la acción principal. */
.vpa .vpa-near {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	padding: 15px 20px;
	font-size: 14px;
	color: var(--vpa-green-text) !important;
	border: 2px solid var(--vpa-green) !important;
}

.vpa .vpa-near:hover,
.vpa .vpa-near:focus-visible {
	color: var(--vpa-green-text) !important;
	background: var(--vpa-green-soft) !important;
	border-color: var(--vpa-green-dark) !important;
}

.vpa .vpa-near[hidden] {
	display: none;
}

.vpa .vpa-near[aria-busy="true"] {
	opacity: 0.6;
	cursor: progress;
}

.vpa-near-msg {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--vpa-text-muted);
}

.vpa-near-msg.is-error {
	color: #8a1f16;
}

.vpa-near-msg[hidden] {
	display: none;
}

.vpa-count {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--vpa-text-dim);
}

/* ---------------------------------------------------------------------------
 * Lista de puntos
 * ------------------------------------------------------------------------ */

/* El contenedor con el degradado tiene que estar FUERA del elemento que hace
   scroll: un ::after dentro de .vpa-list se desplazaría con las tarjetas en
   lugar de quedarse pegado abajo. */
.vpa-listwrap {
	position: relative;
	min-width: 0;
}

/* Dos velos: el de abajo mientras quede lista por debajo, el de arriba solo
   cuando ya se ha desplazado. Funden al color de --vpa-fade, así que si la
   sección donde se inserta el mapa no es blanca basta con redefinirlo. */
.vpa-listwrap::before,
.vpa-listwrap::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	pointer-events: none;
	/* La lista es position: relative; sin esto los velos quedarían debajo. */
	z-index: 1;
	transition: opacity 0.2s;
}

.vpa-listwrap::before {
	top: 0;
	height: 60px;
	background: linear-gradient(
		0deg,
		rgba(255, 255, 255, 0) 0%,
		color-mix(in srgb, var(--vpa-fade, #fff) 88%, transparent) 55%,
		var(--vpa-fade, #fff) 100%
	);
	/* Sin desplazar no hay nada arriba que difuminar. */
	opacity: 0;
}

.vpa-listwrap::after {
	bottom: 0;
	height: 76px;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0) 0%,
		color-mix(in srgb, var(--vpa-fade, #fff) 88%, transparent) 58%,
		var(--vpa-fade, #fff) 100%
	);
	opacity: 1;
}

/* Navegadores sin color-mix(): degradado equivalente en dos paradas. */
@supports not (background: color-mix(in srgb, #fff 50%, transparent)) {
	.vpa-listwrap::before {
		background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #fff 80%);
	}

	.vpa-listwrap::after {
		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 82%);
	}
}

.vpa-listwrap.is-scrolled::before {
	opacity: 1;
}

/* Al final del scroll el velo de abajo sobra: taparía la última tarjeta. */
.vpa-listwrap.is-end::after,
.vpa-listwrap.is-empty::before,
.vpa-listwrap.is-empty::after {
	opacity: 0;
}

.vpa-list {
	/* position: relative para que offsetTop de las tarjetas se mida contra la
	   lista, que es el contenedor con scroll. */
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-height: var(--vpa-h, 560px);
	overflow-y: auto;
	/* Con overflow-y declarado, overflow-x deja de ser visible y pasa a auto por
	   su cuenta: ese era el scroll horizontal que asomaba bajo la lista. */
	overflow-x: hidden;
	margin: 0;
	/* El relleno inferior deja que la última tarjeta suba por encima del velo
	   en lugar de quedarse medio tapada. */
	padding: 3px 6px 30px 3px;
	list-style: none;
	scrollbar-width: thin;
	scrollbar-color: #cbd8ea transparent;
	overscroll-behavior: contain;
}

/* display explícito gana al display:none que el navegador da a [hidden],
   así que los elementos ocultables necesitan su propia regla. */
.vpa-list[hidden] {
	display: none;
}

.vpa-list::-webkit-scrollbar {
	width: 6px;
}

.vpa-list::-webkit-scrollbar-thumb {
	background: #cbd8ea;
	border-radius: var(--vpa-radius-pill);
}

.vpa-list::-webkit-scrollbar-track {
	background: transparent;
}

.vpa-item {
	margin: 0;
	padding: 0;
	min-width: 0;
}

.vpa-item[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Tarjeta
 *
 * Es un <button>, así que hereda los hover y focus que el tema define por
 * etiqueta: sin estas declaraciones la tarjeta seleccionada se pintaba del
 * magenta del tema y el texto dejaba de leerse. De ahí los !important.
 * ------------------------------------------------------------------------ */

.vpa .vpa-card {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	padding: 18px 20px;
	text-align: left;
	color: var(--vpa-text) !important;
	background: #fff !important;
	border: 1.5px solid var(--vpa-border) !important;
	border-radius: var(--vpa-radius-card);
	box-shadow: var(--vpa-shadow) !important;
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

/* :focus entra aquí porque pulsar una tarjeta la deja enfocada, y era el estado
   con el que el tema la teñía. */
.vpa .vpa-card:hover,
.vpa .vpa-card:focus,
.vpa .vpa-card:active {
	color: var(--vpa-text) !important;
	background: #fff !important;
	border-color: var(--vpa-green) !important;
	box-shadow: 0 6px 18px rgba(17, 46, 107, 0.09) !important;
}

.vpa .vpa-card:focus {
	outline: none;
}

.vpa .vpa-card:focus-visible {
	outline: 2px solid var(--vpa-green);
	outline-offset: 2px;
}

.vpa .vpa-card[aria-pressed="true"] {
	background: #f4fbf5 !important;
	border-color: var(--vpa-green) !important;
	box-shadow: 0 8px 22px rgba(76, 175, 81, 0.16) !important;
}

/* Los colores del contenido se repiten en estado activo para que ningún
   `button:hover *` del tema se los lleve por delante. */
.vpa .vpa-card .vpa-card-name {
	color: var(--vpa-navy) !important;
}

.vpa .vpa-card .vpa-card-address {
	color: var(--vpa-text-muted) !important;
}

.vpa .vpa-card .vpa-chip {
	color: var(--vpa-green-text) !important;
	background: var(--vpa-green-soft) !important;
}

.vpa .vpa-card .vpa-distance {
	color: var(--vpa-text-dim) !important;
}

.vpa .vpa-card .vpa-num {
	color: #fff !important;
	background: var(--vpa-navy) !important;
}

.vpa .vpa-card[aria-pressed="true"] .vpa-num {
	background: var(--vpa-green) !important;
}

.vpa-num {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
	transition: background 0.15s;
}

.vpa-card-body {
	display: block;
	min-width: 0;
	/* Una dirección larga sin espacios rompe dentro de la tarjeta en vez de
	   ensanchar la columna. */
	overflow-wrap: anywhere;
}

.vpa-card-name {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.vpa-card-address {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.5;
}

.vpa-card-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.vpa-chip {
	display: inline-block;
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: var(--vpa-radius-pill);
}

.vpa-distance {
	font-size: 12px;
	font-weight: 700;
}

.vpa-distance[hidden] {
	display: none;
}

.vpa-empty {
	padding: 32px 20px;
	text-align: center;
	border: 1px dashed var(--vpa-border-soft);
	border-radius: var(--vpa-radius-card);
	background: #f9fbfe;
}

.vpa-empty[hidden] {
	display: none;
}

.vpa-empty-title {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 700;
	color: var(--vpa-navy);
}

.vpa-empty-text {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--vpa-text-muted);
}

.vpa-empty-text a {
	font-weight: 700;
	color: var(--vpa-green-text);
}

/* ---------------------------------------------------------------------------
 * Mapa
 * ------------------------------------------------------------------------ */

.vpa-mapcol {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.vpa-map-frame {
	position: relative;
	/* flex: 1 es lo que hace que el mapa llene el alto de la columna en vez de
	   quedarse en el alto fijo que traía puesto en un style propio. El mínimo
	   solo entra en juego cuando hay tan pocos puntos que la lista no da
	   altura suficiente. */
	flex: 1 1 auto;
	min-height: 360px;
	border: 1px solid var(--vpa-border);
	border-radius: var(--vpa-radius-map);
	overflow: hidden;
	box-shadow: 0 10px 34px rgba(17, 46, 107, 0.1);
}

.vpa-map {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: #eef3f9;
}

.vpa-map-error,
.vpa-noscript {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	margin: 0;
	padding: 24px;
	text-align: center;
	font-size: 14px;
	line-height: 1.6;
	color: var(--vpa-text-muted);
}

/* Pines dibujados con HTML (solo disponibles con Map ID). */
.vpa-pin {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	background: var(--vpa-navy);
	border: 2.5px solid #fff;
	border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
	box-shadow: 0 4px 12px rgba(17, 46, 107, 0.35);
	transition: transform 0.15s, background 0.15s;
	cursor: pointer;
}

.vpa-pin.is-active {
	background: var(--vpa-green);
	transform: scale(1.25);
	z-index: 2;
}

.vpa-pin--me {
	background: var(--vpa-yellow);
	color: var(--vpa-navy);
}

/* Racimo de puntos cercanos. */
.vpa-cluster {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 6px;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	background: var(--vpa-navy);
	border: 3px solid #fff;
	border-radius: var(--vpa-radius-pill);
	box-shadow: 0 4px 14px rgba(17, 46, 107, 0.4);
	cursor: pointer;
}

/* Ventana de información */
.vpa-iw-name {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 700;
	color: #112e6b;
}

.vpa-iw-address {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: #4a5f92;
}

.vpa-iw-city {
	display: block;
	margin-top: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #008000;
}

/* ---------------------------------------------------------------------------
 * Punto seleccionado
 * ------------------------------------------------------------------------ */

.vpa-selected {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 16px;
	padding: 20px 24px;
	border: 1px solid var(--vpa-border);
	border-radius: 18px;
	background: linear-gradient(180deg, var(--vpa-bg-alt) 0%, #fff 70%);
}

.vpa-selected[hidden] {
	display: none;
}

.vpa-selected-info {
	min-width: 0;
}

.vpa-selected-label {
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--vpa-text-dim);
}

.vpa-selected-name {
	margin: 0 0 3px;
	font-size: 18px;
	font-weight: 700;
	color: var(--vpa-navy);
}

.vpa-selected-address {
	margin: 0;
	font-size: 14px;
	color: var(--vpa-text-muted);
}

.vpa-selected-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* Son <a>, y el tema también estiliza los enlaces: mismo blindaje que en las
   tarjetas, acotado a color, fondo y borde. */
.vpa .vpa-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none !important;
	border-radius: var(--vpa-radius-pill);
	transition: background 0.15s, color 0.15s;
}

.vpa .vpa-btn--solid {
	padding: 13px 24px;
	color: #fff !important;
	background: var(--vpa-green) !important;
}

.vpa .vpa-btn--solid:hover,
.vpa .vpa-btn--solid:focus {
	color: #fff !important;
	background: var(--vpa-green-dark) !important;
}

.vpa .vpa-btn--ghost {
	padding: 11px 22px;
	color: var(--vpa-green-text) !important;
	background: transparent !important;
	border: 2px solid var(--vpa-green) !important;
}

.vpa .vpa-btn--ghost:hover,
.vpa .vpa-btn--ghost:focus {
	color: var(--vpa-green-text) !important;
	background: var(--vpa-green-soft) !important;
}

/* ---------------------------------------------------------------------------
 * Aviso solo para administradores
 * ------------------------------------------------------------------------ */

.vpa-admin-notice {
	padding: 16px 20px;
	border: 1px dashed #d8e3f1;
	border-radius: 12px;
	background: #f9fbfe;
	color: #4a5f92;
	font-size: 14px;
}

/* ---------------------------------------------------------------------------
 * Accesibilidad
 * ------------------------------------------------------------------------ */

.vpa .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------------
 * Adaptación a pantallas pequeñas
 * ------------------------------------------------------------------------ */

@media (max-width: 980px) {
	.vpa-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	/* El mapa va primero: en móvil es lo que la gente espera ver al llegar. */
	.vpa-mapcol {
		order: -1;
	}

	/* En una sola columna el mapa deja de estirarse: toma alto propio y suelta
	   el flex, porque ya no hay columna hermana con la que igualarse. */
	.vpa-map-frame {
		flex: 0 0 auto;
		height: 380px;
		min-height: 0;
	}

	.vpa-list {
		max-height: 440px;
	}
}

@media (max-width: 600px) {
	.vpa-selected {
		padding: 18px;
	}

	.vpa-selected-actions .vpa-btn {
		flex: 1 1 auto;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vpa * {
		transition: none !important;
	}
}