/*
 * ERA Max Theme — Disposición de recolocación del buscador ERA Portal.
 *
 * ÁMBITO ESTRICTO (autorizado sólo para esto):
 *  - ÚNICAMENTE disposición: posicionamiento, superposición (flotante), grid,
 *    tamaños, deslizamiento del panel y z-index.
 *  - NO define colores, tipografías ni bordes de marca. Cuando necesita una
 *    superficie de fondo o un borde reutiliza los TOKENS DEL PROPIO TEMA
 *    (--era-white, --era-border, --era-ink), de modo que no se altera la
 *    identidad visual ni la paleta.
 *  - Los selectores llevan mayor especificidad que el CSS funcional del plugin
 *    (era-portal.css) para imponerse al orden de carga sin usar !important.
 *  - El conmutador Listado/Mapa del portal se marca con las clases de botón del
 *    tema (`.btn` / `.btn-outline`, style.css §7): su aspecto es el del tema y
 *    aquí sólo se coloca, junto a «Filtros».
 *
 * @package ERA_Max_Theme
 */

/* ---------------------------------------------------------------------------
 * 1. Escenario: mapa a pantalla completa como fondo de la búsqueda
 * ------------------------------------------------------------------------ */

.era-portal--with-map .era-portal__map-stage {
	position: relative;
	width: 100%;
}

/* El mapa ocupa el alto de la ventana descontando la cabecera del tema. */
.era-portal--with-map .era-portal__map-stage .era-portal-map__canvas {
	height: calc(100vh - var(--era-header-height, 4rem));
	min-height: 480px;
}

/*
 * UNA SOLA BARRA DE DESPLAZAMIENTO: la de la PÁGINA.
 *
 * La columna de las fichas no se desplaza por dentro. El plugin la trae
 * limitada a 80vh con desbordamiento automático (era-portal.css) y el tema la
 * ajustaba a la altura del mapa: de ahí salían dos barras, la del listado y la
 * de la página. Aquí se libera (sin alto máximo y sin desbordamiento propio),
 * así que la columna crece con el listado y la recorre la página.
 */
.era-portal--with-map .era-portal__layout--with-map .era-portal__results-col {
	max-height: none;
	overflow-y: visible;
}

.era-portal--with-map .era-portal__layout--with-map .era-portal__map-col {
	min-width: 0;
}

/*
 * DOS COLUMNAS (≥1101px): la página es la única que se desplaza, y al hacerlo
 * no mueve ni la cabecera ni el mapa.
 *
 * - La cabecera del tema ya es «sticky» (style.css, .site-header), así que se
 *   queda arriba por sí sola.
 * - El mapa se pega justo debajo de ella. La rejilla está alineada arriba
 *   («align-items: start», era-portal.css) y se explicita con «align-self»,
 *   de modo que la columna mide lo que su contenido y puede recorrer su área
 *   de rejilla: mientras la columna de fichas pasa a su lado, el mapa se
 *   mantiene inmóvil.
 */
@media (min-width: 1101px) {
	.era-portal--with-map .era-portal__layout--with-map .era-portal__map-col {
		position: sticky;
		top: var(--era-header-height, 4rem);
		align-self: start;
	}

	/*
	 * El relleno vertical del tema (2.5rem arriba y abajo, ver style.css) se
	 * absorbe en esta vista para que el conjunto mida justo la ventana: arriba
	 * dejaría el mapa por debajo de la cabecera (arrancaría con un salto de
	 * 40 px) y abajo añadía una franja de desplazamiento de 40 px incluso sin
	 * listado. El respiro del final se recupera dentro de la rejilla, en la
	 * columna de fichas, donde no suma altura cuando el listado es más corto
	 * que el mapa.
	 */
	.site-main:has(.era-portal--with-map) {
		padding-top: 0;
		padding-bottom: 0;
	}

	.era-portal--with-map .era-portal__layout--with-map .era-portal__results-col {
		/*
		 * Respiro SUPERIOR de la columna de fichas: como aquí arriba se anula
		 * el relleno del «site-main», la primera fila de fichas quedaba pegada
		 * al borde inferior de la cabecera (0 px de aire). Se recupera dentro
		 * de la columna —igual que el respiro del final— para que el mapa
		 * siga arrancando a ras de la cabecera sin el salto de 40 px.
		 */
		padding-top: 1rem;
		padding-bottom: 2.5rem;
	}

	/* En ventanas bajas el lienzo cede altura: con el mínimo de 480 px la
	   página desbordaba por debajo de la ventana. */
	.era-portal--with-map .era-portal__map-stage .era-portal-map__canvas {
		min-height: min(480px, calc(100vh - var(--era-header-height, 4rem)));
	}
}

