/*
 * Barra de filtros con botones (15-oct-2026). Elegida por el usuario en /NEW/prueba-filtros.html
 * («F2 con resalte gris»): la anterior era casi igual que la de Artesta (banda con línea negra,
 * separadores verticales, desplegables con flecha).
 *
 * PUNTO DE CONTROL: todo cuelga de la clase `sils-fb` en <html>, que solo se pone con el
 * interruptor encendido (opción `sils_filtros_botones`; `?sils_filtros=0|1` para comparar, ver
 * inc/recursos.php). Apagado, esta hoja y filtros-botones.js no se cargan y la barra es la de
 * siempre: no se ha tocado filtros.css, filtros-panel.* ni las plantillas.
 *
 * Qué cambia (solo escritorio; en el móvil, la fila de «Filtrar y ordenar» sin marco):
 * - barra blanca, sin marco negro, con una línea fina debajo; «Filtrar» delante;
 * - cada filtro es un botón con borde fino y el radio de 4 px de la web; con algo elegido, se
 *   rellena de gris claro y lleva el número: «Tonalidades (2)»;
 * - el desplegable sale pegado al botón, recto y con línea fina, con las opciones en 2 o 3
 *   columnas (--sils-fb-cols, lo pone el guion) y un pie «Borrar · Ver N obras»;
 * - lo elegido aparece debajo como etiquetas que se quitan con ×;
 * - «Orden» y «Quitar filtros» en texto.
 * Los textos que pinta el CSS («Filtrar», «Orden», «Quitar filtros») llegan traducidos en
 * variables desde inc/recursos.php.
 *
 * Trampas: Bricks pone por id (#brxe-acbarr, acflis, acfder) bordes negros, fondo, relleno 0 y
 * column-gap 0; sils-bricks.css fija la flecha con !important; JetSmartFilters cambia el texto
 * de la etiqueta por lo elegido (por eso el nombre lo pinta ::before desde data-nombre).
 */

/* ── La barra ─────────────────────────────────────────────────────────────── */
html.sils-fb .brxe-container.sils-filtros {
	min-height: 5.6rem;
	padding-inline: var(--sils-margen-seguridad) !important;
	border-top: 0 !important;
	border-bottom: 1px solid var(--sils-linea) !important;
	background: var(--sils-blanco) !important;
	align-items: flex-start !important;
	column-gap: var(--sils-esp-l) !important;
}

html.sils-fb .brxe-container.sils-filtros .sils-filtros__lista {
	align-items: center !important;
	column-gap: var(--sils-esp-2xs, 0.8rem) !important;
	row-gap: 0 !important;
	padding-block: 1rem !important;
}

html.sils-fb .brxe-container.sils-filtros .sils-filtros__lista > * {
	border-right: 0 !important;
}

html.sils-fb .brxe-container.sils-filtros .sils-filtros__lista::before {
	content: var(--sils-fb-filtrar, "Filtrar");
	margin-right: var(--sils-esp-2xs, 0.8rem);
	color: var(--sils-secundario);
	font-family: var(--sils-fuente-thoren);
	font-size: var(--sils-txt-3xs);
	line-height: 1.8rem;
	letter-spacing: 0.025rem;
	text-transform: uppercase;
}

/* El desplegable se coloca respecto a su botón, no a los envoltorios de Bricks. */
html.sils-fb .brxe-container.sils-filtros [class*="brxe-jet-smart-filters-"],
html.sils-fb .brxe-container.sils-filtros .jet-filter {
	position: static !important;
}

html.sils-fb .brxe-container.sils-filtros .jet-filter-items-dropdown {
	position: relative !important;
}

/* ── Los botones ──────────────────────────────────────────────────────────── */
html.sils-fb .brxe-container.sils-filtros .jet-filter-items-dropdown__label {
	position: relative;
	height: 3.6rem;
	padding: 0 3.2rem 0 1.4rem;
	border: 1px solid color-mix(in srgb, var(--sils-principal) 22%, transparent);
	border-radius: var(--sils-radio, 0.4rem);
	background: var(--sils-blanco);
	color: var(--sils-principal);
	font-family: var(--sils-fuente-thoren);
	font-size: var(--sils-txt-2xs);
	font-weight: 300;
	letter-spacing: var(--sils-ls-texto, 0.12rem);
	text-transform: none;
	transition: border-color .16s ease, background-color .16s ease;
}

/* Con el nombre ya puesto por el guion, el texto de JetSmartFilters se esconde y lo pinta ::before
   (mismo texto y letra: no salta). */
