/* VGLI — 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 ------------------------------------------------------ */
/* Text always travels with the dot: colour on its own does not communicate. */

.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); }

/* A pulse only on what is genuinely running right now. */
.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) ---------------------------------------------------- */
/* An arrow as well as the colour: readable without telling green from red. */

.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: "↘"; }

/* --- Relationship badges ------------------------------------------------------ */
/* What a company or a person is to Vector. Colour is never the only signal:
   each badge carries its word. Shared by Intelligence and the Follow-up Agent. */

.badge--client     { --rel: var(--relationship-client);     --rel-rgb: var(--relationship-client-rgb); }
.badge--lead       { --rel: var(--relationship-lead);       --rel-rgb: var(--relationship-lead-rgb); }
.badge--agent      { --rel: var(--relationship-agent);      --rel-rgb: var(--relationship-agent-rgb); }
.badge--partner    { --rel: var(--relationship-partner);    --rel-rgb: var(--relationship-partner-rgb); }
.badge--leadership { --rel: var(--relationship-leadership); --rel-rgb: var(--relationship-leadership-rgb); }
.badge--extern     { --rel: var(--relationship-extern);     --rel-rgb: var(--relationship-extern-rgb); }
.badge--former     { --rel: var(--relationship-former);     --rel-rgb: var(--relationship-former-rgb); }
.badge--supplier   { --rel: var(--relationship-supplier);   --rel-rgb: var(--relationship-supplier-rgb); }
.badge--vendor     { --rel: var(--relationship-vendor);     --rel-rgb: var(--relationship-vendor-rgb); }
.badge--agent_vip  { --rel: var(--relationship-agent_vip);  --rel-rgb: var(--relationship-agent_vip-rgb); }
.badge--shipper    { --rel: var(--relationship-shipper);    --rel-rgb: var(--relationship-shipper-rgb); }
.badge--consignee  { --rel: var(--relationship-consignee);  --rel-rgb: var(--relationship-consignee-rgb); }
.badge--forwarder  { --rel: var(--relationship-forwarder);  --rel-rgb: var(--relationship-forwarder-rgb); }

.badge--client,
.badge--lead,
.badge--agent,
.badge--partner,
.badge--leadership,
.badge--extern,
.badge--former,
.badge--supplier,
.badge--vendor,
.badge--agent_vip,
.badge--shipper,
.badge--consignee,
.badge--forwarder {
  color: var(--rel);
  background: rgb(var(--rel-rgb) / 0.12);
  border-color: rgb(var(--rel-rgb) / 0.3);
}