/* indicators.css — Indicadores visuais de estado (badge e status) */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1;
}

/* --- Cores Semânticas (Compartilhadas) --- */
.status--blue,  .badge--blue  { color: rgb(var(--blue-11,  var(--lv-blue-11))); }
.status--teal,  .badge--teal  { color: rgb(var(--teal-11,  var(--lv-teal-11))); }
.status--amber, .badge--amber { color: rgb(var(--amber-11, var(--lv-amber-11))); }
.status--ruby,  .badge--ruby  { color: rgb(var(--ruby-11,  var(--lv-ruby-11))); }
.status--slate, .badge--slate { color: rgb(var(--slate-11, var(--lv-slate-11))); }

/* --- Backgrounds (Exclusivos para Badges) --- */
.badge--blue  { background: rgba(var(--blue-9,  var(--lv-blue-9))  / 0.12); }
.badge--teal  { background: rgba(var(--teal-9,  var(--lv-teal-9))  / 0.12); }
.badge--amber { background: rgba(var(--amber-9, var(--lv-amber-9)) / 0.12); }
.badge--ruby  { background: rgba(var(--ruby-9,  var(--lv-ruby-9))  / 0.12); }
.badge--slate { background: rgba(var(--slate-9, var(--lv-slate-9)) / 0.12); }

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
}

.status-dot-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: rgb(var(--slate-12, var(--lv-slate-12)));
}

.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}