/**
 * Listado /propiedades/ — tarjetas `.tarjetaProp` (grilla de igual alto).
 *
 * Convención de unidades:
 * - font-size, width/height, padding, margin, gap, box-shadow, line-height → em/rem.
 * - Grosor de bordes → px (gusto de renderizado). El resto (incluido border-radius) → em/rem.
 * - Nada de sizing inline: los íconos se dimensionan por font-size (em) desde acá.
 */

/* Miga de pan de las landings: mismo lenguaje visual que la ficha. */
.mdpd-archive-propiedad__breadcrumbs {
	margin-bottom: 0.75rem;
	font-size: 0.9rem;
}

.mdpd-archive-propiedad__breadcrumbs .breadCrumb + .breadCrumb::before {
	content: " › ";
	color: #888;
}

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

/* Migas + orden/vista en una fila: migas a la izquierda, controles a la
   derecha. Sin breakpoint fijo — `flex-wrap` los apila solo cuando no entran
   juntos (las migas no bajan de `min-width`, los controles no encogen). */
.mdpd-archive-propiedad__crumbs-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 0.75rem;
}

.mdpd-archive-propiedad__crumbs-row .mdpd-breadcrumbs {
	flex: 1 1 auto;
	min-width: 12rem;
}

.mdpd-archive-propiedad__crumbs-row .mdpd-prop-results__toolbar-controles {
	flex-shrink: 0;
}

.listadoPropiedades.mdpd-prop-results__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
	gap: 1.25rem;
	align-items: stretch;
}

.listadoPropiedades .tarjetaProp {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid #dce4e8;
	border-radius: 0.75rem;
	overflow: hidden;
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.listadoPropiedades .tarjetaProp:hover,
.listadoPropiedades .tarjetaProp:focus-within {
	box-shadow: 0 0.5rem 1.375rem rgba(0, 0, 0, 0.12);
	transform: translateY(-0.125rem);
}

.listadoPropiedades .tarjetaProp .mdpd-tarjeta-prop__link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	color: #1a2b33;
	text-decoration: none;
}

/* --- Media (imagen + overlays) --- */
.listadoPropiedades .tarjetaProp .mdpd-tarjeta-prop__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: #e9ecef;
	overflow: hidden;
}

