mantenimento-app 2.2.6 → 2.2.7

package/app.js

@@ -4675,24 +4675,42 @@ const defaultExpenseItems = [
           <strong class="sep-cost-value ${cls}">${formatted}</strong>
         </div>`;
       };
+      const statHtml = (label, value, tone) => {
+        const cls = lossClass(value);
+        const formatted = value === null ? "&mdash;" : eur(value);
+        return `<div class="sep-cost-stat ${tone || ""}">
+          <span class="sep-cost-stat-label">${label}</span>
+          <strong class="sep-cost-stat-value ${cls}">${formatted}</strong>
+        </div>`;
+      };
+      const pillHtml = (label, value) => {
+        const cls = lossClass(value);
+        const formatted = value === null ? "&mdash;" : eur(value);
+        return `<div class="sep-cost-pill">
+          <span class="sep-cost-pill-label">${label}</span>
+          <strong class="sep-cost-pill-value ${cls}">${formatted}</strong>
+        </div>`;
+      };
 
       panel.innerHTML = `
         <div class="sep-cost-panel">
-          <h3 class="sep-cost-title">${escapeHtml(tr("sepCostPanelTitle"))}</h3>
-          <div class="sep-cost-section">
+          <h3 class="sep-cost-title"><span class="sep-cost-title-icon">&#128148;</span>${escapeHtml(tr("sepCostPanelTitle"))}</h3>
+          <div class="sep-cost-hero">
+            ${statHtml(tr("sepCostLossMonthly"), m.perditaMensile, "sep-cost-stat--primary")}
+            ${statHtml(tr("sepCostLossAnnually"), m.perditaAnnua, "sep-cost-stat--secondary")}
+          </div>
+          <div class="sep-cost-section sep-cost-section--grid">
             ${rowHtml(tr("sepCostNetTogether"), m.nettoInsiemeCombinato, false)}
             ${rowHtml(tr("sepCostNetSeparated"), m.nettoSeparatoTotale, false)}
-          </div>
-          <div class="sep-cost-divider"></div>
-          <div class="sep-cost-section">
             ${m.separationAdjustmentHousingUtilities > 0
               ? rowHtml(tr("sepCostHousingUtilityAdj"), m.separationAdjustmentHousingUtilities, false)
               : ""}
             ${rowHtml(tr("sepCostDuplication"), m.costoSeparazioneMensile, false)}
-            ${rowHtml(tr("sepCostLossMonthly"), m.perditaMensile, true)}
-            ${rowHtml(tr("sepCostLossAnnually"), m.perditaAnnua, true)}
-            ${rowHtml(msg("sepCostLossSpouse", { spouse: c1NameEsc }), m.perditaSpouse1, false)}
-            ${rowHtml(msg("sepCostLossSpouse", { spouse: c2NameEsc }), m.perditaSpouse2, false)}
+          </div>
+          <div class="sep-cost-divider"></div>
+          <div class="sep-cost-pill-wrap">
+            ${pillHtml(msg("sepCostLossSpouse", { spouse: c1NameEsc }), m.perditaSpouse1)}
+            ${pillHtml(msg("sepCostLossSpouse", { spouse: c2NameEsc }), m.perditaSpouse2)}
           </div>
         </div>
       `;

package/frontend/public/app.js

@@ -4675,24 +4675,42 @@ const defaultExpenseItems = [
           <strong class="sep-cost-value ${cls}">${formatted}</strong>
         </div>`;
       };
+      const statHtml = (label, value, tone) => {
+        const cls = lossClass(value);
+        const formatted = value === null ? "&mdash;" : eur(value);
+        return `<div class="sep-cost-stat ${tone || ""}">
+          <span class="sep-cost-stat-label">${label}</span>
+          <strong class="sep-cost-stat-value ${cls}">${formatted}</strong>
+        </div>`;
+      };
+      const pillHtml = (label, value) => {
+        const cls = lossClass(value);
+        const formatted = value === null ? "&mdash;" : eur(value);
+        return `<div class="sep-cost-pill">
+          <span class="sep-cost-pill-label">${label}</span>
+          <strong class="sep-cost-pill-value ${cls}">${formatted}</strong>
+        </div>`;
+      };
 
       panel.innerHTML = `
         <div class="sep-cost-panel">
-          <h3 class="sep-cost-title">${escapeHtml(tr("sepCostPanelTitle"))}</h3>
-          <div class="sep-cost-section">
+          <h3 class="sep-cost-title"><span class="sep-cost-title-icon">&#128148;</span>${escapeHtml(tr("sepCostPanelTitle"))}</h3>
+          <div class="sep-cost-hero">
+            ${statHtml(tr("sepCostLossMonthly"), m.perditaMensile, "sep-cost-stat--primary")}
+            ${statHtml(tr("sepCostLossAnnually"), m.perditaAnnua, "sep-cost-stat--secondary")}
+          </div>
+          <div class="sep-cost-section sep-cost-section--grid">
             ${rowHtml(tr("sepCostNetTogether"), m.nettoInsiemeCombinato, false)}
             ${rowHtml(tr("sepCostNetSeparated"), m.nettoSeparatoTotale, false)}
-          </div>
-          <div class="sep-cost-divider"></div>
-          <div class="sep-cost-section">
             ${m.separationAdjustmentHousingUtilities > 0
               ? rowHtml(tr("sepCostHousingUtilityAdj"), m.separationAdjustmentHousingUtilities, false)
               : ""}
             ${rowHtml(tr("sepCostDuplication"), m.costoSeparazioneMensile, false)}
-            ${rowHtml(tr("sepCostLossMonthly"), m.perditaMensile, true)}
-            ${rowHtml(tr("sepCostLossAnnually"), m.perditaAnnua, true)}
-            ${rowHtml(msg("sepCostLossSpouse", { spouse: c1NameEsc }), m.perditaSpouse1, false)}
-            ${rowHtml(msg("sepCostLossSpouse", { spouse: c2NameEsc }), m.perditaSpouse2, false)}
+          </div>
+          <div class="sep-cost-divider"></div>
+          <div class="sep-cost-pill-wrap">
+            ${pillHtml(msg("sepCostLossSpouse", { spouse: c1NameEsc }), m.perditaSpouse1)}
+            ${pillHtml(msg("sepCostLossSpouse", { spouse: c2NameEsc }), m.perditaSpouse2)}
           </div>
         </div>
       `;

