CRM WhatsApp Grupo 3 completo + Marco A/B (Asaas) + admin SaaS + refactors polimórficos

Sessão 11+: fechamento do CRM de WhatsApp com dois providers (Evolution/Twilio),
sistema de créditos com Asaas/PIX, polimorfismo de telefones/emails, e integração
admin SaaS no /saas/addons existente.

═══════════════════════════════════════════════════════════════════════════
GRUPO 3 — WORKFLOW / CRM (completo)
═══════════════════════════════════════════════════════════════════════════

3.1 Tags · migration conversation_tags + seed de 5 system tags · composable
useConversationTags.js · popover + pills no drawer e nos cards do Kanban.

3.2 Atribuição de conversa a terapeuta · migration 20260421000012 com PK
(tenant_id, thread_key), UPSERT, RLS que valida assignee como membro ativo
do mesmo tenant · view conversation_threads expandida com assigned_to +
assigned_at · composable useConversationAssignment.js · drawer com Select
filtrável + botão "Assumir" · inbox com filtro aside (Todas/Minhas/Não
atribuídas) e chip do responsável em cada card (destaca "Eu" em azul).

3.3 Notas internas · migration conversation_notes · composable + seção
colapsável no drawer · apenas o criador pode editar/apagar (RLS).

3.5 Converter desconhecido em paciente · botão + dialog quick-cadastro ·
"Vincular existente" com Select filter de até 500 pacientes · cria
telefone WhatsApp (vinculado) via upsertWhatsappForExisting.

3.6 Histórico de conversa no prontuário · nova aba "Conversas" em
PatientProntuario.vue · PatientConversationsTab.vue com stats (total /
recebidas / enviadas / primeira / última), SelectButton de filtro, timeline
com bolhas por direção, mídia inline (imagem/áudio/vídeo/doc via signed
URL), indicadores ✓ ✓✓ de delivery, botão "Abrir no CRM".

═══════════════════════════════════════════════════════════════════════════
MARCO A — UNIFICAÇÃO WHATSAPP (dois providers mutuamente exclusivos)
═══════════════════════════════════════════════════════════════════════════

- Página chooser ConfiguracoesWhatsappChooserPage.vue com 2 cards (Pessoal/
  Oficial), deactivate via edge function deactivate-notification-channel
- send-whatsapp-message refatorada com roteamento por provider; Twilio deduz
  1 crédito antes do envio e refunda em falha
- Paridade Twilio (novo): módulo compartilhado supabase/functions/_shared/
  whatsapp-hooks.ts com lógica provider-agnóstica (opt-in, opt-out, auto-
  reply, schedule helpers em TZ São Paulo, makeTwilioCreditedSendFn que
  envolve envio em dedução atômica + rollback). Consumido por Evolution E
  Twilio inbound. Evolution refatorado (~290 linhas duplicadas removidas).
- Bucket privado whatsapp-media · decrypt via Evolution getBase64From
  MediaMessage · upload com path tenant/yyyy/mm · signed URLs on-demand

═══════════════════════════════════════════════════════════════════════════
MARCO B — SISTEMA DE CRÉDITOS WHATSAPP + ASAAS
═══════════════════════════════════════════════════════════════════════════

Banco:
- Migration 20260421000007_whatsapp_credits (4 tabelas: balance,
  transactions, packages, purchases) + RPCs add_whatsapp_credits e
  deduct_whatsapp_credits (atômicas com SELECT FOR UPDATE)
- Migration 20260421000013_tenant_cpf_cnpj (coluna em tenants com CHECK
  de 11 ou 14 dígitos)

Edge functions:
- create-whatsapp-credit-charge · Asaas v3 (sandbox + prod) · PIX com
  QR code · getOrCreateAsaasCustomer patcha customer existente com CPF
  quando está faltando
- asaas-webhook · recebe PAYMENT_RECEIVED/CONFIRMED e credita balance

Frontend (tenant):
- Página /configuracoes/creditos-whatsapp com saldo + loja + histórico
- Dialog de confirmação com CPF/CNPJ (validação via isValidCPF/CNPJ de
  utils/validators, formatação on-blur, pré-fill de tenants.cpf_cnpj,
  persiste no primeiro uso) · fallback sandbox 24971563792 REMOVIDO
- Composable useWhatsappCredits extrai erros amigáveis via
  error.context.json()

