/* cz-metric — valor grande, unidade e tendência
   Estrutura: .cz-metric > __label + __value (> __unit) + __trend[data-trend="up|down|flat"]
   A tendência é expressa por seta E texto, nunca só por cor. */

.cz-metric { display: flex; flex-direction: column; gap: var(--cz-space-2); min-width: 0; }

.cz-metric__label {
  font-family: var(--cz-font-mono);
  font-size: var(--cz-text-xs);
  letter-spacing: var(--cz-tracking-label);
  text-transform: uppercase;
  color: var(--cz-muted);
}

.cz-metric__value {
  display: flex;
  align-items: baseline;
  gap: var(--cz-space-2);
  font-family: var(--cz-font-display);
  font-size: var(--cz-text-2xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--cz-text-strong);
  text-shadow: var(--cz-text-glow);
}
.cz-metric__unit {
  font-family: var(--cz-font-mono);
  font-size: var(--cz-text-sm);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--cz-cyan);
  text-shadow: none;
}

.cz-metric__trend {
  display: inline-flex;
  align-items: center;
  gap: var(--cz-space-1);
  font-family: var(--cz-font-mono);
  font-size: var(--cz-text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--cz-muted);
}
.cz-metric__trend::before { font-size: 0.9em; }
.cz-metric__trend[data-trend="up"] { color: var(--cz-success); }
.cz-metric__trend[data-trend="up"]::before { content: "▲"; }
.cz-metric__trend[data-trend="down"] { color: var(--cz-orange-soft); }
.cz-metric__trend[data-trend="down"]::before { content: "▼"; }
.cz-metric__trend[data-trend="flat"]::before { content: "■"; }

/* Barra de capacidade opcional */
.cz-metric__bar {
  position: relative;
  height: 4px;
  border-radius: var(--cz-radius-full);
  background: var(--cz-border-faint);
  overflow: hidden;
}
.cz-metric__bar > span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--value, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cz-violet), var(--cz-cyan));
  box-shadow: var(--cz-glow);
  transition: width var(--cz-duration-slow) var(--cz-ease-out);
}