Documentos Pacientes, Template Documentos Pacientes Saas, Documentos prontuários, Documentos Externos, Visualização Externa, Permissão de Visualização, Render Otimização

2026-03-30 14:08:19 -03:00
parent 0658e2e9bf
commit d088a89fb7
112 changed files with 115867 additions and 5266 deletions
@@ -15,22 +15,22 @@
 |--------------------------------------------------------------------------
 -->
 <script setup>
-import { ref, reactive, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
-import { useRouter } from 'vue-router';
-import { useToast } from 'primevue/usetoast';
 import { useConfirm } from 'primevue/useconfirm';
+import { useToast } from 'primevue/usetoast';
+import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
+import { useRouter } from 'vue-router';

-import { applyThemeEngine } from '@/theme/theme.options';
 import { useLayout as _useLayout } from '@/layout/composables/layout';
+import { applyThemeEngine } from '@/theme/theme.options';
 const { setVariant } = _useLayout();

-import Textarea from 'primevue/textarea';
-import InputMask from 'primevue/inputmask';
 import Checkbox from 'primevue/checkbox';
+import InputMask from 'primevue/inputmask';
 import Select from 'primevue/select';
+import Textarea from 'primevue/textarea';

-import { supabase } from '@/lib/supabase/client';
 import { useLayout } from '@/layout/composables/layout';
+import { supabase } from '@/lib/supabase/client';

 const router = useRouter();
 const toast = useToast();
@@ -50,6 +50,25 @@ const AVATAR_BUCKET = 'avatars';
 const saving = ref(false);
 const dirty = ref(false);

+const fieldErrors = reactive({
+    full_name: '',
+    nickname: '',
+    phone: ''
+});
+
+function clearErr(field) {
+    fieldErrors[field] = '';
+}
+
+function validateRequired() {
+    const nameParts = form.full_name?.trim().split(/\s+/).filter(Boolean) || [];
+    fieldErrors.full_name = nameParts.length === 0 ? 'Nome completo é obrigatório.' : nameParts.length < 2 ? 'Informe seu nome e sobrenome.' : '';
+    fieldErrors.nickname = form.nickname?.trim() ? '' : 'Nome de exibição é obrigatório.';
+    const digits = form.phone?.replace(/[^0-9]/g, '') || '';
+    fieldErrors.phone = digits.length >= 10 ? '' : 'WhatsApp é obrigatório.';
+    return !fieldErrors.full_name && !fieldErrors.nickname && !fieldErrors.phone;
+}
+
 const openPassword = ref(false);
 const sendingPassword = ref(false);
 const passwordSent = ref(false);
@@ -140,6 +159,59 @@ function markDirty() {
    dirty.value = true;
 }

+/* ----------------------------
+   Gamificação / Progresso
+----------------------------- */
+const profileFields = computed(() => [
+    { key: 'full_name', filled: !!form.full_name?.trim(), icon: 'pi pi-user', text: 'Preencha seu nome completo' },
+    { key: 'nickname', filled: !!form.nickname?.trim(), icon: 'pi pi-comment', text: 'Escolha um nome de exibição' },
+    { key: 'work_description', filled: !!form.work_description?.trim(), icon: 'pi pi-briefcase', text: 'Descreva seu trabalho' },
+    { key: 'avatar', filled: !!(form.avatar_url?.trim() || ui.avatarFile), icon: 'pi pi-image', text: 'Adicione uma foto' },
+    { key: 'bio', filled: !!form.bio?.trim(), icon: 'pi pi-pencil', text: 'Complete sua bio' },
+    { key: 'phone', filled: !!form.phone?.trim()?.replace(/[^0-9]/g, ''), icon: 'pi pi-whatsapp', text: 'Informe seu WhatsApp' },
+    { key: 'social', filled: !!(form.social_instagram || form.social_x || form.site_url || form.social_youtube || form.social_facebook || customSocials.value.length), icon: 'pi pi-share-alt', text: 'Adicione uma rede social' }
+]);
+
+const profileProgress = computed(() => {
+    const filled = profileFields.value.filter((f) => f.filled).length;
+    return Math.round((filled / profileFields.value.length) * 100);
+});
+
+const progressSuggestions = computed(() => profileFields.value.filter((f) => !f.filled));
+
+const progressColor = computed(() => {
+    if (profileProgress.value >= 80) return '#10b981';
+    if (profileProgress.value >= 50) return '#f59e0b';
+    return '#ef4444';
+});
+
+const gameLevels = [
+    { min: 0, max: 14, label: 'Iniciante', icon: '🌱', color: '#94a3b8' },
+    { min: 15, max: 28, label: 'Aprendiz', icon: '🌿', color: '#60a5fa' },
+    { min: 29, max: 42, label: 'Praticante', icon: '⚡', color: '#f59e0b' },
+    { min: 43, max: 57, label: 'Avançado', icon: '🔥', color: '#f97316' },
+    { min: 58, max: 71, label: 'Expert', icon: '💎', color: '#a78bfa' },
+    { min: 72, max: 85, label: 'Mestre', icon: '🏆', color: '#10b981' },
+    { min: 86, max: 100, label: 'Lendário', icon: '🌟', color: '#eab308' }
+];
+
+const currentLevel = computed(() => gameLevels.find((l) => profileProgress.value >= l.min && profileProgress.value <= l.max) || gameLevels[0]);
+const nextLevel = computed(() => {
+    const i = gameLevels.indexOf(currentLevel.value);
+    return i < gameLevels.length - 1 ? gameLevels[i + 1] : null;
+});
+const xpToNext = computed(() => (nextLevel.value ? nextLevel.value.min - profileProgress.value : 0));
+
+const badges = computed(() => [
+    { key: 'name', earned: !!form.full_name?.trim(), icon: '👤', label: 'Identificado' },
+    { key: 'nick', earned: !!form.nickname?.trim(), icon: '✏️', label: 'Apelido' },
+    { key: 'work', earned: !!form.work_description?.trim(), icon: '💼', label: 'Profissional' },
+    { key: 'photo', earned: !!(form.avatar_url?.trim() || ui.avatarFile), icon: '📷', label: 'Fotogênico' },
+    { key: 'bio', earned: !!form.bio?.trim(), icon: '📝', label: 'Eloquente' },
+    { key: 'phone', earned: !!form.phone?.trim()?.replace(/[^0-9]/g, ''), icon: '📱', label: 'Conectado' },
+    { key: 'social', earned: !!(form.social_instagram || form.social_x || form.site_url || form.social_youtube || form.social_facebook || customSocials.value.length), icon: '🌐', label: 'Social' }
+]);
+
 /* ----------------------------
   Cores e preset
 ----------------------------- */
@@ -500,6 +572,12 @@ async function loadProfile() {
 }

 async function saveAll() {
+    if (!validateRequired()) {
+        toast.add({ severity: 'warn', summary: 'Campos obrigatórios', detail: 'Preencha nome completo, nome de exibição e WhatsApp antes de salvar.', life: 4000 });
+        // Rola até a seção Conta para o usuário ver os erros
+        document.getElementById('conta')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        return;
+    }
    saving.value = true;
    try {
        if (ui.avatarFile) {
@@ -677,11 +755,11 @@ onBeforeUnmount(() => {

 <template>
    <!-- ── HERO ────────────────────────────────────────────── -->
-    <div ref="heroSentinelRef" class="h-px" />
+    <div ref="heroSentinelRef" class="p-2" />
    <div
        ref="heroEl"
        class="sticky mx-3 md:mx-4 mb-4 z-20 overflow-hidden rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-2"
-        :style="{ top: 'var(--layout-sticky-top, 56px)' }"
+        :style="{ top: 'var(--layout-sticky-top, 55px)' }"
        :class="{ 'rounded-tl-none rounded-tr-none': heroStuck }"
    >
        <div class="absolute inset-0 pointer-events-none overflow-hidden" aria-hidden="true">
@@ -717,11 +795,66 @@ onBeforeUnmount(() => {
        </div>
    </div>

+    <!-- ── PROGRESSO / GAMIFICAÇÃO ──────────────────────────── -->
+    <div class="px-3 md:px-4 mb-4">
+        <div class="rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-4 space-y-4">
+            <!-- Nível + barra -->
+            <div class="flex items-center gap-4">
+                <div class="shrink-0 w-12 h-12 rounded-xl flex items-center justify-center text-2xl border" :style="{ backgroundColor: currentLevel.color + '18', borderColor: currentLevel.color + '40' }" v-tooltip.top="currentLevel.label">
+                    {{ currentLevel.icon }}
+                </div>
+
+                <div class="flex-1 min-w-0">
+                    <div class="flex items-center justify-between mb-1.5">
+                        <div class="flex items-center gap-2">
+                            <span class="text-[1rem] font-bold text-[var(--text-color)]">{{ currentLevel.label }}</span>
+                            <span class="text-xs font-semibold px-2 py-0.5 rounded-full" :style="{ backgroundColor: currentLevel.color + '20', color: currentLevel.color }">Nível {{ gameLevels.indexOf(currentLevel) + 1 }}</span>
+                        </div>
+                        <span class="text-xs font-bold" :style="{ color: progressColor }">{{ profileProgress }}%</span>
+                    </div>
+
+                    <div class="w-full h-2.5 rounded-full bg-[var(--surface-ground)] overflow-hidden">
+                        <div class="h-full rounded-full transition-all duration-700 ease-out relative overflow-hidden" :style="{ width: profileProgress + '%', backgroundColor: currentLevel.color }">
+                            <div class="absolute inset-0 prof-shimmer" />
+                        </div>
+                    </div>
+
+                    <p class="text-xs text-[var(--text-color-secondary)] mt-1.5 m-0">
+                        <span v-if="nextLevel">
+                            <span class="font-medium" :style="{ color: nextLevel.color }">{{ xpToNext }}% até {{ nextLevel.label }} {{ nextLevel.icon }}</span>
+                            — preencha mais dados para evoluir
+                        </span>
+                        <span v-else class="font-semibold" style="color: #10b981">🎉 Perfil 100% completo!</span>
+                    </p>
+                </div>
+            </div>
+
+            <!-- Badges -->
+            <div>
+                <p class="text-xs font-semibold text-[var(--text-color-secondary)] uppercase tracking-wider mb-2">Conquistas</p>
+                <div class="flex gap-2 flex-wrap">
+                    <div v-for="badge in badges" :key="badge.key" class="prof-badge" :class="badge.earned ? 'prof-badge--earned' : 'prof-badge--locked'" v-tooltip.top="badge.earned ? badge.label : 'Bloqueado — ' + badge.label">
+                        <span class="text-base leading-none">{{ badge.icon }}</span>
+                        <span class="text-xs font-medium leading-none">{{ badge.label }}</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Dicas do que falta -->
+            <div v-if="progressSuggestions.length" class="flex flex-wrap gap-2 pt-1 border-t border-[var(--surface-border)]">
+                <span v-for="(tip, i) in progressSuggestions" :key="i" class="inline-flex items-center gap-1.5 text-xs px-2.5 py-1 rounded-full bg-[var(--surface-ground)] text-[var(--text-color-secondary)] border border-[var(--surface-border)]">
+                    <i :class="tip.icon" class="text-[0.65rem]" />
+                    {{ tip.text }}
+                </span>
+            </div>
+        </div>
+    </div>
+
    <!-- ── GRID ─────────────────────────────────────────────── -->
    <div class="px-3 md:px-4 pb-8 grid grid-cols-12 gap-4 md:gap-5">
        <!-- Sidebar -->
        <div class="col-span-12 lg:col-span-3">
-            <div class="sticky top-4 rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-5 flex flex-col gap-3">
+            <div class="sticky rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-5 flex flex-col gap-3" :style="{ top: 'var(--layout-sticky-top, 140px)' }">
                <!-- Mini user -->
                <div class="flex items-center gap-3 pb-1">
                    <div class="relative shrink-0">
@@ -788,19 +921,41 @@ onBeforeUnmount(() => {
                    <!-- Nome completo -->
                    <div class="col-span-12 md:col-span-6">
                        <FloatLabel variant="on">
-                            <InputText id="prof_name" v-model="form.full_name" class="w-full" autocomplete="name" @input="markDirty" />
-                            <label for="prof_name">Nome completo</label>
+                            <InputText
+                                id="prof_name"
+                                v-model="form.full_name"
+                                class="w-full"
+                                autocomplete="name"
+                                :invalid="!!fieldErrors.full_name"
+                                @input="
+                                    markDirty();
+                                    clearErr('full_name');
+                                "
+                            />
+                            <label for="prof_name">Nome completo <span class="text-red-400">*</span></label>
                        </FloatLabel>
-                        <div class="mt-1.5 text-[1rem] text-[var(--text-color-secondary)]">Aparece no menu, cabeçalhos e registros.</div>
+                        <Message v-if="fieldErrors.full_name" severity="error" size="small" variant="simple" class="mt-1">{{ fieldErrors.full_name }}</Message>
+                        <div v-else class="mt-1.5 text-[1rem] text-[var(--text-color-secondary)]">Aparece no menu, cabeçalhos e registros.</div>
                    </div>

                    <!-- Como a Agência PSI deveria te chamar? -->
                    <div class="col-span-12 md:col-span-6">
                        <FloatLabel variant="on">
-                            <InputText id="prof_nickname" v-model="form.nickname" class="w-full" autocomplete="nickname" @input="markDirty" />
-                            <label for="prof_nickname">Como a Agência PSI deveria te chamar?</label>
+                            <InputText
+                                id="prof_nickname"
+                                v-model="form.nickname"
+                                class="w-full"
+                                autocomplete="nickname"
+                                :invalid="!!fieldErrors.nickname"
+                                @input="
+                                    markDirty();
+                                    clearErr('nickname');
+                                "
+                            />
+                            <label for="prof_nickname">Como a Agência PSI deveria te chamar? <span class="text-red-400">*</span></label>
                        </FloatLabel>
-                        <div class="mt-1.5 text-[1rem] text-[var(--text-color-secondary)]">Apelido ou nome preferido para comunicação.</div>
+                        <Message v-if="fieldErrors.nickname" severity="error" size="small" variant="simple" class="mt-1">{{ fieldErrors.nickname }}</Message>
+                        <div v-else class="mt-1.5 text-[1rem] text-[var(--text-color-secondary)]">Apelido ou nome preferido para comunicação.</div>
                    </div>

                    <!-- O que melhor descreve seu trabalho? -->
@@ -847,10 +1002,25 @@ onBeforeUnmount(() => {
                    <!-- Whatsapp -->
                    <div class="col-span-12 md:col-span-6">
                        <FloatLabel variant="on">
-                            <InputMask id="prof_phone" v-model="form.phone" class="w-full" mask="(99) 99999-9999" :autoClear="false" @update:modelValue="markDirty" />
-                            <label for="prof_phone">Whatsapp</label>
+                            <InputMask
+                                id="prof_phone"
+                                v-model="form.phone"
+                                class="w-full"
+                                mask="(99) 99999-9999"
+                                :autoClear="false"
+                                :invalid="!!fieldErrors.phone"
+                                @update:modelValue="
+                                    markDirty();
+                                    clearErr('phone');
+                                "
+                            />
+                            <label for="prof_phone">WhatsApp <span class="text-red-400">*</span></label>
                        </FloatLabel>
-                        <div class="mt-1.5 text-[1rem] text-[var(--text-color-secondary)]">Opcional.</div>
+                        <Message v-if="fieldErrors.phone" severity="error" size="small" variant="simple" class="mt-1">{{ fieldErrors.phone }}</Message>
+                        <div v-else class="mt-1.5 text-[1rem] text-[var(--text-color-secondary)] flex items-center gap-1.5">
+                            <i class="pi pi-lock text-[0.7rem] opacity-60" />
+                            <span>Usado apenas para notificações importantes.</span>
+                        </div>
                    </div>
                </div>
            </div>
@@ -1333,6 +1503,45 @@ onBeforeUnmount(() => {
 </template>

 <style scoped>
+/* ─── Shimmer na barra de progresso ─────────────────────── */
+@keyframes prof-shimmer-anim {
+    0% {
+        transform: translateX(-100%);
+    }
+    100% {
+        transform: translateX(250%);
+    }
+}
+.prof-shimmer {
+    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.28) 50%, transparent 100%);
+    width: 55%;
+    animation: prof-shimmer-anim 2.2s ease-in-out infinite;
+}
+
+/* ─── Badges de conquista ────────────────────────────────── */
+.prof-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.3rem 0.65rem;
+    border-radius: 9999px;
+    border: 1px solid;
+    transition: all 0.18s ease;
+    cursor: default;
+}
+.prof-badge--earned {
+    background-color: rgba(16, 185, 129, 0.08);
+    border-color: rgba(16, 185, 129, 0.3);
+    color: #10b981;
+}
+.prof-badge--locked {
+    background-color: var(--surface-ground);
+    border-color: var(--surface-border);
+    color: var(--text-color-secondary);
+    filter: grayscale(1);
+    opacity: 0.45;
+}
+
 /* ─── Sidebar nav ───────────────────────────────────────── */
 .nav-link {
    color: var(--text-color-secondary);
@@ -31,6 +31,7 @@ import Select from 'primevue/select';

 import { useToast } from 'primevue/usetoast';
 import { supabase } from '@/lib/supabase/client';
+import { digitsOnly, isValidEmail, toISODate, generateCPF, fmtCPF } from '@/utils/validators';

 const route = useRoute();
 const toast = useToast();
@@ -48,37 +49,6 @@ function cleanStr(v) {
    const s = String(v ?? '').trim();
    return s ? s : null;
 }
-function digitsOnly(v) {
-    const d = String(v ?? '').replace(/\D/g, '');
-    return d ? d : null;
-}
-function isValidEmail(v) {
-    const s = String(v ?? '').trim();
-    if (!s) return false;
-    return /.+@.+\..+/.test(s);
-}
-
-// DD-MM-YYYY -> YYYY-MM-DD
-function parseDDMMYYYY(s) {
-    const str = String(s || '').trim();
-    const m = /^(\d{2})-(\d{2})-(\d{4})$/.exec(str);
-    if (!m) return null;
-    const dd = Number(m[1]);
-    const mm = Number(m[2]);
-    const yyyy = Number(m[3]);
-    const dt = new Date(yyyy, mm - 1, dd);
-    if (Number.isNaN(dt.getTime())) return null;
-    if (dt.getFullYear() !== yyyy || dt.getMonth() !== mm - 1 || dt.getDate() !== dd) return null;
-    return dt;
-}
-function toISODateFromDDMMYYYY(s) {
-    const dt = parseDDMMYYYY(s);
-    if (!dt) return null;
-    const yyyy = String(dt.getFullYear()).padStart(4, '0');
-    const mm = String(dt.getMonth() + 1).padStart(2, '0');
-    const dd = String(dt.getDate()).padStart(2, '0');
-    return `${yyyy}-${mm}-${dd}`;
-}

 // ------------------------------------------------------
 // Mock fill (Preencher tudo)
@@ -112,18 +82,8 @@ function randomPhoneBR() {
    return `(${ddd}) ${p1}-${p2}`;
 }

-function generateCPF() {
-    const n = Array.from({ length: 9 }, () => randInt(0, 9));
-    const calcDV = (base) => {
-        let sum = 0;
-        for (let i = 0; i < base.length; i++) sum += base[i] * (base.length + 1 - i);
-        const mod = sum % 11;
-        return mod < 2 ? 0 : 11 - mod;
-    };
-    const d1 = calcDV(n);
-    const d2 = calcDV([...n, d1]);
-    const cpf = [...n, d1, d2].join('');
-    return cpf.replace(/^(\d{3})(\d{3})(\d{3})(\d{2})$/, '$1.$2.$3-$4');
+function generateCPFFormatted() {
+    return fmtCPF(generateCPF());
 }

 function generateRG() {
@@ -170,7 +130,7 @@ function preencherMock() {
    form.telefone = randomPhoneBR();
    form.telefone_alternativo = maybe(0.35) ? randomPhoneBR() : '';

-    form.cpf = generateCPF();
+    form.cpf = generateCPFFormatted();
    form.rg = generateRG();

    form.observacoes = maybe(0.5) ? 'Cadastro realizado via link externo.' : 'Tenho disponibilidade no período da noite.';
@@ -199,7 +159,7 @@ function preencherMock() {
    const temResponsavel = maybe(0.35);
    form.nome_responsavel = temResponsavel ? `${pick(first)} ${pick(last)} ${pick(last)}` : '';
    form.telefone_responsavel = temResponsavel ? randomPhoneBR() : '';
-    form.cpf_responsavel = temResponsavel ? generateCPF() : '';
+    form.cpf_responsavel = temResponsavel ? generateCPFFormatted() : '';
    form.observacao_responsavel = temResponsavel ? 'Responsável ciente e de acordo com o cadastro.' : '';
    form.cobranca_no_responsavel = temResponsavel ? maybe(0.5) : false;

@@ -494,7 +454,7 @@ async function enviar() {
        return;
    }

-    const isoBirth = toISODateFromDDMMYYYY(form.data_nascimento);
+    const isoBirth = toISODate(form.data_nascimento);
    if (cleanStr(form.data_nascimento) && !isoBirth) {
        toast.add({ severity: 'warn', summary: 'Atenção', detail: 'Data de nascimento inválida (use DD-MM-AAAA).', life: 2500 });
        openPanel(0);
@@ -0,0 +1,138 @@
+<!--
+|--------------------------------------------------------------------------
+| Agência PSI
+|--------------------------------------------------------------------------
+| Criado e desenvolvido por Leonardo Nohama
+|
+| Arquivo: src/views/pages/public/SharedDocumentPage.vue
+| Pagina publica para visualizar documento compartilhado via link temporario.
+|--------------------------------------------------------------------------
+-->
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { validateShareToken } from '@/services/DocumentShareLinks.service'
+import { supabase } from '@/lib/supabase/client'
+
+const route = useRoute()
+
+const loading = ref(true)
+const error = ref(null)
+const doc = ref(null)
+const previewUrl = ref('')
+
+onMounted(async () => {
+    const token = route.params.token
+    if (!token) {
+        error.value = 'Link inválido.'
+        loading.value = false
+        return
+    }
+
+    try {
+        const result = await validateShareToken(token)
+        if (!result?.document) {
+            error.value = 'Este link expirou, atingiu o limite de acessos ou é inválido.'
+            loading.value = false
+            return
+        }
+
+        doc.value = result.document
+
+        // Gerar URL assinada para download/visualizacao
+        const bucket = result.document.storage_bucket || 'documents'
+        const { data, error: storageErr } = await supabase.storage
+            .from(bucket)
+            .createSignedUrl(result.document.bucket_path, 300) // 5 min
+
+        if (storageErr) throw storageErr
+        previewUrl.value = data?.signedUrl || ''
+    } catch (e) {
+        error.value = e?.message || 'Erro ao acessar o documento.'
+    } finally {
+        loading.value = false
+    }
+})
+
+function downloadFile() {
+    if (!previewUrl.value) return
+    const a = document.createElement('a')
+    a.href = previewUrl.value
+    a.download = doc.value?.nome_original || 'documento'
+    a.target = '_blank'
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+}
+
+const isPdf = () => doc.value?.mime_type === 'application/pdf'
+const isImage = () => String(doc.value?.mime_type || '').startsWith('image/')
+</script>
+
+<template>
+    <div class="min-h-screen bg-gray-50 flex items-center justify-center p-4">
+        <div class="w-full max-w-3xl">
+
+            <!-- Loading -->
+            <div v-if="loading" class="flex flex-col items-center justify-center py-20">
+                <i class="pi pi-spinner pi-spin text-3xl text-gray-400 mb-3" />
+                <p class="text-sm text-gray-500">Validando link...</p>
+            </div>
+
+            <!-- Erro -->
+            <div v-else-if="error" class="flex flex-col items-center justify-center py-20 text-center">
+                <div class="w-16 h-16 rounded-full bg-red-50 flex items-center justify-center mb-4">
+                    <i class="pi pi-times-circle text-3xl text-red-400" />
+                </div>
+                <h2 class="text-lg font-semibold text-gray-700 mb-2">Documento indisponível</h2>
+                <p class="text-sm text-gray-500 max-w-md">{{ error }}</p>
+            </div>
+
+            <!-- Documento -->
+            <div v-else class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+                <!-- Header -->
+                <div class="flex items-center justify-between p-4 border-b border-gray-200">
+                    <div class="flex items-center gap-3 min-w-0">
+                        <span class="flex-shrink-0 w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center">
+                            <i :class="isPdf() ? 'pi pi-file-pdf text-red-500' : isImage() ? 'pi pi-image text-blue-500' : 'pi pi-file text-gray-500'" />
+                        </span>
+                        <div class="min-w-0">
+                            <div class="text-sm font-medium text-gray-800 truncate">{{ doc?.nome_original }}</div>
+                            <div class="text-xs text-gray-400">Documento compartilhado via AgênciaPSI</div>
+                        </div>
+                    </div>
+                    <button
+                        class="flex items-center gap-1.5 px-3 py-2 rounded-lg bg-blue-600 text-white text-sm hover:bg-blue-700 transition-colors"
+                        @click="downloadFile"
+                    >
+                        <i class="pi pi-download text-xs" />
+                        Baixar
+                    </button>
+                </div>
+
+                <!-- Preview -->
+                <div class="bg-gray-100">
+                    <iframe
+                        v-if="isPdf()"
+                        :src="previewUrl"
+                        class="w-full border-0"
+                        style="height: 80vh;"
+                    />
+                    <div v-else-if="isImage()" class="flex items-center justify-center p-6">
+                        <img :src="previewUrl" :alt="doc?.nome_original" class="max-w-full max-h-[80vh] object-contain rounded" />
+                    </div>
+                    <div v-else class="flex flex-col items-center justify-center py-20 text-gray-400">
+                        <i class="pi pi-file text-4xl mb-3" />
+                        <p class="text-sm">Pré-visualização não disponível para este tipo de arquivo.</p>
+                        <p class="text-xs mt-1">Clique em "Baixar" para acessar o documento.</p>
+                    </div>
+                </div>
+
+                <!-- Footer -->
+                <div class="p-3 text-center text-xs text-gray-400 border-t border-gray-200">
+                    Compartilhado com segurança via AgênciaPSI
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
@@ -0,0 +1,523 @@
+<!--
+|--------------------------------------------------------------------------
+| Agência PSI
+|--------------------------------------------------------------------------
+| Criado e desenvolvido por Leonardo Nohama
+|
+| Tecnologia aplicada à escuta.
+| Estrutura para o cuidado.
+|
+| Arquivo: src/views/pages/saas/SaasDocumentTemplatesPage.vue
+| Data: 2026
+| Local: São Carlos/SP — Brasil
+|--------------------------------------------------------------------------
+| © 2026 — Todos os direitos reservados
+|--------------------------------------------------------------------------
+| Gestao de templates globais de documentos pelo SaaS admin.
+| Templates globais (is_global = true) ficam disponiveis para todos os tenants.
+|--------------------------------------------------------------------------
+-->
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { supabase } from '@/lib/supabase/client'
+import { useToast } from 'primevue/usetoast'
+import { useConfirm } from 'primevue/useconfirm'
+import { extractVariablesFromHtml, TEMPLATE_VARIABLES } from '@/services/DocumentTemplates.service'
+import JoditEmailEditor from '@/components/ui/JoditEmailEditor.vue'
+
+const toast = useToast()
+const confirm = useConfirm()
+
+// ── State ───────────────────────────────────────────────────
+
+const loading = ref(false)
+const rows = ref([])
+const q = ref('')
+
+const showDlg = ref(false)
+const saving = ref(false)
+const isEdit = ref(false)
+const activeTab = ref('editor')
+
+const TIPOS = [
+    { value: 'declaracao_comparecimento', label: 'Declaração de comparecimento' },
+    { value: 'atestado_psicologico', label: 'Atestado psicológico' },
+    { value: 'relatorio_acompanhamento', label: 'Relatório de acompanhamento' },
+    { value: 'recibo_pagamento', label: 'Recibo de pagamento' },
+    { value: 'termo_consentimento', label: 'Termo de consentimento (TCLE)' },
+    { value: 'encaminhamento', label: 'Encaminhamento' },
+    { value: 'contrato_servicos', label: 'Contrato de prestação de serviços' },
+    { value: 'tcle', label: 'TCLE' },
+    { value: 'autorizacao_menor', label: 'Autorização para menor' },
+    { value: 'laudo_psicologico', label: 'Laudo psicológico' },
+    { value: 'parecer_psicologico', label: 'Parecer psicológico' },
+    { value: 'termo_sigilo', label: 'Termo de sigilo' },
+    { value: 'declaracao_inicio_tratamento', label: 'Declaração de início de tratamento' },
+    { value: 'termo_alta', label: 'Termo de alta terapêutica' },
+    { value: 'tcle_online', label: 'Consentimento atendimento online' },
+    { value: 'outro', label: 'Outro' }
+]
+
+const form = ref(resetForm())
+
+function resetForm() {
+    return {
+        id: null,
+        nome_template: '',
+        tipo: 'outro',
+        descricao: '',
+        corpo_html: '',
+        cabecalho_html: '',
+        rodape_html: '',
+        variaveis: [],
+        logo_url: '',
+        ativo: true
+    }
+}
+
+// ── Filtro ───────────────────────────────────────────────────
+
+const filteredRows = computed(() => {
+    const term = String(q.value || '').trim().toLowerCase()
+    if (!term) return rows.value
+    return rows.value.filter(r =>
+        [r.nome_template, r.tipo, r.descricao].some(s =>
+            String(s || '').toLowerCase().includes(term)
+        )
+    )
+})
+
+// ── Fetch ───────────────────────────────────────────────────
+
+async function fetchAll() {
+    loading.value = true
+    try {
+        const { data, error } = await supabase
+            .from('document_templates')
+            .select('*')
+            .eq('is_global', true)
+            .order('nome_template', { ascending: true })
+
+        if (error) throw error
+        rows.value = data || []
+    } catch (e) {
+        toast.add({ severity: 'error', summary: 'Erro', detail: e?.message })
+    } finally {
+        loading.value = false
+    }
+}
+
+onMounted(fetchAll)
+
+// ── Dialog ──────────────────────────────────────────────────
+
+function openCreate() {
+    form.value = resetForm()
+    isEdit.value = false
+    activeTab.value = 'editor'
+    showDlg.value = true
+}
+
+function openEdit(row) {
+    form.value = {
+        id: row.id,
+        nome_template: row.nome_template || '',
+        tipo: row.tipo || 'outro',
+        descricao: row.descricao || '',
+        corpo_html: row.corpo_html || '',
+        cabecalho_html: row.cabecalho_html || '',
+        rodape_html: row.rodape_html || '',
+        variaveis: row.variaveis || [],
+        logo_url: row.logo_url || '',
+        ativo: row.ativo ?? true
+    }
+    isEdit.value = true
+    activeTab.value = 'editor'
+    showDlg.value = true
+}
+
+// ── Save ────────────────────────────────────────────────────
+
+async function save() {
+    const nome = String(form.value.nome_template || '').trim()
+    if (!nome) {
+        toast.add({ severity: 'warn', summary: 'Atenção', detail: 'Nome do template é obrigatório.' })
+        return
+    }
+
+    saving.value = true
+    try {
+        // Auto-extrair variaveis do HTML
+        const allHtml = (form.value.corpo_html || '') + (form.value.cabecalho_html || '') + (form.value.rodape_html || '')
+        const vars = extractVariablesFromHtml(allHtml)
+
+        const payload = {
+            nome_template: nome,
+            tipo: form.value.tipo || 'outro',
+            descricao: form.value.descricao || null,
+            corpo_html: form.value.corpo_html || '',
+            cabecalho_html: form.value.cabecalho_html || null,
+            rodape_html: form.value.rodape_html || null,
+            variaveis: vars,
+            logo_url: form.value.logo_url || null,
+            is_global: true,
+            ativo: form.value.ativo,
+            tenant_id: null,
+            owner_id: null
+        }
+
+        if (isEdit.value) {
+            const { error } = await supabase
+                .from('document_templates')
+                .update(payload)
+                .eq('id', form.value.id)
+
+            if (error) throw error
+            toast.add({ severity: 'success', summary: 'Salvo', detail: nome, life: 2000 })
+        } else {
+            const { error } = await supabase
+                .from('document_templates')
+                .insert(payload)
+
+            if (error) throw error
+            toast.add({ severity: 'success', summary: 'Criado', detail: nome, life: 2000 })
+        }
+
+        showDlg.value = false
+        fetchAll()
+    } catch (e) {
+        toast.add({ severity: 'error', summary: 'Erro', detail: e?.message })
+    } finally {
+        saving.value = false
+    }
+}
+
+// ── Toggle ativo ────────────────────────────────────────────
+
+async function toggleAtivo(row) {
+    try {
+        const { error } = await supabase
+            .from('document_templates')
+            .update({ ativo: !row.ativo })
+            .eq('id', row.id)
+
+        if (error) throw error
+        row.ativo = !row.ativo
+        toast.add({ severity: 'info', summary: row.ativo ? 'Ativado' : 'Desativado', detail: row.nome_template, life: 2000 })
+    } catch (e) {
+        toast.add({ severity: 'error', summary: 'Erro', detail: e?.message })
+    }
+}
+
+// ── Delete ──────────────────────────────────────────────────
+
+function onDelete(row) {
+    confirm.require({
+        message: `Excluir permanentemente "${row.nome_template}"? Essa ação não pode ser desfeita.`,
+        header: 'Excluir template global',
+        icon: 'pi pi-exclamation-triangle',
+        acceptClass: 'p-button-danger',
+        accept: async () => {
+            try {
+                const { error } = await supabase
+                    .from('document_templates')
+                    .delete()
+                    .eq('id', row.id)
+
+                if (error) throw error
+                rows.value = rows.value.filter(r => r.id !== row.id)
+                toast.add({ severity: 'success', summary: 'Excluído', life: 2000 })
+            } catch (e) {
+                toast.add({ severity: 'error', summary: 'Erro', detail: e?.message })
+            }
+        }
+    })
+}
+
+// ── Helpers ─────────────────────────────────────────────────
+
+function tipoLabel(tipo) {
+    return TIPOS.find(t => t.value === tipo)?.label || tipo
+}
+
+// ── Preview com dados ficticios ─────────────────────────────
+
+const SAMPLE = {
+    paciente_nome: 'Maria Silva Santos',
+    paciente_cpf: '123.456.789-00',
+    paciente_data_nascimento: '15/03/1990',
+    data_sessao: '28/03/2026',
+    hora_inicio: '14:00',
+    hora_fim: '14:50',
+    terapeuta_nome: 'Dr. João Oliveira',
+    terapeuta_crp: '06/12345',
+    clinica_nome: 'Clínica Exemplo',
+    clinica_endereco: 'Av. São Carlos, 500, Centro, São Carlos/SP',
+    clinica_telefone: '(16) 3333-1111',
+    clinica_cnpj: '12.345.678/0001-00',
+    valor: 'R$ 200,00',
+    valor_extenso: 'duzentos reais',
+    forma_pagamento: 'PIX',
+    data_atual: new Date().toLocaleDateString('pt-BR'),
+    data_atual_extenso: '29 de março de 2026',
+    cidade_estado: 'São Carlos/SP'
+}
+
+function previewReplace(html) {
+    return String(html || '').replace(/\{\{(\w+)\}\}/g, (m, k) =>
+        SAMPLE[k] !== undefined
+            ? `<span style="background:#fef3c7;padding:1px 4px;border-radius:3px;">${SAMPLE[k]}</span>`
+            : `<span style="background:#fee2e2;padding:1px 4px;border-radius:3px;">${m}</span>`
+    )
+}
+
+// ── Variaveis agrupadas ─────────────────────────────────────
+
+const variablesGrouped = computed(() => {
+    const groups = {}
+    for (const v of TEMPLATE_VARIABLES) {
+        if (!groups[v.grupo]) groups[v.grupo] = []
+        groups[v.grupo].push(v)
+    }
+    return groups
+})
+
+const cursorField = ref('corpo_html')
+const editorCabecalho = ref(null)
+const editorCorpo = ref(null)
+const editorRodape = ref(null)
+
+function insertVariable(key) {
+    const tag = `{{${key}}}`
+    const editorMap = {
+        cabecalho_html: editorCabecalho,
+        corpo_html: editorCorpo,
+        rodape_html: editorRodape
+    }
+    const editorRef = editorMap[cursorField.value]
+    if (editorRef?.value?.insertHTML) {
+        editorRef.value.insertHTML(tag)
+    } else {
+        form.value[cursorField.value] = (form.value[cursorField.value] || '') + tag
+    }
+}
+</script>
+
+<template>
+    <div class="px-4 py-6 max-w-[1200px] mx-auto">
+
+        <!-- Header -->
+        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-6">
+            <div>
+                <h1 class="text-xl font-bold">Templates de Documentos</h1>
+                <p class="text-sm text-[var(--text-color-secondary)]">
+                    Templates globais disponíveis para todos os tenants (is_global = true)
+                </p>
+            </div>
+            <div class="flex items-center gap-2">
+                <Button label="Novo template" icon="pi pi-plus" size="small" @click="openCreate" />
+                <Button icon="pi pi-refresh" text rounded size="small" @click="fetchAll" :loading="loading" />
+            </div>
+        </div>
+
+        <!-- Busca -->
+        <div class="mb-4">
+            <IconField>
+                <InputIcon class="pi pi-search" />
+                <InputText v-model="q" placeholder="Buscar template..." class="!w-[300px]" size="small" />
+            </IconField>
+        </div>
+
+        <!-- Loading -->
+        <div v-if="loading" class="flex items-center justify-center py-16">
+            <i class="pi pi-spinner pi-spin text-2xl text-[var(--text-color-secondary)]" />
+        </div>
+
+        <!-- Table -->
+        <DataTable
+            v-else
+            :value="filteredRows"
+            stripedRows
+            responsiveLayout="scroll"
+            class="text-sm"
+            :rowClass="(r) => !r.ativo ? 'opacity-50' : ''"
+        >
+            <template #empty>
+                <div class="text-center py-8 text-[var(--text-color-secondary)]">Nenhum template global cadastrado.</div>
+            </template>
+
+            <Column field="nome_template" header="Nome" sortable style="min-width: 200px">
+                <template #body="{ data }">
+                    <div class="flex items-center gap-2">
+                        <i class="pi pi-file text-primary" />
+                        <span class="font-medium">{{ data.nome_template }}</span>
+                    </div>
+                </template>
+            </Column>
+
+            <Column field="tipo" header="Tipo" sortable style="min-width: 180px">
+                <template #body="{ data }">
+                    <Tag :value="tipoLabel(data.tipo)" severity="info" class="text-xs" />
+                </template>
+            </Column>
+
+            <Column field="variaveis" header="Variáveis" style="min-width: 100px">
+                <template #body="{ data }">
+                    <span class="text-xs text-[var(--text-color-secondary)]">{{ data.variaveis?.length || 0 }}</span>
+                </template>
+            </Column>
+
+            <Column field="ativo" header="Status" style="width: 100px" bodyClass="text-center">
+                <template #body="{ data }">
+                    <Tag
+                        :value="data.ativo ? 'Ativo' : 'Inativo'"
+                        :severity="data.ativo ? 'success' : 'danger'"
+                        class="text-xs cursor-pointer"
+                        @click="toggleAtivo(data)"
+                    />
+                </template>
+            </Column>
+
+            <Column header="Ações" style="width: 120px" bodyClass="text-center">
+                <template #body="{ data }">
+                    <div class="flex items-center justify-center gap-1">
+                        <Button icon="pi pi-pencil" text rounded size="small" @click="openEdit(data)" v-tooltip.top="'Editar'" />
+                        <Button icon="pi pi-trash" text rounded size="small" severity="danger" @click="onDelete(data)" v-tooltip.top="'Excluir'" />
+                    </div>
+                </template>
+            </Column>
+        </DataTable>
+
+        <!-- Dialog Create/Edit -->
+        <Dialog
+            v-model:visible="showDlg"
+            modal
+            maximizable
+            :draggable="false"
+            :closable="!saving"
+            :dismissableMask="!saving"
+            class="w-[65rem]"
+            :breakpoints="{ '1199px': '95vw', '768px': '98vw' }"
+            :pt="{
+                header:  { class: '!p-4 !rounded-t-xl border-b border-[var(--surface-border)]' },
+                content: { class: '!p-4' },
+                footer:  { class: '!p-3 !rounded-b-xl border-t border-[var(--surface-border)]' }
+            }"
+            pt:mask:class="backdrop-blur-xs"
+        >
+            <template #header>
+                <div class="flex items-center gap-3">
+                    <span class="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10">
+                        <i class="pi pi-file-edit text-primary" />
+                    </span>
+                    <div>
+                        <div class="text-base font-semibold">{{ isEdit ? 'Editar' : 'Novo' }} template global</div>
+                        <div class="text-xs text-[var(--text-color-secondary)]">Visível para todos os tenants</div>
+                    </div>
+                </div>
+            </template>
+
+            <div class="flex flex-col gap-4">
+                <!-- Nome e tipo -->
+                <div class="grid grid-cols-1 sm:grid-cols-[1fr_200px] gap-3">
+                    <div class="flex flex-col gap-1">
+                        <label class="text-xs font-medium text-[var(--text-color-secondary)]">Nome do template</label>
+                        <InputText v-model="form.nome_template" placeholder="Ex: Declaração de comparecimento" class="w-full" />
+                    </div>
+                    <div class="flex flex-col gap-1">
+                        <label class="text-xs font-medium text-[var(--text-color-secondary)]">Tipo</label>
+                        <Select v-model="form.tipo" :options="TIPOS" optionLabel="label" optionValue="value" class="w-full" />
+                    </div>
+                </div>
+
+                <div class="grid grid-cols-1 sm:grid-cols-[1fr_100px] gap-3">
+                    <div class="flex flex-col gap-1">
+                        <label class="text-xs font-medium text-[var(--text-color-secondary)]">Descrição</label>
+                        <InputText v-model="form.descricao" placeholder="Breve descrição" class="w-full" />
+                    </div>
+                    <div class="flex flex-col gap-1">
+                        <label class="text-xs font-medium text-[var(--text-color-secondary)]">Status</label>
+                        <Select v-model="form.ativo" :options="[{ value: true, label: 'Ativo' }, { value: false, label: 'Inativo' }]" optionLabel="label" optionValue="value" class="w-full" />
+                    </div>
+                </div>
+
+                <!-- Tabs -->
+                <div class="flex items-center gap-1 border-b border-[var(--surface-border)]">
+                    <button
+                        class="px-3 py-2 text-sm font-medium border-b-2 transition-colors"
+                        :class="activeTab === 'editor' ? 'border-primary text-primary' : 'border-transparent text-[var(--text-color-secondary)]'"
+                        @click="activeTab = 'editor'"
+                    >Editor</button>
+                    <button
+                        class="px-3 py-2 text-sm font-medium border-b-2 transition-colors"
+                        :class="activeTab === 'preview' ? 'border-primary text-primary' : 'border-transparent text-[var(--text-color-secondary)]'"
+                        @click="activeTab = 'preview'"
+                    >Preview</button>
+                </div>
+
+                <!-- Editor -->
+                <div v-show="activeTab === 'editor'" class="flex flex-col lg:flex-row gap-4">
+                    <div class="flex-1 flex flex-col gap-3">
+                        <div class="flex flex-col gap-1" @focusin="cursorField = 'cabecalho_html'">
+                            <label class="text-xs font-medium text-[var(--text-color-secondary)]">Cabeçalho</label>
+                            <JoditEmailEditor ref="editorCabecalho" v-model="form.cabecalho_html" :minHeight="120" layoutButtons :logoUrl="form.logo_url" />
+                        </div>
+                        <div class="flex flex-col gap-1" @focusin="cursorField = 'corpo_html'">
+                            <label class="text-xs font-medium text-[var(--text-color-secondary)]">Corpo do documento</label>
+                            <JoditEmailEditor ref="editorCorpo" v-model="form.corpo_html" :minHeight="350" />
+                        </div>
+                        <div class="flex flex-col gap-1" @focusin="cursorField = 'rodape_html'">
+                            <label class="text-xs font-medium text-[var(--text-color-secondary)]">Rodapé</label>
+                            <JoditEmailEditor ref="editorRodape" v-model="form.rodape_html" :minHeight="120" layoutButtons :logoUrl="form.logo_url" />
+                        </div>
+                        <div class="flex flex-col gap-1">
+                            <label class="text-xs font-medium text-[var(--text-color-secondary)]">URL do logo (opcional)</label>
+                            <InputText v-model="form.logo_url" placeholder="https://..." class="w-full" />
+                        </div>
+                    </div>
+
+                    <!-- Painel de variaveis -->
+                    <div class="w-full lg:w-[200px] flex-shrink-0">
+                        <div class="sticky top-0">
+                            <div class="text-xs font-semibold uppercase tracking-wider text-[var(--text-color-secondary)] mb-1">Variáveis</div>
+                            <div class="text-[0.6rem] text-[var(--text-color-secondary)] mb-2">Clique para inserir</div>
+                            <div class="flex flex-col gap-2.5 max-h-[500px] overflow-y-auto pr-1">
+                                <div v-for="(vars, grupo) in variablesGrouped" :key="grupo">
+                                    <div class="text-[0.6rem] font-semibold uppercase tracking-wider text-[var(--text-color-secondary)] mb-0.5">{{ grupo }}</div>
+                                    <div class="flex flex-col">
+                                        <button
+                                            v-for="v in vars"
+                                            :key="v.key"
+                                            class="text-left text-xs px-1.5 py-0.5 rounded hover:bg-primary/10 hover:text-primary transition-colors truncate"
+                                            @click="insertVariable(v.key)"
+                                        >
+                                            {{ v.label }}
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Preview -->
+                <div v-show="activeTab === 'preview'" class="border border-[var(--surface-border)] rounded-lg bg-white overflow-hidden">
+                    <div class="p-6 text-black" style="font-family: 'Segoe UI', Arial, sans-serif; font-size: 12pt; line-height: 1.6;">
+                        <div v-if="form.cabecalho_html" class="text-center mb-4 pb-3 border-b border-gray-300" v-html="previewReplace(form.cabecalho_html)" />
+                        <div class="min-h-[300px]" v-html="previewReplace(form.corpo_html)" />
+                        <div v-if="form.rodape_html" class="mt-8 pt-3 border-t border-gray-300 text-center text-[10pt] text-gray-500" v-html="previewReplace(form.rodape_html)" />
+                    </div>
+                </div>
+            </div>
+
+            <template #footer>
+                <div class="flex items-center justify-end gap-2">
+                    <Button label="Cancelar" text @click="showDlg = false" :disabled="saving" />
+                    <Button :label="isEdit ? 'Salvar' : 'Criar'" icon="pi pi-check" :loading="saving" @click="save" />
+                </div>
+            </template>
+        </Dialog>
+
+        <ConfirmDialog />
+    </div>
+</template>
@@ -256,7 +256,7 @@ onBeforeUnmount(() => {
    <ConfirmDialog />

    <!-- Sentinel -->
-    <div ref="heroSentinelRef" class="h-px" />
+    <div ref="heroSentinelRef" class="p-2" />

    <!-- Hero sticky -->
    <div ref="heroEl" class="sticky mx-3 md:mx-4 mb-4 z-20 overflow-hidden rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-5" :style="{ top: 'var(--layout-sticky-top, 56px)' }">
@@ -417,7 +417,7 @@ onBeforeUnmount(() => {
    <ConfirmDialog />

    <!-- Sentinel -->
-    <div ref="heroSentinelRef" class="h-px" />
+    <div ref="heroSentinelRef" class="p-2" />

    <!-- Hero sticky -->
    <div ref="heroEl" class="sticky mx-3 md:mx-4 mb-4 z-20 overflow-hidden rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-5" :style="{ top: 'var(--layout-sticky-top, 56px)' }">
@@ -350,7 +350,7 @@ onBeforeUnmount(() => {
    <ConfirmDialog />

    <!-- Sentinel -->
-    <div ref="heroSentinelRef" class="h-px" />
+    <div ref="heroSentinelRef" class="p-2" />

    <!-- Hero sticky -->
    <div ref="heroEl" class="sticky mx-3 md:mx-4 mb-4 z-20 overflow-hidden rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-5" :style="{ top: 'var(--layout-sticky-top, 56px)' }">
@@ -433,7 +433,7 @@ onBeforeUnmount(() => {
    <ConfirmDialog />

    <!-- Sentinel -->
-    <div ref="heroSentinelRef" class="h-px" />
+    <div ref="heroSentinelRef" class="p-2" />

    <!-- Hero sticky -->
    <div ref="heroEl" class="sticky mx-3 md:mx-4 mb-4 z-20 overflow-hidden rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-5" :style="{ top: 'var(--layout-sticky-top, 56px)' }">
@@ -451,7 +451,7 @@ onBeforeUnmount(() => {
    <ConfirmDialog />

    <!-- Sentinel -->
-    <div ref="heroSentinelRef" class="h-px" />
+    <div ref="heroSentinelRef" class="p-2" />

    <!-- Hero sticky -->
    <div ref="heroEl" class="sticky mx-3 md:mx-4 mb-4 z-20 overflow-hidden rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-5" :style="{ top: 'var(--layout-sticky-top, 56px)' }">
@@ -612,7 +612,7 @@ onBeforeUnmount(() => {
    <ConfirmDialog />

    <!-- Sentinel -->
-    <div ref="heroSentinelRef" class="h-px" />
+    <div ref="heroSentinelRef" class="p-2" />

    <!-- Hero sticky -->
    <div ref="heroEl" class="sticky mx-3 md:mx-4 mb-4 z-20 overflow-hidden rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-5" :style="{ top: 'var(--layout-sticky-top, 56px)' }">