fix(ui): center header title on tablet + add skeleton loader to spesa stat card

Header title centering:
- .header-content: remove max-width:600px, use position:relative + justify-content:center
- .header-title: position:absolute; left:50%; transform:translateX(-50%)
  so the title is always at the exact center of the header regardless of
  screen width or how many action buttons are on the right
- Added max-width:calc(100% - 200px) to prevent overlap with action buttons
  on narrow screens

Spesa skeleton preloader:
- index.html: add stat-loading class to stat-spesa (was missing, other 3 had it)
- app.js showPage('dashboard'): add 'spesa' to the skeleton init array
- app.js loadShoppingCount(): remove stat-loading class after data loads
  (like loadDashboard() does for the other 3 locations)

index.html

@@ -97,7 +97,7 @@
             </div>
             <div class="stat-card" onclick="showPage('shopping')">
                 <span class="stat-icon">🛒</span>
-                <span class="stat-value" id="stat-spesa">-</span>
+                <span class="stat-value stat-loading" id="stat-spesa">…</span>
                 <span class="stat-label" data-i18n="nav.shopping">Spesa</span>
                 <span class="stat-urgent" id="stat-urgent" style="display:none"></span>
             </div>