limbo-component 1.8.5 → 1.9.0

package/dist/limbo.es.js

@@ -12625,9 +12625,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 = {
@@ -12659,7 +12659,7 @@ function getBaseUrl({ prod = false } = {}) {
   return prod ? API_URLS.PROD : API_URLS.DEV;
 }
 async function getHeaders({ isFormData = false, useJWT = true, customHeaders = {} } = {}) {
-  const headers = {};
+  const headers = { "Access-Control-Allow-Origin": "*" };
   if (!isFormData) {
     headers["Content-Type"] = "application/json";
   }
@@ -12747,6 +12747,15 @@ async function callApi({
       credentials: "include"
       // Include cookies for CORS
     });
+    if (res.status === 204) {
+      return {
+        success: true,
+        data: null,
+        message: "No content",
+        httpCode: 204,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      };
+    }
     if (!res.ok) {
       let errorMessage = `HTTP ${res.status}: ${res.statusText}`;
       let errorData = null;
@@ -12919,17 +12928,37 @@ function adaptVariantGenerationFromV2(v2Response) {
     return { result: null };
   }
   const data = v2Response.data;
+  const isSync = data.processing_mode === "sync";
+  if (isSync && data.variants && data.variants.length > 0) {
+    const firstVariant = data.variants[0];
+    return {
+      result: {
+        id: firstVariant.id || null,
+        name: firstVariant.name,
+        width: parseInt(firstVariant.size?.split("x")[0]) || firstVariant.width,
+        height: parseInt(firstVariant.size?.split("x")[1]) || firstVariant.height,
+        format: firstVariant.format,
+        file_size: firstVariant.file_size,
+        url: firstVariant.url,
+        status: firstVariant.status,
+        asset_id: data.asset_id,
+        created_at: firstVariant.created_at || (/* @__PURE__ */ new Date()).toISOString(),
+        // Mantener info de todas las variantes si se necesita
+        all_variants: data.variants
+      }
+    };
+  }
   const legacyResponse = {
     job_id: data.job_id,
     asset_id: data.asset_id,
     variants_requested: data.variants_requested || [],
-    processing_mode: data.async ? "async" : "sync",
+    processing_mode: data.processing_mode || "async",
     estimated_completion: data.estimated_completion,
     // Estado de cada variante
-    variant_statuses: (data.variant_statuses || []).map((status) => ({
+    variant_statuses: (data.variant_statuses || data.variants || []).map((status) => ({
       name: status.name,
       status: status.status,
-      size: status.expected_size,
+      size: status.expected_size || status.size,
       format: status.format
     }))
   };
@@ -14141,7 +14170,9 @@ function Gallery({
     } else if (!loading && !error) {
       accessibilityManager?.announceLoading(false, "galería");
       if (images.length > 0) {
-        accessibilityManager?.announce(`Se encontraron ${images.length} imágenes en la galería`);
+        accessibilityManager?.announce(
+          `Se encontraron ${images.length} imágenes en la galería`
+        );
       }
     } else if (error) {
       accessibilityManager?.announceError(error, "galería");
@@ -14153,8 +14184,8 @@ function Gallery({
       onFiltersChange({ ...filters, [name]: value });
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
-    /* @__PURE__ */ jsx("div", { className: "limbo-card mb-6 p-4 bg-brand-blue-050 shadow-md", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs("div", { className: "w-full px-4 py-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "p-2 mb-2", children: /* @__PURE__ */ jsxs(
       "form",
       {
         className: "limbo-form-grid flex flex-col sm:flex-row flex-wrap gap-4 items-start sm:items-end justify-between",
@@ -14231,27 +14262,29 @@ function Gallery({
       "div",
       {
         ref: galleryRef,
-        className: "limbo-gallery mt-4",
+        className: "limbo-gallery",
         "data-limbo-responsive": true,
         role: "grid",
         "aria-label": "Cargando imágenes de la galería",
         "aria-busy": "true",
-        children: Array.from({ length: loadingConfig.placeholderCount }).map((_, index) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            role: "gridcell",
-            "aria-posinset": index + 1,
-            "aria-setsize": loadingConfig.placeholderCount,
-            children: /* @__PURE__ */ jsx(ImageCardSkeleton, {})
-          },
-          `skeleton-${index}`
-        ))
+        children: Array.from({ length: loadingConfig.placeholderCount }).map(
+          (_, index) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "gridcell",
+              "aria-posinset": index + 1,
+              "aria-setsize": loadingConfig.placeholderCount,
+              children: /* @__PURE__ */ jsx(ImageCardSkeleton, {})
+            },
+            `skeleton-${index}`
+          )
+        )
       }
     ) : loadingConfig.showSpinner ? /* @__PURE__ */ jsx(Loader, { text: "Cargando imágenes..." }) : null : error ? /* @__PURE__ */ jsx("div", { className: "alert alert-danger text-center", children: error }) : /* @__PURE__ */ jsx(
       "div",
       {
         ref: galleryRef,
-        className: "limbo-gallery mt-4",
+        className: "limbo-gallery",
         "data-limbo-responsive": true,
         "data-grid-id": "gallery-grid",
         role: "grid",
@@ -14276,12 +14309,28 @@ function Gallery({
             )
           },
           img.id
-        )) : /* @__PURE__ */ jsx("div", { className: "col-span-full text-center text-gray-500 py-8", role: "status", "aria-live": "polite", children: /* @__PURE__ */ jsx("p", { children: "No se han encontrado imágenes" }) })
+        )) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "col-span-full text-center text-gray-500 py-8",
+            role: "status",
+            "aria-live": "polite",
+            children: /* @__PURE__ */ jsx("p", { children: "No se han encontrado imágenes" })
+          }
+        )
       }
     )
   ] });
 }
-function TabUpload({ file, setFile, previewUrl, setPreviewUrl, fileInputRef, onUpload, disabled }) {
+function TabUpload({
+  file,
+  setFile,
+  previewUrl,
+  setPreviewUrl,
+  fileInputRef,
+  onUpload,
+  disabled
+}) {
   const handleFileChange = (e) => {
     const f = e.target.files[0];
     setFile(f);
@@ -14292,6 +14341,15 @@ function TabUpload({ file, setFile, previewUrl, setPreviewUrl, fileInputRef, onU
       setPreviewUrl(null);
     }
   };
+  const handleClearFile = () => {
+    const confirmClear = window.confirm(
+      "¿Estás seguro de que deseas descartar la imagen seleccionada?"
+    );
+    if (!confirmClear) return;
+    setFile(null);
+    setPreviewUrl(null);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  };
   const handleSubmit = (e) => {
     e.preventDefault();
     if (file && !disabled) {
@@ -14308,7 +14366,7 @@ function TabUpload({ file, setFile, previewUrl, setPreviewUrl, fileInputRef, onU
       className: "flex flex-col items-center gap-6",
       "aria-label": "Subir imagen desde dispositivo",
       children: [
-        /* @__PURE__ */ jsxs(
+        !previewUrl && /* @__PURE__ */ jsxs(
           "label",
           {
             htmlFor: "file-input",
@@ -14335,17 +14393,31 @@ function TabUpload({ file, setFile, previewUrl, setPreviewUrl, fileInputRef, onU
             ]
           }
         ),
-        previewUrl && /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col items-center gap-2", children: [
-          /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: previewUrl,
-              alt: file?.name || "Previsualización",
-              className: "rounded-lg shadow-md border border-brand-blue-200 max-h-64 object-contain bg-white",
-              style: { maxWidth: "100%" }
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "text-sm text-neutral-800 bg-brand-blue-050 p-2 rounded w-full text-center", children: [
+        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:" }),
               " ",
@@ -14362,17 +14434,30 @@ function TabUpload({ file, setFile, previewUrl, setPreviewUrl, fileInputRef, onU
               " ",
               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"
+            }
+          )
         ] }),
-        /* @__PURE__ */ jsx(
-          "button",
+        previewUrl && /* @__PURE__ */ jsx(
+          "input",
           {
-            type: "submit",
-            disabled: !file || disabled,
-            title: !file ? "Proporcione una imagen antes de continuar" : "Subir imagen a la galeria",
-            className: `limbo-btn w-full mt-2 ${!file ? "cursor-not-allowed limbo-btn-disabled" : "limbo-btn-primary"}`,
-            style: { minHeight: 44 },
-            children: disabled ? "Subiendo..." : "Subir imagen"
+            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"
           }
         )
       ]
@@ -14406,7 +14491,21 @@ function useAiServices(prod = false) {
       try {
         const data = await getAiServices(prod);
         if (!isMounted) return;
-        const result = data?.data?.images || [];
+        const servicesData = data?.data || data?.result || [];
+        const result = Array.isArray(servicesData) ? servicesData.map((service) => ({
+          label: service.name || service.label,
+          slug: service.slug,
+          type: service.type,
+          description: service.description,
+          image: service.image
+        })) : Object.entries(servicesData).map(([label, slug]) => ({
+          label,
+          slug,
+          type: "image_generation",
+          // Default for backward compatibility
+          description: null,
+          image: null
+        }));
         setServices(result);
         cache$4.set(cacheKey, { data: result, timestamp: now });
       } catch (err) {
@@ -14478,7 +14577,30 @@ function useImageParams(prod = false) {
   };
   return { params, loading, error, fetchParams, reset };
 }
-function TabAI({ prod, disabled, onSelected, onGenerated }) {
+function LoadingOverlay({
+  show = false,
+  message = "Cargando...",
+  className = ""
+}) {
+  if (!show) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `absolute inset-0 bg-white/80 backdrop-blur-sm z-50 flex flex-col items-center justify-center ${className}`,
+      "aria-live": "polite",
+      "aria-busy": "true",
+      role: "status",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative w-16 h-16", children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 border-4 border-brand-blue-200 rounded-full" }),
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 border-4 border-brand-blue-600 rounded-full border-t-transparent animate-spin" })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-brand-blue-900 font-medium text-lg", children: message })
+      ] })
+    }
+  );
+}
+function TabAI({ prod, disabled, onGenerated }) {
   const aiServicesHook = useAiServices(prod);
   const imageParamsHook = useImageParams(prod);
   const [selectedService, setSelectedService] = useState("");
@@ -14486,37 +14608,16 @@ function TabAI({ prod, disabled, onSelected, onGenerated }) {
   const [aiLoading, setAiLoading] = useState(false);
   const [aiError, setAiError] = useState(null);
   const [aiImage, setAiImage] = useState(null);
-  const serviceLabels = {
-    // IA Services
-    "dall-e-2": "Dalle2",
-    "dall-e-3": "Dalle3",
-    "freepik-classic": "Freepik Classic",
-    "freepik-mystic": "Freepik Mystic",
-    "freepik-google": "Freepik Google",
-    "freepik-flux": "Freepik Flux",
-    // Stock Services
-    "shutterstock": "Shutterstock",
-    "freepikstock": "Freepik"
-  };
-  const getServiceLabel = (service) => {
-    return serviceLabels[service] || service;
-  };
+  const [showServiceSelection, setShowServiceSelection] = useState(true);
+  const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
   React.useEffect(() => {
     if (!aiServicesHook.loading && aiServicesHook.services.length === 1) {
       const service = aiServicesHook.services[0];
-      setSelectedService(service);
-      imageParamsHook.fetchParams(service, true);
+      setSelectedService(service.slug);
+      setShowServiceSelection(false);
+      imageParamsHook.fetchParams(service.slug, true);
     }
   }, [aiServicesHook.loading, aiServicesHook.services]);
-  const handleServiceChange = async (e) => {
-    const service = e.target.value;
-    setSelectedService(service);
-    setDynamicForm({});
-    setAiImage(null);
-    if (service) {
-      await imageParamsHook.fetchParams(service, true);
-    }
-  };
   React.useEffect(() => {
     if (!selectedService) return;
     const params = imageParamsHook.params?.[selectedService]?.parameters;
@@ -14552,9 +14653,20 @@ function TabAI({ prod, disabled, onSelected, onGenerated }) {
       if (imageData && onGenerated) {
         if (imageData.startsWith("http")) {
           try {
-            const imageResponse = await fetch(imageData);
+            const apiBaseUrl = window.limboCore?.config?.getGlobal()?.prod ? "https://limbo.lefebvre.com" : "http://localhost";
+            const proxyUrl = `${apiBaseUrl}/api/atenea/proxy?url=${encodeURIComponent(
+              imageData
+            )}`;
+            const imageResponse = await fetch(proxyUrl, {
+              credentials: "include",
+              headers: {
+                Authorization: `Bearer ${window.limboCore?.apiClient?.token || ""}`
+              }
+            });
             if (!imageResponse.ok) {
-              throw new Error(`Failed to download image: ${imageResponse.status}`);
+              throw new Error(
+                `Failed to download image: ${imageResponse.status}`
+              );
             }
             const blob = await imageResponse.blob();
             const file = new File([blob], "ai-image.png", {
@@ -14562,7 +14674,9 @@ function TabAI({ prod, disabled, onSelected, onGenerated }) {
             });
             onGenerated(file);
           } catch (downloadError) {
-            throw new Error(`Error downloading image: ${downloadError.message}`);
+            throw new Error(
+              `Error downloading image via proxy: ${downloadError.message}`
+            );
           }
         } else {
           const cleanBase64 = imageData.replace(/^data:image\/\w+;base64,/, "");
@@ -14590,86 +14704,183 @@ function TabAI({ prod, disabled, onSelected, onGenerated }) {
   const renderDynamicForm = () => {
     const params = imageParamsHook.params?.[selectedService]?.parameters;
     if (!params) return null;
-    const visibleFields = Object.entries(params).filter(([_, config]) => !config.disabled);
-    const useGridLayout = visibleFields.length > 3;
-    return /* @__PURE__ */ jsxs(
-      "form",
-      {
-        onSubmit: handleDynamicFormSubmit,
-        "data-type": "ai",
-        className: "flex flex-col gap-3 mt-4 border-t-1 pt-4 border-brand-blue-200",
-        "aria-label": "Formulario generación IA",
-        children: [
-          /* @__PURE__ */ jsx("div", { className: useGridLayout ? "grid grid-cols-1 md:grid-cols-2 gap-3" : "flex flex-col gap-3", children: visibleFields.map(([key, config]) => {
-            let placeholder = config.placeholder || "";
-            if (!placeholder) {
-              if (config.type === "integer") {
-                placeholder = config.minValue && config.maxValue ? `Entre ${config.minValue} y ${config.maxValue}` : config.minValue ? `Mínimo ${config.minValue}` : config.maxValue ? `Máximo ${config.maxValue}` : "Introduce un número";
-              } else if (key.toLowerCase().includes("prompt")) {
-                placeholder = "Describe la imagen que deseas generar...";
-              } else if (key.toLowerCase().includes("negative")) {
-                placeholder = "Elementos a evitar en la imagen...";
-              } else {
-                placeholder = `Introduce ${(config.label || key).toLowerCase()}`;
-              }
+    const allFields = Object.entries(params).filter(([_, config]) => !config.hidden);
+    const promptFields = allFields.filter(
+      ([key]) => key.toLowerCase().includes("prompt") || key.toLowerCase().includes("query")
+    );
+    const advancedFields = allFields.filter(
+      ([key]) => !key.toLowerCase().includes("prompt") && !key.toLowerCase().includes("query")
+    );
+    const renderField = (key, config) => {
+      let placeholder = config.placeholder || "";
+      if (!placeholder) {
+        if (config.type === "integer") {
+          placeholder = config.minValue && config.maxValue ? `Entre ${config.minValue} y ${config.maxValue}` : config.minValue ? `Mínimo ${config.minValue}` : config.maxValue ? `Máximo ${config.maxValue}` : "Introduce un número";
+        } else if (key.toLowerCase().includes("prompt")) {
+          placeholder = "Describe la imagen que deseas generar...";
+        } else if (key.toLowerCase().includes("negative")) {
+          placeholder = "Elementos a evitar en la imagen...";
+        } else {
+          placeholder = `Introduce ${(config.label || key).toLowerCase()}`;
+        }
+      }
+      const isPromptField = key.toLowerCase().includes("prompt") || key.toLowerCase().includes("query");
+      return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor: `ai-${key}`,
+            className: "text-xs font-medium text-brand-blue-900",
+            children: [
+              config.label || key,
+              config.required && /* @__PURE__ */ jsx("span", { className: "text-red-600 ml-1", children: "*" })
+            ]
+          }
+        ),
+        config.options ? /* @__PURE__ */ jsx(
+          "select",
+          {
+            id: `ai-${key}`,
+            name: key,
+            value: dynamicForm[key] ?? "",
+            onChange: handleDynamicFormChange,
+            className: "limbo-input",
+            disabled,
+            title: config.label || key,
+            children: config.options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt, children: opt }, opt))
+          }
+        ) : isPromptField ? /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            id: `ai-${key}`,
+            name: key,
+            value: dynamicForm[key] ?? "",
+            onChange: handleDynamicFormChange,
+            className: "limbo-input resize-none overflow-y-auto",
+            disabled,
+            required: config.required,
+            placeholder,
+            title: config.label || key,
+            rows: 3,
+            style: {
+              maxHeight: "9rem",
+              // 3 rows * 3 = 9rem aprox
+              minHeight: "3rem"
+            },
+            onInput: (e) => {
+              e.target.style.height = "auto";
+              const newHeight = Math.min(e.target.scrollHeight, 144);
+              e.target.style.height = `${newHeight}px`;
             }
-            return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-              /* @__PURE__ */ jsxs(
-                "label",
-                {
-                  htmlFor: `ai-${key}`,
-                  className: "text-xs font-medium text-brand-blue-900",
-                  children: [
-                    config.label || key,
-                    config.required && /* @__PURE__ */ jsx("span", { className: "text-red-600 ml-1", children: "*" })
-                  ]
-                }
-              ),
-              config.options ? /* @__PURE__ */ jsx(
-                "select",
-                {
-                  id: `ai-${key}`,
-                  name: key,
-                  value: dynamicForm[key] ?? "",
-                  onChange: handleDynamicFormChange,
-                  className: "limbo-input",
-                  disabled,
-                  title: config.label || key,
-                  children: config.options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt, children: opt }, opt))
-                }
-              ) : /* @__PURE__ */ jsx(
-                "input",
+          }
+        ) : /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: `ai-${key}`,
+            type: config.type === "integer" ? "number" : "text",
+            name: key,
+            value: dynamicForm[key] ?? "",
+            onChange: handleDynamicFormChange,
+            className: "limbo-input",
+            disabled,
+            required: config.required,
+            min: config.minValue,
+            max: config.maxValue,
+            placeholder,
+            title: config.label || key
+          }
+        )
+      ] }, key);
+    };
+    return /* @__PURE__ */ jsxs("div", { children: [
+      aiServicesHook.services.length > 1 && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setShowServiceSelection(true);
+            setSelectedService("");
+            setDynamicForm({});
+            setAiImage(null);
+            setAiError(null);
+          },
+          className: "flex cursor-pointer items-center gap-2 text-brand-blue-600 hover:text-brand-blue-700 mb-4 font-medium",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-left" }),
+            "Volver al menú de servicios"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxs(
+          "form",
+          {
+            onSubmit: handleDynamicFormSubmit,
+            "data-type": "ai",
+            className: "flex flex-col gap-3 mt-4 border-t-1 pt-4 border-brand-blue-200",
+            "aria-label": "Formulario generación IA",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: promptFields.map(([key, config]) => renderField(key, config)) }),
+              advancedFields.length > 0 && /* @__PURE__ */ jsxs("div", { className: "border-t border-gray-200 pt-3", children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setShowAdvancedOptions(!showAdvancedOptions),
+                    className: "flex items-center gap-2 text-sm font-medium text-brand-blue-700 hover:text-brand-blue-900 mb-3 transition-colors",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          className: `w-4 h-4 transition-transform ${showAdvancedOptions ? "rotate-90" : ""}`,
+                          fill: "none",
+                          stroke: "currentColor",
+                          viewBox: "0 0 24 24",
+                          children: /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round",
+                              strokeWidth: 2,
+                              d: "M9 5l7 7-7 7"
+                            }
+                          )
+                        }
+                      ),
+                      "Opciones avanzadas",
+                      !showAdvancedOptions && /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-500", children: [
+                        "(",
+                        advancedFields.length,
+                        " opciones)"
+                      ] })
+                    ]
+                  }
+                ),
+                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",
                 {
-                  id: `ai-${key}`,
-                  type: config.type === "integer" ? "number" : "text",
-                  name: key,
-                  value: dynamicForm[key] ?? "",
-                  onChange: handleDynamicFormChange,
-                  className: "limbo-input",
-                  disabled,
-                  required: config.required,
-                  min: config.minValue,
-                  max: config.maxValue,
-                  placeholder,
-                  title: config.label || key
+                  type: "submit",
+                  disabled: aiLoading || disabled,
+                  title: aiLoading ? "Generando 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"
                 }
               )
