diff --git a/src/layout/melissa/MelissaCronometro.vue b/src/layout/melissa/MelissaCronometro.vue
index 847c991..2b11c02 100644
--- a/src/layout/melissa/MelissaCronometro.vue
+++ b/src/layout/melissa/MelissaCronometro.vue
@@ -112,6 +112,8 @@ function toggle() {
         if (timer) clearInterval(timer);
         timer = null;
         running.value = false;
+        // Zera ao parar — sessão acabou, deixa pronto pra próxima
+        seconds.value = props.duracaoMinutos * 60;
     } else {
         if (timer) clearInterval(timer);
         timer = setInterval(() => {
diff --git a/src/layout/melissa/MelissaLayout.vue b/src/layout/melissa/MelissaLayout.vue
index eb8f3c0..eafa16c 100644
--- a/src/layout/melissa/MelissaLayout.vue
+++ b/src/layout/melissa/MelissaLayout.vue
@@ -15,6 +15,7 @@
  * Rota atual (sandbox): /preview/melissa
  */
 import { ref, computed, watch, onMounted, onBeforeUnmount, provide } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
 import { useToast } from 'primevue/usetoast';
 import { useLayout } from '@/layout/composables/layout';
 import { applyThemeEngine } from '@/theme/theme.options';
@@ -91,16 +92,26 @@ const SECOES = {
     medicos: { label: 'Médicos e referências', icon: 'pi pi-user-edit', descricao: 'Profissionais que encaminham ou recebem pacientes.' }
 };
 
-const secaoAberta = ref(null); // chave em SECOES, ou null
+// Seção ativa = param `:secao?` da rota. URL é a fonte da verdade pra
+// permitir back/forward e deep-link (ex: /preview/melissa/agenda abre o
+// overlay da agenda direto). Se a chave for inválida, vira null.
+const router = useRouter();
+const route = useRoute();
+const secaoAberta = computed(() => {
+    const s = route.params?.secao;
+    return s && SECOES[s] ? s : null;
+});
 
 function abrirSecao(key) {
     // Fecha overlays paralelos pra evitar empilhamento
     workspaceOpen.value = false;
     eventoSelecionado.value = null;
-    secaoAberta.value = key;
+    if (key === secaoAberta.value) return; // no-op, evita push duplicado
+    router.push({ name: 'PreviewMelissa', params: { secao: key } });
 }
 function fecharSecao() {
-    secaoAberta.value = null;
+    if (!secaoAberta.value) return;
+    router.push({ name: 'PreviewMelissa', params: {} });
 }
 
 // Prefs de layout/UI (toque, fundo, opacidade, formato hora)
diff --git a/src/layout/melissa/MelissaPacientes.vue b/src/layout/melissa/MelissaPacientes.vue
new file mode 100644
index 0000000..d55912a
--- /dev/null
+++ b/src/layout/melissa/MelissaPacientes.vue
@@ -0,0 +1,1721 @@
+<script setup>
+/*
+ * MelissaPacientes — Sessão Pacientes como página fullscreen dentro de Melissa
+ * --------------------------------------------------
+ * Mesma convenção das "Melissa Pages" (espelha MelissaAgenda):
+ *   - 6px de padding do viewport
+ *   - Glass container com cantos arredondados
+ *   - Bottom inset reservado pra .melissa-dock (76px)
+ *
+ * Layout 3-col:
+ *   - COL 1 — Aside esquerda (~240px): filtros (status / grupos / tags)
+ *   - COL 2 — Lista central (flex 1): search + cards de pacientes
+ *   - COL 3 — Quick view direita (~320px): KPIs + paciente selecionado + ações
+ *
+ * Dados:
+ *   - useMelissaPacientes({ onlyActive: false }) — traz todos os status
+ *   - patient_groups + patient_tags do tenant + vínculos patient_group_patient
+ *     e patient_patient_tag (via patientsRepository.listGroupsByPatient/Tags...)
+ *
+ * Integrações:
+ *   - PatientProntuario (overlay dialog) — abre via duplo-click no card ou
+ *     botão "Abrir prontuário" da COL 3
+ *   - PatientCadastroDialog — cadastro completo / edição
+ *   - PatientCreatePopover + ComponentCadastroRapido — fluxo de novo paciente
+ *   - conversationDrawerStore — botão WhatsApp da COL 3
+ */
+import { ref, computed, watch, onMounted } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { useConfirm } from 'primevue/useconfirm';
+import { useMelissaPacientes } from './composables/useMelissaPacientes';
+import { useTenantStore } from '@/stores/tenantStore';
+import { supabase } from '@/lib/supabase/client';
+import { useConversationDrawerStore } from '@/stores/conversationDrawerStore';
+import {
+    listGroups as repoListGroups,
+    listTags as repoListTags,
+    listGroupsByPatient,
+    listTagsByPatient,
+    getSessionCounts,
+    softDeletePatient
+} from '@/features/patients/services/patientsRepository';
+import PatientProntuario from '@/features/patients/prontuario/PatientProntuario.vue';
+import PatientCreatePopover from '@/components/ui/PatientCreatePopover.vue';
+import PatientCadastroDialog from '@/components/ui/PatientCadastroDialog.vue';
+import ComponentCadastroRapido from '@/components/ComponentCadastroRapido.vue';
+// Dialog do PrimeVue: auto-importado via PrimeVueResolver — NÃO importar
+// explicitamente (causa "emitsOptions: null" por instância duplicada).
+
+const emit = defineEmits(['close', 'patient-created', 'goto-agenda']);
+
+const toast = useToast();
+const confirm = useConfirm();
+const tenantStore = useTenantStore();
+const conversationDrawerStore = useConversationDrawerStore();
+
+// ── Pacientes (todos os status) ───────────────────────────────
+const { pacientes, loading: loadingPacientes, refetch: refetchPacientes } =
+    useMelissaPacientes({ onlyActive: false });
+
+// ── Grupos / Tags (catálogo + vínculos por paciente) ──────────
+const grupos = ref([]);   // [{ id, nome, cor, ... }]
+const tags = ref([]);     // [{ id, nome, cor, ... }]
+const groupsByPatient = ref(new Map());  // patientId → [{id,nome,cor}]
+const tagsByPatient = ref(new Map());    // patientId → [{id,nome,cor}]
+const sessionCountByPatient = ref(new Map()); // patientId → count
+
+async function loadCatalogos() {
+    if (typeof tenantStore.ensureLoaded === 'function') {
+        await tenantStore.ensureLoaded();
+    }
+    const tenantId = tenantStore.activeTenantId || tenantStore.tenantId || null;
+    if (!tenantId) return;
+
+    const { data: u } = await supabase.auth.getUser();
+    const ownerId = u?.user?.id || null;
+
+    try {
+        const [g, t] = await Promise.all([
+            repoListGroups({ tenantId, ownerId }),
+            repoListTags({ tenantId, ownerId })
+        ]);
+        grupos.value = g || [];
+        tags.value = t || [];
+    } catch (e) {
+        // eslint-disable-next-line no-console
+        console.warn('[MelissaPacientes] catálogo grupos/tags falhou:', e?.message);
+    }
+}
+
+async function loadVinculos() {
+    const ids = pacientes.value.map((p) => p.id).filter(Boolean);
+    if (!ids.length) {
+        groupsByPatient.value = new Map();
+        tagsByPatient.value = new Map();
+        sessionCountByPatient.value = new Map();
+        return;
+    }
+    const tenantId = tenantStore.activeTenantId || tenantStore.tenantId || null;
+
+    try {
+        const [pg, pt, sc] = await Promise.all([
+            listGroupsByPatient(ids, { tenantId }),
+            listTagsByPatient(ids, { tenantId }),
+            getSessionCounts(ids)
+        ]);
+
+        const gById = new Map(grupos.value.map((g) => [g.id, g]));
+        const gMap = new Map();
+        for (const rel of (pg || [])) {
+            const arr = gMap.get(rel.patient_id) || [];
+            const g = gById.get(rel.patient_group_id);
+            if (g) arr.push(g);
+            gMap.set(rel.patient_id, arr);
+        }
+        groupsByPatient.value = gMap;
+
+        const tById = new Map(tags.value.map((t) => [t.id, t]));
+        const tMap = new Map();
+        for (const rel of (pt || [])) {
+            const arr = tMap.get(rel.patient_id) || [];
+            const t = tById.get(rel.tag_id);
+            if (t) arr.push(t);
+            tMap.set(rel.patient_id, arr);
+        }
+        tagsByPatient.value = tMap;
+
+        const cMap = new Map();
+        for (const r of (sc || [])) {
+            if (r?.patient_id) cMap.set(r.patient_id, r.session_count || 0);
+        }
+        sessionCountByPatient.value = cMap;
+    } catch (e) {
+        // eslint-disable-next-line no-console
+        console.warn('[MelissaPacientes] vínculos falharam:', e?.message);
+    }
+}
+
+onMounted(loadCatalogos);
+
+// Watcher: quando lista de pacientes mudar (mount inicial, refetch após
+// criar/editar), recarrega vínculos.
+watch(
+    () => pacientes.value.length,
+    () => loadVinculos()
+);
+
+async function refetchTudo() {
+    await refetchPacientes();
+    await loadVinculos();
+    emit('patient-created'); // avisa parent pra refrescar pacientesReais
+}
+
+// ── Estado de UI ───────────────────────────────────────────────
+const busca = ref('');
+const statusFiltro = ref('ativos'); // 'todos' | 'ativos' | 'inativos' | 'arquivados'
+const grupoFiltroId = ref(null);    // null = todos
+const tagFiltroId = ref(null);      // null = todas
+const pacienteSelecionadoId = ref(null);
+
+// ── Helpers ────────────────────────────────────────────────────
+function normalize(s) {
+    return String(s || '').normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase().trim();
+}
+
+function pacienteIniciais(nome) {
+    if (!nome) return '?';
+    const partes = String(nome).trim().split(/\s+/);
+    if (partes.length === 1) return partes[0][0]?.toUpperCase() || '?';
+    return (partes[0][0] + partes[partes.length - 1][0]).toUpperCase();
+}
+
+function fmtUltimaSessao(iso) {
+    if (!iso) return 'Sem atendimento';
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime())) return 'Sem atendimento';
+    const dia = String(d.getDate()).padStart(2, '0');
+    const mes = String(d.getMonth() + 1).padStart(2, '0');
+    return `${dia}/${mes}`;
+}
+
+const NOVO_THRESHOLD_MS = 7 * 24 * 60 * 60 * 1000;
+function isPacienteNovo(p) {
+    if (!p?.created_at) return false;
+    const t = new Date(p.created_at).getTime();
+    if (Number.isNaN(t)) return false;
+    return Date.now() - t < NOVO_THRESHOLD_MS;
+}
+
+function fmtPhone(p) {
+    const v = String(p || '').replace(/\D/g, '');
+    if (v.length === 11) return `(${v.slice(0, 2)}) ${v.slice(2, 7)}-${v.slice(7)}`;
+    if (v.length === 10) return `(${v.slice(0, 2)}) ${v.slice(2, 6)}-${v.slice(6)}`;
+    return p || '';
+}
+
+// Aniversário no mês corrente — flag visual no detail
+function aniversarioEsteMes(iso) {
+    if (!iso) return false;
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime())) return false;
+    return d.getMonth() === new Date().getMonth();
+}
+
+// ── Status: contagens + filtragem ──────────────────────────────
+const STATUS_OPTIONS = [
+    { key: 'todos',       label: 'Todos',       icon: 'pi pi-users' },
+    { key: 'ativos',      label: 'Ativos',      icon: 'pi pi-check-circle' },
+    { key: 'inativos',    label: 'Inativos',    icon: 'pi pi-pause-circle' },
+    { key: 'arquivados',  label: 'Arquivados',  icon: 'pi pi-inbox' }
+];
+
+const contagens = computed(() => {
+    const c = { todos: 0, ativos: 0, inativos: 0, arquivados: 0 };
+    for (const p of pacientes.value) {
+        c.todos++;
+        const st = String(p.status || '').toLowerCase();
+        if (st === 'ativo') c.ativos++;
+        else if (st === 'inativo') c.inativos++;
+        else if (st === 'arquivado') c.arquivados++;
+    }
+    return c;
+});
+
+const pacientesFiltrados = computed(() => {
+    const q = normalize(busca.value);
+    const filtroStatus = statusFiltro.value;
+    const filtroGrupo = grupoFiltroId.value;
+    const filtroTag = tagFiltroId.value;
+
+    return pacientes.value.filter((p) => {
+        // status
+        if (filtroStatus !== 'todos') {
+            const st = String(p.status || '').toLowerCase();
+            if (filtroStatus === 'ativos'      && st !== 'ativo')      return false;
+            if (filtroStatus === 'inativos'    && st !== 'inativo')    return false;
+            if (filtroStatus === 'arquivados'  && st !== 'arquivado')  return false;
+        }
+        // grupo
+        if (filtroGrupo) {
+            const gs = groupsByPatient.value.get(p.id) || [];
+            if (!gs.some((g) => g.id === filtroGrupo)) return false;
+        }
+        // tag
+        if (filtroTag) {
+            const ts = tagsByPatient.value.get(p.id) || [];
+            if (!ts.some((t) => t.id === filtroTag)) return false;
+        }
+        // busca
+        if (!q) return true;
+        return normalize(p.nome).includes(q) || normalize(p.email).includes(q);
+    });
+});
+
+const pacientesOrdenados = computed(() => {
+    const novos = [];
+    const resto = [];
+    for (const p of pacientesFiltrados.value) {
+        if (isPacienteNovo(p)) novos.push(p);
+        else resto.push(p);
+    }
+    novos.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
+    return [...novos, ...resto];
+});
+
+// ── KPIs (COL 3) ────────────────────────────────────────────────
+const RECENTE_THRESHOLD_MS = 14 * 24 * 60 * 60 * 1000;
+const kpis = computed(() => {
+    const total = pacientes.value.length;
+    let novos = 0;
+    let recentes = 0;
+    let aniversariantesMes = 0;
+    const agora = Date.now();
+    const mesAtual = new Date().getMonth();
+    for (const p of pacientes.value) {
+        if (isPacienteNovo(p)) novos++;
+        if (p.last_attended_at) {
+            const t = new Date(p.last_attended_at).getTime();
+            if (!Number.isNaN(t) && agora - t < RECENTE_THRESHOLD_MS) recentes++;
+        }
+        if (p.data_nascimento) {
+            const d = new Date(p.data_nascimento);
+            if (!Number.isNaN(d.getTime()) && d.getMonth() === mesAtual) aniversariantesMes++;
+        }
+    }
+    return { total, novos, recentes, aniversariantesMes };
+});
+
+// ── Seleção ────────────────────────────────────────────────────
+const pacienteSelecionado = computed(() =>
+    pacientes.value.find((p) => p.id === pacienteSelecionadoId.value) || null
+);
+
+const grupoCorById = (id) => grupos.value.find((g) => g.id === id)?.cor || null;
+const tagCorById = (id) => tags.value.find((t) => t.id === id)?.cor || null;
+
+const selectedGroups = computed(() => {
+    if (!pacienteSelecionadoId.value) return [];
+    return groupsByPatient.value.get(pacienteSelecionadoId.value) || [];
+});
+const selectedTags = computed(() => {
+    if (!pacienteSelecionadoId.value) return [];
+    return tagsByPatient.value.get(pacienteSelecionadoId.value) || [];
+});
+const selectedSessionCount = computed(() => {
+    if (!pacienteSelecionadoId.value) return 0;
+    return sessionCountByPatient.value.get(pacienteSelecionadoId.value) || 0;
+});
+
+function selecionarPaciente(id) {
+    pacienteSelecionadoId.value = pacienteSelecionadoId.value === id ? null : id;
+}
+
+function limparSelecao() {
+    pacienteSelecionadoId.value = null;
+}
+
+function limparFiltros() {
+    busca.value = '';
+    statusFiltro.value = 'ativos';
+    grupoFiltroId.value = null;
+    tagFiltroId.value = null;
+}
+
+// ── Cadastro / edição / prontuário ─────────────────────────────
+const createPopoverRef = ref(null);
+const cadastroFullDialog = ref(false);
+const quickDialog = ref(false);
+const editPatientId = ref(null);
+
+const prontuarioOpen = ref(false);
+const prontuarioPatient = ref(null);
+
+function openCreatePopover(e) {
+    createPopoverRef.value?.toggle(e);
+}
+function openQuickCreate() {
+    quickDialog.value = true;
+}
+function goCreateFull() {
+    editPatientId.value = null;
+    cadastroFullDialog.value = true;
+}
+function onPatientCreated() {
+    refetchTudo();
+}
+
+function abrirProntuario(p) {
+    if (!p) return;
+    prontuarioPatient.value = { ...p };
+    prontuarioOpen.value = true;
+}
+
+function editarPaciente(p) {
+    if (!p?.id) return;
+    editPatientId.value = String(p.id);
+    cadastroFullDialog.value = true;
+}
+
+function abrirWhatsapp(p) {
+    if (!p?.id) {
+        toast.add({ severity: 'warn', summary: 'Paciente sem id', life: 2000 });
+        return;
+    }
+    conversationDrawerStore.openForPatient(String(p.id));
+}
+
+function confirmarRemover(p) {
+    if (!p?.id) return;
+    confirm.require({
+        message: `Arquivar "${p.nome}"? O paciente sairá da lista ativa, mas pode ser restaurado depois.`,
+        header: 'Arquivar paciente',
+        icon: 'pi pi-exclamation-triangle',
+        acceptLabel: 'Arquivar',
+        rejectLabel: 'Cancelar',
+        acceptClass: 'p-button-danger',
+        accept: async () => {
+            try {
+                const tenantId = tenantStore.activeTenantId || tenantStore.tenantId;
+                await softDeletePatient(p.id, { tenantId });
+                toast.add({ severity: 'success', summary: 'Arquivado', detail: p.nome, life: 2200 });
+                if (pacienteSelecionadoId.value === p.id) limparSelecao();
+                await refetchTudo();
+            } catch (e) {
+                toast.add({
+                    severity: 'error',
+                    summary: 'Falha ao arquivar',
+                    detail: e?.message || 'Tente novamente.',
+                    life: 4000
+                });
+            }
+        }
+    });
+}
+
+// ── Sessões do paciente (dialog) ───────────────────────────────
+const sessoesDialogOpen = ref(false);
+const sessoesPaciente = ref(null);
+const sessoesLista = ref([]);
+const sessoesLoading = ref(false);
+
+async function verSessoes(p) {
+    if (!p?.id) return;
+    sessoesPaciente.value = p;
+    sessoesDialogOpen.value = true;
+    sessoesLista.value = [];
+    sessoesLoading.value = true;
+    try {
+        const tenantId = tenantStore.activeTenantId || tenantStore.tenantId;
+        const { data, error } = await supabase
+            .from('agenda_eventos')
+            .select('id, inicio_em, fim_em, tipo, status, titulo, modalidade')
+            .eq('tenant_id', tenantId)
+            .eq('patient_id', p.id)
+            .order('inicio_em', { ascending: false })
+            .limit(50);
+        if (error) throw error;
+        sessoesLista.value = data || [];
+    } catch (e) {
+        toast.add({
+            severity: 'error',
+            summary: 'Falha ao carregar sessões',
+            detail: e?.message || 'Tente novamente.',
+            life: 4000
+        });
+    } finally {
+        sessoesLoading.value = false;
+    }
+}
+
+function fmtSessaoData(iso) {
+    if (!iso) return '—';
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime())) return '—';
+    const dia = String(d.getDate()).padStart(2, '0');
+    const mes = String(d.getMonth() + 1).padStart(2, '0');
+    const ano = d.getFullYear();
+    const h = String(d.getHours()).padStart(2, '0');
+    const min = String(d.getMinutes()).padStart(2, '0');
+    return `${dia}/${mes}/${ano} ${h}:${min}`;
+}
+
+function sessaoStatusLabel(s) {
+    const v = String(s || '').toLowerCase();
+    if (v === 'realizado' || v === 'realizada') return 'Realizado';
+    if (v === 'faltou') return 'Falta';
+    if (v === 'cancelado' || v === 'cancelada') return 'Cancelado';
+    if (v === 'remarcar') return 'Remarcar';
+    if (v === 'agendado') return 'Agendado';
+    return s || '—';
+}
+
+function sessaoStatusColor(s) {
+    const v = String(s || '').toLowerCase();
+    if (v === 'realizado' || v === 'realizada') return 'text-emerald-400';
+    if (v === 'faltou') return 'text-red-400';
+    if (v === 'cancelado' || v === 'cancelada') return 'text-white/40';
+    if (v === 'remarcar') return 'text-amber-400';
+    return 'text-blue-300';
+}
+</script>
+
+<template>
+    <section class="mp-page">
+        <!-- Header -->
+        <header class="mp-page__head">
+            <div class="mp-page__title">
+                <i class="pi pi-users text-white/85" />
+                <span>Pacientes</span>
+                <span class="mp-page__count">{{ pacientesOrdenados.length }}</span>
+                <span v-if="loadingPacientes" class="mp-page__loading">
+                    <i class="pi pi-spin pi-spinner text-xs" />
+                </span>
+            </div>
+            <div class="flex items-center gap-2">
+                <button
+                    class="mp-header-btn"
+                    title="Ir pra Agenda"
+                    @click="emit('goto-agenda')"
+                >
+                    <i class="pi pi-calendar text-xs" />
+                    <span>Ir pra agenda</span>
+                </button>
+                <button class="mp-close" title="Voltar ao resumo (Esc)" @click="emit('close')">
+                    <i class="pi pi-times text-sm" />
+                </button>
+            </div>
+        </header>
+
+        <div class="mp-body">
+            <!-- ═══ COL 1: Filtros ═══════════════════════════════════════ -->
+            <aside class="mp-side">
+                <div class="mp-side__head">
+                    <span class="mp-side__title">Status</span>
+                </div>
+                <div class="mp-status-list">
+                    <button
+                        v-for="s in STATUS_OPTIONS"
+                        :key="s.key"
+                        class="mp-status-pill"
+                        :class="{ 'is-active': statusFiltro === s.key }"
+                        @click="statusFiltro = s.key"
+                    >
+                        <i :class="s.icon" class="text-xs" />
+                        <span class="flex-1 text-left">{{ s.label }}</span>
+                        <span class="mp-status-pill__count">{{ contagens[s.key] }}</span>
+                    </button>
+                </div>
+
+                <div class="mp-side__divider" />
+
+                <div class="mp-side__head">
+                    <span class="mp-side__title">Grupos</span>
+                    <button
+                        v-if="grupoFiltroId"
+                        class="mp-side__clear"
+                        title="Limpar filtro de grupo"
+                        @click="grupoFiltroId = null"
+                    >
+                        <i class="pi pi-times text-[0.6rem]" />
+                    </button>
+                </div>
+                <div class="mp-chip-list">
+                    <button
+                        v-for="g in grupos"
+                        :key="g.id"
+                        class="mp-chip"
+                        :class="{ 'is-active': grupoFiltroId === g.id }"
+                        :style="g.cor ? { borderLeftColor: g.cor } : null"
+                        @click="grupoFiltroId = grupoFiltroId === g.id ? null : g.id"
+                    >
+                        <span class="mp-chip__dot" :style="{ backgroundColor: g.cor || 'var(--m-text-muted)' }" />
+                        <span class="mp-chip__name truncate">{{ g.nome || g.name }}</span>
+                    </button>
+                    <div v-if="grupos.length === 0" class="mp-side__placeholder">
+                        <span>Nenhum grupo</span>
+                    </div>
+                </div>
+
+                <div class="mp-side__divider" />
+
+                <div class="mp-side__head">
+                    <span class="mp-side__title">Tags</span>
+                    <button
+                        v-if="tagFiltroId"
+                        class="mp-side__clear"
+                        title="Limpar filtro de tag"
+                        @click="tagFiltroId = null"
+                    >
+                        <i class="pi pi-times text-[0.6rem]" />
+                    </button>
+                </div>
+                <div class="mp-chip-list">
+                    <button
+                        v-for="t in tags"
+                        :key="t.id"
+                        class="mp-chip"
+                        :class="{ 'is-active': tagFiltroId === t.id }"
+                        :style="t.cor ? { borderLeftColor: t.cor } : null"
+                        @click="tagFiltroId = tagFiltroId === t.id ? null : t.id"
+                    >
+                        <span class="mp-chip__dot" :style="{ backgroundColor: t.cor || 'var(--m-text-muted)' }" />
+                        <span class="mp-chip__name truncate">{{ t.nome || t.name }}</span>
+                    </button>
+                    <div v-if="tags.length === 0" class="mp-side__placeholder">
+                        <span>Nenhuma tag</span>
+                    </div>
+                </div>
+
+                <div v-if="busca || grupoFiltroId || tagFiltroId || statusFiltro !== 'ativos'" class="mp-side__footer">
+                    <button class="mp-btn mp-btn--ghost mp-btn--block" @click="limparFiltros">
+                        <i class="pi pi-filter-slash text-xs" />
+                        Limpar filtros
+                    </button>
+                </div>
+            </aside>
+
+            <!-- ═══ COL 2: Lista central ═════════════════════════════════ -->
+            <div class="mp-list">
+                <div class="mp-list__toolbar">
+                    <div class="mp-search">
+                        <i class="pi pi-search mp-search__icon" />
+                        <input
+                            v-model="busca"
+                            type="text"
+                            placeholder="Buscar por nome ou email…"
+                            class="mp-search__input"
+                        />
+                    </div>
+                    <button class="mp-btn mp-btn--primary" @click="openCreatePopover">
+                        <i class="pi pi-plus text-xs" />
+                        <span>Novo paciente</span>
+                    </button>
+                </div>
+
+                <div class="mp-list__body">
+                    <div v-if="pacientesOrdenados.length === 0" class="mp-empty-state">
+                        <i class="pi pi-users mp-empty-state__icon" />
+                        <div class="mp-empty-state__title">Nenhum paciente encontrado</div>
+                        <div class="mp-empty-state__hint">
+                            <template v-if="busca || grupoFiltroId || tagFiltroId || statusFiltro !== 'ativos'">
+                                Ajuste os filtros ou limpe a busca pra ver mais resultados.
+                            </template>
+                            <template v-else>
+                                Comece cadastrando seu primeiro paciente.
+                            </template>
+                        </div>
+                        <div class="mp-empty-state__actions">
+                            <button
+                                v-if="busca || grupoFiltroId || tagFiltroId || statusFiltro !== 'ativos'"
+                                class="mp-btn mp-btn--primary"
+                                @click="limparFiltros"
+                            >
+                                <i class="pi pi-filter-slash text-xs" />
+                                Limpar busca
+                            </button>
+                            <button class="mp-btn mp-btn--primary" @click="openCreatePopover">
+                                <i class="pi pi-plus text-xs" />
+                                Novo paciente
+                            </button>
+                        </div>
+                    </div>
+
+                    <button
+                        v-for="p in pacientesOrdenados"
+                        :key="p.id"
+                        class="mp-card"
+                        :class="{
+                            'is-active': pacienteSelecionadoId === p.id,
+                            'is-novo': isPacienteNovo(p)
+                        }"
+                        @click="selecionarPaciente(p.id)"
+                        @dblclick="abrirProntuario(p)"
+                    >
+                        <span class="mp-card__avatar">
+                            <img v-if="p.avatar_url" :src="p.avatar_url" :alt="p.nome" />
+                            <span v-else>{{ pacienteIniciais(p.nome) }}</span>
+                        </span>
+                        <div class="mp-card__main">
+                            <div class="mp-card__name-row">
+                                <span class="mp-card__name">{{ p.nome }}</span>
+                                <span v-if="isPacienteNovo(p)" class="mp-card__novo">novo</span>
+                                <span
+                                    v-if="p.status && p.status !== 'Ativo'"
+                                    class="mp-card__status"
+                                >
+                                    {{ p.status }}
+                                </span>
+                            </div>
+                            <div class="mp-card__meta">
+                                <span v-if="p.email" class="mp-card__meta-item">
+                                    <i class="pi pi-envelope text-[0.65rem]" />
+                                    {{ p.email }}
+                                </span>
+                                <span v-if="p.telefone" class="mp-card__meta-item">
+                                    <i class="pi pi-phone text-[0.65rem]" />
+                                    {{ fmtPhone(p.telefone) }}
+                                </span>
+                            </div>
+                            <!-- Tags inline (até 3) -->
+                            <div
+                                v-if="(tagsByPatient.get(p.id) || []).length > 0"
+                                class="mp-card__tags"
+                            >
+                                <span
+                                    v-for="t in (tagsByPatient.get(p.id) || []).slice(0, 3)"
+                                    :key="t.id"
+                                    class="mp-card__tag"
+                                    :style="{ backgroundColor: (t.cor || '#94a3b8') + '22', color: t.cor || 'var(--m-text-muted)', borderColor: (t.cor || '#94a3b8') + '50' }"
+                                >
+                                    {{ t.nome || t.name }}
+                                </span>
+                                <span
+                                    v-if="(tagsByPatient.get(p.id) || []).length > 3"
+                                    class="mp-card__tag-more"
+                                >
+                                    +{{ (tagsByPatient.get(p.id) || []).length - 3 }}
+                                </span>
+                            </div>
+                        </div>
+                        <div class="mp-card__last">
+                            <div class="mp-card__last-label">Última</div>
+                            <div class="mp-card__last-date">{{ fmtUltimaSessao(p.last_attended_at) }}</div>
+                        </div>
+                        <!-- Ações inline: visíveis no hover do card e no card ativo
+                             (sempre visíveis em mobile via media-query). stopPropagation
+                             em todos pra não disparar selecionarPaciente do botão pai. -->
+                        <div class="mp-card__actions" @click.stop>
+                            <button
+                                class="mp-card__action"
+                                title="Abrir prontuário"
+                                @click="abrirProntuario(p)"
+                            >
+                                <i class="pi pi-file" />
+                            </button>
+                            <button
+                                class="mp-card__action"
+                                title="Ver sessões"
+                                @click="verSessoes(p)"
+                            >
+                                <i class="pi pi-history" />
+                            </button>
+                            <button
+                                class="mp-card__action"
+                                title="Conversar (WhatsApp)"
+                                @click="abrirWhatsapp(p)"
+                            >
+                                <i class="pi pi-whatsapp" />
+                            </button>
+                            <button
+                                class="mp-card__action"
+                                title="Editar"
+                                @click="editarPaciente(p)"
+                            >
+                                <i class="pi pi-pencil" />
+                            </button>
+                            <button
+                                class="mp-card__action mp-card__action--danger"
+                                title="Arquivar"
+                                @click="confirmarRemover(p)"
+                            >
+                                <i class="pi pi-trash" />
+                            </button>
+                        </div>
+                    </button>
+                </div>
+            </div>
+
+            <!-- ═══ COL 3: Quick view ════════════════════════════════════ -->
+            <aside class="mp-quick">
+                <!-- KPIs sempre visíveis no topo -->
+                <div class="mp-w">
+                    <div class="mp-w__head">
+                        <span class="mp-w__title">
+                            <i class="pi pi-chart-bar" /> Visão geral
+                        </span>
+                    </div>
+                    <div class="mp-stats">
+                        <div class="mp-stat">
+                            <div class="mp-stat__val">{{ kpis.total }}</div>
+                            <div class="mp-stat__lbl">Total</div>
+                        </div>
+                        <div class="mp-stat">
+                            <div class="mp-stat__val">{{ kpis.novos }}</div>
+                            <div class="mp-stat__lbl">Novos<br><span class="text-[0.6rem] opacity-60">7 dias</span></div>
+                        </div>
+                        <div class="mp-stat">
+                            <div class="mp-stat__val">{{ kpis.recentes }}</div>
+                            <div class="mp-stat__lbl">Atendidos<br><span class="text-[0.6rem] opacity-60">14 dias</span></div>
+                        </div>
+                    </div>
+                    <div v-if="kpis.aniversariantesMes > 0" class="mp-aniv">
+                        <i class="pi pi-gift" />
+                        <span>{{ kpis.aniversariantesMes }} aniversariante{{ kpis.aniversariantesMes > 1 ? 's' : '' }} este mês</span>
+                    </div>
+                </div>
+
+                <div class="mp-w__divider" />
+
+                <!-- Paciente selecionado: detalhes + ações -->
+                <div v-if="pacienteSelecionado" class="mp-detail">
+                    <button class="mp-detail__close" title="Limpar seleção" @click="limparSelecao">
+                        <i class="pi pi-times text-xs" />
+                    </button>
+                    <div class="mp-detail__avatar">
+                        <img v-if="pacienteSelecionado.avatar_url" :src="pacienteSelecionado.avatar_url" :alt="pacienteSelecionado.nome" />
+                        <span v-else>{{ pacienteIniciais(pacienteSelecionado.nome) }}</span>
+                    </div>
+                    <div class="mp-detail__name">{{ pacienteSelecionado.nome }}</div>
+                    <div class="mp-detail__status">
+                        <i
+                            class="pi pi-circle-fill text-[0.5rem]"
+                            :class="pacienteSelecionado.status === 'Ativo' ? 'text-emerald-400' : 'text-white/40'"
+                        />
+                        {{ pacienteSelecionado.status || 'Ativo' }}
+                        <span v-if="aniversarioEsteMes(pacienteSelecionado.data_nascimento)" class="mp-detail__aniv-badge">
+                            <i class="pi pi-gift text-[0.6rem]" /> aniversário
+                        </span>
+                    </div>
+
+                    <div class="mp-detail__rows">
+                        <div v-if="pacienteSelecionado.email" class="mp-detail__row">
+                            <i class="pi pi-envelope" />
+                            <span class="truncate">{{ pacienteSelecionado.email }}</span>
+                        </div>
+                        <div v-if="pacienteSelecionado.telefone" class="mp-detail__row">
+                            <i class="pi pi-phone" />
+                            <span>{{ fmtPhone(pacienteSelecionado.telefone) }}</span>
+                        </div>
+                        <div class="mp-detail__row">
+                            <i class="pi pi-calendar" />
+                            <span>Última: {{ fmtUltimaSessao(pacienteSelecionado.last_attended_at) }}</span>
+                        </div>
+                        <div class="mp-detail__row">
+                            <i class="pi pi-history" />
+                            <span>{{ selectedSessionCount }} {{ selectedSessionCount === 1 ? 'sessão' : 'sessões' }}</span>
+                        </div>
+                    </div>
+
+                    <!-- Grupos + tags do paciente -->
+                    <div v-if="selectedGroups.length > 0 || selectedTags.length > 0" class="mp-detail__chips">
+                        <span
+                            v-for="g in selectedGroups"
+                            :key="'g' + g.id"
+                            class="mp-detail__chip"
+                            :style="{ borderLeftColor: g.cor || 'var(--m-text-muted)' }"
+                        >
+                            <span class="mp-chip__dot" :style="{ backgroundColor: g.cor || 'var(--m-text-muted)' }" />
+                            {{ g.nome || g.name }}
+                        </span>
+                        <span
+                            v-for="t in selectedTags"
+                            :key="'t' + t.id"
+                            class="mp-detail__chip mp-detail__chip--tag"
+                            :style="{ backgroundColor: (t.cor || '#94a3b8') + '20', borderColor: (t.cor || '#94a3b8') + '60', color: t.cor || 'var(--m-text)' }"
+                        >
+                            {{ t.nome || t.name }}
+                        </span>
+                    </div>
+
+                    <div class="mp-detail__actions">
+                        <button
+                            class="mp-btn mp-btn--primary mp-btn--block"
+                            @click="abrirProntuario(pacienteSelecionado)"
+                        >
+                            <i class="pi pi-file" />
+                            Abrir prontuário
+                        </button>
+                        <div class="grid grid-cols-2 gap-2 mt-2">
+                            <button class="mp-btn mp-btn--ghost" @click="abrirWhatsapp(pacienteSelecionado)">
+                                <i class="pi pi-whatsapp" />
+                                Conversar
+                            </button>
+                            <button class="mp-btn mp-btn--ghost" @click="editarPaciente(pacienteSelecionado)">
+                                <i class="pi pi-pencil" />
+                                Editar
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <div v-else class="mp-detail__empty">
+                    <i class="pi pi-user text-3xl opacity-30 mb-3" />
+                    <div class="text-sm">Selecione um paciente</div>
+                    <div class="text-xs text-white/40 mt-1 text-center">
+                        Clique em um card pra ver detalhes.<br>
+                        Duplo-clique abre o prontuário.
+                    </div>
+                </div>
+            </aside>
+        </div>
+
+        <!-- Popover + dialogs de cadastro (montados fora do scroll). -->
+        <PatientCreatePopover
+            ref="createPopoverRef"
+            @quick-create="openQuickCreate"
+            @go-complete="goCreateFull"
+        />
+        <PatientCadastroDialog
+            v-model="cadastroFullDialog"
+            :patient-id="editPatientId"
+            @created="onPatientCreated"
+        />
+        <ComponentCadastroRapido
+            v-model="quickDialog"
+            title="Cadastro Rápido"
+            table-name="patients"
+            name-field="nome_completo"
+            email-field="email_principal"
+            phone-field="telefone"
+            @created="onPatientCreated"
+        />
+
+        <!-- Dialog Prontuário — :key força re-mount quando troca de paciente -->
+        <PatientProntuario
+            v-if="prontuarioPatient"
+            :key="prontuarioPatient?.id || 'none'"
+            v-model="prontuarioOpen"
+            :patient="prontuarioPatient"
+            @close="prontuarioOpen = false"
+            @edit="(id) => { prontuarioOpen = false; editPatientId = String(id); cadastroFullDialog = true; }"
+        />
+
+        <!-- Dialog de sessões do paciente — lista os últimos 50 eventos -->
+        <Dialog
+            v-model:visible="sessoesDialogOpen"
+            modal
+            dismissable-mask
+            :style="{ width: '560px', maxWidth: '92vw' }"
+            :header="sessoesPaciente ? `Sessões — ${sessoesPaciente.nome}` : 'Sessões'"
+        >
+            <div v-if="sessoesLoading" class="py-10 text-center text-[var(--text-color-secondary)]">
+                <i class="pi pi-spin pi-spinner text-xl" />
+                <div class="text-sm mt-2">Carregando sessões…</div>
+            </div>
+            <div v-else-if="sessoesLista.length === 0" class="py-10 text-center text-[var(--text-color-secondary)]">
+                <i class="pi pi-calendar-times text-2xl opacity-40" />
+                <div class="text-sm mt-2">Nenhuma sessão registrada.</div>
+            </div>
+            <div v-else class="flex flex-col gap-1.5 max-h-[60vh] overflow-y-auto">
+                <div
+                    v-for="s in sessoesLista"
+                    :key="s.id"
+                    class="flex items-center gap-3 px-3 py-2 rounded-lg border border-[var(--surface-border)] bg-[var(--surface-card)]"
+                >
+                    <div class="text-xs font-mono text-[var(--text-color)] tabular-nums w-[120px] shrink-0">
+                        {{ fmtSessaoData(s.inicio_em) }}
+                    </div>
+                    <div class="flex-1 min-w-0 text-sm">
+                        <div class="font-medium truncate">
+                            {{ s.titulo || (s.tipo === 'sessao' ? 'Atendimento' : (s.tipo || 'Sessão')) }}
+                        </div>
+                        <div v-if="s.modalidade" class="text-xs text-[var(--text-color-secondary)]">
+                            {{ s.modalidade }}
+                        </div>
+                    </div>
+                    <span class="text-xs font-medium shrink-0" :class="sessaoStatusColor(s.status)">
+                        {{ sessaoStatusLabel(s.status) }}
+                    </span>
+                </div>
+            </div>
+            <template #footer>
+                <div class="text-[0.7rem] text-[var(--text-color-secondary)]">
+                    Mostrando últimas {{ sessoesLista.length }} sessões.
+                </div>
+            </template>
+        </Dialog>
+    </section>
+</template>
+
+<style scoped>
+/* ─── Convenção "Melissa Page" — espelha .ma-page do MelissaAgenda ─ */
+.mp-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);
+}
+.mp-page__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 14px 18px;
+    border-bottom: 1px solid var(--m-border);
+    flex-shrink: 0;
+}
+.mp-page__title {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 1rem;
+    font-weight: 500;
+}
+.mp-page__count {
+    font-size: 0.7rem;
+    color: var(--m-text-muted);
+    background: var(--m-bg-soft);
+    padding: 2px 8px;
+    border-radius: 999px;
+    margin-left: 4px;
+}
+.mp-page__loading {
+    color: var(--m-text-muted);
+    margin-left: 4px;
+}
+.mp-close {
+    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;
+    transition: background-color 140ms ease;
+}
+.mp-close:hover { background: var(--m-bg-soft-hover); }
+
+/* Botão "Ir pra agenda" no header — ghost com hover discreto */
+.mp-header-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    height: 32px;
+    padding: 0 12px;
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border);
+    color: var(--m-text);
+    border-radius: 9px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.78rem;
+    font-weight: 500;
+    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
+}
+.mp-header-btn:hover {
+    background: var(--m-accent-soft);
+    border-color: var(--m-accent-strong);
+    color: var(--m-text);
+}
+@media (max-width: 540px) {
+    .mp-header-btn span { display: none; }
+    .mp-header-btn { padding: 0 9px; }
+}
+
+.mp-body {
+    flex: 1;
+    display: flex;
+    min-height: 0;
+}
+
+/* ═══ COL 1: Filtros ═════════════════════════════════════════ */
+.mp-side {
+    width: 240px;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    border-right: 1px solid var(--m-border);
+    background: var(--m-bg-soft);
+    padding: 12px 0;
+    overflow-y: auto;
+}
+.mp-side::-webkit-scrollbar { width: 5px; }
+.mp-side::-webkit-scrollbar-thumb {
+    background: var(--m-border-strong);
+    border-radius: 3px;
+}
+.mp-side__head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    padding: 6px 16px;
+}
+.mp-side__title {
+    font-size: 0.72rem;
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
+    color: var(--m-text-muted);
+    font-weight: 600;
+}
+.mp-side__clear {
+    width: 18px; height: 18px;
+    display: grid; place-items: center;
+    background: transparent;
+    border: 1px solid var(--m-border);
+    border-radius: 4px;
+    color: var(--m-text-muted);
+    cursor: pointer;
+    transition: background-color 140ms ease;
+}
+.mp-side__clear:hover {
+    background: var(--m-bg-soft-hover);
+    color: var(--m-text);
+}
+.mp-side__divider {
+    height: 1px;
+    background: var(--m-border);
+    margin: 12px 12px;
+}
+.mp-side__placeholder {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    color: var(--m-text-faint);
+    font-size: 0.74rem;
+    font-style: italic;
+}
+.mp-side__footer {
+    margin-top: auto;
+    padding: 12px;
+    border-top: 1px solid var(--m-border);
+}
+
+.mp-status-list {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 4px 8px 0;
+}
+.mp-status-pill {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 10px;
+    background: transparent;
+    border: 1px solid transparent;
+    color: var(--m-text);
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 0.82rem;
+    font-family: inherit;
+    transition: background-color 140ms ease, border-color 140ms ease;
+}
+.mp-status-pill:hover { background: var(--m-bg-soft-hover); }
+.mp-status-pill.is-active {
+    background: var(--m-accent-soft);
+    border-color: var(--m-accent-strong);
+    color: var(--m-text);
+}
+.mp-status-pill__count {
+    font-size: 0.7rem;
+    color: var(--m-text-muted);
+    background: var(--m-bg-medium);
+    padding: 1px 7px;
+    border-radius: 999px;
+    min-width: 22px;
+    text-align: center;
+}
+.mp-status-pill.is-active .mp-status-pill__count {
+    background: var(--m-accent);
+    color: var(--p-primary-contrast-color, white);
+}
+
+.mp-chip-list {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    padding: 4px 8px 0;
+}
+.mp-chip {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 10px 6px 8px;
+    background: transparent;
+    border: 1px solid transparent;
+    border-left: 3px solid transparent;
+    color: var(--m-text);
+    border-radius: 7px;
+    cursor: pointer;
+    font-size: 0.78rem;
+    font-family: inherit;
+    text-align: left;
+    transition: background-color 140ms ease, border-color 140ms ease;
+}
+.mp-chip:hover { background: var(--m-bg-soft-hover); }
+.mp-chip.is-active {
+    background: var(--m-accent-soft);
+    border-color: var(--m-accent-strong);
+    border-left-color: var(--m-accent);
+}
+.mp-chip__dot {
+    width: 8px; height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+.mp-chip__name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* ═══ COL 2: Lista central ═══════════════════════════════════ */
+.mp-list {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+.mp-list__toolbar {
+    display: flex;
+    gap: 10px;
+    padding: 14px 16px;
+    border-bottom: 1px solid var(--m-border);
+}
+.mp-search {
+    position: relative;
+    flex: 1;
+}
+.mp-search__icon {
+    position: absolute;
+    left: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--m-text-muted);
+    font-size: 0.85rem;
+    pointer-events: none;
+}
+.mp-search__input {
+    width: 100%;
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border);
+    color: var(--m-text);
+    padding: 9px 12px 9px 34px;
+    border-radius: 9px;
+    font-size: 0.88rem;
+    font-family: inherit;
+    outline: none;
+    transition: background-color 140ms ease, border-color 140ms ease;
+}
+.mp-search__input::placeholder { color: var(--m-text-faint); }
+.mp-search__input:focus {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+}
+
+.mp-list__body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 8px 12px 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    scrollbar-width: thin;
+    scrollbar-color: var(--m-border-strong) transparent;
+}
+.mp-list__body::-webkit-scrollbar { width: 6px; }
+.mp-list__body::-webkit-scrollbar-thumb {
+    background: var(--m-border-strong);
+    border-radius: 3px;
+}
+/* Empty state — borda tracejada, ícone grande centralizado, textos confortáveis
+   e CTAs primários (Limpar busca aparece só quando há filtro ativo). */
+.mp-empty-state {
+    margin: 24px 8px;
+    padding: 56px 28px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    color: var(--m-text-muted);
+    border: 2px dashed var(--m-border-strong);
+    border-radius: 16px;
+    background: color-mix(in srgb, var(--m-bg-soft) 40%, transparent);
+}
+.mp-empty-state__icon {
+    font-size: 3.5rem;
+    color: var(--m-text-muted);
+    opacity: 0.55;
+    margin-bottom: 18px;
+}
+.mp-empty-state__title {
+    font-size: 1.15rem;
+    font-weight: 500;
+    color: var(--m-text);
+    letter-spacing: -0.01em;
+}
+.mp-empty-state__hint {
+    font-size: 0.92rem;
+    color: var(--m-text-muted);
+    margin-top: 6px;
+    max-width: 360px;
+    line-height: 1.45;
+}
+.mp-empty-state__actions {
+    display: flex;
+    gap: 10px;
+    margin-top: 22px;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.mp-card {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 12px;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: 10px;
+    color: var(--m-text);
+    text-align: left;
+    cursor: pointer;
+    font-family: inherit;
+    transition: background-color 140ms ease, border-color 140ms ease;
+}
+.mp-card:hover {
+    background: var(--m-bg-soft);
+    border-color: var(--m-border);
+}
+.mp-card.is-active {
+    background: var(--m-accent-soft);
+    border-color: var(--m-accent-strong);
+}
+.mp-card.is-novo {
+    background: color-mix(in srgb, var(--p-primary-color) 8%, transparent);
+}
+.mp-card.is-novo.is-active {
+    background: var(--m-accent-soft);
+    border-color: var(--m-accent);
+}
+.mp-card__avatar {
+    width: 40px; height: 40px;
+    border-radius: 50%;
+    background: var(--m-accent);
+    border: 1px solid var(--m-accent);
+    color: var(--p-primary-contrast-color, white);
+    display: grid;
+    place-items: center;
+    font-size: 0.85rem;
+    font-weight: 600;
+    flex-shrink: 0;
+    overflow: hidden;
+}
+.mp-card__avatar img {
+    width: 100%; height: 100%;
+    object-fit: cover;
+}
+.mp-card__main {
+    flex: 1;
+    min-width: 0;
+}
+.mp-card__name-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.mp-card__name {
+    font-size: 0.92rem;
+    font-weight: 500;
+    color: var(--m-text);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mp-card__novo {
+    font-size: 0.55rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    padding: 2px 6px;
+    border-radius: 999px;
+    background: var(--m-accent);
+    color: var(--p-primary-contrast-color, white);
+    flex-shrink: 0;
+    line-height: 1.2;
+}
+.mp-card__status {
+    font-size: 0.6rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    padding: 2px 6px;
+    border-radius: 999px;
+    background: var(--m-bg-soft);
+    color: var(--m-text-muted);
+    border: 1px solid var(--m-border);
+    flex-shrink: 0;
+    line-height: 1.2;
+}
+.mp-card__meta {
+    display: flex;
+    gap: 12px;
+    margin-top: 2px;
+    font-size: 0.74rem;
+    color: var(--m-text-muted);
+    overflow: hidden;
+}
+.mp-card__meta-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mp-card__tags {
+    display: flex;
+    gap: 4px;
+    margin-top: 5px;
+    flex-wrap: nowrap;
+    overflow: hidden;
+}
+.mp-card__tag {
+    font-size: 0.65rem;
+    padding: 1px 7px;
+    border-radius: 999px;
+    border: 1px solid transparent;
+    line-height: 1.4;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100px;
+}
+.mp-card__tag-more {
+    font-size: 0.65rem;
+    color: var(--m-text-faint);
+    line-height: 1.4;
+    align-self: center;
+}
+.mp-card__last {
+    flex-shrink: 0;
+    text-align: right;
+    padding-left: 8px;
+    border-left: 1px solid var(--m-border);
+}
+.mp-card__last-label {
+    font-size: 0.6rem;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--m-text-faint);
+}
+.mp-card__last-date {
+    font-size: 0.82rem;
+    font-weight: 500;
+    color: var(--m-text-muted);
+    font-variant-numeric: tabular-nums;
+    margin-top: 1px;
+}
+
+/* Ações inline do card — visíveis no hover do .mp-card e sempre no ativo.
+   Em mobile/touch (≤ 768px) ficam sempre visíveis. */
+.mp-card__actions {
+    display: flex;
+    gap: 2px;
+    margin-left: 4px;
+    padding-left: 8px;
+    border-left: 1px solid var(--m-border);
+    opacity: 0;
+    transform: translateX(4px);
+    transition: opacity 160ms ease, transform 160ms ease;
+    flex-shrink: 0;
+}
+.mp-card:hover .mp-card__actions,
+.mp-card.is-active .mp-card__actions,
+.mp-card:focus-within .mp-card__actions {
+    opacity: 1;
+    transform: translateX(0);
+}
+.mp-card__action {
+    width: 28px;
+    height: 28px;
+    display: grid;
+    place-items: center;
+    background: transparent;
+    border: 1px solid transparent;
+    color: var(--m-text-muted);
+    border-radius: 7px;
+    cursor: pointer;
+    font-family: inherit;
+    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
+}
+.mp-card__action i { font-size: 0.78rem; }
+.mp-card__action:hover {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border);
+    color: var(--m-text);
+}
+.mp-card__action--danger:hover {
+    background: rgba(239, 68, 68, 0.14);
+    border-color: rgba(239, 68, 68, 0.4);
+    color: rgb(248, 113, 113);
+}
+@media (max-width: 768px) {
+    .mp-card__actions {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+/* ═══ COL 3: Quick view ══════════════════════════════════════ */
+.mp-quick {
+    width: 320px;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    border-left: 1px solid var(--m-border);
+    background: var(--m-bg-soft);
+    padding: 14px;
+    overflow-y: auto;
+}
+.mp-w {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+.mp-w__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 4px;
+}
+.mp-w__title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 0.74rem;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    color: var(--m-text-muted);
+    font-weight: 600;
+}
+.mp-w__divider {
+    height: 1px;
+    background: var(--m-border);
+    margin: 16px 0 14px;
+}
+
+.mp-stats {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 6px;
+}
+.mp-stat {
+    background: var(--m-bg-medium);
+    border: 1px solid var(--m-border);
+    border-radius: 10px;
+    padding: 10px 6px;
+    text-align: center;
+}
+.mp-stat__val {
+    font-size: 1.5rem;
+    font-weight: 200;
+    line-height: 1;
+    letter-spacing: -0.02em;
+    color: var(--m-text);
+    font-variant-numeric: tabular-nums;
+}
+.mp-stat__lbl {
+    font-size: 0.7rem;
+    color: var(--m-text-muted);
+    margin-top: 4px;
+    line-height: 1.15;
+}
+.mp-aniv {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 8px;
+    padding: 8px 10px;
+    background: color-mix(in srgb, #f59e0b 14%, var(--m-bg-medium));
+    border: 1px solid color-mix(in srgb, #f59e0b 32%, transparent);
+    border-radius: 8px;
+    font-size: 0.78rem;
+    color: var(--m-text);
+}
+.mp-aniv i {
+    color: #f59e0b;
+}
+
+/* Detail card */
+.mp-detail {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: 8px 4px;
+}
+.mp-detail__close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 26px; height: 26px;
+    display: grid; place-items: center;
+    background: transparent;
+    border: 1px solid transparent;
+    color: var(--m-text-muted);
+    border-radius: 7px;
+    cursor: pointer;
+    transition: background-color 140ms ease;
+}
+.mp-detail__close:hover {
+    background: var(--m-bg-soft-hover);
+    color: var(--m-text);
+}
+.mp-detail__avatar {
+    width: 72px; height: 72px;
+    border-radius: 50%;
+    background: var(--m-accent);
+    border: 2px solid var(--m-accent-strong);
+    color: var(--p-primary-contrast-color, white);
+    display: grid;
+    place-items: center;
+    font-size: 1.4rem;
+    font-weight: 600;
+    overflow: hidden;
+    margin-bottom: 10px;
+}
+.mp-detail__avatar img {
+    width: 100%; height: 100%;
+    object-fit: cover;
+}
+.mp-detail__name {
+    font-size: 1rem;
+    font-weight: 500;
+    color: var(--m-text);
+}
+.mp-detail__status {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    margin-top: 4px;
+    font-size: 0.74rem;
+    color: var(--m-text-muted);
+}
+.mp-detail__aniv-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    margin-left: 6px;
+    padding: 2px 7px;
+    border-radius: 999px;
+    background: color-mix(in srgb, #f59e0b 18%, transparent);
+    border: 1px solid color-mix(in srgb, #f59e0b 40%, transparent);
+    color: #f59e0b;
+    font-size: 0.62rem;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    font-weight: 600;
+}
+.mp-detail__rows {
+    width: 100%;
+    margin-top: 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    text-align: left;
+}
+.mp-detail__row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 7px 10px;
+    background: var(--m-bg-medium);
+    border: 1px solid var(--m-border);
+    border-radius: 8px;
+    font-size: 0.78rem;
+    color: var(--m-text);
+}
+.mp-detail__row i {
+    color: var(--m-text-muted);
+    font-size: 0.78rem;
+    flex-shrink: 0;
+}
+.mp-detail__row span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mp-detail__chips {
+    width: 100%;
+    margin-top: 12px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    justify-content: center;
+}
+.mp-detail__chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 3px 9px 3px 7px;
+    border-radius: 999px;
+    border: 1px solid var(--m-border);
+    border-left-width: 3px;
+    background: var(--m-bg-medium);
+    font-size: 0.7rem;
+    color: var(--m-text);
+}
+.mp-detail__chip--tag {
+    border-left-width: 1px;
+}
+.mp-detail__actions {
+    width: 100%;
+    margin-top: 14px;
+}
+.mp-detail__empty {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px 20px;
+    color: var(--m-text-muted);
+}
+
+/* ─── Botões compartilhados ────────────────────────────────── */
+.mp-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    padding: 8px 14px;
+    border-radius: 9px;
+    font-size: 0.82rem;
+    font-weight: 500;
+    font-family: inherit;
+    cursor: pointer;
+    transition: background-color 140ms ease, border-color 140ms ease;
+    border: 1px solid transparent;
+}
+.mp-btn--block { width: 100%; }
+.mp-btn--primary {
+    background: var(--m-accent);
+    border-color: var(--m-accent);
+    color: var(--p-primary-contrast-color, white);
+}
+.mp-btn--primary:hover {
+    background: color-mix(in srgb, var(--m-accent) 82%, white);
+}
+.mp-btn--ghost {
+    background: var(--m-bg-medium);
+    border-color: var(--m-border);
+    color: var(--m-text);
+}
+.mp-btn--ghost:hover {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+}
+
+/* ─── Responsivo: ≤ 1024px esconde COL 3, ≤ 768px esconde COL 1 ─ */
+@media (max-width: 1024px) {
+    .mp-quick { display: none; }
+}
+@media (max-width: 768px) {
+    .mp-side { display: none; }
+}
+</style>
diff --git a/src/layout/melissa/composables/useMelissaPacientes.js b/src/layout/melissa/composables/useMelissaPacientes.js
index bb92b44..fcff5e6 100644
--- a/src/layout/melissa/composables/useMelissaPacientes.js
+++ b/src/layout/melissa/composables/useMelissaPacientes.js
@@ -27,7 +27,16 @@ function normalizeStatus(s) {
     return v.charAt(0).toUpperCase() + v.slice(1);
 }
 
