npm - mantenimento-app - Versions diffs - 2.3.0 → 2.4.0 - Mend

mantenimento-app 2.3.0 → 2.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/app.js +74 -125
package/frontend/public/app.js +74 -125
package/frontend/public/index.html +8 -8
package/frontend/public/styles.css +148 -50
package/package.json +1 -1

package/app.js CHANGED Viewed

@@ -4,7 +4,6 @@ const defaultExpenseItems = [
       { label: "🛒 Cibo/Alimenti", help: "Spesa alimentare mensile imputabile al nucleo familiare." },
       { label: "👕 Abbigliamento", help: "Spese medie mensili per abbigliamento dei figli." },
       { label: "💳 Finanziamenti in corso (extra mutuo)", help: "Rate mensili di finanziamenti diversi dal mutuo." },
-      { label: "💳 Finanziamenti in corso (extra mutuo)", help: "Rate mensili di finanziamenti diversi dal mutuo." },
       { label: "🚗 Spese macchina", help: "Carburante, assicurazione, bollo, manutenzione ordinaria." },
       { label: "🏢 Amministrazione condominio", help: "Quote condominiali ordinarie e costi amministrativi ricorrenti." },
       { label: "🎒 Spese scolastiche/mensa", help: "Costi scolastici ricorrenti, mensa e contributi periodici." },
@@ -279,13 +278,11 @@ const defaultExpenseItems = [
         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 i benefici economici della prima casa assegnata: il modello considera sia il mutuo ceduto sia il valore locativo quando la casa e assegnata al collocatario.",
-        firstHomeMortgageEnabledLabel: "Benefici prima casa dei coniugi",
-        firstHomeMortgageEnabledHint: "Attiva per includere tra i benefici compensativi il mutuo ceduto e/o il valore locativo della casa assegnata.",
+        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.",
-        firstHomeRentalValueLabel: "Casa (valore locativo) ({currency})",
-        firstHomeRentalValueHint: "Valore locativo mensile della casa assegnata, usato per valorizzare il beneficio economico implicito.",
         firstHomeAssignedToLabel: "Casa assegnata a",
         firstHomeAssignedToHint: "Seleziona il coniuge a cui e ceduta la prima casa.",
         firstHomeAssignedToNone: "Nessuna cessione",
@@ -297,7 +294,7 @@ const defaultExpenseItems = [
         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})",
-        calcBenefitPrimaryHomeAssignment: "Assegnazione casa familiare (valore locativo) ({payer} -> {receiver})",
+        calcBenefitPrimaryHomeAssignment: "Assegnazione casa familiare - valore locativo ({receiver})",
         pdfCompBenefitsSection: "Benefici compensativi gia allocati",
         pdfCompBenefitsItem: "Beneficio",
         pdfCompBenefitsAmount: "Valore {currency}/mese",
@@ -307,7 +304,6 @@ const defaultExpenseItems = [
         pdfPrimaryHomeNotDeclared: "Non dichiarato",
         pdfPrimaryHomeAssignedTo: "Assegnata a",
         pdfPrimaryHomeMonthlyAmount: "Rata mensile",
-        pdfPrimaryHomeRentalValue: "Casa (valore locativo)",
         pdfPrimaryHomeSplit: "Ripartizione mutuo",
         pdfPrimaryHomeAppliedOnlyColl: "Considerato solo se casa ceduta al collocatario.",
         pdfExtraordinaryRow: "Spese straordinarie (quota mensile da annuo)",
@@ -641,13 +637,11 @@ const defaultExpenseItems = [
         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 the economic benefits linked to the assigned primary home: the model counts both the transferred mortgage and the rental value when the home is assigned to the custodial parent.",
-        firstHomeMortgageEnabledLabel: "Primary-home benefits",
-        firstHomeMortgageEnabledHint: "Enable to include in compensative benefits the transferred mortgage and/or the rental value of the assigned home.",
+        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.",
-        firstHomeRentalValueLabel: "Home (rental value) ({currency})",
-        firstHomeRentalValueHint: "Monthly rental value of the assigned home, used to quantify the implicit economic benefit.",
         firstHomeAssignedToLabel: "Home assigned to",
         firstHomeAssignedToHint: "Select which spouse receives assignment of the primary home.",
         firstHomeAssignedToNone: "No assignment",
@@ -659,7 +653,7 @@ const defaultExpenseItems = [
         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})",
-        calcBenefitPrimaryHomeAssignment: "Assigned family home (rental value) ({payer} -> {receiver})",
+        calcBenefitPrimaryHomeAssignment: "Primary home assignment - rental value ({receiver})",
         pdfCompBenefitsSection: "Compensative benefits already allocated",
         pdfCompBenefitsItem: "Benefit",
         pdfCompBenefitsAmount: "Value {currency}/month",
@@ -669,7 +663,6 @@ const defaultExpenseItems = [
         pdfPrimaryHomeNotDeclared: "Not declared",
         pdfPrimaryHomeAssignedTo: "Assigned to",
         pdfPrimaryHomeMonthlyAmount: "Monthly payment",
-        pdfPrimaryHomeRentalValue: "Home (rental value)",
         pdfPrimaryHomeSplit: "Mortgage split",
         pdfPrimaryHomeAppliedOnlyColl: "Counted only when the home is assigned to the custodial parent.",
         pdfExtraordinaryRow: "Extraordinary expenses (monthly share from yearly)",
@@ -1222,8 +1215,6 @@ const defaultExpenseItems = [
       const hintPrimaCasaMutuoEnabled = document.getElementById("hintPrimaCasaMutuoEnabled");
       const lblPrimaCasaMutuoImporto = document.getElementById("lblPrimaCasaMutuoImporto");
       const hintPrimaCasaMutuoImporto = document.getElementById("hintPrimaCasaMutuoImporto");
-      const lblPrimaCasaValoreLocativo = document.getElementById("lblPrimaCasaValoreLocativo");
-      const hintPrimaCasaValoreLocativo = document.getElementById("hintPrimaCasaValoreLocativo");
       const lblPrimaCasaAssegnataA = document.getElementById("lblPrimaCasaAssegnataA");
       const hintPrimaCasaAssegnataA = document.getElementById("hintPrimaCasaAssegnataA");
       const lblPrimaCasaMutuoPerc1 = document.getElementById("lblPrimaCasaMutuoPerc1");
@@ -1287,8 +1278,6 @@ const defaultExpenseItems = [
       if (hintPrimaCasaMutuoEnabled) hintPrimaCasaMutuoEnabled.title = tr("firstHomeMortgageEnabledHint");
       if (lblPrimaCasaMutuoImporto) lblPrimaCasaMutuoImporto.textContent = msg("firstHomeMortgageAmountLabel", { currency: currentCurrency });
       if (hintPrimaCasaMutuoImporto) hintPrimaCasaMutuoImporto.title = tr("firstHomeMortgageAmountHint");
-      if (lblPrimaCasaValoreLocativo) lblPrimaCasaValoreLocativo.textContent = msg("firstHomeRentalValueLabel", { currency: currentCurrency });
-      if (hintPrimaCasaValoreLocativo) hintPrimaCasaValoreLocativo.title = tr("firstHomeRentalValueHint");
       if (lblPrimaCasaAssegnataA) lblPrimaCasaAssegnataA.textContent = tr("firstHomeAssignedToLabel");
       if (hintPrimaCasaAssegnataA) hintPrimaCasaAssegnataA.title = tr("firstHomeAssignedToHint");
       if (lblPrimaCasaMutuoPerc1) lblPrimaCasaMutuoPerc1.textContent = msg("firstHomeSplitLabel", { spouse: c1n() });
@@ -3601,7 +3590,6 @@ const defaultExpenseItems = [
         aFam2: num("assegnoFam2"),
         primaCasaMutuoEnabled: firstHome.enabled ? 1 : 0,
         primaCasaMutuoImporto: firstHome.amount,
-        primaCasaValoreLocativo: firstHome.rentalValue,
         primaCasaAssegnataA: firstHome.assignedTo,
         primaCasaMutuoPerc1: firstHome.share1,
         straordAnn1: num("straordAnn1"),
@@ -3643,10 +3631,10 @@ const defaultExpenseItems = [
       const aFam2 = Number(payload.aFam2 || 0);
       const primaCasaMutuoEnabled = Number(payload.primaCasaMutuoEnabled || 0) > 0;
       const primaCasaMutuoImporto = Math.max(0, Number(payload.primaCasaMutuoImporto || 0));
-      const primaCasaValoreLocativo = Math.max(0, Number(payload.primaCasaValoreLocativo || 0));
       const primaCasaAssegnataA = (String(payload.primaCasaAssegnataA || "") === "1" || String(payload.primaCasaAssegnataA || "") === "2")
         ? String(payload.primaCasaAssegnataA)
         : "";
+      const primaCasaValoreLocativo = Math.max(0, Number(payload.primaCasaValoreLocativo || 0));
       const rawMutuoPerc1 = payload.primaCasaMutuoPerc1 === undefined ? 50 : payload.primaCasaMutuoPerc1;
       const primaCasaMutuoPerc1 = Math.min(100, Math.max(0, Number(rawMutuoPerc1 || 0)));
       const primaCasaMutuoPerc2 = 100 - primaCasaMutuoPerc1;
@@ -3705,10 +3693,9 @@ const defaultExpenseItems = [
       const assegnoBaseDa1a2 = assegnoDa1a2;
       const assegnoBaseDa2a1 = assegnoDa2a1;
-      const primaCasaAssignmentConsidered = primaCasaMutuoEnabled
+      const primaCasaConsidered = primaCasaMutuoEnabled && primaCasaMutuoImporto > 0
         && primaCasaAssegnataA !== ""
         && Number(primaCasaAssegnataA) === collocatario;
-      const primaCasaConsidered = primaCasaAssignmentConsidered && primaCasaMutuoImporto > 0;
       let primaCasaTransfer1to2 = 0;
       let primaCasaTransfer2to1 = 0;
       if (primaCasaConsidered) {
@@ -3719,27 +3706,15 @@ const defaultExpenseItems = [
         }
       }
-      const primaCasaLocativeConsidered = primaCasaAssignmentConsidered && primaCasaValoreLocativo > 0;
-      let primaCasaLocativeTransfer1to2 = 0;
-      let primaCasaLocativeTransfer2to1 = 0;
-      if (primaCasaLocativeConsidered) {
-        if (primaCasaAssegnataA === "1") {
-          primaCasaLocativeTransfer2to1 = primaCasaValoreLocativo;
-        } else if (primaCasaAssegnataA === "2") {
-          primaCasaLocativeTransfer1to2 = primaCasaValoreLocativo;
-        }
-      }
-      assegnoDa1a2 = Math.max(0, assegnoDa1a2 - primaCasaTransfer1to2 - primaCasaLocativeTransfer1to2);
-      assegnoDa2a1 = Math.max(0, assegnoDa2a1 - primaCasaTransfer2to1 - primaCasaLocativeTransfer2to1);
+      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 });
-      if (primaCasaLocativeTransfer1to2 > 0.005) compensativeBenefits.push({ type: "primary-home-assignment", from: 1, to: 2, amount: primaCasaLocativeTransfer1to2 });
-      if (primaCasaLocativeTransfer2to1 > 0.005) compensativeBenefits.push({ type: "primary-home-assignment", from: 2, to: 1, amount: primaCasaLocativeTransfer2to1 });
+      if (primaCasaValoreLocativo > 0.005 && primaCasaAssegnataA !== "") compensativeBenefits.push({ type: "primary-home-assignment", to: Number(primaCasaAssegnataA), amount: primaCasaValoreLocativo });
       const post1 = disp1 - assegnoDa1a2 + assegnoDa2a1;
       const post2 = disp2 - assegnoDa2a1 + assegnoDa1a2;
@@ -3795,10 +3770,9 @@ const defaultExpenseItems = [
         quotaDiretta1, quotaDiretta2,
         saldo1, saldo2,
         assegnoBaseDa1a2, assegnoBaseDa2a1,
-        primaCasaMutuoEnabled, primaCasaMutuoImporto, primaCasaValoreLocativo, primaCasaAssegnataA,
+        primaCasaMutuoEnabled, primaCasaMutuoImporto, primaCasaAssegnataA, primaCasaValoreLocativo,
         primaCasaMutuoPerc1, primaCasaMutuoPerc2,
-        primaCasaAssignmentConsidered, primaCasaConsidered, primaCasaTransfer1to2, primaCasaTransfer2to1,
-        primaCasaLocativeConsidered, primaCasaLocativeTransfer1to2, primaCasaLocativeTransfer2to1,
+        primaCasaConsidered, primaCasaTransfer1to2, primaCasaTransfer2to1,
         compensativeBenefits,
         assegnoDa1a2, assegnoDa2a1,
         post1, post2,
@@ -3900,18 +3874,16 @@ const defaultExpenseItems = [
     function getFirstHomeMortgageInput() {
       const enabled = !!document.getElementById("primaCasaMutuoEnabled")?.checked;
       const amount = Math.max(0, num("primaCasaMutuoImporto"));
-      const rentalValue = Math.max(0, num("primaCasaValoreLocativo"));
       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, rentalValue, assignedTo, share1, share2 };
+      return { enabled, amount, assignedTo, share1, share2 };
     }
     function updateFirstHomeMortgageUi() {
       const enabledEl = document.getElementById("primaCasaMutuoEnabled");
       const amountEl = document.getElementById("primaCasaMutuoImporto");
-      const rentalValueEl = document.getElementById("primaCasaValoreLocativo");
       const assignedEl = document.getElementById("primaCasaAssegnataA");
       const shareEl = document.getElementById("primaCasaMutuoPerc1");
       const splitInfoEl = document.getElementById("primaCasaMutuoSplitInfo");
@@ -3927,7 +3899,6 @@ const defaultExpenseItems = [
       const isEnabled = !!enabledEl.checked;
       amountEl.disabled = !isEnabled;
-      if (rentalValueEl) rentalValueEl.disabled = !isEnabled;
       assignedEl.disabled = !isEnabled;
       shareEl.disabled = !isEnabled;
       if (splitWrapEl) splitWrapEl.classList.toggle("is-disabled", !isEnabled);
@@ -4645,29 +4616,6 @@ const defaultExpenseItems = [
         return `<span class="spieg-help-wrap"><button type="button" class="spieg-help-btn" aria-label="${tooltipLabel}">i</button><span class="spieg-help-tip">${safeText}</span></span>`;
       };
-      let benefitSectionHtml = "";
-      if (compBenefits.length) {
-        const rawBenefs = Array.isArray(m.compensativeBenefits)
-          ? m.compensativeBenefits.filter((r) => r && Number(r.amount || 0) > 0.005)
-          : [];
-        const typeIcons = { family: "\uD83C\uDFDB", "primary-home-mortgage": "\uD83C\uDFE1", "primary-home-assignment": "\uD83C\uDFE0" };
-        const cardsHtml = compBenefits
-          .map((row, i) => {
-            const icon = (rawBenefs[i] && typeIcons[rawBenefs[i].type]) || "\u2726";
-            return `<li class="spieg-benefit-card"><span class="spieg-benefit-icon">${icon}</span><span class="spieg-benefit-label">${escapeHtml(row.label)}</span><strong class="spieg-benefit-amount">${eur(row.amount)}</strong></li>`;
-          })
-          .join("");
-        const total = compBenefits.reduce((s, r) => s + r.amount, 0);
-        const totalLabel = currentLang === "en" ? "Total allocated benefits" : "Totale benefici allocati";
-        benefitSectionHtml = `
-          <div class="spieg-benefits-section">
-            <div class="spieg-benefits-label">&#127873;&ensp;${escapeHtml(tr("calcCompBenefitsLabel"))}</div>
-            <ul class="spieg-benefits-cards">${cardsHtml}</ul>
-            <div class="spieg-benefits-total"><span>${escapeHtml(totalLabel)}</span><strong>${eur(total)}</strong></div>
-          </div>
-        `;
-      }
       let resultHtml;
       let resultDetail;
       if (isAssegno1) {
@@ -4675,7 +4623,6 @@ const defaultExpenseItems = [
           <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>
-          ${benefitSectionHtml}
         `;
         resultDetail = tr("spiegDetailResultTransfer");
       } else if (isAssegno2) {
@@ -4683,14 +4630,30 @@ const defaultExpenseItems = [
           <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>
-          ${benefitSectionHtml}
         `;
         resultDetail = tr("spiegDetailResultTransfer");
       } else {
-        if (benefitSectionHtml) {
+        const benefitRows = getCompensativeBenefitRows(m, c1n(), c2n());
+        if (benefitRows.length) {
+          const rawBenefs = Array.isArray(m.compensativeBenefits)
+            ? m.compensativeBenefits.filter((r) => r && Number(r.amount || 0) > 0.005)
+            : [];
+          const typeIcons = { family: "\uD83C\uDFDB", "primary-home-mortgage": "\uD83C\uDFE1" };
+          const cardsHtml = benefitRows
+            .map((row, i) => {
+              const icon = (rawBenefs[i] && typeIcons[rawBenefs[i].type]) || "\u2726";
+              return `<li class="spieg-benefit-card"><span class="spieg-benefit-icon">${icon}</span><span class="spieg-benefit-label">${escapeHtml(row.label)}</span><strong class="spieg-benefit-amount">${eur(row.amount)}</strong></li>`;
+            })
+            .join("");
+          const total = benefitRows.reduce((s, r) => s + r.amount, 0);
+          const totalLabel = currentLang === "en" ? "Total allocated benefits" : "Totale benefici allocati";
           resultHtml = `
             <div class="spieg-no-transfer-badge">&#9878;&#65039;&ensp;${escapeHtml(tr("calcNoTransferSuggested"))}</div>
-            ${benefitSectionHtml}
+            <div class="spieg-benefits-section">
+              <div class="spieg-benefits-label">&#127873;&ensp;${escapeHtml(tr("calcCompBenefitsLabel"))}</div>
+              <ul class="spieg-benefits-cards">${cardsHtml}</ul>
+              <div class="spieg-benefits-total"><span>${escapeHtml(totalLabel)}</span><strong>${eur(total)}</strong></div>
+            </div>
           `;
         } else {
           resultHtml = `<div class="spieg-result-empty ok">${tr("calcNoTransferSuggested")}</div>`;
@@ -4775,9 +4738,8 @@ const defaultExpenseItems = [
             return { label: msg("calcBenefitPrimaryHomeMortgage", { payer, receiver }), amount };
           }
           if (row.type === "primary-home-assignment") {
-            const payer = Number(row.from) === 2 ? name2 : name1;
             const receiver = Number(row.to) === 2 ? name2 : name1;
-            return { label: msg("calcBenefitPrimaryHomeAssignment", { payer, receiver }), amount };
+            return { label: msg("calcBenefitPrimaryHomeAssignment", { receiver }), amount };
           }
           return { label: tr("calcCompBenefitsLabel"), amount };
         });
@@ -4859,30 +4821,6 @@ const defaultExpenseItems = [
         ${m.incomeMode === "cu" ? `<br /><strong>${tr("calcIncomeBaseNote")}</strong> ${tr("cuNetNoteText")}` : ""}
       `;
-      const benefitRows = getCompensativeBenefitRows(m, c1n(), c2n());
-      let benefitCardsHtml = "";
-      if (benefitRows.length) {
-        const rawBenefs = Array.isArray(m.compensativeBenefits)
-          ? m.compensativeBenefits.filter((r) => r && Number(r.amount || 0) > 0.005)
-          : [];
-        const typeIcons = { family: "\uD83C\uDFDB", "primary-home-mortgage": "\uD83C\uDFE1", "primary-home-assignment": "\uD83C\uDFE0" };
-        const cardsHtml = benefitRows
-          .map((row, i) => {
-            const icon = (rawBenefs[i] && typeIcons[rawBenefs[i].type]) || "\u2726";
-            return `<li class="spieg-benefit-card"><span class="spieg-benefit-icon">${icon}</span><span class="spieg-benefit-label">${escapeHtml(row.label)}</span><strong class="spieg-benefit-amount">${eur(row.amount)}</strong></li>`;
-          })
-          .join("");
-        const total = benefitRows.reduce((s, r) => s + r.amount, 0);
-        const totalLabel = currentLang === "en" ? "Total allocated benefits" : "Totale benefici allocati";
-        benefitCardsHtml = `
-          <div class="result-benefits-box">
-            <div class="spieg-benefits-label">&#127873;&ensp;${escapeHtml(tr("calcCompBenefitsLabel"))}</div>
-            <ul class="spieg-benefits-cards">${cardsHtml}</ul>
-            <div class="spieg-benefits-total"><span>${escapeHtml(totalLabel)}</span><strong>${eur(total)}</strong></div>
-          </div>
-        `;
-      }
       let mainHtml;
       if (m.assegnoDa1a2 > 0.005) {
         const perChild = m.figli > 1 ? `<div class="result-transfer-child">${eur(m.assegnoDa1a2 / m.figli)}&thinsp;${escapeHtml(currentLang === "en" ? "per child" : "per figlio")}</div>` : "";
@@ -4894,7 +4832,6 @@ const defaultExpenseItems = [
           </div>
           <div class="result-transfer-value">${eur(m.assegnoDa1a2)}<span class="result-transfer-per">&thinsp;${escapeHtml(tr("pdfPerMonth"))}</span></div>
           ${perChild}
-          ${benefitCardsHtml}
         `;
       } else if (m.assegnoDa2a1 > 0.005) {
         const perChild = m.figli > 1 ? `<div class="result-transfer-child">${eur(m.assegnoDa2a1 / m.figli)}&thinsp;${escapeHtml(currentLang === "en" ? "per child" : "per figlio")}</div>` : "";
@@ -4906,9 +4843,31 @@ const defaultExpenseItems = [
           </div>
           <div class="result-transfer-value">${eur(m.assegnoDa2a1)}<span class="result-transfer-per">&thinsp;${escapeHtml(tr("pdfPerMonth"))}</span></div>
           ${perChild}
-          ${benefitCardsHtml}
         `;
       } else {
+        const benefitRows = getCompensativeBenefitRows(m, c1n(), c2n());
+        let benefitCardsHtml = "";
+        if (benefitRows.length) {
+          const rawBenefs = Array.isArray(m.compensativeBenefits)
+            ? m.compensativeBenefits.filter((r) => r && Number(r.amount || 0) > 0.005)
+            : [];
+          const typeIcons = { family: "\uD83C\uDFDB", "primary-home-mortgage": "\uD83C\uDFE1" };
+          const cardsHtml = benefitRows
+            .map((row, i) => {
+              const icon = (rawBenefs[i] && typeIcons[rawBenefs[i].type]) || "\u2726";
+              return `<li class="spieg-benefit-card"><span class="spieg-benefit-icon">${icon}</span><span class="spieg-benefit-label">${escapeHtml(row.label)}</span><strong class="spieg-benefit-amount">${eur(row.amount)}</strong></li>`;
+            })
+            .join("");
+          const total = benefitRows.reduce((s, r) => s + r.amount, 0);
+          const totalLabel = currentLang === "en" ? "Total allocated benefits" : "Totale benefici allocati";
+          benefitCardsHtml = `
+            <div class="result-benefits-box">
+              <div class="spieg-benefits-label">&#127873;&ensp;${escapeHtml(tr("calcCompBenefitsLabel"))}</div>
+              <ul class="spieg-benefits-cards">${cardsHtml}</ul>
+              <div class="spieg-benefits-total"><span>${escapeHtml(totalLabel)}</span><strong>${eur(total)}</strong></div>
+            </div>
+          `;
+        }
         mainHtml = `<div class="spieg-no-transfer-badge">&#9878;&#65039;&ensp;${escapeHtml(tr("calcNoTransferSuggested"))}</div>${benefitCardsHtml}`;
       }
       resultMain.innerHTML = mainHtml;
@@ -5142,49 +5101,40 @@ const defaultExpenseItems = [
         ? `
         <tr><td>${tr("pdfPrimaryHomeAssignedTo")}</td><td>${primaryHomeAssignedLabel}</td></tr>
         <tr><td>${tr("pdfPrimaryHomeMonthlyAmount")}</td><td>${eur(m.primaCasaMutuoImporto || 0)}</td></tr>
-        <tr><td>${tr("pdfPrimaryHomeRentalValue")}</td><td>${eur(m.primaCasaValoreLocativo || 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>`;
       let explainResultHtml = `<div class="pdf-explain-result-empty">${tr("calcNoTransferSuggested")}</div>`;
-      let pdfBenefitSectionHtml = "";
-      if (compBenefits.length) {
-        const rawBenefs = Array.isArray(m.compensativeBenefits)
-          ? m.compensativeBenefits.filter((row) => row && Number(row.amount || 0) > 0.005)
-          : [];
-        const typeIcons = { family: "\uD83C\uDFDB", "primary-home-mortgage": "\uD83C\uDFE1", "primary-home-assignment": "\uD83C\uDFE0" };
-        const cardsHtml = compBenefits.map((row, idx) => {
-          const icon = (rawBenefs[idx] && typeIcons[rawBenefs[idx].type]) || "\u2726";
-          return `<li class="pdf-explain-benefit-card"><span class="pdf-explain-benefit-icon">${icon}</span><span class="pdf-explain-benefit-label">${escapeHtml(row.label)}</span><strong class="pdf-explain-benefit-amount">${eur(row.amount)}</strong></li>`;
-        }).join("");
-        const benefitsTotal = compBenefits.reduce((sum, row) => sum + Number(row.amount || 0), 0);
-        pdfBenefitSectionHtml = `
-          <div class="pdf-explain-benefits-section">
-            <div class="pdf-explain-benefits-label">&#127873;&ensp;${escapeHtml(tr("calcCompBenefitsLabel"))}</div>
-            <ul class="pdf-explain-benefits-cards">${cardsHtml}</ul>
-            <div class="pdf-explain-benefits-total"><span>${escapeHtml(tr("pdfCompBenefitsTotal"))}</span><strong>${eur(benefitsTotal)}</strong></div>
-          </div>
-        `;
-      }
       if (m.assegnoDa1a2 > 0.005) {
         explainResultHtml = `
           <div class="pdf-explain-flow">${c1NameEsc} &rarr; ${c2NameEsc}</div>
           <div class="pdf-explain-formula">${c1NameEsc}: ${eur(m.quotaTeorica1)} &minus; ${eur(m.quotaDiretta1)}</div>
           <div class="pdf-explain-amount">${eur(m.assegnoDa1a2)}</div>
-          ${pdfBenefitSectionHtml}
         `;
       } else if (m.assegnoDa2a1 > 0.005) {
         explainResultHtml = `
           <div class="pdf-explain-flow">${c2NameEsc} &rarr; ${c1NameEsc}</div>
           <div class="pdf-explain-formula">${c2NameEsc}: ${eur(m.quotaTeorica2)} &minus; ${eur(m.quotaDiretta2)}</div>
           <div class="pdf-explain-amount">${eur(m.assegnoDa2a1)}</div>
-          ${pdfBenefitSectionHtml}
         `;
       } else if (compBenefits.length) {
+        const rawBenefs = Array.isArray(m.compensativeBenefits)
+          ? m.compensativeBenefits.filter((row) => row && Number(row.amount || 0) > 0.005)
+          : [];
+        const typeIcons = { family: "\uD83C\uDFDB", "primary-home-mortgage": "\uD83C\uDFE1" };
+        const cardsHtml = compBenefits.map((row, idx) => {
+          const icon = (rawBenefs[idx] && typeIcons[rawBenefs[idx].type]) || "\u2726";
+          return `<li class="pdf-explain-benefit-card"><span class="pdf-explain-benefit-icon">${icon}</span><span class="pdf-explain-benefit-label">${escapeHtml(row.label)}</span><strong class="pdf-explain-benefit-amount">${eur(row.amount)}</strong></li>`;
+        }).join("");
+        const benefitsTotal = compBenefits.reduce((sum, row) => sum + Number(row.amount || 0), 0);
         explainResultHtml = `
           <div class="pdf-explain-no-transfer-badge">&#9878;&#65039;&ensp;${escapeHtml(tr("calcNoTransferSuggested"))}</div>
-          ${pdfBenefitSectionHtml}
+          <div class="pdf-explain-benefits-section">
+            <div class="pdf-explain-benefits-label">&#127873;&ensp;${escapeHtml(tr("calcCompBenefitsLabel"))}</div>
+            <ul class="pdf-explain-benefits-cards">${cardsHtml}</ul>
+            <div class="pdf-explain-benefits-total"><span>${escapeHtml(tr("pdfCompBenefitsTotal"))}</span><strong>${eur(benefitsTotal)}</strong></div>
+          </div>
         `;
       }
@@ -6058,7 +6008,6 @@ ${scenarioLab.length ? `
         assegnoFam2: num("assegnoFam2"),
         primaCasaMutuoEnabled: document.getElementById("primaCasaMutuoEnabled")?.checked ? 1 : 0,
         primaCasaMutuoImporto: num("primaCasaMutuoImporto"),
-        primaCasaValoreLocativo: num("primaCasaValoreLocativo"),
         primaCasaAssegnataA: String(document.getElementById("primaCasaAssegnataA")?.value || ""),
         primaCasaMutuoPerc1: num("primaCasaMutuoPerc1"),
         straordAnn1: num("straordAnn1"),
@@ -6456,7 +6405,7 @@ ${scenarioLab.length ? `
           syncPermanenza("perm1");
         } else if (e.target.id === "perm2") {
           syncPermanenza("perm2");
-        } else if (e.target.id === "primaCasaMutuoPerc1" || e.target.id === "primaCasaMutuoImporto" || e.target.id === "primaCasaValoreLocativo") {
+        } 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";

package/frontend/public/app.js CHANGED Viewed

@@ -4,7 +4,6 @@ const defaultExpenseItems = [
       { label: "🛒 Cibo/Alimenti", help: "Spesa alimentare mensile imputabile al nucleo familiare." },
       { label: "👕 Abbigliamento", help: "Spese medie mensili per abbigliamento dei figli." },
       { label: "💳 Finanziamenti in corso (extra mutuo)", help: "Rate mensili di finanziamenti diversi dal mutuo." },
-      { label: "💳 Finanziamenti in corso (extra mutuo)", help: "Rate mensili di finanziamenti diversi dal mutuo." },
       { label: "🚗 Spese macchina", help: "Carburante, assicurazione, bollo, manutenzione ordinaria." },
       { label: "🏢 Amministrazione condominio", help: "Quote condominiali ordinarie e costi amministrativi ricorrenti." },
       { label: "🎒 Spese scolastiche/mensa", help: "Costi scolastici ricorrenti, mensa e contributi periodici." },
@@ -279,13 +278,11 @@ const defaultExpenseItems = [
         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 i benefici economici della prima casa assegnata: il modello considera sia il mutuo ceduto sia il valore locativo quando la casa e assegnata al collocatario.",
-        firstHomeMortgageEnabledLabel: "Benefici prima casa dei coniugi",
-        firstHomeMortgageEnabledHint: "Attiva per includere tra i benefici compensativi il mutuo ceduto e/o il valore locativo della casa assegnata.",
+        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.",
-        firstHomeRentalValueLabel: "Casa (valore locativo) ({currency})",
-        firstHomeRentalValueHint: "Valore locativo mensile della casa assegnata, usato per valorizzare il beneficio economico implicito.",
         firstHomeAssignedToLabel: "Casa assegnata a",
         firstHomeAssignedToHint: "Seleziona il coniuge a cui e ceduta la prima casa.",
         firstHomeAssignedToNone: "Nessuna cessione",
@@ -297,7 +294,7 @@ const defaultExpenseItems = [
         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})",
-        calcBenefitPrimaryHomeAssignment: "Assegnazione casa familiare (valore locativo) ({payer} -> {receiver})",
+        calcBenefitPrimaryHomeAssignment: "Assegnazione casa familiare - valore locativo ({receiver})",
         pdfCompBenefitsSection: "Benefici compensativi gia allocati",
         pdfCompBenefitsItem: "Beneficio",
         pdfCompBenefitsAmount: "Valore {currency}/mese",
@@ -307,7 +304,6 @@ const defaultExpenseItems = [
         pdfPrimaryHomeNotDeclared: "Non dichiarato",
         pdfPrimaryHomeAssignedTo: "Assegnata a",
         pdfPrimaryHomeMonthlyAmount: "Rata mensile",
-        pdfPrimaryHomeRentalValue: "Casa (valore locativo)",
         pdfPrimaryHomeSplit: "Ripartizione mutuo",
         pdfPrimaryHomeAppliedOnlyColl: "Considerato solo se casa ceduta al collocatario.",
         pdfExtraordinaryRow: "Spese straordinarie (quota mensile da annuo)",
@@ -641,13 +637,11 @@ const defaultExpenseItems = [
         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 the economic benefits linked to the assigned primary home: the model counts both the transferred mortgage and the rental value when the home is assigned to the custodial parent.",
-        firstHomeMortgageEnabledLabel: "Primary-home benefits",
-        firstHomeMortgageEnabledHint: "Enable to include in compensative benefits the transferred mortgage and/or the rental value of the assigned home.",
+        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.",
-        firstHomeRentalValueLabel: "Home (rental value) ({currency})",
-        firstHomeRentalValueHint: "Monthly rental value of the assigned home, used to quantify the implicit economic benefit.",
         firstHomeAssignedToLabel: "Home assigned to",
         firstHomeAssignedToHint: "Select which spouse receives assignment of the primary home.",
         firstHomeAssignedToNone: "No assignment",
@@ -659,7 +653,7 @@ const defaultExpenseItems = [
         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})",
-        calcBenefitPrimaryHomeAssignment: "Assigned family home (rental value) ({payer} -> {receiver})",
+        calcBenefitPrimaryHomeAssignment: "Primary home assignment - rental value ({receiver})",
         pdfCompBenefitsSection: "Compensative benefits already allocated",
         pdfCompBenefitsItem: "Benefit",
         pdfCompBenefitsAmount: "Value {currency}/month",
@@ -669,7 +663,6 @@ const defaultExpenseItems = [
         pdfPrimaryHomeNotDeclared: "Not declared",
         pdfPrimaryHomeAssignedTo: "Assigned to",
         pdfPrimaryHomeMonthlyAmount: "Monthly payment",
-        pdfPrimaryHomeRentalValue: "Home (rental value)",
         pdfPrimaryHomeSplit: "Mortgage split",
         pdfPrimaryHomeAppliedOnlyColl: "Counted only when the home is assigned to the custodial parent.",
         pdfExtraordinaryRow: "Extraordinary expenses (monthly share from yearly)",
@@ -1222,8 +1215,6 @@ const defaultExpenseItems = [
       const hintPrimaCasaMutuoEnabled = document.getElementById("hintPrimaCasaMutuoEnabled");
       const lblPrimaCasaMutuoImporto = document.getElementById("lblPrimaCasaMutuoImporto");
       const hintPrimaCasaMutuoImporto = document.getElementById("hintPrimaCasaMutuoImporto");
-      const lblPrimaCasaValoreLocativo = document.getElementById("lblPrimaCasaValoreLocativo");
-      const hintPrimaCasaValoreLocativo = document.getElementById("hintPrimaCasaValoreLocativo");
       const lblPrimaCasaAssegnataA = document.getElementById("lblPrimaCasaAssegnataA");
       const hintPrimaCasaAssegnataA = document.getElementById("hintPrimaCasaAssegnataA");
       const lblPrimaCasaMutuoPerc1 = document.getElementById("lblPrimaCasaMutuoPerc1");
@@ -1287,8 +1278,6 @@ const defaultExpenseItems = [
       if (hintPrimaCasaMutuoEnabled) hintPrimaCasaMutuoEnabled.title = tr("firstHomeMortgageEnabledHint");
       if (lblPrimaCasaMutuoImporto) lblPrimaCasaMutuoImporto.textContent = msg("firstHomeMortgageAmountLabel", { currency: currentCurrency });
       if (hintPrimaCasaMutuoImporto) hintPrimaCasaMutuoImporto.title = tr("firstHomeMortgageAmountHint");
-      if (lblPrimaCasaValoreLocativo) lblPrimaCasaValoreLocativo.textContent = msg("firstHomeRentalValueLabel", { currency: currentCurrency });
-      if (hintPrimaCasaValoreLocativo) hintPrimaCasaValoreLocativo.title = tr("firstHomeRentalValueHint");
       if (lblPrimaCasaAssegnataA) lblPrimaCasaAssegnataA.textContent = tr("firstHomeAssignedToLabel");
       if (hintPrimaCasaAssegnataA) hintPrimaCasaAssegnataA.title = tr("firstHomeAssignedToHint");
       if (lblPrimaCasaMutuoPerc1) lblPrimaCasaMutuoPerc1.textContent = msg("firstHomeSplitLabel", { spouse: c1n() });
@@ -3601,7 +3590,6 @@ const defaultExpenseItems = [
         aFam2: num("assegnoFam2"),
         primaCasaMutuoEnabled: firstHome.enabled ? 1 : 0,
         primaCasaMutuoImporto: firstHome.amount,
-        primaCasaValoreLocativo: firstHome.rentalValue,
         primaCasaAssegnataA: firstHome.assignedTo,
         primaCasaMutuoPerc1: firstHome.share1,
         straordAnn1: num("straordAnn1"),
@@ -3643,10 +3631,10 @@ const defaultExpenseItems = [
       const aFam2 = Number(payload.aFam2 || 0);
       const primaCasaMutuoEnabled = Number(payload.primaCasaMutuoEnabled || 0) > 0;
       const primaCasaMutuoImporto = Math.max(0, Number(payload.primaCasaMutuoImporto || 0));
-      const primaCasaValoreLocativo = Math.max(0, Number(payload.primaCasaValoreLocativo || 0));
       const primaCasaAssegnataA = (String(payload.primaCasaAssegnataA || "") === "1" || String(payload.primaCasaAssegnataA || "") === "2")
         ? String(payload.primaCasaAssegnataA)
         : "";
+      const primaCasaValoreLocativo = Math.max(0, Number(payload.primaCasaValoreLocativo || 0));
       const rawMutuoPerc1 = payload.primaCasaMutuoPerc1 === undefined ? 50 : payload.primaCasaMutuoPerc1;
       const primaCasaMutuoPerc1 = Math.min(100, Math.max(0, Number(rawMutuoPerc1 || 0)));
       const primaCasaMutuoPerc2 = 100 - primaCasaMutuoPerc1;
@@ -3705,10 +3693,9 @@ const defaultExpenseItems = [
       const assegnoBaseDa1a2 = assegnoDa1a2;
       const assegnoBaseDa2a1 = assegnoDa2a1;
-      const primaCasaAssignmentConsidered = primaCasaMutuoEnabled
+      const primaCasaConsidered = primaCasaMutuoEnabled && primaCasaMutuoImporto > 0
         && primaCasaAssegnataA !== ""
         && Number(primaCasaAssegnataA) === collocatario;
-      const primaCasaConsidered = primaCasaAssignmentConsidered && primaCasaMutuoImporto > 0;
       let primaCasaTransfer1to2 = 0;
       let primaCasaTransfer2to1 = 0;
       if (primaCasaConsidered) {
@@ -3719,27 +3706,15 @@ const defaultExpenseItems = [
         }
       }
-      const primaCasaLocativeConsidered = primaCasaAssignmentConsidered && primaCasaValoreLocativo > 0;
-      let primaCasaLocativeTransfer1to2 = 0;
-      let primaCasaLocativeTransfer2to1 = 0;
-      if (primaCasaLocativeConsidered) {
-        if (primaCasaAssegnataA === "1") {
-          primaCasaLocativeTransfer2to1 = primaCasaValoreLocativo;
-        } else if (primaCasaAssegnataA === "2") {
-          primaCasaLocativeTransfer1to2 = primaCasaValoreLocativo;
-        }
-      }
-      assegnoDa1a2 = Math.max(0, assegnoDa1a2 - primaCasaTransfer1to2 - primaCasaLocativeTransfer1to2);
-      assegnoDa2a1 = Math.max(0, assegnoDa2a1 - primaCasaTransfer2to1 - primaCasaLocativeTransfer2to1);
+      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 });
-      if (primaCasaLocativeTransfer1to2 > 0.005) compensativeBenefits.push({ type: "primary-home-assignment", from: 1, to: 2, amount: primaCasaLocativeTransfer1to2 });
-      if (primaCasaLocativeTransfer2to1 > 0.005) compensativeBenefits.push({ type: "primary-home-assignment", from: 2, to: 1, amount: primaCasaLocativeTransfer2to1 });
+      if (primaCasaValoreLocativo > 0.005 && primaCasaAssegnataA !== "") compensativeBenefits.push({ type: "primary-home-assignment", to: Number(primaCasaAssegnataA), amount: primaCasaValoreLocativo });
       const post1 = disp1 - assegnoDa1a2 + assegnoDa2a1;
       const post2 = disp2 - assegnoDa2a1 + assegnoDa1a2;
@@ -3795,10 +3770,9 @@ const defaultExpenseItems = [
         quotaDiretta1, quotaDiretta2,
         saldo1, saldo2,
         assegnoBaseDa1a2, assegnoBaseDa2a1,
-        primaCasaMutuoEnabled, primaCasaMutuoImporto, primaCasaValoreLocativo, primaCasaAssegnataA,
+        primaCasaMutuoEnabled, primaCasaMutuoImporto, primaCasaAssegnataA, primaCasaValoreLocativo,
         primaCasaMutuoPerc1, primaCasaMutuoPerc2,
-        primaCasaAssignmentConsidered, primaCasaConsidered, primaCasaTransfer1to2, primaCasaTransfer2to1,
-        primaCasaLocativeConsidered, primaCasaLocativeTransfer1to2, primaCasaLocativeTransfer2to1,
+        primaCasaConsidered, primaCasaTransfer1to2, primaCasaTransfer2to1,
         compensativeBenefits,
         assegnoDa1a2, assegnoDa2a1,
         post1, post2,
@@ -3900,18 +3874,16 @@ const defaultExpenseItems = [
     function getFirstHomeMortgageInput() {
       const enabled = !!document.getElementById("primaCasaMutuoEnabled")?.checked;
       const amount = Math.max(0, num("primaCasaMutuoImporto"));
-      const rentalValue = Math.max(0, num("primaCasaValoreLocativo"));
       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, rentalValue, assignedTo, share1, share2 };
+      return { enabled, amount, assignedTo, share1, share2 };
     }
     function updateFirstHomeMortgageUi() {
       const enabledEl = document.getElementById("primaCasaMutuoEnabled");
       const amountEl = document.getElementById("primaCasaMutuoImporto");
-      const rentalValueEl = document.getElementById("primaCasaValoreLocativo");
       const assignedEl = document.getElementById("primaCasaAssegnataA");
       const shareEl = document.getElementById("primaCasaMutuoPerc1");
       const splitInfoEl = document.getElementById("primaCasaMutuoSplitInfo");
@@ -3927,7 +3899,6 @@ const defaultExpenseItems = [
       const isEnabled = !!enabledEl.checked;
       amountEl.disabled = !isEnabled;
-      if (rentalValueEl) rentalValueEl.disabled = !isEnabled;
       assignedEl.disabled = !isEnabled;
       shareEl.disabled = !isEnabled;
       if (splitWrapEl) splitWrapEl.classList.toggle("is-disabled", !isEnabled);
@@ -4645,29 +4616,6 @@ const defaultExpenseItems = [
         return `<span class="spieg-help-wrap"><button type="button" class="spieg-help-btn" aria-label="${tooltipLabel}">i</button><span class="spieg-help-tip">${safeText}</span></span>`;
       };
-      let benefitSectionHtml = "";
-      if (compBenefits.length) {
-        const rawBenefs = Array.isArray(m.compensativeBenefits)
-          ? m.compensativeBenefits.filter((r) => r && Number(r.amount || 0) > 0.005)
-          : [];
-        const typeIcons = { family: "\uD83C\uDFDB", "primary-home-mortgage": "\uD83C\uDFE1", "primary-home-assignment": "\uD83C\uDFE0" };
-        const cardsHtml = compBenefits
-          .map((row, i) => {
-            const icon = (rawBenefs[i] && typeIcons[rawBenefs[i].type]) || "\u2726";
-            return `<li class="spieg-benefit-card"><span class="spieg-benefit-icon">${icon}</span><span class="spieg-benefit-label">${escapeHtml(row.label)}</span><strong class="spieg-benefit-amount">${eur(row.amount)}</strong></li>`;
-          })
-          .join("");
-        const total = compBenefits.reduce((s, r) => s + r.amount, 0);
-        const totalLabel = currentLang === "en" ? "Total allocated benefits" : "Totale benefici allocati";
-        benefitSectionHtml = `
-          <div class="spieg-benefits-section">
-            <div class="spieg-benefits-label">&#127873;&ensp;${escapeHtml(tr("calcCompBenefitsLabel"))}</div>
-            <ul class="spieg-benefits-cards">${cardsHtml}</ul>
-            <div class="spieg-benefits-total"><span>${escapeHtml(totalLabel)}</span><strong>${eur(total)}</strong></div>
-          </div>
-        `;
-      }
       let resultHtml;
       let resultDetail;
       if (isAssegno1) {
@@ -4675,7 +4623,6 @@ const defaultExpenseItems = [
           <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>
-          ${benefitSectionHtml}
         `;
         resultDetail = tr("spiegDetailResultTransfer");
       } else if (isAssegno2) {
@@ -4683,14 +4630,30 @@ const defaultExpenseItems = [
           <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>
-          ${benefitSectionHtml}
         `;
         resultDetail = tr("spiegDetailResultTransfer");
       } else {
-        if (benefitSectionHtml) {
+        const benefitRows = getCompensativeBenefitRows(m, c1n(), c2n());
+        if (benefitRows.length) {
+          const rawBenefs = Array.isArray(m.compensativeBenefits)
+            ? m.compensativeBenefits.filter((r) => r && Number(r.amount || 0) > 0.005)
+            : [];
+          const typeIcons = { family: "\uD83C\uDFDB", "primary-home-mortgage": "\uD83C\uDFE1" };
+          const cardsHtml = benefitRows
+            .map((row, i) => {
+              const icon = (rawBenefs[i] && typeIcons[rawBenefs[i].type]) || "\u2726";
+              return `<li class="spieg-benefit-card"><span class="spieg-benefit-icon">${icon}</span><span class="spieg-benefit-label">${escapeHtml(row.label)}</span><strong class="spieg-benefit-amount">${eur(row.amount)}</strong></li>`;
+            })
+            .join("");
+          const total = benefitRows.reduce((s, r) => s + r.amount, 0);
+          const totalLabel = currentLang === "en" ? "Total allocated benefits" : "Totale benefici allocati";
           resultHtml = `
             <div class="spieg-no-transfer-badge">&#9878;&#65039;&ensp;${escapeHtml(tr("calcNoTransferSuggested"))}</div>
-            ${benefitSectionHtml}
+            <div class="spieg-benefits-section">
+              <div class="spieg-benefits-label">&#127873;&ensp;${escapeHtml(tr("calcCompBenefitsLabel"))}</div>
+              <ul class="spieg-benefits-cards">${cardsHtml}</ul>
+              <div class="spieg-benefits-total"><span>${escapeHtml(totalLabel)}</span><strong>${eur(total)}</strong></div>
+            </div>
           `;
         } else {
           resultHtml = `<div class="spieg-result-empty ok">${tr("calcNoTransferSuggested")}</div>`;
@@ -4775,9 +4738,8 @@ const defaultExpenseItems = [
             return { label: msg("calcBenefitPrimaryHomeMortgage", { payer, receiver }), amount };
           }
           if (row.type === "primary-home-assignment") {
-            const payer = Number(row.from) === 2 ? name2 : name1;
             const receiver = Number(row.to) === 2 ? name2 : name1;
-            return { label: msg("calcBenefitPrimaryHomeAssignment", { payer, receiver }), amount };
+            return { label: msg("calcBenefitPrimaryHomeAssignment", { receiver }), amount };
           }
           return { label: tr("calcCompBenefitsLabel"), amount };
         });
@@ -4859,30 +4821,6 @@ const defaultExpenseItems = [
         ${m.incomeMode === "cu" ? `<br /><strong>${tr("calcIncomeBaseNote")}</strong> ${tr("cuNetNoteText")}` : ""}
       `;
-      const benefitRows = getCompensativeBenefitRows(m, c1n(), c2n());
-      let benefitCardsHtml = "";
-      if (benefitRows.length) {
-        const rawBenefs = Array.isArray(m.compensativeBenefits)
-          ? m.compensativeBenefits.filter((r) => r && Number(r.amount || 0) > 0.005)
-          : [];
-        const typeIcons = { family: "\uD83C\uDFDB", "primary-home-mortgage": "\uD83C\uDFE1", "primary-home-assignment": "\uD83C\uDFE0" };
-        const cardsHtml = benefitRows
-          .map((row, i) => {
-            const icon = (rawBenefs[i] && typeIcons[rawBenefs[i].type]) || "\u2726";
-            return `<li class="spieg-benefit-card"><span class="spieg-benefit-icon">${icon}</span><span class="spieg-benefit-label">${escapeHtml(row.label)}</span><strong class="spieg-benefit-amount">${eur(row.amount)}</strong></li>`;
-          })
-          .join("");
-        const total = benefitRows.reduce((s, r) => s + r.amount, 0);
-        const totalLabel = currentLang === "en" ? "Total allocated benefits" : "Totale benefici allocati";
-        benefitCardsHtml = `
-          <div class="result-benefits-box">
-            <div class="spieg-benefits-label">&#127873;&ensp;${escapeHtml(tr("calcCompBenefitsLabel"))}</div>
-            <ul class="spieg-benefits-cards">${cardsHtml}</ul>
-            <div class="spieg-benefits-total"><span>${escapeHtml(totalLabel)}</span><strong>${eur(total)}</strong></div>
-          </div>
-        `;
-      }
       let mainHtml;
       if (m.assegnoDa1a2 > 0.005) {
         const perChild = m.figli > 1 ? `<div class="result-transfer-child">${eur(m.assegnoDa1a2 / m.figli)}&thinsp;${escapeHtml(currentLang === "en" ? "per child" : "per figlio")}</div>` : "";
@@ -4894,7 +4832,6 @@ const defaultExpenseItems = [
           </div>
           <div class="result-transfer-value">${eur(m.assegnoDa1a2)}<span class="result-transfer-per">&thinsp;${escapeHtml(tr("pdfPerMonth"))}</span></div>
           ${perChild}
-          ${benefitCardsHtml}
         `;
       } else if (m.assegnoDa2a1 > 0.005) {
         const perChild = m.figli > 1 ? `<div class="result-transfer-child">${eur(m.assegnoDa2a1 / m.figli)}&thinsp;${escapeHtml(currentLang === "en" ? "per child" : "per figlio")}</div>` : "";
@@ -4906,9 +4843,31 @@ const defaultExpenseItems = [
           </div>
           <div class="result-transfer-value">${eur(m.assegnoDa2a1)}<span class="result-transfer-per">&thinsp;${escapeHtml(tr("pdfPerMonth"))}</span></div>
           ${perChild}
-          ${benefitCardsHtml}
         `;
       } else {
+        const benefitRows = getCompensativeBenefitRows(m, c1n(), c2n());
+        let benefitCardsHtml = "";
+        if (benefitRows.length) {
+          const rawBenefs = Array.isArray(m.compensativeBenefits)
+            ? m.compensativeBenefits.filter((r) => r && Number(r.amount || 0) > 0.005)
+            : [];
+          const typeIcons = { family: "\uD83C\uDFDB", "primary-home-mortgage": "\uD83C\uDFE1" };
+          const cardsHtml = benefitRows
+            .map((row, i) => {
+              const icon = (rawBenefs[i] && typeIcons[rawBenefs[i].type]) || "\u2726";
+              return `<li class="spieg-benefit-card"><span class="spieg-benefit-icon">${icon}</span><span class="spieg-benefit-label">${escapeHtml(row.label)}</span><strong class="spieg-benefit-amount">${eur(row.amount)}</strong></li>`;
+            })
+            .join("");
+          const total = benefitRows.reduce((s, r) => s + r.amount, 0);
+          const totalLabel = currentLang === "en" ? "Total allocated benefits" : "Totale benefici allocati";
+          benefitCardsHtml = `
+            <div class="result-benefits-box">
+              <div class="spieg-benefits-label">&#127873;&ensp;${escapeHtml(tr("calcCompBenefitsLabel"))}</div>
+              <ul class="spieg-benefits-cards">${cardsHtml}</ul>
+              <div class="spieg-benefits-total"><span>${escapeHtml(totalLabel)}</span><strong>${eur(total)}</strong></div>
+            </div>
+          `;
+        }
         mainHtml = `<div class="spieg-no-transfer-badge">&#9878;&#65039;&ensp;${escapeHtml(tr("calcNoTransferSuggested"))}</div>${benefitCardsHtml}`;
       }
       resultMain.innerHTML = mainHtml;
@@ -5142,49 +5101,40 @@ const defaultExpenseItems = [
         ? `
         <tr><td>${tr("pdfPrimaryHomeAssignedTo")}</td><td>${primaryHomeAssignedLabel}</td></tr>
         <tr><td>${tr("pdfPrimaryHomeMonthlyAmount")}</td><td>${eur(m.primaCasaMutuoImporto || 0)}</td></tr>
-        <tr><td>${tr("pdfPrimaryHomeRentalValue")}</td><td>${eur(m.primaCasaValoreLocativo || 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>`;
       let explainResultHtml = `<div class="pdf-explain-result-empty">${tr("calcNoTransferSuggested")}</div>`;
-      let pdfBenefitSectionHtml = "";
-      if (compBenefits.length) {
-        const rawBenefs = Array.isArray(m.compensativeBenefits)
-          ? m.compensativeBenefits.filter((row) => row && Number(row.amount || 0) > 0.005)
-          : [];
-        const typeIcons = { family: "\uD83C\uDFDB", "primary-home-mortgage": "\uD83C\uDFE1", "primary-home-assignment": "\uD83C\uDFE0" };
-        const cardsHtml = compBenefits.map((row, idx) => {
-          const icon = (rawBenefs[idx] && typeIcons[rawBenefs[idx].type]) || "\u2726";
-          return `<li class="pdf-explain-benefit-card"><span class="pdf-explain-benefit-icon">${icon}</span><span class="pdf-explain-benefit-label">${escapeHtml(row.label)}</span><strong class="pdf-explain-benefit-amount">${eur(row.amount)}</strong></li>`;
-        }).join("");
-        const benefitsTotal = compBenefits.reduce((sum, row) => sum + Number(row.amount || 0), 0);
-        pdfBenefitSectionHtml = `
-          <div class="pdf-explain-benefits-section">
-            <div class="pdf-explain-benefits-label">&#127873;&ensp;${escapeHtml(tr("calcCompBenefitsLabel"))}</div>
-            <ul class="pdf-explain-benefits-cards">${cardsHtml}</ul>
-            <div class="pdf-explain-benefits-total"><span>${escapeHtml(tr("pdfCompBenefitsTotal"))}</span><strong>${eur(benefitsTotal)}</strong></div>
-          </div>
-        `;
-      }
       if (m.assegnoDa1a2 > 0.005) {
         explainResultHtml = `
           <div class="pdf-explain-flow">${c1NameEsc} &rarr; ${c2NameEsc}</div>
           <div class="pdf-explain-formula">${c1NameEsc}: ${eur(m.quotaTeorica1)} &minus; ${eur(m.quotaDiretta1)}</div>
           <div class="pdf-explain-amount">${eur(m.assegnoDa1a2)}</div>
-          ${pdfBenefitSectionHtml}
         `;
       } else if (m.assegnoDa2a1 > 0.005) {
         explainResultHtml = `
           <div class="pdf-explain-flow">${c2NameEsc} &rarr; ${c1NameEsc}</div>
           <div class="pdf-explain-formula">${c2NameEsc}: ${eur(m.quotaTeorica2)} &minus; ${eur(m.quotaDiretta2)}</div>
           <div class="pdf-explain-amount">${eur(m.assegnoDa2a1)}</div>
-          ${pdfBenefitSectionHtml}
         `;
       } else if (compBenefits.length) {
+        const rawBenefs = Array.isArray(m.compensativeBenefits)
+          ? m.compensativeBenefits.filter((row) => row && Number(row.amount || 0) > 0.005)
+          : [];
+        const typeIcons = { family: "\uD83C\uDFDB", "primary-home-mortgage": "\uD83C\uDFE1" };
+        const cardsHtml = compBenefits.map((row, idx) => {
+          const icon = (rawBenefs[idx] && typeIcons[rawBenefs[idx].type]) || "\u2726";
+          return `<li class="pdf-explain-benefit-card"><span class="pdf-explain-benefit-icon">${icon}</span><span class="pdf-explain-benefit-label">${escapeHtml(row.label)}</span><strong class="pdf-explain-benefit-amount">${eur(row.amount)}</strong></li>`;
+        }).join("");
+        const benefitsTotal = compBenefits.reduce((sum, row) => sum + Number(row.amount || 0), 0);
         explainResultHtml = `
           <div class="pdf-explain-no-transfer-badge">&#9878;&#65039;&ensp;${escapeHtml(tr("calcNoTransferSuggested"))}</div>
-          ${pdfBenefitSectionHtml}
+          <div class="pdf-explain-benefits-section">
+            <div class="pdf-explain-benefits-label">&#127873;&ensp;${escapeHtml(tr("calcCompBenefitsLabel"))}</div>
+            <ul class="pdf-explain-benefits-cards">${cardsHtml}</ul>
+            <div class="pdf-explain-benefits-total"><span>${escapeHtml(tr("pdfCompBenefitsTotal"))}</span><strong>${eur(benefitsTotal)}</strong></div>
+          </div>
         `;
       }
@@ -6058,7 +6008,6 @@ ${scenarioLab.length ? `
         assegnoFam2: num("assegnoFam2"),
         primaCasaMutuoEnabled: document.getElementById("primaCasaMutuoEnabled")?.checked ? 1 : 0,
         primaCasaMutuoImporto: num("primaCasaMutuoImporto"),
-        primaCasaValoreLocativo: num("primaCasaValoreLocativo"),
         primaCasaAssegnataA: String(document.getElementById("primaCasaAssegnataA")?.value || ""),
         primaCasaMutuoPerc1: num("primaCasaMutuoPerc1"),
         straordAnn1: num("straordAnn1"),
@@ -6456,7 +6405,7 @@ ${scenarioLab.length ? `
           syncPermanenza("perm1");
         } else if (e.target.id === "perm2") {
           syncPermanenza("perm2");
-        } else if (e.target.id === "primaCasaMutuoPerc1" || e.target.id === "primaCasaMutuoImporto" || e.target.id === "primaCasaValoreLocativo") {
+        } 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";

package/frontend/public/index.html CHANGED Viewed

@@ -358,12 +358,6 @@
                 </label>
                 <input id="primaCasaMutuoEnabled" type="checkbox" />
               </div>
-              <div class="field">
-                <label for="primaCasaMutuoImporto" class="label-row"><span id="lblPrimaCasaMutuoImporto">Rata mutuo mensile ({currency})</span>
-                  <span class="hint" id="hintPrimaCasaMutuoImporto" title="Importo mensile complessivo della rata del mutuo prima casa.">i</span>
-                </label>
-                <input id="primaCasaMutuoImporto" type="number" min="0" step="50" value="0" />
-              </div>
               <div class="field" style="display: none;">
                 <label for="primaCasaValoreLocativo" class="label-row"><span id="lblPrimaCasaValoreLocativo">Casa (valore locativo) ({currency})</span>
                   <span class="hint" id="hintPrimaCasaValoreLocativo" title="Valore locativo mensile della casa assegnata, usato per valorizzare il beneficio economico implicito.">i</span>
@@ -380,7 +374,13 @@
                   <option value="2">Coniuge 2</option>
                 </select>
               </div>
-              <div class="field" style="display: none;">
+              <div class="field">
+                <label for="primaCasaMutuoImporto" class="label-row"><span id="lblPrimaCasaMutuoImporto">Rata mutuo mensile ({currency})</span>
+                  <span class="hint" id="hintPrimaCasaMutuoImporto" title="Importo mensile complessivo della rata del mutuo prima casa.">i</span>
+                </label>
+                <input id="primaCasaMutuoImporto" type="number" min="0" step="50" value="0" />
+              </div>
+              <div class="field">
                 <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>
@@ -623,7 +623,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.3.0"></script>
+    <script src="app.js?v=2.4.0"></script>
 </body>
 </html>

package/frontend/public/styles.css CHANGED Viewed

@@ -884,68 +884,138 @@
       color: #184a44;
     }
+    .extra-box-first-home {
+      background: linear-gradient(135deg, #ffffff 0%, #f0fffe 50%, #f5faff 100%);
+      border: 1px solid rgba(27, 141, 127, 0.15);
+      box-shadow: 0 2px 8px rgba(27, 141, 127, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
+    }
+    .extra-box-first-home .extra-box-title::before {
+      content: '🏠 ';
+      margin-right: 4px;
+    }
     .extra-box-first-home .extra-grid {
       gap: 8px 10px;
     }
     .mortgage-split-slider {
-      margin-top: 2px;
-      border: 1px solid #b9d6cf;
-      border-radius: 12px;
+      margin-top: 12px;
+      border: 1.5px solid rgba(27, 141, 127, 0.2);
+      border-radius: 16px;
       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: 8px;
+        radial-gradient(120% 160% at 0% 0%, rgba(229, 247, 242, 0.6), transparent 58%),
+        radial-gradient(120% 160% at 100% 0%, rgba(255, 241, 214, 0.6), transparent 58%),
+        linear-gradient(180deg, #fafffe, #f2f8f7);
+      padding: 14px;
       display: grid;
       grid-template-columns: minmax(0, 1fr) minmax(180px, 2fr) minmax(0, 1fr);
-      gap: 6px;
+      gap: 10px;
       align-items: center;
-      transition: opacity 0.2s ease;
+      box-shadow: 0 4px 12px rgba(27, 141, 127, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+    .mortgage-split-slider:hover {
+      box-shadow: 0 8px 20px rgba(27, 141, 127, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8);
+      border-color: rgba(27, 141, 127, 0.3);
     }
     .mortgage-split-slider.is-disabled {
-      opacity: 0.58;
+      opacity: 0.55;
+      filter: grayscale(0.4);
     }
     .mortgage-split-side {
-      border: 1px solid #c6ded8;
-      border-radius: 12px;
-      padding: 8px;
-      background: linear-gradient(180deg, #ffffff, #f3faf8);
-      min-height: 58px;
+      border: 1.5px solid rgba(27, 141, 127, 0.15);
+      border-radius: 14px;
+      padding: 12px;
+      background: linear-gradient(135deg, #ffffff 0%, #f5fbf9 100%);
+      min-height: 62px;
       display: grid;
       align-content: center;
-      gap: 3px;
-      box-shadow: 0 1px 3px rgba(17, 74, 68, 0.08);
+      gap: 4px;
+      box-shadow: 0 2px 6px rgba(27, 141, 127, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.7);
+      transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
+      position: relative;
+      overflow: hidden;
+    }
+    .mortgage-split-side::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: radial-gradient(120% 200% at 50% 0%, rgba(255, 255, 255, 0.4), transparent 70%);
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity 0.28s ease;
+    }
+    .mortgage-split-side:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 16px rgba(27, 141, 127, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.9);
+      border-color: rgba(27, 141, 127, 0.25);
+    }
+    .mortgage-split-side:hover::before {
+      opacity: 1;
     }
     .mortgage-split-side-left {
-      box-shadow: inset 3px 0 0 #1b8d7f;
+      box-shadow: 0 2px 6px rgba(27, 141, 127, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.7), inset 3px 0 0 #1b8d7f;
+      background: linear-gradient(135deg, #effaf8 0%, #e5f5f1 100%);
+    }
+    .mortgage-split-side-left:hover {
+      box-shadow: 0 6px 16px rgba(27, 141, 127, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.9), inset 3px 0 0 #1b8d7f;
+      background: linear-gradient(135deg, #f0faf8 0%, #e8f7f4 100%);
     }
     .mortgage-split-side-right {
-      box-shadow: inset -3px 0 0 #d89a35;
+      box-shadow: 0 2px 6px rgba(27, 141, 127, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.7), inset -3px 0 0 #d89a35;
       text-align: right;
+      background: linear-gradient(135deg, #fef9f1 0%, #fdf5e8 100%);
+    }
+    .mortgage-split-side-right:hover {
+      box-shadow: 0 6px 16px rgba(27, 141, 127, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.9), inset -3px 0 0 #d89a35;
+      background: linear-gradient(135deg, #fefaf4 0%, #fef7ed 100%);
     }
     .mortgage-split-name {
-      font-size: 0.72rem;
+      font-size: 0.73rem;
       font-weight: 800;
-      color: #2a4a46;
+      color: #1a3a36;
       overflow-wrap: anywhere;
+      letter-spacing: 0.3px;
+      text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
     }
     .mortgage-split-amount {
-      font-size: 0.9rem;
+      font-size: 0.95rem;
       font-weight: 900;
-      color: #124f48;
-      letter-spacing: 0.2px;
+      color: #0b4440;
+      letter-spacing: 0.3px;
+      background: linear-gradient(135deg, #0f6659, #1b8d7f);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      filter: drop-shadow(0 1px 2px rgba(27, 141, 127, 0.2));
+    }
+    .mortgage-split-side-right .mortgage-split-amount {
+      background: linear-gradient(135deg, #c86d28, #d89a35);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
     }
     .mortgage-split-range-wrap {
       position: relative;
-      padding: 14px 0 6px;
+      padding: 20px 0 8px;
       --split-left: 50%;
     }
@@ -953,53 +1023,81 @@
       -webkit-appearance: none;
       appearance: none;
       width: 100%;
-      height: 8px;
+      height: 10px;
       border-radius: 999px;
       background: linear-gradient(90deg,
-        #2b9d8e 0%,
-        #6cb9a9 var(--split-left),
-        #dfb264 var(--split-left),
-        #cb8a2d 100%);
+        #16a396 0%,
+        #3db5a0 20%,
+        #6cbba8 var(--split-left),
+        #ddb05a var(--split-left),
+        #d89a35 80%,
+        #c27f1d 100%);
       outline: none;
       margin: 0;
-      transition: background 0.16s ease;
+      transition: background 0.2s ease;
+      box-shadow: 0 2px 4px rgba(22, 163, 150, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.3);
+    }
+    .mortgage-split-range-wrap input[type="range"]:hover {
+      box-shadow: 0 3px 8px rgba(22, 163, 150, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.4);
     }
     .mortgage-split-range-wrap input[type="range"]::-webkit-slider-thumb {
       -webkit-appearance: none;
       appearance: none;
-      width: 22px;
-      height: 22px;
+      width: 26px;
+      height: 26px;
       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;
+      border: 3px solid #ffffff;
+      background: radial-gradient(circle at 30% 25%, #ffffff 0%, #f0faf8 30%, #16a396 100%);
+      box-shadow: 0 4px 12px rgba(13, 70, 64, 0.4), 0 0 0 1px rgba(27, 141, 127, 0.15);
+      cursor: grab;
+      transition: all 0.2s ease;
+    }
+    .mortgage-split-range-wrap input[type="range"]::-webkit-slider-thumb:hover {
+      width: 28px;
+      height: 28px;
+      box-shadow: 0 6px 16px rgba(13, 70, 64, 0.5), 0 0 0 2px rgba(27, 141, 127, 0.2);
+    }
+    .mortgage-split-range-wrap input[type="range"]::-webkit-slider-thumb:active {
+      cursor: grabbing;
     }
     .mortgage-split-range-wrap input[type="range"]::-moz-range-thumb {
-      width: 22px;
-      height: 22px;
+      width: 26px;
+      height: 26px;
       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;
+      border: 3px solid #ffffff;
+      background: radial-gradient(circle at 30% 25%, #ffffff 0%, #f0faf8 30%, #16a396 100%);
+      box-shadow: 0 4px 12px rgba(13, 70, 64, 0.4), 0 0 0 1px rgba(27, 141, 127, 0.15);
+      cursor: grab;
+      transition: all 0.2s ease;
+    }
+    .mortgage-split-range-wrap input[type="range"]::-moz-range-thumb:hover {
+      width: 28px;
+      height: 28px;
+      box-shadow: 0 6px 16px rgba(13, 70, 64, 0.5), 0 0 0 2px rgba(27, 141, 127, 0.2);
     }
     .mortgage-split-center {
       position: absolute;
-      top: -1px;
-      left: 50%;
+      top: 2px;
+      left: var(--split-left);
       transform: translateX(-50%);
-      font-size: 0.7rem;
+      font-size: 0.73rem;
       font-weight: 900;
-      color: #114c45;
-      background: #ffffff;
-      border: 1px solid #b8d5ce;
+      color: #0f544d;
+      background: linear-gradient(135deg, #ffffff, #f5fbf9);
+      border: 1.5px solid rgba(27, 141, 127, 0.2);
       border-radius: 999px;
-      padding: 1px 7px;
+      padding: 2px 9px;
       white-space: nowrap;
+      box-shadow: 0 2px 6px rgba(27, 141, 127, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.6);
+      transition: all 0.2s ease;
+      letter-spacing: 0.2px;
     }
     #primaCasaMutuoSplitInfo {

package/package.json CHANGED Viewed

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