Correzioni alla UI dopo la verifica sul terminale

Prime correzioni fatte guardando l'app su un Honeywell EDA52 (720x1440
@320dpi, cioe' 360 punti logici di larghezza) invece che a occhio.

- Barra di stato: era tinta di corallo da colorPrimaryDark, cioe' l'accento
  usato come decorazione della cornice di sistema. Ora si fonde con lo
  sfondo dell'app, con icone scure (WindowInsetsController).
- Gradino compatto sotto i 380px: la scala di STILE_UI e' tarata su telefoni
  piu' larghi, e a misura piena i titoli si troncavano e in una schermata
  entrava pochissimo lavoro. Le proporzioni restano, cambia la taglia.
  Sui telefoni normali non cambia nulla.
- Icone delle azioni costruttive: usavano il fondo del tono danger, quindi
  "Nuova scheda" e "Aggiungi una foto" erano identiche a "Elimina
  ispezione". Ora usano il tono info. Un --primary-surface non risolveva:
  il primario di SteUP e' gia' un rosso, quindi un suo fondo tenue resta
  indistinguibile da quello danger.
- Testata: il titolo puo' andare su due righe prima di troncare. Il nome del
  punto vendita e' l'ancora del compito, "D11-PRIMO PREZ..." non aiuta.
- Schermata ispezione: il nome del punto vendita non e' piu' ripetuto nel
  pannello di riepilogo, dove era gia' in testata.
- Padding dei gruppi di form e della barra azioni ridotti su schermo stretto.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

SteUp.Maui/Platforms/Android/MainActivity.cs

@@ -20,6 +20,8 @@ namespace SteUp.Maui
         {
             base.OnCreate(savedInstanceState);
 
+            ApplySystemBarsAppearance();
+
             // Da Android 15 (API 35) il edge-to-edge e' forzato e adjustResize non ridimensiona
             // piu' la finestra: la tastiera si limita a coprire la WebView. Riduciamo noi il
             // content view dell'altezza dell'IME cosi' il layout Blazor (100vh) si ricalcola.
@@ -27,6 +29,21 @@ namespace SteUp.Maui
                 ViewCompat.SetOnApplyWindowInsetsListener(content, new ImeInsetsListener());
         }
 
+        /// <summary>
+        /// Le barre di sistema si fondono con lo sfondo chiaro dell'app: icone
+        /// scure su fondo chiaro. Senza questo la barra di stato resta tinta
+        /// dell'accento, che nel sistema di design indica l'azione, non la
+        /// cornice.
+        /// </summary>
+        private void ApplySystemBarsAppearance()
+        {
+            if (Window is null) return;
+
+            var controller = WindowCompat.GetInsetsController(Window, Window.DecorView);
+            controller.AppearanceLightStatusBars = true;
+            controller.AppearanceLightNavigationBars = true;
+        }
+
         public override void OnBackPressed()
         {
             // Se la UI Blazor ha un form aperto se ne occupa lei (propone il salvataggio

SteUp.Maui/Platforms/Android/Resources/values/colors.xml

@@ -1,6 +1,8 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <color name="colorPrimary">#ec4c41</color>
-    <color name="colorPrimaryDark">#d02315</color>
+    <!-- Barra di stato: si fonde con lo sfondo dell'app. Il corallo e' il
-    <color name="colorAccent">#d02315</color>
+         colore dell'azione, non una decorazione della cornice di sistema. -->
+    <color name="colorPrimaryDark">#e9edf2</color>
+    <color name="colorAccent">#ec4c41</color>
 </resources>

SteUp.Shared/Components/Pages/IspezionePage.razor

@@ -31,10 +31,11 @@
         @* §6.6 Pannello di riepilogo: primo elemento della pagina, superficie
            tenue, con lo stato del documento e i conteggi sempre a vista. *@
         <section class="panel panel--info panel--lg">
+            @* Il nome del punto vendita e' gia' nella testata: qui basta la data
+               e lo stato del documento, che la testata non porta. *@
             <div class="summary__head">
                 <div class="section-header__text">
-                    <h2 class="summary__title">@Titolo</h2>
+                    <p class="summary__subtitle" style="margin: 0;">@Ispezione.Data.ToString("d MMMM yyyy")</p>
-                    <p class="summary__subtitle">@Ispezione.Data.ToString("d MMMM yyyy")</p>
                 </div>
                 <Badge Spec="@Ispezione.Stato.ToBadge()"/>
             </div>

SteUp.Shared/wwwroot/css/components.css

@@ -29,15 +29,18 @@
     min-width: 0;
 }
 
