@innertia-solutions/innertia-nuxt 0.1.1

package/components/Layout/Admin.vue

@@ -0,0 +1,32 @@
+<script setup>
+const showAnimation = ref(false)
+onMounted(() => {
+  const seen = sessionStorage.getItem('auth-entered')
+  if (!seen) {
+    showAnimation.value = true
+    sessionStorage.setItem('auth-entered', 'true')
+  }
+})
+</script>
+
+<template>
+  <div :class="{ 'animate-entrance': showAnimation }">
+    <AdminBase>
+      <template #logo><slot name="logo" /></template>
+      <template #menu><slot name="menu" /></template>
+      <template #user-footer><slot name="user-footer" /></template>
+
+      <div class="lg:ps-65">
+        <slot />
+      </div>
+    </AdminBase>
+  </div>
+</template>
+
+<style scoped>
+.animate-entrance { animation: fadeInScale 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
+@keyframes fadeInScale {
+  from { opacity: 0; transform: scale(0.96); filter: blur(4px); }
+  to   { opacity: 1; transform: scale(1);    filter: blur(0);   }
+}
+</style>

package/components/Layout/Auth.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="bg-muted">
+    <div class="absolute top-4 right-4 z-20">
+      <slot name="theme-switch" />
+    </div>
+    <main class="flex min-h-full">
+      <!-- Columna izquierda: imagen/bienvenida -->
+      <div class="relative hidden min-h-screen lg:w-200 xl:w-[65%] bg-surface lg:flex flex-col justify-between p-6 overflow-hidden">
+        <slot name="background" />
+        <div class="z-0 p-20 pt-[max(180px,10vh)]">
+          <slot name="welcome" />
+        </div>
+      </div>
+
+      <!-- Columna derecha: formulario -->
+      <div class="grow px-12 z-10 -ml-6 pr-6 bg-card rounded-tl-[1.5rem] rounded-bl-[1.5rem]">
+        <div class="h-full min-h-screen sm:w-112 flex flex-col justify-center mx-auto space-y-5 p-4">
+          <div class="flex justify-center mb-6">
+            <slot name="logo" />
+          </div>
+          <slot />
+          <div class="absolute bottom-4 right-4 text-xs text-muted-foreground">
+            <slot name="version" />
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+</template>

package/components/Layout/SidebarWithAppColumn.vue

@@ -0,0 +1,388 @@
+<script setup lang="ts">
+import * as TablerIcons from '@tabler/icons-vue'
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+interface NavItem {
+  label:    string
+  icon:     string
+  route:    string
+  pattern?: string
+}
+
+interface AppItem {
+  label:  string
+  icon:   string
+  route:  string
+  bg?:    string
+  text?:  string
+  nav?:   NavItem[]
+}
+
+interface MenuItem {
+  label:     string
+  icon:      string
+  route?:    string
+  pattern?:  string
+  children?: NavItem[]
+}
+
+// ─── Props / Emits ────────────────────────────────────────────────────────────
+
+const props = withDefaults(defineProps<{
+  appItems?:  AppItem[]
+  menuItems?: MenuItem[]
+  homeRoute?: string
+  user?:      { name?: string; email?: string } | null
+  floating?:  boolean
+}>(), {
+  appItems:  () => [],
+  menuItems: () => [],
+  homeRoute: '/',
+})
+
+const emit = defineEmits<{ logout: [] }>()
+
+// ─── Mobile sidebar ───────────────────────────────────────────────────────────
+
+const isOpen = ref(false)
+const open  = () => { isOpen.value = true }
+const close = () => { isOpen.value = false }
+provide('spark:sidebar', { isOpen, open, close })
+
+// ─── Route matching ───────────────────────────────────────────────────────────
+
+const route = useRoute()
+
+const matchPattern = (pattern?: string) => {
+  if (!pattern) return false
+  return new RegExp('^' + pattern.replace(/\*/g, '.*') + '$').test(route.path)
+}
+
+const isChildActive = (children?: NavItem[]) =>
+  children?.some(c => matchPattern(c.pattern ?? c.route + '/*')) ?? false
+
+// ─── Active app detection ─────────────────────────────────────────────────────
+
+const currentApp = computed(() =>
+  props.appItems.find(a => route.path.startsWith(a.route)) ?? null
+)
+const isInApp = computed(() => !!currentApp.value)
+
+// ─── Hover preview ────────────────────────────────────────────────────────────
+
+const hoveredApp = ref<AppItem | 'home' | null>(null)
+
+const previewApp = computed(() =>
+  hoveredApp.value && hoveredApp.value !== 'home'
+    ? hoveredApp.value as AppItem
+    : currentApp.value
+)
+
+const showMainMenu = computed(() =>
+  hoveredApp.value === 'home' || (!hoveredApp.value && !isInApp.value)
+)
+
+watch(isInApp, (val) => { if (!val) hoveredApp.value = null })
+
+// ─── Main menu accordion ──────────────────────────────────────────────────────
+
+const openAccordions = ref<Record<number, boolean>>({})
+const toggleAccordion = (i: number) => { openAccordions.value[i] = !openAccordions.value[i] }
+
+watch(() => route.path, () => {
+  let active = -1
+  props.menuItems.forEach((item, i) => {
+    if (item.children && (matchPattern(item.pattern) || isChildActive(item.children))) active = i
+  })
+  openAccordions.value = active !== -1 ? { [active]: true } : {}
+}, { immediate: true })
+
+// ─── User / env ───────────────────────────────────────────────────────────────
+
+const userInitial = computed(() =>
+  props.user?.name?.charAt(0).toUpperCase() ??
+  props.user?.email?.charAt(0).toUpperCase() ?? 'U'
+)
+
+const config   = useRuntimeConfig()
+const appEnv   = config.public.appEnv as string | undefined
+const envLabel = computed(() => (!appEnv || appEnv === 'production') ? null : appEnv)
+
+// ─── Icon resolver ────────────────────────────────────────────────────────────
+
+const icon = (name: string) => (TablerIcons as Record<string, unknown>)[name]
+</script>
+
+<template>
+  <div class="bg-background-1 min-h-screen">
+
+    <!-- Mobile backdrop -->
+    <Transition
+      enter-from-class="opacity-0" enter-active-class="transition-opacity duration-300"
+      leave-to-class="opacity-0"   leave-active-class="transition-opacity duration-300"
+    >
+      <div
+        v-if="isOpen"
+        class="lg:hidden fixed inset-0 z-50 bg-black/40 backdrop-blur-sm"
+        @click="close"
+      />
+    </Transition>
+
+    <!-- ═══ SIDEBAR ════════════════════════════════════════════════════════════ -->
+    <aside
+      :class="[
+        'fixed inset-y-0 start-0 z-60 w-65',
+        'transition-transform duration-300 lg:translate-x-0',
+        isOpen ? 'translate-x-0' : 'max-lg:-translate-x-full',
+        floating ? 'p-3' : '',
+      ]"
+    >
+      <div
+        :class="[
+          'flex flex-col h-full bg-sidebar',
+          floating
+            ? 'rounded-2xl border border-sidebar-line shadow-sm overflow-hidden'
+            : 'border-e border-sidebar-line',
+        ]"
+      >
+
+        <!-- Logo ─────────────────────────────────────────────────────────────── -->
+        <header class="px-4 pt-4 pb-3 border-b border-sidebar-line shrink-0 flex items-center gap-x-2">
+          <div class="flex-1 min-w-0">
+            <slot name="logo" />
+          </div>
+          <!-- Mobile close -->
+          <button
+            type="button"
+            class="lg:hidden size-7 inline-flex justify-center items-center rounded-lg text-muted-foreground hover:bg-muted-hover transition-colors"
+            @click="close"
+          >
+            <svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </header>
+
+        <!-- Search (optional) ───────────────────────────────────────────────── -->
+        <div v-if="$slots.search" class="px-3 pb-2 border-b border-sidebar-line shrink-0">
+          <slot name="search" />
+        </div>
+
+        <!-- Body: icon strip + right panel ──────────────────────────────────── -->
+        <div class="flex flex-1 min-h-0" @mouseleave="hoveredApp = null">
+
+          <!-- ── Icon strip (50 px) ──────────────────────────────────────────── -->
+          <div class="w-[50px] shrink-0 flex flex-col relative">
+
+            <!-- Separator line (behind strip items via z-0) -->
+            <span class="pointer-events-none absolute right-0 inset-y-0 w-px bg-sidebar-line z-0" />
+
+            <div class="flex-1 flex flex-col py-2 gap-1.5 overflow-y-auto relative z-10">
+
+              <!-- Home button -->
+              <NuxtLink
+                :to="homeRoute"
+                class="group relative flex items-center justify-center h-12 border border-r-0"
+                :class="!isInApp
+                  ? 'ml-[2px] bg-card border-sidebar-line rounded-l-lg'
+                  : 'ml-[1px] w-12 border-transparent rounded-lg'"
+                @mouseenter="hoveredApp = 'home'"
+              >
+                <span
+                  class="size-10 flex items-center justify-center rounded-lg shrink-0 transition-opacity duration-150 bg-surface text-muted-foreground"
+                  :class="!isInApp ? 'opacity-100' : 'opacity-50 group-hover:opacity-100'"
+                >
+                  <component :is="icon('IconHome')" class="size-[22px]" />
+                </span>
+              </NuxtLink>
+
+              <!-- App items -->
+              <NuxtLink
+                v-for="app in appItems"
+                :key="app.route"
+                :to="app.route"
+                class="group relative flex items-center justify-center h-12 border border-r-0"
+                :class="route.path.startsWith(app.route)
+                  ? 'ml-[2px] bg-card border-sidebar-line rounded-l-lg'
+                  : 'ml-[1px] w-12 border-transparent rounded-lg'"
+                @mouseenter="hoveredApp = app"
+              >
+                <span
+                  class="size-10 flex items-center justify-center rounded-lg shrink-0 transition-opacity duration-150"
+                  :class="[
+                    app.bg ?? 'bg-surface',
+                    app.text ?? 'text-muted-foreground',
+                    route.path.startsWith(app.route) ? 'opacity-100' : 'opacity-50 group-hover:opacity-100',
+                  ]"
+                >
+                  <component :is="icon(app.icon)" class="size-[22px]" />
+                </span>
+              </NuxtLink>
+
+            </div>
+          </div>
+          <!-- /icon strip -->
+
+          <!-- ── Right panel ─────────────────────────────────────────────────── -->
+          <div class="flex-1 relative overflow-hidden bg-card">
+
+            <!-- MAIN MENU -->
+            <Transition name="panel-swap">
+              <div v-if="showMainMenu" key="main" class="absolute inset-0 overflow-y-auto">
+                <ul class="flex flex-col gap-y-1 px-3 pt-2 pb-3">
+                  <li v-for="(item, index) in menuItems" :key="'menu-' + index">
+
+                    <!-- Simple link -->
+                    <NuxtLink
+                      v-if="!item.children && item.route"
+                      :to="item.route"
+                      class="flex items-center gap-x-3 py-2 px-3 text-sm text-muted-foreground rounded-lg hover:bg-muted-hover transition-all border border-transparent"
+                      :class="{ 'bg-surface text-foreground font-semibold border-card-line': matchPattern(item.pattern ?? item.route) }"
+                    >
+                      <component :is="icon(item.icon)" class="shrink-0 size-4" />
+                      {{ item.label }}
+                    </NuxtLink>
+
+                    <!-- Accordion group -->
+                    <div v-else-if="item.children" class="flex flex-col">
+                      <button
+                        type="button"
+                        class="w-full text-start flex items-center gap-x-3 py-2 px-3 text-sm text-muted-foreground rounded-lg hover:bg-muted-hover transition-all"
+                        :class="{ 'bg-muted text-foreground font-semibold': openAccordions[index] }"
+                        @click="toggleAccordion(index)"
+                      >
+                        <component :is="icon(item.icon)" class="shrink-0 size-4" />
+                        <span class="flex-1">{{ item.label }}</span>
+                        <component
+                          :is="icon('IconChevronDown')"
+                          class="shrink-0 size-4 transition-transform duration-300"
+                          :class="{ '-rotate-180': openAccordions[index] }"
+                        />
+                      </button>
+                      <div
+                        class="overflow-hidden transition-all duration-300 ease-in-out"
+                        :style="{
+                          maxHeight: openAccordions[index] ? '300px' : '0px',
+                          opacity:   openAccordions[index] ? '1'    : '0',
+                          marginTop: openAccordions[index] ? '4px'  : '0px',
+                        }"
+                      >
+                        <ul class="ps-8 flex flex-col gap-y-1 relative before:absolute before:start-4.5 before:w-px before:h-full before:bg-sidebar-line">
+                          <li v-for="child in item.children" :key="child.route">
+                            <NuxtLink
+                              :to="child.route"
+                              class="flex items-center gap-x-4 py-2 px-3 text-sm text-muted-foreground rounded-lg hover:bg-muted-hover transition-colors border border-transparent"
+                              :class="{ 'bg-surface text-foreground font-semibold': matchPattern(child.pattern ?? child.route) }"
+                            >
+                              <component :is="icon(child.icon)" class="shrink-0 size-4" />
+                              {{ child.label }}
+                            </NuxtLink>
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+
+                  </li>
+                </ul>
+              </div>
+            </Transition>
+
+            <!-- APP SUBNAV -->
+            <Transition name="panel-swap">
+              <div v-if="!showMainMenu" :key="previewApp?.route ?? 'app'" class="absolute inset-0 flex flex-col">
+                <div class="px-3 pt-3 pb-3 border-b border-sidebar-line shrink-0">
+                  <span class="text-[13px] font-bold text-muted-foreground uppercase tracking-wider truncate">
+                    {{ previewApp?.label }}
+                  </span>
+                </div>
+                <nav class="flex-1 overflow-y-auto py-2 px-2">
+                  <ul class="flex flex-col gap-0.5">
+                    <li v-for="item in (previewApp?.nav ?? [])" :key="item.route">
+                      <NuxtLink
+                        :to="item.route"
+                        class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-muted-foreground hover:bg-muted-hover transition-colors border border-transparent"
+                        :class="{ 'bg-surface text-foreground font-semibold border-card-line': matchPattern(item.pattern ?? item.route + '*') }"
+                      >
+                        <component :is="icon(item.icon)" class="size-4 shrink-0" />
+                        {{ item.label }}
+                      </NuxtLink>
+                    </li>
+                  </ul>
+                </nav>
+              </div>
+            </Transition>
+
+          </div>
+          <!-- /right panel -->
+
+        </div>
+        <!-- /body -->
+
+        <!-- Footer ───────────────────────────────────────────────────────────── -->
+        <div class="shrink-0 border-t border-sidebar-line">
+
+          <!-- Controls slot (dark mode, notifications, etc.) -->
+          <div v-if="$slots['user-controls']" class="flex items-center gap-x-1.5 px-3 pt-3">
+            <slot name="user-controls" />
+          </div>
+
+          <!-- User info + logout -->
+          <div v-if="user" class="flex items-center gap-x-3 px-3 py-3">
+            <div class="size-9 rounded-lg bg-primary flex items-center justify-center text-primary-foreground text-sm font-bold shrink-0 select-none">
+              {{ userInitial }}
+            </div>
+            <div class="flex-1 min-w-0">
+              <p class="text-sm font-semibold text-foreground truncate">{{ user.name ?? user.email }}</p>
+              <p v-if="user.name && user.email" class="text-xs text-muted-foreground truncate">{{ user.email }}</p>
+            </div>
+            <button
+              type="button"
+              class="size-7 inline-flex items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted-hover transition-colors shrink-0"
+              title="Cerrar sesión"
+              @click="emit('logout')"
+            >
+              <svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M18 9l3 3m0 0l-3 3m3-3H9" />
+              </svg>
+            </button>
+          </div>
+
+          <!-- Extra footer slot -->
+          <slot name="user-footer" />
+
+          <!-- Env banner -->
+          <div
+            v-if="envLabel"
+            class="flex items-center justify-center gap-x-2 py-2 bg-amber-400/15 border-t border-amber-400/30"
+          >
+            <span class="size-1.5 rounded-full bg-amber-400 shrink-0" />
+            <span class="text-[11px] font-semibold text-amber-600 dark:text-amber-400 uppercase tracking-wide">
+              {{ envLabel }}
+            </span>
+          </div>
+
+        </div>
+        <!-- /footer -->
+
+      </div>
+    </aside>
+
+    <!-- ═══ MAIN CONTENT ══════════════════════════════════════════════════════ -->
+    <div class="lg:ps-65 flex flex-col min-h-screen">
+      <slot name="topbar" />
+      <div class="flex-1 min-h-0">
+        <slot />
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<style scoped>
+/* Panel swap animation */
+.panel-swap-enter-active,
+.panel-swap-leave-active { transition: opacity 0.18s ease, transform 0.18s ease; }
+.panel-swap-enter-from   { opacity: 0; transform: translateX(10px);  }
+.panel-swap-leave-to     { opacity: 0; transform: translateX(-10px); }
+</style>

