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.jsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import './AlertsView.css';
+
+const alerts = [
+  {
+    id: 1,
+    type: 'reminder',
+    title: 'Recordatorio: Comprar Paracetamol',
+    detail: 'Quedan 2 cajas',
+    color: 'primary',
+    icon: 'bell',
+    actions: [{ label: 'Ver Detalles', variant: 'secondary' }],
+  },
+  {
+    id: 2,
+    type: 'availability',
+    title: 'Disponibilidad: Aspirina',
+    detail: 'Ya disponible en Farmacia Sol',
+    color: 'secondary',
+    icon: 'store',
+    actions: [{ label: 'Ir a Farmacia', variant: 'primary' }],
+  },
+  {
+    id: 3,
+    type: 'dose',
+    title: 'Próxima Toma',
+    detail: '12:00 PM',
+    color: 'tertiary',
+    icon: 'schedule',
+    actions: [{ label: 'Confirmar Toma', variant: 'tertiary' }],
+  },
+];
+
+const iconMap = {
+  bell: (
+    <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M12 22c1.1 0 2-.9 2-2h-4a2 2 0 0 0 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z" />
+    </svg>
+  ),
+  store: (
+    <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M18.36 9l.6 3H5.04l.6-3h12.72M20 4H4v2h16V4zm0 3H4l-1 5v2h1v6h10v-6h4v6h2v-6h1v-2l-1-5zM6 18v-4h6v4H6z" />
+    </svg>
+  ),
+  schedule: (
+    <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z" />
+    </svg>
+  ),
+};
+
+function AlertsView({ onBack }) {
+  return (
+    <div className="alerts-view">
+      <main className="alerts-main">
+        <div className="alerts-header">
+          <h2 className="alerts-title">Mis Avisos</h2>
+          <p className="alerts-subtitle">Mantente al día con tus medicamentos.</p>
+        </div>
+
+        <div className="alerts-list">
+          {alerts.map((alert) => (
+            <div key={alert.id} className={`alert-card alert-card--${alert.color}`}>
+              <div className="alert-card-top">
+                <div className={`alert-icon alert-icon--${alert.color}`}>
+                  {iconMap[alert.icon]}
+                </div>
+                <div className="alert-info">
+                  <h3 className="alert-title">{alert.title}</h3>
+                  <span className={`alert-badge alert-badge--${alert.color}`}>
+                    {alert.detail}
+                  </span>
+                </div>
+              </div>
+              <div className="alert-actions">
+                {alert.actions.map((action, i) => (
+                  <button
+                    key={i}
+                    className={`alert-btn alert-btn--${action.variant}`}
+                  >
+                    {action.label}
+                  </button>
+                ))}
+                <button className="alert-delete" aria-label="Eliminar">
+                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <polyline points="3 6 5 6 21 6" />
+                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </main>
+    </div>
+  );
+}
+
+export default AlertsView;