{"id":18368,"date":"2025-08-15T03:34:32","date_gmt":"2025-08-15T03:34:32","guid":{"rendered":"https:\/\/nicoletta.com.py\/tu-diseno\/"},"modified":"2026-02-16T21:06:11","modified_gmt":"2026-02-16T21:06:11","slug":"tu-diseno","status":"publish","type":"page","link":"https:\/\/nicoletta.com.py\/es\/tu-diseno\/","title":{"rendered":"TU DISE\u00d1O"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"18368\" class=\"elementor elementor-18368 elementor-16043\">\n\t\t\t\t<div class=\"elementor-element elementor-element-db653cf e-flex e-con-boxed e-con e-parent\" data-id=\"db653cf\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b8d3a47 elementor-widget elementor-widget-shortcode\" data-id=\"b8d3a47\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <script type=\"text\/javascript\">\n        const crochetApiSettings = {\"root\":\"https:\\\/\\\/nicoletta.com.py\\\/es\\\/wp-json\\\/\",\"nonce\":\"68d72edb26\",\"endpoint\":\"custom-crochet\\\/v1\\\/send-combination\"};\n        \/\/ Inyectamos los colores desde PHP a JS\n        window.crochetDynamicPalette = [{\"n\":\"Aluminio\",\"c\":\"39\",\"h\":\"#bcbfc1\"},{\"n\":\"Amarelo Bebe\",\"c\":\"05\",\"h\":\"#fffbb9\"},{\"n\":\"Areia\",\"c\":\"48\",\"h\":\"#e1e6de\"},{\"n\":\"Azul Bondi\",\"c\":\"44\",\"h\":\"#00cfcb\"},{\"n\":\"Azul Mar\",\"c\":\"45\",\"h\":\"#4189c0\"},{\"n\":\"Azul Marinho\",\"c\":\"44\",\"h\":\"#002e7a\"},{\"n\":\"Babaloo\",\"c\":\"70\",\"h\":\"#ed5ba2\"},{\"n\":\"Bege\",\"c\":\"28\",\"h\":\"#e8dcc4\"},{\"n\":\"Canela\",\"c\":\"67\",\"h\":\"#c63700\"},{\"n\":\"Capuccino\",\"c\":\"84\",\"h\":\"#776363\"},{\"n\":\"Caramelo\",\"c\":\"18\",\"h\":\"#be9979\"},{\"n\":\"Chumbo\",\"c\":\"N\\\/A\",\"h\":\"#4c4d4d\"},{\"n\":\"Esmeralda\",\"c\":\"64\",\"h\":\"#007d4c\"},{\"n\":\"Eucalipto\",\"c\":\"63\",\"h\":\"#7DA09A\"},{\"n\":\"Ferrari\",\"c\":\"61\",\"h\":\"#ee0000\"},{\"n\":\"Frozen\",\"c\":\"15\",\"h\":\"#9bd3f7\"},{\"n\":\"Fucsia\",\"c\":\"82\",\"h\":\"#b94592\"},{\"n\":\"Future Dusk\",\"c\":\"N\\\/A\",\"h\":\"#8673d4\"},{\"n\":\"Grafite\",\"c\":\"N\\\/A\",\"h\":\"#606060\"},{\"n\":\"Hibisco\",\"c\":\"12\",\"h\":\"#db8070\"},{\"n\":\"Lavanda\",\"c\":\"69\",\"h\":\"#b5a8ea\"},{\"n\":\"Lima\",\"c\":\"51\",\"h\":\"#e3ff65\"},{\"n\":\"Malbec\",\"c\":\"16\",\"h\":\"#A68593\"},{\"n\":\"Mango\",\"c\":\"26\",\"h\":\"#ff7d00\"},{\"n\":\"Manteiga\",\"c\":\"10\",\"h\":\"#fff4bf\"},{\"n\":\"Marrom\",\"c\":\"21\",\"h\":\"#612e00\"},{\"n\":\"Marsala\",\"c\":\"86\",\"h\":\"#831201\"},{\"n\":\"Mostarda\",\"c\":\"24\",\"h\":\"#eaba0b\"},{\"n\":\"Musgo\",\"c\":\"65\",\"h\":\"#6f7608\"},{\"n\":\"Ocre\",\"c\":\"N\\\/A\",\"h\":\"#a86233\"},{\"n\":\"Off White\",\"c\":\"06\",\"h\":\"#ffffff\"},{\"n\":\"P\\u00e9rola\",\"c\":\"11\",\"h\":\"#f5e4ce\"},{\"n\":\"Pink\",\"c\":\"62\",\"h\":\"#e73175\"},{\"n\":\"P\\u00f4r do Sol\",\"c\":\"13\",\"h\":\"#ff8c4d\"},{\"n\":\"Preto\",\"c\":\"40\",\"h\":\"#000000\"},{\"n\":\"P\\u00farpura\",\"c\":\"27\",\"h\":\"#7b219f\"},{\"n\":\"Red Cherry\",\"c\":\"N\\\/A\",\"h\":\"#f10a4c\"},{\"n\":\"Rosa\",\"c\":\"04\",\"h\":\"#f0cdfa\"},{\"n\":\"Rose Antigo\",\"c\":\"07\",\"h\":\"#e0c2c7\"},{\"n\":\"Royal\",\"c\":\"66\",\"h\":\"#005ff2\"},{\"n\":\"Salm\\u00e3o\",\"c\":\"17\",\"h\":\"#ffd0b5\"},{\"n\":\"Solar\",\"c\":\"68\",\"h\":\"#ffdf26\"},{\"n\":\"Telha\",\"c\":\"19\",\"h\":\"#ec987f\"},{\"n\":\"Terracota\",\"c\":\"20\",\"h\":\"#d25f18\"},{\"n\":\"Turquesa\",\"c\":\"83\",\"h\":\"#00c7fc\"},{\"n\":\"Verde Hortel\\u00e3\",\"c\":\"02\",\"h\":\"#bae3bc\"},{\"n\":\"Vermelho\",\"c\":\"23\",\"h\":\"#f14832\"},{\"n\":\"Very Peri\",\"c\":\"09\",\"h\":\"#4a72d1\"}];\n\n        \/\/ Datos inyectados desde PHP para traducci\u00f3n (WPML)\n        window.crochetProducts = [{\"id\":\"laptop_case\",\"name\":\"Laptop Sleeve\",\"imageUrl\":\"https:\\\/\\\/nicoletta.com.py\\\/imgs\\\/s1-p3.jpg\"},{\"id\":\"phone_strap\",\"name\":\"Phone Strap\",\"imageUrl\":\"https:\\\/\\\/nicoletta.com.py\\\/imgs\\\/s1-p1.jpg\"},{\"id\":\"wrist_phone_strap\",\"name\":\"Wrist Phone Strap\",\"imageUrl\":\"https:\\\/\\\/nicoletta.com.py\\\/imgs\\\/s1-p2.jpg\"}];\n\n        window.crochetPatterns = {\"pattern2c\":{\"name\":\"2 Colores\",\"layers\":[\"color1\",\"color2\"],\"urls\":{\"color1\":\"https:\\\/\\\/nicoletta.com.py\\\/pattern\\\/pat-2c-1.svg\",\"color2\":\"https:\\\/\\\/nicoletta.com.py\\\/pattern\\\/pat-2c-2.svg\"}},\"pattern1c\":{\"name\":\"1 Color\",\"layers\":[\"color1\"],\"urls\":{\"color1\":\"https:\\\/\\\/nicoletta.com.py\\\/pattern\\\/pat-1c.svg\"}}};\n\n        window.crochetTranslations = {\"step1_select_error\":\"Debes seleccionar al menos un producto.\",\"step2_save_error\":\"Debes guardar al menos un dise\\u00f1o para continuar.\",\"step3_combo_error\":\"Por favor, agrega al menos una combinaci\\u00f3n a cada producto seleccionado.\",\"random_toast\":\"\\u00a1Colores aleatorios aplicados!\",\"select_color_error\":\"Por favor, selecciona un color para cada capa antes de guardar.\",\"combo_saved\":\"\\u00a1Combinaci\\u00f3n guardada!\",\"combo_deleted\":\"Combinaci\\u00f3n eliminada.\",\"showing_design\":\"Mostrando dise\\u00f1o\",\"select_design_error\":\"Por favor, selecciona un dise\\u00f1o.\",\"modal_add_title\":\"Agregar combinaci\\u00f3n\",\"modal_edit_title\":\"Editar combinaci\\u00f3n\",\"modal_qty_units\":\"3. \\u00bfCu\\u00e1ntas unidades te gustar\\u00eda solicitar?\",\"modal_qty_samples\":\"3. \\u00bfCu\\u00e1ntas muestras te gustar\\u00eda solicitar?\",\"order_sent\":\"\\u00a1Pedido enviado!\",\"order_received\":\"Hemos recibido tu solicitud.\",\"send_error_title\":\"Error de env\\u00edo\",\"send_error_msg\":\"El correo no pudo enviarse autom\\u00e1ticamente. Por favor, copia el resumen y env\\u00edalo manualmente.\",\"summary_copied\":\"\\u00a1Resumen copiado!\",\"sending\":\"Enviando...\",\"request_products\":\"Solicitar productos\",\"step3_no_products\":\"No has seleccionado ning\\u00fan producto en el Paso 1. Por favor, vuelve atr\\u00e1s.\",\"design_label\":\"Dise\\u00f1o\",\"color_1\":\"Color 1\",\"color_2\":\"Color 2\",\"no_design_assigned\":\"Sin dise\\u00f1o asignado\",\"unknown\":\"Desconocido\",\"sample_label\":\"(MUESTRA)\",\"whatsapp_header\":\"*NUEVO PEDIDO PERSONALIZADO*\",\"whatsapp_customer_details\":\"*DATOS DEL CLIENTE*\",\"whatsapp_product_details\":\"*DETALLES DEL PRODUCTO*\",\"name\":\"Nombre\",\"email\":\"Email\",\"phone\":\"Tel\\u00e9fono\",\"country\":\"Pa\\u00eds\",\"city\":\"Ciudad\",\"company\":\"Empresa\",\"position\":\"Cargo\",\"address\":\"Direcci\\u00f3n\",\"notes\":\"Notas\",\"quantity\":\"Cantidad\",\"delete_assignment\":\"Eliminar asignaci\\u00f3n\",\"delete_design\":\"Eliminar dise\\u00f1o\",\"error_loading_svg\":\"Error al cargar el SVG\"};\n    <\/script>\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n<script>\n    tailwind.config = {\n        corePlugins: {\n            preflight: false,\n        }\n    }\n<\/script>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n<style>\n    :root {\n        --cream: #FBF7F3;\n        --dark-teal: #125D65;\n        --chic-pink: #F29BBA;\n        --warm-beige: #DAB99E;\n        --vibrant-orange: #EB7620;\n        --golden-yellow: #F3A908;\n        --dark-gray: #1F2937;\n    }\n\n    body {\n        background-color: #FFFFFF;\n    }\n\n    #crochet-personalizer-app {\n        font-family: 'Poppins', sans-serif !important;\n        font-size: 17px;\n        display: flex;\n        justify-content: center;\n        width: 100%;\n    }\n\n    #crochet-personalizer-app h3,\n    #crochet-personalizer-app h4,\n    #crochet-personalizer-app label,\n    #crochet-personalizer-app button,\n    #crochet-personalizer-app input,\n    #crochet-personalizer-app p {\n        font-family: 'Poppins', sans-serif !important;\n    }\n\n    #crochet-personalizer-app .step-title {\n        font-size: 33px !important;\n        font-weight: 700 !important;\n    }\n\n    #crochet-personalizer-app .section-title {\n        font-size: 23px !important;\n        font-weight: 700 !important;\n    }\n\n    #crochet-personalizer-app button,\n    #crochet-personalizer-app input[type=\"button\"],\n    #crochet-personalizer-app input[type=\"submit\"] {\n        cursor: pointer;\n    }\n\n    #crochet-personalizer-app .app-button {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        gap: 0.5rem;\n        padding: 1rem 1.5rem;\n        border-radius: 0.5rem;\n        font-weight: 500;\n        border: 1px solid var(--dark-gray);\n        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);\n        transition: all 0.15s ease-out;\n    }\n\n    #crochet-personalizer-app .app-button:hover {\n        transform: translateY(-2px);\n        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n    }\n\n    #crochet-personalizer-app .app-button:active {\n        transform: translateY(0px);\n        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n    }\n\n    #crochet-personalizer-app .btn-primary {\n        background-color: black;\n        color: white;\n        border-radius: 9999px;\n        border-color: black;\n    }\n\n    #crochet-personalizer-app .btn-primary:hover {\n        color: white !important;\n        background-color: #333;\n    }\n\n    #crochet-personalizer-app .color-swatch {\n        transition: box-shadow 0.2s ease-in-out;\n        box-shadow: 0 2px 7px 0 rgb(0 0 0 \/ 27%), 0 0 0 3px transparent;\n        \/* Sombra de borde inicial transparente *\/\n        border: none;\n    }\n\n    #crochet-personalizer-app .color-swatch:hover {\n        box-shadow: 0 2px 7px 0 rgb(0 0 0 \/ 27%), 0 0 0 3px var(--dark-gray);\n        \/* Se activa la sombra del borde *\/\n    }\n\n    #crochet-personalizer-app .selected-color {\n        box-shadow: 0 2px 7px 0 rgb(0 0 0 \/ 27%), 0 0 0 3px var(--dark-gray);\n        \/* Se activa la sombra del borde *\/\n    }\n\n    #crochet-personalizer-app .preview-svg {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n    }\n\n    #crochet-personalizer-app .colorFondo-path,\n    #crochet-personalizer-app .color1-path,\n    #crochet-personalizer-app .color2-path,\n    #crochet-personalizer-app .color3-path {\n        transition: fill 0.35s ease-in-out;\n    }\n\n    #crochet-personalizer-app .modal-overlay {\n        z-index: 100;\n    }\n\n    #crochet-personalizer-app .modal-overlay {\n        transition: opacity 0.3s ease-in-out;\n    }\n\n    #crochet-personalizer-app .modal-container {\n        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;\n    }\n\n    #crochet-personalizer-app #preview-wrapper {\n        transition: background-color 0.35s ease-in-out;\n    }\n\n    @keyframes fadeInUp {\n        from {\n            opacity: 0;\n            transform: translateY(10px) scale(0.95);\n        }\n\n        to {\n            opacity: 1;\n            transform: translateY(0) scale(1);\n        }\n    }\n\n    #crochet-personalizer-app #saved-designs-container {\n        display: grid;\n        grid-template-columns: repeat(2, 1fr);\n        gap: 1rem;\n    }\n\n    @media (min-width: 768px) {\n        #crochet-personalizer-app #saved-designs-container {\n            grid-template-columns: repeat(4, 1fr);\n        }\n    }\n\n    #crochet-personalizer-app .saved-design-card {\n        position: relative;\n        background-color: white;\n        border-radius: 0.75rem;\n        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);\n        overflow: hidden;\n        transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;\n        cursor: pointer;\n        display: flex;\n        flex-direction: column;\n    }\n\n    #crochet-personalizer-app .saved-design-card:hover {\n        transform: translateY(-4px);\n        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.08);\n    }\n\n    #crochet-personalizer-app .saved-design-preview {\n        width: 100%;\n        aspect-ratio: 1 \/ 1;\n        background-color: #f0f0f0;\n        flex-shrink: 0;\n    }\n\n    #crochet-personalizer-app .saved-design-title {\n        font-size: 1rem;\n        padding: 0.75rem 0.5rem;\n        font-weight: 500;\n        color: var(--dark-gray);\n        text-align: center;\n        background-color: #fff;\n    }\n\n    #crochet-personalizer-app .delete-btn {\n        position: absolute;\n        top: 0.5rem;\n        right: 0.5rem;\n        width: 28px;\n        height: 28px;\n        border-radius: 50%;\n        background-color: rgba(0, 0, 0, 0.6) !important;\n        color: white;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 20px;\n        line-height: 1;\n        border: none !important;\n        box-shadow: none !important;\n        padding: 0 !important;\n        opacity: 0;\n        transform: scale(0.8);\n        transition: opacity 0.2s ease, transform 0.2s ease;\n        z-index: 10;\n    }\n\n    #crochet-personalizer-app .saved-design-card:hover .delete-btn {\n        opacity: 1;\n        transform: scale(1);\n    }\n\n    #crochet-personalizer-app .delete-btn:hover {\n        background-color: var(--dark-gray) !important;\n        transform: scale(1.1) !important;\n    }\n\n    #crochet-personalizer-app .layer-tab-button {\n        background-color: transparent;\n        border: none;\n        border-bottom: 3px solid #E5E7EB;\n        padding: 0.75rem 0.5rem;\n        border-radius: 0;\n        font-weight: 500;\n        color: #6B7280;\n        text-align: center;\n        transition: color 0.2s, border-color 0.2s;\n        flex-grow: 1;\n    }\n\n    #crochet-personalizer-app .layer-tab-button:hover {\n        color: var(--dark-gray);\n    }\n\n    #crochet-personalizer-app .layer-tab-button.active-layer-tab {\n        color: var(--dark-gray);\n        font-weight: 700;\n        border-bottom-color: var(--dark-gray);\n    }\n\n    .design-assignment-thumbnail {\n        cursor: pointer;\n        border: 2px solid transparent;\n        transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;\n    }\n\n    .design-assignment-thumbnail.selected-design {\n        border-color: var(--dark-gray);\n        transform: scale(1.05);\n        box-shadow: 0 0 8px rgba(31, 41, 55, 0.5);\n    }\n\n    #crochet-personalizer-app .pattern-selector-btn {\n        width: 40px;\n        height: 40px;\n        border-radius: 50%;\n        background-color: #f3f4f6;\n        color: var(--dark-gray);\n        font-weight: 700;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border: 2px solid transparent;\n        transition: all 0.2s ease-in-out;\n        padding: 20px !important;\n    }\n\n    #crochet-personalizer-app .pattern-selector-btn:hover {\n        background-color: #e5e7eb;\n        border-color: var(--dark-gray);\n    }\n\n    #crochet-personalizer-app .pattern-selector-btn.active-pattern {\n        background-color: var(--dark-gray);\n        color: white;\n        border-color: var(--dark-gray);\n    }\n\n    #crochet-personalizer-app .layer-tab-color-indicator {\n        width: 14px;\n        height: 14px;\n        border-radius: 50%;\n        border: 1px solid rgba(0, 0, 0, 0.2);\n        display: inline-block;\n        margin-right: 0.5rem;\n        flex-shrink: 0;\n    }\n\n    #crochet-personalizer-app .link-button {\n        background: none;\n        border: none;\n        box-shadow: none;\n        color: var(--dark-gray);\n        font-weight: 500;\n        text-decoration: none;\n        transition: text-decoration 0.2s;\n        padding: 0.5rem;\n    }\n\n    #crochet-personalizer-app .link-button:hover {\n        text-decoration: underline;\n    }\n\n    .assignment-swatch {\n        width: 16px;\n        height: 16px;\n        border-radius: 50%;\n        border: 1px solid rgba(0, 0, 0, 0.1);\n        display: inline-block;\n    }\n\n    .edit-overlay {\n        position: absolute;\n        inset: 0;\n        background-color: rgba(0, 0, 0, 0.3);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        opacity: 0;\n        transition: opacity 0.2s;\n        pointer-events: none;\n    }\n\n    .assignment-card-image:hover .edit-overlay {\n        opacity: 1;\n    }\n\n    .assignment-card-image {\n        cursor: pointer;\n    }\n\n    #crochet-personalizer-app .add-assignment-btn {\n        background-color: transparent !important;\n        border-style: dashed !important;\n        border-width: 2px !important;\n        border-color: #D1D5DB !important;\n        border-radius: 0.75rem !important;\n        color: #9CA3AF !important;\n        padding: 0 !important;\n        width: 100%;\n        aspect-ratio: 1 \/ 1;\n        font-size: 3rem !important;\n        font-weight: 300 !important;\n        display: flex !important;\n        align-items: center !important;\n        justify-content: center !important;\n        transition: all 0.2s !important;\n    }\n\n    #crochet-personalizer-app .add-assignment-btn:hover {\n        background-color: #F9FAFB !important;\n        border-color: #9CA3AF !important;\n    }\n\n    .delete-assignment-btn {\n        position: absolute;\n        top: 0.5rem;\n        right: 0.5rem;\n        width: 28px;\n        height: 28px;\n        border-radius: 50% !important;\n        background-color: white !important;\n        color: black !important;\n        border: 1px solid #e2e8f0 !important;\n        display: flex !important;\n        align-items: center !important;\n        justify-content: center !important;\n        font-size: 18px !important;\n        font-weight: bold;\n        line-height: 1 !important;\n        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;\n        transition: all 0.2s;\n        z-index: 10;\n        padding: 0 !important;\n    }\n\n    .delete-assignment-btn:hover {\n        background-color: #f3f4f6 !important;\n        transform: scale(1.1);\n    }\n\n    #crochet-personalizer-app .design-placeholder {\n        aspect-ratio: 1 \/ 1 !important;\n    }\n\n    #crochet-personalizer-app .product-card-visual img {\n        border-width: 3px !important;\n        border-style: solid !important;\n        border-color: #E5E7EB !important;\n        \/* gray-200 *\/\n        transition: border-color 0.2s ease-in-out !important;\n        border-radius: 33px !important;\n    }\n\n    #crochet-personalizer-app .product-card-visual.selected img {\n        border-color: var(--dark-gray) !important;\n    }\n\n    #crochet-personalizer-app .product-card-visual.selected .product-title {\n        color: var(--dark-gray) !important;\n    }\n<\/style>\n<div id=\"crochet-personalizer-app\">\n    <div class=\"container mx-auto max-w-6xl px-4 py-8\">\n\n        <div id=\"step-1\">\n            <header class=\"text-center mb-8\">\n                <h3 class=\"step-title text-gray-900\">\n                    Paso 1: Elige tus productos                <\/h3>\n                <p class=\"text-gray-800 mt-2\">\n                    Selecciona los productos que te interesan.                <\/p>\n            <\/header>\n            <div id=\"initial-product-list\" class=\"max-w-5xl mx-auto\">\n            <\/div>\n            <div class=\"mt-8 text-center\">\n                <button id=\"go-to-step-2-btn\" class=\"app-button w-full max-w-sm mx-auto btn-primary\">\n                    Siguiente: Crear dise\u00f1os                <\/button>\n            <\/div>\n        <\/div>\n\n        <div id=\"step-2\" class=\"hidden\">\n            <header class=\"text-center mb-8\">\n                <h3 class=\"step-title text-gray-900\">\n                    Paso 2: Personaliza tus colores                <\/h3>\n                <p class=\"text-gray-800 mt-2\">\n                    Crea y guarda tantas combinaciones de colores como quieras.                <\/p>\n            <\/header>\n            <main class=\"grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12\">\n                <div class=\"flex flex-col items-center\">\n\n                    <div id=\"preview-wrapper\" class=\"w-full rounded-2xl overflow-hidden border-4 border-white\">\n                        <div id=\"preview-container\" class=\"relative w-full aspect-square flex flex-col p-4\">\n                            <div id=\"svg-target\" class=\"relative flex-grow w-full min-h-0\">\n                            <\/div>\n                            <div class=\"flex-shrink-0 pt-4 flex justify-center\">\n                                <button id=\"save-button\" class=\"app-button\"\n                                    style=\"background-color: white; color: black; border: 2px solid black; border-radius: 9999px; padding: 0.75rem 2.5rem;\">\n                                    Guardar combinaci\u00f3n                                <\/button>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                <\/div>\n                <div class=\"p-6 rounded-2xl flex flex-col border-2 border-gray-300\" style=\"background-color: #F4F4F4;\">\n                    <div class=\"flex justify-between items-center p-3 rounded-lg\">\n                        <h4 class=\"section-title text-gray-900\">\n                             Number of colors:                        <\/h4>\n                        <div id=\"pattern-selectors-container\" class=\"flex items-center gap-2\"><\/div>\n                    <\/div>\n\n                    <div class=\"mb-6\">\n                        <div id=\"layer-buttons\" class=\"flex border-b border-gray-200\"><\/div>\n                    <\/div>\n                    <div class=\"mb-8 pt-4\">\n                        <div id=\"color-palette\" class=\"grid grid-cols-8 gap-3\"><\/div>\n                    <\/div>\n\n                    <div class=\"flex flex-col gap-4 pt-4 mt-auto\">\n                        <div class=\"flex justify-around items-center gap-4\">\n                            <button id=\"change-bg-button\" class=\"link-button\">\n                                Cambiar color de fondo                            <\/button>\n                            <button id=\"random-button\" title=\"Colores aleatorios\"\n                                class=\"link-button\">\n                                Combinaci\u00f3n aleatoria                            <\/button>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <section class=\"w-full mt-8 lg:col-span-2\">\n                    <h4 class=\"section-title text-center mb-4\">\n                        Combinaciones guardadas                    <\/h4>\n                    <div id=\"saved-designs-container\" class=\"max-w-full\">\n                    <\/div>\n                <\/section>\n            <\/main>\n            <div class=\"mt-8 flex justify-between items-center\">\n                <button id=\"back-to-step-1-btn\" class=\"app-button btn-primary\">\n                    Atr\u00e1s                <\/button>\n                <button id=\"go-to-step-3-btn\" class=\"app-button btn-primary\">\n                    Siguiente: Seleccionar tus dise\u00f1os                <\/button>\n            <\/div>\n        <\/div>\n\n        <div id=\"step-3\" class=\"hidden\">\n            <header class=\"text-center mb-8\">\n                <h3 class=\"step-title text-gray-900\">\n                    Paso 3: Selecciona tus dise\u00f1os                <\/h3>\n                <p class=\"text-gray-800 mt-2\">\n                    Elige tus combinaciones de colores favoritas para cada producto seleccionado, solicita una muestra y selecciona la cantidad que deseas.                <\/p>\n            <\/header>\n            <div id=\"product-assignment-list\" class=\"space-y-6\"><\/div>\n            <div class=\"mt-8 flex justify-between items-center\">\n                <button id=\"back-to-step-2-btn\" class=\"app-button btn-primary\">\n                    Atr\u00e1s                <\/button>\n                <button id=\"go-to-step-4-btn\" class=\"app-button btn-primary\">\n                    Siguiente: Realizar pedido                <\/button>\n            <\/div>\n        <\/div>\n\n        <div id=\"step-4\" class=\"hidden\">\n            <header class=\"text-center mb-8\">\n                <h3 class=\"step-title text-gray-900\">\n                    Paso 4: Confirma tu pedido                <\/h3>\n                <p class=\"text-gray-800 mt-2\">\n                    Revisa tu selecci\u00f3n y completa tus datos para finalizar.                <\/p>\n            <\/header>\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\n                <div class=\"bg-white p-6 rounded-2xl\" style=\"box-shadow: 0 2px 7px 0 rgb(0 0 0 \/ 27%) !important;\">\n                    <h2 class=\"text-2xl font-bold mb-6 border-b border-gray-300 pb-3 text-gray-900\">\n                        Resumen del pedido                    <\/h2>\n                    <div id=\"summary-container\" class=\"space-y-6\"><\/div>\n                <\/div>\n                <div class=\"p-6 rounded-2xl\" style=\"background-color: #F4F4F4;\">\n                    <form id=\"order-form\">\n                        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\n                            <input type=\"text\" id=\"form-name\"\n                                placeholder=\"Nombre y apellido\" required\n                                class=\"p-2 border border-gray-300 rounded-lg w-full\">\n                            <input type=\"email\" id=\"form-email\" placeholder=\"Email\"\n                                required class=\"p-2 border border-gray-300 rounded-lg w-full\">\n                            <input type=\"tel\" id=\"form-phone\" placeholder=\"Tel\u00e9fono\"\n                                class=\"p-2 border border-gray-300 rounded-lg w-full\">\n                            <input type=\"text\" id=\"form-country\" placeholder=\"Pa\u00eds\"\n                                class=\"p-2 border border-gray-300 rounded-lg w-full\">\n                            <input type=\"text\" id=\"form-city\" placeholder=\"Ciudad\"\n                                class=\"p-2 border border-gray-300 rounded-lg w-full\">\n                            <input type=\"text\" id=\"form-company\" placeholder=\"Empresa\"\n                                class=\"p-2 border border-gray-300 rounded-lg w-full\">\n                        <\/div>\n                        <div class=\"mb-4\">\n                            <input type=\"text\" id=\"form-position\" placeholder=\"Rol\"\n                                class=\"p-2 border border-gray-300 rounded-lg w-full\">\n                        <\/div>\n                        <div class=\"mb-4\">\n                            <input type=\"text\" id=\"form-shipping-address\"\n                                placeholder=\"Direcci\u00f3n de env\u00edo\" required\n                                class=\"p-2 border border-gray-300 rounded-lg w-full\">\n                        <\/div>\n                        <div class=\"mb-6\">\n                            <textarea id=\"form-notes\" placeholder=\"Notas adicionales...\"\n                                rows=\"3\" class=\"p-2 border border-gray-300 rounded-lg w-full\"><\/textarea>\n                        <\/div>\n                        <div class=\"flex justify-between items-center\">\n                            <button type=\"button\" id=\"back-to-step-3-btn\" class=\"app-button btn-primary\">\n                                Atr\u00e1s                            <\/button>\n                            <button type=\"submit\" id=\"submit-order-button\" class=\"app-button btn-primary\">\n                                Solicitar productos                            <\/button>\n                        <\/div>\n                    <\/form>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div id=\"toast-message\"\n            class=\"fixed bottom-5 right-5 text-black font-semibold py-3 px-6 rounded-lg shadow-xl opacity-0 transform translate-y-10\"\n            style=\"background-color: var(--golden-yellow); transition: opacity 0.5s, transform 0.5s; z-index: 110;\">\n        <\/div>\n\n        <div id=\"delete-confirm-modal\"\n            class=\"modal-overlay fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden opacity-0\">\n            <div\n                class=\"modal-container bg-white w-full max-w-sm p-6 rounded-2xl shadow-2xl transform scale-95 opacity-0\">\n                <h3 class=\"text-lg font-bold mb-4 text-center text-gray-900\">\n                    Confirmar eliminaci\u00f3n                <\/h3>\n                <p class=\"text-center text-gray-600 mb-6\">\n                    \u00bfEst\u00e1s seguro de que quieres eliminar esta combinaci\u00f3n?                <\/p>\n                <div class=\"flex justify-center gap-4\">\n                    <button id=\"confirm-delete-no\" class=\"app-button px-8\"\n                        style=\"background-color: white; color: black; border: 2px solid black; border-radius: 9999px;\">\n                        NO                    <\/button>\n                    <button id=\"confirm-delete-yes\" class=\"app-button px-8\"\n                        style=\"background-color: black; color: white; border-color: black; border-radius: 9999px;\">\n                        S\u00ed                    <\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div id=\"assignment-modal\"\n            class=\"modal-overlay fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden opacity-0\">\n            <div\n                class=\"modal-container bg-white w-full max-w-2xl p-6 rounded-2xl shadow-2xl transform scale-95 opacity-0\">\n                <h3 id=\"assignment-modal-title\" class=\"text-xl font-bold mb-4 text-gray-900\">\n                    Agregar\/Editar combinaci\u00f3n                <\/h3>\n                <div class=\"space-y-4\">\n                    <div>\n                        <label class=\"font-semibold block mb-2\">\n                            Selecciona un dise\u00f1o:                        <\/label>\n                        <div id=\"assignment-modal-designs\"\n                            class=\"grid grid-cols-4 md:grid-cols-6 gap-2 max-h-48 overflow-y-auto p-2 bg-gray-50 rounded-lg\">\n                        <\/div>\n                    <\/div>\n                    <div>\n                        <label class=\"font-semibold block mb-1\">\n                            \u00bfTe gustar\u00eda solicitar una muestra de este dise\u00f1o?                        <\/label>\n                        <div class=\"flex items-center gap-6 mt-1\">\n                            <div class=\"flex items-center\">\n                                <input type=\"radio\" name=\"modal-sample\" id=\"modal-sample-yes\" value=\"yes\"\n                                    class=\"h-4 w-4\">\n                                <label for=\"modal-sample-yes\" class=\"ml-2 text-sm\">\n                                    S\u00ed                                <\/label>\n                            <\/div>\n                            <div class=\"flex items-center\">\n                                <input type=\"radio\" name=\"modal-sample\" id=\"modal-sample-no\" value=\"no\" class=\"h-4 w-4\"\n                                    checked>\n                                <label for=\"modal-sample-no\" class=\"ml-2 text-sm\">\n                                    No                                <\/label>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div>\n                        <label for=\"assignment-modal-quantity\" id=\"quantity-label\" class=\"font-semibold block mb-1\">\n                            3. \u00bfCu\u00e1ntas unidades te gustar\u00eda solicitar?                        <\/label>\n                        <input type=\"number\" id=\"assignment-modal-quantity\" value=\"1\" min=\"1\"\n                            class=\"w-32 p-2 border border-gray-300 rounded-md\">\n                    <\/div>\n                <\/div>\n                <div class=\"flex justify-end gap-4 mt-6\">\n                    <button id=\"assignment-modal-cancel\" class=\"app-button\"\n                        style=\"background-color: white; color: black; border: 2px solid black; border-radius: 9999px;\">\n                        Cancelar                    <\/button>\n                    <button id=\"assignment-modal-save\" class=\"app-button btn-primary\">\n                        Guardar                    <\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div id=\"result-modal\"\n            class=\"modal-overlay fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden opacity-0\">\n            <div\n                class=\"modal-container bg-white w-full max-w-md p-6 rounded-2xl shadow-2xl transform scale-95 opacity-0 text-center\">\n                <h3 id=\"result-modal-title\" class=\"text-xl font-bold mb-4 text-gray-900\"><\/h3>\n                <p id=\"result-modal-message\" class=\"text-gray-600 mb-6\"><\/p>\n                <textarea id=\"whatsapp-summary\" class=\"w-full h-48 p-2 border border-gray-300 rounded-md mb-4 hidden\"\n                    readonly><\/textarea>\n                <div id=\"modal-buttons\" class=\"flex justify-center gap-4\">\n                    <button id=\"copy-summary-btn\" class=\"app-button hidden\"\n                        style=\"background-color: #25D366; color: white; border-color: #25D366;\">\n                        Copiar sumario                    <\/button>\n                    <button id=\"result-modal-close\" class=\"app-button btn-primary\">\n                        Cerrar                    <\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n<script type=\"module\">\n    \/\/ --- GLOBAL APP STATE ---\n    let savedDesigns = JSON.parse(localStorage.getItem('crochetDesigns')) || [];\n    let orderData = { products: [], sampleAssignmentId: null };\n    let selectedLayer = 'color1';\n    let selectedPattern = 'pattern2c';\n    let allSvgData = {};\n    let svgData = {};\n    let svgLayers = {};\n    let designIdToDelete = null;\n    let currentBgIndex = 0;\n\n    const currentColors = { color1: '#B57EDC', color2: '#E6007E' }; \/\/ Lavender & Pink\n\n    \/\/ Usar los colores que vienen de WordPress, o un array vac\u00edo si falla.\n    const PALETTE_COLORS = window.crochetDynamicPalette && window.crochetDynamicPalette.length > 0\n        ? window.crochetDynamicPalette\n        : [\n            \/\/ Fallback de emergencia (solo un color por si acaso no hay nada cargado)\n            { n: 'Azul Bondi', c: 44, h: '#0095B6' }\n        ];\n\n    const BACKGROUND_CYCLE_OPTIONS = ['#F4F4F4', 'auto-c1', 'auto-c2', '#FFFFFF', '#D1D5DB', '#9CA3AF', '#000000'];\n    const PRODUCTS = window.crochetProducts || [];\n\n    const PATTERNS = window.crochetPatterns || {};\n    const RENDER_ORDER = ['colorFondo', 'color1', 'color2'];\n    const layerDisplayNames = { color1: window.crochetTranslations.color_1, color2: window.crochetTranslations.color_2 };\n\n    \/\/ --- DOM Elements ---\n    const step1Div = document.getElementById('step-1');\n    const step2Div = document.getElementById('step-2');\n    const step3Div = document.getElementById('step-3');\n    const step4Div = document.getElementById('step-4');\n\n    const previewContainer = document.getElementById('preview-container');\n    const svgTarget = document.getElementById('svg-target');\n    const previewWrapper = document.getElementById('preview-wrapper');\n    const colorPalette = document.getElementById('color-palette');\n    const saveButton = document.getElementById('save-button');\n    const savedDesignsContainer = document.getElementById('saved-designs-container');\n    const randomButton = document.getElementById('random-button');\n    const changeBgButton = document.getElementById('change-bg-button');\n    const patternSelectorsContainer = document.getElementById('pattern-selectors-container');\n\n    \/\/ Step 1\n    const initialProductList = document.getElementById('initial-product-list');\n    const goToStep2Btn = document.getElementById('go-to-step-2-btn');\n\n    \/\/ Step 2\n    const backToStep1Btn = document.getElementById('back-to-step-1-btn');\n    const goToStep3Btn = document.getElementById('go-to-step-3-btn');\n\n    \/\/ Step 3\n    const productAssignmentList = document.getElementById('product-assignment-list');\n    const backToStep2Btn = document.getElementById('back-to-step-2-btn');\n    const goToStep4Btn = document.getElementById('go-to-step-4-btn');\n\n    \/\/ Step 4\n    const summaryContainer = document.getElementById('summary-container');\n    const orderForm = document.getElementById('order-form');\n    const backToStep3Btn = document.getElementById('back-to-step-3-btn');\n\n    \/\/ Modals\n    const toastMessage = document.getElementById('toast-message');\n    const deleteConfirmModal = document.getElementById('delete-confirm-modal');\n    const confirmDeleteYes = document.getElementById('confirm-delete-yes');\n    const confirmDeleteNo = document.getElementById('confirm-delete-no');\n\n    const assignmentModal = document.getElementById('assignment-modal');\n    const assignmentModalTitle = document.getElementById('assignment-modal-title');\n    const assignmentModalDesigns = document.getElementById('assignment-modal-designs');\n    const assignmentModalQuantity = document.getElementById('assignment-modal-quantity');\n\n    const resultModal = document.getElementById('result-modal');\n    const resultModalTitle = document.getElementById('result-modal-title');\n    const resultModalMessage = document.getElementById('result-modal-message');\n    const whatsappSummary = document.getElementById('whatsapp-summary');\n    const copySummaryBtn = document.getElementById('copy-summary-btn');\n    const resultModalClose = document.getElementById('result-modal-close');\n\n    function generateUniqueId() {\n        return 'id' + String(Date.now() + Math.random()).replace('.', '');\n    }\n\n    \/\/ --- RENDER & NAVIGATION FUNCTIONS ---\n    function showStep(stepNumber) {\n        step1Div.classList.add('hidden');\n        step2Div.classList.add('hidden');\n        step3Div.classList.add('hidden');\n        step4Div.classList.add('hidden');\n\n        if (stepNumber === 1) { renderStep1(); step1Div.classList.remove('hidden'); }\n        if (stepNumber === 2) { step2Div.classList.remove('hidden'); }\n        if (stepNumber === 3) { renderStep3(); step3Div.classList.remove('hidden'); }\n        if (stepNumber === 4) { renderStep4(); step4Div.classList.remove('hidden'); }\n        window.scrollTo(0, 0);\n    }\n\n    function renderStep1() {\n        initialProductList.innerHTML = '';\n        initialProductList.className = 'grid grid-cols-1 sm:grid-cols-3 gap-8 max-w-5xl mx-auto';\n        PRODUCTS.forEach(product => {\n            const isSelected = orderData.products.some(p => p.id === product.id);\n            const card = document.createElement('div');\n            card.className = `group cursor-pointer product-card-visual ${isSelected ? 'selected' : ''}`;\n            card.dataset.productId = product.id;\n\n            card.innerHTML = `\n                <div class=\"relative\">\n                    <img decoding=\"async\" src=\"${product.imageUrl}\" alt=\"${product.name}\" class=\"w-full h-auto object-cover\">\n                    <div class=\"absolute top-4 right-4 bg-gray-900 text-white rounded-full w-8 h-8 flex items-center justify-center opacity-0 group-[.selected]:opacity-100 transition-opacity duration-200 pointer-events-none\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>\n                    <\/div>\n                <\/div>\n                <p class=\"product-title text-center font-bold text-lg mt-4 text-gray-500 transition-colors duration-200\">${product.name}<\/p>\n            `;\n\n            initialProductList.appendChild(card);\n\n            card.addEventListener('click', () => {\n                card.classList.toggle('selected');\n            });\n        });\n    }\n\n    function saveStep1Data() {\n        const selectedProductIds = new Set();\n        document.querySelectorAll('.group.selected').forEach(card => {\n            selectedProductIds.add(card.dataset.productId);\n        });\n\n        const currentProductIds = new Set(orderData.products.map(p => p.id));\n\n        selectedProductIds.forEach(id => {\n            if (!currentProductIds.has(id)) {\n                const productInfo = PRODUCTS.find(p => p.id === id);\n                orderData.products.push({ id: id, name: productInfo.name, assignments: [] });\n            }\n        });\n\n        orderData.products = orderData.products.filter(p => selectedProductIds.has(p.id));\n    }\n\n\n    function renderStep3() {\n        productAssignmentList.innerHTML = '';\n        productAssignmentList.innerHTML = '';\n        if (orderData.products.length === 0) {\n            productAssignmentList.innerHTML = `<p class=\"text-center text-gray-600\">${window.crochetTranslations.step3_no_products}<\/p>`;\n            return;\n        }\n\n        orderData.products.forEach(product => {\n            const productContainer = document.createElement('div');\n            productContainer.className = 'bg-white rounded-xl p-6 space-y-4';\n\n            productContainer.innerHTML = `<h3 class=\"font-bold text-gray-900 text-center md:text-left\" style=\"font-size: 20px !important; font-weight: 700 !important;\">${product.name}<\/h3>`;\n\n            const assignmentsGrid = document.createElement('div');\n            assignmentsGrid.className = 'grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4';\n\n            product.assignments.forEach(assignment => {\n                const design = savedDesigns.find(d => d.id === assignment.designId);\n                const isSample = assignment.assignmentId === orderData.sampleAssignmentId;\n                const assignmentCard = document.createElement('div');\n                assignmentCard.className = 'bg-white rounded-lg shadow overflow-hidden flex flex-col';\n\n                let swatchesHTML = '';\n                if (design) {\n                    const activeLayers = PATTERNS[design.pattern]?.layers || [];\n                    swatchesHTML = activeLayers.map(layerKey => {\n                        const colorHex = design.colores[layerKey]?.hex;\n                        return `<div class=\"assignment-swatch\" style=\"background-color: ${colorHex || 'transparent'};\" title=\"${layerKey}\"><\/div>`;\n                    }).join('');\n                }\n\n                assignmentCard.innerHTML = `\n                    <div class=\"relative assignment-card-image\">\n                        <div class=\"w-full aspect-square\">${createMiniPreviewHTML(design)}<\/div>\n                        <div class=\"edit-overlay\">\n                             <div class=\"bg-white rounded-full w-12 h-12 flex items-center justify-center shadow-md\">\n                                 <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z\"><\/path><\/svg>\n                             <\/div>\n                        <\/div>\n                        <button class=\"delete-assignment-btn\" data-product-id=\"${product.id}\" data-assignment-id=\"${assignment.assignmentId}\" title=\"${window.crochetTranslations.delete_assignment}\">&times;<\/button>\n                    <\/div>\n                    <div class=\"p-2 text-center bg-white flex flex-col flex-grow justify-start items-center\">\n                        <div class=\"flex items-center justify-center gap-1 mb-1\">${swatchesHTML}<\/div>\n                        <p class=\"text-sm font-semibold text-gray-800\">${window.crochetTranslations.quantity}: ${assignment.quantity}<\/p>\n                        ${isSample ? `<p class=\"text-xs font-bold text-green-700 uppercase tracking-wide\">${window.crochetTranslations.sample_label}<\/p>` : ''}\n                    <\/div>\n                `;\n                assignmentCard.querySelector('.assignment-card-image').addEventListener('click', () => {\n                    openAssignmentModal(product.id, assignment.assignmentId);\n                });\n                assignmentsGrid.appendChild(assignmentCard);\n            });\n\n            const addButtonCard = document.createElement('button');\n            addButtonCard.className = 'add-assignment-btn';\n            addButtonCard.dataset.productId = product.id;\n            addButtonCard.innerHTML = '+';\n            assignmentsGrid.appendChild(addButtonCard);\n\n            productContainer.appendChild(assignmentsGrid);\n            productAssignmentList.appendChild(productContainer);\n        });\n\n        \/\/ Add event listeners\n        document.querySelectorAll('.add-assignment-btn').forEach(btn => {\n            btn.addEventListener('click', () => openAssignmentModal(btn.dataset.productId, null));\n        });\n\n        document.querySelectorAll('.delete-assignment-btn').forEach(btn => {\n            btn.addEventListener('click', (e) => {\n                e.stopPropagation();\n                const { productId, assignmentId } = e.currentTarget.dataset;\n                const product = orderData.products.find(p => p.id === productId);\n                if (product) {\n                    product.assignments = product.assignments.filter(a => a.assignmentId !== assignmentId);\n                    if (orderData.sampleAssignmentId === assignmentId) {\n                        orderData.sampleAssignmentId = null;\n                    }\n                    renderStep3();\n                }\n            });\n        });\n    }\n\n    function saveStep3Data() {\n        \/\/ Data is now saved directly when the assignment modal closes.\n    }\n\n    function renderStep4() {\n        summaryContainer.innerHTML = '';\n        const productsSummaryDiv = document.createElement('div');\n        productsSummaryDiv.className = '';\n\n        const list = document.createElement('div');\n        list.className = 'space-y-6';\n\n        orderData.products.forEach(product => {\n            if (product.assignments.length > 0) {\n                product.assignments.forEach(assignment => {\n                    const design = savedDesigns.find(d => d.id === assignment.designId);\n                    let designHtml = `<p class=\"text-xs text-red-500 mt-2\">${window.crochetTranslations.no_design_assigned}<\/p>`;\n                    let colorsHtml = '';\n\n                    if (design) {\n                        const designIndex = savedDesigns.findIndex(d => d.id === design.id) + 1;\n\n                        const activeLayers = PATTERNS[design.pattern]?.layers || [];\n                        colorsHtml = activeLayers.map(layerKey => {\n                            const colorData = design.colores[layerKey];\n                            const colorHex = colorData?.hex;\n                            const colorName = colorData?.name || window.crochetTranslations.unknown;\n                            const colorCode = colorData.code ? ` (C\u00f3d. ${colorData.code})` : ''; \/\/ <-- MODIFICACI\u00d3N\n                            return `<div class=\"flex items-center gap-2\">\n                                         <span class=\"inline-block w-3 h-3 rounded-full\" style=\"background-color: ${colorHex}; border: 1px solid white;\"><\/span>\n                                         <span class=\"text-xs text-gray-600\">${colorName}${colorCode}<\/span>\n                                     <\/div>`;\n                        }).join('');\n\n                        designHtml = `<div class=\"flex items-start gap-3 mt-2\">\n                                         <div class=\"relative w-12 h-12 rounded-md overflow-hidden border border-gray-200 flex-shrink-0\">${createMiniPreviewHTML(design)}<\/div>\n                                         <div>\n                                             <p class=\"text-xs font-semibold mb-1\">${window.crochetTranslations.design_label} #${designIndex}<\/p>\n                                             <div class=\"space-y-1\">${colorsHtml}<\/div>\n                                         <\/div>\n                                     <\/div>`;\n                    }\n\n                    const isSample = assignment.assignmentId === orderData.sampleAssignmentId;\n                    const itemHtml = `\n                         <div>\n                             <p class=\"font-semibold\">${product.name} (x${assignment.quantity}) ${isSample ? `<span class=\"text-xs font-bold text-green-700\">${window.crochetTranslations.sample_label}<\/span>` : ''}<\/p>\n                             ${designHtml}\n                         <\/div>`;\n                    list.innerHTML += itemHtml;\n                });\n            }\n        });\n\n        productsSummaryDiv.appendChild(list);\n        summaryContainer.appendChild(productsSummaryDiv);\n    }\n\n    \/\/ --- CUSTOMIZER FUNCTIONS (Step 2) ---\n    function hexToRgb(hex) { if (!hex || hex.length < 4) return { r: 0, g: 0, b: 0 }; let r = 0, g = 0, b = 0; if (hex.length == 4) { r = \"0x\" + hex[1] + hex[1]; g = \"0x\" + hex[2] + hex[2]; b = \"0x\" + hex[3] + hex[3]; } else if (hex.length == 7) { r = \"0x\" + hex[1] + hex[2]; g = \"0x\" + hex[3] + hex[4]; b = \"0x\" + hex[5] + hex[6]; } return { r: +r, g: +g, b: +b }; }\n    function rgbToHsl({ r, g, b }) { r \/= 255; g \/= 255; b \/= 255; let max = Math.max(r, g, b), min = Math.min(r, g, b); let h, s, l = (max + min) \/ 2; if (max == min) { h = s = 0; } else { let d = max - min; s = l > 0.5 ? d \/ (2 - max - min) : d \/ (max + min); switch (max) { case r: h = (g - b) \/ d + (g < b ? 6 : 0); break; case g: h = (b - r) \/ d + 2; break; case b: h = (r - g) \/ d + 4; break; } h \/= 6; } return { h, s, l }; }\n    function hslToRgb({ h, s, l }) { let r, g, b; if (s == 0) { r = g = b = l; } else { const hue2rgb = (p, q, t) => { if (t < 0) t += 1; if (t > 1) t -= 1; if (t < 1 \/ 6) return p + (q - p) * 6 * t; if (t < 1 \/ 2) return q; if (t < 2 \/ 3) return p + (q - p) * (2 \/ 3 - t) * 6; return p; }; let q = l < 0.5 ? l * (1 + s) : l + s - l * s; let p = 2 * l - q; r = hue2rgb(p, q, h + 1 \/ 3); g = hue2rgb(p, q, h); b = hue2rgb(p, q, h - 1 \/ 3); } return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) }; }\n    function rgbToHex({ r, g, b }) { return \"#\" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase(); }\n    function getDarkerVersion(baseColor) { if (!baseColor) return '#000000'; const rgb = hexToRgb(baseColor); const hsl = rgbToHsl(rgb); hsl.l = Math.max(0, hsl.l - 0.5); hsl.l = Math.min(0.2, hsl.l); hsl.s = Math.max(0, hsl.s - 0.2); const newRgb = hslToRgb(hsl); return rgbToHex(newRgb); }\n\n    function getCurrentBackgroundColor() {\n        const bgOption = BACKGROUND_CYCLE_OPTIONS[currentBgIndex];\n        if (bgOption.startsWith('auto')) {\n            const sourceIndex = parseInt(bgOption.slice(-1));\n            const sourceColorKey = `color${sourceIndex}`;\n            const color = currentColors[sourceColorKey];\n            if (color) return getDarkerVersion(color);\n            return '#000000';\n        }\n        return bgOption;\n    }\n\n    async function loadPattern(patternKey) {\n        if (!patternKey || !PATTERNS[patternKey]) {\n            console.error(`Invalid pattern key provided: ${patternKey}`);\n            return;\n        }\n        if (allSvgData[patternKey]) return;\n        const urls = PATTERNS[patternKey].urls;\n        allSvgData[patternKey] = {};\n        const fetchPromises = Object.entries(urls).map(async ([key, url]) => {\n            try {\n                const response = await fetch(url);\n                if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);\n                allSvgData[patternKey][key] = await response.text();\n            } catch (error) {\n                console.error(`Error loading SVG for ${patternKey}-${key}:`, error);\n                allSvgData[patternKey][key] = `<svg viewBox=\"0 0 1000 1000\"><text x=\"10\" y=\"50\" fill=\"red\">Error<\/text><\/svg>`;\n            }\n        });\n        await Promise.all(fetchPromises);\n    }\n    function injectSVGs() {\n        svgTarget.innerHTML = '<div id=\"svg-inner-wrapper\" class=\"relative w-full h-full\"><\/div>';\n        const svgWrapper = document.getElementById('svg-inner-wrapper');\n\n        const currentPatternData = allSvgData[selectedPattern];\n        svgData = { colorFondo: `<svg id=\"svg-colorFondo\" class=\"preview-svg\" viewBox=\"0 0 1000 1000\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path class=\"colorFondo-path\" d=\"M0 0 H1000 V1000 H0 Z\"\/><\/svg>` };\n        svgLayers = { colorFondo: null, color1: null, color2: null };\n\n        if (currentPatternData) {\n            for (const key in currentPatternData) {\n                if (key === 'urls') continue;\n                const parser = new DOMParser();\n                const svgDoc = parser.parseFromString(currentPatternData[key], \"image\/svg+xml\");\n                const svgElement = svgDoc.documentElement;\n                svgElement.querySelectorAll('path, circle, rect, polygon, line, ellipse').forEach(el => el.classList.add(`${key}-path`));\n                svgElement.setAttribute('class', 'preview-svg');\n                svgElement.setAttribute('id', `svg-${key}`);\n                svgData[key] = svgElement.outerHTML;\n            }\n        }\n        RENDER_ORDER.forEach(key => { if (svgData[key]) svgWrapper.insertAdjacentHTML('beforeend', svgData[key]); });\n\n        svgLayers.colorFondo = document.querySelector('.colorFondo-path');\n        Object.keys(PATTERNS[selectedPattern].urls).forEach(layer => {\n            svgLayers[layer] = document.querySelectorAll(`.${layer}-path`);\n        });\n    }\n    function redrawAllLayers(animatePalette = false) {\n        const newBgColor = getCurrentBackgroundColor();\n\n        if (previewWrapper) {\n            previewWrapper.style.backgroundColor = newBgColor;\n        }\n\n        if (svgLayers.colorFondo) {\n            svgLayers.colorFondo.style.fill = newBgColor;\n        }\n\n        Object.keys(svgLayers).forEach(layerKey => {\n            if (layerKey === 'colorFondo') return;\n            const elements = svgLayers[layerKey];\n            if (elements && elements.length > 0) {\n                const color = currentColors[layerKey] || 'transparent';\n                elements.forEach(el => el.style.fill = color);\n            }\n        });\n        renderLayerButtons();\n        renderColorPalette(animatePalette);\n    }\n    function updateLayerColor(layerKey, color) { currentColors[layerKey] = color; redrawAllLayers(false); }\n    function renderLayerButtons() {\n        const container = document.getElementById('layer-buttons');\n        container.innerHTML = '';\n        const activeLayers = PATTERNS[selectedPattern].layers;\n        activeLayers.forEach(key => {\n            const name = layerDisplayNames[key];\n            const button = document.createElement('button');\n            button.className = 'layer-tab-button flex items-center justify-center';\n            const color = currentColors[key] || '#FFFFFF';\n            button.innerHTML = `<span class=\"layer-tab-color-indicator\" style=\"background-color: ${color};\"><\/span><span>${name}<\/span>`;\n            if (key === selectedLayer) button.classList.add('active-layer-tab');\n            button.addEventListener('click', () => { selectedLayer = key; redrawAllLayers(true); });\n            container.appendChild(button);\n        });\n    }\n    function renderColorPalette(animate = false) {\n        colorPalette.innerHTML = '';\n        const activeColor = currentColors[selectedLayer];\n        PALETTE_COLORS.forEach((colorObj, index) => {\n            const swatch = document.createElement('div');\n            swatch.className = 'color-swatch w-full aspect-square rounded-full cursor-pointer';\n            swatch.style.backgroundColor = colorObj.h;\n            swatch.title = `${colorObj.n} (C\u00f3d. ${colorObj.c})`; \/\/ <-- MODIFICACI\u00d3N\n            if (animate) {\n                swatch.style.opacity = 0;\n                swatch.style.animation = `fadeInUp 0.5s ease-out forwards`;\n                swatch.style.animationDelay = `${index * 0.02}s`;\n            }\n            if (activeColor && colorObj.h.toUpperCase() === activeColor.toUpperCase()) {\n                swatch.classList.add('selected-color');\n            }\n            swatch.addEventListener('click', () => updateLayerColor(selectedLayer, colorObj.h));\n            colorPalette.appendChild(swatch);\n        });\n    }\n    function renderPatternSelectors() {\n        const container = document.getElementById('pattern-selectors-container');\n        container.innerHTML = '';\n        const patternOrder = ['pattern1c', 'pattern2c'];\n        patternOrder.forEach(patternKey => {\n            const pattern = PATTERNS[patternKey];\n            const button = document.createElement('button');\n            button.textContent = pattern.layers.length;\n            button.className = 'pattern-selector-btn';\n            if (patternKey === selectedPattern) button.classList.add('active-pattern');\n            button.addEventListener('click', async () => {\n                if (selectedPattern === patternKey) return;\n                selectedPattern = patternKey;\n                const availableLayers = PATTERNS[selectedPattern].layers;\n                if (!availableLayers.includes(selectedLayer)) { selectedLayer = availableLayers[0]; }\n                renderPatternSelectors();\n                await loadPattern(selectedPattern);\n                injectSVGs();\n                redrawAllLayers();\n            });\n            container.appendChild(button);\n        });\n    }\n    function showToast(message) { toastMessage.textContent = message; toastMessage.classList.remove('opacity-0', 'translate-y-10'); setTimeout(() => { toastMessage.classList.add('opacity-0', 'translate-y-10'); }, 3000); }\n\n    function getRandomColor() {\n        const randomIndex = Math.floor(Math.random() * PALETTE_COLORS.length);\n        return PALETTE_COLORS[randomIndex].h;\n    }\n\n    function saveCombination() {\n        const activeLayers = PATTERNS[selectedPattern].layers;\n\n        for (const layer of activeLayers) {\n            if (!currentColors[layer]) {\n                showToast(window.crochetTranslations.select_color_error);\n                return;\n            }\n        }\n\n        const colorsToSave = {};\n        activeLayers.forEach(layer => {\n            const hex = currentColors[layer];\n            const colorInfo = PALETTE_COLORS.find(p => p.h.toUpperCase() === hex?.toUpperCase());\n            colorsToSave[layer] = {\n                hex: hex,\n                name: colorInfo ? colorInfo.n : window.crochetTranslations.unknown,\n                code: colorInfo ? colorInfo.c : 'N\/A' \/\/ <-- MODIFICACI\u00d3N\n            };\n        });\n\n        const newDesign = {\n            id: Date.now(),\n            pattern: selectedPattern,\n            colores: colorsToSave\n        };\n\n        savedDesigns.push(newDesign);\n        localStorage.setItem('crochetDesigns', JSON.stringify(savedDesigns));\n        renderSavedDesigns();\n        showToast(window.crochetTranslations.combo_saved);\n    }\n    function deleteCombination(idToDelete) { savedDesigns = savedDesigns.filter(design => design.id !== idToDelete); localStorage.setItem('crochetDesigns', JSON.stringify(savedDesigns)); renderSavedDesigns(); showToast(window.crochetTranslations.combo_deleted); }\n    function createMiniPreviewHTML(design) {\n        if (!design || !design.pattern || !allSvgData[design.pattern]) { return `<div class=\"w-full h-full bg-red-100 flex items-center justify-center text-red-500 text-xs p-1\">${window.crochetTranslations.error_loading_svg}<\/div>`; }\n        const finalSvg = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"svg\");\n        finalSvg.setAttribute(\"class\", \"preview-svg\"); finalSvg.setAttribute(\"viewBox\", \"0 0 1000 1000\"); finalSvg.setAttribute(\"preserveAspectRatio\", \"xMidYMid meet\");\n        const backgroundRect = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"rect\");\n        backgroundRect.setAttribute('width', '1000'); backgroundRect.setAttribute('height', '1000'); backgroundRect.setAttribute('fill', '#FFFFFF');\n        finalSvg.appendChild(backgroundRect);\n        const parser = new DOMParser();\n        PATTERNS[design.pattern].layers.forEach(layerKey => {\n            const svgString = allSvgData[design.pattern][layerKey];\n            const color = design.colores[layerKey]?.hex;\n            if (svgString && color) {\n                const svgDoc = parser.parseFromString(svgString, \"image\/svg+xml\");\n                svgDoc.querySelectorAll('path, circle, rect, polygon, line, ellipse').forEach(shape => {\n                    const clonedShape = shape.cloneNode(true);\n                    clonedShape.setAttribute('fill', color);\n                    clonedShape.removeAttribute('class'); clonedShape.removeAttribute('id'); clonedShape.removeAttribute('style');\n                    finalSvg.appendChild(clonedShape);\n                });\n            }\n        });\n        return finalSvg.outerHTML;\n    }\n    async function renderSavedDesigns() {\n        if (!savedDesignsContainer) return;\n        savedDesignsContainer.innerHTML = '';\n\n        if (savedDesigns.length === 0) {\n            savedDesignsContainer.className = 'grid grid-cols-2 md:grid-cols-4 gap-4';\n            for (let i = 0; i < 4; i++) {\n                const placeholder = document.createElement('div');\n                placeholder.className = 'design-placeholder bg-gray-100 border-2 border-dashed border-gray-300 rounded-xl flex items-center justify-center';\n                placeholder.innerHTML = `<span class=\"text-gray-400 text-5xl font-light\">+<\/span>`;\n                savedDesignsContainer.appendChild(placeholder);\n            }\n            return;\n        }\n\n        savedDesignsContainer.className = 'grid grid-cols-2 md:grid-cols-4 gap-4';\n        for (const [index, design] of savedDesigns.entries()) {\n            await loadPattern(design.pattern);\n            const card = document.createElement('div');\n            card.className = 'saved-design-card group';\n            card.style.opacity = 0; card.style.animation = `fadeInUp 0.5s ease-out forwards`; card.style.animationDelay = `${index * 0.05}s`;\n            const previewWrapper = document.createElement('div');\n            previewWrapper.className = 'saved-design-preview relative';\n            previewWrapper.innerHTML = createMiniPreviewHTML(design);\n            const deleteBtn = document.createElement('button');\n            deleteBtn.innerHTML = '&#10005;';\n            deleteBtn.className = 'delete-btn';\n            deleteBtn.title = window.crochetTranslations.delete_design;\n            deleteBtn.addEventListener('click', (e) => {\n                e.stopPropagation();\n                openDeleteConfirmModal(design.id);\n            });\n            previewWrapper.appendChild(deleteBtn);\n            const title = document.createElement('p');\n            title.className = 'saved-design-title';\n            title.textContent = `${window.crochetTranslations.design_label} ${index + 1}`;\n            card.addEventListener('click', async () => {\n                selectedPattern = design.pattern;\n                Object.keys(currentColors).forEach(k => currentColors[k] = undefined);\n                Object.keys(design.colores).forEach(layerKey => {\n                    currentColors[layerKey] = design.colores[layerKey].hex;\n                });\n                selectedLayer = PATTERNS[selectedPattern].layers[0];\n                renderPatternSelectors();\n                await loadPattern(selectedPattern);\n                injectSVGs();\n                redrawAllLayers();\n                showToast(`${window.crochetTranslations.showing_design} ${index + 1}`);\n            });\n            card.appendChild(previewWrapper); card.appendChild(title);\n            savedDesignsContainer.appendChild(card);\n        }\n    }\n    function openDeleteConfirmModal(designId) { designIdToDelete = designId; deleteConfirmModal.classList.remove('hidden'); requestAnimationFrame(() => { deleteConfirmModal.classList.remove('opacity-0'); deleteConfirmModal.querySelector('.modal-container').classList.remove('scale-95', 'opacity-0'); }); }\n    function closeDeleteConfirmModal() { deleteConfirmModal.classList.add('opacity-0'); deleteConfirmModal.querySelector('.modal-container').classList.add('scale-95', 'opacity-0'); setTimeout(() => { deleteConfirmModal.classList.add('hidden'); designIdToDelete = null; }, 300); }\n\n    function openAssignmentModal(productId, assignmentIdToEdit) {\n        const isEditing = assignmentIdToEdit !== null;\n        const product = orderData.products.find(p => p.id === productId);\n        const assignment = isEditing ? product.assignments.find(a => a.assignmentId === assignmentIdToEdit) : null;\n\n        assignmentModalTitle.textContent = isEditing ? window.crochetTranslations.modal_edit_title : window.crochetTranslations.modal_add_title;\n\n        assignmentModalDesigns.innerHTML = '';\n        if (savedDesigns.length === 0) {\n            assignmentModalDesigns.innerHTML = `<p class=\"text-sm text-gray-500 col-span-full\">${window.crochetTranslations.step2_save_error}<\/p>`;\n        } else {\n            savedDesigns.forEach(design => {\n                const thumb = document.createElement('div');\n                thumb.className = 'relative w-20 h-20 rounded-lg overflow-hidden border-2 border-transparent design-assignment-thumbnail';\n                thumb.dataset.designId = design.id;\n                thumb.innerHTML = createMiniPreviewHTML(design);\n\n                if (isEditing && assignment.designId === design.id) {\n                    thumb.classList.add('selected-design');\n                }\n\n                thumb.addEventListener('click', () => {\n                    assignmentModalDesigns.querySelectorAll('.design-assignment-thumbnail').forEach(t => t.classList.remove('selected-design'));\n                    thumb.classList.add('selected-design');\n                });\n                assignmentModalDesigns.appendChild(thumb);\n            });\n        }\n\n        assignmentModalQuantity.value = isEditing ? assignment.quantity : 1;\n\n        const sampleYesRadio = document.getElementById('modal-sample-yes');\n        const sampleNoRadio = document.getElementById('modal-sample-no');\n        const quantityLabel = document.getElementById('quantity-label');\n\n        const updateLabel = () => {\n            if (sampleYesRadio.checked) {\n                quantityLabel.textContent = window.crochetTranslations.modal_qty_samples;\n            } else {\n                quantityLabel.textContent = window.crochetTranslations.modal_qty_units;\n            }\n        };\n\n        sampleYesRadio.onchange = updateLabel;\n        sampleNoRadio.onchange = updateLabel;\n\n        const isSample = isEditing && (assignment.assignmentId === orderData.sampleAssignmentId);\n        if (isSample) {\n            sampleYesRadio.checked = true;\n        } else {\n            sampleNoRadio.checked = true;\n        }\n        updateLabel(); \/\/ Set initial label text\n\n        assignmentModal.classList.remove('hidden');\n        requestAnimationFrame(() => {\n            assignmentModal.classList.remove('opacity-0');\n            assignmentModal.querySelector('.modal-container').classList.remove('scale-95', 'opacity-0');\n        });\n\n        document.getElementById('assignment-modal-save').onclick = () => {\n            const selectedDesignEl = assignmentModalDesigns.querySelector('.selected-design');\n            if (!selectedDesignEl) {\n                showToast(window.crochetTranslations.select_design_error);\n                return;\n            }\n            const designId = parseInt(selectedDesignEl.dataset.designId, 10);\n            const quantity = parseInt(assignmentModalQuantity.value, 10);\n            const isSampleSelected = document.getElementById('modal-sample-yes').checked;\n\n            if (isEditing) {\n                assignment.designId = designId;\n                assignment.quantity = quantity;\n                if (isSampleSelected) {\n                    orderData.sampleAssignmentId = assignment.assignmentId;\n                } else if (orderData.sampleAssignmentId === assignment.assignmentId) {\n                    orderData.sampleAssignmentId = null;\n                }\n            } else {\n                const newAssignment = {\n                    assignmentId: generateUniqueId(),\n                    designId: designId,\n                    quantity: quantity\n                };\n                product.assignments.push(newAssignment);\n                if (isSampleSelected) {\n                    orderData.sampleAssignmentId = newAssignment.assignmentId;\n                }\n            }\n\n            closeAssignmentModal();\n            renderStep3();\n        };\n\n        document.getElementById('assignment-modal-cancel').onclick = closeAssignmentModal;\n    }\n\n    function closeAssignmentModal() {\n        assignmentModal.classList.add('opacity-0');\n        assignmentModal.querySelector('.modal-container').classList.add('scale-95', 'opacity-0');\n        setTimeout(() => {\n            assignmentModal.classList.add('hidden');\n        }, 300);\n    }\n\n\n    \/\/ --- SEND & RESULT MODAL FUNCTIONS ---\n    function openResultModal(config) {\n        resultModalTitle.textContent = config.title;\n        resultModalMessage.textContent = config.message;\n        resultModalTitle.style.color = config.isError ? 'var(--vibrant-orange)' : 'var(--dark-gray)';\n\n        resultModalClose.classList.remove('hidden'); \/\/ Always visible\n\n        if (config.showSummary) {\n            whatsappSummary.value = config.summaryText;\n            whatsappSummary.classList.remove('hidden');\n            copySummaryBtn.classList.remove('hidden');\n        } else {\n            whatsappSummary.classList.add('hidden');\n            copySummaryBtn.classList.add('hidden');\n        }\n\n        resultModal.classList.remove('hidden');\n        requestAnimationFrame(() => {\n            resultModal.classList.remove('opacity-0');\n            resultModal.querySelector('.modal-container').classList.remove('scale-95', 'opacity-0');\n        });\n    }\n\n    function closeResultModal() { resultModal.classList.add('opacity-0'); resultModal.querySelector('.modal-container').classList.add('scale-95', 'opacity-0'); setTimeout(() => { resultModal.classList.add('hidden'); showStep(1); savedDesigns = []; localStorage.removeItem('crochetDesigns'); orderData = { products: [], sampleAssignmentId: null }; renderSavedDesigns(); orderForm.reset(); }, 500); }\n\n    function generateWhatsappSummary(userInfo) {\n        let summary = `${window.crochetTranslations.whatsapp_header}\\n\\n`;\n        summary += `${window.crochetTranslations.whatsapp_customer_details}\\n`;\n        summary += `${window.crochetTranslations.name}: ${userInfo.name}\\n${window.crochetTranslations.email}: ${userInfo.email}\\n${window.crochetTranslations.phone}: ${userInfo.phone}\\n`;\n        summary += `${window.crochetTranslations.country}: ${userInfo.country}\\n${window.crochetTranslations.city}: ${userInfo.city}\\n${window.crochetTranslations.company}: ${userInfo.company}\\n`;\n        summary += `${window.crochetTranslations.position}: ${userInfo.position}\\n${window.crochetTranslations.address}: ${userInfo.shippingAddress}\\n${window.crochetTranslations.notes}: ${userInfo.notes}\\n\\n`;\n\n        summary += `${window.crochetTranslations.whatsapp_product_details}\\n`;\n        orderData.products.forEach(product => {\n            if (product.assignments.length > 0) {\n                product.assignments.forEach(assignment => {\n                    const isSample = assignment.assignmentId === orderData.sampleAssignmentId ? ` ${window.crochetTranslations.sample_label}` : '';\n                    const design = savedDesigns.find(d => d.id === assignment.designId);\n                    const designIndex = design ? savedDesigns.findIndex(d => d.id === design.id) + 1 : 'N\/A';\n                    summary += `- ${product.name} (x${assignment.quantity})${isSample} - ${window.crochetTranslations.design_label} #${designIndex}\\n`;\n                    if (design && design.colores) {\n                        const activeLayers = PATTERNS[design.pattern]?.layers || [];\n                        activeLayers.forEach(layerKey => {\n                            const colorData = design.colores[layerKey];\n                            if (colorData) {\n                                const colorCode = colorData.code ? ` (C\u00f3d. ${colorData.code})` : ''; \/\/ <-- MODIFICACI\u00d3N\n                                summary += `  - ${layerDisplayNames[layerKey] || layerKey}: ${colorData.name}${colorCode}\\n`;\n                            }\n                        });\n                    }\n                });\n            }\n        });\n\n        return summary;\n    }\n\n    async function sendOrder() {\n        const submitButton = document.getElementById('submit-order-button');\n        submitButton.disabled = true;\n        submitButton.textContent = window.crochetTranslations.sending;\n\n        const userInfo = {\n            name: document.getElementById('form-name').value, email: document.getElementById('form-email').value,\n            phone: document.getElementById('form-phone').value, country: document.getElementById('form-country').value,\n            city: document.getElementById('form-city').value, company: document.getElementById('form-company').value,\n            position: document.getElementById('form-position').value, shippingAddress: document.getElementById('form-shipping-address').value,\n            notes: document.getElementById('form-notes').value,\n        };\n\n        const summaryText = generateWhatsappSummary(userInfo);\n        const fullOrderPayload = { designs: savedDesigns, order: orderData, userInfo: userInfo };\n\n        try {\n            if (typeof crochetApiSettings === 'undefined') {\n                throw new Error('Could not connect to the server.');\n            }\n            const response = await fetch(crochetApiSettings.root + crochetApiSettings.endpoint, {\n                method: 'POST',\n                headers: { 'Content-Type': 'application\/json', 'X-WP-Nonce': crochetApiSettings.nonce },\n                body: JSON.stringify(fullOrderPayload)\n            });\n            if (!response.ok) {\n                const errorData = await response.json();\n                throw new Error(errorData.message || 'Server response error.');\n            }\n            const result = await response.json();\n            openResultModal({\n                title: window.crochetTranslations.order_sent,\n                message: (result.message || window.crochetTranslations.order_received) + '.',\n                isError: false,\n                showSummary: true,\n                summaryText: summaryText\n            });\n        } catch (error) {\n            console.error('Error sending order:', error);\n            openResultModal({\n                title: window.crochetTranslations.send_error_title,\n                message: window.crochetTranslations.send_error_msg,\n                isError: true,\n                showSummary: true,\n                summaryText: summaryText\n            });\n        } finally {\n            submitButton.disabled = false;\n            submitButton.textContent = window.crochetTranslations.request_products;\n        }\n    }\n\n\n    \/\/ --- APP INITIALIZATION ---\n    async function initCustomApp() {\n        \/\/ Clean invalid designs from localStorage and convert old format if necessary\n        savedDesigns = savedDesigns.filter(design => {\n            if (!design || !PATTERNS[design.pattern]) return false;\n            if (design.colores && typeof design.colores.color1 === 'string') {\n                const newColores = {};\n                for (const layerKey in design.colores) {\n                    const hex = design.colores[layerKey];\n                    const colorInfo = PALETTE_COLORS.find(p => p.h.toUpperCase() === hex?.toUpperCase());\n                    newColores[layerKey] = {\n                        hex: hex,\n                        name: colorInfo ? colorInfo.n : window.crochetTranslations.unknown,\n                        code: colorInfo ? colorInfo.c : 'N\/A' \/\/ <-- MODIFICACI\u00d3N (para arreglar dise\u00f1os viejos)\n                    };\n                }\n                design.colores = newColores;\n            }\n            \/\/ Asegurarse de que los dise\u00f1os existentes tengan el c\u00f3digo\n            if (design.colores && design.colores.color1 && typeof design.colores.color1.code === 'undefined') {\n                for (const layerKey in design.colores) {\n                    if (design.colores[layerKey]) {\n                        const hex = design.colores[layerKey].hex;\n                        const colorInfo = PALETTE_COLORS.find(p => p.h.toUpperCase() === hex?.toUpperCase());\n                        design.colores[layerKey].code = colorInfo ? colorInfo.c : 'N\/A';\n                    }\n                }\n            }\n            return true;\n        });\n        localStorage.setItem('crochetDesigns', JSON.stringify(savedDesigns));\n\n        renderPatternSelectors();\n        await Promise.all(Object.keys(PATTERNS).map(key => loadPattern(key)));\n\n        let initialStep = 1;\n        const urlParams = new URLSearchParams(window.location.search);\n\n        if (urlParams.has('state')) {\n            try {\n                let stateB64 = urlParams.get('state');\n                stateB64 = stateB64.replace(\/-\/g, '+').replace(\/_\/g, '\/');\n                const padding = '='.repeat((4 - stateB64.length % 4) % 4);\n                const stateJson = atob(stateB64 + padding);\n                const restoredState = JSON.parse(stateJson);\n\n                if (restoredState.order && restoredState.designs) {\n                    orderData = restoredState.order;\n                    savedDesigns = restoredState.designs;\n                    localStorage.setItem('crochetDesigns', JSON.stringify(savedDesigns));\n                    initialStep = 3;\n                }\n            } catch (e) {\n                console.error(\"Error restoring state from URL:\", e);\n                initialStep = 1;\n            }\n        }\n        \/* ==================================================\n         * NUEVO BLOQUE PARA CARGAR PRODUCTO DESDE URL\n         * ================================================== *\/\n        else if (urlParams.has('product_id')) {\n            const productIdFromUrl = urlParams.get('product_id');\n            const productInfo = PRODUCTS.find(p => p.id === productIdFromUrl);\n\n            if (productInfo) {\n                \/\/ Si el producto existe, lo agregamos a la orden\n                orderData.products = [{ id: productInfo.id, name: productInfo.name, assignments: [] }];\n                initialStep = 2; \/\/ Empezamos en el paso 2\n            } else {\n                \/\/ Si el ID del producto es inv\u00e1lido, empezamos normalmente en el paso 1\n                initialStep = 1;\n            }\n        }\n        \/* ==================================================\n         * FIN DEL NUEVO BLOQUE\n         * ================================================== *\/\n        else if (urlParams.has('pattern')) {\n            const patternFromUrl = urlParams.get('pattern');\n            if (PATTERNS[patternFromUrl]) {\n                selectedPattern = patternFromUrl;\n                PATTERNS[patternFromUrl].layers.forEach(layerKey => {\n                    if (urlParams.has(layerKey)) {\n                        currentColors[layerKey] = '#' + urlParams.get(layerKey);\n                    }\n                });\n                initialStep = 2;\n            }\n        }\n\n        showStep(initialStep);\n\n        injectSVGs();\n        redrawAllLayers(true);\n        renderSavedDesigns();\n\n        goToStep2Btn.addEventListener('click', () => {\n            saveStep1Data();\n            if (orderData.products.length === 0) {\n                showToast(window.crochetTranslations.step1_select_error);\n                return;\n            }\n            const currentUrl = new URL(window.location);\n            currentUrl.searchParams.delete('state');\n            currentUrl.searchParams.delete('pattern');\n            currentUrl.searchParams.delete('product_id'); \/\/ <-- MODIFICACI\u00d3N\n            Object.keys(currentColors).forEach(k => currentUrl.searchParams.delete(k));\n            window.history.replaceState({}, '', currentUrl);\n\n            showStep(2);\n        });\n\n        backToStep1Btn.addEventListener('click', () => showStep(1));\n\n        goToStep3Btn.addEventListener('click', () => {\n            if (savedDesigns.length === 0) {\n                showToast(window.crochetTranslations.step2_save_error);\n                return;\n            }\n            showStep(3);\n        });\n\n        backToStep2Btn.addEventListener('click', () => showStep(2));\n\n        goToStep4Btn.addEventListener('click', () => {\n            saveStep3Data();\n            let allProductsHaveAssignments = true;\n            if (orderData.products.length > 0) {\n                orderData.products.forEach(p => {\n                    if (p.assignments.length === 0) {\n                        allProductsHaveAssignments = false;\n                    }\n                });\n            } else {\n                allProductsHaveAssignments = false;\n            }\n\n            if (!allProductsHaveAssignments) {\n                showToast(window.crochetTranslations.step3_combo_error);\n                return;\n            }\n            showStep(4);\n        });\n\n        backToStep3Btn.addEventListener('click', () => showStep(3));\n\n        saveButton.addEventListener('click', saveCombination);\n        randomButton.addEventListener('click', () => {\n            const activeLayers = PATTERNS[selectedPattern].layers;\n            activeLayers.forEach(key => { currentColors[key] = getRandomColor(); });\n            redrawAllLayers();\n            showToast(window.crochetTranslations.random_toast);\n        });\n        changeBgButton.addEventListener('click', () => { currentBgIndex = (currentBgIndex + 1) % BACKGROUND_CYCLE_OPTIONS.length; redrawAllLayers(); });\n        confirmDeleteYes.addEventListener('click', () => { if (designIdToDelete !== null) { deleteCombination(designIdToDelete); } closeDeleteConfirmModal(); });\n        confirmDeleteNo.addEventListener('click', closeDeleteConfirmModal);\n\n        document.getElementById('assignment-modal-cancel').addEventListener('click', closeAssignmentModal);\n\n        orderForm.addEventListener('submit', (e) => { e.preventDefault(); sendOrder(); });\n        resultModalClose.addEventListener('click', closeResultModal);\n        copySummaryBtn.addEventListener('click', () => {\n            whatsappSummary.select();\n            document.execCommand('copy');\n            showToast(window.crochetTranslations.summary_copied);\n        });\n\n    }\n\n    document.addEventListener('DOMContentLoaded', initCustomApp);\n<\/script><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a0fc23b e-flex e-con-boxed e-con e-parent\" data-id=\"a0fc23b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6f2ef98 elementor-widget elementor-widget-hub_fancy_heading\" data-id=\"6f2ef98\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"hub_fancy_heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n\t\t<div id=\"ld-fancy-heading-6a0837b4932e3\" class=\"ld-fancy-heading pos-rel\">\n\t\t\t<p class=\"ld-fh-element d-inline-block pos-rel  lqd-highlight-classic lqd-highlight-grow-left p\"  > by raver studio<\/p>\t\t<\/div>\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>by raver studio<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_theme","meta":{"footnotes":""},"class_list":["post-18368","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nicoletta.com.py\/es\/wp-json\/wp\/v2\/pages\/18368","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nicoletta.com.py\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nicoletta.com.py\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nicoletta.com.py\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nicoletta.com.py\/es\/wp-json\/wp\/v2\/comments?post=18368"}],"version-history":[{"count":2,"href":"https:\/\/nicoletta.com.py\/es\/wp-json\/wp\/v2\/pages\/18368\/revisions"}],"predecessor-version":[{"id":18370,"href":"https:\/\/nicoletta.com.py\/es\/wp-json\/wp\/v2\/pages\/18368\/revisions\/18370"}],"wp:attachment":[{"href":"https:\/\/nicoletta.com.py\/es\/wp-json\/wp\/v2\/media?parent=18368"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}