- Aggiornate tutte le categorie ottimizzandole.

- Migrazione delle vecchie categ. con quelle nuove.
- Create le Categorie e sottocategorie degli Eventi (a parte).
- Aggiornato la card dell'Ospitalità

src/components/CMyRecCard/CMyRecCard.scss

@@ -1,23 +1,3 @@
-
-// ========================================
-// VARIABILI
-// ========================================
-$primary-color: #1976d2;
-$positive-color: #21ba45;
-$negative-color: #c10015;
-$grey-color: #666;
-$grey-light: #999;
-
-$border-radius: 10px;
-$border-radius-sm: 6px;
-$transition-speed: 0.3s;
-
-$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
-$shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08);
-$shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.12);
-
-$mobile-breakpoint: 768px;
-
 // ========================================
 // WRAPPER CARD - ALTERNATING COLORS
 // ========================================
@@ -269,10 +249,16 @@ $mobile-breakpoint: 768px;
 
 .tags-row {
   display: flex;
+  flex-direction: column;
   flex-wrap: wrap;
   gap: 3px;
   margin-bottom: 3px;
-  align-items: center;
+
+  .status-row {
+    display: flex;
+    gap: $s-xs;
+    flex-wrap: wrap;
+  }
 
   @media (max-width: $mobile-breakpoint) {
     gap: 2px;
@@ -329,7 +315,8 @@ $mobile-breakpoint: 768px;
 
 .description-text {
   font-size: 0.9375rem;
-  color: #333;
+  color: #2c3e50;
+  font-weight: 500;
   line-height: 1.4;
   margin: 3px 0;
   word-break: break-word;
@@ -345,54 +332,84 @@ $mobile-breakpoint: 768px;
   }
 }
 
+// ========================================
+// PREFERENCES ROW (dopo descrizione)
+// ========================================
+.preferences-row {
+  margin: 8px 0 6px 0;
+
+  @media (max-width: $mobile-breakpoint) {
+    margin: 6px 0 4px 0;
+  }
+}
+
+.preferences-icons-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+
+  @media (max-width: $mobile-breakpoint) {
+    gap: 5px;
+  }
+}
+
+.preference-icon-avatar {
+  cursor: pointer;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+
+  &:hover {
+    transform: translateY(-2px) scale(1.08);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
+  }
+
+  @media (max-width: $mobile-breakpoint) {
+    width: 28px !important;
+    height: 28px !important;
+
+    .q-icon {
+      font-size: 16px !important;
+    }
+  }
+}
+
 .user-stats-row {
   display: flex;
   justify-content: space-between;
-  align-items: center;
-  margin: 3px 0;
-  font-size: 0.8125rem;
-  color: $grey-color;
+  align-items: flex-start;
+  gap: $s-sm;
+  flex-wrap: wrap;
 
-  @media (max-width: $mobile-breakpoint) {
-    font-size: 0.75rem;
-    margin: 2px 0;
+  .user-name {
+    flex: 1 1 auto;
+    min-width: 0;
+    color: $mainColor;
+    font-weight: 600;
+    font-size: 0.9rem;
+
+    @media (max-width: $mobile) {
+      font-size: 0.85rem;
+    }
   }
-}
 
-.user-name {
-  font-weight: 600;
-  font-style: italic;
-  color: #333;
-  margin-right: 6px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  .stats-container {
+    flex: 0 0 auto;
+    white-space: nowrap;
+    margin-left: auto;
+    font-size: 0.85rem;
 
-  @media (max-width: $mobile-breakpoint) {
-    margin-right: 5px;
-  }
-}
+    @media (max-width: $mobile) {
+      font-size: 0.75rem;
 
-.stats-container {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  flex-shrink: 0;
-  white-space: nowrap;
+      .stat-item {
+        margin-left: 4px;
 
-  @media (max-width: $mobile-breakpoint) {
-    gap: 4px;
-  }
-}
-
-.stat-item {
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-  font-weight: 500;
-
-  .q-icon {
-    vertical-align: middle;
+        .q-icon {
+          font-size: 12px !important;
+        }
+      }
+    }
   }
 }
 
@@ -418,15 +435,14 @@ $mobile-breakpoint: 768px;
 }
 
 .cities-text {
-  font-size: 0.8125rem;
-  color: $grey-light;
+  color: rgba(44, 62, 80, 0.7); // Grigio bluastro più caldo del grigio puro
+  font-size: 0.85rem;
+  display: flex;
   text-align: right;
-  margin-top: 2px;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  gap: 4px;
 
-  @media (max-width: $mobile-breakpoint) {
-    font-size: 0.75rem;
+  i {
+    color: rgba($mainColor, 0.6); // Icona location con colore primario attenuato
   }
 }
 
@@ -526,4 +542,27 @@ $mobile-breakpoint: 768px;
     gap: 0px;
   }
 
+}
+.categories-dialog {
+  .dialog-header {
+    padding: 16px 20px;
+  }
+
+  .dialog-content {
+    padding: 20px;
+    max-height: 60vh;
+    overflow-y: auto;
+  }
+
+  .categories-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2px;
+  }
+
+  .category-chip {
+    font-size: 1.1rem;
+    padding: 8px 12px;
+    font-weight: 500;
+  }
 }