Documentos + Templates + Relatorios nativas (so resta online-scheduling)

Promove '/melissa/documentos', '/melissa/documentos-templates' e
'/melissa/relatorios' do embed pra paginas nativas Melissa.

MelissaDocumentos (~700L):
- Sidebar com stats (Total / Tamanho / Tipos / Pendentes amber) +
  filtro Tipo (Select com TIPOS_DOCUMENTO 11 opcoes) + filtro Tag
  (Select dinamico com usedTags) + footer fixo Limpar filtros
- Main: toolbar busca + lista de DocumentCard (componente reusado)
- Modo "todos os pacientes" — patientId null. Upload/Gerar exigem
  abrir paciente especifico no prontuario (botoes nao aparecem).
- Dialogs reusados: PreviewDialog + SignatureDialog + ShareDialog +
  ConfirmDialog (delete).

MelissaDocumentosTemplates (~700L):
- Layout 1-col empilhado, 3 views: list / create / edit
- Header com botao "Novo template" (list) ou "Cancelar/Salvar"
  (create/edit) + back button
- 2 sections distintas: "Templates padrao do sistema" (info-blue,
  click duplica) e "Meus templates" (accent, click edita + menu de
  acoes Duplicar/Editar/Desativar)
- Cards em grid responsivo (auto-fill 280px), com badge "padrao"/
  "inativo" e count de variaveis
- DocumentTemplateEditor reusado pra create/edit
- ConfirmDialog reusado

MelissaRelatorios (~1100L):
- Sidebar com 6 stats (Total / Realizadas verde / Faltas red /
  Canceladas warn / Agendadas info / Taxa realizacao) + filtro
  Periodo (button list: semana/mes/3meses/6meses) + filtro Status
  (Realizadas/Faltas/Canceladas/Agendadas com cores) + footer
  Limpar filtros
- Main: card Grafico (Chart.js stacked bar agrupado por
  semana/mes) + card DataTable de sessoes filtradas (Data/Hora
  sortable / Paciente / Sessao / Modalidade / Status)
- Empty states distintos: sem sessoes no periodo / sem resultado
  do filtro

Logica preservada das paginas originais. Composables/services nao
foram tocados — apenas adaptacao do chrome pra blueprint Melissa.