/*
 * APILADO (≤1100px): el mapa va encima y el listado debajo, así que la página
 * fluye con normalidad y su barra es la única de la vista.
 *
 * Aquí sí hace falta recortar el eje horizontal: el cajón de filtros cerrado
 * sale de su columna por la derecha (translateX 100%) y, como el mapa ocupa el
 * ancho completo, ese saliente engordaba el documento con el ancho entero del
 * cajón y aparecía una barra horizontal que permitía arrastrar la página hacia
 * un vacío en blanco. «clip» recorta el saliente sin crear contenedor de
 * desplazamiento (no toca el eje vertical) y el cajón abierto queda dentro. En
 * dos columnas no se necesita: la columna de fichas (34rem) tapa ese saliente,
 * y así el «sticky» del mapa queda libre de recortes.
 */
@media (max-width: 1100px) {
	.era-portal--with-map {
		overflow-x: clip;
	}

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


/*
 * El formulario de filtros se convierte en capa de superposición sobre el
 * mapa: no ocupa espacio (inset 0) y deja pasar los clics al mapa; sólo sus
 * hijos (barra, panel y contador) reactivan la interacción con pointer-events.
 *
 * z-index por encima de los controles de Leaflet (Leaflet usa 1000): si no,
 * el botón «Buscar en esta zona» del mapa quedaría por encima del panel de
 * filtros y de la lista de sugerencias.
 */
.era-portal--with-map .era-portal-filters {
	position: absolute;
	inset: 0;
	z-index: 1100;
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * 2. Barra de búsqueda flotante (arriba a la izquierda)
 * ------------------------------------------------------------------------ */

.era-portal--with-map .era-portal-searchbar {
	position: absolute;
	top: 1rem;
	left: 1rem;
	/*
	 * SIN «z-index» PROPIO. Dentro de esta capa la barra sólo compite con el
	 * panel (650) y el velo (645), que deben seguir por encima; frente al mapa y
	 * a sus controles (Leaflet usa 1000) quien decide es el «z-index» de la capa
	 * (1100, ver arriba) y frente a la cabecera del tema (100), la capa también.
	 * La barra no necesita nada propio: en la vista apilada se pega debajo de la
	 * cabecera (§6.1) y nunca llega a pintarse sobre ella.
	 */
	z-index: auto;
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 0.5rem;
	/* Ancho declarado (no sólo máximo): el campo tiene que mostrar completo su
	   texto de ayuda, como la barra de la referencia. Son 38rem porque la barra
	   aloja también los cuatro botones en un solo grupo —«Buscar», «Filtros» y
	   el conmutador Listado/Mapa, ver el plugin, §Buscador— y reserva 12rem al
	   control «Buscar en esta zona», anclado en la esquina superior derecha del
	   lienzo: sin esa reserva, en los anchos intermedios (≈1100–1370 px) la
	   barra se le echaba encima y tapaba el botón. El suelo de 20rem evita que
	   la reserva deje la barra inservible en pantallas pequeñas (allí la barra
	   ya se parte en dos líneas). */
	/*
	 * La barra NO tiene caja propia: el recuadro blanco es del CAMPO (__field),
	 * que es la única pieza que debe leerse como un campo de búsqueda. Los
	 * cuatro botones van sobre lo que haya detrás —el mapa o la página—.
	 */
	width: min(38rem, max(20rem, calc(100% - 12rem)));
	pointer-events: auto;
}

/* El campo de ubicación se estira y el grupo de botones se mantiene compacto
   («Buscar», «Filtros» y el conmutador Listado/Mapa viajan juntos, ver el
   plugin, §Buscador). El mínimo del campo (18rem) reserva sitio al buscador:
   cuando la barra no da para el campo y el grupo, bajan los CUATRO botones a la
   línea siguiente —en una sola fila— en lugar de partirse dos arriba y dos
   abajo, y sin comerse el texto de ayuda del campo.
   El recuadro blanco es SUYO, así que el relleno lateral es el que separa el
   texto y las fichas del borde (el campo de texto no lleva relleno lateral
   propio, ver abajo, para que todo empiece en la misma vertical). */
.era-portal--with-map .era-portal-searchbar__field {
	display: flex;
	align-items: stretch;
	flex: 1 1 auto;
	min-width: 18rem;
	padding: 0 0.85rem;
	background: var(--era-white);
	border: 1px solid var(--era-border);
}

/*
 * Conmutador Listado/Mapa: los dos botones del tema (`.btn` relleno para la
 * vista activa y `.btn-outline` para la otra, ver theme/style.css §7) viajan en
 * el grupo de botones de la barra de búsqueda —`.era-portal-searchbar__actions`,
 * con «Buscar» y «Filtros»—, así que comparten línea con ellos y bajan los
 * cuatro juntos cuando no caben (no se estiran como el campo). Fuera de la barra
 * —la barra de estado de [era_portal_mapa]— se leen igual, en fila y con el
 * mismo hueco.
 */
.era-portal .era-portal-status__view {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.5rem;
}

/*
 * El botón NO activo del conmutador es `.btn-outline`, que en el tema va con el
 * fondo transparente (theme/style.css §7) porque su sitio natural —sobre el
 * hero y sobre la página— no necesita más. Dentro del portal ya no: la barra de
 * búsqueda no tiene recuadro propio (ver §2 y §8) y el conmutador puede quedar
 * sobre el mapa, así que el botón perfilado deja ver las tarjetas o el mapa a su
 * través. Aquí se le devuelve el blanco; el activo va relleno y no cambia.
 * El fondo del ratón y del pulsado se reafirman para conservar la respuesta del
 * tema, que si no perdería frente al blanco (misma especificidad, este fichero
 * va después).
 */
.era-portal .era-portal-status__view .btn-outline {
	background-color: var(--era-white);
}

.era-portal .era-portal-status__view .btn-outline:hover,
.era-portal .era-portal-status__view .btn-outline:active {
	background-color: var(--era-primary-tint);
}

.era-portal--with-map .era-portal-searchbar__field input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	/*El relleno lateral lo lleva el campo (arriba): así el texto y las fichas de
	   ubicación arrancan en la misma vertical y el recuadro blanco no se estrecha
	   por dentro.*/
	padding-left: 0;
	padding-right: 0;
}

.era-portal--with-map .era-portal-searchbar__panel-toggle,
.era-portal--with-map .era-portal-searchbar__submit {
	flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
 * 3. Contador de resultados: cabecera de la columna de fichas (vista de mapa)
 *
 * En la vista de mapa el contador vive DENTRO de la columna de resultados (el
 * contenedor de las fichas). Antes flotaba sobre el mapa, bajo la barra: ahí
 * competía con los controles del propio mapa («Buscar en esta zona», anclado en
 * la esquina superior derecha), que dejaban menos ancho libre del que ocupa el
 * contador. En la columna tiene el ancho de las fichas, se lee en el orden
 * natural de la página (contador → filtros activos → inmuebles) y deja libre el
 * mapa. En la vista de listado el contador sube a la línea del buscador (§8).
 * El conmutador Listado/Mapa ya no va aquí: es un botón del tema dentro del
 * grupo de botones de la barra de búsqueda, con «Buscar» y «Filtros» (§2).
 * Sólo disposición; ni colores ni tipografías.
 * ------------------------------------------------------------------------ */

.era-portal--buscador .era-portal__results-col .era-portal-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin-bottom: 1rem;
}

/* El número de filtros activos va separado del texto del botón («Filtros 1»). */
.era-portal--buscador .era-portal-searchbar__count {
	margin-left: 0.35rem;
}

/* ---------------------------------------------------------------------------
 * 4. Panel lateral derecho desplegable
 * ------------------------------------------------------------------------ */

.era-portal--with-map .era-portal-panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 650;
	width: min(24rem, 100%);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	pointer-events: auto;
	background: var(--era-white);
	border-left: 1px solid var(--era-border);
}

