/**
 * Cajón de filtros: grupos plegables y tipo de prenda (18-sep).
 * excellent-core/includes/filtro-atributos.php · assets/filtros.js
 *
 * Va en el plugin y no en `main.css` del tema a propósito: ese archivo es
 * terreno compartido entre varias sesiones de trabajo y esto es una pieza suya,
 * completa y separable. Carga detrás de `main.css`, así que le gana en lo poco
 * que reescribe (el titular del grupo).
 *
 * Solo tokens del tema. Los únicos números que aparecen son relativos al propio
 * texto (`em`) y el giro del chevron, que no es una medida sino media vuelta.
 */

/* EL TIPO VA EL PRIMERO. El orden de los grupos lo decide el CSS —ver
   `.filtros-grupo--marca/-talla/-color/-precio` en main.css, del 1 al 4— porque
   el marcado sale de un bucle. El tipo es el corte que hace útiles a los demás,
   así que se pone delante de todos. */
.filtros-cajon__body .filtros-grupo--tipo { order: 0; }

/* El titular deja de ser texto suelto y pasa a ser el control que abre. El
   relleno se lo queda el botón, para que toda la fila sea pulsable. */
.filtros-cajon__body .filtros-grupo__titulo {
	padding: 0;
	margin: 0;
	width: 100%;
}

.filtros-grupo__toggle {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	width: 100%;
	padding: var(--space-1) var(--space-2);
	background: none;
	border: 0;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: 500;
	color: var(--c-muted);
	text-align: left;
}

.filtros-grupo__toggle:hover { color: var(--c-ink); }

.filtros-grupo__toggle:focus-visible {
	outline: var(--focus-w) solid var(--c-ink);
	outline-offset: calc(var(--focus-w) * -1);
}

.filtros-grupo__rotulo { flex: 1 1 auto; }

/* Cuántos filtros lleva puestos el grupo. Solo aparece cuando hay alguno: un
   «0» permanente al lado de cada titular es ruido, y aquí el dato sirve
   justamente para saber qué hay puesto sin abrir. */
.filtros-grupo__marcados {
	flex: none;
	min-width: 1.5em;
	padding: 0 var(--space-05);
	background: var(--c-ink);
	color: var(--c-ink-inv);
	font-size: var(--fs-2xs);
	line-height: 1.5em;
	text-align: center;
}

.filtros-grupo__chevron {
	flex: none;
	width: 1em;
	height: 1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.filtros-grupo.is-abierto .filtros-grupo__chevron { transform: rotate(180deg); }

/* Un grupo al que no le queda ninguna opción viva desaparece. Las opciones
   sueltas que se quedan a cero siguen agrisándose (`.filtros-op.is-vacia`, en
   main.css): ahí conservar el sitio ayuda, aquí un titular con todo muerto
   debajo solo empuja el resto fuera de la pantalla. */
.filtros-grupo.is-vacio { display: none; }

/* 🔴 **`[hidden]` NO BASTA, Y ESTA TRAMPA YA SE PISÓ ANTES EN ESTE PROYECTO.**
   `main.css:2456` da `display: flex` a la lista, y una regla de clase le gana al
   atributo `[hidden]` del navegador: el grupo decía estar cerrado —flecha abajo,
   `aria-expanded="false"`— y seguía enseñando sus opciones. Hay que declararlo,
   igual que el tema declara `.shop-filtros__btn[hidden]`. */
.filtros-grupo__lista[hidden] { display: none; }

/* ── El escalón: la talla espera al tipo (21-sep) ──────────────────────────
   «Que las tallas salgan solo de la categoría que selecciono, no de golpe de
   todas» (Sebas). Mientras no haya tipo elegido, la talla se enseña APAGADA con
   el motivo debajo, no escondida: escondida, quien busca su talla creería que
   esta tienda no filtra por talla. */
.filtros-grupo--talla.is-bloqueado .filtros-grupo__toggle {
	cursor: default;
	opacity: var(--op-inactivo);
}

/* Sin flecha: no hay nada que desplegar todavía, y una flecha que no responde
   se lee como un fallo. */
.filtros-grupo--talla.is-bloqueado .filtros-grupo__chevron { display: none; }

.filtros-grupo__pista {
	display: none;
	margin: 0;
	padding: 0 var(--space-2) var(--space-1);
	font-size: var(--fs-2xs);
	color: var(--c-muted);
}

.filtros-grupo--talla.is-bloqueado .filtros-grupo__pista { display: block; }

/* UNA fila, no cuatro. Las familias de talla van seguidas en el marcado, así
   que las bloqueadas que vengan detrás de otra bloqueada sobran: las cuatro
   dirían lo mismo. */
.filtros-grupo--talla.is-bloqueado ~ .filtros-grupo--talla.is-bloqueado { display: none; }