limbo-component 1.9.1 → 2.0.1

package/dist/limbo.es.js

@@ -12565,7 +12565,9 @@ function Tabs({ tabs, active, onChange }) {
     if (nextTab && !nextTab.hideNonActive) {
       onChange(nextTab.id);
       setTimeout(() => {
-        const tabButton = document.querySelector(`[data-tab-id="${nextTab.id}"]`);
+        const tabButton = document.querySelector(
+          `[data-tab-id="${nextTab.id}"]`
+        );
         if (tabButton) {
           tabButton.focus();
         }
@@ -12597,7 +12599,7 @@ function Tabs({ tabs, active, onChange }) {
             "data-tab-id": tab.id,
             onClick: () => onChange(tab.id),
             onKeyDown: (e) => handleKeyDown(e, tab.id),
-            className: `limbo-tab ${isActiveTab ? "active" : ""} ${isMobile ? "limbo-tab--mobile" : ""}`,
+            className: `limbo-tab ${isActiveTab ? "limbo-active" : ""} ${isMobile ? "limbo-tab--mobile" : ""}`,
             role: "tab",
             "aria-selected": isActiveTab,
             "aria-controls": `tabpanel-${tab.id}`,
@@ -12625,9 +12627,9 @@ function Tabs({ tabs, active, onChange }) {
   );
 }
 const API_URLS = {
-  DEV: "https://led-dev-limbo-dev.eu.els.local",
-  // PREPRODUCCIÓN - Updated URL
-  // DEV: "http://localhost", // LOCAL - Para desarrollo local
+  // DEV: "https://led-dev-limbo-dev.eu.els.local", // PREPRODUCCIÓN - Updated URL
+  DEV: "http://localhost",
+  // LOCAL - Para desarrollo local
   PROD: "https://limbo.lefebvre.com"
 };
 let globalConfig = {
@@ -13246,14 +13248,10 @@ function ImageVariantsModal({
   };
   const handleDownloadVariant = async (variant) => {
     const { downloadImage: downloadImage2 } = await Promise.resolve().then(() => downloadImage$1);
-    await downloadImage2(
-      variant.url,
-      variant.name || "limbo-variant",
-      {
-        originalFormat: variant.format || variant.output_format,
-        accessibilityManager
-      }
-    );
+    await downloadImage2(variant.url, variant.name || "limbo-variant", {
+      originalFormat: variant.format || variant.output_format,
+      accessibilityManager
+    });
   };
   const handleViewVariant = (variant) => {
     accessibilityManager?.announce(
@@ -13826,7 +13824,7 @@ function ImageCard({
                       variantsCount > 0 && /* @__PURE__ */ jsx(
                         "span",
                         {
-                          className: "variants-count-badge",
+                          className: "limbo-variants-count-badge",
                           style: {
                             position: "absolute",
                             top: "-8px",
@@ -13993,7 +13991,7 @@ function ImageCard({
           /* @__PURE__ */ jsx(
             "span",
             {
-              className: `text-xs mt-1 truncate w-full text-center limbo-image-card-name ${isMobile ? "limbo-image-card-name--mobile" : ""}`,
+              className: `text-xs mt-1 limbo-truncate w-full text-center limbo-image-card-name ${isMobile ? "limbo-image-card-name--mobile" : ""}`,
               style: {
                 // Better text visibility on mobile
                 ...isMobile && {
@@ -14061,7 +14059,7 @@ function ImageCardSkeleton() {
           }
         ) }),
         /* @__PURE__ */ jsx("div", { className: "limbo-image-card-name opacity-100 position-relative bottom-0 p-2", children: /* @__PURE__ */ jsx("div", { className: "h-4 bg-neutral-gray-200 rounded w-3/4" }) }),
-        /* @__PURE__ */ jsx("span", { className: "limbo-sr-only", children: "Cargando imagen..." })
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Cargando imagen..." })
       ]
     }
   );
@@ -14193,7 +14191,7 @@ function Gallery({
         "aria-label": "Filtrar imágenes",
         children: [
           showNameFilter && /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full sm:min-w-[180px] sm:flex-1", children: [
-            /* @__PURE__ */ jsx("label", { htmlFor: "name", className: "form-label mb-1", children: "Nombre" }),
+            /* @__PURE__ */ jsx("label", { htmlFor: "name", className: "limbo-form-label mb-1", children: "Nombre" }),
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -14203,7 +14201,7 @@ function Gallery({
                 placeholder: "Buscar por nombre...",
                 value: filters.name,
                 onChange: handleChange,
-                className: "form-control",
+                className: "limbo-form-control",
                 autoComplete: "off"
               }
             )
@@ -14211,7 +14209,7 @@ function Gallery({
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row flex-wrap gap-2 justify-between items-start sm:items-end w-full sm:w-auto", children: [
             showDateFilter && /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full sm:w-auto", children: [
-                /* @__PURE__ */ jsx("label", { htmlFor: "dateFrom", className: "form-label mb-1", children: "Desde" }),
+                /* @__PURE__ */ jsx("label", { htmlFor: "dateFrom", className: "limbo-form-label mb-1", children: "Desde" }),
                 /* @__PURE__ */ jsx(
                   "input",
                   {
@@ -14220,12 +14218,12 @@ function Gallery({
                     id: "dateFrom",
                     value: filters.dateFrom,
                     onChange: handleChange,
-                    className: "form-control"
+                    className: "limbo-form-control"
                   }
                 )
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full sm:w-auto", children: [
-                /* @__PURE__ */ jsx("label", { htmlFor: "dateTo", className: "form-label mb-1", children: "Hasta" }),
+                /* @__PURE__ */ jsx("label", { htmlFor: "dateTo", className: "limbo-form-label mb-1", children: "Hasta" }),
                 /* @__PURE__ */ jsx(
                   "input",
                   {
@@ -14234,13 +14232,13 @@ function Gallery({
                     id: "dateTo",
                     value: filters.dateTo,
                     onChange: handleChange,
-                    className: "form-control"
+                    className: "limbo-form-control"
                   }
                 )
               ] })
             ] }),
             showUploadedByFilter && /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full sm:w-auto", children: [
-              /* @__PURE__ */ jsx("label", { htmlFor: "uploadedBy", className: "form-label mb-1", children: "Subido por" }),
+              /* @__PURE__ */ jsx("label", { htmlFor: "uploadedBy", className: "limbo-form-label mb-1", children: "Subido por" }),
               /* @__PURE__ */ jsx(
                 "input",
                 {
@@ -14250,7 +14248,7 @@ function Gallery({
                   placeholder: "Subido por",
                   value: filters.uploadedBy,
                   onChange: handleChange,
-                  className: "form-control"
+                  className: "limbo-form-control"
                 }
               )
             ] })
@@ -14322,13 +14320,257 @@ function Gallery({
     )
   ] });
 }
+function ImagePreview({
+  image,
+  onDiscard,
+  onRetry,
+  onDownload,
+  onSelect,
+  showRetry = false,
+  disabled = false
+}) {
+  const [previewUrl, setPreviewUrl] = useState(null);
+  const [imageInfo, setImageInfo] = useState({
+    name: "",
+    size: "",
+    type: ""
+  });
+  const [showLightbox, setShowLightbox] = useState(false);
+  const handleEditName = (e) => {
+    const newName = e.target.value;
+    const originalName = imageInfo.name;
+    const lastDotIndex = originalName.lastIndexOf(".");
+    const extension = lastDotIndex !== -1 ? originalName.substring(lastDotIndex) : ".webp";
+    setImageInfo((prev) => ({
+      ...prev,
+      name: newName + extension
+    }));
+  };
+  useEffect(() => {
+    if (!image) {
+      setPreviewUrl(null);
+      return;
+    }
+    const url = URL.createObjectURL(image);
+    setPreviewUrl(url);
+    setImageInfo({
+      name: image.name || "imagen.webp",
+      size: formatFileSize(image.size || 0),
+      type: image.type || "image/webp"
+    });
+    return () => {
+      URL.revokeObjectURL(url);
+    };
+  }, [image]);
+  useEffect(() => {
+    if (!showLightbox) return;
+    const handleEsc = (e) => {
+      if (e.key === "Escape") {
+        setShowLightbox(false);
+      }
+    };
+    document.addEventListener("keydown", handleEsc);
+    return () => document.removeEventListener("keydown", handleEsc);
+  }, [showLightbox]);
+  const formatFileSize = (bytes) => {
+    if (bytes === 0) return "0 Bytes";
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + " " + sizes[i];
+  };
+  const handleDownload = () => {
+    if (!previewUrl || disabled) return;
+    const link = document.createElement("a");
+    link.href = previewUrl;
+    link.download = imageInfo.name;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    if (onDownload) onDownload();
+  };
+  if (!image || !previewUrl) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "w-fit md:w-full bg-white border border-gray-200 rounded-lg px-1 sm:px-3 py-2 m-0 shadow-sm", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4 px-1", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-gray-700", children: "Vista previa de imagen" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onDiscard,
+          disabled,
+          className: "p-1.5 text-gray-400 cursor-pointer hover:text-gray-600 hover:bg-red-300 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+          "aria-label": "Descartar imagen",
+          title: "Descartar imagen",
+          children: /* @__PURE__ */ jsx("span", { className: "icon icon-close-small icon--md" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center md:flex-row gap-2 md:gap-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 md:flex-[0.4] flex flex-col items-center justify-center", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "relative w-full max-w-md aspect-video bg-gray-100 rounded-lg overflow-hidden cursor-zoom-in hover:ring-2 hover:ring-brand-blue-800 transition-all",
+            onClick: () => setShowLightbox(true),
+            role: "button",
+            tabIndex: 0,
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                setShowLightbox(true);
+              }
+            },
+            "aria-label": "Click para ver imagen en tamaño completo",
+            title: "Click para ver en tamaño completo",
+            children: [
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: previewUrl,
+                  alt: "Vista previa",
+                  className: "absolute inset-0 w-full h-full object-contain"
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "absolute top-2 right-2 bg-black/50 text-white px-2 py-1 rounded text-xs flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx("span", { className: "icon icon-search-white icon--xs" }),
+                /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Ampliar" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "mt-3 text-center space-y-1 w-full", children: /* @__PURE__ */ jsxs("div", { className: "rounded-sm w-fit gap-0.5 p-0.5 min-w-fit mx-auto", children: [
+          /* @__PURE__ */ jsxs(
+            "label",
+            {
+              htmlFor: "uploadImageId",
+              className: "flex items-center w-fit",
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "rounded-full bg-brand-blue-1000 min-w-6 min-h-6 flex items-center align-middle content-center justify-center limbo-me-1", children: /* @__PURE__ */ jsx("span", { className: "icon icon-edit-white icon--sm" }) }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    id: "uploadImageId",
+                    onChange: (e) => handleEditName(e),
+                    className: "w-fit px-1 text-sm font-medium text-gray-800 border border-gray-300 rounded limbo-truncate focus:outline focus:outline-neutral-gray-100 focus:limbo-transform-none focus:shadow-none focus:opacity-100",
+                    defaultValue: imageInfo.name.split(".")[0],
+                    title: "Renombra la imagen a tu gusto"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-3 text-xs text-gray-500", children: [
+            /* @__PURE__ */ jsx("span", { children: imageInfo.size }),
+            /* @__PURE__ */ jsx("span", { children: "•" }),
+            /* @__PURE__ */ jsx("span", { children: imageInfo.type.split("/")[1]?.toUpperCase() || "IMAGE" })
+          ] })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-row md:flex-col gap-2 justify-items-stretch justify-center md:justify-start items-stretch md:min-w-[140px]", children: [
+        showRetry && onRetry && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onRetry,
+            disabled,
+            className: "flex-1 md:flex-none flex items-center justify-center gap-2 px-4 py-2.5 bg-white border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 cursor-pointer hover:border-gray-400 transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium",
+            "aria-label": "Intentarlo de nuevo",
+            title: "Generar de nuevo con el mismo prompt",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "icon icon-refresh icon--sm" }),
+              /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Reintentar" }),
+              /* @__PURE__ */ jsx("span", { className: "sm:hidden", children: "Retry" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: handleDownload,
+            disabled,
+            className: "flex-1 cursor-pointer md:flex-none flex items-center justify-center gap-2 px-4 py-2.5 bg-white border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 hover:border-gray-400 transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium",
+            "aria-label": "Descargar imagen",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "icon icon-download icon--sm" }),
+              /* @__PURE__ */ jsx("span", { children: "Descargar" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onSelect && onSelect(imageInfo.name),
+            disabled,
+            className: "flex-1 md:flex-none flex items-center justify-center gap-2 px-4 py-2.5 bg-brand-blue-800 border border-brand-blue-800 text-white rounded-lg hover:bg-brand-blue-1000 cursor-pointer hover:border-brand-blue-1000 transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium shadow-sm",
+            "aria-label": "Seleccionar imagen para recortar",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "icon icon-tick-white icon--sm" }),
+              /* @__PURE__ */ jsx("span", { children: "Seleccionar" })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    showLightbox && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "fixed inset-0 bg-black/90 z-[10000] flex items-center justify-center p-4",
+        onClick: () => setShowLightbox(false),
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Vista de imagen en tamaño completo",
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setShowLightbox(false),
+              className: "absolute top-4 right-4 p-2 bg-white/10 hover:bg-white/20 rounded-full transition-colors cursor-pointer z-10",
+              "aria-label": "Cerrar vista ampliada",
+              title: "Cerrar (Esc)",
+              children: /* @__PURE__ */ jsx("span", { className: "icon icon-close-small-white icon--lg" })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "absolute top-4 left-4 bg-black/50 text-white px-4 py-2 rounded-lg text-sm", children: [
+            /* @__PURE__ */ jsx("p", { className: "font-medium", children: imageInfo.name }),
+            /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-300 mt-1", children: [
+              imageInfo.size,
+              " • ",
+              imageInfo.type.split("/")[1]?.toUpperCase()
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "relative max-w-7xl max-h-[90vh] w-full h-full flex items-center justify-center",
+              onClick: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: previewUrl,
+                  alt: "Vista completa",
+                  className: "max-w-full max-h-full object-contain rounded-lg shadow-2xl"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 left-1/2 limbo--translate-x-1/2 bg-black/50 text-white px-4 py-2 rounded-lg text-xs text-center", children: "Click fuera de la imagen o presiona ESC para cerrar" })
+        ]
+      }
+    )
+  ] });
+}
 function TabUpload({
   file,
   setFile,
   previewUrl,
   setPreviewUrl,
   fileInputRef,
-  onUpload,
+  onSelect,
   disabled
 }) {
   const handleFileChange = (e) => {
@@ -14341,36 +14583,32 @@ function TabUpload({
       setPreviewUrl(null);
     }
   };
-  const handleClearFile = () => {
-    const confirmClear = window.confirm(
-      "¿Estás seguro de que deseas descartar la imagen seleccionada?"
-    );
-    if (!confirmClear) return;
+  const handleDiscard = () => {
     setFile(null);
     setPreviewUrl(null);
     if (fileInputRef.current) fileInputRef.current.value = "";
   };
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    if (file && !disabled) {
-      onUpload(file);
-      setFile(null);
-      setPreviewUrl(null);
-      if (fileInputRef.current) fileInputRef.current.value = "";
+  const handleSelect = (editedName) => {
+    if (file && !disabled && onSelect) {
+      if (editedName && editedName !== file.name) {
+        const newFile = new File([file], editedName, { type: file.type });
+        onSelect(newFile);
+      } else {
+        onSelect(file);
+      }
     }
   };
   return /* @__PURE__ */ jsxs(
-    "form",
+    "div",
     {
-      onSubmit: handleSubmit,
       className: "flex flex-col items-center gap-6",
       "aria-label": "Subir imagen desde dispositivo",
       children: [
-        !previewUrl && /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs(
           "label",
           {
             htmlFor: "file-input",
-            className: "w-full flex flex-col items-center justify-center border-2 border-dashed border-brand-blue-200 rounded-xl p-8 cursor-pointer hover:border-brand-blue-1000 hover:to-bright-blue-200 hover:from-brand-blue-050 focus-within:border-brand-blue-800 from-bright-blue-050 to-brand-blue-050 bg-linear-to-br transition",
+            className: "w-fit md:w-full flex flex-col items-center justify-center border-2 border-dashed border-brand-blue-200 rounded-xl p-8 cursor-pointer hover:border-brand-blue-1000 hover:to-bright-blue-200 hover:from-brand-blue-050 focus-within:border-brand-blue-800 from-bright-blue-050 to-brand-blue-050 bg-linear-to-br transition",
             tabIndex: 0,
             style: { outline: "none" },
             children: [
@@ -14393,71 +14631,16 @@ function TabUpload({
             ]
           }
         ),
-        previewUrl && /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col items-center gap-4", children: [
-          /* @__PURE__ */ jsxs("div", { className: "relative w-fit", children: [
-            /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: previewUrl,
-                alt: file?.name || "Previsualización",
-                className: "rounded-lg max-h-64 object-contain bg-white w-fit mx-auto",
-                style: { maxWidth: "100%" }
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: handleClearFile,
-                disabled,
-                className: "absolute cursor-pointer top-2 right-2 bg-red-600 hover:bg-red-700 text-white rounded-full p-2 shadow-lg transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed",
-                title: "Descartar imagen",
-                "aria-label": "Descartar imagen seleccionada",
-                children: /* @__PURE__ */ jsx("span", { className: "icon icon-close-small-white icon--md m-0 p-0" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "text-sm text-neutral-800 bg-brand-blue-050 p-3 rounded-lg w-full", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-2 text-center", children: [
-            /* @__PURE__ */ jsxs("p", { children: [
-              /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Archivo:" }),
-              " ",
-              file?.name
-            ] }),
-            /* @__PURE__ */ jsxs("p", { children: [
-              /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Tamaño:" }),
-              " ",
-              file ? (file.size / 1024 / 1024).toFixed(2) : "--",
-              " MB"
-            ] }),
-            /* @__PURE__ */ jsxs("p", { children: [
-              /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Tipo:" }),
-              " ",
-              file?.type
-            ] })
-          ] }) }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "submit",
-              disabled: !file || disabled,
-              title: !file ? "Proporcione una imagen antes de continuar" : "Subir imagen a la galeria",
-              className: `limbo-btn w-full ${!file ? "cursor-not-allowed limbo-btn-disabled" : "limbo-btn-primary"}`,
-              style: { minHeight: 44 },
-              children: disabled ? "Subiendo..." : "Subir imagen"
-            }
-          )
-        ] }),
-        previewUrl && /* @__PURE__ */ jsx(
-          "input",
+        file && /* @__PURE__ */ jsx(
+          ImagePreview,
           {
-            id: "file-input",
-            ref: fileInputRef,
-            type: "file",
-            accept: "image/jpeg,image/png,image/svg,image/webp,image/gif",
-            onChange: handleFileChange,
-            disabled,
-            className: "sr-only",
-            "aria-label": "Seleccionar imagen"
+            image: file,
+            onDiscard: handleDiscard,
+            onDownload: () => {
+            },
+            onSelect: handleSelect,
+            showRetry: false,
+            disabled
           }
         )
       ]
@@ -14600,14 +14783,16 @@ function LoadingOverlay({
     }
   );
 }
-function TabAI({ prod, disabled, onGenerated }) {
+function TabAI({ prod, disabled, onSelect }) {
   const aiServicesHook = useAiServices(prod);
   const imageParamsHook = useImageParams(prod);
+  const [lastPrompt, setLastPrompt] = useState("");
   const [selectedService, setSelectedService] = useState("");
   const [dynamicForm, setDynamicForm] = useState({});
   const [aiLoading, setAiLoading] = useState(false);
   const [aiError, setAiError] = useState(null);
   const [aiImage, setAiImage] = useState(null);
+  const [generatedFile, setGeneratedFile] = useState(null);
   const [showServiceSelection, setShowServiceSelection] = useState(true);
   const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
   React.useEffect(() => {
@@ -14633,12 +14818,17 @@ function TabAI({ prod, disabled, onGenerated }) {
     const { name, value } = e.target;
     setDynamicForm((prev) => ({ ...prev, [name]: value }));
   };
-  const handleDynamicFormSubmit = async (e) => {
+  const handleDynamicFormSubmit = async (e, retry = false) => {
     e.preventDefault();
     setAiLoading(true);
     setAiError(null);
     setAiImage(null);
     try {
+      if (retry) {
+        dynamicForm.prompt = lastPrompt;
+      } else {
+        setLastPrompt(dynamicForm.prompt || "");
+      }
       const response = await generateAiImage(dynamicForm, prod);
       let imageData = null;
       if (response?.data?.images && Array.isArray(response.data.images) && response.data.images.length > 0) {
@@ -14650,7 +14840,7 @@ function TabAI({ prod, disabled, onGenerated }) {
       } else if (typeof response === "string") {
         imageData = response;
       }
-      if (imageData && onGenerated) {
+      if (imageData) {
         if (imageData.startsWith("http")) {
           try {
             const apiBaseUrl = window.limboCore?.config?.getGlobal()?.prod ? "https://limbo.lefebvre.com" : "http://localhost";
@@ -14669,10 +14859,10 @@ function TabAI({ prod, disabled, onGenerated }) {
               );
             }
             const blob = await imageResponse.blob();
-            const file = new File([blob], "ai-image.png", {
-              type: blob.type || "image/png"
+            const file = new File([blob], "ai-image.webp", {
+              type: blob.type || "image/webp"
             });
-            onGenerated(file);
+            setGeneratedFile(file);
           } catch (downloadError) {
             throw new Error(
               `Error downloading image via proxy: ${downloadError.message}`
@@ -14689,7 +14879,7 @@ function TabAI({ prod, disabled, onGenerated }) {
           const file = new File([byteArray], "ai-image.webp", {
             type: "image/webp"
           });
-          onGenerated(file);
+          setGeneratedFile(file);
         }
       } else {
         throw new Error("No se pudo extraer la imagen de la respuesta");
@@ -14704,7 +14894,10 @@ function TabAI({ prod, disabled, onGenerated }) {
   const renderDynamicForm = () => {
     const params = imageParamsHook.params?.[selectedService]?.parameters;
     if (!params) return null;
-    const allFields = Object.entries(params).filter(([_, config]) => !config.hidden);
+    const allFields = Object.entries(params).filter(
+      // eslint-disable-next-line no-unused-vars
+      ([_, config]) => !config.hidden
+    );
     const promptFields = allFields.filter(
       ([key]) => key.toLowerCase().includes("prompt") || key.toLowerCase().includes("query")
     );
@@ -14792,7 +14985,7 @@ function TabAI({ prod, disabled, onGenerated }) {
         )
       ] }, key);
     };
-    return /* @__PURE__ */ jsxs("div", { children: [
+    return /* @__PURE__ */ jsxs("div", { className: "h-fit w-full", children: [
       aiServicesHook.services.length > 1 && /* @__PURE__ */ jsxs(
         "button",
         {
@@ -14803,6 +14996,7 @@ function TabAI({ prod, disabled, onGenerated }) {
             setDynamicForm({});
             setAiImage(null);
             setAiError(null);
+            setGeneratedFile(null);
           },
           className: "flex cursor-pointer items-center gap-2 text-brand-blue-600 hover:text-brand-blue-700 mb-4 font-medium",
           children: [
@@ -14856,17 +15050,19 @@ function TabAI({ prod, disabled, onGenerated }) {
                     ]
                   }
                 ),
-                showAdvancedOptions && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 animate-fadeIn", children: advancedFields.map(([key, config]) => renderField(key, config)) })
+                showAdvancedOptions && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 animate-fadeIn", children: advancedFields.map(
+                  ([key, config]) => renderField(key, config)
+                ) })
               ] }),
               /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "submit",
                   disabled: aiLoading || disabled,
-                  title: aiLoading ? "Generando imagen..." : "Generar imagen",
+                  title: aiLoading ? "Generando imagen..." : generatedFile ? "Generar otra imagen" : "Generar imagen",
                   className: `limbo-btn w-full mt-2 ${aiLoading ? "cursor-not-allowed limbo-btn-disabled" : "limbo-btn-primary"}`,
                   style: { minHeight: 44 },
-                  children: aiLoading ? "Generando..." : "Generar imagen"
+                  children: aiLoading ? "Generando imagen..." : generatedFile ? "Generar otra imagen" : "Generar imagen"
                 }
               )
             ]
@@ -14891,12 +15087,12 @@ function TabAI({ prod, disabled, onGenerated }) {
   if (!aiServicesHook.services.length) {
     return /* @__PURE__ */ jsx("div", { className: "alert alert-warning", children: "No hay servicios IA disponibles." });
   }
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 mx-4 pb-2", children: showServiceSelection ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col mx-4 pb-2", children: showServiceSelection ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "h3",
       {
         id: "aiSelectDescription",
-        className: "text-lg font-semibold text-brand-blue-1000 mb-3",
+        className: "text-2xl font-semibold text-brand-blue-1000",
         children: "Selecciona el modelo IA"
       }
     ),
@@ -14911,15 +15107,11 @@ function TabAI({ prod, disabled, onGenerated }) {
           setDynamicForm({});
           setAiImage(null);
           setAiError(null);
+          setGeneratedFile(null);
           imageParamsHook.fetchParams(service.slug, true);
         },
         disabled: aiServicesHook.loading || disabled,
-        className: `
-                  group relative p-4 rounded-lg border-2 transition-all duration-200 overflow-hidden
-                  flex flex-col items-center justify-center min-h-[120px] grow-1 basis-sm min-w-70
-                  border-gray-200 hover:border-brand-blue-300 hover:shadow-md
-                  ${aiServicesHook.loading || disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
-                `,
+        className: ` group relative p-4 rounded-lg border-2 transition-all duration-200 overflow-hidden flex flex-col items-center justify-center min-h-[120px] grow-1 basis-sm min-w-70 border-gray-200 hover:border-brand-blue-300 hover:shadow-md ${aiServicesHook.loading || disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} `,
         style: {
           position: "relative"
         },
@@ -14936,7 +15128,7 @@ function TabAI({ prod, disabled, onGenerated }) {
           ),
           /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex flex-col items-center justify-center gap-2 text-center", children: [
             /* @__PURE__ */ jsx("span", { className: "text-base font-semibold text-gray-800", children: service.label }),
-            service.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-600 line-clamp-2", children: service.description })
+            service.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-neutral-gray-800 limbo-line-clamp-2 drop-shadow drop-shadow-neutral-white-000", children: service.description })
           ] })
         ]
       },
@@ -14945,22 +15137,40 @@ function TabAI({ prod, disabled, onGenerated }) {
   ] }) : (
     /* Vista del formulario del servicio seleccionado */
     /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-brand-blue-1000 mb-3", children: aiServicesHook.services.find((s) => s.slug === selectedService)?.label || "Generación IA" }),
+      /* @__PURE__ */ jsx("h3", { className: "text-2xl font-semibold text-brand-blue-1000", children: aiServicesHook.services.find((s) => s.slug === selectedService)?.label || "Generación IA" }),
       imageParamsHook.loading && /* @__PURE__ */ jsx("div", { children: "Cargando parámetros..." }),
       imageParamsHook.error && /* @__PURE__ */ jsx("div", { className: "alert alert-danger", children: imageParamsHook.error }),
       selectedService && renderDynamicForm(),
-      aiError && /* @__PURE__ */ jsx("div", { className: "alert alert-danger", children: aiError }),
-      aiImage && aiImage.map((img, index) => /* @__PURE__ */ jsxs("div", { className: "mt-6 text-center", children: [
-        /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: img.contains("http") ? img : `data:image/png;base64, ${img}`,
-            alt: "Imagen generada con IA",
-            className: "rounded-lg shadow-md border border-brand-blue-200 max-h-72 mx-auto"
-          }
-        ),
-        /* @__PURE__ */ jsx("button", { className: "limbo-btn limbo-btn-primary mt-4", children: "Aceptar y subir" })
-      ] }, "img-" + index))
+      aiError && /* @__PURE__ */ jsx("div", { className: "alert alert-danger mt-4", children: aiError }),
+      generatedFile && /* @__PURE__ */ jsx("div", { className: "mt-6 md:w-full mx-auto", children: /* @__PURE__ */ jsx(
+        ImagePreview,
+        {
+          image: generatedFile,
+          onDiscard: () => {
+            setGeneratedFile(null);
+            setAiImage(null);
+            setAiError(null);
+          },
+          onRetry: (e) => handleDynamicFormSubmit(e, true),
+          onDownload: () => {
+          },
+          onSelect: (editedName) => {
+            if (onSelect) {
+              const fileToSelect = generatedFile || aiImage;
+              if (editedName && fileToSelect && editedName !== fileToSelect.name) {
+                const newFile = new File([fileToSelect], editedName, {
+                  type: fileToSelect.type
+                });
+                onSelect(newFile);
+              } else {
+                onSelect(fileToSelect);
+              }
+            }
+          },
+          showRetry: true,
+          disabled: aiLoading || disabled
+        }
+      ) })
     ] })
   ) });
 }
@@ -15033,7 +15243,7 @@ function useStockServices(prod = false) {
   };
   return { services, loading, error, invalidateCache };
 }
-function TabStock({ prod, disabled, onSelected }) {
+function TabStock({ prod, disabled, onSelect }) {
   const lastSearchPayloadRef = React.useRef(null);
   const stockServicesHook = useStockServices(prod);
   const loadSavedState = (key, defaultValue) => {
@@ -15059,12 +15269,14 @@ function TabStock({ prod, disabled, onSelected }) {
   const [paginationInfo, setPaginationInfo] = useState(
     () => loadSavedState("paginationInfo", null)
   );
+  const [lastQuery, setLastQuery] = useState(null);
   const imageParamsHook = useImageParams(prod);
   const [stockLoading, setStockLoading] = useState(false);
   const [stockError, setStockError] = useState(null);
   const [downloadingId, setDownloadingId] = useState(null);
   const [showServiceSelection, setShowServiceSelection] = useState(true);
   const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
+  const [selectedFile, setSelectedFile] = useState(null);
   React.useEffect(() => {
     sessionStorage.setItem(
       "limbo_stock_selectedService",
@@ -15184,6 +15396,7 @@ function TabStock({ prod, disabled, onSelected }) {
       setStockError("La búsqueda debe tener al menos 5 caracteres");
       return;
     }
+    setLastQuery(query);
     await performSearch(1);
   };
   const handlePageChange = (newPage) => {
@@ -15207,7 +15420,7 @@ function TabStock({ prod, disabled, onSelected }) {
         const file = new File([blob], filename, {
           type: blob.type || "image/jpeg"
         });
-        if (onSelected) onSelected(file);
+        setSelectedFile(file);
       } else {
         throw new Error("No se pudo obtener la URL de descarga");
       }
@@ -15265,20 +15478,27 @@ function TabStock({ prod, disabled, onSelected }) {
             ]
           }
         ),
-        config.options && config.multiple ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 min-h-[50px] px-2 justify-between border-2 border-gray-transparent-500 rounded-lg", children: config.options.map((opt) => /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "checkbox",
-              name: `stock-${key}`,
-              value: opt,
-              checked: Array.isArray(dynamicForm[key]) && dynamicForm[key].includes(opt),
-              onChange: () => handleMultiCheckboxChange(key, opt),
-              disabled
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "text-xs", children: opt })
-        ] }, opt)) }) : config.options ? /* @__PURE__ */ jsx(
+        config.options && config.multiple ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 min-h-[50px] px-2 justify-between border-2 border-gray-transparent-500 rounded-lg", children: config.options.map((opt) => /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: "flex items-center gap-1",
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  name: `stock-${key}`,
+                  value: opt,
+                  checked: Array.isArray(dynamicForm[key]) && dynamicForm[key].includes(opt),
+                  onChange: () => handleMultiCheckboxChange(key, opt),
+                  disabled
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-xs", children: opt })
+            ]
+          },
+          opt
+        )) }) : config.options ? /* @__PURE__ */ jsx(
           "select",
           {
             id: `stock-${key}`,
@@ -15434,8 +15654,8 @@ function TabStock({ prod, disabled, onSelected }) {
   if (!stockServicesHook.services.length) {
     return /* @__PURE__ */ jsx("div", { className: "alert alert-warning", children: "No hay servicios de Stock disponibles." });
   }
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 mx-4 pb-2", children: showServiceSelection ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-brand-blue-1000 mb-3", children: "Selecciona el servicio de Stock" }),
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col mx-4 pb-2", children: showServiceSelection ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-2xl font-semibold text-brand-blue-1000", children: "Selecciona el servicio de Stock" }),
     stockServicesHook.error && /* @__PURE__ */ jsx("div", { className: "alert alert-danger", children: stockServicesHook.error }),
     /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-3", children: stockServicesHook.services.map((service) => /* @__PURE__ */ jsxs(
       "button",
