@magicfeedback/popup-sdk 1.3.0 → 1.5.0

package/dist/react-native.js

@@ -182,7 +182,7 @@ var init_font = __esm({
 var style_default;
 var init_style = __esm({
   "src/assets/style.css"() {
-    style_default = '.magicfeedback-container {\n    width: 100%;\n}\n\n\n.magicfeedback-success-message,\n.magicfeedback-info-message,\n.magicfeedback-start-message,\n.magicfeedback-container{\n    animation-duration: 0.5s;\n    animation-name: animate-fade;\n    animation-delay: 0.25s;\n    animation-fill-mode: backwards;\n\n    font-style: normal;\n    text-align: justify;\n    font-weight: 400;\n    font-size: 1.2rem;\n    color: #475569;\n    line-height: 1.5;\n}\n\n@keyframes animate-fade {\n    0% { opacity: 0; }\n    100% { opacity: 1; }\n}\n\n.magicfeedback-form {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: center;\n    width: 100%;\n}\n.magicfeedback-questions {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: flex-start;\n    width: 100%;\n}\n\n.magicfeedback-div {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: flex-start;\n    margin-bottom: 10px;\n    width: 100%;\n}\n\n.magicfeedback-label {\n    margin-bottom: 25px;\n    margin-top: 20px;\n    font-weight: 400;\n    font-family: inherit;\n    font-size: 1.2rem;\n    color: #212529;\n    text-align: start;\n    word-wrap: break-word;\n    white-space: normal;\n\n}\n\n.magicfeedback-checkbox {\n    display: flex;\n    flex-direction: column;\n    flex-wrap: wrap;\n    width: 100%;\n}\n\n.magicfeedback-checkbox-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    margin-bottom: 5px;\n    margin-top: 5px;\n}\n\n/* Cualificado con `div`: @magicfeedback/native reutiliza la clase "magicfeedback-radio"\n   tambi\xE9n en el <input> de cada opci\xF3n (rating), y sin el tag este selector lo capturaba\n   tambi\xE9n, rompiendo su tama\xF1o (el input pasaba a display:flex; width:100%). */\ndiv.magicfeedback-radio {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    flex-wrap: wrap;\n    width: 100%;\n    margin-right: 5px;\n    padding: 5px;\n    box-sizing: border-box;\n}\n\n.magicfeedback-checkbox-container,\n.magicfeedback-radio-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    margin: 5px;\n    padding: 5px 0;\n    background-color: #fff;\n    border-radius: 5px;\n    box-shadow: 0 0 3px #ccc;\n}\n\n.deepdots-popup input::-webkit-outer-spin-button,\n.deepdots-popup input::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    -moz-appearance: textfield;\n}\n\n.magicfeedback-checkbox input[type="checkbox"] {\n    margin-right: 5px;\n    margin-left: 5px;\n    width: 20px;\n    height: 20px;\n    cursor: pointer;\n}\n\n\n.magicfeedback-checkbox label,\n.magicfeedback-radio-container label {\n    margin-left: 5px;\n    font-weight: 400;\n    font-family: inherit;\n    font-size: 16px;\n    color: #212529;\n    text-align: start;\n    width: 100%;\n}\n\n.deepdots-popup p {\n    margin-bottom: 0px;\n    font-size: 12px;\n}\n\n.deepdots-popup h2 {\n    line-height: 1.66;\n    margin: 0;\n    padding: 0;\n    font-weight: 900;\n    color: #222;\n    font-family: var(--deepdots-font, \'Montserrat\');\n    font-size: 18px;\n    text-transform: uppercase;\n    text-align: center;\n    margin-bottom: 40px;\n}\n\n/* Los controles de formulario no heredan font-family por defecto: cuando hay\n   fuente custom (clase deepdots-has-font), los forzamos a usar la del contenedor. */\n.deepdots-popup.deepdots-has-font button,\n.deepdots-popup.deepdots-has-font input,\n.deepdots-popup.deepdots-has-font textarea,\n.deepdots-popup.deepdots-has-font select {\n    font-family: var(--deepdots-font, inherit);\n}\n\n.deepdots-popup h6 {\n    margin-bottom: 1rem;\n}\n\n.deepdots-popup input[type="date"],\n.deepdots-popup input[type="text"],\n.deepdots-popup input[type="number"],\n.deepdots-popup input[type="email"],\n.deepdots-popup input[type="password"],\n.deepdots-popup textarea,\n.deepdots-popup select {\n    box-sizing: border-box;\n    padding: 10px;\n    margin: 10px 0;\n    width: 100%;\n    border: 2px solid #ccc; /* Default border color - you can customize this */\n    border-radius: 5px;\n    font-size: 18px;\n    outline: none;\n    transition: border-color 0.3s ease;\n    min-height: 50px;\n    font-family: inherit;\n    -webkit-appearance: none;\n}\n\n.deepdots-popup select {\n    background-image: linear-gradient(45deg, transparent 50%, gray 50%),\n    linear-gradient(135deg, gray 50%, transparent 50%),\n    linear-gradient(to right, #ccc, #ccc);\n    background-position: calc(100% - 20px) calc(1em + 2px),\n    calc(100% - 15px) calc(1em + 2px),\n    calc(100% - 2.5em) 0.5em;\n    background-size: 5px 5px,\n    5px 5px,\n    1px 1.5em;\n    background-repeat: no-repeat;\n}\n\n.magicfeedback-boolean-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    margin: 10px 0;\n    width: 100%;\n}\n\n.magicfeedback-boolean-container label {\n    margin-left: 10px;\n    font-weight: 400;\n    font-size: 16px;\n    width: 100%;\n    padding-top: 5px;\n}\n\n.magicfeedback-boolean-option {\n    margin-right: 10px;\n    margin-left: 10px;\n    width: 100%;\n    height: 38px;\n    border-radius: 8px;\n    font-size: 16px;\n    cursor: pointer;\n    border: 1px solid #ced4da !important;\n}\n\n.magicfeedback-boolean-option label {\n    font-weight: 400;\n    font-size: 16px;\n    color: #475569;\n    cursor: pointer;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: inherit;\n}\n\n.magicfeedback-boolean-option input[type=radio] + label:hover {\n    color: #007bff;\n}\n\n.magicfeedback-boolean-option input[type=radio]:checked + label {\n    color: #007bff;\n    background-color: #cadff8;\n}\n\n.deepdots-popup input[type="radio"] {\n    padding: 20px;\n    margin: 10px 0 10px 15px;\n    width: 40px;\n    background-color: #fff;\n    box-shadow: none;\n}\n\n/* Style for focused input/select */\n.deepdots-popup input:focus, .deepdots-popup select:focus {\n    border-color: #4CAF50; /* Highlight color when focused - you can customize this */\n}\n\n/* Style for invalid input (example: validation error) */\n.deepdots-popup input.error, .deepdots-popup select.error {\n    border-color: #ff3333; /* Red color for error state - you can customize this */\n}\n\n.magicfeedback-action-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: 10px;\n    width: 100%;\n}\n\n.magicfeedback-action-container .magicfeedback-submit {\n    cursor: pointer;\n    padding: 10px;\n    margin: 10px 0;\n    width: 100px;\n    border-radius: 8px;\n    font-size: 16px;\n    outline: none;\n    transition: border-color 0.3s ease;\n    background-color: #1E293B;\n    color: white;\n}\n\n.magicfeedback-action-container .magicfeedback-back {\n    cursor: pointer;\n    padding: 10px;\n    margin: 10px 0;\n    width: 100px;\n    border: 0;\n    border-radius: 8px;\n    font-size: 16px;\n    outline: none;\n    transition: border-color 0.3s ease;\n    background-color: transparent;\n    color: #212529;\n}\n\n\n\n/* Rating styles */\n.magicfeedback-rating {\n    width: 100%;\n}\n\n.magicfeedback-rating-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-around;\n    flex-wrap: wrap;\n    align-items: center;\n\n    margin: 15px 5px;\n    padding: 0;\n\n    list-style: none;\n    font-size: 1.5rem;\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n}\n\n.magicfeedback-rating-placeholder-value,\n.magicfeedback-rating-placeholder{\n    text-align: center;\n    align-content: center;\n    justify-content: center;\n    text-wrap: wrap;\n}\n\n.magicfeedback-rating-option {\n    margin: 0 0.5rem;\n    padding: 0;\n}\n\n@media (max-width: 1024px) {\n    .magicfeedback-rating-option {\n        margin: 10px 0;\n        padding: 0;\n        width: 20%;\n        display: flex;\n        justify-content: center;\n    }\n\n    .magicfeedback-rating-placeholder-value {\n        font-size: 0.75rem;\n        margin-bottom: 1px;\n    }\n    .magicfeedback-rating-placeholder{\n        justify-content: center;\n    }\n\n    .magicfeedback-rating-container {\n        flex-wrap: wrap;\n        justify-content: flex-start;\n    }\n}\n\n\n.magicfeedback-rating-option-label-container {\n    display: flex;\n    flex-direction: column;\n}\n\n\n.magicfeedback-rating-option-label-container label {\n    display: inline-block;\n    text-align: center;\n    margin-bottom: 0;\n    font-weight: 600;\n    font-size: 18px;\n    color: #475569;\n}\n\n.magicfeedback-rating-option-label-container input[type=radio] {\n    position: absolute;\n    opacity: 0;\n    width: 0;\n    height: 0;\n}\n\n/* IMAGE STYLES */\n.magicfeedback-rating-option-label-container input[type=radio] + img {\n    cursor: pointer;\n    height: 48px;\n    width: 48px;\n}\n\n/* LABEL STYLES */\n.magicfeedback-rating-option-label-container input[type=radio] + label {\n    cursor: pointer;\n}\n\n/* CHECKED STYLES */\n.magicfeedback-rating-option-label-container input[type=radio]:checked + img {\n    box-shadow: #007bff 0px 1px 4px, #007BFFA0 0px 0px 0px 2px;\n    border-radius: 50%;\n}\n\n.magicfeedback-rating-number {\n    width: 100%;\n}\n.magicfeedback-rating-container,\n.magicfeedback-rating-number-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n\n    margin: 15px 0;\n    padding: 0;\n\n    list-style: none;\n    font-size: 1.5rem;\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n}\n\n/* Cuando hay placeholders (Very bad / Very good), el placeholder ocupa\n   el 100% de la primera l\xEDnea y los boxes bajan a la siguiente */\n.magicfeedback-rating-number-container--with-placeholder {\n    flex-wrap: wrap;\n    align-items: flex-start;\n}\n\n.magicfeedback-rating-number-container--with-placeholder .magicfeedback-rating-placeholder {\n    width: 100%;\n    margin-bottom: 8px;\n}\n\n.magicfeedback-rating-number-container--with-placeholder .magicfeedback-rating-number-option {\n    width: auto;\n    flex: 1;\n}\n\n.magicfeedback-rating-number-option {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    margin: 5px;\n    padding: 0;\n    list-style: none;\n    font-size: 1.5rem;\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    width: 100%;\n}\n\n.magicfeedback-rating-number-option-row{\n    max-width: 100% !important;\n}\n\n.magicfeedback-rating-number-top-placeholder,\n.magicfeedback-rating-number-bottom-placeholder{\n    text-align: center !important;\n    align-content: center;\n    justify-content: center;\n    text-wrap: wrap;\n\n    font-size: 15px;\n    color: #475569;\n\n    width: 100%;\n    margin: auto;\n}\n\n@media (min-width: 650px) {\n    .magicfeedback-rating-number-option-row +.magicfeedback-rating-number-container-ltr:first-child,\n    .magicfeedback-rating-number-option-row + +.magicfeedback-rating-number-container-rtl:last-child {\n        margin-left: 0;\n        width: calc(100% - 10px);\n    }\n\n    .magicfeedback-rating-number-option-row +.magicfeedback-rating-number-container-rtl:first-child,\n    .magicfeedback-rating-number-option-row + +.magicfeedback-rating-number-container-ltr:last-child {\n        margin-right: 0;\n        width: calc(100% - 10px);\n    }\n}\n\n\n.magicfeedback-rating-number-option-label-container {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n}\n\n.magicfeedback-rating-number-option-label-container label {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin: 0 10px;\n    font-weight: 600;\n    font-size: 14px;\n    color: #475569;\n    cursor: pointer;\n    width: 100%;\n    height: 100%;\n    min-height: 50px;\n    text-align: center;\n    padding: 0;\n    border-radius: 4px;\n    border: 1px solid #ced4da;\n    background-color: rgba(246, 246, 246, 0.3);\n    transition: background-color 0.15s ease-in-out;\n}\n\n.magicfeedback-rating-number-option-label-container input[type=radio] {\n    position: absolute;\n    opacity: 0;\n    width: 0;\n    height: 0;\n}\n\n.magicfeedback-rating-number-option-label-container input[type=radio] + label {\n    cursor: pointer;\n}\n\n.magicfeedback-rating-number-option-label-container input[type=radio] + label:hover,\n.magicfeedback-rating-number-option-label-container input[type=radio]:checked + label {\n    color: #007bff;\n    border: 1px solid #007bff;\n    background-color: rgba(86, 168, 253, 0.29);\n}\n\n.magicfeedback-rating-number-container-column{\n    align-items: flex-start !important;\n}\n\n@media (max-width: 650px) {\n    .magicfeedback-rating-number-container-ltr {\n        justify-content: center;\n        flex-wrap: wrap;\n    }\n\n    .magicfeedback-rating-number-container-rtl {\n        justify-content: center;\n        flex-wrap: wrap-reverse;\n    }\n\n    .magicfeedback-rating-number-option {\n        max-width: 100%;\n        height: 55px;\n        margin: 5px 0;\n    }\n}\n\n.magicfeedback-rating-star {\n    width: 100%;\n}\n\n.magicfeedback-rating-star-container {\n    display: flex !important;\n    flex-direction: row !important;\n    justify-content: center !important;\n    align-items: center !important;\n    flex-wrap: wrap;\n    margin: 15px 5px;\n    padding: 0;\n    list-style: none;\n    font-size: 1.5rem;\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n}\n\n.magicfeedback-rating-star-option:not(:checked) > .rating__star {\n    float: right;\n    width: 1em;\n    overflow: hidden;\n    white-space: nowrap;\n    cursor: pointer;\n    font-size: 30px;\n    color: #ccc;\n    margin: 0 10px;\n}\n\n.magicfeedback-rating-star-option:not(:checked) > .rating__star:hover,\n.magicfeedback-rating-star-option:not(:checked) > .rating__star:hover ~ span {\n    color: #deb217 !important;\n}\n\n.magicfeedback-rating-star-selected {\n    color: #ffc700 !important;\n}\n\n\n/* Style for multiple choice image */\n.magicfeedback-image-option-label-container:hover {\n    cursor: pointer;\n    border: 0 !important;\n}\n\n.magicfeedback-image-option-label-container input[type=radio]:checked + img,\n.magicfeedback-image-option-label-container input[type=checkbox]:checked + img {\n    border: 1px solid #007bff !important;\n    box-shadow: 0 0 3px #007bff !important;\n}\n\n.magicfeedback-image-option-label-container input[type=radio] + img,\n.magicfeedback-image-option-label-container input[type=checkbox] + img {\n    border: 1px solid transparent !important;\n}\n\n.magicfeedback-image-option-label-container{\n    margin: 10px !important;\n    height: calc(100% - 20px) !important;\n    width: calc(100% - 20px) !important;\n}\n\n.magicfeedback-multiple-choice-image-option {\n    display: flex;\n    height: auto !important;\n    box-shadow: 0 0 3px #ccc;\n}\n\n.magicfeedback-multiple-choice-image-label {\n    font-size: 1rem;\n}\n\n.magicfeedback-consent-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    margin: 10px 0;\n    width: 100%;\n}\n\n.magicfeedback-consent-container label {\n    margin-left: 10px;\n}\n\n.magicfeedback-start-message-container {\n    /* ... add your start message container styles here ... */\n}\n\n.magicfeedback-success-message,\n.magicfeedback-info-message,\n.magicfeedback-start-message {\n    margin: 35px 5px;\n}\n\n.magicfeedback-success-message p,\n.magicfeedback-info-message p,\n.magicfeedback-start-message p {\n    font-style: normal;\n    text-align: start;\n    font-weight: 400;\n    font-size: 16px;\n    color: #475569;\n    line-height: 1.5;\n}\n\n.magicfeedback-success-message img,\n.magicfeedback-info-message img,\n.magicfeedback-start-message img {\n    width: 400px;\n    max-width: 80%;\n    height: auto;\n    margin: 10px auto;\n}\n\n.magicfeedback-counter,\n.magicfeedback-point-system-total {\n    margin: 10px 0 0 0 !important;\n    display: flex !important;\n    justify-content: right !important;\n    align-items: center !important;\n    width: 100%;\n}\n\n.magicfeedback-skip-container {\n    background-color: transparent !important;\n    border: 0 !important;\n    color: #999999FF !important;\n    padding: 0 !important;\n    margin: 0 !important;\n    cursor: pointer !important;\n    font-size: 0.5em !important;\n    font-weight: 400 !important;\n    box-shadow: 0 0 0 !important;\n\n    &:hover {\n        color: #0066ff;\n    }\n}\n\n.magicfeedback-skip-container input[type=checkbox] {\n    border-color: #999999FF !important;\n    border: 0 !important;\n    cursor: pointer !important;\n\n}\n\n.magicfeedback-multi-question-matrix,\n.magicfeedback-point-system,\n.magicfeedback-priority-list {\n    width: 100% !important;\n}\n\n.magicfeedback-multi-question-matrix-container,\n.magicfeedback-point-system-container,\n.magicfeedback-priority-list-container {\n    width: 100% !important;\n    overflow-x: auto;\n}\n\n.magicfeedback-point-system-list,\n.magicfeedback-priority-list-list,\n.magicfeedback-multi-question-matrix-table {\n    width: 100% !important;\n    padding: 0 !important;\n    overflow-x: auto;\n}\n\n.magicfeedback-multi-question-matrix {\n    position: relative !important;\n}\n\n.magicfeedback-multi-question-matrix-container {\n    overflow: auto !important;\n    padding-bottom: 10px;\n}\n\n.magicfeedback-multi-question-matrix-label{\n    text-align: left !important;\n}\n.magicfeedback-priority-list-item {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    padding: 10px 0 10px 10px;\n\n    border: 1px solid #ced4da;\n    border-radius: 5px;\n    margin: 10px 0 !important;\n}\n\n.magicfeedback-point-system-item {\n    height: 45px;\n    margin: 5px 0 !important;\n}\n\n.magicfeedback-point-system-item label,\n.magicfeedback-priority-list-item-label {\n    font-family: inherit;\n    font-size: 18px !important;\n    color: #212529;\n    text-align: start;\n    word-wrap: break-word;\n    white-space: normal;\n    padding: 0 10px 0 0;\n}\n\n.magicfeedback-point-system-input-container {\n    padding: 0 10px 0 0;\n    border-radius: 5px;\n    font-size: 14px;\n    border: 1px solid #ced4da;\n    height: 42px;\n    margin: auto 0;\n}\n\n.magicfeedback-multi-question-matrix-table thead {\n    margin-bottom: 20px;\n}\n\n.magicfeedback-multi-question-matrix-table th{\n    text-align: center;\n    font-weight: 400 !important;\n    font-size: 1rem !important;\n    padding: 0  10px !important;\n}\n\n.magicfeedback-multi-question-matrix-table th,\n.magicfeedback-multi-question-matrix-table td label,\n.magicfeedback-priority-list-arrow-up,\n.magicfeedback-priority-list-arrow-down {\n    font-style: normal !important;\n    font-weight: 400 !important;\n    font-size: 1rem !important;\n    color: #475569 !important;\n    cursor: pointer !important;\n    margin: 0 !important;\n    line-height: inherit;\n}\n\n.magicfeedback-multi-question-matrix-table tr {\n    align-items: center;\n    margin: 5px 0;\n}\n\n.magicfeedback-multi-question-matrix-row-tr{\n    border-radius: 5px;\n    margin: 10px 0 !important;\n}\n\n.magicfeedback-multi-question-matrix-row-tr:nth-child(odd) {\n    background-color: #f1f6f6; /* Light gray background for odd rows */\n}\n\n.magicfeedback-multi-question-matrix-row-tr:nth-child(even) {\n    background-color: #ffffff; /* White background for even rows */\n}\n\n.magicfeedback-multi-question-matrix-row-label {\n    text-align: left !important;\n}\n\n.magicfeedback-point-system-item span {\n    color: #475569 !important;\n}\n\n.magicfeedback-point-system-item input {\n    padding: 0;\n    margin: 0 !important;\n    width: auto !important;\n    min-width: 100px !important;\n    height: auto !important;\n    min-height: 42px;\n    cursor: pointer;\n    font-size: 14px;\n    text-align: center !important;\n}\n\n.magicfeedback-multi-question-matrix-table input {\n    margin: auto !important;\n    padding: 20px !important;\n    width: 100% !important;\n    height: 15px;\n    border: 1px solid #ced4da;\n    cursor: pointer;\n}\n\n.magicfeedback-image{\n    max-height: 400px !important;\n    height: auto !important;\n    max-width: 100% !important;\n    margin: 10px auto !important;\n}\n\n.magicfeedback-error{\n    margin-top: 5px;\n}';
+    style_default = '.magicfeedback-container {\n    width: 100%;\n}\n\n\n.magicfeedback-success-message,\n.magicfeedback-info-message,\n.magicfeedback-start-message,\n.magicfeedback-container{\n    animation-duration: 0.5s;\n    animation-name: animate-fade;\n    animation-delay: 0.25s;\n    animation-fill-mode: backwards;\n\n    font-style: normal;\n    text-align: justify;\n    font-weight: 400;\n    font-size: 1.2rem;\n    color: #475569;\n    line-height: 1.5;\n}\n\n@keyframes animate-fade {\n    0% { opacity: 0; }\n    100% { opacity: 1; }\n}\n\n.magicfeedback-form {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: center;\n    width: 100%;\n}\n.magicfeedback-questions {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: flex-start;\n    width: 100%;\n}\n\n.magicfeedback-div {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: flex-start;\n    margin-bottom: 10px;\n    width: 100%;\n}\n\n.magicfeedback-label {\n    margin-bottom: 25px;\n    margin-top: 20px;\n    font-weight: 400;\n    font-family: inherit;\n    font-size: 1.2rem;\n    color: #212529;\n    text-align: start;\n    word-wrap: break-word;\n    white-space: normal;\n\n}\n\n.magicfeedback-checkbox {\n    display: flex;\n    flex-direction: column;\n    flex-wrap: wrap;\n    width: 100%;\n}\n\n.magicfeedback-checkbox-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    margin-bottom: 5px;\n    margin-top: 5px;\n}\n\n/* Cualificado con `div`: @magicfeedback/native reutiliza la clase "magicfeedback-radio"\n   tambi\xE9n en el <input> de cada opci\xF3n (rating), y sin el tag este selector lo capturaba\n   tambi\xE9n, rompiendo su tama\xF1o (el input pasaba a display:flex; width:100%). */\ndiv.magicfeedback-radio {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    flex-wrap: wrap;\n    width: 100%;\n    margin-right: 5px;\n    padding: 5px;\n    box-sizing: border-box;\n}\n\n.magicfeedback-checkbox-container,\n.magicfeedback-radio-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    margin: 5px;\n    padding: 5px 0;\n    background-color: #fff;\n    border-radius: 5px;\n    box-shadow: 0 0 3px #ccc;\n}\n\n.deepdots-popup input::-webkit-outer-spin-button,\n.deepdots-popup input::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    -moz-appearance: textfield;\n}\n\n.magicfeedback-checkbox input[type="checkbox"] {\n    margin-right: 5px;\n    margin-left: 5px;\n    width: 20px;\n    height: 20px;\n    cursor: pointer;\n}\n\n\n.magicfeedback-checkbox label,\n.magicfeedback-radio-container label {\n    margin-left: 5px;\n    font-weight: 400;\n    font-family: inherit;\n    font-size: 16px;\n    color: #212529;\n    text-align: start;\n    width: 100%;\n}\n\n.deepdots-popup p {\n    margin-bottom: 0px;\n    font-size: 12px;\n}\n\n.deepdots-popup h2 {\n    line-height: 1.66;\n    margin: 0;\n    padding: 0;\n    font-weight: 900;\n    color: #222;\n    font-family: var(--deepdots-font, \'Montserrat\');\n    font-size: 18px;\n    text-transform: uppercase;\n    text-align: center;\n    margin-bottom: 40px;\n}\n\n/* Los controles de formulario no heredan font-family por defecto: cuando hay\n   fuente custom (clase deepdots-has-font), los forzamos a usar la del contenedor. */\n.deepdots-popup.deepdots-has-font button,\n.deepdots-popup.deepdots-has-font input,\n.deepdots-popup.deepdots-has-font textarea,\n.deepdots-popup.deepdots-has-font select {\n    font-family: var(--deepdots-font, inherit);\n}\n\n.deepdots-popup h6 {\n    margin-bottom: 1rem;\n}\n\n.deepdots-popup input[type="date"],\n.deepdots-popup input[type="text"],\n.deepdots-popup input[type="number"],\n.deepdots-popup input[type="email"],\n.deepdots-popup input[type="password"],\n.deepdots-popup textarea,\n.deepdots-popup select {\n    box-sizing: border-box;\n    padding: 10px;\n    margin: 10px 0;\n    width: 100%;\n    border: 2px solid #ccc; /* Default border color - you can customize this */\n    border-radius: 5px;\n    font-size: 18px;\n    outline: none;\n    transition: border-color 0.3s ease;\n    min-height: 50px;\n    font-family: inherit;\n    -webkit-appearance: none;\n}\n\n.deepdots-popup select {\n    background-image: linear-gradient(45deg, transparent 50%, gray 50%),\n    linear-gradient(135deg, gray 50%, transparent 50%),\n    linear-gradient(to right, #ccc, #ccc);\n    background-position: calc(100% - 20px) calc(1em + 2px),\n    calc(100% - 15px) calc(1em + 2px),\n    calc(100% - 2.5em) 0.5em;\n    background-size: 5px 5px,\n    5px 5px,\n    1px 1.5em;\n    background-repeat: no-repeat;\n}\n\n.magicfeedback-boolean-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    margin: 10px 0;\n    width: 100%;\n}\n\n.magicfeedback-boolean-container label {\n    margin-left: 10px;\n    font-weight: 400;\n    font-size: 16px;\n    width: 100%;\n    padding-top: 5px;\n}\n\n.magicfeedback-boolean-option {\n    margin-right: 10px;\n    margin-left: 10px;\n    width: 100%;\n    height: 38px;\n    border-radius: 8px;\n    font-size: 16px;\n    cursor: pointer;\n    border: 1px solid #ced4da !important;\n}\n\n.magicfeedback-boolean-option label {\n    font-weight: 400;\n    font-size: 16px;\n    color: #475569;\n    cursor: pointer;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: inherit;\n}\n\n.magicfeedback-boolean-option input[type=radio] + label:hover {\n    color: #007bff;\n}\n\n.magicfeedback-boolean-option input[type=radio]:checked + label {\n    color: #007bff;\n    background-color: #cadff8;\n}\n\n/* Tama\xF1o expl\xEDcito y sin padding: un radio nativo con `padding: 20px` y solo `width` (sin\n   `height`) se dibujaba enorme en WebKit, que s\xED aplica el padding al control. Se ve\xEDa en\n   iOS (WebView de React Native y Safari) y no en Chrome. `flex: 0 0 auto` evita que el\n   contenedor flex de la opci\xF3n lo estire. */\n.deepdots-popup input[type="radio"] {\n    padding: 0;\n    margin: 10px 0 10px 15px;\n    width: 20px;\n    height: 20px;\n    min-width: 20px;\n    flex: 0 0 auto;\n    background-color: #fff;\n    box-shadow: none;\n}\n\n/* Style for focused input/select */\n.deepdots-popup input:focus, .deepdots-popup select:focus {\n    border-color: #4CAF50; /* Highlight color when focused - you can customize this */\n}\n\n/* Style for invalid input (example: validation error) */\n.deepdots-popup input.error, .deepdots-popup select.error {\n    border-color: #ff3333; /* Red color for error state - you can customize this */\n}\n\n.magicfeedback-action-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: 10px;\n    width: 100%;\n}\n\n.magicfeedback-action-container .magicfeedback-submit {\n    cursor: pointer;\n    padding: 10px;\n    margin: 10px 0;\n    width: 100px;\n    border-radius: 8px;\n    font-size: 16px;\n    outline: none;\n    transition: border-color 0.3s ease;\n    background-color: #1E293B;\n    color: white;\n}\n\n.magicfeedback-action-container .magicfeedback-back {\n    cursor: pointer;\n    padding: 10px;\n    margin: 10px 0;\n    width: 100px;\n    border: 0;\n    border-radius: 8px;\n    font-size: 16px;\n    outline: none;\n    transition: border-color 0.3s ease;\n    background-color: transparent;\n    color: #212529;\n}\n\n\n\n/* Rating styles */\n.magicfeedback-rating {\n    width: 100%;\n}\n\n.magicfeedback-rating-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-around;\n    flex-wrap: wrap;\n    align-items: center;\n\n    margin: 15px 5px;\n    padding: 0;\n\n    list-style: none;\n    font-size: 1.5rem;\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n}\n\n.magicfeedback-rating-placeholder-value,\n.magicfeedback-rating-placeholder{\n    text-align: center;\n    align-content: center;\n    justify-content: center;\n    text-wrap: wrap;\n}\n\n.magicfeedback-rating-option {\n    margin: 0 0.5rem;\n    padding: 0;\n}\n\n@media (max-width: 1024px) {\n    .magicfeedback-rating-option {\n        margin: 10px 0;\n        padding: 0;\n        width: 20%;\n        display: flex;\n        justify-content: center;\n    }\n\n    .magicfeedback-rating-placeholder-value {\n        font-size: 0.75rem;\n        margin-bottom: 1px;\n    }\n    .magicfeedback-rating-placeholder{\n        justify-content: center;\n    }\n\n    .magicfeedback-rating-container {\n        flex-wrap: wrap;\n        justify-content: flex-start;\n    }\n}\n\n\n.magicfeedback-rating-option-label-container {\n    display: flex;\n    flex-direction: column;\n}\n\n\n.magicfeedback-rating-option-label-container label {\n    display: inline-block;\n    text-align: center;\n    margin-bottom: 0;\n    font-weight: 600;\n    font-size: 18px;\n    color: #475569;\n}\n\n.magicfeedback-rating-option-label-container input[type=radio] {\n    position: absolute;\n    opacity: 0;\n    width: 0;\n    height: 0;\n}\n\n/* IMAGE STYLES */\n.magicfeedback-rating-option-label-container input[type=radio] + img {\n    cursor: pointer;\n    height: 48px;\n    width: 48px;\n}\n\n/* LABEL STYLES */\n.magicfeedback-rating-option-label-container input[type=radio] + label {\n    cursor: pointer;\n}\n\n/* CHECKED STYLES */\n.magicfeedback-rating-option-label-container input[type=radio]:checked + img {\n    box-shadow: #007bff 0px 1px 4px, #007BFFA0 0px 0px 0px 2px;\n    border-radius: 50%;\n}\n\n.magicfeedback-rating-number {\n    width: 100%;\n}\n.magicfeedback-rating-container,\n.magicfeedback-rating-number-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n\n    margin: 15px 0;\n    padding: 0;\n\n    list-style: none;\n    font-size: 1.5rem;\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n}\n\n/* Cuando hay placeholders (Very bad / Very good), el placeholder ocupa\n   el 100% de la primera l\xEDnea y los boxes bajan a la siguiente */\n.magicfeedback-rating-number-container--with-placeholder {\n    flex-wrap: wrap;\n    align-items: flex-start;\n}\n\n.magicfeedback-rating-number-container--with-placeholder .magicfeedback-rating-placeholder {\n    width: 100%;\n    margin-bottom: 8px;\n}\n\n.magicfeedback-rating-number-container--with-placeholder .magicfeedback-rating-number-option {\n    width: auto;\n    flex: 1;\n}\n\n.magicfeedback-rating-number-option {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    margin: 5px;\n    padding: 0;\n    list-style: none;\n    font-size: 1.5rem;\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    width: 100%;\n}\n\n.magicfeedback-rating-number-option-row{\n    max-width: 100% !important;\n}\n\n.magicfeedback-rating-number-top-placeholder,\n.magicfeedback-rating-number-bottom-placeholder{\n    text-align: center !important;\n    align-content: center;\n    justify-content: center;\n    text-wrap: wrap;\n\n    font-size: 15px;\n    color: #475569;\n\n    width: 100%;\n    margin: auto;\n}\n\n@media (min-width: 650px) {\n    .magicfeedback-rating-number-option-row +.magicfeedback-rating-number-container-ltr:first-child,\n    .magicfeedback-rating-number-option-row + +.magicfeedback-rating-number-container-rtl:last-child {\n        margin-left: 0;\n        width: calc(100% - 10px);\n    }\n\n    .magicfeedback-rating-number-option-row +.magicfeedback-rating-number-container-rtl:first-child,\n    .magicfeedback-rating-number-option-row + +.magicfeedback-rating-number-container-ltr:last-child {\n        margin-right: 0;\n        width: calc(100% - 10px);\n    }\n}\n\n\n.magicfeedback-rating-number-option-label-container {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n}\n\n.magicfeedback-rating-number-option-label-container label {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin: 0 10px;\n    font-weight: 600;\n    font-size: 14px;\n    color: #475569;\n    cursor: pointer;\n    width: 100%;\n    height: 100%;\n    min-height: 50px;\n    text-align: center;\n    padding: 0;\n    border-radius: 4px;\n    border: 1px solid #ced4da;\n    background-color: rgba(246, 246, 246, 0.3);\n    transition: background-color 0.15s ease-in-out;\n}\n\n.magicfeedback-rating-number-option-label-container input[type=radio] {\n    position: absolute;\n    opacity: 0;\n    width: 0;\n    height: 0;\n}\n\n.magicfeedback-rating-number-option-label-container input[type=radio] + label {\n    cursor: pointer;\n}\n\n.magicfeedback-rating-number-option-label-container input[type=radio] + label:hover,\n.magicfeedback-rating-number-option-label-container input[type=radio]:checked + label {\n    color: #007bff;\n    border: 1px solid #007bff;\n    background-color: rgba(86, 168, 253, 0.29);\n}\n\n.magicfeedback-rating-number-container-column{\n    align-items: flex-start !important;\n}\n\n@media (max-width: 650px) {\n    .magicfeedback-rating-number-container-ltr {\n        justify-content: center;\n        flex-wrap: wrap;\n    }\n\n    .magicfeedback-rating-number-container-rtl {\n        justify-content: center;\n        flex-wrap: wrap-reverse;\n    }\n\n    .magicfeedback-rating-number-option {\n        max-width: 100%;\n        height: 55px;\n        margin: 5px 0;\n    }\n}\n\n.magicfeedback-rating-star {\n    width: 100%;\n}\n\n.magicfeedback-rating-star-container {\n    display: flex !important;\n    flex-direction: row !important;\n    justify-content: center !important;\n    align-items: center !important;\n    flex-wrap: wrap;\n    margin: 15px 5px;\n    padding: 0;\n    list-style: none;\n    font-size: 1.5rem;\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n}\n\n.magicfeedback-rating-star-option:not(:checked) > .rating__star {\n    float: right;\n    width: 1em;\n    overflow: hidden;\n    white-space: nowrap;\n    cursor: pointer;\n    font-size: 30px;\n    color: #ccc;\n    margin: 0 10px;\n}\n\n.magicfeedback-rating-star-option:not(:checked) > .rating__star:hover,\n.magicfeedback-rating-star-option:not(:checked) > .rating__star:hover ~ span {\n    color: #deb217 !important;\n}\n\n.magicfeedback-rating-star-selected {\n    color: #ffc700 !important;\n}\n\n\n/* Style for multiple choice image */\n.magicfeedback-image-option-label-container:hover {\n    cursor: pointer;\n    border: 0 !important;\n}\n\n.magicfeedback-image-option-label-container input[type=radio]:checked + img,\n.magicfeedback-image-option-label-container input[type=checkbox]:checked + img {\n    border: 1px solid #007bff !important;\n    box-shadow: 0 0 3px #007bff !important;\n}\n\n.magicfeedback-image-option-label-container input[type=radio] + img,\n.magicfeedback-image-option-label-container input[type=checkbox] + img {\n    border: 1px solid transparent !important;\n}\n\n.magicfeedback-image-option-label-container{\n    margin: 10px !important;\n    height: calc(100% - 20px) !important;\n    width: calc(100% - 20px) !important;\n}\n\n.magicfeedback-multiple-choice-image-option {\n    display: flex;\n    height: auto !important;\n    box-shadow: 0 0 3px #ccc;\n}\n\n.magicfeedback-multiple-choice-image-label {\n    font-size: 1rem;\n}\n\n.magicfeedback-consent-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    margin: 10px 0;\n    width: 100%;\n}\n\n.magicfeedback-consent-container label {\n    margin-left: 10px;\n}\n\n.magicfeedback-start-message-container {\n    /* ... add your start message container styles here ... */\n}\n\n.magicfeedback-success-message,\n.magicfeedback-info-message,\n.magicfeedback-start-message {\n    margin: 35px 5px;\n}\n\n.magicfeedback-success-message p,\n.magicfeedback-info-message p,\n.magicfeedback-start-message p {\n    font-style: normal;\n    text-align: start;\n    font-weight: 400;\n    font-size: 16px;\n    color: #475569;\n    line-height: 1.5;\n}\n\n.magicfeedback-success-message img,\n.magicfeedback-info-message img,\n.magicfeedback-start-message img {\n    width: 400px;\n    max-width: 80%;\n    height: auto;\n    margin: 10px auto;\n}\n\n.magicfeedback-counter,\n.magicfeedback-point-system-total {\n    margin: 10px 0 0 0 !important;\n    display: flex !important;\n    justify-content: right !important;\n    align-items: center !important;\n    width: 100%;\n}\n\n.magicfeedback-skip-container {\n    background-color: transparent !important;\n    border: 0 !important;\n    color: #999999FF !important;\n    padding: 0 !important;\n    margin: 0 !important;\n    cursor: pointer !important;\n    font-size: 0.5em !important;\n    font-weight: 400 !important;\n    box-shadow: 0 0 0 !important;\n\n    &:hover {\n        color: #0066ff;\n    }\n}\n\n.magicfeedback-skip-container input[type=checkbox] {\n    border-color: #999999FF !important;\n    border: 0 !important;\n    cursor: pointer !important;\n\n}\n\n.magicfeedback-multi-question-matrix,\n.magicfeedback-point-system,\n.magicfeedback-priority-list {\n    width: 100% !important;\n}\n\n.magicfeedback-multi-question-matrix-container,\n.magicfeedback-point-system-container,\n.magicfeedback-priority-list-container {\n    width: 100% !important;\n    overflow-x: auto;\n}\n\n.magicfeedback-point-system-list,\n.magicfeedback-priority-list-list,\n.magicfeedback-multi-question-matrix-table {\n    width: 100% !important;\n    padding: 0 !important;\n    overflow-x: auto;\n}\n\n.magicfeedback-multi-question-matrix {\n    position: relative !important;\n}\n\n.magicfeedback-multi-question-matrix-container {\n    overflow: auto !important;\n    padding-bottom: 10px;\n}\n\n.magicfeedback-multi-question-matrix-label{\n    text-align: left !important;\n}\n.magicfeedback-priority-list-item {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    padding: 10px 0 10px 10px;\n\n    border: 1px solid #ced4da;\n    border-radius: 5px;\n    margin: 10px 0 !important;\n}\n\n.magicfeedback-point-system-item {\n    height: 45px;\n    margin: 5px 0 !important;\n}\n\n.magicfeedback-point-system-item label,\n.magicfeedback-priority-list-item-label {\n    font-family: inherit;\n    font-size: 18px !important;\n    color: #212529;\n    text-align: start;\n    word-wrap: break-word;\n    white-space: normal;\n    padding: 0 10px 0 0;\n}\n\n.magicfeedback-point-system-input-container {\n    padding: 0 10px 0 0;\n    border-radius: 5px;\n    font-size: 14px;\n    border: 1px solid #ced4da;\n    height: 42px;\n    margin: auto 0;\n}\n\n.magicfeedback-multi-question-matrix-table thead {\n    margin-bottom: 20px;\n}\n\n.magicfeedback-multi-question-matrix-table th{\n    text-align: center;\n    font-weight: 400 !important;\n    font-size: 1rem !important;\n    padding: 0  10px !important;\n}\n\n.magicfeedback-multi-question-matrix-table th,\n.magicfeedback-multi-question-matrix-table td label,\n.magicfeedback-priority-list-arrow-up,\n.magicfeedback-priority-list-arrow-down {\n    font-style: normal !important;\n    font-weight: 400 !important;\n    font-size: 1rem !important;\n    color: #475569 !important;\n    cursor: pointer !important;\n    margin: 0 !important;\n    line-height: inherit;\n}\n\n.magicfeedback-multi-question-matrix-table tr {\n    align-items: center;\n    margin: 5px 0;\n}\n\n.magicfeedback-multi-question-matrix-row-tr{\n    border-radius: 5px;\n    margin: 10px 0 !important;\n}\n\n.magicfeedback-multi-question-matrix-row-tr:nth-child(odd) {\n    background-color: #f1f6f6; /* Light gray background for odd rows */\n}\n\n.magicfeedback-multi-question-matrix-row-tr:nth-child(even) {\n    background-color: #ffffff; /* White background for even rows */\n}\n\n.magicfeedback-multi-question-matrix-row-label {\n    text-align: left !important;\n}\n\n.magicfeedback-point-system-item span {\n    color: #475569 !important;\n}\n\n.magicfeedback-point-system-item input {\n    padding: 0;\n    margin: 0 !important;\n    width: auto !important;\n    min-width: 100px !important;\n    height: auto !important;\n    min-height: 42px;\n    cursor: pointer;\n    font-size: 14px;\n    text-align: center !important;\n}\n\n.magicfeedback-multi-question-matrix-table input {\n    margin: auto !important;\n    padding: 20px !important;\n    width: 100% !important;\n    height: 15px;\n    border: 1px solid #ced4da;\n    cursor: pointer;\n}\n\n.magicfeedback-image{\n    max-height: 400px !important;\n    height: auto !important;\n    max-width: 100% !important;\n    margin: 10px auto !important;\n}\n\n.magicfeedback-error{\n    margin-top: 5px;\n}';
   }
 });
 
@@ -225,6 +225,10 @@ function ensureSpinnerStyles(_popup) {
   const style = document.createElement("style");
   style.id = "deepdots-spinner-styles";
   style.textContent = `
+    /* El enunciado trae margin-top:20px del CSS de surveys, que sumaba al hueco de la barra
+       de progreso y descompensaba la simetr\xEDa. Solo se anula en el primero: entre preguntas
+       de la misma p\xE1gina sigue separando. */
+    .deepdots-popup .magicfeedback-questions .magicfeedback-div:first-child .magicfeedback-label { margin-top: 0; }
     @keyframes ddspin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
     .mf-spinner { display:flex; justify-content:center; align-items:center; padding:8px 0; }
     .mf-spinner-circle { width:28px; height:28px; border:3px solid #e0e6ed; border-top-color:#1E293B; border-radius:50%; animation: ddspin 0.9s linear infinite; }
@@ -251,7 +255,9 @@ function ensureResponsiveStyles(_popup) {
       .deepdots-popup button { font-size: 16px !important; }
       .deepdots-popup-header button { width:48px; height:48px; }
       .deepdots-popup-header button svg { width:26px; height:26px; }
-      .deepdots-popup-footer { flex-direction: column-reverse !important; gap: 12px !important; }
+      /* Apilados en el orden del DOM: la acci\xF3n principal (Send/Start/Complete) arriba y
+         Back debajo. */
+      .deepdots-popup-footer { flex-direction: column !important; gap: 4px !important; }
       .deepdots-popup-footer button { width: 100%; }
     }
     @media (max-width: 400px) {
@@ -269,6 +275,18 @@ function ensureResponsiveStyles(_popup) {
   `;
   document.head.appendChild(style);
 }
+function ensureCustomCss(css) {
+  const STYLE_ID = "deepdots-custom-css";
+  const existing = document.getElementById(STYLE_ID);
+  if (!css) {
+    existing?.remove();
+    return;
+  }
+  const el = existing ?? document.createElement("style");
+  el.id = STYLE_ID;
+  if (el.textContent !== css) el.textContent = css;
+  document.head.appendChild(el);
+}
 function ensureFontFace(family, url) {
   const css = buildFontFaceCss(family, url);
   if (!css) return;
@@ -281,9 +299,11 @@ function ensureFontFace(family, url) {
   }
   if (el.textContent !== css) el.textContent = css;
 }
-async function renderPopup(container, surveyId, productId, actions, emit, onClose, env = "production", userId, style, sessionId, miniService, analyticsFeedbackSessionId) {
+async function renderPopup(container, surveyId, productId, actions, emit, onClose, env = "production", userId, style, sessionId, miniService, analyticsFeedbackSessionId, options) {
   let surveyCompletedEmitted = false;
   let stylesInjected = false;
+  let pageDepth = 0;
+  let onStartPage = false;
   const isDark = style?.theme === "dark";
   const theme = {
     popupBg: isDark ? "#1e1e1e" : "#fff",
@@ -294,7 +314,9 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
     colorScheme: isDark ? "dark" : "light",
     textPrimary: isDark ? "#f0f0f0" : "#111",
     closeBtnHoverBg: isDark ? "rgba(255,255,255,0.10)" : "rgba(0,0,0,0.06)",
-    closeBtnHoverColor: isDark ? "#fff" : "#000000"
+    closeBtnHoverColor: isDark ? "#fff" : "#000000",
+    textMuted: isDark ? "#9ca3af" : "#6b7280",
+    progressTrack: isDark ? "#3f3f46" : "#e5e7eb"
   };
   const positionMap = {
     "center": { justifyContent: "center", alignItems: "center", background: "rgba(0,0,0,0.5)" },
@@ -307,6 +329,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   };
   const pos = positionMap[style?.position ?? "center"] ?? positionMap["center"];
   const popup = document.createElement("div");
+  popup.id = "dd-popup";
   popup.className = "deepdots-popup";
   popup.style.cssText = `
       position: relative;
@@ -320,6 +343,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       box-shadow: 0 4px 6px rgba(0,0,0,0.1);
       max-width: 600px;
       width: 90%;
+      max-height: 90vh;
       min-height: 200px;
     `;
   const font = style?.font;
@@ -332,8 +356,21 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   }
   const header = document.createElement("div");
   header.className = "deepdots-popup-header";
-  header.style.cssText = "display:flex; justify-content:flex-end; align-items:center; width:100%;";
+  header.style.cssText = "display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; flex:0 0 auto;";
+  const titleEl = document.createElement("h2");
+  titleEl.id = "dd-title";
+  titleEl.className = "deepdots-popup-title";
+  titleEl.style.cssText = `margin:0; font-size:17px; font-weight:600; line-height:1.3; color:${theme.textPrimary}; text-transform:none; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;`;
+  titleEl.hidden = true;
+  const setTitle = (value) => {
+    if (!value) return;
+    titleEl.textContent = value;
+    titleEl.hidden = false;
+  };
+  setTitle(options?.title);
+  header.appendChild(titleEl);
   const closeBtn = document.createElement("button");
+  closeBtn.id = "dd-close";
   closeBtn.type = "button";
   closeBtn.setAttribute("aria-label", "Close popup");
   closeBtn.innerHTML = `
@@ -370,25 +407,86 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
     emit("popup_clicked", surveyId, { action: "close_icon" });
     onClose();
   };
+  closeBtn.style.flex = "0 0 auto";
+  closeBtn.style.marginLeft = "auto";
   header.appendChild(closeBtn);
+  let progressEnabled = options?.showProgressBar === true;
+  let progressShowUnit = true;
+  let progressUnit = "fraction";
+  const progressEl = document.createElement("div");
+  progressEl.id = "dd-progress";
+  progressEl.className = "deepdots-progress";
+  progressEl.style.cssText = "display:none; flex-direction:column; gap:8px; width:100%; flex:0 0 auto; padding:16px 0; box-sizing:border-box;";
+  const progressHead = document.createElement("div");
+  progressHead.className = "deepdots-progress-head";
+  progressHead.style.cssText = "display:flex; flex-direction:row; justify-content:space-between; align-items:center; width:100%; gap:8px;";
+  const progressLabel = document.createElement("span");
+  progressLabel.id = "dd-progress-label";
+  progressLabel.style.cssText = "font-size:13px; line-height:1.2;";
+  const progressCurrent = document.createElement("span");
+  progressCurrent.id = "dd-progress-current";
+  progressCurrent.style.cssText = `font-weight:700; color:${theme.textPrimary};`;
+  const progressTotal = document.createElement("span");
+  progressTotal.id = "dd-progress-total";
+  progressTotal.style.cssText = `font-weight:400; color:${theme.textMuted};`;
+  progressLabel.appendChild(progressCurrent);
+  progressLabel.appendChild(progressTotal);
+  const progressFollowUp = document.createElement("span");
+  progressFollowUp.id = "dd-progress-followup";
+  progressFollowUp.textContent = "Follow-up";
+  progressFollowUp.style.cssText = "display:none; font-size:12px; font-weight:600; color:#fff; background:rgba(59,130,246,0.44); border-radius:999px; padding:2px 10px;";
+  progressHead.appendChild(progressLabel);
+  progressHead.appendChild(progressFollowUp);
+  const progressTrack = document.createElement("div");
+  progressTrack.className = "deepdots-progress-track";
+  progressTrack.style.cssText = `width:100%; height:4px; border-radius:999px; background:${theme.progressTrack}; overflow:hidden;`;
+  const progressBar = document.createElement("div");
+  progressBar.id = "dd-progress-bar";
+  progressBar.style.cssText = "height:100%; width:0%; background:#22C55E; border-radius:999px; transition:width 450ms ease;";
+  progressTrack.appendChild(progressBar);
+  progressEl.appendChild(progressHead);
+  progressEl.appendChild(progressTrack);
+  function updateProgress(p) {
+    const total = typeof p.total === "number" ? p.total : 0;
+    const progress = typeof p.progress === "number" ? p.progress : 0;
+    if (!progressEnabled || onStartPage || p.completed || total <= 1) {
+      progressEl.style.display = "none";
+      containerContent.style.paddingTop = "16px";
+      return;
+    }
+    progressEl.style.display = "flex";
+    containerContent.style.paddingTop = "0";
+    const current = Math.min(total, Math.max(1, progress + 1));
+    const pct = Math.min(100, Math.max(0, current / total * 100));
+    progressBar.style.width = `${pct}%`;
+    const label = Math.min(total, Math.max(1, Math.floor(progress) + 1));
+    progressLabel.style.display = progressShowUnit ? "block" : "none";
+    if (progressUnit === "percentage") {
+      progressCurrent.textContent = `${Math.round(pct)}%`;
+      progressTotal.textContent = "";
+    } else {
+      progressCurrent.textContent = `Question ${label}`;
+      progressTotal.textContent = ` of ${total}`;
+    }
+    progressFollowUp.style.display = p.followup ? "inline-block" : "none";
+  }
   ensureMagicFeedbackStyles(popup);
   ensureSpinnerStyles(popup);
   ensureResponsiveStyles(popup);
+  ensureCustomCss(options?.surveyCss);
   const containerContent = document.createElement("div");
-  containerContent.className = "deepdots-popup-container-conetent";
-  containerContent.style.cssText = `
-    display:flex; 
-    flex-direction:column; 
-    padding: 0 20px 12px 20px;
-      max-height: 80vh; /* l\xEDmite general del popup */
-      overflow: hidden; /* quita scroll del contenedor principal */
-`;
+  containerContent.id = "dd-content";
+  containerContent.className = "deepdots-popup-container-content";
+  containerContent.style.cssText = "display:flex; flex-direction:column; flex:1 1 auto; min-height:0; padding:16px 0 0 0; overflow:hidden;";
   const main = document.createElement("div");
+  main.id = "dd-main";
   main.className = "deepdots-popup-main";
-  main.style.cssText = "display:flex; flex-direction:column; width:100%; max-height:80vh; overflow-y:auto;";
+  main.style.cssText = "display:flex; flex-direction:column; width:100%; flex:1 1 auto; min-height:0; overflow-y:auto;";
   const formWrapper = document.createElement("div");
+  formWrapper.id = "dd-form-wrapper";
   formWrapper.style.cssText = "width:100%; flex: 1 1 auto;";
   const errorHint = document.createElement("div");
+  errorHint.id = "dd-error";
   errorHint.className = "deepdots-error-hint";
   errorHint.style.cssText = `
       display: none;
@@ -417,20 +515,24 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   main.appendChild(formWrapper);
   main.appendChild(errorHint);
   const footer = document.createElement("div");
+  footer.id = "dd-footer";
   footer.className = "deepdots-popup-footer";
   footer.setAttribute("data-actions-wrapper", "true");
-  footer.style.cssText = "display:flex; flex-direction: row-reverse ;justify-content:space-between; align-items:center; gap:8px; margin-top:auto; width:100%; padding-top:16px;";
+  footer.style.cssText = "display:flex; flex-direction: row-reverse ;justify-content:space-between; align-items:center; gap:4px; margin-top:auto; width:100%; padding-top:12px;";
   const backButton = document.createElement("button");
+  backButton.id = "dd-back";
+  backButton.className = "dd-nav-btn";
   backButton.textContent = actions?.back ? actions.back.label : "Back";
   backButton.style.cssText = `
       background: transparent;
-      color: #333;
-      border: 1px solid #999;
+      color: ${theme.textMuted};
+      border: none;
+      min-height: 44px;
       padding: 12px 24px;
-      border-radius: 4px;
+      border-radius: 6px;
       cursor: pointer;
-      font-size: 14px;
-      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      font-size: 15px;
+      font-weight: 600;
       transition: filter .15s ease;
       display: inline-flex;
       align-items: center;
@@ -448,15 +550,19 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
     formInstance?.back?.();
   };
   const startButton = document.createElement("button");
+  startButton.id = "dd-start";
+  startButton.className = "dd-nav-btn";
   startButton.textContent = actions?.start ? actions.start.label : "Start survey";
   startButton.style.cssText = `
       background: #1E293B;
       color: #fff;
       border: none;
+      min-height: 44px;
       padding: 12px 24px;
-      border-radius: 4px;
+      border-radius: 6px;
       cursor: pointer;
-      font-size: 14px;
+      font-size: 15px;
+      font-weight: 600;
       box-shadow: 0 2px 4px rgba(0,0,0,0.1);
       transition: filter .15s ease;
       display: inline-flex;
@@ -467,17 +573,23 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   startButton.onclick = () => {
     emit("popup_clicked", surveyId, { action: "start_survey" });
     formInstance?.startForm?.();
+    onStartPage = false;
+    updateProgress({ progress: formInstance?.progress, total: formInstance?.total });
   };
   const closeButton = document.createElement("button");
+  closeButton.id = "dd-complete";
+  closeButton.className = "dd-nav-btn";
   closeButton.textContent = actions?.complete ? actions.complete.label : "Complete survey";
   closeButton.style.cssText = `
       background: #1E293B;
       color: #fff;
       border: none;
+      min-height: 44px;
       padding: 12px 24px;
-      border-radius: 4px;
+      border-radius: 6px;
       cursor: pointer;
-      font-size: 14px;
+      font-size: 15px;
+      font-weight: 600;
       box-shadow: 0 2px 4px rgba(0,0,0,0.1);
       transition: filter .15s ease;
       display: inline-flex;
@@ -496,15 +608,19 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
     onClose();
   };
   const submitButton = document.createElement("button");
+  submitButton.id = "dd-submit";
+  submitButton.className = "dd-nav-btn";
   submitButton.textContent = actions?.accept ? actions.accept.label : "Send";
   submitButton.style.cssText = `
       background: #1E293B;
       color: #fff;
       border: none;
+      min-height: 44px;
       padding: 12px 24px;
-      border-radius: 4px;
+      border-radius: 6px;
       cursor: pointer;
-      font-size: 14px;
+      font-size: 15px;
+      font-weight: 600;
       box-shadow: 0 2px 4px rgba(0,0,0,0.1);
       transition: filter .15s ease;
       display: inline-flex;
@@ -526,8 +642,9 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   footer.appendChild(backButton);
   footer.appendChild(closeButton);
   footer.appendChild(startButton);
-  main.appendChild(footer);
   containerContent.appendChild(main);
+  footer.style.flex = "0 0 auto";
+  containerContent.appendChild(footer);
   function updateButtons(state) {
     backButton.style.display = "none";
     startButton.style.display = "none";
@@ -564,7 +681,27 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
         break;
     }
   }
+  function updateNavButtons() {
+    updateButtons(pageDepth > 0 ? "in_progress_next" : "in_progress_first");
+  }
+  let successMessageHtml = "";
+  function showSuccessScreen() {
+    progressEl.style.display = "none";
+    formWrapper.style.display = "none";
+    let done = main.querySelector(".deepdots-success");
+    if (!done) {
+      done = document.createElement("div");
+      done.className = "deepdots-success";
+      done.style.cssText = `width:100%; text-align:center; padding:24px 0; color:${theme.textPrimary};`;
+      main.insertBefore(done, errorHint);
+    }
+    done.innerHTML = successMessageHtml || "<p>Thank you for your feedback!</p>";
+    done.querySelectorAll("img").forEach((img) => {
+      img.style.cssText = "max-width:100%; height:auto; margin:0 auto 16px auto; display:block;";
+    });
+  }
   popup.appendChild(header);
+  popup.appendChild(progressEl);
   popup.appendChild(containerContent);
   container.innerHTML = "";
   container.appendChild(popup);
@@ -610,15 +747,27 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
     formInstance = import_native.default.form(surveyId, productId, profile, metadata);
     const generateOptions = {
       addButton: false,
-      getMetaData: true
+      getMetaData: true,
+      // La pantalla final la pinta el popup: `renderSuccess` de @magicfeedback/native usa
+      // textContent, así que el mensaje de la plataforma (HTML con imagen) no se vería, y
+      // su fallback es un literal genérico que ignora `style.successMessage`.
+      addSuccessScreen: false
     };
     generateOptions.onLoadedEvent = ({ formData }) => {
       try {
-      } catch (e) {
+      } catch {
       }
       const s = formData?.style;
       if (s && !stylesInjected) {
         stylesInjected = true;
+        if (s.successMessage) successMessageHtml = s.successMessage;
+        if (options?.showProgressBar === void 0) progressEnabled = s.showProgressBar === true;
+        if (s.showProgressUnit !== void 0) progressShowUnit = s.showProgressUnit !== false;
+        if (s.progressUnit) progressUnit = s.progressUnit;
+        if (s.loadingBarColor) {
+          progressBar.style.background = s.loadingBarColor;
+          progressFollowUp.style.background = s.loadingBarColor;
+        }
         if (s.boxBackgroundColor) {
           popup.style.background = s.boxBackgroundColor;
         }
@@ -637,9 +786,9 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
           closeButton.style.color = "#fff";
         }
         if (s.buttonSecondaryColor) {
-          backButton.style.background = "#fff";
+          backButton.style.background = "transparent";
           backButton.style.color = s.buttonSecondaryColor;
-          backButton.style.border = `1px solid ${s.buttonSecondaryColor}`;
+          backButton.style.border = "none";
         }
         if (s.logo) {
           if (!document.getElementById("deepdots-popup-logo")) {
@@ -684,6 +833,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
         }
         if (s.startMessage && s.startMessage !== "") {
           sdkLog(s.startMessage);
+          onStartPage = true;
           updateButtons("start");
         } else {
           updateButtons("in_progress_first");
@@ -691,6 +841,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       } else {
         updateButtons("in_progress_first");
       }
+      updateProgress({ progress: formInstance.progress, total: formInstance.total });
       emit("popup_clicked", surveyId, { action: "loaded" });
       setLoading(false);
     };
@@ -698,7 +849,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       setLoading(true);
       emit("popup_clicked", surveyId, { action: "before_submit" });
     };
-    generateOptions.afterSubmitEvent = ({ error, completed, total, progress }) => {
+    generateOptions.afterSubmitEvent = ({ error, completed, total, progress, followup }) => {
       const errText = error ? typeof error === "string" ? error : error.message ?? String(error) : "";
       if (errText) {
         setLoading(false);
@@ -706,7 +857,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
           errorHint.textContent = "Please answer the required question to continue.";
           errorHint.style.display = "block";
           emit("popup_clicked", surveyId, { action: "validation_error_required" });
-          updateButtons("in_progress_next");
+          updateNavButtons();
           return;
         }
         errorHint.textContent = "An error occurred while submitting. Please try again or close the popup.";
@@ -719,23 +870,21 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       if (completed) {
         emit("survey_completed", surveyId, { action: "completed" });
         surveyCompletedEmitted = true;
+        showSuccessScreen();
         updateButtons("completed");
+        updateProgress({ progress, total, completed: true });
         return;
       }
       emit("popup_clicked", surveyId, { action: "partial" });
-      if (total > 1 && progress > 0 && progress < total) {
-        updateButtons("in_progress_next");
-      } else {
-        updateButtons("in_progress_first");
-      }
+      pageDepth++;
+      updateNavButtons();
+      updateProgress({ progress, total, followup });
     };
-    generateOptions.onBackEvent = ({ progress }) => {
+    generateOptions.onBackEvent = ({ progress, error, followup }) => {
       emit("popup_clicked", surveyId, { action: "back" });
-      if (progress === 0) {
-        updateButtons("in_progress_first");
-      } else {
-        updateButtons("in_progress_next");
-      }
+      if (!error) pageDepth = Math.max(0, pageDepth - 1);
+      updateNavButtons();
+      updateProgress({ progress, total: formInstance.total, followup });
     };
     formInstance.generate(formDivId, generateOptions).catch((err) => {
       sdkError("[MagicFeedback] Error generating form:", err);
@@ -779,6 +928,10 @@ var POPUP_TRIGGER_CONDITION_STATUSES = [
 ];
 
 // src/triggers/index.ts
+function toNumericValue(value, fallback) {
+  const n = Number(value);
+  return Number.isFinite(n) ? n : fallback;
+}
 function setupTrigger(popups, trigger) {
   switch (trigger.type) {
     case "time":
@@ -799,14 +952,14 @@ function setupTrigger(popups, trigger) {
   }
 }
 function setupTimeTrigger(popups, trigger) {
-  const delay = trigger.value || 5e3;
+  const delay = toNumericValue(trigger.value, 5e3);
   setTimeout(() => {
     popups.triggerSurvey(trigger.surveyId, trigger.popupId);
   }, delay);
   popups.debug(`Time trigger set for ${delay}ms`);
 }
 function setupScrollTrigger(popups, trigger) {
-  const threshold = trigger.value || 50;
+  const threshold = toNumericValue(trigger.value, 50);
   const handler = () => {
     const scrollPercentage = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight) * 100;
     if (scrollPercentage >= threshold) {
@@ -970,14 +1123,17 @@ var POSITION_MAP = {
   "top-right": { justifyContent: "flex-end", alignItems: "flex-start", padding: "16px", background: "transparent" },
   "top-left": { justifyContent: "flex-start", alignItems: "flex-start", padding: "16px", background: "transparent" }
 };
+function jsonForScript(value) {
+  return JSON.stringify(value ?? null).replace(/</g, "\\u003C").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
+}
 function buildSurveyHtml(opts) {
   const env = opts.env === "development" ? "dev" : "prod";
   const version = opts.version ?? "2.2.4";
   const cdn = `https://cdn.jsdelivr.net/npm/@magicfeedback/native@${version}/dist/magicfeedback-sdk.browser.js`;
-  const sid = JSON.stringify(opts.surveyId);
-  const pid = JSON.stringify(opts.productId);
-  const profileJson = JSON.stringify(opts.profile ?? []);
-  const metaJson = JSON.stringify(opts.metadata ?? []);
+  const sid = jsonForScript(opts.surveyId);
+  const pid = jsonForScript(opts.productId);
+  const profileJson = jsonForScript(opts.profile ?? []);
+  const metaJson = jsonForScript(opts.metadata ?? []);
   const fontFaceCss = opts.font ? buildFontFaceCss(opts.font.family, opts.font.url) : "";
   const fontFamilyValue = opts.font ? buildFontFamilyValue(opts.font.family) : "-apple-system,system-ui,sans-serif";
   const popupClass = opts.font?.family ? "deepdots-popup deepdots-has-font" : "deepdots-popup";
@@ -985,11 +1141,29 @@ function buildSurveyHtml(opts) {
   const popupBg = isDark ? "#1e1e1e" : "#fff";
   const colorScheme = isDark ? "dark" : "light";
   const textPrimary = isDark ? "#f0f0f0" : "#111";
+  const textMuted = isDark ? "#9ca3af" : "#6b7280";
+  const trackBg = isDark ? "#3f3f46" : "#e5e7eb";
   const pos = POSITION_MAP[opts.position ?? "center"] ?? POSITION_MAP.center;
-  const backLabel = JSON.stringify(opts.actions?.back?.label ?? "Back");
-  const startLabel = JSON.stringify(opts.actions?.start?.label ?? "Start survey");
-  const completeLabel = JSON.stringify(opts.actions?.complete?.label ?? "Complete survey");
-  const submitLabel = JSON.stringify(opts.actions?.accept?.label ?? "Send");
+  const chrome = opts.chrome !== false;
+  const bodyBg = chrome ? pos.background : "transparent";
+  const bodyPadding = chrome ? pos.padding : "0";
+  const bodyDisplay = chrome ? "flex" : "block";
+  const cardBg = chrome ? popupBg : "transparent";
+  const cardShadow = chrome ? "0 4px 6px rgba(0,0,0,0.1)" : "none";
+  const cardRadius = chrome ? "8px" : "0";
+  const cardMaxWidth = chrome ? "600px" : "none";
+  const cardWidth = chrome ? "90%" : "100%";
+  const cardMinHeight = chrome ? "200px" : "0";
+  const cardHeight = chrome ? "auto" : "100%";
+  const cardMaxHeight = chrome ? "90vh" : "100%";
+  const mobileCard = chrome ? `.deepdots-popup{width:calc(100% - 24px);max-width:calc(100% - 24px);border-radius:12px;padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)) 16px}` : `.deepdots-popup{width:100%;max-width:100%;border-radius:0;padding:16px}`;
+  const titleJson = jsonForScript(opts.title ?? "");
+  const customCss = (opts.surveyCss ?? "").replace(/<\/\s*style/gi, "<\\/style");
+  const progressPref = opts.showProgressBar === void 0 ? "null" : String(opts.showProgressBar);
+  const backLabel = jsonForScript(opts.actions?.back?.label ?? "Back");
+  const startLabel = jsonForScript(opts.actions?.start?.label ?? "Start survey");
+  const completeLabel = jsonForScript(opts.actions?.complete?.label ?? "Complete survey");
+  const submitLabel = jsonForScript(opts.actions?.accept?.label ?? "Send");
   return `<!DOCTYPE html><html><head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <meta name="color-scheme" content="${colorScheme}"/>
@@ -997,57 +1171,98 @@ function buildSurveyHtml(opts) {
 ${style_default}
 ${fontFaceCss}
 html,body{margin:0;padding:0;height:100%;font-family:${fontFamilyValue}}
-body{display:flex;justify-content:${pos.justifyContent};align-items:${pos.alignItems};background:${pos.background};padding:${pos.padding};box-sizing:border-box}
-.deepdots-popup{position:relative;display:flex;flex-direction:column;justify-content:flex-start;background:${popupBg};color-scheme:${colorScheme};border-radius:8px;padding:24px;box-shadow:0 4px 6px rgba(0,0,0,0.1);max-width:600px;width:90%;min-height:200px;box-sizing:border-box}
-.deepdots-popup-header{display:flex;justify-content:flex-end;align-items:center;width:100%}
-#dd-close{background:transparent;border:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;color:${textPrimary};padding:4px}
-.deepdots-popup-container-content{display:flex;flex-direction:column;padding:0 20px 12px 20px;max-height:80vh;overflow:hidden;box-sizing:border-box}
-.deepdots-popup-main{display:flex;flex-direction:column;width:100%;max-height:80vh;overflow-y:auto;overflow-x:hidden;position:relative}
+body{display:${bodyDisplay};justify-content:${pos.justifyContent};align-items:${pos.alignItems};background:${bodyBg};padding:${bodyPadding};box-sizing:border-box}
+.deepdots-popup{position:relative;display:flex;flex-direction:column;justify-content:flex-start;background:${cardBg};color-scheme:${colorScheme};border-radius:${cardRadius};padding:24px;box-shadow:${cardShadow};max-width:${cardMaxWidth};width:${cardWidth};min-height:${cardMinHeight};height:${cardHeight};max-height:${cardMaxHeight};box-sizing:border-box}
+.deepdots-popup-header{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;flex:0 0 auto}
+/* Neutraliza la regla \`.deepdots-popup h2\` del CSS del survey (uppercase, centrado y
+   margin-bottom 40px), pensada para los enunciados y no para el t\xEDtulo de la cabecera. */
+#dd-title{margin:0;font-family:var(--deepdots-font,'Montserrat',inherit);font-size:17px;font-weight:600;line-height:1.3;color:${textPrimary};text-transform:none;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+#dd-close{background:transparent;border:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;color:${textPrimary};padding:4px;flex:0 0 auto;margin-left:auto}
+/* Progreso alineado con la cabecera: sin padding horizontal propio, lo marca la tarjeta.
+   El vertical es el mismo arriba y abajo, y del mismo valor que el padding de la tarjeta. */
+.deepdots-progress{display:none;flex-direction:column;gap:8px;width:100%;flex:0 0 auto;padding:16px 0;box-sizing:border-box}
+.deepdots-progress-head{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%;gap:8px}
+#dd-progress-label{font-size:13px;line-height:1.2}
+/* "Question 1" en negrita y "of 3" en regular gris, como el mockup. */
+#dd-progress-current{font-weight:700;color:${textPrimary}}
+#dd-progress-total{font-weight:400;color:${textMuted}}
+#dd-progress-followup{display:none;font-size:12px;font-weight:600;color:#fff;background:rgba(59,130,246,0.44);border-radius:999px;padding:2px 10px}
+.deepdots-progress-track{width:100%;height:4px;border-radius:999px;background:${trackBg};overflow:hidden}
+#dd-progress-bar{height:100%;width:0%;background:#22C55E;border-radius:999px;transition:width 450ms ease}
+/* El popup es una columna: solo el bloque de preguntas hace scroll, para que el footer
+   con las acciones quede siempre visible en el borde inferior (antes viv\xEDa dentro del
+   \xE1rea scrollable y hab\xEDa que bajar hasta el final para ver "Send"). */
+/* Sin sangrado extra: el contenido se alinea con el t\xEDtulo y con la barra de progreso (antes
+   sumaba 20px a los lados sobre el padding de la tarjeta y quedaba m\xE1s adentro que la cabecera). */
+/* Sin barra de progreso, este padding-top es el que separa la cabecera de la pregunta. Con
+   barra, el JS lo pone a 0 y el hueco lo aporta el padding inferior del bloque de progreso,
+   de modo que el espacio por arriba y por abajo de la barra es id\xE9ntico. */
+.deepdots-popup-container-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;padding:16px 0 0 0;overflow:hidden;box-sizing:border-box}
+/* El enunciado trae margin-top:20px del CSS de surveys, que sumaba al hueco de la barra y
+   descompensaba la simetr\xEDa. Solo se anula en el primero: entre preguntas sigue separando. */
+.deepdots-popup .magicfeedback-questions .magicfeedback-div:first-child .magicfeedback-label{margin-top:0}
+.deepdots-popup-main{display:flex;flex-direction:column;width:100%;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;position:relative}
 #dd-form-wrapper{width:100%;flex:1 1 auto}
 #mf{width:100%;box-sizing:border-box;visibility:hidden}
 .deepdots-popup-main *{max-width:100%;box-sizing:border-box}
 #dd-logo{max-height:40px;max-width:100%;object-fit:contain}
 .deepdots-error-hint{display:none;margin:12px 0 0 0;padding:10px 12px;border-radius:6px;background:#FEF3C7;color:#92400E;border:1px solid #FCD34D;font-size:13px}
-.deepdots-popup-footer{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;width:100%;padding-top:16px}
-.dd-nav-btn{display:none;border:none;padding:12px 24px;border-radius:4px;cursor:pointer;font-size:14px;box-shadow:0 2px 4px rgba(0,0,0,0.1);align-items:center;justify-content:center;text-align:center}
-#dd-back{background:transparent;color:#333;border:1px solid #999}
+/* Pantalla final: el HTML del editor de la plataforma (imagen + texto), centrado. */
+.deepdots-success{display:none;width:100%;text-align:center;padding:24px 0;color:${textPrimary}}
+.deepdots-success img{max-width:100%;height:auto;margin:0 auto 16px auto;display:block}
+.deepdots-success p{margin:0;font-size:16px;font-weight:600;line-height:1.4}
+.deepdots-popup-footer{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:4px;margin-top:auto;width:100%;padding-top:12px}
+.dd-nav-btn{display:none;border:none;min-height:44px;padding:12px 24px;border-radius:6px;cursor:pointer;font-size:15px;font-weight:600;align-items:center;justify-content:center;text-align:center}
+/* Secundario como bot\xF3n de texto: sin borde ni fondo, para que el primario sea la \xFAnica CTA. */
+#dd-back{background:transparent;color:${textMuted};border:none}
 #dd-start,#dd-complete,#dd-submit{background:#1E293B;color:#fff;border:none}
 #dd-submit:disabled,#dd-start:disabled,#dd-back:disabled,#dd-complete:disabled{opacity:0.6;cursor:not-allowed}
 .mf-spinner{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
 .mf-spinner-circle{width:28px;height:28px;border:3px solid #e0e6ed;border-top-color:#1E293B;border-radius:50%;animation:ddspin 0.9s linear infinite}
 @keyframes ddspin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
 @media (max-width:640px){
-  .deepdots-popup{width:calc(100% - 24px);max-width:calc(100% - 24px);border-radius:12px}
-  .deepdots-popup-footer{flex-direction:column-reverse;gap:12px}
+  ${mobileCard}
+  /* Apilados: la acci\xF3n principal (Send/Start/Complete) arriba y Back debajo. El orden del
+     DOM ya es ese, as\xED que \`column\` (no \`column-reverse\`) es lo que lo respeta. */
+  .deepdots-popup-footer{flex-direction:column;gap:4px}
   .dd-nav-btn{width:100%}
   .magicfeedback-checkbox-container,.magicfeedback-radio-container{margin:4px 0;padding:4px 8px}
   .magicfeedback-checkbox label,.magicfeedback-radio-container label{font-size:15px}
   .deepdots-popup input[type="radio"]{margin:6px 0 6px 8px}
   .deepdots-popup input[type="checkbox"]{width:16px;height:16px}
 }
+${customCss}
 </style>
 </head><body>
 <div class="${popupClass}" id="dd-popup">
   <div class="deepdots-popup-header">
+    <h2 id="dd-title" class="deepdots-popup-title" hidden></h2>
     <button type="button" id="dd-close" aria-label="Close popup">
       <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
     </button>
   </div>
-  <div class="deepdots-popup-container-content">
+  <div class="deepdots-progress" id="dd-progress">
+    <div class="deepdots-progress-head">
+      <span id="dd-progress-label"><span id="dd-progress-current"></span><span id="dd-progress-total"></span></span>
+      <span id="dd-progress-followup">Follow-up</span>
+    </div>
+    <div class="deepdots-progress-track"><div id="dd-progress-bar"></div></div>
+  </div>
+  <div class="deepdots-popup-container-content" id="dd-content">
     <div class="deepdots-popup-main" id="dd-main">
       <div id="dd-form-wrapper">
         <div class="mf-spinner" id="dd-spinner" role="status" aria-label="Loading survey"><div class="mf-spinner-circle"></div></div>
         <div id="mf"></div>
       </div>
       <div class="deepdots-error-hint" id="dd-error" role="alert" aria-live="polite"></div>
-      <div class="deepdots-popup-footer" id="dd-footer">
-        <button type="button" class="dd-nav-btn" id="dd-submit">Send</button>
-        <button type="button" class="dd-nav-btn" id="dd-back">Back</button>
-        <button type="button" class="dd-nav-btn" id="dd-complete">Complete survey</button>
-        <button type="button" class="dd-nav-btn" id="dd-start">Start survey</button>
-      </div>
+    </div>
+    <div class="deepdots-popup-footer" id="dd-footer">
+      <button type="button" class="dd-nav-btn" id="dd-submit">Send</button>
+      <button type="button" class="dd-nav-btn" id="dd-back">Back</button>
+      <button type="button" class="dd-nav-btn" id="dd-complete">Complete survey</button>
+      <button type="button" class="dd-nav-btn" id="dd-start">Start survey</button>
     </div>
   </div>
 </div>
@@ -1056,9 +1271,11 @@ body{display:flex;justify-content:${pos.justifyContent};align-items:${pos.alignI
   function emit(s){ try{ if(window.ReactNativeWebView){ window.ReactNativeWebView.postMessage(s); } }catch(e){} }
   function emitJSON(n,p){ try{ emit(JSON.stringify({name:n,payload:p||{}})); }catch(e){} }
   window.DeepdotsClose = function(){ emitJSON('popup_close'); };
+  var chromeOn=${chrome ? "true" : "false"};
 
   var popup=document.getElementById('dd-popup');
   var main=document.getElementById('dd-main');
+  var content=document.getElementById('dd-content');
   var footer=document.getElementById('dd-footer');
   var spinner=document.getElementById('dd-spinner');
   var formHost=document.getElementById('mf');
@@ -1067,6 +1284,58 @@ body{display:flex;justify-content:${pos.justifyContent};align-items:${pos.alignI
   var startBtn=document.getElementById('dd-start');
   var completeBtn=document.getElementById('dd-complete');
   var submitBtn=document.getElementById('dd-submit');
+  var titleEl=document.getElementById('dd-title');
+  var progressEl=document.getElementById('dd-progress');
+  var progressLabel=document.getElementById('dd-progress-label');
+  var progressCurrent=document.getElementById('dd-progress-current');
+  var progressTotal=document.getElementById('dd-progress-total');
+  var progressFollowUp=document.getElementById('dd-progress-followup');
+  var progressBar=document.getElementById('dd-progress-bar');
+
+  function setTitle(t){
+    if(!t) return;
+    titleEl.textContent=t;
+    titleEl.hidden=false;
+  }
+  setTitle(${titleJson});
+
+  // Estado de la barra de progreso. \`progressPref\` null = manda la plataforma (style).
+  var progressPref=${progressPref};
+  var progressEnabled=progressPref===true;
+  var progressShowUnit=true;
+  var progressUnit='fraction';
+  var onStartPage=false;
+
+  function updateProgress(p){
+    var total=p&&typeof p.total==='number'?p.total:0;
+    var progress=p&&typeof p.progress==='number'?p.progress:0;
+    // Solo tiene sentido con m\xE1s de una p\xE1gina, fuera de la pantalla de inicio y sin completar.
+    if(!progressEnabled||onStartPage||p&&p.completed||total<=1){
+      progressEl.style.display='none';
+      // Sin barra, el hueco cabecera\u2192pregunta lo pone el contenido.
+      content.style.paddingTop='16px';
+      return;
+    }
+    progressEl.style.display='flex';
+    // Con barra, el hueco inferior ya lo pone el bloque de progreso: no duplicarlo.
+    content.style.paddingTop='0';
+    // Espejo de LineProgressQuestion (MagicSurvey): la barra usa el valor real (las follow-up
+    // suman +0.5 y avanzan media casilla) y la etiqueta redondea hacia abajo, porque una
+    // follow-up es un paso DENTRO de la misma pregunta, no la siguiente.
+    var current=Math.min(total,Math.max(1,progress+1));
+    var pct=Math.min(100,Math.max(0,(current/total)*100));
+    progressBar.style.width=pct+'%';
+    var label=Math.min(total,Math.max(1,Math.floor(progress)+1));
+    progressLabel.style.display=progressShowUnit?'block':'none';
+    if(progressUnit==='percentage'){
+      progressCurrent.textContent=Math.round(pct)+'%';
+      progressTotal.textContent='';
+    } else {
+      progressCurrent.textContent='Question '+label;
+      progressTotal.textContent=' of '+total;
+    }
+    progressFollowUp.style.display=p&&p.followup?'inline-block':'none';
+  }
 
   backBtn.textContent=${backLabel};
   startBtn.textContent=${startLabel};
@@ -1075,7 +1344,13 @@ body{display:flex;justify-content:${pos.justifyContent};align-items:${pos.alignI
 
   document.getElementById('dd-close').onclick=function(){ emitJSON('popup_close'); };
   backBtn.onclick=function(){ if(window.DeepdotsForm && window.DeepdotsForm.back){ window.DeepdotsForm.back(); } };
-  startBtn.onclick=function(){ if(window.DeepdotsForm && window.DeepdotsForm.startForm){ window.DeepdotsForm.startForm(); } };
+  startBtn.onclick=function(){
+    if(window.DeepdotsForm && window.DeepdotsForm.startForm){
+      window.DeepdotsForm.startForm();
+      onStartPage=false;
+      updateProgress({ progress:window.DeepdotsForm.progress, total:window.DeepdotsForm.total, completed:false, followup:false });
+    }
+  };
   completeBtn.onclick=function(){ emitJSON('popup_close'); };
   var surveyCompletedEmitted=false;
   submitBtn.onclick=function(){
@@ -1083,6 +1358,36 @@ body{display:flex;justify-content:${pos.justifyContent};align-items:${pos.alignI
     if(window.DeepdotsForm && window.DeepdotsForm.send){ window.DeepdotsForm.send(); }
   };
 
+  // Mensaje final configurado en la plataforma (\`style.successMessage\`). Se guarda al cargar
+  // y se pinta al completar. Va por innerHTML porque es HTML del editor de la plataforma
+  // (imagen + texto), igual que ya hace \`renderStartMessage\` con el mensaje de inicio.
+  var successMessageHtml='';
+  function showSuccessScreen(){
+    progressEl.style.display='none';
+    var wrapper=document.getElementById('dd-form-wrapper');
+    if(wrapper){ wrapper.style.display='none'; }
+    var done=document.getElementById('dd-success');
+    if(!done){
+      done=document.createElement('div');
+      done.id='dd-success';
+      done.className='deepdots-success';
+      main.insertBefore(done, errorHint);
+    }
+    done.innerHTML=successMessageHtml || '<p>Thank you for your feedback!</p>';
+    done.style.display='block';
+  }
+
+  // Profundidad de navegaci\xF3n DENTRO del survey: +1 por p\xE1gina avanzada, -1 al volver.
+  // Sustituye a la condici\xF3n \`total>1 && progress>0 && progress<total\`, que escond\xEDa el
+  // Back siempre que la siguiente pantalla era una follow-up din\xE1mica: las follow-up no
+  // entran en el grafo (suman +0.5 al progress y no tocan el total), as\xED que un survey de
+  // una pregunta con follow-up tiene total=1 y nunca cumpl\xEDa \`total>1\`.
+  var pageDepth=0;
+
+  function updateNavButtons(){
+    updateButtons(pageDepth>0?'in_progress_next':'in_progress_first');
+  }
+
   function updateButtons(state){
     backBtn.style.display='none';
     startBtn.style.display='none';
@@ -1127,11 +1432,21 @@ body{display:flex;justify-content:${pos.justifyContent};align-items:${pos.alignI
       form.generate('mf', {
         addButton:false,
         getMetaData:true,
+        // La pantalla final la pinta el popup: renderSuccess de @magicfeedback/native usa
+        // textContent, as\xED que el mensaje de la plataforma (HTML con imagen) no se ver\xEDa, y su
+        // fallback es un literal gen\xE9rico que ignora style.successMessage.
+        addSuccessScreen:false,
         onLoadedEvent:function(args){
           var s=args && args.formData ? args.formData.style : null;
           if(s && !stylesInjected){
             stylesInjected=true;
-            if(s.boxBackgroundColor){ popup.style.background=s.boxBackgroundColor; }
+            if(s.successMessage){ successMessageHtml=s.successMessage; }
+            // La barra de progreso la decide el host (init) y, si no se pronuncia, la plataforma.
+            if(progressPref===null){ progressEnabled=s.showProgressBar===true; }
+            if(s.showProgressUnit!==undefined){ progressShowUnit=s.showProgressUnit!==false; }
+            if(s.progressUnit){ progressUnit=s.progressUnit; }
+            if(s.loadingBarColor){ progressBar.style.background=s.loadingBarColor; progressFollowUp.style.background=s.loadingBarColor; }
+            if(chromeOn && s.boxBackgroundColor){ popup.style.background=s.boxBackgroundColor; }
             if(s.contentAlign){ main.style.justifyContent = s.contentAlign==='center' ? 'center' : 'flex-start'; }
             if(s.buttonPrimaryColor){
               submitBtn.style.background=s.buttonPrimaryColor; submitBtn.style.border='none'; submitBtn.style.color='#fff';
@@ -1139,7 +1454,8 @@ body{display:flex;justify-content:${pos.justifyContent};align-items:${pos.alignI
               completeBtn.style.background=s.buttonPrimaryColor; completeBtn.style.border='none'; completeBtn.style.color='#fff';
             }
             if(s.buttonSecondaryColor){
-              backBtn.style.background='#fff'; backBtn.style.color=s.buttonSecondaryColor; backBtn.style.border='1px solid '+s.buttonSecondaryColor;
+              // Bot\xF3n de texto: solo ti\xF1e la etiqueta, sin recuperar fondo ni borde.
+              backBtn.style.background='transparent'; backBtn.style.color=s.buttonSecondaryColor; backBtn.style.border='none';
             }
             if(s.logo && !document.getElementById('dd-logo')){
               var logoImg=document.createElement('img');
@@ -1152,11 +1468,13 @@ body{display:flex;justify-content:${pos.justifyContent};align-items:${pos.alignI
               else if(s.logoPosition==='center'){ logoImg.style.margin='0 auto 20px auto'; logoImg.style.display='block'; }
               main.insertBefore(logoImg, document.getElementById('dd-form-wrapper'));
             }
-            if(s.startMessage && s.startMessage!==''){ updateButtons('start'); }
+            if(s.startMessage && s.startMessage!==''){ onStartPage=true; updateButtons('start'); }
             else { updateButtons('in_progress_first'); }
           } else {
             updateButtons('in_progress_first');
           }
+          // El total solo se conoce una vez montado el form; sin \xE9l no hay barra que pintar.
+          updateProgress({ progress:form.progress, total:form.total, completed:false, followup:false });
           emitJSON('loaded');
           setLoading(false);
         },
@@ -1169,9 +1487,10 @@ body{display:flex;justify-content:${pos.justifyContent};align-items:${pos.alignI
           if(error){
             setLoading(false);
             if(error.toLowerCase().indexOf('no response')!==-1){
+              // La p\xE1gina no ha cambiado: el estado de navegaci\xF3n se queda como estaba.
               errorHint.textContent='Please answer the required question to continue.';
               errorHint.style.display='block';
-              updateButtons('in_progress_next');
+              updateNavButtons();
               return;
             }
             errorHint.textContent='An error occurred while submitting. Please try again or close the popup.';
@@ -1182,17 +1501,23 @@ body{display:flex;justify-content:${pos.justifyContent};align-items:${pos.alignI
           setLoading(false);
           if(p && p.completed){
             surveyCompletedEmitted=true;
+            showSuccessScreen();
             updateButtons('completed');
+            updateProgress(p);
             emitJSON('survey_completed', p);
             return;
           }
-          if(p && p.total>1 && p.progress>0 && p.progress<p.total){ updateButtons('in_progress_next'); }
-          else { updateButtons('in_progress_first'); }
+          pageDepth++;
+          updateNavButtons();
+          updateProgress(p);
           emitJSON('after_submit', p);
         },
         onBackEvent:function(p){
-          if(p && p.progress===0){ updateButtons('in_progress_first'); }
-          else { updateButtons('in_progress_next'); }
+          // Con error ("No page found") no hubo navegaci\xF3n: la profundidad no se toca.
+          if(!(p&&p.error)){ pageDepth=Math.max(0,pageDepth-1); }
+          updateNavButtons();
+          // onBackEvent no trae \`total\`: se lee del form, que es su due\xF1o.
+          updateProgress({ progress:p&&p.progress, total:form.total, completed:false, followup:p&&p.followup });
           emitJSON('back', p);
         }
       }).catch(function(e){ setLoading(false); emit('error:init'); });
@@ -1221,7 +1546,7 @@ var ReactNativePopupRenderer = class {
   }
   init() {
   }
-  show(surveyId, productId, actions, emit, onClose, env = "production", userId, style, sessionId, miniService, analyticsFeedbackSessionId) {
+  show(surveyId, productId, actions, emit, onClose, env = "production", userId, style, sessionId, miniService, analyticsFeedbackSessionId, renderChrome, options) {
     this.emitFn = emit;
     this.onCloseFn = onClose;
     this.currentSurveyId = surveyId;
@@ -1236,7 +1561,12 @@ var ReactNativePopupRenderer = class {
       font: style?.font,
       theme: style?.theme,
       position: style?.position,
-      actions
+      actions,
+      // renderChrome:false (init) → HTML sin tarjeta/overlay: el host lo envuelve en su Modal.
+      chrome: renderChrome,
+      title: options?.title,
+      showProgressBar: options?.showProgressBar,
+      surveyCss: options?.surveyCss
     });
     if (this.options.onShow) {
       this.options.onShow({ surveyId, productId, html });
@@ -1276,7 +1606,6 @@ var ReactNativePopupRenderer = class {
         break;
       case "survey_completed":
         this.emitFn("survey_completed", surveyId);
-        this.onCloseFn?.();
         break;
       case "popup_close":
         this.onCloseFn?.();
@@ -1327,14 +1656,14 @@ var BrowserPopupRenderer = class {
       document.body.appendChild(this.container);
     }
   }
-  show(surveyId, productId, actions, emit, onClose, env = "production", userId, style, sessionId, miniService, analyticsFeedbackSessionId) {
+  show(surveyId, productId, actions, emit, onClose, env = "production", userId, style, sessionId, miniService, analyticsFeedbackSessionId, _renderChrome, options) {
     if (this.visible) return;
     if (!this.container || !document.body.contains(this.container)) this.init();
     if (!this.container) return;
     this.visible = true;
     const container = this.container;
     void Promise.resolve().then(() => (init_renderPopup(), renderPopup_exports)).then(({ renderPopup: renderPopup2 }) => {
-      renderPopup2(container, surveyId, productId, actions, emit, onClose, env, userId, style, sessionId, miniService, analyticsFeedbackSessionId);
+      renderPopup2(container, surveyId, productId, actions, emit, onClose, env, userId, style, sessionId, miniService, analyticsFeedbackSessionId, options);
     });
   }
   hide() {
@@ -2188,6 +2517,12 @@ var DeepdotsPopups = class {
     this.deferredExitTimers = [];
     this.baseUrl = "";
     this.env = "production";
+    /** Si el SDK pinta el "modal" del popup (RN). Default true; false = el host lo envuelve. */
+    this.renderChrome = true;
+    /** Barra de progreso. undefined = la decide la plataforma (style.showProgressBar). */
+    this.showProgressBar = void 0;
+    /** CSS del host inyectado al final de los estilos del popup. */
+    this.surveyCss = void 0;
     /** Identidad + sesión (Fase 1 tracking). Null hasta init(). */
     this.tracking = null;
     /** Capa de analytics (canal separado del feedback). Null hasta init(). */
@@ -2238,6 +2573,9 @@ var DeepdotsPopups = class {
     const env = resolveEnvironment(config.nodeEnv);
     this.baseUrl = env.apiBaseUrl;
     this.env = config.nodeEnv || "production";
+    this.renderChrome = config.renderChrome ?? true;
+    this.showProgressBar = config.showProgressBar;
+    this.surveyCss = config.surveyCss;
     this.config = {
       apiKey: config.apiKey || void 0,
       debug: config.debug || false,
@@ -2423,6 +2761,22 @@ var DeepdotsPopups = class {
   trackFunnelStep(funnel, step, taskId, params) {
     this.track("deepdots_funnel_step", { funnel, step, task_id: taskId, ...params ?? {} });
   }
+  /**
+   * Product Effectiveness: una interacción significativa del usuario (`interaction_type` es la
+   * dimensión de agrupación, p. ej. `get_help`, `homepage`, `contact_support`).
+   *
+   * Existe como evento RESERVADO para que la convención no la invente cada host: un `track()`
+   * custom acaba como `deepdots_event_…` y no lo cuenta la analítica de effectiveness.
+   * Un `interactionType` vacío se descarta con warning (no aporta dato agrupable).
+   */
+  trackMeaningfulInteraction(interactionType, params) {
+    const type = typeof interactionType === "string" ? interactionType.trim() : "";
+    if (!type) {
+      console.warn("[DeepdotsPopups] trackMeaningfulInteraction discarded: empty interaction_type");
+      return;
+    }
+    this.track("deepdots_meaningful_interaction", { interaction_type: type, ...params ?? {} });
+  }
   /**
    * Messaging (#18–22): registra una etapa del funnel de una notificación (push/in-app).
    * No-op si tracking off. El evento se descarta (con warning) si el `channel` no es válido,
@@ -2667,7 +3021,7 @@ var DeepdotsPopups = class {
     this.log("Showing popup (definition)", def);
     this.surveyToPopupId.set(def.surveyId, def.id);
     this.lastShown.set(def.id, Date.now());
-    this.renderPopup(def.surveyId, def.productId, def.actions, def.style);
+    this.renderPopup(def.surveyId, def.productId, def.actions, def.style, def.title);
     this.emitEvent("popup_shown", def.surveyId, { popupId: def.id });
   }
   shouldShow(def, pathUrl, skipPathCheck = false) {
@@ -3005,7 +3359,7 @@ var DeepdotsPopups = class {
     document.body.appendChild(this.popupContainer);
   }
   /** Render the popup UI */
-  renderPopup(surveyId, productId, actions, style) {
+  renderPopup(surveyId, productId, actions, style, title) {
     const userId = this.tracking?.getUserId() ?? this.config?.userId;
     const sessionId = this.tracking?.getSessionId() ?? void 0;
     const miniService = this.analytics?.getMiniService() ?? void 0;
@@ -3023,7 +3377,9 @@ var DeepdotsPopups = class {
         style,
         sessionId,
         miniService,
-        analyticsFeedbackSessionId
+        analyticsFeedbackSessionId,
+        this.renderChrome,
+        { title, showProgressBar: this.showProgressBar, surveyCss: this.surveyCss }
       );
       return;
     }
@@ -3042,7 +3398,8 @@ var DeepdotsPopups = class {
         style,
         sessionId,
         miniService,
-        analyticsFeedbackSessionId
+        analyticsFeedbackSessionId,
+        { title, showProgressBar: this.showProgressBar, surveyCss: this.surveyCss }
       );
     });
   }