Mejora, ahora los intercambios estan paginados para que no sea una lista larga, muestran de 15 en 15 los intermcambios

pos/static/css/catalog.css

@@ -88,7 +88,8 @@
     .breadcrumb__link:hover { color: var(--color-primary); }
     .breadcrumb__sep { color: var(--color-text-disabled); }
     .breadcrumb__current { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
-
+    .breadcrumb__back { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-muted); font-size: var(--text-body-sm); cursor: pointer; transition: var(--transition-fast); }
+    .breadcrumb__back:hover { background: var(--color-primary-muted); color: var(--color-primary); }
     .header-actions { display: flex; align-items: center; gap: var(--space-3); }
 
     /* ── Catalog mode toggle (OEM / Local) ── */
@@ -369,6 +370,22 @@
     .alt-item__mfr { font-size: var(--text-caption); color: var(--color-text-muted); }
     .alt-item__stock { font-size: var(--text-caption); }
 
+    /* Compatible vehicles pagination */
+    .compat-pager {
+      display: flex; align-items: center; justify-content: space-between;
+      gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-3);
+      border-top: 1px solid var(--color-border);
+    }
+    .compat-pager__btn {
+      font-family: inherit; font-size: var(--text-caption); font-weight: var(--font-weight-semibold);
+      color: var(--color-text-primary); background: var(--color-surface-2);
+      border: 1px solid var(--color-border); border-radius: var(--radius-sm);
+      padding: var(--space-2) var(--space-3); cursor: pointer; white-space: nowrap;
+    }
+    .compat-pager__btn:hover:not(:disabled) { background: var(--color-surface-3, var(--color-surface-2)); }
+    .compat-pager__btn:disabled { opacity: 0.4; cursor: not-allowed; }
+    .compat-pager__info { font-size: var(--text-caption); color: var(--color-text-muted); text-align: center; flex: 1; }
+
     /* Add to cart section */
     .detail-footer {
       padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border);

pos/static/js/brand-catalog.js

@@ -51,7 +51,7 @@
         return;
       }
       this.el('brandCatalogOverlay').style.display = 'block';
-      document.body.style.overflow = 'hidden';
+      //document.body.style.overflow = 'hidden';
       this.loadBrands();
     },
 

pos/static/js/catalog.js

@@ -276,7 +276,20 @@
         if (nav.nxPartType) parts.push({ label: nav.nxPartType.name, action: null });
         else if (nav.partType) parts.push({ label: nav.partType.name, action: null });
 
+        //Botón para retroceder
+        var backAction = null;
+        if (parts.length > 1) {
+            var prev = parts[parts.length - 2];
+            backAction = prev ? prev.action : 'loadBrands';
+        }
+
         var html = '';
+        //Botón para retroceder
+        if (backAction) {
+            html += '<button class="breadcrumb__back" data-bc-action="' + backAction + '">&#8592; Atr&aacute;s</button>';
+            html += '<span class="breadcrumb__sep" aria-hidden="true">|</span>';
+        }
+        //--------
         for (var i = 0; i < parts.length; i++) {
             if (i > 0) html += '<span class="breadcrumb__sep" aria-hidden="true">/</span>';
             if (i < parts.length - 1 && parts[i].action) {
@@ -303,6 +316,7 @@
                 else if (action === 'loadNxPartTypes') { resetNavFrom('part_types'); loadNexpartPartTypes(); }
             });
         });