.era-portal--with-map .era-portal-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.era-portal--with-map .era-portal-panel__body {
	padding: 1rem;
}

/* Los grupos de filtros se apilan con separación legible en el panel. */
.era-portal--with-map .era-portal-panel__body fieldset {
	margin: 0 0 1rem;
}

.era-portal--with-map .era-portal-panel__body .era-portal-filters__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

/*
 * Cajón deslizante: nace cerrado en cuanto hay JavaScript. La marca
 * `html.era-portal-js` la pone el plugin en la cabecera (antes del primer
 * pintado) y `is-enhanced` cuando el JS ya ha tomado el mando; con cualquiera
 * de las dos vale. Sin ninguna de ellas —sin JavaScript— el panel vive en el
 * flujo y se ve, que es como se aplican los filtros sin JS.
 *
 * Las dos marcas juntas son lo que evita el parpadeo: con sólo `is-enhanced`,
 * el servidor pintaba la columna visible y el guion del pie la escondía al
 * llegar, así que la columna de filtros aparecía y se ocultaba de golpe en cada
 * carga (y en cada envío del formulario).
 */
.era-portal--with-map .era-portal-panel.is-enhanced,
html.era-portal-js .era-portal--with-map .era-portal-panel {
	transform: translateX(100%);
	transition: transform 0.25s ease, visibility 0s linear 0.25s;
	/*
	 * Cerrado, el cajón sale de la columna del mapa... y aterriza sobre la
	 * columna de resultados, que está justo a su derecha. Ocultarlo por
	 * completo es lo que impide que un panel cerrado tape el listado.
	 */
	visibility: hidden;
}

