/* ============================================================
   Interlaken® · Componente · Filtros de casos
   Barra de filtros tipo chip que aparece encima de la
   biblioteca de casos. Tres dimensiones de filtrado:

   · Instalador (6 chips con paleta: Groundwork, Bridgework,
     Fieldwork, Academy, Responsework, Campamentos)
   · Sector (top 8 chips visibles + "+ Más sectores" para
     cola larga; resuelve el dilema del "restaurante vacío"
     en sectores con poca masa crítica)
   · Año (chips neutros: 2026, 2025, 2024, 2023…)

   El componente consume:
   · /public/data/casos.json     (schema en docs/schema-casos-v1.md)
   · /public/data/sectores.json  (schema en docs/schema-sectores-v1.md)

   Pensado para escalar bien hacia 80+ casos cuando se complete
   la documentación con Nicolás (Responsework) y Javier
   (Campamentos). La biblioteca de casos es la página más visitada
   después del home y donde el visitante valida la capacidad de
   Interlaken para entregar.

   Sprint 2.E Lote 2 del rediseño · 25 abril 2026.
   Refactor terminológico + cola larga sectores · 25 abril 2026.
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   1 · Container del bloque de filtros
   Wrapper que agrupa todas las dimensiones de filtrado.
   Aporta el espaciado vertical entre grupos.
   ──────────────────────────────────────────────────────────── */

.ilk-filters {
  display: flex;
  flex-direction: column;
  gap: var(--ilk-space-5);
  margin-bottom: var(--ilk-space-8);
}

@media (min-width: 768px) {
  .ilk-filters {
    gap: var(--ilk-space-6);
    margin-bottom: var(--ilk-space-10);
  }
}

/* ────────────────────────────────────────────────────────────
   2 · Grupo de filtros (una dimensión)
   Cada dimensión (unidad, sector, año) es un grupo con su
   label y su lista de chips.
   ──────────────────────────────────────────────────────────── */

.ilk-filters__group {
  display: flex;
  flex-direction: column;
  gap: var(--ilk-space-3);
}

@media (min-width: 1024px) {
  .ilk-filters__group {
    flex-direction: row;
    align-items: center;
    gap: var(--ilk-space-5);
  }
}

/* Label del grupo — "Unidad", "Sector", "Año" */
.ilk-filters__label {
  font-family: var(--ilk-font-sans);
  font-size: var(--ilk-fs-xs);
  font-weight: var(--ilk-fw-medium);
  color: var(--ilk-fg-2);
  letter-spacing: 0.01em;
  margin: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .ilk-filters__label {
    min-width: 80px;
  }
}

/* Lista de chips del grupo */
.ilk-filters__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ilk-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

/* En mobile, cuando hay muchos chips, scroll horizontal con
   ocultamiento de overflow para que no rompa la composición */
@media (max-width: 639px) {
  .ilk-filters--mobile-scroll .ilk-filters__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: var(--ilk-space-2);
    scrollbar-width: thin;
  }

  .ilk-filters--mobile-scroll .ilk-filters__list::-webkit-scrollbar {
    height: 4px;
  }

  .ilk-filters--mobile-scroll .ilk-filters__list::-webkit-scrollbar-thumb {
    background: var(--ilk-gray-mid);
    border-radius: 2px;
  }
}

/* ────────────────────────────────────────────────────────────
   3 · Chip individual — base
   Pill button con borde sutil. Tokens locales sobrescritos
   por variante de unidad y por estado activo.
   ──────────────────────────────────────────────────────────── */