+
     }
 
     function resetNav() {
@@ -1260,8 +1274,6 @@
 
 // Compatibilities — deduplicate by (make, model, year, engine)
             if (p.compatibilities && p.compatibilities.length) {
-                html += '<div class="detail-section">';
-                html += '<div class="detail-section__title">Vehiculos compatibles</div>';
                 var seenCompat = {};
                 var uniqCompat = [];
                 p.compatibilities.forEach(function(c) {
@@ -1270,22 +1282,69 @@
                     seenCompat[key] = true;
                     uniqCompat.push(c);
                 });
-                var currentMake = '';
-                uniqCompat.forEach(function(c) {
-                    if (c.make !== currentMake) {
-                        currentMake = c.make;
-                        html += '<div style="font-weight:600;margin-top:8px;">' + esc(c.make) + '</div>';
-                    }
-                    html += '<div style="padding-left:12px;color:var(--color-text-muted);font-size:var(--text-body-sm);">' +
-                        esc(c.model) + ' ' + c.year + ' ' + esc(c.engine || '') + '</div>';
-                });
+                html += '<div class="detail-section">';
+                html += '<div class="detail-section__title">Vehiculos compatibles</div>';
+                html += '<div id="compat-list"></div>';
+                html += '<div id="compat-pager" class="compat-pager"></div>';
                 html += '</div>';
+                compatFullList = uniqCompat;
+            } else {
+                compatFullList = [];
             }
 
             detailBody.innerHTML = html;
+
+            if (compatFullList.length) {
+                renderCompatPage(1);
+            }
         });
     }
 
+    // --- Pagination for "Vehiculos compatibles" ---
+    var compatFullList = [];
+    var compatPageSize = 15;
+    var compatCurrentPage = 1;
+
+    function renderCompatPage(page) {
+        var listEl = document.getElementById('compat-list');
+        var pagerEl = document.getElementById('compat-pager');
+        if (!listEl || !pagerEl) return;
+
+        var totalItems = compatFullList.length;
+        var totalPages = Math.max(1, Math.ceil(totalItems / compatPageSize));
+        page = Math.min(Math.max(1, page), totalPages);
+        compatCurrentPage = page;
+
+        var start = (page - 1) * compatPageSize;
+        var pageItems = compatFullList.slice(start, start + compatPageSize);
+
+        var listHtml = '';
+        var currentMake = '';
+        pageItems.forEach(function(c) {
+            if (c.make !== currentMake) {
+                currentMake = c.make;
+                listHtml += '<div style="font-weight:600;margin-top:8px;">' + esc(c.make) + '</div>';
+            }
+            listHtml += '<div style="padding-left:12px;color:var(--color-text-muted);font-size:var(--text-body-sm);">' +
+                esc(c.model) + ' ' + c.year + ' ' + esc(c.engine || '') + '</div>';
+        });
+        listEl.innerHTML = listHtml;
+
+        if (totalPages > 1) {
+            pagerEl.innerHTML =
+                '<button type="button" id="compat-prev" class="compat-pager__btn"' + (page <= 1 ? ' disabled' : '') + '>&lsaquo; Anterior</button>' +
+                '<span class="compat-pager__info">Pagina ' + page + ' de ' + totalPages + ' (' + totalItems + ' vehiculos)</span>' +
+                '<button type="button" id="compat-next" class="compat-pager__btn"' + (page >= totalPages ? ' disabled' : '') + '>Siguiente &rsaquo;</button>';
+
+            var prevBtn = document.getElementById('compat-prev');
+            var nextBtn = document.getElementById('compat-next');
+            if (prevBtn) prevBtn.addEventListener('click', function () { renderCompatPage(compatCurrentPage - 1); });
+            if (nextBtn) nextBtn.addEventListener('click', function () { renderCompatPage(compatCurrentPage + 1); });
+        } else {
+            pagerEl.innerHTML = '';
+        }
+    }
+
     function closeDetail() {
         detailPanel.classList.remove('is-open');
         detailOverlay.classList.remove('is-visible');
@@ -1788,20 +1847,22 @@
         });
     }
 