@@ -15452,12 +15672,7 @@ function TabStock({ prod, disabled, onSelected }) {
           imageParamsHook.fetchParams(service.slug, true);
         },
         disabled: stockServicesHook.loading || disabled,
-        className: `
-                  group relative p-4 rounded-lg border-2 transition-all duration-200 overflow-hidden
-                  flex flex-col items-center justify-center min-h-[120px]
-                  border-gray-200 hover:border-brand-blue-300 hover:shadow-md
-                  ${stockServicesHook.loading || disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
-                `,
+        className: ` group relative p-4 rounded-lg border-2 transition-all duration-200 overflow-hidden flex flex-col items-center justify-center min-h-[120px] border-gray-200 hover:border-brand-blue-300 hover:shadow-md ${stockServicesHook.loading || disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} `,
         style: {
           position: "relative"
         },
@@ -15474,7 +15689,7 @@ function TabStock({ prod, disabled, onSelected }) {
           ),
           /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex flex-col items-center justify-center gap-2 text-center", children: [
             /* @__PURE__ */ jsx("span", { className: "text-base font-semibold text-gray-800", children: service.label }),
-            service.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-600 line-clamp-2", children: service.description })
+            service.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-600 limbo-line-clamp-2", children: service.description })
           ] })
         ]
       },