.era-portal--with-map .era-portal-panel.is-enhanced.is-open,
html.era-portal-js .era-portal--with-map .era-portal-panel.is-open {
	transform: translateX(0);
	transition: transform 0.25s ease, visibility 0s linear 0s;
	visibility: visible;
}

/* ---------------------------------------------------------------------------
 * 5. Capa de cierre (pulsar fuera cierra el panel)
 * ------------------------------------------------------------------------ */

.era-portal--with-map .era-portal-panel-backdrop {
	position: absolute;
	inset: 0;
	z-index: 645;
	pointer-events: auto;
	background: var(--era-ink);
	opacity: 0.35;
}

.era-portal--with-map .era-portal-panel-backdrop[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------------
 * 6. Adaptación a pantallas estrechas
 * ------------------------------------------------------------------------ */

@media (max-width: 900px) {
	.era-portal--with-map .era-portal-panel {
		width: 100%;
	}

	.era-portal--with-map .era-portal-searchbar {
		max-width: calc(100% - 2rem);
	}
}

/* ---------------------------------------------------------------------------
 * 6.1 Apilado (≤1100px) con cabecera «sticky» (≥769px): la barra se pega
 *     también justo debajo de la cabecera.
 *
 * Aquí el mapa va arriba y el listado debajo, así que la página se desplaza con
 * normalidad y la barra —que flota sobre el lienzo, dentro de la capa de filtros
 * (z-index 1100, por encima de los controles de Leaflet)— CRUZABA la cabecera al
 * desplazar y se pintaba sobre ella (su «z-index» no lo decide ella: manda la
 * capa, que tiene que ganar al mapa). Con el «sticky» la barra se queda pegada
 * al borde inferior de la cabecera mientras el mapa está a la vista: como ya no
 * llega a solaparla, no hay nada que decidir en el orden de pintado.
 *
 * El recorrido lo da la propia capa (mide lo que el lienzo) y el hueco de 1rem
 * de arriba y de la izquierda vuelve a darlo el margen de la barra: en «sticky»
 * los desplazamientos «top/left» se miden contra la ventana, no contra la capa
 * como hacía el «absolute».
 *
 * Por debajo de 769 px la cabecera no es «sticky» (style.css §13) y la barra se
 * desplaza con la página, como siempre.
 * ------------------------------------------------------------------------ */

@media (min-width: 769px) and (max-width: 1100px) {
	.era-portal--with-map .era-portal-searchbar {
		position: sticky;
		top: calc(var(--era-header-height, 4rem) + 1rem);
		left: auto;
		z-index: auto;
		margin: 1rem;
	}
}

/* ---------------------------------------------------------------------------
 * 7. Vista de LISTADO: barra pegada debajo de la cabecera (§7.1) y panel
 *    lateral desplegable (el mismo comportamiento que en la vista de mapa).
 *    Sólo disposición.
 * ------------------------------------------------------------------------ */

/*
 * La barra NO se coloca aquí: ni «position», ni «top», ni «z-index» propios. El
 * «sticky» que la pega debajo de la cabecera vive en §7.1 y la fila que comparte
 * con el contador en §8: el recorrido del «sticky» depende de dónde esté la
 * barra en la estructura, así que las dos cosas van juntas allí (ver §7.1).
 */
.era-portal--buscador:not(.era-portal--with-map) .era-portal-searchbar {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 0.5rem;
	/* Igual que en el mapa: 38rem para el campo y el grupo de botones
	   («Buscar», «Filtros» y el conmutador Listado/Mapa), que bajan juntos a la
	   segunda línea cuando no caben a su lado.
	   Sin caja propia: el recuadro blanco es del campo (__field), igual que en
	   el mapa, y los cuatro botones van sobre el fondo de la página. */
	width: min(38rem, 100%);
}

/*
 * 7.1 BARRA PEGADA JUSTO DEBAJO DE LA CABECERA (escritorio).
 *
 * La barra queda anclada al borde inferior de la cabecera del tema —que es
 * «sticky» y mide --era-header-height— mientras se recorre el listado.
 *
 * Un «sticky» sólo puede moverse DENTRO de su bloque contenedor, así que para
 * tener recorrido el contenedor tiene que ser más alto que la barra. El
 * formulario que la envuelve mide exactamente lo mismo que ella (48 px): de ahí
 * que el «sticky» anterior (top: 0; z-index: 640) se quedara sin recorrido —la
 * barra se iba con la página, como si fuera estática— y que lo único que hiciera
 * fuera pintarse SOBRE la cabecera. Aquí se le quita la caja al formulario
 * («display: contents») y la barra pasa a ser hija de la raíz del portal, que es
 * tan alta como todo el listado: su recorrido es el propio listado.
 *
 * Sólo cuando el JS ha mejorado el panel (is-enhanced) se le quita la caja al
 * formulario: es entonces cuando el panel y el velo son «fixed» y ya no ocupan
 * sitio, así que no cambia nada más. Sin JavaScript el panel vive en el flujo,
 * dentro del formulario, y la barra se desplaza con la página.
 *
 * NO se envuelve todo en el «sticky» del FORMULARIO, que sería lo natural: un
 * elemento con «sticky» crea contexto de apilamiento, y el panel (650) y el velo
 * (645) quedarían encerrados dentro de él, por DEBAJO de la cabecera (100): el
 * cajón de filtros perdería su cabecera y su botón «Cerrar». Al sacar sólo la
 * barra del formulario, panel y velo siguen colgando de la raíz, por encima de
 * todo, como hasta ahora.
 *
 * Por debajo de 769 px la cabecera no es «sticky» (style.css §13): no habría
 * nada bajo lo que pegarse, así que la barra se desplaza con la página.
 */
@media (min-width: 769px) {
	.era-portal--buscador:not(.era-portal--with-map) .era-portal-filters:has(.era-portal-panel.is-enhanced) {
		display: contents;
	}

	.era-portal--buscador:not(.era-portal--with-map) .era-portal-searchbar {
		position: sticky;
		/* Al borde inferior de la cabecera: nunca encima de ella. */
		top: var(--era-header-height, 4rem);
		z-index: auto;
	}
}

.era-portal--buscador:not(.era-portal--with-map) .era-portal-searchbar__field {
	display: flex;
	align-items: stretch;
	flex: 1 1 auto;
	/* Mismo mínimo que en el mapa: si la barra no da para todo, «Filtros» y el
	   conmutador bajan a la línea siguiente en vez de comerse el campo. */
	min-width: 18rem;
	/* Y mismo recuadro blanco que en el mapa: el campo, no la barra. */
	padding: 0 0.85rem;
	background: var(--era-white);
	border: 1px solid var(--era-border);
}

.era-portal--buscador:not(.era-portal--with-map) .era-portal-searchbar__field input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	padding-left: 0;
	padding-right: 0;
}