.ilk-filter-chip {
  --chip-bg:           transparent;
  --chip-border:       var(--ilk-border);
  --chip-text:         var(--ilk-fg-2);
  --chip-bg-hover:     var(--ilk-bg-2);
  --chip-border-hover: var(--ilk-fg-2);
  --chip-text-hover:   var(--ilk-fg-1);
  --chip-bg-active:    var(--ilk-fg-1);
  --chip-border-active: var(--ilk-fg-1);
  --chip-text-active:  var(--ilk-fg-inverse);

  display: inline-flex;
  align-items: center;
  gap: var(--ilk-space-2);
  padding: var(--ilk-space-2) var(--ilk-space-4);
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  border-radius: var(--ilk-radius-full);
  color: var(--chip-text);
  font-family: var(--ilk-font-sans);
  font-size: var(--ilk-fs-xs);
  font-weight: var(--ilk-fw-medium);
  line-height: 1.3;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--ilk-transition),
              border-color var(--ilk-transition),
              color var(--ilk-transition);
}

@media (min-width: 768px) {
  .ilk-filter-chip {
    padding: var(--ilk-space-2) var(--ilk-space-5);
    font-size: var(--ilk-fs-sm);
  }
}

.ilk-filter-chip:hover {
  background: var(--chip-bg-hover);
  border-color: var(--chip-border-hover);
  color: var(--chip-text-hover);
}

.ilk-filter-chip:focus-visible {
  outline: 2px solid var(--ilk-orange);
  outline-offset: 2px;
  border-color: var(--chip-border-hover);
}

/* Estado activo — chip seleccionado */
.ilk-filter-chip--active,
.ilk-filter-chip[aria-pressed="true"] {
  background: var(--chip-bg-active);
  border-color: var(--chip-border-active);
  color: var(--chip-text-active);
}

.ilk-filter-chip--active:hover,
.ilk-filter-chip[aria-pressed="true"]:hover {
  background: var(--chip-bg-active);
  border-color: var(--chip-border-active);
  color: var(--chip-text-active);
  filter: brightness(1.08);
}

/* ────────────────────────────────────────────────────────────
   4 · Contador opcional
   Aparece junto al nombre del filtro para indicar cuántos
   resultados tiene esa categoría. Útil cuando el catálogo
   crece (ej: "Bridgework 23"). En activo cambia de color
   pero mantiene legibilidad.
   ──────────────────────────────────────────────────────────── */

.ilk-filter-chip__count {
  display: inline-flex;
  align-items: center;
  font-size: 0.85em;
  font-weight: var(--ilk-fw-light);
  color: var(--ilk-fg-3, var(--ilk-fg-2));
  opacity: 0.7;
}

.ilk-filter-chip--active .ilk-filter-chip__count,
.ilk-filter-chip[aria-pressed="true"] .ilk-filter-chip__count {
  color: currentColor;
  opacity: 0.85;
}

/* ────────────────────────────────────────────────────────────
   5 · Variantes por unidad — el chip activo adopta la paleta
   de su unidad. En estado base se ve neutro; al activarse
   cambia al color de la unidad para refuerzo visual.
   ──────────────────────────────────────────────────────────── */

.ilk-filter-chip--groundwork.ilk-filter-chip--active,
.ilk-filter-chip--groundwork[aria-pressed="true"] {
  --chip-bg-active:     var(--ilk-orange);
  --chip-border-active: var(--ilk-orange);
  --chip-text-active:   var(--ilk-fg-inverse);
}

.ilk-filter-chip--bridgework.ilk-filter-chip--active,
.ilk-filter-chip--bridgework[aria-pressed="true"] {
  --chip-bg-active:     var(--ilk-bridgework-mid);
  --chip-border-active: var(--ilk-bridgework-mid);
  --chip-text-active:   var(--ilk-fg-inverse);
}

.ilk-filter-chip--fieldwork.ilk-filter-chip--active,
.ilk-filter-chip--fieldwork[aria-pressed="true"] {
  --chip-bg-active:     var(--ilk-fieldwork-mid);
  --chip-border-active: var(--ilk-fieldwork-mid);
  --chip-text-active:   var(--ilk-fg-inverse);
}

