Refine offers UI: remove icon, adjust card layout for full-width/bottom alignment, and unify theme colors in promo modal

frontend/src/views/MapView.vue

@@ -117,17 +117,6 @@ function closePromoModal() {
 
 
 
-async function claimPromo() {
-  if (!selectedPromo.value) return
-  try {
-    await couponStore.claimCoupon(selectedPromo.value.id)
-    alert('¡Promoción reclamada con éxito! Revisa "Mis Cupones" en tu perfil.')
-    closePromoModal()
-  } catch (e: any) {
-    alert(e.message || 'Error al reclamar la promoción')
-  }
-}
-
 function handleImageError(event: Event) {
   const target = event.target as HTMLImageElement;
   if (target) {
@@ -736,7 +725,6 @@ async function highlightOptimalStopForRoute() {
           <!-- Header -->
           <div class="sheet-header">
             <div class="sheet-title-group">
-              <span class="material-icons sheet-star">stars</span>
               <span class="sheet-title">Ofertas</span>
             </div>
             <button class="sheet-close" @click="showPromos = false">
@@ -811,8 +799,7 @@ async function highlightOptimalStopForRoute() {
             <p>{{ selectedPromo.description }}</p>
           </div>
           <div class="promo-actions-modal">
-            <button class="business-detail-btn-modal" @click="router.push('/business/' + selectedPromo.business_id)">Ver Negocio</button>
+            <button class="business-detail-btn-modal" style="flex: 1; width: 100%;" @click="router.push('/business/' + selectedPromo.business_id)">Ver Negocio</button>
-            <button class="promo-claim-btn" @click="claimPromo">Reclamar Cupón</button>
           </div>
         </div>
       </div>
@@ -956,7 +943,7 @@ async function highlightOptimalStopForRoute() {
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 24px;
   z-index: 3000; /* Aumentado para estar sobre todo */
-  padding: 8px 0 12px; /* Reducimos el padding lateral a 0 */
+  padding: 12px 0 0; /* Padding superior para el título, 0 abajo para que la imagen pegue */
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
   color: #000;
   overflow: hidden;
@@ -975,8 +962,8 @@ async function highlightOptimalStopForRoute() {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 16px 8px; /* Padding para el header */
+  padding: 0 16px 12px; /* Padding para el header */
-  margin-bottom: 4px;
+  margin-bottom: 0px;
 }
 
 .sheet-header-left {
@@ -1067,12 +1054,11 @@ async function highlightOptimalStopForRoute() {
   width: 100%;
   height: 200px; 
   margin: 0; 
-  border-radius: 20px;
+  border-radius: 0;
   background-size: cover;
   background-position: center;
   position: relative;
   overflow: hidden;
-  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
   display: flex;
 }
 
@@ -1116,15 +1102,16 @@ async function highlightOptimalStopForRoute() {
 }
 
 .sheet-cta {
-  padding: 0.5rem 1rem;
+  background: var(--active-color);
-  background: #fee715;
   color: #101820;
   border: none;
-  border-radius: 12px;
+  padding: 8px 20px;
-  font-size: 0.8rem;
+  border-radius: 100px;
+  font-size: 0.8125rem;
   font-weight: 800;
   cursor: pointer;
-  transition: transform 0.2s;
+  box-shadow: 0 4px 15px rgba(254, 231, 21, 0.3);
+  transition: all 0.2s;
 }
 
 .sheet-cta:active { transform: scale(0.95); }
@@ -1735,13 +1722,13 @@ html.light-theme .uber-search-trigger-compact {
 }
 .promo-header-modal { position: relative; height: 200px; }
 .promo-img-modal { width: 100%; height: 100%; object-fit: cover; }
-.promo-badge-modal { position: absolute; bottom: 0; left: 0; background: #FF4081; color: white; padding: 5px 15px; font-weight: 800; }
+.promo-badge-modal { position: absolute; bottom: 0; left: 0; background: #EAB308; color: #000; padding: 5px 15px; font-weight: 800; border-top-right-radius: 12px; }
 .promo-body-modal { padding: 25px; }
 .promo-title-modal { font-size: 1.5rem; font-weight: 800; margin-bottom: 10px; }
 .promo-biz { color: var(--active-color); font-weight: 700; margin-bottom: 15px; }
 .promo-actions-modal { padding: 0 25px 25px; display: flex; gap: 10px; }
-.promo-claim-btn { flex: 1; background: #FF4081; color: white; border: none; padding: 15px; border-radius: 10px; font-weight: 700; cursor: pointer; }
+.business-detail-btn-modal { flex: 1; background: var(--active-color); color: #000; border: none; padding: 15px; border-radius: 10px; font-weight: 800; cursor: pointer; transition: all 0.2s; }
-.business-detail-btn-modal { flex: 1; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-color); padding: 15px; border-radius: 10px; font-weight: 700; cursor: pointer; }
+.business-detail-btn-modal:hover { transform: scale(1.02); box-shadow: 0 4px 12px rgba(234, 179, 8, 0.3); }
 .close-modal-btn {
   position: absolute;
   top: 15px;