/* filters.css */
.filters-bar {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-xl) var(--space-xl);
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--muted);
  transition: all .2s;
  position: relative;
}

.filter-btn:hover {
  color: var(--white);
  border-color: rgba(255,255,255,.2);
}

.filter-btn.active {
  background: transparent;
  border-color: transparent;
  color: var(--white);
}

/* Gradient border via pseudo-element */
.filter-btn.active::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  padding: 1.5px;
  background: var(--gradient);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

@media (max-width: 768px) {
  .filters-bar {
    padding: 0 var(--space-md) var(--space-md);
    gap: 8px;
  }
  .filter-btn {
    padding: 7px 14px;
    font-size: .72rem;
  }
}

/* Celulares comunes en Honduras: cambia a scroll horizontal */
@media (max-width: 640px) {
  .filters-bar {
    justify-content: flex-start;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .filters-bar::-webkit-scrollbar { display: none; }
  .filter-btn { flex-shrink: 0; }
}

/* Celulares muy pequeños: botones aún más compactos */
@media (max-width: 360px) {
  .filter-btn {
    padding: 6px 12px;
    font-size: .68rem;
  }
}