@@ -15483,12 +15698,38 @@ function TabStock({ prod, disabled, onSelected }) {
   ] }) : (
     /* Vista del formulario del servicio seleccionado */
     /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-brand-blue-1000 mb-3", children: stockServicesHook.services.find((s) => s.slug === selectedService)?.label || "Búsqueda Stock" }),
+      /* @__PURE__ */ jsx("h3", { className: "text-2xl font-semibold text-brand-blue-1000", children: stockServicesHook.services.find((s) => s.slug === selectedService)?.label || "Búsqueda Stock" }),
       imageParamsHook.loading && /* @__PURE__ */ jsx("div", { children: "Cargando parámetros..." }),
       imageParamsHook.error && /* @__PURE__ */ jsx("div", { className: "alert alert-danger", children: imageParamsHook.error }),
       selectedService && renderDynamicForm(),
-      stockError && /* @__PURE__ */ jsx("div", { className: "alert alert-danger", children: stockError }),
-      stockImages.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      stockError && /* @__PURE__ */ jsx("div", { className: "alert alert-danger mt-4", children: stockError }),
+      selectedFile && /* @__PURE__ */ jsx("div", { className: "mt-6 md:w-full mx-auto", children: /* @__PURE__ */ jsx(
+        ImagePreview,
+        {
+          image: selectedFile,
+          onDiscard: () => {
+            setSelectedFile(null);
+            setStockError(null);
+          },
+          onDownload: () => {
+          },
+          onSelect: (editedName) => {
+            if (onSelect) {
+              if (editedName && selectedFile && editedName !== selectedFile.name) {
+                const newFile = new File([selectedFile], editedName, {
+                  type: selectedFile.type
+                });
+                onSelect(newFile);
+              } else {
+                onSelect(selectedFile);
+              }
+            }
+          },
+          showRetry: false,
+          disabled
+        }
+      ) }),
+      !selectedFile && stockImages.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
@@ -15524,7 +15765,19 @@ function TabStock({ prod, disabled, onSelected }) {
                         /* @__PURE__ */ jsx("div", { className: "absolute inset-0 border-4 border-brand-blue-600 rounded-full border-t-transparent animate-spin" })
                       ] }),
                       /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-brand-blue-900", children: "Descargando..." })