.ilk-filter-chip--academy.ilk-filter-chip--active,
.ilk-filter-chip--academy[aria-pressed="true"] {
  --chip-bg-active:     var(--ilk-academy-mid);
  --chip-border-active: var(--ilk-academy-mid);
  --chip-text-active:   var(--ilk-fg-inverse);
}

.ilk-filter-chip--responsework.ilk-filter-chip--active,
.ilk-filter-chip--responsework[aria-pressed="true"] {
  --chip-bg-active:     var(--ilk-orange);
  --chip-border-active: var(--ilk-orange);
  --chip-text-active:   var(--ilk-fg-inverse);
}

.ilk-filter-chip--campamentos.ilk-filter-chip--active,
.ilk-filter-chip--campamentos[aria-pressed="true"] {
  --chip-bg-active:     var(--ilk-orange);
  --chip-border-active: var(--ilk-orange);
  --chip-text-active:   var(--ilk-fg-inverse);
}

/* Hover sobre chip de unidad (estado no-activo) — borde adopta
   el accent de la unidad para preview de selección */
.ilk-filter-chip--groundwork:hover:not(.ilk-filter-chip--active) {
  border-color: var(--ilk-orange);
  color: var(--ilk-orange);
}

.ilk-filter-chip--bridgework:hover:not(.ilk-filter-chip--active) {
  border-color: var(--ilk-bridgework-mid);
  color: var(--ilk-bridgework-mid);
}

.ilk-filter-chip--fieldwork:hover:not(.ilk-filter-chip--active) {
  border-color: var(--ilk-fieldwork-mid);
  color: var(--ilk-fieldwork-mid);
}

.ilk-filter-chip--academy:hover:not(.ilk-filter-chip--active) {
  border-color: var(--ilk-academy-mid);
  color: var(--ilk-academy-mid);
}

.ilk-filter-chip--responsework:hover:not(.ilk-filter-chip--active) {
  border-color: var(--ilk-orange);
  color: var(--ilk-orange);
}

.ilk-filter-chip--campamentos:hover:not(.ilk-filter-chip--active) {
  border-color: var(--ilk-orange);
  color: var(--ilk-orange);
}

/* ────────────────────────────────────────────────────────────
   6 · Búsqueda integrada (opcional)
   Input de búsqueda que se puede colocar al inicio o al final
   de la barra de filtros. Mismo lenguaje visual que los chips
   pero con ícono de lupa.
   ──────────────────────────────────────────────────────────── */

.ilk-filters__search {
  position: relative;
  display: flex;
  align-items: center;
}

.ilk-filters__search-input {
  width: 100%;
  padding: var(--ilk-space-2) var(--ilk-space-4) var(--ilk-space-2) var(--ilk-space-8);
  background: transparent;
  border: 1px solid var(--ilk-border);
  border-radius: var(--ilk-radius-full);
  font-family: var(--ilk-font-sans);
  font-size: var(--ilk-fs-sm);
  color: var(--ilk-fg-1);
  transition: border-color var(--ilk-transition);
  min-width: 200px;
}

@media (min-width: 768px) {
  .ilk-filters__search-input {
    min-width: 280px;
  }
}

.ilk-filters__search-input:focus-visible {
  outline: none;
  border-color: var(--ilk-orange);
}

.ilk-filters__search-input::placeholder {
  color: var(--ilk-fg-2);
  opacity: 1;
}

.ilk-filters__search-icon {
  position: absolute;
  left: var(--ilk-space-3);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--ilk-fs-sm);
  color: var(--ilk-fg-2);
  pointer-events: none;
}

/* ────────────────────────────────────────────────────────────
   7 · Resultado de filtros aplicados
   Línea que indica cuántos casos coinciden con los filtros
   actuales. Aparece debajo de la barra de filtros.
   ──────────────────────────────────────────────────────────── */

