/* ============================================================
   MexiCasas — Archivo de propiedades (/propiedades/)
   Solo variables de tokens.css. Mobile-first, breakpoints 600/900/1200.

   Decisión móvil (<900px): la barra de filtros se queda en UNA fila
   con scroll horizontal (scrollbar oculta) en lugar de colapsar en
   acordeón: todos los controles siguen visibles y a un toque, sin
   añadir un segundo nivel de UI. Desde 900px la fila hace wrap normal.

   El header sticky debe exponer su alto como --mxc-header-alto en
   :root; si no existe, la barra usa 64px de fallback.
   ============================================================ */

/* El atributo hidden debe ganar a los display de .mxc-btn y compañía. */
.mxc-archivo [hidden] { display: none; }

/* La utilidad .mxc-sr-solo vive en css/base.css. */

/* ---------- Barra de filtros sticky ---------- */

/* Talla compacta uniforme de la barra: campos, segmentado y botón a 42px. */
.mxc-filtros .mxc-field {
	min-height: var(--mxc-control-alto-sm);
	padding: 8px 12px;
	font-size: var(--mxc-text-sm);
}
.mxc-filtros select.mxc-field { padding-block: 0; }
.mxc-filtros .mxc-btn {
	min-height: var(--mxc-control-alto-sm);
	padding: 0 16px;
}

.mxc-filtros {
	position: sticky;
	top: var(--mxc-header-alto, 64px);
	z-index: 40;
	background: var(--mxc-bone);
	border-bottom: 1px solid var(--mxc-line);
	padding: 10px var(--mxc-gutter);
}

.mxc-filtros__fila {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: var(--mxc-container);
	margin: 0 auto;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.mxc-filtros__fila::-webkit-scrollbar { display: none; }

@media (min-width: 900px) {
	.mxc-filtros__fila {
		flex-wrap: wrap;
		overflow-x: visible;
	}
}

/* Anchos propios de la barra (las alturas ya vienen del bloque compacto). */
.mxc-filtros .mxc-filtros__campo {
	width: auto;
	flex: none;
}
.mxc-filtros select.mxc-filtros__campo { padding-right: 28px; }

.mxc-filtros__precio {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
}
.mxc-filtros__campo--precio { max-width: 108px; }
.mxc-filtros__guion { color: var(--mxc-ink-3); }

.mxc-filtros__limpiar { flex: none; }

/* Toggle segmentado Todas / Venta / Renta */
/* El componente .mxc-seg vive en tokens.css; aquí solo la talla compacta. */
.mxc-filtros .mxc-seg { min-height: var(--mxc-control-alto-sm); padding: 3px; }
.mxc-filtros .mxc-seg span { padding: 0 15px; border-radius: calc(var(--mxc-radius) - 3px); }

/* ---------- Cabecera de resultados ---------- */

.mxc-archivo__contenido {
	max-width: var(--mxc-container);
	margin: 0 auto;
	padding: 28px var(--mxc-gutter) 72px;
}

.mxc-archivo__cabecera {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin-bottom: 24px;
}
.mxc-archivo__titulo { font-size: var(--mxc-text-2xl); }
.mxc-archivo__contador {
	margin: 0;
	font-size: var(--mxc-text-sm);
	color: var(--mxc-ink-2);
}

/* ---------- Grid de cards ---------- */
/* La retícula canónica vive en css/base.css; aquí solo la transición
   que suaviza el estado cargando. */
.mxc-archivo .mxc-grid-cards { transition: opacity 0.15s ease; }

/* Estado cargando: el grid baja de opacidad, nada de spinners. */
.mxc-archivo.is-cargando .mxc-grid-cards {
	opacity: 0.45;
	pointer-events: none;
}

/* ---------- Vacío / error / paginación ---------- */

.mxc-archivo__vacio,
.mxc-archivo__error {
	background: var(--mxc-bone);
	border: 1px solid var(--mxc-line);
	border-radius: var(--mxc-radius-lg);
	padding: 44px 24px;
	text-align: center;
	margin-top: 8px;
}
.mxc-archivo__vacio-titulo {
	font-weight: 600;
	margin: 0 0 4px;
}
.mxc-archivo__vacio-nota {
	color: var(--mxc-ink-2);
	font-size: var(--mxc-text-sm);
	margin: 0 0 20px;
}
.mxc-archivo__error p {
	color: var(--mxc-ink-2);
	margin: 0 0 16px;
}

.mxc-archivo__mas {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}
.mxc-archivo__mas .mxc-btn[disabled] {
	opacity: 0.6;
	cursor: default;
}