/* 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); }

/* ---- Panel de filtros: título con contador y secciones plegables, todas con el mismo formato ---- */
.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;
}
/* Flecha de todos los plegables (panel, secciones, sub-grupos de tallas y «Ver más marcas»). */
.filtros-flecha, .filtro-chevron {
  flex: none; 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] > summary .filtros-flecha,
.filtro-seccion[open] > summary .filtro-chevron,
.marcas-mas[aria-expanded="true"] .filtro-chevron { transform: rotate(-135deg); }

.filtros-cuerpo { margin-top: 0.5rem; }
@media (max-width: 1023px) { .filtros-cuerpo { scrollbar-gutter: stable; } }

/* Sección: fila con título, contador de lo marcado y flecha; abajo, su contenido. */
.filtro-seccion { border-top: 1px solid var(--borde-suave); }
.filtro-seccion > summary {
  display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; cursor: pointer; list-style: none;
  font-size: 0.9rem; font-weight: 600; color: var(--texto);
}
.filtro-seccion > summary::-webkit-details-marker { display: none; }
.filtro-n {
  min-width: 1.25rem; height: 1.25rem; padding: 0 0.35rem; border-radius: 9999px; text-align: center;
  background: var(--invertido); color: var(--sobre-invertido); font-size: 0.72rem; line-height: 1.25rem; font-weight: 700;
}
.filtro-contenido { padding: 0.25rem 0 1rem; }
.filtro-contenido > .escalas { margin-bottom: 0.6rem; }
/* Dentro de Talla: Juvenil y Niños pequeños, con el mismo formato pero más discretos. */
.filtro-sub { margin-top: 0.25rem; }
.filtro-sub > summary { min-height: 2.25rem; font-size: 0.8125rem; color: var(--texto-suave); }
.filtro-sub > .filtro-contenido { padding-bottom: 0.5rem; }

/* 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; }
.opcion[hidden] { display: none; }
@media (min-width: 400px) and (max-width: 1023px) { .filtro-2col .opcion { display: inline-flex; width: 49%; } }  /* panel de 240 px (escritorio): una columna */

/* «Mostrar agotados» y «Precio máximo», debajo de las secciones. */
.filtro-extra { padding: 0.5rem 0 1rem; border-top: 1px solid var(--borde-suave); }
.filtro-extra .campo { margin-top: 0.5rem; }

/* Filtro «Marca»: buscador, lista corta y «Ver más» en la misma lista. */
.marcas-buscar {
  width: 100%; min-height: 2.25rem; margin-bottom: 0.4rem; padding: 0 0.75rem; border: 1px solid var(--borde-fuerte);
  border-radius: 0.5rem; background: var(--superficie); color: var(--texto); font-size: 0.875rem;
}
.marcas-buscar:focus { outline: 2px solid var(--acento); outline-offset: 1px; border-color: transparent; }
.marcas-buscar::placeholder { color: var(--texto-tenue); }
.marcas-vacio { margin: 0.25rem 0; font-size: 0.85rem; color: var(--texto-suave); }
.marcas-mas {
  display: flex; align-items: center; width: 100%; min-height: 2.25rem; margin-top: 0.25rem; padding: 0; border: 0;
  border-top: 1px solid var(--borde-suave); background: none; font-size: 0.8125rem; font-weight: 600;
  color: var(--texto-suave); cursor: pointer;
}
.marcas-mas:hover { color: var(--texto); }
.marcas-mas[hidden] { display: none; }