Design hotfixes and improvements.

frontend/src/components/BottomNav.css

@@ -2,10 +2,6 @@
   display: flex;
   justify-content: space-around;
   align-items: flex-end;
-  position: fixed;
-  left: 50%;
-  transform: translateX(-50%);
-  bottom: 0;
   width: 100%;
   max-width: 48rem;
   z-index: 50;
@@ -14,6 +10,17 @@
   box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
   border-radius: var(--radius-lg) var(--radius-lg) 0 0;
   height: 5.5rem;
+  flex-shrink: 0;
+  margin: 0 auto;
+}
+
+/* Desktop navigation - full width */
+@media (min-width: 1025px) {
+  .bottom-nav {
+    max-width: 100%;
+    padding: 0.25rem 2rem calc(0.5rem + env(safe-area-inset-bottom));
+    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+  }
 }
 
 .bottom-nav-item {
@@ -57,17 +64,28 @@
   width: 3.5rem;
   height: 3.5rem;
   border-radius: var(--radius-full);
-  background: var(--tertiary-container);
-  color: var(--on-tertiary);
-  box-shadow: 0 4px 14px rgba(70, 0, 173, 0.35);
+  /* Stronger, brighter blue to make scan button easy to find */
+  background: #2b5bb5;
+  color: #ffffff;
+  box-shadow: 0 8px 26px rgba(43, 91, 181, 0.32);
   margin-top: -1.5rem;
-  transition: transform 0.15s;
+  transition: transform 0.12s, box-shadow 160ms ease;
 }
 
 .nav-fab:active {
   transform: scale(0.92);
 }
 
+.nav-fab:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 36px rgba(43, 91, 181, 0.36);
+}
+
+.nav-fab:focus {
+  outline: none;
+  box-shadow: 0 0 0 6px rgba(43,91,181,0.12), 0 8px 26px rgba(43, 91, 181, 0.32);
+}
+
 .nav-badge {
   position: absolute;
   top: 0;
@@ -116,4 +134,4 @@
 
 .nav-elevated.active .nav-label {
   color: var(--tertiary);
-}
+}

frontend/src/components/SavedNotifications.css

@@ -123,16 +123,16 @@
   gap: 0.25rem;
   padding: 0.2rem 0.55rem;
   border-radius: 999px;
-  background: rgba(37, 99, 235, 0.08);
-  color: var(--primary, #2563eb);
+  background: var(--secondary-container, #dbe7ff);
+  color: var(--on-secondary, #06204a);
   font-size: 0.75rem;
   font-weight: 600;
   width: fit-content;
 }
 
 .saved-notifications-chip--pharmacy {
-  background: rgba(4, 120, 87, 0.1);
-  color: var(--accent, #047857);
+  background: var(--primary-container, #cfead0);
+  color: var(--on-primary, #09310a);
 }
 
 .saved-notifications-address {

frontend/src/components/TopBar.css

@@ -1,57 +0,0 @@
-.top-bar {
-  display: block;
-  position: sticky;
-  top: 0;
-  z-index: 40;
-  background: var(--surface);
-  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
-}
-
-.topbar-inner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: var(--touch-target-min);
-  padding: 0 var(--margin-main);
-  max-width: 48rem;
-  margin: 0 auto;
-}
-
-.topbar-back {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: var(--radius-full);
-  border: none;
-  background: transparent;
-  color: var(--primary);
-  cursor: pointer;
-  transition: background 0.15s;
-}
-
-.topbar-back:hover {
-  background: var(--surface-container-high);
-}
-
-.topbar-title {
-  font-size: 1.15rem;
-  font-weight: 700;
-  color: var(--primary);
-  letter-spacing: -0.01em;
-}
-
-.topbar-logo-img {
-  height: 2rem;
-  width: auto;
-}
-
-.topbar-spacer {
-  width: 2.5rem;
-}
-
-.topbar-right {
-  display: flex;
-  align-items: center;
-}

frontend/src/components/TopBar.jsx

@@ -1,28 +0,0 @@
-import './TopBar.css';
-
-function TopBar({ title, showBack, onBack, rightAction }) {
-  return (
-    <header className="top-bar">
-      <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="FarmaClic" className="topbar-logo-img" />
-        )}
-        <div className="topbar-right">{rightAction || <div className="topbar-spacer" />}</div>
-      </div>
-    </header>
-  );
-}
-
-export default TopBar;