/* Panel de filtros del catálogo con scroll propio, independiente de la página (una sola barra:
   sus listas no tienen scroll propio; las tallas de niño y el resto de las marcas van plegados).
   overscroll-behavior: contain evita que, al llegar al final del panel, el scroll "se pase" a la
   página (scroll chaining). */

/* Computador: el panel queda fijo al costado (sticky, a 80px del borde superior)
   y no puede ser más alto que la ventana. */
@media (min-width: 1024px) {
  #filtros aside {
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    border-radius: 0.75rem;
  }
}

/* Celular: el panel abierto ocupa como máximo el 70% de la pantalla. */
@media (max-width: 1023px) {
  #panel-filtros[open] > div {
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;  /* 4 px de más dejaban una barra horizontal */
    overscroll-behavior: contain;
  }
}

/* «Ver todas las marcas»: el resto de la lista, plegado. */

/* "Aplicar" y "Limpiar" siempre visibles al pie del panel. */
.filtros-acciones {
  position: sticky;
  bottom: 0;
  margin: 0 -0.25rem;
  padding: 0.75rem 0.25rem 0.25rem;
  background: var(--superficie);
  border-top: 1px solid var(--borde-suave);
}


/* Introducción de las páginas de marca, categoría, modelo y ofertas (texto con datos reales). */
.intro-listado { margin-top: 0.5rem; max-width: 48rem; font-size: 0.9rem; line-height: 1.55; color: var(--texto-3); }

/* Chips de filtros activos (sobre los resultados): cada uno quita su filtro al tocarlo. */
.chips-activos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 1rem; }
.chip-activo {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 36px; padding: 0 0.75rem;
  border: 1px solid var(--borde-suave); border-radius: 9999px; background: var(--superficie);
  font-size: 0.8rem; font-weight: 500; color: var(--texto-3);
}
.chip-activo:hover { border-color: currentColor; }
.chip-limpiar { padding: 0 0.5rem; font-size: 0.8rem; text-decoration: underline; color: var(--texto-3); }

/* Flecha de los grupos plegados del filtro (tallas de niño y «Ver todas las marcas»). */
.tallas-mas > summary, .filtro-mas > summary { list-style: none; }
.tallas-mas > summary::-webkit-details-marker, .filtro-mas > summary::-webkit-details-marker { display: none; }
.tallas-mas > summary::before, .filtro-mas > summary::before { content: "▸"; margin-right: 0.375rem; }
.tallas-mas[open] > summary::before, .filtro-mas[open] > summary::before { content: "▾"; }

/* ---- Panel de filtros: título con contador, grupos separados y opciones fáciles de tocar ---- */
.filtros-titulo {
  display: flex; align-items: center; gap: 0.5rem; min-height: 2.25rem; cursor: pointer; list-style: none;
  font-size: 0.95rem; font-weight: 700;
}
.filtros-titulo::-webkit-details-marker { display: none; }
.filtros-contador {
  min-width: 1.4rem; height: 1.4rem; padding: 0 0.4rem; border-radius: 9999px; text-align: center;
  background: var(--acento); color: #fff; font-size: 0.75rem; line-height: 1.4rem; font-weight: 700;
}
.filtros-flecha {
  margin-left: auto; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--texto-suave);
  border-bottom: 2px solid var(--texto-suave); transform: rotate(45deg); transition: transform 0.15s;
}
#panel-filtros[open] .filtros-flecha { transform: rotate(-135deg); }

.filtros-cuerpo { margin-top: 0.75rem; }
@media (max-width: 1023px) { .filtros-cuerpo { scrollbar-gutter: stable; } }
/* Línea superior con degradado y no border-top: en un fieldset el legend se encaja sobre el borde. */
.filtro-grupo { padding: 1rem 0; border: 0; background: linear-gradient(var(--borde-suave), var(--borde-suave)) top / 100% 1px no-repeat; }
.filtro-legend {
  margin-bottom: 0.5rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--texto-suave);
}
/* El legend va flotado: un legend normal se encaja sobre el borde superior del fieldset y lo atraviesa. */
.filtro-grupo > .filtro-legend { float: left; width: 100%; }
.filtro-grupo > .filtro-legend + * { clear: both; }
.filtro-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.filtro-cabecera .filtro-legend { margin-bottom: 0; }

/* Opción con casilla: toda la fila es el objetivo táctil (36 px) y resalta al pasar o marcar. */
.opcion {
  display: flex; align-items: center; gap: 0.6rem; min-height: 2.25rem; padding: 0 0.5rem; margin: 0 -0.5rem;
  border-radius: 0.5rem; cursor: pointer; color: var(--texto-2);
}
.opcion:hover { background: var(--superficie-2); }
.opcion:has(input:checked) { color: var(--texto); font-weight: 600; }
.opcion input { width: 1.05rem; height: 1.05rem; flex: none; }
@media (min-width: 400px) and (max-width: 1023px) { .filtro-2col .opcion { display: inline-flex; width: 49%; } }  /* panel de 240 px (escritorio): una columna */

.filtros-cuerpo > .opcion { margin-top: 0.75rem; }

/* «Ver todas las marcas»: botón de ancho completo, en una sola línea. */
.filtro-mas { margin-top: 0.5rem; }
.filtro-mas > summary {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 2.25rem; padding: 0 0.75rem;
  border: 1px solid var(--borde); border-radius: 0.5rem; cursor: pointer; white-space: nowrap;
  font-size: 0.8125rem; font-weight: 600; color: var(--texto-2);
}
.filtro-mas > summary:hover { border-color: var(--texto); }
.filtro-mas > summary::before { margin: 0; font-size: 0.7rem; }
.filtro-mas[open] > summary { margin-bottom: 0.25rem; }
.filtros-cuerpo > .opcion { margin-top: 0; }
.filtros-cuerpo > .filtro-grupo + .opcion { margin-top: 0.25rem; }