Allinea la barra di navigazione fra iOS e Android

L'altezza della barra era dedotta dai padding delle voci e poi ricopiata a
occhio altrove: `pb-24` nel contenitore delle pagine, `pb-28` nella
celebrazione badge. Su iPhone i conti tornavano per 2 px — barra ~60 px più
34 px di safe area contro 96 px riservati — quindi bastava un inset diverso
(orizzontale, o un modello con home indicator più alta) perché l'ultimo
elemento della pagina finisse sotto la barra. Solo su iOS: su Android
avanzavano 36 px.

Ora la geometria sta in due token, `--altezza-nav` e `--pad-sicura-fondo`, e
le utility `spazio-nav` e `pad-sicura-fondo` la leggono da lì. La striscia
toccabile ha altezza fissa, così misura uguale sui due sistemi e sotto varia
solo l'inset: `max(env(safe-area-inset-bottom), 0.5rem)` dà ad Android un
respiro minimo dove iOS mette la home indicator. Identiche al pixel non
possono essere — quell'inset esiste per un motivo fisico che Android non ha —
ma la differenza è ora un margine in più, non un allineamento diverso.

`100vh` diventa `100dvh` ovunque: su iOS Safari `vh` misura il viewport con la
toolbar collassata, cioè più alto di quello visibile, e le schermate a tutta
altezza risultavano più lunghe dello schermo. `dvh` segue la toolbar.

Aggiunto il ripiego per Chrome su Android, che disattiva `backdrop-filter`
senza accelerazione hardware: senza, su quei device la barra restava
semitrasparente e il contenuto si leggeva attraverso.

Resta fuori portata una differenza sola: in Safari non installata la toolbar
di sistema sta in basso e collassa allo scroll, quindi la barra si muove con
essa. Su Chrome la toolbar è in alto. Si risolve installando la PWA.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/components/crapp/BottomNav.tsx

@@ -15,9 +15,15 @@ export function BottomNav() {
       aria-label="Navigazione principale"
       // `materiale` + `bordo-sfumato`: la barra è un vetro sotto cui il
       // contenuto scorre, con una sfumatura al posto della riga netta.
-      className="materiale bordo-sfumato fixed inset-x-0 bottom-0 z-40"
+      className="materiale bordo-sfumato pad-sicura-fondo fixed inset-x-0 bottom-0 z-40"
     >
-      <div className="mx-auto grid max-w-md grid-cols-5 px-1 pb-[env(safe-area-inset-bottom)]">
+      {/*
+        Altezza fissa dal token, non dedotta dal contenuto: la striscia
+        toccabile misura uguale su iOS e Android, e sotto varia solo l'inset
+        di sistema. Prima l'altezza dipendeva dai padding delle voci e nessuno
+        poteva saperla da fuori.
+      */}
+      <div className="mx-auto grid h-[var(--altezza-nav)] max-w-md grid-cols-5 px-1">
         {items.map(({ to, label, icon: Icon }) => (
           <Link
             key={to}
@@ -26,7 +32,7 @@ export function BottomNav() {
             activeProps={{ "aria-current": "page" }}
             // Lo stato attivo non è solo colore: cambia anche il peso del
             // testo e compare la barretta sopra l'icona.
-            className="group relative flex min-h-11 flex-col items-center gap-1 py-2.5 text-xs font-semibold text-muted-foreground transition-colors data-[status=active]:font-extrabold data-[status=active]:text-accent"
+            className="group relative flex h-full flex-col items-center justify-center gap-1 text-xs font-semibold text-muted-foreground transition-colors data-[status=active]:font-extrabold data-[status=active]:text-accent"
           >
             {({ isActive }) => (
               <>

src/components/crapp/CelebrazioneBadge.tsx

@@ -32,7 +32,7 @@ export function CelebrazioneBadge() {
   if (!notifica) return null;
 
   return (
-    <div className="anim-reveal fixed inset-0 z-50 grid place-items-end bg-foreground/40 p-4 pb-28 backdrop-blur-sm">
+    <div className="anim-reveal spazio-nav fixed inset-0 z-50 grid place-items-end bg-foreground/40 px-4 pt-4 backdrop-blur-sm">
       <div
         className={cn(
           "anim-pop w-full max-w-md rounded-3xl bg-card p-5 shadow-pop ring-2",