app-filtros {
  display: block;
}

.filters {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem 1.3rem;
  box-shadow: var(--shadow);
  margin-top: 1.5rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 999px;
  padding: .42rem .9rem;
  font-size: .83rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}

.chip:hover {
  border-color: var(--orange-line);
  background: var(--orange-soft);
}

.chip.active {
  background: var(--orange);
  border-color: var(--orange-d);
  color: var(--orange-ink);
}

.chip .swatch {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .14);
  flex: none;
}

.chip .bi-check2 {
  display: none;
  font-size: .95rem;
}

.chip.active .bi-check2 {
  display: inline;
}

.btn-clear {
  border: 0;
  background: none;
  color: var(--muted);
  font-size: .84rem;
  font-weight: 600;
  padding: .3rem .5rem;
  border-radius: 8px;
}

.btn-clear:hover {
  color: var(--ink);
  background: #f4efec;
}