/* Márgenes del listado de propiedades en móvil.
   Afecta a Buscador de hogares, vista de mapa y resultados de búsqueda.

   EL PROBLEMA REAL (medido en el navegador, no supuesto):
   El JS del plugin (`ajax-entities.js`) tiene un modo "a todo ancho": mide lo
   que el bloque dista del borde izquierdo y le pone ese valor en negativo
   COMO ESTILO EN LÍNEA, para pegarlo al borde.

       wrapper.css("margin-left", 0);
       var b = wrapper[0].getBoundingClientRect().left;
       wrapper.css("margin-left", -b);

   Pero solo toca la izquierda: no ensancha el bloque ni corrige la derecha.
   Resultado medido en un móvil de 390 px: contenido a 19 px por la izquierda
   y a 79 px por la derecha. Descuadrado, y pegado al borde por un lado.

   Al ser estilo EN LÍNEA, ninguna hoja de estilos normal puede ganarle:
   hace falta !important, que sí tiene prioridad sobre un inline sin !important.
   Y aguanta aunque el JS lo recalcule al girar el móvil.

   En escritorio no se toca nada: ahí el modo a todo ancho hace su trabajo. */

@media (max-width: 782px) {

	/* PROBADO Y DESCARTADO: tirar -10px de cada lado para bajar el margen
	   de 30 a 20 px. Medido en el navegador: provoca 41 px de desbordamiento
	   horizontal y deja 65 elementos fuera de pantalla, porque el bloque pasa
	   a ser más ancho que el contenedor. No repetirlo.
	   Margen 0 con max-width:100% deja 30 px simétricos y cero desbordamiento. */
	.es-properties.es-properties--hfm--full-width,
	.es-properties {
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: 100%;
	}

	.es-properties__search,
	.es-properties__list,
	.es-properties__content {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* Mismo patrón, otro sitio: la fila de datos de la cabecera de la ficha
   (`.es-listing__meta`) lleva `margin: 0 -10px` y su padre no tiene ese
   relleno, así que en móvil se sale 10 px por la derecha y provoca scroll
   horizontal en toda la página. Se neutraliza igual que el listado. */
@media (max-width: 782px) {
	.es-listing__meta {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* ---------------------------------------------------------------
   ESCRITORIO: quitar la barra de scroll horizontal de 15 px.

   Medido: el plugin pone `width: 100vw` al listado en modo a todo ancho.
   `100vw` INCLUYE la barra de scroll, así que el bloque mide 1280 px en una
   ventana cuyo ancho útil es 1265. Sobran exactamente los 15 px de la barra.
   Es una trampa conocida de esa unidad, no un fallo de cálculo del plugin.

   No basta con `max-width`: el JS también tira del bloque con un
   `margin-left` negativo, así que limitando solo el ancho quedaría descuadrado
   hacia la izquierda. Hay que anular las dos cosas.

   CONSECUENCIA VISIBLE: el listado deja de ir de borde a borde en escritorio y
   pasa a alinearse con el resto de la página, como ya hacía en móvil.
   Para recuperar el sangrado completo, borrar este bloque.
   --------------------------------------------------------------- */

@media (min-width: 783px) {
	.es-properties.es-properties--hfm--full-width,
	.es-properties {
		width: auto !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* Etiquetas de las tarjetas (p. ej. «Opción de alquiler: 800 €/mes»): Estatik las corta a 180 px
   con puntos suspensivos y en la vista de lista se leía «Opción de alquiler: 8…» (Alex, 2026-10-01).
   Se dejan crecer hasta el ancho de su columna y, si no caben, pasan a dos líneas. */
.es-listing .es-badge {
	max-width: 100% !important;
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: clip !important;
}
/* En la vista de lista la columna del precio mide lo que su contenido: allí, en una sola línea. */
.es-listing__content__right .es-badge {
	white-space: nowrap !important;
	max-width: none !important;
}