package/components/Layout/TopBar.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+// ─── Props / Emits ────────────────────────────────────────────────────────────
+
+const props = withDefaults(defineProps<{
+  user?:                { name?: string; email?: string; role?: string } | null
+  notificationsCount?:  number
+  searchPlaceholder?:   string
+  showSearch?:          boolean
+  showNotifications?:   boolean
+  showUser?:            boolean
+}>(), {
+  user:                 null,
+  notificationsCount:   0,
+  searchPlaceholder:    'Buscar…',
+  showSearch:           true,
+  showNotifications:    true,
+  showUser:             true,
+})
+
+const emit = defineEmits<{
+  search:              [query: string]
+  'notification-click': []
+  logout:              []
+}>()
+
+// ─── Search ───────────────────────────────────────────────────────────────────
+
+const searchQuery = ref('')
+
+const handleSearch = () => emit('search', searchQuery.value)
+
+// ⌘K / Ctrl+K → focus search
+const searchRef = ref<HTMLInputElement | null>(null)
+onMounted(() => {
+  window.addEventListener('keydown', (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+      e.preventDefault()
+      searchRef.value?.focus()
+    }
+  })
+})
+
+// ─── User initials ────────────────────────────────────────────────────────────
+
+const userInitials = computed(() => {
+  const name = props.user?.name ?? props.user?.email ?? ''
+  return name.split(' ').slice(0, 2).map(p => p[0]).join('').toUpperCase() || 'U'
+})
+</script>
+
+<template>
+  <header class="sticky top-0 z-40 h-14 bg-card/95 backdrop-blur-sm border-b border-card-line flex items-center gap-4 px-6">
+
+    <!-- Left slot (breadcrumb, page title, etc.) -->
+    <div v-if="$slots.left" class="flex items-center gap-3 min-w-0 mr-auto">
+      <slot name="left" />
+    </div>
+    <div v-else class="mr-auto" />
+
+    <!-- Global search -->
+    <div v-if="showSearch" class="relative hidden sm:block w-72">
+      <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+        <svg class="size-4 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
+        </svg>
+      </div>
+      <input
+        ref="searchRef"
+        v-model="searchQuery"
+        type="search"
+        :placeholder="searchPlaceholder"
+        class="w-full h-9 pl-9 pr-12 text-sm bg-surface border border-card-line rounded-lg text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition"
+        @keydown.enter="handleSearch"
+      />
+      <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+        <kbd class="hidden sm:inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] font-mono font-semibold text-muted-foreground bg-muted border border-card-line rounded">
+          <span class="text-[9px]">⌘</span>K
+        </kbd>
+      </div>
+    </div>
+
+    <!-- Right slot -->
+    <slot name="right" />
+
+    <!-- Notifications -->
+    <button
+      v-if="showNotifications"
+      type="button"
+      class="relative size-9 flex items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted-hover transition-colors"
+      @click="emit('notification-click')"
+    >
+      <svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>
+      </svg>
+      <span
+        v-if="notificationsCount > 0"
+        class="absolute top-1.5 right-1.5 min-w-[16px] h-4 px-1 flex items-center justify-center rounded-full bg-red-500 text-[10px] font-bold text-white leading-none"
+      >{{ notificationsCount > 99 ? '99+' : notificationsCount }}</span>
+    </button>
+
+    <!-- User -->
+    <div v-if="showUser && user" class="flex items-center gap-2.5 pl-2 border-l border-card-line">
+      <div class="size-8 rounded-full bg-primary flex items-center justify-center text-primary-foreground text-xs font-bold shrink-0 select-none">
+        {{ userInitials }}
+      </div>
+      <div class="hidden md:block min-w-0">
+        <p class="text-sm font-semibold text-foreground truncate leading-tight">{{ user.name ?? user.email }}</p>
+        <p v-if="user.role" class="text-xs text-muted-foreground truncate leading-tight">{{ user.role }}</p>
+      </div>
+    </div>
+
+  </header>
+</template>

