/* ═══════════════════════════════════════════════════════════════════
   Buscador de inmuebles — barra de filtros.

   Solo la barra: el listado y su tarjeta siguen como estaban, en
   propiedades.css. Prefijo scp- propio y hoja aparte para no mezclarse
   con esos 49 KB; volver atras es quitar el <link> del controlador y
   restaurar el bloque de filtros en archive.php.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Barra de filtros ──────────────────────────────────────────────
   Antes eran dos bloques sueltos: una fila de pestanas y, debajo, una
   caja con cuatro tiles grises enormes y el buscador flotando a la
   derecha. Aqui es una sola barra, pegada arriba al hacer scroll.     */

.scp-bar {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--borde, #e5e5e5);
}

.scp-bar__inner {
	max-width: var(--max-width, 1200px);
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

/* Segmentado de operacion — la decision principal, y se nota */
.scp-seg {
	display: inline-flex;
	background: #f2f4f7;
	border-radius: 999px;
	padding: 3px;
	gap: 2px;
}

.scp-seg__btn {
	appearance: none;
	border: 0;
	background: transparent;
	font-family: 'DM Sans', sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--gris-texto, #54585e);
	padding: 7px 16px;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	transition: color .18s ease, background-color .18s ease;
}

.scp-seg__btn:hover { color: var(--negro, #333); }

.scp-seg__btn.is-active {
	background: #fff;
	color: var(--azul, #4a8fcc);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}

/* Vendidas dentro del mismo control, pero un paso atras: es el historico */
.scp-seg__sep {
	width: 1px;
	align-self: stretch;
	margin: 5px 3px;
	background: #dfe3e8;
	flex: 0 0 auto;
}

.scp-seg__btn--sold { color: #949aa3; }
.scp-seg__btn--sold.is-active { color: var(--negro, #333); }

/* ── Tipo de inmueble ──────────────────────────────────────────────
   Texto con subrayado, no pildoras. Cuando los dos grupos eran pildoras
   del mismo tamaño y peso se leian como una sola tira de botones, por
   mucho que el estado activo fuese distinto. Aqui el peso visual separa:
   la operacion es un control solido, el tipo son enlaces.             */

.scp-chips {
	display: flex;
	align-items: center;
	gap: 0;
	flex-wrap: wrap;
	min-width: 0;
}

.scp-chip {
	display: inline-block;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.4;
	color: #8a9099;
	padding: 5px 2px;
	margin-right: 20px;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	transition: color .18s ease, border-color .18s ease;
}
.scp-chip:last-child { margin-right: 0; }

.scp-chip:hover { color: var(--negro, #333); }

.scp-chip.is-active {
	color: var(--azul-dk, #1c3d5a);
	font-weight: 600;
	border-bottom-color: var(--azul, #4a8fcc);
}

/* Zona derecha: orden y buscador por referencia.
   Grupo compacto: son ajustes, no la decision principal.
   El margin-left:auto lo empuja al final; no hace falta un separador con
   flex-grow, que ademas se quedaba con todo el espacio libre. */
.scp-bar__end {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	flex: 0 0 auto;
}

.scp-sort {
	appearance: none;
	font-family: 'DM Sans', sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: var(--gris-texto, #54585e);
	background: transparent;
	border: 0;
	border-radius: 999px;
	padding: 7px 24px 7px 11px;
	cursor: pointer;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a9099' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 6px center;
}
.scp-sort:hover { color: var(--negro, #333); background-color: #f2f4f7; }
.scp-sort:focus-visible { outline: 2px solid var(--azul, #4a8fcc); outline-offset: 1px; }

/* En escritorio manda el <select>; el icono solo aparece en movil */
.scp-sortwrap { position: relative; display: inline-flex; align-items: center; }
.scp-sortwrap__ico { display: none; }

/* Buscador por referencia.

   Antes era un icono que crecia a 168 px al enfocarlo, y no funcionaba:
   el separador con flex-grow se quedaba con todo el espacio libre, asi
   que el campo nunca podia crecer —se quedaba en un muñon de 48 px— y al
   estrechar la ventana saltaba a la linea de abajo.

   Ahora es un campo de ancho fijo, siempre visible. No cambia de tamaño,
   asi que no puede descolocar nada ni partir la barra. Y se ve, que en un
   buscador tampoco esta de mas. */
.scp-find {
	position: relative;
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.scp-find form {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.scp-find__input {
	width: 152px;
	height: 34px;
	padding: 0 28px 0 32px;
	font-family: 'DM Sans', sans-serif;
	font-size: 13px;
	color: var(--negro, #333);
	background: #f2f4f7;
	border: 1px solid transparent;
	border-radius: 999px;
	transition: background-color .2s ease, border-color .2s ease;
}

.scp-find__input::placeholder { color: #9aa0a8; }
.scp-find__input:hover { background: #eaeef3; }

.scp-find__input:focus {
	background: #fff;
	border-color: var(--azul, #4a8fcc);
	outline: none;
}

/* Centrados contra la caja de .scp-find, no contra el flujo: en movil el
   input pasa a absolute al desplegarse y el contenedor se quedaria sin
   contenido en flujo, dejando la lupa flotando por encima del campo. */
.scp-find__ico {
	position: absolute;
	left: 11px;
	top: 50%;
	transform: translateY(-50%);
	color: #8a9099;
	pointer-events: none;
}

.scp-find__clear {
	position: absolute;
	right: 11px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 17px;
	line-height: 1;
	color: #9aa0a8;
}
.scp-find__clear:hover { color: var(--negro, #333); }

.scp-bar__div {
	width: 1px;
	height: 20px;
	background: var(--borde, #e5e5e5);
	flex: 0 0 auto;
}

/* Separa la operacion (que busco) del tipo (de que tipo): sin esto
   "Alquiler" y "Todos" se leian como una misma tira de botones. */
.scp-bar__div--groups { margin: 0 4px; }

/* ── Responsive ──────────────────────────────────────────────────── */

/* Entre 900 y 1150 px ya no cabe todo en una linea y el grupo derecho
   —orden y buscador— saltaba entero a una segunda fila, con medio ancho
   vacio a su izquierda. En vez de partir la barra, los chips pasan a
   desplazarse en horizontal como en movil: se queda en una sola fila. */
@media (max-width: 1150px) {
	.scp-chips {
		flex: 1 1 0;
		min-width: 0;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
		-webkit-overflow-scrolling: touch;
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
	}
	.scp-chips::-webkit-scrollbar { display: none; }
}

/* Por debajo de 900, dos filas: arriba la operacion, abajo el tipo con
   los ajustes al final. Con tres filas la barra se comia 150 px antes
   de la primera propiedad. */
@media (max-width: 900px) {
	.scp-bar__inner {
		gap: 10px;
		padding: 11px 20px;
	}
	.scp-bar__div--groups { display: none; }

	.scp-seg {
		order: 1;
		flex-basis: 100%;
		max-width: 100%;
		overflow-x: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.scp-seg::-webkit-scrollbar { display: none; }

	.scp-chips {
		order: 2;
		flex: 1 1 0;
		/* Sin min-width:0 el ancho minimo de los chips empuja los ajustes a
		   una tercera fila, aunque puedan desplazarse en horizontal. */
		min-width: 0;
		gap: 6px;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
		-webkit-overflow-scrolling: touch;
		/* El ultimo chip se desvanece: asi se ve que la fila sigue. */
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
	}
	.scp-chips::-webkit-scrollbar { display: none; }
	.scp-chip { margin-right: 16px; }

	.scp-bar__end { order: 3; gap: 2px; flex: 0 0 auto; }
	/* Aqui el campo fijo si estorba: 152 px se comerian la fila de chips.
	   Vuelve a ser un icono, pero al enfocarlo se despliega en posicion
	   absoluta sobre los chips, no empujandolos: asi no puede partir la
	   barra en una tercera fila ni descolocar nada. */
	/* Caja fija: al desplegarse el input se va a absolute y sin esto el
	   contenedor se colapsa, llevandose la lupa fuera de sitio. */
	.scp-find { width: 34px; height: 34px; }

	.scp-find__input {
		width: 34px;
		padding: 0 0 0 34px;
		background: transparent;
		cursor: pointer;
	}
	.scp-find__input:hover { background: #f2f4f7; }

	.scp-find__input:focus,
	.scp-find--filled .scp-find__input {
		position: absolute;
		top: 0;
		right: 0;
		width: 214px;
		padding: 0 34px 0 14px;
		background: #fff;
		border-color: var(--azul, #4a8fcc);
		cursor: text;
		z-index: 3;
		box-shadow: 0 3px 12px rgba(0, 0, 0, .12);
	}

	/* Desplegado, el campo crece hacia la izquierda: la lupa se va al borde
	   derecho, que es donde sigue estando el punto de anclaje. */
	.scp-find:focus-within .scp-find__ico,
	.scp-find--filled .scp-find__ico { left: auto; right: 11px; z-index: 4; }
	.scp-find:focus-within .scp-find__clear,
	.scp-find--filled .scp-find__clear { right: 36px; z-index: 4; }

	/* El orden pasa a icono: base.css fuerza 16px en los select por debajo
	   de 768px (evita el zoom de iOS) y con el texto visible se comia la
	   fila de chips. El select queda encima, transparente, para que siga
	   abriendo el desplegable nativo al tocarlo. */
	.scp-sortwrap {
		width: 34px;
		height: 34px;
		justify-content: center;
		border-radius: 999px;
		color: #8a9099;
	}
	.scp-sortwrap.is-set { color: var(--azul, #4a8fcc); background: var(--azul-light, rgba(74,143,204,.08)); }
	.scp-sortwrap__ico { display: block; }
	.scp-sort {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		padding: 0;
		opacity: 0;
		background-image: none;
	}
}

@media (max-width: 620px) {
	.scp-bar__inner { padding: 10px 16px; }
	.scp-seg__btn { padding: 7px 13px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
	.scp-find__input,
	.scp-seg__btn,
	.scp-chip { transition: none; }
}