/* El desplegable de sugerencias cuelga del campo y éste tiene relleno lateral
   (arriba), así que se devuelve a los bordes de la caja: la lista sigue
   midiendo lo que el recuadro blanco, de borde a borde. */
.era-portal--with-map .era-portal-searchbar__field .era-portal-searchbar__suggestions,
.era-portal--buscador:not(.era-portal--with-map) .era-portal-searchbar__field .era-portal-searchbar__suggestions {
	left: -0.85rem;
	right: -0.85rem;
}

.era-portal--buscador:not(.era-portal--with-map) .era-portal-searchbar__panel-toggle,
.era-portal--buscador:not(.era-portal--with-map) .era-portal-searchbar__submit {
	flex: 0 0 auto;
}

/* El cajón se superpone en cuanto hay JavaScript (la marca de la cabecera o
   `is-enhanced`, ver §4): sin JavaScript el panel permanece en el flujo,
   visible y usable. */
.era-portal--buscador:not(.era-portal--with-map) .era-portal-panel.is-enhanced,
html.era-portal-js .era-portal--buscador:not(.era-portal--with-map) .era-portal-panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 650;
	width: min(24rem, 100%);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	background: var(--era-white);
	border-left: 1px solid var(--era-border);
	transform: translateX(100%);
	transition: transform 0.25s ease;
}

