/* 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;
    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. */
.filtro-mas > summary { cursor: pointer; min-height: 2.25rem; display: flex; align-items: center; font-weight: 600; color: var(--texto-suave); }
.filtro-mas > summary:hover { color: var(--texto); }

/* "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: "▾"; }