/* ─────────────────────────────────────────────────────────────────
   Inmoblao · Filtros AJAX del archive público (Sub-fase 1.5)
   Estilos específicos del sidebar de filtros. Complementan los
   atoms genéricos de frontend.css (.inmo-pub-filters, .inmo-facet-list).
   ───────────────────────────────────────────────────────────────── */

.inmo-pub-filters-form { display: flex; flex-direction: column; gap: 16px; }

.inmo-pub-f-section { display: flex; flex-direction: column; gap: 8px; }
.inmo-pub-f-title {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--fg-3);
	font-weight: 600;
	margin: 0;
}

/* Filas de 2 columnas (habs + baños) */
.inmo-pub-f-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Pick row (segmented buttons para habs/baños) */
.inmo-pick-row {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}
.inmo-pick {
	flex: 1 1 auto;
	min-width: 50px;
	text-align: center;
	padding: 7px 8px;
	background: var(--surface-2);
	border: 1px solid var(--border-subtle);
	border-radius: 6px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--fg-2);
	cursor: pointer;
	transition: background .12s, color .12s, border-color .12s;
}
.inmo-pick input { display: none; }
.inmo-pick:hover { border-color: var(--fg-4); }
.inmo-pick.is-on,
.inmo-pick:has( input:checked ) {
	background: var(--fg);
	color: #fff;
	border-color: var(--fg);
}

/* Range row (min - max) */
.inmo-range-row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 6px;
	align-items: center;
}
.inmo-range-sep { color: var(--fg-4); font-size: 13px; text-align: center; }
.inmo-range-row .inmo-input { width: 100%; padding: 7px 10px; font-size: 13px; }

/* Facet list (lista de checkboxes) */
.inmo-facet {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	border-radius: 6px;
	font-size: 13px;
	cursor: pointer;
	color: var(--fg-2);
	transition: background .12s;
}
.inmo-facet:hover { background: var(--surface-2); }
.inmo-facet input[type="checkbox"] {
	margin: 0;
	flex-shrink: 0;
}
.inmo-facet-label { flex: 1; }
.inmo-facet-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 18px;
	padding: 0 6px;
	font-size: 11px;
	font-weight: 500;
	color: var(--fg-3);
	background: var(--surface-2);
	border-radius: 999px;
	font-feature-settings: 'tnum';
}
.inmo-facet input[type="checkbox"]:checked ~ .inmo-facet-count,
.inmo-facet:has( input[type="checkbox"]:checked ) .inmo-facet-count {
	background: var(--accent-soft);
	color: var(--accent-strong);
}

/* Lista con scroll si hay muchas opciones (características) */
/* Lista de checkboxes con scroll interno. Aplicamos un fade en la parte
   inferior con `mask-image` para que visualmente se vea "hay más contenido
   debajo" — la última fila se difumina suavemente hacia transparente.
   Si la lista es corta (no llega a llenar los 240px), el fade apenas se
   nota porque no hay contenido en la zona difuminada. */