package/frontend/public/index.html

@@ -599,7 +599,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.2.6"></script>
+    <script src="app.js?v=2.2.7"></script>
 </body>
 </html>
 

package/frontend/public/styles.css

@@ -1847,19 +1847,78 @@
 
       .sep-cost-panel {
         margin-top: 10px;
-        border-radius: 14px;
+        border-radius: 16px;
         border: 1.5px solid #e2a5a5;
-        background: linear-gradient(145deg, #fff5f3, #ffeceb 52%, #fff6f0);
-        box-shadow: 0 8px 22px rgba(130, 33, 33, 0.12);
-        padding: 12px;
+        background:
+          radial-gradient(120% 180% at 0% -20%, rgba(255, 241, 230, 0.75), transparent 58%),
+          radial-gradient(120% 180% at 100% -20%, rgba(255, 228, 228, 0.72), transparent 56%),
+          linear-gradient(145deg, #fff5f3, #ffeceb 52%, #fff6f0);
+        box-shadow: 0 10px 24px rgba(130, 33, 33, 0.14);
+        padding: 14px;
       }
 
       .sep-cost-title {
-        margin: 0 0 8px;
-        font-size: 0.98rem;
+        margin: 0 0 10px;
+        font-size: 1.01rem;
         font-weight: 900;
         color: #842d2d;
         letter-spacing: 0.2px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .sep-cost-title-icon {
+        width: 24px;
+        height: 24px;
+        border-radius: 999px;
+        background: rgba(140, 32, 32, 0.12);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 0.85rem;
+      }
+
+      .sep-cost-hero {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 8px;
+        margin-bottom: 9px;
+      }
+
+      .sep-cost-stat {
+        border-radius: 12px;
+        border: 1px solid rgba(138, 44, 44, 0.16);
+        background: rgba(255,255,255,0.82);
+        padding: 8px 10px;
+        display: grid;
+        gap: 2px;
+        min-width: 0;
+      }
+
+      .sep-cost-stat--primary {
+        background: linear-gradient(130deg, rgba(255, 233, 232, 0.95), rgba(255, 244, 232, 0.92));
+        border-color: rgba(170, 67, 46, 0.35);
+      }
+
+      .sep-cost-stat--secondary {
+        background: linear-gradient(130deg, rgba(255, 245, 240, 0.95), rgba(255, 235, 231, 0.92));
+        border-color: rgba(164, 61, 61, 0.28);
+      }
+
+      .sep-cost-stat-label {
+        font-size: 0.72rem;
+        font-weight: 800;
+        color: #7a3d3d;
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+      }
+
+      .sep-cost-stat-value {
+        font-size: 1.12rem;
+        font-weight: 900;
+        font-variant-numeric: tabular-nums;
+        white-space: nowrap;
       }
 
       .sep-cost-section {
@@ -1867,6 +1926,10 @@
         gap: 7px;
       }
 
+      .sep-cost-section--grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+
       .sep-cost-divider {
         height: 1px;
         margin: 8px 0;
@@ -1893,6 +1956,7 @@
         font-size: 0.82rem;
         color: #6a3939;
         font-weight: 700;
+        min-width: 0;
       }
 
       .sep-cost-value {
@@ -1903,6 +1967,47 @@
         color: #5d2e2e;
       }
 
+      .sep-cost-pill-wrap {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 8px;
+      }
+
+      .sep-cost-pill {
+        border: 1px solid rgba(134, 40, 40, 0.18);
+        border-radius: 11px;
+        background: rgba(255,255,255,0.82);
+        padding: 8px 10px;
+        display: grid;
+        gap: 2px;
+      }
+
+      .sep-cost-pill-label {
+        font-size: 0.76rem;
+        color: #714343;
+        font-weight: 700;
+        line-height: 1.2;
+      }
+
+      .sep-cost-pill-value {
+        font-size: 1rem;
+        font-weight: 900;
+        font-variant-numeric: tabular-nums;
+        white-space: nowrap;
+      }
+
+      @media (max-width: 720px) {
+        .sep-cost-hero,
+        .sep-cost-section--grid,
+        .sep-cost-pill-wrap {
+          grid-template-columns: 1fr;
+        }
+        .sep-cost-stat-value,
+        .sep-cost-pill-value {
+          white-space: normal;
+        }
+      }
+
       .sep-loss-negative {
         color: #9b1f1f;
       }

package/package.json

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