@magicfeedback/popup-sdk 1.1.8 → 1.3.0

package/dist/react-native.js

@@ -178,6 +178,14 @@ var init_font = __esm({
   }
 });
 
+// src/assets/style.css
+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}';
+  }
+});
+
 // src/util/logger.ts
 function setLogger(logger) {
   active = logger ?? console;
@@ -199,876 +207,6 @@ var init_logger = __esm({
   }
 });
 
-// src/assets/style.css
-var style_default;
-var init_style = __esm({
-  "src/assets/style.css"() {
-    style_default = `.magicfeedback-container {
-    width: 100%;
-}
-
-
-.magicfeedback-success-message,
-.magicfeedback-info-message,
-.magicfeedback-start-message,
-.magicfeedback-container{
-    animation-duration: 0.5s;
-    animation-name: animate-fade;
-    animation-delay: 0.25s;
-    animation-fill-mode: backwards;
-
-    font-style: normal;
-    text-align: justify;
-    font-weight: 400;
-    font-size: 1.2rem;
-    color: #475569;
-    line-height: 1.5;
-}
-
-@keyframes animate-fade {
-    0% { opacity: 0; }
-    100% { opacity: 1; }
-}
-
-.magicfeedback-form {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-    width: 100%;
-}
-.magicfeedback-questions {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    width: 100%;
-}
-
-.magicfeedback-div {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    margin-bottom: 10px;
-    width: 100%;
-}
-
-.magicfeedback-label {
-    margin-bottom: 25px;
-    margin-top: 20px;
-    font-weight: 400;
-    font-family: inherit;
-    font-size: 1.2rem;
-    color: #212529;
-    text-align: start;
-    word-wrap: break-word;
-    white-space: normal;
-
-}
-
-.magicfeedback-checkbox {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    width: 100%;
-}
-
-.magicfeedback-checkbox-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    margin-bottom: 5px;
-    margin-top: 5px;
-}
-
-.magicfeedback-radio {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    flex-wrap: wrap;
-    width: 100%;
-    margin-right: 5px;
-    padding: 5px;
-}
-
-.magicfeedback-checkbox-container,
-.magicfeedback-radio-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    margin: 5px;
-    padding: 5px 0;
-    background-color: #fff;
-    border-radius: 5px;
-    box-shadow: 0 0 3px #ccc;
-}
-
-.deepdots-popup input::-webkit-outer-spin-button,
-.deepdots-popup input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    -moz-appearance: textfield;
-}
-
-.magicfeedback-checkbox input[type="checkbox"] {
-    margin-right: 5px;
-    margin-left: 5px;
-    width: 20px;
-    height: 20px;
-    cursor: pointer;
-}
-
-
-.magicfeedback-checkbox label,
-.magicfeedback-radio-container label {
-    margin-left: 5px;
-    font-weight: 400;
-    font-family: inherit;
-    font-size: 16px;
-    color: #212529;
-    text-align: start;
-    width: 100%;
-}
-
-.deepdots-popup p {
-    margin-bottom: 0px;
-    font-size: 12px;
-}
-
-.deepdots-popup h2 {
-    line-height: 1.66;
-    margin: 0;
-    padding: 0;
-    font-weight: 900;
-    color: #222;
-    font-family: var(--deepdots-font, 'Montserrat');
-    font-size: 18px;
-    text-transform: uppercase;
-    text-align: center;
-    margin-bottom: 40px;
-}
-
-/* Los controles de formulario no heredan font-family por defecto: cuando hay
-   fuente custom (clase deepdots-has-font), los forzamos a usar la del contenedor. */
-.deepdots-popup.deepdots-has-font button,
-.deepdots-popup.deepdots-has-font input,
-.deepdots-popup.deepdots-has-font textarea,
-.deepdots-popup.deepdots-has-font select {
-    font-family: var(--deepdots-font, inherit);
-}
-
-.deepdots-popup h6 {
-    margin-bottom: 1rem;
-}
-
-.deepdots-popup input[type="date"],
-.deepdots-popup input[type="text"],
-.deepdots-popup input[type="number"],
-.deepdots-popup input[type="email"],
-.deepdots-popup input[type="password"],
-.deepdots-popup textarea,
-.deepdots-popup select {
-    box-sizing: border-box;
-    padding: 10px;
-    margin: 10px 0;
-    width: 100%;
-    border: 2px solid #ccc; /* Default border color - you can customize this */
-    border-radius: 5px;
-    font-size: 18px;
-    outline: none;
-    transition: border-color 0.3s ease;
-    min-height: 50px;
-    font-family: inherit;
-    -webkit-appearance: none;
-}
-
-.deepdots-popup select {
-    background-image: linear-gradient(45deg, transparent 50%, gray 50%),
-    linear-gradient(135deg, gray 50%, transparent 50%),
-    linear-gradient(to right, #ccc, #ccc);
-    background-position: calc(100% - 20px) calc(1em + 2px),
-    calc(100% - 15px) calc(1em + 2px),
-    calc(100% - 2.5em) 0.5em;
-    background-size: 5px 5px,
-    5px 5px,
-    1px 1.5em;
-    background-repeat: no-repeat;
-}
-
-.magicfeedback-boolean-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    margin: 10px 0;
-    width: 100%;
-}
-
-.magicfeedback-boolean-container label {
-    margin-left: 10px;
-    font-weight: 400;
-    font-size: 16px;
-    width: 100%;
-    padding-top: 5px;
-}
-
-.magicfeedback-boolean-option {
-    margin-right: 10px;
-    margin-left: 10px;
-    width: 100%;
-    height: 38px;
-    border-radius: 8px;
-    font-size: 16px;
-    cursor: pointer;
-    border: 1px solid #ced4da !important;
-}
-
-.magicfeedback-boolean-option label {
-    font-weight: 400;
-    font-size: 16px;
-    color: #475569;
-    cursor: pointer;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: inherit;
-}
-
-.magicfeedback-boolean-option input[type=radio] + label:hover {
-    color: #007bff;
-}
-
-.magicfeedback-boolean-option input[type=radio]:checked + label {
-    color: #007bff;
-    background-color: #cadff8;
-}
-
-.deepdots-popup input[type="radio"] {
-    padding: 20px;
-    margin: 10px 0 10px 15px;
-    width: 40px;
-    background-color: #fff;
-    box-shadow: none;
-}
-
-/* Style for focused input/select */
-.deepdots-popup input:focus, .deepdots-popup select:focus {
-    border-color: #4CAF50; /* Highlight color when focused - you can customize this */
-}
-
-/* Style for invalid input (example: validation error) */
-.deepdots-popup input.error, .deepdots-popup select.error {
-    border-color: #ff3333; /* Red color for error state - you can customize this */
-}
-
-.magicfeedback-action-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 10px;
-    width: 100%;
-}
-
-.magicfeedback-action-container .magicfeedback-submit {
-    cursor: pointer;
-    padding: 10px;
-    margin: 10px 0;
-    width: 100px;
-    border-radius: 8px;
-    font-size: 16px;
-    outline: none;
-    transition: border-color 0.3s ease;
-    background-color: #1E293B;
-    color: white;
-}
-
-.magicfeedback-action-container .magicfeedback-back {
-    cursor: pointer;
-    padding: 10px;
-    margin: 10px 0;
-    width: 100px;
-    border: 0;
-    border-radius: 8px;
-    font-size: 16px;
-    outline: none;
-    transition: border-color 0.3s ease;
-    background-color: transparent;
-    color: #212529;
-}
-
-
-
-/* Rating styles */
-.magicfeedback-rating {
-    width: 100%;
-}
-
-.magicfeedback-rating-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-around;
-    flex-wrap: wrap;
-    align-items: center;
-
-    margin: 15px 5px;
-    padding: 0;
-
-    list-style: none;
-    font-size: 1.5rem;
-    cursor: pointer;
-    user-select: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-}
-
-.magicfeedback-rating-placeholder-value,
-.magicfeedback-rating-placeholder{
-    text-align: center;
-    align-content: center;
-    justify-content: center;
-    text-wrap: wrap;
-}
-
-.magicfeedback-rating-option {
-    margin: 0 0.5rem;
-    padding: 0;
-}
-
-@media (max-width: 1024px) {
-    .magicfeedback-rating-option {
-        margin: 10px 0;
-        padding: 0;
-        width: 20%;
-        display: flex;
-        justify-content: center;
-    }
-
-    .magicfeedback-rating-placeholder-value {
-        font-size: 0.75rem;
-        margin-bottom: 1px;
-    }
-    .magicfeedback-rating-placeholder{
-        justify-content: center;
-    }
-
-    .magicfeedback-rating-container {
-        flex-wrap: wrap;
-        justify-content: flex-start;
-    }
-}
-
-
-.magicfeedback-rating-option-label-container {
-    display: flex;
-    flex-direction: column;
-}
-
-
-.magicfeedback-rating-option-label-container label {
-    display: inline-block;
-    text-align: center;
-    margin-bottom: 0;
-    font-weight: 600;
-    font-size: 18px;
-    color: #475569;
-}
-
-.magicfeedback-rating-option-label-container input[type=radio] {
-    position: absolute;
-    opacity: 0;
-    width: 0;
-    height: 0;
-}
-
-/* IMAGE STYLES */
-.magicfeedback-rating-option-label-container input[type=radio] + img {
-    cursor: pointer;
-    height: 48px;
-    width: 48px;
-}
-
-/* LABEL STYLES */
-.magicfeedback-rating-option-label-container input[type=radio] + label {
-    cursor: pointer;
-}
-
-/* CHECKED STYLES */
-.magicfeedback-rating-option-label-container input[type=radio]:checked + img {
-    box-shadow: #007bff 0px 1px 4px, #007BFFA0 0px 0px 0px 2px;
-    border-radius: 50%;
-}
-
-.magicfeedback-rating-number {
-    width: 100%;
-}
-.magicfeedback-rating-container,
-.magicfeedback-rating-number-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-
-    margin: 15px 0;
-    padding: 0;
-
-    list-style: none;
-    font-size: 1.5rem;
-    cursor: pointer;
-    user-select: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-}
-
-/* Cuando hay placeholders (Very bad / Very good), el placeholder ocupa
-   el 100% de la primera l\xEDnea y los boxes bajan a la siguiente */
-.magicfeedback-rating-number-container--with-placeholder {
-    flex-wrap: wrap;
-    align-items: flex-start;
-}
-
-.magicfeedback-rating-number-container--with-placeholder .magicfeedback-rating-placeholder {
-    width: 100%;
-    margin-bottom: 8px;
-}
-
-.magicfeedback-rating-number-container--with-placeholder .magicfeedback-rating-number-option {
-    width: auto;
-    flex: 1;
-}
-
-.magicfeedback-rating-number-option {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    margin: 5px;
-    padding: 0;
-    list-style: none;
-    font-size: 1.5rem;
-    cursor: pointer;
-    user-select: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    width: 100%;
-}
-
-.magicfeedback-rating-number-option-row{
-    max-width: 100% !important;
-}
-
-.magicfeedback-rating-number-top-placeholder,
-.magicfeedback-rating-number-bottom-placeholder{
-    text-align: center !important;
-    align-content: center;
-    justify-content: center;
-    text-wrap: wrap;
-
-    font-size: 15px;
-    color: #475569;
-
-    width: 100%;
-    margin: auto;
-}
-
-@media (min-width: 650px) {
-    .magicfeedback-rating-number-option-row +.magicfeedback-rating-number-container-ltr:first-child,
-    .magicfeedback-rating-number-option-row + +.magicfeedback-rating-number-container-rtl:last-child {
-        margin-left: 0;
-        width: calc(100% - 10px);
-    }
-
-    .magicfeedback-rating-number-option-row +.magicfeedback-rating-number-container-rtl:first-child,
-    .magicfeedback-rating-number-option-row + +.magicfeedback-rating-number-container-ltr:last-child {
-        margin-right: 0;
-        width: calc(100% - 10px);
-    }
-}
-
-
-.magicfeedback-rating-number-option-label-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-}
-
-.magicfeedback-rating-number-option-label-container label {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    margin: 0 10px;
-    font-weight: 600;
-    font-size: 14px;
-    color: #475569;
-    cursor: pointer;
-    width: 100%;
-    height: 100%;
-    min-height: 50px;
-    text-align: center;
-    padding: 0;
-    border-radius: 4px;
-    border: 1px solid #ced4da;
-    background-color: rgba(246, 246, 246, 0.3);
-    transition: background-color 0.15s ease-in-out;
-}
-
-.magicfeedback-rating-number-option-label-container input[type=radio] {
-    position: absolute;
-    opacity: 0;
-    width: 0;
-    height: 0;
-}
-
-.magicfeedback-rating-number-option-label-container input[type=radio] + label {
-    cursor: pointer;
-}
-
-.magicfeedback-rating-number-option-label-container input[type=radio] + label:hover,
-.magicfeedback-rating-number-option-label-container input[type=radio]:checked + label {
-    color: #007bff;
-    border: 1px solid #007bff;
-    background-color: rgba(86, 168, 253, 0.29);
-}
-
-.magicfeedback-rating-number-container-column{
-    align-items: flex-start !important;
-}
-
-@media (max-width: 650px) {
-    .magicfeedback-rating-number-container-ltr {
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .magicfeedback-rating-number-container-rtl {
-        justify-content: center;
-        flex-wrap: wrap-reverse;
-    }
-
-    .magicfeedback-rating-number-option {
-        max-width: 100%;
-        height: 55px;
-        margin: 5px 0;
-    }
-}
-
-.magicfeedback-rating-star {
-    width: 100%;
-}
-
-.magicfeedback-rating-star-container {
-    display: flex !important;
-    flex-direction: row !important;
-    justify-content: center !important;
-    align-items: center !important;
-    flex-wrap: wrap;
-    margin: 15px 5px;
-    padding: 0;
-    list-style: none;
-    font-size: 1.5rem;
-    cursor: pointer;
-    user-select: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-}
-
-.magicfeedback-rating-star-option:not(:checked) > .rating__star {
-    float: right;
-    width: 1em;
-    overflow: hidden;
-    white-space: nowrap;
-    cursor: pointer;
-    font-size: 30px;
-    color: #ccc;
-    margin: 0 10px;
-}
-
-.magicfeedback-rating-star-option:not(:checked) > .rating__star:hover,
-.magicfeedback-rating-star-option:not(:checked) > .rating__star:hover ~ span {
-    color: #deb217 !important;
-}
-
-.magicfeedback-rating-star-selected {
-    color: #ffc700 !important;
-}
-
-
-/* Style for multiple choice image */
-.magicfeedback-image-option-label-container:hover {
-    cursor: pointer;
-    border: 0 !important;
-}
-
-.magicfeedback-image-option-label-container input[type=radio]:checked + img,
-.magicfeedback-image-option-label-container input[type=checkbox]:checked + img {
-    border: 1px solid #007bff !important;
-    box-shadow: 0 0 3px #007bff !important;
-}
-
-.magicfeedback-image-option-label-container input[type=radio] + img,
-.magicfeedback-image-option-label-container input[type=checkbox] + img {
-    border: 1px solid transparent !important;
-}
-
-.magicfeedback-image-option-label-container{
-    margin: 10px !important;
-    height: calc(100% - 20px) !important;
-    width: calc(100% - 20px) !important;
-}
-
-.magicfeedback-multiple-choice-image-option {
-    display: flex;
-    height: auto !important;
-    box-shadow: 0 0 3px #ccc;
-}
-
-.magicfeedback-multiple-choice-image-label {
-    font-size: 1rem;
-}
-
-.magicfeedback-consent-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    margin: 10px 0;
-    width: 100%;
-}
-
-.magicfeedback-consent-container label {
-    margin-left: 10px;
-}
-
-.magicfeedback-start-message-container {
-    /* ... add your start message container styles here ... */
-}
-
-.magicfeedback-success-message,
-.magicfeedback-info-message,
-.magicfeedback-start-message {
-    margin: 35px 5px;
-}
-
-.magicfeedback-success-message p,
-.magicfeedback-info-message p,
-.magicfeedback-start-message p {
-    font-style: normal;
-    text-align: start;
-    font-weight: 400;
-    font-size: 16px;
-    color: #475569;
-    line-height: 1.5;
-}
-
-.magicfeedback-success-message img,
-.magicfeedback-info-message img,
-.magicfeedback-start-message img {
-    width: 400px;
-    max-width: 80%;
-    height: auto;
-    margin: 10px auto;
-}
-
-.magicfeedback-counter,
-.magicfeedback-point-system-total {
-    margin: 10px 0 0 0 !important;
-    display: flex !important;
-    justify-content: right !important;
-    align-items: center !important;
-    width: 100%;
-}
-
-.magicfeedback-skip-container {
-    background-color: transparent !important;
-    border: 0 !important;
-    color: #999999FF !important;
-    padding: 0 !important;
-    margin: 0 !important;
-    cursor: pointer !important;
-    font-size: 0.5em !important;
-    font-weight: 400 !important;
-    box-shadow: 0 0 0 !important;
-
-    &:hover {
-        color: #0066ff;
-    }
-}
-
-.magicfeedback-skip-container input[type=checkbox] {
-    border-color: #999999FF !important;
-    border: 0 !important;
-    cursor: pointer !important;
-
-}
-
-.magicfeedback-multi-question-matrix,
-.magicfeedback-point-system,
-.magicfeedback-priority-list {
-    width: 100% !important;
-}
-
-.magicfeedback-multi-question-matrix-container,
-.magicfeedback-point-system-container,
-.magicfeedback-priority-list-container {
-    width: 100% !important;
-    overflow-x: auto;
-}
-
-.magicfeedback-point-system-list,
-.magicfeedback-priority-list-list,
-.magicfeedback-multi-question-matrix-table {
-    width: 100% !important;
-    padding: 0 !important;
-    overflow-x: auto;
-}
-
-.magicfeedback-multi-question-matrix {
-    position: relative !important;
-}
-
-.magicfeedback-multi-question-matrix-container {
-    overflow: auto !important;
-    padding-bottom: 10px;
-}
-
-.magicfeedback-multi-question-matrix-label{
-    text-align: left !important;
-}
-.magicfeedback-priority-list-item {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px 0 10px 10px;
-
-    border: 1px solid #ced4da;
-    border-radius: 5px;
-    margin: 10px 0 !important;
-}
-
-.magicfeedback-point-system-item {
-    height: 45px;
-    margin: 5px 0 !important;
-}
-
-.magicfeedback-point-system-item label,
-.magicfeedback-priority-list-item-label {
-    font-family: inherit;
-    font-size: 18px !important;
-    color: #212529;
-    text-align: start;
-    word-wrap: break-word;
-    white-space: normal;
-    padding: 0 10px 0 0;
-}
-
-.magicfeedback-point-system-input-container {
-    padding: 0 10px 0 0;
-    border-radius: 5px;
-    font-size: 14px;
-    border: 1px solid #ced4da;
-    height: 42px;
-    margin: auto 0;
-}
-
-.magicfeedback-multi-question-matrix-table thead {
-    margin-bottom: 20px;
-}
-
-.magicfeedback-multi-question-matrix-table th{
-    text-align: center;
-    font-weight: 400 !important;
-    font-size: 1rem !important;
-    padding: 0  10px !important;
-}
-
-.magicfeedback-multi-question-matrix-table th,
-.magicfeedback-multi-question-matrix-table td label,
-.magicfeedback-priority-list-arrow-up,
-.magicfeedback-priority-list-arrow-down {
-    font-style: normal !important;
-    font-weight: 400 !important;
-    font-size: 1rem !important;
-    color: #475569 !important;
-    cursor: pointer !important;
-    margin: 0 !important;
-    line-height: inherit;
-}
-
-.magicfeedback-multi-question-matrix-table tr {
-    align-items: center;
-    margin: 5px 0;
-}
-
-.magicfeedback-multi-question-matrix-row-tr{
-    border-radius: 5px;
-    margin: 10px 0 !important;
-}
-
-.magicfeedback-multi-question-matrix-row-tr:nth-child(odd) {
-    background-color: #f1f6f6; /* Light gray background for odd rows */
-}
-
-.magicfeedback-multi-question-matrix-row-tr:nth-child(even) {
-    background-color: #ffffff; /* White background for even rows */
-}
-
-.magicfeedback-multi-question-matrix-row-label {
-    text-align: left !important;
-}
-
-.magicfeedback-point-system-item span {
-    color: #475569 !important;
-}
-
-.magicfeedback-point-system-item input {
-    padding: 0;
-    margin: 0 !important;
-    width: auto !important;
-    min-width: 100px !important;
-    height: auto !important;
-    min-height: 42px;
-    cursor: pointer;
-    font-size: 14px;
-    text-align: center !important;
-}
-
-.magicfeedback-multi-question-matrix-table input {
-    margin: auto !important;
-    padding: 20px !important;
-    width: 100% !important;
-    height: 15px;
-    border: 1px solid #ced4da;
-    cursor: pointer;
-}
-
-.magicfeedback-image{
-    max-height: 400px !important;
-    height: auto !important;
-    max-width: 100% !important;
-    margin: 10px auto !important;
-}
-
-.magicfeedback-error{
-    margin-top: 5px;
-}`;
-  }
-});
-
 // src/ui/renderPopup.ts
 var renderPopup_exports = {};
 __export(renderPopup_exports, {
@@ -1149,6 +287,11 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   const isDark = style?.theme === "dark";
   const theme = {
     popupBg: isDark ? "#1e1e1e" : "#fff",
+    // El popup fija su propio fondo, así que debe fijar también el esquema de color.
+    // Sin esto los controles de formulario (input/textarea/select) caen al estilo por
+    // defecto del navegador: en un host con `prefers-color-scheme: dark` se pintan
+    // oscuros con texto blanco sobre el fondo claro del popup.
+    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"
@@ -1171,6 +314,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       flex-direction: column;
       justify-content: flex-start;
       background: ${theme.popupBg};
+      color-scheme: ${theme.colorScheme};
       border-radius: 8px;
       padding: 24px;
       box-shadow: 0 4px 6px rgba(0,0,0,0.1);
@@ -1816,6 +960,16 @@ init_tracking_manager();
 
 // src/ui/surveyHtml.ts
 init_font();
+init_style();
+var POSITION_MAP = {
+  center: { justifyContent: "center", alignItems: "center", padding: "0", background: "rgba(0,0,0,0.5)" },
+  bottom: { justifyContent: "center", alignItems: "flex-end", padding: "16px", background: "transparent" },
+  "bottom-right": { justifyContent: "flex-end", alignItems: "flex-end", padding: "16px", background: "transparent" },
+  "bottom-left": { justifyContent: "flex-start", alignItems: "flex-end", padding: "16px", background: "transparent" },
+  top: { justifyContent: "center", alignItems: "flex-start", padding: "16px", background: "transparent" },
+  "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 buildSurveyHtml(opts) {
   const env = opts.env === "development" ? "dev" : "prod";
   const version = opts.version ?? "2.2.4";
@@ -1826,17 +980,141 @@ function buildSurveyHtml(opts) {
   const metaJson = JSON.stringify(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";
+  const isDark = opts.theme === "dark";
+  const popupBg = isDark ? "#1e1e1e" : "#fff";
+  const colorScheme = isDark ? "dark" : "light";
+  const textPrimary = isDark ? "#f0f0f0" : "#111";
+  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");
   return `<!DOCTYPE html><html><head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-<meta name="color-scheme" content="light"/>
-<style>${fontFaceCss}html,body{margin:0;padding:0;background:transparent;font-family:${fontFamilyValue}}#mf{width:100%;box-sizing:border-box}#mf *{max-width:100%;box-sizing:border-box}</style>
+<meta name="color-scheme" content="${colorScheme}"/>
+<style>
+${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}
+#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}
+#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}
+  .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}
+}
+</style>
 </head><body>
-<div id="mf"></div>
+<div class="${popupClass}" id="dd-popup">
+  <div class="deepdots-popup-header">
+    <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-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>
+</div>
 <script>
 (function(){
   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 popup=document.getElementById('dd-popup');
+  var main=document.getElementById('dd-main');
+  var footer=document.getElementById('dd-footer');
+  var spinner=document.getElementById('dd-spinner');
+  var formHost=document.getElementById('mf');
+  var errorHint=document.getElementById('dd-error');
+  var backBtn=document.getElementById('dd-back');
+  var startBtn=document.getElementById('dd-start');
+  var completeBtn=document.getElementById('dd-complete');
+  var submitBtn=document.getElementById('dd-submit');
+
+  backBtn.textContent=${backLabel};
+  startBtn.textContent=${startLabel};
+  completeBtn.textContent=${completeLabel};
+  submitBtn.textContent=${submitLabel};
+
+  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(); } };
+  completeBtn.onclick=function(){ emitJSON('popup_close'); };
+  var surveyCompletedEmitted=false;
+  submitBtn.onclick=function(){
+    if(surveyCompletedEmitted) return;
+    if(window.DeepdotsForm && window.DeepdotsForm.send){ window.DeepdotsForm.send(); }
+  };
+
+  function updateButtons(state){
+    backBtn.style.display='none';
+    startBtn.style.display='none';
+    submitBtn.style.display='none';
+    completeBtn.style.display='none';
+    backBtn.style.width='';
+    startBtn.style.width='';
+    submitBtn.style.width='';
+    completeBtn.style.width='';
+    if(state==='start'){
+      startBtn.style.display='inline-flex';
+      startBtn.style.width='100%';
+    } else if(state==='in_progress_first'){
+      submitBtn.style.display='inline-flex';
+    } else if(state==='in_progress_next'){
+      backBtn.style.display='inline-flex';
+      submitBtn.style.display='inline-flex';
+    } else if(state==='completed'){
+      completeBtn.style.display='inline-flex';
+      completeBtn.style.width='100%';
+    }
+  }
+
+  function setLoading(isLoading){
+    spinner.style.display=isLoading?'flex':'none';
+    if(!isLoading){ formHost.style.visibility='visible'; }
+    footer.style.display=isLoading?'none':'flex';
+    backBtn.disabled=isLoading; startBtn.disabled=isLoading; completeBtn.disabled=isLoading; submitBtn.disabled=isLoading;
+    if(isLoading){ updateButtons(null); }
+  }
+  setLoading(true);
+
   var initialized=false;
   function initMF(){
     if(initialized || !window.magicfeedback) return initialized;
@@ -1845,23 +1123,85 @@ function buildSurveyHtml(opts) {
       window.magicfeedback.init({ debug:false, env:'${env}' });
       var form = window.magicfeedback.form(${sid}, ${pid}, ${profileJson}, ${metaJson});
       window.DeepdotsForm = form;
+      var stylesInjected=false;
       form.generate('mf', {
         addButton:false,
         getMetaData:true,
-        onLoadedEvent:function(){ emitJSON('loaded'); },
-        beforeSubmitEvent:function(){ emitJSON('before_submit'); },
+        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.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';
+              startBtn.style.background=s.buttonPrimaryColor; startBtn.style.border='none'; startBtn.style.color='#fff';
+              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;
+            }
+            if(s.logo && !document.getElementById('dd-logo')){
+              var logoImg=document.createElement('img');
+              logoImg.id='dd-logo'; logoImg.src=s.logo; logoImg.alt='Logo';
+              if(s.logoSize==='small'){ logoImg.style.maxHeight='30px'; }
+              else if(s.logoSize==='medium'){ logoImg.style.maxHeight='50px'; }
+              else if(s.logoSize==='large'){ logoImg.style.maxHeight='70px'; }
+              if(s.logoPosition==='left'){ logoImg.style.margin='0 16px 20px 0'; logoImg.style.display='block'; logoImg.style.marginLeft='0'; }
+              else if(s.logoPosition==='right'){ logoImg.style.margin='0 0 20px 16px'; logoImg.style.display='block'; logoImg.style.marginLeft='auto'; }
+              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'); }
+            else { updateButtons('in_progress_first'); }
+          } else {
+            updateButtons('in_progress_first');
+          }
+          emitJSON('loaded');
+          setLoading(false);
+        },
+        beforeSubmitEvent:function(){
+          setLoading(true);
+          emitJSON('before_submit');
+        },
         afterSubmitEvent:function(p){
-          try{ if(p && p.completed){ emitJSON('survey_completed', p); } else { emitJSON('after_submit', p); } }
-          catch(e){ emitJSON('after_submit'); }
+          var error=p && p.error ? (typeof p.error==='string' ? p.error : String(p.error)) : '';
+          if(error){
+            setLoading(false);
+            if(error.toLowerCase().indexOf('no response')!==-1){
+              errorHint.textContent='Please answer the required question to continue.';
+              errorHint.style.display='block';
+              updateButtons('in_progress_next');
+              return;
+            }
+            errorHint.textContent='An error occurred while submitting. Please try again or close the popup.';
+            errorHint.style.display='block';
+            return;
+          }
+          errorHint.style.display='none';
+          setLoading(false);
+          if(p && p.completed){
+            surveyCompletedEmitted=true;
+            updateButtons('completed');
+            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'); }
+          emitJSON('after_submit', p);
         },
-        onBackEvent:function(p){ emitJSON('back', p); }
-      }).catch(function(e){ emit('error:init'); });
-    }catch(e){ emit('error:exception'); }
+        onBackEvent:function(p){
+          if(p && p.progress===0){ updateButtons('in_progress_first'); }
+          else { updateButtons('in_progress_next'); }
+          emitJSON('back', p);
+        }
+      }).catch(function(e){ setLoading(false); emit('error:init'); });
+    }catch(e){ setLoading(false); emit('error:exception'); }
     return true;
   }
   var s=document.createElement('script'); s.src=${JSON.stringify(cdn)}; s.async=true;
   s.onload=function(){ initMF(); };
-  s.onerror=function(){ emit('error:load'); };
+  s.onerror=function(){ setLoading(false); emit('error:load'); };
   document.head.appendChild(s);
   var tries=0, t=setInterval(function(){ if(initMF()||++tries>40){ clearInterval(t); } },150);
 })();
@@ -1881,18 +1221,28 @@ 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) {
     this.emitFn = emit;
     this.onCloseFn = onClose;
     this.currentSurveyId = surveyId;
     this.partialEmitted = false;
     const { profile, metadata } = buildSurveyIdentity(userId ?? null, sessionId ?? null, miniService ?? null, analyticsFeedbackSessionId ?? null);
-    const html = buildSurveyHtml({ surveyId, productId, env, profile, metadata, font: style?.font });
+    const html = buildSurveyHtml({
+      surveyId,
+      productId,
+      env,
+      profile,
+      metadata,
+      font: style?.font,
+      theme: style?.theme,
+      position: style?.position,
+      actions
+    });
     if (this.options.onShow) {
       this.options.onShow({ surveyId, productId, html });
     } else {
       sdkWarn(
-        "[Deepdots] ReactNativePopupRenderer sin onShow: pasa { onShow } a new ReactNativePopupRenderer({...}) para montar el WebView del survey."
+        "[Deepdots] ReactNativePopupRenderer has no onShow: pass { onShow } to new ReactNativePopupRenderer({...}) to mount the survey WebView."
       );
     }
   }
@@ -2010,7 +1360,7 @@ init_tracking_manager();
 // src/analytics/analytics-manager.ts
 function createDryRunSink(log = console.log) {
   return (payload) => log(
-    "[DeepdotsAnalytics] (dry-run \xB7 NO enviado \xB7 sin init.analytics) POST /sdk/feedback \u2192",
+    "[DeepdotsAnalytics] (dry-run \xB7 NOT sent \xB7 no init.analytics) POST /sdk/feedback \u2192",
     JSON.stringify(payload, null, 2)
   );
 }
@@ -2079,6 +1429,15 @@ var AnalyticsManager = class {
       this.exitMiniService(name);
     }
   }
+  /**
+   * Olvida lo que pertenecía al usuario anterior (user attributes + métricas) al cambiar de
+   * usuario. NO toca el buffer de eventos: el cierre de sesión ya lo vació con la identidad
+   * vieja, y lo que llegue después es del usuario nuevo.
+   */
+  resetUserScope() {
+    this.attributes = {};
+    this.metrics = {};
+  }
   /** Registra un evento de analítica (modelo GA: nombre + params). */
   track(name, params) {
     const current = this.getMiniService();
@@ -2166,7 +1525,7 @@ function pushKV(list, key, value) {
   if (value === void 0 || value === null || value === "") return;
   list.push({ key, value: [String(value)] });
 }
-function buildAnalyticsFeedbackBody(envelope, keys, feedbackSessionId) {
+function buildAnalyticsFeedbackBody(envelope, keys, feedbackSessionId, options) {
   const { context } = envelope;
   const profile = [];
   pushKV(profile, "external-user-id", envelope.userId);
@@ -2217,7 +1576,8 @@ function buildAnalyticsFeedbackBody(envelope, keys, feedbackSessionId) {
     },
     publicKey: keys.publicKey,
     integration: keys.integration,
-    completed: false,
+    // Único marcador de cierre acordado con backend: el último lote de la sesión.
+    completed: options?.sessionEnd === true,
     ...feedbackSessionId ? { sessionId: feedbackSessionId } : {}
   };
 }
@@ -2236,20 +1596,20 @@ function createFeedbackSink(options) {
   let feedbackSessionId;
   let firstPostInFlight = null;
   const url = `${options.baseUrl}/sdk/feedback`;
-  const post = async (body, final) => {
+  const post = async (body, final, sessionEnd = false) => {
     const json = JSON.stringify(body);
     const small = json.length <= KEEPALIVE_MAX_BYTES;
     if (final && options.sendBeaconImpl && small) {
       const payload = typeof Blob !== "undefined" ? new Blob([json], { type: "application/json" }) : json;
       if (options.sendBeaconImpl(url, payload)) {
-        options.log?.("[DeepdotsAnalytics] flush final v\xEDa sendBeacon");
+        options.log?.("[DeepdotsAnalytics] final flush via sendBeacon");
         return;
       }
-      options.log?.("[DeepdotsAnalytics] sendBeacon rechaz\xF3 el lote; fallback a fetch");
+      options.log?.("[DeepdotsAnalytics] sendBeacon rejected the batch; falling back to fetch");
     }
     const f = options.fetchImpl ?? (typeof fetch !== "undefined" ? fetch : void 0);
     if (!f) {
-      options.log?.("[DeepdotsAnalytics] no fetch disponible; payload no enviado", body);
+      options.log?.("[DeepdotsAnalytics] no fetch available; payload not sent", body);
       return;
     }
     const res = await f(url, {
@@ -2262,19 +1622,20 @@ function createFeedbackSink(options) {
     if (!res.ok) {
       const detail = await safeBodyText(res);
       if (isRetryableStatus(res.status)) {
-        throw new Error(`POST /sdk/feedback ${res.status} (reintentable): ${detail}`);
+        throw new Error(`POST /sdk/feedback ${res.status} (retryable): ${detail}`);
       }
       options.log?.(
-        `[DeepdotsAnalytics] POST /sdk/feedback rechazado con ${res.status}; lote DESCARTADO:`,
+        `[DeepdotsAnalytics] POST /sdk/feedback rejected with ${res.status}; batch DISCARDED:`,
         detail
       );
       return;
     }
+    if (sessionEnd) return;
     try {
       const data = await res.json();
       if (data?.sessionId && data.sessionId !== feedbackSessionId) {
         feedbackSessionId = data.sessionId;
-        options.log?.("[DeepdotsAnalytics] feedbackSessionId cacheado:", feedbackSessionId);
+        options.log?.("[DeepdotsAnalytics] feedbackSessionId cached:", feedbackSessionId);
         options.onSessionId?.(feedbackSessionId);
       }
     } catch {
@@ -2282,13 +1643,18 @@ function createFeedbackSink(options) {
   };
   return async (envelope, meta) => {
     const final = meta?.final === true;
+    const sessionEnd = meta?.sessionEnd === true;
     if (!feedbackSessionId && firstPostInFlight && !final) {
       await firstPostInFlight;
     }
-    const body = buildAnalyticsFeedbackBody(envelope, options.keys, feedbackSessionId);
+    const body = buildAnalyticsFeedbackBody(envelope, options.keys, feedbackSessionId, { sessionEnd });
     options.log?.("[DeepdotsAnalytics] POST /sdk/feedback \u2192", body);
-    const sent = post(body, final);
-    if (!feedbackSessionId) {
+    const sent = post(body, final, sessionEnd);
+    if (sessionEnd) {
+      feedbackSessionId = void 0;
+      firstPostInFlight = null;
+      options.onSessionReset?.();
+    } else if (!feedbackSessionId) {
       firstPostInFlight = sent.then(
         () => void 0,
         () => void 0
@@ -2727,6 +2093,7 @@ var CrashReporter = class {
 init_logger();
 
 // src/analytics/messaging.ts
+var MESSAGE_CHANNELS = ["push", "in_app"];
 function buildMessageParams(stage, o) {
   const p = {
     stage,
@@ -2739,6 +2106,57 @@ function buildMessageParams(stage, o) {
   if (o.currency) p.currency = o.currency;
   return { ...p, ...o.params ?? {} };
 }
+var MAX_TRACKED_MESSAGES = 500;
+var MessageGuard = class {
+  constructor(maxTrackedMessages = MAX_TRACKED_MESSAGES) {
+    this.maxTrackedMessages = maxTrackedMessages;
+    /** message_id → canal fijado + stages ya emitidos. El orden de inserción marca la eviction. */
+    this.seen = /* @__PURE__ */ new Map();
+  }
+  evaluate(stage, options) {
+    const channel = options.channel;
+    if (!MESSAGE_CHANNELS.includes(channel)) {
+      return {
+        emit: false,
+        reason: "invalid_channel",
+        detail: `invalid channel "${channel}" (expected ${MESSAGE_CHANNELS.join(" | ")})`
+      };
+    }
+    const entry = this.seen.get(options.id);
+    if (!entry) {
+      this.remember(options.id, channel, stage);
+      return { emit: true };
+    }
+    if (entry.channel !== channel) {
+      return {
+        emit: false,
+        reason: "channel_conflict",
+        detail: `message_id "${options.id}" was already reported on channel "${entry.channel}"; discarding "${channel}"`
+      };
+    }
+    if (entry.stages.has(stage)) {
+      return {
+        emit: false,
+        reason: "duplicate_stage",
+        detail: `stage "${stage}" was already sent for message_id "${options.id}"`
+      };
+    }
+    entry.stages.add(stage);
+    return { emit: true };
+  }
+  /** Olvida todo lo vigilado (nueva sesión). */
+  reset() {
+    this.seen.clear();
+  }
+  remember(id, channel, stage) {
+    this.seen.set(id, { channel, stages: /* @__PURE__ */ new Set([stage]) });
+    while (this.seen.size > this.maxTrackedMessages) {
+      const oldest = this.seen.keys().next();
+      if (oldest.done) break;
+      this.seen.delete(oldest.value);
+    }
+  }
+};
 
 // src/core/deepdots-popups.ts
 var EXIT_QUEUE_STORAGE_KEY = "__deepdots_exit_popup_queue__";
@@ -2780,14 +2198,24 @@ var DeepdotsPopups = class {
     this.analyticsFlushTimer = void 0;
     /** Crash & error reporting (#14–17). Null hasta init(). */
     this.crashReporter = null;
+    /** Protecciones del funnel de Messaging (#18–22). Vigencia de sesión: se reinicia en init(). */
+    this.messageGuard = new MessageGuard();
     /** Observador de navegación (Fase 2): emite page_view por el canal de analytics. */
     this.navObserver = null;
     /** Tiempo activo (engagement time, #8). */
     this.engagement = null;
     /** Atributos internos del usuario identificado → POST /sdk/popups/contact. Null si no hay userId. */
     this.contact = null;
+    /** Storage resuelto en init() (inyectado por el host o localStorage). Reusado al cambiar de usuario. */
+    this.storage = null;
     /** Marca si ya se inició la navegación manual (setScreen) — para RN sin History API. */
     this.navStarted = false;
+    /**
+     * `true` entre `session_start` y `session_end`. Hace idempotente tanto la apertura como
+     * el cierre (p. ej. `visibilitychange` + `pagehide` seguidos) y permite abrir una sesión
+     * nueva al volver a foreground o al conceder el consentimiento más tarde.
+     */
+    this.sessionOpen = false;
     /**
      * Idioma resuelto en init() (explícito > navigator.language > Intl). Única fuente de
      * verdad para el context de analytics Y para la segmentación por idioma de los popups.
@@ -2799,6 +2227,11 @@ var DeepdotsPopups = class {
     this.logger = config.logger ?? console;
     setLogger(this.logger);
     if (this.initialized) {
+      const nextUserId = config.userId || void 0;
+      if (nextUserId !== this.config?.userId) {
+        this.setUserId(nextUserId);
+        return;
+      }
       this.log("SDK already initialized");
       return;
     }
@@ -2811,6 +2244,7 @@ var DeepdotsPopups = class {
       userId: config.userId || void 0
     };
     const storage = config.storage ?? createDefaultStorage();
+    this.storage = storage;
     this.tracking = new TrackingManager({
       storage,
       clientUserId: this.config.userId,
@@ -2838,6 +2272,9 @@ var DeepdotsPopups = class {
       sendBeaconImpl: typeof navigator !== "undefined" && typeof navigator.sendBeacon === "function" ? (url, body) => navigator.sendBeacon(url, body) : void 0,
       onSessionId: (id) => {
         this.analyticsFeedbackSessionId = id;
+      },
+      onSessionReset: () => {
+        this.analyticsFeedbackSessionId = void 0;
       }
     }) : createDryRunSink((...a) => this.logger.log(...a));
     const device = config.device ?? collectDeviceInfo(config.appVersion);
@@ -2846,6 +2283,7 @@ var DeepdotsPopups = class {
       navigator: typeof navigator !== "undefined" ? navigator : void 0,
       intl: typeof Intl !== "undefined" ? Intl : void 0
     });
+    this.messageGuard.reset();
     this.analytics = new AnalyticsManager({
       sink: analyticsSink,
       publicKey: config.analytics?.publicKey ?? this.config.apiKey,
@@ -2881,7 +2319,7 @@ var DeepdotsPopups = class {
     this.engagement = new EngagementTracker();
     this.engagement.resume();
     this.setupAnalyticsFlush();
-    this.track("deepdots_session_start", {});
+    this.openSession();
     const pendingCrashes = this.crashReporter.drainPendingCrashes();
     if (this.tracking?.isTrackingEnabled()) {
       for (const rec of pendingCrashes) {
@@ -2913,7 +2351,9 @@ var DeepdotsPopups = class {
   }
   /** Activa/desactiva el tracking (identidad + sesión + analytics). Kill-switch del contrato §7bis. */
   setTrackingEnabled(enabled) {
+    if (!enabled) this.closeSession("tracking_disabled");
     this.tracking?.setTrackingEnabled(enabled);
+    if (enabled) this.openSession();
     this.log("tracking \xB7 setTrackingEnabled:", enabled, "\xB7 session_id:", this.tracking?.getSessionId() ?? null);
   }
   // ───────── Analytics (canal separado del feedback, vinculado por user_id) ─────────
@@ -2983,8 +2423,18 @@ var DeepdotsPopups = class {
   trackFunnelStep(funnel, step, taskId, params) {
     this.track("deepdots_funnel_step", { funnel, step, task_id: taskId, ...params ?? {} });
   }
-  /** Messaging (#18–22): registra una etapa del funnel de una notificación (push/in-app). No-op si tracking off. */
+  /**
+   * 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,
+   * si ese `(message_id, stage)` ya se emitió en la sesión, o si el `message_id` ya se reportó
+   * en otro canal — ver `MessageGuard`.
+   */
   trackMessage(stage, options) {
+    const verdict = this.messageGuard.evaluate(stage, options);
+    if (!verdict.emit) {
+      console.warn(`[DeepdotsPopups] trackMessage discarded (${verdict.reason}): ${verdict.detail}`);
+      return;
+    }
     this.track("deepdots_message", buildMessageParams(stage, options));
   }
   /**
@@ -3000,21 +2450,86 @@ var DeepdotsPopups = class {
       this.navObserver.visit(name);
     }
   }
-  /** App a foreground (RN: AppState 'active'): reanuda el engagement time. */
+  /** App a foreground (RN: AppState 'active'): reanuda el engagement time y abre sesión nueva. */
   onForeground() {
     this.engagement?.resume();
+    this.openSession();
   }
   /**
-   * App a background (RN: AppState 'background'): cierra pantalla actual (page_view),
-   * mini-service (mini_service_exit), emite engagement y hace flush del lote.
+   * App a background (RN: AppState 'background'): FIN DE SESIÓN. Cierra pantalla actual
+   * (page_view), mini-services (mini_service_exit), emite engagement + `session_end` y
+   * envía el último lote con `completed:true`.
+   *
+   * Es la única señal disponible en móvil: el kill de la app (swipe) NO da callback.
    */
   onBackground() {
+    this.closeSession("background");
+    this.engagement?.pause();
+  }
+  /**
+   * Cierre EXPLÍCITO de la sesión por parte del host (logout, fin de flujo…): emite
+   * `session_end` y envía el último lote con `completed:true`.
+   */
+  endSession() {
+    this.closeSession("manual");
+  }
+  /**
+   * Cambio de usuario (login / logout / cambio de cuenta). Cierra la sesión del usuario
+   * anterior (`session_end` con `reason: 'user_change'` + `completed:true`), cambia la
+   * identidad y abre una sesión nueva. Sin `userId` vuelve al id anónimo del SDK.
+   *
+   * Equivale a llamar a `init()` otra vez con otro `userId`.
+   */
+  setUserId(userId) {
+    const next = userId || void 0;
+    if (!this.initialized || !this.config || next === this.config.userId) return;
+    this.closeSession("user_change");
+    const enabled = this.tracking?.isTrackingEnabled() ?? true;
+    const storage = this.storage ?? createDefaultStorage();
+    this.config.userId = next;
+    this.tracking = new TrackingManager({ storage, clientUserId: next, enabled });
+    this.contact = next ? new ContactManager({
+      storage,
+      publicKey: this.config.apiKey ?? "",
+      userId: next,
+      post: (body) => this.postContact(body)
+    }) : null;
+    this.analytics?.resetUserScope();
+    this.messageGuard.reset();
+    this.log("tracking \xB7 user_change \xB7 user_id:", this.tracking.getUserId());
+    this.openSession();
+  }
+  /**
+   * Cierra la sesión actual: vuelca todo lo que quedaba abierto y envía el último lote
+   * marcado con `completed:true`, para que el backend cierre el registro. El `sessionId`
+   * cacheado se olvida → el lote siguiente abre un registro nuevo.
+   *
+   * Idempotente: dos cierres seguidos (p. ej. `visibilitychange` + `pagehide`) no duplican
+   * el `session_end`.
+   */
+  closeSession(reason) {
+    if (!this.sessionOpen) return;
+    if (!this.tracking?.isTrackingEnabled()) return;
+    this.sessionOpen = false;
     this.navObserver?.stop();
     this.navStarted = false;
-    if (this.tracking?.isTrackingEnabled()) this.analytics?.exitAllMiniServices();
+    this.analytics?.exitAllMiniServices();
     this.flushEngagement();
-    this.engagement?.pause();
-    this.flushAnalytics();
+    this.track("deepdots_session_end", { reason });
+    this.flushAnalytics({ final: reason === "page_hide", sessionEnd: true });
+    this.analyticsFeedbackSessionId = void 0;
+    this.tracking?.setSessionId(null);
+    this.log("tracking \xB7 session_end:", reason);
+  }
+  /**
+   * Abre sesión (`session_start`) si no hay una abierta y el tracking está activo. Idempotente:
+   * se llama en init(), al volver a foreground y al conceder el consentimiento.
+   */
+  openSession() {
+    if (this.sessionOpen) return;
+    if (!this.tracking?.isTrackingEnabled()) return;
+    this.sessionOpen = true;
+    this.track("deepdots_session_start", {});
   }
   /** Payload que se ENVIARÍA al endpoint de analytics (no envía ni vacía el buffer). */
   previewAnalytics() {
@@ -3052,10 +2567,7 @@ var DeepdotsPopups = class {
     this.analyticsFlushTimer = setInterval(() => this.flushAnalytics(), ANALYTICS_FLUSH_INTERVAL_MS);
     window.addEventListener("pagehide", () => {
       clearInterval(this.analyticsFlushTimer);
-      this.navObserver?.stop();
-      if (this.tracking?.isTrackingEnabled()) this.analytics?.exitAllMiniServices();
-      this.flushEngagement();
-      this.flushAnalytics({ final: true });
+      this.closeSession("page_hide");
     });
     document.addEventListener("visibilitychange", () => {
       if (document.visibilityState === "hidden") {
@@ -3730,7 +3242,8 @@ function setupReactNative(sdk2, config, deps = {}) {
   if (deps.appState?.addEventListener) {
     subscription = deps.appState.addEventListener("change", (state) => {
       if (state === "active") sdk2.onForeground();
-      else sdk2.onBackground();
+      else if (state === "background") sdk2.onBackground();
+      else sdk2.flushAnalytics();
     });
   }
   return () => {
@@ -3776,9 +3289,10 @@ function DeepdotsProvider({ config, children }) {
     survey ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Modal, { visible: true, transparent: true, animationType: "slide", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_react_native_webview.WebView,
       {
+        style: { flex: 1 },
         originWhitelist: ["*"],
         javaScriptEnabled: true,
-        source: { html: survey.html },
+        source: { html: survey.html, baseUrl: "https://sdk.deepdots.com/" },
         onMessage: (e) => rendererRef.current?.handleMessage(e.nativeEvent.data)
       }
     ) }) }) : null