+
     function vsYearChanged() {
         var yearId = vsYear.value;
-        vsBrand.innerHTML = '<option value="">Marca...</option>';
-        vsModel.innerHTML = '<option value="">Modelo...</option>';
-        vsEngine.innerHTML = '<option value="">Motor...</option>';
-        vsBrand.disabled = true;
-        vsModel.disabled = true;
-        vsEngine.disabled = true;
-        vsClear.style.display = yearId ? '' : 'none';
+        vsClear.style.display = (yearId || vsBrand.value || vsModel.value) ? '' : 'none';
 
-        if (!yearId) return;
-
-        // Load brands filtered by year
+        // Resetear marca solo si no hay nada seleccionado en ella
         vsBrand.disabled = false;
+        vsEngine.innerHTML = '<option value="">Motor...</option>';
+        vsEngine.disabled = true;
+
+        if (!yearId) {
+            //carga todo
+            vsLoadAllBrands();
+            return;
+        }
+        // Filtrar marcas por año
         apiFetch(API + '/brands?year_id=' + yearId + '&mode=' + catalogMode).then(function (data) {
             var brands = data.data || data;
             if (!brands) return;
@@ -1809,21 +1870,39 @@
                 brands.map(function (b) {
                     return '<option value="' + b.id_brand + '">' + esc(b.name_brand) + '</option>';
                 }).join('');
+            // si hay marca seleccionada despliega modelos
+            if (vsBrand.value) vsBrandChanged();
+        });
+    }
+    function vsLoadAllBrands() {
+        apiFetch(API + '/brands?mode=' + catalogMode).then(function (data) {
+            var brands = data.data || data;
+            if (!brands) return;
+            var current = vsBrand.value;
+            vsBrand.innerHTML = '<option value="">Marca...</option>' +
+                brands.map(function (b) {
+                    return '<option value="' + b.id_brand + '">' + esc(b.name_brand) + '</option>';
+                }).join('');
+            if (current) vsBrand.value = current;
         });
     }
 
     function vsBrandChanged() {
         var brandId = vsBrand.value;
         var yearId = vsYear.value;
+        vsClear.style.display = (yearId || brandId) ? '' : 'none';
+
         vsModel.innerHTML = '<option value="">Modelo...</option>';
         vsEngine.innerHTML = '<option value="">Motor...</option>';
-        vsModel.disabled = true;
+        vsModel.disabled = false;  // cambio
         vsEngine.disabled = true;
 
-        if (!brandId) return;
+        if (!brandId) {
+            vsModel.disabled = true;
+            return;
+        }
 
-        // Load models filtered by brand AND year
-        vsModel.disabled = false;
+        // Cargar modelos con o sin año
         apiFetch(API + '/models?brand_id=' + brandId + (yearId ? '&year_id=' + yearId : '')).then(function (data) {
             var models = data.data || data;
             if (!models) return;
@@ -1831,17 +1910,23 @@
                 models.map(function (m) {
                     return '<option value="' + m.id_model + '">' + esc(m.display_name || m.name_model) + '</option>';
                 }).join('');
+            // si hay modelo seleccionado despliega año
+            if (vsModel.value) vsModelChanged();
         });
     }
 
+
     function vsModelChanged() {
         var modelId = vsModel.value;
         var yearVal = vsYear.value;
+
         vsEngine.innerHTML = '<option value="">Motor...</option>';
         vsEngine.disabled = true;
 
-        if (!modelId || !yearVal) return;
+        if (!modelId) return;
 
+        // Si hay año carga motores
+        if (yearVal) {
             vsEngine.disabled = false;
             apiFetch(API + '/engines?model_id=' + modelId + '&year_id=' + yearVal).then(function (data) {
                 var engines = data.data || data;
@@ -1851,12 +1936,27 @@
                         var label = e.name_engine + (e.trim_level ? ' (' + e.trim_level + ')' : '');
                         return '<option value="' + e.id_mye + '">' + esc(label) + '</option>';
                     }).join('');
-            // If only 1 engine, auto-select
                 if (engines.length === 1) {
                     vsEngine.value = engines[0].id_mye;
                     vsEngineChanged();
                 }
             });
