Enhance UI with hamburger menu, GPS modal, and search functionality; update styles for better responsiveness

src/app/components/home/home.html

@@ -1,4 +1,94 @@
 <div class="weather-app">
+  <!-- Menú hamburguesa -->
+  <div class="menu-button" (click)="toggleMenu()">
+    <span></span>
+    <span></span>
+    <span></span>
+  </div>
+
+  <!-- Panel del menú deslizante -->
+  <div class="menu-panel" [class.open]="menuOpen()">
+    <div class="menu-overlay" (click)="closeMenu()"></div>
+    
+    <div class="menu-content">
+      <div class="menu-header">
+        <h2>Menú</h2>
+        <button class="close-button" (click)="closeMenu()">✕</button>
+      </div>
+      
+      <!-- Última actualización -->
+      @if (getLastUpdateDate()) {
+        <div class="menu-item last-update">
+          <span class="label">Última actualització:</span>
+          <span class="value">{{ getLastUpdateDate() }}</span>
+        </div>
+      }
+      
+      <!-- Botón de actualizar -->
+      <button class="menu-action" (click)="refresh(); closeMenu()">
+        🔄 Actualitzar dades
+      </button>
+      
+      <!-- Buscador de población -->
+      <div class="menu-item search-section">
+        <label for="search-municipi">Cerca una població:</label>
+        <input 
+          type="text" 
+          id="search-municipi"
+          placeholder="Escriu el nom..."
+          [value]="searchQuery()"
+          (input)="onSearchInput($event)"
+          class="search-input"
+        />
+        
+        @if (searching()) {
+          <div class="search-loading">Cercant...</div>
+        }
+        
+        @if (searchResults().length > 0) {
+          <div class="search-results">
+            @for (result of searchResults(); track result.codi) {
+              <div class="search-result" (click)="selectMunicipi(result)">
+                <span class="result-name">{{ result.nom }}</span>
+                @if (result.latitud && result.longitud) {
+                  <span class="result-coords">{{ result.latitud.toFixed(2) }}, {{ result.longitud.toFixed(2) }}</span>
+                }
+              </div>
+            }
+          </div>
+        }
+        
+        @if (searchQuery().length >= 2 && searchResults().length === 0 && !searching()) {
+          <div class="no-results">No s'han trobat resultats</div>
+        }
+      </div>
+      
+      <!-- Botón de ubicación GPS -->
+      <button class="menu-action secondary" (click)="requestLocation(); closeMenu()">
+        📍 Usar la meva ubicació
+      </button>
+    </div>
+  </div>
+  
+  <!-- Modal GPS -->
+  @if (showGpsModal()) {
+    <div class="modal-overlay" (click)="rejectGpsModal()">
+      <div class="modal-content" (click)="$event.stopPropagation()">
+        <div class="modal-icon">📍</div>
+        <h2>Ubicació GPS</h2>
+        <p>Vols que l'aplicació utilitzi la teva ubicació per mostrar el temps de la teva zona?</p>
+        <div class="modal-actions">
+          <button class="modal-button secondary" (click)="rejectGpsModal()">
+            No, gràcies
+          </button>
+          <button class="modal-button primary" (click)="acceptGpsModal()">
+            Sí, activar GPS
+          </button>
+        </div>
+      </div>
+    </div>
+  }
+  
   @if (gettingLocation()) {
     <div class="loading">
       <div class="spinner"></div>
@@ -6,7 +96,7 @@
     </div>
   }
   
-  @if (locationDenied() && !loading()) {
+  @if (locationDenied() && !loading() && !gpsPermissionAsked()) {
     <div class="location-denied">
       <p>⚠️ Permisos d'ubicació denegats. Mostrant el temps de Lliçà d'Amunt.</p>
       <button class="location-button" (click)="requestLocation()">
@@ -72,13 +162,6 @@
           <app-prediccio-diaria [prediccions]="prediccioDiaria()" />
         </div>
       }
-
-      <!-- Botón de refresh -->
-      <div class="refresh-container">
-        <button class="refresh-button" (click)="refresh()">
-          🔄 Actualitzar dades
-        </button>
-      </div>
     </div>
   }
 </div>