.listadoPropiedades .tarjetaProp .mainImagen {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.listadoPropiedades .tarjetaProp:hover .mainImagen {
	transform: scale(1.04);
}

.listadoPropiedades .tarjetaProp .mdpd-tarjeta-prop__media .estado,
.listadoPropiedades .tarjetaProp .mdpd-tarjeta-prop__media .operacion,
.listadoPropiedades .tarjetaProp .tooltip-img {
	position: absolute;
	z-index: 2;
}

.listadoPropiedades .tarjetaProp .estado {
	top: 0.6rem;
	left: 0.6rem;
	padding: 0.18rem 0.5rem;
	border-radius: 0.3rem;
	background: rgba(17, 34, 41, 0.82);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.listadoPropiedades .tarjetaProp .operacion {
	top: 0.6rem;
	right: 0.6rem;
	padding: 0.2rem 0.55rem;
	border-radius: 0.3rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #fff;
}

.listadoPropiedades .tarjetaProp .operacion.venta {
	background: #2bb583;
}

.listadoPropiedades .tarjetaProp .operacion.alquiler {
	background: #2f95bd;
}

.listadoPropiedades .tarjetaProp .tooltip-img {
	right: 0.6rem;
	bottom: 0.6rem;
	max-width: 4.25rem;
	max-height: 2.4rem;
	object-fit: contain;
	/* Color de marca (API fondoBarraTop) declarado en el propio <img>. */
	background: var(--mdpd-inmo-bg, #fff);
	border-radius: 0.3rem;
	padding: 0.18rem;
	box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.15);
}

/* --- Body --- */
.listadoPropiedades .tarjetaProp .mdpd-tarjeta-prop__body {
	display: flex;
	flex-direction: column;
	gap: 0.28rem;
	flex: 1 1 auto;
	padding: 0.85rem 0.9rem 0.75rem;
}

.listadoPropiedades .tarjetaProp .mdpd-tarjeta-prop__title {
	margin: 0;
	font-size: 1.2rem;
	font-weight: 800;
	line-height: 1.2;
	color: #10222a;
	letter-spacing: -0.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.listadoPropiedades .tarjetaProp .mdpd-tarjeta-prop__subtitle {
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.3;
	color: #6b8592;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.listadoPropiedades .tarjetaProp .descripcion {
	margin: 0.1rem 0 0;
	font-size: 0.8rem;
	line-height: 1.4;
	color: #4a5b63;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.listadoPropiedades .tarjetaProp .caracteristicas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.75rem;
	margin-top: auto;
	padding-top: 0.55rem;
}

.listadoPropiedades .tarjetaProp .caracteristica {
	display: inline-flex;
	align-items: center;
	gap: 0.28rem;
	font-size: 0.78rem;
	font-weight: 600;
	color: #2a3b43;
}

.listadoPropiedades .tarjetaProp .caracteristica .mdpd-icon {
	font-size: 1.3em;
	color: #2f95bd;
}

/* --- Contacto (barra al pie, integrada a la shape de la card) ---
   font-size raíz .75rem: los hijos usan `em`, así el footer escala parejo. */
.listadoPropiedades .tarjetaProp .contacto {
	display: flex;
	align-items: stretch;
	gap: 0;
	margin-top: auto;
	padding: 0;
	border-top: 1px solid #eef2f4;
	font-size: 0.75rem;
}

/* WhatsApp: pegado a la esquina inferior izquierda de la card. */
.listadoPropiedades .tarjetaProp .contactoWhatsApp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 4em;
	border-radius: 0 0 0 0.75rem;
	background: #25d366;
	color: #fff;
	transition: background 0.15s ease;
}

.listadoPropiedades .tarjetaProp .contactoWhatsApp:hover {
	background: #1ebe5b;
}

.listadoPropiedades .tarjetaProp .mdpd-tarjeta-prop__wsp-icon {
	font-size: 1.85em;
}

/* Toggle de "consulta múltiple": centrado en el espacio libre. */
.listadoPropiedades .tarjetaProp .seleccioneCheckAreaInmu {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.listadoPropiedades .tarjetaProp .seleccioneCheckAreaInmu label,
.listadoPropiedades .tarjetaProp .seleccioneCheckAreaInmu label span {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin: 0;
}

.listadoPropiedades .tarjetaProp .seleccioneCheckAreaInmu label {
	cursor: pointer;
}

.listadoPropiedades .tarjetaProp .mdpd-tarjeta-prop__select-icon {
	font-size: 1.6em;
	color: #6b8592;
}

/* Contactar: pegado a la esquina inferior derecha, fondo primario.
   !important puntual para vencer los defaults de Flatsome en <button>
   (margin, border-radius, line-height). La opacidad de deshabilitado la
   maneja Flatsome (button:disabled → .6); no la forzamos acá. */
.listadoPropiedades .tarjetaProp .contactar {
	flex: 0 0 auto;
	border: 0;
	background: var(--primary-color, #465f70);
	color: #fff;
	border-radius: 0 0 0.75rem 0 !important;
	padding: 0.9em 1.6em;
	font-weight: 700;
	line-height: 1em !important;
	margin: 0 !important;
	cursor: not-allowed;
	transition: filter 0.15s ease;
}

.listadoPropiedades .tarjetaProp .contactar:not(:disabled) {
	cursor: pointer;
}

.listadoPropiedades .tarjetaProp .contactar:not(:disabled):hover {
	filter: brightness(1.1);
}

/* Footer legacy oculto (la descripción ya vive en el body). */
.listadoPropiedades .tarjetaProp .mdpd-tarjeta-prop__desc-footer {
	display: none;
}

/* --- Resumen / orden / vacíos / paginación --- */
.mdpd-prop-results__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
}

.mdpd-prop-results__summary {
	font-size: 0.9rem;
	font-weight: 500;
	font-style: italic;
	opacity: .5;
}

.mdpd-prop-results__toolbar-controles {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.mdpd-prop-results__orden {
	flex-shrink: 0;
}

/* Misma altura y el mismo border que las breadcrumbs de al lado (#0001, 1em de
   radio): eran tres alturas y tres bordes distintos en la misma fila —acá pisa
   el `min-height:3rem`/`border-radius:0.625rem` de base, pensado para el
   buscador, que en la barra de resultados queda grande de más. */
.mdpd-prop-results__orden .mdpd-prop-search__control {
	min-width: 11rem;
	min-height: 2.35rem;
	padding: 0.4rem 2rem 0.4rem 0.75rem;
	border: 1px solid #0001;
	border-radius: 1em;
}

/* --- Selector de vista (grilla / lista) --- */
.mdpd-prop-results__vista {
	display: inline-flex;
	flex-shrink: 0;
	border: 1px solid #0001;
	border-radius: 99px;
	overflow: hidden;
}

.mdpd-prop-results__vista-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	min-height: initial !important;
	border: 0;
	background: #fff;
	color: #6b8592;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.mdpd-prop-results__vista-btn + .mdpd-prop-results__vista-btn {
	border-left: 1px solid #dce4e8;
}

.mdpd-prop-results__vista-btn:hover {
	background: #f3f6f7;
}

.mdpd-prop-results__vista-btn.is-active {
	background: var(--primary-color, #465f70);
	color: #fff;
}

.mdpd-prop-results__vista-btn .mdpd-icon {
	font-size: 1.15rem;
}

.mdpd-prop-results__vista,
.mdpd-prop-results__toolbar-controles,
.mdpd-archive-propiedad__crumbs-row {
	align-items: flex-start;
}

/* --- Precio + dirección en la misma línea (grilla: apilados; lista: al lado) --- */
.mdpd-tarjeta-prop__precio-linea {
	display: contents;
}

/* --- Logo dentro del pie de contacto: solo existe visualmente en vista lista;
   en grilla el logo real sigue siendo el que va superpuesto a la foto. El link
   que lo envuelve (misma ficha que el resto de la tarjeta, para que el logo
   también sea clickeable como en grilla) es `display: contents` en vista
   lista: no agrega caja propia, así el `<img>` sigue siendo el flex item que
   ya se dimensiona más abajo. --- */
.mdpd-tarjeta-prop__logo-lista-link {
	display: none;
}

.mdpd-tarjeta-prop__logo-lista {
	display: none;
}

/* --- Vista lista: filas horizontales, misma tarjeta, reacomodada por CSS ---
   `.mdpd-tarjeta-prop__link` pasa a `display: contents`: dentro del <a> solo
   hay dos hijos (media, body), así que esto no toca el posicionamiento interno
   de `.media` (badges de estado/operación/logo siguen absolutos contra ella) y
   deja a `media` y `body` como celdas propias de la grilla de la tarjeta, al
   mismo nivel que `.contacto` (que ya era hijo directo, fuera del <a>). */
.listadoPropiedades.mdpd-prop-results__grid--lista {
	grid-template-columns: 1fr;
}

/*
 * Altura fija (`height`, no `min-height`): una foto vertical alta empujaba el
 * `1fr` de la fila a su propio alto intrínseco —el clásico «grid blowout», un
 * `1fr` solo implica `minmax(auto, 1fr)`, y ese `auto` no tiene piso—. El
 * `minmax(0, 1fr)` de abajo ya lo tapaba, pero con alto fijo en la card ni
 * hace falta: todas las filas miden lo mismo pase lo que pase con la imagen.
 */
.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp {
	display: grid;
	grid-template-columns: 19rem 1fr;
	grid-template-rows: minmax(0, 1fr) auto;
	grid-template-areas:
		"media body"
		"media contacto";
	height: 13rem;
}

.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp .mdpd-tarjeta-prop__link {
	display: contents;
}

.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp .mdpd-tarjeta-prop__media {
	grid-area: media;
	height: 100%;
	min-height: 0;
	aspect-ratio: auto;
	overflow: hidden;
}

.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp .mdpd-tarjeta-prop__body {
	grid-area: body;
}

.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp .mdpd-tarjeta-prop__precio-linea {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0 0.6em;
}

/* Dirección: mismo tamaño y color que el precio, sin la negrita. */
.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp .mdpd-tarjeta-prop__subtitle {
	font-size: 1.2rem;
	font-weight: 400;
	color: #10222a;
	white-space: normal;
}

.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp .caracteristicas {
	margin-top: 0.5rem;
	padding-top: 0;
}

/* El pie pasa a ser parte del content (columna derecha): la foto llega sola,
   sin interrupciones, del techo al piso de la fila. Sin el borde de arriba,
   que tenía sentido como separador de una barra a lo ancho de toda la card y
   acá ya no: el pie es chico, adentro del content. */
.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp .contacto {
	grid-area: contacto;
	margin-top: 0;
	border-top: 0;
}

/* Logo: se apaga el que va superpuesto a la foto y se prende el del pie, a la
   izquierda —el lado que da contra la foto—. Ancho libre (según la relación de
   aspecto real del logo) y limitado por alto, no al revés: un logo apaisado no
   debe achicarse a la fuerza para entrar en un cuadrado. El margen derecho en
   auto es lo que empuja WhatsApp/check/Contactar al otro extremo. */
.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp .tooltip-img {
	display: none;
}

.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp .mdpd-tarjeta-prop__logo-lista-link {
	display: contents;
}

.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp .mdpd-tarjeta-prop__logo-lista {
	display: block;
	flex: 0 0 auto;
	width: auto;
	height: 3em;
	object-fit: contain;
	margin: 0 auto 0.7em 0.7em;
	align-self: center;
	background: var(--mdpd-inmo-bg, #fff);
	border-radius: 0.3rem;
	padding: 0.7em;
	box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.12);
}

/* Check de consulta múltiple: en la card entera (grilla) se estira para
   ocupar el medio de una barra a lo ancho de toda la card; acá el pie es
   angosto y ese estirado dejaba un hueco enorme sin motivo. Ancho justo, como
   WhatsApp y Contactar. */
.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp .seleccioneCheckAreaInmu {
	flex: 0 0 auto;
	padding: 0 0.9em;
}

/* WhatsApp queda como el primero del grupo de la derecha, no en la esquina de
   la card (eso era la vista grilla): las dos puntas del lado izquierdo
   redondeadas, para que lea como una píldora propia y no a medio cortar. */
.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp .contactoWhatsApp {
	border-radius: 0.75rem 0 0 0.75rem;
}

/* Angosto: la fila horizontal no entra legible, vuelve a apilar como en grilla. */
@media (max-width: 40em) {
	/* El switch grilla/lista no va en móvil: ahí la grilla ya es de una columna
	   y no hay nada que elegir. */
	.mdpd-prop-results__vista {
		display: none;
	}

	.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp {
		display: flex;
		flex-direction: column;
		height: auto;
	}

	.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp .mdpd-tarjeta-prop__link {
		display: flex;
		flex-direction: column;
	}

	.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp .mdpd-tarjeta-prop__media {
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp .mdpd-tarjeta-prop__precio-linea {
		display: block;
	}

	.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp .mdpd-tarjeta-prop__subtitle {
		font-size: 0.82rem;
		font-weight: 400;
		color: #6b8592;
	}

	.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp .tooltip-img {
		display: block;
	}

	.listadoPropiedades.mdpd-prop-results__grid--lista .tarjetaProp .mdpd-tarjeta-prop__logo-lista {
		display: none;
	}

	.listadoPropiedades .tarjetaProp .seleccioneCheckAreaInmu {
		justify-content: flex-end;
		padding-right: 1em;
	}

	.listadoPropiedades .tarjetaProp .tooltip-img {
		max-width: 6rem;
		max-height: 4rem;
		padding: 0.5rem;
	}
}

.mdpd-prop-results__empty {
	margin: 1rem 0;
}

.mdpd-prop-results__pagination {
	margin-top: 1.75rem;
	margin-bottom: 0.5rem;
	display: flex;
	justify-content: center;
}

.mdpd-prop-results__pagination ul.page-numbers {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mdpd-prop-results__pagination ul.page-numbers li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mdpd-prop-results__pagination ul.page-numbers a.page-numbers,
.mdpd-prop-results__pagination ul.page-numbers span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.35em;
	min-height: 2.35em;
	padding: 0.4em 0.75em;
	box-sizing: border-box;
	border: 2px solid var(--mdpd-caja-borde, #f2f2f2);
	border-radius: var(--mdpd-caja-radio, 0.75rem);
	background: #fff;
	color: var(--fs-color-primary, var(--primary-color, #465f70));
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mdpd-prop-results__pagination ul.page-numbers a.page-numbers:hover,
.mdpd-prop-results__pagination ul.page-numbers a.page-numbers:focus-visible {
	border-color: var(--fs-color-secondary, var(--secondary-color, #329ac1));
	color: var(--fs-color-secondary, var(--secondary-color, #329ac1));
	outline: none;
}

.mdpd-prop-results__pagination ul.page-numbers span.page-numbers.current {
	background: var(--fs-color-primary, var(--primary-color, #465f70));
	border-color: var(--fs-color-primary, var(--primary-color, #465f70));
	color: #fff;
	font-weight: 700;
}

.mdpd-prop-results__pagination ul.page-numbers span.page-numbers.dots {
	border-color: transparent;
	background: transparent;
	min-width: 1.5em;
	color: #8a8a8a;
	font-weight: 400;
}

.mdpd-prop-results__pagination ul.page-numbers a.prev,
.mdpd-prop-results__pagination ul.page-numbers a.next {
	padding-left: 0.95em;
	padding-right: 0.95em;
}

@media (max-width: 420px) {
	.listadoPropiedades.mdpd-prop-results__grid {
		grid-template-columns: 1fr;
	}
}