fix: correzione installabilità PWA e integrazione prompt installazione nativo

- Cambiate le proprietà 'scope' e 'start_url' in manifest.webmanifest a valori relativi ('./') al posto di un valore hardcoded '/ionic/'. Questo risolve il problema di installazione quando l'app viene pubblicata in directory diverse (es. root '/' vs sotto-cartella '/ionic/').
- Aggiunto il tracciamento del prompt di installazione nativo tramite l'evento 'beforeinstallprompt' nel SettingsService.
- Aggiunta la rilevazione dello stato standalone (app già installata) e del sistema operativo iOS.
- Inserita una sezione premium dedicata all'installazione nelle Impostazioni:
  * Su Android/Chrome: mostra un pulsante 'Installa' quando il browser conferma l'installabilità.
  * Su iOS (iPhone/iPad): mostra una guida collassabile con le istruzioni per installare l'app manualmente da Safari ('Condividi' -> 'Aggiungi alla schermata Home').

src/app/pages/settings/settings.page.html

@@ -10,6 +10,49 @@
 <ion-content [fullscreen]="true" class="bg-gradient">
   <div class="settings-container ion-padding">
     
+    <!-- PWA Install Group (Android / Chrome custom prompt) -->
+    <div class="settings-group glass ion-margin-bottom" *ngIf="settingsService.showInstallButton() && !settingsService.isStandalone()">
+      <ion-item class="transparent-item" lines="none" button (click)="installApp()">
+        <ion-icon name="download-outline" slot="start" color="secondary"></ion-icon>
+        <ion-label class="outfit-font">
+          <h2 class="settings-item-title" style="color: var(--ion-color-secondary); font-weight: bold;">Installa Applicazione</h2>
+          <p class="settings-item-subtitle">Aggiungi CantiCristiani alla schermata home</p>
+        </ion-label>
+        <ion-button fill="solid" size="small" color="secondary" slot="end" class="outfit-font" style="--border-radius: 12px; font-weight: bold; text-transform: none; margin: 0;">
+          Installa
+        </ion-button>
+      </ion-item>
+    </div>
+
+    <!-- PWA Install Group (iOS Safari Instructions) -->
+    <div class="settings-group glass ion-margin-bottom" *ngIf="settingsService.isIos() && !settingsService.isStandalone()">
+      <ion-item class="transparent-item" lines="none" button (click)="toggleIosInstructions()">
+        <ion-icon name="logo-apple" slot="start" color="secondary"></ion-icon>
+        <ion-label class="outfit-font">
+          <h2 class="settings-item-title">Installazione su iPhone / iPad</h2>
+          <p class="settings-item-subtitle">Scopri come aggiungere l'app sulla home</p>
+        </ion-label>
+        <ion-icon slot="end" [name]="showIosInstructions ? 'chevron-up' : 'chevron-down'" color="medium" style="font-size: 1.2rem;"></ion-icon>
+      </ion-item>
+      
+      <div class="ios-instructions-content ion-padding" *ngIf="showIosInstructions" style="border-top: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02);">
+        <p class="outfit-font" style="font-size: 0.85rem; color: rgba(255,255,255,0.8); margin: 0 0 12px 0; line-height: 1.4;">
+          Apple non consente l'installazione automatica dei siti web. Segui questi semplici passi da <strong>Safari</strong>:
+        </p>
+        <ol class="outfit-font" style="font-size: 0.85rem; color: rgba(255,255,255,0.8); margin: 0; padding-left: 20px; line-height: 1.6;">
+          <li style="margin-bottom: 8px;">
+            Tocca il pulsante di <strong>Condivisione</strong> <ion-icon name="share-outline" style="font-size: 1.1rem; vertical-align: middle; margin: 0 2px; color: var(--ion-color-secondary);"></ion-icon> nella barra di navigazione inferiore di Safari.
+          </li>
+          <li style="margin-bottom: 8px;">
+            Scorri il menu verso il basso e seleziona <strong>Aggiungi alla schermata Home</strong> <ion-icon name="add-circle-outline" style="font-size: 1.1rem; vertical-align: middle; margin: 0 2px; color: var(--ion-color-secondary);"></ion-icon>.
+          </li>
+          <li>
+            Conferma toccando <strong>Aggiungi</strong> in alto a destra. L'icona dell'app apparirà sul tuo schermo!
+          </li>
+        </ol>
+      </div>
+    </div>
+
     <div class="settings-group glass ion-margin-bottom">
       <ion-item class="transparent-item" lines="none">
         <ion-icon name="scan-outline" slot="start" color="secondary"></ion-icon>

src/app/pages/settings/settings.page.ts

@@ -37,9 +37,18 @@ export class SettingsPage {
 
   public version = VERSION;
   public contactEmail = environment.contactEmail;
+  public showIosInstructions = false;
 
   constructor() {}
 
+  async installApp() {
+    await this.settingsService.installPwa();
+  }
+
+  toggleIosInstructions() {
+    this.showIosInstructions = !this.showIosInstructions;
+  }
+
   onModeChange(event: any) {
     this.settingsService.setShowChordsDefault(event.detail.value === 'chords');
   }