+/* Il titolo puo' andare su due righe prima di troncare: il nome del punto
+   vendita e' l'ancora del compito, tagliarlo a meta' non aiuta nessuno. */
 .appbar__title {
     font-size: var(--headline-sm-size);
     line-height: var(--headline-sm-height);
     font-weight: 700;
     letter-spacing: -0.02em;
     color: var(--ink);
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
     overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
 }
 
 .appbar__subtitle {
@@ -497,7 +500,12 @@
 .action-bar > * { flex: 1 1 0; min-width: 0; }
 
 @media (max-width: 390px) {
-    .action-bar { flex-direction: column; gap: var(--space-xs); }
+    .action-bar {
+        flex-direction: column;
+        gap: var(--space-xs);
+        padding: var(--space-xs) var(--space-md) var(--space-sm);
+        padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
+    }
 }
 
 /* -----------------------------------------------------------------------------

SteUp.Shared/wwwroot/css/forms.css

@@ -14,6 +14,12 @@
     padding: var(--space-md);
 }
 
+/* Su schermo stretto il form e' lungo: ogni pixel di padding e' una riga di
+   lavoro in meno visibile a colpo d'occhio. */
+@media (max-width: 380px) {
+    .form-group { padding: var(--space-sm) var(--space-14); }
+}
+
 .form-group__label {
     display: flex;
     align-items: center;
@@ -317,7 +323,11 @@
 }
 
 .action-tile__icon--neutral { background-color: var(--neutral-surface); color: var(--neutral-ink); }
-.action-tile__icon--primary { background-color: var(--danger-surface); color: var(--primary); }
+/* Le azioni costruttive secondarie non portano l'accento: il corallo resta del
+   pulsante primario. Un fondo corallo tenue sarebbe comunque indistinguibile
+   dal tono danger, perche' il primario di SteUP e' gia' un rosso — ed e'
+   esattamente cosi' che "Nuova scheda" finiva identica a "Elimina ispezione". */
+.action-tile__icon--primary { background-color: var(--info-surface); color: var(--info-ink); }
 .action-tile__icon--success { background-color: var(--success-surface); color: var(--success-ink); }
 .action-tile__icon--danger  { background-color: var(--danger-surface);  color: var(--danger-ink); }
 .action-tile__icon--info    { background-color: var(--info-surface);    color: var(--info-ink); }

SteUp.Shared/wwwroot/css/tokens.css

@@ -165,3 +165,41 @@
     /* Breakpoint (STILE_UI §3) — documentati qui, usati nelle media query:
        rail 720px · twoColumn 900px · contentMax 1180px */
 }
+
+/* =============================================================================
+   Gradino compatto — schermi stretti (≤380px)
+
+   Il terminale da campo (Honeywell EDA52) ha 360 punti logici di larghezza,
+   molto meno dei telefoni per cui la scala di STILE_UI è tarata: a misura
+   piena i titoli si troncano, il testo va a capo e in una schermata entra
+   pochissimo lavoro. Qui la scala scende di un gradino — le proporzioni e i
+   rapporti restano quelli del documento, cambia solo la taglia.
+
+   È l'"Adattamento locale" del §8: i componenti si riorganizzano sotto le
+   soglie invece di pretendere lo spazio che non c'è.
+   ========================================================================== */
+
+@media (max-width: 380px) {
+    :root {
+        --headline-md-size: 28px;
+        --headline-sm-size: 22px;
+        --title-lg-size: 18px;
+        --title-md-size: 16px;
+        --body-lg-size: 15px;
+        --body-md-size: 14px;
+        --label-lg-size: 13px;
+        --label-md-size: 12px;
+        --label-sm-size: 11px;
+
+        --space-lg: 20px;
+        --space-xl: 24px;
+        --space-18: 14px;
+        --space-20: 16px;
+        --space-22: 18px;
+
+        --appbar-height: 64px;
+        --button-height: 44px;
+        --navbar-height: 62px;
+        --nav-clearance: 104px;
+    }
+}