/**
 * common/filters — Filtros por taxonomía y grid repintable.
 * Handle: pf_pfuture_component_filters
 *
 * Bloques: __controls, __group, __options, __grid, __pagination, __count, __empty.
 * Estado de carga: [data-pf-filters-grid][aria-busy="true"].
 *
 * Tokens: solo los canónicos de style.css (issue #60), sin literales de respaldo.
 * Los propios del componente remapean la paleta, no copian valores, para que el
 * modo oscuro se resuelva cambiando la asignación y no duplicando reglas.
 */

.pf-filters {
  --pf-filters-pill-bg: var(--pf-color-surface);
  --pf-filters-pill-border: var(--pf-color-border);
  --pf-filters-pill-text: var(--pf-color-text-soft);
  --pf-filters-pill-count: var(--pf-color-text-muted);
  --pf-filters-pill-bg-on: var(--pf-color-brand);
  --pf-filters-pill-border-on: var(--pf-color-brand);
  --pf-filters-pill-text-on: var(--pf-color-text-invert);
  --pf-filters-count-text: var(--pf-color-text-muted);

  width: 100%;
}

/* -------------------------------------------------------------- controles -- */

.pf-filters__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--pf-space-md);
}

/* Rotulos: 13 px, apagados y sin versalitas (issue #112). */
.pf-filters__label {
  margin: 0;
  color: var(--pf-color-text-muted);
  font-weight: var(--pf-weight-medium);
  font-size: var(--pf-text-xs);
}

.pf-filters__group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.pf-filters__group-legend {
  padding: 0;
  margin-block-end: var(--pf-space-2xs);
  color: var(--pf-color-text-muted);
  font-size: var(--pf-text-xs);
}

.pf-filters__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* La píldora es el <label>. El input real se mantiene en el árbol de
   accesibilidad —nada de display:none— y solo se saca de la vista, para que el
   grupo siga siendo navegable con teclado y anunciable por lector de pantalla. */
.pf-filters__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pf-filters__option-label {
  display: inline-flex;
  cursor: pointer;
}

.pf-filters__option-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--pf-space-3xs);
  padding: var(--pf-space-3xs) var(--pf-space-xs);
  border: 1px solid var(--pf-filters-pill-border);
  border-radius: var(--pf-radius-pill);
  background: var(--pf-filters-pill-bg);
  color: var(--pf-filters-pill-text);
  font-size: var(--pf-text-xs);
  font-weight: var(--pf-weight-regular);
  line-height: var(--pf-leading-snug);
  transition: background-color var(--pf-transition), color var(--pf-transition),
    border-color var(--pf-transition);
}

/* Una sola señal al hover: el borde sube a `border-strong`. */
.pf-filters__option-label:hover .pf-filters__option-pill {
  border-color: var(--pf-color-border-strong);
}

/* Estado seleccionado: lo pinta la píldora entera, no solo el texto. */
.pf-filters__input:checked + .pf-filters__option-pill {
  border-color: var(--pf-filters-pill-border-on);
  background: var(--pf-filters-pill-bg-on);
  color: var(--pf-filters-pill-text-on);
  font-weight: var(--pf-weight-medium);
}

/* El foco se dibuja sobre la píldora porque el input está fuera de la vista.
   NUNCA se quita: es el único indicador para quien navega con teclado. */
.pf-filters__input:focus-visible + .pf-filters__option-pill {
  outline: 2px solid var(--pf-color-focus);
  outline-offset: 2px;
}

/* El contador de cada píldora (issue #131). NO lleva `opacity`: mezclada sobre la
 * píldora blanca, la `opacity: 0.75` que traía convertía `text-soft` (#3d4c5c) en
 * #6e7985, y a 13 px —que no es texto grande— eso da 4,43:1, por debajo del 4,5:1 de
 * WCAG 1.4.3. La regla: un texto apagado se apaga con un token de la paleta, que está
 * calibrado, y nunca con `opacity`, que fabrica un color que nadie ha medido.
 * En la píldora seleccionada el contador hereda `text-invert` sobre `brand`, que es el
 * mismo par que el rótulo y ya cumple. */
.pf-filters__option-count {
  font-variant-numeric: tabular-nums;
  color: var(--pf-filters-pill-count);
}

.pf-filters__input:checked + .pf-filters__option-pill .pf-filters__option-count {
  color: inherit;
}

.pf-filters__reset {
  align-self: center;
  padding: var(--pf-space-3xs) var(--pf-space-xs);
  border: 0;
  border-radius: var(--pf-radius-pill);
  background: none;
  color: var(--pf-color-link);
  font-size: var(--pf-text-sm);
  text-decoration: underline;
  cursor: pointer;
}

.pf-filters__reset:hover,
.pf-filters__reset:focus-visible {
  color: var(--pf-color-link-hover);
}

/* El botón de aplicar solo existe dentro de <noscript>. */
.pf-filters__submit {
  padding: var(--pf-space-3xs) var(--pf-space-sm);
  border: 1px solid var(--pf-color-brand);
  border-radius: var(--pf-radius-control);
  background: var(--pf-color-brand);
  color: var(--pf-color-text-invert);
  font-size: var(--pf-text-sm);
  cursor: pointer;
}

/* ------------------------------------------------------------------ grid -- */

.pf-filters__count {
  margin: var(--pf-space-md) 0 0;
  color: var(--pf-filters-count-text);
  font-size: var(--pf-text-sm);
}

.pf-filters__grid {
  position: relative;
  margin-block: var(--pf-space-md);
  min-height: 8rem;
}

.pf-filters__grid[aria-busy='true'] {
  opacity: 0.5;
  pointer-events: none;
}

.pf-filters__grid-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--pf-space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pf-filters__empty {
  margin: 0;
  padding-block: var(--pf-space-lg);
  color: var(--pf-color-text-muted);
  text-align: center;
}

@media (max-width: 600px) {
  .pf-filters__controls {
    flex-direction: column;
    align-items: stretch;
  }

  .pf-filters__grid-list {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pf-filters__option-label {
    transition: none;
  }
}