mantenimento-app 2.1.2 → 2.1.4

package/frontend/public/index.html

@@ -347,6 +347,55 @@
             </div>
           </div>
 
+          <div class="extra-box" id="firstHomeBox">
+            <div class="extra-box-title" id="firstHomeBoxTitle">Mutuo prima casa ceduta</div>
+            <div class="extra-box-note" id="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.</div>
+            <div class="extra-grid">
+              <div class="field">
+                <label for="primaCasaMutuoEnabled" class="label-row"><span id="lblPrimaCasaMutuoEnabled">Mutuo su prima casa dei coniugi</span>
+                  <span class="hint" id="hintPrimaCasaMutuoEnabled" title="Attiva per includere il mutuo della prima casa ceduta nei benefici compensativi.">i</span>
+                </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">
+                <label for="primaCasaAssegnataA" class="label-row"><span id="lblPrimaCasaAssegnataA">Casa assegnata a</span>
+                  <span class="hint" id="hintPrimaCasaAssegnataA" title="Seleziona il coniuge a cui e ceduta la prima casa.">i</span>
+                </label>
+                <select id="primaCasaAssegnataA">
+                  <option value="">Nessuna cessione</option>
+                  <option value="1">Coniuge 1</option>
+                  <option value="2">Coniuge 2</option>
+                </select>
+              </div>
+              <div class="field">
+                <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>
+                <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>
+          </div>
+
           <div class="extra-box" id="extraBox">
             <div class="extra-box-title" id="extraBoxTitle">Spese straordinarie (base)</div>
             <div class="extra-box-note" id="extraBoxNote">Inserisci i costi straordinari annuali stimati: il sistema li converte in quota mensile da includere nel modello.</div>
@@ -452,10 +501,22 @@
           <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>
       </section>
     </div>
 
+    <section class="card scenario-lab-card" id="scenarioLabCard">
+      <h2>Scenario Lab</h2>
+      <div class="content">
+        <div class="scenario-lab-actions">
+          <button class="btn-primary" id="btnSaveScenario" type="button">Salva scenario corrente</button>
+          <button class="btn-secondary" id="btnClearScenarios" type="button">Azzera scenari</button>
+        </div>
+        <div id="scenarioLabBody"></div>
+      </div>
+    </section>
+
     <div class="donate-banner" role="button" tabindex="0" aria-label="Apri scelta metodo di donazione">
       <div class="donate-text">
         <div class="donate-icon">☕</div>
@@ -515,6 +576,6 @@
   <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.1"></script>
+    <script src="app.js?v=2.1.4"></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,105 @@
     .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: 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 +2784,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;
       }