fix(builder): corregir caracteres rotos y limpiar menu superior

codex/VERSIONADO_IA.md

@@ -61,8 +61,14 @@
 2. Fase 2 (estructura): separar renderers por bloque y reducir inline styles para automatizacion.
 3. Fase 3 (presets): presets por rubro + reglas responsive + variantes exportables.
 
-### Fase 1 Builder (navbar + hero premium)
-- Commit: `429602c`
-- Objetivo: implementar navbar premium y hero de dos columnas con tokens de espaciado/radius/sombras para consistencia visual.
+### Ajustes Builder (limpieza + preview + ancho)
+- Commit: `7c5f671`
+- Objetivo: quitar texto en barra Apple, limpiar menu vacio, preview local funcional sin salir de builder, ancho desktop al 100%, control de ancho por bloque y descripcion en bloque video.
 - Revert:
-  - `git revert 429602c`
+  - `git revert 7c5f671`
+
+### Ajustes Builder (preview limpio + menu modos)
+- Commit: `dd98e9d`
+- Objetivo: mejorar vista previa (forzar modo limpio y restaurar estado), eliminar precarga automatica de bloques, y agregar modo de menu (horizontal/acordeon/ambos).
+- Revert:
+  - `git revert dd98e9d`

elementor/templates/elementor_builder.html

@@ -24,7 +24,7 @@
     .btn.secondary{background:transparent;color:var(--text);border:1px solid var(--border)}
     .btn.icon{width:34px;height:34px;padding:0;display:flex;align-items:center;justify-content:center}
     .btn.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(89,217,200,.15)}