-            ] }, key);
-          }) }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "submit",
-              disabled: aiLoading || disabled,
-              title: aiLoading ? "Generando 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"
-            }
-          )
-        ]
-      }
-    );
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          LoadingOverlay,
+          {
+            show: aiLoading,
+            message: "Generando imagen con IA..."
+          }
+        )
+      ] })
+    ] });
   };
   if (aiServicesHook.loading) {
     return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center py-8", children: [
@@ -14680,48 +14891,78 @@ function TabAI({ prod, disabled, onSelected, onGenerated }) {
   if (!aiServicesHook.services.length) {
     return /* @__PURE__ */ jsx("div", { className: "alert alert-warning", children: "No hay servicios IA disponibles." });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 mx-4 pb-2", children: showServiceSelection ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "h3",
       {
         id: "aiSelectDescription",
-        className: "text-lg font-semibold text-brand-blue-1000",
-        children: aiServicesHook.services.length === 1 ? `Generación con ${getServiceLabel(selectedService)}` : "Selecciona el modelo IA"
+        className: "text-lg font-semibold text-brand-blue-1000 mb-3",
+        children: "Selecciona el modelo IA"
       }
     ),
-    aiServicesHook.services.length > 1 && /* @__PURE__ */ jsxs(
-      "select",
+    aiServicesHook.error && /* @__PURE__ */ jsx("div", { className: "alert alert-danger", children: aiServicesHook.error }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-around items-stretch justify-items-stretch content-stretch gap-3 w-full max-w-7xl", children: aiServicesHook.services.map((service) => /* @__PURE__ */ jsxs(
+      "button",
       {
-        name: "aiService",
-        "aria-describedby": "aiSelectDescription",
-        title: "Selecciona el servicio IA",
-        value: selectedService,
-        onChange: handleServiceChange,
+        type: "button",
+        onClick: () => {
+          setSelectedService(service.slug);
+          setShowServiceSelection(false);
+          setDynamicForm({});
+          setAiImage(null);
+          setAiError(null);
+          imageParamsHook.fetchParams(service.slug, true);
+        },
         disabled: aiServicesHook.loading || disabled,
-        className: "limbo-input",
+        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"
+        },
         children: [
-          /* @__PURE__ */ jsx("option", { value: "", children: "-- Selecciona --" }),
-          aiServicesHook.services.map((service) => /* @__PURE__ */ jsx("option", { value: service, children: getServiceLabel(service) }, service))
+          service.image && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute inset-0 bg-cover bg-center transition-opacity duration-200 group-hover:opacity-20",
+              style: {
+                backgroundImage: `url(${service.image})`,
+                opacity: 0.1
+              }
+            }
+          ),
+          /* @__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 })
+          ] })
         ]
-      }
-    ),
-    aiServicesHook.error && /* @__PURE__ */ jsx("div", { className: "alert alert-danger", children: aiServicesHook.error }),
-    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))
-  ] });
+      },
+      service.slug
+    )) })
+  ] }) : (
+    /* 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" }),
+      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))
+    ] })
+  ) });
 }
 const BASE_PATH$1 = "/api";
 function getStockServices(prod = false) {
@@ -14753,7 +14994,27 @@ function useStockServices(prod = false) {
       try {
         const data = await getStockServices(prod);
         if (!isMounted) return;
-        const result = data?.data?.images || [];
+        if (data?.httpCode === 204 || data?.data === null) {
+          setServices([]);
+          setError("No hay servicios de stock disponibles en este momento");
+          cache$2.set(cacheKey, { data: [], timestamp: now });
+          return;
+        }
+        const servicesData = data?.data || data?.result || [];
+        const result = Array.isArray(servicesData) ? servicesData.map((service) => ({
+          label: service.name || service.label,
+          slug: service.slug,
+          type: service.type,
+          description: service.description,
+          image: service.image
+        })) : Object.entries(servicesData).map(([label, slug]) => ({
+          label,
+          slug,
+          type: "stock_image",
+          // Default for backward compatibility
+          description: null,
+          image: null
+        }));
         setServices(result);
         cache$2.set(cacheKey, { data: result, timestamp: now });
       } catch (err) {
@@ -14802,6 +15063,8 @@ function TabStock({ prod, disabled, onSelected }) {
   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);
   React.useEffect(() => {
     sessionStorage.setItem(
       "limbo_stock_selectedService",
@@ -14832,30 +15095,14 @@ function TabStock({ prod, disabled, onSelected }) {
       JSON.stringify(paginationInfo)
     );
   }, [paginationInfo]);
-  const serviceLabels = {
-    shutterstock: "Shutterstock",
-    freepikstock: "Freepik"
-  };
-  const getServiceLabel = (service) => {
-    return serviceLabels[service] || service;
-  };
   React.useEffect(() => {
     if (!stockServicesHook.loading && stockServicesHook.services.length === 1) {
       const service = stockServicesHook.services[0];
-      setSelectedService(service);
-      imageParamsHook.fetchParams(service, true);
+      setSelectedService(service.slug);
+      setShowServiceSelection(false);
+      imageParamsHook.fetchParams(service.slug, true);
     }
   }, [stockServicesHook.loading, stockServicesHook.services]);
-  const handleServiceChange = async (e) => {
-    const service = e.target.value;
-    setSelectedService(service);
-    setDynamicForm({});
-    setStockImages([]);
-    setCurrentPage(1);
-    if (service) {
-      await imageParamsHook.fetchParams(service, true);
-    }
-  };
   React.useEffect(() => {
     if (!selectedService) return;
     const params = imageParamsHook.params?.[selectedService]?.parameters;
@@ -14925,7 +15172,7 @@ function TabStock({ prod, disabled, onSelected }) {
         id: img.id || idx,
         title: img.title || img.filename || `Imagen ${idx + 1}`,
         source: img.service || selectedService,
-        sourceTitle: serviceLabels?.[selectedService] || selectedService
+        sourceTitle: stockServicesHook.services.find((s) => s.slug === selectedService)?.label || selectedService
       });
     });
     return allImages;
@@ -14975,10 +15222,15 @@ function TabStock({ prod, disabled, onSelected }) {
   const renderDynamicForm = () => {
     const params = imageParamsHook.params?.[selectedService]?.parameters;
     if (!params) return null;
-    const visibleFields = Object.entries(params).filter(
-      ([, config]) => !config.disabled
+    const allFields = Object.entries(params).filter(
+      ([, config]) => !config.hidden
+    );
+    const searchFields = allFields.filter(
+      ([key]) => key.toLowerCase().includes("query") || key.toLowerCase().includes("search") || key.toLowerCase().includes("term")
+    );
+    const advancedFields = allFields.filter(
+      ([key]) => !key.toLowerCase().includes("query") && !key.toLowerCase().includes("search") && !key.toLowerCase().includes("term")
     );
-    const useGridLayout = visibleFields.length > 3;
     const handleMultiCheckboxChange = (key, value) => {
       setDynamicForm((prev) => {
         const arr = Array.isArray(prev[key]) ? prev[key] : [];
@@ -14989,147 +15241,274 @@ function TabStock({ prod, disabled, onSelected }) {
         }
       });
     };
-    return /* @__PURE__ */ jsxs(
-      "form",
-      {
-        onSubmit: handleDynamicFormSubmit,
-        "data-type": "stock",
-        className: "flex flex-col gap-3 mt-4 border-t-1 pt-4 border-brand-blue-200",
-        "aria-label": "Formulario búsqueda de imágenes de Stock",
-        children: [
+    const renderField = (key, config) => {
+      let placeholder = config.placeholder || "";
+      if (!placeholder) {
+        if (config.type === "integer") {
+          placeholder = config.minValue && config.maxValue ? `Entre ${config.minValue} y ${config.maxValue}` : config.minValue ? `Mínimo ${config.minValue}` : config.maxValue ? `Máximo ${config.maxValue}` : "Introduce un número";
+        } else if (key.toLowerCase().includes("query") || key.toLowerCase().includes("search") || key.toLowerCase().includes("term")) {
+          placeholder = "Buscar imágenes...";
+        } else {
+          placeholder = `Introduce ${(config.label || key).toLowerCase()}`;
+        }
+      }
+      const isSearchField = key.toLowerCase().includes("query") || key.toLowerCase().includes("search") || key.toLowerCase().includes("term");
+      return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor: `stock-${key}`,
+            className: "text-xs font-medium text-brand-blue-900",
+            children: [
+              config.label || key,
+              config.required && /* @__PURE__ */ jsx("span", { className: "text-red-600 ml-1", children: "*" })
+            ]
+          }
+        ),
+        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(
-            "div",
+            "input",
             {
-              className: useGridLayout ? "grid grid-cols-1 md:grid-cols-2 gap-3" : "flex flex-col gap-3",
-              children: visibleFields.map(([key, config]) => {
-                let placeholder = config.placeholder || "";
-                if (!placeholder) {
-                  if (config.type === "integer") {
-                    placeholder = config.minValue && config.maxValue ? `Entre ${config.minValue} y ${config.maxValue}` : config.minValue ? `Mínimo ${config.minValue}` : config.maxValue ? `Máximo ${config.maxValue}` : "Introduce un número";
-                  } else if (key.toLowerCase().includes("query") || key.toLowerCase().includes("search") || key.toLowerCase().includes("term")) {
-                    placeholder = "Buscar imágenes...";
-                  } else {
-                    placeholder = `Introduce ${(config.label || key).toLowerCase()}`;
-                  }
-                }
-                return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-                  /* @__PURE__ */ jsxs(
-                    "label",
-                    {
-                      htmlFor: `stock-${key}`,
-                      className: "text-xs font-medium text-brand-blue-900",
-                      children: [
-                        config.label || key,
-                        config.required && /* @__PURE__ */ jsx("span", { className: "text-red-600 ml-1", children: "*" })
-                      ]
-                    }
-                  ),
-                  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}`,
-                      name: key,
-                      value: dynamicForm[key] ?? "",
-                      onChange: handleDynamicFormChange,
-                      className: "limbo-input",
-                      disabled,
-                      title: config.label || key,
-                      children: config.options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt, children: opt }, opt))
-                    }
-                  ) : /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      id: `stock-${key}`,
-                      type: config.type === "integer" ? "number" : "text",
-                      name: key,
-                      value: dynamicForm[key] ?? "",
-                      onChange: handleDynamicFormChange,
-                      className: "limbo-input",
-                      disabled,
-                      required: config.required,
-                      min: config.minValue,
-                      max: config.maxValue,
-                      placeholder,
-                      title: config.label || key
-                    }
-                  )
-                ] }, key);
-              })
+              type: "checkbox",
+              name: `stock-${key}`,
+              value: opt,
+              checked: Array.isArray(dynamicForm[key]) && dynamicForm[key].includes(opt),
+              onChange: () => handleMultiCheckboxChange(key, opt),
+              disabled
             }
           ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "submit",
-              disabled: stockLoading || disabled,
-              className: `limbo-btn w-full mt-2 ${stockLoading ? "cursor-not-allowed limbo-btn-disabled" : "limbo-btn-primary"}`,
-              style: { minHeight: 44 },
-              children: stockLoading ? "Buscando..." : "Buscar imágenes"
+          /* @__PURE__ */ jsx("span", { className: "text-xs", children: opt })
+        ] }, opt)) }) : config.options ? /* @__PURE__ */ jsx(
+          "select",
+          {
+            id: `stock-${key}`,
+            name: key,
+            value: dynamicForm[key] ?? "",
+            onChange: handleDynamicFormChange,
+            className: "limbo-input",
+            disabled,
+            title: config.label || key,
+            children: config.options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt, children: opt }, opt))
+          }
+        ) : isSearchField ? /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            id: `stock-${key}`,
+            name: key,
+            value: dynamicForm[key] ?? "",
+            onChange: handleDynamicFormChange,
+            className: "limbo-input resize-none overflow-y-auto",
+            disabled,
+            required: config.required,
+            placeholder,
+            title: config.label || key,
+            rows: 3,
+            style: {
+              maxHeight: "9rem",
+              minHeight: "3rem"
+            },
+            onInput: (e) => {
+              e.target.style.height = "auto";
+              const newHeight = Math.min(e.target.scrollHeight, 144);
+              e.target.style.height = `${newHeight}px`;
             }
-          )
-        ]
-      }
-    );
-  };
-  if (stockServicesHook.loading) {
-    return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center py-8", children: [
-      /* @__PURE__ */ jsx("span", { className: "limbo-loader mr-2" }),
-      " Cargando servicios de Stock..."
-    ] });
+          }
+        ) : /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: `stock-${key}`,
+            type: config.type === "integer" ? "number" : "text",
+            name: key,
+            value: dynamicForm[key] ?? "",
+            onChange: handleDynamicFormChange,
+            className: "limbo-input",
+            disabled,
+            required: config.required,
+            min: config.minValue,
+            max: config.maxValue,
+            placeholder,
+            title: config.label || key
+          }
+        )
+      ] }, key);
+    };
+    return /* @__PURE__ */ jsxs("div", { children: [
+      stockServicesHook.services.length > 1 && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setShowServiceSelection(true);
+            setSelectedService("");
+            setDynamicForm({});
+            setStockImages([]);
+            setCurrentPage(1);
+            setPaginationInfo(null);
+            setStockError(null);
+          },
+          className: "flex cursor-pointer items-center gap-2 text-brand-blue-600 hover:text-brand-blue-700 mb-4 font-medium",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-left" }),
+            "Volver al menú de servicios"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxs(
+          "form",
+          {
+            onSubmit: handleDynamicFormSubmit,
+            "data-type": "stock",
+            className: "flex flex-col gap-3 mt-4 border-t-1 pt-4 border-brand-blue-200",
+            "aria-label": "Formulario búsqueda de imágenes de Stock",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: searchFields.map(([key, config]) => renderField(key, config)) }),
+              advancedFields.length > 0 && /* @__PURE__ */ jsxs("div", { className: "border-t border-gray-200 pt-3", children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setShowAdvancedOptions(!showAdvancedOptions),
+                    className: "flex items-center gap-2 text-sm font-medium text-brand-blue-700 hover:text-brand-blue-900 mb-3 transition-colors",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          className: `w-4 h-4 transition-transform ${showAdvancedOptions ? "rotate-90" : ""}`,
+                          fill: "none",
+                          stroke: "currentColor",
+                          viewBox: "0 0 24 24",
+                          children: /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round",
+                              strokeWidth: 2,
+                              d: "M9 5l7 7-7 7"
+                            }
+                          )
+                        }
+                      ),
+                      "Opciones avanzadas",
+                      !showAdvancedOptions && /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-500", children: [
+                        "(",
+                        advancedFields.length,
+                        " opciones)"
+                      ] })
+                    ]
+                  }
+                ),
+                showAdvancedOptions && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3 animate-fadeIn", children: advancedFields.map(
+                  ([key, config]) => renderField(key, config)
+                ) })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "submit",
+                  disabled: stockLoading || disabled,
+                  className: `limbo-btn w-full mt-2 ${stockLoading ? "cursor-not-allowed limbo-btn-disabled" : "limbo-btn-primary"}`,
+                  style: { minHeight: 44 },
+                  children: stockLoading ? "Buscando..." : "Buscar imágenes"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          LoadingOverlay,
+          {
+            show: stockLoading && !stockImages.length,
+            message: "Buscando imágenes..."
+          }
+        )
+      ] })
+    ] });
+  };
+  if (stockServicesHook.loading) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center py-8", children: [
+      /* @__PURE__ */ jsx("span", { className: "limbo-loader mr-2" }),
+      " Cargando servicios de Stock..."
+    ] });
   }
   if (!stockServicesHook.services.length) {
     return /* @__PURE__ */ jsx("div", { className: "alert alert-warning", children: "No hay servicios de Stock disponibles." });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-    /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-brand-blue-1000", children: stockServicesHook.services.length === 1 ? `Búsqueda en ${getServiceLabel(selectedService)}` : "Selecciona el servicio de Stock" }),
-    stockServicesHook.services.length > 1 && /* @__PURE__ */ jsxs(
-      "select",
+  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" }),
+    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",
       {
-        value: selectedService,
-        onChange: handleServiceChange,
+        type: "button",
+        onClick: () => {
+          setSelectedService(service.slug);
+          setShowServiceSelection(false);
+          setDynamicForm({});
+          setStockImages([]);
+          setCurrentPage(1);
+          setPaginationInfo(null);
+          setStockError(null);
+          imageParamsHook.fetchParams(service.slug, true);
+        },
         disabled: stockServicesHook.loading || disabled,
-        className: "limbo-input",
+        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"
+        },
         children: [
-          /* @__PURE__ */ jsx("option", { value: "", children: "-- Selecciona --" }),
-          stockServicesHook.services.map((service) => /* @__PURE__ */ jsx("option", { value: service, children: getServiceLabel(service) }, service))
+          service.image && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute inset-0 bg-cover bg-center transition-opacity duration-200 group-hover:opacity-20",
+              style: {
+                backgroundImage: `url(${service.image})`,
+                opacity: 0.1
+              }
+            }
+          ),
+          /* @__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 })
+          ] })
         ]
-      }
-    ),
-    stockServicesHook.error && /* @__PURE__ */ jsx("div", { className: "alert alert-danger", children: stockServicesHook.error }),
-    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: [
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "mt-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 relative",
-          "aria-live": "polite",
-          children: [
-            stockLoading && /* @__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..." })
-            ] }) }),
-            stockImages.map((img, idx) => /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: "border border-brand-blue-200 rounded-lg overflow-hidden bg-white shadow-sm hover:shadow-md transition-shadow",
-                children: [
-                  /* @__PURE__ */ jsxs("div", { className: "relative aspect-video bg-neutral-100", children: [
+      },
+      service.slug
+    )) })
+  ] }) : (
+    /* 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" }),
+      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: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "mt-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-1 relative",
+            "aria-live": "polite",
+            children: [
+              /* @__PURE__ */ jsx(
+                LoadingOverlay,
+                {
+                  show: stockLoading,
+                  message: "Cargando imágenes..."
+                }
+              ),
+              stockImages.map((img, idx) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "group border border-brand-blue-200 rounded-sm overflow-hidden bg-white shadow-sm hover:shadow-md transition-all duration-200 cursor-pointer",
+                  title: "Seleccionar imagen",
+                  onClick: () => !downloadingId && !stockLoading && !disabled && handleImageSelect(img),
+                  children: /* @__PURE__ */ jsxs("div", { className: "relative aspect-video bg-neutral-100", children: [
                     /* @__PURE__ */ jsx(
                       "img",
                       {
@@ -15139,84 +15518,79 @@ function TabStock({ prod, disabled, onSelected }) {
                         loading: "lazy"
                       }
                     ),
-                    img.id && /* @__PURE__ */ jsxs("span", { className: "absolute bottom-1 right-1 bg-black/60 text-white text-xs px-2 py-1 rounded", children: [
-                      "ID: ",
-                      img.id
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsx("div", { className: "p-2", children: /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      className: `limbo-btn w-full text-sm ${downloadingId === img.id ? "limbo-btn-disabled cursor-not-allowed" : "limbo-btn-primary"}`,
-                      onClick: () => handleImageSelect(img),
-                      disabled: stockLoading || disabled || downloadingId === img.id,
-                      children: downloadingId === img.id ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                        /* @__PURE__ */ jsx("span", { className: "limbo-loader limbo-loader--sm mr-1" }),
-                        "Descargando..."
-                      ] }) : "Seleccionar"
-                    }
-                  ) })
-                ]
-              },
-              img.id || idx
-            ))
-          ]
-        }
-      ),
-      paginationInfo && /* @__PURE__ */ jsxs("div", { className: "mt-6 flex items-center justify-center gap-2", children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: () => handlePageChange(paginationInfo.current_page - 1),
-            disabled: paginationInfo.current_page <= 1 || stockLoading,
-            className: "limbo-btn limbo-btn-secondary px-4 py-2 disabled:opacity-25" + (paginationInfo.current_page <= 1 || stockLoading ? " pointer-events-none cursor-default" : " limbo-btn-primary"),
-            children: [
-              /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-left-white icon--sm" }),
-              " ",
-              "Anterior"
+                    downloadingId === img.id ? /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 bg-white/90 flex flex-col items-center justify-center gap-2", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "relative w-10 h-10", children: [
+                        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 border-4 border-brand-blue-200 rounded-full" }),
+                        /* @__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" }) })
+                  ] })
+                },
+                img.id || idx
+              ))
             ]
           }
         ),
-        /* @__PURE__ */ jsxs("span", { className: "px-4 py-2 text-sm text-neutral-700", children: [
-          "Página ",
-          paginationInfo.current_page,
-          " de",
-          " ",
-          Math.max(
-            1,
-            Math.ceil(paginationInfo.total / paginationInfo.per_page)
+        paginationInfo && /* @__PURE__ */ jsxs("div", { className: "mt-6 flex items-center justify-center gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => handlePageChange(paginationInfo.current_page - 1),
+              disabled: paginationInfo.current_page <= 1 || stockLoading,
+              className: "limbo-btn limbo-btn-secondary px-4 py-2 disabled:opacity-25" + (paginationInfo.current_page <= 1 || stockLoading ? " pointer-events-none cursor-default" : " limbo-btn-primary"),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-left-white icon--sm" }),
+                " ",
+                "Anterior"
+              ]
+            }
           ),
-          /* @__PURE__ */ jsxs("span", { className: "text-xs text-neutral-500 block", children: [
-            "(",
-            paginationInfo.total,
-            " imágenes totales)"
-          ] })
+          /* @__PURE__ */ jsxs("span", { className: "px-4 py-2 text-sm text-neutral-700", children: [
+            "Página ",
+            paginationInfo.current_page,
+            " de",
+            " ",
+            Math.max(
+              1,
+              Math.ceil(paginationInfo.total / paginationInfo.per_page)
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "text-xs text-neutral-500 block", children: [
+              "(",
+              paginationInfo.total,
+              " imágenes totales)"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => handlePageChange(paginationInfo.current_page + 1),
+              disabled: stockLoading || paginationInfo.current_page >= Math.ceil(
+                paginationInfo.total / paginationInfo.per_page
+              ),
+              className: "limbo-btn limbo-btn-secondary px-4 py-2 disabled:opacity-25" + (stockLoading || paginationInfo.current_page >= Math.ceil(
+                paginationInfo.total / paginationInfo.per_page
+              ) ? " pointer-events-none cursor-default" : " limbo-btn-primary"),
+              children: [
+                "Siguiente",
+                " ",
+                /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-right-white icon--sm" })
+              ]
+            }
+          )
+        ] })
+      ] }),
+      !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: [
+        /* @__PURE__ */ jsx("span", { className: "icon icon-search icon--lg mb-2" }),
+        /* @__PURE__ */ jsxs("p", { children: [
+          'No se encontraron imágenes para "',
+          dynamicForm.query,
+          '"'
         ] }),
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: () => handlePageChange(paginationInfo.current_page + 1),
-            disabled: stockLoading || paginationInfo.current_page >= Math.ceil(paginationInfo.total / paginationInfo.per_page),
-            className: "limbo-btn limbo-btn-secondary px-4 py-2 disabled:opacity-25" + (stockLoading || paginationInfo.current_page >= Math.ceil(paginationInfo.total / paginationInfo.per_page) ? " pointer-events-none cursor-default" : " limbo-btn-primary"),
-            children: [
-              "Siguiente",
-              " ",
-              /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-right-white icon--sm" })
-            ]
-          }
-        )
+        /* @__PURE__ */ jsx("p", { className: "text-sm mt-1", children: "Intenta con otros términos de búsqueda" })
       ] })
-    ] }),
-    !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: [
-      /* @__PURE__ */ jsx("span", { className: "icon icon-search icon--lg mb-2" }),
-      /* @__PURE__ */ jsxs("p", { children: [
-        'No se encontraron imágenes para "',
-        dynamicForm.query,
-        '"'
-      ] }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm mt-1", children: "Intenta con otros términos de búsqueda" })
     ] })
-  ] });
+  ) });
 }
 const BASE_PATH = "/api";
 function getExternalImageSources(prod = false) {
@@ -15532,10 +15906,10 @@ function TabPortals({ prod, disabled, onSelected }) {
         onSubmit: handleSearch,
         className: "flex flex-col gap-4 border-t-1 pt-4 border-brand-blue-200",
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ jsxs("label", { className: "text-sm font-medium text-brand-blue-1000", children: [
-                "Portales (",
+              /* @__PURE__ */ jsxs("h3", { className: "text-lg font-semibold text-brand-blue-1000", children: [
+                "Selecciona portales (",
                 selectedPortals.length,
                 " seleccionados)"
               ] }),
@@ -15544,31 +15918,52 @@ function TabPortals({ prod, disabled, onSelected }) {
                 {
                   type: "button",
                   onClick: handleSelectAll,
-                  className: "text-xs text-brand-blue-800 hover:underline",
+                  className: "text-sm text-brand-blue-700 hover:text-brand-blue-900 font-medium transition-colors",
                   children: selectedPortals.length === portalSourcesHook.sources.length ? "Deseleccionar todos" : "Seleccionar todos"
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-2", children: portalSourcesHook.sources.map((portal) => /* @__PURE__ */ jsxs(
-              "label",
-              {
-                className: "flex items-center gap-2 p-2 border border-brand-blue-200 rounded cursor-pointer hover:bg-brand-blue-050 transition",
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      type: "checkbox",
-                      checked: selectedPortals.includes(portal.id),
-                      onChange: () => handlePortalToggle(portal.id),
-                      disabled,
-                      className: "w-4 h-4"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("span", { className: "text-sm", children: portal.title })
-                ]
-              },
-              portal.id
-            )) })
+            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-3", children: portalSourcesHook.sources.map((portal) => {
+              const isSelected = selectedPortals.includes(portal.id);
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  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
+                  `,
+                  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" }) }),
+                    /* @__PURE__ */ jsx(
+                      "svg",
+                      {
+                        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"
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: `text-sm font-medium text-center ${isSelected ? "text-brand-blue-900" : "text-gray-700"}`, children: portal.title })
+                  ]
+                },
+                portal.id
+              );
+            }) })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
             /* @__PURE__ */ jsx(
@@ -15659,72 +16054,82 @@ function TabPortals({ prod, disabled, onSelected }) {
           /* @__PURE__ */ jsx("span", { className: "limbo-loader" }),
           /* @__PURE__ */ jsx("span", { className: "text-sm text-brand-blue-800", children: "Buscando imágenes..." })
         ] }) }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: `grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 ${loading ? "opacity-50" : ""}`,
