mantenimento-app 2.1.2 → 2.1.4

package/frontend/public/app.js

@@ -1,6 +1,5 @@
 const defaultExpenseItems = [
       { label: "🏠 Affitto", help: "Canone mensile di locazione dell'abitazione." },
-      { label: "🏦 Mutuo casa", help: "Rata mensile del mutuo abitazione." },
       { label: "🏡 Casa (valore locativo)", help: "Valore locativo teorico della casa in uso, se rilevante." },
       { label: "💡 Utenze", help: "Luce, gas, acqua, internet e altre utenze domestiche." },
       { label: "🛒 Cibo/Alimenti", help: "Spesa alimentare mensile imputabile al nucleo familiare." },
@@ -28,6 +27,8 @@ const defaultExpenseItems = [
     let scenarioTransitionTimer = null;
     const SCENARIO_LAB_MAX = 3;
     const SCENARIO_LABELS = ["A", "B", "C"];
+    const EXPENSE_DETAIL_MAX_CHARS = 560;
+    const EXPENSE_DETAIL_MAX_LINES = 10;
 
     const QUOTA_MANTENIMENTO_PERC = 35;
 
@@ -228,6 +229,7 @@ const defaultExpenseItems = [
         expenseDetailBtn: "Dettaglio",
         expenseDetailTitle: "Apri dettaglio voce spesa",
         expenseDetailPlaceholder: "Scrivi qui il dettaglio di questa cifra (es. mesi, quota, riferimento).",
+        expenseDetailCharsRemaining: "Caratteri rimanenti: {count}",
         expenseRemoveTitle: "Rimuovi voce spesa",
         expenseRemoveBtn: "Rimuovi",
         expenseMinOneAlert: "Deve restare almeno una voce spesa.",
@@ -254,6 +256,33 @@ const defaultExpenseItems = [
         extraAnnHint1: "Quota annuale straordinaria stimata a carico di {spouse} (es. sanitarie non ricorrenti, scolastiche extra, attività non ordinarie).",
         extraAnnHint2: "Quota annuale straordinaria stimata a carico di {spouse} (es. sanitarie non ricorrenti, scolastiche extra, attività non ordinarie).",
         extraMonthlyEstimate: "Quota mensile stimata: {amount}",
+        firstHomeBoxTitle: "🏡 Mutuo prima casa ceduta",
+        firstHomeBoxNote: "Dichiara se esiste un mutuo sulla prima casa dei coniugi ceduta a uno dei due: il modello considera il trasferimento implicito quando la casa e assegnata al collocatario.",
+        firstHomeMortgageEnabledLabel: "Mutuo su prima casa dei coniugi",
+        firstHomeMortgageEnabledHint: "Attiva per includere il mutuo della prima casa ceduta nei benefici compensativi.",
+        firstHomeMortgageAmountLabel: "Rata mutuo mensile ({currency})",
+        firstHomeMortgageAmountHint: "Importo mensile complessivo della rata del mutuo prima casa.",
+        firstHomeAssignedToLabel: "Casa assegnata a",
+        firstHomeAssignedToHint: "Seleziona il coniuge a cui e ceduta la prima casa.",
+        firstHomeAssignedToNone: "Nessuna cessione",
+        firstHomeAssignedToSpouse: "Casa ceduta a {spouse}",
+        firstHomeSplitLabel: "Quota mutuo a carico {spouse} (%)",
+        firstHomeSplitHint: "Percentuale della rata mutuo pagata da {spouse}. La quota dell'altro coniuge e complementare a 100%.",
+        firstHomeSplitInfo: "Ripartizione mutuo: {spouse1} {p1}% · {spouse2} {p2}%",
+        calcCompBenefitsLabel: "Benefici compensativi gia allocati",
+        calcNoTransferWithBenefits: "Nessun trasferimento monetario suggerito. Benefici gia allocati: {benefits}.",
+        calcBenefitFamilyAllowance: "Assegno familiare INPS percepito da {spouse}",
+        calcBenefitPrimaryHomeMortgage: "Quota mutuo prima casa ceduta al collocatario ({payer} -> {receiver})",
+        pdfCompBenefitsSection: "Benefici compensativi gia allocati",
+        pdfCompBenefitsItem: "Beneficio",
+        pdfCompBenefitsAmount: "Valore {currency}/mese",
+        pdfCompBenefitsNone: "Nessun beneficio compensativo aggiuntivo dichiarato.",
+        pdfPrimaryHomeMortgage: "Mutuo prima casa ceduta",
+        pdfPrimaryHomeNotDeclared: "Non dichiarato",
+        pdfPrimaryHomeAssignedTo: "Assegnata a",
+        pdfPrimaryHomeMonthlyAmount: "Rata mensile",
+        pdfPrimaryHomeSplit: "Ripartizione mutuo",
+        pdfPrimaryHomeAppliedOnlyColl: "Considerato solo se casa ceduta al collocatario.",
         pdfExtraordinaryRow: "Spese straordinarie (quota mensile da annuo)",
         liveTotalIncome: "Entrate totali (reddito + assegni + INPS)",
         livePaidToOther: "Assegno mantenimento pagato all'altro coniuge",
@@ -521,6 +550,7 @@ const defaultExpenseItems = [
         expenseDetailBtn: "Detail",
         expenseDetailTitle: "Open expense detail",
         expenseDetailPlaceholder: "Write details for this amount (e.g. months, share, reference).",
+        expenseDetailCharsRemaining: "Remaining characters: {count}",
         expenseRemoveTitle: "Remove expense item",
         expenseRemoveBtn: "Remove",
         expenseMinOneAlert: "At least one expense item must remain.",
@@ -547,6 +577,33 @@ const defaultExpenseItems = [
         extraAnnHint1: "Estimated yearly extraordinary share for {spouse} (e.g., non-recurring medical, extra school, non-ordinary activities).",
         extraAnnHint2: "Estimated yearly extraordinary share for {spouse} (e.g., non-recurring medical, extra school, non-ordinary activities).",
         extraMonthlyEstimate: "Estimated monthly share: {amount}",
+        firstHomeBoxTitle: "🏡 Assigned primary home mortgage",
+        firstHomeBoxNote: "Declare whether there is a mortgage on the spouses' primary home assigned to one spouse: the model counts the implicit transfer when the home is assigned to the custodial parent.",
+        firstHomeMortgageEnabledLabel: "Mortgage on spouses' primary home",
+        firstHomeMortgageEnabledHint: "Enable to include the assigned primary-home mortgage in compensative benefits.",
+        firstHomeMortgageAmountLabel: "Monthly mortgage payment ({currency})",
+        firstHomeMortgageAmountHint: "Total monthly amount of the primary-home mortgage payment.",
+        firstHomeAssignedToLabel: "Home assigned to",
+        firstHomeAssignedToHint: "Select which spouse receives assignment of the primary home.",
+        firstHomeAssignedToNone: "No assignment",
+        firstHomeAssignedToSpouse: "Home assigned to {spouse}",
+        firstHomeSplitLabel: "Mortgage share paid by {spouse} (%)",
+        firstHomeSplitHint: "Percentage of the monthly mortgage payment paid by {spouse}. The other spouse share is the complement to 100%.",
+        firstHomeSplitInfo: "Mortgage split: {spouse1} {p1}% · {spouse2} {p2}%",
+        calcCompBenefitsLabel: "Compensative benefits already allocated",
+        calcNoTransferWithBenefits: "No monetary transfer suggested. Already allocated benefits: {benefits}.",
+        calcBenefitFamilyAllowance: "INPS family allowance received by {spouse}",
+        calcBenefitPrimaryHomeMortgage: "Primary-home mortgage share assigned to custodial parent ({payer} -> {receiver})",
+        pdfCompBenefitsSection: "Compensative benefits already allocated",
+        pdfCompBenefitsItem: "Benefit",
+        pdfCompBenefitsAmount: "Value {currency}/month",
+        pdfCompBenefitsNone: "No additional compensative benefits declared.",
+        pdfPrimaryHomeMortgage: "Assigned primary-home mortgage",
+        pdfPrimaryHomeNotDeclared: "Not declared",
+        pdfPrimaryHomeAssignedTo: "Assigned to",
+        pdfPrimaryHomeMonthlyAmount: "Monthly payment",
+        pdfPrimaryHomeSplit: "Mortgage split",
+        pdfPrimaryHomeAppliedOnlyColl: "Counted only when the home is assigned to the custodial parent.",
         pdfExtraordinaryRow: "Extraordinary expenses (monthly share from yearly)",
         liveTotalIncome: "Total income (income + support + INPS)",
         livePaidToOther: "Support paid to the other spouse",
@@ -692,100 +749,145 @@ const defaultExpenseItems = [
     };
     let currentLang = "it";
     let currentCurrency = "EUR";
-    const CALC_API_BASE_STORAGE_KEY = "keylock_calc_api_base";
-    const FRONTEND_VARIANT_ENVS = window.KEYLOCK_FRONTEND_VARIANT_ENVS && typeof window.KEYLOCK_FRONTEND_VARIANT_ENVS === "object"
-      ? window.KEYLOCK_FRONTEND_VARIANT_ENVS
-      : {};
-    const CALC_API_ENVS = window.KEYLOCK_CALC_API_ENVS && typeof window.KEYLOCK_CALC_API_ENVS === "object"
-      ? window.KEYLOCK_CALC_API_ENVS
-      : {};
+      const CALC_API_BASE_STORAGE_KEY = "keylock_calc_api_base";
+      const FRONTEND_VARIANT_ENVS = window.KEYLOCK_FRONTEND_VARIANT_ENVS && typeof window.KEYLOCK_FRONTEND_VARIANT_ENVS === "object"
+        ? window.KEYLOCK_FRONTEND_VARIANT_ENVS
+        : {};
+      const CALC_API_ENVS = window.KEYLOCK_CALC_API_ENVS && typeof window.KEYLOCK_CALC_API_ENVS === "object"
+        ? window.KEYLOCK_CALC_API_ENVS
+        : {};
 
-    function normalizeApiBase(rawValue) {
-      return String(rawValue || "").trim().replace(/\/+$/, "");
-    }
+      function normalizeApiBase(rawValue) {
+        return String(rawValue || "").trim().replace(/\/+$/, "");
+      }
 
-    function normalizeFrontendVariantUrl(rawValue) {
-      return String(rawValue || "").trim();
-    }
+      function normalizeFrontendVariantUrl(rawValue) {
+        return String(rawValue || "").trim();
+      }
 
-    function maybeRedirectFrontendVariant() {
-      try {
-        const params = new URLSearchParams(window.location.search || "");
-        const variant = String(params.get("frontend") || "").trim().toLowerCase();
-        if (!variant || variant === "prod" || variant === "default" || variant === "reset") return;
+      function maybeRedirectFrontendVariant() {
+        try {
+          const params = new URLSearchParams(window.location.search || "");
+          const variant = String(params.get("frontend") || "").trim().toLowerCase();
+          if (!variant || variant === "prod" || variant === "default" || variant === "reset") return;
 
-        const targetBase = normalizeFrontendVariantUrl(FRONTEND_VARIANT_ENVS[variant] || "");
-        if (!targetBase) return;
+          const targetBase = normalizeFrontendVariantUrl(FRONTEND_VARIANT_ENVS[variant] || "");
+          if (!targetBase) return;
 
-        const target = new URL(targetBase, window.location.href);
-        const current = new URL(window.location.href);
+          const target = new URL(targetBase, window.location.href);
+          const current = new URL(window.location.href);
 
-        // Avoid redirect loops when already on the target frontend.
-        if (target.href === current.href) return;
-        if (target.origin === current.origin && target.pathname === current.pathname) return;
+          if (target.href === current.href) return;
+          if (target.origin === current.origin && target.pathname === current.pathname) return;
 
-        // Keep runtime API selection params when switching frontend variant.
-        ["env", "apiBase"].forEach((k) => {
-          if (params.has(k)) target.searchParams.set(k, String(params.get(k)));
-        });
+          ["env", "apiBase"].forEach((k) => {
+            if (params.has(k)) target.searchParams.set(k, String(params.get(k)));
+          });
 
-        window.location.replace(target.toString());
-      } catch (_) {
-        // Ignore malformed URLs and continue with default frontend.
+          window.location.replace(target.toString());
+        } catch (_) {
+          // Ignore malformed URLs and continue with default frontend.
+        }
       }
-    }
 
-    maybeRedirectFrontendVariant();
+      maybeRedirectFrontendVariant();
 
-    function resolveNamedApiBase(envName) {
-      const key = String(envName || "").trim().toLowerCase();
-      if (!key) return "";
-      return normalizeApiBase(CALC_API_ENVS[key] || "");
-    }
+      function resolveNamedApiBase(envName) {
+        const key = String(envName || "").trim().toLowerCase();
+        if (!key) return "";
+        return normalizeApiBase(CALC_API_ENVS[key] || "");
+      }
 
-    function resolveCalculationApiBase() {
-      const configBase = normalizeApiBase(window.KEYLOCK_CALC_API_BASE || "");
-      let storedBase = "";
+      function resolveCalculationApiBase() {
+        const configBase = normalizeApiBase(window.KEYLOCK_CALC_API_BASE || "");
+        let storedBase = "";
 
-      try {
-        storedBase = normalizeApiBase(localStorage.getItem(CALC_API_BASE_STORAGE_KEY) || "");
-      } catch (_) {
-        storedBase = "";
+        try {
+          storedBase = normalizeApiBase(localStorage.getItem(CALC_API_BASE_STORAGE_KEY) || "");
+        } catch (_) {
+          storedBase = "";
+        }
+
+        try {
+          const params = new URLSearchParams(window.location.search || "");
+          if (params.has("env")) {
+            const envName = String(params.get("env") || "").trim().toLowerCase();
+            const disable = envName === "off" || envName === "default" || envName === "reset" || envName === "prod";
+            const envBase = disable ? "" : resolveNamedApiBase(envName);
+            try {
+              if (disable || !envBase) {
+                localStorage.removeItem(CALC_API_BASE_STORAGE_KEY);
+              } else {
+                localStorage.setItem(CALC_API_BASE_STORAGE_KEY, envBase);
+              }
+            } catch (_) {}
+            return envBase;
+          }
+
+          if (params.has("apiBase")) {
+            const queryBaseRaw = String(params.get("apiBase") || "").trim();
+            const disable = queryBaseRaw === "off" || queryBaseRaw === "default" || queryBaseRaw === "reset";
+            const queryBase = disable ? "" : normalizeApiBase(queryBaseRaw);
+            try {
+              if (disable || !queryBase) {
+                localStorage.removeItem(CALC_API_BASE_STORAGE_KEY);
+              } else {
+                localStorage.setItem(CALC_API_BASE_STORAGE_KEY, queryBase);
+              }
+            } catch (_) {}
+            return queryBase;
+          }
+        } catch (_) {}
+
+        return storedBase || configBase;
       }
 
-      try {
-        const params = new URLSearchParams(window.location.search || "");
-        if (params.has("env")) {
-          const envName = String(params.get("env") || "").trim().toLowerCase();
-          const disable = envName === "off" || envName === "default" || envName === "reset" || envName === "prod";
-          const envBase = disable ? "" : resolveNamedApiBase(envName);
-          try {
-            if (disable || !envBase) {
-              localStorage.removeItem(CALC_API_BASE_STORAGE_KEY);
-            } else {
-              localStorage.setItem(CALC_API_BASE_STORAGE_KEY, envBase);
-            }
-          } catch (_) {}
-          return envBase;
+      function getRuntimeVariantLabels() {
+        const labels = [];
+
+        try {
+          const params = new URLSearchParams(window.location.search || "");
+          const frontendVariant = String(params.get("frontend") || "").trim().toLowerCase();
+          const envVariant = String(params.get("env") || "").trim().toLowerCase();
+          const apiBaseVariant = String(params.get("apiBase") || "").trim();
+
+          if (frontendVariant === "dev" || window.location.host.includes("githack.com")) {
+            labels.push("dev-frontend");
+          }
+          if (envVariant === "dev" || !!apiBaseVariant) {
+            labels.push("dev-api");
+          }
+        } catch (_) {}
+
+        return labels;
+      }
+
+      function renderRuntimeBadge() {
+        const heroTools = document.querySelector(".hero-tools");
+        if (!heroTools) return;
+
+        const labels = getRuntimeVariantLabels();
+        let badge = document.getElementById("runtimeEnvBadge");
+
+        if (!labels.length) {
+          if (badge) badge.remove();
+          return;
         }
 
-        if (params.has("apiBase")) {
-          const queryBaseRaw = String(params.get("apiBase") || "").trim();
-          const disable = queryBaseRaw === "off" || queryBaseRaw === "default" || queryBaseRaw === "reset";
-          const queryBase = disable ? "" : normalizeApiBase(queryBaseRaw);
-          try {
-            if (disable || !queryBase) {
-              localStorage.removeItem(CALC_API_BASE_STORAGE_KEY);
-            } else {
-              localStorage.setItem(CALC_API_BASE_STORAGE_KEY, queryBase);
-            }
-          } catch (_) {}
-          return queryBase;
+        if (!badge) {
+          badge = document.createElement("div");
+          badge.id = "runtimeEnvBadge";
+          badge.className = "runtime-badge";
+          heroTools.prepend(badge);
         }
-      } catch (_) {}
 
-      return storedBase || configBase;
-    }
+        badge.innerHTML = labels.map((label) => {
+          if (label === "dev-frontend") {
+            return '<span class="runtime-badge-chip runtime-badge-chip--frontend">DEV FRONTEND</span>';
+          }
+          return '<span class="runtime-badge-chip runtime-badge-chip--api">DEV API</span>';
+        }).join("");
+      }
 
     function getRuntimeVariantLabels() {
       const labels = [];
@@ -858,8 +960,8 @@ const defaultExpenseItems = [
     }
 
     function resolveCalculationApiUrl() {
-      const calcApiBase = resolveCalculationApiBase();
-      if (calcApiBase) return `${calcApiBase}/api/calculate`;
+        const calcApiBase = resolveCalculationApiBase();
+        if (calcApiBase) return `${calcApiBase}/api/calculate`;
       return "/api/calculate";
     }
 
@@ -1020,6 +1122,16 @@ const defaultExpenseItems = [
       const permLegendC2 = document.getElementById("permLegendC2");
       const extraBoxTitle = document.getElementById("extraBoxTitle");
       const extraBoxNote = document.getElementById("extraBoxNote");
+      const firstHomeBoxTitle = document.getElementById("firstHomeBoxTitle");
+      const firstHomeBoxNote = document.getElementById("firstHomeBoxNote");
+      const lblPrimaCasaMutuoEnabled = document.getElementById("lblPrimaCasaMutuoEnabled");
+      const hintPrimaCasaMutuoEnabled = document.getElementById("hintPrimaCasaMutuoEnabled");
+      const lblPrimaCasaMutuoImporto = document.getElementById("lblPrimaCasaMutuoImporto");
+      const hintPrimaCasaMutuoImporto = document.getElementById("hintPrimaCasaMutuoImporto");
+      const lblPrimaCasaAssegnataA = document.getElementById("lblPrimaCasaAssegnataA");
+      const hintPrimaCasaAssegnataA = document.getElementById("hintPrimaCasaAssegnataA");
+      const lblPrimaCasaMutuoPerc1 = document.getElementById("lblPrimaCasaMutuoPerc1");
+      const hintPrimaCasaMutuoPerc1 = document.getElementById("hintPrimaCasaMutuoPerc1");
       const lblStraordAnn1 = document.getElementById("lblStraordAnn1");
       const lblStraordAnn2 = document.getElementById("lblStraordAnn2");
       const hintStraordAnn1 = document.getElementById("hintStraordAnn1");
@@ -1059,6 +1171,16 @@ const defaultExpenseItems = [
       if (permLegendC2) permLegendC2.textContent = c2n();
       if (extraBoxTitle) extraBoxTitle.textContent = tr("extraBoxTitle");
       if (extraBoxNote) extraBoxNote.textContent = tr("extraBoxNote");
+      if (firstHomeBoxTitle) firstHomeBoxTitle.textContent = tr("firstHomeBoxTitle");
+      if (firstHomeBoxNote) firstHomeBoxNote.textContent = tr("firstHomeBoxNote");
+      if (lblPrimaCasaMutuoEnabled) lblPrimaCasaMutuoEnabled.textContent = tr("firstHomeMortgageEnabledLabel");
+      if (hintPrimaCasaMutuoEnabled) hintPrimaCasaMutuoEnabled.title = tr("firstHomeMortgageEnabledHint");
+      if (lblPrimaCasaMutuoImporto) lblPrimaCasaMutuoImporto.textContent = msg("firstHomeMortgageAmountLabel", { currency: currentCurrency });
+      if (hintPrimaCasaMutuoImporto) hintPrimaCasaMutuoImporto.title = tr("firstHomeMortgageAmountHint");
+      if (lblPrimaCasaAssegnataA) lblPrimaCasaAssegnataA.textContent = tr("firstHomeAssignedToLabel");
+      if (hintPrimaCasaAssegnataA) hintPrimaCasaAssegnataA.title = tr("firstHomeAssignedToHint");
+      if (lblPrimaCasaMutuoPerc1) lblPrimaCasaMutuoPerc1.textContent = msg("firstHomeSplitLabel", { spouse: c1n() });
+      if (hintPrimaCasaMutuoPerc1) hintPrimaCasaMutuoPerc1.title = msg("firstHomeSplitHint", { spouse: c1n() });
       if (lblStraordAnn1) lblStraordAnn1.textContent = msg("extraAnnLabel1", { spouse: c1n(), currency: currentCurrency });
       if (lblStraordAnn2) lblStraordAnn2.textContent = msg("extraAnnLabel2", { spouse: c2n(), currency: currentCurrency });
       if (hintStraordAnn1) hintStraordAnn1.title = msg("extraAnnHint1", { spouse: c1n() });
@@ -1108,6 +1230,10 @@ const defaultExpenseItems = [
       if (visitorTotalLabel) visitorTotalLabel.textContent = tr("footerVisitorsTotal");
       if (visitorActiveLabel) visitorActiveLabel.textContent = tr("footerVisitorsActive");
       if (visitorLoggedLabel) visitorLoggedLabel.textContent = tr("footerLoggedUsers");
+      rowsSpese.querySelectorAll("textarea.spese-detail-text").forEach((el) => {
+        updateExpenseDetailCounter(el);
+      });
+      updateFirstHomeMortgageUi();
       updateExtraordinaryModuleUi();
       updatePermanenceCalendarSummary();
       renderVisitorCounters();
@@ -1182,6 +1308,73 @@ const defaultExpenseItems = [
         .replaceAll("'", "&#39;");
     }
 
+    function getExpenseDetailMaxHeight(textarea) {
+      if (!textarea) return 0;
+      const style = window.getComputedStyle(textarea);
+      const lineHeight = Number.parseFloat(style.lineHeight) || 18;
+      const borderTop = Number.parseFloat(style.borderTopWidth) || 0;
+      const borderBottom = Number.parseFloat(style.borderBottomWidth) || 0;
+      const paddingTop = Number.parseFloat(style.paddingTop) || 0;
+      const paddingBottom = Number.parseFloat(style.paddingBottom) || 0;
+      return Math.round((lineHeight * EXPENSE_DETAIL_MAX_LINES) + paddingTop + paddingBottom + borderTop + borderBottom);
+    }
+
+    function autoResizeExpenseDetailTextarea(textarea, preferredHeight = 0) {
+      if (!textarea) return;
+      const maxHeight = getExpenseDetailMaxHeight(textarea);
+      textarea.style.height = "auto";
+      const scrollHeight = Math.max(textarea.scrollHeight, 0);
+      const targetHeight = preferredHeight > 0
+        ? Math.min(maxHeight, Math.max(scrollHeight, preferredHeight))
+        : Math.min(maxHeight, scrollHeight);
+      textarea.style.height = `${Math.max(0, targetHeight)}px`;
+      textarea.style.overflowY = scrollHeight > maxHeight ? "auto" : "hidden";
+    }
+
+    function updateExpenseDetailCounter(textarea) {
+      if (!textarea || !textarea.id) return;
+      const counter = document.getElementById(`${textarea.id}Counter`);
+      if (!counter) return;
+      const maxLen = Number(textarea.getAttribute("maxlength") || EXPENSE_DETAIL_MAX_CHARS);
+      const len = String(textarea.value || "").length;
+      const remaining = Math.max(0, maxLen - len);
+      counter.textContent = msg("expenseDetailCharsRemaining", { count: String(remaining) });
+      counter.classList.toggle("is-limit", remaining <= Math.max(20, Math.round(maxLen * 0.05)));
+    }
+
+    function updateExpenseDetailTextareaUi(textarea, preferredHeight = 0) {
+      if (!textarea) return;
+      autoResizeExpenseDetailTextarea(textarea, preferredHeight);
+      updateExpenseDetailCounter(textarea);
+    }
+
+    function collectExpenseDetailUiMeta(spouseKey, idx) {
+      const wrap = document.getElementById(`${spouseKey}dw_${idx}`);
+      const textArea = document.getElementById(`${spouseKey}d_${idx}`);
+      const inlineHeight = textArea ? Number.parseFloat(String(textArea.style.height || "0")) : 0;
+      return {
+        open: wrap ? !wrap.classList.contains("is-hidden") : false,
+        height: Number.isFinite(inlineHeight) && inlineHeight > 0 ? inlineHeight : 0
+      };
+    }
+
+    function applyExpenseDetailUiMeta(spouseKey, idx, meta) {
+      const wrap = document.getElementById(`${spouseKey}dw_${idx}`);
+      const textarea = document.getElementById(`${spouseKey}d_${idx}`);
+      const btn = rowsSpese.querySelector(`button[data-detail-target='${spouseKey}d_${idx}']`);
+      const open = !!(meta && meta.open);
+
+      if (wrap) wrap.classList.toggle("is-hidden", !open);
+      if (btn) btn.classList.toggle("is-open", open);
+
+      const preferredHeight = Number(meta && meta.height);
+      if (textarea && Number.isFinite(preferredHeight) && preferredHeight > 0) {
+        updateExpenseDetailTextareaUi(textarea, preferredHeight);
+      } else if (textarea) {
+        updateExpenseDetailTextareaUi(textarea);
+      }
+    }
+
     function normalizeExpenseItem(item, fallbackIdx = 0) {
       const rawLabel = String(item && item.label ? item.label : "").trim();
       const rawHelp = String(item && item.help ? item.help : "").trim();
@@ -2357,7 +2550,8 @@ const defaultExpenseItems = [
                 <button class="btn-secondary spese-detail-btn" type="button" data-detail-target="c1d_${idx}" data-detail-wrap="c1dw_${idx}" title="${tr("expenseDetailTitle")}"><span class="spese-detail-label">${tr("expenseDetailBtn")}</span></button>
               </div>
               <div class="spese-detail-wrap is-hidden" id="c1dw_${idx}">
-                <textarea id="c1d_${idx}" class="spese-detail-text" rows="2" maxlength="280" placeholder="${escapeHtml(tr("expenseDetailPlaceholder"))}"></textarea>
+                <textarea id="c1d_${idx}" class="spese-detail-text" rows="2" maxlength="${EXPENSE_DETAIL_MAX_CHARS}" placeholder="${escapeHtml(tr("expenseDetailPlaceholder"))}" aria-describedby="c1d_${idx}Counter"></textarea>
+                <div class="spese-detail-counter" id="c1d_${idx}Counter" aria-live="polite"></div>
               </div>
               <span class="spese-partial" id="p1_${idx}" title="${tr("expensePartialTitle")}">${tr("expensePartialLabel")}: ${eurTiny(0)}</span>
             </div>
@@ -2369,7 +2563,8 @@ const defaultExpenseItems = [
                 <button class="btn-secondary spese-detail-btn" type="button" data-detail-target="c2d_${idx}" data-detail-wrap="c2dw_${idx}" title="${tr("expenseDetailTitle")}"><span class="spese-detail-label">${tr("expenseDetailBtn")}</span></button>
               </div>
               <div class="spese-detail-wrap is-hidden" id="c2dw_${idx}">
-                <textarea id="c2d_${idx}" class="spese-detail-text" rows="2" maxlength="280" placeholder="${escapeHtml(tr("expenseDetailPlaceholder"))}"></textarea>
+                <textarea id="c2d_${idx}" class="spese-detail-text" rows="2" maxlength="${EXPENSE_DETAIL_MAX_CHARS}" placeholder="${escapeHtml(tr("expenseDetailPlaceholder"))}" aria-describedby="c2d_${idx}Counter"></textarea>
+                <div class="spese-detail-counter" id="c2d_${idx}Counter" aria-live="polite"></div>
               </div>
               <span class="spese-partial" id="p2_${idx}" title="${tr("expensePartialTitle")}">${tr("expensePartialLabel")}: ${eurTiny(0)}</span>
             </div>
@@ -2380,6 +2575,9 @@ const defaultExpenseItems = [
         `;
         rowsSpese.appendChild(rowEl);
       });
+      rowsSpese.querySelectorAll("textarea.spese-detail-text").forEach((el) => {
+        updateExpenseDetailTextareaUi(el);
+      });
       refreshExpenseDetailButtonState();
     }
 
@@ -2388,7 +2586,9 @@ const defaultExpenseItems = [
         c1: num(`c1_${i}`),
         c2: num(`c2_${i}`),
         d1: String(document.getElementById(`c1d_${i}`)?.value || "").trim(),
-        d2: String(document.getElementById(`c2d_${i}`)?.value || "").trim()
+        d2: String(document.getElementById(`c2d_${i}`)?.value || "").trim(),
+        d1Ui: collectExpenseDetailUiMeta("c1", i),
+        d2Ui: collectExpenseDetailUiMeta("c2", i)
       }));
     }
 
@@ -2403,6 +2603,8 @@ const defaultExpenseItems = [
         if (c2) c2.value = Number.isFinite(Number(row && row.c2)) ? Number(row.c2) : 0;
         if (d1) d1.value = String(row && row.d1 ? row.d1 : "");
         if (d2) d2.value = String(row && row.d2 ? row.d2 : "");
+        applyExpenseDetailUiMeta("c1", i, row && row.d1Ui ? row.d1Ui : null);
+        applyExpenseDetailUiMeta("c2", i, row && row.d2Ui ? row.d2Ui : null);
       });
       refreshExpenseDetailButtonState();
     }
@@ -2414,6 +2616,7 @@ const defaultExpenseItems = [
         const detailEl = document.getElementById(targetId);
         const hasNote = !!(detailEl && String(detailEl.value || "").trim());
         btn.classList.toggle("has-note", hasNote);
+        btn.setAttribute("aria-label", hasNote ? `${tr("expenseDetailBtn")} ✓` : tr("expenseDetailBtn"));
       });
     }
 
@@ -2967,8 +3170,11 @@ const defaultExpenseItems = [
       const c2Spese = expenseItems.map((_, idx) => num(`c2_${idx}`));
       const c1SpeseDetails = expenseItems.map((_, idx) => String(document.getElementById(`c1d_${idx}`)?.value || "").trim());
       const c2SpeseDetails = expenseItems.map((_, idx) => String(document.getElementById(`c2d_${idx}`)?.value || "").trim());
+      const c1SpeseDetailUi = expenseItems.map((_, idx) => collectExpenseDetailUiMeta("c1", idx));
+      const c2SpeseDetailUi = expenseItems.map((_, idx) => collectExpenseDetailUiMeta("c2", idx));
       const extra1 = getExtraordinaryMonthly(1);
       const extra2 = getExtraordinaryMonthly(2);
+      const firstHome = getFirstHomeMortgageInput();
       if (extra1 > 0) c1Spese.push(extra1);
       if (extra2 > 0) c2Spese.push(extra2);
 
@@ -2989,10 +3195,16 @@ const defaultExpenseItems = [
         aPag2: num("assegnoPagato2"),
         aFam1: num("assegnoFam1"),
         aFam2: num("assegnoFam2"),
+        primaCasaMutuoEnabled: firstHome.enabled ? 1 : 0,
+        primaCasaMutuoImporto: firstHome.amount,
+        primaCasaAssegnataA: firstHome.assignedTo,
+        primaCasaMutuoPerc1: firstHome.share1,
         straordAnn1: num("straordAnn1"),
         straordAnn2: num("straordAnn2"),
         c1SpeseDetails,
         c2SpeseDetails,
+        c1SpeseDetailUi,
+        c2SpeseDetailUi,
         c1Spese,
         c2Spese
       };
@@ -3023,14 +3235,26 @@ const defaultExpenseItems = [
       const aPag2 = Number(payload.aPag2 || 0);
       const aFam1 = Number(payload.aFam1 || 0);
       const aFam2 = Number(payload.aFam2 || 0);
+      const primaCasaMutuoEnabled = Number(payload.primaCasaMutuoEnabled || 0) > 0;
+      const primaCasaMutuoImporto = Math.max(0, Number(payload.primaCasaMutuoImporto || 0));
+      const primaCasaAssegnataA = (String(payload.primaCasaAssegnataA || "") === "1" || String(payload.primaCasaAssegnataA || "") === "2")
+        ? String(payload.primaCasaAssegnataA)
+        : "";
+      const rawMutuoPerc1 = payload.primaCasaMutuoPerc1 === undefined ? 50 : payload.primaCasaMutuoPerc1;
+      const primaCasaMutuoPerc1 = Math.min(100, Math.max(0, Number(rawMutuoPerc1 || 0)));
+      const primaCasaMutuoPerc2 = 100 - primaCasaMutuoPerc1;
+      const quotaMutuoSpese1 = primaCasaMutuoEnabled ? (primaCasaMutuoImporto * (primaCasaMutuoPerc1 / 100)) : 0;
+      const quotaMutuoSpese2 = primaCasaMutuoEnabled ? (primaCasaMutuoImporto - quotaMutuoSpese1) : 0;
 
       const match12 = Math.min(aPag1, aPerc2);
       const match21 = Math.min(aPag2, aPerc1);
       const esternoPag1 = Math.max(0, aPag1 - match12);
       const esternoPag2 = Math.max(0, aPag2 - match21);
 
-      const spese1 = (payload.c1Spese || []).reduce((acc, v) => acc + Number(v || 0), 0);
-      const spese2 = (payload.c2Spese || []).reduce((acc, v) => acc + Number(v || 0), 0);
+      const speseBase1 = (payload.c1Spese || []).reduce((acc, v) => acc + Number(v || 0), 0);
+      const speseBase2 = (payload.c2Spese || []).reduce((acc, v) => acc + Number(v || 0), 0);
+      const spese1 = speseBase1 + quotaMutuoSpese1;
+      const spese2 = speseBase2 + quotaMutuoSpese2;
       const speseTot = spese1 + spese2;
 
       const disp1 = r1 + aPerc1 + aFam1 - aPag1 - spese1;
@@ -3071,6 +3295,31 @@ const defaultExpenseItems = [
         assegnoDa2a1 = nonCollocatario === 2 ? contributoIndiretto : 0;
       }
 
+      const assegnoBaseDa1a2 = assegnoDa1a2;
+      const assegnoBaseDa2a1 = assegnoDa2a1;
+
+      const primaCasaConsidered = primaCasaMutuoEnabled && primaCasaMutuoImporto > 0
+        && primaCasaAssegnataA !== ""
+        && Number(primaCasaAssegnataA) === collocatario;
+      let primaCasaTransfer1to2 = 0;
+      let primaCasaTransfer2to1 = 0;
+      if (primaCasaConsidered) {
+        if (primaCasaAssegnataA === "1") {
+          primaCasaTransfer2to1 = Math.max(0, quotaMutuoSpese2);
+        } else if (primaCasaAssegnataA === "2") {
+          primaCasaTransfer1to2 = Math.max(0, quotaMutuoSpese1);
+        }
+      }
+
+      assegnoDa1a2 = Math.max(0, assegnoDa1a2 - primaCasaTransfer1to2);
+      assegnoDa2a1 = Math.max(0, assegnoDa2a1 - primaCasaTransfer2to1);
+
+      const compensativeBenefits = [];
+      if (aFam1 > 0.005) compensativeBenefits.push({ type: "family", to: 1, amount: aFam1 });
+      if (aFam2 > 0.005) compensativeBenefits.push({ type: "family", to: 2, amount: aFam2 });
+      if (primaCasaTransfer1to2 > 0.005) compensativeBenefits.push({ type: "primary-home-mortgage", from: 1, to: 2, amount: primaCasaTransfer1to2 });
+      if (primaCasaTransfer2to1 > 0.005) compensativeBenefits.push({ type: "primary-home-mortgage", from: 2, to: 1, amount: primaCasaTransfer2to1 });
+
       const post1 = disp1 - assegnoDa1a2 + assegnoDa2a1;
       const post2 = disp2 - assegnoDa2a1 + assegnoDa1a2;
 
@@ -3078,6 +3327,7 @@ const defaultExpenseItems = [
         r1, r2, r1Raw, r2Raw, incomeMode, figli, perm1, perm2,
         aPerc1, aPag1, aPerc2, aPag2, aFam1, aFam2,
         match12, match21, esternoPag1, esternoPag2,
+        speseBase1, speseBase2, quotaMutuoSpese1, quotaMutuoSpese2,
         spese1, spese2, speseTot,
         disp1, disp2, peso1, peso2,
         mode, simplePerc,
@@ -3085,6 +3335,11 @@ const defaultExpenseItems = [
         fabbisognoFigli, quotaTeorica1, quotaTeorica2,
         quotaDiretta1, quotaDiretta2,
         saldo1, saldo2,
+        assegnoBaseDa1a2, assegnoBaseDa2a1,
+        primaCasaMutuoEnabled, primaCasaMutuoImporto, primaCasaAssegnataA,
+        primaCasaMutuoPerc1, primaCasaMutuoPerc2,
+        primaCasaConsidered, primaCasaTransfer1to2, primaCasaTransfer2to1,
+        compensativeBenefits,
         assegnoDa1a2, assegnoDa2a1,
         post1, post2
       };
@@ -3167,6 +3422,7 @@ const defaultExpenseItems = [
       if (lblStraordAnn2) lblStraordAnn2.textContent = msg("extraAnnLabel2", { spouse: c2n(), currency: currentCurrency });
       if (hintStraordAnn1) hintStraordAnn1.title = msg("extraAnnHint1", { spouse: c1n() });
       if (hintStraordAnn2) hintStraordAnn2.title = msg("extraAnnHint2", { spouse: c2n() });
+      updateFirstHomeMortgageUi();
       updateExtraordinaryModuleUi();
       updatePermanenceCalendarSummary();
     }
@@ -3176,6 +3432,71 @@ const defaultExpenseItems = [
       return annual > 0 ? annual / 12 : 0;
     }
 
+    function getFirstHomeMortgageInput() {
+      const enabled = !!document.getElementById("primaCasaMutuoEnabled")?.checked;
+      const amount = Math.max(0, num("primaCasaMutuoImporto"));
+      const assignedToRaw = String(document.getElementById("primaCasaAssegnataA")?.value || "").trim();
+      const assignedTo = (assignedToRaw === "1" || assignedToRaw === "2") ? assignedToRaw : "";
+      const share1 = Math.min(100, Math.max(0, num("primaCasaMutuoPerc1")));
+      const share2 = 100 - share1;
+      return { enabled, amount, assignedTo, share1, share2 };
+    }
+
+    function updateFirstHomeMortgageUi() {
+      const enabledEl = document.getElementById("primaCasaMutuoEnabled");
+      const amountEl = document.getElementById("primaCasaMutuoImporto");
+      const assignedEl = document.getElementById("primaCasaAssegnataA");
+      const shareEl = document.getElementById("primaCasaMutuoPerc1");
+      const splitInfoEl = document.getElementById("primaCasaMutuoSplitInfo");
+      const splitCenterEl = document.getElementById("primaCasaSplitCenter");
+      const splitLeftNameEl = document.getElementById("primaCasaSplitLeftName");
+      const splitRightNameEl = document.getElementById("primaCasaSplitRightName");
+      const splitLeftAmountEl = document.getElementById("primaCasaSplitLeftAmount");
+      const splitRightAmountEl = document.getElementById("primaCasaSplitRightAmount");
+      const splitWrapEl = document.getElementById("primaCasaMutuoSliderWrap");
+      const splitLabelEl = document.getElementById("lblPrimaCasaMutuoPerc1");
+      const splitHintEl = document.getElementById("hintPrimaCasaMutuoPerc1");
+      if (!enabledEl || !amountEl || !assignedEl || !shareEl) return;
+
+      const isEnabled = !!enabledEl.checked;
+      amountEl.disabled = !isEnabled;
+      assignedEl.disabled = !isEnabled;
+      shareEl.disabled = !isEnabled;
+      if (splitWrapEl) splitWrapEl.classList.toggle("is-disabled", !isEnabled);
+
+      const normalizedShare1 = Math.min(100, Math.max(0, num("primaCasaMutuoPerc1")));
+      if (Math.abs(normalizedShare1 - Number(shareEl.value || 0)) > 0.0001) {
+        shareEl.value = normalizedShare1.toFixed(0);
+      }
+
+      const share2 = 100 - normalizedShare1;
+      const amount = Math.max(0, num("primaCasaMutuoImporto"));
+      const quota1 = amount * (normalizedShare1 / 100);
+      const quota2 = amount - quota1;
+      if (splitLabelEl) splitLabelEl.textContent = msg("firstHomeSplitLabel", { spouse: c1n() });
+      if (splitHintEl) splitHintEl.title = msg("firstHomeSplitHint", { spouse: c1n() });
+      if (splitInfoEl) {
+        splitInfoEl.textContent = msg("firstHomeSplitInfo", {
+          spouse1: c1n(),
+          spouse2: c2n(),
+          p1: normalizedShare1.toFixed(0),
+          p2: share2.toFixed(0)
+        });
+      }
+      if (splitCenterEl) splitCenterEl.textContent = `${normalizedShare1.toFixed(0)}% / ${share2.toFixed(0)}%`;
+      if (splitLeftNameEl) splitLeftNameEl.textContent = c1n();
+      if (splitRightNameEl) splitRightNameEl.textContent = c2n();
+      if (splitLeftAmountEl) splitLeftAmountEl.textContent = eur(quota1);
+      if (splitRightAmountEl) splitRightAmountEl.textContent = eur(quota2);
+
+      const noneOpt = assignedEl.querySelector("option[value='']");
+      const spouse1Opt = assignedEl.querySelector("option[value='1']");
+      const spouse2Opt = assignedEl.querySelector("option[value='2']");
+      if (noneOpt) noneOpt.textContent = tr("firstHomeAssignedToNone");
+      if (spouse1Opt) spouse1Opt.textContent = msg("firstHomeAssignedToSpouse", { spouse: c1n() });
+      if (spouse2Opt) spouse2Opt.textContent = msg("firstHomeAssignedToSpouse", { spouse: c2n() });
+    }
+
     function updateExtraordinaryModuleUi() {
       const month1 = document.getElementById("straordMonth1");
       const month2 = document.getElementById("straordMonth2");
@@ -3635,6 +3956,11 @@ const defaultExpenseItems = [
         if (!el) return;
         el.value = value;
       };
+      const setChecked = (id, value) => {
+        const el = document.getElementById(id);
+        if (!el) return;
+        el.checked = !!value;
+      };
 
       setVal("nome1", payload._nome1 || c1n());
       setVal("nome2", payload._nome2 || c2n());
@@ -3660,6 +3986,10 @@ const defaultExpenseItems = [
       setVal("assegnoPercepito2", Number(payload.aPerc2 || 0));
       setVal("assegnoPagato2", Number(payload.aPag2 || 0));
       setVal("assegnoFam2", Number(payload.aFam2 || 0));
+      setChecked("primaCasaMutuoEnabled", Number(payload.primaCasaMutuoEnabled || 0) > 0);
+      setVal("primaCasaMutuoImporto", Number(payload.primaCasaMutuoImporto || 0));
+      setVal("primaCasaAssegnataA", (String(payload.primaCasaAssegnataA || "") === "1" || String(payload.primaCasaAssegnataA || "") === "2") ? String(payload.primaCasaAssegnataA) : "");
+      setVal("primaCasaMutuoPerc1", Math.min(100, Math.max(0, Number((payload.primaCasaMutuoPerc1 === undefined ? 50 : payload.primaCasaMutuoPerc1) || 0))));
       setVal("straordAnn1", Number(payload.straordAnn1 || 0));
       setVal("straordAnn2", Number(payload.straordAnn2 || 0));
 
@@ -3667,6 +3997,8 @@ const defaultExpenseItems = [
       const c2Spese = Array.isArray(payload.c2Spese) ? payload.c2Spese : [];
       const c1SpeseDetails = Array.isArray(payload.c1SpeseDetails) ? payload.c1SpeseDetails : [];
       const c2SpeseDetails = Array.isArray(payload.c2SpeseDetails) ? payload.c2SpeseDetails : [];
+      const c1SpeseDetailUi = Array.isArray(payload.c1SpeseDetailUi) ? payload.c1SpeseDetailUi : [];
+      const c2SpeseDetailUi = Array.isArray(payload.c2SpeseDetailUi) ? payload.c2SpeseDetailUi : [];
       expenseItems.forEach((_, i) => {
         const c1 = document.getElementById(`c1_${i}`);
         const c2 = document.getElementById(`c2_${i}`);
@@ -3676,6 +4008,8 @@ const defaultExpenseItems = [
         if (c2) c2.value = Number(c2Spese[i] || 0);
         if (d1) d1.value = String(c1SpeseDetails[i] || "");
         if (d2) d2.value = String(c2SpeseDetails[i] || "");
+        applyExpenseDetailUiMeta("c1", i, c1SpeseDetailUi[i]);
+        applyExpenseDetailUiMeta("c2", i, c2SpeseDetailUi[i]);
       });
       refreshExpenseDetailButtonState();
 
@@ -3686,6 +4020,7 @@ const defaultExpenseItems = [
       };
 
       updateSpouseLabels();
+      updateFirstHomeMortgageUi();
       if (payload._permanenceCalendar && typeof payload._permanenceCalendar === "object") {
         importPermanenceCalendarState(payload._permanenceCalendar);
         syncPermanenza("calendar");
@@ -3810,6 +4145,22 @@ const defaultExpenseItems = [
       const peso2Pct = (m.peso2 * 100).toFixed(1);
       const days1 = ((m.perm1 / 100) * 30).toFixed(1);
       const days2 = ((m.perm2 / 100) * 30).toFixed(1);
+      const compBenefits = getCompensativeBenefitRows(m, c1Name, c2Name);
+      const compBenefitsRowsHtml = compBenefits.length
+        ? compBenefits.map((row) => `<tr><td>${escapeHtml(row.label)}</td><td class="num">${eur(row.amount)}</td></tr>`).join("")
+        : `<tr><td colspan="2">${tr("pdfCompBenefitsNone")}</td></tr>`;
+      const primaryHomeAssignedLabel = m.primaCasaAssegnataA === "1"
+        ? c1NameEsc
+        : m.primaCasaAssegnataA === "2"
+          ? c2NameEsc
+          : tr("pdfPrimaryHomeNotDeclared");
+      const primaryHomeSummaryRows = m.primaCasaMutuoEnabled
+        ? `
+        <tr><td>${tr("pdfPrimaryHomeAssignedTo")}</td><td>${primaryHomeAssignedLabel}</td></tr>
+        <tr><td>${tr("pdfPrimaryHomeMonthlyAmount")}</td><td>${eur(m.primaCasaMutuoImporto || 0)}</td></tr>
+        <tr><td>${tr("pdfPrimaryHomeSplit")}</td><td>${c1NameEsc} ${(m.primaCasaMutuoPerc1 || 0).toFixed(0)}% · ${c2NameEsc} ${(m.primaCasaMutuoPerc2 || 0).toFixed(0)}%</td></tr>
+        <tr><td>${tr("pdfPrimaryHomeAppliedOnlyColl")}</td><td>${m.primaCasaConsidered ? "OK" : tr("pdfPrimaryHomeNotDeclared")}</td></tr>`
+        : `<tr><td>${tr("pdfPrimaryHomeMortgage")}</td><td>${tr("pdfPrimaryHomeNotDeclared")}</td></tr>`;
       const isAssegno1 = m.assegnoDa1a2 > 0.005;
       const isAssegno2 = m.assegnoDa2a1 > 0.005;
       const n1 = escapeHtml(c1n());
@@ -3824,18 +4175,24 @@ const defaultExpenseItems = [
       let resultDetail;
       if (isAssegno1) {
         resultHtml = `
-          <div class="spieg-line"><strong>${n1} &rarr; ${n2}</strong></div>
-          <div class="spieg-line">${n1}: ${eur(m.quotaTeorica1)} &minus; ${eur(m.quotaDiretta1)} = <strong class="ok">${eur(m.assegnoDa1a2)}</strong></div>
+          <div class="spieg-result-flow">${n1} &rarr; ${n2}</div>
+          <div class="spieg-result-formula">${n1}: ${eur(m.quotaTeorica1)} &minus; ${eur(m.quotaDiretta1)}</div>
+          <div class="spieg-result-amount ok">${eur(m.assegnoDa1a2)}</div>
         `;
         resultDetail = tr("spiegDetailResultTransfer");
       } else if (isAssegno2) {
         resultHtml = `
-          <div class="spieg-line"><strong>${n2} &rarr; ${n1}</strong></div>
-          <div class="spieg-line">${n2}: ${eur(m.quotaTeorica2)} &minus; ${eur(m.quotaDiretta2)} = <strong class="ok">${eur(m.assegnoDa2a1)}</strong></div>
+          <div class="spieg-result-flow">${n2} &rarr; ${n1}</div>
+          <div class="spieg-result-formula">${n2}: ${eur(m.quotaTeorica2)} &minus; ${eur(m.quotaDiretta2)}</div>
+          <div class="spieg-result-amount ok">${eur(m.assegnoDa2a1)}</div>
         `;
         resultDetail = tr("spiegDetailResultTransfer");
       } else {
-        resultHtml = `<span class="ok">${tr("calcNoTransferSuggested")}</span>`;
+        const benefitRows = getCompensativeBenefitRows(m, c1n(), c2n());
+        const benefitsHtml = benefitRows.length
+          ? `<div class="spieg-line" style="margin-top:6px"><strong>${tr("calcCompBenefitsLabel")}:</strong> ${benefitRows.map((row) => `${escapeHtml(row.label)} (${eur(row.amount)})`).join(" | ")}</div>`
+          : "";
+        resultHtml = `<div class="spieg-result-empty ok">${tr("calcNoTransferSuggested")}</div>${benefitsHtml}`;
         resultDetail = tr("spiegDetailResultNoTransfer");
       }
 
@@ -3844,27 +4201,43 @@ const defaultExpenseItems = [
           <summary class="spieg-title">${tr("spiegTitle")}</summary>
           <div class="spieg-grid">
             <div class="spieg-item">
-              <div class="spieg-item-label">${tr("spiegRedditiLabel")} ${infoTip(tr("spiegDetailIncome"))}</div>
+              <div class="spieg-item-label"><span class="spieg-item-icon" aria-hidden="true">&#128184;</span>${tr("spiegRedditiLabel")} ${infoTip(tr("spiegDetailIncome"))}</div>
               <div class="spieg-item-body">
-                <div class="spieg-line"><span>${n1}:</span> <strong class="spieg-value">${eur(m.disp1)}</strong> <span class="spieg-sep">|</span> <span>${n2}:</span> <strong class="spieg-value">${eur(m.disp2)}</strong></div>
-                <div class="spieg-line">${tr("pdfWeight")}: <strong class="spieg-value">${n1} ${peso1Pct}%</strong> / <strong class="spieg-value">${n2} ${peso2Pct}%</strong></div>
+                <div class="spieg-people">
+                  <div class="spieg-person spieg-person--left">
+                    <div class="spieg-person-name">${n1}</div>
+                    <div class="spieg-person-value">${eur(m.disp1)}</div>
+                    <div class="spieg-person-sub">${tr("pdfWeight")}: ${peso1Pct}%</div>
+                  </div>
+                  <div class="spieg-person spieg-person--right">
+                    <div class="spieg-person-name">${n2}</div>
+                    <div class="spieg-person-value">${eur(m.disp2)}</div>
+                    <div class="spieg-person-sub">${tr("pdfWeight")}: ${peso2Pct}%</div>
+                  </div>
+                </div>
               </div>
             </div>
             <div class="spieg-item">
-              <div class="spieg-item-label">${tr("spiegSpeseLabel")} ${infoTip(tr("spiegDetailExpense"))}</div>
+              <div class="spieg-item-label"><span class="spieg-item-icon" aria-hidden="true">&#128221;</span>${tr("spiegSpeseLabel")} ${infoTip(tr("spiegDetailExpense"))}</div>
               <div class="spieg-item-body">
-                <div class="spieg-line"><strong class="spieg-value">${eur(m.speseTot)}</strong> &times; 35% = <strong class="spieg-value">${eur(m.fabbisognoFigli)}</strong></div>
+                <div class="spieg-equation">
+                  <span class="spieg-pill">${eur(m.speseTot)}</span>
+                  <span class="spieg-op">&times;</span>
+                  <span class="spieg-pill">35%</span>
+                  <span class="spieg-op">=</span>
+                  <span class="spieg-pill spieg-pill--result">${eur(m.fabbisognoFigli)}</span>
+                </div>
               </div>
             </div>
             <div class="spieg-item">
-              <div class="spieg-item-label">${tr("spiegPermLabel")} ${infoTip(tr("spiegDetailPerm"))}</div>
+              <div class="spieg-item-label"><span class="spieg-item-icon" aria-hidden="true">&#128197;</span>${tr("spiegPermLabel")} ${infoTip(tr("spiegDetailPerm"))}</div>
               <div class="spieg-item-body">
-                <div class="spieg-line"><span>${n1}:</span> <strong class="spieg-value">${m.perm1.toFixed(0)}%</strong> (${days1} ${tr("langDaysSuffix")}) &rarr; <strong class="spieg-value">${eur(m.quotaDiretta1)}</strong></div>
-                <div class="spieg-line"><span>${n2}:</span> <strong class="spieg-value">${m.perm2.toFixed(0)}%</strong> (${days2} ${tr("langDaysSuffix")}) &rarr; <strong class="spieg-value">${eur(m.quotaDiretta2)}</strong></div>
+                <div class="spieg-line spieg-line--kv"><span class="spieg-k">${n1}</span><span class="spieg-v">${m.perm1.toFixed(0)}% (${days1} ${tr("langDaysSuffix")}) &rarr; ${eur(m.quotaDiretta1)}</span></div>
+                <div class="spieg-line spieg-line--kv"><span class="spieg-k">${n2}</span><span class="spieg-v">${m.perm2.toFixed(0)}% (${days2} ${tr("langDaysSuffix")}) &rarr; ${eur(m.quotaDiretta2)}</span></div>
               </div>
             </div>
             <div class="spieg-item spieg-item--result">
-              <div class="spieg-item-label">${tr("spiegResultLabel")} ${infoTip(resultDetail)}</div>
+              <div class="spieg-item-label"><span class="spieg-item-icon" aria-hidden="true">&#127919;</span>${tr("spiegResultLabel")} ${infoTip(resultDetail)}</div>
               <div class="spieg-item-body spieg-item-body--result">${resultHtml}</div>
             </div>
           </div>
@@ -3884,6 +4257,31 @@ const defaultExpenseItems = [
       return tr("calcModeGenovaName");
     }
 
+    function getCompensativeBenefitRows(m, name1 = c1n(), name2 = c2n()) {
+      const rows = Array.isArray(m && m.compensativeBenefits) ? m.compensativeBenefits : [];
+      return rows
+        .filter((row) => row && Number(row.amount || 0) > 0.005)
+        .map((row) => {
+          const amount = Number(row.amount || 0);
+          if (row.type === "family") {
+            const spouse = Number(row.to) === 2 ? name2 : name1;
+            return { label: msg("calcBenefitFamilyAllowance", { spouse }), amount };
+          }
+          if (row.type === "primary-home-mortgage") {
+            const payer = Number(row.from) === 2 ? name2 : name1;
+            const receiver = Number(row.to) === 2 ? name2 : name1;
+            return { label: msg("calcBenefitPrimaryHomeMortgage", { payer, receiver }), amount };
+          }
+          return { label: tr("calcCompBenefitsLabel"), amount };
+        });
+    }
+
+    function formatCompensativeBenefitsInline(m, name1 = c1n(), name2 = c2n()) {
+      return getCompensativeBenefitRows(m, name1, name2)
+        .map((row) => `${row.label}: ${eur(row.amount)}`)
+        .join(" | ");
+    }
+
     function calculate(model = null) {
       const m = model || computeModel();
       const formulaNote = document.getElementById("formulaNote");
@@ -3895,6 +4293,7 @@ const defaultExpenseItems = [
       const normProfileName = escapeHtml(getSelectedNormProfileLabel());
       const negotiationPayerName = m.assegnoDa1a2 > 0.005 ? c1n() : (m.assegnoDa2a1 > 0.005 ? c2n() : c1n());
       const negotiationReceiverName = m.assegnoDa1a2 > 0.005 ? c2n() : (m.assegnoDa2a1 > 0.005 ? c1n() : c2n());
+      const benefitsInline = formatCompensativeBenefitsInline(m, c1n(), c2n());
 
       let modeSpecific = "";
       if (m.mode === "simple") {
@@ -3953,13 +4352,33 @@ const defaultExpenseItems = [
         ${m.incomeMode === "cu" ? `<br /><strong>${tr("calcIncomeBaseNote")}</strong> ${tr("cuNetNoteText")}` : ""}
       `;
 
-      let mainText = tr("calcNoTransferSuggested");
+      let mainHtml = `<span class="result-main-line">${escapeHtml(tr("calcNoTransferSuggested"))}</span>`;
       if (m.assegnoDa1a2 > 0.005) {
-        mainText = `${c1n()} \u2192 ${c2n()}: ${eur(m.assegnoDa1a2)} ${tr("pdfPerMonth")}`;
+        mainHtml = `
+          <span class="result-main-flow">${escapeHtml(c1n())} &rarr; ${escapeHtml(c2n())}</span>
+          <span class="result-main-amount">${eur(m.assegnoDa1a2)} ${escapeHtml(tr("pdfPerMonth"))}</span>
+        `;
       } else if (m.assegnoDa2a1 > 0.005) {
-        mainText = `${c2n()} \u2192 ${c1n()}: ${eur(m.assegnoDa2a1)} ${tr("pdfPerMonth")}`;
+        mainHtml = `
+          <span class="result-main-flow">${escapeHtml(c2n())} &rarr; ${escapeHtml(c1n())}</span>
+          <span class="result-main-amount">${eur(m.assegnoDa2a1)} ${escapeHtml(tr("pdfPerMonth"))}</span>
+        `;
+      } else {
+        const benefitRows = getCompensativeBenefitRows(m, c1n(), c2n());
+        if (benefitRows.length) {
+          const benefitsHtml = benefitRows
+            .map((row) => `<li><span>${escapeHtml(row.label)}</span><strong>${eur(row.amount)}</strong></li>`)
+            .join("");
+          mainHtml = `
+            <span class="result-main-line">${escapeHtml(tr("calcNoTransferSuggested"))}</span>
+            <span class="result-main-sub">${escapeHtml(tr("calcCompBenefitsLabel"))}</span>
+            <ul class="result-benefits-list">${benefitsHtml}</ul>
+          `;
+        } else if (benefitsInline) {
+          mainHtml = `<span class="result-main-line">${escapeHtml(msg("calcNoTransferWithBenefits", { benefits: benefitsInline }))}</span>`;
+        }
       }
-      resultMain.textContent = mainText;
+      resultMain.innerHTML = mainHtml;
 
       kpi.innerHTML = "";
 
@@ -3977,6 +4396,10 @@ const defaultExpenseItems = [
         [tr("pdfAmountPerChild"), eur((Math.max(m.assegnoDa1a2, m.assegnoDa2a1)) / m.figli), "warn"]
       ];
 
+      if (benefitsInline) {
+        items.push([tr("calcCompBenefitsLabel"), benefitsInline, "warn"]);
+      }
+
       if (m.incomeMode === "cu") {
         const ratio1 = m.r1Raw > 0 ? ((m.r1 * 12 / m.r1Raw) * 100) : 0;
         const ratio2 = m.r2Raw > 0 ? ((m.r2 * 12 / m.r2Raw) * 100) : 0;
@@ -4089,6 +4512,11 @@ const defaultExpenseItems = [
           <div class="pdf-explain-formula">${c2NameEsc}: ${eur(m.quotaTeorica2)} &minus; ${eur(m.quotaDiretta2)}</div>
           <div class="pdf-explain-amount">${eur(m.assegnoDa2a1)}</div>
         `;
+      } else if (compBenefits.length) {
+        explainResultHtml = `
+          <div class="pdf-explain-result-empty">${tr("calcNoTransferSuggested")}</div>
+          <div class="pdf-explain-formula"><strong>${tr("calcCompBenefitsLabel")}:</strong> ${compBenefits.map((row) => `${escapeHtml(row.label)} (${eur(row.amount)})`).join(" | ")}</div>
+        `;
       }
 
       const extraSpese1Monthly = getExtraordinaryMonthly(1);
@@ -4097,7 +4525,7 @@ const defaultExpenseItems = [
         const el = document.getElementById(`${spouseKey}d_${idx}`);
         const raw = String(el && el.value ? el.value : "").trim();
         if (!raw) return "";
-        return raw;
+        return `${escapeHtml(raw)} <span class="expense-detail-meta">(${raw.length}/${EXPENSE_DETAIL_MAX_CHARS})</span>`;
       };
       const speseRowsBase = expenseItems.map((item, i) => {
         const c1 = num(`c1_${i}`);
@@ -4105,8 +4533,8 @@ const defaultExpenseItems = [
         const d1 = formatExpenseDetail(i, "c1");
         const d2 = formatExpenseDetail(i, "c2");
         const details = [
-          d1 ? `${escapeHtml(c1n())}: ${escapeHtml(d1)}` : "",
-          d2 ? `${escapeHtml(c2n())}: ${escapeHtml(d2)}` : ""
+          d1 ? `${escapeHtml(c1n())}: ${d1}` : "",
+          d2 ? `${escapeHtml(c2n())}: ${d2}` : ""
         ].filter(Boolean).join("<br>");
         return `<tr>
           <td>${item.label}</td>
@@ -4125,7 +4553,16 @@ const defaultExpenseItems = [
           <td class="expense-detail-cell">–</td>
         </tr>`
         : "";
-      const speseRows = speseRowsBase + extraSpeseRow;
+      const firstHomeExpenseRow = (m.quotaMutuoSpese1 > 0.005 || m.quotaMutuoSpese2 > 0.005)
+        ? `<tr>
+          <td>${tr("pdfPrimaryHomeMortgage")}</td>
+          <td class="num">${m.quotaMutuoSpese1 > 0.005 ? eur(m.quotaMutuoSpese1) : "–"}</td>
+          <td class="num">${m.quotaMutuoSpese2 > 0.005 ? eur(m.quotaMutuoSpese2) : "–"}</td>
+          <td class="num bold">${eur((m.quotaMutuoSpese1 || 0) + (m.quotaMutuoSpese2 || 0))}</td>
+          <td class="expense-detail-cell">${tr("firstHomeAssignedToLabel")}: ${primaryHomeAssignedLabel}</td>
+        </tr>`
+        : "";
+      const speseRows = speseRowsBase + firstHomeExpenseRow + extraSpeseRow;
 
       const scenarioMetrics = [
         { label: tr("scenarioColMode"), val: (sm) => getModeName(sm.mode, sm.simplePerc), fmt: (v) => escapeHtml(v), numeric: false },
@@ -4309,6 +4746,7 @@ const defaultExpenseItems = [
   tr:nth-child(even) td { background: #f5faf9; }
   .num { text-align: right; font-variant-numeric: tabular-nums; }
   .bold { font-weight: 700; }
+  .expense-detail-meta { color: #5f7873; font-size: 7pt; font-weight: 600; white-space: nowrap; }
   .total-row td { background: #ddf0ec !important; font-weight: 700; border-top: 1.5px solid #74c3b9; }
 
   /* ── TWO-COL LAYOUT ── */
@@ -4540,6 +4978,7 @@ const defaultExpenseItems = [
         <tr><td>${tr("pdfChildrenCount")}</td><td>${m.figli}</td></tr>
         <tr><td>${tr("pdfPermanence")} ${c1n()}</td><td>${m.perm1.toFixed(0)}%</td></tr>
         <tr><td>${tr("pdfPermanence")} ${c2n()}</td><td>${m.perm2.toFixed(0)}%</td></tr>
+        ${primaryHomeSummaryRows}
       </tbody>
     </table>
     <table class="data-table">
@@ -4616,6 +5055,21 @@ const defaultExpenseItems = [
   </div>
 </div>
 
+<div class="section">
+  <div class="section-title">${tr("pdfCompBenefitsSection")}</div>
+  <table>
+    <thead>
+      <tr>
+        <th>${tr("pdfCompBenefitsItem")}</th>
+        <th class="num">${msg("pdfCompBenefitsAmount", { currency: currentCurrency })}</th>
+      </tr>
+    </thead>
+    <tbody>
+      ${compBenefitsRowsHtml}
+    </tbody>
+  </table>
+</div>
+
 <!-- KPI -->
 <div class="section">
   <div class="section-title">${tr("pdfKpiSection")}</div>
@@ -4797,6 +5251,10 @@ ${scenarioLab.length ? `
         assegnoPercepito2: num("assegnoPercepito2"),
         assegnoPagato2: num("assegnoPagato2"),
         assegnoFam2: num("assegnoFam2"),
+        primaCasaMutuoEnabled: document.getElementById("primaCasaMutuoEnabled")?.checked ? 1 : 0,
+        primaCasaMutuoImporto: num("primaCasaMutuoImporto"),
+        primaCasaAssegnataA: String(document.getElementById("primaCasaAssegnataA")?.value || ""),
+        primaCasaMutuoPerc1: num("primaCasaMutuoPerc1"),
         straordAnn1: num("straordAnn1"),
         straordAnn2: num("straordAnn2")
       };
@@ -4804,7 +5262,9 @@ ${scenarioLab.length ? `
         c1: num(`c1_${i}`),
         c2: num(`c2_${i}`),
         d1: String(document.getElementById(`c1d_${i}`)?.value || "").trim(),
-        d2: String(document.getElementById(`c2d_${i}`)?.value || "").trim()
+        d2: String(document.getElementById(`c2d_${i}`)?.value || "").trim(),
+        d1Ui: collectExpenseDetailUiMeta("c1", i),
+        d2Ui: collectExpenseDetailUiMeta("c2", i)
       }));
       const expenseItemsState = expenseItems.map((item) => ({ label: item.label, help: item.help }));
       const scenariosState = scenarioLab.map((scenario, idx) => ({
@@ -4835,7 +5295,12 @@ ${scenarioLab.length ? `
       if (!state || !state.base || !state.spese) return;
       Object.entries(state.base).forEach(([k, v]) => {
         const el = document.getElementById(k);
-        if (el) el.value = v;
+        if (!el) return;
+        if (el.type === "checkbox") {
+          el.checked = Number(v || 0) > 0;
+        } else {
+          el.value = v;
+        }
       });
       if (Array.isArray(state.expenseItems) && state.expenseItems.length) {
         expenseItems = state.expenseItems.map((item, idx) => normalizeExpenseItem(item, idx));
@@ -4876,6 +5341,7 @@ ${scenarioLab.length ? `
       applyStaticTranslations();
       applyUiViewStateToDom();
       importPermanenceCalendarState(state.permanenceCalendar);
+      updateFirstHomeMortgageUi();
       updateSpouseLabels();
       buildExpenseRows();
       syncPermanenza("calendar");
@@ -4888,16 +5354,22 @@ ${scenarioLab.length ? `
         if (c2) c2.value = row.c2;
         if (d1) d1.value = String(row && row.d1 ? row.d1 : "");
         if (d2) d2.value = String(row && row.d2 ? row.d2 : "");
+        applyExpenseDetailUiMeta("c1", i, row && row.d1Ui ? row.d1Ui : null);
+        applyExpenseDetailUiMeta("c2", i, row && row.d2Ui ? row.d2Ui : null);
       });
       refreshExpenseDetailButtonState();
     }
 
     function resetAll() {
-      document.querySelectorAll("input[type='number'], input[data-numeric='1']").forEach((el) => {
+      document.querySelectorAll("input[type='number'], input[type='range'], input[data-numeric='1']").forEach((el) => {
         if (el.id !== "perm2") {
           el.value = el.defaultValue || 0;
         }
       });
+      const firstHomeEnabled = document.getElementById("primaCasaMutuoEnabled");
+      const firstHomeAssigned = document.getElementById("primaCasaAssegnataA");
+      if (firstHomeEnabled) firstHomeEnabled.checked = !!firstHomeEnabled.defaultChecked;
+      if (firstHomeAssigned) firstHomeAssigned.value = "";
       permanenceCalendarState.byMonth = {};
       selectedScenarioIdx = -1;
       uiViewState.spiegOpen = true;
@@ -4911,6 +5383,7 @@ ${scenarioLab.length ? `
       renderPermanenceCalendar(monthValue);
       applyPermanenceFromCalendar(monthValue, { silentRender: true });
       applyUiViewStateToDom();
+      updateFirstHomeMortgageUi();
       syncPermanenza();
       renderAll();
     }
@@ -5026,7 +5499,10 @@ ${scenarioLab.length ? `
           const willOpen = wrap.classList.contains("is-hidden");
           wrap.classList.toggle("is-hidden", !willOpen);
           detailBtn.classList.toggle("is-open", willOpen);
-          if (willOpen && target) target.focus();
+          if (target) {
+            updateExpenseDetailTextareaUi(target);
+            if (willOpen) target.focus();
+          }
         }
         return;
       }
@@ -5039,6 +5515,7 @@ ${scenarioLab.length ? `
 
     rowsSpese.addEventListener("input", (e) => {
       if (e.target && e.target.matches("textarea.spese-detail-text")) {
+        updateExpenseDetailTextareaUi(e.target);
         refreshExpenseDetailButtonState();
       }
     });
@@ -5145,11 +5622,13 @@ ${scenarioLab.length ? `
     }
 
     document.addEventListener("input", (e) => {
-      if (e.target && e.target.matches("input[type='number'], input[data-numeric='1']")) {
+      if (e.target && e.target.matches("input[type='number'], input[type='range'], input[data-numeric='1']")) {
         if (e.target.id === "perm1") {
           syncPermanenza("perm1");
         } else if (e.target.id === "perm2") {
           syncPermanenza("perm2");
+        } else if (e.target.id === "primaCasaMutuoPerc1" || e.target.id === "primaCasaMutuoImporto") {
+          updateFirstHomeMortgageUi();
         } else if (e.target.id === "reddito1" || e.target.id === "reddito2") {
           const activeMode = document.getElementById("incomeMode")?.value || "monthly";
           incomeValuesByMode[activeMode] = {
@@ -5170,6 +5649,9 @@ ${scenarioLab.length ? `
         }
         updateModeUi();
         renderAll();
+      } else if (e.target && (e.target.id === "primaCasaMutuoEnabled" || e.target.id === "primaCasaAssegnataA")) {
+        updateFirstHomeMortgageUi();
+        renderAll();
       }
     });
 
@@ -5213,6 +5695,7 @@ ${scenarioLab.length ? `
     updateAuthUi();
     renderCloudHistoryPanel();
     applyUiViewStateToDom();
+    updateFirstHomeMortgageUi();
     syncPermanenza();
     incomeModeLast = document.getElementById("incomeMode").value || "monthly";
     incomeValuesByMode[incomeModeLast] = {