feat: guida utente in-app e fix grafici Convertitore

- DocsPanel: pannello documentazione slide-from-right con nav a pill,
  IntersectionObserver per sezione attiva, card con step numerati e callout tip
- InfoPanel: bottone "Guida" emette open-docs invece di aprire link esterno
- App: integra DocsPanel con v-model showDocs
- Converter: fix capitalize food names (capFirst invece di text-transform),
  simmetria visiva input/output (stesso underline e font-size 1.6rem),
  rimosso CSS morto (doppio align-items, doppio background, visibility hack)

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

src/components/InfoPanel.vue

@@ -32,16 +32,15 @@
           <span class="info-label">Licenza</span>
           <span class="info-value">EUPL v1.2</span>
         </div>
-        <div class="info-row">
-          <span class="info-label">Documentazione</span>
-          <a class="info-link" href="https://docs.biteplan.example.com" target="_blank" rel="noopener">
+        <button class="info-row info-row--btn" @click="$emit('open-docs')" aria-label="Apri guida">
+          <span class="info-label">Guida</span>
+          <span class="info-link">
             Apri
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/>
-              <polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/>
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <polyline points="9 18 15 12 9 6"/>
             </svg>
-          </a>
-        </div>
+          </span>
+        </button>
       </div>
 
     </div>
@@ -52,7 +51,7 @@
 import pkg from '../../package.json'
 import appIcon from '../../assets/icon-only.png'
 defineProps({ modelValue: Boolean })
-defineEmits(['update:modelValue'])
+defineEmits(['update:modelValue', 'open-docs'])
 const version = pkg.version
 </script>
 
@@ -150,6 +149,16 @@ const version = pkg.version
 
 .info-row:last-child { border-bottom: none; }
 
+/* riga cliccabile: reset button, mantiene layout identico alle righe statiche */
+.info-row--btn {
+  width: 100%;
+  min-height: unset;
+  border-radius: 0;
+  background: var(--color-surface);
+  text-align: left;
+}
+.info-row--btn:active { background: var(--color-bg); opacity: 1; }
+
 .info-label {
   font-size: 0.9rem;
   color: var(--color-text);