-            children: images.map((img, idx) => {
-              const imageKey = `${img.source}-${img.id || idx}`;
-              const imageUrl = img.preview || img.thumbnail || img.url || img.full;
-              if (failedImages.has(imageKey)) {
-                return null;
-              }
-              return /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: "border border-brand-blue-200 rounded-lg overflow-hidden bg-white shadow-sm hover:shadow-md transition-shadow",
-                  children: [
-                    /* @__PURE__ */ jsxs("div", { className: "relative aspect-video bg-neutral-100", children: [
-                      /* @__PURE__ */ jsx(
-                        ValidatedImage,
-                        {
-                          src: imageUrl,
-                          alt: img.title || img.filename || `Imagen ${idx + 1}`,
-                          className: "object-cover w-full h-full",
-                          onError: () => {
-                            setFailedImages((prev) => {
-                              const newSet = new Set(prev);
-                              newSet.add(imageKey);
-                              return newSet;
-                            });
-                          }
-                        }
-                      ),
-                      /* @__PURE__ */ jsx("span", { className: "absolute top-1 left-1 bg-black/60 text-white text-xs px-2 py-1 rounded", children: img.sourceTitle }),
-                      img.id && /* @__PURE__ */ jsxs("span", { className: "absolute bottom-1 right-1 bg-black/60 text-white text-xs px-2 py-1 rounded", children: [
-                        "ID: ",
-                        img.id
-                      ] })
-                    ] }),
-                    /* @__PURE__ */ jsxs("div", { className: "p-2", children: [
-                      img.title && /* @__PURE__ */ jsx(
-                        "p",
-                        {
-                          className: "text-xs text-neutral-700 mb-1 truncate",
-                          title: img.title,
-                          children: img.title
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        "button",
-                        {
-                          className: `limbo-btn w-full text-sm ${downloadingUrl === (img.url || img.full) ? "limbo-btn-disabled cursor-not-allowed" : "limbo-btn-primary"}`,
-                          onClick: () => handleImageSelect(img),
-                          disabled: loading || disabled || downloadingUrl === (img.url || img.full),
-                          children: downloadingUrl === (img.url || img.full) ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                            /* @__PURE__ */ jsx("span", { className: "limbo-loader limbo-loader--sm mr-1" }),
-                            "Descargando..."
-                          ] }) : "Seleccionar"
+        /* @__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..."
+            }
+          ),
+          images.map((img, idx) => {
+            const imageKey = `${img.source}-${img.id || idx}`;
+            const imageUrl = img.preview || img.thumbnail || img.url || img.full;
+            if (failedImages.has(imageKey)) {
+              return null;
+            }
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "group border border-brand-blue-200 rounded-lg overflow-hidden bg-white shadow-sm hover:shadow-md transition-all duration-200 cursor-pointer",
+                onClick: () => !downloadingUrl && !loading && !disabled && handleImageSelect(img),
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "relative aspect-video bg-neutral-100", children: [
+                    /* @__PURE__ */ jsx(
+                      ValidatedImage,
+                      {
+                        src: imageUrl,
+                        alt: img.title || img.filename || `Imagen ${idx + 1}`,
+                        className: "object-cover w-full h-full",
+                        onError: () => {
+                          setFailedImages((prev) => {
+                            const newSet = new Set(prev);
+                            newSet.add(imageKey);
+                            return newSet;
+                          });
                         }
-                      )
-                    ] })
-                  ]
-                },
-                imageKey
-              );
-            })
-          }
-        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "absolute top-1 left-1 bg-black/60 text-white text-xs px-2 py-1 rounded", children: img.sourceTitle }),
+                    downloadingUrl === (img.url || img.full) ? /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 bg-white/90 flex flex-col items-center justify-center gap-2", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "relative w-10 h-10", children: [
+                        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 border-4 border-brand-blue-200 rounded-full" }),
+                        /* @__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-600/0 group-hover:bg-brand-blue-600/20 transition-colors duration-200 flex items-center justify-center", children: /* @__PURE__ */ jsx(
+                      "svg",
+                      {
+                        className: "w-12 h-12 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-200",
+                        fill: "none",
+                        stroke: "currentColor",
+                        viewBox: "0 0 24 24",
+                        children: /* @__PURE__ */ jsx(
+                          "path",
+                          {
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            strokeWidth: 2,
+                            d: "M5 13l4 4L19 7"
+                          }
+                        )
+                      }
+                    ) })
+                  ] }),
+                  img.title && /* @__PURE__ */ jsx("div", { className: "px-2 pb-2 pt-1", children: /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: "text-xs text-gray-600 truncate",
+                      title: img.title,
+                      children: img.title
+                    }
+                  ) })
+                ]
+              },
+              imageKey
+            );
+          })
+        ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "mt-6 flex items-center justify-center gap-2", children: [
         /* @__PURE__ */ jsxs(
@@ -15831,7 +16236,7 @@ function UploadForm({
       }, 0);
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: "limbo-upload-form p-4 border-2 border-gray-200/50 rounded-lg min-w-fit max-w-5xl mx-auto", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "limbo-upload-form py-4 min-w-fit max-w-7xl mx-auto", children: [
     /* @__PURE__ */ jsx("div", { className: "limbo-tabs-container", children: /* @__PURE__ */ jsx(
       "div",
       {
@@ -19138,7 +19543,15 @@ const useCropper = (image, options = {}) => {
       }
     };
     setupImage();
-  }, [image, config.aspectRatio, config.shade, config.paspartuFactor]);
+  }, [image]);
+  useEffect(() => {
+    if (!managerRef.current || !isReady) return;
+    managerRef.current.selection.setAspectRatio(config.aspectRatio);
+  }, [config.aspectRatio, isReady]);
+  useEffect(() => {
+    if (!managerRef.current || !isReady) return;
+    managerRef.current.canvas.setBackground(config.shade);
+  }, [config.shade, isReady]);
   const transform = useCallback(() => ({
     move: (x, y) => managerRef.current?.transform.move(x, y) || false,
     zoom: (factor) => managerRef.current?.transform.zoom(factor) || false,
@@ -19334,15 +19747,16 @@ function CropperView({
   const [previewLoading, setPreviewLoading] = useState(false);
   const [showGrid, setShowGrid] = useState(true);
   const [shade, setShade] = useState(true);
+  const [initialLoading, setInitialLoading] = useState(true);
+  const [cropTransitioning, setcropTransitioning] = useState(false);
   const [flipStates, setFlipStates] = useState({
     horizontal: false,
     vertical: false
   });
-  const [showTips, setShowTips] = useState(false);
-  const [showVisualOptions, setShowVisualOptions] = useState(true);
-  const [showSelectorOptions, setShowSelectorOptions] = useState(true);
-  const [showImageOptions, setShowImageOptions] = useState(true);
-  const [zoomInfo, setZoomInfo] = useState({ current: 1, percentage: 100 });
+  const [showTipsModal, setShowTipsModal] = useState(false);
+  const [showVisualOptions, setShowVisualOptions] = useState(false);
+  const [showSelectorOptions, setShowSelectorOptions] = useState(false);
+  const [showImageOptions, setShowImageOptions] = useState(false);
   const [editableFilename] = useState(() => {
     if (!image || !image.filename) {
       return "image";
@@ -19393,7 +19807,6 @@ function CropperView({
   });
   const [activeCropIndex, setActiveCropIndex] = useState(0);
   const activeCrop = crops[activeCropIndex];
-  const [shouldCenter, setShouldCenter] = useState(false);
   const calculatedAspectRatio = useMemo(() => {
     if (!activeCrop || !activeCrop.width || !activeCrop.height) return "";
     return activeCrop.width / activeCrop.height;
@@ -19444,7 +19857,6 @@ function CropperView({
   );
   const toggleGrid = useCallback(() => setShowGrid((v) => !v), []);
   const toggleShade = useCallback(() => setShade((v) => !v), []);
-  const toggleTips = useCallback(() => setShowTips((v) => !v), []);
   const toggleVisualOptions = useCallback(
     () => setShowVisualOptions((v) => !v),
     []
@@ -19469,7 +19881,6 @@ function CropperView({
     },
     [selection]
   );
-  const resetZoomOnly = useCallback(() => utils.resetZoomOnly(), [utils]);
   const flipHorizontal = useCallback(() => {
     setFlipStates((prev) => {
       const newHorizontal = !prev.horizontal;
@@ -19485,24 +19896,44 @@ function CropperView({
     });
   }, [transform]);
   const saveCurrentCropState = useCallback(() => {
-    if (!cropper.manager || !state.isReady) return;
+    if (!cropper.manager || !state.isReady) return null;
     try {
-      if (!cropper.manager.transform) {
-        console.warn("Transform manager not available");
-        return null;
-      }
       const currentCropData = cropData ? { ...cropData } : null;
-      const currentZoom = typeof cropper.manager.transform.getZoom === "function" ? cropper.manager.transform.getZoom() : 1;
-      const currentRotation = typeof cropper.manager.transform.getRotation === "function" ? cropper.manager.transform.getRotation() : 0;
+      let selectorState = null;
+      if (selectionRef.current) {
+        const sel = selectionRef.current;
+        selectorState = {
+          x: sel.x ?? 0,
+          y: sel.y ?? 0,
+          width: sel.width ?? 0,
+          height: sel.height ?? 0
+        };
+      }
+      let imageTransform = null;
+      if (imageRef.current) {
+        const transform2 = imageRef.current.$getTransform?.();
+        if (transform2 && Array.isArray(transform2)) {
+          imageTransform = [...transform2];
+        }
+      }
+      const flipState = {
+        horizontal: flipStates.horizontal,
+        vertical: flipStates.vertical
+      };
       const savedState = {
         cropData: currentCropData,
-        transforms: {
-          zoom: currentZoom,
-          rotation: currentRotation,
-          flipHorizontal: flipStates.horizontal,
-          flipVertical: flipStates.vertical
-        }
+        // Para cálculos de guardado
+        selectorState,
+        // Posición y tamaño del selector
+        imageTransform,
+        // Matriz de transformación completa
+        flipState
+        // Estado de flips
       };
+      console.log(
+        `[CropperView] 💾 Guardando estado del crop ${activeCropIndex}:`,
+        savedState
+      );
       setCrops(
         (prevCrops) => prevCrops.map(
           (crop, index) => index === activeCropIndex ? { ...crop, savedState } : crop
@@ -19513,40 +19944,94 @@ function CropperView({
       console.warn("Error saving crop state:", error);
       return null;
     }
-  }, [cropper.manager, state.isReady, cropData, flipStates, activeCropIndex]);
-  const restoreCropState = useCallback(
-    (cropState) => {
-      if (!cropper.manager || !state.isReady || !cropState) return;
-      try {
-        const { cropData: savedCropData, transforms } = cropState;
-        if (transforms) {
-          utils.resetAll();
-          if (transforms.zoom && transforms.zoom !== 1) {
-            cropper.manager.transform.setZoom(transforms.zoom);
-          }
-          if (transforms.rotation && transforms.rotation !== 0) {
-            cropper.manager.transform.setRotation(transforms.rotation);
-          }
-          if (transforms.flipHorizontal) {
-            cropper.manager.transform.flipHorizontal();
-          }
-          if (transforms.flipVertical) {
-            cropper.manager.transform.flipVertical();
-          }
+  }, [
+    cropper.manager,
+    state.isReady,
+    cropData,
+    flipStates,
+    activeCropIndex,
+    imageRef,
+    selectionRef
+  ]);
+  const restoreCropState = useCallback(
+    (cropIndex) => {
+      const crop = crops[cropIndex];
+      if (!crop || !crop.savedState) {
+        console.log(
+          `[CropperView] ℹ️ No hay estado guardado para crop ${cropIndex}, centrando...`
+        );
+        setTimeout(() => {
+          centerImage();
+          setTimeout(() => centerSelection(), 100);
+        }, 100);
+        return;
+      }
+      if (!cropper.manager || !state.isReady) {
+        console.warn("Cropper not ready for state restoration");
+        return;
+      }
+      try {
+        const { savedState } = crop;
+        console.log(
+          `[CropperView] ♻️ Restaurando estado del crop ${cropIndex}:`,
+          savedState
+        );
+        if (savedState.imageTransform && imageRef.current && Array.isArray(savedState.imageTransform)) {
+          setTimeout(() => {
+            if (imageRef.current && imageRef.current.$setTransform) {
+              const [a, b, c, d, e, f] = savedState.imageTransform;
+              imageRef.current.$setTransform(a, b, c, d, e, f);
+              console.log(
+                `[CropperView] ✅ Imagen restaurada: transform(${a.toFixed(
+                  2
+                )}, ${b.toFixed(2)}, ${c.toFixed(2)}, ${d.toFixed(
+                  2
+                )}, ${e.toFixed(0)}, ${f.toFixed(0)})`
+              );
+            }
+          }, 100);
+        }
+        if (savedState.selectorState && selectionRef.current) {
+          const { x, y, width, height } = savedState.selectorState;
+          setTimeout(() => {
+            if (selectionRef.current) {
+              selectionRef.current.x = x;
+              selectionRef.current.y = y;
+              selectionRef.current.width = width;
+              selectionRef.current.height = height;
+              if (selectionRef.current.$render) {
+                selectionRef.current.$render();
+              }
+              console.log(
+                `[CropperView] ✅ Selector restaurado: ${width}×${height} en (${x}, ${y})`
+              );
+            }
+          }, 150);
+        }
+        if (savedState.flipState) {
           setFlipStates({
-            horizontal: transforms.flipHorizontal || false,
-            vertical: transforms.flipVertical || false
+            horizontal: savedState.flipState.horizontal ?? false,
+            vertical: savedState.flipState.vertical ?? false
           });
         }
-        if (savedCropData) {
-          const { x, y, width, height } = savedCropData;
-          selection.set(x, y, width, height);
-        }
+        console.log(`[CropperView] ✨ Estado restaurado completamente`);
       } catch (error) {
-        console.warn("Error restoring crop state:", error);
+        console.error("Error restoring crop state:", error);
+        setTimeout(() => {
+          centerImage();
+          setTimeout(() => centerSelection(), 100);
+        }, 100);
       }
     },
-    [cropper.manager, state.isReady, selection, utils]
+    [
+      crops,
+      cropper.manager,
+      state.isReady,
+      centerImage,
+      centerSelection,
+      selectionRef,
+      imageRef
+    ]
   );
   const validateCropNames = useCallback(() => {
     for (let i = 0; i < crops.length; i++) {
@@ -19558,20 +20043,24 @@ function CropperView({
     return -1;
   }, [crops]);
   const switchToCrop = useCallback(
-    (newIndex) => {
+    async (newIndex) => {
       if (newIndex === activeCropIndex) return;
+      setcropTransitioning(true);
       saveCurrentCropState();
+      await new Promise((resolve) => setTimeout(resolve, 100));
       setActiveCropIndex(newIndex);
-      setShouldCenter(true);
+      await new Promise((resolve) => setTimeout(resolve, 250));
+      restoreCropState(newIndex);
+      await new Promise((resolve) => setTimeout(resolve, 200));
+      setcropTransitioning(false);
     },
-    [activeCropIndex, saveCurrentCropState]
+    [activeCropIndex, saveCurrentCropState, restoreCropState]
   );
   const addCustomCrop = useCallback(() => {
     if (!cropConfig.allowCustomCrops) {
       alert("No se pueden añadir recortes personalizados en este modo.");
       return;
     }
-    saveCurrentCropState();
     const newCropId = `crop-custom-${Date.now()}`;
     const newCrop = {
       id: newCropId,
@@ -19584,11 +20073,16 @@ function CropperView({
       savedState: null
     };
     setCrops((prevCrops) => [...prevCrops, newCrop]);
-    setActiveCropIndex(crops.length);
     accessibilityManager?.announce(
-      `Nuevo recorte personalizado añadido: ${newCrop.label}`
+      `Nuevo recorte personalizado añadido: ${newCrop.label}. Selecciónalo para editarlo.`
     );
-  }, [cropConfig.allowCustomCrops, saveCurrentCropState, crops.length, image.width, image.height, accessibilityManager]);
+  }, [
+    cropConfig.allowCustomCrops,
+    crops.length,
+    image.width,
+    image.height,
+    accessibilityManager
+  ]);
   const updateCropDimensions = useCallback(
     (field, value) => {
       const numValue = parseInt(value, 10);
@@ -19648,7 +20142,12 @@ function CropperView({
     [activeCropIndex]
   );
   const removeCustomCrop = useCallback(
-    (cropIndex) => {
+    (cropIndex, cropLabel = null) => {
+      cropLabel = cropLabel || crops[cropIndex].label;
+      const confirmed = window.confirm(
+        `¿Estás seguro de que deseas eliminar "${cropLabel || "este recorte"}"? Esta acción también eliminará todos sus recortes.`
+      );
+      if (!confirmed) return;
       const cropToRemove = crops[cropIndex];
       if (cropToRemove.required) {
         alert("No se puede eliminar un recorte obligatorio.");
@@ -19718,40 +20217,37 @@ function CropperView({
       setPreviewLoading(false);
     }
   }, [canExport, generatePreview, showPreview]);
-  const performSaveCrop = useCallback(async () => {
-    if (!canExport) {
-      const errorMsg = "No se puede exportar el recorte por restricciones de CORS en la imagen original.";
-      accessibilityManager?.announceError(errorMsg);
-      alert(errorMsg);
-      return;
-    }
-    if (!state.isReady) {
-      const errorMsg = "El cropper aún no está inicializado. Espera un momento e inténtalo de nuevo.";
-      accessibilityManager?.announceError(errorMsg);
-      alert(errorMsg);
-      return;
-    }
-    accessibilityManager?.announce("Creando recorte de la imagen");
-    try {
-      if (!cropData || !effectiveImageInfo) {
-        console.error("❌ Datos faltantes:", { cropData, effectiveImageInfo });
-        throw new Error(
-          `No hay datos de recorte disponibles. CropData: ${!!cropData}, ImageInfo: ${!!effectiveImageInfo}`
+  const processSingleCrop = useCallback(
+    async (cropIndex) => {
+      const crop = crops[cropIndex];
+      if (!crop) {
+        throw new Error(`Crop ${cropIndex} no encontrado`);
+      }
+      let usedCropData;
+      if (crop.savedState && crop.savedState.cropData) {
+        usedCropData = crop.savedState.cropData;
+        console.log(
+          `[CropperView] Usando savedState para crop ${cropIndex}:`,
+          usedCropData
         );
-      }
-      if (!cropData.x && cropData.x !== 0 || !cropData.y && cropData.y !== 0 || !cropData.width || !cropData.height) {
-        console.error("❌ CropData inválido:", cropData);
-        throw new Error(
-          "Los datos de recorte no tienen las propiedades esperadas"
+      } else if (cropIndex === activeCropIndex && cropData) {
+        usedCropData = cropData;
+        console.log(
+          `[CropperView] Usando cropData actual para crop activo ${cropIndex}:`,
+          usedCropData
         );
-      }
-      if (!effectiveImageInfo.naturalWidth || !effectiveImageInfo.naturalHeight) {
-        console.error("❌ ImageInfo inválido:", effectiveImageInfo);
+      } else {
         throw new Error(
-          "Los datos de imagen no tienen las dimensiones esperadas"
+          `No hay datos de recorte para el crop "${crop.label}". Ajusta el recorte antes de guardar.`
         );
       }
-      const { x, y, width, height } = cropData;
+      if (!usedCropData.x && usedCropData.x !== 0 || !usedCropData.y && usedCropData.y !== 0 || !usedCropData.width || !usedCropData.height) {
+        throw new Error(`Datos de recorte inválidos para "${crop.label}"`);
+      }
+      if (!effectiveImageInfo?.naturalWidth || !effectiveImageInfo?.naturalHeight) {
+        throw new Error("Información de imagen no disponible");
+      }
+      const { x, y, width, height } = usedCropData;
       const { naturalWidth, naturalHeight } = effectiveImageInfo;
       const cropParams = {
         x: x / naturalWidth,
@@ -19759,10 +20255,10 @@ function CropperView({
         width: width / naturalWidth,
         height: height / naturalHeight
       };
-      const variantWidth = Math.min(activeCrop.width, 5e3);
-      const variantHeight = Math.min(activeCrop.height, 5e3);
+      const variantWidth = Math.min(crop.width, 5e3);
+      const variantHeight = Math.min(crop.height, 5e3);
       const ts = Date.now();
-      const variantName = `${editableFilename}_${activeCrop.label || "crop"}_${ts}`;
+      const variantName = `${editableFilename}_${crop.label || "crop"}_${ts}`;
       const result = await createCropVariant(image.id, cropParams, {
         name: variantName,
         width: variantWidth,
@@ -19773,11 +20269,45 @@ function CropperView({
       if (result) {
         accessibilityManager?.announceSuccess(`Recorte creado: ${variantName}`);
         onVariantCreated?.(image.id, result);
+        return result;
+      }
+      throw new Error("No se pudo crear la variante");
+    },
+    [
+      crops,
+      activeCropIndex,
+      cropData,
+      effectiveImageInfo,
+      editableFilename,
+      createCropVariant,
+      image.id,
+      onVariantCreated,
+      accessibilityManager
+    ]
+  );
+  const performSaveCrop = useCallback(async () => {
+    if (!canExport) {
+      const errorMsg = "No se puede exportar el recorte por restricciones de CORS en la imagen original.";
+      accessibilityManager?.announceError(errorMsg);
+      alert(errorMsg);
+      return;
+    }
+    if (!state.isReady) {
+      const errorMsg = "El cropper aún no está inicializado. Espera un momento e inténtalo de nuevo.";
+      accessibilityManager?.announceError(errorMsg);
+      alert(errorMsg);
+      return;
+    }
+    saveCurrentCropState();
+    accessibilityManager?.announce("Creando recorte de la imagen");
+    try {
+      const result = await processSingleCrop(activeCropIndex);
+      if (result) {
         onSave(result);
       }
     } catch (error) {
       console.warn("Error creating crop variant:", error);
-      const errorMsg = "No se pudo crear el recorte. Inténtalo de nuevo.";
+      const errorMsg = error.message || "No se pudo crear el recorte. Inténtalo de nuevo.";
       accessibilityManager?.announceError(errorMsg);
       alert(errorMsg);
       onError?.(error);
@@ -19786,34 +20316,208 @@ function CropperView({
     canExport,
     state.isReady,
     accessibilityManager,
-    cropData,
-    effectiveImageInfo,
-    editableFilename,
-    activeCrop.label,
-    activeCrop.width,
-    activeCrop.height,
-    createCropVariant,
-    image.id,
-    onVariantCreated,
+    saveCurrentCropState,
+    processSingleCrop,
+    activeCropIndex,
     onSave,
     onError
   ]);
+  const performSaveMultipleCrops = useCallback(
+    async (cropIndexes) => {
+      saveCurrentCropState();
+      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);
+          }
+        } catch (error) {
+          errors.push({
+            crop: crops[index]?.label || `Crop ${index}`,
+            error: error.message
+          });
+        }
+      }
+      if (results.length > 0) {
+        accessibilityManager?.announceSuccess(
+          `${results.length} recorte(s) guardado(s) correctamente`
+        );
+        if (results[0]) {
+          onSave(results[0]);
+        }
+      }
+      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);
+      }
+    },
+    [
+      saveCurrentCropState,
+      processSingleCrop,
+      crops,
+      accessibilityManager,
+      onSave
+    ]
+  );
   const saveCrop = useCallback(async () => {
     const invalidCropIndex = validateCropNames();
     if (invalidCropIndex !== -1) {
       const cropWithoutName = crops[invalidCropIndex];
-      alert(`El recorte "${cropWithoutName.label || cropWithoutName || "(sin nombre)"}" debe tener un nombre válido.`);
+      alert(
+        `El recorte "${cropWithoutName.label || cropWithoutName || "(sin nombre)"}" debe tener un nombre válido.`
+      );
       setActiveCropIndex(invalidCropIndex);
       return;
     }
     if (crops.length > 1) {
       setPendingAction("save");
-      setSelectedCropsForAction(crops.map((_, index) => index));
+      const selectableCrops = crops.map((crop, index) => ({ crop, index })).filter(
+        ({ crop, index }) => crop.required || crop.savedState || index === activeCropIndex
+      ).map(({ index }) => index);
+      setSelectedCropsForAction(selectableCrops);
       setShowConfirmModal(true);
       return;
     }
     await performSaveCrop();
-  }, [validateCropNames, crops, performSaveCrop]);
+  }, [validateCropNames, crops, performSaveCrop, activeCropIndex]);
+  const downloadSingleCrop = useCallback(
+    async (cropIndex) => {
+      const crop = crops[cropIndex];
+      if (!crop) {
+        throw new Error(`Crop ${cropIndex} no encontrado`);
+      }
+      if (!crop.savedState && cropIndex !== activeCropIndex) {
+        throw new Error(
+          `El recorte "${crop.label}" aún no ha sido configurado`
+        );
+      }
+      const currentCropState = {
+        index: activeCropIndex,
+        imageTransform: imageRef.current?.$getTransform?.(),
+        selectorState: selectionRef.current ? {
+          x: selectionRef.current.x,
+          y: selectionRef.current.y,
+          width: selectionRef.current.width,
+          height: selectionRef.current.height
+        } : null
+      };
+      try {
+        if (cropIndex !== activeCropIndex && crop.savedState) {
+          console.log(
+            `[CropperView] 🔄 Restaurando temporalmente crop ${cropIndex} para descarga...`
+          );
+          if (crop.savedState.imageTransform && imageRef.current?.$setTransform) {
+            const [a, b, c, d, e, f] = crop.savedState.imageTransform;
+            imageRef.current.$setTransform(a, b, c, d, e, f);
+          }
+          if (crop.savedState.selectorState && selectionRef.current) {
+            const { x, y, width, height } = crop.savedState.selectorState;
+            selectionRef.current.x = x;
+            selectionRef.current.y = y;
+            selectionRef.current.width = width;
+            selectionRef.current.height = height;
+            selectionRef.current.$render?.();
+          }
+          await new Promise((resolve) => setTimeout(resolve, 100));
+        }
+        const canvas = await selection.toCanvas({
+          width: crop.width,
+          height: crop.height,
+          imageSmoothingEnabled: true,
+          imageSmoothingQuality: "high"
+        });
+        if (!canvas) {
+          throw new Error(`No se pudo generar el canvas para "${crop.label}"`);
+        }
+        const downloadUrl = canvas.toDataURL(
+          `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"}`;
+        await downloadImage(downloadUrl, filename, {
+          accessibilityManager,
+          onSuccess: (finalFilename) => {
+            console.log(`✅ Descargado: ${finalFilename}`);
+          },
+          onError: (error) => {
+            throw new Error(
+              `Error al descargar "${crop.label}": ${error.message}`
+            );
+          }
+        });
+        return { crop: crop.label, filename };
+      } finally {
+        if (cropIndex !== activeCropIndex && currentCropState.imageTransform && imageRef.current?.$setTransform) {
+          console.log(
+            `[CropperView] ↩️ Restaurando estado original del crop ${currentCropState.index}...`
+          );
+          const [a, b, c, d, e, f] = currentCropState.imageTransform;
+          imageRef.current.$setTransform(a, b, c, d, e, f);
+          if (currentCropState.selectorState && selectionRef.current) {
+            const { x, y, width, height } = currentCropState.selectorState;
+            selectionRef.current.x = x;
+            selectionRef.current.y = y;
+            selectionRef.current.width = width;
+            selectionRef.current.height = height;
+            selectionRef.current.$render?.();
+          }
+        }
+      }
+    },
+    [
+      crops,
+      activeCropIndex,
+      selection,
+      image.mime_type,
+      editableFilename,
+      accessibilityManager,
+      imageRef,
+      selectionRef
+    ]
+  );
+  const performDownloadMultipleCrops = useCallback(
+    async (cropIndexes) => {
+      saveCurrentCropState();
+      accessibilityManager?.announce(
+        `Descargando ${cropIndexes.length} recortes...`
+      );
+      const results = [];
+      const errors = [];
+      for (const index of cropIndexes) {
+        try {
+          const result = await downloadSingleCrop(index);
+          if (result) {
+            results.push(result);
+          }
+        } catch (error) {
+          errors.push({
+            crop: crops[index]?.label || `Crop ${index}`,
+            error: error.message
+          });
+        }
+      }
+      if (results.length > 0) {
+        accessibilityManager?.announceSuccess(
+          `${results.length} recorte(s) descargado(s) correctamente`
+        );
+      }
+      if (errors.length > 0) {
+        const errorMsg = `Errores al descargar algunos recortes:
+${errors.map((e) => `- ${e.crop}: ${e.error}`).join("\n")}`;
+        accessibilityManager?.announceError(errorMsg);
+        alert(errorMsg);
+      }
+    },
+    [saveCurrentCropState, downloadSingleCrop, crops, accessibilityManager]
+  );
   const performDownload = useCallback(async () => {
     if (!canExport) {
       const errorMsg = "No se puede descargar el recorte por restricciones de CORS en la imagen original.";
@@ -19821,99 +20525,82 @@ function CropperView({
       alert(errorMsg);
       return;
     }
+    saveCurrentCropState();
+    accessibilityManager?.announce("Preparando descarga del recorte");
     try {
-      accessibilityManager?.announce("Preparando descarga del recorte");
-      let downloadUrl = previewUrl;
-      if (!downloadUrl) {
-        downloadUrl = await generatePreview();
-      }
-      if (!downloadUrl) {
-        throw new Error("No se pudo generar la imagen para descargar");
-      }
-      const cropName = activeCrop.label.replace(/\.[^/.]+$/, " ").replace(" ", "-").trim();
-      const filename = `${editableFilename}_${cropName || "crop"}`;
-      await downloadImage(downloadUrl, filename, {
-        accessibilityManager,
-        onSuccess: (finalFilename) => {
-          accessibilityManager?.announce(
-            `Recorte descargado como ${finalFilename}`
-          );
-        },
-        onError: (error) => {
-          accessibilityManager?.announceError(
-            `Error al descargar: ${error.message}`
-          );
-          alert(`Error al descargar la imagen: ${error.message}`);
-        }
-      });
+      await downloadSingleCrop(activeCropIndex);
+      accessibilityManager?.announceSuccess("Recorte descargado correctamente");
     } catch (error) {
       console.error("Error downloading crop:", error);
-      accessibilityManager?.announceError(
-        `Error al descargar el recorte: ${error.message}`
-      );
-      alert(`Error al descargar el recorte: ${error.message}`);
+      const errorMsg = error.message || "Error al descargar el recorte";
+      accessibilityManager?.announceError(errorMsg);
+      alert(errorMsg);
     }
   }, [
     canExport,
     accessibilityManager,
-    previewUrl,
-    activeCrop.label,
-    editableFilename,
-    generatePreview
+    saveCurrentCropState,
+    downloadSingleCrop,
+    activeCropIndex
   ]);
   const handleDownload = useCallback(async () => {
     const invalidCropIndex = validateCropNames();
     if (invalidCropIndex !== -1) {
       const cropWithoutName = crops[invalidCropIndex];
-      alert(`El recorte "${cropWithoutName.label || cropWithoutName || "(sin nombre)"}" debe tener un nombre válido.`);
+      alert(
+        `El recorte "${cropWithoutName.label || cropWithoutName || "(sin nombre)"}" debe tener un nombre válido.`
+      );
       setActiveCropIndex(invalidCropIndex);
       return;
     }
     if (crops.length > 1) {
       setPendingAction("download");
-      setSelectedCropsForAction(crops.map((_, index) => index));
+      const configuredCrops = crops.map((crop, index) => ({ crop, index })).filter(
+        ({ crop, index }) => crop.savedState || index === activeCropIndex
+      ).map(({ index }) => index);
+      setSelectedCropsForAction(configuredCrops);
       setShowConfirmModal(true);
       return;
     }
     await performDownload();
-  }, [validateCropNames, crops, performDownload]);
+  }, [validateCropNames, crops, performDownload, activeCropIndex]);
   useEffect(() => {
     setShowPreview(false);
     setPreviewUrl(null);
   }, [image]);
   useEffect(() => {
-    if (!cropper.manager) return;
+    if (!cropper.manager || !state.isReady || !initialLoading) return;
+    console.log(
+      "[CropperView] Carga inicial completada, centrando imagen y selector..."
+    );
+    setTimeout(() => {
+      centerImage();
+      setTimeout(() => {
+        centerSelection();
+        setInitialLoading(false);
+        console.log("[CropperView] Carga inicial finalizada");
+      }, 100);
+    }, 50);
+  }, [
+    cropper.manager,
+    state.isReady,
+    initialLoading,
+    centerImage,
+    centerSelection
+  ]);
+  useEffect(() => {
+    if (!cropper.manager || !state.isReady) return;
     if (calculatedAspectRatio) {
       selection.setAspectRatio(calculatedAspectRatio);
     }
     utils.setBackground(shade);
-  }, [calculatedAspectRatio, shade, cropper.manager, selection, utils]);
-  useEffect(() => {
-    if (!cropper.manager || !state.isReady) return;
-    const cropState = activeCrop?.savedState;
-    if (cropState) {
-      restoreCropState(cropState);
-      setShouldCenter(false);
-    } else {
-      if (calculatedAspectRatio) {
-        selection.setAspectRatio(calculatedAspectRatio);
-        if (shouldCenter) {
-          setTimeout(() => {
-            selection.center();
-            setShouldCenter(false);
-          }, 100);
-        }
-      }
-    }
   }, [
-    activeCropIndex,
-    activeCrop,
     calculatedAspectRatio,
+    shade,
     cropper.manager,
     state.isReady,
-    restoreCropState,
     selection,
-    shouldCenter
+    utils
   ]);
   useEffect(() => {
     if (!imageInfo || !state.isReady || cropConfig.mandatoryCrops.length > 0)
@@ -19934,21 +20621,6 @@ function CropperView({
       );
     }
   }, [imageInfo, state.isReady, cropConfig.mandatoryCrops.length, crops]);
-  useEffect(() => {
-    if (!cropper.manager || !cropper.manager.utils || !cropper.manager.transform) return;
-    try {
-      const currentZoom = typeof cropper.manager.transform.getZoom === "function" ? cropper.manager.transform.getZoom() : 1;
-      const info = {
-        current: currentZoom,
-        isZoomedIn: currentZoom > 1,
-        isZoomedOut: currentZoom < 1,
-        percentage: Math.round(currentZoom * 100)
-      };
-      setZoomInfo(info);
-    } catch (error) {
-      console.warn("Error updating zoom info:", error);
-    }
-  }, [transformVersion, cropper.manager]);
   useEffect(() => {
     if (!showPreview || !canExport) return;
     const timeoutId = setTimeout(async () => {
@@ -20010,9 +20682,9 @@ function CropperView({
     };
   }, [canvasRef]);
   if (!image) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "limbo-cropper-view px-2 border-2 border-gray-200/50 rounded-lg min-w-fit max-w-7xl mx-auto h-full min-h-full flex flex-col", children: [
-    /* @__PURE__ */ jsxs("div", { className: "limbo-cropper-header flex flex-col sm:flex-row justify-between items-start sm:items-center p-4 lg:p-6 pb-4 border-b border-gray-200 bg-white z-10 flex-shrink-0 gap-4 lg:gap-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 space-y-2", 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: [
           /* @__PURE__ */ jsx("h2", { className: "text-lg sm:text-xl font-bold text-gray-800", children: "Generar recortes" }),
           crops.length > 1 && /* @__PURE__ */ jsx("span", { className: "px-2 py-0.5 bg-blue-100 text-blue-800 text-xs font-semibold rounded", children: activeCrop.label })
@@ -20022,32 +20694,39 @@ function CropperView({
           /* @__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 sm:w-auto", children: [
-        /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-row self-end gap-2 w-full max-w-fit sm:w-auto", children: [
+        /* @__PURE__ */ jsxs(
           "button",
           {
             onClick: onCancel,
             disabled: creatingVariant,
-            className: "limbo-btn limbo-btn-secondary px-4 sm:py-1 h-min flex-1",
+            className: `flex flex-row items-center gap-1 self-end w-full max-w-fit sm:w-auto px-3 cursor-pointer py-1.5 text-sm rounded bg-neutral-gray-500 hover:bg-neutral-gray-700 transition-colors text-white disabled:opacity-50 disabled:cursor-not-allowed`,
             "aria-label": "Cancelar y volver",
             title: "Cancelar y volver",
-            children: "Cancelar"
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-left-white icon--sm m-0 p-0" }),
+              " ",
+              "Cancelar"
+            ]
           }
         ),
-        onDelete && /* @__PURE__ */ jsx(
+        onDelete && /* @__PURE__ */ jsxs(
           "button",
           {
             onClick: () => onDelete(image),
             disabled: deleting | creatingVariant,
-            className: "limbo-btn limbo-btn-danger px-4 sm:py-1 h-min flex-1 sm:flex-initial",
+            className: "flex flex-row items-center gap-1 self-end w-full max-w-fit sm:w-auto px-3 cursor-pointer py-1.5 text-sm rounded bg-red-700 hover:bg-red-900 transition-colors text-white disabled:opacity-50 disabled:cursor-not-allowed",
             "aria-label": `Eliminar imagen ${image.filename}`,
             title: `Eliminar imagen ${image.filename}`,
-            children: deleting ? "Eliminando..." : "Eliminar"
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "icon icon-close-small-white icon--sm m-0 p-0" }),
+              deleting ? "Eliminando..." : "Eliminar"
+            ]
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "limbo-cropper-status bg-white border-gray-100 px-4 sm:px-6 py-2 pb-0 flex-shrink-0", children: [
+    /* @__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:" }),
         " ",
@@ -20071,8 +20750,8 @@ function CropperView({
         ] })
       ] }),
       !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 p-3 sm:p-4 flex-shrink-0 sticky top-0 z-10 mb-3 shadow-sm", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+      /* @__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: [
             "Recortes ",
             crops.length > 1 && `(${crops.length})`
@@ -20085,121 +20764,111 @@ function CropperView({
               className: "text-xs cursor-pointer px-2 py-1 bg-green-100 hover:bg-green-200 text-green-800 rounded border border-green-300 transition-colors flex items-center gap-1",
               title: "Añadir recorte personalizado",
               children: [
-                /* @__PURE__ */ jsx("span", { className: "icon icon-add-green text-green-800 icon--xs" }),
+                /* @__PURE__ */ jsx("span", { className: "icon icon-add-green text-green-800 icon--sm" }),
                 "Añadir recorte"
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "space-y-2 max-h-48 overflow-y-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2 justify-items-stretch items-start justify-stretch w-full", children: crops.map((crop, index) => /* @__PURE__ */ jsxs(
-          "label",
-          {
-            className: `flex items-center gap-3 p-2 rounded border cursor-pointer transition-colors ${activeCropIndex === index ? "bg-blue-50 border-blue-300" : "bg-gray-50 border-gray-200 hover:bg-gray-100"}`,
-            children: [
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "radio",
-                  name: "active-crop",
-                  checked: activeCropIndex === index,
-                  onChange: () => switchToCrop(index),
-                  disabled: creatingVariant,
-                  className: "w-4 h-4 text-blue-600 hidden"
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-                  /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-800 truncate", children: activeCrop.label === crop.label && crop.required === false ? /* @__PURE__ */ jsx(
-                    "input",
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-1.5 max-h-48 overflow-y-auto", children: crops.map((crop, index) => {
+          const isConfigured = crop.savedState || index === activeCropIndex;
+          return /* @__PURE__ */ jsxs(
+            "label",
+            {
+              className: `flex flex-col p-1.5 rounded border cursor-pointer transition-colors min-h-[70px] ${activeCropIndex === index ? "bg-blue-50 border-blue-300" : isConfigured ? "bg-gray-50 border-gray-200 hover:bg-gray-100" : "bg-orange-50 border-orange-300 hover:bg-orange-100"}`,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "radio",
+                    name: "active-crop",
+                    checked: activeCropIndex === index,
+                    onChange: () => switchToCrop(index),
+                    disabled: creatingVariant,
+                    className: "hidden"
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 mb-1", children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1", children: [
+                    activeCropIndex === index && !crop.required ? /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "text",
+                        value: crop.label,
+                        onChange: (e) => updateCropLabel(e.target.value),
+                        disabled: creatingVariant,
+                        className: "w-full text-xs px-1 py-0.5 border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500",
+                        placeholder: "Nombre",
+                        maxLength: 25,
+                        onClick: (e) => e.stopPropagation()
+                      }
+                    ) : /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-800 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" })
+                  ] }) }),
+                  !crop.required && crops.length > 1 && /* @__PURE__ */ jsx(
+                    "button",
                     {
-                      type: "text",
-                      value: crop.label,
-                      onChange: (e) => updateCropLabel(e.target.value),
-                      disabled: creatingVariant || crop.required,
-                      className: "w-full text-sm px-2 py-1.5 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed",
-                      placeholder: "Nombre del recorte",
-                      required: true,
-                      maxLength: 25
+                      onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        removeCustomCrop(index, crop.label);
+                      },
+                      className: "flex-shrink-0 hover:bg-red-500/50 text-red-500 p-1 rounded max-h-fit aspect-square cursor-pointer flex",
+                      title: "Eliminar",
+                      children: /* @__PURE__ */ jsx("span", { className: "icon icon-close-small icon--xs" })
                     }
-                  ) : crop.label }),
-                  crop.required && /* @__PURE__ */ jsx("span", { className: "text-xs px-1.5 py-0.5 bg-red-100 text-red-700 rounded", children: "Obligatorio" }),
-                  crop.isCustom && /* @__PURE__ */ jsx("span", { className: "text-xs px-1.5 py-0.5 bg-purple-100 text-purple-700 rounded", children: "Personalizado" })
+                  )
                 ] }),
-                /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-500", children: [
+                /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 mt-auto", children: activeCropIndex === index ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "number",
+                      min: "100",
+                      max: "5000",
+                      value: crop.width,
+                      onChange: (e) => updateCropDimensions("width", e.target.value),
+                      onBlur: () => validateAndApplyCropDimensions("width"),
+                      disabled: creatingVariant,
+                      className: "flex-1 text-xs px-1 py-0.5 border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500",
+                      placeholder: "W",
+                      onClick: (e) => e.stopPropagation()
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "text-gray-400 text-xs", children: "×" }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "number",
+                      min: "100",
+                      max: "5000",
+                      value: crop.height,
+                      onChange: (e) => updateCropDimensions("height", e.target.value),
+                      onBlur: () => validateAndApplyCropDimensions("height"),
+                      disabled: creatingVariant,
+                      className: "flex-1 text-xs px-1 py-0.5 border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500",
+                      placeholder: "H",
+                      onClick: (e) => e.stopPropagation()
+                    }
+                  )
+                ] }) : /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-gray-500", children: [
                   crop.width,
                   " × ",
                   crop.height,
                   " px"
-                ] })
-              ] }),
-              !crop.required && crops.length > 1 && /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: (e) => {
-                    e.preventDefault();
-                    removeCustomCrop(index);
-                  },
-                  className: `flex items-stretch group max-h-fit hover:bg-red-500/50 text-red-500 hover:text-red-700 p-1 rounded-full aspect-square cursor-pointer`,
-                  title: "Eliminar recorte",
-                  children: /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: `group-hover:bg-gray-transparent-50 icon icon-close-small icon--xs`
-                    }
-                  )
-                }
-              )
-            ]
-          },
-          crop.id
-        )) }),
-        activeCrop && /* @__PURE__ */ jsx("div", { className: "mt-4 pt-4 border-t border-gray-200 space-y-3", children: /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-700 block mb-1", children: "Dimensiones (px)" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "number",
-                min: "100",
-                max: "5000",
-                value: activeCrop.width,
-                onChange: (e) => updateCropDimensions("width", e.target.value),
-                onBlur: () => validateAndApplyCropDimensions("width"),
-                disabled: creatingVariant,
-                className: "flex-1 text-sm px-2 py-1.5 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500",
-                placeholder: "Ancho"
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "text-gray-400 font-bold", children: "×" }),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "number",
-                min: "100",
-                max: "5000",
-                value: activeCrop.height,
-                onChange: (e) => updateCropDimensions("height", e.target.value),
-                onBlur: () => validateAndApplyCropDimensions("height"),
-                disabled: creatingVariant,
-                className: "flex-1 text-sm px-2 py-1.5 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500",
-                placeholder: "Alto"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-1", children: [
-            /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-500", children: [
-              "Proporción:",
-              " ",
-              calculatedAspectRatio ? calculatedAspectRatio.toFixed(2) : "N/A"
-            ] }),
-            /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400", children: "Min: 100px | Max: 5000px" })
-          ] })
-        ] }) })
+                ] }) }),
+                !isConfigured && /* @__PURE__ */ jsx("div", { className: "text-[9px] px-1 py-0.5 bg-orange-200 text-orange-800 rounded text-center mt-1", children: "Sin configurar" })
+              ]
+            },
+            crop.id
+          );
+        }) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "cropper-main-content-area flex flex-col lg:flex-row flex-1 overflow-hidden rounded-lg gap-4 md:gap-0 aspect-auto lg:aspect-square xl:aspect-auto w-full max-w-[95%] lg:max-w-full self-center lg:max-h-[50rem]", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex-1 relative min-w-0 order-1", children: /* @__PURE__ */ jsxs("div", { className: "limbo-cropper-container lg:absolute inset-2 sm:inset-4 bg-white rounded-lg border-2 border-gray-200 shadow-lg overflow-hidden", children: [
-        showPreview && /* @__PURE__ */ jsxs("div", { className: "absolute 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 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(
@@ -20230,6 +20899,20 @@ function CropperView({
             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,
+          {
+            show: initialLoading,
+            message: "Cargando recortador..."
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          LoadingOverlay,
+          {
+            show: cropTransitioning,
+            message: `Cambiando a: ${crops[activeCropIndex]?.label || "recorte"}...`
+          }
+        ),
         /* @__PURE__ */ jsxs(
           "cropper-canvas",
           {
@@ -20320,629 +21003,524 @@ function CropperView({
           }
         )
       ] }) }),
-      /* @__PURE__ */ jsx("div", { className: "flex limbo-cropper-controls w-full lg:w-80 h-full bg-white border-t md:border-t-0 md:border-l border-gray-200 lg:overflow-y-auto flex-shrink-0 order-1 max-h-none", children: /* @__PURE__ */ jsxs("div", { className: "p-3 min-h-full sm:p-4 space-y-3 sm:space-y-4 relative w-full grid grid-cols-1 lg:flex lg:flex-col", children: [
-        /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg border border-gray-200 p-4", 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 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",
             {
-              onClick: toggleVisualOptions,
-              className: "w-full p-2 my-1 cursor-pointer hover:bg-neutral-gray-050/50 transition-colors rounded-md",
-              "aria-expanded": showVisualOptions,
-              "aria-label": "Mostrar/ocultar opciones de visualizción",
+              onClick: toggleImageOptions,
+              className: "hidden sm:block w-full p-2 mb-05 cursor-pointer hover:bg-neutral-gray-050/50 transition-colors rounded-t-sm",
+              "aria-expanded": showImageOptions,
+              "aria-label": "Mostrar/ocultar opciones de visualización",
               children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-700", children: "Visualización" }),
+                /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-700", children: "Transformar imagen" }),
                 /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx(
                   "span",
                   {
-                    className: `icon ${!showVisualOptions ? "icon-chevron-down" : "icon-chevron-up"} text-center icon--xs`
+                    className: `icon ${!showImageOptions ? "icon-chevron-down" : "icon-chevron-up"} text-center icon--xs`
                   }
                 ) })
               ] })
             }
           ),
