Migliora UI: design moderno, accordion pasti, fix UX

- style.css: shadows, transizioni, variabili --radius-sm/full,
  --color-primary-muted, --color-danger-muted
- BottomNav: icone SVG cross-platform, indicatore pill attivo,
  shadow verso l'alto
- MealCard: accordion (solo oggi aperto di default), badge voci
  quando chiusa, icone pasto, fix touch target btn-remove
- MealPlanner: rileva giorno corrente, mostra come sottotitolo
- Converter: chip alimento selezionato, result box con formula
  (es. 140g x 0.75 = 105g), layout migliorato
- ShoppingList: contatore X/Y completati, sezione separata voci
  spuntate, btn-clear ghost invece di solid rosso, empty state
- CheckboxItem: touch target 44px garantito, transizione checked,
  icona SVG per rimuovere, fix plurale "1 voce / N voci"

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/pages/MealPlanner.vue

@@ -1,11 +1,15 @@
 <template>
   <div class="page">
-    <h1 class="page-title">Pasti della settimana</h1>
+    <div class="page-header">
+      <h1 class="page-title">Pasti della settimana</h1>
+      <p class="page-subtitle">{{ todayLabel }}</p>
+    </div>
     <MealCard
       v-for="day in days"
       :key="day.id"
       :day-name="day.label"
       :meals="meals[day.id]"
+      :default-open="day.id === todayId"
       @add="(slot, text) => addItem(day.id, slot, text)"
       @remove="(slot, idx) => removeItem(day.id, slot, idx)"
     />
@@ -27,6 +31,10 @@ const days = [
   { id: 'domenica',  label: 'Domenica'  },
 ]
 
+const todayMap = ['domenica', 'lunedi', 'martedi', 'mercoledi', 'giovedi', 'venerdi', 'sabato']
+const todayId = todayMap[new Date().getDay()]
+const todayLabel = days.find(d => d.id === todayId)?.label ?? ''
+
 const defaultMeals = () =>
   Object.fromEntries(days.map(d => [d.id, { colazione: [], pranzo: [], cena: [] }]))