DocumentsListPage / DocumentTemplatesPage / RelatoriosPage
continuam intactas no layout Rail (/therapist/*, /admin/*).

Wire-up MelissaLayout: imports + 3 render blocks + 'documentos',
'documentos-templates', 'relatorios' literais em NON_CONFIG_SLUGS;
removidos de MELISSA_EMBED_KEYS. Entries removidos do EMBED_MAP em
MelissaEmbed (resta apenas 'online-scheduling').

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

src/layout/melissa/MelissaDocumentos.vue

@@ -0,0 +1,703 @@
+<script setup>
+/*
+ * MelissaDocumentos — Página nativa Melissa pra listagem de documentos
+ * (substitui o embed via MelissaEmbed que duplicava headers).
+ *
+ * Aplica o blueprint melissa-table-page-blueprint.md:
+ *   - Sidebar com stats + filtros (Tipo / Tag) com Selects + footer
+ *     fixo "Limpar filtros"
+ *   - Main com toolbar (busca) + lista de DocumentCard preservada
+ *
+ * Modo "todos os pacientes" — patientId é null. Upload/gerar requer
+ * abrir um paciente específico via /melissa/pacientes (atualmente
+ * desabilitados aqui). Lista é read-only nesse contexto.
+ */
+import { ref, computed, onMounted, watch } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { useConfirm } from 'primevue/useconfirm';
+
+import { useDocuments } from '@/features/documents/composables/useDocuments';
+import DocumentCard from '@/features/documents/components/DocumentCard.vue';
+import DocumentPreviewDialog from '@/features/documents/components/DocumentPreviewDialog.vue';
+import DocumentSignatureDialog from '@/features/documents/components/DocumentSignatureDialog.vue';
+import DocumentShareDialog from '@/features/documents/components/DocumentShareDialog.vue';
+// Select/InputText/Skeleton/Button/Dialog: auto via PrimeVueResolver
+
+const emit = defineEmits(['close']);
+
+const toast = useToast();
+const confirm = useConfirm();
+
+// patientId = null → modo "todos os pacientes" (read-only).
+const patientId = computed(() => null);
+
+const {
+    documents, loading, error, filters, usedTags, stats,
+    TIPOS_DOCUMENTO,
+    fetchDocuments, remove,
+    download, getPreviewUrl, fetchUsedTags, clearFilters,
+    formatSize
+} = useDocuments(() => patientId.value);
+
+// ── Dialogs ────────────────────────────────────────────
+const previewDlg = ref(false);
+const signatureDlg = ref(false);
+const shareDlg = ref(false);
+const selectedDoc = ref(null);
+const previewUrl = ref('');
+
+// ── Filtros computeds ──────────────────────────────────
+const hasActiveFilter = computed(() =>
+    !!(filters.value.tipo_documento || filters.value.tag || filters.value.search)
+);
+
+function clearAllFilters() {
+    clearFilters();
+    fetchDocuments();
+}
+
+const tagOptions = computed(() =>
+    usedTags.value.map((t) => ({ label: t, value: t }))
+);
+
+// ── Acoes nas rows ─────────────────────────────────────
+async function onPreview(doc) {
+    selectedDoc.value = doc;
+    try {
+        previewUrl.value = await getPreviewUrl(doc);
+    } catch {
+        previewUrl.value = '';
+    }
+    previewDlg.value = true;
+}
+
+function onDownload(doc) {
+    download(doc);
+}
+
+function onEdit() {
+    toast.add({ severity: 'info', summary: 'Em breve', detail: 'Edição de metadados será implementada.', life: 2000 });
+}
+
+function onDelete(doc) {
+    confirm.require({
+        message: `Excluir "${doc.nome_original}"? O arquivo será retido por 5 anos conforme LGPD/CFP.`,
+        header: 'Confirmar exclusão',
+        icon: 'pi pi-exclamation-triangle',
+        acceptClass: 'p-button-danger',
+        accept: async () => {
+            try {
+                await remove(doc.id);
+                toast.add({ severity: 'success', summary: 'Excluído', detail: doc.nome_original, life: 2000 });
+            } catch (e) {
+                toast.add({ severity: 'error', summary: 'Erro', detail: e?.message });
+            }
+        }
+    });
+}
+
+function onShare(doc) {
+    selectedDoc.value = doc;
+    shareDlg.value = true;
+}
+
+function onSign(doc) {
+    selectedDoc.value = doc;
+    signatureDlg.value = true;
+}
+
+// ── Watch filtros (refetch automático) ─────────────────
+watch(filters, () => fetchDocuments(), { deep: true });
+
+onMounted(async () => {
+    await Promise.all([fetchDocuments(), fetchUsedTags()]);
+});
+</script>
+
+<template>
+    <ConfirmDialog />
+
+    <section class="md-page">
+        <header class="md-page__head">
+            <div class="md-page__title">
+                <i class="pi pi-file md-page__title-icon" />
+                <span>Documentos</span>
+                <span class="md-page__count">{{ documents.length }}</span>
+            </div>
+            <div class="md-page__actions">
+                <button
+                    class="md-head-btn"
+                    v-tooltip.bottom="'Atualizar'"
+                    :disabled="loading"
+                    @click="fetchDocuments"
+                >
+                    <i :class="loading ? 'pi pi-spin pi-spinner' : 'pi pi-refresh'" />
+                </button>
+                <button class="md-close" v-tooltip.bottom="'Voltar (Esc)'" @click="emit('close')">
+                    <i class="pi pi-times" />
+                </button>
+            </div>
+        </header>
+
+        <!-- Subheader -->
+        <div class="md-subheader">
+            <i class="pi pi-info-circle md-subheader__icon" />
+            <span class="md-subheader__text">
+                Documentos clínicos da clínica — laudos, receitas, exames, termos
+                assinados. Pra <strong>upload</strong> ou <strong>gerar</strong>
+                novos, abra o paciente específico no prontuário.
+            </span>
+        </div>
+
+        <div class="md-body">
+            <!-- ═══ COL 1: Stats + filtros ═══ -->
+            <aside class="md-side">
+                <div class="md-side__scroll">
+                    <!-- Stats -->
+                    <div class="md-w md-w--side">
+                        <div class="md-w__head">
+                            <span class="md-w__title"><i class="pi pi-chart-bar" /> Estatísticas</span>
+                        </div>
+                        <div class="md-stats">
+                            <div class="md-stat">
+                                <div class="md-stat__val">{{ stats.total }}</div>
+                                <div class="md-stat__lbl">Total</div>
+                            </div>
+                            <div class="md-stat">
+                                <div class="md-stat__val">{{ formatSize(stats.tamanhoTotal) }}</div>
+                                <div class="md-stat__lbl">Tamanho</div>
+                            </div>
+                            <div class="md-stat">
+                                <div class="md-stat__val">{{ Object.keys(stats.porTipo).length }}</div>
+                                <div class="md-stat__lbl">Tipos</div>
+                            </div>
+                            <div class="md-stat" :class="stats.pendentesRevisao ? 'is-warn' : ''">
+                                <div class="md-stat__val">{{ stats.pendentesRevisao || 0 }}</div>
+                                <div class="md-stat__lbl">Pendentes</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Filtro Tipo -->
+                    <div class="md-w md-w--side">
+                        <div class="md-w__head">
+                            <span class="md-w__title"><i class="pi pi-filter" /> Tipo</span>
+                            <button
+                                v-if="filters.tipo_documento"
+                                class="md-side__clear-inline"
+                                v-tooltip.top="'Limpar filtro de tipo'"
+                                @click="filters.tipo_documento = null"
+                            >
+                                <i class="pi pi-times" />
+                            </button>
+                        </div>
+                        <Select
+                            v-model="filters.tipo_documento"
+                            :options="TIPOS_DOCUMENTO"
+                            optionLabel="label"
+                            optionValue="value"
+                            placeholder="Todos os tipos"
+                            class="w-full md-side__select"
+                            showClear
+                        />
+                    </div>
+
+                    <!-- Filtro Tag -->
+                    <div v-if="usedTags.length" class="md-w md-w--side">
+                        <div class="md-w__head">
+                            <span class="md-w__title"><i class="pi pi-tag" /> Tag</span>
+                            <button
+                                v-if="filters.tag"
+                                class="md-side__clear-inline"
+                                v-tooltip.top="'Limpar filtro de tag'"
+                                @click="filters.tag = null"
+                            >
+                                <i class="pi pi-times" />
+                            </button>
+                        </div>
+                        <Select
+                            v-model="filters.tag"
+                            :options="tagOptions"
+                            optionLabel="label"
+                            optionValue="value"
+                            placeholder="Todas as tags"
+                            class="w-full md-side__select"
+                            showClear
+                        />
+                    </div>
+                </div>
+
+                <Transition name="md-clear">
+                    <div v-if="hasActiveFilter" class="md-side__footer">
+                        <button class="md-side__clear-all" @click="clearAllFilters">
+                            <i class="pi pi-filter-slash" />
+                            <span>Limpar filtros</span>
+                        </button>
+                    </div>
+                </Transition>
+            </aside>
+
+            <!-- ═══ COL 2: Lista ═══ -->
+            <div class="md-main">
+                <div class="md-toolbar">
+                    <div class="md-search">
+                        <i class="pi pi-search md-search__icon" />
+                        <input
+                            v-model="filters.search"
+                            type="text"
+                            placeholder="Buscar por nome, descrição ou tag…"
+                            class="md-search__input"
+                        />
+                        <button
+                            v-if="filters.search"
+                            class="md-search__clear"
+                            v-tooltip.bottom="'Limpar busca'"
+                            @click="filters.search = ''"
+                        >
+                            <i class="pi pi-times" />
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Erro -->
+                <div v-if="error" class="md-error">
+                    <i class="pi pi-exclamation-triangle" />
+                    <span>{{ error }}</span>
+                </div>
+
+                <!-- Lista -->
+                <div class="md-list">
+                    <!-- Loading -->
+                    <div v-if="loading" class="md-loading">
+                        <i class="pi pi-spin pi-spinner" />
+                        <span>Carregando documentos…</span>
+                    </div>
+
+                    <!-- Empty -->
+                    <div v-else-if="!documents.length" class="md-empty">
+                        <i :class="hasActiveFilter ? 'pi pi-filter-slash' : 'pi pi-folder-open'" class="md-empty__icon" />
+                        <div class="md-empty__title">
+                            {{ hasActiveFilter ? 'Nenhum documento encontrado' : 'Nenhum documento ainda' }}
+                        </div>
+                        <div class="md-empty__hint">
+                            {{ hasActiveFilter
+                                ? 'Limpe os filtros ou ajuste a busca pra ver outros resultados.'
+                                : 'Quando algum paciente tiver documentos cadastrados, eles aparecem aqui.' }}
+                        </div>
+                    </div>
+
+                    <!-- Cards -->
+                    <div v-else class="md-cards">
+                        <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>
+            </div>
+        </div>
+
+        <!-- Dialogs comuns -->
+        <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); }"
+        />
+        <DocumentSignatureDialog :visible="signatureDlg" @update:visible="signatureDlg = $event" :doc="selectedDoc" />
+        <DocumentShareDialog :visible="shareDlg" @update:visible="shareDlg = $event" :doc="selectedDoc" />
+    </section>
+</template>
+
+<style scoped>
+/* ─── Page chrome ─── */
+.md-page {
+    position: absolute;
+    inset: 6px 6px calc(var(--m-dock-h, 76px) + 6px) 6px;
+    z-index: 40;
+    display: flex;
+    flex-direction: column;
+    background: var(--m-bg-medium);
+    backdrop-filter: blur(32px) saturate(160%);
+    -webkit-backdrop-filter: blur(32px) saturate(160%);
+    border: 1px solid var(--m-border);
+    border-radius: 18px;
+    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
+    overflow: hidden;
+    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+    color: var(--m-text);
+    animation: md-page-enter 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
+}
+@keyframes md-page-enter {
+    from { opacity: 0; transform: scale(0.985); }
+    to   { opacity: 1; transform: scale(1); }
+}
+
+.md-page__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 14px 18px;
+    border-bottom: 1px solid var(--m-border);
+    flex-shrink: 0;
+    gap: 10px;
+}
+.md-page__title {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 1rem;
+    font-weight: 500;
+}
+.md-page__title-icon { color: var(--p-primary-color); font-size: 1.05rem; }
+.md-page__title > span:not(.md-page__count) {
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.md-page__count {
+    font-size: 0.7rem;
+    font-weight: 600;
+    color: var(--m-accent);
+    background: var(--m-accent-soft);
+    border: 1px solid color-mix(in srgb, var(--m-accent) 35%, transparent);
+    padding: 2px 8px;
+    border-radius: 999px;
+}
+.md-page__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
+
+.md-close, .md-head-btn {
+    width: 32px; height: 32px;
+    display: grid; place-items: center;
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border);
+    color: var(--m-text);
+    border-radius: 9px;
+    cursor: pointer;
+    font-family: inherit;
+    transition: background-color 140ms ease;
+}
+.md-close:hover, .md-head-btn:hover { background: var(--m-bg-soft-hover); }
+.md-head-btn > i { font-size: 0.85rem; }
+.md-head-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* Subheader */
+.md-subheader {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    padding: 10px 18px;
+    border-bottom: 1px solid var(--m-border);
+    background: var(--m-bg-soft);
+    font-size: 0.78rem;
+    color: var(--m-text-muted);
+    line-height: 1.45;
+    flex-shrink: 0;
+}
+.md-subheader__icon { color: var(--p-primary-color); font-size: 0.92rem; flex-shrink: 0; margin-top: 1px; }
+.md-subheader__text { flex: 1; min-width: 0; }
+.md-subheader__text strong { color: var(--m-text); font-weight: 600; }
+
+/* Body */
+.md-body {
+    flex: 1;
+    display: flex;
+    min-height: 0;
+    gap: 0;
+    padding: 0;
+}
+
+/* ─── Sidebar ─── */
+.md-side {
+    width: 280px;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    background: var(--m-bg-soft);
+    border-right: 1px solid var(--m-border);
+    overflow: hidden;
+}
+.md-side__scroll {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+}
+.md-side__scroll::-webkit-scrollbar { width: 5px; }
+.md-side__scroll::-webkit-scrollbar-thumb {
+    background: var(--m-border-strong);
+    border-radius: 3px;
+}
+
+.md-side__footer {
+    flex-shrink: 0;
+    padding: 12px;
+    background: var(--m-bg-soft);
+    border-top: 1px solid var(--m-border);
+}
+.md-side__clear-all {
+    width: 100%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 9px 12px;
+    background: var(--m-bg-medium);
+    border: 1px solid var(--m-border);
+    color: var(--m-text);
+    border-radius: 10px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.78rem;
+    font-weight: 600;
+    transition: background-color 140ms ease, border-color 140ms ease;
+}
+.md-side__clear-all:hover {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+}
+.md-side__clear-all > i {
+    font-size: 0.78rem;
+    color: var(--m-text-muted);
+}
+
+.md-side__clear-inline {
+    width: 18px;
+    height: 18px;
+    display: grid;
+    place-items: center;
+    background: transparent;
+    border: 1px solid color-mix(in srgb, rgb(220, 38, 38) 30%, var(--m-border));
+    color: rgb(220, 38, 38);
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 140ms ease, border-color 140ms ease;
+}
+.md-side__clear-inline:hover {
+    background: rgba(220, 38, 38, 0.10);
+    border-color: rgba(220, 38, 38, 0.55);
+}
+.md-side__clear-inline > i { font-size: 0.6rem; }
+
+.md-clear-enter-active,
+.md-clear-leave-active {
+    transition: opacity 220ms ease, transform 220ms ease, max-height 240ms ease;
+    overflow: hidden;
+}
+.md-clear-enter-from, .md-clear-leave-to {
+    opacity: 0; transform: translateY(6px); max-height: 0;
+}
+.md-clear-enter-to, .md-clear-leave-from {
+    opacity: 1; transform: translateY(0); max-height: 80px;
+}
+
+.md-w {
+    background: var(--m-bg-medium);
+    border: 1px solid var(--m-border);
+    border-radius: 12px;
+    padding: 12px;
+}
+.md-w--side {
+    margin: 12px 12px 0;
+    flex-shrink: 0;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+}
+.md-w--side:last-of-type { margin-bottom: 12px; }
+.md-w__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+}
+.md-w__title {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: var(--m-text-muted);
+    font-weight: 600;
+}
+.md-w__title > i { color: var(--m-text-muted); font-size: 0.7rem; }
+
+.md-stats {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 6px;
+}
+.md-stat {
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border);
+    border-radius: 10px;
+    padding: 8px 10px;
+}
+.md-stat__val {
+    font-size: 1rem;
+    font-weight: 700;
+    line-height: 1.1;
+    color: var(--m-text);
+}
+.md-stat__lbl {
+    font-size: 0.62rem;
+    color: var(--m-text-muted);
+    margin-top: 4px;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+}
+.md-stat.is-warn .md-stat__val { color: rgb(217, 119, 6); }
+
+.md-side__select :deep(.p-select) {
+    width: 100%;
+    background: var(--m-bg-soft);
+    border-radius: 9px;
+    height: 36px;
+}
+
+/* ─── Main ─── */
+.md-main {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    padding: 12px;
+    gap: 10px;
+}
+
+.md-toolbar {
+    flex-shrink: 0;
+}
+.md-search {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+.md-search__icon {
+    position: absolute;
+    left: 12px;
+    color: var(--m-text-muted);
+    font-size: 0.78rem;
+    pointer-events: none;
+}
+.md-search__input {
+    width: 100%;
+    background: var(--m-bg-medium);
+    border: 1px solid var(--m-border);
+    color: var(--m-text);
+    padding: 9px 36px 9px 34px;
+    border-radius: 10px;
+    font-size: 0.85rem;
+    font-family: inherit;
+    outline: none;
+    transition: border-color 140ms ease;
+}
+.md-search__input::placeholder { color: var(--m-text-faint); }
+.md-search__input:focus { border-color: var(--m-border-strong); }
+.md-search__clear {
+    position: absolute;
+    right: 8px;
+    width: 22px;
+    height: 22px;
+    display: grid;
+    place-items: center;
+    background: transparent;
+    border: none;
+    color: var(--m-text-muted);
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background-color 140ms ease;
+}
+.md-search__clear:hover {
+    background: var(--m-bg-soft-hover);
+    color: var(--m-text);
+}
+.md-search__clear > i { font-size: 0.7rem; }
+
+.md-error {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 14px;
+    background: rgba(220, 38, 38, 0.10);
+    border: 1px solid rgba(220, 38, 38, 0.30);
+    border-radius: 10px;
+    color: rgb(220, 38, 38);
+    font-size: 0.82rem;
+    flex-shrink: 0;
+}
+
+.md-list {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--m-border);
+    border-radius: 10px;
+    background: transparent;
+}
+.md-list::-webkit-scrollbar { width: 5px; }
+.md-list::-webkit-scrollbar-thumb {
+    background: var(--m-border-strong);
+    border-radius: 3px;
+}
+
+.md-loading,
+.md-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 56px 28px;
+    text-align: center;
+    color: var(--m-text-muted);
+    gap: 8px;
+    flex: 1;
+}
+.md-loading > i { font-size: 1.4rem; color: var(--p-primary-color); }
+.md-empty__icon {
+    font-size: 2rem;
+    color: var(--m-text-faint);
+    margin-bottom: 4px;
+}
+.md-empty__title {
+    font-size: 0.92rem;
+    font-weight: 600;
+    color: var(--m-text);
+}
+.md-empty__hint { font-size: 0.78rem; max-width: 340px; }
+
+.md-cards {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 12px;
+}
+
+/* ─── Mobile (<1024px) ─── */
+@media (max-width: 1023px) {
+    .md-body { flex-direction: column; padding: 0; }
+    .md-side {
+        width: 100%;
+        max-height: 50vh;
+        border-right: none;
+        border-bottom: 1px solid var(--m-border);
+    }
+    .md-main { padding: 8px; }
+    .md-page__title > span:first-of-type { display: none; }
+}
+</style>