.era-portal--buscador:not(.era-portal--with-map) .era-portal-panel.is-enhanced.is-open,
html.era-portal-js .era-portal--buscador:not(.era-portal--with-map) .era-portal-panel.is-open {
	transform: translateX(0);
}

.era-portal--buscador:not(.era-portal--with-map) .era-portal-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.era-portal--buscador:not(.era-portal--with-map) .era-portal-panel__body {
	padding: 1rem;
}

.era-portal--buscador:not(.era-portal--with-map) .era-portal-panel__body fieldset {
	margin: 0 0 1rem;
}

.era-portal--buscador:not(.era-portal--with-map) .era-portal-panel-backdrop {
	position: fixed;
	inset: 0;
	z-index: 645;
	background: var(--era-ink);
	opacity: 0.35;
}

.era-portal--buscador:not(.era-portal--with-map) .era-portal-panel-backdrop[hidden] {
	display: none;
}

/* Acciones del panel en las dos vistas. */
.era-portal--buscador .era-portal-filters__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

/*
 * Vista de listado: contador en una fila compacta (como en el mapa) y tarjetas
 * en rejilla. Apilado, el contador ocupaba cinco líneas y empujaba el resultado
 * fuera de la pantalla; a ancho completo, cada tarjeta mostraba una imagen
 * gigante. Es la misma disposición de la referencia.
 */

.era-portal--buscador:not(.era-portal--with-map) .era-portal-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
}

/*
 * Fichas del listado en rejilla con 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» salían 5 columnas en pantallas de 1552-1855 px y 7 u 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. Sigue siendo SÓLO
 * disposición: no toca colores, tipografías ni bordes del tema.
 */
.era-portal--buscador:not(.era-portal--with-map) .era-portal-results {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
}

