feat(pos): integrate design system for clients, inventory, catalog + offline banner

- Replace customers.html with design system clientes page, add slide panel + wire to customers.js
- Replace inventory.html with design system inventario page, load inventory.js
- Add empty state component to catalog product grid (hidden, shown when no results)
- Add offline banner HTML/CSS to all three pages
- Create offline-banner.js: listens online/offline events, auto-dismisses restored banner after 3s

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

pos/static/js/offline-banner.js

@@ -0,0 +1,46 @@
+// /home/Autopartes/pos/static/js/offline-banner.js
+// Global offline/online banner controller.
+// Include this script in any page that has an #offlineBanner element.
+
+(function () {
+  'use strict';
+
+  var banner     = document.getElementById('offlineBanner');
+  var bannerText = document.getElementById('offlineBannerText');
+  if (!banner || !bannerText) return;
+
+  var dismissTimer = null;
+
+  function showOffline() {
+    clearTimeout(dismissTimer);
+    banner.className = 'banner banner--error';
+    banner.style.display = 'flex';
+    banner.style.animation = 'slideDown 0.35s ease-out forwards';
+    bannerText.innerHTML = '<strong>Conexion perdida</strong> — Intentando reconectar...';
+  }
+
+  function showOnline() {
+    clearTimeout(dismissTimer);
+    banner.className = 'banner banner--success';
+    banner.style.display = 'flex';
+    banner.style.animation = 'slideDown 0.35s ease-out forwards';
+    bannerText.innerHTML = '<strong>Conexion restaurada</strong> — Sincronizando datos...';
+
+    // Auto-dismiss after 3 seconds
+    dismissTimer = setTimeout(function () {
+      banner.style.animation = 'slideUp 0.3s ease-in forwards';
+      banner.addEventListener('animationend', function onEnd() {
+        banner.style.display = 'none';
+        banner.removeEventListener('animationend', onEnd);
+      }, { once: true });
+    }, 3000);
+  }
+
+  // Show warning immediately if already offline
+  if (!navigator.onLine) {
+    showOffline();
+  }
+
+  window.addEventListener('offline', showOffline);
+  window.addEventListener('online', showOnline);
+})();