feat: optimizaciones responsive en AdminPanel y traducciones i18n en BusinessDetailsView

frontend/src/views/AdminPanel.vue

@@ -268,7 +268,14 @@ h1 {
 
 @media (max-width: 600px) {
   .admin-panel { padding: 30px 16px 120px; }
-  .category-grid { grid-template-columns: 1fr; }
+  .category-grid {
+    flex-direction: column;
+    align-items: center;
+  }
+  .action-card {
+    width: 100%;
+    max-width: 340px;
+  }
   .header-section { text-align: center; padding: 0; }
 }
 </style>

frontend/src/views/BusinessDetailsView.vue

@@ -9,6 +9,9 @@ import { getImageUrl as utilGetImageUrl } from '@/utils/imageUrl'
 import { analyticsService } from '@/services/analyticsService'
 import LoadingBranded from '@/components/common/LoadingBranded.vue'
 
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 const route = useRoute()
 const router = useRouter()
 const business = ref<Business | null>(null)
@@ -122,7 +125,7 @@ const quickInfoPills = computed(() => {
   if (business.value.area)     pills.push({ icon: 'location_on', text: business.value.area })
   if (business.value.schedule) pills.push({ icon: 'schedule',    text: business.value.schedule })
   if (business.value.phone)    pills.push({ icon: 'phone',       text: business.value.phone })
-  if (business.value.website)  pills.push({ icon: 'language',    text: 'Sitio Web', href: business.value.website })
+  if (business.value.website)  pills.push({ icon: 'language',    text: t('business.website'), href: business.value.website })
   return pills
 })
 
@@ -135,17 +138,17 @@ const hasSocials = computed(() =>
 <template>
   <!-- ── LOADING ── -->
   <div v-if="isLoading" class="state-full">
-    <LoadingBranded :message="'Cargando negocio...'" icon="storefront" />
+    <LoadingBranded :message="t('business.loading')" icon="storefront" />
   </div>
 
   <!-- ── ERROR ── -->
   <div v-else-if="fetchError" class="state-full">
     <span class="material-icons state-icon">wifi_off</span>
-    <h3 class="state-title">Sin conexión</h3>
-    <p class="state-sub">No pudimos cargar los datos. Revisa tu internet e intenta de nuevo.</p>
+    <h3 class="state-title">{{ t('business.offlineTitle') }}</h3>
+    <p class="state-sub">{{ t('business.offlineDesc') }}</p>
     <button class="btn-retry" @click="fetchData">
       <span class="material-icons">refresh</span>
-      Reintentar
+      {{ t('common.retry') }}
     </button>
   </div>
 
@@ -165,7 +168,7 @@ const hasSocials = computed(() =>
       <div class="hero-gradient"></div>
 
       <!-- Top controls -->
-      <button class="hero-btn hero-back" @click="goBack" aria-label="Volver">
+      <button class="hero-btn hero-back" @click="goBack" :aria-label="t('common.back')">
         <span class="material-icons">arrow_back</span>
       </button>
       <div class="hero-fav">
@@ -212,7 +215,7 @@ const hasSocials = computed(() =>
     <section v-if="galleryImages.length > 0" class="biz-section">
       <div class="section-header">
         <span class="section-accent"></span>
-        <h2 class="section-title">📸 Galería</h2>
+        <h2 class="section-title">{{ t('business.gallery') }}</h2>
       </div>
 
       <div class="carousel-wrap">
@@ -235,10 +238,10 @@ const hasSocials = computed(() =>
 
         <!-- Nav arrows (only if >1 image) -->
         <template v-if="galleryImages.length > 1">
-          <button class="car-arrow car-arrow-left" @click="prevSlide" aria-label="Anterior">
+          <button class="car-arrow car-arrow-left" @click="prevSlide" :aria-label="t('business.previous')">
             <span class="material-icons">chevron_left</span>
           </button>
-          <button class="car-arrow car-arrow-right" @click="nextSlide" aria-label="Siguiente">
+          <button class="car-arrow car-arrow-right" @click="nextSlide" :aria-label="t('business.next')">
             <span class="material-icons">chevron_right</span>
           </button>
 
@@ -262,7 +265,7 @@ const hasSocials = computed(() =>
     <section v-if="business.description" class="biz-section">
       <div class="section-header">
         <span class="section-accent"></span>
-        <h2 class="section-title">Sobre el lugar</h2>
+        <h2 class="section-title">{{ t('business.about') }}</h2>
       </div>
       <p class="about-text">{{ business.description }}</p>
     </section>
@@ -273,7 +276,7 @@ const hasSocials = computed(() =>
     <section v-if="hasSocials" class="biz-section">
       <div class="section-header">
         <span class="section-accent"></span>
-        <h2 class="section-title">Contáctanos</h2>
+        <h2 class="section-title">{{ t('business.contactUs') }}</h2>
       </div>
       <div class="socials-grid">
 
@@ -332,7 +335,7 @@ const hasSocials = computed(() =>
     <section v-if="coupons.length > 0" class="biz-section">
       <div class="section-header">
         <span class="section-accent"></span>
-        <h2 class="section-title">🎁 Ofertas Disponibles</h2>
+        <h2 class="section-title">{{ t('business.offers') }}</h2>
       </div>
       <div class="coupons-grid">
         <div v-for="coupon in coupons" :key="coupon.id" class="coupon-card">
@@ -348,7 +351,7 @@ const hasSocials = computed(() =>
           <div class="coupon-divider"></div>
           <h3 class="coupon-title">{{ coupon.title }}</h3>
           <p class="coupon-desc">{{ coupon.description }}</p>
-          <span class="coupon-off">OFF</span>
+          <span class="coupon-off">{{ t('coupons.off') }}</span>
         </div>
       </div>
     </section>
@@ -366,7 +369,7 @@ const hasSocials = computed(() =>
         @click="openMaps"
       >
         <span class="material-icons">near_me</span>
-        Ver en el Mapa
+        {{ t('business.viewMap') }}
       </button>
       <button
         v-if="business.phone"
@@ -374,7 +377,7 @@ const hasSocials = computed(() =>
         @click="callPhone"
       >
         <span class="material-icons">phone</span>
-        Llamar
+        {{ t('business.call') }}
       </button>
     </div>