src/layout/melissa/MelissaDocumentosTemplates.vue

@@ -0,0 +1,708 @@
+<script setup>
+/*
+ * MelissaDocumentosTemplates — Página nativa Melissa pros templates de
+ * documentos (substitui o embed). 3 views: list / create / edit.
+ *
+ * Layout 1-col empilhado (sem sidebar — separação global/tenant é visual
+ * via cards distintos).
+ *
+ * Lógica idêntica à DocumentTemplatesPage (composable
+ * useDocumentTemplates + DocumentTemplateEditor reusado).
+ */
+import { ref, onMounted } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { useConfirm } from 'primevue/useconfirm';
+
+import { useDocumentTemplates } from '@/features/documents/composables/useDocumentTemplates';
+import DocumentTemplateEditor from '@/features/documents/components/DocumentTemplateEditor.vue';
+// Button/Menu/Skeleton: auto via PrimeVueResolver
+import Menu from 'primevue/menu';
+
+const emit = defineEmits(['close']);
+const toast = useToast();
+const confirm = useConfirm();
+
+const {
+    templates, loading,
+    globalTemplates, tenantTemplates,
+    TIPOS_TEMPLATE,
+    fetchTemplates, create, update, remove, duplicate
+} = useDocumentTemplates();
+
+// ── Views ───────────────────────────────────────────────
+const view = ref('list');
+const editingTemplate = ref({});
+const editingId = ref(null);
+
+// ── Acoes ───────────────────────────────────────────────
+function openCreate() {
+    editingId.value = null;
+    editingTemplate.value = {};
+    view.value = 'create';
+}
+
+function openEdit(tpl) {
+    if (tpl.is_global) {
+        toast.add({
+            severity: 'warn',
+            summary: 'Somente leitura',
+            detail: 'Templates padrão não podem ser editados. Duplique para personalizar.',
+            life: 3000
+        });
+        return;
+    }
+    editingId.value = tpl.id;
+    editingTemplate.value = { ...tpl };
+    view.value = 'edit';
+}
+
+async function onSave(payload) {
+    try {
+        if (view.value === 'create') {
+            await create(payload);
+            toast.add({ severity: 'success', summary: 'Criado', detail: payload.nome_template, life: 3000 });
+        } else {
+            await update(editingId.value, payload);
+            toast.add({ severity: 'success', summary: 'Salvo', detail: payload.nome_template, life: 3000 });
+        }
+        view.value = 'list';
+        fetchTemplates(true);
+    } catch (e) {
+        toast.add({ severity: 'error', summary: 'Erro', detail: e?.message });
+    }
+}
+
+function onDuplicate(tpl) {
+    confirm.require({
+        message: `Deseja copiar "${tpl.nome_template}" para os seus templates? Você poderá editá-lo livremente.`,
+        header: 'Duplicar template',
+        icon: 'pi pi-copy',
+        acceptLabel: 'Copiar',
+        rejectLabel: 'Cancelar',
+        accept: async () => {
+            try {
+                await duplicate(tpl.id);
+                toast.add({ severity: 'success', summary: 'Duplicado', detail: `"${tpl.nome_template}" copiado para Meus Templates.`, life: 3000 });
+            } catch (e) {
+                toast.add({ severity: 'error', summary: 'Erro', detail: e?.message });
+            }
+        }
+    });
+}
+
+function onDelete(tpl) {
+    confirm.require({
+        message: `Desativar template "${tpl.nome_template}"?`,
+        header: 'Confirmar',
+        icon: 'pi pi-exclamation-triangle',
+        accept: async () => {
+            try {
+                await remove(tpl.id);
+                toast.add({ severity: 'success', summary: 'Desativado', life: 2000 });
+            } catch (e) {
+                toast.add({ severity: 'error', summary: 'Erro', detail: e?.message });
+            }
+        }
+    });
+}
+
+function onCancel() {
+    view.value = 'list';
+}
+
+function tipoLabel(tipo) {
+    return TIPOS_TEMPLATE.find((t) => t.value === tipo)?.label || tipo;
+}
+
+// ── Card menu (templates do tenant) ─────────────────────
+function getCardMenuItems(tpl) {
+    const items = [
+        { label: 'Duplicar', icon: 'pi pi-copy', command: () => onDuplicate(tpl) }
+    ];
+    if (!tpl.is_global) {
+        items.push(
+            { label: 'Editar', icon: 'pi pi-pencil', command: () => openEdit(tpl) },
+            { separator: true },
+            { label: 'Desativar', icon: 'pi pi-trash', class: 'text-red-500', command: () => onDelete(tpl) }
+        );
+    }
+    return items;
+}
+
+onMounted(() => {
+    fetchTemplates(true);
+});
+</script>
+
+<template>
+    <ConfirmDialog />
+
+    <section class="mdt-page">
+        <header class="mdt-page__head">
+            <div class="mdt-page__title">
+                <button
+                    v-if="view !== 'list'"
+                    class="mdt-back-btn"
+                    v-tooltip.bottom="'Voltar à lista'"
+                    @click="view = 'list'"
+                >
+                    <i class="pi pi-arrow-left" />
+                </button>
+                <i v-else class="pi pi-file-edit mdt-page__title-icon" />
+                <span>
+                    <template v-if="view === 'list'">Templates de documentos</template>
+                    <template v-else-if="view === 'create'">Novo template</template>
+                    <template v-else>Editar template</template>
+                </span>
+                <span v-if="view === 'list'" class="mdt-page__count">{{ templates.length }}</span>
+            </div>
+            <div class="mdt-page__actions">
+                <template v-if="view === 'list'">
+                    <button
+                        class="mdt-act-btn mdt-act-btn--primary"
+                        v-tooltip.bottom="'Criar novo template personalizado'"
+                        @click="openCreate"
+                    >
+                        <i class="pi pi-plus" />
+                        <span>Novo template</span>
+                    </button>
+                    <button
+                        class="mdt-head-btn"
+                        v-tooltip.bottom="'Atualizar'"
+                        :disabled="loading"
+                        @click="fetchTemplates(true)"
+                    >
+                        <i :class="loading ? 'pi pi-spin pi-spinner' : 'pi pi-refresh'" />
+                    </button>
+                </template>
+                <template v-else>
+                    <button
+                        class="mdt-act-btn"
+                        @click="view = 'list'"
+                    >
+                        <i class="pi pi-times" />
+                        <span>Cancelar</span>
+                    </button>
+                    <button
+                        class="mdt-act-btn mdt-act-btn--primary"
+                        @click="onSave(editingTemplate)"
+                    >
+                        <i class="pi pi-check" />
+                        <span>{{ view === 'create' ? 'Criar template' : 'Salvar' }}</span>
+                    </button>
+                </template>
+                <button class="mdt-close" v-tooltip.bottom="'Voltar (Esc)'" @click="emit('close')">
+                    <i class="pi pi-times" />
+                </button>
+            </div>
+        </header>
+
+        <!-- Subheader -->
+        <div v-if="view === 'list'" class="mdt-subheader">
+            <i class="pi pi-info-circle mdt-subheader__icon" />
+            <span class="mdt-subheader__text">
+                Modelos reutilizáveis pra <strong>declarações</strong>,
+                <strong>atestados</strong>, <strong>recibos</strong> e outros documentos.
+                Templates padrão são <strong>somente leitura</strong> — duplique pra
+                personalizar.
+            </span>
+        </div>
+
+        <!-- Body -->
+        <div class="mdt-body">
+            <!-- ══ LIST VIEW ══ -->
+            <template v-if="view === 'list'">
+                <!-- Loading -->
+                <div v-if="loading && !templates.length" class="mdt-loading">
+                    <i class="pi pi-spin pi-spinner" />
+                    <span>Carregando templates…</span>
+                </div>
+
+                <!-- Empty -->
+                <div v-else-if="!templates.length" class="mdt-empty">
+                    <i class="pi pi-file-edit mdt-empty__icon" />
+                    <div class="mdt-empty__title">Nenhum template encontrado</div>
+                    <div class="mdt-empty__hint">Crie seu primeiro template personalizado.</div>
+                    <button class="mdt-act-btn mdt-act-btn--primary mdt-empty__btn" @click="openCreate">
+                        <i class="pi pi-plus" />
+                        <span>Criar primeiro template</span>
+                    </button>
+                </div>
+
+                <template v-else>
+                    <!-- Templates globais (padrão) -->
+                    <div v-if="globalTemplates.length" class="mdt-section">
+                        <div class="mdt-section__head">
+                            <div class="mdt-section__title">
+                                <i class="pi pi-shield" />
+                                <span>Templates padrão do sistema</span>
+                            </div>
+                            <span class="mdt-section__count is-info">{{ globalTemplates.length }}</span>
+                        </div>
+                        <div class="mdt-grid">
+                            <button
+                                v-for="tpl in globalTemplates"
+                                :key="tpl.id"
+                                class="mdt-card mdt-card--global"
+                                type="button"
+                                @click="onDuplicate(tpl)"
+                            >
+                                <div class="mdt-card__head">
+                                    <span class="mdt-card__icon mdt-card__icon--info">
+                                        <i class="pi pi-file" />
+                                    </span>
+                                    <div class="mdt-card__main">
+                                        <div class="mdt-card__name">{{ tpl.nome_template }}</div>
+                                        <div class="mdt-card__tipo">{{ tipoLabel(tpl.tipo) }}</div>
+                                        <div v-if="tpl.descricao" class="mdt-card__desc">{{ tpl.descricao }}</div>
+                                    </div>
+                                </div>
+                                <span class="mdt-card__badge mdt-card__badge--info">padrão</span>
+                                <div class="mdt-card__hint">
+                                    <i class="pi pi-copy" />
+                                    Click pra duplicar e personalizar
+                                </div>
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Templates do tenant (meus) -->
+                    <div v-if="tenantTemplates.length" class="mdt-section">
+                        <div class="mdt-section__head">
+                            <div class="mdt-section__title">
+                                <i class="pi pi-user-edit" />
+                                <span>Meus templates</span>
+                            </div>
+                            <span class="mdt-section__count is-accent">{{ tenantTemplates.length }}</span>
+                        </div>
+                        <div class="mdt-grid">
+                            <div
+                                v-for="tpl in tenantTemplates"
+                                :key="tpl.id"
+                                class="mdt-card mdt-card--tenant"
+                                role="button"
+                                tabindex="0"
+                                @click="openEdit(tpl)"
+                                @keydown.enter.prevent="openEdit(tpl)"
+                            >
+                                <div class="mdt-card__head">
+                                    <span class="mdt-card__icon mdt-card__icon--primary">
+                                        <i class="pi pi-file-edit" />
+                                    </span>
+                                    <div class="mdt-card__main">
+                                        <div class="mdt-card__name">{{ tpl.nome_template }}</div>
+                                        <div class="mdt-card__tipo">{{ tipoLabel(tpl.tipo) }}</div>
+                                        <div v-if="tpl.descricao" class="mdt-card__desc">{{ tpl.descricao }}</div>
+                                    </div>
+                                </div>
+
+                                <!-- Menu de ações -->
+                                <div class="mdt-card__menu" @click.stop>
+                                    <Button
+                                        icon="pi pi-ellipsis-v"
+                                        text
+                                        rounded
+                                        size="small"
+                                        class="!w-7 !h-7"
+                                        @click.stop="$refs[`menu_${tpl.id}`]?.[0]?.toggle($event)"
+                                    />
+                                    <Menu
+                                        :ref="`menu_${tpl.id}`"
+                                        :model="getCardMenuItems(tpl)"
+                                        :popup="true"
+                                    />
+                                </div>
+
+                                <div class="mdt-card__foot">
+                                    <span v-if="!tpl.ativo" class="mdt-card__badge mdt-card__badge--inactive">
+                                        inativo
+                                    </span>
+                                    <span class="mdt-card__vars">
+                                        <i class="pi pi-code" />
+                                        {{ tpl.variaveis?.length || 0 }} variáveis
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </template>
+
+            <!-- ══ CREATE / EDIT VIEW ══ -->
+            <template v-if="view === 'create' || view === 'edit'">
+                <DocumentTemplateEditor
+                    v-model="editingTemplate"
+                    :mode="view"
+                    @save="onSave"
+                    @cancel="onCancel"
+                />
+            </template>
+        </div>
+    </section>
+</template>
+
+<style scoped>
+/* ─── Page chrome ─── */
+.mdt-page {
+    position: absolute;
+    inset: 6px 6px calc(var(--m-dock-h, 76px) + 6px) 6px;
+    z-index: 40;
+    display: flex;
+    flex-direction: column;
+    background: var(--m-bg-medium);
+    backdrop-filter: blur(32px) saturate(160%);
+    -webkit-backdrop-filter: blur(32px) saturate(160%);
+    border: 1px solid var(--m-border);
+    border-radius: 18px;
+    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
+    overflow: hidden;
+    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+    color: var(--m-text);
+    animation: mdt-page-enter 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
+}
+@keyframes mdt-page-enter {
+    from { opacity: 0; transform: scale(0.985); }
+    to   { opacity: 1; transform: scale(1); }
+}
+
+.mdt-page__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 14px 18px;
+    border-bottom: 1px solid var(--m-border);
+    flex-shrink: 0;
+    gap: 10px;
+}
+.mdt-page__title {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 1rem;
+    font-weight: 500;
+}
+.mdt-page__title-icon { color: var(--p-primary-color); font-size: 1.05rem; }
+.mdt-page__title > span:not(.mdt-page__count) {
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.mdt-page__count {
+    font-size: 0.7rem;
+    font-weight: 600;
+    color: var(--m-accent);
+    background: var(--m-accent-soft);
+    border: 1px solid color-mix(in srgb, var(--m-accent) 35%, transparent);
+    padding: 2px 8px;
+    border-radius: 999px;
+}
+
+.mdt-back-btn {
+    width: 32px; height: 32px;
+    display: grid; place-items: center;
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border);
+    color: var(--m-text);
+    border-radius: 9px;
+    cursor: pointer;
+    font-family: inherit;
+    transition: background-color 140ms ease;
+}
+.mdt-back-btn:hover { background: var(--m-bg-soft-hover); }
+.mdt-back-btn > i { font-size: 0.85rem; }
+
+.mdt-page__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
+
+.mdt-close, .mdt-head-btn {
+    width: 32px; height: 32px;
+    display: grid; place-items: center;
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border);
+    color: var(--m-text);
+    border-radius: 9px;
+    cursor: pointer;
+    font-family: inherit;
+    transition: background-color 140ms ease;
+}
+.mdt-close:hover, .mdt-head-btn:hover { background: var(--m-bg-soft-hover); }
+.mdt-head-btn > i { font-size: 0.85rem; }
+.mdt-head-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.mdt-act-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    height: 32px;
+    padding: 0 12px;
+    border-radius: 9px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.78rem;
+    font-weight: 600;
+    transition: background-color 140ms ease, transform 140ms ease;
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border);
+    color: var(--m-text);
+}
+.mdt-act-btn:hover { background: var(--m-bg-soft-hover); }
+.mdt-act-btn--primary {
+    background: var(--m-accent);
+    border-color: var(--m-accent);
+    color: white;
+}
+.mdt-act-btn--primary:hover {
+    background: color-mix(in srgb, var(--m-accent) 88%, white);
+    transform: translateY(-1px);
+}
+.mdt-act-btn > i { font-size: 0.78rem; }
+
+/* Subheader */
+.mdt-subheader {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    padding: 10px 18px;
+    border-bottom: 1px solid var(--m-border);
+    background: var(--m-bg-soft);
+    font-size: 0.78rem;
+    color: var(--m-text-muted);
+    line-height: 1.45;
+    flex-shrink: 0;
+}
+.mdt-subheader__icon { color: var(--p-primary-color); font-size: 0.92rem; flex-shrink: 0; margin-top: 1px; }
+.mdt-subheader__text { flex: 1; min-width: 0; }
+.mdt-subheader__text strong { color: var(--m-text); font-weight: 600; }
+
+/* Body */
+.mdt-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    scrollbar-width: thin;
+    scrollbar-color: var(--m-border-strong) transparent;
+}
+.mdt-body::-webkit-scrollbar { width: 5px; }
+.mdt-body::-webkit-scrollbar-thumb { background: var(--m-border-strong); border-radius: 3px; }
+
+/* Loading + Empty */
+.mdt-loading,
+.mdt-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 56px 28px;
+    text-align: center;
+    color: var(--m-text-muted);
+    gap: 8px;
+    flex: 1;
+}
+.mdt-loading > i { font-size: 1.4rem; color: var(--p-primary-color); }
+.mdt-empty__icon { font-size: 2.2rem; color: var(--m-text-faint); margin-bottom: 4px; }
+.mdt-empty__title { font-size: 0.95rem; font-weight: 600; color: var(--m-text); }
+.mdt-empty__hint { font-size: 0.82rem; }
+.mdt-empty__btn { margin-top: 8px; }
+
+/* ─── Section (cards de templates) ─── */
+.mdt-section {
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border);
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+.mdt-section__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--m-border);
+}
+.mdt-section__title {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 0.88rem;
+    font-weight: 700;
+    color: var(--m-text);
+}
+.mdt-section__title > i {
+    font-size: 0.92rem;
+    color: var(--m-text-muted);
+}
+.mdt-section__count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 24px;
+    height: 22px;
+    padding: 0 8px;
+    border-radius: 999px;
+    font-size: 0.72rem;
+    font-weight: 700;
+}
+.mdt-section__count.is-info {
+    background: color-mix(in srgb, rgb(37, 99, 235) 18%, transparent);
+    color: rgb(37, 99, 235);
+}
+.mdt-section__count.is-accent {
+    background: var(--m-accent);
+    color: white;
+}
+
+.mdt-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 10px;
+    padding: 12px;
+}
+
+/* Card de template (global ou tenant) */
+.mdt-card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 14px;
+    background: var(--m-bg-medium);
+    border: 1px solid var(--m-border);
+    border-radius: 10px;
+    color: var(--m-text);
+    text-align: left;
+    cursor: pointer;
+    font-family: inherit;
+    transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
+}
+.mdt-card:hover {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--p-primary-color);
+    transform: translateY(-1px);
+}
+.mdt-card:focus-visible {
+    outline: 2px solid var(--p-primary-color);
+    outline-offset: 2px;
+}
+
+.mdt-card__head {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    min-width: 0;
+}
+.mdt-card__icon {
+    width: 36px;
+    height: 36px;
+    display: grid;
+    place-items: center;
+    border-radius: 9px;
+    flex-shrink: 0;
+    font-size: 1rem;
+}
+.mdt-card__icon--info {
+    background: color-mix(in srgb, rgb(37, 99, 235) 15%, transparent);
+    color: rgb(37, 99, 235);
+}
+.mdt-card__icon--primary {
+    background: color-mix(in srgb, var(--p-primary-color) 15%, transparent);
+    color: var(--p-primary-color);
+}
+.mdt-card__main {
+    flex: 1;
+    min-width: 0;
+}
+.mdt-card__name {
+    font-size: 0.92rem;
+    font-weight: 600;
+    color: var(--m-text);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+}
+.mdt-card__tipo {
+    font-size: 0.72rem;
+    color: var(--m-text-muted);
+    margin-top: 2px;
+}
+.mdt-card__desc {
+    font-size: 0.72rem;
+    color: var(--m-text-muted);
+    line-height: 1.5;
+    margin-top: 6px;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    opacity: 0.85;
+}
+.mdt-card__badge {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    font-size: 0.6rem;
+    font-weight: 700;
+    padding: 2px 8px;
+    border-radius: 999px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+.mdt-card__badge--info {
+    background: color-mix(in srgb, rgb(37, 99, 235) 18%, transparent);
+    color: rgb(37, 99, 235);
+}
+.mdt-card__badge--inactive {
+    background: rgba(220, 38, 38, 0.15);
+    color: rgb(220, 38, 38);
+}
+.mdt-card__hint {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 0.7rem;
+    color: var(--m-text-muted);
+    opacity: 0;
+    transition: opacity 140ms ease;
+    margin-top: auto;
+}
+.mdt-card:hover .mdt-card__hint { opacity: 1; }
+.mdt-card__hint > i { font-size: 0.7rem; }
+
+.mdt-card__menu {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    opacity: 0;
+    transition: opacity 140ms ease;
+}
+.mdt-card:hover .mdt-card__menu { opacity: 1; }
+
+.mdt-card__foot {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 4px;
+}
+.mdt-card__vars {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 0.7rem;
+    color: var(--m-text-muted);
+}
+.mdt-card__vars > i { font-size: 0.65rem; }
+
+/* Mobile (<1024px) */
+@media (max-width: 1023px) {
+    .mdt-page__title > span:nth-child(2):not(.mdt-page__count) {
+        font-size: 0.92rem;
+    }
+    .mdt-act-btn span { display: none; }
+    .mdt-act-btn { width: 32px; padding: 0; justify-content: center; }
+    .mdt-grid { grid-template-columns: 1fr; }
+}
+</style>

src/layout/melissa/MelissaEmbed.vue

@@ -29,49 +29,14 @@ const emit = defineEmits(['close']);
 // Mantido neste arquivo (não no MelissaLayout) pra que adicionar uma
 // nova page aqui não exija mexer no parent.
 const EMBED_MAP = {
-    'financeiro': {
+    // Quase todas as pages foram promovidas pra Melissa nativas (eliminando
-        label: 'Financeiro',
+    // o triplo-header). Resta apenas 'online-scheduling' por enquanto.
-        desc: 'Visão geral, recebíveis e indicadores do mês.',
-        icon: 'pi pi-wallet',
-        comp: defineAsyncComponent(() => import('@/features/financeiro/pages/FinanceiroDashboardPage.vue'))
-    },
-    'financeiro-lancamentos': {
-        label: 'Lançamentos financeiros',
-        desc: 'Lista detalhada de cobranças, pagamentos e recebimentos.',
-        icon: 'pi pi-list',
-        comp: defineAsyncComponent(() => import('@/features/financeiro/pages/FinanceiroPage.vue'))
-    },
-    'documentos': {
-        label: 'Documentos',
-        desc: 'Documentos clínicos do tenant — geração, edição e histórico.',
-        icon: 'pi pi-file',
-        comp: defineAsyncComponent(() => import('@/features/documents/DocumentsListPage.vue'))
-    },
-    'documentos-templates': {
-        label: 'Templates de documentos',
-        desc: 'Modelos reutilizáveis pra prontuários e relatórios.',
-        icon: 'pi pi-file-edit',
-        comp: defineAsyncComponent(() => import('@/features/documents/DocumentTemplatesPage.vue'))
-    },
-    // 'agendamentos-recebidos' migrou pra Melissa Page nativa
-    // (MelissaAgendamentosRecebidos.vue) — segue o blueprint
-    // melissa-table-page-blueprint.md. Removido do embed map.
     'online-scheduling': {
         label: 'Agendador online',
         desc: 'Configure o link público pra pacientes solicitarem horários.',
         icon: 'pi pi-calendar-clock',
         comp: defineAsyncComponent(() => import('@/views/pages/therapist/OnlineSchedulingPage.vue'))
-    },
+    }
-    'relatorios': {
-        label: 'Relatórios',
-        desc: 'Indicadores e relatórios do tenant — clínico e financeiro.',
-        icon: 'pi pi-chart-bar',
-        comp: defineAsyncComponent(() => import('@/views/pages/therapist/RelatoriosPage.vue'))
-    },
-    // 'notificacoes' e 'link-externo' foram promovidos pra páginas nativas
-    // Melissa (MelissaNotificacoes / MelissaLinkExterno) — eliminado o
-    // triplo header que aparecia no embed. Wire-up agora no MelissaLayout.vue,
-    // não passam mais por aqui.
 };
 
 const info = computed(() => EMBED_MAP[props.secaoRota] || null);

