@charset "utf-8";
/* ── assets/prop-map.css ── */
/* Va PRIMERO, antes de cualquier comentario: si no es el primer byte del archivo, el
   navegador la ignora. El servidor sirve los .css sin charset, y sin esta linea la
   codificacion de la hoja queda librada a una cadena de reservas. Ver CLAUDE.md. */
/**
 * Mapa interactivo de propiedades (inc/front/prop-map.php / assets/prop-map.js).
 * El contenedor reemplaza al iframe estático que había en la sección "Mapa"
 * de zona-info.php / ciudad-info.php — mismo lugar, mismo ancho.
 *
 * "mark" (burbujita de precio) y "strip" (tarjeta grande al abrir un mark)
 * son elementos HTML propios puestos como marcadores de MapLibre (hasta la
 * 0.78, overlays de Google Maps). El contenedor del mapa trae su propia
 * fuente (`.maplibregl-map{font:12px/20px Helvetica Neue…}`, antes el
 * `.gm-style` de Google), que pisa la heredada. Por eso `-mark` y `-strip`
 * fijan `font-family` explícito acá — es la misma fuente que usa el resto
 * del sitio (Poppins, ver el <link> de Google Fonts en el <head>).
 *
 * MapLibre pone su propio `transform` en línea a cada marcador para
 * ubicarlo, así que los `transform` de estas reglas no rigen dentro del
 * mapa: el anclaje sale de `anchor` y `offset` en assets/prop-map.js.
 */

.mdpd-prop-map__mark,
.mdpd-prop-map__strip,
.mdpd-prop-map__debug-label {
	font-family: Poppins, sans-serif;
}

/* Solo debug (?mdpd_map_debug=1 + admin, ver prop-map.php) — margen de
   outliers en metros, arriba a la izquierda del mapa. */
.mdpd-prop-map__debug-label {
	margin: 0.5rem;
	padding: 0.3rem 0.6rem;
	background: #fff;
	border: 1px solid #dce4e8;
	border-radius: 0.4rem;
	font-size: 0.75rem;
	font-weight: 700;
	color: #10222a;
	box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.15);
}

/* El mapa toma la proporción de la pantalla en vez de un alto fijo en px:
   16:9 en desktop (lo que usa la mayoría de los monitores) y más vertical
   en mobile, donde un 16:9 quedaría una franja finita e inservible.
   `aspect-ratio` con `height:auto` — el alto sale del ancho real de la
   columna, así que no hay que tocar nada cuando cambia el layout. */
.mdpd-prop-map {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	min-height: 18rem;
	border: 1px solid #dce4e8;
	border-radius: var(--mdpd-caja-radio, 0.75rem);
	overflow: hidden;
}

@media (max-width: 849px) {
	.mdpd-prop-map {
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 549px) {
	.mdpd-prop-map {
		aspect-ratio: 4 / 5;
	}
}

/* --- Botonera sobre el mapa (tipos de propiedad + POIs nativos) ---
   Los botones de tipo filtran markers de verdad y los de POI prenden/apagan
   capas nativas de Google (ver prop-map.js): nada decorativo acá. */
.mdpd-prop-map__toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin-bottom: 0.75rem;
}

.mdpd-prop-map__grupo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
}

.mdpd-prop-map__grupo-label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.6;
	margin-right: 0.125rem;
}

