/*
 * ERA Portal — hoja de estilos.
 *
 * REGLA DEL PROYECTO (respetada aquí):
 *  - La presentación VISUAL (colores, tipografías, espaciados de diseño) es
 *    responsabilidad del tema ERA Max Theme y NO se define desde el plugin.
 *  - Este archivo contiene ÚNICAMENTE los estilos funcionales imprescindibles
 *    para que el buscador y el mapa sean operativos y accesibles: altura del
 *    contenedor de Leaflet, texto sólo para lectores de pantalla y ajustes de
 *    agrupación de marcadores.
 *  - Cualquier cambio visual requiere trabajo en el tema con autorización
 *    explícita previa, según las directrices del proyecto.
 *  - Excepción documentada: la fila de propiedades similares de la ficha se
 *    compone aquí (disposición del carrusel y encaje de la ficha en la rejilla)
 *    porque su estructura la genera el portal; los colores, la tipografía y las
 *    formas salen de los tokens del tema, con respaldo.
 *  - Identidad ERA: rojo corporativo #C8102E. El azul está prohibido.
 *
 * @package ERA_Portal
 * @version 1.6.13
 */

/* ---------------------------------------------------------------------------
 * Utilidades de accesibilidad
 * ------------------------------------------------------------------------ */

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

.era-portal-filters__field > span {
	display: block;
}

/* ---------------------------------------------------------------------------
 * Distribución del buscador: mapa a la izquierda y resultados a la derecha
 * (la disposición de la referencia). SÓLO disposición (grid/flex, tamaños,
 * desbordes y scroll). No define colores, tipografías, bordes ni botones: eso
 * lo aporta el tema.
 * ------------------------------------------------------------------------ */

/* Envoltorio: una columna por defecto; dos sólo cuando hay mapa. */
.era-portal__layout {
	display: block;
}

.era-portal__layout--with-map {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
	gap: 1rem;
	align-items: start;
}

.era-portal__map-col,
.era-portal__results-col {
	min-width: 0;
}