-export function useMelissaPacientes() {
+/**
+ * @param {object} [opts]
+ * @param {boolean} [opts.onlyActive=true]
+ *   true (default, legado) = retorna só status='Ativo' (uso original: cards do
+ *   resumo, cronômetro, eventos hoje — só faz sentido com ativos).
+ *   false = retorna todos (Ativo + Inativo + Arquivado), pra páginas que
+ *   precisam mostrar/filtrar por status (ex.: MelissaPacientes).
+ */
+export function useMelissaPacientes(opts = {}) {
+    const onlyActive = opts.onlyActive !== false; // default true (compat)
     const tenantStore = useTenantStore();
 
     const pacientes = ref([]);
@@ -66,7 +75,7 @@ export function useMelissaPacientes() {
             // ('ativo', 'Ativo', 'active', null...). Normaliza e filtra no client.
             const { data, error: err } = await supabase
                 .from('patients')
-                .select('id, nome_completo, email_principal, telefone, status, avatar_url, last_attended_at, created_at')
+                .select('id, nome_completo, email_principal, telefone, status, avatar_url, last_attended_at, created_at, data_nascimento')
                 .eq('owner_id', userId)
                 .eq('tenant_id', tid)
                 .order('nome_completo', { ascending: true })
@@ -82,10 +91,11 @@ export function useMelissaPacientes() {
                 avatar_url: r.avatar_url || null,
                 status: normalizeStatus(r.status),
                 last_attended_at: r.last_attended_at || null,
-                created_at: r.created_at || null
+                created_at: r.created_at || null,
+                data_nascimento: r.data_nascimento || null
             }));
 
-            pacientes.value = todos.filter((p) => p.status === 'Ativo');
+            pacientes.value = onlyActive ? todos.filter((p) => p.status === 'Ativo') : todos;
         } catch (e) {
             error.value = e?.message || 'Erro ao carregar pacientes';
             pacientes.value = [];
diff --git a/src/router/routes.misc.js b/src/router/routes.misc.js
index 4d2ea03..ddae6e7 100644
--- a/src/router/routes.misc.js
+++ b/src/router/routes.misc.js
@@ -25,8 +25,11 @@ export default {
 
         // Sandbox do layout Melissa (Direção B — lockscreen-style)
         // Standalone, sem auth, sem AppLayout. Promovido de /preview/dashboard-win11.
+        // Param `:secao?` opcional reflete a seção aberta na URL (agenda,
+        // pacientes, conversas, etc.) — permite deep-link, back/forward,
+        // refresh preservando estado.
         {
-            path: 'preview/melissa',
+            path: 'preview/melissa/:secao?',
             name: 'PreviewMelissa',
             component: () => import('@/layout/melissa/MelissaLayout.vue')
         },