se hacen modificaciones de catalogo a peticion de observaciones de carlos 24052026

pos/static/css/catalog.css

@@ -90,7 +90,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) ── */

pos/static/js/brand-catalog.js

@@ -50,7 +50,7 @@
         return;
       }
       this.el('brandCatalogOverlay').style.display = 'block';
-      document.body.style.overflow = 'hidden';
+      //document.body.style.overflow = 'hidden';
       this.loadBrands();
     },
 
@@ -59,7 +59,7 @@
       document.body.style.overflow = '';
       this.reset();
     },
-
+    
     reset: function() {
       this.state = 'brands';
       this.nav = { brand: null, brandId: null, model: null, modelId: null, year: null, yearId: null, engine: null, myeId: null, category: null, categoryId: null };

pos/static/js/catalog.js

@@ -259,7 +259,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) {
@@ -286,6 +299,7 @@
                 else if (action === 'loadNxPartTypes') { resetNavFrom('part_types'); loadNexpartPartTypes(); }
             });
         });
+
     }
 
     function resetNav() {
@@ -1668,20 +1682,22 @@
         });
     }
 
+
     function vsYearChanged() {
         var yearId = vsYear.value;
-        vsBrand.innerHTML = '<option value="">Marca...</option>';
+        vsClear.style.display = (yearId || vsBrand.value || vsModel.value) ? '' : 'none';
-        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';
 
-        if (!yearId) return;
+        // Resetear marca solo si no hay nada seleccionado en ella
-
-        // Load brands filtered by year
         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;
@@ -1689,21 +1705,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
+        // Cargar modelos con o sin año
-        vsModel.disabled = false;
         apiFetch(API + '/models?brand_id=' + brandId + (yearId ? '&year_id=' + yearId : '')).then(function (data) {
             var models = data.data || data;
             if (!models) return;
@@ -1711,32 +1745,53 @@
                 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;
 
-        vsEngine.disabled = false;
+        // Si hay año carga motores
-        apiFetch(API + '/engines?model_id=' + modelId + '&year_id=' + yearVal).then(function (data) {
+        if (yearVal) {
-            var engines = data.data || data;
+            vsEngine.disabled = false;
-            if (!engines) return;
+            apiFetch(API + '/engines?model_id=' + modelId + '&year_id=' + yearVal).then(function (data) {
-            vsEngine.innerHTML = '<option value="">Motor...</option>' +
+                var engines = data.data || data;
-                engines.map(function (e) {
+                if (!engines) return;
-                    var label = e.name_engine + (e.trim_level ? ' (' + e.trim_level + ')' : '');
+                vsEngine.innerHTML = '<option value="">Motor...</option>' +
-                    return '<option value="' + e.id_mye + '">' + esc(label) + '</option>';
+                    engines.map(function (e) {
-                }).join('');
+                        var label = e.name_engine + (e.trim_level ? ' (' + e.trim_level + ')' : '');
-            // If only 1 engine, auto-select
+                        return '<option value="' + e.id_mye + '">' + esc(label) + '</option>';
-            if (engines.length === 1) {
+                    }).join('');
-                vsEngine.value = engines[0].id_mye;
+                if (engines.length === 1) {
-                vsEngineChanged();
+                    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/templates/catalog.html

@@ -136,14 +136,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>
@@ -270,7 +270,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>