html.sils-fb .brxe-container.sils-filtros .jet-filter-items-dropdown__label[data-nombre] {
	font-size: 0 !important;
	letter-spacing: 0 !important;
}

html.sils-fb .brxe-container.sils-filtros .jet-filter-items-dropdown__label[data-nombre]::before {
	content: attr(data-nombre) attr(data-n);
	color: inherit;
	font-family: var(--sils-fuente-thoren);
	font-size: var(--sils-txt-2xs);
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: var(--sils-ls-texto, 0.12rem);
	text-transform: none;
	white-space: nowrap;
}

html.sils-fb .brxe-container.sils-filtros .jet-filter-items-dropdown__active {
	display: none;
}

/* Flecha: solo la máscara de filtros.css (sils-bricks.css le pone además un icono de fondo). */
html.sils-fb .brxe-container.sils-filtros .jet-filter-items-dropdown__label::after {
	right: 1.2rem !important;
	width: 1rem !important;
	height: 1rem !important;
	background: currentColor !important;
	-webkit-mask-size: 0.9rem;
	mask-size: 0.9rem;
}

html.sils-fb .brxe-container.sils-filtros .jet-filter-items-dropdown.jet-dropdown-open .jet-filter-items-dropdown__label::after {
	transform: translateY(-50%) rotate(180deg);
}

html.sils-fb .brxe-container.sils-filtros .jet-filter-items-dropdown__label:hover,
html.sils-fb .brxe-container.sils-filtros .jet-dropdown-open .jet-filter-items-dropdown__label {
	border-color: var(--sils-principal);
}

/* Con algo elegido: relleno gris claro (el de las tarjetas); borde negro al señalar o abierto. */
html.sils-fb .brxe-container.sils-filtros .tiene-elegidos .jet-filter-items-dropdown__label {
	border-color: var(--sils-fondo-imagenes);
	background: var(--sils-fondo-imagenes);
}

html.sils-fb .brxe-container.sils-filtros .tiene-elegidos .jet-filter-items-dropdown__label:hover,
html.sils-fb .brxe-container.sils-filtros .tiene-elegidos .jet-dropdown-open .jet-filter-items-dropdown__label {
	border-color: var(--sils-principal);
}

/* ── El desplegable: pegado al botón, del tamaño de sus opciones ───────────── */
html.sils-fb .brxe-container.sils-filtros .jet-filter-items-dropdown__body {
	top: calc(100% + 0.8rem) !important;
	right: auto;
	left: 0;
	width: calc(var(--sils-fb-cols, 3) * 19rem + 4.8rem) !important;
	max-width: calc(100vw - 2 * var(--sils-margen-seguridad));
	margin: 0;
	padding: 2.4rem 2.4rem 0;
	border: 1px solid color-mix(in srgb, var(--sils-principal) 22%, transparent);
	border-radius: 0;
	background: var(--sils-blanco);
	box-shadow: none;
}

/* Si no cabe a la derecha del botón, se alinea por su borde derecho (lo decide el guion). */
html.sils-fb .brxe-container.sils-filtros .sils-fb-a-la-derecha > .jet-filter-items-dropdown__body {
	right: 0;
	left: auto;
}

html.sils-fb .brxe-container.sils-filtros .jet-dropdown-open > .jet-filter-items-dropdown__body {
	animation: sils-fb-entra .2s ease;
}

@keyframes sils-fb-entra {
	from { opacity: 0; transform: translateY(-0.4rem); }
	to { opacity: 1; transform: none; }
}

/* Opciones en columnas con una línea fina entre ellas */
html.sils-fb .brxe-container.sils-filtros .jet-checkboxes-list-wrapper,
html.sils-fb .brxe-container.sils-filtros .jet-color-image-list-wrapper fieldset {
	column-count: var(--sils-fb-cols, 3) !important;
	column-gap: 2.4rem;
	column-rule: 1px solid var(--sils-linea);
	margin: 0;
	padding: 0;
}

html.sils-fb .brxe-container.sils-filtros .jet-color-image-list-wrapper {
	padding: 0 !important;
}

html.sils-fb .brxe-container.sils-filtros .jet-checkboxes-list__row,
html.sils-fb .brxe-container.sils-filtros .jet-color-image-list__row {
	margin: 0 0 var(--sils-esp-3xs, 0.4rem);
	padding: 0;
}

html.sils-fb .brxe-container.sils-filtros .jet-checkboxes-list__button,
html.sils-fb .brxe-container.sils-filtros .jet-color-image-list__button {
	padding: 0.6rem 0;
	border-radius: 0;
	background: transparent !important;
}