src/layout/melissa/MelissaFinanceiro.vue

@@ -0,0 +1,857 @@
+<script setup>
+/*
+ * MelissaFinanceiro — Página nativa Melissa pro dashboard financeiro
+ * (substitui o embed via MelissaEmbed que duplicava headers).
+ *
+ * Layout 1-col empilhado (sem sidebar — não há filtros aqui, só
+ * cards de resumo). Espelha o pattern do MelissaLinkExterno.
+ *
+ * Cards (de cima pra baixo):
+ *   1. Quick stats (Recebido / Pendente / Vencido / Despesas) — grid 4-col
+ *   2. Gráfico Receita × Despesa (Chart.js bar, últimos 6 meses)
+ *   3. Projeção de Caixa (cobranças em aberto, próximos 6 meses)
+ *   4. Últimos lançamentos (DataTable 5 mais recentes)
+ *
+ * Lógica idêntica à FinanceiroDashboardPage (RPCs get_financial_summary +
+ * list_financial_records + view v_cashflow_projection). Só o chrome muda.
+ */
+import { ref, computed, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { supabase } from '@/lib/supabase/client';
+// Chart/DataTable/Column/Skeleton/Tag: auto via PrimeVueResolver
+
+const emit = defineEmits(['close']);
+const router = useRouter();
+
+// ── Helpers ────────────────────────────────────────────
+const _brl = new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' });
+function fmtBRL(v) {
+    return _brl.format(v ?? 0);
+}
+function fmtDate(iso) {
+    if (!iso) return '—';
+    const d = iso.includes('T') ? new Date(iso) : new Date(iso + 'T00:00:00');
+    return new Intl.DateTimeFormat('pt-BR').format(d);
+}
+async function getUid() {
+    const { data } = await supabase.auth.getUser();
+    return data?.user?.id ?? null;
+}
+function getLast6Months() {
+    const months = [];
+    const now = new Date();
+    for (let i = 5; i >= 0; i--) {
+        const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
+        months.push({
+            year: d.getFullYear(),
+            month: d.getMonth() + 1,
+            label: d.toLocaleDateString('pt-BR', { month: 'short', year: '2-digit' })
+        });
+    }
+    return months;
+}
+
+// Label do mês corrente pro badge do header.
+const currentMonthLabel = computed(() => {
+    const now = new Date();
+    return now.toLocaleDateString('pt-BR', { month: 'short', year: '2-digit' });
+});
+
+// ── Estado: cards de resumo ────────────────────────────
+const summaryLoading = ref(true);
+const totalRecebido = ref(0);
+const totalPendente = ref(0);
+const totalVencido = ref(0);
+const totalDespesas = ref(0);
+
+async function loadSummary(uid) {
+    summaryLoading.value = true;
+    const now = new Date();
+    const year = now.getFullYear();
+    const month = now.getMonth() + 1;
+    try {
+        const { data: rpc } = await supabase.rpc('get_financial_summary', {
+            p_owner_id: uid, p_year: year, p_month: month
+        });
+        const s = Array.isArray(rpc) ? rpc[0] : rpc;
+        totalRecebido.value = Number(s?.total_receitas ?? 0);
+        totalDespesas.value = Number(s?.total_despesas ?? 0);
+
+        const { data: pendRows } = await supabase
+            .from('financial_records')
+            .select('status, final_amount')
+            .eq('owner_id', uid)
+            .is('deleted_at', null)
+            .in('status', ['pending', 'overdue']);
+
+        let pen = 0, ove = 0;
+        for (const r of pendRows ?? []) {
+            if (r.status === 'pending') pen += Number(r.final_amount ?? 0);
+            else ove += Number(r.final_amount ?? 0);
+        }
+        totalPendente.value = pen;
+        totalVencido.value = ove;
+    } finally {
+        summaryLoading.value = false;
+    }
+}
+
+// ── Estado: gráfico 6 meses ────────────────────────────
+const chartLoading = ref(true);
+const chartData = ref(null);
+const chartOptions = ref({
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+        legend: { position: 'top' },
+        tooltip: {
+            callbacks: { label: (ctx) => ` ${_brl.format(ctx.parsed.y)}` }
+        }
+    },
+    scales: {
+        y: {
+            ticks: { callback: (v) => _brl.format(v) },
+            beginAtZero: true
+        }
+    }
+});
+
+async function loadChart(uid) {
+    chartLoading.value = true;
+    const months = getLast6Months();
+    try {
+        const results = await Promise.all(
+            months.map((m) => supabase.rpc('get_financial_summary', {
+                p_owner_id: uid, p_year: m.year, p_month: m.month
+            }))
+        );
+        const receitas = results.map((r) => Number((Array.isArray(r.data) ? r.data[0] : r.data)?.total_receitas ?? 0));
+        const despesas = results.map((r) => Number((Array.isArray(r.data) ? r.data[0] : r.data)?.total_despesas ?? 0));
+
+        chartData.value = {
+            labels: months.map((m) => m.label),
+            datasets: [
+                { label: 'Receita', data: receitas, backgroundColor: 'rgb(22, 163, 74)', borderRadius: 4 },
+                { label: 'Despesa', data: despesas, backgroundColor: 'rgb(220, 38, 38)', borderRadius: 4 }
+            ]
+        };
+    } finally {
+        chartLoading.value = false;
+    }
+}
+
+// ── Estado: fluxo de caixa ─────────────────────────────
+const cashflowLoading = ref(true);
+const cashflowRows = ref([]);
+const cashflowError = ref(false);
+
+async function loadCashflow() {
+    cashflowLoading.value = true;
+    cashflowError.value = false;
+    try {
+        const { data, error } = await supabase
+            .from('v_cashflow_projection')
+            .select('mes_label, receitas_projetadas, despesas_projetadas, saldo_projetado, count_registros')
+            .order('mes', { ascending: true });
+        if (error) throw error;
+        cashflowRows.value = data ?? [];
+    } catch {
+        cashflowError.value = true;
+    } finally {
+        cashflowLoading.value = false;
+    }
+}
+
+// ── Estado: últimos lançamentos ────────────────────────
+const recentLoading = ref(true);
+const recentRecords = ref([]);
+
+const STATUS_CFG = {
+    pending:   { label: 'Pendente',  severity: 'warn' },
+    paid:      { label: 'Pago',      severity: 'success' },
+    overdue:   { label: 'Vencido',   severity: 'danger' },
+    partial:   { label: 'Parcial',   severity: 'info' },
+    cancelled: { label: 'Cancelado', severity: 'secondary' },
+    refunded:  { label: 'Estornado', severity: 'contrast' }
+};
+
+async function loadRecent(uid) {
+    recentLoading.value = true;
+    try {
+        const { data } = await supabase.rpc('list_financial_records', {
+            p_owner_id: uid, p_limit: 5, p_offset: 0
+        });
+        recentRecords.value = data ?? [];
+    } finally {
+        recentLoading.value = false;
+    }
+}
+
+// ── Loading agregado pro botão Recarregar ──────────────
+const loading = computed(() =>
+    summaryLoading.value || chartLoading.value || cashflowLoading.value || recentLoading.value
+);
+
+async function reload() {
+    const uid = await getUid();
+    if (!uid) return;
+    await Promise.all([loadSummary(uid), loadChart(uid), loadCashflow(), loadRecent(uid)]);
+}
+
+// ── Navegação: "Ver lançamentos" → MelissaFinanceiroLancamentos ──
+// Quando essa página existir, abre /melissa/financeiro-lancamentos.
+// Por enquanto o slug ja roteia pelo MelissaEmbed.
+function goToLancamentos() {
+    router.push('/melissa/financeiro-lancamentos');
+}
+
+// ── Lifecycle ──────────────────────────────────────────
+onMounted(async () => {
+    await reload();
+});
+</script>
+
+<template>
+    <section class="mf-page">
+        <header class="mf-page__head">
+            <div class="mf-page__title">
+                <i class="pi pi-wallet mf-page__title-icon" />
+                <span>Financeiro</span>
+                <span class="mf-page__count">{{ currentMonthLabel }}</span>
+            </div>
+            <div class="mf-page__actions">
+                <button
+                    class="mf-act-btn mf-act-btn--primary"
+                    v-tooltip.bottom="'Ver lista detalhada de lançamentos'"
+                    @click="goToLancamentos"
+                >
+                    <i class="pi pi-list" />
+                    <span>Ver lançamentos</span>
+                </button>
+                <button
+                    class="mf-head-btn"
+                    v-tooltip.bottom="'Recarregar'"
+                    :disabled="loading"
+                    @click="reload"
+                >
+                    <i :class="loading ? 'pi pi-spin pi-spinner' : 'pi pi-refresh'" />
+                </button>
+                <button class="mf-close" v-tooltip.bottom="'Voltar (Esc)'" @click="emit('close')">
+                    <i class="pi pi-times" />
+                </button>
+            </div>
+        </header>
+
+        <!-- Subheader explicativo -->
+        <div class="mf-subheader">
+            <i class="pi pi-info-circle mf-subheader__icon" />
+            <span class="mf-subheader__text">
+                Resumo financeiro do <strong>mês corrente</strong> — recebido,
+                pendências, vencidos e despesas. Veja o gráfico de 6 meses,
+                a projeção de caixa e os últimos lançamentos.
+            </span>
+        </div>
+
+        <!-- Body com scroll -->
+        <div class="mf-body">
+            <!-- ═══ 1. Quick stats ═══════════════════════════ -->
+            <div class="mf-stats">
+                <template v-if="summaryLoading">
+                    <div v-for="n in 4" :key="`stsk-${n}`" class="mf-stat mf-stat--skeleton">
+                        <Skeleton width="60%" height="22px" />
+                        <Skeleton width="40%" height="11px" class="mt-1" />
+                    </div>
+                </template>
+
+                <template v-else>
+                    <div class="mf-stat is-recebido">
+                        <div class="mf-stat__val">{{ fmtBRL(totalRecebido) }}</div>
+                        <div class="mf-stat__lbl">
+                            <i class="pi pi-check-circle" />
+                            Recebido (mês)
+                        </div>
+                    </div>
+                    <div class="mf-stat is-pendente">
+                        <div class="mf-stat__val">{{ fmtBRL(totalPendente) }}</div>
+                        <div class="mf-stat__lbl">
+                            <span class="mf-stat__pulse" />
+                            Pendente
+                        </div>
+                    </div>
+                    <div class="mf-stat" :class="totalVencido > 0 ? 'is-vencido' : 'is-neutral'">
+                        <div class="mf-stat__val">{{ fmtBRL(totalVencido) }}</div>
+                        <div class="mf-stat__lbl">
+                            <i class="pi pi-exclamation-circle" />
+                            Vencido
+                        </div>
+                    </div>
+                    <div class="mf-stat is-neutral">
+                        <div class="mf-stat__val">{{ fmtBRL(totalDespesas) }}</div>
+                        <div class="mf-stat__lbl">
+                            <i class="pi pi-arrow-down-left" />
+                            Despesas (mês)
+                        </div>
+                    </div>
+                </template>
+            </div>
+
+            <!-- ═══ 2. Gráfico Receita × Despesa ════════════ -->
+            <div class="mf-card">
+                <div class="mf-card__head">
+                    <div class="mf-card__icon mf-card__icon--primary">
+                        <i class="pi pi-chart-bar" />
+                    </div>
+                    <div class="mf-card__title">
+                        <div class="mf-card__title-text">Receita × Despesa</div>
+                        <div class="mf-card__sub">Comparativo dos últimos 6 meses</div>
+                    </div>
+                </div>
+                <div class="mf-card__body">
+                    <div v-if="chartLoading" class="mf-chart-wrap">
+                        <Skeleton height="100%" />
+                    </div>
+                    <div v-else-if="chartData" class="mf-chart-wrap">
+                        <Chart type="bar" :data="chartData" :options="chartOptions" style="height: 100%" />
+                    </div>
+                    <div v-else class="mf-empty-inline">
+                        <i class="pi pi-info-circle" /> Sem dados para o gráfico.
+                    </div>
+                </div>
+            </div>
+
+            <!-- ═══ 3. Projeção de Caixa ════════════════════ -->
+            <div class="mf-card">
+                <div class="mf-card__head">
+                    <div class="mf-card__icon mf-card__icon--primary">
+                        <i class="pi pi-calendar" />
+                    </div>
+                    <div class="mf-card__title">
+                        <div class="mf-card__title-text">Projeção de Caixa</div>
+                        <div class="mf-card__sub">Cobranças em aberto — próximos 6 meses</div>
+                    </div>
+                </div>
+                <div class="mf-card__body">
+                    <div v-if="cashflowLoading" class="flex flex-col gap-2">
+                        <Skeleton v-for="n in 6" :key="`cfsk-${n}`" height="2.4rem" border-radius="6px" />
+                    </div>
+
+                    <div v-else-if="cashflowError" class="mf-empty-inline">
+                        <i class="pi pi-info-circle" /> Projeção indisponível.
+                    </div>
+
+                    <div v-else-if="!cashflowRows.length" class="mf-empty-inline">
+                        <i class="pi pi-check-circle" /> Sem cobranças futuras em aberto.
+                    </div>
+
+                    <div v-else class="mf-cashflow">
+                        <div
+                            v-for="row in cashflowRows"
+                            :key="row.mes_label"
+                            class="mf-cashflow__row"
+                        >
+                            <span class="mf-cashflow__mes">{{ row.mes_label }}</span>
+                            <div class="mf-cashflow__line">
+                                <span class="mf-cashflow__pos">
+                                    <i class="pi pi-arrow-up-right" />
+                                    {{ fmtBRL(row.receitas_projetadas) }}
+                                </span>
+                                <span class="mf-cashflow__sep">·</span>
+                                <span class="mf-cashflow__neg">
+                                    <i class="pi pi-arrow-down-left" />
+                                    {{ fmtBRL(row.despesas_projetadas) }}
+                                </span>
+                                <span class="mf-cashflow__sep">·</span>
+                                <span
+                                    class="mf-cashflow__saldo"
+                                    :class="Number(row.saldo_projetado) >= 0 ? 'is-positive' : 'is-negative'"
+                                >
+                                    saldo {{ fmtBRL(row.saldo_projetado) }}
+                                </span>
+                            </div>
+                            <Tag
+                                :value="row.count_registros + ' cobranças'"
+                                severity="secondary"
+                                class="mf-cashflow__count"
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- ═══ 4. Últimos lançamentos ══════════════════ -->
+            <div class="mf-card">
+                <div class="mf-card__head">
+                    <div class="mf-card__icon mf-card__icon--primary">
+                        <i class="pi pi-list" />
+                    </div>
+                    <div class="mf-card__title">
+                        <div class="mf-card__title-text">Últimos lançamentos</div>
+                        <div class="mf-card__sub">Cobranças e receitas recentes</div>
+                    </div>
+                    <button class="mf-card__action-link" @click="goToLancamentos">
+                        Ver todos <i class="pi pi-arrow-right" />
+                    </button>
+                </div>
+
+                <div v-if="recentLoading" class="mf-card__body">
+                    <div class="flex flex-col gap-2">
+                        <Skeleton v-for="n in 5" :key="`rsk-${n}`" height="2.5rem" border-radius="6px" />
+                    </div>
+                </div>
+
+                <div v-else-if="!recentRecords.length" class="mf-empty-inline">
+                    <i class="pi pi-wallet" /> Nenhum lançamento encontrado.
+                </div>
+
+                <DataTable
+                    v-else
+                    :value="recentRecords"
+                    size="small"
+                    :show-gridlines="false"
+                    class="mf-recent-table"
+                >
+                    <Column field="due_date" header="Data">
+                        <template #body="{ data }">
+                            {{ fmtDate(data.paid_at ?? data.due_date) }}
+                        </template>
+                    </Column>
+                    <Column field="description" header="Descrição">
+                        <template #body="{ data }">
+                            {{ data.description || data.notes || '—' }}
+                        </template>
+                    </Column>
+                    <Column header="Tipo">
+                        <template #body="{ data }">
+                            <Tag
+                                :value="data.type === 'receita' ? 'Receita' : 'Despesa'"
+                                :severity="data.type === 'receita' ? 'success' : 'danger'"
+                                class="text-xs"
+                            />
+                        </template>
+                    </Column>
+                    <Column header="Valor">
+                        <template #body="{ data }">
+                            <span :class="data.type === 'receita' ? 'mf-amount mf-amount--pos' : 'mf-amount mf-amount--neg'">
+                                {{ fmtBRL(data.final_amount ?? data.amount) }}
+                            </span>
+                        </template>
+                    </Column>
+                    <Column header="Status">
+                        <template #body="{ data }">
+                            <Tag
+                                :value="STATUS_CFG[data.status]?.label ?? data.status"
+                                :severity="STATUS_CFG[data.status]?.severity ?? 'secondary'"
+                                class="text-xs"
+                            />
+                        </template>
+                    </Column>
+                </DataTable>
+            </div>
+        </div>
+    </section>
+</template>
+
+<style scoped>
+/* ─── Page chrome (espelha demais Melissa Pages) ─── */
+.mf-page {
+    position: absolute;
+    inset: 6px 6px calc(var(--m-dock-h, 76px) + 6px) 6px;
+    z-index: 40;
+    display: flex;
+    flex-direction: column;
+    background: var(--m-bg-medium);
+    backdrop-filter: blur(32px) saturate(160%);
+    -webkit-backdrop-filter: blur(32px) saturate(160%);
+    border: 1px solid var(--m-border);
+    border-radius: 18px;
+    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
+    overflow: hidden;
+    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+    color: var(--m-text);
+    animation: mf-page-enter 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
+}
+@keyframes mf-page-enter {
+    from { opacity: 0; transform: scale(0.985); }
+    to   { opacity: 1; transform: scale(1); }
+}
+
+.mf-page__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 14px 18px;
+    border-bottom: 1px solid var(--m-border);
+    flex-shrink: 0;
+    gap: 10px;
+}
+.mf-page__title {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 1rem;
+    font-weight: 500;
+}
+.mf-page__title-icon {
+    color: var(--p-primary-color);
+    font-size: 1.05rem;
+}
+.mf-page__title > span:not(.mf-page__count) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mf-page__count {
+    font-size: 0.7rem;
+    font-weight: 600;
+    color: var(--m-accent);
+    background: var(--m-accent-soft);
+    border: 1px solid color-mix(in srgb, var(--m-accent) 35%, transparent);
+    padding: 2px 8px;
+    border-radius: 999px;
+    text-transform: capitalize;
+}
+.mf-page__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
+
+.mf-close, .mf-head-btn {
+    width: 32px; height: 32px;
+    display: grid; place-items: center;
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border);
+    color: var(--m-text);
+    border-radius: 9px;
+    cursor: pointer;
+    font-family: inherit;
+    transition: background-color 140ms ease;
+}
+.mf-close:hover, .mf-head-btn:hover { background: var(--m-bg-soft-hover); }
+.mf-head-btn > i { font-size: 0.85rem; }
+.mf-head-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.mf-act-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    height: 32px;
+    padding: 0 12px;
+    border-radius: 9px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.78rem;
+    font-weight: 600;
+    transition: background-color 140ms ease, transform 140ms ease;
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border);
+    color: var(--m-text);
+}
+.mf-act-btn--primary {
+    background: var(--m-accent);
+    border-color: var(--m-accent);
+    color: white;
+}
+.mf-act-btn--primary:hover {
+    background: color-mix(in srgb, var(--m-accent) 88%, white);
+    transform: translateY(-1px);
+}
+.mf-act-btn > i { font-size: 0.78rem; }
+
+/* Subheader (blueprint §9) */
+.mf-subheader {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    padding: 10px 18px;
+    border-bottom: 1px solid var(--m-border);
+    background: var(--m-bg-soft);
+    font-size: 0.78rem;
+    color: var(--m-text-muted);
+    line-height: 1.45;
+    flex-shrink: 0;
+}
+.mf-subheader__icon {
+    color: var(--p-primary-color);
+    font-size: 0.92rem;
+    flex-shrink: 0;
+    margin-top: 1px;
+}
+.mf-subheader__text { flex: 1; min-width: 0; }
+.mf-subheader__text strong { color: var(--m-text); font-weight: 600; }
+
+/* Body com scroll */
+.mf-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    scrollbar-width: thin;
+    scrollbar-color: var(--m-border-strong) transparent;
+}
+.mf-body::-webkit-scrollbar { width: 5px; }
+.mf-body::-webkit-scrollbar-thumb {
+    background: var(--m-border-strong);
+    border-radius: 3px;
+}
+
+/* ─── Quick stats grid ─── */
+.mf-stats {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+}
+@media (min-width: 768px) {
+    .mf-stats { grid-template-columns: repeat(4, 1fr); }
+}
+.mf-stat {
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border);
+    border-radius: 12px;
+    padding: 14px 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+.mf-stat--skeleton { box-shadow: none; }
+.mf-stat__val {
+    font-size: 1.35rem;
+    font-weight: 700;
+    line-height: 1.1;
+    color: var(--m-text);
+}
+.mf-stat__lbl {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.7rem;
+    font-weight: 600;
+    color: var(--m-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+.mf-stat__lbl > i { font-size: 0.75rem; }
+.mf-stat__pulse {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: currentColor;
+    animation: mf-pulse 1.6s ease-in-out infinite;
+}
+@keyframes mf-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.45; }
+}
+
+/* Variantes coloridas: Recebido verde / Pendente amber / Vencido red */
+.mf-stat.is-recebido {
+    background: rgba(22, 163, 74, 0.07);
+    border-color: rgba(22, 163, 74, 0.30);
+}
+.mf-stat.is-recebido .mf-stat__val { color: rgb(22, 163, 74); }
+.mf-stat.is-recebido .mf-stat__lbl { color: rgb(22, 163, 74); }
+
+.mf-stat.is-pendente {
+    background: rgba(217, 119, 6, 0.07);
+    border-color: rgba(217, 119, 6, 0.30);
+}
+.mf-stat.is-pendente .mf-stat__val { color: rgb(217, 119, 6); }
+.mf-stat.is-pendente .mf-stat__lbl { color: rgb(217, 119, 6); }
+
+.mf-stat.is-vencido {
+    background: rgba(220, 38, 38, 0.07);
+    border-color: rgba(220, 38, 38, 0.30);
+}
+.mf-stat.is-vencido .mf-stat__val { color: rgb(220, 38, 38); }
+.mf-stat.is-vencido .mf-stat__lbl { color: rgb(220, 38, 38); }
+
+.mf-stat.is-neutral {
+    background: var(--m-bg-soft);
+    border-color: var(--m-border);
+}
+
+/* ─── Card-base (Gráfico, Projeção, Lançamentos) ─── */
+.mf-card {
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border);
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+.mf-card__head {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 14px;
+    border-bottom: 1px solid var(--m-border);
+}
+.mf-card__icon {
+    width: 36px;
+    height: 36px;
+    display: grid;
+    place-items: center;
+    border-radius: 9px;
+    flex-shrink: 0;
+    font-size: 1rem;
+}
+.mf-card__icon--primary {
+    background: color-mix(in srgb, var(--p-primary-color) 15%, transparent);
+    color: var(--p-primary-color);
+}
+.mf-card__title {
+    flex: 1;
+    min-width: 0;
+}
+.mf-card__title-text {
+    font-size: 0.92rem;
+    font-weight: 700;
+    color: var(--m-text);
+}
+.mf-card__sub {
+    font-size: 0.74rem;
+    color: var(--m-text-muted);
+    margin-top: 2px;
+}
+.mf-card__action-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    background: transparent;
+    border: none;
+    color: var(--p-primary-color);
+    font-family: inherit;
+    font-size: 0.78rem;
+    font-weight: 600;
+    cursor: pointer;
+    padding: 0;
+    flex-shrink: 0;
+    transition: opacity 140ms ease;
+}
+.mf-card__action-link:hover { opacity: 0.75; }
+.mf-card__action-link > i { font-size: 0.7rem; }
+.mf-card__body {
+    padding: 14px 16px;
+}
+
+/* Gráfico wrapper */
+.mf-chart-wrap {
+    height: 240px;
+}
+
+/* Empty inline (cinza, com ícone) */
+.mf-empty-inline {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 32px 20px;
+    color: var(--m-text-muted);
+    font-size: 0.85rem;
+}
+.mf-empty-inline > i { font-size: 0.92rem; opacity: 0.7; }
+
+/* ─── Cashflow rows ─── */
+.mf-cashflow {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+.mf-cashflow__row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 12px;
+    border-radius: 9px;
+    background: var(--m-bg-medium);
+    border: 1px solid var(--m-border);
+    transition: background-color 140ms ease;
+    flex-wrap: wrap;
+}
+.mf-cashflow__row:hover {
+    background: var(--m-bg-soft-hover);
+}
+.mf-cashflow__mes {
+    font-weight: 700;
+    font-size: 0.78rem;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--m-text);
+    min-width: 56px;
+    flex-shrink: 0;
+}
+.mf-cashflow__line {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+    flex-wrap: wrap;
+    font-size: 0.82rem;
+}
+.mf-cashflow__pos {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    color: rgb(22, 163, 74);
+    font-weight: 600;
+}
+.mf-cashflow__neg {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    color: rgb(220, 38, 38);
+    font-weight: 600;
+}
+.mf-cashflow__sep {
+    color: var(--m-text-faint);
+    opacity: 0.5;
+}
+.mf-cashflow__saldo {
+    font-weight: 700;
+}
+.mf-cashflow__saldo.is-positive { color: rgb(22, 163, 74); }
+.mf-cashflow__saldo.is-negative { color: rgb(220, 38, 38); }
+.mf-cashflow__pos > i, .mf-cashflow__neg > i { font-size: 0.7rem; }
+.mf-cashflow__count {
+    margin-left: auto;
+    flex-shrink: 0;
+}
+
+/* ─── Recent table ─── */
+.mf-recent-table :deep(.p-datatable-thead > tr > th) {
+    background: var(--m-bg-medium) !important;
+    color: var(--m-text);
+    font-size: 0.74rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--m-border);
+}
+.mf-recent-table :deep(.p-datatable-tbody > tr > td) {
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--m-border);
+    background: transparent;
+    font-size: 0.85rem;
+}
+.mf-recent-table :deep(.p-datatable-tbody > tr:hover) {
+    background: var(--m-bg-soft-hover);
+}
+
+.mf-amount {
+    font-weight: 600;
+}
+.mf-amount--pos { color: rgb(22, 163, 74); }
+.mf-amount--neg { color: rgb(220, 38, 38); }
+
+/* ─── Mobile (<1024px) ─── */
+@media (max-width: 1023px) {
+    .mf-page__title > span:first-of-type { display: none; }
+    .mf-act-btn--primary span { display: none; }
+    .mf-act-btn--primary { width: 32px; padding: 0; justify-content: center; }
+    .mf-cashflow__count {
+        order: -1;
+        margin-left: 0;
+    }
+}
+</style>