.inmo-facet-list-scroll {
	max-height: 240px;
	overflow-y: auto;
	padding-right: 4px;
	-webkit-mask-image: linear-gradient( to bottom, #000 calc(100% - 28px), transparent 100% );
	        mask-image: linear-gradient( to bottom, #000 calc(100% - 28px), transparent 100% );
}

/* Scrollbar más fina y discreta. Solo afecta Chromium-based (Webkit). En
   Firefox queda con su scrollbar nativa fina por defecto via scrollbar-width. */
.inmo-facet-list-scroll {
	scrollbar-width: thin;
	scrollbar-color: var(--border-strong) transparent;
}
.inmo-facet-list-scroll::-webkit-scrollbar { width: 6px; }
.inmo-facet-list-scroll::-webkit-scrollbar-track { background: transparent; }
.inmo-facet-list-scroll::-webkit-scrollbar-thumb {
	background: var(--border-strong);
	border-radius: 3px;
}
.inmo-facet-list-scroll::-webkit-scrollbar-thumb:hover { background: var(--fg-4); }

/* Grid 7 (energético A-G) */
.inmo-facet-grid-7 {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}
.inmo-facet-grid-7 .inmo-facet {
	flex-direction: column;
	gap: 0;
	padding: 8px 0;
	justify-content: center;
	text-align: center;
	background: var(--surface-2);
	border: 1px solid var(--border-subtle);
}
.inmo-facet-grid-7 .inmo-facet input { display: none; }
.inmo-facet-grid-7 .inmo-facet-label { font-weight: 700; font-size: 14px; }
.inmo-facet-grid-7 .inmo-facet:has( input:checked ) {
	background: var(--fg);
	color: #fff;
	border-color: var(--fg);
}

/* Grid 4 (orientación NE/NO/SE/SO) */
.inmo-facet-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px;
}
.inmo-facet-compact {
	flex-direction: column;
	gap: 0;
	padding: 8px 4px;
	justify-content: center;
	text-align: center;
	background: var(--surface-2);
	border: 1px solid var(--border-subtle);
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
}
.inmo-facet-compact input { display: none; }
.inmo-facet-compact:has( input:checked ) {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
}

/* "Más filtros" colapsable */
.inmo-pub-f-advanced { border-top: 1px solid var(--border-subtle); padding-top: 16px; }
.inmo-pub-f-advanced-toggle {
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: var(--accent-strong);
	list-style: none;
	padding: 4px 0;
}
.inmo-pub-f-advanced-toggle::-webkit-details-marker { display: none; }
.inmo-pub-f-advanced-toggle::before {
	content: '+ ';
	font-weight: 700;
}
.inmo-pub-f-advanced[open] .inmo-pub-f-advanced-toggle::before {
	content: '− ';
}
.inmo-pub-f-advanced[open] { display: flex; flex-direction: column; gap: 16px; }

/* Botones de acción */
.inmo-pub-f-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 8px;
	border-top: 1px solid var(--border-subtle);
}
.inmo-pub-f-submit { flex: 1; justify-content: center; }

/* Applied chips */
.inmo-applied-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}
.inmo-applied-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	background: var(--surface-2);
	border: 1px solid var(--border-subtle);
	border-radius: 999px;
	font-size: 12px;
	color: var(--fg-2);
	text-decoration: none;
	transition: background .12s, color .12s;
}
.inmo-applied-chip:hover {
	background: var(--accent-soft);
	color: var(--accent-strong);
}
.inmo-applied-chip-x {
	font-size: 14px;
	line-height: 1;
	font-weight: 700;
	color: var(--fg-4);
}
.inmo-applied-chip:hover .inmo-applied-chip-x { color: var(--accent-strong); }
.inmo-applied-chip-clear { margin-left: 4px; font-size: 12px; }

/* Estado loading */
.inmo-pub-cards-grid.is-loading,
.inmo-pub-cards-list.is-loading {
	opacity: 0.4;
	pointer-events: none;
	transition: opacity .15s;
}

/* Empty state */
.inmo-pub-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 48px 24px;
	color: var(--fg-3);
}
.inmo-pub-empty p { margin: 0 0 16px; font-size: 14.5px; }

/* Pager AJAX */
.inmo-pub-pager {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin-top: 24px;
}
.inmo-pub-pager-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	border: 1px solid var(--border-subtle);
	border-radius: 6px;
	font-size: 13px;
	color: var(--fg-2);
	text-decoration: none;
	background: var(--surface);
	transition: border-color .12s, color .12s;
}
.inmo-pub-pager-link:hover { border-color: var(--accent); color: var(--accent-strong); }
.inmo-pub-pager-link.is-current {
	background: var(--fg);
	color: #fff;
	border-color: var(--fg);
	font-weight: 600;
}

/* Responsive: en móvil, sidebar pasa a ser una sección plegable encima del grid */
@media ( max-width: 980px ) {
	.inmo-pub-grid-shell { grid-template-columns: 1fr; }
	.inmo-pub-filters { position: static; padding-right: 0; }
}