.ilk-filters__results {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ilk-space-3);
  padding-top: var(--ilk-space-4);
  border-top: 1px solid var(--ilk-border);
  margin-top: var(--ilk-space-2);
  font-family: var(--ilk-font-sans);
  font-size: var(--ilk-fs-sm);
  color: var(--ilk-fg-2);
}

.ilk-filters__results-count {
  font-weight: var(--ilk-fw-medium);
  color: var(--ilk-fg-1);
}

/* Botón "Limpiar filtros" — link sutil */
.ilk-filters__clear {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--ilk-font-sans);
  font-size: var(--ilk-fs-sm);
  color: var(--ilk-orange);
  cursor: pointer;
  text-decoration: none;
  transition: color var(--ilk-transition);
}

.ilk-filters__clear:hover,
.ilk-filters__clear:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ────────────────────────────────────────────────────────────
   8 · Cola larga de sectores — chip "+ Más sectores"
   Cuando la lista de sectores supera 8 elementos, los del top 8
   van como chips visibles (con contador), y los demás se ocultan
   detrás del chip "+ Más sectores". Al hacer click, se despliega
   un panel con la lista completa de la cola larga.

   Los chips de la cola larga NO muestran contador — resuelve el
   dilema del "restaurante vacío" en sectores con poca masa
   crítica. El visitante ve el sector pero no la pobreza de
   cobertura.
   ──────────────────────────────────────────────────────────── */

.ilk-filter-chip--more {
  font-style: italic;
  color: var(--ilk-fg-2);
  border-style: dashed;
  border-color: var(--ilk-gray-mid);
}

.ilk-filter-chip--more::after {
  content: "+";
  font-size: 1.1em;
  font-weight: var(--ilk-fw-medium);
  margin-left: var(--ilk-space-1);
  font-style: normal;
}

/* Cuando está expandido, cambia el "+" a "−" para indicar colapso */
.ilk-filter-chip--more[aria-expanded="true"] {
  background: var(--ilk-bg-2);
  border-style: solid;
  border-color: var(--ilk-fg-2);
}

.ilk-filter-chip--more[aria-expanded="true"]::after {
  content: "−";
}

/* Panel de la cola larga — se despliega bajo la fila de chips
   top 8. Estilo discreto: lista de chips más pequeños sin
   contador. */
.ilk-filters__longtail {
  display: none;
  width: 100%;
  margin-top: var(--ilk-space-3);
  padding: var(--ilk-space-4);
  background: var(--ilk-bg-2);
  border: 1px solid var(--ilk-border);
  border-radius: var(--ilk-radius-md);
  flex-wrap: wrap;
  gap: var(--ilk-space-2);
}

.ilk-filters__longtail[aria-hidden="false"],
.ilk-filters__longtail--visible {
  display: flex;
}

/* En el panel de cola larga, los chips son un punto más pequeños
   y pierden el contador */
.ilk-filters__longtail .ilk-filter-chip {
  padding: var(--ilk-space-1) var(--ilk-space-3);
  font-size: var(--ilk-fs-xs);
}

.ilk-filters__longtail .ilk-filter-chip__count {
  display: none;
}

/* Label sutil del panel de cola larga */
.ilk-filters__longtail-label {
  width: 100%;
  font-size: var(--ilk-fs-xs);
  color: var(--ilk-fg-2);
  font-style: italic;
  margin: 0 0 var(--ilk-space-2) 0;
}

/* ────────────────────────────────────────────────────────────
   9 · Variante compacta
   Para sidebars o módulos donde el espacio es limitado.
   Solo una dimensión de filtros (típicamente instalador), chips
   más pequeños, sin label de grupo.
   ──────────────────────────────────────────────────────────── */

.ilk-filters--compacta {
  margin-bottom: var(--ilk-space-5);
}

.ilk-filters--compacta .ilk-filter-chip {
  padding: var(--ilk-space-1) var(--ilk-space-3);
  font-size: var(--ilk-fs-xs);
}

.ilk-filters--compacta .ilk-filters__label {
  display: none;
}