-    .preview-shell{background:#0f1520;border:1px solid #222b3a;border-radius:18px;padding:14px;width:100%;max-width:1200px;margin:0 auto}
+    .preview-shell{background:#0f1520;border:1px solid #222b3a;border-radius:18px;padding:14px;width:100%;max-width:none;margin:0 auto}
     body.ub24 .preview-shell{background:#eef1f6;border-color:#e5e7eb}
     body.ub24 .apple-bar{display:none}
     body.ub24 .preview-shell{padding:0;border-radius:12px}
@@ -36,7 +36,7 @@
     body.ub24 #btnAlign, body.ub24 #btnBack{display:none}
     body.ub24 .topbar .top-meta{display:none}
     body.ub24 .block-item{display:flex;align-items:center;gap:8px}
-    body.ub24 .block-item:before{content:"â–£";color:#6b7280;font-size:12px}
+    body.ub24 .block-item:before{content:"*";color:#6b7280;font-size:12px}
     body.ub24 .inspector .section-title{margin-top:0}
     body.ub24 .inspector .acc{background:#f9fafb;border-color:#e5e7eb}
     body.ub24 .inspector label{color:#6b7280}
@@ -136,7 +136,7 @@
     .menu-accordion summary{list-style:none;cursor:pointer;font-weight:600}
     .menu-accordion summary::-webkit-details-marker{display:none}
     .menu-links{display:flex;flex-direction:column;gap:8px;margin-top:8px}
-    .menu-accordion summary::after{content:"â–¾";float:right;color:var(--site-muted)}
+    .menu-accordion summary::after{content:"v";float:right;color:var(--site-muted)}
     .float-whatsapp{position:fixed;right:22px;bottom:22px;width:52px;height:52px;border-radius:999px;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px rgba(0,0,0,.22);z-index:999;text-decoration:none}
     .float-whatsapp:hover{transform:translateY(-2px)}
     @media (max-width:980px){
@@ -178,8 +178,8 @@
     details.acc{border:1px solid var(--border);border-radius:12px;padding:8px 10px;margin-bottom:10px;background:#0f172a}
     details.acc summary{list-style:none;cursor:pointer;font-weight:600}
     details.acc summary::-webkit-details-marker{display:none}
-    details.acc summary:after{content:"â–¾";float:right;color:var(--muted)}
-    details.acc[open] summary:after{content:"â–´"}
+    details.acc summary:after{content:"v";float:right;color:var(--muted)}
+    details.acc[open] summary:after{content:"^"}
     .acc-body{margin-top:8px}
     .danger{background:transparent;border:1px solid #f87171;color:#f87171;padding:8px;border-radius:999px;width:100%;cursor:pointer}
     @media (max-width:1100px){.app{grid-template-columns:220px 1fr}.inspector{display:none}}
@@ -219,7 +219,7 @@
         <div class="block-item" draggable="true" data-type="button" data-multi="true">Boton</div>
         <div class="block-item" draggable="true" data-type="video" data-multi="true">Video</div>
         <div class="block-item" draggable="true" data-type="social" data-multi="false">Redes</div>
-        <div class="block-item" draggable="true" data-type="review" data-multi="true">Reseña</div>
+        <div class="block-item" draggable="true" data-type="review" data-multi="true">Resena</div>
         <div class="block-item" draggable="true" data-type="calendar" data-multi="false">Calendario</div>
       </div>
     </aside>
@@ -259,7 +259,6 @@
         <div class="apple">
           <div class="apple-bar">
             <span class="apple-dot red"></span><span class="apple-dot yellow"></span><span class="apple-dot green"></span>
-            <span style="margin-left:6px">{{ slug }}</span>
           </div>
           <div class="canvas" id="previewCanvas"></div>
         </div>
@@ -447,6 +446,7 @@ const state = {
     let resizeRaf = 0;
     let pendingMove = null;
     let pendingResize = null;
+    let previewStateBefore = null;
 
     function makeId(){ return "block_" + Date.now() + "_" + Math.floor(Math.random()*1000); }
     function getDefaultPos(){
@@ -457,7 +457,7 @@ const state = {
     }
     function defaultData(type){
       switch(type){
-        case "menu": return { title:"Menu", items:[] };
+        case "menu": return { title:"Menu", items:[], menu_mode:"both" };
         case "hero": return { title:"Tu propuesta de valor", subtitle:"Explica en una frase por que elegirte.", button_text:"Contactar", button_url:"#contacto", image_url:"" };
         case "text": return { text:"Describe tu negocio aqui." };
         case "image": return { url:"", alt:"", caption:"", fit:"cover", overlay_text:"" };
@@ -469,7 +469,7 @@ const state = {
         case "map": return { title:"Ubicacion", address:"" };
         case "button": return { text:"Accion", url:"#", style:"primary", size:"md"};
         case "social": return { instagram:"", facebook:"", whatsapp:"", tiktok:"", youtube:"", icon_size:18, icon_color:"#0b0c10", show_text:true, icon_style:"pill" };
-        case "video": return { url:"" };
+        case "video": return { url:"", description:"" };
         case "review": return { title:"Reseña destacada", name:"Cliente feliz", text:"Excelente servicio y resultados profesionales.", rating:5, style:"card" };
         case "calendar": return { title:"Agenda una cita", note:"Disponible en plan premium. Proximamente.", embed_url:"" };
         default: return {};
@@ -670,13 +670,15 @@ const state = {
         const links = items.map(it=>`<a class="site-nav-link" href="#${it.id}">${escapeHtml(it.label)}</a>`).join("");
         const mobileLinks = items.map(it=>`<a class="site-nav-link" href="#${it.id}">${escapeHtml(it.label)}</a>`).join("");
         const logo = state.settings.logo_url ? `<img src="${escapeHtml(state.settings.logo_url)}" alt="Logo" />` : "";
+        const mode = (block.data?.menu_mode || "both").toLowerCase();
+        const showInline = mode === "both" || mode === "inline";
+        const showAccordion = mode === "both" || mode === "accordion";
         return `<div class="site-nav">
           <div class="site-brand">${logo}<span>${escapeHtml(state.settings.site_name||"GKACHELE")}</span></div>
-          <div class="menu-inline site-nav-links">${links || '<span class="menu-empty">Sin secciones</span>'}</div>
-          <a href="#contacto" class="site-nav-cta">Contactar</a>
-          <details class="menu-accordion">
+          <div class="menu-inline site-nav-links" style="${showInline ? "" : "display:none"}">${links}</div>
+          <details class="menu-accordion" style="${showAccordion ? "" : "display:none"}">
             <summary>Menu</summary>
-            <div class="menu-links">${mobileLinks || '<span class="menu-empty">Sin secciones</span>'}</div>
+            <div class="menu-links">${mobileLinks}</div>
           </details>
         </div>`;
       }
@@ -819,11 +821,12 @@ const state = {
       }
       if (block.type==="video"){
         const embed = normalizeVideoUrl(block.data.url);
+        const desc = block.data.description ? `<div style="margin-top:8px;color:var(--site-muted);font-size:12px">${escapeHtml(block.data.description)}</div>` : "";
         if (embed){
           if (embed.startsWith("data:video/")){
-            return `<video src="${escapeHtml(embed)}" style="width:100%;border-radius:12px" controls></video>`;
+            return `<video src="${escapeHtml(embed)}" style="width:100%;border-radius:12px" controls></video>${desc}`;
           }
-          return `<div style="position:relative;padding-top:56.25%;border-radius:12px;overflow:hidden"><iframe src="${escapeHtml(embed)}" style="position:absolute;inset:0;width:100%;height:100%;border:0" allowfullscreen></iframe></div>`;
+          return `<div style="position:relative;padding-top:56.25%;border-radius:12px;overflow:hidden"><iframe src="${escapeHtml(embed)}" style="position:absolute;inset:0;width:100%;height:100%;border:0" allowfullscreen></iframe></div>${desc}`;
         }
         return `<div class="inline-drop" data-inline-video="true">Suelta video o click</div>`;
       }
@@ -944,7 +947,7 @@ const state = {
           el.style.transform = `translate3d(${pos.x}px, ${pos.y}px, 0)`;
           const defaultWidth = block.type === "menu" ? 90 : (state.settings.two_col ? 48 : 70);
           const w = Math.max(30, Math.min(100, Number(block.data?.width || defaultWidth)));
-          el.style.width = `calc(${w}% - 8px)`;
+          el.style.width = `${w}%`;
           const h = Number(block.data?.height || 0);
           if (h > 60){ el.style.height = h + "px"; }
           el.style.cursor = "grab";
@@ -1018,12 +1021,13 @@ const state = {
       });
       if (state.settings.free_drag){
         let maxBottom = 700;
-        state.blocks.forEach((b)=>{
-          const h = Number(b.data?.height || 220);
-          const y = Number(b.pos?.y || 0);
-          maxBottom = Math.max(maxBottom, y + h + 120);
+        inner.querySelectorAll(".block").forEach((node)=>{
+          const n = node;
+          maxBottom = Math.max(maxBottom, n.offsetTop + n.offsetHeight + 120);
         });
         canvas.style.minHeight = maxBottom + "px";
+      } else {
+        canvas.style.minHeight = "700px";
       }
       const scrollBtn = document.createElement("button");
       scrollBtn.className = "scroll-btn";
@@ -1082,8 +1086,12 @@ const state = {
       let html = `<div style="font-weight:600;margin-bottom:6px;text-transform:capitalize">${block.type}</div>`;
       const data=block.data||{};
       const input=(label,id,val)=>`<div class="row"><label>${label}</label><input id="${id}" type="text" value="${escapeHtml(val||"")}"></div>`;
+      const widthVal = Math.max(30, Math.min(100, Number(data.width || 100)));
+      html += `<div class="row"><label>Ancho bloque (%)</label><input id="blockWidth" type="range" min="30" max="100" value="${widthVal}"><div id="blockWidthValue" style="margin-top:4px;color:var(--muted);font-size:12px">${widthVal}%</div></div>`;
       if (block.type==="menu"){
         html+=input("Titulo","menuTitle",data.title);
+        const mm = escapeHtml(data.menu_mode || "both");
+        html+=`<div class="row"><label>Modo menu</label><select id="menuMode"><option value="both" ${mm==="both"?"selected":""}>Ambos</option><option value="inline" ${mm==="inline"?"selected":""}>Horizontal</option><option value="accordion" ${mm==="accordion"?"selected":""}>Acordeon</option></select></div>`;
       } else if (block.type==="hero"){
         html+=input("Titulo","heroTitle",data.title);
         html+=input("Subtitulo","heroSubtitle",data.subtitle);
@@ -1142,6 +1150,7 @@ const state = {
         html+=`<div class="row"><label>Mostrar texto</label><input id="socialShowText" type="checkbox" ${data.show_text !== false ? "checked" : ""}></div>`;
       } else if (block.type==="video"){
         html+=input("URL video","videoUrl",data.url);
+        html+=input("Descripcion","videoDesc",data.description);
         html+=`<div class="row"><label>Video (arrastrar)</label><div class="dropzone" id="videoDrop">${data.url ? "Video cargado" : "Suelta video o click"}</div><input id="videoFile" type="file" accept="video/*" hidden></div>`;
       } else if (block.type==="map"){
         html+=input("Titulo","mapTitle",data.title);
@@ -1188,11 +1197,26 @@ const state = {
         el.addEventListener("input",()=>applyInspector(block));
         el.addEventListener("change",()=>applyInspector(block));
       });
+      const widthEl = document.getElementById("blockWidth");
+      const widthValueEl = document.getElementById("blockWidthValue");
+      if (widthEl && widthValueEl){
+        const updateWidthLabel = ()=>{ widthValueEl.textContent = `${widthEl.value}%`; };
+        widthEl.addEventListener("input", updateWidthLabel);
+        updateWidthLabel();
+      }
       document.getElementById("deleteBlockBtn").addEventListener("click",()=>{ state.blocks=state.blocks.filter(b=>b.id!==block.id); selectedBlockId=null; renderInspector(); renderPreview(); });
     }
 
     function applyInspector(block){
-      if (block.type==="menu"){ block.data.title=document.getElementById("menuTitle").value; }
+      const widthEl = document.getElementById("blockWidth");
+      if (widthEl){
+        block.data.width = Math.max(30, Math.min(100, Number(widthEl.value || 100)));
+      }
+      if (block.type==="menu"){
+        block.data.title=document.getElementById("menuTitle").value;
+        const mm = document.getElementById("menuMode");
+        if (mm){ block.data.menu_mode = mm.value || "both"; }
+      }
       else if (block.type==="hero"){
         block.data.title=document.getElementById("heroTitle").value;
         block.data.subtitle=document.getElementById("heroSubtitle").value;
@@ -1241,7 +1265,11 @@ const state = {
         const showEl = document.getElementById("socialShowText");
         if (showEl){ block.data.show_text = !!showEl.checked; }
       }
-      else if (block.type==="video"){ block.data.url=document.getElementById("videoUrl").value; }
+      else if (block.type==="video"){
+        block.data.url=document.getElementById("videoUrl").value;
+        const vd = document.getElementById("videoDesc");
+        if (vd){ block.data.description = vd.value; }
+      }
       else if (block.type==="map"){
         block.data.title=document.getElementById("mapTitle").value;
         block.data.address=document.getElementById("mapAddress").value;
@@ -1578,7 +1606,7 @@ const state = {
       };
       document.getElementById("btnSizePhone").addEventListener("click",()=>setSize("520px","btnSizePhone"));
       document.getElementById("btnSizeTablet").addEventListener("click",()=>setSize("820px","btnSizeTablet"));
-      document.getElementById("btnSizeDesktop").addEventListener("click",()=>setSize("1200px","btnSizeDesktop"));
+      document.getElementById("btnSizeDesktop").addEventListener("click",()=>setSize("100%","btnSizeDesktop"));
       setShellClass("size-desktop");
     }
     function wireThemeToggle(){
@@ -1641,34 +1669,56 @@ const state = {
       if (BUILDER_MODE === "ub24"){
         state.settings.free_drag = false;
       }
-      if (!state.blocks.length){ state.blocks=[ {id:makeId(),type:"hero",data:defaultData("hero")},{id:makeId(),type:"features",data:defaultData("features")},{id:makeId(),type:"gallery",data:defaultData("gallery")},{id:makeId(),type:"contact",data:defaultData("contact")} ]; }
+      state.blocks = [];
+      selectedBlockId = null;
       wireSidebar(); wirePreviewDrop(); wireInlineEditing(); wireSettings(); wireFreeDragToggle(); wireJumpSelect(); wirePreviewSize(); wireThemeToggle();
       const backBtn = document.getElementById("btnBack");
       if (backBtn){ backBtn.addEventListener("click",()=>{ window.history.back(); }); }
       const previewBtn = document.getElementById("btnPreview");
       if (previewBtn){
         previewBtn.addEventListener("click",()=>{
-          if (BUILDER_MODE === "ub24"){
           document.body.classList.toggle("preview-mode");
-            const app = document.querySelector(".app");
           const isPreview = document.body.classList.contains("preview-mode");
-            if (app) app.style.display = isPreview ? "none" : "grid";
+          const sidebar = document.querySelector(".sidebar");
+          const inspector = document.querySelector(".inspector");
+          const main = document.querySelector(".main");
           const shell = document.querySelector(".preview-shell");
+          const activeSizeBtn = document.querySelector("#btnSizePhone.active, #btnSizeTablet.active, #btnSizeDesktop.active");
+          const activeSizeId = activeSizeBtn ? activeSizeBtn.id : "btnSizeDesktop";
+          if (isPreview && shell){
+            previewStateBefore = {
+              maxWidth: shell.style.maxWidth || "",
+              margin: shell.style.margin || "",
+              activeSizeId
+            };
+          }
+          if (sidebar) sidebar.style.display = isPreview ? "none" : "";
+          if (inspector) inspector.style.display = isPreview ? "none" : "";
+          if (main) main.style.padding = isPreview ? "8px" : "";
           if (shell){
             if (isPreview){
-                shell.style.maxWidth = "1200px";
-                shell.style.margin = "40px auto";
-                shell.style.display = "block";
-                document.body.appendChild(shell);
-              } else {
-                const main = document.querySelector(".main");
-                if (main) main.appendChild(shell);
+              shell.style.maxWidth = "100%";
+              shell.style.margin = "8px auto";
+              shell.classList.remove("size-phone","size-tablet","size-desktop");
+              shell.classList.add("size-desktop");
+              ["btnSizePhone","btnSizeTablet","btnSizeDesktop"].forEach(id=>{
+                const b=document.getElementById(id);
+                if (b) b.classList.toggle("active", id==="btnSizeDesktop");
+              });
+            } else if (previewStateBefore){
+              shell.style.maxWidth = previewStateBefore.maxWidth;
+              shell.style.margin = previewStateBefore.margin;
+              shell.classList.remove("size-phone","size-tablet","size-desktop");
+              const map = { btnSizePhone: "size-phone", btnSizeTablet: "size-tablet", btnSizeDesktop: "size-desktop" };
+              shell.classList.add(map[previewStateBefore.activeSizeId] || "size-desktop");
+              ["btnSizePhone","btnSizeTablet","btnSizeDesktop"].forEach(id=>{
+                const b=document.getElementById(id);
+                if (b) b.classList.toggle("active", id===previewStateBefore.activeSizeId);
+              });
             }
           }
+          window.scrollTo({ top: 0, behavior: "smooth" });
           return;
-          }
-          if (!SITE_SLUG){ alert("No hay slug"); return; }
-          window.open("/" + SITE_SLUG, "_blank");
         });
       }
       const pageSelect = document.getElementById("pageSelect");