From 9043fdccba61bcd1f1d37188b39b01d496371b8b Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Sun, 1 Mar 2026 10:14:15 -0500
Subject: [PATCH] Center offers title, increase font size, and add top/bottom
 image gradients

---
 frontend/src/views/MapView.vue | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/MapView.vue b/frontend/src/views/MapView.vue
index bfa1cde..b7d408a 100644
--- a/frontend/src/views/MapView.vue
+++ b/frontend/src/views/MapView.vue
@@ -959,10 +959,11 @@ async function highlightOptimalStopForRoute() {
 }
 
 .sheet-header {
+  position: relative;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: 0 16px 12px; /* Padding para el header */
+  justify-content: center;
+  padding: 0 16px 12px; 
   margin-bottom: 0px;
 }
 
@@ -975,9 +976,10 @@ async function highlightOptimalStopForRoute() {
 .sheet-star { color: var(--active-color); font-size: 1.125rem; }
 
 .sheet-title {
-  font-size: 1rem;
+  font-size: 1.25rem;
   font-weight: 800;
   color: var(--text-primary);
+  text-align: center;
 }
 
 .sheet-count-badge {
@@ -990,6 +992,8 @@ async function highlightOptimalStopForRoute() {
 }
 
 .sheet-close {
+  position: absolute;
+  right: 16px;
   background: var(--bg-primary);
   border: 1px solid var(--border-color);
   border-radius: 50%;
@@ -1065,7 +1069,13 @@ async function highlightOptimalStopForRoute() {
 .sheet-card-overlay {
   width: 100%;
   height: 100%;
-  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%);
+  background: linear-gradient(
+    to bottom, 
+    rgba(0,0,0,0.5) 0%, 
+    rgba(0,0,0,0) 30%, 
+    rgba(0,0,0,0) 60%, 
+    rgba(0,0,0,0.85) 100%
+  );
   display: flex;
   flex-direction: column;
   justify-content: flex-end;