html.sils-fb .brxe-container.sils-filtros .jet-checkboxes-list__button:hover .jet-checkboxes-list__label,
html.sils-fb .brxe-container.sils-filtros .jet-color-image-list__button:hover .jet-color-image-list__label {
	color: var(--sils-principal);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.4rem;
}

/* ── Pie del desplegable: Borrar · Ver N obras ─────────────────────────────── */
.sils-fb-pie {
	display: none;
}

html.sils-fb .brxe-container.sils-filtros .sils-fb-pie {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 2.4rem;
	margin-top: 2rem;
	padding: var(--sils-esp-s, 1.6rem) 0;
	border-top: 1px solid var(--sils-linea);
}

html.sils-fb .brxe-container.sils-filtros .sils-fb-borrar,
html.sils-fb .brxe-container.sils-filtros .sils-fb-borrar:focus {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--sils-principal);
	font-family: var(--sils-fuente-thoren);
	font-size: var(--sils-txt-3xs);
	line-height: 1.8rem;
	letter-spacing: 0.025rem;
	text-transform: uppercase;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.4rem;
	cursor: pointer;
}

html.sils-fb .brxe-container.sils-filtros .sils-fb-borrar:hover {
	background: transparent;
	color: var(--sils-secundario);
}

html.sils-fb .brxe-container.sils-filtros .sils-fb-borrar[disabled] {
	opacity: 0.35;
	text-decoration: none;
	cursor: default;
}

html.sils-fb .brxe-container.sils-filtros .sils-fb-ver,
html.sils-fb .brxe-container.sils-filtros .sils-fb-ver:focus {
	display: inline-flex;
	align-items: center;
	gap: var(--sils-esp-2xs, 0.8rem);
	height: 4.4rem;
	margin: 0;
	padding: 0 2.4rem;
	border: 0;
	border-radius: var(--sils-radio, 0.4rem);
	background: var(--sils-principal);
	box-shadow: none;
	color: var(--sils-blanco);
	font-family: var(--sils-fuente-thoren);
	font-size: var(--sils-txt-boton);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.05rem;
	text-transform: uppercase;
	cursor: pointer;
	transition: opacity .2s ease;
}

html.sils-fb .brxe-container.sils-filtros .sils-fb-ver:hover {
	background: var(--sils-principal);
	color: var(--sils-blanco);
	opacity: 0.85;
}

html.sils-fb .brxe-container.sils-filtros .sils-fb-ver[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* Mientras JetSmartFilters recalcula: «Actualizando» con un giro de 12 px. */
html.sils-fb .brxe-container.sils-filtros .sils-fb-ver.es-cargando::before {
	content: "";
	width: 1.2rem;
	height: 1.2rem;
	border: 1.5px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: sils-fb-gira .7s linear infinite;
}

@keyframes sils-fb-gira {
	to { transform: rotate(360deg); }
}

/* ── Etiquetas de lo elegido, en una segunda línea de la barra ─────────────── */
html.sils-fb .brxe-container.sils-filtros .sils-fb-etiquetas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sils-esp-2xs, 0.8rem);
	flex-basis: 100%;
	order: 99;
	padding: var(--sils-esp-2xs, 0.8rem) 0 0.2rem;
}

html.sils-fb .brxe-container.sils-filtros .sils-fb-etiquetas:empty {
	display: none;
}

html.sils-fb .brxe-container.sils-filtros .sils-fb-etiqueta,
html.sils-fb .brxe-container.sils-filtros .sils-fb-etiqueta:focus {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	height: 2.8rem;
	margin: 0;
	padding: 0 1rem;
	border: 0;
	border-radius: var(--sils-radio, 0.4rem);
	background: var(--sils-fondo-imagenes);
	box-shadow: none;
	color: var(--sils-principal);
	font-family: var(--sils-fuente-thoren);
	font-size: var(--sils-txt-3xs);
	line-height: 1.8rem;
	letter-spacing: 0.025rem;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .16s ease;
	animation: sils-fb-entra .2s ease;
}

html.sils-fb .brxe-container.sils-filtros .sils-fb-etiqueta:hover {
	background: color-mix(in srgb, var(--sils-fondo-imagenes), var(--sils-principal) 7%);
	color: var(--sils-principal);
}

html.sils-fb .brxe-container.sils-filtros .sils-fb-etiqueta i {
	font-size: var(--sils-txt-4xs, 1.1rem);
}

/* Inspiración: la colección elegida en la franja de logos (filtros-panel.js la pone en la
   barra) va como un botón con elección: gris claro, misma altura y radio. */
html.sils-fb .brxe-container.sils-filtros .sils-filtros__coleccion {
	padding: 0;
}

