Compatta i campi di accesso e togli il doppio bordo sul fuoco

Sul fuoco si vedevano due bordi: quello del campo piu' l'anello globale che
l'input riceve per conto suo, con raggio e colore diversi. Dove e' il
contenitore a segnare il fuoco — accesso, ricerca, barcode, gruppi del form —
l'anello sull'input non serve: il fuoco resta visibile dal bordo del campo.

Campi da 74 a 56 punti: padding piu' stretto, riga del valore alta quanto il
testo che contiene. Il bottone che mostra la password sborda nel padding invece
di alzare la riga, cosi' il campo password non e' piu' alto degli altri due e
il bersaglio resta da 44.

"Accedi" disabilitato era navy pieno con testo bianco: sembrava pronto, e il
tocco a vuoto sembrava un guasto. Ora e' chiaramente inerte.

Con la tastiera aperta il marchio finiva tagliato sopra e non si poteva
risalire: il pannello si centra con i margini automatici invece che con
align-items, cosi' lo scroll arriva anche in cima. Via anche la barra di
scorrimento, come nel resto delle schermate.

Verificata sul terminale, a riposo e col campo attivo.

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

SteUp.Shared/wwwroot/css/base.css

@@ -245,6 +245,18 @@ textarea:focus-visible,
     border-radius: var(--radius-compact);
 }
 
+/* Dove e' il contenitore a segnare il fuoco — campo di accesso, ricerca,
+   barcode, gruppo di form — l'anello sull'input disegnerebbe un secondo bordo
+   dentro il primo, con raggio e colore diversi. Il fuoco resta visibile: lo
+   mostra il bordo del campo. */
+.onboarding__field input:focus-visible,
+.search-field input:focus-visible,
+.barcode-field input:focus-visible,
+.form-group input:focus-visible,
+.form-group textarea:focus-visible {
+    outline: none;
+}
+
 /* -----------------------------------------------------------------------------
    Risposta al tocco
    Feedback fisico immediato (principio "Feedback immediato a ogni scan"):

SteUp.Shared/wwwroot/css/components.css

@@ -873,22 +873,31 @@
 
 .onboarding {
     display: flex;
-    align-items: center;
     justify-content: center;
     min-height: 100dvh;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
+    /* La barra di scorrimento del browser e' uno dei segnali che tradiscono
+       una pagina web dentro un'app, come nel resto delle schermate. */
+    scrollbar-width: none;
     padding: var(--space-lg);
     padding-top: calc(var(--space-lg) + env(safe-area-inset-top, 0px));
     padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
     background-color: var(--workspace);
 }
 
+.onboarding::-webkit-scrollbar { display: none; }
+
 .onboarding__panel {
     width: 100%;
     max-width: 440px;
     display: flex;
     flex-direction: column;
+    /* Centrato con i margini automatici invece che con align-items: quando la
+       tastiera accorcia la finestra il contenuto eccede da entrambi i lati, e
+       con align-items: center la parte sopra finisce fuori dalla portata dello
+       scroll — il marchio si vedeva tagliato e non si poteva risalire. */
+    margin-block: auto;
 }
 
 .onboarding__logo {
@@ -905,13 +914,13 @@
 .onboarding__fields {
     display: flex;
     flex-direction: column;
-    gap: var(--space-sm);
-    margin-top: var(--space-xl);
+    gap: var(--space-xs);
+    margin-top: var(--space-lg);
 }
 
 .onboarding__field {
     display: block;
-    padding: var(--space-sm) var(--space-md);
+    padding: var(--space-xs) var(--space-14);
     background-color: var(--surface);
     border-radius: var(--radius-control);
     border: 1.5px solid transparent;
@@ -927,7 +936,7 @@
 .onboarding__label {
     display: block;
     font-size: var(--label-md-size);
-    line-height: 1.25;
+    line-height: 1.2;
     font-weight: 500;
     color: var(--ink-muted);
 }
@@ -941,7 +950,7 @@
 .onboarding__input {
     width: 100%;
     min-width: 0;
-    min-height: 34px;
+    min-height: 24px;
     border: none;
     background: none;
     outline: none;
@@ -958,7 +967,10 @@
     justify-content: center;
     width: var(--touch-min);
     height: var(--touch-min);
-    margin-right: calc(var(--space-xs) * -1);
+    /* Il bersaglio resta da 44, ma sborda nel padding invece di alzare la riga:
+       cosi' il campo password non e' piu' alto degli altri due. */
+    margin-block: -10px;
+    margin-right: calc(var(--space-6) * -1);
     border: none;
     border-radius: var(--radius-pill);
     background: none;
@@ -966,6 +978,10 @@
     font-size: 20px;
 }
 
+/* L'anello del fuoco resta dentro il bottone: fuori sbatterebbe contro il
+   bordo del campo. */
+.onboarding__reveal:focus-visible { outline-offset: -2px; }
+
 .onboarding__reveal:active { background-color: var(--surface-muted); }
 
 .onboarding__error { margin-top: var(--space-md); }
@@ -991,7 +1007,9 @@
 }
 
 .onboarding__submit:active { transform: scale(0.98); }
-.onboarding__submit:disabled { background-color: var(--ink-muted); }
+/* Disabilitato deve sembrare inerte: il navy pieno con testo bianco si legge
+   come un bottone pronto, e il tocco a vuoto sembra un guasto. */
+.onboarding__submit:disabled { background-color: var(--divider); color: var(--ink-muted); }
 
 /* Il caricamento prende il posto dell'icona, stessa dimensione: il bottone
    non cambia forma mentre lavora. */