/* ============================================================================
   Patch CSS para agregar a /css/trainer-lab-view.css
   ----------------------------------------------------------------------------
   Estilos del componente chip group. Agregalo al final del archivo existente.
   ============================================================================ */

/* -------- Chip Group ------------------------------------------------------ */
.chip-group {
  margin-bottom: 18px;
}

.chip-group__label {
  display: block;
  font-size: 12px;
  color: var(--text-soft);
  margin-bottom: 8px;
  letter-spacing: .2px;
  text-transform: uppercase;
}

.chip-group__hint {
  font-size: 11px;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}

.chip-group__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* -------- Chip individual ------------------------------------------------- */
.chip {
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text-soft);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  transition: var(--transition);
  white-space: nowrap;
  user-select: none;
}

.chip:hover:not(.is-selected) {
  border-color: rgba(var(--primary-rgb), .45);
  color: var(--text);
}

.chip:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* Estado seleccionado: usa el azul de marca como fill */
.chip.is-selected {
  background: rgba(var(--primary-rgb), .18);
  border-color: rgba(var(--primary-rgb), .65);
  color: var(--primary);
}

.chip.is-selected:hover {
  background: rgba(var(--primary-rgb), .25);
  border-color: rgba(var(--primary-rgb), .85);
}

/* -------- Mobile ajustes -------------------------------------------------- */
@media (max-width: 720px) {
  .chip {
    font-size: 12px;
    padding: 5px 12px;
  }
  .chip-group__chips {
    gap: 5px;
  }
}