/* =========================
   CHIPS (tabs por tag)
   Basado en filtro_por_tag.html
   ========================= */

.chips-bar{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Base chip (anula look bootstrap sin romper layout) */
.chips-bar .btn{
  border-radius: 999px !important;
  /*padding: 8px 12px !important;*/
  font-size: 0.9rem !important;
  line-height: 1 !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  transition: .15s ease !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}

/* Hover */
.chips-bar .btn:hover{
  background: var(--surface-2) !important;
  border-color: color-mix(in srgb, var(--border) 70%, var(--text)) !important;
}

/* Focus (accesibilidad / pro) */
.chips-bar .btn:focus{
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
}

/* Estado activo global (para "Todos" y para items) */
.chips-bar .btn.active{
  background: color-mix(in srgb, var(--primary) 16%, var(--surface)) !important;
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border)) !important;
  color: var(--text) !important;
}

/* Chips con color propio: usan --chip-bg (viene inline en tu HTML) */
.chips-bar .btn[style*="--chip-bg"]{
  /* no usamos el color a pleno; lo usamos como tinte suave */
  background: color-mix(in srgb, var(--chip-bg) 14%, var(--surface)) !important;
  border-color: color-mix(in srgb, var(--chip-bg) 45%, var(--border)) !important;
}

/* Activo con color propio: un poquito más marcado */
.chips-bar .btn.active[style*="--chip-bg"]{
  background: color-mix(in srgb, var(--chip-bg) 22%, var(--surface)) !important;
  border-color: color-mix(in srgb, var(--chip-bg) 65%, var(--border)) !important;
}

/* Si algún color de BD viene muy claro, que el texto siga legible */
.chips-bar .btn[style*="--chip-bg"]{
  color: var(--text) !important;
}