-          showVisualOptions && /* @__PURE__ */ jsxs("div", { className: "pb-2 space-y-2", children: [
-            /* @__PURE__ */ jsxs(
-              "button",
-              {
-                onClick: toggleGrid,
-                className: `w-full flex cursor-pointer items-center justify-between p-2 rounded transition-colors ${showGrid ? "bg-blue-100 border border-blue-300 text-blue-800" : "bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200"}`,
-                disabled: creatingVariant,
-                "aria-pressed": showGrid,
-                title: "Mostrar/ocultar cuadrícula de la regla de los tercios en el selector",
-                "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" }),
-                    " ",
-                    "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" }),
-                    " ",
-                    "Activo"
-                  ] }) : "Inactivo" })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              "button",
-              {
-                onClick: toggleShade,
-                className: `w-full flex cursor-pointer items-center justify-between p-2 rounded transition-colors ${shade ? "bg-blue-100 border border-blue-300 text-blue-800" : "bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200"}`,
-                disabled: creatingVariant,
-                "aria-pressed": shade,
-                "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" }),
-                    " ",
-                    "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" }),
-                    " ",
-                    "Activo"
-                  ] }) : "Inactivo" })
-                ]
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "bg-white rounded-lg border border-gray-200 p-4" + (showSelectorOptions ? "" : " bg-neutral-gray-50/50"),
-            children: [
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: toggleSelectorOptions,
-                  className: "w-full p-2 my-1 cursor-pointer hover:bg-neutral-gray-050/50 transition-colors rounded-md",
-                  "aria-expanded": showSelectorOptions,
-                  "aria-label": "Mostrar/ocultar opciones de visualizción",
-                  children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-                    /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-700", children: "Ajustes del selector" }),
-                    /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        className: `icon ${!showSelectorOptions ? "icon-chevron-down" : "icon-chevron-up"} text-center icon--xs`
-                      }
-                    ) })
-                  ] })
-                }
-              ),
-              showSelectorOptions && /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "p-2 space-y-2 justify-items-stretch static " + (showImageOptions ? "block" : "sm:hidden"),
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "mb-3 block", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-5 gap-1 content-center h-fit mx-auto", children: [
                   /* @__PURE__ */ jsx(
                     "button",
                     {
-                      onClick: () => setSelectionCoverage(0.5),
-                      className: "p-2 rounded cursor-pointer transition-colors text-xs bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
+                      onClick: () => zoom(-0.2),
+                      className: "px-0 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200 aspect-square",
+                      title: "Alejar",
                       disabled: creatingVariant,
-                      "aria-label": "Selección 50%",
-                      title: "Tamaño de selector 50%",
-                      children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { children: "50%" }) })
+                      "aria-label": "Alejar imagen",
+                      children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-zoom-out-blue" }) })
                     }
                   ),
                   /* @__PURE__ */ jsx(
                     "button",
                     {
-                      onClick: () => setSelectionCoverage(0.7),
-                      className: "p-2 rounded cursor-pointer transition-colors text-xs bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
+                      onClick: () => move(-10, -10),
+                      className: "px-0 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200 aspect-square",
+                      title: "Mover arriba-izquierda",
                       disabled: creatingVariant,
-                      "aria-label": "Selección 70%",
-                      children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { children: "70%" }) })
+                      "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" }) })
                     }
                   ),
                   /* @__PURE__ */ jsx(
                     "button",
                     {
-                      onClick: () => setSelectionCoverage(0.9),
-                      className: "p-2 rounded cursor-pointer transition-colors text-xs bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
+                      onClick: () => move(0, -10),
+                      className: "px-0 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200 aspect-square",
+                      title: "Mover arriba",
                       disabled: creatingVariant,
-                      "aria-label": "Selección 90%",
-                      children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { children: "90%" }) })
+                      "aria-label": "Mover imagen hacia arriba",
+                      children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-up-blue icon--md" }) })
                     }
                   ),
                   /* @__PURE__ */ jsx(
                     "button",
                     {
-                      onClick: () => setSelectionCoverage(1),
-                      className: "p-2 rounded cursor-pointer transition-colors text-xs bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
+                      onClick: () => move(10, -10),
+                      className: "px-0 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200 aspect-square",
+                      title: "Mover arriba-derecha",
                       disabled: creatingVariant,
-                      "aria-label": "Selección completa",
-                      children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { children: "100%" }) })
+                      "aria-label": "Mover imagen hacia arriba-derecha",
+                      children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-up-blue icon--md rotate-45" }) })
                     }
