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

@@ -1,66 +1,28 @@
-import { IconBell, IconCog, IconUser, IconLogo } from './icons';
 import './TopBar.css';
 
-function TopBar({
-  currentUser,
-  isAdmin,
-  onShowSaved,
-  onLoginRequest,
-  onAdminClick,
-  authChecked,
-}) {
-  // ponytail: action slot priority — admin pill > bell (logged-in) > login button (logged-out).
-  // ponytail: hidden on desktop via .top-bar { display: none } above 768px.
-  function renderAction() {
-    if (isAdmin) {
-      return (
-        <button
-          type="button"
-          className="topbar-action topbar-action--admin"
-          onClick={onAdminClick}
-          aria-label="Admin panel"
-        >
-          <IconCog size={18} />
-          <span>Admin</span>
-        </button>
-      );
-    }
-    if (currentUser) {
-      return (
-        <button
-          type="button"
-          className="topbar-action"
-          onClick={onShowSaved}
-          aria-label="Saved notifications"
-        >
-          <IconBell size={22} />
-        </button>
-      );
-    }
-    if (authChecked) {
-      return (
-        <button
-          type="button"
-          className="topbar-action topbar-action--login"
-          onClick={onLoginRequest}
-        >
-          <IconUser size={18} />
-          <span>Login</span>
-        </button>
-      );
-    }
-    return <span className="topbar-action topbar-action--placeholder" />;
-  }
-
+function TopBar({ title, showBack, onBack, rightAction }) {
   return (
     <header className="top-bar">
-      <div className="topbar-brand">
-        <IconLogo size={22} className="topbar-brand-icon" />
-        <span className="topbar-brand-text">FarmaFinder</span>
+      <div className="topbar-inner">
+        {showBack ? (
+          <button className="topbar-back" onClick={onBack} aria-label="Volver">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M19 12H5" />
+              <polyline points="12 19 5 12 12 5" />
+            </svg>
+          </button>
+        ) : (
+          <div className="topbar-spacer" />
+        )}
+        {showBack ? (
+          <h1 className="topbar-title">{title}</h1>
+        ) : (
+          <img src="/logo.png" alt="FarmaFinder" className="topbar-logo-img" />
+        )}
+        <div className="topbar-right">{rightAction || <div className="topbar-spacer" />}</div>
       </div>
-      <div className="topbar-actions">{renderAction()}</div>
     </header>
   );
 }
 
-export default TopBar;
+export default TopBar;