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/index.css

@@ -1,31 +1,75 @@
 :root {
-  /* Brand — teal (trust / health), no purple */
-  --primary: #0f766e;
-  --primary-hover: #0d9488;
-  --primary-light: #ccfbf1;
-  --primary-faint: rgba(15, 118, 110, 0.08);
-  --primary-ring: rgba(15, 118, 110, 0.22);
-  --primary-shadow: rgba(15, 118, 110, 0.18);
+  --primary: #00450d;
+  --on-primary: #ffffff;
+  --primary-container: #1b5e20;
+  --on-primary-container: #90d689;
+  --secondary: #2b5bb5;
+  --on-secondary: #ffffff;
+  --secondary-container: #759efd;
+  --on-secondary-container: #00337c;
+  --tertiary: #4600ad;
+  --on-tertiary: #ffffff;
+  --tertiary-container: #6100e8;
+  --on-tertiary-container: #cebbff;
+  --surface: #f8fafb;
+  --on-surface: #191c1d;
+  --on-surface-variant: #41493e;
+  --surface-container-lowest: #ffffff;
+  --surface-container-low: #f2f4f5;
+  --surface-container: #eceeef;
+  --surface-container-high: #e6e8e9;
+  --surface-container-highest: #e1e3e4;
+  --error: #ba1a1a;
+  --on-error: #ffffff;
+  --error-container: #ffdad6;
+  --on-error-container: #93000a;
+  --outline: #717a6d;
+  --outline-variant: #c0c9bb;
+  --on-background: #191c1d;
+  --inverse-surface: #2e3132;
+  --inverse-on-surface: #eff1f2;
+  --inverse-primary: #91d78a;
+  --surface-tint: #2a6b2c;
+  --surface-dim: #d8dadb;
+  --surface-bright: #f8fafb;
+  --surface-variant: #e1e3e4;
+  --primary-fixed: #acf4a4;
+  --primary-fixed-dim: #91d78a;
+  --secondary-fixed: #d9e2ff;
+  --secondary-fixed-dim: #b0c6ff;
+  --tertiary-fixed: #e9ddff;
+  --tertiary-fixed-dim: #cfbcff;
 
-  /* Warm secondary for emphasis (badges, subtle highlights) */
-  --accent: #047857;
+  --radius-sm: 0.25rem;
+  --radius: 0.5rem;
+  --radius-md: 0.75rem;
+  --radius-lg: 1rem;
+  --radius-xl: 1.5rem;
+  --radius-full: 9999px;
+
+  --margin-main: 1.5rem;
+  --card-padding: 1.25rem;
+  --gutter: 1rem;
+  --touch-target-min: 3rem;
+
+  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.08);
+
+  --text-main: var(--on-surface);
+  --text-muted: var(--on-surface-variant);
+  --surface-muted: var(--surface-container-low);
+  --surface-card: var(--surface-container-lowest);
+  --border: var(--outline-variant);
+  --border-strong: var(--outline);
+  --glass-bg: var(--surface-container-lowest);
+  --glass-border: var(--outline-variant);
+  --glass-shadow: var(--shadow-soft);
+  --accent: var(--primary);
   --accent-warm: #b45309;
-
-  /* Neutrals */
-  --text-main: #1c1917;
-  --text-muted: #57534e;
-  --surface: #ffffff;
-  --surface-muted: #f5f5f4;
-  --surface-card: #fafaf9;
-  --border: #e7e5e4;
-  --border-strong: #d6d3d1;
-
-  --glass-bg: rgba(255, 255, 255, 0.92);
-  --glass-border: rgba(231, 229, 228, 0.9);
-  --glass-shadow: 0 1px 3px rgba(28, 25, 23, 0.06), 0 8px 24px rgba(28, 25, 23, 0.04);
-
-  --radius: 14px;
-  --radius-sm: 10px;
+  --primary-hover: #1a6b2e;
+  --primary-ring: rgba(0, 69, 13, 0.22);
+  --primary-shadow: rgba(0, 69, 13, 0.18);
+  --primary-light: var(--primary-fixed);
+  --primary-faint: rgba(0, 69, 13, 0.08);
 }
 
 * {
@@ -39,22 +83,31 @@ html, body {
   overflow: hidden;
   overscroll-behavior: none;
 }
+
 html {
   overflow-x: clip;
 }
+
 body {
-  font-family: 'Outfit', system-ui, sans-serif;
-  color: var(--text-main);
-  background-color: var(--surface-muted);
-  background-image:
-    linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
-    url('./assets/bg.png');
-  background-size: cover;
-  background-position: center;
-  background-attachment: fixed;
+  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
+  color: var(--on-surface);
+  background-color: var(--surface-container-lowest);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  background-image: url('./assets/bg-SHmHDvQz.png');
+  background-size: cover;
+  background-position: center;
+  background-attachment: fixed;
+  opacity: 0.5;
+  z-index: -1;
+}
+
 #root {
   height: 100dvh;
   overflow: hidden;