feat(catalog): wire up brand-first OEM catalog UI

- Add brand-catalog.js overlay: Brands -> Categories -> Parts flow
- Update catalog.html: 'Por Marca' button opens BrandCatalog overlay
- Optimize /vehicle-brands to query brands table (fast) instead of 256M part_vehicle_preview
- Keep /brand-categories and /brand-parts using exact match on part_vehicle_preview
- Integrate addToCart with existing CatalogApp cart

pos/templates/catalog.html

@@ -107,9 +107,10 @@
           <span class="breadcrumb__current">Catalogo</span>
         </nav>
         <div class="header-actions" style="position:relative;">
-          <div class="mode-toggle" id="modeToggle" title="Cambiar entre catalogo OEM (TecDoc), marcas locales y consumibles">
+          <div class="mode-toggle" id="modeToggle" title="Cambiar entre catalogo OEM (TecDoc), marcas locales, por marca de vehiculo y consumibles">
             <button data-mode="oem" onclick="CatalogApp.setMode('oem')" disabled style="opacity:0.5;cursor:not-allowed;" title="Próximamente">OEM 🔒</button>
             <button data-mode="local" onclick="CatalogApp.setMode('local')">Local</button>
+            <button data-mode="brand" onclick="BrandCatalog.show()" title="Catalogo por marca de vehiculo">Por Marca</button>
             <button data-mode="supplies" onclick="CatalogApp.setMode('supplies')" title="Aceites, quimicos, herramientas — sin vehiculo">Supplies</button>
           </div>
           <div class="search-bar" id="searchBar">
@@ -268,6 +269,19 @@
     <button class="banner__dismiss" onclick="document.getElementById('offlineBanner').style.display='none'" aria-label="Cerrar">&times;</button>
   </div>
 
+  <!-- Brand Catalog Overlay (full-screen overlay for brand-first browsing) -->
+  <div id="brandCatalogOverlay" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:9000;background:var(--color-bg-base);overflow:auto;padding:var(--space-4);">
+    <div style="max-width:1200px;margin:0 auto;">
+      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4);">
+        <h2 style="margin:0;font-family:var(--font-heading);font-size:var(--text-h3);">Catalogo por Marca</h2>
+        <button onclick="BrandCatalog.hide()" class="btn btn--sm" style="background:none;border:1px solid var(--color-border);color:var(--color-text-primary);padding:8px 16px;border-radius:var(--radius-md);cursor:pointer;">&#10005; Cerrar</button>
+      </div>
+      <div id="brandCatalogBreadcrumb" style="margin-bottom:var(--space-3);color:var(--color-text-muted);font-size:var(--text-body-sm);"></div>
+      <div id="brandCatalogLoading" style="display:none;text-align:center;padding:var(--space-8);"><div class="spinner"></div></div>
+      <div id="brandCatalogContent" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-3);"></div>
+    </div>
+  </div>
+
   <script src="/pos/static/js/i18n.js" defer></script>
   <script src="/pos/static/js/kiosk.js" defer></script>
   <script src="/pos/static/js/app-init.js" defer></script>
@@ -280,5 +294,6 @@
   <script src="/pos/static/js/onboarding.js" defer></script>
   <script>if('serviceWorker' in navigator){navigator.serviceWorker.register('/pos/sw.js',{scope:'/pos/'});}</script>
   <script src="/pos/static/js/pwa-install.js" defer></script>
+  <script src="/pos/static/js/brand-catalog.js?v=1" defer></script>
 </body>
 </html>