Introduce la primitiva Card e sistema tocco e accessibilità dei componenti

`rounded-3xl bg-card p-4 shadow-card` era ricopiato a mano 22 volte: cambiare
raggio od ombra voleva dire toccare venti file. `Card` in `ui-bits.tsx` è ora
l'unica definizione delle superfici, con la gerarchia dei raggi scritta invece
che implicita (contenitore 3xl, elemento interno 2xl, controllo full).

Tocco e tastiera:
- i chip presenza di `EventoCard` erano alti ~28 px ed è il controllo più
  toccato dell'app: ora `min-h-11`, con 8 px di spazio fra l'uno e l'altro;
- stessa cura per il link «Apri partita», la chiusura di `CelebrazioneBadge` e
  il titolo di `SezioneTendina`;
- `aria-pressed` sui controlli a stato, `aria-controls` sulle tendine (che
  avevano `aria-expanded` senza il pannello a cui si riferisce), `aria-busy`
  sui caricamenti;
- `BottomNav`: lo stato attivo era comunicato solo dal colore. Ora cambia
  anche il peso del testo, compare una barretta sopra l'icona e c'è
  `aria-current="page"`. La voce «Home» diventa «Oggi», che dice cosa
  contiene. La barra è un materiale traslucido con bordo sfumato al posto
  della riga netta.
- `Barra` espone `role="progressbar"` con i valori.

Il testo sotto i 12 px è sparito (108 occorrenze fra `text-[9px]`,
`text-[10px]` e `text-[11px]`): sotto quella soglia la leggibilità cala e su
iOS non scala con Dynamic Type. La gerarchia la fanno peso e maiuscolo.

`Avatar` aveva `alt="Foto di 12"` quando il fallback è il numero di maglia —
non descrive niente e il nome è già scritto accanto, quindi alt vuoto. Aggiunti
`width`/`height` per non far saltare il layout al caricamento.

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

src/components/crapp/BadgeDrawer.tsx

@@ -42,15 +42,13 @@ function DettaglioBadge({ def, stato }: { def: BadgeDef; stato?: BadgeStato }) {
       {stato ? (
         <div className="rounded-2xl bg-card p-4 shadow-card ring-1 ring-border">
           <div className="flex items-center justify-between">
-            <p className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+            <p className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
               Stato attuale
             </p>
             {grado ? (
-              <span className={cn("text-[11px] font-bold uppercase", meta?.text)}>
-                {meta?.label}
-              </span>
+              <span className={cn("text-xs font-bold uppercase", meta?.text)}>{meta?.label}</span>
             ) : (
-              <span className="text-[11px] font-bold uppercase text-muted-foreground">
+              <span className="text-xs font-bold uppercase text-muted-foreground">
                 In progresso
               </span>
             )}
@@ -73,7 +71,7 @@ function DettaglioBadge({ def, stato }: { def: BadgeDef; stato?: BadgeStato }) {
       ) : null}
 
       <div>
-        <p className="mb-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+        <p className="mb-2 text-xs font-bold uppercase tracking-wide text-muted-foreground">
           Soglie
         </p>
         <div className="grid grid-cols-3 gap-2">
@@ -90,7 +88,7 @@ function DettaglioBadge({ def, stato }: { def: BadgeDef; stato?: BadgeStato }) {
               >
                 <p
                   className={cn(
-                    "text-[10px] font-bold uppercase",
+                    "text-xs font-bold uppercase",
                     raggiunto ? gm.text : "text-muted-foreground",
                   )}
                 >
@@ -104,7 +102,7 @@ function DettaglioBadge({ def, stato }: { def: BadgeDef; stato?: BadgeStato }) {
                 >
                   {def.soglie[g]}
                 </p>
-                <p className="text-[10px] text-muted-foreground">{def.unita}</p>
+                <p className="text-xs text-muted-foreground">{def.unita}</p>
               </div>
             );
           })}