Frontend (SaaS admin):
- Em /saas/addons (reuso do pattern existente, não criou página paralela):
  - Aba 4 "Pacotes WhatsApp" — CRUD whatsapp_credit_packages com DataTable,
    toggle is_active inline, dialog de edição com validação
  - Aba 5 "Topup WhatsApp" — tenant Select com saldo ao vivo · RPC
    add_whatsapp_credits com p_admin_id = auth.uid() (auditoria) · histórico
    das últimas 20 transações topup/adjustment/refund

═══════════════════════════════════════════════════════════════════════════
GRUPO 2 — AUTOMAÇÃO
═══════════════════════════════════════════════════════════════════════════

2.3 Auto-reply · conversation_autoreply_settings + conversation_autoreply_
log · 3 modos de schedule (agenda das regras semanais, business_hours
custom, custom_window) · cooldown por thread · respeita opt-out · agora
funciona em Evolution E Twilio (hooks compartilhados)

2.4 Lembretes de sessão · conversation_session_reminders_settings +
_logs · edge send-session-reminders (cron) · janelas 24h e 2h antes ·
Twilio deduz crédito com rollback em falha

═══════════════════════════════════════════════════════════════════════════
GRUPO 5 — COMPLIANCE (LGPD Art. 18 §2)
═══════════════════════════════════════════════════════════════════════════

5.2 Opt-out · conversation_optouts + conversation_optout_keywords (10 system
seed + custom por tenant) · detecção por regex word-boundary e normalização
(lowercase + strip acentos + pontuação) · ack automático (deduz crédito em
Twilio) · opt-in via "voltar", "retornar", "reativar", "restart" ·
página /configuracoes/conversas-optouts com CRUD de keywords

═══════════════════════════════════════════════════════════════════════════
REFACTOR POLIMÓRFICO — TELEFONES + EMAILS
═══════════════════════════════════════════════════════════════════════════

- contact_types + contact_phones (entity_type + entity_id) — migration
  20260421000008 · contact_email_types + contact_emails — 20260421000011
- Componentes ContactPhonesEditor.vue e ContactEmailsEditor.vue (add/edit/
  remove com confirm, primary selector, WhatsApp linked badge)
- Composables useContactPhones.js + useContactEmails.js com
  unsetOtherPrimaries() e validação
- Trocado em PatientsCadastroPage.vue e MedicosPage.vue (removidos campos
  legados telefone/telefone_alternativo e email_principal/email_alternativo)
- Migration retroativa v2 (20260421000010) detecta conversation_messages
  e cria/atualiza phone como WhatsApp vinculado

═══════════════════════════════════════════════════════════════════════════
POLIMENTO VISUAL + INFRA
═══════════════════════════════════════════════════════════════════════════

- Skeletons simplificados no dashboard do terapeuta
- Animações fade-up com stagger via [--delay:Xms] (fix specificity sobre
  .dash-card box-shadow transition)
- ConfirmDialog com group="conversation-drawer" (evita montagem duplicada)
- Image preview PrimeVue com botão de download injetado via MutationObserver
  (fetch + blob para funcionar cross-origin)
- Áudio/vídeo com preload="metadata" e controles de velocidade do browser
- friendlySendError() mapeia códigos do edge pra mensagens pt-BR via
  error.context.json()
- Teleport #cfg-page-actions para ações globais de Configurações
- Brotli/Gzip + auto-import Vue/PrimeVue + bundle analyzer
- AppLayout consolidado (removidas duplicatas por área) + RouterPassthrough
- Removido console.trace debug que estava em watch de router e queries
  Supabase (degradava perf pra todos)
- Realtime em conversation_messages via publication supabase_realtime
- Notifier global flutuante com beep + toggle mute (4 camadas: badge +
  sino + popup + browser notification)

═══════════════════════════════════════════════════════════════════════════
MIGRATIONS NOVAS (13)
═══════════════════════════════════════════════════════════════════════════

20260420000001_patient_intake_invite_info_rpc
20260420000002_audit_logs_lgpd
20260420000003_audit_logs_unified_view
20260420000004_lgpd_export_patient_rpc
20260420000005_conversation_messages
20260420000005_search_global_rpc
20260420000006_conv_messages_notifications
20260420000007_notif_channels_saas_admin_insert
20260420000008_conv_messages_realtime
20260420000009_conv_messages_delivery_status
20260421000001_whatsapp_media_bucket
20260421000002_conversation_notes
20260421000003_conversation_tags
20260421000004_conversation_autoreply
20260421000005_conversation_optouts
20260421000006_session_reminders
20260421000007_whatsapp_credits
20260421000008_contact_phones
20260421000009_retroactive_whatsapp_link
20260421000010_retroactive_whatsapp_link_v2
20260421000011_contact_emails
20260421000012_conversation_assignments
20260421000013_tenant_cpf_cnpj