-                  )
-                ] }) }),
-                /* @__PURE__ */ jsxs("div", { className: "space-y-2 pt-2", children: [
+                  ),
                   /* @__PURE__ */ jsx(
                     "button",
                     {
-                      onClick: centerSelection,
-                      className: "w-full p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                      title: "Centrar selección",
+                      onClick: () => zoom(0.2),
+                      className: "px-0 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200 aspect-square",
+                      title: "Acercar 20%",
                       disabled: creatingVariant,
-                      "aria-label": "Centrar á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-radio-button icon--sm align-[middle!important] " }),
-                        " ",
-                        "Centrar selección"
-                      ] }) })
+                      "aria-label": "Acercar imagen",
+                      children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-zoom-in-blue" }) })
                     }
                   ),
                   /* @__PURE__ */ jsx(
                     "button",
                     {
-                      onClick: resetSelection,
-                      className: "w-full p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                      title: "Reiniciar selección",
+                      onClick: () => rotate(-45),
+                      className: "px-0 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200 aspect-square",
+                      title: "Rotar -45°",
                       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] " }),
-                        " ",
-                        "Reset selección"
-                      ] }) })
+                      "aria-label": "Rotar imagen 45 grados a la izquierda",
+                      children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-brand-blue-1000 font-medium", children: "-45°" }) })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: () => move(-10, 0),
+                      className: "px-0 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200 aspect-square",
+                      title: "Mover izquierda",
+                      disabled: creatingVariant,
+                      "aria-label": "Mover imagen hacia la izquierda",
+                      children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-left-blue" }) })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: centerImage,
+                      className: "px-0 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200 aspect-square",
+                      title: "Centrar y ajustar imagen",
+                      disabled: creatingVariant,
+                      "aria-label": "Centrar y ajustar imagen",
+                      children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-radio-button-blue icon-md" }) })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: () => move(10, 0),
+                      className: "px-0 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200 aspect-square",
+                      title: "Mover derecha",
+                      disabled: creatingVariant,
+                      "aria-label": "Mover imagen hacia la derecha",
+                      children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-right-blue" }) })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: () => rotate(45),
+                      className: "px-0 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200 aspect-square",
+                      title: "Rotar +45°",
+                      disabled: creatingVariant,
+                      "aria-label": "Rotar imagen 45 grados a la derecha",
+                      children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-brand-blue-1000 font-medium", children: "+45°" }) })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: flipHorizontal,
+                      className: `px-0 rounded cursor-pointer transition-colors text-sm aspect-square ${flipStates.horizontal ? "bg-blue-100 border border-blue-300 text-blue-800" : "bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200"}`,
+                      title: `Voltear horizontalmente ${flipStates.horizontal ? "(activo)" : ""}`,
+                      disabled: creatingVariant,
+                      "aria-label": "Voltear imagen horizontalmente",
+                      "aria-pressed": flipStates.horizontal,
+                      children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-2", children: /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-left-right-blue border border-brand-blue-1000 rounded" }) })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: () => move(-10, 10),
+                      className: "px-0 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200 aspect-square",
+                      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" }) })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: () => move(0, 10),
+                      className: "px-0 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200 aspect-square",
+                      title: "Mover abajo",
+                      disabled: creatingVariant,
+                      "aria-label": "Mover imagen hacia abajo",
+                      children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-down-blue" }) })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: () => move(10, 10),
+                      className: "px-0 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200 aspect-square",
+                      title: "Mover abajo-derecha",
+                      disabled: creatingVariant,
+                      "aria-label": "Mover imagen hacia abajo-derecha",
+                      children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-up-blue icon--md rotate-145" }) })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: flipVertical,
+                      className: `px-0 rounded cursor-pointer transition-colors aspect-square text-sm ${flipStates.vertical ? "bg-blue-100 border border-blue-300 text-blue-800" : "bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200"}`,
+                      title: `Voltear verticalmente ${flipStates.vertical ? "(activo)" : ""}`,
+                      disabled: creatingVariant,
+                      "aria-label": "Voltear imagen verticalmente",
+                      "aria-pressed": flipStates.vertical,
+                      children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-up-down-blue border border-brand-blue-1000 rounded" }) })
                     }
                   )
