/* filters.css — Barra de filtros */
.filter-bar {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.filter-item { display: flex; align-items: center; gap: var(--space-2); }
.filter-label { font-size: var(--font-size-xs); font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }

.filter-select {
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius); padding: 4px 8px;
  font-size: var(--font-size-xs); cursor: pointer;
}
.filter-select:focus { border-color: var(--primary); outline: none; }

/* Toggle chip */
.filter-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 20px;
  font-size: var(--font-size-xs); font-weight: 600;
  border: 1px solid var(--border); color: var(--text-3);
  cursor: pointer; transition: all var(--duration);
}
.filter-toggle.active { background: var(--primary-dim); border-color: var(--primary); color: var(--primary); }
.filter-toggle:hover  { border-color: var(--border-light); color: var(--text); }

.filter-divider { width: 1px; height: 24px; background: var(--border); margin: 0 var(--space-1); }
.filter-reset { font-size: var(--font-size-xs); color: var(--text-3); cursor: pointer; text-decoration: underline; margin-left: auto; }
.filter-reset:hover { color: var(--danger); }