═══════════════════════════════════════════════════════════════════════════
EDGE FUNCTIONS NOVAS / MODIFICADAS
═══════════════════════════════════════════════════════════════════════════

Novas:
- _shared/whatsapp-hooks.ts (módulo compartilhado)
- asaas-webhook
- create-whatsapp-credit-charge
- deactivate-notification-channel
- evolution-webhook-provision
- evolution-whatsapp-inbound
- get-intake-invite-info
- notification-webhook
- send-session-reminders
- send-whatsapp-message
- submit-patient-intake
- twilio-whatsapp-inbound

═══════════════════════════════════════════════════════════════════════════
FRONTEND — RESUMO
═══════════════════════════════════════════════════════════════════════════

Composables novos: useAddonExtrato, useAuditoria, useAutoReplySettings,
useClinicKPIs, useContactEmails, useContactPhones, useConversationAssignment,
useConversationNotes, useConversationOptouts, useConversationTags,
useConversations, useLgpdExport, useSessionReminders, useWhatsappCredits

Stores: conversationDrawerStore

Componentes novos: ConversationDrawer, GlobalInboundNotifier, GlobalSearch,
ContactEmailsEditor, ContactPhonesEditor

Páginas novas: CRMConversasPage, PatientConversationsTab, AddonsExtratoPage,
AuditoriaPage, NotificationsHistoryPage, ConfiguracoesWhatsappChooserPage,
ConfiguracoesConversasAutoreplyPage, ConfiguracoesConversasOptoutsPage,
ConfiguracoesConversasTagsPage, ConfiguracoesCreditosWhatsappPage,
ConfiguracoesLembretesSessaoPage

Utils novos: addonExtratoExport, auditoriaExport, excelExport,
lgpdExportFormats

Páginas existentes alteradas: ClinicDashboard, PatientsCadastroPage,
PatientCadastroDialog, PatientsListPage, MedicosPage, PatientProntuario,
ConfiguracoesWhatsappPage, SaasWhatsappPage, ConfiguracoesRecursosExtrasPage,
ConfiguracoesPage, AgendaTerapeutaPage, AgendaClinicaPage, NotificationItem,
NotificationDrawer, AppLayout, AppTopbar, useMenuBadges,
patientsRepository, SaasAddonsPage (aba 4 + 5 WhatsApp)

Routes: routes.clinic, routes.configs, routes.therapist atualizados
Menus: clinic.menu, therapist.menu, saas.menu atualizados

═══════════════════════════════════════════════════════════════════════════
NOTAS

- Após subir, rodar supabase functions serve --no-verify-jwt
  --env-file supabase/functions/.env pra carregar o módulo _shared
- WHATSAPP_SETUP.md reescrito (~400 linhas) com setup completo dos 3
  providers + troubleshooting + LGPD
- HANDOFF.md atualizado com estado atual e próximos passos

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/features/documents/DocumentsListPage.vue

@@ -15,7 +15,7 @@
 |--------------------------------------------------------------------------
 -->
 <script setup>
-import { ref, computed, onMounted, watch } from 'vue'
+import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useToast } from 'primevue/usetoast'
 import { useConfirm } from 'primevue/useconfirm'