.mdpd-prop-map__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin: 0;
	padding: 0.3rem 0.7rem;
	border: 1px solid #dce4e8;
	border-radius: 2rem;
	background: #fff;
	color: inherit;
	font-size: 0.8125rem;
	line-height: 1.3;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.mdpd-prop-map__btn:hover {
	border-color: var(--fs-color-primary, #168ea6);
}

.mdpd-prop-map__btn-n {
	font-size: 0.6875rem;
	font-weight: 600;
	opacity: 0.65;
}

/* Apagado = atenuado pero legible; el estado real lo lleva aria-pressed. */
.mdpd-prop-map__btn[aria-pressed="false"] {
	opacity: 0.45;
	background: #f5f7f8;
}

.mdpd-prop-map__btn--tipo[aria-pressed="true"] {
	border-color: var(--fs-color-primary, #168ea6);
	background: color-mix(in srgb, var(--fs-color-primary, #168ea6) 10%, #fff);
}

/* --- Mark: pill de texto + colita + punto, siempre anclado al punto real ---
   Vive en la pane `overlayMouseTarget` de Maps (ver prop-map.js) — la única
   que entrega clicks de forma confiable a un div puesto a mano; por eso
   pointer-events:auto explícito, sin depender del default de esa pane. */
.mdpd-prop-map__mark {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	transform: translate(-50%, -100%);
	cursor: pointer;
	pointer-events: auto;
	z-index: 1;
}

/* Mapa de un solo punto (ficha, etc.): no abre nada al click. */
.mdpd-prop-map__mark--static {
	cursor: default;
}

/*
 * En el mapa de la ficha la pastilla lleva el título de la propiedad, no un
 * precio: promedio 35 caracteres y hasta 108 en el peor caso medido. Con el
 * `white-space: nowrap` de la pastilla genérica, todo lo que pasaba de los
 * 14rem se recortaba con puntos suspensivos y el dato quedaba escondido.
 *
 * Se deja que corte en varias líneas en vez de ensanchar la caja: el ancho
 * máximo es el que hace que el globo entre en un celular, y tocarlo para que
 * quepa un título largo rompería la vista chica, que es la que más importa.
 *
 * `overflow-wrap: anywhere` es para el caso patológico de una sola palabra más
 * ancha que la caja (una URL o un nombre pegado sin espacios): sin eso,
 * desbordaría igual aunque el resto envuelva bien.
 */
.mdpd-prop-map__mark--static .mdpd-prop-map__mark-pill {
	display: inline-block;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	overflow-wrap: anywhere;
	text-align: center;
}

.mdpd-prop-map__mark-pill {
	display: inline-flex;
	align-items: center;
	max-width: 14rem;
	padding: 0.25rem 0.6rem;
	background: #fff;
	border: 1.5px solid;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);
}

.mdpd-prop-map__mark-tail {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top-width: 6px;
	border-top-style: solid;
	margin-top: -1px;
}

.mdpd-prop-map__mark-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
	margin-top: -1px;
}

/*
 * Ubicación aproximada: la coordenada salió de geocodificar la calle, no la
 * puerta (`coord_origen = geocode_apx`). El pin va con el borde punteado —la
 * convención de "esto es un límite difuso"— y el globo dice el motivo con
 * todas las letras. Se mantiene el color de la operación: lo que es incierto
 * es DÓNDE está, no si es venta o alquiler.
 */
.mdpd-prop-map__mark--aprox .mdpd-prop-map__mark-pill {
	border-style: dashed;
}

.mdpd-prop-map__mark--aprox .mdpd-prop-map__mark-dot {
	opacity: 0.5;
}

.mdpd-prop-map__strip-aprox {
	display: block;
	margin-top: 0.15rem;
	color: #6b7280;
	font-size: 0.68rem;
	font-style: italic;
	line-height: 1.2;
}

/* --- Strip: tarjeta horizontal (miniatura + tipo/operación + precio + "Ver") --- */
.mdpd-prop-map__strip {
	position: absolute;
	transform: translate(-50%, calc(-100% - 0.7rem));
	z-index: 2;
}


/*
 * Las "patas" del abanico: el SVG que une el punto real con cada pastilla
 * desplegada. Centrado sobre el punto, y sin capturar el mouse — el click
 * tiene que llegar a las pastillas que están encima.
 */
.mdpd-prop-map__legs {
	position: absolute;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 0;
}

/*
 * Con un abanico abierto, el resto de las marcas se esconde: desplegar nueve
 * pastillas encima de las cuarenta que ya había alrededor no se lee. Quedan
 * solo las del abanico y sus patas, hasta que se cierre.
 */
.mdpd-prop-map--abanico .mdpd-prop-map__mark:not(.mdpd-prop-map__mark--abanico) {
	display: none;
}

/*
 * Punto compartido por MUCHAS propiedades (más de 12): slider de a 4 fichas
 * por página,
 * con bullets y sin flechas. Reemplaza al abanico que desplegaba las pastillas
 * alrededor del punto.
 *
 * Sin scroll a propósito: la lista scrolleable se peleaba con la rueda del
 * mouse, que en un mapa hace zoom. Con páginas, la rueda le queda al mapa.
 *
 * OJO con el nombre: `__grupo` ya está tomado por los grupos de botones de la
 * botonera de arriba. Estas clases van con `__multi`.
 */
.mdpd-prop-map__strip--multi .mdpd-prop-map__multi {
	width: 17rem;
	max-width: 80vw;
	padding-bottom: 0.4rem;
	background: #fff;
	border-radius: 0.75rem;
	box-shadow: 0 0.25rem 0.875rem rgba(0, 0, 0, 0.18);
	overflow: hidden;
}

.mdpd-prop-map__multi-titulo {
	margin: 0;
	padding: 0.45rem 0.7rem;
	background: var(--fs-color-primary, #168ea6);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
}

/* `touch-action: pan-y` deja el scroll vertical de la página al dedo y nos
   reserva el horizontal para pasar de página. `user-select: none` evita que
   arrastrar seleccione el texto de las fichas. */
.mdpd-prop-map__multi-viewport {
	overflow: hidden;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

.mdpd-prop-map__multi-viewport:active {
	cursor: grabbing;
}

.mdpd-prop-map__multi-viewport img {
	-webkit-user-drag: none;
	user-drag: none;
}

.mdpd-prop-map__multi-track {
	display: flex;
	transition: transform 0.25s ease;
}

/* `min-width: 0` es lo que impide que una página se ensanche con su contenido
   y desarme el cálculo de 100% por página. */
.mdpd-prop-map__multi-slide {
	flex: 0 0 100%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: rgba(0, 0, 0, 0.08);
}

/* Adentro del slider la tarjeta es un renglón, no un globo suelto: sin sombra,
   sin radio y con el ancho que le dé la página. */
.mdpd-prop-map__strip--multi .mdpd-prop-map__strip-card {
	width: initial;
	box-shadow: none;
	border-radius: 0;
}

.mdpd-prop-map__multi-bullets {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.3rem;
	padding: 0.5rem 0.5rem 0.15rem;
}

/*
 * Flatsome le pone a todo `button` un piso de tamaño pensado para botones de
 * verdad: `min-width: 24px` y `min-height: 2.5em`. Sobre un bullet de 0.5rem
 * eso mandaba, y quedaban unas pelotas de 24×40 px. Se bajan los dos mínimos —
 * con solo el ancho seguirían altos.
 */
.mdpd-prop-map__multi-bullet {
	width: 0.5rem;
	height: 0.5rem;
	min-width: 0.1rem;
	min-height: 0.1rem;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.22);
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}

.mdpd-prop-map__multi-bullet:hover {
	background: rgba(0, 0, 0, 0.4);
}

.mdpd-prop-map__multi-bullet.is-on {
	background: var(--fs-color-primary, #168ea6);
	transform: scale(1.25);
}

.mdpd-prop-map__strip-card {
	position: relative;
	display: flex;
	align-items: stretch;
	width: 15.5rem;
	text-decoration: none;
	color: inherit;
	background: #fff;
	border-radius: 0.75rem;
	overflow: hidden;
	box-shadow: 0 0.25rem 0.875rem rgba(0, 0, 0, 0.18);
}

/* Shimmer mientras carga: el fondo pinta detrás del bitmap de la foto — en
   cuanto la imagen real decodifica y pinta encima lo tapa sola, sin JS que
   escuche `load`. Cada propiedad publicada tiene foto sí o sí, así que este
   estado siempre es transitorio, nunca uno final. */
@keyframes mdpd-prop-map-shimmer {
	0% { background-position: 0% 50%; }
	100% { background-position: 200% 50%; }
}

.mdpd-prop-map__strip-img {
	flex: 0 0 auto;
	width: 4rem;
	height: 4rem;
	object-fit: cover;
	background: linear-gradient(100deg, #e4e9ec 30%, #f4f6f7 50%, #e4e9ec 70%);
	background-size: 200% 100%;
	animation: mdpd-prop-map-shimmer 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.mdpd-prop-map__strip-img {
		animation: none;
		background: #e9ecef;
	}
}

/* Sin miniatura: caso de borde real (no debería pasar — ninguna propiedad se
   publica sin fotos), no una carga en curso — fondo fijo, sin shimmer. */
.mdpd-prop-map__strip-img--vacia {
	background: #e9ecef;
	animation: none;
	display: block;
}

.mdpd-prop-map__strip-body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.15rem;
	min-width: 0;
	padding: 0.4rem 0.55rem;
}

.mdpd-prop-map__strip-tipo {
	font-size: 0.72rem;
	font-weight: 600;
	color: #4a5b63;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mdpd-prop-map__strip-precio {
	font-size: 0.95rem;
	font-weight: 800;
	line-height: 1.15;
}

/* "Consulte su valor" (sin precio real): más chico y liviano — el color
   sigue siendo el de la operación (inline, ver prop-map.js), esto solo
   achica el tratamiento tipográfico. */
.mdpd-prop-map__strip-precio--consulta {
	font-size: 0.8rem;
	font-weight: 600;
}

.mdpd-prop-map__strip-ver {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	font-size: 0.78rem;
	font-weight: 700;
	color: #fff;
	background: var(--primary-color, #465f70);
}

.mdpd-prop-map__strip-tail {
	position: absolute;
	left: 50%;
	bottom: -0.45rem;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 8px solid #fff;
}

/* --------------------------------------------------------------------------
 * Página /mapa/ ([mdpd_mapa]) — barra superior, botón de volver y el globo con
 * el nombre del lugar que sigue al mouse sobre los contornos.
 * -------------------------------------------------------------------------- */

.mdpd-mapa-page {
	position: relative;
}

.mdpd-mapa-page__barra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.9rem;
	margin-bottom: 0.75rem;
}

.mdpd-mapa-page__titulo {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: #10222a;
}

.mdpd-mapa-page__hub {
	margin-left: auto;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--fs-color-primary, #168ea6);
}

/* El globo del hover: sigue al puntero, nunca lo intercepta. */
.mdpd-mapa-page__hint {
	position: absolute;
	z-index: 5;
	transform: translate(0.9rem, -50%);
	padding: 0.28rem 0.6rem;
	background: #10222a;
	color: #fff;
	border-radius: 0.35rem;
	font-family: Poppins, sans-serif;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.25);
}

/* Sobre los contornos el cursor invita a entrar. */
.mdpd-mapa-page__lienzo {
	cursor: default;
}

@media (max-width: 549px) {
	.mdpd-mapa-page__hub {
		margin-left: 0;
	}
}

/* Preguntas frecuentes del mapa ([mdpd_mapa_faqs]). `<details>` nativo: abre y
   cierra sin JavaScript, y el texto está en el HTML aunque esté plegado. */
.mdpd-mapa-faqs {
	margin: 2rem 0 0;
}

.mdpd-mapa-faqs__titulo {
	font-size: 1.15rem;
	margin-bottom: 0.75rem;
}

.mdpd-mapa-faqs__item {
	border-bottom: 1px solid #e7edf0;
}

.mdpd-mapa-faqs__item > summary {
	padding: 0.75rem 0;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.mdpd-mapa-faqs__item > summary::-webkit-details-marker {
	display: none;
}

/* El signo lo pone el CSS y no el markup: así el texto de la pregunta que lee
   un buscador es exactamente el de la FAQ, sin caracteres de adorno. */
.mdpd-mapa-faqs__item > summary::before {
	content: '+';
	display: inline-block;
	width: 1.1em;
	color: var(--fs-color-primary, #168ea6);
	font-weight: 700;
}

.mdpd-mapa-faqs__item[open] > summary::before {
	content: '\2212';
}

.mdpd-mapa-faqs__item > p {
	margin: 0 0 0.9rem 1.1em;
	color: #46626f;
}

/* ==================================================================== MapaGold
   (2026-10-08) Lo que viene del modelo cerrado de MapaGold
   (DEVELOPMENT/teselas/prototipo/marcadores.html, en mardelplata.com), con los
   valores del modelo. Ver assets/prop-map.js (MARCAS, panelTipos) y
   assets/mapa-page.js (la barra de zona). */

/* --- Marca «gota»: la del modelo. El ícono del tipo en el disco y una sombra
   multiplicada en el piso. La caja es el elemento que ubica MapLibre; el dibujo
   va en un hijo (ver crearGota). Debajo de la tarjeta, encima de las burbujas. */
.mdpd-prop-map__gota-caja {
	z-index: 1;
}

.mdpd-prop-map__gota-caja:hover {
	z-index: 3;
}

.mdpd-prop-map__gota {
	position: relative;
	width: 40px;
	height: 54px;
	cursor: pointer;
	transition: transform 0.18s;
	transform-origin: 50% 100%;
}

.mdpd-prop-map__gota:hover {
	transform: scale(1.18);
}

.mdpd-prop-map__gota > svg {
	position: absolute;
	inset: 0 0 4px 0;
	width: 40px;
	height: 50px;
	filter: drop-shadow(0 3px 4px rgba(20, 24, 40, 0.3));
}

.mdpd-prop-map__gota-ico {
	position: absolute;
	left: 6px;
	top: 5px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #fff;
	padding: 5px;
	box-sizing: border-box;
}

.mdpd-prop-map__gota-ico svg {
	display: block;
	width: 100%;
	height: 100%;
}

.mdpd-prop-map__gota-piso {
	position: absolute;
	left: 10px;
	bottom: 0;
	width: 20px;
	height: 7px;
	border-radius: 50%;
	background: radial-gradient(rgba(0, 0, 0, 0.45), transparent 70%);
	mix-blend-mode: multiply;
}

/* La de la ficha: más grande y quieta (ya estamos en su página). */
.mdpd-prop-map__gota--ficha,
.mdpd-prop-map__gota--ficha:hover {
	transform: scale(1.3);
	cursor: default;
}

/* Ubicación aproximada: el borde punteado (lo pone el SVG) y algo de transparencia,
   el mismo criterio que la pastilla. Lo incierto es dónde está, no la operación. */
.mdpd-prop-map__gota--aprox > svg {
	opacity: 0.85;
}

/* --- Panel de tipos: flotando sobre el mapa, arriba a la izquierda. También
   filtra. Con todos prendidos, el clic en uno deja solo ese. */
.mdpd-prop-map__tipos {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 5;
	width: 230px;
	max-height: calc(100% - 24px);
	overflow: auto;
	box-sizing: border-box;
	padding: 10px;
	background: rgba(255, 255, 255, 0.86);
	backdrop-filter: blur(12px) saturate(1.3);
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(20, 24, 40, 0.14);
	font-family: Poppins, sans-serif;
	color: #1f2430;
}

.mdpd-prop-map__tipos-titulo {
	/* Flatsome les da `width: 100%` a h1–h6: con el margen de los costados se pasaba del
	   panel 12 px y aparecía una barra horizontal (2026-10-20). */
	width: auto;
	margin: 2px 6px 8px;
	font-size: 12px;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #777;
}

.mdpd-prop-map__tipos-vacio {
	margin: 4px 6px 8px;
	font-size: 13px;
	color: #666;
	line-height: 1.4;
}

.mdpd-prop-map__tipos button {
	display: flex;
	width: 100%;
	align-items: center;
	gap: 10px;
	min-height: 0;
	margin: 0;
	padding: 4px 6px;
	border: 0;
	border-radius: 10px;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	cursor: pointer;
}

.mdpd-prop-map__tipos button:hover {
	background: rgba(31, 36, 48, 0.06);
}

.mdpd-prop-map__tipos button[aria-pressed="false"] {
	opacity: 0.35;
}

.mdpd-prop-map__tipos button svg {
	width: 30px;
	height: 30px;
	flex: none;
}

.mdpd-prop-map__tipos button span {
	flex: 1;
}

.mdpd-prop-map__tipos button em {
	font-style: normal;
	font-size: 11px;
	color: #888;
}

.mdpd-prop-map__tipos-ops {
	display: flex;
	gap: 10px;
	margin: 8px 6px 2px;
	font-size: 11px;
	color: #555;
}

.mdpd-prop-map__tipos-ops i {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin-right: 4px;
	vertical-align: -1px;
}

@media (max-width: 700px) {
	.mdpd-prop-map__tipos {
		width: 170px;
		font-size: 12px;
	}
}

/* Plegado: el botón solo se ve en el celular; en la computadora el cuerpo es
   `display: contents` y el panel queda siempre abierto, como en el modelo. */
/* Con el prefijo del panel: si no, `.mdpd-prop-map__tipos button` le gana. */
.mdpd-prop-map__tipos .mdpd-prop-map__tipos-abrir {
	display: none;
}

.mdpd-prop-map__tipos-cuerpo {
	display: contents;
}

/* Celular: el panel ocupaba medio mapa. Se pliega a un botón «Propiedades» con la
   cantidad que se ve, y al tocarlo se despliega más ancho, con su propio scroll. */
@media (max-width: 549px) {
	.mdpd-prop-map__tipos {
		width: auto;
		max-width: calc(100% - 24px);
		padding: 0;
		background: none;
		backdrop-filter: none;
		border: 0;
		box-shadow: none;
		overflow: visible;
	}

	.mdpd-prop-map__tipos .mdpd-prop-map__tipos-abrir {
		display: inline-flex;
		width: auto;
		align-items: center;
		gap: 8px;
		padding: 7px 12px 7px 11px;
		border: 1px solid rgba(255, 255, 255, 0.7);
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.92);
		box-shadow: 0 6px 18px rgba(20, 24, 40, 0.18);
		font-size: 13px;
		font-weight: 600;
	}

	.mdpd-prop-map__tipos .mdpd-prop-map__tipos-abrir:hover {
		background: rgba(255, 255, 255, 0.92);
	}

	.mdpd-prop-map__tipos .mdpd-prop-map__tipos-abrir svg {
		width: 18px;
		height: 18px;
	}

	.mdpd-prop-map__tipos-abrir-ico {
		color: var(--fs-color-secondary, #ff5500);
	}

	.mdpd-prop-map__tipos-abrir-flecha {
		transition: transform 0.2s;
	}

	.mdpd-prop-map__tipos.is-abierto .mdpd-prop-map__tipos-abrir-flecha {
		transform: rotate(180deg);
	}

	.mdpd-prop-map__tipos-cuenta {
		min-width: 20px;
		padding: 1px 6px;
		border-radius: 999px;
		background: var(--fs-color-secondary, #ff5500);
		color: #fff;
		font-size: 11px;
		font-weight: 700;
		text-align: center;
	}

	.mdpd-prop-map__tipos-cuerpo {
		display: none;
	}

	.mdpd-prop-map__tipos.is-abierto .mdpd-prop-map__tipos-cuerpo {
		display: block;
		width: 260px;
		max-width: 100%;
		max-height: min(60vh, 340px);
		margin-top: 6px;
		overflow-y: auto;
		overscroll-behavior: contain;
		box-sizing: border-box;
		padding: 10px;
		background: rgba(255, 255, 255, 0.96);
		border: 1px solid rgba(255, 255, 255, 0.7);
		border-radius: 16px;
		box-shadow: 0 10px 30px rgba(20, 24, 40, 0.2);
	}

	/* Filas más altas: se tocan con el dedo. */
	.mdpd-prop-map__tipos-lista button {
		min-height: 40px;
	}
}

/* --- /mapa/: la zona en la que se está, sobre el mapa, arriba al centro y
   siempre a la vista. En el celular, abajo. */
.mdpd-mapa-page__zona {
	position: absolute;
	z-index: 9;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 6px;
	max-width: calc(100% - 24px);
	box-sizing: border-box;
	padding: 5px 5px 5px 16px;
	background: #fff;
	border: 2px solid var(--fs-color-secondary, #ff5500);
	border-radius: 999px;
	box-shadow: 0 8px 22px rgba(20, 24, 40, 0.22);
	font-family: Poppins, sans-serif;
	color: #1f2430;
}

.mdpd-mapa-page__zona[hidden] {
	display: none;
}

.mdpd-mapa-page__zona-lugar {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin-right: 6px;
	line-height: 1.15;
}

.mdpd-mapa-page__zona-lugar small {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #888;
}

.mdpd-mapa-page__zona-lugar b {
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mdpd-mapa-page__zona button,
.mdpd-mapa-page__zona a {
	min-height: 0;
	margin: 0;
	padding: 7px 14px;
	border: 1px solid #e3e6ec;
	border-radius: 999px;
	background: #fff;
	box-shadow: none;
	color: #1f2430;
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.mdpd-mapa-page__zona button:hover,
.mdpd-mapa-page__zona a:hover {
	border-color: var(--fs-color-secondary, #ff5500);
}

.mdpd-mapa-page__zona .mdpd-mapa-page__salir {
	background: var(--fs-color-secondary, #ff5500);
	border-color: var(--fs-color-secondary, #ff5500);
	color: #fff;
}

.mdpd-mapa-page__zona .mdpd-mapa-page__salir:hover {
	filter: brightness(1.08);
}

@media (max-width: 700px) {
	.mdpd-mapa-page__zona {
		top: auto;
		bottom: 14px;
	}
}


/* ── assets/mapa-pois.css ── */
/* Puntos de interés de los mapas del portal (MapaGold, 2026-10-08). Ver assets/mapa-pois.js.
   La barra va ARRIBA del mapa, como el selector de zonas: se elige qué ver y después se mira. */

.mdpd-mapa-pois {
	--mdpd-pois-primario: var(--fs-color-primary, #168ea6);
	--mdpd-pois-borde: #dde1e6;
	--mdpd-pois-tinta: #2b3b45;
	position: relative;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .75rem;
	margin-bottom: .6rem;
	color: var(--mdpd-pois-tinta);
	font-size: 13px;
	line-height: 1.3;
}

/* Interruptor general: apagado, los botones quedan a la vista pero inactivos. */
.mdpd-mapa-pois__switch {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding-right: .75rem;
	border-right: 1px solid var(--mdpd-pois-borde);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
}
.mdpd-mapa-pois__switch input,
.mdpd-mapa-pois__3d input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	margin: 0;
}
.mdpd-mapa-pois__sw {
	position: relative;
	flex: none;
	width: 36px;
	height: 20px;
	border-radius: 999px;
	background: #cfd3da;
	transition: background .2s;
}
.mdpd-mapa-pois__sw::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
	transition: transform .2s;
}
.mdpd-mapa-pois__switch input:checked + .mdpd-mapa-pois__sw { background: var(--mdpd-pois-primario); }
.mdpd-mapa-pois__switch input:checked + .mdpd-mapa-pois__sw::after { transform: translateX(16px); }
.mdpd-mapa-pois__switch input:focus-visible + .mdpd-mapa-pois__sw { outline: 2px solid var(--mdpd-pois-primario); outline-offset: 2px; }

/* `overflow-x: clip`: los cartelitos, aun invisibles, ensanchaban la página en el celular.
   Cortados de costado y abiertos hacia abajo; cerca de un borde, el JS los alinea adentro. */
.mdpd-mapa-pois__chips {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	overflow-x: clip;
	transition: opacity .2s;
}
.mdpd-mapa-pois.is-apagado .mdpd-mapa-pois__chips {
	opacity: .35;
	pointer-events: none;
}

/* Cada categoría: solo el ícono; el nombre, en un cartelito al pasar el mouse o con el
   teclado. Apagada = ícono gris y tenue. La opacidad va en el ícono y no en el botón,
   para que el cartelito se vea entero en los dos estados. */
.mdpd-mapa-pois__chip {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid var(--mdpd-pois-borde);
	border-radius: 50%;
	background: #fff;
	box-shadow: none;
	font: inherit;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}
.mdpd-mapa-pois__chip svg {
	width: 22px;
	height: 22px;
	opacity: .4;
	filter: grayscale(1);
	transition: opacity .15s, filter .15s;
}
.mdpd-mapa-pois__chip[aria-pressed="true"] {
	border-color: var(--c);
	box-shadow: inset 0 0 0 1px var(--c);
	background: color-mix(in srgb, var(--c) 8%, #fff);
}
.mdpd-mapa-pois__chip[aria-pressed="true"] svg { opacity: 1; filter: none; }
.mdpd-mapa-pois__chip:hover { border-color: var(--c); }
.mdpd-mapa-pois__chip:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.mdpd-mapa-pois__chip::after {
	content: attr(data-nombre);
	position: absolute;
	top: calc(100% + 9px);
	left: 50%;
	z-index: 30;
	transform: translate(-50%, -4px);
	padding: 5px 10px;
	border-radius: 8px;
	background: var(--mdpd-pois-tinta);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s, transform .15s;
}
.mdpd-mapa-pois__chip::before {
	content: "";
	position: absolute;
	top: calc(100% + 4px);
	left: 50%;
	z-index: 30;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top: 0;
	border-bottom-color: var(--mdpd-pois-tinta);
	opacity: 0;
	transition: opacity .15s;
}
.mdpd-mapa-pois__chip:hover::after,
.mdpd-mapa-pois__chip:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.mdpd-mapa-pois__chip.is-izq::after { left: 0; transform: translate(0, -4px); }
.mdpd-mapa-pois__chip.is-der::after { left: auto; right: 0; transform: translate(0, -4px); }
.mdpd-mapa-pois__chip.is-izq:hover::after, .mdpd-mapa-pois__chip.is-izq:focus-visible::after,
.mdpd-mapa-pois__chip.is-der:hover::after, .mdpd-mapa-pois__chip.is-der:focus-visible::after { transform: translate(0, 0); }
.mdpd-mapa-pois__chip:hover::before,
.mdpd-mapa-pois__chip:focus-visible::before { opacity: 1; }

/* Botón 3D. */
.mdpd-mapa-pois__3d {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 7px 14px 7px 11px;
	border: 1px solid var(--mdpd-pois-borde);
	border-radius: 999px;
	background: #fff;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
	transition: background .15s, color .15s, border-color .15s;
}
.mdpd-mapa-pois__3d svg {
	width: 20px;
	height: 20px;
	color: var(--mdpd-pois-primario);
	transition: transform .4s;
}
.mdpd-mapa-pois__3d:hover { border-color: var(--mdpd-pois-primario); }
.mdpd-mapa-pois__3d:has(input:checked) { background: var(--mdpd-pois-primario); border-color: var(--mdpd-pois-primario); color: #fff; }
.mdpd-mapa-pois__3d:has(input:checked) svg { color: #fff; transform: rotate(-25deg); }
.mdpd-mapa-pois__3d:has(input:focus-visible) { outline: 2px solid var(--mdpd-pois-primario); outline-offset: 2px; }

/* Cartel de un punto al pasar el mouse: el del modelo (.globo-poi de marcadores.html).
   Lo ubica el JS para que no se salga del mapa. */
.mdpd-mapa-pois__globo {
	position: absolute;
	z-index: 7;
	pointer-events: none;
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	color: var(--mdpd-pois-tinta, #2b3b45);
	padding: 6px 12px 6px 7px;
	border-radius: 10px;
	box-shadow: 0 6px 16px rgba(20, 24, 40, .22);
	width: max-content;
	max-width: 240px;
}
.mdpd-mapa-pois__globo[hidden] { display: none; }
.mdpd-mapa-pois__globo-ico { width: 24px; height: 24px; flex: none; }
.mdpd-mapa-pois__globo-ico svg { display: block; width: 100%; height: 100%; }
/* min-width: 0 deja que el texto se achique dentro del flex; sin eso un nombre largo
   empuja la caja y se sale. El nombre corta en dos líneas como mucho, con «…». */
.mdpd-mapa-pois__globo > span:last-child { min-width: 0; }
.mdpd-mapa-pois__globo b {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.25;
	overflow-wrap: anywhere;
}
.mdpd-mapa-pois__globo small { display: block; font-size: 11px; color: #666; }

/* --- Plegado (el botón solo se ve en el celular). En la computadora el panel es
   `display: contents`: sus hijos quedan en la fila de la barra, como siempre. */
.mdpd-mapa-pois__abrir,
.mdpd-mapa-pois__chip-nombre {
	display: none;
}

.mdpd-mapa-pois__panel {
	display: contents;
}

/* --- Celular: la barra es UN botón «Puntos de interés» (con la cantidad de categorías
   prendidas) y el 3D. El panel se despliega SOBRE el mapa, a todo el ancho, con cada
   categoría en una fila con su nombre: no hay mouse para el cartelito. Se pliega con el
   mismo botón, tocando afuera o con Escape. */
@media (max-width: 549px) {
	.mdpd-mapa-pois {
		flex-wrap: nowrap;
	}

	.mdpd-mapa-pois__abrir {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-height: 0;
		margin: 0;
		padding: 7px 12px 7px 11px;
		border: 1px solid var(--mdpd-pois-borde);
		border-radius: 999px;
		background: #fff;
		box-shadow: none;
		color: var(--mdpd-pois-tinta);
		font: inherit;
		font-size: 13px;
		font-weight: 600;
		line-height: 1.3;
		letter-spacing: normal;
		text-transform: none;
		cursor: pointer;
	}

	.mdpd-mapa-pois__abrir-ico {
		width: 20px;
		height: 20px;
		color: var(--mdpd-pois-primario);
	}

	.mdpd-mapa-pois__abrir-flecha {
		width: 16px;
		height: 16px;
		transition: transform 0.2s;
	}

	.mdpd-mapa-pois__cuenta {
		min-width: 20px;
		padding: 1px 6px;
		border-radius: 999px;
		background: var(--mdpd-pois-primario);
		color: #fff;
		font-size: 11px;
		font-weight: 700;
		text-align: center;
	}

	.mdpd-mapa-pois__cuenta.is-no {
		background: #cfd3da;
		color: var(--mdpd-pois-tinta);
	}

	.mdpd-mapa-pois.is-abierta .mdpd-mapa-pois__abrir {
		border-color: var(--mdpd-pois-primario);
	}

	.mdpd-mapa-pois.is-abierta .mdpd-mapa-pois__abrir-flecha {
		transform: rotate(180deg);
	}

	.mdpd-mapa-pois__3d {
		margin-left: auto;
	}

	/* El panel plegado no está; desplegado, flota sobre el mapa. */
	.mdpd-mapa-pois__panel {
		display: none;
	}

	.mdpd-mapa-pois.is-abierta .mdpd-mapa-pois__panel {
		position: absolute;
		top: calc(100% + 6px);
		left: 0;
		right: 0;
		z-index: 20;
		display: block;
		max-height: min(70vh, 420px);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 12px;
		background: #fff;
		border: 1px solid var(--mdpd-pois-borde);
		border-radius: 14px;
		box-shadow: 0 12px 30px rgba(20, 24, 40, 0.22);
	}

	.mdpd-mapa-pois__switch {
		display: flex;
		margin-bottom: 10px;
		padding: 0 0 10px;
		border-right: 0;
		border-bottom: 1px solid var(--mdpd-pois-borde);
	}

	/* Las categorías, de a dos por fila, con el ícono y el nombre. */
	.mdpd-mapa-pois__chips {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 6px;
		overflow: visible;
	}

	.mdpd-mapa-pois__chip {
		display: flex;
		justify-content: flex-start;
		gap: 8px;
		width: auto;
		height: auto;
		min-height: 44px;
		padding: 6px 10px;
		border-radius: 12px;
		text-align: left;
	}

	.mdpd-mapa-pois__chip svg {
		flex: none;
	}

	.mdpd-mapa-pois__chip-nombre {
		display: block;
		color: var(--mdpd-pois-tinta);
		font-size: 12px;
		font-weight: 600;
		line-height: 1.25;
	}

	.mdpd-mapa-pois__chip[aria-pressed="false"] .mdpd-mapa-pois__chip-nombre {
		color: #8a8f99;
	}

	/* Sin cartelito: el nombre ya está a la vista. */
	.mdpd-mapa-pois__chip::before,
	.mdpd-mapa-pois__chip::after {
		display: none;
	}
}


/* ── assets/prop-single.css ── */
/* Va PRIMERO, antes de cualquier comentario: si no es el primer byte del archivo, el
   navegador la ignora. El servidor sirve los .css sin charset, y sin esta linea la
   codificacion de la hoja queda librada a una cadena de reservas. Ver CLAUDE.md. */
/**
 * Single propiedad — paridad legacy + iconos Lucide.
 */

/* El <article> es sólo wrapper semántico + gancho JS (data-prop-id): sus dos
   columnas (large-8 contenido / large-4 form) actúan como hijas directas del
   row raíz. */
.mdpd-single-propiedad .mdpd-ficha-propiedad {
	display: contents;
}

.mdpd-single-propiedad .mdpd-ficha-propiedad__title {
	font-size: 1.35rem;
	line-height: 1.25;
	color: #605f5f;
}

.mdpd-ficha-propiedad__breadcrumbs {
	margin-bottom: 0.75rem;
	font-size: 0.9rem;
}

.mdpd-ficha-propiedad__breadcrumbs .breadCrumb + .breadCrumb::before {
	/* Chevron por escape, no por carácter — ver la nota en `style.css`.
	   El espacio de más no sobra: CSS se come un espacio en blanco después
	   de un escape hexadecimal, así que hacen falta dos para que quede uno. */
	content: " \203A  ";
	color: #888;
}

.mdpd-ficha-propiedad__breadcrumbs a {
	color: #666;
	text-decoration: none;
}

.mdpd-ficha-propiedad__estado .estado {
	display: inline-block;
	padding: 0.2rem 0.55rem;
	border-radius: 0.25rem;
	background: #f0f0f0;
	font-weight: 600;
}

/* Ya no es una línea de texto sino las dos `.mdpd-dato` de dirección y zona, que
   traen su color y su interlínea: acá solo queda el aire hasta lo que sigue. */
.mdpd-ficha-propiedad__subtitle {
	margin: 0 0 1rem;
}

.mdpd-ficha-propiedad__caracteristicas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem 0.85rem;
	margin: 1rem 0 1.25rem;
}

.mdpd-ficha-propiedad__caracteristicas .caracteristica {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.35rem 0.65rem;
	background: #f7f9fa;
	border: 1px solid #e8eef1;
	border-radius: 999rem;
	font-size: 0.92rem;
	font-weight: 600;
	color: #333;
}

.mdpd-ficha-propiedad__caracteristicas .mdpd-icon {
	font-size: 1.25em;
	color: var(--mdpd-icono-color, #329ac1);
	flex-shrink: 0;
}

.mdpd-ficha-propiedad__titulo-desc {
	font-size: 1rem;
	font-weight: 600;
	color: #605f5f;
	margin: 0 0 0.75rem;
	line-height: 1.45;
}

.mdpd-ficha-propiedad__desc,
.mdpd-ficha-propiedad__mapa h2,
.mdpd-ficha-propiedad__video h2,
.mdpd-ficha-propiedad__generales h2 {
	font-size: 1.05rem;
	color: #605f5f;
	margin: 1.25rem 0 0.5rem;
}

.mdpd-ficha-propiedad__desc {
	color: #333;
	line-height: 1.55;
}

.mdpd-ficha-propiedad__mapa-dir {
	color: #605f5f;
	margin-bottom: 0.75rem;
}

/*
 * Ubicación aproximada: la coordenada salió de geocodificar la calle y no la
 * puerta (`coord_origen = geocode_apx`). Va debajo del mapa, en gris y en
 * cursiva —el registro de una aclaración, no el de un error—, con la barra
 * izquierda que ya usa el sitio para las notas al margen. El mark punteado del
 * mapa dice lo mismo en dibujo; esto lo dice en palabras, que es lo único que
 * se entiende sin saber la convención.
 */
.mdpd-ficha-propiedad__mapa-aprox {
	margin: 0.5rem 0 0;
	padding-left: 0.6rem;
	border-left: 2px dashed #c9c7c7;
	color: #7a7878;
	font-size: 0.85rem;
	font-style: italic;
	line-height: 1.35;
}

.mdpd-ficha-propiedad__video-embed {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	border-radius: 0.5rem;
}

.mdpd-ficha-propiedad__video-embed iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Las características generales usan `.mdpd-chips`, la misma plancha gris con
   chips blancas que las comodidades de un alojamiento: son la misma clase de dato
   —una lista de cosas que la ficha tiene— y no había razón para que se vieran
   distinto. El estilo vive en style.css, que es donde lo comparten los dos. */

/* Datos del anunciante: sin título, dentro de la misma caja del formulario.
   Izquierda en desktop; centrado entero en móvil, ver @media más abajo. */
.mdpd-ficha-propiedad__agente {
	margin: 1.25rem 0;
	text-align: left;
}

/* Adentro de la caja el aire lo da su padding: la row no suma margen abajo. */
.mdpd-ficha-propiedad__inmo-row {
	margin-bottom: 0;
}

.mdpd-ficha-propiedad__inmo-name {
	font-size: 1.1rem;
	margin: 0 0 0.35rem;
}

/* Los chips ya traen su propio margen: la fila solo abre aire arriba y abajo. */
.mdpd-ficha-propiedad__inmo-chips {
	margin: 0.5rem 0 0.35rem;
}

.mdpd-ficha-propiedad__inmo-all-wrap {
	margin: 0;
	font-size: 0.95rem;
}

/* Firma abajo del botón de WhatsApp: acá el logo es sello, no enlace. */
.mdpd-ficha-propiedad__inmo-mini {
	font-size: 0.95rem;
	margin: 1rem 0 0;
}

/* Precio y badge de operación: en la fila del título, no arriba del formulario
   —en móvil el formulario queda lejos del título, y estos datos son de los
   primeros que se buscan al abrir la ficha. Desktop a la derecha de la
   columna grande; en tablet y mobile, columna propia a la izquierda (ver
   @media más abajo y el layout en inc/partials/ficha-propiedad.php). */
.mdpd-ficha-propiedad__header-precio {
	text-align: right;
}

.mdpd-ficha-propiedad__header-precio .operacion {
	display: inline-block;
	padding: 0.15rem 0.45rem;
	border-radius: 0.25rem;
	font-weight: 600;
	margin-bottom: 0.35rem;
	color: #fff;
}

.mdpd-ficha-propiedad__header-precio .operacion.venta {
	background: #32c190;
}

.mdpd-ficha-propiedad__header-precio .operacion.alquiler {
	background: #329ac1;
}

.mdpd-ficha-propiedad__header-precio .precio {
	display: block;
	font-size: 1.35rem;
	font-weight: 700;
}

.mdpd-ficha-propiedad__header-precio .precio--consulta {
	font-size: 1.1rem;
}

.mdpd-ficha-propiedad__header-precio .expensas {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.92rem;
	color: #666;
}

.mdpd-ficha-propiedad__actions .boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #ddd;
	background: #fff;
	border-radius: 50%;
	width: 2.625rem;
	height: 2.625rem;
	padding: 0;
	cursor: pointer;
}

.mdpd-ficha-propiedad__actions .boton .mdpd-icon {
	font-size: 1.15em;
}

.mdpd-ficha-propiedad__actions .boton.is-favorite {
	color: #c0392b;
	border-color: #c0392b;
}

/* La caja del formulario arranca debajo del precio y de las acciones. */
.mdpd-ficha-propiedad__consulta {
	margin-top: 0.75rem;
}

.mdpd-ficha-propiedad__whatsapp {
	margin: 0.75rem 0 0;
}

/* WhatsApp con el verde de la marca: el ícono también va en blanco, que acá el
   fondo ya dice de qué canal se trata. */
.mdpd-ficha-propiedad__whatsapp .mdpd-boton-wsp,
.mdpd-ficha-propiedad__whatsapp .mdpd-boton-wsp:hover,
.mdpd-ficha-propiedad__whatsapp .mdpd-boton-wsp:focus {
	align-items: center;
	background-color: #25d366;
	border-color: #25d366;
	color: #fff;
	display: flex;
	gap: 0.35rem;
	justify-content: center;
	margin: 0;
	width: 100%;
}

.mdpd-ficha-propiedad__whatsapp .mdpd-boton-wsp:hover {
	background-color: #1eb857;
	border-color: #1eb857;
}

/* La columna del formulario acompaña el scroll con el sticky de Flatsome
   (`.is-sticky-column`), que ya descuenta el header pegado. Apilada no tiene
   sentido: el formulario es lo último de la página. */
@media (max-width: 849px) {
	.mdpd-single-propiedad .stickyForm .is-sticky-column {
		position: static;
	}

	.mdpd-single-propiedad .stickyForm {
		margin-top: 1.5rem;
	}

	.mdpd-ficha-propiedad__inmo-all-wrap {
		text-align: center;
	}

	/* Toda la tarjeta de «Datos del anunciante» centrada en móvil, texto y
	   columnas — en desktop queda a la izquierda (arriba en este archivo). */
	.mdpd-ficha-propiedad__agente {
		text-align: center;
	}

	.mdpd-ficha-propiedad__agente .row {
		align-items: center;
		justify-content: center;
	}

	/* `.mdpd-dato` (dirección, ciudad) es flex con solo `align-items`: sin
	   `justify-content` el `text-align:center` del contenedor no lo mueve —los
	   items de un flex container no responden a `text-align`. */
	.mdpd-ficha-propiedad__agente .mdpd-dato {
		justify-content: center;
	}

	/* Título y precio, apilados y a la izquierda los dos —en desktop el precio
	   va a la derecha, ver la regla base más arriba. */
	.mdpd-ficha-propiedad__header-precio {
		text-align: left;
	}
}

/* El precio frente a su zona (inc/partials/ficha-propiedad.php, PLAN-PRECIOS.md).
   Mismo marco que `.mdpd-caja`. Verde solo cuando está por debajo de la referencia:
   es lo único que se destaca; la referencia neutra va en el gris de las cajas. */
.mdpd-precio-contexto {
	display: flex;
	gap: 0.85em;
	align-items: flex-start;
	margin: 1.25rem 0;
	background: #fff;
	border: 2px solid var(--mdpd-caja-borde, #f2f2f2);
	border-radius: var(--mdpd-caja-radio, 0.75rem);
	padding: var(--mdpd-caja-padding, 1em 1.25em);
}

.mdpd-precio-contexto--favorable {
	background: #eef8f1;
	border-color: #cfe9d7;
}

.mdpd-precio-contexto__icono {
	flex: none;
	font-size: 1.5em;
	margin-top: 0.1em;
	color: var(--mdpd-icono-color, #777);
}

.mdpd-precio-contexto--favorable .mdpd-precio-contexto__icono,
.mdpd-precio-contexto--favorable .mdpd-precio-contexto__titulo {
	color: #1f7a3d;
}

.mdpd-precio-contexto p {
	margin: 0;
}

.mdpd-precio-contexto__titulo {
	font-weight: 700;
	font-size: 1.05em;
	line-height: 1.3;
}

.mdpd-precio-contexto__detalle {
	margin-top: 0.3em !important;
}

.mdpd-precio-contexto__nota {
	margin-top: 0.45em !important;
	font-size: 0.8em;
	opacity: 0.75;
}


/* ── assets/consulta.css ── */
/* Va PRIMERO, antes de cualquier comentario: si no es el primer byte del archivo, el
   navegador la ignora. El servidor sirve los .css sin charset, y sin esta linea la
   codificacion de la hoja queda librada a una cadena de reservas. Ver CLAUDE.md. */
/* Consultas: formulario único, panel de consulta múltiple y diálogo. */

.mdpd-consulta {
	--mdpd-consulta-radio: 0.5rem;
	/* Mismos valores que `.form-flat` de Flatsome, para que el control de
	   cantidad no se distinga de los inputs de al lado. */
	--mdpd-consulta-flat-fondo: rgba(0, 0, 0, 0.03);
	--mdpd-consulta-flat-borde: rgba(0, 0, 0, 0.09);
	/* Flatsome usa 99px: cualquier valor grande da la misma píldora. */
	--mdpd-consulta-flat-radio: 99em;
	/* El alto que Flatsome les da a inputs y selects. */
	--mdpd-consulta-flat-alto: 2.507em;
	--mdpd-consulta-icono: var(--fs-color-primary, #446084);
	display: contents;
	font-size: 0.9375rem;
}

/* Flatsome le pone margen y alto mínimo a todo lo que sea button. */
.mdpd-consulta button,
.mdpd-consulta-panel button {
	margin: 0 !important;
}

.mdpd-consulta__title {
	font-size: 1.15em;
	margin-bottom: 0.75em;
}

.mdpd-consulta__field {
	margin-bottom: 0.75em;
}

.mdpd-consulta__field label {
	display: block;
	font-size: 0.85em;
	font-weight: 600;
	margin-bottom: 0.25em;
}

/* Obligatorio: el mismo rojo que Flatsome usa en los `abbr[title=required]`. */
.mdpd-consulta__req {
	border: 0;
	color: var(--fs-color-alert, #b20000);
	cursor: help;
	text-decoration: none;
}

.mdpd-consulta__field input,
.mdpd-consulta__field textarea {
	font-size: 1em;
	margin-bottom: 0;
	width: 100%;
}

/* Dos campos que comparten línea: fechas, y pasajeros con teléfono. */
.mdpd-consulta__par {
	display: grid;
	gap: 0 0.75em;
	grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
}

.mdpd-consulta__acciones {
	margin: 0;
	text-align: right;
}

/* «Quiero que me llamen»: el checkbox del portal es un toggle (style.css), así
   que la etiqueta va al lado y no arriba como en el resto de los campos. Va con
   `.mdpd-consulta__field` adelante para ganarle al `display: block` de esas. */
.mdpd-consulta__field .mdpd-consulta__check {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	font-size: 0.9em;
	font-weight: 600;
	gap: 0.5em;
	margin: 0;
}

/* `form-flat` le pisa el fondo a todo input que no sea submit: el toggle
   necesita el suyo o el riel apagado queda invisible. */
.mdpd-consulta .mdpd-consulta__check input[type="checkbox"] {
	background-color: var(--mdpd-toggle-fondo, #d5dce0);
	border-color: var(--mdpd-toggle-borde, #c2ccd2);
}

.mdpd-consulta .mdpd-consulta__check input[type="checkbox"]:checked {
	background-color: var(--primary-color, #465f70);
	border-color: var(--primary-color, #465f70);
}

.mdpd-consulta__submit {
	font-size: 1em;
}

/* `expand` de Flatsome estira el botón, pero el contenido es un flex nuestro. */
.mdpd-consulta__submit.expand {
	justify-content: center;
}

/* Ícono dentro del campo, a la izquierda. */
.mdpd-consulta__control {
	display: block;
	position: relative;
}

.mdpd-consulta__icono {
	color: var(--mdpd-consulta-icono);
	font-size: 1.1em;
	pointer-events: none;
	position: absolute;
	right: 0.9em;
	top: 50%;
	transform: translateY(-50%);
}

/* Con `.mdpd-consulta` adelante para ganarle a `input[type=text]` de Flatsome,
   que setea el padding en shorthand. */
.mdpd-consulta .mdpd-consulta__control > input,
.mdpd-consulta .mdpd-consulta__control > textarea {
	padding-right: 2.6em;
}

/* En el textarea el ícono va arriba, a la altura de la primera línea (Flatsome
   le da 0.7em de padding arriba), no al medio de la caja. */
.mdpd-consulta__control--area .mdpd-consulta__icono {
	top: 0.8em;
	transform: none;
}

/* ---------------------------------------------------------------
   Fechas: combo desde/hasta (assets/mdpd-date-range-picker.*)

   El componente viene del plugin de reservas con su propia paleta y su
   propia idea de cómo se ve un campo. Acá se lo trae al portal sin tocarlo:
   todo sale de las mismas variables que ya usan los demás campos del
   formulario, así que sigue al tema en vez de tener colores propios.
   --------------------------------------------------------------- */

.mdpd-consulta__fechas {
	--mdpd-drp-h: var(--mdpd-consulta-flat-alto);
	/* Píldora, como todos los campos del portal (el componente traía 0.5rem). */
	--mdpd-drp-radius: var(--mdpd-consulta-flat-radio);
	--mdpd-drp-bg: var(--mdpd-consulta-flat-fondo);
	--mdpd-drp-border: var(--mdpd-consulta-flat-borde);
	--mdpd-drp-border-focus: var(--mdpd-consulta-icono);
	/* `inherit` y no un color fijo: la fecha elegida se lee con el mismo color
	   que el resto del formulario, sin adivinarle el tono al tema. */
	--mdpd-drp-text: inherit;
	--mdpd-drp-muted: rgba(0, 0, 0, 0.55);
	--mdpd-drp-accent: var(--mdpd-consulta-icono);
	--mdpd-drp-accent-hover: color-mix(in srgb, var(--mdpd-consulta-icono) 80%, black);
	--mdpd-drp-nav-bg: var(--mdpd-consulta-icono);
	--mdpd-drp-nav-bg-hover: color-mix(in srgb, var(--mdpd-consulta-icono) 80%, black);
	--mdpd-drp-nav-text: #fff;
	--mdpd-drp-nav-text-hover: #fff;
	/* El tramo entre las dos fechas es el color del portal aclarado contra
	   blanco. Tono y opacidad van separados a propósito: el componente los
	   recombina con color-mix() para que el resultado sea opaco — con un color
	   con transparencia real se ve la costura donde se empalman los días. */
	--mdpd-drp-range-hue: var(--mdpd-consulta-icono);
	--mdpd-drp-range-alpha: 13%;
	--mdpd-drp-range-text: var(--mdpd-consulta-icono);
}

/* Adentro del campo entran dos líneas (etiqueta + valor) en el alto de un
   input normal, así que llevan tamaño e interlínea propios: sin fijar el
   line-height heredarían el del formulario —1.5 o más— y no entrarían. En em
   para que acompañen si cambia el tamaño de letra del formulario. */
.mdpd-consulta__fechas .mdpd-drp-seg-label {
	font-size: 0.6em !important;
	line-height: 1.15 !important;
}

.mdpd-consulta__fechas .mdpd-drp-seg-value {
	font-size: 0.9em !important;
	line-height: 1.2 !important;
}

/* El ícono va a la derecha, como en todos los campos de este formulario. El
   componente lo trae a la izquierda (su propia convención), así que se apaga
   el suyo y se dibuja de este lado; es el mismo calendario de Lucide que
   usaban los dos campos de antes. */
.mdpd-consulta__fechas .mdpd-drp-seg:first-child {
	padding-left: 1.1rem !important;
}

.mdpd-consulta__fechas .mdpd-drp-seg:first-child::before {
	content: none !important;
}

.mdpd-consulta__fechas .mdpd-drp-seg[data-drp-seg="checkout"] {
	padding-right: 2.6em !important;
}

/* Con `.mdpd-drp` —la clase que pone el componente al arrancar— para que el
   ícono aparezca recién cuando el combo existe: hasta entonces el contenedor
   tiene adentro los dos campos de respaldo, que traen el suyo propio. */
.mdpd-consulta__fechas.mdpd-drp::after {
	background-color: var(--mdpd-consulta-icono);
	content: "";
	height: 1.1em;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
	position: absolute;
	right: 0.9em;
	top: 50%;
	transform: translateY(-50%);
	width: 1.1em;
}

/* ---- Dos correcciones para que Flatpickr conviva con Flatsome ----
   Van sobre `.mdpd-drp-calendar` (la clase del componente, no la nuestra):
   no son cuestión de estética de este formulario sino de que el calendario
   se dibuje bien dentro de este tema, así que valen para cualquier picker
   que el portal monte más adelante. */

/* 1. La grilla estaba corrida y la última fila se repartía el ancho.
   En modo multi-mes Flatpickr rellena las puntas de cada mes con celdas
   marcadas `hidden`: no se ven, pero TIENEN que ocupar su lugar para que
   cada semana mida siete y los días caigan bajo su día de la semana. Solo
   les pone `visibility:hidden`, y Flatsome trae una utilidad global
   `.hidden{display:none!important}` que se las lleva puestas. Sin esas
   celdas el mes arranca pegado al lunes y la última fila queda con menos
   de siete, que es lo que `space-around` (de Flatpickr) desparrama.
   De paso vuelven a funcionar los `nth-child(7n+1/7n+7)` con que Flatpickr
   empalma el tramo del rango, que también cuentan de a siete. */
.flatpickr-calendar.mdpd-drp-calendar .flatpickr-day.hidden {
	display: block !important;
	visibility: hidden !important;
}

/* 2. Al segundo mes le faltaba la última columna.
   Flatpickr mide un mes y escribe el ancho del calendario INLINE
   (`(ancho + 1) × cantidad de meses`), contando solo las grillas. Como
   Flatsome pone `box-sizing:border-box` en todo, ese ancho pasa a incluir
   el padding lateral del componente, que en la cuenta de Flatpickr no
   existía: quedan ~29px de menos y `.flatpickr-days`, que es
   `overflow:hidden`, recorta lo que sobra. El componente ya pide
   `width:auto`, pero sin `!important` no le gana a un estilo inline. */
.flatpickr-calendar.mdpd-drp-calendar {
	width: auto !important;
	max-width: none !important;
}

/* El calendario se monta en <body>, fuera del formulario: se lo marca con una
   clase propia (consulta.js) para que estos ajustes no alcancen a otro picker
   que el portal pueda tener mañana con otra paleta. */
.flatpickr-calendar.mdpd-consulta-cal {
	border-radius: 0.5rem;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* El componente usa una sola variable de texto para el día elegido y para el
   tramo del medio. Le sirve con su dorado claro, pero el color del portal es
   oscuro: sobre él el texto tiene que ser claro, y eso solo vale para los dos
   extremos del rango. */
.flatpickr-calendar.mdpd-consulta-cal .flatpickr-day.selected,
.flatpickr-calendar.mdpd-consulta-cal .flatpickr-day.selected:hover,
.flatpickr-calendar.mdpd-consulta-cal .flatpickr-day.startRange,
.flatpickr-calendar.mdpd-consulta-cal .flatpickr-day.endRange,
.flatpickr-calendar.mdpd-consulta-cal .flatpickr-day.startRange:hover,
.flatpickr-calendar.mdpd-consulta-cal .flatpickr-day.endRange:hover {
	color: #fff !important;
}

/* Cantidad: [-] valor [+] en una sola caja, con el mismo fondo, borde, radio y
   alto que los inputs de `.form-flat`. El alto va acá y no lo pone el input de
   adentro: si no, la caja termina 2px más alta por su propio borde. */
.mdpd-consulta__qty {
	align-items: stretch;
	background-color: var(--mdpd-consulta-flat-fondo);
	border: 1px solid var(--mdpd-consulta-flat-borde);
	border-radius: var(--mdpd-consulta-flat-radio);
	display: flex;
	height: var(--mdpd-consulta-flat-alto);
	overflow: hidden;
}

.mdpd-consulta__qty-btn {
	align-items: center;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--mdpd-consulta-icono) !important;
	cursor: pointer;
	display: flex;
	flex: 0 0 auto;
	font-size: 1.15em;
	font-weight: 700;
	justify-content: center;
	line-height: 1 !important;
	min-height: 0 !important;
	padding: 0 !important;
	width: 2.4em;
}

.mdpd-consulta__qty-btn:disabled {
	cursor: not-allowed;
	opacity: 0.35;
}

.mdpd-consulta__qty input[type="number"] {
	appearance: textfield;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	flex: 1 1 auto;
	font-weight: 700;
	height: 100%;
	-moz-appearance: textfield;
	margin: 0 !important;
	min-width: 0;
	padding: 0 !important;
	text-align: center;
	width: auto;
}

.mdpd-consulta__qty input[type="number"]::-webkit-inner-spin-button,
.mdpd-consulta__qty input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* El honeypot tiene que existir para el bot y no para la persona: fuera de
   pantalla en vez de display:none, que algunos bots detectan. */
.mdpd-consulta__hp {
	height: 1px;
	left: -9999em;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.mdpd-consulta__flash {
	border-radius: var(--mdpd-consulta-radio);
	font-size: 0.9em;
	line-height: 1.35;
}

.mdpd-consulta__flash.is-ok,
.mdpd-consulta__flash.is-error {
	margin-bottom: 0.75em;
	padding: 0.6em 0.8em;
}

.mdpd-consulta__flash.is-ok {
	background: #e7f5ec;
	color: #17663a;
}

.mdpd-consulta__flash.is-error {
	background: #fdecec;
	color: #a02222;
}

/* Lista de seleccionados: filas cortas, que ya tiene su propio scroll. */
.mdpd-consulta__items {
	list-style: none;
	margin: 0 0 1em;
	max-height: 9em;
	overflow-y: auto;
	padding: 0;
}

.mdpd-consulta__items li {
	align-items: center;
	border-bottom: 1px solid #0000001a;
	display: flex;
	font-size: 0.85em;
	gap: 0.5em;
	justify-content: space-between;
	line-height: 1.3;
	padding: 0.25em 0;
}

.mdpd-consulta__item-remove {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: inherit !important;
	cursor: pointer;
	flex: 0 0 auto;
	font-size: 1.2em;
	height: 1.4em;
	line-height: 1 !important;
	min-height: 0 !important;
	opacity: 0.6;
	padding: 0 0.25em !important;
	width: 1.6em;
}

.mdpd-consulta__item-remove:hover {
	opacity: 1;
}

/* Casillero de selección en las filas de listado */

.mdpd-consulta-check-col .col-inner {
	align-items: flex-end;
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	height: 100%;
	justify-content: center;
}

/* Botón «Consultar» de un clic: la misma píldora que ya usan mapa/cartera. */
/* button.mdpd-pill-btn... y no .mdpd-consulta-check__boton a secas: hace
   falta la especificidad extra para ganarle al border/padding de
   .mdpd-pill-btn (style.css), que también son !important. */
button.mdpd-pill-btn.mdpd-consulta-check__boton {
	border-color: #6b8592 !important;
	font-size: 0.7rem;
	padding: 0.3em 0.5em !important;
}

.mdpd-consulta-check label {
	align-items: center;
	cursor: pointer;
	display: flex;
	margin: 0;
}

.mdpd-consulta-check label > span {
	align-items: center;
	display: inline-flex;
	gap: 0.4em;
}

.mdpd-consulta-check__icon {
	color: #6b8592;
	font-size: 1.6em;
}

.mdpd-consulta-check input[type="checkbox"] {
	margin: 0;
}

/* En mobile «Consultar» y la casilla de multiconsulta comparten línea (el
   salto que los separa en desktop no hace falta acá) pero siguen siendo el
   pie de la tarjeta, no un dato más: van a la derecha, igual que en desktop. */
@media (max-width: 549px) {
	.mdpd-consulta-check-col .col-inner {
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		padding-top: 0.3em;
	}

	.mdpd-consulta-check-col {
		margin-top: 0.5em !important;
	}
}

/* Panel de consulta múltiple, arriba del listado */

/* Mismo marco que `.mdpd-caja` (style.css), que lo reusan la ficha y los datos
   del anunciante. */
.mdpd-consulta-panel {
	background: #fff;
	border: 2px solid var(--mdpd-caja-borde, #f2f2f2);
	border-radius: var(--mdpd-caja-radio, 0.75rem);
	margin-bottom: 1.25rem;
	padding: var(--mdpd-caja-padding, 1em 1.25em);
}

.mdpd-consulta-panel__head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	justify-content: space-between;
}

.mdpd-consulta-panel__title {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0;
}

.mdpd-consulta-panel__toggle,
.mdpd-consulta__submit {
	align-items: center;
	display: inline-flex;
	gap: 0.5em;
}

/* El toggle vive afuera del form, así que no le llega el radio redondeado que
   `.form-flat` le da al botón de enviar: las dos CTA tienen que verse iguales. */
.mdpd-consulta-panel__toggle {
	border-radius: 99em;
}

/* La regla de arriba le gana al display:none del atributo hidden. */
.mdpd-consulta-panel__toggle[hidden] {
	display: none;
}

/* Despliegue animado sin alto fijo: la fila del grid pasa de 0fr a 1fr. */
.mdpd-consulta-panel__body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.28s ease, visibility 0s linear 0.28s;
	visibility: hidden;
}

.mdpd-consulta-panel.is-open .mdpd-consulta-panel__body {
	grid-template-rows: 1fr;
	transition: grid-template-rows 0.28s ease, visibility 0s;
	visibility: visible;
}

.mdpd-consulta-panel__body-inner {
	min-height: 0;
	overflow: hidden;
}

/* La separación con el encabezado va como margen adentro del contenedor que
   recorta, y no como padding: el padding se ve igual con la fila en 0fr y deja
   la barra con aire de más cuando el formulario está plegado. */
.mdpd-consulta--panel .mdpd-consulta__flash {
	margin-top: 1em;
}

.mdpd-consulta__seleccion {
	margin-bottom: 1em;
}

.mdpd-consulta__seleccion-head {
	align-items: baseline;
	display: flex;
	gap: 0.75em;
	justify-content: space-between;
	margin: 0 0 0.35em;
}

.mdpd-consulta__count {
	font-size: 0.85em;
	font-weight: 600;
}

.mdpd-consulta__select-all {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: inherit !important;
	cursor: pointer;
	font-size: 0.85em;
	line-height: 1 !important;
	min-height: 0 !important;
	padding: 0 !important;
	text-decoration: underline;
}

.mdpd-consulta__select-all[hidden] {
	display: none;
}

/* Diálogo

   Nivel 1 de la escala de z-index del portal (style.css, :root): plano, sin
   "top layer", así Flatpickr (nivel 2) y Tooltipster (nivel 3) se dibujan
   arriba con un z-index de toda la vida. Ver assets/mdpd-modal.js. */
.mdpd-consulta-dialog {
	display: none;
	align-items: center;
	background: #00000073;
	inset: 0;
	justify-content: center;
	overflow: auto;
	overscroll-behavior: contain;
	padding: 1rem;
	position: fixed;
	z-index: var(--mdpd-z-dialog);
}

.mdpd-consulta-dialog.mdpd-modal--open {
	display: flex;
}

.mdpd-consulta-dialog__panel {
	background: #fff;
	border-radius: 0.75rem;
	box-shadow: 0 1rem 3rem #00000040;
	max-width: 28rem;
	padding: 1.5em;
	position: relative;
	width: 100%;
}

.mdpd-consulta-dialog__close {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: inherit !important;
	cursor: pointer;
	font-size: 1.5rem;
	line-height: 1 !important;
	min-height: 0 !important;
	padding: 0.2em !important;
	position: absolute;
	right: 0.5em;
	top: 0.4em;
}

/* Pie: a quién le llega la consulta. Lo clona consulta.js de la tarjeta que
   abrió el diálogo, así que arranca vacío y oculto. */
.mdpd-consulta-dialog__pie {
	border-top: 1px solid var(--mdpd-caja-borde, #f2f2f2);
	font-size: 0.95rem;
	margin-top: 1em;
	padding-top: 1em;
}

.mdpd-consulta-dialog__pie[hidden] {
	display: none;
}

.mdpd-consulta-dialog__pie .mdpd-inmo-firma {
	margin-bottom: 0;
}

/* Formulario en la barra lateral de la ficha */

.mdpd-consulta--ficha .mdpd-consulta__title {
	margin-top: 0;
}

/* En el panel hay ancho de sobra: datos a la izquierda, mensaje a la derecha. */
@media (min-width: 850px) {
	.mdpd-consulta--panel .mdpd-consulta__grid {
		display: grid;
		gap: 0 1.5em;
		grid-template-columns: 1fr 1fr;
	}

	.mdpd-consulta--panel .mdpd-consulta__col--mensaje {
		display: flex;
		flex-direction: column;
	}

	.mdpd-consulta--panel .mdpd-consulta__field--mensaje,
	.mdpd-consulta--panel .mdpd-consulta__field--mensaje .mdpd-consulta__control {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
	}

	.mdpd-consulta--panel .mdpd-consulta__field--mensaje textarea {
		flex: 1 1 auto;
		min-height: 6em;
		resize: vertical;
	}
}