Missing files from commit

apps/frontend/src/components/PharmacyList.css

@@ -159,6 +159,28 @@
   margin-top: 1rem;
 }
 
+.pharmacy-directions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin-top: 0.75rem;
+  padding: 0.45rem 0.85rem;
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: var(--primary);
+  background: rgba(0, 69, 13, 0.06);
+  border: 1px solid rgba(0, 69, 13, 0.15);
+  border-radius: var(--radius-full);
+  text-decoration: none;
+  transition: background 0.15s, border-color 0.15s;
+  width: fit-content;
+}
+
+.pharmacy-directions:hover {
+  background: rgba(0, 69, 13, 0.12);
+  border-color: var(--primary);
+}
+
 @media (max-width: 768px) {
   .pharmacy-grid {
     grid-template-columns: 1fr;

apps/frontend/src/components/PharmacyList.jsx

@@ -45,6 +45,7 @@ function PharmacyList({ pharmacies, loading, userPosition, medicine, currentUser
               medicine={medicine}
               currentUser={currentUser}
               onLoginRequest={onLoginRequest}
+              userPosition={userPosition}
             />
           );
         })}
@@ -53,7 +54,7 @@ function PharmacyList({ pharmacies, loading, userPosition, medicine, currentUser
   );
 }
 
-function PharmacyCard({ pharmacy, distanceKm, medicine, currentUser, onLoginRequest }) {
+function PharmacyCard({ pharmacy, distanceKm, medicine, currentUser, onLoginRequest, userPosition }) {
   const nregistro = medicine?.nregistro || medicine?.id;
   const supported = pushSupported();
   const outOfStock = pharmacy.stock !== undefined && pharmacy.stock <= 0;
@@ -146,6 +147,23 @@ function PharmacyCard({ pharmacy, distanceKm, medicine, currentUser, onLoginRequ
           <p className="pharmacy-phone">📞 {pharmacy.phone}</p>
         )}
         {error && <p className="notify-error">{error}</p>}
+        {pharmacy.latitude != null && pharmacy.longitude != null && (
+          <a
+            className="pharmacy-directions"
+            href={
+              userPosition
+                ? `https://www.google.com/maps/dir/?api=1&origin=${userPosition.lat},${userPosition.lon}&destination=${pharmacy.latitude},${pharmacy.longitude}`
+                : `https://www.google.com/maps/dir/?api=1&destination=${pharmacy.latitude},${pharmacy.longitude}`
+            }
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <polygon points="3 11 22 2 13 21 11 13 3 11" />
+            </svg>
+            Cómo llegar
+          </a>
+        )}
         <div className="pharmacy-pricing">
           {pharmacy.price && (
             <span className="price">€{parseFloat(pharmacy.price).toFixed(2)}</span>