/* ============================================================================
   FILTROS DEL CATÁLOGO — Mis Amigos Los Animalitos
   La barra lateral de /tienda/ y de las categorías de producto.

   Depende de: tienda.css → layout.css → base.css (tokens y botones).

   DOS DECISIONES QUE NO SE VEN LEYENDO EL CSS
   -------------------------------------------
   1. EL MARCADO ES UNO SOLO EN MÓVIL Y EN ESCRITORIO. No hay dos barras ni dos
      formularios: hay un `<details>` sin `open` y aquí se fuerza su contenido
      visible a partir de 60rem. Así el móvil sale colapsado (que es lo que pide
      el encargo) sin depender de JavaScript, y no hay ningún parpadeo de
      "abierto y se cierra" al cargar, que en un listado de 24 tarjetas sería un
      desplazamiento de layout enorme.

      HACEN FALTA LAS DOS REGLAS de `::details-content` y `display`, y no es
      duplicar por gusto: medido en el navegador del proyecto (Chrome 154), un
      `<details>` cerrado con solo `display: block` en el hijo mide 18 px de alto
      —el hijo tiene caja, pero el contenido está saltado por
      `content-visibility: hidden`— y con `::details-content {
      content-visibility: visible }` mide 418. Chrome nuevo esconde por
      `content-visibility`; los navegadores que esconden con `display: none`
      usan la otra regla. Cada una cubre a los suyos y ninguna estorba.

   2. LA COLUMNA MIDE 17rem. Con el contenedor del tema (78rem) el listado se
      queda en unos 950 px y sigue cabiendo a 5 columnas, que es el requisito.
   ========================================================================== */

/* ============================================================================
   1. LA DISPOSICIÓN DEL LISTADO
   ========================================================================== */
.ma-tienda__disposicion {
	display: block;
}

/* En móvil la barra va arriba, colapsada, y separada del listado. */
.ma-filtros {
	margin-bottom: 1.25rem;
}

/* ============================================================================
   2. EL RESUMEN (solo móvil): "Filtros  ·  3"
   ========================================================================== */
.ma-filtros__resumen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	min-height: 3rem;
	padding: 0.7rem 1rem;
	background: var(--ma-paper);
	border: var(--ma-line);
	border-radius: var(--ma-r-sm);
	box-shadow: var(--ma-sh-soft);
	font-size: var(--ma-fs-sm);
	font-weight: 700;
	color: var(--ma-ink-900);
	cursor: pointer;
	list-style: none;
	transition: border-color var(--ma-t-fast) var(--ma-ease);
}

.ma-filtros__resumen:hover {
	border-color: var(--ma-teal-300);
}

/* El triángulo del navegador se cambia por un chevron propio. */
.ma-filtros__resumen::-webkit-details-marker {
	display: none;
}

.ma-filtros__resumen-texto {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.ma-filtros__resumen-texto::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid var(--ma-ink-500);
	border-bottom: 2px solid var(--ma-ink-500);
	transform: rotate(45deg) translateY(-0.1rem);
	transition: transform var(--ma-t-fast) var(--ma-ease);
}

.ma-filtros__desplegable[open] .ma-filtros__resumen-texto::before {
	transform: rotate(-135deg) translateY(-0.1rem);
}

.ma-filtros__resumen-cuenta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.6rem;
	height: 1.6rem;
	padding-inline: 0.4rem;
	background: var(--ma-teal-600);
	color: var(--ma-paper);
	border-radius: var(--ma-pill);
	font-size: var(--ma-fs-xs);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* ============================================================================
   3. EL CUERPO: la tarjeta con los grupos
   ========================================================================== */
.ma-filtros__cuerpo {
	margin-top: 0.6rem;
	padding: 1rem;
	background: var(--ma-paper);
	border: var(--ma-line);
	border-radius: var(--ma-r-sm);
	box-shadow: var(--ma-sh-soft);
}

.ma-filtros__form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* ============================================================================
   4. LOS FILTROS ACTIVOS: chips con su ✕
   ========================================================================== */
.ma-filtros__activos {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.55rem;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: var(--ma-line);
}

.ma-filtros__activos-titulo {
	margin: 0;
	font-size: var(--ma-fs-xs);
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ma-ink-700);
}

.ma-filtros__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ma-filtros__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.32rem 0.65rem;
	background: var(--ma-teal-50);
	border: 1px solid var(--ma-teal-200);
	border-radius: var(--ma-pill);
	color: var(--ma-teal-800);
	font-size: var(--ma-fs-xs);
	font-weight: 700;
	line-height: 1.35;
	text-decoration: none;
	transition:
		background-color var(--ma-t-fast) var(--ma-ease),
		border-color var(--ma-t-fast) var(--ma-ease);
}

.ma-filtros__chip:hover,
.ma-filtros__chip:focus-visible {
	background: var(--ma-teal-100);
	border-color: var(--ma-teal-300);
	color: var(--ma-teal-900);
}

.ma-filtros__chip-x {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
}

.ma-filtros__limpiar {
	font-size: var(--ma-fs-xs);
	font-weight: 700;
	color: var(--ma-ink-700);
}

.ma-filtros__limpiar:hover {
	color: var(--ma-teal-800);
}