-                ] })
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg border border-gray-200 p-4", children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: toggleImageOptions,
-              className: "w-full p-2 my-1 cursor-pointer hover:bg-neutral-gray-050/50 transition-colors rounded-md",
-              "aria-expanded": showImageOptions,
-              "aria-label": "Mostrar/ocultar opciones de visualizción",
-              children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-700", children: "Transformar imagen" }),
-                /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: `icon ${!showImageOptions ? "icon-chevron-down" : "icon-chevron-up"} text-center icon--xs`
-                  }
-                ) })
-              ] })
-            }
-          ),
-          showImageOptions && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsxs("div", { className: "mb-4 hidden lg:block", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-600 mb-2", children: "Mover imagen" }),
-              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-1", children: [
-                /* @__PURE__ */ jsx("div", {}),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: () => move(0, -10),
-                    className: "p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                    title: "Mover arriba",
-                    disabled: creatingVariant,
-                    "aria-label": "Mover imagen hacia arriba",
-                    children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-up-blue" }) })
-                  }
-                ),
-                /* @__PURE__ */ jsx("div", {}),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: () => move(-10, 0),
-                    className: "p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                    title: "Mover izquierda",
-                    disabled: creatingVariant,
-                    "aria-label": "Mover imagen hacia la izquierda",
-                    children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-left-blue" }) })
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: centerImage,
-                    className: "p-2 rounded cursor-pointer transition-colors text-xs bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                    title: "Centrar y ajustar imagen",
-                    disabled: creatingVariant,
-                    "aria-label": "Centrar y ajustar imagen",
-                    children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-radio-button-blue icon-md" }) })
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: () => move(10, 0),
-                    className: "p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                    title: "Mover derecha",
-                    disabled: creatingVariant,
-                    "aria-label": "Mover imagen hacia la derecha",
-                    children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-right-blue" }) })
-                  }
-                ),
-                /* @__PURE__ */ jsx("div", {}),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: () => move(0, 10),
-                    className: "p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                    title: "Mover abajo",
-                    disabled: creatingVariant,
-                    "aria-label": "Mover imagen hacia abajo",
-                    children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-down-blue" }) })
-                  }
-                ),
-                /* @__PURE__ */ jsx("div", {})
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-              /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-600 mb-2", children: [
-                "Zoom ",
-                zoomInfo ? zoomInfo.percentage + "%" : ""
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: () => zoom(-0.2),
-                    className: "flex-1 p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                    title: "Alejar 20%",
-                    disabled: creatingVariant,
-                    "aria-label": "Alejar imagen",
-                    children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-zoom-out-blue" }) })
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: resetZoomOnly,
-                    className: "flex-1 p-2 rounded cursor-pointer transition-colors text-xs bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                    title: "Restablecer zoom original",
-                    disabled: creatingVariant,
-                    "aria-label": "Restablecer el zoom para que la imagen se vea con su resolución original",
-                    children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-screenshot-blue" }) })
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: () => zoom(0.2),
-                    className: "flex-1 p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                    title: "Acercar 20%",
-                    disabled: creatingVariant,
-                    "aria-label": "Acercar imagen",
-                    children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-zoom-in-blue" }) })
-                  }
-                )
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-600 mb-2", children: "Rotación" }),
-              /* @__PURE__ */ jsxs("div", { className: "flex gap-1 *:text-brand-blue-1000 *:text-sm", children: [
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: () => rotate(-90),
-                    className: "flex-1 p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                    title: "Rotar -90°",
-                    disabled: creatingVariant,
-                    "aria-label": "Rotar imagen 90 grados a la izquierda",
-                    children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-reply-blue" }) })
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: () => rotate(-45),
-                    className: "flex-1 p-2 rounded cursor-pointer transition-colors text-xs bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                    title: "Rotar -45°",
-                    disabled: creatingVariant,
-                    "aria-label": "Rotar imagen 45 grados a la izquierda",
-                    children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { children: "-45°" }) })
-                  }
-                ),
-                /* @__PURE__ */ jsx(
+                ] }) }),
+                /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsx(
                   "button",
                   {
-                    onClick: () => rotate(45),
-                    className: "flex-1 p-2 rounded cursor-pointer transition-colors text-xs bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                    title: "Rotar +45°",
+                    onClick: () => {
+                      transform.reset();
+                      setFlipStates({ horizontal: false, vertical: false });
+                    },
+                    className: "w-full p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
+                    title: "Reiniciar transformaciones",
                     disabled: creatingVariant,
-                    "aria-label": "Rotar imagen 45 grados a la derecha",
-                    children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { children: "+45°" }) })
+                    "aria-label": "Reiniciar todas las transformaciones de la imagen",
+                    children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxs("span", { children: [
+                      /* @__PURE__ */ jsx("span", { className: "icon icon-refresh-blue icon--sm align-[middle!important] " }),
+                      " ",
+                      "Reiniciar ajustes"
+                    ] }) })
                   }