html.sils-fb .brxe-container.sils-filtros .sils-filtros__etiqueta,
html.sils-fb .brxe-container.sils-filtros .sils-filtros__etiqueta:focus {
	height: 3.6rem;
	padding: 0 1.4rem;
	border-radius: var(--sils-radio, 0.4rem);
	background-color: var(--sils-fondo-imagenes);
	gap: 0.6rem;
}

html.sils-fb .brxe-container.sils-filtros .sils-filtros__etiqueta:hover {
	background-color: color-mix(in srgb, var(--sils-fondo-imagenes), var(--sils-principal) 7%);
}

/* ── Parte derecha: nº de obras, quitar filtros y orden ───────────────────── */
html.sils-fb .brxe-container.sils-filtros .sils-filtros__derecha {
	align-self: flex-start !important;
	align-items: center !important;
	column-gap: var(--sils-esp-m) !important;
	height: 5.6rem;
}

html.sils-fb .brxe-container.sils-filtros .sils-filtros__derecha > * {
	align-self: center;
}

html.sils-fb .brxe-container.sils-filtros .sils-filtros__cuenta {
	min-width: 0;
	padding: 0;
}

html.sils-fb .brxe-container.sils-filtros .jet-remove-all-filters__button {
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-size: 0;
	letter-spacing: 0;
}

html.sils-fb .brxe-container.sils-filtros .jet-remove-all-filters__button::before {
	content: var(--sils-fb-quitar, "Quitar filtros");
	color: var(--sils-principal);
	font-family: var(--sils-fuente-thoren);
	font-size: var(--sils-txt-3xs);
	line-height: 1.8rem;
	letter-spacing: 0.025rem;
	text-transform: uppercase;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.4rem;
}

html.sils-fb .brxe-container.sils-filtros .jet-remove-all-filters__button:hover::before {
	color: var(--sils-secundario);
}

html.sils-fb .brxe-container.sils-filtros .jet-smart-filters-sorting {
	display: flex;
	align-items: center;
}

html.sils-fb .brxe-container.sils-filtros .jet-sorting {
	display: flex;
	align-items: center;
	gap: var(--sils-esp-2xs, 0.8rem);
	height: auto;
}

html.sils-fb .brxe-container.sils-filtros .jet-sorting::before {
	content: var(--sils-fb-orden, "Orden");
	color: var(--sils-secundario);
	font-family: var(--sils-fuente-thoren);
	font-size: var(--sils-txt-3xs);
	line-height: 1.8rem;
	letter-spacing: 0.025rem;
	text-transform: uppercase;
}

html.sils-fb .brxe-container.sils-filtros .jet-sorting::after {
	right: 0 !important;
	width: 1rem !important;
	height: 1rem !important;
	background: currentColor !important;
	-webkit-mask-size: 0.9rem;
	mask-size: 0.9rem;
}

html.sils-fb .brxe-container.sils-filtros .jet-sorting-select {
	height: auto;
	min-width: 0;
	padding: 0 1.8rem 0 0;
	border: 0 !important;
	background: transparent !important;
	color: var(--sils-principal);
	font-size: var(--sils-txt-2xs);
	font-weight: 300;
	line-height: 1.2em;
	letter-spacing: var(--sils-ls-texto, 0.12rem);
	text-transform: none;
}

/* ── Móvil y tableta: la fila de «Filtrar y ordenar», sin marco ───────────── */
html.sils-fb .brxe-container.sils-filtros.es-panel {
	align-items: center !important;
}

html.sils-fb .brxe-container.sils-filtros.es-panel .sils-filtros__derecha {
	gap: var(--sils-esp-s);
	height: auto;
}

html.sils-fb .brxe-container.sils-filtros.es-panel .sils-filtros__cuenta {
	margin-right: auto;
	text-align: left;
}

html.sils-fb .brxe-container.sils-filtros.es-panel .sils-filtros__rejilla {
	width: 3.2rem !important;
	min-width: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

html.sils-fb .brxe-container.sils-filtros.es-panel .sils-filtros__abrir {
	gap: var(--sils-esp-2xs, 0.8rem) !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--sils-principal) !important;
	font-family: var(--sils-fuente-thoren) !important;
	font-size: var(--sils-txt-2xs) !important;
	font-weight: 300 !important;
	letter-spacing: var(--sils-ls-texto, 0.12rem) !important;
	text-transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
	html.sils-fb .brxe-container.sils-filtros *,
	html.sils-fb .brxe-container.sils-filtros *::before {
		animation: none !important;
		transition: none !important;
	}
}