Empty states

Cómo se ve la app cuando no hay datos: .cl-empty dentro de una .cl-card, con .cl-empty-icon, .cl-empty-title y .cl-empty-text. Amigable y accionable, no decorativo — casi siempre lleva un botón para resolver el estado.

Sin registros

Primer uso de una pantalla vacía: ofrecé importar o crear el primer registro.

<div class="cl-card">
  <div class="cl-empty">
    <div class="cl-empty-icon"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3.2"/><path d="M3.5 19c.6-3 2.9-4.5 5.5-4.5s4.9 1.5 5.5 4.5"/><circle cx="17" cy="9" r="2.4"/><path d="M16 14.6c2.6.2 4.4 1.7 4.9 4.4"/></svg></div>
    <div class="cl-empty-title">Aún no hay registros</div>
    <div class="cl-empty-text">Comenzá creando el primer registro o importando un CSV.</div>
    <div class="cl-row" style="justify-content: center; gap: 8px">
      <button class="cl-btn cl-btn--secondary cl-btn--sm"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20V8M6 13l6-6 6 6"/><path d="M4 20h16"/></svg> Importar CSV</button>
      <button class="cl-btn cl-btn--primary cl-btn--sm"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg> Nuevo registro</button>
    </div>
  </div>
</div>

Sin resultados de búsqueda

Cuando un filtro o búsqueda no encuentra nada, dejá salir fácil con "Limpiar filtros".

<div class="cl-card">
  <div class="cl-empty">
    <div class="cl-empty-icon"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="6.5"/><path d="m20 20-3.5-3.5"/></svg></div>
    <div class="cl-empty-title">Sin resultados para "carlos m"</div>
    <div class="cl-empty-text">Probá con otro código, categoría o limpia los filtros aplicados.</div>
    <button class="cl-btn cl-btn--secondary cl-btn--sm">Limpiar filtros</button>
  </div>
</div>

Sin períodos abiertos

Acción primaria única y clara para desbloquear el flujo.

<div class="cl-card">
  <div class="cl-empty">
    <div class="cl-empty-icon"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="5" width="17" height="15" rx="2"/><path d="M3.5 9.5h17"/><path d="M8 3v4M16 3v4"/></svg></div>
    <div class="cl-empty-title">No hay períodos abiertos</div>
    <div class="cl-empty-text">Creá el período de noviembre para empezar a procesar.</div>
    <button class="cl-btn cl-btn--primary cl-btn--sm"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg> Abrir período</button>
  </div>
</div>

Todo al día

Estado positivo: el ícono usa un tinte --pos-500 / --pos-600 y no necesita acción.

<div class="cl-card">
  <div class="cl-empty">
    <div class="cl-empty-icon" style="background: color-mix(in srgb, var(--pos-500) 14%, transparent); color: var(--pos-600)"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><polyline points="9 12 11 14 15 10"/></svg></div>
    <div class="cl-empty-title">Todo al día</div>
    <div class="cl-empty-text">No hay tareas pendientes ni alertas. Disfrutá tu café.</div>
  </div>
</div>

Error al cargar

Estado de error: tinte --neg-500 / --neg-600 y una acción de reintentar.

<div class="cl-card">
  <div class="cl-empty">
    <div class="cl-empty-icon" style="background: color-mix(in srgb, var(--neg-500) 14%, transparent); color: var(--neg-600)"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M15 9 9 15M9 9l6 6"/></svg></div>
    <div class="cl-empty-title">No pudimos cargar los datos</div>
    <div class="cl-empty-text">Error de conexión con el servicio. Probá nuevamente en un momento.</div>
    <button class="cl-btn cl-btn--secondary cl-btn--sm"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 4 14h7l-1 8 9-12h-7z"/></svg> Reintentar</button>
  </div>
</div>

Datos insuficientes

Para reportes o gráficos que necesitan un mínimo de datos históricos.

<div class="cl-card">
  <div class="cl-empty">
    <div class="cl-empty-icon"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20V4"/><path d="M4 20h16"/><path d="M8 16v-5M12 16V8M16 16v-9"/></svg></div>
    <div class="cl-empty-title">Aún no hay datos suficientes</div>
    <div class="cl-empty-text">Los reportes se activan cuando tengás al menos 3 períodos cerrados.</div>
  </div>
</div>