/* cz-status — indicador compacto de estado (cor + texto, nunca só cor)
   Variantes via data-state: online | processing | warning | offline | error */

.cz-status {
  --_c: var(--cz-cyan);
  display: inline-flex;
  align-items: center;
  gap: var(--cz-space-2);
  padding: 2px var(--cz-space-3) 2px var(--cz-space-2);
  border: var(--cz-stroke) solid color-mix(in srgb, var(--_c) 40%, transparent);
  border-radius: var(--cz-radius-full);
  background: color-mix(in srgb, var(--_c) 10%, transparent);
  color: var(--_c);
  font-family: var(--cz-font-mono);
  font-size: var(--cz-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cz-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--_c);
  box-shadow: 0 0 6px var(--_c);
}

.cz-status[data-state="online"]     { --_c: var(--cz-success); }
.cz-status[data-state="processing"] { --_c: var(--cz-cyan); }
.cz-status[data-state="warning"]    { --_c: var(--cz-orange); }
.cz-status[data-state="error"]      { --_c: var(--cz-danger); }
.cz-status[data-state="offline"]    { --_c: var(--cz-faint); }
.cz-status[data-state="offline"]::before { box-shadow: none; background: transparent; border: 1px solid var(--_c); }

.cz-status[data-state="processing"]::before { animation: cz-pulse 1.4s var(--cz-ease) infinite; }
@keyframes cz-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}