feat(fullstack): implement observability and redesign frontend UI

This commit introduces comprehensive observability for both backend and frontend, alongside a major UI/UX overhaul to align with modern design standards (Material 3 inspired) and improve localization.

Backend changes:
- Integrated OpenTelemetry SDK for distributed tracing.
- Added Pino for structured JSON logging with OTel instrumentation for trace/span correlation.
- Configured OTLP exporters to route traces and logs to Grafana Alloy.
- Updated docker-compose to include necessary environment variables for observability.

Frontend changes:
- Integrated Grafana Faro for Real User Monitoring (RUM), capturing Web Vitals, JS errors, and user interactions.
- Redesigned the entire UI using a new color palette and Material 3 design principles.
- Refactored component architecture (App, Home, Search, Scanner, Profile, Alerts views) for better state management and navigation.
- Improved mobile UX with a redesigned Bottom Navigation bar and Top Bar.
- Localized the interface to Spanish (es).
- Updated assets, icons, and PWA configuration (manifest, icons).
- Refactored CSS to use a centralized design token system (CSS variables).

Observability enables better debugging and performance monitoring across the entire stack.

frontend/src/components/PharmacyList.css

@@ -3,37 +3,34 @@
 }
 
 .pharmacy-list-title {
-  font-size: 1.4rem;
+  font-size: 1.25rem;
   font-weight: 700;
-  margin-bottom: 1.35rem;
-  color: var(--text-main);
+  margin-bottom: 1rem;
+  color: var(--on-surface);
   display: flex;
   align-items: center;
-  gap: 0.65rem;
-  letter-spacing: -0.02em;
+  gap: 0.5rem;
 }
 
 .pharmacy-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 1.25rem;
+  gap: 1rem;
 }
 
 .pharmacy-card {
-  background: var(--surface);
-  border-radius: var(--radius);
-  padding: 1.65rem;
-  border: 1px solid var(--border);
-  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
-  box-shadow: 0 1px 3px rgba(28, 25, 23, 0.04);
+  background: var(--surface-container-lowest);
+  border-radius: var(--radius-md);
+  padding: 1.25rem;
+  border: 1px solid var(--outline-variant);
+  transition: transform 0.15s, box-shadow 0.15s;
+  box-shadow: var(--shadow-soft);
 }
 
-@media (hover: hover) {
-  .pharmacy-card:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 12px 28px rgba(28, 25, 23, 0.08);
-    border-color: var(--primary);
-  }
+.pharmacy-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+  border-color: var(--primary);
 }
 
 .pharmacy-header {
@@ -41,15 +38,14 @@
   align-items: flex-start;
   justify-content: space-between;
   gap: 0.75rem;
-  margin-bottom: 1rem;
+  margin-bottom: 0.75rem;
 }
 
 .pharmacy-header h4 {
-  color: var(--text-main);
+  color: var(--on-surface);
   font-weight: 700;
   margin: 0;
-  font-size: 1.1rem;
-  transition: color 0.2s;
+  font-size: 1.05rem;
   flex: 1;
 }
 
@@ -60,80 +56,18 @@
   flex-shrink: 0;
 }
 
-.notify-bell {
-  background: var(--surface-muted, #f5f5f4);
-  border: 1px solid var(--border, #e7e5e4);
-  border-radius: 999px;
-  width: 2.75rem;
-  height: 2.75rem;
-  cursor: pointer;
-  font-size: 1.1rem;
-  line-height: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  position: relative;
-  z-index: 1;
-  touch-action: manipulation;
-  -webkit-tap-highlight-color: transparent;
-  transition: background 0.15s, border-color 0.15s, transform 0.15s;
-}
-
-@media (hover: hover) {
-  .notify-bell:hover:not(:disabled) {
-    border-color: var(--primary, #2563eb);
-    transform: scale(1.05);
-  }
-}
-
-.notify-bell:active:not(:disabled) {
-  transform: scale(0.95);
-}
-
-.notify-bell:disabled {
-  opacity: 0.55;
-  cursor: progress;
-}
-
-.notify-bell--on {
-  background: var(--primary, #2563eb);
-  border-color: var(--primary, #2563eb);
-}
-
-.notify-bell--locked {
-  opacity: 0.55;
-}
-
-@media (hover: hover) {
-  .notify-bell--locked:hover:not(:disabled) {
-    border-color: var(--text-muted, #78716c);
-    transform: scale(1.05);
-  }
-}
-
-.notify-error {
-  margin-top: 0.5rem;
-  font-size: 0.78rem;
-  color: #b91c1c;
-}
-
 .pharmacy-distance {
   flex-shrink: 0;
-  background: rgba(37, 99, 235, 0.1);
+  background: rgba(0, 69, 13, 0.08);
   color: var(--primary);
   font-size: 0.78rem;
   font-weight: 700;
   padding: 0.3rem 0.7rem;
-  border-radius: 999px;
-  letter-spacing: 0.02em;
-  white-space: nowrap;
+  border-radius: var(--radius-full);
 }
 
-@media (hover: hover) {
-  .pharmacy-card:hover .pharmacy-header h4 {
-    color: var(--primary);
-  }
+.pharmacy-card:hover .pharmacy-header h4 {
+  color: var(--primary);
 }
 
 .pharmacy-details {
@@ -144,7 +78,7 @@
 
 .pharmacy-address,
 .pharmacy-phone {
-  color: var(--text-muted);
+  color: var(--on-surface-variant);
   font-size: 0.9rem;
   margin: 0;
   line-height: 1.45;
@@ -164,29 +98,29 @@
   display: inline-block;
   width: 0.5rem;
   height: 0.5rem;
-  border-radius: 999px;
+  border-radius: var(--radius-full);
   background: currentColor;
 }
 
 .pharmacy-hours--open {
-  color: var(--accent, #047857);
+  color: var(--primary);
 }
 
 .pharmacy-hours--closed {
-  color: var(--text-muted);
+  color: var(--on-surface-variant);
 }
 
 .pharmacy-pricing {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-top: 1rem;
-  padding-top: 1rem;
-  border-top: 1px solid var(--border);
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--outline-variant);
 }
 
 .price {
-  font-size: 1.2rem;
+  font-size: 1.15rem;
   font-weight: 700;
   color: var(--primary);
 }
@@ -194,35 +128,34 @@
 .stock {
   font-size: 0.72rem;
   padding: 0.35rem 0.8rem;
-  border-radius: 999px;
+  border-radius: var(--radius-full);
   font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: 0.04em;
 }
 
 .stock.in-stock {
-  background: rgba(4, 120, 87, 0.12);
-  color: var(--accent);
+  background: rgba(0, 69, 13, 0.1);
+  color: var(--primary);
 }
 
 .stock.low-stock {
   background: rgba(180, 83, 9, 0.12);
-  color: var(--accent-warm);
+  color: #b45309;
 }
 
 .stock.out-of-stock {
-  background: rgba(185, 28, 28, 0.1);
-  color: #b91c1c;
+  background: rgba(186, 26, 26, 0.1);
+  color: var(--error);
 }
 
 .loading-pharmacies,
 .no-pharmacies {
   text-align: center;
-  padding: 2.75rem 1.5rem;
-  background: var(--surface-muted);
-  border-radius: var(--radius);
-  color: var(--text-muted);
-  border: 1px solid var(--border);
+  padding: 2.5rem 1.5rem;
+  background: var(--surface-container-low);
+  border-radius: var(--radius-md);
+  color: var(--on-surface-variant);
+  border: 1px solid var(--outline-variant);
   margin-top: 1rem;
 }