mantenimento-app 2.1.3 → 2.1.5

package/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." },
@@ -3244,14 +3243,18 @@ const defaultExpenseItems = [
       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;
@@ -3301,12 +3304,10 @@ const defaultExpenseItems = [
       let primaCasaTransfer1to2 = 0;
       let primaCasaTransfer2to1 = 0;
       if (primaCasaConsidered) {
-        const quotaMutuo1 = primaCasaMutuoImporto * (primaCasaMutuoPerc1 / 100);
-        const quotaMutuo2 = primaCasaMutuoImporto - quotaMutuo1;
         if (primaCasaAssegnataA === "1") {
-          primaCasaTransfer2to1 = Math.max(0, quotaMutuo2);
+          primaCasaTransfer2to1 = Math.max(0, quotaMutuoSpese2);
         } else if (primaCasaAssegnataA === "2") {
-          primaCasaTransfer1to2 = Math.max(0, quotaMutuo1);
+          primaCasaTransfer1to2 = Math.max(0, quotaMutuoSpese1);
         }
       }
 
@@ -3326,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,
@@ -3446,6 +3448,12 @@ const defaultExpenseItems = [
       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;
@@ -3454,6 +3462,7 @@ const defaultExpenseItems = [
       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) {
@@ -3461,6 +3470,9 @@ const defaultExpenseItems = [
       }
 
       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) {
@@ -3471,6 +3483,11 @@ const defaultExpenseItems = [
           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']");
@@ -4335,17 +4352,35 @@ 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 {
-        if (benefitsInline) {
-          mainText = msg("calcNoTransferWithBenefits", { benefits: benefitsInline });
+        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>
+            <div class="result-benefits-box">
+              <span class="result-main-sub">${escapeHtml(tr("calcCompBenefitsLabel"))}</span>
+              <ul class="result-benefits-list">${benefitsHtml}</ul>
+            </div>
+          `;
+        } else if (benefitsInline) {
+          mainHtml = `<span class="result-main-line">${escapeHtml(msg("calcNoTransferWithBenefits", { benefits: benefitsInline }))}</span>`;
         }
       }
-      resultMain.textContent = mainText;
+      resultMain.innerHTML = mainHtml;
 
       kpi.innerHTML = "";
 
@@ -4520,7 +4555,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 },
@@ -5319,7 +5363,7 @@ ${scenarioLab.length ? `
     }
 
     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;
         }
@@ -5580,11 +5624,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] = {

package/backend/calculate-model.js

@@ -38,6 +38,8 @@ function calculateModel(input) {
   const rawMutuoPerc1 = input.primaCasaMutuoPerc1 === undefined ? 50 : input.primaCasaMutuoPerc1;
   const primaCasaMutuoPerc1 = clamp(toNumber(rawMutuoPerc1), 0, 100);
   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);
@@ -46,8 +48,10 @@ function calculateModel(input) {
 
   const c1Spese = Array.isArray(input.c1Spese) ? input.c1Spese : [];
   const c2Spese = Array.isArray(input.c2Spese) ? input.c2Spese : [];
-  const spese1 = c1Spese.reduce((acc, n) => acc + toNumber(n), 0);
-  const spese2 = c2Spese.reduce((acc, n) => acc + toNumber(n), 0);
+  const speseBase1 = c1Spese.reduce((acc, n) => acc + toNumber(n), 0);
+  const speseBase2 = c2Spese.reduce((acc, n) => acc + toNumber(n), 0);
+  const spese1 = speseBase1 + quotaMutuoSpese1;
+  const spese2 = speseBase2 + quotaMutuoSpese2;
   const speseTot = spese1 + spese2;
 
   const disp1 = r1 + aPerc1 + aFam1 - aPag1 - spese1;
@@ -102,12 +106,10 @@ function calculateModel(input) {
   let primaCasaTransfer1to2 = 0;
   let primaCasaTransfer2to1 = 0;
   if (primaCasaConsidered) {
-    const quotaMutuo1 = primaCasaMutuoImporto * (primaCasaMutuoPerc1 / 100);
-    const quotaMutuo2 = primaCasaMutuoImporto - quotaMutuo1;
     if (assigned === '1') {
-      primaCasaTransfer2to1 = Math.max(0, quotaMutuo2);
+      primaCasaTransfer2to1 = Math.max(0, quotaMutuoSpese2);
     } else if (assigned === '2') {
-      primaCasaTransfer1to2 = Math.max(0, quotaMutuo1);
+      primaCasaTransfer1to2 = Math.max(0, quotaMutuoSpese1);
     }
   }
 
@@ -127,6 +129,7 @@ function calculateModel(input) {
     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,

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." },
@@ -3244,14 +3243,18 @@ const defaultExpenseItems = [
       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;
@@ -3301,12 +3304,10 @@ const defaultExpenseItems = [
       let primaCasaTransfer1to2 = 0;
       let primaCasaTransfer2to1 = 0;
       if (primaCasaConsidered) {
-        const quotaMutuo1 = primaCasaMutuoImporto * (primaCasaMutuoPerc1 / 100);
-        const quotaMutuo2 = primaCasaMutuoImporto - quotaMutuo1;
         if (primaCasaAssegnataA === "1") {
-          primaCasaTransfer2to1 = Math.max(0, quotaMutuo2);
+          primaCasaTransfer2to1 = Math.max(0, quotaMutuoSpese2);
         } else if (primaCasaAssegnataA === "2") {
-          primaCasaTransfer1to2 = Math.max(0, quotaMutuo1);
+          primaCasaTransfer1to2 = Math.max(0, quotaMutuoSpese1);
         }
       }
 
@@ -3326,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,
@@ -3446,6 +3448,12 @@ const defaultExpenseItems = [
       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;
@@ -3454,6 +3462,7 @@ const defaultExpenseItems = [
       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) {
@@ -3461,6 +3470,9 @@ const defaultExpenseItems = [
       }
 
       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) {
@@ -3471,6 +3483,11 @@ const defaultExpenseItems = [
           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']");
@@ -4335,17 +4352,35 @@ 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 {
-        if (benefitsInline) {
-          mainText = msg("calcNoTransferWithBenefits", { benefits: benefitsInline });
+        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>
+            <div class="result-benefits-box">
+              <span class="result-main-sub">${escapeHtml(tr("calcCompBenefitsLabel"))}</span>
+              <ul class="result-benefits-list">${benefitsHtml}</ul>
+            </div>
+          `;
+        } else if (benefitsInline) {
+          mainHtml = `<span class="result-main-line">${escapeHtml(msg("calcNoTransferWithBenefits", { benefits: benefitsInline }))}</span>`;
         }
       }
-      resultMain.textContent = mainText;
+      resultMain.innerHTML = mainHtml;
 
       kpi.innerHTML = "";
 
@@ -4520,7 +4555,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 },
@@ -5319,7 +5363,7 @@ ${scenarioLab.length ? `
     }
 
     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;
         }
@@ -5580,11 +5624,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] = {

package/frontend/public/index.html

@@ -377,7 +377,20 @@
                 <label for="primaCasaMutuoPerc1" class="label-row"><span id="lblPrimaCasaMutuoPerc1">Quota mutuo a carico Coniuge 1 (%)</span>
                   <span class="hint" id="hintPrimaCasaMutuoPerc1" title="Percentuale della rata mutuo pagata da Coniuge 1. La quota di Coniuge 2 e complementare a 100%.">i</span>
                 </label>
-                <input id="primaCasaMutuoPerc1" type="number" min="0" max="100" step="1" value="50" />
+                <div class="mortgage-split-slider" id="primaCasaMutuoSliderWrap">
+                  <div class="mortgage-split-side mortgage-split-side-left" id="primaCasaSplitLeft">
+                    <div class="mortgage-split-name" id="primaCasaSplitLeftName">Coniuge 1</div>
+                    <div class="mortgage-split-amount" id="primaCasaSplitLeftAmount">0 EUR</div>
+                  </div>
+                  <div class="mortgage-split-range-wrap">
+                    <input id="primaCasaMutuoPerc1" type="range" min="0" max="100" step="1" value="50" />
+                    <div class="mortgage-split-center" id="primaCasaSplitCenter">50% / 50%</div>
+                  </div>
+                  <div class="mortgage-split-side mortgage-split-side-right" id="primaCasaSplitRight">
+                    <div class="mortgage-split-name" id="primaCasaSplitRightName">Coniuge 2</div>
+                    <div class="mortgage-split-amount" id="primaCasaSplitRightAmount">0 EUR</div>
+                  </div>
+                </div>
                 <div class="extra-monthly" id="primaCasaMutuoSplitInfo">Ripartizione mutuo: Coniuge 1 50% · Coniuge 2 50%</div>
               </div>
             </div>
@@ -488,7 +501,17 @@
           <p class="note">
             Questo strumento e solo orientativo e non sostituisce una valutazione legale/professionale del caso concreto.
           </p>
-          <div id="spiegPanel" class="spieg-panel"></div>
+          <div id="spiegPanel" class="spieg-panel">
+            <details class="spieg-details" open>
+              <summary class="spieg-title">💡 Perche questo risultato?</summary>
+              <div class="spieg-grid">
+                <div class="spieg-item">
+                  <div class="spieg-item-label">Stato calcolo</div>
+                  <div class="spieg-item-body">Sezione in aggiornamento automatico: modifica i dati per vedere la spiegazione dettagliata del risultato.</div>
+                </div>
+              </div>
+            </details>
+          </div>
         </div>
       </section>
     </div>
@@ -563,6 +586,7 @@
   <script src="supabase.min.js"></script>
   <script src="fabric.min.js"></script>
   <script src="html2pdf.bundle.min.js"></script>
-    <script src="app.js?v=2.1.3"></script>
+    <script src="app.js?v=2.1.5"></script>
 </body>
 </html>
+

package/frontend/public/styles.css

@@ -80,6 +80,37 @@
       gap: 10px;
     }
 
+    .runtime-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      margin-right: 2px;
+    }
+
+    .runtime-badge-chip {
+      display: inline-flex;
+      align-items: center;
+      min-height: 30px;
+      padding: 5px 10px;
+      border-radius: 999px;
+      font-size: 0.72rem;
+      font-weight: 800;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      border: 1px solid rgba(255,255,255,0.28);
+      box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
+    }
+
+    .runtime-badge-chip--frontend {
+      color: #fff6da;
+      background: linear-gradient(135deg, rgba(145, 77, 7, 0.92), rgba(201, 118, 18, 0.92));
+    }
+
+    .runtime-badge-chip--api {
+      color: #f4fffb;
+      background: linear-gradient(135deg, rgba(17, 101, 92, 0.95), rgba(29, 146, 128, 0.95));
+    }
+
     .top-actions {
       position: relative;
       display: inline-block;
@@ -819,6 +850,113 @@
       font-weight: 700;
       color: #184a44;
     }
+
+    .mortgage-split-slider {
+      margin-top: 6px;
+      border: 1px solid #b9d6cf;
+      border-radius: 14px;
+      background:
+        radial-gradient(120% 160% at 0% 0%, rgba(229, 247, 242, 0.8), transparent 58%),
+        radial-gradient(120% 160% at 100% 0%, rgba(255, 241, 214, 0.8), transparent 58%),
+        linear-gradient(180deg, #fafdfc, #eef7f5);
+      padding: 10px;
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) minmax(180px, 2fr) minmax(0, 1fr);
+      gap: 8px;
+      align-items: center;
+      transition: opacity 0.2s ease;
+    }
+
+    .mortgage-split-slider.is-disabled {
+      opacity: 0.58;
+    }
+
+    .mortgage-split-side {
+      border: 1px solid #c6ded8;
+      border-radius: 11px;
+      padding: 8px;
+      background: rgba(255, 255, 255, 0.84);
+      min-height: 66px;
+      display: grid;
+      align-content: center;
+      gap: 2px;
+    }
+
+    .mortgage-split-side-left {
+      box-shadow: inset 3px 0 0 #1b8d7f;
+    }
+
+    .mortgage-split-side-right {
+      box-shadow: inset -3px 0 0 #d89a35;
+      text-align: right;
+    }
+
+    .mortgage-split-name {
+      font-size: 0.76rem;
+      font-weight: 800;
+      color: #2a4a46;
+      overflow-wrap: anywhere;
+    }
+
+    .mortgage-split-amount {
+      font-size: 0.95rem;
+      font-weight: 900;
+      color: #124f48;
+      letter-spacing: 0.2px;
+    }
+
+    .mortgage-split-range-wrap {
+      position: relative;
+      padding: 20px 0 10px;
+    }
+
+    .mortgage-split-range-wrap input[type="range"] {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 100%;
+      height: 8px;
+      border-radius: 999px;
+      background: linear-gradient(90deg, #2b9d8e 0%, #6cb9a9 46%, #dfb264 54%, #cb8a2d 100%);
+      outline: none;
+      margin: 0;
+    }
+
+    .mortgage-split-range-wrap input[type="range"]::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 22px;
+      height: 22px;
+      border-radius: 50%;
+      border: 2px solid #ffffff;
+      background: radial-gradient(circle at 35% 30%, #ffffff 0%, #e8f8f5 42%, #177a6f 100%);
+      box-shadow: 0 3px 9px rgba(13, 70, 64, 0.35);
+      cursor: pointer;
+    }
+
+    .mortgage-split-range-wrap input[type="range"]::-moz-range-thumb {
+      width: 22px;
+      height: 22px;
+      border-radius: 50%;
+      border: 2px solid #ffffff;
+      background: radial-gradient(circle at 35% 30%, #ffffff 0%, #e8f8f5 42%, #177a6f 100%);
+      box-shadow: 0 3px 9px rgba(13, 70, 64, 0.35);
+      cursor: pointer;
+    }
+
+    .mortgage-split-center {
+      position: absolute;
+      top: -2px;
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: 0.74rem;
+      font-weight: 900;
+      color: #114c45;
+      background: #ffffff;
+      border: 1px solid #b8d5ce;
+      border-radius: 999px;
+      padding: 2px 8px;
+      white-space: nowrap;
+    }
     
     .label-row {
       display: inline-flex;
@@ -1024,9 +1162,16 @@
       max-width: 110px;
       padding-right: 9px;
       border-color: #0b6e66;
-      color: #0b6e66;
-      background: #e8f6f2;
+      color: #ffffff;
+      background: linear-gradient(135deg, #0b6e66, #149a8f);
       font-weight: 700;
+      box-shadow: 0 0 0 1px rgba(11, 110, 102, 0.28), 0 3px 8px rgba(11, 110, 102, 0.18);
+    }
+
+    .spese-detail-btn.has-note::before {
+      content: "✓";
+      font-size: 12px;
+      font-weight: 900;
     }
 
     .spese-detail-btn.has-note .spese-detail-label {
@@ -1040,7 +1185,9 @@
     .spese-detail-text {
       width: 100%;
       min-height: 52px;
-      resize: vertical;
+      max-height: 178px;
+      resize: none;
+      overflow-y: hidden;
       border-radius: 8px;
       border: 1px solid #c8dad4;
       background: #f9fcfb;
@@ -1050,6 +1197,18 @@
       color: #204644;
     }
 
+    .spese-detail-counter {
+      margin-top: 3px;
+      font-size: 0.66rem;
+      color: #56716d;
+      text-align: right;
+      font-weight: 700;
+    }
+
+    .spese-detail-counter.is-limit {
+      color: #9d3c2f;
+    }
+
     .spese-partial {
       font-size: 0.66rem;
       color: #2f4745;
@@ -1220,6 +1379,299 @@
       border: 1px solid #c6cdc3;
     }
 
+    /* ── Scenario Lab ─────────────────────────────────────────────── */
+    .scenario-lab-card {
+      margin-top: 14px;
+    }
+
+    .scenario-lab-actions {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+      margin-bottom: 12px;
+    }
+
+    .scenario-lab-empty {
+      color: #6b7e78;
+      font-style: italic;
+      margin: 0;
+    }
+
+    .scenario-table-wrap {
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    .scenario-table {
+      border-collapse: collapse;
+      width: 100%;
+      font-size: 0.82rem;
+    }
+
+    .scenario-table th,
+    .scenario-table td {
+      border: 1px solid var(--line);
+      padding: 6px 10px;
+      text-align: center;
+      vertical-align: middle;
+    }
+
+    .scenario-table thead th {
+      background: linear-gradient(90deg, rgba(249,248,242,0.95), rgba(237,246,243,0.95));
+      font-weight: 700;
+    }
+
+    .scenario-table td.metric-label,
+    .scenario-table th.metric-label {
+      text-align: left;
+      font-weight: 600;
+      background: rgba(243,248,245,0.7);
+      white-space: nowrap;
+      min-width: 110px;
+    }
+
+    .scenario-col-head { min-width: 120px; }
+
+    .scenario-badge {
+      display: inline-block;
+      background: var(--brand);
+      color: #fff;
+      border-radius: 4px;
+      padding: 1px 7px;
+      font-size: 0.74rem;
+      font-weight: 700;
+    }
+
+    .scenario-val { min-width: 90px; white-space: nowrap; }
+
+    .scenario-remove-btn {
+      font-size: 0.72rem !important;
+      padding: 2px 8px !important;
+      margin-top: 4px;
+      min-height: unset !important;
+    }
+
+    .delta-col, .delta-col-head { min-width: 76px; font-weight: 600; white-space: nowrap; }
+    .delta-pos { color: #18855e; }
+    .delta-neg { color: #c0392b; }
+    .delta-zero { color: #7a8b80; }
+
+    /* ── Spiegabilita ─────────────────────────────────────────────── */
+    .spieg-panel { margin-top: 12px; }
+
+    .spieg-details {
+      border: 1px solid #bfd7cf;
+      border-radius: 14px;
+      overflow: hidden;
+      background: linear-gradient(180deg, #fbfdfc, #f4f9f7);
+      box-shadow: 0 8px 24px rgba(8, 74, 67, 0.08);
+    }
+
+    .spieg-title {
+      cursor: pointer;
+      padding: 10px 14px;
+      background: linear-gradient(90deg, rgba(248, 247, 240, 0.95), rgba(229, 243, 238, 0.95));
+      font-weight: 700;
+      font-size: 0.92rem;
+      line-height: 1.3;
+      user-select: none;
+      list-style: none;
+      color: #194f48;
+      border-bottom: 1px solid #d3e4de;
+    }
+
+    .spieg-title::-webkit-details-marker { display: none; }
+    .spieg-title::before { content: "\25B8\0020"; font-size: 0.76rem; color: #1e6d63; }
+    details[open] .spieg-title::before { content: "\25BE\0020"; }
+
+    .spieg-grid {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 10px;
+      padding: 12px;
+    }
+
+    @media (max-width: 720px) {
+      .spieg-grid { grid-template-columns: 1fr; }
+    }
+
+    .spieg-item {
+      background: #f8fcfa;
+      border: 1px solid #cfe3dc;
+      border-radius: 10px;
+      padding: 10px 12px;
+      font-size: 0.82rem;
+      min-width: 0;
+    }
+
+    .spieg-item--result {
+      grid-column: 1 / -1;
+      background: linear-gradient(120deg, #ebf8f2, #e3f4ed);
+      border-color: #a5d2be;
+    }
+
+    .spieg-item-label {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      font-weight: 800;
+      font-size: 0.73rem;
+      color: #0f6a61;
+      margin-bottom: 8px;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+    }
+
+    .spieg-item-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 18px;
+      height: 18px;
+      border-radius: 999px;
+      background: #e0f1eb;
+      color: #0f6a61;
+      font-size: 0.73rem;
+      line-height: 1;
+    }
+
+    .spieg-item-body {
+      display: grid;
+      gap: 8px;
+      line-height: 1.5;
+      min-width: 0;
+    }
+
+    .spieg-people {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 8px;
+    }
+
+    @media (max-width: 560px) {
+      .spieg-people { grid-template-columns: 1fr; }
+    }
+
+    .spieg-person {
+      border: 1px solid #d8e8e2;
+      border-radius: 8px;
+      background: #ffffff;
+      padding: 8px;
+      min-width: 0;
+    }
+
+    .spieg-person--left { border-left: 4px solid #1d7d72; }
+    .spieg-person--right { border-left: 4px solid #bf7a1f; }
+
+    .spieg-person-name {
+      font-weight: 700;
+      color: #204e48;
+      margin-bottom: 2px;
+      overflow-wrap: anywhere;
+    }
+
+    .spieg-person-value {
+      font-size: 1rem;
+      font-weight: 800;
+      color: #0f6259;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .spieg-person-sub {
+      margin-top: 2px;
+      color: #5f7772;
+      font-size: 0.74rem;
+    }
+
+    .spieg-equation {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 6px;
+    }
+
+    .spieg-pill {
+      display: inline-flex;
+      align-items: center;
+      padding: 2px 8px;
+      border-radius: 999px;
+      background: #e8f3ef;
+      border: 1px solid #cbe1d9;
+      color: #184a44;
+      font-weight: 700;
+      font-variant-numeric: tabular-nums;
+      max-width: 100%;
+      overflow-wrap: anywhere;
+    }
+
+    .spieg-pill--result {
+      background: #dff3ea;
+      border-color: #9dceb8;
+      color: #0a6157;
+    }
+
+    .spieg-op {
+      color: #6d817c;
+      font-weight: 700;
+    }
+
+    .spieg-line--kv {
+      display: grid;
+      grid-template-columns: minmax(92px, 128px) minmax(0, 1fr);
+      gap: 8px;
+      align-items: baseline;
+    }
+
+    @media (max-width: 560px) {
+      .spieg-line--kv { grid-template-columns: 1fr; gap: 2px; }
+    }
+
+    .spieg-k {
+      font-weight: 700;
+      color: #295b54;
+      overflow-wrap: anywhere;
+    }
+
+    .spieg-v {
+      color: #123f39;
+      font-variant-numeric: tabular-nums;
+      overflow-wrap: anywhere;
+    }
+
+    .spieg-item-body--result {
+      background: #ffffff;
+      border: 1px dashed #9fceb9;
+      border-radius: 10px;
+      padding: 10px 12px;
+      gap: 6px;
+    }
+
+    .spieg-result-flow {
+      font-weight: 800;
+      color: #0f6a61;
+      letter-spacing: 0.01em;
+    }
+
+    .spieg-result-formula {
+      color: #284e49;
+      overflow-wrap: anywhere;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .spieg-result-amount {
+      font-size: 1.2rem;
+      font-weight: 900;
+      line-height: 1.2;
+      color: #0e6b62;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .spieg-result-empty {
+      font-size: 0.95rem;
+      font-weight: 800;
+      color: #0f6a61;
+    }
+
     @page {
       size: A4 landscape;
       margin: 8mm;
@@ -1633,15 +2085,114 @@
     .result-pill {
       border-radius: 14px;
       padding: 14px;
-      background: linear-gradient(165deg, #f4faf8, #ebf6f3);
-      border: 1px solid #bfd7d1;
+      background:
+        radial-gradient(120% 180% at 0% -20%, rgba(215, 243, 236, 0.95), transparent 56%),
+        radial-gradient(120% 180% at 100% -20%, rgba(255, 237, 201, 0.92), transparent 56%),
+        linear-gradient(165deg, #f7fcfb, #ebf6f3);
+      border: 1px solid #afcfc7;
+      box-shadow: 0 12px 26px rgba(17, 70, 64, 0.16);
       margin-bottom: 10px;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .result-pill::after {
+      content: "";
+      position: absolute;
+      inset: -28px auto auto -28px;
+      width: 120px;
+      height: 120px;
+      border-radius: 50%;
+      background: radial-gradient(circle, rgba(59, 170, 154, 0.2) 0%, rgba(59, 170, 154, 0) 70%);
+      pointer-events: none;
     }
 
     .result-pill .big {
-      font-size: 1.58rem;
-      font-weight: 800;
+      font-size: 1.3rem;
+      font-weight: 900;
       margin-top: 6px;
+      line-height: 1.34;
+      letter-spacing: 0.2px;
+      color: #123b38;
+    }
+
+    .result-main-flow {
+      display: block;
+      font-size: 1.02rem;
+      font-weight: 800;
+      color: #124741;
+      text-transform: uppercase;
+      letter-spacing: 0.3px;
+      margin-bottom: 3px;
+    }
+
+    .result-main-amount {
+      display: block;
+      font-size: 1.68rem;
+      font-weight: 900;
+      color: #0b625b;
+      text-shadow: 0 1px 0 rgba(255,255,255,0.7);
+    }
+
+    .result-main-line {
+      display: block;
+      font-size: 1.25rem;
+      font-weight: 800;
+      color: #1c3f3b;
+      margin-bottom: 6px;
+    }
+
+    .result-main-sub {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      font-size: 0.76rem;
+      text-transform: uppercase;
+      letter-spacing: 0.4px;
+      font-weight: 900;
+      color: #4e665f;
+      background: rgba(255,255,255,0.78);
+      border: 1px solid #bfd6d0;
+      border-radius: 999px;
+      padding: 3px 9px;
+      margin-bottom: 0;
+    }
+
+    .result-benefits-box {
+      border: 1px solid #bdd6cf;
+      border-radius: 12px;
+      background: linear-gradient(180deg, rgba(249, 253, 252, 0.92), rgba(241, 249, 246, 0.92));
+      padding: 8px;
+      display: grid;
+      gap: 8px;
+    }
+
+    .result-benefits-list {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      display: grid;
+      gap: 6px;
+    }
+
+    .result-benefits-list li {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 8px;
+      padding: 7px 9px;
+      border-radius: 10px;
+      border: 1px solid #c5dbd5;
+      background: rgba(255,255,255,0.86);
+      font-size: 0.9rem;
+      font-weight: 700;
+      color: #284744;
+    }
+
+    .result-benefits-list strong {
+      white-space: nowrap;
+      color: #0f5f57;
+      font-size: 0.95rem;
     }
 
     .live-box {
@@ -2242,6 +2793,18 @@
       .extra-grid {
         grid-template-columns: 1fr;
       }
+
+      .mortgage-split-slider {
+        grid-template-columns: 1fr;
+      }
+
+      .mortgage-split-side-right {
+        text-align: left;
+      }
+
+      .mortgage-split-range-wrap {
+        order: -1;
+      }
       .spieg-grid {
         grid-template-columns: 1fr;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mantenimento-app",
-  "version": "2.1.3",
+  "version": "2.1.5",
   "description": "Frontend + backend architecture for the mantenimento calculator",
   "type": "commonjs",
   "main": "backend/calculate-model.js",