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/views/AlertsView.css

@@ -0,0 +1,178 @@
+.alerts-view {
+  width: 100%;
+  max-width: 48rem;
+  margin: 0 auto;
+}
+
+.alerts-main {
+  padding: 1.5rem var(--margin-main) 2rem;
+}
+
+.alerts-header {
+  margin-bottom: 2rem;
+}
+
+.alerts-title {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--on-surface);
+  line-height: 1.2;
+  margin-bottom: 0.25rem;
+}
+
+.alerts-subtitle {
+  font-size: 1.125rem;
+  color: var(--on-surface-variant);
+  font-weight: 400;
+}
+
+.alerts-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gutter);
+}
+
+.alert-card {
+  background: var(--surface-container-lowest);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-soft);
+  padding: var(--card-padding);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  border: 2px solid transparent;
+}
+
+.alert-card--primary { border-color: rgba(0, 69, 13, 0.1); }
+.alert-card--secondary { border-color: rgba(43, 91, 181, 0.1); }
+.alert-card--tertiary { border-color: rgba(70, 0, 173, 0.1); }
+
+.alert-card-top {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
+.alert-icon {
+  width: 3.25rem;
+  height: 3.25rem;
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.alert-icon--primary {
+  background: var(--primary-container);
+  color: var(--on-primary-container);
+}
+
+.alert-icon--secondary {
+  background: var(--secondary-container);
+  color: var(--on-secondary-container);
+}
+
+.alert-icon--tertiary {
+  background: var(--tertiary-container);
+  color: var(--on-tertiary);
+}
+
+.alert-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.alert-title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--on-surface);
+  line-height: 1.3;
+}
+
+.alert-badge {
+  display: inline-block;
+  width: fit-content;
+  padding: 0.25rem 0.75rem;
+  border-radius: var(--radius-full);
+  font-size: 0.875rem;
+  font-weight: 700;
+}
+
+.alert-badge--primary {
+  background: var(--error-container);
+  color: var(--on-error-container);
+}
+
+.alert-badge--secondary {
+  background: var(--secondary-fixed);
+  color: var(--on-secondary-fixed-variant);
+}
+
+.alert-badge--tertiary {
+  background: var(--tertiary-fixed);
+  color: var(--on-tertiary-fixed-variant);
+}
+
+.alert-actions {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.alert-btn {
+  flex: 1;
+  height: var(--touch-target-min);
+  border: none;
+  border-radius: var(--radius-md);
+  font-size: 1rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+
+.alert-btn:active {
+  transform: scale(0.97);
+}
+
+.alert-btn--primary {
+  background: var(--primary);
+  color: var(--on-primary);
+}
+
+.alert-btn--secondary {
+  background: var(--secondary);
+  color: var(--on-secondary);
+}
+
+.alert-btn--tertiary {
+  background: var(--tertiary-container);
+  color: var(--on-tertiary);
+}
+
+.alert-delete {
+  width: var(--touch-target-min);
+  height: var(--touch-target-min);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid var(--outline);
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--outline);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background 0.15s;
+}
+
+.alert-delete:hover {
+  background: var(--surface-container-high);
+}
+
+@media (max-width: 400px) {
+  .alerts-title {
+    font-size: 1.5rem;
+  }
+}