-                ),
-                /* @__PURE__ */ jsx(
-                  "button",
+                ) })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "bg-white rounded border border-gray-200 w-full" + (showSelectorOptions ? "" : " bg-neutral-gray-50/50"),
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: toggleSelectorOptions,
+                  className: "hidden sm:block w-full cursor-pointer hover:bg-neutral-gray-050/50 p-2 mb-05 transition-colors rounded-t-sm",
+                  "aria-expanded": showSelectorOptions,
+                  "aria-label": "Mostrar/ocultar opciones de visualizción",
+                  children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                    /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-700", children: "Ajustes del selector" }),
+                    /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: `icon ${!showSelectorOptions ? "icon-chevron-down" : "icon-chevron-up"} text-center icon--xs`
+                      }
+                    ) })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "p-2 space-y-2 justify-items-stretch static " + (showSelectorOptions ? "block" : "sm:hidden"),
+                  children: [
+                    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: () => setSelectionCoverage(0.5),
+                          className: "p-1 rounded cursor-pointer transition-colors text-xs bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
+                          disabled: creatingVariant,
+                          "aria-label": "Selección 50%",
+                          title: "Tamaño de selector 50%",
+                          children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { children: "50%" }) })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: () => setSelectionCoverage(0.7),
+                          className: "p-1 rounded cursor-pointer transition-colors text-xs bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
+                          disabled: creatingVariant,
+                          "aria-label": "Selección 70%",
+                          children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { children: "70%" }) })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: () => setSelectionCoverage(0.9),
+                          className: "p-1 rounded cursor-pointer transition-colors text-xs bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
+                          disabled: creatingVariant,
+                          "aria-label": "Selección 90%",
+                          children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { children: "90%" }) })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: () => setSelectionCoverage(1),
+                          className: "p-1 rounded cursor-pointer transition-colors text-xs bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
+                          disabled: creatingVariant,
+                          "aria-label": "Selección completa",
+                          children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { children: "100%" }) })
+                        }
+                      )
+                    ] }) }),
+                    /* @__PURE__ */ jsxs("div", { className: "space-y-2 pt-2", children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: centerSelection,
+                          className: "w-full p-1 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
+                          title: "Centrar selección",
+                          disabled: creatingVariant,
+                          "aria-label": "Centrar á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-radio-button icon--sm align-[middle!important] " }),
+                            " ",
+                            "Centrar selección"
+                          ] }) })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: resetSelection,
+                          className: "w-full p-1 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
+                          title: "Reiniciar selecció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] " }),
+                            " ",
+                            "Reset selección"
+                          ] }) })
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "bg-white rounded border border-gray-200 w-full", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: toggleVisualOptions,
+              className: "hidden sm:block w-full cursor-pointer hover:bg-neutral-gray-050/50 transition-colors rounded-t-sm mb-05 p-2",
+              "aria-expanded": showVisualOptions,
+              "aria-label": "Mostrar/ocultar opciones de visualización",
+              children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-700", children: "Visualización" }),
+                /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx(
+                  "span",
                   {
-                    onClick: () => rotate(90),
-                    className: "flex-1 p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                    title: "Rotar +90°",
-                    disabled: creatingVariant,
-                    "aria-label": "Rotar imagen 90 grados a la derecha",
-                    children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-send-arrow-blue" }) })
+                    className: `icon ${!showVisualOptions ? "icon-chevron-down" : "icon-chevron-up"} text-center icon--xs`
                   }
-                )
+                ) })
               ] })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-600 mb-2", children: "Voltear" }),
-              /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
-                /* @__PURE__ */ jsx(
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "py-2 space-y-2 justify-items-stretch static " + (showVisualOptions ? "block" : "sm:hidden"),
+              children: [
+                /* @__PURE__ */ jsxs(
                   "button",
                   {
-                    onClick: flipHorizontal,
-                    className: `flex-1 p-2 rounded cursor-pointer transition-colors text-sm ${flipStates.horizontal ? "bg-blue-100 border border-blue-300 text-blue-800" : "bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200"}`,
-                    title: `Voltear horizontalmente ${flipStates.horizontal ? "(activo)" : ""}`,
+                    onClick: toggleGrid,
+                    className: `w-auto flex cursor-pointer items-center justify-between mx-2 p-1 rounded transition-colors ${showGrid ? "bg-blue-100 border border-blue-300 text-blue-800" : "bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200"}`,
                     disabled: creatingVariant,
-                    "aria-label": "Voltear imagen horizontalmente",
-                    "aria-pressed": flipStates.horizontal,
-                    children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-left-right-blue border border-brand-blue-1000 rounded" }) })
+                    "aria-pressed": showGrid,
+                    title: "Mostrar/ocultar cuadrícula de la regla de los tercios en el selector",
+                    "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" }),
+                        " ",
+                        "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" }),
+                        " ",
+                        "Activo"
+                      ] }) : "Inactivo" })
+                    ]
                   }
                 ),
-                /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsxs(
                   "button",
                   {
-                    onClick: flipVertical,
-                    className: `flex-1 p-2 cursor-pointer rounded transition-colors text-sm ${flipStates.vertical ? "bg-blue-100 border border-blue-300 text-blue-800" : "bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200"}`,
-                    title: `Voltear verticalmente ${flipStates.vertical ? "(activo)" : ""}`,
+                    onClick: toggleShade,
+                    className: `w-auto flex cursor-pointer items-center justify-between mx-2 p-1 rounded transition-colors ${shade ? "bg-blue-100 border border-blue-300 text-blue-800" : "bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200"}`,
                     disabled: creatingVariant,
-                    "aria-label": "Voltear imagen verticalmente",
-                    "aria-pressed": flipStates.vertical,
-                    children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-up-down-blue border border-brand-blue-1000 rounded" }) })
-                  }
-                )
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: () => {
-                  transform.reset();
-                  setFlipStates({ horizontal: false, vertical: false });
-                },
-                className: "w-full p-2 rounded cursor-pointer transition-colors text-sm bg-gray-100 border border-gray-300 text-gray-700 hover:bg-gray-200",
-                title: "Reiniciar transformaciones",
-                disabled: creatingVariant,
-                "aria-label": "Reiniciar todas las transformaciones de la imagen",
-                children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxs("span", { children: [
-                  /* @__PURE__ */ jsx("span", { className: "icon icon-refresh-blue icon--sm align-[middle!important] " }),
-                  " ",
-                  "Reiniciar ajustes"
-                ] }) })
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "bg-gradient-to-br from-brand-blue-50 to-green-50 rounded-lg border border-blue-200 shadow-sm hidden lg:block", children: [
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: toggleTips,
-              className: "w-full p-4 flex items-center justify-between cursor-pointer hover:bg-blue-100/50 transition-colors rounded-t-lg",
-              "aria-expanded": showTips,
-              "aria-label": "Mostrar/ocultar guía de uso",
-              children: [
-                /* @__PURE__ */ jsxs("h3", { className: "text-lg font-semibold text-blue-800 flex items-center", children: [
-                  /* @__PURE__ */ jsx("span", { className: "icon icon-lightbulb text-yellow-500 mr-2" }),
-                  "Guía de uso"
-                ] }),
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: `icon icon-arrow-down-blue transition-transform duration-200 ${showTips ? "rotate-180" : ""}`
+                    "aria-pressed": shade,
+                    "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" }),
+                        " ",
+                        "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" }),
+                        " ",
+                        "Activo"
+                      ] }) : "Inactivo" })
+                    ]
                   }
                 )
               ]
             }
-          ),
-          showTips && /* @__PURE__ */ jsxs("div", { className: "px-4 pb-4 space-y-3", children: [
-            /* @__PURE__ */ jsxs("div", { className: "bg-white/60 rounded-md p-3 border-l-4 border-blue-400", children: [
-              /* @__PURE__ */ jsx("h4", { className: "font-semibold text-blue-700 mb-2 text-sm", children: "🖱️ Navegación básica" }),
-              /* @__PURE__ */ jsxs("div", { className: "text-sm text-blue-600 space-y-1", children: [
-                /* @__PURE__ */ jsxs("div", { children: [
-                  "• ",
-                  /* @__PURE__ */ jsx("strong", { children: "Arrastra la imagen:" }),
-                  " Haz clic sobre la imagen del área de selección y arrastra"
-                ] }),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  "• ",
-                  /* @__PURE__ */ jsx("strong", { children: "Zoom:" }),
-                  " Usa la rueda del ratón (fuera del área de selección)"
-                ] }),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  "• ",
-                  /* @__PURE__ */ jsx("strong", { children: "Vista completa:" }),
-                  ' Botón "Reset zoom" para ajustar al tamaño óptimo'
-                ] })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "bg-white/60 rounded-md p-3 border-l-4 border-green-400", children: [
-              /* @__PURE__ */ jsx("h4", { className: "font-semibold text-green-700 mb-2 text-sm", children: "✂️ Área de selección" }),
-              /* @__PURE__ */ jsxs("div", { className: "text-sm text-green-600 space-y-1", children: [
-                /* @__PURE__ */ jsxs("div", { children: [
-                  "• ",
-                  /* @__PURE__ */ jsx("strong", { children: "Mover selección:" }),
-                  " Arrastra desde el centro",
-                  /* @__PURE__ */ jsx("span", { className: "icon bg-white icon-move align-[middle!important] mx-1 border border-green-600 rounded-full" })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  "• ",
-                  /* @__PURE__ */ jsx("strong", { children: "Redimensionar:" }),
-                  " Arrastra desde las esquinas o bordes"
-                ] }),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  "• ",
-                  /* @__PURE__ */ jsx("strong", { children: "Tamaños rápidos:" }),
-                  " Usa los botones 50%, 70%, 90%, 100%"
-                ] })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "bg-white/60 rounded-md p-3 border-l-4 border-purple-400", children: [
-              /* @__PURE__ */ jsx("h4", { className: "font-semibold text-purple-700 mb-2 text-sm", children: "⌨️ Atajos de teclado" }),
-              /* @__PURE__ */ jsxs("div", { className: "text-sm text-purple-600 space-y-1", children: [
-                /* @__PURE__ */ jsxs("div", { children: [
-                  "• ",
-                  /* @__PURE__ */ jsx("strong", { children: "Flechas:" }),
-                  /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-right-box rotate-180 mx-1" }),
-                  /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-right-box mx-1" }),
-                  /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-right-box -rotate-90 mx-1" }),
-                  /* @__PURE__ */ jsx("span", { className: "icon icon-arrow-right-box rotate-90 mx-1" }),
-                  "Mueven la selección (10px)"
-                ] }),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  "• ",
-                  /* @__PURE__ */ jsx("strong", { children: "Shift + Arrastrar:" }),
-                  " Mantiene proporciones al redimensionar"
-                ] }),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  "• ",
-                  /* @__PURE__ */ jsx("strong", { children: "Ctrl + Rueda:" }),
-                  " Zoom más preciso"
-                ] })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "bg-white/60 rounded-md p-3 border-l-4 border-amber-400", children: [
-              /* @__PURE__ */ jsx("h4", { className: "font-semibold text-amber-700 mb-2 text-sm", children: "💡 Consejos profesionales" }),
-              /* @__PURE__ */ jsxs("div", { className: "text-sm text-amber-600 space-y-1", children: [
-                /* @__PURE__ */ jsxs("div", { children: [
-                  "• ",
-                  /* @__PURE__ */ jsx("strong", { children: "Vista previa:" }),
-                  ' Usa el botón "Vista previa" antes de guardar'
-                ] }),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  "• ",
-                  /* @__PURE__ */ jsx("strong", { children: "Cuadricula:" }),
-                  " Actívalo para aplicar la regla de los tercios"
-                ] }),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  "• ",
-                  /* @__PURE__ */ jsx("strong", { children: "Tablero:" }),
-                  " Actívalo para cuadrar medjor las medidas o como ayuda visual para imagenes con transparencia"
-                ] }),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  "• ",
-                  /* @__PURE__ */ jsx("strong", { children: "Transformaciones:" }),
-                  " Rota y voltea antes de hacer el recorte final"
-                ] }),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  "• ",
-                  /* @__PURE__ */ jsx("strong", { children: "Calidad:" }),
-                  " Las imágenes se exportan en alta calidad (JPEG 90%)"
-                ] })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "bg-white/60 rounded-md p-3 border-l-4 border-orange-600", children: [
-              /* @__PURE__ */ jsx("h4", { className: "font-semibold text-orange-700 mb-2 text-sm", children: "⚠️ Advertencias" }),
-              /* @__PURE__ */ jsxs("div", { className: "text-sm text-orange-600 space-y-1", children: [
-                /* @__PURE__ */ jsxs("div", { children: [
-                  "• ",
-                  /* @__PURE__ */ jsx("strong", { children: "Recortes grandes:" }),
-                  " Pueden tardar más en procesarse"
-                ] }),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  "• ",
-                  /* @__PURE__ */ jsx("strong", { children: "Calidad de imagen:" }),
-                  " La calidad puede verse afectada al escalar"
-                ] })
-              ] })
-            ] })
-          ] })
+          )
         ] })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "limbo-cropper-footer flex-shrink-0 border-t border-gray-200 bg-white p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-2 sm:gap-3 items-stretch sm:items-center justify-end max-w-7xl mx-auto", children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: preview,