src/layout/melissa/MelissaLayout.vue

@@ -38,6 +38,11 @@ import MelissaCadastrosRecebidos from './MelissaCadastrosRecebidos.vue';
 import MelissaAgendamentosRecebidos from './MelissaAgendamentosRecebidos.vue';
 import MelissaLinkExterno from './MelissaLinkExterno.vue';
 import MelissaNotificacoes from './MelissaNotificacoes.vue';
+import MelissaFinanceiro from './MelissaFinanceiro.vue';
+import MelissaFinanceiroLancamentos from './MelissaFinanceiroLancamentos.vue';
+import MelissaDocumentos from './MelissaDocumentos.vue';
+import MelissaDocumentosTemplates from './MelissaDocumentosTemplates.vue';
+import MelissaRelatorios from './MelissaRelatorios.vue';
 import MelissaMedicos from './MelissaMedicos.vue';
 import MelissaEventoPanel from './MelissaEventoPanel.vue';
 import { TOQUES, playToque } from './melissaToques';
@@ -176,10 +181,9 @@ const SECOES = {
 };
 
 // Set de keys que renderizam via MelissaEmbed (Onda 1 — pages 1-coluna).
-// 'link-externo' e 'notificacoes' foram promovidos pra páginas nativas
+// Quase todas foram promovidas pra páginas nativas; resta apenas
-// (MelissaLinkExterno / MelissaNotificacoes) pra remover o triplo-header
+// 'online-scheduling' por enquanto.
-// que aparecia no embed.
+const MELISSA_EMBED_KEYS = ['online-scheduling'];
-const MELISSA_EMBED_KEYS = ['financeiro', 'financeiro-lancamentos', 'documentos', 'documentos-templates', 'online-scheduling', 'relatorios'];
 
 // Slugs reservados pra páginas dedicadas (não-config) — agenda, pacientes,
 // conversas etc. + as MELISSA_EMBED_KEYS. Usado no isConfigRoute pra
