Stacca la barra di navigazione dal fondo

La barra era una striscia a filo schermo con la sfumatura al bordo superiore
(scroll edge effect). Ora è una pillola staccata: il `<nav>` esterno tiene solo
posizione, safe area e margine laterale, mentre il materiale, il raggio, il bordo
e l'ombra passano al contenitore interno.

`pointer-events-none` sul wrapper e `pointer-events-auto` sulla pillola: ai lati
della barra i tocchi devono raggiungere il contenuto sotto, non una striscia
trasparente larga quanto lo schermo.

Via `bordo-sfumato`: la sfumatura serve a mascherare il taglio netto di una barra
attaccata al bordo, e su una che galleggia non ha più niente da mascherare.

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

src/components/crapp/BottomNav.tsx

@@ -13,9 +13,11 @@ export function BottomNav() {
   return (
     <nav
       aria-label="Navigazione principale"
-      // `materiale` + `bordo-sfumato`: la barra è un vetro sotto cui il
+      // Barra flottante: il contenitore esterno tiene solo la posizione e
-      // contenuto scorre, con una sfumatura al posto della riga netta.
+      // l'inset di sistema, il materiale sta sulla pillola dentro.
-      className="materiale bordo-sfumato pad-sicura-fondo fixed inset-x-0 bottom-0 z-40"
+      // `pointer-events-none` perché ai lati della pillola i tocchi devono
+      // arrivare al contenuto sotto.
+      className="pad-sicura-fondo pointer-events-none fixed inset-x-0 bottom-0 z-40 px-3"
     >
       {/*
         Altezza fissa dal token, non dedotta dal contenuto: la striscia
@@ -23,7 +25,7 @@ export function BottomNav() {
         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">
+      <div className="materiale pointer-events-auto mx-auto grid h-[var(--altezza-nav)] max-w-md grid-cols-5 overflow-hidden rounded-full border border-border/60 px-1 shadow-lg">
         {items.map(({ to, label, icon: Icon }) => (
           <Link
             key={to}