diff --git a/pos/static/js/customers.js b/pos/static/js/customers.js
index fd0943b..34caada 100644
--- a/pos/static/js/customers.js
+++ b/pos/static/js/customers.js
@@ -127,7 +127,12 @@ const Customers = (() => {
         if (!tbody) return;
 
         if (!customers || customers.length === 0) {
-            tbody.innerHTML = '<tr><td colspan="9" style="text-align:center;padding:var(--space-8);color:var(--color-text-muted);">Sin resultados.</td></tr>';
+            tbody.innerHTML = '<tr><td colspan="9">' + renderEmptyState({
+                icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>',
+                title: 'Sin clientes',
+                subtitle: 'No se encontraron clientes registrados.',
+                action: '<button class="btn btn--primary btn--sm" onclick="Customers.openCreateModal()">Nuevo cliente</button>'
+            }) + '</td></tr>';
             return;
         }
 
@@ -137,7 +142,7 @@ const Customers = (() => {
                 rowHeight: 52,
                 buffer: 3,
                 renderRow: renderCustomerRow,
-                emptyHtml: '<tr><td colspan="9" style="text-align:center;padding:var(--space-8);color:var(--color-text-muted);">Sin resultados.</td></tr>'
+                emptyHtml: '<tr><td colspan="9">' + renderEmptyState({ title: 'Sin clientes', subtitle: 'No hay clientes registrados.' }) + '</td></tr>'
             });
         }
         customersVS.setData(customers);
@@ -486,7 +491,7 @@ const Customers = (() => {
         if (nameEl) nameEl.textContent = currentCustomer.name;
 
         const content = document.getElementById('statementContent');
-        if (content) content.innerHTML = '<div style="text-align:center;padding:20px;color:var(--color-text-muted);">Cargando...</div>';
+        if (content) content.innerHTML = '<div style="padding:20px;"><div class="skeleton skeleton--text"></div><div class="skeleton skeleton--text-sm" style="width:70%;"></div><div class="skeleton skeleton--text" style="width:50%;"></div></div>';
         modal.classList.add('active');
 
         try {
diff --git a/pos/templates/customers.html b/pos/templates/customers.html
index 4366db7..aa274f2 100644
--- a/pos/templates/customers.html
+++ b/pos/templates/customers.html
@@ -627,7 +627,7 @@
   <script src="/pos/static/js/pos-utils.js?v=2" defer></script>
   <script src="/pos/static/js/sidebar.js" defer></script>
   <script src="/pos/static/js/virtual-scroll.js" defer></script>
-  <script src="/pos/static/js/customers.js" defer></script>
+  <script src="/pos/static/js/customers.js?v=2" defer></script>
   <script src="/pos/static/js/offline-banner.js" defer></script>
   <script src="/pos/static/js/sync-engine.js" defer></script>
   <script>if('serviceWorker' in navigator){navigator.serviceWorker.register('/pos/sw.js',{scope:'/pos/'});}</script>