@@ -187,7 +191,8 @@ const MELISSA_EMBED_KEYS = ['financeiro', 'financeiro-lancamentos', 'documentos'
 const MELISSA_NON_CONFIG_SLUGS = new Set([
     'agenda', 'pacientes', 'compromissos', 'recorrencias', 'conversas',
     'tags', 'grupos', 'cadastros-recebidos', 'medicos', 'agendamentos-recebidos',
-    'link-externo', 'notificacoes',
+    'link-externo', 'notificacoes', 'financeiro', 'financeiro-lancamentos',
+    'documentos', 'documentos-templates', 'relatorios',
     ...MELISSA_EMBED_KEYS
 ]);
 // Aliases "bonitos" + INLINE_KEYS reconhecidos pelo MelissaConfiguracoes.
@@ -2177,6 +2182,31 @@ function onKeydown(e) {
             @close="fecharSecao"
         />
 
+        <MelissaFinanceiro
+            v-if="layoutReady && secaoAberta === 'financeiro'"
+            @close="fecharSecao"
+        />
+
+        <MelissaFinanceiroLancamentos
+            v-if="layoutReady && secaoAberta === 'financeiro-lancamentos'"
+            @close="fecharSecao"
+        />
+
+        <MelissaDocumentos
+            v-if="layoutReady && secaoAberta === 'documentos'"
+            @close="fecharSecao"
+        />
+
+        <MelissaDocumentosTemplates
+            v-if="layoutReady && secaoAberta === 'documentos-templates'"
+            @close="fecharSecao"
+        />
+
+        <MelissaRelatorios
+            v-if="layoutReady && secaoAberta === 'relatorios'"
+            @close="fecharSecao"
+        />
+
         <MelissaConfiguracoes
             v-if="layoutReady && isMelissaConfigRoute(secaoAberta)"
             :secao-rota="secaoAberta"