/* Columna de resultados: apila tarjetas y paginación con separación. */
.era-portal__results-col {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Con mapa, la columna de resultados tiene scroll propio a la altura del mapa:
   el mapa no crece y la lista se desplaza por dentro, como la referencia. */
.era-portal__layout--with-map .era-portal__results-col {
	max-height: 80vh;
	overflow-y: auto;
}

/*
 * Rejilla de fichas de la vista de mapa: columnas FIJAS por tramo de ancho.
 *
 * El número de columnas tiene que dividir el total por página (12 por defecto,
 * divisible por 1, 2, 3, 4 y 6) para que NINGUNA FILA QUEDE CORTA. Con
 * «auto-fill» el ancho decidía las columnas y podían salir 5 (o 7 y 8 en
 * pantallas muy anchas): las 12 fichas de la página ya no llenaban filas
 * completas y quedaban fichas sueltas en la última fila. Aquí se fijan 1, 2, 3,
 * 4 o 6 columnas, nunca 5 ni más de 6, en los mismos tramos en los que
 * «auto-fill» cambiaba de columna, de modo que el aspecto se mantiene.
 */
.era-portal__layout--with-map .era-portal-results {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

/* Por debajo de 1100 px no caben dos columnas: mapa arriba, resultados abajo.
   A ancho completo la rejilla admite cuatro columnas de fichas. */
@media (max-width: 1100px) {
	.era-portal__layout--with-map {
		grid-template-columns: minmax(0, 1fr);
	}

	.era-portal__layout--with-map .era-portal__results-col {
		max-height: none;
		overflow-y: visible;
	}

	.era-portal__layout--with-map .era-portal-results {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* A ancho completo y pantallas medianas: tres, dos y una columna. */
@media (max-width: 991px) {
	.era-portal__layout--with-map .era-portal-results {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 751px) {
	.era-portal__layout--with-map .era-portal-results {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 511px) {
	.era-portal__layout--with-map .era-portal-results {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------------
 * Contenedor del mapa (Leaflet necesita altura explícita para renderizar)
 * ------------------------------------------------------------------------ */

.era-portal-map {
	position: relative;
	width: 100%;
	/*
	 * Aísla el contexto de apilamiento del mapa. Leaflet declara «z-index» de
	 * hasta 1000 en sus capas internas (paneles, controles, popups); si el
	 * contenedor no las encierra, esos valores compiten con la cabecera fija
	 * del tema («z-index: 100») y el mapa se pinta por encima de ella al
	 * desplazar. Con «isolation» los «z-index» de Leaflet quedan dentro del
	 * mapa y frente a la cabecera decide el contenedor (auto = 0), de modo que
	 * la cabecera vuelve a ganar sin tocar los «z-index» de Leaflet ni el
	 * tema. Es un arreglo de superposición (operativo), no de diseño.
	 */
	isolation: isolate;
}

.era-portal-map__canvas {
	width: 100%;
	height: 70vh;
	min-height: 360px;
}

/* Alternativa textual al mapa (accesibilidad). */
.era-portal-map__alternative {
	margin-top: 0.5rem;
}

/* ---------------------------------------------------------------------------
 * Marcadores y agrupación (ajustes mínimos sobre Leaflet.markercluster)
 * ------------------------------------------------------------------------ */

.era-portal-marker-cluster {
	background: rgba(200, 16, 46, 0.85);
	border-radius: 50%;
	color: #ffffff;
	font-weight: 700;
	text-align: center;
}

.era-portal-marker-cluster span {
	line-height: 40px;
}

/* ---------------------------------------------------------------------------
 * Píldoras de precio (marcadores): identifican el importe de cada punto sin
 * abrir su popup, como en la referencia. Es un ajuste funcional del mapa:
 * ocupar la caja que declara el JS (72×26) y garantizar legibilidad.
 * ------------------------------------------------------------------------ */

.era-portal-marker--price {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.35rem;
	border-radius: 4px;
	background: #C8102E;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	color: #ffffff;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

/* La punta inferior señala la coordenada exacta del inmueble. */
.era-portal-marker--price::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -4px;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #C8102E;
	transform: translateX(-50%);
}

/* ---------------------------------------------------------------------------
 * Servicios públicos cercanos (mini-mapa de la ficha).
 *
 * Es un ajuste funcional: el punto del servicio no puede confundirse con la
 * píldora de precio del inmueble, así que va como círculo pequeño con inicial
 * y borde blanco para leerse sobre cualquier tesela. La leyenda queda por
 * debajo del control de zoom y se puede apagar.
 * ------------------------------------------------------------------------ */

.era-portal-amenity {
	background: transparent;
	border: 0;
}

.era-portal-amenity__dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border: 2px solid #ffffff;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	color: #ffffff;
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1;
}

.era-portal-amenities {
	margin: 0;
	padding: 0.5rem 0.6rem;
	border-radius: 4px;
	background: #ffffff;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
	font-size: 0.8rem;
}

.era-portal-amenities__toggle {
	display: block;
	width: 100%;
	margin: 0 0 0.35rem;
	padding: 0;
	border: 0;
	background: none;
	color: #C8102E;
	font: inherit;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}

.era-portal-amenities__toggle::after {
	content: "\2212"; /* signo menos */
	float: right;
}

.era-portal-amenities.is-hidden .era-portal-amenities__toggle::after {
	content: "+";
}

.era-portal-amenities__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.era-portal-amenities.is-hidden .era-portal-amenities__list {
	display: none;
}

.era-portal-amenities__item {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 0.2rem;
	line-height: 1.3;
}

.era-portal-amenities__dot {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	color: #ffffff;
	font-size: 0.65rem;
	font-weight: 700;
}

/* Ficha emergente de un servicio: sin foto ni acciones, sólo identificación. */
.era-portal-amenity-popup__name {
	margin: 0 0 0.15rem;
	font-weight: 700;
}

.era-portal-amenity-popup__type,
.era-portal-amenity-popup__dist {
	margin: 0;
	font-size: 0.85rem;
}

.era-portal-amenity-popup__dist {
	color: #C8102E;
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * Ficha emergente del mapa (popup): estructura y operatividad.
 *
 * Sólo lo imprescindible: la foto ocupa el ancho de la ficha sin desbordar, la
 * tarjeta aprovecha todo el hueco de Leaflet (que trae márgenes propios) y el
 * cierre es un botón real, con área pulsable y foco visible. Los colores,
 * tipografías, radios y sombras los aporta el tema (identidad visual).
 * ------------------------------------------------------------------------ */

.era-portal-popup-wrap .leaflet-popup-content {
	margin: 0;
}

.era-portal-popup-wrap .leaflet-popup-content-wrapper {
	padding: 0;
	overflow: hidden;
}

.era-portal-popup__media {
	display: block;
	overflow: hidden;
}

.era-portal-popup__thumb {
	display: block;
	width: 100%;
	/* La foto sale siempre en 3:2 y object-fit recorta centrado, así que no
	   se deforma ni depende del alto disponible. */
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.era-portal-popup__body {
	padding: 0.75rem 0.9rem 0.85rem;
}

.era-portal-popup__title {
	margin: 0 0 0.25rem;
	font-weight: 700;
}

.era-portal-popup__price {
	margin: 0 0 0.25rem;
	color: #C8102E;
	font-weight: 700;
}

.era-portal-popup__summary {
	margin: 0;
}

.era-portal-popup__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

.era-portal-popup__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.75rem;
	min-height: 1.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.era-portal-popup__close:focus-visible {
	outline: 2px solid #C8102E;
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Botón «Buscar en esta zona» (control del mapa)
 * ------------------------------------------------------------------------ */

/*
 * El control de zona es un enlace dentro de un «leaflet-bar», y Leaflet fija
 * 26×26 px y su propio fondo a los enlaces de la barra (medida pensada para los
 * botones de zoom). El selector incluye `.leaflet-bar a` para imponerse: sin
 * esto, «Buscar en esta zona» se parte en varias líneas.
 */
.leaflet-bar a.era-portal-map__area-btn {
	/* Legibilidad: el fondo es claro, así que el texto debe ser oscuro. No se
	   fija un color de marca nuevo: se reutiliza el token de tinta del tema
	   (con respaldo) porque un control del mapa que hereda un texto claro del
	   tema queda invisible sobre este fondo. */
	color: var(--era-ink, #1a1a1a);
	background: #ffffff;
	border: 2px solid rgba(0, 0, 0, 0.2);
	border-radius: 4px;
	cursor: pointer;
	display: inline-block;
	font-weight: 700;
	width: auto;
	height: auto;
	line-height: 1.2;
	padding: 0.35rem 0.75rem;
	text-decoration: none;
}

.leaflet-bar a.era-portal-map__area-btn:hover,
.leaflet-bar a.era-portal-map__area-btn:focus {
	border-color: #C8102E;
	color: #C8102E;
}

/* ---------------------------------------------------------------------------
 * Rectángulo de la zona buscada («Buscar en esta zona»)
 * ------------------------------------------------------------------------ */

.era-portal-map__boundary {
	stroke: #C8102E;
	stroke-width: 2;
	stroke-dasharray: 6 4;
	fill: #C8102E;
	fill-opacity: 0.08;
}

/* ---------------------------------------------------------------------------
 * Aviso de zoom con Ctrl+rueda (la rueda sola no mueve el mapa)
 * ------------------------------------------------------------------------ */

.era-portal-map__wheel-hint {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 500;
	transform: translate(-50%, -50%);
	max-width: 88%;
	padding: 0.6rem 1rem;
	border-left: 4px solid #C8102E;
	border-radius: 4px;
	background: rgba(24, 29, 42, 0.85);
	color: #ffffff;
	font-weight: 700;
	text-align: center;
	pointer-events: none;
}

.era-portal-map__wheel-hint[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Estados de foco visibles (accesibilidad por teclado)
 * ------------------------------------------------------------------------ */

.era-portal a:focus-visible,
.era-portal button:focus-visible,
.era-portal select:focus-visible,
.era-portal input:focus-visible {
	outline: 2px solid #C8102E;
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Ficha: galería, formulario embebido y resaltado mutuo con el mapa
 * (sólo operatividad y accesibilidad; el diseño lo aporta el tema)
 * ------------------------------------------------------------------------ */

.era-portal-gallery__stage {
	position: relative;
	overflow: hidden;
}

.era-portal-gallery__main {
	display: block;
	width: 100%;
	height: auto;
	transform-origin: 0 0;
	will-change: transform;
	-webkit-user-drag: none;
	user-select: none;
}

/* Al ampliar, el escenario se vuelve la superficie de arrastre para desplazar
   la foto (ratón, dedo y lápiz). Sin JavaScript esta regla no se usa. */
.era-portal-gallery.is-zoomed .era-portal-gallery__stage {
	cursor: grab;
	touch-action: none;
}

.era-portal-gallery.is-zoomed .era-portal-gallery__stage:active {
	cursor: grabbing;
}

/* Controles de zoom (más / menos), en la esquina inferior izquierda de la foto
   —donde el tema situaba el antiguo botón «Ampliar»—, con el mismo aspecto que
   las flechas del carrusel. Los enciende el guion; sin JavaScript quedan ocultos
   (atributo hidden). Ojo: la clase del contenedor no puede ser
   `.era-portal-gallery__zoom`, que el tema conserva estilizada para el botón
   retirado del visor. */
.era-portal-gallery__zoom-controls {
	position: absolute;
	left: 0.75rem;
	bottom: 0.75rem;
	z-index: 4;
	display: flex;
	gap: 0.4rem;
}

.era-portal-gallery__zoom-controls[hidden] {
	display: none;
}

.era-portal-gallery__zoom-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: none;
	border-radius: 50%;
	color: var(--era-white, #ffffff);
	background-color: rgba(0, 0, 0, 0.45);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s;
}

.era-portal-gallery__zoom-btn:hover:not([disabled]),
.era-portal-gallery__zoom-btn:focus-visible {
	background-color: #C8102E;
	outline: none;
}

.era-portal-gallery__zoom-btn[disabled] {
	opacity: 0.4;
	cursor: default;
}

.era-portal-gallery__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
}

.era-portal-gallery__thumbs img {
	display: block;
	width: 96px;
	height: 72px;
	object-fit: cover;
}

.era-portal-gallery__thumbs [aria-current="true"] img {
	outline: 2px solid #C8102E;
	outline-offset: 2px;
}

/* Formulario del sitio maestro: ocupa el ancho disponible del contenedor. */
.era-portal-contact__iframe {
	width: 100%;
	border: 0;
}

/* ---------------------------------------------------------------------------
 * Buscador: autocompletado de ubicación, fichas de filtro y avisos
 * SÓLO operatividad y accesibilidad: posicionamiento del desplegable de
 * sugerencias, disposición en línea de las fichas, estados de error y bloqueo
 * del desplazamiento de fondo. Los colores de marca los aporta el tema.
 * ------------------------------------------------------------------------ */

.era-portal-searchbar__field {
	position: relative;
	/* El campo aloja las fichas de las ubicaciones elegidas y, debajo, el texto:
	   con «wrap» las fichas ocupan su propia línea dentro del mismo campo. */
	flex-wrap: wrap;
}

/* Fichas de las ubicaciones elegidas (el campo es un selector múltiple): dentro
   del campo, en su propia línea y con salto entre ellas. Aspecto neutro —borde
   y texto heredado— porque los colores de marca los aporta el tema. */
.era-portal-searchbar__tokens {
	display: flex;
	flex: 1 1 100%;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.era-portal-searchbar__token {
	display: inline-flex;
	max-width: 100%;
}

/* La ficha entera es el enlace de retirada: sin subrayado y con el color del
   texto del campo, para que no se lea como un enlace de contenido. */
.era-portal-searchbar__token-link,
.era-portal-searchbar__field .era-portal-searchbar__token-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	max-width: 100%;
	padding: 0.1rem 0.5rem;
	border: 1px solid rgba( 0, 0, 0, 0.2 );
	background: transparent;
	color: inherit;
	text-decoration: none;
}

.era-portal-searchbar__field .era-portal-searchbar__token-link:hover,
.era-portal-searchbar__field .era-portal-searchbar__token-link:focus {
	color: inherit;
	text-decoration: none;
}

.era-portal-searchbar__token-remove {
	flex: 0 0 auto;
	font-size: 0.9em;
	line-height: 1;
	opacity: 0.7;
}

/* Los cuatro botones de la barra viajan juntos en un mismo grupo: o caben en
   la línea del campo, o bajan los cuatro. Nunca dos arriba y dos abajo. */
.era-portal-searchbar__actions {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.5rem;
}

/* Desplegable de sugerencias: flota bajo el campo y se desplaza por sí mismo. */
.era-portal-searchbar__suggestions {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 700;
	min-width: 100%;
	max-height: 20rem;
	overflow-y: auto;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.2);
}

.era-portal-searchbar__suggestions[hidden] {
	display: none;
}

/* El tema pinta TODOS los botones del sitio en blanco (theme/style.css:
   «button, .btn, …» → var(--era-white)) y las opciones del autocompletado son
   botones: el término salía blanco sobre el fondo blanco del desplegable. En
   lugar de heredar el color del botón, cada pieza del desplegable lleva aquí su
   color propio —el término incluido, con su clase exclusiva— y con la
   especificidad suficiente para que no dependa del tema ni del orden de carga. */
.era-portal-searchbar__suggestions,
.era-portal-searchbar__suggestions .era-portal-searchbar__group,
.era-portal-searchbar__suggestions .era-portal-searchbar__empty,
.era-portal-searchbar__suggestions .era-portal-searchbar__option,
.era-portal-searchbar__suggestions .era-portal-searchbar__option:hover,
.era-portal-searchbar__suggestions .era-portal-searchbar__option:focus,
.era-portal-searchbar__suggestions .era-portal-searchbar__option:active,
.era-portal-searchbar__suggestions .era-portal-searchbar__option.is-active,
.era-portal-searchbar__suggestions .era-portal-searchbar__option-label {
	color: #3d3d3d;
}

/* Contexto y nivel de la sugerencia, en gris para no competir con el término. */
.era-portal-searchbar__suggestions .era-portal-searchbar__option-context,
.era-portal-searchbar__suggestions .era-portal-searchbar__option-type {
	color: #5b6570;
}

.era-portal-searchbar__group,
.era-portal-searchbar__empty {
	margin: 0.5rem 0.75rem 0.25rem;
}

.era-portal-searchbar__options {
	margin: 0;
	padding: 0;
	list-style: none;
}

.era-portal-searchbar__option {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 0.5rem 0.75rem;
	border: 0;
	background: transparent;
	text-align: left;
	cursor: pointer;
}

.era-portal-searchbar__option.is-active,
.era-portal-searchbar__option:hover {
	background: rgba(0, 0, 0, 0.06);
}

.era-portal-searchbar__option-context {
	font-size: 0.95em;
}

/* Nivel del término («Barcelona — provincia»), junto a la coincidencia. */
.era-portal-searchbar__option-type {
	margin-left: 0.35rem;
	font-size: 0.85em;
}

/* Punto que avisa de que hay filtros aplicados: sustituye al número, que
   contaba campos (el árbol de tipologías entero) y engañaba. Toma el color del
   texto del botón para verse sobre cualquier tema, y el atributo hidden lo
   apaga cuando no hay ningún filtro. */
.era-portal-searchbar__dot {
	display: inline-block;
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	margin-left: 0.35rem;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.9;
}

.era-portal-searchbar__dot[hidden] {
	display: none;
}

/* El contador antiguo ya no se pinta; la regla se queda por si algún tema
   guarda el marcado en caché. */
.era-portal-searchbar__count[hidden] {
	display: none;
}


/* Fichas de filtros activos y de ubicaciones: en línea y con salto de línea. */
.era-portal-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.5rem 0;
	padding: 0;
	list-style: none;
}

.era-portal-chips__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.15rem 0.5rem;
	border: 1px solid rgba(0, 0, 0, 0.2);
	text-decoration: none;
}

.era-portal-chips__remove {
	font-weight: 700;
}

/* Mensajes de validación de los rangos (mínimo/máximo). */
.era-portal-filters__error {
	display: block;
	color: #C8102E;
}

.era-portal-filters__error[hidden] {
	display: none;
}

/* Aviso sin resultados: sólo separación, la tipografía es del tema. */
.era-portal-empty-state__title {
	margin: 0 0 0.35rem;
	font-weight: 700;
}

.era-portal-empty-state__subtitle {
	margin: 0 0 0.75rem;
}

/* Mientras el panel de filtros está abierto no se desplaza el fondo. */
body.era-portal-panel-open {
	overflow: hidden;
}

/* Resaltado de la tarjeta cuando su marcador está activo en el mapa. */
.era-portal-card.is-highlighted {
	outline: 2px solid #C8102E;
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
 * Filtro por capas: árbol de casillas (era-portal 1.4.4)
 * Forma: casilla + etiqueta y, a la derecha, el chevron de despliegue; los
 * hijos van indentados. El colapso es nativo (details/summary), sin JS.
 * -------------------------------------------------------------------------- */
.era-portal-tree{border:0;margin:0;padding:0}
.era-portal-tree__type{margin:0 0 .7rem}
.era-portal-tree__head,.era-portal-tree__leaf,.era-portal-tree__children li{display:flex;align-items:flex-start;gap:.45rem;position:relative;margin:.25rem 0}
.era-portal-tree__head label,.era-portal-tree__leaf label,.era-portal-tree__children li label{cursor:pointer;flex:1 1 auto}
.era-portal-tree__count{color:#657383;font-weight:400;white-space:nowrap}
.era-portal-tree__group{position:relative}
.era-portal-tree__group>.era-portal-tree__toggle{position:absolute;top:.1rem;right:0;display:flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;cursor:pointer;list-style:none}
.era-portal-tree__group>.era-portal-tree__toggle::-webkit-details-marker{display:none}
.era-portal-tree__group>.era-portal-tree__toggle::marker{content:''}
.era-portal-tree__group>.era-portal-tree__head{padding-right:1.7rem}
.era-portal-tree__chevron{display:block;width:.5rem;height:.5rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .15s ease}
.era-portal-tree__group[open] .era-portal-tree__chevron{transform:rotate(-135deg)}
.era-portal-tree__children{list-style:none;margin:.25rem 0 .6rem;padding:0 0 0 1.4rem}
.era-portal-tree__leaf{padding-left:1.4rem}
.era-portal-tree input[type="checkbox"]:focus-visible{outline:2px solid #C8102E;outline-offset:2px}

.era-portal-tree__item{display:block}
.era-portal-tree__children li{display:block}

/* ---------------------------------------------------------------------------
 * Nube de etiquetas del filtro de tipología (despliegue progresivo).
 * Al entrar solo primarias; al marcar una, las demás se ocultan y se despliega
 * su nivel; selección múltiple; al marcar un nivel 2 se abren sus relativas.
 * ------------------------------------------------------------------------- */
.era-portal-tree{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px 10px}
.era-portal-tree__type{width:100%}
.era-portal-tree__head,.era-portal-tree__leaf{display:inline-flex;align-items:center;gap:6px;margin:0 6px 6px 0;padding:5px 12px;border:1px solid rgba(0,0,0,.14);border-radius:999px;background:#fff;line-height:1.3}
.era-portal-tree__head:hover,.era-portal-tree__leaf:hover{border-color:rgba(0,0,0,.3)}
.era-portal-tree__count{color:#8c8f94;font-variant-numeric:tabular-nums;white-space:nowrap}
.era-portal-tree__item{margin-left:10px}
.era-portal-tree__type[hidden],.era-portal-tree__group[hidden],.era-portal-tree__item[hidden],.era-portal-tree__leaf[hidden]{display:none!important}


/* Nube limpia: el cuadradito desaparece y la etiqueta entera es el chip, con el
   estado marcado en color. Se aplica sólo cuando el navegador sabe pintar el
   chip según la casilla (:has); si no, queda el cuadradito de siempre, que
   también funciona. El input sigue existiendo (sin JavaScript y con teclado). */
@supports selector(:has(*)) {
	.era-portal-tree input[type="checkbox"] {
		position: absolute;
		width: 1px;
		height: 1px;
		opacity: 0;
		margin: 0;
		pointer-events: none;
	}

	.era-portal-tree__head:has(input:checked),
	.era-portal-tree__leaf:has(input:checked) {
		background: #c8102e;
		border-color: #c8102e;
		color: #fff;
	}

	.era-portal-tree__head:has(input:checked) .era-portal-tree__count,
	.era-portal-tree__leaf:has(input:checked) .era-portal-tree__count {
		color: rgba(255, 255, 255, 0.78);
	}

	/* El foco de teclado se ve aunque la casilla no se vea. */
	.era-portal-tree input[type="checkbox"]:focus-visible + label {
		outline: 2px solid #c8102e;
		outline-offset: 2px;
		border-radius: 999px;
	}

	.era-portal-tree input[type="checkbox"]:focus-visible {
		outline: none;
	}
}

/* Encabezado del grupo comercial («Pisos, áticos, apartamentos…»): no es un
   filtro, sólo ordena la nube. */
.era-portal-tree__group-title {
	display: block;
	margin: 4px 0 6px 10px;
	color: #6b7280;
	font-size: 0.85em;
	font-weight: 600;
}

.era-portal-tree__children {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- Retorno a la búsqueda desde la ficha -------------------------------
   El enlace vive dentro de la ruta de navegación y se separa a la derecha. El
   tema define la tipografía y los colores de las migas; aquí sólo se coloca y
   se marca el foco, sin imponer el aspecto visual. */
.era-portal-breadcrumb__back {
	margin-left: auto;
	color: #c8102e;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.era-portal-breadcrumb__back::before {
	content: "\2039"; /* ‹ */
	margin-right: 0.35rem;
}

.era-portal-breadcrumb__back:hover,
.era-portal-breadcrumb__back:focus-visible {
	text-decoration: underline;
}

.era-portal-breadcrumb__back:focus-visible {
	outline: 2px solid #c8102e;
	outline-offset: 2px;
	border-radius: 4px;
}


/* ---------------------------------------------------------------------------
 * Fila de propiedades similares de la ficha (carrusel).
 *
 * DISPOSICIÓN Y COMPORTAMIENTO, no identidad: tres fichas a la vista en
 * escritorio (dos en tableta, una en teléfono), carril horizontal con ajuste
 * por ficha (scroll-snap) y flechas para avanzar. Sin JavaScript el carril se
 * desplaza igual —dedo, rueda o teclado— porque las flechas nacen ocultas y
 * sólo las enciende el guion (is-ready / is-static).
 *
 * Colores, tipografía y formas se toman de los TOKENS DEL TEMA
 * (--era-navy, --era-primary, --era-ink-light, --era-radius-img…) con su
 * respaldo, de modo que cada preset conserva su identidad.
 * ------------------------------------------------------------------------- */

.era-portal-similar__carousel {
	position: relative;
	margin-top: 0.5rem;
}

.era-portal-similar__track {
	display: flex;
	gap: 2rem;
	margin: 0;
	padding: 0 0 0.25rem;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

/* El carril no dibuja barra: se arrastra y las flechas lo gobiernan. */
.era-portal-similar__track::-webkit-scrollbar {
	display: none;
}

.era-portal-similar__track:focus-visible {
	outline: 2px solid var(--era-primary, #C8102E);
	outline-offset: 4px;
}

.era-portal-similar__item {
	flex: 0 0 calc((100% - 4rem) / 3);
	min-width: 0;
	scroll-snap-align: start;
}

/* Flechas: redondas, sobre los extremos del carril y fuera del texto. */
.era-portal-similar__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: none; /* sin guion no hay flechas: el carril se arrastra */
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin: 0;
	padding: 0;
	border: 1px solid var(--era-border, #dcdcdc);
	border-radius: 50%;
	background-color: var(--era-white, #ffffff);
	color: var(--era-navy, #0B3279);
	font-family: inherit;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
	transform: translateY(-50%);
	transition: box-shadow 0.15s ease, color 0.15s ease;
}

.era-portal-similar__nav--prev {
	left: -1.5rem;
}

.era-portal-similar__nav--next {
	right: -1.5rem;
}

/* Con guion: aparecen si hay recorrido y desaparecen si la fila cabe entera. */
.era-portal-similar__carousel.is-ready .era-portal-similar__nav {
	display: flex;
}

.era-portal-similar__carousel.is-static .era-portal-similar__nav {
	display: none;
}

/* Extremo alcanzado: la flecha queda apagada y sin acción. */
.era-portal-similar__nav[disabled] {
	opacity: 0.35;
	cursor: default;
}

.era-portal-similar__nav:not([disabled]):hover,
.era-portal-similar__nav:not([disabled]):focus-visible {
	color: var(--era-primary, #C8102E);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.era-portal-similar__nav:focus-visible {
	outline: 2px solid var(--era-primary, #C8102E);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.era-portal-similar__nav {
		transition: none;
	}
}



/* ---------------------------------------------------------------------------
 * La ficha del carrusel (referencia del propietario): foto con la forma de
 * marca, distintivo de operación sobre la foto, título con el precio, línea de
 * operación y precio, extracto de la descripción, referencia y «Leer más».
 *
 * La ficha va PLANA, sin recuadro ni sombra (el peso visual lo lleva la foto);
 * los selectores llevan la ficha por delante (`.era-portal--ficha …`) para
 * imponerse al aspecto de tarjeta del listado, que comparte clases.
 * ------------------------------------------------------------------------- */

.era-portal--ficha .era-portal-card--similar {
	height: 100%;
	overflow: visible;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
}

.era-portal--ficha .era-portal-card--similar:hover,
.era-portal--ficha .era-portal-card--similar:focus-within {
	border-color: transparent;
	box-shadow: none;
}

/* La foto recupera la forma ERA en imágenes, que la ficha del listado anula.
   El marco lleva la proporción (y no la imagen): así la caja mantiene la forma
   aunque la foto no llegue, y el cuerpo no se la come al repartir el alto. */
.era-portal--ficha .era-portal-card--similar .era-portal-card__media {
	position: relative;
	display: block;
	flex: 0 0 auto;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--era-radius-img, 1.25rem 1.25rem 3.75rem 1.25rem);
}

.era-portal--ficha .era-portal-card--similar .era-portal-card__media img,
.era-portal--ficha .era-portal-card--similar .era-portal-card__placeholder {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	border-radius: inherit;
}

/* Distintivo de operación: sobre la esquina de la foto, en el rojo de marca. */
.era-portal-card--similar .era-portal-card__badge {
	position: absolute;
	top: 1rem;
	left: 1rem;
	padding: 0.3rem 0.75rem;
	background-color: var(--era-primary, #C8102E);
	color: var(--era-white, #ffffff);
	font-family: var(--era-font-body, inherit);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-transform: uppercase;
}

.era-portal--ficha .era-portal-card--similar .era-portal-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.3rem;
	padding: 1rem 0 0;
}

.era-portal--ficha .era-portal-card--similar .era-portal-card__title {
	margin: 0;
	color: var(--era-navy, #0B3279);
	font-family: var(--era-font-heading, inherit);
	font-size: clamp(1.15rem, 0.95rem + 0.5vw, 1.4rem);
	font-weight: 700;
	line-height: 1.25;
}

.era-portal--ficha .era-portal-card--similar .era-portal-card__title a {
	color: inherit;
	text-decoration: none;
}

.era-portal--ficha .era-portal-card--similar .era-portal-card__meta {
	margin: 0;
	color: var(--era-ink-light, #5b6570);
	font-size: 1rem;
	line-height: 1.4;
}

/* Extracto: cuatro líneas y recorte, para que las fichas queden parejas. */
.era-portal--ficha .era-portal-card--similar .era-portal-card__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	margin: 0.2rem 0 0;
	overflow: hidden;
	color: var(--era-ink-light, #5b6570);
	font-size: 0.98rem;
	line-height: 1.55;
}

/* La referencia y «Leer más» se apoyan siempre en el pie de la ficha. */
.era-portal--ficha .era-portal-card--similar .era-portal-card__reference {
	margin: auto 0 0;
	padding-top: 0.6rem;
	color: var(--era-ink-light, #5b6570);
	font-size: 0.9rem;
	line-height: 1.4;
}

.era-portal--ficha .era-portal-card--similar .era-portal-card__link {
	margin: 0.35rem 0 0;
}

.era-portal--ficha .era-portal-card--similar .era-portal-card__reference + .era-portal-card__link {
	margin-top: 0.35rem;
}

.era-portal--ficha .era-portal-card--similar .era-portal-card__link a {
	color: var(--era-navy, #0B3279);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
}

.era-portal--ficha .era-portal-card--similar .era-portal-card__link a::after {
	content: " \00BB";
}

.era-portal--ficha .era-portal-card--similar .era-portal-card__link a:hover,
.era-portal--ficha .era-portal-card--similar .era-portal-card__link a:focus-visible {
	text-decoration: underline;
}

/* Sin referencia, «Leer más» ocupa el hueco que ella dejaba. */
.era-portal--ficha .era-portal-card--similar .era-portal-card__excerpt + .era-portal-card__link {
	margin-top: auto;
	padding-top: 0.6rem;
}

/* --- Tramos de ancho -------------------------------------------------- */

@media (max-width: 1279px) {
	/* Sin margen de sobra, las flechas se meten en el carril. */
	.era-portal-similar__nav--prev {
		left: 0.25rem;
	}

	.era-portal-similar__nav--next {
		right: 0.25rem;
	}
}

@media (max-width: 1023px) {
	.era-portal-similar__item {
		flex-basis: calc((100% - 2rem) / 2);
	}
}

@media (max-width: 639px) {
	.era-portal-similar__item {
		flex-basis: 82%;
	}

	.era-portal-similar__track {
		gap: 1rem;
	}
}

/* Teléfono de contacto de la ficha: se muestra sólo al pulsar «Ver teléfono». */
.era-portal-contact__phone-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.9rem;
	border: 0;
	border-radius: 999px;
	background-color: #C8102E;
	color: #ffffff;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

.era-portal-contact__phone-btn:hover,
.era-portal-contact__phone-btn:focus-visible {
	background-color: #a30d25;
	outline: none;
}

.era-portal-contact__phone-btn[hidden],
.era-portal-contact__phone-value[hidden] {
	display: none;
}

/* Cabecera del portal: la pinta el propio shortcode (logo + título de la
   entrada). Se fija arriba para acompañar al scroll, y su alto real alimenta
   `--era-header-height`, la referencia con la que la barra de búsqueda se pega
   justo debajo y con la que se mide el mapa. */
.era-portal {
	--era-header-height: 88px;
}

.era-portal-header {
	position: sticky;
	top: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 1rem;
	box-sizing: border-box;
	min-height: 88px;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 0.75rem 1.25rem;
	background-color: #C8102E;
	color: #ffffff;
}

body.admin-bar .era-portal-header {
	top: 32px;
}

/* Especificidad 0,3,0: gana a la regla de imágenes de contenido del tema
   (`.site-main figure:not(.site-branding) img`, 0,2,2) que forzaba
   `height:auto` y escalaba el logo a todo el ancho. */
.era-portal .era-portal-header .era-portal-header__logo {
	display: block;
	width: auto;
	height: 56px;
	max-width: none;
	border-radius: 0;
}

.era-portal-header__title {
	margin: 0;
	color: #ffffff;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.2;
}

/* Estado vacío del buscador: sin zona no se muestran inmuebles, sólo el aviso
   «Elige una zona para buscar» (en lista y en mapa). */
.era-portal-empty {
	margin: 2rem auto;
	max-width: 40rem;
	padding: 2rem 1.5rem;
	text-align: center;
	background-color: var(--era-surface, #f5f6f8);
	border-radius: var(--era-radius, 8px);
}

.era-portal-empty__title {
	margin: 0 0 0.5rem;
	color: var(--era-ink, #181d2a);
}

.era-portal-empty__text {
	margin: 0;
	color: var(--era-ink, #181d2a);
}

.era-portal-status__filters-link{color:inherit;text-decoration:underline;text-underline-offset:2px}
.era-portal-status__filters-link:hover{text-decoration:none}


/* Campo de ubicacion: el limite visual va en el contenedor, no en el input. */
.era-portal .era-portal-searchbar__field{background:var(--era-white,#fff);border:2px solid #C8102E;border-radius:6px;transition:box-shadow .15s ease}
.era-portal .era-portal-searchbar__field:focus-within{box-shadow:0 0 0 3px rgba(200,16,46,.15)}
.era-portal .era-portal-searchbar__field input#era-portal-searchbar-zona,
.era-portal .era-portal-searchbar__field input#era-portal-searchbar-zona:hover,
.era-portal .era-portal-searchbar__field input#era-portal-searchbar-zona:focus,
.era-portal .era-portal-searchbar__field input#era-portal-searchbar-zona:focus-visible{background:transparent;border:0;border-radius:0;box-shadow:none;outline:none}