@media (min-width: 640px) {
	.era-portal--buscador:not(.era-portal--with-map) .era-portal-results {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 944px) {
	.era-portal--buscador:not(.era-portal--with-map) .era-portal-results {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1248px) {
	.era-portal--buscador:not(.era-portal--with-map) .era-portal-results {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Se salta el tramo de cinco columnas: 12 no es divisible por 5. */
@media (min-width: 1856px) {
	.era-portal--buscador:not(.era-portal--with-map) .era-portal-results {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.era-portal--buscador:not(.era-portal--with-map) .era-portal-panel.is-enhanced {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
 * 8. Contador EN LÍNEA con el buscador y «Filtros» (listado, escritorio)
 *
 * En la vista de listado el contador («Mostrando 12 de 438 resultados») es un
 * bloque hermano de la barra, así que caía siempre en su propia fila. En
 * escritorio hay sitio de sobra y sube a la línea del buscador, a la derecha de
 * la barra —que ya lleva el botón «Filtros» y el conmutador Listado/Mapa—.
 *
 * La raíz del portal pasa a fila flexible para colocar esa línea en dos piezas
 * (barra | contador); el resto de bloques (rejilla de fichas y paginación)
 * siguen a ancho completo debajo. El contador conserva su envoltura interna, de
 * modo que los filtros activos siguen cayendo a la línea siguiente dentro de su
 * hueco. La barra ocupa los 38rem que necesita el buscador y el contador se
 * queda con lo que sobra. En la vista de mapa el contador va dentro de la
 * columna de fichas (ver §3), así que estas reglas no le afectan. Es sólo
 * disposición: ni colores ni tipografías.
 *
 * Se usa «flex» y no «rejilla» por el «sticky» de la barra (§7.1): una casilla
 * de rejilla recorta el recorrido del «sticky» a esa casilla —una fila de 48 px,
 * la altura de la barra—, mientras que el bloque contenedor de un elemento
 * flexible es el contenedor entero, que en esta vista mide todo el listado. Con
 * la misma disposición (barra a la izquierda, contador a la derecha, el resto
 * debajo y a ancho completo) el resultado medido es idéntico al de la rejilla.
 * ------------------------------------------------------------------------ */

@media (min-width: 1024px) {
	.era-portal--buscador:not(.era-portal--with-map) {
		display: flex;
		flex-wrap: wrap;
		gap: 0 1rem;
	}

	/*
	 * La barra abre la línea con el ancho que necesita el buscador. Cuando el
	 * formulario conserva su caja (sin JavaScript, ver §7.1) es él quien ocupa
	 * ese hueco y la barra lo llena; con el panel mejorado el formulario no tiene
	 * caja y esta regla no se aplica a nada.
	 */
	.era-portal--buscador:not(.era-portal--with-map) .era-portal-filters {
		flex: 0 0 38rem;
		align-self: flex-start;
	}

	/* La barra se queda con su hueco: el ancho ya no depende del 100 %
	   disponible. */
	.era-portal--buscador:not(.era-portal--with-map) .era-portal-searchbar {
		flex: 0 0 38rem;
		width: auto;
		align-self: flex-start;
	}

	.era-portal--buscador:not(.era-portal--with-map) .era-portal-status {
		flex: 1 1 12rem;
		min-width: 0;
		align-self: center;
	}

	/* Cualquier otro bloque del portal, debajo y a ancho completo. */
	.era-portal--buscador:not(.era-portal--with-map) > *:not(.era-portal-filters):not(.era-portal-status) {
		flex: 1 1 100%;
	}
}

/*
 * MAPA: la fila del buscador la ocupa la barra —el campo y el grupo con los
 * cuatro botones («Buscar», «Filtros» y el conmutador Listado/Mapa)—, así que
 * el contador, que vive dentro de la columna
 * de fichas (§3), no compite con los controles del lienzo y la esquina superior
 * derecha queda libre para «Buscar en esta zona».
 */

/* ---------------------------------------------------------------------------
 * 9. Contador centrado verticalmente en la línea del buscador
 *
 * El contador es UNA línea dentro de un contenedor flex con «align-items:
 * center», pero el párrafo que la lleva arrastra el margen inferior del tema
 * (style.css §3: «p { margin-bottom: 1rem }»). «align-items: center» centra la
 * CAJA CON MARGEN, de modo que esos 16 px de abajo empujaban el texto hacia
 * arriba: en la línea de la barra (§8) el contador quedaba 8 px —la mitad del
 * margen— por encima del centro. Se anula el margen de los párrafos del
 * contador —su caja mide ya lo mismo que el texto— y el aire entre líneas
 * (contador, filtros activos, fichas) lo siguen dando el «gap» del propio
 * contenedor y los márgenes de las fichas.
 *
 * La fila del buscador (§8) sólo existe a partir de 1024 px. Por debajo, el
 * contador es un bloque en el flujo —no una pieza centrada en la fila—, así que
 * ahí sí lleva el margen inferior que antes aportaba el párrafo: el aire antes
 * del listado queda igual. En la vista de mapa el contador vive en la columna de
 * fichas y ya lo trae de §3.
 * ------------------------------------------------------------------------ */

.era-portal .era-portal-status > p {
	margin: 0;
}

@media (max-width: 1023px) {
	.era-portal--buscador:not(.era-portal--with-map) .era-portal-status {
		margin-bottom: 1rem;
	}
}


/* ---------------------------------------------------------------------------
 * 9. Ficha emergente del mapa (popup): aspecto.
 *
 * ÚNICAMENTE aspecto de la ficha, reutilizando los TOKENS DEL TEMA (--era-white,
 * --era-primary, --era-radius-lg, --era-radius-img). La estructura y la
 * operatividad las aporta el plugin (era-portal.css). Sin pico, como la
 * referencia.
 *
 * La ficha es UN SOLO BLOQUE ROJO: la foto va insetada dentro del panel con la
 * forma de marca y el texto comparte el mismo relleno, de modo que la foto y la
 * tipografía quedan alineadas. Todo el texto va en blanco sobre el rojo de marca
 * y el cierre se ancla a la esquina superior derecha del bloque de texto.
 * ------------------------------------------------------------------------ */

.era-portal-popup-wrap .leaflet-popup-content-wrapper {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

/* La referencia no lleva pico: la ficha flota sobre el marcador. */
.era-portal-popup-wrap .leaflet-popup-tip-container {
	display: none;
}

/* Bloque único: la ficha entera es roja y la foto queda insetada. */
.era-portal-popup-wrap .era-portal-popup {
	padding: 0.9rem;
	/* Tres esquinas iguales y la inferior derecha más pronunciada (forma ERA). */
	border-radius: var(--era-radius-img, 1.25rem 1.25rem 3.75rem 1.25rem);
	background: var(--era-primary, #C8102E);
	box-sizing: border-box;
}

/* La foto, con la forma ERA, dentro del bloque: reduce su ancho al relleno del
   panel y queda alineada con el texto. Es un enlace a la ficha. */
.era-portal-popup-wrap .era-portal-popup__media {
	display: block;
	margin: 0 0 0.75rem;
	border-radius: var(--era-radius-img);
	text-decoration: none;
	color: inherit;
}

.era-portal-popup-wrap .era-portal-popup__media:hover,
.era-portal-popup-wrap .era-portal-popup__media:focus-visible {
	opacity: 0.85;
}

.era-portal-popup-wrap .era-portal-popup__media:focus-visible {
	outline: 2px solid var(--era-white, #ffffff);
	outline-offset: 2px;
}

/* El texto no tiene superficie propia: el rojo lo aporta el bloque completo. */
.era-portal-popup-wrap .era-portal-popup__body {
	position: relative; /* el cierre se ancla al bloque de texto */
	padding: 0;
	border-radius: 0;
	background: transparent;
}

.era-portal-popup-wrap .era-portal-popup__price {
	/* Reserva a la derecha para que el cierre no pise importes largos. */
	padding-right: 1.75rem;
	color: var(--era-white, #ffffff);
	font-size: 1.3rem;
	font-weight: 800;
	line-height: 1.25;
}

.era-portal-popup-wrap .era-portal-popup__title {
	margin: 0.125rem 0 0.35rem;
	color: var(--era-white, #ffffff);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
}

/* Blanco al 92 %: 5,15:1 sobre el rojo de marca (AA). El gris de apoyo del tema
   (--era-muted) daría 1,1:1 y no se leería. */
.era-portal-popup-wrap .era-portal-popup__summary {
	color: rgba(255, 255, 255, 0.92);
	font-size: 0.875rem;
}

.era-portal-popup-wrap .era-portal-popup__link {
	color: var(--era-white, #ffffff);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

/* Chevron de la referencia: decorativo, no se anuncia al lector de pantalla. */
.era-portal-popup-wrap .era-portal-popup__link::after {
	content: " \203A";
}

/* Cierre: esquina superior derecha del panel rojo. */
.era-portal-popup-wrap .era-portal-popup__close {
	position: absolute;
	top: 0.35rem;
	right: 0.35rem;
	color: var(--era-white, #ffffff);
}

.era-portal-popup-wrap .era-portal-popup__close:hover {
	color: rgba(255, 255, 255, 0.75);
}

/* El plugin pinta el anillo de foco en el rojo de marca (era-portal.css): sobre
   el panel rojo desaparecería, así que aquí se pinta en blanco. */
.era-portal-popup-wrap .era-portal-popup__close:focus-visible {
	outline-color: var(--era-white, #ffffff);
}

/* El precio es un enlace a la ficha. */
.era-portal-popup-wrap .era-portal-popup__price-link {
	color: inherit;
	text-decoration: none;
}

.era-portal-popup-wrap .era-portal-popup__price-link:hover,
.era-portal-popup-wrap .era-portal-popup__price-link:focus-visible {
	color: rgba(255, 255, 255, 0.75);
}

.era-portal-popup-wrap .era-portal-popup__price-link:focus-visible {
	outline: 2px solid var(--era-white, #ffffff);
	outline-offset: 2px;
}

/* «Ver ficha»: al pasar el ratón se atenúa el blanco, nunca se vuelve rojo. */
.era-portal-popup-wrap .era-portal-popup__link:hover,
.era-portal-popup-wrap .era-portal-popup__link:focus-visible {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: underline;
}