/* Chips — etiquetas pequeñas de área o estado.
   <span class="chip chip--area" style="--area:…">Docencia</span> · <span class="chip chip--accent">Destacado</span>
   techpark_area_chip('docencia') genera el de área. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .35em .8em;
  border-radius: var(--radius-pill);
  background: var(--c-bg-soft);
  color: var(--c-ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  white-space: nowrap;
}
.chip--area::before {
  content: "";
  width: .5em;
  height: .5em;
  border-radius: 50%;
  background: var(--area);
}
.chip--accent { color: var(--c-accent); }
.chip--dark { background: rgb(255 255 255 / .12); color: var(--c-text-inv); }
.chip--soft { background: transparent; border: 1px solid var(--c-line); color: var(--c-text-muted); }   /* dato secundario (ubicación, edificio) */
.chip--soft svg { width: 1em; height: 1em; }