/* =========================
   CHIPS (CRM PRO)
   - menos borde
   - más compacto
   - color BD como acento (no como fondo)
   ========================= */

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

/* base */
.chips-bar .btn{
  border-radius:999px !important;
  padding:6px 12px !important;
  font-weight:500 !important;      /* <-- clave */
  font-size:.92rem !important;     /* opcional */
  line-height:1.15 !important;      /* opcional */

  background: var(--surface) !important;
  color: var(--text) !important;

  border:1px solid var(--border) !important;
}

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

/* Activo genérico */
.chips-bar .btn.active{
  background: color-mix(in srgb, var(--primary) 18%, var(--surface)) !important;
  border-color: var(--primary) !important;
  color: var(--text) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chip-bg, var(--primary)) 25%, transparent);
}


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

/* Chips con color de BD:
   en vez de fondo pastel, ponemos ACENTO lateral (más pro) */
.chips-bar .btn[style*="--chip-bg"]{
  position: relative;
}

.chips-bar .btn[style*="--chip-bg"]{
  --chip-accent: color-mix(in srgb, var(--chip-bg) 70%, black 12%);
  color: var(--chip-accent) !important;
  border-color: color-mix(in srgb, var(--chip-bg) 35%, var(--border)) !important;
}



/* Activo con color del estado */
.chips-bar .btn.active[style*="--chip-bg"]{
  background: color-mix(in srgb, var(--chip-bg) 22%, var(--surface)) !important;
  border-color: var(--chip-bg) !important;
}