/* ============================================================================
   5. LOS GRUPOS
   ========================================================================== */
.ma-filtros__grupo {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.ma-filtros__grupo + .ma-filtros__grupo {
	padding-top: 1rem;
	border-top: var(--ma-line);
}

.ma-filtros__titulo {
	/*
	 * El contraste de este texto es requisito del proyecto: `--ma-ink-500` da
	 * 5,7:1 sobre blanco y `--ma-ink-400` da 3,12:1. Aquí se usa 900, así que
	 * sobra margen.
	 */
	margin: 0 0 0.5rem;
	padding: 0;
	font-size: var(--ma-fs-sm);
	font-weight: 800;
	color: var(--ma-ink-900);
}

.ma-filtros__lista {
	display: flex;
	flex-direction: column;
	gap: 0.05rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ma-filtros__opcion {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
}

.ma-filtros__control {
	flex: none;
	width: 1.05rem;
	height: 1.05rem;
	margin: 0.45rem 0 0;
	accent-color: var(--ma-teal-600);
	cursor: pointer;
}

.ma-filtros__etiqueta {
	display: flex;
	flex: 1 1 auto;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	min-width: 0;
	padding: 0.35rem 0;
	font-size: var(--ma-fs-sm);
	line-height: 1.35;
	color: var(--ma-ink-900);
	cursor: pointer;
}

.ma-filtros__opcion:hover .ma-filtros__texto {
	color: var(--ma-teal-800);
}

.ma-filtros__cuenta {
	flex: none;
	color: var(--ma-ink-500);
	font-size: var(--ma-fs-xs);
	font-variant-numeric: tabular-nums;
}

/* ============================================================================
   6. "VER TODAS" — un <details> nativo, sin petición y sin JavaScript
   ========================================================================== */
.ma-filtros__mas {
	margin-top: 0.4rem;
}

.ma-filtros__mas-resumen {
	padding: 0.3rem 0;
	font-size: var(--ma-fs-xs);
	font-weight: 700;
	color: var(--ma-teal-700);
	cursor: pointer;
	list-style: none;
}

.ma-filtros__mas-resumen::-webkit-details-marker {
	display: none;
}

.ma-filtros__mas-resumen:hover {
	color: var(--ma-teal-900);
}

.ma-filtros__mas-resumen::after {
	content: " +";
	font-weight: 800;
}

.ma-filtros__mas[open] > .ma-filtros__mas-resumen::after {
	content: " –";
}

/*
 * Con 136 marcas, la lista desplegada es más alta que la pantalla. Se le pone
 * tope y scroll propio para que "Ver todas" no convierta la barra en un muro.
 */
.ma-filtros__mas[open] > .ma-filtros__lista {
	max-height: 16rem;
	overflow-y: auto;
	margin-top: 0.2rem;
	padding-right: 0.2rem;
	overscroll-behavior: contain;
}

/* ============================================================================
   7. LA ACCIÓN DE APLICAR (el camino sin JavaScript)
   ========================================================================== */
.ma-filtros__acciones {
	display: flex;
	margin-top: 0.25rem;
}

.ma-filtros__aplicar {
	width: 100%;
}

/* ============================================================================
   8. ESCRITORIO: la barra, a la izquierda y fija
   ============================================================================

   ESTE BLOQUE VA AL FINAL DEL ARCHIVO A PROPÓSITO.

   Estaba arriba, junto a la disposición, y el resumen salía desplegado a 1440:
   `@media` no añade especificidad, así que `.ma-filtros__resumen { display: flex }`
   —que venía DESPUÉS en el archivo, con la misma especificidad (0,1,0)— le
   ganaba a la regla `display: none` de dentro del bloque. Medido: a 1440 el
   resumen medía `display: flex` y el `<details>` seguía cerrado, con la barra
   convertida en una franja de 3rem.

   Regla para el futuro: en este archivo, todo lo que dependa de medios va al
   final, después de las reglas base de los mismos selectores.
   ========================================================================== */
@media (min-width: 60rem) {
	.ma-tienda__disposicion {
		display: grid;
		grid-template-columns: 17rem minmax(0, 1fr);
		gap: clamp(1.5rem, 3vw, 2.5rem);
		align-items: start;
	}

	.ma-filtros {
		margin-bottom: 0;
		/*
		 * Fija mientras se recorre el catálogo. `max-height` + `overflow` son
		 * imprescindibles: con 5 grupos la barra es más alta que la pantalla y,
		 * sin tope, un elemento `sticky` más alto que el viewport dejaría el
		 * final inalcanzable.
		 */
		position: sticky;
		top: 1.5rem;
		max-height: calc(100vh - 3rem);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* En escritorio el resumen sobra: la barra está siempre desplegada. */
	.ma-filtros__resumen {
		display: none;
	}

	/*
	 * Y el contenido de un `<details>` CERRADO se muestra igual. Hacen falta las
	 * dos reglas; el porqué, medido, está en la cabecera del archivo.
	 */
	.ma-filtros__desplegable > .ma-filtros__cuerpo {
		display: block;
	}

	.ma-filtros__desplegable::details-content {
		content-visibility: visible;
	}

	.ma-filtros__cuerpo {
		margin-top: 0;
	}
}