+        } else {
+            // Sin año
+            var brandId = vsBrand.value;
+            if (!brandId) return;
+            nav.brand = { id: parseInt(brandId), name: vsBrand.options[vsBrand.selectedIndex].text };
+            nav.model = { id: parseInt(modelId), name: vsModel.options[vsModel.selectedIndex].text };
+            nav.year = null;
+            nav.engine = null;
+            nav.level = 'categories';
+            pushNavState();
+            loadCategoriesForMode();
+            setTimeout(function () {
+                var body = document.getElementById('pageBody');
+                if (body) body.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            }, 300);
+        }
     }
 
     function vsEngineChanged() {

pos/static/js/config.js

@@ -57,7 +57,7 @@ const Config = (() => {
     // -------------------------------------------------------------------------
     function setTheme(theme) {
         document.documentElement.setAttribute('data-theme', theme);
-        try { localStorage.setItem('nexus-theme', theme); } catch(e) {}
+        try { localStorage.setItem('pos_theme', theme); } catch(e) {}
 
         document.querySelectorAll('.theme-btn').forEach(function(btn) {
             btn.classList.toggle('is-active', btn.dataset.themeTarget === theme);
@@ -802,7 +802,7 @@ const Config = (() => {
 
         // Restore theme
         try {
-            var saved = localStorage.getItem('nexus-theme');
+            var saved = localStorage.getItem('pos_theme');
             if (saved === 'industrial' || saved === 'modern') {
                 setTheme(saved);
             }

pos/static/js/dashboard.js

@@ -48,7 +48,7 @@ const Dashboard = (() => {
     // -------------------------------------------------------------------------
     function setTheme(theme) {
         document.documentElement.setAttribute('data-theme', theme);
-        try { localStorage.setItem('nexus-theme', theme); } catch(e) {}
+        try { localStorage.setItem('pos_theme', theme); } catch(e) {}
         const btnInd = document.getElementById('btn-industrial');
         const btnMod = document.getElementById('btn-modern');
         if (btnInd) btnInd.classList.toggle('active', theme === 'industrial');
@@ -689,7 +689,7 @@ const Dashboard = (() => {
 
         // Restore theme
         try {
-            const saved = localStorage.getItem('nexus-theme');
+            const saved = localStorage.getItem('pos_theme');
             if (saved === 'industrial' || saved === 'modern') {
                 setTheme(saved);
             }

pos/static/js/reports.js

@@ -61,7 +61,7 @@ const Reports = (() => {
     // -------------------------------------------------------------------------
     function setTheme(theme) {
         document.documentElement.setAttribute('data-theme', theme);
-        try { localStorage.setItem('nexus-theme', theme); } catch(e) {}
+        try { localStorage.setItem('pos_theme', theme); } catch(e) {}
         var btnInd = document.getElementById('btn-industrial');
         var btnMod = document.getElementById('btn-modern');
         if (btnInd) btnInd.classList.toggle('is-active', theme === 'industrial');
@@ -745,7 +745,7 @@ const Reports = (() => {
 
         // Restore theme
         try {
-            var saved = localStorage.getItem('nexus-theme') || 'industrial';
+            var saved = localStorage.getItem('pos_theme') || 'industrial';
             setTheme(saved);
         } catch(e) {}
 

pos/templates/catalog.html

@@ -145,14 +145,14 @@
           <div class="vs-arrow">›</div>
           <div class="vs-group">
             <label class="vs-label">Marca</label>
-            <select class="vs-select" id="vsBrand" disabled onchange="CatalogApp.vsBrandChanged()">
+            <select class="vs-select" id="vsBrand"  onchange="CatalogApp.vsBrandChanged()">
               <option value="">Seleccionar...</option>
             </select>
           </div>
           <div class="vs-arrow">›</div>
           <div class="vs-group">
             <label class="vs-label">Modelo</label>
-            <select class="vs-select" id="vsModel" disabled onchange="CatalogApp.vsModelChanged()">
+            <select class="vs-select" id="vsModel"  onchange="CatalogApp.vsModelChanged()">
               <option value="">Seleccionar...</option>
             </select>
           </div>
@@ -302,7 +302,7 @@
   </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 id="brandCatalogOverlay" style="display:none;position:relative;top:0;left:0;right:0;bottom:0;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>

pos/templates/inventory.html

@@ -644,13 +644,13 @@
       });
 
       // Persist preference
-      try { localStorage.setItem('nexus-theme', theme); } catch(e) {}
+      try { localStorage.setItem('pos_theme', theme); } catch(e) {}
     }
 
     // Restore on load
     (function() {
       var saved;
-      try { saved = localStorage.getItem('nexus-theme'); } catch(e) {}
+      try { saved = localStorage.getItem('pos_theme'); } catch(e) {}
       if (saved === 'industrial' || saved === 'modern') {
         setTheme(saved);
       }