package/components/MobileBlocker.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { IconDeviceDesktop, IconArrowRight, IconCopy, IconCheck } from '@tabler/icons-vue'
+import type { AppDefinition } from '~/configs/apps'
+
+const props = defineProps<{
+  /** App al que se intentó acceder (para el copy contextual). */
+  blockedApp?: AppDefinition | null
+  /** App mobile-friendly al que el usuario puede continuar (opcional). */
+  fallbackApp?: AppDefinition | null
+}>()
+
+const route = useRoute()
+const currentUrl = computed(() => {
+  if (typeof window === 'undefined') return ''
+  return window.location.origin + route.fullPath
+})
+
+const copied = ref(false)
+async function copyLink() {
+  try {
+    await navigator.clipboard.writeText(currentUrl.value)
+    copied.value = true
+    setTimeout(() => { copied.value = false }, 2000)
+  } catch {
+    /* clipboard puede fallar en algunos contextos — silent */
+  }
+}
+
+const blockedAppLabel = computed(() => props.blockedApp?.label ?? 'esta sección')
+</script>
+
+<template>
+  <div class="min-h-screen flex items-center justify-center bg-white dark:bg-slate-950 px-6 py-10">
+    <div class="w-full max-w-sm text-center space-y-6">
+      <!-- Icono -->
+      <div class="mx-auto size-16 rounded-2xl bg-violet-100 dark:bg-violet-900/30 flex items-center justify-center">
+        <IconDeviceDesktop class="size-8 text-violet-600 dark:text-violet-400" />
+      </div>
+
+      <!-- Mensaje -->
+      <div class="space-y-2">
+        <h1 class="text-2xl font-bold text-slate-900 dark:text-white">
+          Mejor en pantalla grande
+        </h1>
+        <p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
+          {{ blockedAppLabel }} está optimizada para uso en escritorio o tablet. Para una mejor experiencia, abre este enlace en un computador.
+        </p>
+      </div>
+
+      <!-- Fallback: continuar en app mobile -->
+      <div v-if="fallbackApp" class="pt-2">
+        <NuxtLink
+          :to="fallbackApp.home"
+          class="flex items-center justify-between gap-3 w-full rounded-xl border border-violet-200 dark:border-violet-800 bg-violet-50 dark:bg-violet-900/20 px-4 py-3 text-left hover:bg-violet-100 dark:hover:bg-violet-900/40 transition-colors"
+        >
+          <div>
+            <div class="text-xs font-medium uppercase tracking-wide text-violet-700 dark:text-violet-300">
+              Continuar como
+            </div>
+            <div class="text-sm font-semibold text-slate-900 dark:text-white">
+              {{ fallbackApp.label }}
+            </div>
+          </div>
+          <IconArrowRight class="size-5 text-violet-600 dark:text-violet-400 shrink-0" />
+        </NuxtLink>
+      </div>
+
+      <!-- Copiar enlace para mandarse al pc -->
+      <button
+        type="button"
+        @click="copyLink"
+        class="inline-flex items-center gap-2 text-sm font-medium text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors"
+      >
+        <IconCheck v-if="copied" class="size-4 text-emerald-600" />
+        <IconCopy v-else class="size-4" />
+        <span>{{ copied ? 'Enlace copiado' : 'Copiar enlace para abrir en pc' }}</span>
+      </button>
+
+      <!-- Footer -->
+      <p class="text-xs text-slate-400 dark:text-slate-600 pt-4">
+        © {{ new Date().getFullYear() }} {{ $config.public.appName ?? 'Asetio' }}
+      </p>
+    </div>
+  </div>
+</template>