-                    ] }) : /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-brand-blue-800/0 group-hover:bg-brand-blue-800/50 transition-colors duration-200 flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-round-check-filled icon--2xl max-w-full max-h-full opacity-0 group-hover:opacity-100 transition-opacity duration-200" }) })
+                    ] }) : /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 bg-brand-blue-800/0 group-hover:bg-brand-blue-800/50 transition-colors duration-200 flex items-center justify-center flex-col", children: [
+                      /* @__PURE__ */ jsx("span", { className: "icon icon-round-check-filled icon--2xl max-w-full max-h-full opacity-0 group-hover:opacity-100 transition-opacity duration-200" }),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            textShadow: "1px 0 #0d542b, -1px 0 #0d542b, 0 1px #0d542b, 0 -0.5px #0d542b, 0.5px 0.5px #0d542b, -1px -1px #0d542b, 1px -1px #0d542b, -1px 1px #0d542b"
+                          },
+                          className: "max-w-full max-h-full opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-neutral-white-000",
+                          children: "Seleccionar"
+                        }
+                      )
+                    ] })
                   ] })
                 },
                 img.id || idx
@@ -15580,7 +15833,7 @@ function TabStock({ prod, disabled, onSelected }) {
           )
         ] })
       ] }),
-      !stockLoading && stockImages.length === 0 && selectedService && dynamicForm.query && /* @__PURE__ */ jsxs("div", { className: "mt-6 text-center text-neutral-600 py-8 bg-neutral-50 rounded-lg", children: [
+      !stockLoading && stockImages.length === 0 && selectedService && lastQuery && /* @__PURE__ */ jsxs("div", { className: "mt-6 text-center text-neutral-600 py-8 bg-neutral-50 rounded-lg", children: [
         /* @__PURE__ */ jsx("span", { className: "icon icon-search icon--lg mb-2" }),
         /* @__PURE__ */ jsxs("p", { children: [
           'No se encontraron imágenes para "',
@@ -15676,7 +15929,7 @@ const ValidatedImage = ({ src, alt, className, onError }) => {
     }
   );
 };
-function TabPortals({ prod, disabled, onSelected }) {
+function TabPortals({ prod, disabled, onSelect }) {
   const lastSearchPayloadRef = React.useRef(null);
   const portalSourcesHook = usePortalSources(prod);
   const loadSavedState = (key, defaultValue) => {
@@ -15707,6 +15960,7 @@ function TabPortals({ prod, disabled, onSelected }) {
     () => loadSavedState("paginationInfo", null)
   );
   const [downloadingUrl, setDownloadingUrl] = useState(null);
+  const [selectedFile, setSelectedFile] = useState(null);
   const searchCacheRef = useRef({});
   const [failedImages, setFailedImages] = useState(/* @__PURE__ */ new Set());
   React.useEffect(() => {
@@ -15882,7 +16136,7 @@ function TabPortals({ prod, disabled, onSelected }) {
       const file = new File([blob], filename, {
         type: blob.type || "image/jpeg"
       });
-      if (onSelected) onSelected(file);
+      setSelectedFile(file);
     } catch (err) {
       setError(err.message || "No se pudo recuperar la imagen del portal");
     } finally {
@@ -15898,7 +16152,7 @@ function TabPortals({ prod, disabled, onSelected }) {
   if (!portalSourcesHook.sources.length) {
     return /* @__PURE__ */ jsx("div", { className: "alert alert-warning", children: "No hay portales externos disponibles." });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-brand-blue-1000", children: "Buscar en Portales Externos" }),
     /* @__PURE__ */ jsxs(
       "form",
@@ -15931,34 +16185,17 @@ function TabPortals({ prod, disabled, onSelected }) {
                   type: "button",
                   onClick: () => handlePortalToggle(portal.id),
                   disabled,
-                  className: `
-                    relative p-4 rounded-lg border-2 transition-all duration-200
-                    flex flex-col items-center justify-center min-h-[100px] gap-2
-                    ${isSelected ? "border-brand-blue-600 bg-brand-blue-50" : "border-gray-200 bg-white hover:border-brand-blue-300"}
-                    ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
-                    hover:shadow-md
-                  `,
+                  className: ` relative p-4 rounded-lg border-2 transition-all duration-200 flex flex-col items-center justify-center min-h-[100px] gap-2 max-h-[110px] box-border ${isSelected ? "border-brand-blue-600 bg-brand-blue-50" : "border-gray-200 bg-white hover:border-brand-blue-300"} ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} hover:shadow-md `,
                   children: [
-                    isSelected && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 w-6 h-6 bg-brand-blue-600 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-round-check-filled" }) }),
+                    isSelected && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 w-6 h-6 bg-brand-blue-600 rounded-full flex items-center justify-center bg-black", children: /* @__PURE__ */ jsx("span", { className: "icon icon-tick-white icon--sm" }) }),
                     /* @__PURE__ */ jsx(
-                      "svg",
+                      "img",
                       {
-                        className: `w-8 h-8 ${isSelected ? "text-brand-blue-600" : "text-gray-400"}`,
-                        fill: "none",
-                        stroke: "currentColor",
-                        viewBox: "0 0 24 24",
-                        children: /* @__PURE__ */ jsx(
-                          "path",
-                          {
-                            strokeLinecap: "round",
-                            strokeLinejoin: "round",
-                            strokeWidth: 2,
-                            d: "M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
-                          }
-                        )
+                        className: "object-auto bg-no-repeat bg-center max-w-9/12 max-h-9/12",
+                        src: portal.image,
+                        alt: portal.title
                       }
-                    ),
-                    /* @__PURE__ */ jsx("span", { className: `text-sm font-medium text-center ${isSelected ? "text-brand-blue-900" : "text-gray-700"}`, children: portal.title })
+                    )
                   ]
                 },
                 portal.id
@@ -15987,7 +16224,7 @@ function TabPortals({ prod, disabled, onSelected }) {
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex-col gap-1 hidden", children: [
             /* @__PURE__ */ jsx(
               "label",
               {
@@ -16000,7 +16237,7 @@ function TabPortals({ prod, disabled, onSelected }) {
               "select",
               {
                 id: "portal-limit",
-                value: limit,
+                value: 10,
                 onChange: (e) => setLimit(Number(e.target.value)),
                 className: "limbo-input",
                 disabled,
@@ -16035,7 +16272,14 @@ function TabPortals({ prod, disabled, onSelected }) {
         {
           className: `flex items-center justify-between p-2 rounded ${result.status === 200 ? "bg-green-50" : "bg-red-50"}`,
           children: [
-            /* @__PURE__ */ jsx("span", { className: "font-medium", children: result.title }),
+            result.image ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: result.image,
+                alt: result.title,
+                className: "w-10 h-10 object-cover rounded"
+              }
+            ) : /* @__PURE__ */ jsx("span", { className: "font-medium", children: result.title }),
             /* @__PURE__ */ jsx(
               "span",
               {
@@ -16048,20 +16292,40 @@ function TabPortals({ prod, disabled, onSelected }) {
         portalId
       )) })
     ] }),
-    (images.length > 0 || loading) && /* @__PURE__ */ jsxs(Fragment, { children: [
+    selectedFile && /* @__PURE__ */ jsx("div", { className: "mt-6 md:w-full mx-auto", children: /* @__PURE__ */ jsx(
+      ImagePreview,
+      {
+        image: selectedFile,
+        onDiscard: () => {
+          setSelectedFile(null);
+          setError(null);
+        },
+        onDownload: () => {
+        },
+        onSelect: (editedName) => {
+          if (onSelect) {
+            if (editedName && selectedFile && editedName !== selectedFile.name) {
+              const newFile = new File([selectedFile], editedName, {
+                type: selectedFile.type
+              });
+              onSelect(newFile);
+            } else {
+              onSelect(selectedFile);
+            }
+          }
+        },
+        showRetry: false,
+        disabled
+      }
+    ) }),
+    !selectedFile && (images.length > 0 || loading) && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs("div", { className: "mt-6 relative", "aria-live": "polite", children: [
         loading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-white/80 z-10 flex items-center justify-center rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
           /* @__PURE__ */ jsx("span", { className: "limbo-loader" }),
           /* @__PURE__ */ jsx("span", { className: "text-sm text-brand-blue-800", children: "Buscando imágenes..." })
         ] }) }),
         /* @__PURE__ */ jsxs("div", { className: "relative grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2", children: [
-          /* @__PURE__ */ jsx(
-            LoadingOverlay,
-            {
-              show: loading,
-              message: "Cargando imágenes..."
-            }
-          ),
+          /* @__PURE__ */ jsx(LoadingOverlay, { show: loading, message: "Cargando imágenes..." }),
           images.map((img, idx) => {
             const imageKey = `${img.source}-${img.id || idx}`;
             const imageUrl = img.preview || img.thumbnail || img.url || img.full;
@@ -16119,7 +16383,7 @@ function TabPortals({ prod, disabled, onSelected }) {
                   img.title && /* @__PURE__ */ jsx("div", { className: "px-2 pb-2 pt-1", children: /* @__PURE__ */ jsx(
                     "p",
                     {
-                      className: "text-xs text-gray-600 truncate",
+                      className: "text-xs text-gray-600 limbo-truncate",
                       title: img.title,
                       children: img.title
                     }
@@ -16188,7 +16452,7 @@ const TABS = [
   { id: "portals", label: "Otros portales" }
 ];
 function UploadForm({
-  onUpload,
+  onSelect,
   disabled = false,
   apiKey,
   prod = false
@@ -16229,7 +16493,9 @@ function UploadForm({
     if (nextTab) {
       setActiveTab(nextTab.id);
       setTimeout(() => {
-        const tabButton = document.querySelector(`[data-upload-tab-id="${nextTab.id}"]`);
+        const tabButton = document.querySelector(
+          `[data-upload-tab-id="${nextTab.id}"]`
+        );
         if (tabButton) {
           tabButton.focus();
         }
@@ -16240,7 +16506,7 @@ function UploadForm({
     /* @__PURE__ */ jsx("div", { className: "limbo-tabs-container", children: /* @__PURE__ */ jsx(
       "div",
       {
-        className: "limbo-tabs mb-6 min-w-fit",
+        className: "limbo-tabs mb-1 min-w-fit",
         role: "tablist",
         "aria-label": "Opciones de subida de imagen",
         children: TABS.map((tab) => /* @__PURE__ */ jsx(
@@ -16248,7 +16514,7 @@ function UploadForm({
           {
             type: "button",
             "data-upload-tab-id": tab.id,
-            className: `text-nowrap limbo-tab${activeTab === tab.id ? " active" : ""}`,
+            className: `text-nowrap limbo-tab${activeTab === tab.id ? " limbo-active" : ""}`,
             "aria-current": activeTab === tab.id ? "page" : void 0,
             "aria-selected": activeTab === tab.id,
             role: "tab",
@@ -16263,59 +16529,56 @@ function UploadForm({
         ))
       }
     ) }),
-    /* @__PURE__ */ jsxs("div", { className: "limbo-tab-content", role: "tabpanel", id: `upload-tabpanel-${activeTab}`, "aria-labelledby": `upload-tab-${activeTab}`, children: [
-      activeTab === "upload" && /* @__PURE__ */ jsx(
-        TabUpload,
-        {
-          file,
-          setFile,
-          previewUrl,
-          setPreviewUrl,
-          fileInputRef,
-          onUpload,
-          disabled
-        }
-      ),
-      activeTab === "ai" && /* @__PURE__ */ jsx(
-        TabAI,
-        {
-          apiKey,
-          prod,
-          disabled,
-          onGenerated: (file2) => {
-            setActiveTab("upload");
-            setFile(file2);
-            setPreviewUrl(URL.createObjectURL(file2));
-          }
-        }
-      ),
-      activeTab === "stock" && /* @__PURE__ */ jsx(
-        TabStock,
-        {
-          apiKey,
-          prod,
-          disabled,
-          onSelected: (file2) => {
-            setActiveTab("upload");
-            setFile(file2);
-            setPreviewUrl(URL.createObjectURL(file2));
-          }
-        }
-      ),
-      activeTab === "portals" && /* @__PURE__ */ jsx(
-        TabPortals,
-        {
-          apiKey,
-          prod,
-          disabled,
-          onSelected: (file2) => {
-            setActiveTab("upload");
-            setFile(file2);
-            setPreviewUrl(URL.createObjectURL(file2));
-          }
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "limbo-tab-content px-2 py-2",
+        role: "tabpanel",
+        id: `upload-tabpanel-${activeTab}`,
+        "aria-labelledby": `upload-tab-${activeTab}`,
+        children: [
+          activeTab === "upload" && /* @__PURE__ */ jsx(
+            TabUpload,
+            {
+              file,
+              setFile,
+              previewUrl,
+              setPreviewUrl,
+              fileInputRef,
+              onSelect,
+              disabled
+            }
+          ),
+          activeTab === "ai" && /* @__PURE__ */ jsx(
+            TabAI,
+            {
+              apiKey,
+              prod,
+              disabled,
+              onSelect
+            }
+          ),
+          activeTab === "stock" && /* @__PURE__ */ jsx(
+            TabStock,
+            {
+              apiKey,
+              prod,
+              disabled,
+              onSelect
+            }
+          ),
+          activeTab === "portals" && /* @__PURE__ */ jsx(
+            TabPortals,
+            {
+              apiKey,
+              prod,
+              disabled,
+              onSelect
+            }
+          )
+        ]
+      }
+    )
   ] });
 }
 const IS_BROWSER = typeof window !== "undefined" && typeof window.document !== "undefined";
@@ -19739,14 +20002,22 @@ function CropperView({
   onError = null,
   // Callback para manejar errores
   deleting = false,
-  onVariantCreated = null
+  onVariantCreated = null,
   // Callback cuando se crea una variante
+  onUpload = null,
+  // Callback para subir imagen nueva (cuando image.file existe)
+  uploading = false
+  // Estado de carga del upload
 }) {
   const [showPreview, setShowPreview] = useState(false);
   const [previewUrl, setPreviewUrl] = useState(null);
   const [previewLoading, setPreviewLoading] = useState(false);
   const [showGrid, setShowGrid] = useState(true);
   const [shade, setShade] = useState(true);
+  const [previewPosition, setPreviewPosition] = useState({ x: 20, y: 100 });
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+  const [showPreviewLightbox, setShowPreviewLightbox] = useState(false);
   const [initialLoading, setInitialLoading] = useState(true);
   const [cropTransitioning, setcropTransitioning] = useState(false);
   const [flipStates, setFlipStates] = useState({
@@ -20217,8 +20488,92 @@ function CropperView({
       setPreviewLoading(false);
     }
   }, [canExport, generatePreview, showPreview]);
+  const handlePreviewMouseDown = useCallback(
+    (e) => {
+      if (!e.target.closest(".preview-modal-header")) return;
+      setIsDragging(true);
+      setDragStart({
+        x: e.clientX - previewPosition.x,
+        y: e.clientY - previewPosition.y
+      });
+    },
+    [previewPosition]
+  );
+  const handlePreviewMouseMove = useCallback(
+    (e) => {
+      if (!isDragging) return;
+      e.preventDefault();
+      setPreviewPosition({
+        x: e.clientX - dragStart.x,
+        y: e.clientY - dragStart.y
+      });
+    },
+    [isDragging, dragStart]
+  );
+  const handlePreviewMouseUp = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+  const handlePreviewTouchStart = useCallback(
+    (e) => {
+      if (!e.target.closest(".preview-modal-header")) return;
+      const touch = e.touches[0];
+      setIsDragging(true);
+      setDragStart({
+        x: touch.clientX - previewPosition.x,
+        y: touch.clientY - previewPosition.y
+      });
+    },
+    [previewPosition]
+  );
+  const handlePreviewTouchMove = useCallback(
+    (e) => {
+      if (!isDragging) return;
+      e.preventDefault();
+      const touch = e.touches[0];
+      setPreviewPosition({
+        x: touch.clientX - dragStart.x,
+        y: touch.clientY - dragStart.y
+      });
+    },
+    [isDragging, dragStart]
+  );
+  const handlePreviewTouchEnd = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+  useEffect(() => {
+    if (isDragging) {
+      document.addEventListener("mousemove", handlePreviewMouseMove);
+      document.addEventListener("mouseup", handlePreviewMouseUp);
+      document.addEventListener("touchmove", handlePreviewTouchMove, {
+        passive: false
+      });
+      document.addEventListener("touchend", handlePreviewTouchEnd);
+      return () => {
+        document.removeEventListener("mousemove", handlePreviewMouseMove);
+        document.removeEventListener("mouseup", handlePreviewMouseUp);
+        document.removeEventListener("touchmove", handlePreviewTouchMove);
+        document.removeEventListener("touchend", handlePreviewTouchEnd);
+      };
+    }
+  }, [
+    isDragging,
+    handlePreviewMouseMove,
+    handlePreviewMouseUp,
+    handlePreviewTouchMove,
+    handlePreviewTouchEnd
+  ]);
+  useEffect(() => {
+    if (!showPreviewLightbox) return;
+    const handleEsc = (e) => {
+      if (e.key === "Escape") {
+        setShowPreviewLightbox(false);
+      }
+    };
+    document.addEventListener("keydown", handleEsc);
+    return () => document.removeEventListener("keydown", handleEsc);
+  }, [showPreviewLightbox]);
   const processSingleCrop = useCallback(
-    async (cropIndex) => {
+    async (cropIndex, overrideImageId = null) => {
       const crop = crops[cropIndex];
       if (!crop) {
         throw new Error(`Crop ${cropIndex} no encontrado`);
@@ -20257,9 +20612,10 @@ function CropperView({
       };
       const variantWidth = Math.min(crop.width, 5e3);
       const variantHeight = Math.min(crop.height, 5e3);
-      const ts = Date.now();
-      const variantName = `${editableFilename}_${crop.label || "crop"}_${ts}`;
-      const result = await createCropVariant(image.id, cropParams, {
+      const cropLabel = crop.label || "crop";
+      const variantName = `${cropLabel}_${variantWidth}_${variantHeight}`;
+      const imageId = overrideImageId || image.id;
+      const result = await createCropVariant(imageId, cropParams, {
         name: variantName,
         width: variantWidth,
         height: variantHeight,
@@ -20268,7 +20624,7 @@ function CropperView({
       });
       if (result) {
         accessibilityManager?.announceSuccess(`Recorte creado: ${variantName}`);
-        onVariantCreated?.(image.id, result);
+        onVariantCreated?.(imageId, result);
         return result;
       }
       throw new Error("No se pudo crear la variante");
@@ -20278,7 +20634,6 @@ function CropperView({
       activeCropIndex,
       cropData,
       effectiveImageInfo,
-      editableFilename,
       createCropVariant,
       image.id,
       onVariantCreated,
@@ -20301,9 +20656,25 @@ function CropperView({
     saveCurrentCropState();
     accessibilityManager?.announce("Creando recorte de la imagen");
     try {
-      const result = await processSingleCrop(activeCropIndex);
+      let imageId = image.id;
+      let uploadedAsset = null;
+      if (image.file && onUpload) {
+        accessibilityManager?.announce("Subiendo imagen...");
+        const uploadResult = await onUpload(image.file);
+        if (!uploadResult || !uploadResult.id) {
+          throw new Error("No se pudo subir la imagen al servidor");
+        }
+        imageId = uploadResult.id;
+        uploadedAsset = uploadResult;
+        accessibilityManager?.announceSuccess("Imagen subida correctamente");
+      }
+      const result = await processSingleCrop(activeCropIndex, imageId);
       if (result) {
-        onSave(result);
+        if (uploadedAsset) {
+          onSave({ crops: [result], asset: uploadedAsset });
+        } else {
+          onSave(result);
+        }
       }
     } catch (error) {
       console.warn("Error creating crop variant:", error);
@@ -20320,7 +20691,10 @@ function CropperView({
     processSingleCrop,
     activeCropIndex,
     onSave,
-    onError
+    onError,
+    image.file,
+    image.id,
+    onUpload
   ]);
   const performSaveMultipleCrops = useCallback(
     async (cropIndexes) => {
@@ -20328,34 +20702,55 @@ function CropperView({
       accessibilityManager?.announce(
         `Guardando ${cropIndexes.length} recortes...`
       );
-      const results = [];
-      const errors = [];
-      for (const index of cropIndexes) {
-        try {
-          const result = await processSingleCrop(index);
-          if (result) {
-            results.push(result);
+      try {
+        let imageId = image.id;
+        let uploadedAsset = null;
+        if (image.file && onUpload) {
+          accessibilityManager?.announce("Subiendo imagen...");
+          const uploadResult = await onUpload(image.file);
+          if (!uploadResult || !uploadResult.id) {
+            throw new Error("No se pudo subir la imagen al servidor");
           }
-        } catch (error) {
-          errors.push({
-            crop: crops[index]?.label || `Crop ${index}`,
-            error: error.message
-          });
+          imageId = uploadResult.id;
+          uploadedAsset = uploadResult;
+          accessibilityManager?.announceSuccess("Imagen subida correctamente");
         }
-      }
-      if (results.length > 0) {
-        accessibilityManager?.announceSuccess(
-          `${results.length} recorte(s) guardado(s) correctamente`
-        );
-        if (results[0]) {
-          onSave(results[0]);
+        const results = [];
+        const errors = [];
+        for (const index of cropIndexes) {
+          try {
+            const result = await processSingleCrop(index, imageId);
+            if (result) {
+              results.push(result);
+            }
+          } catch (error) {
+            errors.push({
+              crop: crops[index]?.label || `Crop ${index}`,
+              error: error.message
+            });
+          }
         }
-      }
-      if (errors.length > 0) {
-        const errorMsg = `Errores al guardar algunos recortes:
+        if (results.length > 0) {
+          accessibilityManager?.announceSuccess(
+            `${results.length} recorte(s) guardado(s) correctamente`
+          );
+          if (uploadedAsset) {
+            onSave({ crops: results, asset: uploadedAsset });
+          } else {
+            onSave(results);
+          }
+        }
+        if (errors.length > 0) {
+          const errorMsg = `Errores al guardar algunos recortes:
 ${errors.map((e) => `- ${e.crop}: ${e.error}`).join("\n")}`;
+          accessibilityManager?.announceError(errorMsg);
+          alert(errorMsg);
+        }
+      } catch (error) {
+        const errorMsg = error.message || "Error al procesar los recortes";
         accessibilityManager?.announceError(errorMsg);
         alert(errorMsg);
+        onError?.(error);
       }
     },
     [
@@ -20363,7 +20758,11 @@ ${errors.map((e) => `- ${e.crop}: ${e.error}`).join("\n")}`;
       processSingleCrop,
       crops,
       accessibilityManager,
-      onSave
+      onSave,
+      image.file,
+      image.id,
+      onUpload,
+      onError
     ]
   );
   const saveCrop = useCallback(async () => {
@@ -20440,8 +20839,8 @@ ${errors.map((e) => `- ${e.crop}: ${e.error}`).join("\n")}`;
           `image/${globalThis.downloadFormat || image.mime_type.split("/")[1] || "webp"}`,
           0.9
         );
-        const cropName = crop.label.replace(/\.[^/.]+$/, "").replace(/\s+/g, "-").trim();
-        const filename = `${editableFilename}_${cropName || "crop"}`;
+        const cropName = (crop.label || "crop").replace(/\.[^/.]+$/, "").replace(/\s+/g, "-").trim();
+        const filename = `${cropName}_${crop.width}_${crop.height}`;
         await downloadImage(downloadUrl, filename, {
           accessibilityManager,
           onSuccess: (finalFilename) => {
@@ -20477,7 +20876,6 @@ ${errors.map((e) => `- ${e.crop}: ${e.error}`).join("\n")}`;
       activeCropIndex,
       selection,
       image.mime_type,
-      editableFilename,
       accessibilityManager,
       imageRef,
       selectionRef
@@ -20564,6 +20962,27 @@ ${errors.map((e) => `- ${e.crop}: ${e.error}`).join("\n")}`;
     }
     await performDownload();
   }, [validateCropNames, crops, performDownload, activeCropIndex]);
+  const handleKeepOriginal = useCallback(async () => {
+    if (!image.file || !onUpload) {
+      onCancel();
+      return;
+    }
+    try {
+      accessibilityManager?.announce("Subiendo imagen original...");
+      const uploadResult = await onUpload(image.file);
+      if (!uploadResult || !uploadResult.id) {
+        throw new Error("No se pudo subir la imagen al servidor");
+      }
+      accessibilityManager?.announceSuccess("Imagen guardada correctamente");
+      onSave({ asset: uploadResult, crops: [] });
+    } catch (error) {
+      console.error("Error guardando imagen original:", error);
+      const errorMsg = error.message || "No se pudo guardar la imagen. Inténtalo de nuevo.";
+      accessibilityManager?.announceError(errorMsg);
+      alert(errorMsg);
+      onError?.(error);
+    }
+  }, [image.file, onUpload, onCancel, onSave, onError, accessibilityManager]);
   useEffect(() => {
     setShowPreview(false);
     setPreviewUrl(null);
@@ -20682,7 +21101,7 @@ ${errors.map((e) => `- ${e.crop}: ${e.error}`).join("\n")}`;
     };
   }, [canvasRef]);
   if (!image) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "limbo-cropper-view px-2 border-2 border-gray-200/50 rounded-lg  max-w-7xl mx-auto w-full min-w-full h-full min-h-full flex flex-col", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "limbo-cropper-view px-2 border-2 border-gray-200/50 rounded-lg max-w-7xl mx-auto w-full min-w-full h-full min-h-full flex flex-col", children: [
     /* @__PURE__ */ jsxs("div", { className: "limbo-cropper-header flex flex-row justify-between items-start flex-wrap mx-2 py-2 border-b border-gray-200 bg-white z-10 flex-shrink-0 lg:gap-2", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-fit space-y-2 max-w-fit", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
@@ -20694,7 +21113,7 @@ ${errors.map((e) => `- ${e.crop}: ${e.error}`).join("\n")}`;
           /* @__PURE__ */ jsx("div", { className: "", children: editableFilename + "." + (globalThis.downloadFormat || image.mime_type.split("/")[1] || "webp") })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-row self-end gap-2 w-full max-w-fit sm:w-auto", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-row self-end gap-2 w-full max-w-fit sm:w-auto flex-wrap", children: [
         /* @__PURE__ */ jsxs(
           "button",
           {
@@ -20727,29 +21146,50 @@ ${errors.map((e) => `- ${e.crop}: ${e.error}`).join("\n")}`;
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "limbo-cropper-status bg-white border-gray-100 py-0 pb-0 flex-shrink-0", children: [
-      variantError && /* @__PURE__ */ jsxs("div", { className: "alert alert-danger mb-2 text-sm", role: "alert", children: [
-        /* @__PURE__ */ jsx("strong", { children: "Error:" }),
-        " ",
-        variantError
-      ] }),
-      imageInfo && /* @__PURE__ */ jsxs("div", { className: "alert alert-secondary mb-2 text-sm", role: "status", children: [
-        /* @__PURE__ */ jsx("strong", { children: "Original:" }),
-        " ",
-        imageInfo.naturalWidth,
-        " ×",
-        " ",
-        imageInfo.naturalHeight,
-        " px",
-        imageInfo.currentWidth !== imageInfo.naturalWidth && /* @__PURE__ */ jsxs("span", { className: "ml-2 sm:ml-3 text-xs block sm:inline", children: [
-          "(Mostrada: ",
-          Math.round(imageInfo.currentWidth),
-          " ×",
-          " ",
-          Math.round(imageInfo.currentHeight),
-          " px)"
-        ] })
-      ] }),
-      !canExport && /* @__PURE__ */ jsx("div", { className: "alert alert-warning mb-2 text-sm", role: "alert", children: "⚠️ No se puede exportar por restricciones CORS" }),
+      variantError && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "alert alert-danger mb-2 text-sm",
+          role: "alert",
+          children: [
+            /* @__PURE__ */ jsx("strong", { children: "Error:" }),
+            " ",
+            variantError
+          ]
+        }
+      ),
+      imageInfo && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "alert alert-secondary mb-2 text-sm",
+          role: "status",
+          children: [
+            /* @__PURE__ */ jsx("strong", { children: "Original:" }),
+            " ",
+            imageInfo.naturalWidth,
+            " ×",
+            " ",
+            imageInfo.naturalHeight,
+            " px",
+            imageInfo.currentWidth !== imageInfo.naturalWidth && /* @__PURE__ */ jsxs("span", { className: "ml-2 sm:ml-3 text-xs block sm:inline", children: [
+              "(Mostrada: ",
+              Math.round(imageInfo.currentWidth),
+              " ×",
+              " ",
+              Math.round(imageInfo.currentHeight),
+              " px)"
+            ] })
+          ]
+        }
+      ),
+      !canExport && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "alert alert-warning mb-2 text-sm",
+          role: "alert",
+          children: "⚠️ No se puede exportar por restricciones CORS"
+        }
+      ),
       /* @__PURE__ */ jsxs("div", { className: "bg-white border-b border-gray-200 py-2 mx-2 flex-shrink-0 sticky top-0 z-10 mb-1", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
           /* @__PURE__ */ jsxs("h3", { className: "text-sm font-semibold text-gray-700", children: [
@@ -20802,7 +21242,7 @@ ${errors.map((e) => `- ${e.crop}: ${e.error}`).join("\n")}`;
                         maxLength: 25,
                         onClick: (e) => e.stopPropagation()
                       }
-                    ) : /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-800 truncate", children: crop.label }),
+                    ) : /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-800 limbo-truncate", children: crop.label }),
                     crop.required && /* @__PURE__ */ jsx("span", { className: "text-[10px] px-1 py-0.5 bg-red-100 text-red-700 rounded whitespace-nowrap", children: "Oblig." }),
                     crop.isCustom && activeCropIndex !== index && /* @__PURE__ */ jsx("span", { className: "text-[10px] px-1 py-0.5 bg-purple-100 text-purple-700 rounded whitespace-nowrap", children: "Custom" })
                   ] }) }),
@@ -20868,37 +21308,6 @@ ${errors.map((e) => `- ${e.crop}: ${e.error}`).join("\n")}`;
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col lg:flex-row flex-1 w-full overflow-hidden lg:max-h-130 mx-2 py-1", children: [
       /* @__PURE__ */ jsx("div", { className: "relative flex-1 lg:flex-[2] h-full flex-shrink-0 flex-grow-1 order-0 min-h-100 lg:min-h-130", children: /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 bg-white rounded-lg border-2 border-gray-200 overflow-hidden", children: [
-        showPreview && /* @__PURE__ */ jsxs("div", { className: "absolute lg:top-2 sm:top-4 right-2 sm:right-4 bg-white rounded-lg border border-gray-300 p-2 sm:p-3 z-50 shadow-xl w-48 sm:w-64 max-w-[calc(50%-1rem)] sm:max-w-[calc(50%-2rem)] md:min-w-1/4", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-2", children: [
-            /* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold text-gray-700", children: "Vista previa" }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: () => {
-                  setShowPreview(false);
-                  setPreviewUrl(null);
-                },
-                className: "text-gray-400 hover:text-gray-600 p-1 -m-1",
-                "aria-label": "Cerrar vista previa",
-                children: /* @__PURE__ */ jsx("span", { className: "icon icon-close-small text-xs" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "bg-gray-50 rounded p-2 flex justify-center items-center min-h-[80px] relative", children: !previewUrl ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center", children: [
-            /* @__PURE__ */ jsx("div", { className: "animate-spin w-6 h-6 border-2 border-blue-500 border-t-transparent rounded-full mb-2" }),
-            /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500", children: "Generando..." })
-          ] }) : /* @__PURE__ */ jsxs("div", { className: "relative w-full h-full flex justify-center items-center", children: [
-            /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: previewUrl,
-                alt: "Vista previa del recorte",
-                className: "max-w-full max-h-80 object-contain rounded shadow-sm"
-              }
-            ),
-            previewLoading && /* @__PURE__ */ jsx("div", { className: "absolute top-1 right-1 bg-blue-500 rounded-full p-1", children: /* @__PURE__ */ jsx("div", { className: "animate-spin w-3 h-3 border border-white border-t-transparent rounded-full" }) })
-          ] }) })
-        ] }),
         /* @__PURE__ */ jsx(
           LoadingOverlay,
           {
@@ -21003,7 +21412,7 @@ ${errors.map((e) => `- ${e.crop}: ${e.error}`).join("\n")}`;
           }
         )
       ] }) }),
-      /* @__PURE__ */ jsx("div", { className: "w-full lg:max-w-80 mt-2 lg:my-0 overflow-y-auto bg-white border-t lg:border-t-0 lg:border-l border-gray-200 flex-shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "h-full mt-2 lg:my-0 me-2 lg:mx-2 space-y-2 grid grid-cols-2 md:grid-cols-3 flex-wrap md:flex-nowrap items-start flex-row gap-2 lg:gap-0 lg:block", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-full lg:max-w-80 mt-2 lg:my-0 overflow-y-auto bg-white border-t lg:border-t-0 lg:border-l border-gray-200 flex-shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "h-full mt-2 lg:my-0 limbo-me-2 lg:mx-2 space-y-2 grid grid-cols-2 md:grid-cols-3 flex-wrap md:flex-nowrap items-start flex-row gap-2 lg:gap-0 lg:block", children: [
         /* @__PURE__ */ jsxs("div", { className: "bg-white rounded border w-full border-gray-200 mb-2", children: [
           /* @__PURE__ */ jsx(
             "button",
@@ -21048,7 +21457,7 @@ ${errors.map((e) => `- ${e.crop}: ${e.error}`).join("\n")}`;
                       title: "Mover arriba-izquierda",
                       disabled: creatingVariant,
                       "aria-label": "Mover imagen hacia arriba-izquierda",
-                      children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-up-blue icon--md -rotate-45" }) })
+                      children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-up-blue icon--md limbo--rotate-45" }) })
                     }
                   ),
                   /* @__PURE__ */ jsx(
@@ -21159,7 +21568,7 @@ ${errors.map((e) => `- ${e.crop}: ${e.error}`).join("\n")}`;
                       title: "Mover abajo-izquierda",
                       disabled: creatingVariant,
                       "aria-label": "Mover imagen hacia abajo-izquierda",
-                      children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-up-blue icon--md -rotate-145" }) })
+                      children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-up-blue icon--md limbo--rotate-145" }) })
                     }
                   ),
                   /* @__PURE__ */ jsx(
@@ -21315,7 +21724,7 @@ ${errors.map((e) => `- ${e.crop}: ${e.error}`).join("\n")}`;
                           disabled: creatingVariant,
                           "aria-label": "Reiniciar área de selección",
                           children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxs("span", { children: [
-                            /* @__PURE__ */ jsx("span", { className: "icon icon-refresh icon--sm lign-[middle!important] " }),
+                            /* @__PURE__ */ jsx("span", { className: "icon icon-refresh icon--sm limbo-lign-[middle!important] " }),
                             " ",
                             "Reset selección"
                           ] }) })
@@ -21363,12 +21772,12 @@ ${errors.map((e) => `- ${e.crop}: ${e.error}`).join("\n")}`;
                     "aria-label": "Activar/desactivar grid",
                     children: [
                       /* @__PURE__ */ jsxs("span", { className: "text-sm flex items-center", children: [
-                        /* @__PURE__ */ jsx("span", { className: "icon icon-area-blue me-1" }),
+                        /* @__PURE__ */ jsx("span", { className: "icon icon-area-blue limbo-me-1" }),
                         " ",
                         "Cuadrícula"
                       ] }),
                       /* @__PURE__ */ jsx("span", { className: "text-xs", children: showGrid ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                        /* @__PURE__ */ jsx("span", { className: "icon icon-tick icon--xs align-[middle!important] -mt-0.5" }),
+                        /* @__PURE__ */ jsx("span", { className: "icon icon-tick icon--xs align-[middle!important] limbo--mt-0.5" }),
                         " ",
                         "Activo"
                       ] }) : "Inactivo" })
@@ -21385,12 +21794,12 @@ ${errors.map((e) => `- ${e.crop}: ${e.error}`).join("\n")}`;
                     "aria-label": "Activar/desactivar sombreado",
                     children: [
                       /* @__PURE__ */ jsxs("span", { className: "text-sm flex items-center", children: [
-                        /* @__PURE__ */ jsx("span", { className: "icon icon-comparison-blue me-1" }),
+                        /* @__PURE__ */ jsx("span", { className: "icon icon-comparison-blue limbo-me-1" }),
                         " ",
                         "Tablero"
                       ] }),
                       /* @__PURE__ */ jsx("span", { className: "text-xs", children: shade ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                        /* @__PURE__ */ jsx("span", { className: "icon icon-tick icon--xs align-[middle!important] -mt-0.5" }),
+                        /* @__PURE__ */ jsx("span", { className: "icon icon-tick icon--xs align-[middle!important] limbo--mt-0.5" }),
                         " ",
                         "Activo"
                       ] }) : "Inactivo" })
@@ -21403,7 +21812,7 @@ ${errors.map((e) => `- ${e.crop}: ${e.error}`).join("\n")}`;
         ] })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex justify-between flex-shrink-0 border-t border-gray-200 bg-white mx-2 mt-1 py-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between flex-shrink-0 border-t border-gray-200 bg-white mx-2 mt-1 py-2 lg:gap-0", children: [
       /* @__PURE__ */ jsxs(
         "button",
         {
@@ -21413,36 +21822,50 @@ ${errors.map((e) => `- ${e.crop}: ${e.error}`).join("\n")}`;
           children: [
             /* @__PURE__ */ jsx("span", { className: "icon icon-lightbulb text-yellow-500" }),
             /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-blue-800", children: "Guía de uso" }),
-            /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-down scale-75 -rotate-145" })
+            /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-down scale-75 limbo--rotate-145" })
           ]
         }
       ),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-2 items-center justify-end", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: preview,
+          disabled: creatingVariant || !canExport,
+          className: `px-3 cursor-pointer py-1.5 text-sm rounded transition-colors ${showPreview ? "bg-red-600 hover:bg-red-700 text-white" : "bg-blue-600 hover:bg-blue-700 text-white"} disabled:opacity-50 disabled:cursor-not-allowed`,
+          "aria-label": "Vista previa",
+          title: "Mostrar/Ocultar vista previa",
+          children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "icon icon-search-white icon--sm" }),
+            /* @__PURE__ */ jsx("span", { className: "hidden sm:inline whitespace-nowrap", children: showPreview ? "Cerrar previa" : "Vista previa" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-1 lg:gap-2 items-center justify-end", children: [
         /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: preview,
+            onClick: handleDownload,
             disabled: creatingVariant || !canExport,
-            className: `px-3 cursor-pointer py-1.5 text-sm rounded transition-colors ${showPreview ? "bg-red-600 hover:bg-red-700 text-white" : "bg-blue-600 hover:bg-blue-700 text-white"} disabled:opacity-50 disabled:cursor-not-allowed`,
-            "aria-label": "Vista previa",
-            title: "Mostrar/Ocultar vista previa",
+            className: "cursor-pointer px-3 py-1.5 text-sm rounded bg-brand-blue-800 hover:bg-brand-blue-1000 text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+            "aria-label": "Descargar",
+            title: "Descargar recorte sin guardar",
             children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsx("span", { className: "icon icon-search-white icon--sm" }),
-              /* @__PURE__ */ jsx("span", { className: "hidden sm:inline whitespace-nowrap", children: showPreview ? "Cerrar previa" : "Vista previa" })
+              /* @__PURE__ */ jsx("span", { className: "icon icon-download-white icon--sm" }),
+              /* @__PURE__ */ jsx("span", { className: "hidden md:inline whitespace-nowrap", children: "Descargar" })
             ] })
           }
         ),
-        /* @__PURE__ */ jsx(
+        image.file && /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: handleDownload,
-            disabled: creatingVariant || !canExport,
-            className: "cursor-pointer px-3 py-1.5 text-sm rounded bg-brand-blue-800 hover:bg-brand-blue-1000 text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
-            "aria-label": "Descargar",
-            title: "Descargar recorte sin guardar",
+            onClick: handleKeepOriginal,
+            disabled: creatingVariant || uploading,
+            className: `px-3 cursor-pointer py-1.5 text-sm rounded bg-teal-600 hover:bg-teal-700 text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed`,
+            "aria-label": "Conservar solo imagen original sin crear recortes",
+            title: "Subir y guardar la imagen original sin crear recortes",
             children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsx("span", { className: "icon icon-download-white icon--sm" }),
-              /* @__PURE__ */ jsx("span", { className: "hidden sm:inline whitespace-nowrap", children: "Descargar" })
+              /* @__PURE__ */ jsx("span", { className: "icon icon-tick-white icon--sm" }),
+              /* @__PURE__ */ jsx("span", { className: "hidden md:inline whitespace-nowrap", children: "Conservar original" })
             ] })
           }
         ),
@@ -21452,7 +21875,6 @@ ${errors.map((e) => `- ${e.crop}: ${e.error}`).join("\n")}`;
             onClick: saveCrop,
             disabled: creatingVariant || !cropData || !effectiveImageInfo || !canExport || !state.isReady,
             className: "px-3 cursor-pointer py-1.5 text-sm rounded bg-green-600 hover:bg-green-700 text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
-            "aria-label": "Guardar",
             title: "Guardar imagen recortada",
             children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: creatingVariant ? /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx("span", { className: "icon icon-save-white icon--sm" }),
@@ -21505,16 +21927,36 @@ ${errors.map((e) => `- ${e.crop}: ${e.error}`).join("\n")}`;
               ),
               /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
-                  /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-800 truncate", children: crop.label }),
+                  /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      title: "Nombre del archivo a descargar",
+                      className: "text-sm font-medium text-gray-800 truncate",
+                      children: [
+                        crop.label,
+                        "_",
+                        crop.width,
+                        "_",
+                        crop.height
+                      ]
+                    }
+                  ),
                   crop.required && /* @__PURE__ */ jsx("span", { className: "text-xs px-1.5 py-0.5 bg-red-100 text-red-700 rounded whitespace-nowrap", children: "Obligatorio" }),
                   !isConfigured && !crop.required && /* @__PURE__ */ jsx("span", { className: "text-xs px-1.5 py-0.5 bg-orange-100 text-orange-700 rounded whitespace-nowrap", children: "Sin configurar" })
                 ] }),
-                /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-500", children: [
-                  crop.width,
-                  " × ",
-                  crop.height,
-                  " px"
-                ] })
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    title: "Dimensiones del recorte",
+                    className: "text-xs text-gray-500",
+                    children: [
+                      crop.width,
+                      " × ",
+                      crop.height,
+                      " px"
+                    ]
+                  }
+                )
               ] })
             ]
           },
@@ -21658,7 +22100,7 @@ ${errors.map((e) => `- ${e.crop}: ${e.error}`).join("\n")}`;
                 /* @__PURE__ */ jsxs("span", { className: "inline-flex gap-1 mx-1", children: [
                   /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-right-box rotate-180 icon--sm" }),
                   /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-right-box icon--sm" }),
-                  /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-right-box -rotate-90 icon--sm" }),
+                  /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-right-box limbo--rotate-90 icon--sm" }),
                   /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-right-box rotate-90 icon--sm" })
                 ] }),
                 "Mueven la selección en incrementos de 10px"
@@ -21774,7 +22216,165 @@ ${errors.map((e) => `- ${e.crop}: ${e.error}`).join("\n")}`;
           children: "Entendido"
         }
       ) })
-    ] }) })
+    ] }) }),
+    showPreview && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "min-w-[90%] fixed md:absolute inset-0 md:inset-auto bg-black/50 md:bg-transparent flex items-center justify-center md:block z-[9999] md:z-50 pointer-events-none",
+        onClick: (e) => {
+          if (e.target === e.currentTarget && window.innerWidth < 768) {
+            setShowPreview(false);
+            setPreviewUrl(null);
+          }
+        },
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "pointer-events-auto bg-white rounded-lg shadow-2xl border-2 border-brand-blue-800 overflow-hidden flex flex-col max-w-md w-full mx-4 md:mx-0 max-h-[80vh] md:max-h-[600px]",
+            style: {
+              // En desktop: posicionamiento absoluto con drag y width fijo
+              // En móvil: centrado con flexbox (sin drag)
+              ...window.innerWidth >= 768 ? {
+                position: "absolute",
+                left: `${previewPosition.x}px`,
+                top: `${previewPosition.y}px`,
+                width: "420px",
+                cursor: isDragging ? "grabbing" : "default"
+              } : {}
+            },
+            onMouseDown: handlePreviewMouseDown,
+            onTouchStart: handlePreviewTouchStart,
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "limbo-preview-modal-header px-4 py-3 bg-gradient-to-r from-brand-blue-800 to-brand-blue-1000 text-white flex items-center justify-between cursor-grab active:cursor-grabbing select-none",
+                  style: { cursor: isDragging ? "grabbing" : "grab" },
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx("span", { className: "icon icon-search-white icon--sm" }),
+                      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: "Vista previa" })
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: () => {
+                          setShowPreview(false);
+                          setPreviewUrl(null);
+                        },
+                        className: "flex p-1 hover:bg-white/20 rounded transition-colors cursor-pointer aspect-square min-w-fit min-h-fit",
+                        "aria-label": "Cerrar vista previa",
+                        title: "Cerrar vista previa",
+                        children: /* @__PURE__ */ jsx("span", { className: "icon icon-close-small-white icon--sm p-0 m-0 py-auto my-auto mx-auto" })
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto bg-gray-50 p-4", children: previewLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full min-h-[200px]", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+                /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-3" }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600", children: "Generando vista previa..." })
+              ] }) }) : previewUrl ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "relative w-full bg-white rounded-lg border border-gray-200 overflow-hidden shadow-sm cursor-zoom-in hover:ring-2 hover:ring-brand-blue-800 transition-all",
+                    onClick: () => setShowPreviewLightbox(true),
+                    role: "button",
+                    tabIndex: 0,
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        setShowPreviewLightbox(true);
+                      }
+                    },
+                    "aria-label": "Click para ver recorte en tamaño completo",
+                    title: "Click para ampliar",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "img",
+                        {
+                          src: previewUrl,
+                          alt: "Vista previa del recorte",
+                          className: "w-full h-auto object-contain max-h-[400px]"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("div", { className: "absolute top-2 right-2 bg-black/60 text-white px-2 py-1 rounded text-xs flex items-center gap-1", children: [
+                        /* @__PURE__ */ jsx("span", { className: "icon icon-search-white icon--xs" }),
+                        /* @__PURE__ */ jsx("span", { children: "Ampliar" })
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "text-center text-xs text-gray-500", children: [
+                  /* @__PURE__ */ jsx("p", { className: "font-medium text-gray-700 mb-1", children: activeCrop?.label || "Recorte" }),
+                  /* @__PURE__ */ jsxs("p", { children: [
+                    activeCrop?.width,
+                    " × ",
+                    activeCrop?.height,
+                    " px"
+                  ] })
+                ] })
+              ] }) : /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full min-h-[200px]", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: "No se pudo generar la vista previa" }) }) }),
+              /* @__PURE__ */ jsx("div", { className: "px-4 py-2 bg-gray-100 border-t border-gray-200", children: /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-600 text-center", children: [
+                /* @__PURE__ */ jsxs("span", { className: "hidden md:inline", children: [
+                  "Arrastra desde el título para mover •",
+                  " "
+                ] }),
+                "Actualización automática al editar"
+              ] }) })
+            ]
+          }
+        )
+      }
+    ),
+    showPreviewLightbox && previewUrl && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "fixed inset-0 bg-black/95 z-[10001] flex items-center justify-center p-4",
+        onClick: () => setShowPreviewLightbox(false),
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Vista de recorte en tamaño completo",
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setShowPreviewLightbox(false),
+              className: "absolute top-4 right-4 p-3 bg-white/10 hover:bg-white/20 rounded-full transition-colors cursor-pointer z-10",
+              "aria-label": "Cerrar vista ampliada",
+              title: "Cerrar (Esc)",
+              children: /* @__PURE__ */ jsx("span", { className: "icon icon-close-small-white icon--lg" })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "absolute top-4 left-4 bg-black/60 text-white px-4 py-3 rounded-lg text-sm backdrop-blur-sm", children: [
+            /* @__PURE__ */ jsx("p", { className: "font-semibold text-base mb-1", children: activeCrop?.label || "Recorte" }),
+            /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-300", children: [
+              activeCrop?.width,
+              " × ",
+              activeCrop?.height,
+              " px"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "relative max-w-[95vw] max-h-[95vh] w-full h-full flex items-center justify-center",
+              onClick: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: previewUrl,
+                  alt: "Vista completa del recorte",
+                  className: "max-w-full max-h-full object-contain rounded-lg shadow-2xl"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 left-1/2 limbo--translate-x-1/2 bg-black/60 text-white px-4 py-2 rounded-lg text-xs text-center backdrop-blur-sm", children: "Click fuera de la imagen o presiona ESC para cerrar" })
+        ]
+      }
+    )
   ] });
 }
 function Pagination({
@@ -21832,10 +22432,7 @@ function Pagination({
       {
         onClick: handlePrevious,
         disabled: disabled || currentPage <= 1,
-        className: `
-          px-3 py-2 text-sm font-medium rounded-md transition-colors disabled:cursor-default cursor-pointer
-          ${disabled || currentPage <= 1 ? "text-gray-400 bg-gray-100 cursor-not-allowed" : "text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 focus:ring-2 focus:ring-blue-500"}
-        `,
+        className: ` px-3 py-2 text-sm font-medium rounded-md transition-colors disabled:cursor-default cursor-pointer ${disabled || currentPage <= 1 ? "text-gray-400 bg-gray-100 cursor-not-allowed" : "text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 focus:ring-2 focus:ring-blue-500"} `,
         children: [
           /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-left-white icon--sm" }),
           " Anterior"
@@ -21847,10 +22444,7 @@ function Pagination({
       {
         onClick: () => handlePageClick(page),
         disabled,
-        className: `
-                  px-3 py-2 text-sm font-medium rounded-md transition-colors disabled:cursor-default cursor-pointer
-                  ${page === currentPage ? "bg-blue-600 text-white border border-blue-600" : disabled ? "text-gray-400 bg-gray-100 cursor-not-allowed" : "text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 focus:ring-2 focus:ring-blue-500"}
-                `,
+        className: ` px-3 py-2 text-sm font-medium rounded-md transition-colors disabled:cursor-default cursor-pointer ${page === currentPage ? "bg-blue-600 text-white border border-blue-600" : disabled ? "text-gray-400 bg-gray-100 cursor-not-allowed" : "text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 focus:ring-2 focus:ring-blue-500"} `,
         children: page
       }
     ) }, `page-${page}-${index}`)) }),
@@ -21859,10 +22453,7 @@ function Pagination({
       {
         onClick: handleNext,
         disabled: disabled || currentPage >= totalPages,
-        className: `
-          px-3 py-2 text-sm font-medium rounded-md transition-colors disabled:cursor-default cursor-pointer
-          ${disabled || currentPage >= totalPages ? "text-gray-400 bg-gray-100 cursor-not-allowed" : "text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 focus:ring-2 focus:ring-blue-500"}
-        `,
+        className: ` px-3 py-2 text-sm font-medium rounded-md transition-colors disabled:cursor-default cursor-pointer ${disabled || currentPage >= totalPages ? "text-gray-400 bg-gray-100 cursor-not-allowed" : "text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 focus:ring-2 focus:ring-blue-500"} `,
         children: [
           "Siguiente ",
           /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-right-white icon--sm" })
@@ -22231,28 +22822,61 @@ function App({
   const tabs = availableTabs.filter(
     (tab) => activeFeatures.includes(tab.feature)
   );
-  const handleUpload = async (file) => {
-    const result = await upload(file);
-    if (result) {
-      invalidateCache();
-      setCurrentPage(1);
-      setImages((prev) => [result, ...prev]);
-      setActiveTab("gallery");
-      if (callbacks.onUpload) {
-        callbacks.onUpload({
-          assetId: result.id,
-          url: result.url,
-          fileName: result.filename,
-          mime: result.mime_type,
-          width: result.width,
-          height: result.height,
-          instanceId
-        });
+  const handleUploadAndCrop = async (file) => {
+    const url2 = URL.createObjectURL(file);
+    const dimensions = await new Promise((resolve) => {
+      const img = new Image();
+      img.onload = () => {
+        resolve({ width: img.naturalWidth, height: img.naturalHeight });
+        URL.revokeObjectURL(url2);
+      };
+      img.onerror = () => {
+        resolve({ width: 1920, height: 1080 });
+        URL.revokeObjectURL(url2);
+      };
+      img.src = url2;
+    });
+    const tempImage = {
+      file,
+      // File object (indica que es imagen nueva sin confirmar)
+      filename: file.name,
+      mime_type: file.type,
+      url: URL.createObjectURL(file),
+      // Nueva URL temporal para preview
+      width: dimensions.width,
+      // Dimensiones reales
+      height: dimensions.height
+      // Dimensiones reales
+      // NO tiene id - el cropper lo generará al subir
+    };
+    setSelectedImage(tempImage);
+    if (activeFeatures.includes("cropper")) {
+      setActiveTab("cropper");
+    } else {
+      const result = await upload(file);
+      if (result) {
+        invalidateCache();
+        setCurrentPage(1);
+        setImages((prev) => [result, ...prev]);
+        setActiveTab("gallery");
+        if (callbacks.onUpload) {
+          callbacks.onUpload({
+            assetId: result.id,
+            url: result.url,
+            fileName: result.filename,
+            mime: result.mime_type,
+            width: result.width,
+            height: result.height,
+            instanceId
+          });
+        }
       }
     }
   };
   const handleDelete = async (imageId) => {
-    if (!confirm("¿Estás seguro de que deseas eliminar esta imagen? Esta acción también eliminará todos sus recortes.")) {
+    if (!confirm(
+      "¿Estás seguro de que deseas eliminar esta imagen? Esta acción también eliminará todos sus recortes."
+    )) {
       return;
     }
     const success = await deleteImg(imageId);
@@ -22307,21 +22931,45 @@ function App({
     const globalConfig2 = window.limboCore?.config?.getGlobal() || {};
     const mode = globalConfig2.mode || "embed";
     const autoHide = globalConfig2.autoHideOnComplete || false;
-    const crops = Array.isArray(result) ? result : [result];
+    let crops = [];
+    let uploadedAsset = null;
+    if (result.crops && result.asset) {
+      crops = result.crops;
+      uploadedAsset = result.asset;
+    } else if (Array.isArray(result)) {
+      crops = result;
+    } else {
+      crops = [result];
+    }
+    if (uploadedAsset && scenario === "with-gallery") {
+      setImages((prev) => [uploadedAsset, ...prev]);
+      setCurrentPage(1);
+      if (callbacks.onUpload) {
+        callbacks.onUpload({
+          assetId: uploadedAsset.id,
+          url: uploadedAsset.url,
+          fileName: uploadedAsset.filename,
+          mime: uploadedAsset.mime_type,
+          width: uploadedAsset.width,
+          height: uploadedAsset.height,
+          instanceId
+        });
+      }
+    }
     if (scenario === "with-gallery") {
       invalidateCache();
     }
     if (callbacks.onCropsSaved) {
       callbacks.onCropsSaved({
         crops,
-        assetId: selectedImage?.id,
+        assetId: uploadedAsset?.id || selectedImage?.id,
         instanceId
       });
     }
     if (window.limboCore?.events) {
       window.limboCore.events.emit("cropsSaved", {
         crops,
-        assetId: selectedImage?.id,
+        assetId: uploadedAsset?.id || selectedImage?.id,
         instanceId
       });
     }
@@ -22367,7 +23015,9 @@ function App({
             });
           }
           if (autoHide) {
-            const container = document.querySelector(`#limbo-instance-${instanceId}`);
+            const container = document.querySelector(
+              `#limbo-instance-${instanceId}`
+            );
             if (container) container.style.display = "none";
           }
         }
@@ -22484,14 +23134,14 @@ function App({
         "Error al subir imagen: ",
         uploadError
       ] }),
-      uploadedImage && /* @__PURE__ */ jsxs("div", { className: "alert alert-success", children: [
+      uploadedImage && /* @__PURE__ */ jsxs("div", { className: "alert alert-success absolute top-0 right-0 m-4", children: [
         "✅ Imagen subida correctamente: ",
         uploadedImage.filename
       ] }),
       /* @__PURE__ */ jsx(
         UploadForm,
         {
-          onUpload: handleUpload,
+          onSelect: handleUploadAndCrop,
           disabled: uploading,
           apiKey,
           prod
@@ -22504,10 +23154,12 @@ function App({
         image: selectedImage,
         onSave: handleCropSave,
         onCancel: handleCropCancel,
-        onDelete: () => handleDelete(selectedImage?.id),
+        onDelete: selectedImage?.id ? () => handleDelete(selectedImage.id) : null,
         onError: handleCropError,
         deleting,
-        onVariantCreated: handleVariantCreated
+        onVariantCreated: handleVariantCreated,
+        onUpload: upload,
+        uploading
       }
     ),
     activeTab === "cropper" && !selectedImage && /* @__PURE__ */ jsx("div", { className: "limbo-empty-state", children: /* @__PURE__ */ jsx("p", { children: "Selecciona una imagen de la galería para comenzar a recortar." }) }),
@@ -26127,7 +26779,7 @@ const Limbo = new LimboCore();
 if (typeof window !== "undefined") {
   window.Limbo = Limbo;
 }
-const PUBLIC_KEY = "pk_e464fd744106b7a8d63d453c4bd02582";
+const PUBLIC_KEY = "pk_d2edad56de145fee22c8b80f6ce3448f";
 if (typeof window !== "undefined" && document.querySelector("#root")) {
   Limbo.configure({
     prod: false,