KPI / Stat

Tarjeta de indicador: .cl-stat dentro de una .cl-card, con .cl-stat-label, .cl-stat-value, tendencia opcional .cl-stat-trend--up|down, sparkline .cl-spark y pie .cl-stat-meta.

KPI con tendencia al alza

El valor usa números tabulares por defecto. La tendencia va dentro del valor, como span.

KPI principal

₡42.87M 4.2%

vs. ₡41.13M anterior+₡1.74M

<div class="cl-card">
  <div class="cl-stat">
    <div class="cl-stat-label">KPI principal</div>
    <div class="cl-stat-value">₡42.87M <span class="cl-stat-trend cl-stat-trend--up"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg> 4.2%</span></div>
    <svg class="cl-spark" viewBox="0 0 120 32" preserveAspectRatio="none" style="height: 32px; color: var(--accent-500)">
      <path d="M 0.0,28.0 L 13.3,24.6 L 26.7,22.9 L 40.0,19.4 L 53.3,21.1 L 66.7,14.3 L 80.0,10.9 L 93.3,7.4 L 106.7,9.1 L 120.0,4.0 L 120,32 L 0,32 Z" fill="currentColor" opacity="0.12"/>
      <path d="M 0.0,28.0 L 13.3,24.6 L 26.7,22.9 L 40.0,19.4 L 53.3,21.1 L 66.7,14.3 L 80.0,10.9 L 93.3,7.4 L 106.7,9.1 L 120.0,4.0" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
    <div class="cl-stat-meta"><span>vs. ₡41.13M anterior</span><span class="cl-mono">+₡1.74M</span></div>
  </div>
</div>

KPI con tendencia a la baja

--down tiñe la tendencia en negativo. El color del sparkline se controla con color en el style del SVG.

Promedio

₡291,665 1.1%

por unidad · mes—

<div class="cl-card">
  <div class="cl-stat">
    <div class="cl-stat-label">Promedio</div>
    <div class="cl-stat-value">₡291,665 <span class="cl-stat-trend cl-stat-trend--down"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12l7 7 7-7"/></svg> 1.1%</span></div>
    <svg class="cl-spark" viewBox="0 0 120 32" preserveAspectRatio="none" style="height: 32px; color: var(--accent-400)">
      <path d="M 0.0,4.0 L 13.3,14.9 L 26.7,12.7 L 40.0,17.1 L 53.3,25.8 L 66.7,19.3 L 80.0,25.8 L 93.3,28.0 L 106.7,25.8 L 120.0,21.5 L 120,32 L 0,32 Z" fill="currentColor" opacity="0.12"/>
      <path d="M 0.0,4.0 L 13.3,14.9 L 26.7,12.7 L 40.0,17.1 L 53.3,25.8 L 66.7,19.3 L 80.0,25.8 L 93.3,28.0 L 106.7,25.8 L 120.0,21.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
    <div class="cl-stat-meta"><span>por unidad · mes</span><span>—</span></div>
  </div>
</div>

KPI sin tendencia

La tendencia es opcional; label, valor y meta bastan.

KPI secundario

₡11.42M

26.5% del totalcategoría B

<div class="cl-card">
  <div class="cl-stat">
    <div class="cl-stat-label">KPI secundario</div>
    <div class="cl-stat-value">₡11.42M</div>
    <svg class="cl-spark" viewBox="0 0 120 32" preserveAspectRatio="none" style="height: 32px; color: var(--warn-500)">
      <path d="M 0.0,28.0 L 13.3,24.5 L 26.7,20.9 L 40.0,19.5 L 53.3,13.9 L 66.7,11.1 L 80.0,8.2 L 93.3,6.8 L 106.7,5.4 L 120.0,4.0 L 120,32 L 0,32 Z" fill="currentColor" opacity="0.12"/>
      <path d="M 0.0,28.0 L 13.3,24.5 L 26.7,20.9 L 40.0,19.5 L 53.3,13.9 L 66.7,11.1 L 80.0,8.2 L 93.3,6.8 L 106.7,5.4 L 120.0,4.0" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
    <div class="cl-stat-meta"><span>26.5% del total</span><span>categoría B</span></div>
  </div>
</div>

Fila de KPIs

El patrón típico de dashboard: cuatro indicadores en .cl-grid-4.