/* VGLIA — insignias, estados y variaciones. */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  border: var(--border-width) solid transparent;
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.badge--info    { color: var(--color-info);    background: var(--surface-info);    border-color: rgb(var(--color-info-rgb) / 0.28); }
.badge--success { color: var(--color-success); background: var(--surface-success); border-color: rgb(var(--color-success-rgb) / 0.28); }
.badge--warning { color: var(--color-warning); background: var(--surface-warning); border-color: rgb(var(--color-warning-rgb) / 0.28); }
.badge--danger  { color: var(--color-danger);  background: var(--surface-danger);  border-color: rgb(var(--color-danger-rgb) / 0.28); }
.badge--ai      { color: var(--vglia-purple-300); background: rgb(var(--vglia-purple-rgb) / 0.14); border-color: rgb(var(--vglia-purple-rgb) / 0.3); }

.badge--neutral {
  color: var(--vglia-text-muted);
  background: var(--vglia-surface-800);
  border-color: var(--vglia-border-subtle);
}

/* --- Punto de estado ------------------------------------------------------ */
/* El texto acompaña siempre al punto: el color por sí solo no comunica. */

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--vglia-text-secondary);
}

.status__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--vglia-text-muted);
  flex-shrink: 0;
}

.status--online  .status__dot { background: var(--color-success); box-shadow: 0 0 0 3px rgb(var(--color-success-rgb) / 0.18); }
.status--warning .status__dot { background: var(--color-warning); box-shadow: 0 0 0 3px rgb(var(--color-warning-rgb) / 0.18); }
.status--danger  .status__dot { background: var(--color-danger);  box-shadow: 0 0 0 3px rgb(var(--color-danger-rgb) / 0.18); }

/* Latido sólo en lo que de verdad está corriendo ahora mismo. */
.status--live .status__dot { animation: vg-pulse 2.4s var(--ease-in-out) infinite; }

@keyframes vg-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* --- Variación (delta) ---------------------------------------------------- */
/* Además del color lleva flecha: legible sin distinguir verde de rojo. */

.delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.delta.is-up      { color: var(--color-success); }
.delta.is-down    { color: var(--color-danger); }
.delta.is-neutral { color: var(--vglia-text-muted); }

.delta.is-up::before   { content: "↗"; }
.delta.is-down::before { content: "↘"; }