/* ==========================================================================
   CAOSmarada Design System · KPI Block
   --------------------------------------------------------------------------
   Métrica numérica em Geist Mono tabular. Label micro caps Mono. Delta opcional.
   Cores: positivo emerald, negativo rose, Sistema B gold.
   Preview: .planning/design-preview/components.html (seção "KPI Block").
   ========================================================================== */

.cmd-kpi {
  display: flex;
  flex-direction: column;
  gap: var(--cmd-sp-1);
}

.cmd-kpi__label {
  font: var(--cmd-w-semibold) var(--cmd-f-nano)/1 var(--cmd-ff-mono);
  color: var(--cmd-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--cmd-ls-caps);
}

.cmd-kpi__value {
  font-family: var(--cmd-ff-mono);
  font-size: 28px;
  font-weight: var(--cmd-w-medium);
  letter-spacing: -0.02em;
  color: var(--cmd-text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.cmd-kpi__value--up    { color: var(--cmd-em); }
.cmd-kpi__value--down  { color: var(--cmd-sell); }
.cmd-kpi__value--sys-b { color: var(--cmd-sys-b); }
.cmd-kpi__value--muted { color: var(--cmd-text-tertiary); }

.cmd-kpi__delta {
  font: var(--cmd-w-regular) var(--cmd-f-micro)/1 var(--cmd-ff-mono);
  color: var(--cmd-text-tertiary);
  font-variant-numeric: tabular-nums;
}

.cmd-kpi__delta--up   { color: var(--cmd-em); }
.cmd-kpi__delta--down { color: var(--cmd-sell); }

/* Variante compacta — valor menor pra grids densas */
.cmd-kpi--sm .cmd-kpi__value {
  font-size: 20px;
}

/* Variante inline — label + valor + delta numa linha */
.cmd-kpi--inline {
  flex-direction: row;
  align-items: baseline;
  gap: var(--cmd-sp-2);
}

.cmd-kpi--inline .cmd-kpi__value {
  font-size: 16px;
}