@@ -75,14 +75,32 @@ const mobileMenuItems = computed(() => [
 // ── Hero sticky ─────────────────────────────────────────────
 
 const headerEl = ref(null)
+const headerSentinelRef = ref(null)
 const headerStuck = ref(false)
+let _observer = null
+
+// ── Mobile dialogs ──────────────────────────────────────────
+
+const filtersDlgOpen = ref(false)
 
 // ── Lifecycle ───────────────────────────────────────────────
 
 onMounted(async () => {
+    if (!props.embedded) {
+        const rootMargin = `${document.querySelector('.l2-main') ? '0px' : '-56px'} 0px 0px 0px`
+        _observer = new IntersectionObserver(
+            ([entry]) => { headerStuck.value = !entry.isIntersecting },
+            { threshold: 0, rootMargin }
+        )
+        if (headerSentinelRef.value) _observer.observe(headerSentinelRef.value)
+    }
     await Promise.all([fetchDocuments(), fetchUsedTags()])
 })
 
+onBeforeUnmount(() => {
+    _observer?.disconnect()
+})
+
 // ── Acoes ───────────────────────────────────────────────────
 
 async function onUploaded({ file, meta }) {
@@ -158,220 +176,204 @@ watch(filters, () => fetchDocuments(), { deep: true })
 </script>
 
 <template>
-    <div :class="embedded ? '' : 'px-4 py-6 max-w-[1200px] mx-auto'">
-
-        <!-- Hero header -->
-        <div
-            v-if="!embedded"
-            ref="headerEl"
-            class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-6"
-        >
-            <div>
-                <h1 class="text-xl font-bold">Documentos</h1>
-                <p class="text-sm text-[var(--text-color-secondary)]">
-                    {{ resolvedPatientId ? patientName || 'Paciente' : 'Todos os pacientes' }}
-                </p>
-            </div>
-
-            <!-- Desktop actions -->
-            <div class="hidden sm:flex items-center gap-2">
-                <Button
-                    label="Gerar documento"
-                    icon="pi pi-file-pdf"
-                    outlined
-                    size="small"
-                    @click="generateDlg = true"
-                    :disabled="!resolvedPatientId"
-                />
-                <Button
-                    label="Upload"
-                    icon="pi pi-upload"
-                    size="small"
-                    @click="uploadDlg = true"
-                    :disabled="!resolvedPatientId"
-                />
-            </div>
-
-            <!-- Mobile menu -->
-            <div class="sm:hidden">
-                <Button icon="pi pi-ellipsis-v" text rounded @click="mobileMenuRef.toggle($event)" />
-                <Menu ref="mobileMenuRef" :model="mobileMenuItems" :popup="true" />
-            </div>
-        </div>
-
-        <!-- Embedded header (dentro do prontuario) -->
-        <div v-else class="flex items-center justify-between gap-2 mb-4">
+    <!-- ══════════════════════════════════════════════════════════════
+         EMBEDDED MODE — dentro do prontuário (sem hero, layout compacto)
+       ══════════════════════════════════════════════════════════════ -->
+    <div v-if="embedded">
+        <!-- Header compacto -->
+        <div class="flex items-center justify-between gap-2 mb-4">
             <span class="text-sm font-semibold text-[var(--text-color-secondary)] uppercase tracking-wider">Documentos</span>
             <div class="flex gap-1.5">
-                <Button
-                    icon="pi pi-file-pdf"
-                    text
-                    rounded
-                    size="small"
-                    v-tooltip.top="'Gerar documento'"
-                    @click="generateDlg = true"
-                />
-                <Button
-                    icon="pi pi-upload"
-                    text
-                    rounded
-                    size="small"
-                    v-tooltip.top="'Upload'"
-                    @click="uploadDlg = true"
-                />
+                <Button icon="pi pi-file-pdf" text rounded size="small" v-tooltip.top="'Gerar documento'" @click="generateDlg = true" />
+                <Button icon="pi pi-upload" text rounded size="small" v-tooltip.top="'Upload'" @click="uploadDlg = true" />
             </div>
         </div>
 
-        <!-- Quick stats -->
-        <div v-if="!embedded && documents.length" class="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-5">
-            <div class="flex flex-col items-center p-3 rounded-lg bg-[var(--surface-ground)] border border-[var(--surface-border)]">
-                <span class="text-lg font-bold">{{ stats.total }}</span>
-                <span class="text-[0.65rem] text-[var(--text-color-secondary)] uppercase tracking-wider">Total</span>
-            </div>
-            <div class="flex flex-col items-center p-3 rounded-lg bg-[var(--surface-ground)] border border-[var(--surface-border)]">
-                <span class="text-lg font-bold">{{ formatSize(stats.tamanhoTotal) }}</span>
-                <span class="text-[0.65rem] text-[var(--text-color-secondary)] uppercase tracking-wider">Tamanho</span>
-            </div>
-            <div class="flex flex-col items-center p-3 rounded-lg bg-[var(--surface-ground)] border border-[var(--surface-border)]">
-                <span class="text-lg font-bold">{{ Object.keys(stats.porTipo).length }}</span>
-                <span class="text-[0.65rem] text-[var(--text-color-secondary)] uppercase tracking-wider">Tipos</span>
-            </div>
-            <div v-if="stats.pendentesRevisao" class="flex flex-col items-center p-3 rounded-lg bg-amber-500/5 border border-amber-500/20">
-                <span class="text-lg font-bold text-amber-600">{{ stats.pendentesRevisao }}</span>
-                <span class="text-[0.65rem] text-amber-600 uppercase tracking-wider">Pendentes</span>
-            </div>
-        </div>
-
-        <!-- Filtros -->
-        <div class="flex flex-wrap items-center gap-2 mb-4">
-            <IconField>
-                <InputIcon class="pi pi-search" />
-                <InputText
-                    v-model="filters.search"
-                    placeholder="Buscar..."
-                    class="!w-[200px]"
-                    size="small"
-                />
-            </IconField>
-
-            <Select
-                v-model="filters.tipo_documento"
-                :options="TIPOS_DOCUMENTO"
-                optionLabel="label"
-                optionValue="value"
-                placeholder="Tipo"
-                showClear
-                class="!w-[160px]"
-                size="small"
-            />
-
-            <Select
-                v-if="usedTags.length"
-                v-model="filters.tag"
-                :options="usedTags.map(t => ({ label: t, value: t }))"
-                optionLabel="label"
-                optionValue="value"
-                placeholder="Tag"
-                showClear
-                class="!w-[140px]"
-                size="small"
-            />
-
-            <Button
-                v-if="hasActiveFilter"
-                icon="pi pi-filter-slash"
-                text
-                rounded
-                size="small"
-                v-tooltip.top="'Limpar filtros'"
-                @click="clearFilters(); fetchDocuments()"
-            />
-        </div>
-
         <!-- Loading -->
-        <div v-if="loading" class="flex items-center justify-center py-16">
+        <div v-if="loading" class="flex items-center justify-center py-12">
             <i class="pi pi-spinner pi-spin text-2xl text-[var(--text-color-secondary)]" />
         </div>
 
         <!-- Empty -->
-        <div v-else-if="!documents.length" class="flex flex-col items-center justify-center py-16 text-[var(--text-color-secondary)]">
-            <i class="pi pi-inbox text-4xl opacity-30 mb-3" />
-            <div class="text-sm mb-1">
-                {{ hasActiveFilter ? 'Nenhum documento encontrado com esses filtros.' : 'Nenhum documento ainda.' }}
-            </div>
-            <Button
-                v-if="resolvedPatientId && !hasActiveFilter"
-                label="Enviar primeiro documento"
-                icon="pi pi-upload"
-                text
-                size="small"
-                class="mt-2"
-                @click="uploadDlg = true"
-            />
+        <div v-else-if="!documents.length" class="py-10 px-6 text-center">
+            <i class="pi pi-inbox text-2xl opacity-20 mb-2 block" />
+            <div class="font-semibold text-sm">Nenhum documento ainda</div>
+            <div class="text-xs opacity-60 mt-1">Faça upload do primeiro documento deste paciente</div>
+            <Button v-if="resolvedPatientId" label="Enviar documento" icon="pi pi-upload" severity="secondary" outlined size="small" class="rounded-full mt-3" @click="uploadDlg = true" />
         </div>
 
-        <!-- Lista de documentos -->
+        <!-- Lista -->
         <div v-else class="flex flex-col gap-2">
-            <DocumentCard
-                v-for="doc in documents"
-                :key="doc.id"
-                :doc="doc"
-                @preview="onPreview"
-                @download="onDownload"
-                @edit="onEdit"
-                @delete="onDelete"
-                @share="onShare"
-                @sign="onSign"
-            />
+            <DocumentCard v-for="doc in documents" :key="doc.id" :doc="doc" @preview="onPreview" @download="onDownload" @edit="onEdit" @delete="onDelete" @share="onShare" @sign="onSign" />
         </div>
 
         <!-- Error -->
-        <div v-if="error" class="mt-4 p-3 rounded-lg bg-red-500/5 border border-red-500/20 text-sm text-red-500">
+        <div v-if="error" class="mt-4 p-3 rounded-md bg-red-500/5 border border-red-500/20 text-sm text-red-500">
             <i class="pi pi-exclamation-circle mr-1" /> {{ error }}
         </div>
-
-        <!-- Dialogs -->
-        <DocumentUploadDialog
-            :visible="uploadDlg"
-            @update:visible="uploadDlg = $event"
-            :patientId="resolvedPatientId"
-            :patientName="patientName"
-            :usedTags="usedTags"
-            @uploaded="onUploaded"
-        />
-
-        <DocumentPreviewDialog
-            :visible="previewDlg"
-            @update:visible="previewDlg = $event"
-            :doc="selectedDoc"
-            :previewUrl="previewUrl"
-            @download="onDownload"
-            @edit="onEdit"
-            @delete="d => { previewDlg = false; onDelete(d) }"
-            @share="d => { previewDlg = false; onShare(d) }"
-            @sign="d => { previewDlg = false; onSign(d) }"
-        />
-
-        <DocumentGenerateDialog
-            :visible="generateDlg"
-            @update:visible="generateDlg = $event"
-            :patientId="resolvedPatientId"
-            :patientName="patientName"
-            @generated="onGenerated"
-        />
-
-        <DocumentSignatureDialog
-            :visible="signatureDlg"
-            @update:visible="signatureDlg = $event"
-            :doc="selectedDoc"
-        />
-
-        <DocumentShareDialog
-            :visible="shareDlg"
-            @update:visible="shareDlg = $event"
-            :doc="selectedDoc"
-        />
-
-        <ConfirmDialog />
     </div>
+
+    <!-- ══════════════════════════════════════════════════════════════
+         PÁGINA FULL — hero sticky + stats + lista em card
+       ══════════════════════════════════════════════════════════════ -->
+    <template v-else>
+        <!-- Sentinel -->
+        <div ref="headerSentinelRef" class="h-px" />
+
+        <!-- Hero sticky -->
+        <div
+            ref="headerEl"
+            class="sticky my-3 md:mx-4 z-20 overflow-hidden rounded-md border border-[var(--surface-border,#e2e8f0)] bg-[var(--surface-card,#fff)] px-3 py-2.5 transition-[border-radius] duration-200"
+            :class="{ 'rounded-tl-none rounded-tr-none': headerStuck }"
+            :style="{ top: 'var(--layout-sticky-top, 56px)' }"
+        >
+            <!-- Blobs decorativos -->
+            <div class="absolute inset-0 pointer-events-none overflow-hidden" aria-hidden="true">
+                <div class="absolute w-64 h-64 -top-16 -right-8 rounded-full blur-[60px] bg-indigo-500/10" />
+                <div class="absolute w-72 h-72 top-0 -left-16 rounded-full blur-[60px] bg-emerald-400/9" />
+            </div>
+
+            <div class="relative z-1 flex items-center gap-3">
+                <!-- Voltar + Brand -->
+                <div class="flex items-center gap-2 shrink-0">
+                    <Button v-if="resolvedPatientId" icon="pi pi-arrow-left" text severity="secondary" class="h-9 w-9 rounded-full shrink-0" v-tooltip.bottom="'Voltar'" @click="router.back()" />
+                    <div class="grid place-items-center w-9 h-9 rounded-md shrink-0 bg-indigo-500/10 text-indigo-500">
+                        <i class="pi pi-file text-base" />
+                    </div>
+                    <div class="min-w-0 hidden lg:block">
+                        <div class="text-[1rem] font-bold tracking-tight text-[var(--text-color)]">Documentos</div>
+                        <div class="text-[0.75rem] text-[var(--text-color-secondary)] truncate">
+                            {{ resolvedPatientId ? (patientName || 'Paciente') : 'Todos os pacientes' }}
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Ações desktop -->
+                <div class="hidden xl:flex items-center gap-1 shrink-0 ml-auto">
+                    <Button icon="pi pi-refresh" severity="secondary" outlined class="h-9 w-9 rounded-full" :loading="loading" v-tooltip.bottom="'Atualizar'" @click="fetchDocuments" />
+                    <Button label="Gerar" icon="pi pi-file-pdf" severity="secondary" outlined size="small" class="rounded-full" :disabled="!resolvedPatientId" @click="generateDlg = true" />
+                    <Button label="Upload" icon="pi pi-upload" size="small" class="rounded-full" :disabled="!resolvedPatientId" @click="uploadDlg = true" />
+                </div>
+
+                <!-- Mobile -->
+                <div class="flex xl:hidden items-center gap-1 shrink-0 ml-auto">
+                    <Button icon="pi pi-filter" severity="secondary" outlined class="h-9 w-9 rounded-full" v-tooltip.bottom="'Filtros'" @click="filtersDlgOpen = true" />
+                    <Button icon="pi pi-upload" class="h-9 w-9 rounded-full" :disabled="!resolvedPatientId" @click="uploadDlg = true" />
+                    <Button label="Ações" icon="pi pi-ellipsis-v" severity="secondary" size="small" class="rounded-full" @click="(e) => mobileMenuRef.toggle(e)" />
+                    <Menu ref="mobileMenuRef" :model="mobileMenuItems" :popup="true" />
+                </div>
+            </div>
+        </div>
+
+        <!-- Dialog filtros mobile -->
+        <Dialog v-model:visible="filtersDlgOpen" modal :draggable="false" pt:mask:class="backdrop-blur-xs" header="Filtros" class="w-[94vw] max-w-sm">
+            <div class="flex flex-col gap-3 pt-1">
+                <IconField>
+                    <InputIcon class="pi pi-search" />
+                    <InputText v-model="filters.search" placeholder="Buscar..." class="w-full" />
+                </IconField>
+                <Select v-model="filters.tipo_documento" :options="TIPOS_DOCUMENTO" optionLabel="label" optionValue="value" placeholder="Tipo" showClear class="w-full" />
+                <Select v-if="usedTags.length" v-model="filters.tag" :options="usedTags.map(t => ({ label: t, value: t }))" optionLabel="label" optionValue="value" placeholder="Tag" showClear class="w-full" />
+            </div>
+            <template #footer>
+                <Button v-if="hasActiveFilter" label="Limpar" icon="pi pi-filter-slash" severity="danger" outlined class="rounded-full mr-2" @click="clearFilters(); fetchDocuments()" />
+                <Button label="Fechar" severity="secondary" outlined class="rounded-full" @click="filtersDlgOpen = false" />
+            </template>
+        </Dialog>
+
+        <!-- Conteúdo -->
+        <div class="px-3 md:px-4 pb-8 flex flex-col gap-3 xl:gap-4">
+            <!-- Stats -->
+            <div v-if="documents.length" class="grid grid-cols-2 md:grid-cols-4 gap-2">
+                <div class="flex flex-col gap-0.5 px-4 py-2.5 rounded-md border border-[var(--surface-border,#e2e8f0)] bg-[var(--surface-card,#fff)]">
+                    <div class="text-[1.35rem] font-bold leading-none text-[var(--text-color)]">{{ stats.total }}</div>
+                    <div class="text-[1rem] text-[var(--text-color-secondary)] opacity-75 truncate">Total</div>
+                </div>
+                <div class="flex flex-col gap-0.5 px-4 py-2.5 rounded-md border border-[var(--surface-border,#e2e8f0)] bg-[var(--surface-card,#fff)]">
+                    <div class="text-[1.35rem] font-bold leading-none text-[var(--text-color)]">{{ formatSize(stats.tamanhoTotal) }}</div>
+                    <div class="text-[1rem] text-[var(--text-color-secondary)] opacity-75 truncate">Tamanho</div>
+                </div>
+                <div class="flex flex-col gap-0.5 px-4 py-2.5 rounded-md border border-[var(--surface-border,#e2e8f0)] bg-[var(--surface-card,#fff)]">
+                    <div class="text-[1.35rem] font-bold leading-none text-[var(--text-color)]">{{ Object.keys(stats.porTipo).length }}</div>
+                    <div class="text-[1rem] text-[var(--text-color-secondary)] opacity-75 truncate">Tipos</div>
+                </div>
+                <div class="flex flex-col gap-0.5 px-4 py-2.5 rounded-md border" :class="stats.pendentesRevisao ? 'border-amber-500/30 bg-amber-500/5' : 'border-[var(--surface-border,#e2e8f0)] bg-[var(--surface-card,#fff)]'">
+                    <div class="text-[1.35rem] font-bold leading-none" :class="stats.pendentesRevisao ? 'text-amber-600' : 'text-[var(--text-color)]'">{{ stats.pendentesRevisao || 0 }}</div>
+                    <div class="text-[1rem] opacity-75 truncate" :class="stats.pendentesRevisao ? 'text-amber-600' : 'text-[var(--text-color-secondary)]'">Pendentes</div>
+                </div>
+            </div>
+
+            <!-- Tabela (card) -->
+            <div class="rounded-md border border-[var(--surface-border,#e2e8f0)] bg-[var(--surface-card,#fff)] overflow-hidden">
+                <!-- Header da tabela -->
+                <div class="flex items-center justify-between gap-2 px-4 py-3 border-b border-[var(--surface-border,#e2e8f0)]">
+                    <div class="flex items-center gap-2 min-w-0">
+                        <i class="pi pi-list text-[var(--text-color-secondary)] opacity-60" />
+                        <span class="font-semibold text-sm">Documentos</span>
+                    </div>
+                    <span class="inline-flex items-center justify-center min-w-[22px] h-[22px] px-1.5 rounded-full bg-[var(--primary-color,#6366f1)] text-white text-[0.72rem] font-bold">{{ documents.length }}</span>
+                </div>
+
+                <!-- Filtros desktop -->
+                <div class="hidden md:flex flex-wrap items-center gap-2 px-4 py-3 border-b border-[var(--surface-border,#e2e8f0)] bg-[var(--surface-ground,#f8fafc)]/50">
+                    <IconField>
+                        <InputIcon class="pi pi-search" />
+                        <InputText v-model="filters.search" placeholder="Buscar..." class="!w-[200px]" size="small" />
+                    </IconField>
+                    <Select v-model="filters.tipo_documento" :options="TIPOS_DOCUMENTO" optionLabel="label" optionValue="value" placeholder="Tipo" showClear class="!w-[160px]" size="small" />
+                    <Select v-if="usedTags.length" v-model="filters.tag" :options="usedTags.map(t => ({ label: t, value: t }))" optionLabel="label" optionValue="value" placeholder="Tag" showClear class="!w-[140px]" size="small" />
+                    <Button v-if="hasActiveFilter" icon="pi pi-filter-slash" severity="danger" text rounded size="small" v-tooltip.top="'Limpar filtros'" @click="clearFilters(); fetchDocuments()" />
+                </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>
+
+                <!-- Empty -->
+                <div v-else-if="!documents.length" class="py-10 px-6 text-center">
+                    <i class="pi pi-inbox text-2xl opacity-20 mb-2 block" />
+                    <div class="font-semibold text-sm">
+                        {{ hasActiveFilter ? 'Nenhum documento encontrado' : 'Nenhum documento ainda' }}
+                    </div>
+                    <div class="text-xs opacity-60 mt-1">
+                        {{ hasActiveFilter ? 'Limpe os filtros ou ajuste a busca' : resolvedPatientId ? 'Faça upload do primeiro documento' : 'Selecione um paciente para adicionar documentos' }}
+                    </div>
+                    <Button v-if="resolvedPatientId && !hasActiveFilter" label="Enviar primeiro documento" icon="pi pi-upload" severity="secondary" outlined size="small" class="rounded-full mt-3" @click="uploadDlg = true" />
+                </div>
+
+                <!-- Lista -->
+                <div v-else class="flex flex-col gap-2 p-3">
+                    <DocumentCard v-for="doc in documents" :key="doc.id" :doc="doc" @preview="onPreview" @download="onDownload" @edit="onEdit" @delete="onDelete" @share="onShare" @sign="onSign" />
+                </div>
+            </div>
+
+            <!-- Error -->
+            <div v-if="error" class="p-3 rounded-md bg-red-500/5 border border-red-500/20 text-sm text-red-500">
+                <i class="pi pi-exclamation-circle mr-1" /> {{ error }}
+            </div>
+        </div>
+    </template>
+
+    <!-- ══════════════════════════════════════════════════════════════
+         Dialogs comuns (usados em ambos os modos)
+       ══════════════════════════════════════════════════════════════ -->
+    <DocumentUploadDialog :visible="uploadDlg" @update:visible="uploadDlg = $event" :patientId="resolvedPatientId" :patientName="patientName" :usedTags="usedTags" @uploaded="onUploaded" />
+
+    <DocumentPreviewDialog
+        :visible="previewDlg"
+        @update:visible="previewDlg = $event"
+        :doc="selectedDoc"
+        :previewUrl="previewUrl"
+        @download="onDownload"
+        @edit="onEdit"
+        @delete="d => { previewDlg = false; onDelete(d) }"
+        @share="d => { previewDlg = false; onShare(d) }"
+        @sign="d => { previewDlg = false; onSign(d) }"
+    />
+
+    <DocumentGenerateDialog :visible="generateDlg" @update:visible="generateDlg = $event" :patientId="resolvedPatientId" :patientName="patientName" @generated="onGenerated" />
+    <DocumentSignatureDialog :visible="signatureDlg" @update:visible="signatureDlg = $event" :doc="selectedDoc" />
+    <DocumentShareDialog :visible="shareDlg" @update:visible="shareDlg = $event" :doc="selectedDoc" />
+    <ConfirmDialog />
 </template>