-          disabled: creatingVariant || !canExport,
-          className: `px-6 py-2.5 min-h-[44px] transition-colors order-2 ${showPreview ? "limbo-btn limbo-btn-danger" : "limbo-btn limbo-btn-info"}`,
-          "aria-label": "Generar vista previa del recorte",
-          title: "Mostar/Ocultar vista previa del recorte",
-          children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center", children: [
-            /* @__PURE__ */ jsx("span", { className: `icon md:mr-1 icon-search-white` }),
-            /* @__PURE__ */ jsx("span", { className: "hidden md:block text-nowrap", children: showPreview ? "Cerrar previa" : "Vista previa" })
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsx(
+    /* @__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(
         "button",
         {
-          onClick: handleDownload,
-          disabled: creatingVariant || !canExport,
-          className: "limbo-btn limbo-btn-primary px-6 py-2.5 min-h-[44px] order-3",
-          "aria-label": "Descargar recorte sin guardar",
-          title: "Descargar recorte sin guardar",
-          children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center", children: [
-            /* @__PURE__ */ jsx("span", { className: "icon icon-download-white md:mr-1" }),
-            /* @__PURE__ */ jsx("span", { className: "hidden md:block text-nowrap", children: "Descargar" })
-          ] })
+          onClick: () => setShowTipsModal(true),
+          className: "text-nowrap block cursor-pointer lg:flex items-center gap-2 px-2 py-1 bg-gradient-to-br from-brand-blue-50 to-green-50 hover:from-brand-blue-100 hover:to-green-100 border border-blue-200 rounded-lg shadow-sm transition-colors",
+          "aria-label": "Abrir guía de uso",
+          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(
-        "button",
-        {
-          onClick: saveCrop,
-          disabled: creatingVariant || !cropData || !effectiveImageInfo || !canExport || !state.isReady,
-          className: "limbo-btn limbo-btn-success px-6 py-2.5 min-h-[44px] order-4",
-          "aria-label": "Guardar imagen recortada",
-          title: "Guardar imagen recortada",
-          children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: creatingVariant ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("span", { className: "hidden md:block text-nowrap icon icon-save-white md:mr-1" }),
-            "Guardando..."
-          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("span", { className: "icon icon-save-white md:mr-1" }),
-            /* @__PURE__ */ jsx("span", { className: "hidden md:block text-nowrap", children: "Guardar recorte" })
-          ] }) })
-        }
-      )
-    ] }) }),
+      /* @__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__ */ 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",
+            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(
+          "button",
+          {
+            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" }),
+              /* @__PURE__ */ jsx("span", { children: "Guardando..." })
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "icon icon-save-white icon--sm" }),
+              /* @__PURE__ */ jsx("span", { className: "hidden md:inline whitespace-nowrap", children: "Guardar recorte" })
+            ] }) })
+          }
+        )
+      ] })
+    ] }),
     showConfirmModal && /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[9999] p-4", children: /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg shadow-xl max-w-lg w-full max-h-[80vh] overflow-hidden flex flex-col", children: [
       /* @__PURE__ */ jsxs("div", { className: "px-6 py-4 border-b border-gray-200", children: [
         /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-800", children: pendingAction === "save" ? "Seleccionar recortes a guardar" : "Seleccionar recortes a descargar" }),
         /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-600 mt-1", children: [
-          "Marca los recortes que deseas ",
+          "Marca los recortes que deseas",
+          " ",
           pendingAction === "save" ? "guardar" : "descargar"
         ] })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "px-6 py-4 overflow-y-auto flex-1", children: /* @__PURE__ */ jsx("div", { className: "space-y-2", children: crops.map((crop, index) => /* @__PURE__ */ jsxs(
-        "label",
-        {
-          className: `flex items-center gap-3 p-3 rounded border cursor-pointer transition-colors ${selectedCropsForAction.includes(index) ? "bg-blue-50 border-blue-300" : "bg-gray-50 border-gray-200 hover:bg-gray-100"} ${crop.required ? "opacity-75" : ""}`,
-          children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "checkbox",
-                checked: selectedCropsForAction.includes(index),
-                disabled: crop.required,
-                onChange: (e) => {
-                  if (e.target.checked) {
-                    setSelectedCropsForAction((prev) => [...prev, index]);
-                  } else {
-                    setSelectedCropsForAction((prev) => prev.filter((i) => i !== index));
-                  }
-                },
-                className: "w-4 h-4 text-blue-600"
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-800 truncate", children: crop.label }),
-                crop.required && /* @__PURE__ */ jsx("span", { className: "text-xs px-1.5 py-0.5 bg-red-100 text-red-700 rounded", children: "Obligatorio" })
-              ] }),
-              /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-500", children: [
-                crop.width,
-                " × ",
-                crop.height,
-                " px"
+      /* @__PURE__ */ jsx("div", { className: "px-6 py-4 overflow-y-auto flex-1", children: /* @__PURE__ */ jsx("div", { className: "space-y-2", children: crops.map((crop, index) => {
+        const isConfigured = crop.savedState || index === activeCropIndex;
+        const isDisabled = crop.required ? false : !isConfigured;
+        return /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: `flex items-center gap-3 p-3 rounded border transition-colors ${selectedCropsForAction.includes(index) ? "bg-blue-50 border-blue-300" : isDisabled ? "bg-gray-100 border-gray-300 opacity-60" : "bg-gray-50 border-gray-200 hover:bg-gray-100"} ${isDisabled ? "cursor-not-allowed" : "cursor-pointer"}`,
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: selectedCropsForAction.includes(index),
+                  disabled: isDisabled,
+                  onChange: (e) => {
+                    if (e.target.checked) {
+                      setSelectedCropsForAction((prev) => [
+                        ...prev,
+                        index
+                      ]);
+                    } else {
+                      setSelectedCropsForAction(
+                        (prev) => prev.filter((i) => i !== index)
+                      );
+                    }
+                  },
+                  className: "w-4 h-4 text-blue-600"
+                }
+              ),
+              /* @__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 }),
+                  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"
+                ] })
               ] })
-            ] })
-          ]
-        },
-        crop.id
-      )) }) }),
+            ]
+          },
+          crop.id
+        );
+      }) }) }),
       /* @__PURE__ */ jsxs("div", { className: "px-6 py-4 border-t border-gray-200 flex gap-3 justify-end", children: [
         /* @__PURE__ */ jsx(
           "button",
@@ -20962,9 +21540,27 @@ function CropperView({
             onClick: async () => {
               setShowConfirmModal(false);
               if (pendingAction === "save") {
-                await performSaveCrop();
+                if (selectedCropsForAction.length === 1) {
+                  const oldIndex = activeCropIndex;
+                  setActiveCropIndex(selectedCropsForAction[0]);
+                  await new Promise((resolve) => setTimeout(resolve, 100));
+                  await performSaveCrop();
+                  setActiveCropIndex(oldIndex);
+                } else {
+                  await performSaveMultipleCrops(selectedCropsForAction);
+                }
               } else {
-                await performDownload();
+                if (selectedCropsForAction.length === 1) {
+                  const oldIndex = activeCropIndex;
+                  setActiveCropIndex(selectedCropsForAction[0]);
+                  await new Promise((resolve) => setTimeout(resolve, 100));
+                  await performDownload();
+                  setActiveCropIndex(oldIndex);
+                } else {
+                  await performDownloadMultipleCrops(
+                    selectedCropsForAction
+                  );
+                }
               }
               setPendingAction(null);
               setSelectedCropsForAction([]);
@@ -20980,6 +21576,204 @@ function CropperView({
           }
         )
       ] })
+    ] }) }),
+    showTipsModal && /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[9999] p-4", children: /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg shadow-xl max-w-3xl w-full max-h-[90vh] overflow-hidden flex flex-col", children: [
+      /* @__PURE__ */ jsx("div", { className: "px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-brand-blue-50 to-green-50", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("h3", { className: "text-xl font-semibold text-blue-800 flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "icon icon-lightbulb text-yellow-500" }),
+          "Guía de uso del Cropper"
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setShowTipsModal(false),
+            className: "text-gray-400 hover:text-gray-600 p-1 rounded-full hover:bg-gray-100 transition-colors",
+            "aria-label": "Cerrar modal",
+            children: /* @__PURE__ */ jsx("span", { className: "icon icon-close-small icon--lg" })
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "px-6 py-4 overflow-y-auto flex-1 space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "bg-blue-50 rounded-lg p-4 border-l-4 border-blue-400", children: [
+          /* @__PURE__ */ jsx("h4", { className: "font-semibold text-blue-800 mb-3 text-base flex items-center gap-2", children: "🖱️ Navegación básica" }),
+          /* @__PURE__ */ jsxs("div", { className: "text-sm text-blue-700 space-y-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-bold min-w-fit", children: "•" }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("strong", { children: "Arrastra la imagen:" }),
+                " Haz clic sobre la imagen dentro del área de selección y arrástrala para reposicionarla"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-bold min-w-fit", children: "•" }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("strong", { children: "Zoom:" }),
+                " Usa la rueda del ratón sobre el canvas (fuera del área de selección) para hacer zoom"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-bold min-w-fit", children: "•" }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("strong", { children: "Vista completa:" }),
+                ' Botón "Reset zoom" para ajustar automáticamente al tamaño óptimo'
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "bg-green-50 rounded-lg p-4 border-l-4 border-green-400", children: [
+          /* @__PURE__ */ jsx("h4", { className: "font-semibold text-green-800 mb-3 text-base flex items-center gap-2", children: "✂️ Área de selección" }),
+          /* @__PURE__ */ jsxs("div", { className: "text-sm text-green-700 space-y-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-bold min-w-fit", children: "•" }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("strong", { children: "Mover selección:" }),
+                " Arrastra desde el centro",
+                /* @__PURE__ */ jsx("span", { className: "icon bg-white icon-move inline-block mx-1 align-middle border border-green-600 rounded-full" }),
+                "para reposicionar el área de recorte"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-bold min-w-fit", children: "•" }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("strong", { children: "Redimensionar:" }),
+                " Arrastra desde las esquinas o bordes para cambiar el tamaño del área"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-bold min-w-fit", children: "•" }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("strong", { children: "Tamaños rápidos:" }),
+                " Usa los botones de porcentaje (50%, 70%, 90%, 100%) para ajustar rápidamente el tamaño"
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "bg-purple-50 rounded-lg p-4 border-l-4 border-purple-400", children: [
+          /* @__PURE__ */ jsx("h4", { className: "font-semibold text-purple-800 mb-3 text-base flex items-center gap-2", children: "⌨️ Atajos de teclado" }),
+          /* @__PURE__ */ jsxs("div", { className: "text-sm text-purple-700 space-y-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-bold min-w-fit", children: "•" }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("strong", { children: "Flechas:" }),
+                /* @__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 rotate-90 icon--sm" })
+                ] }),
+                "Mueven la selección en incrementos de 10px"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-bold min-w-fit", children: "•" }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("strong", { children: "Shift + Arrastrar:" }),
+                " Mantiene las proporciones al redimensionar el área de selección"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-bold min-w-fit", children: "•" }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("strong", { children: "Ctrl + Rueda:" }),
+                " Control de zoom más preciso y fino"
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "bg-cyan-50 rounded-lg p-4 border-l-4 border-cyan-400", children: [
+          /* @__PURE__ */ jsx("h4", { className: "font-semibold text-cyan-800 mb-3 text-base flex items-center gap-2", children: "👁️ Opciones de visualización" }),
+          /* @__PURE__ */ jsxs("div", { className: "text-sm text-cyan-700 space-y-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-bold min-w-fit", children: "•" }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("strong", { children: "Cuadrícula:" }),
+                " Muestra la regla de los tercios para mejorar la composición de tus recortes"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-bold min-w-fit", children: "•" }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("strong", { children: "Tablero:" }),
+                " Patrón de cuadros para alinear mejor las medidas o ver imágenes con transparencia"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-bold min-w-fit", children: "•" }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("strong", { children: "Vista previa:" }),
+                " Muestra cómo quedará el recorte final antes de guardarlo"
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "bg-amber-50 rounded-lg p-4 border-l-4 border-amber-400", children: [
+          /* @__PURE__ */ jsx("h4", { className: "font-semibold text-amber-800 mb-3 text-base flex items-center gap-2", children: "💡 Consejos profesionales" }),
+          /* @__PURE__ */ jsxs("div", { className: "text-sm text-amber-700 space-y-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-bold min-w-fit", children: "•" }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("strong", { children: "Orden de trabajo:" }),
+                " Primero aplica transformaciones (rotar, voltear), luego haz el recorte final"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-bold min-w-fit", children: "•" }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("strong", { children: "Múltiples recortes:" }),
+                " Si tienes varios recortes configurados, revisa cada uno antes de guardar"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-bold min-w-fit", children: "•" }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("strong", { children: "Calidad:" }),
+                " Las imágenes se exportan en alta calidad (JPEG 90%) manteniendo la mayor nitidez posible"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-bold min-w-fit", children: "•" }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("strong", { children: "Proporciones:" }),
+                " Usa Shift al redimensionar para mantener el aspecto ratio original"
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "bg-orange-50 rounded-lg p-4 border-l-4 border-orange-500", children: [
+          /* @__PURE__ */ jsx("h4", { className: "font-semibold text-orange-800 mb-3 text-base flex items-center gap-2", children: "⚠️ Notas importantes" }),
+          /* @__PURE__ */ jsxs("div", { className: "text-sm text-orange-700 space-y-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-bold min-w-fit", children: "•" }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("strong", { children: "Recortes grandes:" }),
+                " Imágenes de alta resolución pueden tardar más en procesarse"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-bold min-w-fit", children: "•" }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("strong", { children: "Calidad de escala:" }),
+                " Evita ampliar demasiado áreas pequeñas, ya que puede afectar la nitidez"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-bold min-w-fit", children: "•" }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("strong", { children: "Cambios pendientes:" }),
+                " Recuerda guardar tus cambios antes de cerrar o cambiar de imagen"
+              ] })
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "px-6 py-4 border-t border-gray-200 bg-gray-50", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setShowTipsModal(false),
+          className: "limbo-btn limbo-btn-primary w-full",
+          children: "Entendido"
+        }
+      ) })
     ] }) })
   ] });
 }
@@ -21636,7 +22430,7 @@ function App({
     }
     console.error("Cropper error:", error);
   };
-  return /* @__PURE__ */ jsxs("div", { className: "limbo-card-parent max-w-7xl mx-auto my-8 p-6 shadow-xs w-full bg-white", children: [
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     ui.showTabs && activeTab != "cropper" && /* @__PURE__ */ jsx(Tabs, { tabs, active: activeTab, onChange: handleTabChange }),
     imagesError && /* @__PURE__ */ jsxs("div", { className: "alert alert-danger", children: [
       "Error al cargar imágenes: ",
@@ -22015,7 +22809,7 @@ class LimboInstance {
       "div",
       {
         id: `limbo-component-container-${this.id}`,
-        className: "limbo-instance limbo-component-container-wrapper py-3",
+        className: "limbo-instance limbo-component-container-wrapper h-full w-full py-2 bg-white rounded-md",
         "data-limbo-id": this.id,
         "data-limbo-mode": this.config.mode,
         "data-limbo-version": "2.0",
@@ -25333,7 +26127,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,