From 269b531158a5c83a9968b4edbd742061556e20ba Mon Sep 17 00:00:00 2001
From: Leonardo <lmnohama@gmail.com>
Date: Wed, 6 May 2026 09:13:53 -0300
Subject: [PATCH] Melissa: blueprint tabular + Cadastros/Agendamentos/Pacientes
 + restore
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sprint E (05-05). Blueprint tabular oficial pras paginas Melissa de
listagem (DataTable + sidebar com stats e filtros coloridos, view
toggle list/grade, subheader explicativo, mobile pencil+popover).

Novo arquivo:
- blueprints/melissa-table-page-blueprint.md (~530L, 18 secoes) —
  referencia canonica MelissaCadastrosRecebidos

Paginas refatoradas/criadas:
- MelissaCadastrosRecebidos: refator pra blueprint (DataTable + frozen
  action + view toggle + subheader)
- MelissaAgendamentosRecebidos (NOVO): substitui o embed via
  MelissaEmbed; 4 status coloridos (Pendente/Autorizado/Convertido/
  Recusado), 3 acoes condicionais (Recusar/Autorizar/Converter em
  sessao), wired com AgendaEventDialog
- MelissaPacientes: refator parcial (subheader, sombras, status pills
  coloridas, email/phone colunas proprias, mobile pencil+popover, fix
  scroll mobile com min-height:0 na .mp-list, view toggle persistido,
  tags/grupos color fix g.cor->g.color, restore de arquivados)
- MelissaEmbed: agendamentos-recebidos removido do EMBED_MAP
- MelissaLayout: wire-up MelissaAgendamentosRecebidos nativo
- composables/useMelissaPacientes + useMelissaPacientesAside ajustes

Restore de pacientes arquivados:
- patientsRepository: novo restorePatient(id, { tenantId })
- PatientsCadastroPage statusOpts: +Arquivado (fecha gap de
  inconsistencia ao editar paciente arquivado)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 blueprints/melissa-table-page-blueprint.md    |  812 +++++++
 .../cadastro/PatientsCadastroPage.vue         |    2 +-
 .../patients/services/patientsRepository.js   |   16 +
 .../melissa/MelissaAgendamentosRecebidos.vue  | 1969 +++++++++++++++++
 .../melissa/MelissaCadastrosRecebidos.vue     | 1115 ++++++++--
 src/layout/melissa/MelissaEmbed.vue           |    9 +-
 src/layout/melissa/MelissaLayout.vue          |  274 ++-
 src/layout/melissa/MelissaPacientes.vue       |  853 ++++++-
 .../composables/useMelissaPacientes.js        |   97 +-
 .../composables/useMelissaPacientesAside.js   |    8 +
 10 files changed, 4839 insertions(+), 316 deletions(-)
 create mode 100644 blueprints/melissa-table-page-blueprint.md
 create mode 100644 src/layout/melissa/MelissaAgendamentosRecebidos.vue

diff --git a/blueprints/melissa-table-page-blueprint.md b/blueprints/melissa-table-page-blueprint.md
new file mode 100644
index 0000000..1ea606a
--- /dev/null
+++ b/blueprints/melissa-table-page-blueprint.md
@@ -0,0 +1,812 @@
+# Blueprint — Melissa Table Page
+
+Padrão de página Melissa que apresenta uma **coleção tabular** (intake
+requests, médicos, recorrências, compromissos, etc.) com 2 modos de
+visualização (lista/grade), filtros laterais coloridos, busca, e
+DataTable com paginação + coluna de ação fixa.
+
+Validado em `src/layout/melissa/MelissaCadastrosRecebidos.vue`
+(referência canônica). Estende o
+[`melissa-page-blueprint.md`](./melissa-page-blueprint.md) — leia aquele
+primeiro pra entender a estrutura macro (`.xx-page` / `.xx-body` /
+`.xx-side` / `.xx-main`, drawer mobile, header).
+
+---
+
+## 1. Princípio
+
+Página de coleção = **sidebar de filtros + coluna principal com
+toolbar + visualização tabular**. O user controla:
+
+- **Busca** (texto livre — nome / email / telefone / etc.)
+- **Filtro de status** (mutualmente exclusivo, com botão "Limpar")
+- **Modo de visualização** (lista densa via DataTable ou grade de cards)
+- **Paginação** (10/20/50/100 por página)
+
+A linha tem 1 ação primária visível (botão pencil) que abre um Dialog
+com detalhes + ações secundárias (rejeitar, converter, etc.).
+
+---
+
+## 2. Estrutura do template
+
+Segue a macro do `melissa-page-blueprint.md` (drawer + backdrop + page
++ header + body com aside Teleportada). Sobre essa base, esta blueprint
+adiciona um **subheader explicativo** (logo abaixo do header, antes do
+body) e a estrutura tabular dentro da `.xx-main`:
+
+```vue
+<section class="xx-page">
+    <header class="xx-page__head">…</header>
+
+    <!-- Subheader explicativo — 1 frase de contexto sobre o que essa
+         página faz, com palavras-chave em <strong>. Diferencia páginas
+         que têm layout idêntico (ex: Cadastros Recebidos vs.
+         Agendamentos Recebidos). -->
+    <div class="xx-subheader">
+        <i class="pi pi-info-circle xx-subheader__icon" />
+        <span class="xx-subheader__text">
+            Texto descritivo da página em 1-2 frases. Use
+            <strong>palavras-chave</strong> em negrito pra destacar as
+            ações disponíveis (autorize, recuse, converta, etc.).
+        </span>
+    </div>
+
+    <div class="xx-body">…sidebar + main…</div>
+</section>
+```
+
+A diferença dentro da `.xx-main`:
+
+```vue
+<div class="xx-main">
+    <!-- A) Toolbar — busca + view toggle -->
+    <div class="xx-toolbar">
+        <div class="xx-search">
+            <i class="pi pi-search xx-search__icon" />
+            <input v-model="busca" class="xx-search__input" placeholder="…" />
+            <button v-if="busca" class="xx-search__clear" @click="busca = ''">
+                <i class="pi pi-times" />
+            </button>
+        </div>
+        <div class="xx-view-toggle" role="group" aria-label="Visualização">
+            <button :class="{ 'is-active': viewMode === 'list' }" @click="setViewMode('list')">
+                <i class="pi pi-list" />
+            </button>
+            <button :class="{ 'is-active': viewMode === 'grid' }" @click="setViewMode('grid')">
+                <i class="pi pi-th-large" />
+            </button>
+        </div>
+    </div>
+
+    <!-- B) View Lista (DataTable) -->
+    <DataTable v-if="viewMode === 'list'" … />
+
+    <!-- C) View Grade (cards em CSS grid + Paginator standalone) -->
+    <div v-else-if="viewMode === 'grid'" class="xx-grid-wrap">
+        <div class="xx-grid">
+            <div v-for="r in pagedItems" class="xx-grid__card" role="button" tabindex="0" @click="openDetails(r)">…</div>
+        </div>
+        <Paginator class="xx-paginator" :rows="rowsXX" :first="firstXX" … />
+    </div>
+</div>
+```
+
+E na sidebar (`.xx-side`), ao invés de Hoje/Pacientes/Mini-cal, tem:
+
+```vue
+<aside class="xx-side">
+    <!-- Stats (4 contadores em grid 2x2) -->
+    <div class="xx-w xx-w--side">
+        <div class="xx-w__head">
+            <span class="xx-w__title"><i class="pi pi-chart-bar" /> Estatísticas</span>
+        </div>
+        <div class="xx-stats">
+            <div v-for="s in stats" class="xx-stat" :class="`is-${s.cls}`">
+                <div class="xx-stat__val">{{ s.value }}</div>
+                <div class="xx-stat__lbl">{{ s.label }}</div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Filtros (botões coloridos por status + Limpar filtro) -->
+    <div class="xx-w xx-w--side">
+        <div class="xx-w__head">
+            <span class="xx-w__title"><i class="pi pi-filter" /> Status</span>
+            <span v-if="statusFilter" class="xx-w__count">1</span>
+        </div>
+        <div class="xx-side__list">
+            <button
+                v-for="o in STATUS_FILTER_OPTIONS"
+                class="xx-side__item"
+                :class="[`is-${o.key}`, { 'is-active': statusFilter === o.key }]"
+                @click="toggleStatusFilter(o.key)"
+            >
+                <i :class="o.icon" /><span>{{ o.label }}</span>
+            </button>
+            <Transition name="xx-clear">
+                <button v-if="statusFilter" class="xx-side__item is-clear" @click="statusFilter = ''">
+                    <i class="pi pi-filter-slash" /><span>Limpar filtro</span>
+                </button>
+            </Transition>
+        </div>
+    </div>
+</aside>
+```
+
+---
+
+## 3. Estado JS (script setup)
+
+```js
+// ── Filtros + busca ──
+const busca = ref('');
+const statusFilter = ref('');
+function toggleStatusFilter(s) {
+    statusFilter.value = statusFilter.value === s ? '' : s;
+}
+
+// ── Computeds derivados ──
+const stats = computed(() => {/* contadores por status */});
+const filtered = computed(() => {/* aplica busca + statusFilter sobre rows */});
+
+// ── Paginação compartilhada (DataTable + grid) ──
+const PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
+const rowsXX = ref(10);
+const firstXX = ref(0);
+function onPage(event) {
+    firstXX.value = event.first;
+    rowsXX.value = event.rows;
+}
+watch([busca, statusFilter], () => { firstXX.value = 0; }); // reset à pg 1
+
+// ── View mode persistido ──
+const VIEW_MODE_KEY = 'xx.viewMode.v1';
+const viewMode = ref('list');
+try {
+    const saved = localStorage.getItem(VIEW_MODE_KEY);
+    if (saved === 'list' || saved === 'grid') viewMode.value = saved;
+} catch (_) {}
+function setViewMode(m) {
+    if (m !== 'list' && m !== 'grid') return;
+    viewMode.value = m;
+    try { localStorage.setItem(VIEW_MODE_KEY, m); } catch (_) {}
+}
+
+// ── Slice da grid (DataTable pagina internamente) ──
+const pagedItems = computed(() =>
+    filtered.value.slice(firstXX.value, firstXX.value + rowsXX.value)
+);
+
+// ── Row click + ação ──
+function onRowClick(event) { if (event?.data) openDetails(event.data); }
+function rowStatusClass(data) { return statusClass(data?.status); }
+```
+
+---
+
+## 4. DataTable (view Lista) — props canônicas
+
+```vue
+<DataTable
+    v-if="viewMode === 'list'"
+    :value="filtered"
+    :loading="loading"
+    dataKey="id"
+    paginator
+    :rows="rowsXX"
+    :first="firstXX"
+    :rowsPerPageOptions="PAGE_SIZE_OPTIONS"
+    paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+    currentPageReportTemplate="{first}–{last} de {totalRecords}"
+    :rowClass="rowStatusClass"
+    selectionMode="single"
+    scrollable
+    scrollHeight="flex"
+    tableStyle="min-width: 640px"
+    class="xx-table"
+    @row-click="onRowClick"
+    @page="onPage"
+>
+    <Column header="Paciente" style="min-width: 220px">
+        <template #body="{ data }">…avatar + nome + badge…</template>
+    </Column>
+    <Column header="Contato" style="min-width: 220px">
+        <template #body="{ data }">…email + tel…</template>
+    </Column>
+    <Column header="Recebido" style="width: 130px">
+        <template #body="{ data }">…tempo relativo…</template>
+    </Column>
+
+    <!-- Coluna de ação fixa (frozen à direita) -->
+    <Column
+        header=""
+        :style="{ width: '60px', maxWidth: '60px', minWidth: '60px' }"
+        frozen
+        alignFrozen="right"
+    >
+        <template #body="{ data }">
+            <button class="xx-row__action" @click.stop="openDetails(data)">
+                <i class="pi pi-pencil" />
+            </button>
+        </template>
+    </Column>
+
+    <template #empty>…empty state contextual…</template>
+    <template #loading>…spinner inline…</template>
+</DataTable>
+```
+
+### Props críticas explicadas
+
+| Prop | Por quê |
+|---|---|
+| `:loading="loading"` | Overlay nativo do PrimeVue + slot `#loading` custom — substitui skeleton manual. |
+| `paginator + :rows + :first + @page` | Paginator embutido controlado; `firstXX` permite resetar à página 1 quando filtros mudam. |
+| `paginatorTemplate="RowsPerPageDropdown First… Last…"` | Ordem do exemplo PrimeVue 4: dropdown ANTES dos navegadores; CurrentPageReport no meio. |
+| `currentPageReportTemplate="{first}–{last} de {totalRecords}"` | i18n PT-BR. |
+| `:rowClass="rowStatusClass"` | Aplica `is-new` / `is-done` / `is-rejected` no `<tr>` → border-left colorido via CSS deep. |
+| `selectionMode="single"` | Marca visualmente a row selecionada; `@row-click` abre o dialog. |
+| `scrollable + scrollHeight="flex"` | Tabela preenche o flex restante da `.xx-main` e scrolla internamente (vertical). |
+| `tableStyle="min-width: 640px"` | Força scroll horizontal em mobile pra ativar a coluna frozen. |
+| `dataKey="id"` | Identificação estável de rows pra seleção + reactive updates. |
+
+### Coluna frozen — regras
+
+- **Última `<Column>`** do template
+- `frozen alignFrozen="right"` — fixa à direita
+- `width: 60px, maxWidth: 60px, minWidth: 60px` — todas três pra evitar reflow durante scroll
+- **`header=""`** vazio (icon do botão é auto-explicativo; tooltip cobre o resto)
+- Botão interno usa **`@click.stop`** — sem isso, o row-click do DataTable também dispararia
+
+---
+
+## 5. View Grade (cards em CSS grid)
+
+Quando `viewMode === 'grid'`, renderiza cards num grid responsivo com
+Paginator standalone abaixo (compartilha state com a list view):
+
+```vue
+<div v-else-if="viewMode === 'grid'" class="xx-grid-wrap">
+    <div v-if="loading && filtered.length === 0" class="xx-grid__loading">…</div>
+    <div v-else-if="filtered.length === 0" class="xx-empty">…</div>
+    <div v-else class="xx-grid">
+        <div
+            v-for="r in pagedItems"
+            class="xx-grid__card"
+            :class="statusClass(r.status)"
+            role="button"
+            tabindex="0"
+            @click="openDetails(r)"
+            @keydown.enter.prevent="openDetails(r)"
+            @keydown.space.prevent="openDetails(r)"
+        >
+            <div class="xx-grid__top">
+                <span class="xx-card__avatar">…</span>
+                <div class="xx-grid__top-right">
+                    <span class="xx-card__badge" :class="statusClass(r.status)">…</span>
+                    <button class="xx-row__action" @click.stop="openDetails(r)">
+                        <i class="pi pi-pencil" />
+                    </button>
+                </div>
+            </div>
+            <div class="xx-grid__name">…</div>
+            <div class="xx-grid__meta">…</div>
+            <div class="xx-grid__time">…</div>
+        </div>
+    </div>
+    <Paginator
+        v-if="filtered.length > 0"
+        class="xx-paginator"
+        :rows="rowsXX"
+        :totalRecords="filtered.length"
+        :first="firstXX"
+        :rowsPerPageOptions="PAGE_SIZE_OPTIONS"
+        template="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+        currentPageReportTemplate="{first}–{last} de {totalRecords}"
+        @page="onPage"
+    />
+</div>
+```
+
+### Por que `<div role="button">` em vez de `<button>`?
+
+HTML não permite aninhar `<button>` em `<button>`. A grid card tem o
+botão pencil interno, então o card precisa ser um `<div>` com
+`role="button"`, `tabindex="0"` e handlers de teclado (`@keydown.enter`
++ `@keydown.space`) pra manter acessibilidade.
+
+---
+
+## 6. Tokens de surface (light/dark)
+
+A consistência visual entre **header da tabela**, **coluna frozen**, e
+**cards da sidebar** depende de usar o token certo:
+
+| Elemento | Token | Light | Dark |
+|---|---|---|---|
+| `.xx-page` (background da página) | `var(--m-bg-medium)` | branco opaco | 88% opaco (glass) |
+| `.xx-side` (sidebar) | `var(--m-bg-soft)` | surface-100 | 50% opaco |
+| `.xx-w` (cards) | `var(--m-bg-medium)` | branco opaco | 88% opaco |
+| `.xx-card` / `.xx-grid__card` (cards de linha) | `var(--m-bg-soft)` | surface-100 | 50% opaco |
+| **Header da tabela** (`.p-datatable-thead > tr > th`) | **`var(--p-content-background)`** | **branco opaco** | **surface dark configurado** |
+| **Coluna frozen** (header + body) | **`var(--p-content-background)`** | **branco opaco** | **surface dark configurado** |
+| **Botão pencil** (bg) | **`var(--p-content-background)`** | **branco opaco** | **surface dark configurado** |
+
+**Por que `--p-content-background` e não `--m-bg-medium`** pro frozen?
+No dark mode `--m-bg-medium` tem 12% de transparência (efeito glass),
+o que faz a coluna frozen vazar conteúdo de outras colunas durante
+scroll horizontal. `--p-content-background` é 100% opaco em ambos os
+modos e segue a config de surface do tema PrimeVue (token canônico de
+"superfície de card").
+
+---
+
+## 7. Cores de status (semântica + paleta)
+
+Tailwind 600 — fortes o bastante pra ler em ambos os modos:
+
+| Status | Cor | RGB | Uso |
+|---|---|---|---|
+| Novo / Pendente | 🔵 azul | `rgb(37, 99, 235)` | item recém-chegado, ação requerida |
+| Convertido / Concluído | 🟢 verde | `rgb(22, 163, 74)` | sucesso, finalizado |
+| Rejeitado / Cancelado | 🔴 vermelho | `rgb(220, 38, 38)` | descartado, falha |
+
+**Aplicação consistente** em 4 lugares por status:
+
+1. **Stat value** (`.xx-stat.is-info / is-ok / is-danger`) — número colorido
+2. **Filtro lateral** (`.xx-side__item.is-X`) — bg/border/ícone tinted (3 níveis: default 5% / hover 10% / active 16% + ring)
+3. **Border-left da row** (`.xx-table tr.is-X`) — 3px sólido na cor
+4. **Badge** (`.xx-card__badge.is-X`) — pill colorido no card/row
+
+Variável `cls` no objeto stats:
+
+```js
+{ key: 'new',       label: 'Novos',       value: n, cls: n > 0 ? 'info' : 'neutral' },
+{ key: 'converted', label: 'Convertidos', value: c, cls: 'ok' },
+{ key: 'rejected',  label: 'Rejeitados',  value: r, cls: r > 0 ? 'danger' : 'neutral' },
+```
+
+**Não usar `is-warn`** (amarelo) pra "Novo" — semanticamente novo é
+informativo, não alerta.
+
+---
+
+## 8. Filtro de status — botões + "Limpar filtro"
+
+3 botões coloridos (Novo / Convertido / Rejeitado) + 4º botão
+**"Limpar filtro"** que aparece com `<Transition name="xx-clear">`
+quando algum filtro está ativo:
+
+```css
+.xx-side__item.is-clear {
+    margin-top: 4px;
+    background: var(--m-bg-soft);
+    border-color: var(--m-border);
+    color: var(--m-text-muted);
+    font-style: italic;
+}
+
+/* Fade + slide vertical + collapse de altura */
+.xx-clear-enter-active,
+.xx-clear-leave-active {
+    transition: opacity 220ms ease, transform 220ms ease,
+                max-height 220ms ease, margin-top 220ms ease;
+    overflow: hidden;
+}
+.xx-clear-enter-from,
+.xx-clear-leave-to {
+    opacity: 0;
+    transform: translateY(-4px);
+    max-height: 0;
+    margin-top: 0;
+}
+.xx-clear-enter-to,
+.xx-clear-leave-from {
+    opacity: 1;
+    transform: translateY(0);
+    max-height: 40px;
+}
+```
+
+**Estilo neutro/itálico** (não colorido) pra distinguir dos 3 botões
+de filtro coloridos. Ícone `pi pi-filter-slash`.
+
+---
+
+## 9. Subheader explicativo
+
+Faixa estreita abaixo do `xx-page__head`, antes do `xx-body`. Tem 2
+papéis:
+
+1. **Diferenciar páginas** que têm o mesmo layout (Cadastros Recebidos
+   vs. Agendamentos Recebidos parecem visualmente idênticos sem isso)
+2. **Resumir as ações** disponíveis pra reduzir cliques exploratórios
+   do user
+
+```css
+.xx-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;
+}
+.xx-subheader__icon {
+    color: var(--p-primary-color);
+    font-size: 0.92rem;
+    flex-shrink: 0;
+    margin-top: 1px;
+}
+.xx-subheader__text {
+    flex: 1;
+    min-width: 0;
+}
+.xx-subheader__text strong {
+    color: var(--m-text);
+    font-weight: 600;
+}
+```
+
+### Convenção do texto
+
+- 1-2 frases curtas (~20-30 palavras max)
+- Inicia descrevendo a fonte/origem dos dados ("Solicitações vindas
+  de...", "Cadastros enviados por...")
+- Termina enumerando as ações principais com `<strong>`
+  (`autorize`, `recuse`, `converta`)
+- Tom direto, sem formalidade excessiva ("a gente cria o paciente
+  automaticamente" ✓ vs. "o sistema procederá com a criação" ✗)
+- Ícone fixo: `pi pi-info-circle` em primary
+
+### Exemplos validados
+
+**Cadastros Recebidos:**
+> Cadastros completos enviados por pacientes via formulário externo
+> (link público). Revise os dados, **converta em paciente ativo** com
+> 1 clique ou **rejeite** com motivo opcional.
+
+**Agendamentos Recebidos:**
+> Solicitações de horário vindas do agendador online à espera de ação.
+> **Autorize** pra reservar o slot, **recuse** com motivo, ou
+> **converta direto em sessão** — a gente cria o paciente
+> automaticamente se ainda não existir.
+
+---
+
+## 10. Toolbar — busca + view toggle (no main column)
+
+```css
+.xx-toolbar {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.xx-search {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+}
+.xx-search__input {
+    width: 100%;
+    background: var(--m-bg-medium);
+    border: 1px solid var(--m-border);
+    padding: 9px 36px 9px 34px; /* espaço pro ícone esq + clear dir */
+    border-radius: 10px;
+}
+.xx-search__icon { position: absolute; left: 12px; }
+.xx-search__clear { position: absolute; right: 8px; }
+
+/* Segmented control list/grid */
+.xx-view-toggle {
+    flex-shrink: 0;
+    display: inline-flex;
+    background: var(--m-bg-medium);
+    border: 1px solid var(--m-border);
+    border-radius: 10px;
+    padding: 2px;
+    gap: 2px;
+}
+.xx-view-toggle__btn {
+    width: 32px; height: 32px;
+    background: transparent;
+    border: none;
+    border-radius: 8px;
+}
+.xx-view-toggle__btn.is-active {
+    background: var(--m-accent-soft);
+    color: var(--m-accent);
+}
+```
+
+A **busca está no main column** (não na sidebar). Esta é a regra do
+blueprint — sidebar só tem stats + filtros; busca + toggle ficam acima
+da tabela.
+
+---
+
+## 11. DataTable — estilos de header, rows, paginator
+
+```css
+/* Wrapper que faz a DataTable ocupar o flex restante */
+.xx-table {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+}
+.xx-table :deep(.p-datatable) {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    background: transparent;
+    border: 1px solid var(--m-border);
+    border-radius: 10px;
+    overflow: hidden;
+}
+.xx-table :deep(.p-datatable-table-container) {
+    flex: 1;
+    min-height: 0;
+    background: transparent;
+}
+
+/* Header — totalmente transparente nos níveis externos, surface no <th> */
+.xx-table :deep(.p-datatable-thead),
+.xx-table :deep(.p-datatable-thead > tr) {
+    background: transparent !important;
+}
+.xx-table :deep(.p-datatable-thead > tr > th) {
+    background: var(--p-content-background) !important; /* canônico */
+    color: var(--m-text);
+    font-size: 0.78rem;
+    font-weight: 700; /* negrito */
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--m-border);
+}
+
+/* Rows */
+.xx-table :deep(.p-datatable-tbody > tr) {
+    background: transparent;
+    cursor: pointer;
+    border-left: 3px solid var(--m-border); /* default neutro */
+    transition: background-color 140ms ease;
+}
+.xx-table :deep(.p-datatable-tbody > tr > td) {
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--m-border);
+    background: transparent;
+    vertical-align: middle;
+}
+.xx-table :deep(.p-datatable-tbody > tr:hover) { background: var(--m-bg-soft-hover); }
+.xx-table :deep(.p-datatable-tbody > tr.p-datatable-row-selected) {
+    background: var(--m-accent-soft);
+}
+
+/* Border-left colorido por status — espelha .ma-sess do MelissaAgenda */
+.xx-table :deep(tr.is-new)      { border-left-color: rgb(37, 99, 235); }
+.xx-table :deep(tr.is-done)     { border-left-color: rgb(22, 163, 74); }
+.xx-table :deep(tr.is-rejected) { border-left-color: rgb(220, 38, 38); opacity: 0.85; }
+
+/* Coluna frozen — mesma surface do header */
+.xx-table :deep(td.p-datatable-frozen-column),
+.xx-table :deep(th.p-datatable-frozen-column) {
+    background: var(--p-content-background) !important;
+    box-shadow: -3px 0 6px -3px rgba(0, 0, 0, 0.18);
+    z-index: 1;
+}
+.xx-table :deep(.p-datatable-tbody > tr:hover td.p-datatable-frozen-column) {
+    background: var(--m-bg-soft-hover);
+}
+.xx-table :deep(.p-datatable-tbody > tr.p-datatable-row-selected td.p-datatable-frozen-column) {
+    background: var(--m-accent-soft);
+}
+
+/* Paginator integrado — centralizado, sem refresh à esquerda */
+.xx-table :deep(.p-paginator) {
+    background: var(--m-bg-medium);
+    border: none;
+    border-top: 1px solid var(--m-border);
+    padding: 8px 12px;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+.xx-table :deep(.p-paginator-current) {
+    color: var(--m-text-muted);
+    font-size: 0.78rem;
+    background: transparent;
+    border: none;
+}
+.xx-table :deep(.p-paginator-page.p-paginator-page-selected) {
+    background: var(--m-accent-soft);
+    border-color: var(--m-accent-strong);
+    color: var(--m-accent);
+}
+
+/* Select de "rows per page" — bg transparente + label centralizado */
+.xx-table :deep(.p-select) {
+    background: transparent;
+    border: 1px solid var(--m-border);
+    border-radius: 8px;
+    height: 30px;
+    display: inline-flex;
+    align-items: center;
+}
+.xx-table :deep(.p-select-label) {
+    padding: 0 8px;
+    color: var(--m-text);
+    font-size: 0.78rem;
+    display: flex;
+    align-items: center;
+    line-height: 1;
+    height: 100%;
+    background: transparent;
+}
+```
+
+---
+
+## 12. Botão de ação (pencil) — coluna fixa
+
+```css
+.xx-row__action {
+    width: 30px; height: 30px;
+    display: grid;
+    place-items: center;
+    background: var(--p-content-background); /* opaco — não vaza no scroll */
+    border: 1px solid color-mix(in srgb, var(--p-primary-color) 30%, var(--m-border));
+    color: var(--p-primary-color); /* primary do tema */
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
+}
+.xx-row__action:hover {
+    background: color-mix(in srgb, var(--p-primary-color) 12%, var(--p-content-background));
+    border-color: var(--p-primary-color);
+}
+```
+
+Reutilizável **na list view (dentro da coluna frozen)** e **na grid
+view (dentro do `.xx-grid__top-right`)** — mesma classe, mesmo visual.
+
+---
+
+## 13. Empty / loading
+
+Ambos via slot do DataTable + replicados na grid view:
+
+```vue
+<template #empty>
+    <div class="xx-empty">
+        <i class="pi pi-inbox xx-empty__icon" />
+        <div class="xx-empty__title">Nenhum cadastro encontrado</div>
+        <div class="xx-empty__hint">
+            <template v-if="busca || statusFilter">Ajuste os filtros pra ver mais.</template>
+            <template v-else>… mensagem default contextual …</template>
+        </div>
+    </div>
+</template>
+
+<template #loading>
+    <div class="xx-table__loading">
+        <i class="pi pi-spin pi-spinner" />
+        <span>Carregando…</span>
+    </div>
+</template>
+```
+
+```css
+.xx-empty {
+    margin: 24px 0;
+    padding: 56px 28px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    color: var(--m-text-muted);
+    border: 2px dashed var(--m-border-strong);
+    border-radius: 12px;
+    background: color-mix(in srgb, var(--m-bg-soft) 40%, transparent);
+    gap: 8px;
+}
+.xx-empty__icon { font-size: 2rem; opacity: 0.6; }
+.xx-empty__title { font-size: 0.92rem; font-weight: 600; }
+.xx-empty__hint { font-size: 0.78rem; }
+```
+
+---
+
+## 14. Mobile (<1024px)
+
+A sidebar é Teleportada pro drawer (já documentado em
+`melissa-page-blueprint.md`). Específico desta página:
+
+```css
+@media (max-width: 1023px) {
+    .xx-body { flex-direction: column; padding: 0; }
+    .xx-main { width: 100%; padding: 8px; }
+    .xx-page__title > span:first-of-type { display: none; }
+    .xx-menu-btn--mobile-only { display: inline-flex; }
+
+    /* IMPORTANTE: NÃO esconder colunas em mobile.
+       O scroll horizontal (via tableStyle min-width:640px) cuida
+       do overflow, e a coluna frozen "Ação" continua visível na
+       borda direita enquanto o user scrolla as outras. */
+    /* (sem display: none em qualquer th/td) */
+
+    /* Reset do bg/border-right da sidebar quando teleportada */
+    .xx-mobile-drawer__scroll .xx-side {
+        background: transparent;
+        border-right: none;
+    }
+}
+```
+
+---
+
+## 15. Acessibilidade
+
+- `role="button" tabindex="0"` no card grid + `@keydown.enter.prevent` + `@keydown.space.prevent`
+- `:focus-visible { outline: 2px solid var(--p-primary-color); outline-offset: 2px; }` nos cards
+- `aria-label` em todos os icon-only buttons (pencil, view toggle, search clear)
+- `v-tooltip` complementa visualmente (não substitui aria-label)
+
+---
+
+## 16. Checklist de adoção
+
+Ao criar uma nova página tabular Melissa (ex: MelissaCompromissos):
+
+- [ ] Renomeia `xx` → prefixo da página (`mco`, `mmd`, `mcv` etc.)
+- [ ] Define `STATUS_FILTER_OPTIONS` com 3 keys/labels/icons
+- [ ] Define `stats` computed retornando 4 itens (total + 3 status) com `cls` correto
+- [ ] Implementa `filtered` computed (busca + statusFilter)
+- [ ] Adiciona `rowsXX/firstXX/onPage` + watch reset
+- [ ] Adiciona `viewMode` com persistência (`xx.viewMode.v1`)
+- [ ] Adiciona `pagedItems` computed (slice pra grid)
+- [ ] Adiciona `onRowClick + rowStatusClass`
+- [ ] Adiciona `openDetails(r)` que abre o Dialog
+- [ ] **Subheader explicativo** abaixo do `xx-page__head` (1-2 frases, fonte/origem + ações com `<strong>`, ícone `pi pi-info-circle`)
+- [ ] Template: drawer + backdrop + page + header + **subheader** + body + sidebar (stats + filtros + clear) + main (toolbar + DataTable + grid)
+- [ ] DataTable: `:loading + paginator + scrollable + scrollHeight="flex" + tableStyle="min-width: 640px"`
+- [ ] Coluna frozen Ação: `width 60px + frozen alignFrozen="right"` + button pencil com `@click.stop`
+- [ ] Grid card: `<div role="button" tabindex="0">` + handlers de teclado
+- [ ] CSS: tokens `--p-content-background` em header, frozen, e botão pencil
+- [ ] Mobile: NÃO esconder colunas; scroll horizontal via `tableStyle min-width`
+
+---
+
+## 17. Anti-patterns (NÃO fazer)
+
+- ❌ **Busca na sidebar** — sempre no topo do main, ao lado do view toggle
+- ❌ **`display: none` em colunas no mobile** — usar scroll horizontal + frozen
+- ❌ **`<button>` envolvendo card no grid** — quebra HTML quando tem pencil interno; usar `<div role="button">`
+- ❌ **`var(--m-bg-medium)` na coluna frozen no dark** — tem 12% transparência, vaza scroll. Usar `var(--p-content-background)`
+- ❌ **`text-amber-300` Tailwind hardcoded** no ícone do header da página — usar `color: var(--p-primary-color)` via classe
+- ❌ **`cls: 'warn'` pra "Novo"** — semanticamente errado (warn = aviso amarelo, novo = info azul)
+- ❌ **Paginator com `#paginatorstart` slot duplicando refresh** — refresh já vive no header da página; centralizar o paginator (sem paginatorstart)
+- ❌ **Skeleton manual + `carregandoInicial` na lista** — DataTable tem `:loading` nativo
+- ❌ **`pageMCR + filteredPaginated` manual** — DataTable pagina internamente; só usa `firstXX/rowsXX` compartilhado
+- ❌ **Border-left só em `is-new`** — todos os 3 status devem ter border-left colorido (consistência visual)
+- ❌ **Misturar opacidade pesada (0.55, 0.75) com border colorido** — escolher uma estratégia; preferir border + opacidade leve (0.85 max)
+
+---
+
+## 18. Referência canônica
+
+`src/layout/melissa/MelissaCadastrosRecebidos.vue` — implementação 1:1
+deste blueprint. Quando dúvida, abrir esse arquivo lado-a-lado e
+copiar o padrão exato (variáveis, ordem dos templates, tokens CSS).
+
+Próximas adoções planejadas: `MelissaCompromissos`, `MelissaMedicos`,
+`MelissaConversas`, `MelissaRecorrencias`, `MelissaTags`,
+`MelissaGrupos` — todas seguem este blueprint.
diff --git a/src/features/patients/cadastro/PatientsCadastroPage.vue b/src/features/patients/cadastro/PatientsCadastroPage.vue
index de1e070..7966867 100644
--- a/src/features/patients/cadastro/PatientsCadastroPage.vue
+++ b/src/features/patients/cadastro/PatientsCadastroPage.vue
@@ -746,7 +746,7 @@ const escolaridadeOpts = [
   { label:'Prefere não informar',         value:'Prefere não informar'         },
 ]
 const canalOpts     = [{ label:'WhatsApp',value:'WhatsApp' },{ label:'Telefone',value:'Telefone' },{ label:'E-mail',value:'E-mail' },{ label:'SMS',value:'SMS' }]
-const statusOpts    = [{ label:'Ativo',value:'Ativo' },{ label:'Em espera',value:'Em espera' },{ label:'Inativo',value:'Inativo' },{ label:'Alta',value:'Alta' }]
+const statusOpts    = [{ label:'Ativo',value:'Ativo' },{ label:'Em espera',value:'Em espera' },{ label:'Inativo',value:'Inativo' },{ label:'Alta',value:'Alta' },{ label:'Arquivado',value:'Arquivado' }]
 const scopeOpts     = [{ label:'Clínica',value:'Clínica' },{ label:'Particular',value:'Particular' },{ label:'Online',value:'Online' },{ label:'Híbrido',value:'Híbrido' }]
 const tipoContatoOpts = [{ label:'Emergência',value:'emergencia' },{ label:'Familiar',value:'familiar' },{ label:'Profissional de saúde',value:'profissional_saude' },{ label:'Amigo(a)',value:'amigo' },{ label:'Outro',value:'outro' }]
 
diff --git a/src/features/patients/services/patientsRepository.js b/src/features/patients/services/patientsRepository.js
index b62f205..7749d02 100644
--- a/src/features/patients/services/patientsRepository.js
+++ b/src/features/patients/services/patientsRepository.js
@@ -95,6 +95,22 @@ export async function softDeletePatient(id, { tenantId } = {}) {
     if (error) throw error;
 }
 
+/**
+ * Restaura um paciente arquivado — volta status pra 'Ativo'.
+ * Inverso explícito do softDeletePatient. Uso: botão "Restaurar"
+ * que aparece nas ações quando p.status === 'Arquivado'.
+ */
+export async function restorePatient(id, { tenantId } = {}) {
+    if (!id) throw new Error('id obrigatório');
+    assertTenantId(tenantId);
+    const { error } = await supabase
+        .from('patients')
+        .update({ status: 'Ativo' })
+        .eq('id', id)
+        .eq('tenant_id', tenantId);
+    if (error) throw error;
+}
+
 // ─────────────────────────────────────────────────────────────────────────
 // Groups
 // -----------------------------------------------------------------------------
diff --git a/src/layout/melissa/MelissaAgendamentosRecebidos.vue b/src/layout/melissa/MelissaAgendamentosRecebidos.vue
new file mode 100644
index 0000000..a612b6b
--- /dev/null
+++ b/src/layout/melissa/MelissaAgendamentosRecebidos.vue
@@ -0,0 +1,1969 @@
+<!--
+|--------------------------------------------------------------------------
+| Agência PSI
+|--------------------------------------------------------------------------
+| Arquivo: src/layout/melissa/MelissaAgendamentosRecebidos.vue
+| Data: 2026-05-05
+|
+| Página Melissa nativa de Agendamentos Recebidos (solicitações vindas
+| do agendador online). Espelha 1:1 o blueprint de
+| `blueprints/melissa-table-page-blueprint.md`, com prefixo `mar`.
+|
+| Difere da CadastrosRecebidos por:
+|   - Tabela: agendador_solicitacoes (não patient_intake_requests)
+|   - 4 status: pendente / autorizado / convertido / recusado
+|   - Ações: Autorizar / Recusar (com motivo) / Converter em sessão
+|   - Conversão abre AgendaEventDialog (cria paciente + cria evento)
+|--------------------------------------------------------------------------
+-->
+<script setup>
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { useConfirm } from 'primevue/useconfirm';
+import { supabase } from '@/lib/supabase/client';
+import { useTenantStore } from '@/stores/tenantStore';
+
+import AgendaEventDialog from '@/features/agenda/components/AgendaEventDialog.vue';
+import { useAgendaSettings } from '@/features/agenda/composables/useAgendaSettings';
+import { useDeterminedCommitments } from '@/features/agenda/composables/useDeterminedCommitments';
+import { useAgendaEvents } from '@/features/agenda/composables/useAgendaEvents';
+
+const emit = defineEmits(['close']);
+const toast = useToast();
+const confirm = useConfirm();
+const tenantStore = useTenantStore();
+
+// ── Identidade ────────────────────────────────────────────
+const isClinic = computed(() => tenantStore.role === 'clinic_admin' || tenantStore.role === 'tenant_admin');
+const tenantId = computed(() => tenantStore.activeTenantId || tenantStore.tenantId || tenantStore.tenant?.id || null);
+const ownerId = ref(null);
+
+// ── Breakpoints + drawer ───────────────────────────────────
+const drawerOpen = ref(false);
+const isMobile = ref(false);
+let _mqMobile = null;
+function _onMqMobileChange(e) {
+    isMobile.value = e.matches;
+    if (!e.matches) drawerOpen.value = false;
+}
+function toggleDrawer() { drawerOpen.value = !drawerOpen.value; }
+function fecharDrawer() { drawerOpen.value = false; }
+
+// ── Estado ─────────────────────────────────────────────────
+const loading = ref(false);
+const rows = ref([]);
+const busca = ref('');
+const statusFilter = ref('pendente'); // default — mais actionable
+
+const carregandoInicial = computed(
+    () => loading.value && rows.value.length === 0
+);
+
+// ── Formatters ─────────────────────────────────────────────
+function onlyDigits(v) { return String(v ?? '').replace(/\D/g, ''); }
+function fmtPhoneBR(v) {
+    const d = onlyDigits(v);
+    if (!d) return '—';
+    if (d.length === 11) return `(${d.slice(0,2)}) ${d.slice(2,7)}-${d.slice(7,11)}`;
+    if (d.length === 10) return `(${d.slice(0,2)}) ${d.slice(2,6)}-${d.slice(6,10)}`;
+    return d;
+}
+function fmtCPF(v) {
+    const d = onlyDigits(v);
+    if (!d || d.length !== 11) return d || '—';
+    return `${d.slice(0,3)}.${d.slice(3,6)}.${d.slice(6,9)}-${d.slice(9,11)}`;
+}
+function fmtData(iso) {
+    if (!iso) return '—';
+    const [y, m, d] = String(iso).split('-');
+    if (!y || !m || !d) return iso;
+    const dias = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'];
+    return `${dias[new Date(+y, +m - 1, +d).getDay()]}, ${d}/${m}/${y}`;
+}
+function fmtHora(h) {
+    return h ? String(h).slice(0, 5) : '—';
+}
+function fmtRelative(iso) {
+    if (!iso) return '—';
+    const d = new Date(iso);
+    const now = new Date();
+    const diff = Math.floor((now - d) / 1000);
+    if (diff < 60) return 'agora';
+    if (diff < 3600) return `${Math.floor(diff / 60)}m`;
+    if (diff < 86400) return `${Math.floor(diff / 3600)}h`;
+    if (diff < 604800) return `${Math.floor(diff / 86400)}d`;
+    return d.toLocaleDateString('pt-BR');
+}
+function nomeCompleto(s) {
+    return `${s?.paciente_nome || ''} ${s?.paciente_sobrenome || ''}`.trim() || '—';
+}
+function pacienteIniciais(s) {
+    const partes = `${s?.paciente_nome || ''} ${s?.paciente_sobrenome || ''}`.trim().split(/\s+/);
+    if (partes.length === 1) return partes[0][0]?.toUpperCase() || '?';
+    return (partes[0][0] + (partes[partes.length - 1][0] || '')).toUpperCase();
+}
+function dash(v) {
+    const s = String(v ?? '').trim();
+    return s ? s : '—';
+}
+
+// ── Labels ─────────────────────────────────────────────────
+const TIPO_LABEL = { primeira: 'Primeira Entrevista', retorno: 'Retorno', reagendar: 'Reagendamento' };
+const MODAL_LABEL = { presencial: 'Presencial', online: 'Online', ambos: 'Ambos' };
+function tipoLabel(t) { return TIPO_LABEL[t] || t || '—'; }
+function modalidadeLabel(m) { return MODAL_LABEL[m] || m || '—'; }
+
+// ── Status helpers ─────────────────────────────────────────
+function statusLabel(s) {
+    return {
+        pendente: 'Pendente',
+        autorizado: 'Autorizado',
+        convertido: 'Convertido',
+        recusado: 'Recusado',
+        expirado: 'Expirado'
+    }[s] || s || '—';
+}
+function statusClass(s) {
+    return {
+        pendente: 'is-pendente',
+        autorizado: 'is-autorizado',
+        convertido: 'is-convertido',
+        recusado: 'is-recusado',
+        expirado: 'is-expirado'
+    }[s] || '';
+}
+function isExpirada(s) {
+    if (s?.status !== 'pendente' || !s?.reservado_ate) return false;
+    return new Date(s.reservado_ate) < new Date();
+}
+
+// ── Stats ──────────────────────────────────────────────────
+const stats = computed(() => {
+    const all = rows.value;
+    const p = all.filter((r) => r.status === 'pendente').length;
+    const a = all.filter((r) => r.status === 'autorizado').length;
+    const c = all.filter((r) => r.status === 'convertido').length;
+    const x = all.filter((r) => r.status === 'recusado').length;
+    return [
+        { key: 'total',      label: 'Total',       value: all.length, cls: 'neutral' },
+        { key: 'pendente',   label: 'Pendentes',   value: p, cls: p > 0 ? 'info' : 'neutral' },
+        { key: 'autorizado', label: 'Autorizados', value: a, cls: a > 0 ? 'ok' : 'neutral' },
+        { key: 'recusado',   label: 'Recusados',   value: x, cls: x > 0 ? 'danger' : 'neutral' }
+    ];
+});
+
+const STATUS_FILTER_OPTIONS = [
+    { key: 'pendente',   label: 'Pendentes',   icon: 'pi pi-clock' },
+    { key: 'autorizado', label: 'Autorizados', icon: 'pi pi-check-circle' },
+    { key: 'convertido', label: 'Convertidos', icon: 'pi pi-calendar-plus' },
+    { key: 'recusado',   label: 'Recusados',   icon: 'pi pi-times-circle' }
+];
+
+function toggleStatusFilter(s) {
+    statusFilter.value = statusFilter.value === s ? '' : s;
+}
+
+// ── Filtragem ──────────────────────────────────────────────
+const filtered = computed(() => {
+    const term = String(busca.value || '').trim().toLowerCase();
+    let list = rows.value;
+    if (statusFilter.value) list = list.filter((r) => r.status === statusFilter.value);
+    if (!term) return list;
+    return list.filter((r) => {
+        const nome = nomeCompleto(r).toLowerCase();
+        const email = String(r.paciente_email || '').toLowerCase();
+        const tel = onlyDigits(r.paciente_celular);
+        return nome.includes(term) || email.includes(term) || tel.includes(term);
+    });
+});
+
+// ── Paginação compartilhada (DataTable + grid) ─────────────
+const PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
+const rowsMAR = ref(10);
+const firstMAR = ref(0);
+function onPage(event) {
+    firstMAR.value = event.first;
+    rowsMAR.value = event.rows;
+}
+watch([busca, statusFilter], () => { firstMAR.value = 0; });
+
+function onRowClick(event) {
+    if (event?.data) openDetails(event.data);
+}
+function rowStatusClass(data) {
+    return statusClass(data?.status);
+}
+
+// ── View mode persistido ──────────────────────────────────
+const VIEW_MODE_KEY = 'mar.viewMode.v1';
+const viewMode = ref('list');
+try {
+    const saved = localStorage.getItem(VIEW_MODE_KEY);
+    if (saved === 'list' || saved === 'grid') viewMode.value = saved;
+} catch (_) {}
+function setViewMode(m) {
+    if (m !== 'list' && m !== 'grid') return;
+    viewMode.value = m;
+    try { localStorage.setItem(VIEW_MODE_KEY, m); } catch (_) {}
+}
+
+const pagedItems = computed(() =>
+    filtered.value.slice(firstMAR.value, firstMAR.value + rowsMAR.value)
+);
+
+// ── Fetch ──────────────────────────────────────────────────
+async function loadOwnerId() {
+    const { data } = await supabase.auth.getUser();
+    ownerId.value = data?.user?.id || null;
+}
+
+async function fetchSolicitacoes() {
+    if (!ownerId.value) return;
+    loading.value = true;
+    try {
+        let q = supabase
+            .from('agendador_solicitacoes')
+            .select('id, owner_id, tenant_id, paciente_nome, paciente_sobrenome, paciente_email, paciente_celular, paciente_cpf, tipo, modalidade, data_solicitada, hora_solicitada, reservado_ate, motivo, como_conheceu, status, recusado_motivo, autorizado_em, created_at')
+            .order('data_solicitada', { ascending: false })
+            .order('hora_solicitada', { ascending: true });
+
+        if (isClinic.value) q = q.eq('tenant_id', tenantId.value);
+        else q = q.eq('owner_id', ownerId.value);
+
+        const { data, error } = await q;
+        if (error) throw error;
+
+        // Sort: pendente > autorizado > convertido > recusado > expirado
+        const weight = (s) => ({ pendente: 0, autorizado: 1, convertido: 2, recusado: 3, expirado: 4 }[s] ?? 9);
+        rows.value = (data || []).slice().sort((a, b) => {
+            const wa = weight(a.status), wb = weight(b.status);
+            if (wa !== wb) return wa - wb;
+            return new Date(b.created_at || 0).getTime() - new Date(a.created_at || 0).getTime();
+        });
+    } catch (e) {
+        toast.add({ severity: 'error', summary: 'Erro ao carregar', detail: e?.message || String(e), life: 3500 });
+    } finally {
+        loading.value = false;
+    }
+}
+
+// ── Dialog detalhes ────────────────────────────────────────
+const dlg = ref({ open: false, item: null, saving: false, recusa_note: '' });
+
+function openDetails(row) {
+    dlg.value.open = true;
+    dlg.value.item = row;
+    dlg.value.recusa_note = row?.recusado_motivo || '';
+}
+function closeDlg() {
+    dlg.value.open = false;
+    dlg.value.saving = false;
+    dlg.value.item = null;
+    dlg.value.recusa_note = '';
+}
+
+const dlgSections = computed(() => {
+    const i = dlg.value.item;
+    if (!i) return [];
+    const sec = (title, rs) => ({ title, rows: rs.filter((r) => r.value && r.value !== '—') });
+    return [
+        sec('Solicitação', [
+            { label: 'Data',       value: fmtData(i.data_solicitada) },
+            { label: 'Horário',    value: fmtHora(i.hora_solicitada) },
+            { label: 'Tipo',       value: tipoLabel(i.tipo) },
+            { label: 'Modalidade', value: modalidadeLabel(i.modalidade) },
+            { label: 'Status',     value: statusLabel(i.status) },
+            { label: 'Recebida',   value: fmtRelative(i.created_at) }
+        ]),
+        sec('Contato', [
+            { label: 'Email',    value: dash(i.paciente_email) },
+            { label: 'Celular',  value: fmtPhoneBR(i.paciente_celular) },
+            { label: 'CPF',      value: fmtCPF(i.paciente_cpf) }
+        ]),
+        sec('Detalhes', [
+            { label: 'Motivo',         value: dash(i.motivo) },
+            { label: 'Como conheceu',  value: dash(i.como_conheceu) },
+            { label: 'Motivo recusa',  value: dash(i.recusado_motivo) }
+        ])
+    ].filter((s) => s.rows.length > 0);
+});
+
+// ── Aprovar / Autorizar ────────────────────────────────────
+async function autorizar() {
+    const item = dlg.value.item;
+    if (!item) return;
+    dlg.value.saving = true;
+    try {
+        const { error } = await supabase
+            .from('agendador_solicitacoes')
+            .update({ status: 'autorizado', autorizado_em: new Date().toISOString() })
+            .eq('id', item.id);
+        if (error) throw error;
+        toast.add({ severity: 'success', summary: 'Autorizado', detail: `Solicitação de ${nomeCompleto(item)} autorizada.`, life: 2500 });
+        await fetchSolicitacoes();
+        const updated = rows.value.find((r) => r.id === item.id);
+        if (updated) openDetails(updated); else closeDlg();
+    } catch (e) {
+        toast.add({ severity: 'error', summary: 'Erro', detail: e?.message, life: 4000 });
+    } finally {
+        dlg.value.saving = false;
+    }
+}
+
+// ── Recusar ───────────────────────────────────────────────
+async function recusar() {
+    const item = dlg.value.item;
+    if (!item) return;
+    confirm.require({
+        message: 'Marcar esta solicitação como recusada?',
+        header: 'Confirmar recusa',
+        icon: 'pi pi-exclamation-triangle',
+        acceptLabel: 'Recusar',
+        rejectLabel: 'Cancelar',
+        acceptSeverity: 'danger',
+        accept: async () => {
+            dlg.value.saving = true;
+            try {
+                const motivo = String(dlg.value.recusa_note || '').trim() || null;
+                const { error } = await supabase
+                    .from('agendador_solicitacoes')
+                    .update({ status: 'recusado', recusado_motivo: motivo })
+                    .eq('id', item.id);
+                if (error) throw error;
+                toast.add({ severity: 'info', summary: 'Recusado', life: 2200 });
+                await fetchSolicitacoes();
+                const updated = rows.value.find((r) => r.id === item.id);
+                if (updated) openDetails(updated); else closeDlg();
+            } catch (e) {
+                toast.add({ severity: 'error', summary: 'Erro', detail: e?.message, life: 4000 });
+            } finally {
+                dlg.value.saving = false;
+            }
+        }
+    });
+}
+
+// ── Converter em sessão ───────────────────────────────────
+const { settings: agendaSettings, load: loadAgendaSettings } = useAgendaSettings();
+const { create: createEvento } = useAgendaEvents();
+const { rows: commitmentRows, load: loadCommitments } = useDeterminedCommitments(tenantId);
+const commitmentOptions = computed(() => (commitmentRows.value || []).filter((c) => c.active !== false));
+const sessionCommitmentId = computed(() => commitmentOptions.value.find((c) => c.native_key === 'session')?.id || null);
+
+const eventDialogOpen = ref(false);
+const eventRow = ref(null);
+const convertendoId = ref(null);
+let _convertTarget = null;
+
+function isUuid(v) {
+    return /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(String(v || ''));
+}
+
+async function encontrarOuCriarPaciente(s) {
+    const email = s.paciente_email?.toLowerCase().trim();
+    if (email) {
+        const { data: found } = await supabase
+            .from('patients').select('id')
+            .eq('tenant_id', tenantId.value)
+            .ilike('email_principal', email)
+            .maybeSingle();
+        if (found?.id) return found.id;
+    }
+    const { data: memberData, error: memberErr } = await supabase
+        .from('tenant_members').select('id')
+        .eq('tenant_id', tenantId.value)
+        .eq('user_id', ownerId.value)
+        .eq('status', 'active')
+        .maybeSingle();
+    if (memberErr || !memberData?.id) throw new Error('Membro ativo não encontrado para criação do paciente.');
+    const scope = isClinic.value ? 'clinic' : 'therapist';
+    const nome = [s.paciente_nome, s.paciente_sobrenome].filter(Boolean).join(' ');
+    const { data: novo, error: criErr } = await supabase
+        .from('patients')
+        .insert({
+            tenant_id: tenantId.value,
+            responsible_member_id: memberData.id,
+            owner_id: ownerId.value,
+            nome_completo: nome,
+            email_principal: email || null,
+            telefone: onlyDigits(s.paciente_celular) || null,
+            cpf: onlyDigits(s.paciente_cpf) || null,
+            onde_nos_conheceu: s.como_conheceu || null,
+            observacoes: s.motivo ? `Motivo da consulta: ${s.motivo}` : null,
+            patient_scope: scope,
+            therapist_member_id: scope === 'therapist' ? memberData.id : null,
+            status: 'Ativo'
+        })
+        .select('id').single();
+    if (criErr) throw new Error(`Falha ao criar paciente: ${criErr.message}`);
+    toast.add({ severity: 'info', summary: 'Paciente criado', detail: `${nome} foi adicionado à sua lista.`, life: 3000 });
+    return novo.id;
+}
+
+async function converterEmSessao() {
+    const item = dlg.value.item;
+    if (!item || convertendoId.value) return;
+    convertendoId.value = item.id;
+    try {
+        const pacienteId = await encontrarOuCriarPaciente(item);
+        const hora = fmtHora(item.hora_solicitada);
+        eventRow.value = {
+            owner_id: item.owner_id,
+            tipo: 'sessao',
+            modalidade: item.modalidade || 'presencial',
+            inicio_em: `${item.data_solicitada}T${hora}:00`,
+            patient_id: pacienteId,
+            paciente_id: pacienteId,
+            paciente_nome: nomeCompleto(item),
+            _solicitacaoId: item.id
+        };
+        _convertTarget = item;
+        // Fecha o dialog de detalhes pra abrir o AgendaEventDialog limpo.
+        dlg.value.open = false;
+        eventDialogOpen.value = true;
+    } catch (e) {
+        toast.add({ severity: 'error', summary: 'Erro', detail: e?.message, life: 4000 });
+    } finally {
+        convertendoId.value = null;
+    }
+}
+
+async function onEventSaved(arg) {
+    eventDialogOpen.value = false;
+    if (!_convertTarget) return;
+    const target = _convertTarget;
+    _convertTarget = null;
+    try {
+        const isWrapped = !!arg && Object.prototype.hasOwnProperty.call(arg, 'payload');
+        const raw = isWrapped ? arg.payload : arg;
+        const normalized = { ...raw };
+        if (!normalized.owner_id) normalized.owner_id = ownerId.value;
+        normalized.tenant_id = tenantId.value;
+        normalized.tipo = 'sessao';
+        if (!normalized.status) normalized.status = 'agendado';
+        if (!String(normalized.titulo || '').trim()) normalized.titulo = 'Sessão';
+        if (!normalized.visibility_scope) normalized.visibility_scope = 'public';
+        if (!isUuid(normalized.paciente_id)) normalized.paciente_id = null;
+        if (normalized.determined_commitment_id && !isUuid(normalized.determined_commitment_id)) normalized.determined_commitment_id = null;
+        const dbFields = ['tenant_id', 'owner_id', 'terapeuta_id', 'patient_id', 'tipo', 'status', 'titulo', 'observacoes', 'inicio_em', 'fim_em', 'visibility_scope', 'determined_commitment_id', 'titulo_custom', 'extra_fields', 'modalidade'];
+        const dbPayload = {};
+        for (const k of dbFields) if (normalized[k] !== undefined) dbPayload[k] = normalized[k];
+        await createEvento(dbPayload);
+        const { error } = await supabase
+            .from('agendador_solicitacoes')
+            .update({ status: 'convertido' })
+            .eq('id', target.id);
+        if (error) throw error;
+        toast.add({ severity: 'success', summary: 'Convertido!', detail: `Sessão criada para ${nomeCompleto(target)}.`, life: 4000 });
+        await fetchSolicitacoes();
+    } catch (e) {
+        toast.add({ severity: 'error', summary: 'Erro ao converter', detail: e?.message, life: 4000 });
+    }
+}
+
+function onEventDialogClose() {
+    eventDialogOpen.value = false;
+    _convertTarget = null;
+    eventRow.value = null;
+}
+
+onMounted(async () => {
+    if (typeof window !== 'undefined' && window.matchMedia) {
+        _mqMobile = window.matchMedia('(max-width: 1023px)');
+        isMobile.value = _mqMobile.matches;
+        _mqMobile.addEventListener('change', _onMqMobileChange);
+    }
+    if (typeof tenantStore.loadSessionAndTenant === 'function') {
+        await tenantStore.loadSessionAndTenant();
+    }
+    await loadOwnerId();
+    await Promise.all([loadAgendaSettings(), loadCommitments(), fetchSolicitacoes()]);
+});
+onBeforeUnmount(() => {
+    if (_mqMobile) _mqMobile.removeEventListener('change', _onMqMobileChange);
+});
+</script>
+
+<template>
+    <aside
+        class="mar-mobile-drawer"
+        :class="{ 'is-open': drawerOpen }"
+        v-show="isMobile"
+        aria-label="Estatísticas e filtros"
+    >
+        <div id="mar-mobile-drawer-target" class="mar-mobile-drawer__scroll" />
+    </aside>
+    <Transition name="mar-drawer-fade">
+        <div
+            v-if="isMobile && drawerOpen"
+            class="mar-mobile-drawer__backdrop"
+            @click="fecharDrawer"
+        />
+    </Transition>
+
+    <section class="mar-page">
+        <header class="mar-page__head">
+            <button
+                class="mar-menu-btn mar-menu-btn--mobile-only"
+                v-tooltip.bottom="'Estatísticas & filtros'"
+                @click="toggleDrawer"
+            >
+                <i class="pi pi-bars" />
+                <span>Menu</span>
+            </button>
+            <div class="mar-page__title">
+                <i class="pi pi-inbox mar-page__title-icon" />
+                <span>Agendamentos recebidos</span>
+                <span class="mar-page__count">{{ filtered.length }}</span>
+            </div>
+            <div class="mar-page__actions">
+                <button
+                    class="mar-head-btn"
+                    v-tooltip.bottom="'Recarregar'"
+                    :disabled="loading"
+                    @click="fetchSolicitacoes"
+                >
+                    <i :class="loading ? 'pi pi-spin pi-spinner' : 'pi pi-refresh'" />
+                </button>
+                <button class="mar-close" v-tooltip.bottom="'Voltar (Esc)'" @click="emit('close')">
+                    <i class="pi pi-times" />
+                </button>
+            </div>
+        </header>
+
+        <!-- Subheader explicativo — diferencia visualmente desta página
+             (vs. Cadastros Recebidos, que tem layout idêntico). Padrão
+             do melissa-table-page-blueprint.md. -->
+        <div class="mar-subheader">
+            <i class="pi pi-info-circle mar-subheader__icon" />
+            <span class="mar-subheader__text">
+                Solicitações de horário vindas do agendador online à espera de
+                ação. <strong>Autorize</strong> pra reservar o slot,
+                <strong>recuse</strong> com motivo, ou
+                <strong>converta direto em sessão</strong> — a gente cria o
+                paciente automaticamente se ainda não existir.
+            </span>
+        </div>
+
+        <div class="mar-body">
+            <Teleport to="#mar-mobile-drawer-target" :disabled="!isMobile">
+            <aside class="mar-side">
+                <!-- Stats -->
+                <div class="mar-w mar-w--side">
+                    <div class="mar-w__head">
+                        <span class="mar-w__title"><i class="pi pi-chart-bar" /> Estatísticas</span>
+                    </div>
+                    <div class="mar-stats">
+                        <template v-if="carregandoInicial">
+                            <div v-for="i in 4" :key="`stsk-${i}`" class="mar-stat" aria-busy="true">
+                                <div class="mar-stat__val melissa-skeleton melissa-skeleton--number" />
+                                <div class="mar-stat__lbl melissa-skeleton melissa-skeleton--text" style="width: 60%; margin-top: 6px;" />
+                            </div>
+                        </template>
+                        <div
+                            v-for="s in stats"
+                            v-else
+                            :key="s.key"
+                            class="mar-stat"
+                            :class="`is-${s.cls}`"
+                        >
+                            <div class="mar-stat__val">{{ s.value }}</div>
+                            <div class="mar-stat__lbl">{{ s.label }}</div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Filtro de status -->
+                <div class="mar-w mar-w--side">
+                    <div class="mar-w__head">
+                        <span class="mar-w__title"><i class="pi pi-filter" /> Status</span>
+                        <span v-if="statusFilter" class="mar-w__count">1</span>
+                    </div>
+                    <div class="mar-side__list">
+                        <button
+                            v-for="o in STATUS_FILTER_OPTIONS"
+                            :key="o.key"
+                            class="mar-side__item"
+                            :class="[`is-${o.key}`, { 'is-active': statusFilter === o.key }]"
+                            @click="toggleStatusFilter(o.key)"
+                        >
+                            <i :class="o.icon" />
+                            <span>{{ o.label }}</span>
+                        </button>
+                        <Transition name="mar-clear">
+                            <button
+                                v-if="statusFilter"
+                                class="mar-side__item is-clear"
+                                @click="statusFilter = ''"
+                            >
+                                <i class="pi pi-filter-slash" />
+                                <span>Limpar filtro</span>
+                            </button>
+                        </Transition>
+                    </div>
+                </div>
+            </aside>
+            </Teleport>
+
+            <div class="mar-main">
+                <div class="mar-toolbar">
+                    <div class="mar-search">
+                        <i class="pi pi-search mar-search__icon" />
+                        <input
+                            v-model="busca"
+                            type="text"
+                            placeholder="Buscar por nome, email ou telefone…"
+                            class="mar-search__input"
+                        />
+                        <button
+                            v-if="busca"
+                            class="mar-search__clear"
+                            v-tooltip.bottom="'Limpar busca'"
+                            @click="busca = ''"
+                        >
+                            <i class="pi pi-times" />
+                        </button>
+                    </div>
+                    <div class="mar-view-toggle" role="group" aria-label="Visualização">
+                        <button
+                            class="mar-view-toggle__btn"
+                            :class="{ 'is-active': viewMode === 'list' }"
+                            v-tooltip.bottom="'Lista'"
+                            aria-label="Lista"
+                            @click="setViewMode('list')"
+                        >
+                            <i class="pi pi-list" />
+                        </button>
+                        <button
+                            class="mar-view-toggle__btn"
+                            :class="{ 'is-active': viewMode === 'grid' }"
+                            v-tooltip.bottom="'Grade'"
+                            aria-label="Grade"
+                            @click="setViewMode('grid')"
+                        >
+                            <i class="pi pi-th-large" />
+                        </button>
+                    </div>
+                </div>
+
+                <DataTable
+                    v-if="viewMode === 'list'"
+                    :value="filtered"
+                    :loading="loading"
+                    dataKey="id"
+                    paginator
+                    :rows="rowsMAR"
+                    :first="firstMAR"
+                    :rowsPerPageOptions="PAGE_SIZE_OPTIONS"
+                    paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+                    currentPageReportTemplate="{first}–{last} de {totalRecords}"
+                    :rowClass="rowStatusClass"
+                    selectionMode="single"
+                    scrollable
+                    scrollHeight="flex"
+                    tableStyle="min-width: 760px"
+                    class="mar-table"
+                    @row-click="onRowClick"
+                    @page="onPage"
+                >
+                    <Column header="Paciente" style="min-width: 220px">
+                        <template #body="{ data }">
+                            <div class="mar-row__patient">
+                                <span class="mar-card__avatar mar-card__avatar--sm">
+                                    <span>{{ pacienteIniciais(data) }}</span>
+                                </span>
+                                <div class="mar-row__patient-text">
+                                    <span class="mar-row__name">{{ nomeCompleto(data) }}</span>
+                                    <span class="mar-card__badge" :class="statusClass(data.status)">
+                                        {{ statusLabel(data.status) }}
+                                    </span>
+                                </div>
+                            </div>
+                        </template>
+                    </Column>
+
+                    <Column header="Solicitado" style="min-width: 180px">
+                        <template #body="{ data }">
+                            <div class="mar-row__when">
+                                <span class="mar-row__when-data">
+                                    <i class="pi pi-calendar" /> {{ fmtData(data.data_solicitada) }}
+                                </span>
+                                <span class="mar-row__when-hora">
+                                    <i class="pi pi-clock" /> {{ fmtHora(data.hora_solicitada) }}
+                                </span>
+                            </div>
+                        </template>
+                    </Column>
+
+                    <Column header="Tipo" style="min-width: 160px">
+                        <template #body="{ data }">
+                            <div class="mar-row__tipo">
+                                <span class="mar-chip">{{ tipoLabel(data.tipo) }}</span>
+                                <span class="mar-chip mar-chip--muted">{{ modalidadeLabel(data.modalidade) }}</span>
+                            </div>
+                        </template>
+                    </Column>
+
+                    <Column header="Contato" style="min-width: 200px">
+                        <template #body="{ data }">
+                            <div class="mar-row__contact">
+                                <span v-if="data.paciente_email"><i class="pi pi-envelope" /> {{ data.paciente_email }}</span>
+                                <span v-if="data.paciente_celular"><i class="pi pi-phone" /> {{ fmtPhoneBR(data.paciente_celular) }}</span>
+                                <span v-if="!data.paciente_email && !data.paciente_celular" class="mar-row__empty">—</span>
+                            </div>
+                        </template>
+                    </Column>
+
+                    <Column header="Recebido" style="width: 130px">
+                        <template #body="{ data }">
+                            <span class="mar-row__time">
+                                <i class="pi pi-clock" /> {{ fmtRelative(data.created_at) }}
+                            </span>
+                        </template>
+                    </Column>
+
+                    <Column
+                        header=""
+                        :style="{ width: '60px', maxWidth: '60px', minWidth: '60px' }"
+                        frozen
+                        alignFrozen="right"
+                    >
+                        <template #body="{ data }">
+                            <button
+                                class="mar-row__action"
+                                v-tooltip.left="'Editar'"
+                                aria-label="Editar"
+                                @click.stop="openDetails(data)"
+                            >
+                                <i class="pi pi-pencil" />
+                            </button>
+                        </template>
+                    </Column>
+
+                    <template #empty>
+                        <div class="mar-empty">
+                            <i class="pi pi-inbox mar-empty__icon" />
+                            <div class="mar-empty__title">Nenhuma solicitação encontrada</div>
+                            <div class="mar-empty__hint">
+                                <template v-if="busca || statusFilter">Ajuste os filtros pra ver mais.</template>
+                                <template v-else>Solicitações vindas do agendador online aparecem aqui.</template>
+                            </div>
+                        </div>
+                    </template>
+
+                    <template #loading>
+                        <div class="mar-table__loading">
+                            <i class="pi pi-spin pi-spinner" />
+                            <span>Carregando solicitações…</span>
+                        </div>
+                    </template>
+                </DataTable>
+
+                <div v-else-if="viewMode === 'grid'" class="mar-grid-wrap">
+                    <div v-if="loading && filtered.length === 0" class="mar-table__loading mar-grid__loading">
+                        <i class="pi pi-spin pi-spinner" />
+                        <span>Carregando solicitações…</span>
+                    </div>
+                    <div v-else-if="filtered.length === 0" class="mar-empty">
+                        <i class="pi pi-inbox mar-empty__icon" />
+                        <div class="mar-empty__title">Nenhuma solicitação encontrada</div>
+                        <div class="mar-empty__hint">
+                            <template v-if="busca || statusFilter">Ajuste os filtros pra ver mais.</template>
+                            <template v-else>Solicitações vindas do agendador online aparecem aqui.</template>
+                        </div>
+                    </div>
+                    <div v-else class="mar-grid">
+                        <div
+                            v-for="r in pagedItems"
+                            :key="r.id"
+                            class="mar-grid__card"
+                            :class="statusClass(r.status)"
+                            role="button"
+                            tabindex="0"
+                            @click="openDetails(r)"
+                            @keydown.enter.prevent="openDetails(r)"
+                            @keydown.space.prevent="openDetails(r)"
+                        >
+                            <div class="mar-grid__top">
+                                <span class="mar-card__avatar">
+                                    <span>{{ pacienteIniciais(r) }}</span>
+                                </span>
+                                <div class="mar-grid__top-right">
+                                    <span class="mar-card__badge" :class="statusClass(r.status)">
+                                        {{ statusLabel(r.status) }}
+                                    </span>
+                                    <button
+                                        class="mar-row__action"
+                                        v-tooltip.left="'Editar'"
+                                        aria-label="Editar"
+                                        @click.stop="openDetails(r)"
+                                    >
+                                        <i class="pi pi-pencil" />
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="mar-grid__name">{{ nomeCompleto(r) }}</div>
+                            <div class="mar-grid__when">
+                                <span><i class="pi pi-calendar" /> {{ fmtData(r.data_solicitada) }}</span>
+                                <span><i class="pi pi-clock" /> {{ fmtHora(r.hora_solicitada) }}</span>
+                            </div>
+                            <div class="mar-grid__meta">
+                                <span v-if="r.paciente_email"><i class="pi pi-envelope" /> {{ r.paciente_email }}</span>
+                                <span v-if="r.paciente_celular"><i class="pi pi-phone" /> {{ fmtPhoneBR(r.paciente_celular) }}</span>
+                            </div>
+                            <div class="mar-grid__chips">
+                                <span class="mar-chip">{{ tipoLabel(r.tipo) }}</span>
+                                <span class="mar-chip mar-chip--muted">{{ modalidadeLabel(r.modalidade) }}</span>
+                            </div>
+                            <div class="mar-grid__time">
+                                <i class="pi pi-clock" /> {{ fmtRelative(r.created_at) }}
+                            </div>
+                        </div>
+                    </div>
+                    <Paginator
+                        v-if="filtered.length > 0"
+                        class="mar-paginator"
+                        :rows="rowsMAR"
+                        :totalRecords="filtered.length"
+                        :first="firstMAR"
+                        :rowsPerPageOptions="PAGE_SIZE_OPTIONS"
+                        template="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+                        currentPageReportTemplate="{first}–{last} de {totalRecords}"
+                        @page="onPage"
+                    />
+                </div>
+            </div>
+        </div>
+
+        <!-- Dialog detalhes -->
+        <Dialog
+            :visible="dlg.open"
+            modal
+            dismissable-mask
+            :style="{ width: '660px', maxWidth: '94vw' }"
+            :header="nomeCompleto(dlg.item) || 'Solicitação'"
+            @update:visible="(v) => !v && closeDlg()"
+        >
+            <div v-if="dlg.item" class="flex flex-col gap-4">
+                <!-- Avatar + status + criado em -->
+                <div class="flex items-start gap-3">
+                    <div class="mar-dlg__avatar">
+                        <span>{{ pacienteIniciais(dlg.item) }}</span>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                        <div class="text-sm font-bold">{{ nomeCompleto(dlg.item) }}</div>
+                        <div class="text-xs text-[var(--text-color-secondary)] mt-1 flex items-center gap-2 flex-wrap">
+                            <span class="mar-card__badge" :class="statusClass(dlg.item.status)">
+                                {{ statusLabel(dlg.item.status) }}
+                            </span>
+                            <span v-if="isExpirada(dlg.item)" class="mar-card__badge is-expirado">
+                                Expirada
+                            </span>
+                            <span>· Recebida {{ fmtRelative(dlg.item.created_at) }}</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Seções -->
+                <div v-for="sec in dlgSections" :key="sec.title" class="flex flex-col gap-1">
+                    <div class="text-[0.62rem] uppercase tracking-wider font-semibold text-[var(--text-color-secondary)] opacity-70">{{ sec.title }}</div>
+                    <div class="grid grid-cols-2 gap-x-4 gap-y-1 text-xs">
+                        <template v-for="r in sec.rows" :key="r.label">
+                            <div class="text-[var(--text-color-secondary)]">{{ r.label }}</div>
+                            <div class="text-[var(--text-color)]">{{ r.value }}</div>
+                        </template>
+                    </div>
+                </div>
+
+                <!-- Motivo de recusa (editável quando ainda não recusado) -->
+                <div v-if="dlg.item.status === 'pendente' || dlg.item.status === 'autorizado'" class="flex flex-col gap-1">
+                    <label class="text-[0.62rem] uppercase tracking-wider font-semibold text-[var(--text-color-secondary)] opacity-70">
+                        Motivo da recusa (opcional)
+                    </label>
+                    <Textarea v-model="dlg.recusa_note" autoResize rows="2" class="w-full text-xs" :disabled="dlg.saving" />
+                </div>
+            </div>
+            <template #footer>
+                <div class="flex items-center gap-2 w-full flex-wrap">
+                    <Button label="Fechar" text @click="closeDlg" />
+                    <div class="flex-1" />
+                    <Button
+                        v-if="dlg.item && dlg.item.status === 'pendente'"
+                        label="Recusar"
+                        severity="danger"
+                        outlined
+                        :disabled="dlg.saving"
+                        @click="recusar"
+                    />
+                    <Button
+                        v-if="dlg.item && dlg.item.status === 'pendente'"
+                        :label="dlg.saving ? 'Autorizando…' : 'Autorizar'"
+                        :loading="dlg.saving"
+                        :disabled="dlg.saving"
+                        severity="success"
+                        @click="autorizar"
+                    />
+                    <Button
+                        v-if="dlg.item && (dlg.item.status === 'pendente' || dlg.item.status === 'autorizado')"
+                        :label="convertendoId ? 'Convertendo…' : 'Converter em sessão'"
+                        :loading="!!convertendoId"
+                        :disabled="dlg.saving || !!convertendoId"
+                        @click="converterEmSessao"
+                    />
+                </div>
+            </template>
+        </Dialog>
+
+        <!-- AgendaEventDialog pra criar a sessão durante a conversão.
+             Props batem com a API canônica usada na AgendamentosRecebidosPage
+             original (event-row, agenda-settings, commitment-options, etc.). -->
+        <AgendaEventDialog
+            v-model="eventDialogOpen"
+            :event-row="eventRow"
+            :owner-id="ownerId"
+            :tenant-id="tenantId"
+            :agenda-settings="agendaSettings"
+            :commitment-options="commitmentOptions"
+            :preset-commitment-id="sessionCommitmentId"
+            :restrict-patients-to-owner="!isClinic"
+            :patient-scope-owner-id="!isClinic ? ownerId : null"
+            @save="onEventSaved"
+            @update:modelValue="(v) => { if (!v) onEventDialogClose(); }"
+        />
+    </section>
+</template>
+
+<style scoped>
+.mar-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: mar-page-enter 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
+}
+@keyframes mar-page-enter {
+    from { opacity: 0; transform: scale(0.985); }
+    to   { opacity: 1; transform: scale(1); }
+}
+
+.mar-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;
+}
+.mar-page__title {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 1rem;
+    font-weight: 500;
+}
+.mar-page__title-icon {
+    color: var(--p-primary-color);
+    font-size: 1.05rem;
+}
+.mar-page__title > span:not(.mar-page__count) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mar-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;
+}
+.mar-page__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
+
+.mar-close, .mar-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;
+}
+.mar-close:hover, .mar-head-btn:hover { background: var(--m-bg-soft-hover); }
+.mar-head-btn > i { font-size: 0.85rem; }
+
+.mar-menu-btn {
+    display: none;
+    height: 32px;
+    align-items: center;
+    gap: 6px;
+    flex-shrink: 0;
+    background: var(--m-accent);
+    border: 1px solid var(--m-accent);
+    color: white;
+    padding: 0 11px;
+    border-radius: 9px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.78rem;
+    font-weight: 600;
+    transition: background-color 140ms ease, transform 140ms ease;
+}
+.mar-menu-btn:hover {
+    background: color-mix(in srgb, var(--m-accent) 88%, white);
+    transform: translateY(-1px);
+}
+
+/* Subheader explicativo — faixa abaixo do page__head com texto contextual
+   sobre a página. Bg sutil + ícone primary + tipografia menor. Diferencia
+   esta página de outras tabelas Melissa que têm layout visual idêntico. */
+.mar-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;
+}
+.mar-subheader__icon {
+    color: var(--p-primary-color);
+    font-size: 0.92rem;
+    flex-shrink: 0;
+    margin-top: 1px;
+}
+.mar-subheader__text {
+    flex: 1;
+    min-width: 0;
+}
+.mar-subheader__text strong {
+    color: var(--m-text);
+    font-weight: 600;
+}
+
+.mar-body {
+    flex: 1;
+    display: flex;
+    min-height: 0;
+    gap: 0;
+    padding: 0;
+}
+.mar-side {
+    width: 280px;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    overflow-y: auto;
+    background: var(--m-bg-soft);
+    border-right: 1px solid var(--m-border);
+}
+.mar-side::-webkit-scrollbar { width: 5px; }
+.mar-side::-webkit-scrollbar-thumb {
+    background: var(--m-border-strong);
+    border-radius: 3px;
+}
+
+/* Cards na sidebar */
+.mar-w {
+    background: var(--m-bg-medium);
+    border: 1px solid var(--m-border);
+    border-radius: 12px;
+    padding: 12px;
+}
+.mar-w--side {
+    margin: 12px 12px 0;
+    flex-shrink: 0;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+}
+.mar-w--side:last-of-type { margin-bottom: 12px; }
+.mar-w__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+}
+.mar-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;
+}
+.mar-w__title > i { color: var(--m-text-muted); font-size: 0.7rem; }
+.mar-w__count {
+    font-size: 0.65rem;
+    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: 1px 7px;
+    border-radius: 999px;
+}
+
+.mar-stats {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 6px;
+}
+.mar-stat {
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border);
+    border-radius: 10px;
+    padding: 8px 10px;
+}
+.mar-stat__val {
+    font-size: 1.1rem;
+    font-weight: 600;
+    line-height: 1.1;
+}
+.mar-stat__lbl {
+    font-size: 0.65rem;
+    color: var(--m-text-muted);
+    margin-top: 4px;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+}
+.mar-stat.is-info .mar-stat__val   { color: rgb(37, 99, 235); }
+.mar-stat.is-ok .mar-stat__val     { color: rgb(22, 163, 74); }
+.mar-stat.is-danger .mar-stat__val { color: rgb(220, 38, 38); }
+
+/* Filtro de status — botões coloridos */
+.mar-side__list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+.mar-side__item {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 10px;
+    background: transparent;
+    border: 1px solid transparent;
+    color: var(--m-text);
+    border-radius: 10px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.82rem;
+    text-align: left;
+    transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
+}
+.mar-side__item > i {
+    font-size: 0.78rem;
+    width: 14px;
+    text-align: center;
+}
+
+/* Pendente — azul */
+.mar-side__item.is-pendente {
+    background: rgba(37, 99, 235, 0.05);
+    border-color: rgba(37, 99, 235, 0.18);
+}
+.mar-side__item.is-pendente > i { color: rgb(37, 99, 235); }
+.mar-side__item.is-pendente:hover {
+    background: rgba(37, 99, 235, 0.10);
+    border-color: rgba(37, 99, 235, 0.30);
+}
+.mar-side__item.is-active.is-pendente {
+    background: rgba(37, 99, 235, 0.16);
+    border-color: rgba(37, 99, 235, 0.55);
+    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.35);
+}
+
+/* Autorizado — verde */
+.mar-side__item.is-autorizado {
+    background: rgba(22, 163, 74, 0.05);
+    border-color: rgba(22, 163, 74, 0.18);
+}
+.mar-side__item.is-autorizado > i { color: rgb(22, 163, 74); }
+.mar-side__item.is-autorizado:hover {
+    background: rgba(22, 163, 74, 0.10);
+    border-color: rgba(22, 163, 74, 0.30);
+}
+.mar-side__item.is-active.is-autorizado {
+    background: rgba(22, 163, 74, 0.16);
+    border-color: rgba(22, 163, 74, 0.55);
+    box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.35);
+}
+
+/* Convertido — teal (final, distinto do autorizado) */
+.mar-side__item.is-convertido {
+    background: rgba(13, 148, 136, 0.05);
+    border-color: rgba(13, 148, 136, 0.18);
+}
+.mar-side__item.is-convertido > i { color: rgb(13, 148, 136); }
+.mar-side__item.is-convertido:hover {
+    background: rgba(13, 148, 136, 0.10);
+    border-color: rgba(13, 148, 136, 0.30);
+}
+.mar-side__item.is-active.is-convertido {
+    background: rgba(13, 148, 136, 0.16);
+    border-color: rgba(13, 148, 136, 0.55);
+    box-shadow: 0 0 0 1px rgba(13, 148, 136, 0.35);
+}
+
+/* Recusado — vermelho */
+.mar-side__item.is-recusado {
+    background: rgba(220, 38, 38, 0.05);
+    border-color: rgba(220, 38, 38, 0.18);
+}
+.mar-side__item.is-recusado > i { color: rgb(220, 38, 38); }
+.mar-side__item.is-recusado:hover {
+    background: rgba(220, 38, 38, 0.10);
+    border-color: rgba(220, 38, 38, 0.30);
+}
+.mar-side__item.is-active.is-recusado {
+    background: rgba(220, 38, 38, 0.16);
+    border-color: rgba(220, 38, 38, 0.55);
+    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.35);
+}
+
+/* Limpar filtro */
+.mar-side__item.is-clear {
+    margin-top: 4px;
+    background: var(--m-bg-soft);
+    border-color: var(--m-border);
+    color: var(--m-text-muted);
+    font-style: italic;
+}
+.mar-side__item.is-clear > i { color: var(--m-text-muted); }
+.mar-side__item.is-clear:hover {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+    color: var(--m-text);
+}
+.mar-side__item.is-clear:hover > i { color: var(--m-text); }
+
+/* Transition Limpar filtro */
+.mar-clear-enter-active,
+.mar-clear-leave-active {
+    transition: opacity 220ms ease, transform 220ms ease, max-height 220ms ease, margin-top 220ms ease;
+    overflow: hidden;
+}
+.mar-clear-enter-from,
+.mar-clear-leave-to {
+    opacity: 0;
+    transform: translateY(-4px);
+    max-height: 0;
+    margin-top: 0;
+}
+.mar-clear-enter-to,
+.mar-clear-leave-from {
+    opacity: 1;
+    transform: translateY(0);
+    max-height: 40px;
+}
+
+/* Main — toolbar + DataTable + grid */
+.mar-main {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    padding: 12px;
+    gap: 10px;
+}
+
+/* Toolbar */
+.mar-toolbar {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.mar-search {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+}
+.mar-search__icon {
+    position: absolute;
+    left: 12px;
+    color: var(--m-text-muted);
+    font-size: 0.78rem;
+    pointer-events: none;
+}
+.mar-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: background-color 140ms ease, border-color 140ms ease;
+}
+.mar-search__input::placeholder { color: var(--m-text-faint); }
+.mar-search__input:focus {
+    border-color: var(--m-border-strong);
+}
+.mar-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;
+    font-family: inherit;
+    transition: background-color 140ms ease, color 140ms ease;
+}
+.mar-search__clear:hover {
+    background: var(--m-bg-soft-hover);
+    color: var(--m-text);
+}
+.mar-search__clear > i { font-size: 0.7rem; }
+
+.mar-view-toggle {
+    flex-shrink: 0;
+    display: inline-flex;
+    background: var(--m-bg-medium);
+    border: 1px solid var(--m-border);
+    border-radius: 10px;
+    padding: 2px;
+    gap: 2px;
+}
+.mar-view-toggle__btn {
+    width: 32px;
+    height: 32px;
+    display: grid;
+    place-items: center;
+    background: transparent;
+    border: none;
+    color: var(--m-text-muted);
+    border-radius: 8px;
+    cursor: pointer;
+    font-family: inherit;
+    transition: background-color 140ms ease, color 140ms ease;
+}
+.mar-view-toggle__btn:hover {
+    background: var(--m-bg-soft-hover);
+    color: var(--m-text);
+}
+.mar-view-toggle__btn.is-active {
+    background: var(--m-accent-soft);
+    color: var(--m-accent);
+}
+.mar-view-toggle__btn > i { font-size: 0.85rem; }
+
+/* DataTable wrapper */
+.mar-table {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+}
+.mar-table :deep(.p-datatable) {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    background: transparent;
+    border: 1px solid var(--m-border);
+    border-radius: 10px;
+    overflow: hidden;
+}
+.mar-table :deep(.p-datatable-table-container) {
+    flex: 1;
+    min-height: 0;
+    background: transparent;
+}
+.mar-table :deep(.p-datatable-thead),
+.mar-table :deep(.p-datatable-thead > tr) {
+    background: transparent !important;
+}
+.mar-table :deep(.p-datatable-thead > tr > th) {
+    background: var(--p-content-background) !important;
+    color: var(--m-text);
+    font-size: 0.78rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--m-border);
+}
+.mar-table :deep(.p-datatable-tbody > tr) {
+    background: transparent;
+    color: var(--m-text);
+    cursor: pointer;
+    transition: background-color 140ms ease;
+    border-left: 3px solid var(--m-border);
+}
+.mar-table :deep(.p-datatable-tbody > tr > td) {
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--m-border);
+    background: transparent;
+    vertical-align: middle;
+}
+.mar-table :deep(.p-datatable-tbody > tr:hover) {
+    background: var(--m-bg-soft-hover);
+}
+.mar-table :deep(.p-datatable-tbody > tr.p-datatable-row-selected) {
+    background: var(--m-accent-soft);
+}
+/* Border-left por status */
+.mar-table :deep(.p-datatable-tbody > tr.is-pendente)   { border-left-color: rgb(37, 99, 235); }
+.mar-table :deep(.p-datatable-tbody > tr.is-autorizado) { border-left-color: rgb(22, 163, 74); }
+.mar-table :deep(.p-datatable-tbody > tr.is-convertido) { border-left-color: rgb(13, 148, 136); }
+.mar-table :deep(.p-datatable-tbody > tr.is-recusado)   { border-left-color: rgb(220, 38, 38); opacity: 0.85; }
+.mar-table :deep(.p-datatable-tbody > tr.is-expirado)   { border-left-color: var(--m-text-faint); opacity: 0.7; }
+
+/* Loading */
+.mar-table :deep(.p-datatable-loading-overlay) {
+    background: color-mix(in srgb, var(--m-bg-medium) 70%, transparent);
+    backdrop-filter: blur(2px);
+}
+.mar-table__loading {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--m-text);
+    font-size: 0.85rem;
+}
+
+/* Paginator */
+.mar-table :deep(.p-paginator) {
+    background: var(--m-bg-medium);
+    border: none;
+    border-top: 1px solid var(--m-border);
+    padding: 8px 12px;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+.mar-table :deep(.p-paginator-current) {
+    color: var(--m-text-muted);
+    font-size: 0.78rem;
+    background: transparent;
+    border: none;
+    padding: 0 6px;
+}
+.mar-table :deep(.p-paginator-first),
+.mar-table :deep(.p-paginator-prev),
+.mar-table :deep(.p-paginator-next),
+.mar-table :deep(.p-paginator-last),
+.mar-table :deep(.p-paginator-page) {
+    min-width: 30px;
+    height: 30px;
+    color: var(--m-text);
+    background: transparent;
+    border: 1px solid var(--m-border);
+    border-radius: 8px;
+    font-size: 0.8rem;
+    transition: background-color 140ms ease, border-color 140ms ease;
+}
+.mar-table :deep(.p-paginator-page.p-paginator-page-selected) {
+    background: var(--m-accent-soft);
+    border-color: var(--m-accent-strong);
+    color: var(--m-accent);
+}
+.mar-table :deep(.p-paginator-first:not(.p-disabled):hover),
+.mar-table :deep(.p-paginator-prev:not(.p-disabled):hover),
+.mar-table :deep(.p-paginator-next:not(.p-disabled):hover),
+.mar-table :deep(.p-paginator-last:not(.p-disabled):hover),
+.mar-table :deep(.p-paginator-page:not(.p-paginator-page-selected):hover) {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+}
+.mar-table :deep(.p-select) {
+    background: transparent;
+    border: 1px solid var(--m-border);
+    border-radius: 8px;
+    height: 30px;
+    font-size: 0.78rem;
+    color: var(--m-text);
+    display: inline-flex;
+    align-items: center;
+}
+.mar-table :deep(.p-select-label) {
+    padding: 0 8px;
+    color: var(--m-text);
+    font-size: 0.78rem;
+    display: flex;
+    align-items: center;
+    line-height: 1;
+    height: 100%;
+    background: transparent;
+}
+
+/* Coluna frozen "Ação" */
+.mar-table :deep(td.p-datatable-frozen-column),
+.mar-table :deep(th.p-datatable-frozen-column) {
+    background: var(--p-content-background) !important;
+    box-shadow: -3px 0 6px -3px rgba(0, 0, 0, 0.18);
+    z-index: 1;
+}
+.mar-table :deep(.p-datatable-tbody > tr:hover td.p-datatable-frozen-column) {
+    background: var(--m-bg-soft-hover);
+}
+.mar-table :deep(.p-datatable-tbody > tr.p-datatable-row-selected td.p-datatable-frozen-column) {
+    background: var(--m-accent-soft);
+}
+
+/* Conteúdo das células */
+.mar-row__patient {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+}
+.mar-row__patient-text {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+}
+.mar-row__name {
+    font-size: 0.88rem;
+    font-weight: 600;
+    color: var(--m-text);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mar-row__when {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    font-size: 0.78rem;
+    color: var(--m-text);
+}
+.mar-row__when-data { font-weight: 500; }
+.mar-row__when-hora { color: var(--m-text-muted); font-size: 0.74rem; }
+.mar-row__when i { margin-right: 5px; font-size: 0.7rem; }
+.mar-row__tipo {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    align-items: flex-start;
+}
+.mar-row__contact {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-size: 0.78rem;
+    color: var(--m-text-muted);
+    min-width: 0;
+}
+.mar-row__contact i { margin-right: 5px; font-size: 0.7rem; }
+.mar-row__contact span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mar-row__empty { color: var(--m-text-faint); }
+.mar-row__time {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 0.78rem;
+    color: var(--m-text-muted);
+}
+.mar-row__time i { font-size: 0.7rem; }
+
+/* Chips (Tipo/Modalidade) */
+.mar-chip {
+    display: inline-flex;
+    align-items: center;
+    font-size: 0.66rem;
+    font-weight: 600;
+    padding: 2px 8px;
+    border-radius: 999px;
+    color: var(--m-text);
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+.mar-chip--muted {
+    color: var(--m-text-muted);
+    background: transparent;
+}
+
+/* Botão de ação (pencil) */
+.mar-row__action {
+    width: 30px;
+    height: 30px;
+    display: grid;
+    place-items: center;
+    background: var(--p-content-background);
+    border: 1px solid color-mix(in srgb, var(--p-primary-color) 30%, var(--m-border));
+    color: var(--p-primary-color);
+    border-radius: 8px;
+    cursor: pointer;
+    font-family: inherit;
+    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
+}
+.mar-row__action:hover {
+    background: color-mix(in srgb, var(--p-primary-color) 12%, var(--p-content-background));
+    border-color: var(--p-primary-color);
+    color: var(--p-primary-color);
+}
+.mar-row__action > i { font-size: 0.78rem; }
+
+/* Avatar */
+.mar-card__avatar {
+    width: 40px; height: 40px;
+    border-radius: 50%;
+    background: var(--m-accent-strong);
+    border: 1px solid var(--m-accent);
+    color: white;
+    font-size: 0.78rem;
+    font-weight: 600;
+    display: grid; place-items: center;
+    flex-shrink: 0;
+    overflow: hidden;
+}
+.mar-card__avatar--sm {
+    width: 32px; height: 32px;
+    font-size: 0.7rem;
+}
+.mar-dlg__avatar {
+    width: 56px; height: 56px;
+    border-radius: 50%;
+    background: var(--m-accent-strong);
+    border: 1px solid var(--m-accent);
+    color: white;
+    font-size: 1rem;
+    font-weight: 600;
+    display: grid; place-items: center;
+    flex-shrink: 0;
+}
+
+/* Badge de status */
+.mar-card__badge {
+    display: inline-flex;
+    align-items: center;
+    font-size: 0.62rem;
+    font-weight: 600;
+    padding: 2px 8px;
+    border-radius: 999px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    border: 1px solid;
+    align-self: flex-start;
+}
+.mar-card__badge.is-pendente {
+    color: rgb(37, 99, 235);
+    background: rgba(37, 99, 235, 0.12);
+    border-color: rgba(37, 99, 235, 0.3);
+}
+.mar-card__badge.is-autorizado {
+    color: rgb(22, 163, 74);
+    background: rgba(22, 163, 74, 0.12);
+    border-color: rgba(22, 163, 74, 0.3);
+}
+.mar-card__badge.is-convertido {
+    color: rgb(13, 148, 136);
+    background: rgba(13, 148, 136, 0.12);
+    border-color: rgba(13, 148, 136, 0.3);
+}
+.mar-card__badge.is-recusado {
+    color: rgb(220, 38, 38);
+    background: rgba(220, 38, 38, 0.12);
+    border-color: rgba(220, 38, 38, 0.3);
+}
+.mar-card__badge.is-expirado {
+    color: var(--m-text-muted);
+    background: var(--m-bg-soft);
+    border-color: var(--m-border);
+}
+
+/* Empty state */
+.mar-empty {
+    margin: 24px 0;
+    padding: 56px 28px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    color: var(--m-text-muted);
+    border: 2px dashed var(--m-border-strong);
+    border-radius: 12px;
+    background: color-mix(in srgb, var(--m-bg-soft) 40%, transparent);
+    gap: 8px;
+}
+.mar-empty__icon { font-size: 2rem; color: var(--m-text-faint); margin-bottom: 4px; }
+.mar-empty__title { font-size: 0.92rem; font-weight: 600; color: var(--m-text); }
+.mar-empty__hint { font-size: 0.78rem; }
+
+/* Grid view */
+.mar-grid-wrap {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    border: 1px solid var(--m-border);
+    border-radius: 10px;
+    overflow: hidden;
+    background: transparent;
+}
+.mar-grid {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    padding: 12px;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    gap: 10px;
+    align-content: start;
+}
+.mar-grid::-webkit-scrollbar { width: 5px; }
+.mar-grid::-webkit-scrollbar-thumb { background: var(--m-border-strong); border-radius: 3px; }
+.mar-grid__loading {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 32px;
+}
+.mar-grid__card {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 12px;
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border);
+    border-left: 3px solid var(--m-border-strong);
+    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;
+}
+.mar-grid__card:hover {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+    transform: translateY(-1px);
+}
+.mar-grid__card:focus-visible {
+    outline: 2px solid var(--p-primary-color);
+    outline-offset: 2px;
+}
+.mar-grid__card.is-pendente   { border-left-color: rgb(37, 99, 235); }
+.mar-grid__card.is-autorizado { border-left-color: rgb(22, 163, 74); }
+.mar-grid__card.is-convertido { border-left-color: rgb(13, 148, 136); }
+.mar-grid__card.is-recusado   { border-left-color: rgb(220, 38, 38); opacity: 0.85; }
+.mar-grid__card.is-expirado   { border-left-color: var(--m-text-faint); opacity: 0.7; }
+.mar-grid__top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+}
+.mar-grid__top-right {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+}
+.mar-grid__name {
+    font-size: 0.92rem;
+    font-weight: 600;
+    color: var(--m-text);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mar-grid__when {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    font-size: 0.74rem;
+    color: var(--m-text);
+}
+.mar-grid__when i { margin-right: 4px; font-size: 0.66rem; color: var(--m-text-muted); }
+.mar-grid__meta {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-size: 0.74rem;
+    color: var(--m-text-muted);
+    min-width: 0;
+}
+.mar-grid__meta i { margin-right: 5px; font-size: 0.7rem; }
+.mar-grid__meta span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mar-grid__chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+}
+.mar-grid__time {
+    font-size: 0.68rem;
+    color: var(--m-text-faint);
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    margin-top: auto;
+}
+.mar-grid__time i { font-size: 0.62rem; }
+
+/* Paginator standalone (grid view) */
+.mar-paginator.p-paginator {
+    background: var(--m-bg-medium);
+    border: none;
+    border-top: 1px solid var(--m-border);
+    padding: 8px 12px;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 6px;
+    flex-shrink: 0;
+}
+.mar-paginator.p-paginator .p-paginator-current {
+    color: var(--m-text-muted);
+    font-size: 0.78rem;
+    background: transparent;
+    border: none;
+    padding: 0 6px;
+}
+.mar-paginator.p-paginator .p-paginator-first,
+.mar-paginator.p-paginator .p-paginator-prev,
+.mar-paginator.p-paginator .p-paginator-next,
+.mar-paginator.p-paginator .p-paginator-last,
+.mar-paginator.p-paginator .p-paginator-page {
+    min-width: 30px;
+    height: 30px;
+    color: var(--m-text);
+    background: transparent;
+    border: 1px solid var(--m-border);
+    border-radius: 8px;
+    font-size: 0.8rem;
+    transition: background-color 140ms ease, border-color 140ms ease;
+}
+.mar-paginator.p-paginator .p-paginator-page.p-paginator-page-selected {
+    background: var(--m-accent-soft);
+    border-color: var(--m-accent-strong);
+    color: var(--m-accent);
+}
+.mar-paginator.p-paginator .p-paginator-first:not(.p-disabled):hover,
+.mar-paginator.p-paginator .p-paginator-prev:not(.p-disabled):hover,
+.mar-paginator.p-paginator .p-paginator-next:not(.p-disabled):hover,
+.mar-paginator.p-paginator .p-paginator-last:not(.p-disabled):hover,
+.mar-paginator.p-paginator .p-paginator-page:not(.p-paginator-page-selected):hover {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+}
+.mar-paginator.p-paginator .p-select {
+    background: transparent;
+    border: 1px solid var(--m-border);
+    border-radius: 8px;
+    height: 30px;
+    font-size: 0.78rem;
+    color: var(--m-text);
+    display: inline-flex;
+    align-items: center;
+}
+.mar-paginator.p-paginator .p-select-label {
+    padding: 0 8px;
+    color: var(--m-text);
+    font-size: 0.78rem;
+    display: flex;
+    align-items: center;
+    line-height: 1;
+    height: 100%;
+    background: transparent;
+}
+
+/* Drawer mobile */
+.mar-mobile-drawer {
+    position: fixed;
+    top: 0; left: 0;
+    height: 100vh;
+    height: 100dvh;
+    width: min(360px, 88vw);
+    z-index: 80;
+    background: var(--m-bg-medium);
+    backdrop-filter: blur(28px) saturate(160%);
+    -webkit-backdrop-filter: blur(28px) saturate(160%);
+    border-right: 1px solid var(--m-border);
+    transform: translateX(-100%);
+    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+    color: var(--m-text);
+    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+}
+.mar-mobile-drawer.is-open { transform: translateX(0); }
+.mar-mobile-drawer__scroll {
+    height: 100%;
+    overflow-y: auto;
+    padding: 12px 12px 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+.mar-mobile-drawer__scroll::-webkit-scrollbar { width: 5px; }
+.mar-mobile-drawer__scroll::-webkit-scrollbar-thumb {
+    background: var(--m-border-strong);
+    border-radius: 3px;
+}
+.mar-mobile-drawer__scroll .mar-side {
+    width: 100%;
+    height: auto;
+    overflow: visible;
+    padding: 0;
+    background: transparent;
+    border-right: none;
+}
+.mar-mobile-drawer__scroll .mar-w--side {
+    margin: 0 0 12px;
+}
+.mar-mobile-drawer__scroll .mar-w--side:last-of-type {
+    margin-bottom: 0;
+}
+.mar-mobile-drawer__backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.45);
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    z-index: 79;
+}
+.mar-drawer-fade-enter-active,
+.mar-drawer-fade-leave-active { transition: opacity 200ms ease; }
+.mar-drawer-fade-enter-from,
+.mar-drawer-fade-leave-to { opacity: 0; }
+
+@media (max-width: 1023px) {
+    .mar-body { flex-direction: column; padding: 0; }
+    .mar-main { width: 100%; padding: 8px; }
+    .mar-page__title > span:first-of-type { display: none; }
+    .mar-menu-btn--mobile-only { display: inline-flex; }
+}
+</style>
diff --git a/src/layout/melissa/MelissaCadastrosRecebidos.vue b/src/layout/melissa/MelissaCadastrosRecebidos.vue
index da6a482..d0d5548 100644
--- a/src/layout/melissa/MelissaCadastrosRecebidos.vue
+++ b/src/layout/melissa/MelissaCadastrosRecebidos.vue
@@ -175,9 +175,9 @@ const stats = computed(() => {
     const r = all.filter((r) => r.status === 'rejected').length;
     return [
         { key: 'total', label: 'Total', value: all.length, cls: 'neutral' },
-        { key: 'new', label: 'Novos', value: n, cls: n > 0 ? 'warn' : 'neutral' },
+        { key: 'new', label: 'Novos', value: n, cls: n > 0 ? 'info' : 'neutral' },
         { key: 'converted', label: 'Convertidos', value: c, cls: 'ok' },
-        { key: 'rejected', label: 'Rejeitados', value: r, cls: 'neutral' }
+        { key: 'rejected', label: 'Rejeitados', value: r, cls: r > 0 ? 'danger' : 'neutral' }
     ];
 });
 
@@ -205,28 +205,50 @@ const filtered = computed(() => {
     });
 });
 
-// ── Paginação client-side (default 10 por página) ──────────
+// ── Paginação client-side (DataTable controla internamente) ──────
 // `fetchIntakes` traz a lista completa de patient_intake_requests do
-// tenant — paginamos no client. Volume típico é baixo (cadastros
-// recebidos via formulário externo), mas o Paginator + dropdown dão
-// controle pro usuário caso a fila esteja grande.
+// tenant — o DataTable pagina internamente via prop `paginator`. A
+// gente só precisa controlar `rows` (tamanho da página) e `first`
+// (índice do primeiro item) pra reagir a filtros e mudanças de tamanho.
 const PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
-const pageMCR = ref(1);
 const rowsMCR = ref(10);
-const filteredPaginated = computed(() => {
-    const start = (pageMCR.value - 1) * rowsMCR.value;
-    return filtered.value.slice(start, start + rowsMCR.value);
-});
-function onPageMCRChange(event) {
-    pageMCR.value = event.page + 1;
+const firstMCR = ref(0);
+function onPage(event) {
+    firstMCR.value = event.first;
     rowsMCR.value = event.rows;
 }
 // Reset pra página 1 quando busca/status mudam.
-watch([busca, statusFilter], () => { pageMCR.value = 1; });
-// Clamp se a lista encolher (ex.: depois de converter/rejeitar e refetch).
-watch(() => filtered.value.length, (len) => {
-    const maxPag = Math.max(1, Math.ceil(len / rowsMCR.value));
-    if (pageMCR.value > maxPag) pageMCR.value = maxPag;
+watch([busca, statusFilter], () => { firstMCR.value = 0; });
+
+// Click numa row → abre o dialog. selectionMode="single" é só pra
+// marcar visualmente — não persistimos seleção.
+function onRowClick(event) {
+    if (event?.data) openDetails(event.data);
+}
+function rowStatusClass(data) {
+    return statusClass(data?.status);
+}
+
+// ── View mode (list / grid) ────────────────────────────────
+// Toggle no topo do main column. Persiste em localStorage pra manter
+// a preferência do user entre sessões. List = DataTable; Grid = cards
+// num CSS grid + Paginator standalone (compartilha rowsMCR/firstMCR).
+const VIEW_MODE_KEY = 'mcr.viewMode.v1';
+const viewMode = ref('list');
+try {
+    const saved = localStorage.getItem(VIEW_MODE_KEY);
+    if (saved === 'list' || saved === 'grid') viewMode.value = saved;
+} catch (_) { /* localStorage indisponível — mantém default */ }
+function setViewMode(m) {
+    if (m !== 'list' && m !== 'grid') return;
+    viewMode.value = m;
+    try { localStorage.setItem(VIEW_MODE_KEY, m); } catch (_) { /* noop */ }
+}
+
+// Slice pra grid (DataTable já pagina internamente; grid precisa
+// fatiar o `filtered` com base no firstMCR/rowsMCR compartilhados).
+const pagedItems = computed(() => {
+    return filtered.value.slice(firstMCR.value, firstMCR.value + rowsMCR.value);
 });
 
 // ── Fetch ──────────────────────────────────────────────────
@@ -472,7 +494,7 @@ onBeforeUnmount(() => {
                 <span>Menu Cadastros</span>
             </button>
             <div class="mcr-page__title">
-                <i class="pi pi-inbox text-amber-300" />
+                <i class="pi pi-inbox mcr-page__title-icon" />
                 <span>Cadastros recebidos</span>
                 <span class="mcr-page__count">{{ filtered.length }}</span>
             </div>
@@ -491,11 +513,24 @@ onBeforeUnmount(() => {
             </div>
         </header>
 
+        <!-- Subheader explicativo — diferencia visualmente desta página
+             (vs. Agendamentos Recebidos, que tem layout idêntico). Padrão
+             do melissa-table-page-blueprint.md. -->
+        <div class="mcr-subheader">
+            <i class="pi pi-info-circle mcr-subheader__icon" />
+            <span class="mcr-subheader__text">
+                Cadastros completos enviados por pacientes via formulário
+                externo (link público). Revise os dados,
+                <strong>converta em paciente ativo</strong> com 1 clique ou
+                <strong>rejeite</strong> com motivo opcional.
+            </span>
+        </div>
+
         <div class="mcr-body">
             <Teleport to="#mcr-mobile-drawer-target" :disabled="!isMobile">
             <aside class="mcr-side">
                 <!-- Stats -->
-                <div class="mcr-w">
+                <div class="mcr-w mcr-w--side">
                     <div class="mcr-w__head">
                         <span class="mcr-w__title"><i class="pi pi-chart-bar" /> Estatísticas</span>
                     </div>
@@ -520,9 +555,10 @@ onBeforeUnmount(() => {
                 </div>
 
                 <!-- Filtro de status -->
-                <div class="mcr-w">
+                <div class="mcr-w mcr-w--side">
                     <div class="mcr-w__head">
                         <span class="mcr-w__title"><i class="pi pi-filter" /> Status</span>
+                        <span v-if="statusFilter" class="mcr-w__count">1</span>
                     </div>
                     <div class="mcr-side__list">
                         <button
@@ -535,36 +571,166 @@ onBeforeUnmount(() => {
                             <i :class="o.icon" />
                             <span>{{ o.label }}</span>
                         </button>
+                        <Transition name="mcr-clear">
+                            <button
+                                v-if="statusFilter"
+                                class="mcr-side__item is-clear"
+                                @click="statusFilter = ''"
+                            >
+                                <i class="pi pi-filter-slash" />
+                                <span>Limpar filtro</span>
+                            </button>
+                        </Transition>
                     </div>
                 </div>
-
-                <!-- Busca -->
-                <div class="mcr-w">
-                    <div class="mcr-w__head">
-                        <span class="mcr-w__title"><i class="pi pi-search" /> Buscar</span>
-                    </div>
-                    <input
-                        v-model="busca"
-                        type="text"
-                        placeholder="Nome, email ou telefone…"
-                        class="mcr-search__input"
-                    />
-                </div>
             </aside>
             </Teleport>
 
             <div class="mcr-main">
-                <div class="mcr-list">
-                    <template v-if="carregandoInicial">
-                        <div v-for="i in 5" :key="`csk-${i}`" class="mcr-card mcr-card--skeleton" aria-busy="true">
-                            <span class="mcr-card__avatar melissa-skeleton melissa-skeleton--avatar" />
-                            <div style="flex:1; display:flex; flex-direction:column; gap:6px;">
-                                <span class="melissa-skeleton melissa-skeleton--title" :style="{ width: `${50 + (i * 9) % 30}%` }" />
-                                <span class="melissa-skeleton melissa-skeleton--text" style="width: 60%;" />
+                <!-- Toolbar com busca + toggle de visualização (lista/grade).
+                     Search no topo da coluna que contém os dados. Count
+                     reflete o filtrado pra feedback imediato ao digitar. -->
+                <div class="mcr-toolbar">
+                    <div class="mcr-search">
+                        <i class="pi pi-search mcr-search__icon" />
+                        <input
+                            v-model="busca"
+                            type="text"
+                            placeholder="Buscar por nome, email ou telefone…"
+                            class="mcr-search__input"
+                        />
+                        <button
+                            v-if="busca"
+                            class="mcr-search__clear"
+                            v-tooltip.bottom="'Limpar busca'"
+                            @click="busca = ''"
+                        >
+                            <i class="pi pi-times" />
+                        </button>
+                    </div>
+                    <div class="mcr-view-toggle" role="group" aria-label="Visualização">
+                        <button
+                            class="mcr-view-toggle__btn"
+                            :class="{ 'is-active': viewMode === 'list' }"
+                            v-tooltip.bottom="'Lista'"
+                            aria-label="Lista"
+                            @click="setViewMode('list')"
+                        >
+                            <i class="pi pi-list" />
+                        </button>
+                        <button
+                            class="mcr-view-toggle__btn"
+                            :class="{ 'is-active': viewMode === 'grid' }"
+                            v-tooltip.bottom="'Grade'"
+                            aria-label="Grade"
+                            @click="setViewMode('grid')"
+                        >
+                            <i class="pi pi-th-large" />
+                        </button>
+                    </div>
+                </div>
+
+                <DataTable
+                    v-if="viewMode === 'list'"
+                    :value="filtered"
+                    :loading="loading"
+                    dataKey="id"
+                    paginator
+                    :rows="rowsMCR"
+                    :first="firstMCR"
+                    :rowsPerPageOptions="PAGE_SIZE_OPTIONS"
+                    paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+                    currentPageReportTemplate="{first}–{last} de {totalRecords}"
+                    :rowClass="rowStatusClass"
+                    selectionMode="single"
+                    scrollable
+                    scrollHeight="flex"
+                    tableStyle="min-width: 640px"
+                    class="mcr-table"
+                    @row-click="onRowClick"
+                    @page="onPage"
+                >
+                    <Column header="Paciente" style="min-width: 220px">
+                        <template #body="{ data }">
+                            <div class="mcr-row__patient">
+                                <span class="mcr-card__avatar mcr-card__avatar--sm">
+                                    <img v-if="avatarUrl(data)" :src="avatarUrl(data)" :alt="fNome(data) || 'Avatar'" />
+                                    <span v-else>{{ pacienteIniciais(fNome(data)) }}</span>
+                                </span>
+                                <div class="mcr-row__patient-text">
+                                    <span class="mcr-row__name">{{ fNome(data) || '—' }}</span>
+                                    <span class="mcr-card__badge" :class="statusClass(data.status)">
+                                        {{ statusLabel(data.status) }}
+                                    </span>
+                                </div>
+                            </div>
+                        </template>
+                    </Column>
+
+                    <Column header="Contato" style="min-width: 220px">
+                        <template #body="{ data }">
+                            <div class="mcr-row__contact">
+                                <span v-if="fEmail(data)"><i class="pi pi-envelope" /> {{ fEmail(data) }}</span>
+                                <span v-if="fTel(data)"><i class="pi pi-phone" /> {{ fmtPhoneBR(fTel(data)) }}</span>
+                                <span v-if="!fEmail(data) && !fTel(data)" class="mcr-row__empty">—</span>
+                            </div>
+                        </template>
+                    </Column>
+
+                    <Column header="Recebido" style="width: 130px">
+                        <template #body="{ data }">
+                            <span class="mcr-row__time">
+                                <i class="pi pi-clock" /> {{ fmtRelative(data.created_at) }}
+                            </span>
+                        </template>
+                    </Column>
+
+                    <Column
+                        header=""
+                        :style="{ width: '60px', maxWidth: '60px', minWidth: '60px' }"
+                        frozen
+                        alignFrozen="right"
+                        class="mcr-col-acao"
+                    >
+                        <template #body="{ data }">
+                            <button
+                                class="mcr-row__action"
+                                v-tooltip.left="'Editar'"
+                                aria-label="Editar"
+                                @click.stop="openDetails(data)"
+                            >
+                                <i class="pi pi-pencil" />
+                            </button>
+                        </template>
+                    </Column>
+
+                    <template #empty>
+                        <div class="mcr-empty">
+                            <i class="pi pi-inbox mcr-empty__icon" />
+                            <div class="mcr-empty__title">Nenhum cadastro encontrado</div>
+                            <div class="mcr-empty__hint">
+                                <template v-if="busca || statusFilter">Ajuste os filtros pra ver mais.</template>
+                                <template v-else>Cadastros vindos do agendador externo aparecem aqui.</template>
                             </div>
                         </div>
                     </template>
 
+                    <template #loading>
+                        <div class="mcr-table__loading">
+                            <i class="pi pi-spin pi-spinner" />
+                            <span>Carregando cadastros…</span>
+                        </div>
+                    </template>
+                </DataTable>
+
+                <!-- Grid view — cards num CSS grid, mesma fonte de dados
+                     (filtered + pagedItems) e Paginator standalone que
+                     compartilha rowsMCR/firstMCR com a list view. -->
+                <div v-else-if="viewMode === 'grid'" class="mcr-grid-wrap">
+                    <div v-if="loading && filtered.length === 0" class="mcr-table__loading mcr-grid__loading">
+                        <i class="pi pi-spin pi-spinner" />
+                        <span>Carregando cadastros…</span>
+                    </div>
                     <div v-else-if="filtered.length === 0" class="mcr-empty">
                         <i class="pi pi-inbox mcr-empty__icon" />
                         <div class="mcr-empty__title">Nenhum cadastro encontrado</div>
@@ -573,48 +739,59 @@ onBeforeUnmount(() => {
                             <template v-else>Cadastros vindos do agendador externo aparecem aqui.</template>
                         </div>
                     </div>
-
-                    <button
-                        v-for="r in filteredPaginated"
-                        v-else
-                        :key="r.id"
-                        class="mcr-card"
-                        :class="statusClass(r.status)"
-                        @click="openDetails(r)"
-                    >
-                        <span class="mcr-card__avatar">
-                            <img v-if="avatarUrl(r)" :src="avatarUrl(r)" :alt="fNome(r) || 'Avatar'" />
-                            <span v-else>{{ pacienteIniciais(fNome(r)) }}</span>
-                        </span>
-                        <div class="mcr-card__main">
-                            <div class="mcr-card__name-row">
-                                <span class="mcr-card__name">{{ fNome(r) || '—' }}</span>
-                                <span class="mcr-card__badge" :class="statusClass(r.status)">
-                                    {{ statusLabel(r.status) }}
+                    <div v-else class="mcr-grid">
+                        <div
+                            v-for="r in pagedItems"
+                            :key="r.id"
+                            class="mcr-grid__card"
+                            :class="statusClass(r.status)"
+                            role="button"
+                            tabindex="0"
+                            @click="openDetails(r)"
+                            @keydown.enter.prevent="openDetails(r)"
+                            @keydown.space.prevent="openDetails(r)"
+                        >
+                            <div class="mcr-grid__top">
+                                <span class="mcr-card__avatar">
+                                    <img v-if="avatarUrl(r)" :src="avatarUrl(r)" :alt="fNome(r) || 'Avatar'" />
+                                    <span v-else>{{ pacienteIniciais(fNome(r)) }}</span>
                                 </span>
+                                <div class="mcr-grid__top-right">
+                                    <span class="mcr-card__badge" :class="statusClass(r.status)">
+                                        {{ statusLabel(r.status) }}
+                                    </span>
+                                    <button
+                                        class="mcr-row__action"
+                                        v-tooltip.left="'Editar'"
+                                        aria-label="Editar"
+                                        @click.stop="openDetails(r)"
+                                    >
+                                        <i class="pi pi-pencil" />
+                                    </button>
+                                </div>
                             </div>
-                            <div class="mcr-card__meta">
+                            <div class="mcr-grid__name">{{ fNome(r) || '—' }}</div>
+                            <div class="mcr-grid__meta">
                                 <span v-if="fEmail(r)"><i class="pi pi-envelope" /> {{ fEmail(r) }}</span>
                                 <span v-if="fTel(r)"><i class="pi pi-phone" /> {{ fmtPhoneBR(fTel(r)) }}</span>
                             </div>
+                            <div class="mcr-grid__time">
+                                <i class="pi pi-clock" /> {{ fmtRelative(r.created_at) }}
+                            </div>
                         </div>
-                        <div class="mcr-card__time">
-                            <i class="pi pi-clock" /> {{ fmtRelative(r.created_at) }}
-                        </div>
-                    </button>
+                    </div>
+                    <Paginator
+                        v-if="filtered.length > 0"
+                        class="mcr-paginator"
+                        :rows="rowsMCR"
+                        :totalRecords="filtered.length"
+                        :first="firstMCR"
+                        :rowsPerPageOptions="PAGE_SIZE_OPTIONS"
+                        template="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+                        currentPageReportTemplate="{first}–{last} de {totalRecords}"
+                        @page="onPage"
+                    />
                 </div>
-
-                <Paginator
-                    v-if="!carregandoInicial && filtered.length > 0"
-                    class="mcr-paginator"
-                    :rows="rowsMCR"
-                    :totalRecords="filtered.length"
-                    :first="(pageMCR - 1) * rowsMCR"
-                    :rowsPerPageOptions="PAGE_SIZE_OPTIONS"
-                    template="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
-                    currentPageReportTemplate="{first}–{last} de {totalRecords}"
-                    @page="onPageMCRChange"
-                />
             </div>
         </div>
 
@@ -728,6 +905,12 @@ onBeforeUnmount(() => {
     font-size: 1rem;
     font-weight: 500;
 }
+/* Ícone do título — cor primary do tema (espelha o token PrimeVue).
+   Tamanho levemente maior que o label pra ler como ícone identitário. */
+.mcr-page__title-icon {
+    color: var(--p-primary-color);
+    font-size: 1.05rem;
+}
 .mcr-page__title > span:not(.mcr-page__count) {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -780,20 +963,56 @@ onBeforeUnmount(() => {
     transform: translateY(-1px);
 }
 
+/* Subheader explicativo — faixa abaixo do page__head com texto contextual
+   sobre a página. Bg sutil + ícone primary + tipografia menor. Diferencia
+   esta página de outras tabelas Melissa que têm layout visual idêntico. */
+.mcr-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;
+}
+.mcr-subheader__icon {
+    color: var(--p-primary-color);
+    font-size: 0.92rem;
+    flex-shrink: 0;
+    margin-top: 1px;
+}
+.mcr-subheader__text {
+    flex: 1;
+    min-width: 0;
+}
+.mcr-subheader__text strong {
+    color: var(--m-text);
+    font-weight: 600;
+}
+
 .mcr-body {
     flex: 1;
     display: flex;
     min-height: 0;
-    gap: 12px;
-    padding: 12px;
+    gap: 0;
+    padding: 0;
 }
+/* Sidebar — espelha .ma-side do MelissaAgenda: bg colorido próprio
+   (--m-bg-soft) + border-right pra separar visualmente da coluna
+   principal. Cards internos (.mcr-w--side) ficam mais opacos
+   (--m-bg-medium) pra contrastar com o bg da sidebar. */
 .mcr-side {
     width: 280px;
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    gap: 0;
     overflow-y: auto;
+    background: var(--m-bg-soft);
+    border-right: 1px solid var(--m-border);
 }
 .mcr-side::-webkit-scrollbar { width: 5px; }
 .mcr-side::-webkit-scrollbar-thumb {
@@ -802,22 +1021,51 @@ onBeforeUnmount(() => {
 }
 
 /* Card-base — alinhado com .ma-w (MelissaAgenda) e .mp-w (MelissaPacientes):
-   surface --m-bg-medium pra destacar do bg da página/dialog (ambos --m-bg-soft). */
+   surface --m-bg-medium pra destacar do bg da sidebar (--m-bg-soft). */
 .mcr-w {
     background: var(--m-bg-medium);
     border: 1px solid var(--m-border);
     border-radius: 12px;
     padding: 12px;
 }
-.mcr-w__head { margin-bottom: 10px; }
+/* Modificador pra usar .mcr-w dentro da sidebar (col 1) — adiciona
+   margem nas bordas (a .mcr-side não tem padding interno) + sombra
+   sutil pra elevação visual sobre o bg colorido da sidebar.
+   Espelha .ma-w--side do MelissaAgenda. */
+.mcr-w--side {
+    margin: 12px 12px 0;
+    flex-shrink: 0;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+}
+.mcr-w--side:last-of-type { margin-bottom: 12px; }
+/* Header e título no padrão do .ma-w__head/__title — uppercase com
+   letter-spacing pra hierarquia visual de label da sidebar. */
+.mcr-w__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+}
 .mcr-w__title {
     display: inline-flex;
     align-items: center;
     gap: 6px;
-    font-size: 0.78rem;
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: var(--m-text-muted);
     font-weight: 600;
 }
-.mcr-w__title > i { color: var(--m-text-muted); font-size: 0.78rem; }
+.mcr-w__title > i { color: var(--m-text-muted); font-size: 0.7rem; }
+.mcr-w__count {
+    font-size: 0.65rem;
+    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: 1px 7px;
+    border-radius: 999px;
+}
 
 .mcr-stats {
     display: grid;
@@ -844,14 +1092,24 @@ onBeforeUnmount(() => {
     text-transform: uppercase;
     letter-spacing: 0.06em;
 }
-.mcr-stat.is-warn .mcr-stat__val { color: rgb(251, 191, 36); }
-.mcr-stat.is-ok .mcr-stat__val { color: rgb(74, 222, 128); }
+/* Cores fortes (Tailwind 600) pra ler bem em ambos os modos. Light:
+   suficientemente escuras pra contrastar com bg branco. Dark: ainda
+   saturadas o bastante pra destacar do bg quase preto. */
+.mcr-stat.is-info .mcr-stat__val   { color: rgb(37, 99, 235); }   /* blue-600 */
+.mcr-stat.is-ok .mcr-stat__val     { color: rgb(22, 163, 74); }   /* green-600 */
+.mcr-stat.is-danger .mcr-stat__val { color: rgb(220, 38, 38); }   /* red-600 */
 
 .mcr-side__list {
     display: flex;
     flex-direction: column;
     gap: 4px;
 }
+/* Botões do filtro de status — coloridos em 3 níveis:
+   - Default:  tint 5% bg + 18% border + ícone full color → identifica
+               o status mesmo sem clicar
+   - Hover:    tint 10% bg + 30% border
+   - Active:   tint 16% bg + 55% border + box-shadow ring pro destaque
+   Cores Tailwind 600: blue/green/red — fortes pra ler em light. */
 .mcr-side__item {
     width: 100%;
     display: flex;
@@ -866,75 +1124,480 @@ onBeforeUnmount(() => {
     font-family: inherit;
     font-size: 0.82rem;
     text-align: left;
-    transition: background-color 140ms ease, border-color 140ms ease;
+    transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
+}
+.mcr-side__item > i {
+    font-size: 0.78rem;
+    width: 14px;
+    text-align: center;
+}
+
+/* Novo — azul */
+.mcr-side__item.is-new {
+    background: rgba(37, 99, 235, 0.05);
+    border-color: rgba(37, 99, 235, 0.18);
+}
+.mcr-side__item.is-new > i { color: rgb(37, 99, 235); }
+.mcr-side__item.is-new:hover {
+    background: rgba(37, 99, 235, 0.10);
+    border-color: rgba(37, 99, 235, 0.30);
 }
-.mcr-side__item:hover { background: var(--m-bg-soft-hover); }
 .mcr-side__item.is-active.is-new {
-    background: rgba(251, 191, 36, 0.08);
-    border-color: rgba(251, 191, 36, 0.35);
+    background: rgba(37, 99, 235, 0.16);
+    border-color: rgba(37, 99, 235, 0.55);
+    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.35);
+}
+
+/* Convertido — verde */
+.mcr-side__item.is-converted {
+    background: rgba(22, 163, 74, 0.05);
+    border-color: rgba(22, 163, 74, 0.18);
+}
+.mcr-side__item.is-converted > i { color: rgb(22, 163, 74); }
+.mcr-side__item.is-converted:hover {
+    background: rgba(22, 163, 74, 0.10);
+    border-color: rgba(22, 163, 74, 0.30);
 }
 .mcr-side__item.is-active.is-converted {
-    background: rgba(74, 222, 128, 0.08);
-    border-color: rgba(74, 222, 128, 0.35);
+    background: rgba(22, 163, 74, 0.16);
+    border-color: rgba(22, 163, 74, 0.55);
+    box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.35);
+}
+
+/* Rejeitado — vermelho */
+.mcr-side__item.is-rejected {
+    background: rgba(220, 38, 38, 0.05);
+    border-color: rgba(220, 38, 38, 0.18);
+}
+.mcr-side__item.is-rejected > i { color: rgb(220, 38, 38); }
+.mcr-side__item.is-rejected:hover {
+    background: rgba(220, 38, 38, 0.10);
+    border-color: rgba(220, 38, 38, 0.30);
 }
 .mcr-side__item.is-active.is-rejected {
-    background: rgba(248, 113, 113, 0.08);
-    border-color: rgba(248, 113, 113, 0.35);
+    background: rgba(220, 38, 38, 0.16);
+    border-color: rgba(220, 38, 38, 0.55);
+    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.35);
 }
-.mcr-side__item > i { font-size: 0.75rem; color: var(--m-text-muted); width: 14px; text-align: center; }
-.mcr-side__item.is-active.is-new > i { color: rgb(251, 191, 36); }
-.mcr-side__item.is-active.is-converted > i { color: rgb(74, 222, 128); }
-.mcr-side__item.is-active.is-rejected > i { color: rgb(248, 113, 113); }
 
-.mcr-search__input {
-    width: 100%;
-    /* Mais sutil que o card-pai pra ler como input dentro do card. */
+/* Limpar filtro — botão neutro que aparece como 4ª linha quando há
+   um filtro ativo. Cor sutil, apenas pra ler como ação secundária. */
+.mcr-side__item.is-clear {
+    margin-top: 4px;
     background: var(--m-bg-soft);
-    border: 1px solid var(--m-border);
-    color: var(--m-text);
-    padding: 8px 12px;
-    border-radius: 9px;
-    font-size: 0.82rem;
-    font-family: inherit;
-    outline: none;
+    border-color: var(--m-border);
+    color: var(--m-text-muted);
+    font-style: italic;
 }
-.mcr-search__input:focus { border-color: var(--m-border-strong); background: var(--m-bg-soft-hover); }
+.mcr-side__item.is-clear > i { color: var(--m-text-muted); }
+.mcr-side__item.is-clear:hover {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+    color: var(--m-text);
+}
+.mcr-side__item.is-clear:hover > i { color: var(--m-text); }
 
-.mcr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
-.mcr-list {
+/* Transition do botão "Limpar filtro" — fade + leve slide vertical
+   pra entrada/saída suave. Aproveita os 4px de margin-top como ponto
+   de partida do slide (sai de cima pra encaixar). */
+.mcr-clear-enter-active,
+.mcr-clear-leave-active {
+    transition: opacity 220ms ease, transform 220ms ease, max-height 220ms ease, margin-top 220ms ease;
+    overflow: hidden;
+}
+.mcr-clear-enter-from,
+.mcr-clear-leave-to {
+    opacity: 0;
+    transform: translateY(-4px);
+    max-height: 0;
+    margin-top: 0;
+}
+.mcr-clear-enter-to,
+.mcr-clear-leave-from {
+    opacity: 1;
+    transform: translateY(0);
+    max-height: 40px;
+}
+
+/* Main column (col 2) — busca no topo (toolbar) + lista scrollável +
+   paginator fixo no rodapé. min-height:0 é CRÍTICO pro flex:1 da lista
+   funcionar dentro de um flex container (sem isso, .mcr-list cresce
+   indefinidamente em vez de scrollar). */
+.mcr-main {
     flex: 1;
-    overflow-y: auto;
-    padding: 0 4px 4px;
+    min-width: 0;
+    min-height: 0;
     display: flex;
     flex-direction: column;
-    gap: 8px;
-}
-.mcr-list::-webkit-scrollbar { width: 5px; }
-.mcr-list::-webkit-scrollbar-thumb {
-    background: var(--m-border-strong);
-    border-radius: 3px;
+    padding: 12px;
+    gap: 10px;
 }
 
-/* Paginator no rodapé da col 2 — fixo (fora do scroll), com seletor de
-   tamanho (10/20/50/100). Mesma estética do .mp-paginator (MelissaPacientes). */
-.mcr-paginator.p-paginator {
+/* Toolbar — wrapper da busca no topo da coluna principal. Mesmo padrão
+   visual do .ma-tsearch (toolbar de busca da MelissaAgenda). */
+.mcr-toolbar {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.mcr-search {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+}
+.mcr-search__icon {
+    position: absolute;
+    left: 12px;
+    color: var(--m-text-muted);
+    font-size: 0.78rem;
+    pointer-events: none;
+}
+.mcr-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: background-color 140ms ease, border-color 140ms ease;
+}
+.mcr-search__input::placeholder { color: var(--m-text-faint); }
+.mcr-search__input:focus {
+    border-color: var(--m-border-strong);
+    background: var(--m-bg-medium);
+}
+.mcr-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;
+    font-family: inherit;
+    transition: background-color 140ms ease, color 140ms ease;
+}
+.mcr-search__clear:hover {
+    background: var(--m-bg-soft-hover);
+    color: var(--m-text);
+}
+.mcr-search__clear > i { font-size: 0.7rem; }
+
+/* Toggle de visualização (lista/grade) — segmented control compacto
+   à direita da busca. Botão ativo ganha bg primary-tinted. */
+.mcr-view-toggle {
+    flex-shrink: 0;
+    display: inline-flex;
+    background: var(--m-bg-medium);
+    border: 1px solid var(--m-border);
+    border-radius: 10px;
+    padding: 2px;
+    gap: 2px;
+}
+.mcr-view-toggle__btn {
+    width: 32px;
+    height: 32px;
+    display: grid;
+    place-items: center;
+    background: transparent;
+    border: none;
+    color: var(--m-text-muted);
+    border-radius: 8px;
+    cursor: pointer;
+    font-family: inherit;
+    transition: background-color 140ms ease, color 140ms ease;
+}
+.mcr-view-toggle__btn:hover {
+    background: var(--m-bg-soft-hover);
+    color: var(--m-text);
+}
+.mcr-view-toggle__btn.is-active {
+    background: var(--m-accent-soft);
+    color: var(--m-accent);
+}
+.mcr-view-toggle__btn > i { font-size: 0.85rem; }
+
+/* ─── DataTable (.mcr-table) ─────────────────────────────────────
+   Substitui a antiga lista de cards. `:loading="loading"` cobre o
+   estado de carregamento (template #loading) e `paginator` integra
+   o seletor de tamanho + navegação. scrollHeight="flex" faz a tabela
+   preencher o flex restante da .mcr-main e scrollar internamente. */
+.mcr-table {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+}
+.mcr-table :deep(.p-datatable) {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    background: transparent;
+    border: 1px solid var(--m-border);
+    border-radius: 10px;
+    overflow: hidden;
+}
+.mcr-table :deep(.p-datatable-table-container) {
+    flex: 1;
+    min-height: 0;
+    background: transparent;
+}
+/* Header — usa --p-content-background (token "surface" do tema PrimeVue).
+   Em light mode → branco; em dark mode → surface configurado (dark).
+   Mesma fonte que os cards Estatísticas/Status visualizam (eles usam
+   --m-bg-medium, que em light é --p-content-background opaco). */
+.mcr-table :deep(.p-datatable-thead),
+.mcr-table :deep(.p-datatable-thead > tr) {
+    background: transparent !important;
+}
+.mcr-table :deep(.p-datatable-thead > tr > th) {
+    background: var(--p-content-background) !important;
+    color: var(--m-text);
+    font-size: 0.78rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--m-border);
+}
+.mcr-table :deep(.p-datatable-tbody > tr) {
+    background: transparent;
+    color: var(--m-text);
+    cursor: pointer;
+    transition: background-color 140ms ease;
+    border-left: 3px solid var(--m-border);
+}
+.mcr-table :deep(.p-datatable-tbody > tr > td) {
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--m-border);
+    background: transparent;
+    vertical-align: middle;
+}
+.mcr-table :deep(.p-datatable-tbody > tr:hover) {
+    background: var(--m-bg-soft-hover);
+}
+.mcr-table :deep(.p-datatable-tbody > tr.p-datatable-row-selected) {
+    background: var(--m-accent-soft);
+}
+/* Border-left colorido por status — espelha o padrão .ma-sess. */
+.mcr-table :deep(.p-datatable-tbody > tr.is-new)      { border-left-color: rgb(37, 99, 235); }
+.mcr-table :deep(.p-datatable-tbody > tr.is-done)     { border-left-color: rgb(22, 163, 74); }
+.mcr-table :deep(.p-datatable-tbody > tr.is-rejected) { border-left-color: rgb(220, 38, 38); opacity: 0.85; }
+
+/* Loading overlay */
+.mcr-table :deep(.p-datatable-loading-overlay) {
+    background: color-mix(in srgb, var(--m-bg-medium) 70%, transparent);
+    backdrop-filter: blur(2px);
+}
+.mcr-table__loading {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--m-text);
+    font-size: 0.85rem;
+}
+
+/* Paginator integrado do DataTable — centralizado (sem refresh à
+   esquerda; o refresh já vive no header da página). */
+.mcr-table :deep(.p-paginator) {
+    background: var(--m-bg-medium);
+    border: none;
     border-top: 1px solid var(--m-border);
     padding: 8px 12px;
-    margin-top: 4px;
-    justify-content: space-between;
+    justify-content: center;
     flex-wrap: wrap;
     gap: 6px;
 }
+.mcr-table :deep(.p-paginator-current) {
+    color: var(--m-text-muted);
+    font-size: 0.78rem;
+    background: transparent;
+    border: none;
+    padding: 0 6px;
+}
+.mcr-table :deep(.p-paginator-first),
+.mcr-table :deep(.p-paginator-prev),
+.mcr-table :deep(.p-paginator-next),
+.mcr-table :deep(.p-paginator-last),
+.mcr-table :deep(.p-paginator-page) {
+    min-width: 30px;
+    height: 30px;
+    color: var(--m-text);
+    background: transparent;
+    border: 1px solid var(--m-border);
+    border-radius: 8px;
+    font-size: 0.8rem;
+    transition: background-color 140ms ease, border-color 140ms ease;
+}
+.mcr-table :deep(.p-paginator-page.p-paginator-page-selected) {
+    background: var(--m-accent-soft);
+    border-color: var(--m-accent-strong);
+    color: var(--m-accent);
+}
+.mcr-table :deep(.p-paginator-first:not(.p-disabled):hover),
+.mcr-table :deep(.p-paginator-prev:not(.p-disabled):hover),
+.mcr-table :deep(.p-paginator-next:not(.p-disabled):hover),
+.mcr-table :deep(.p-paginator-last:not(.p-disabled):hover),
+.mcr-table :deep(.p-paginator-page:not(.p-paginator-page-selected):hover) {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+}
+.mcr-table :deep(.p-select) {
+    background: transparent;
+    border: 1px solid var(--m-border);
+    border-radius: 8px;
+    height: 30px;
+    font-size: 0.78rem;
+    color: var(--m-text);
+    display: inline-flex;
+    align-items: center;
+}
+.mcr-table :deep(.p-select-label) {
+    padding: 0 8px;
+    color: var(--m-text);
+    font-size: 0.78rem;
+    display: flex;
+    align-items: center;
+    line-height: 1;
+    height: 100%;
+    background: transparent;
+}
+
+/* ─── Grid view ───────────────────────────────────────────────
+   Cards num CSS grid responsivo (auto-fill 220px+). Cada card tem
+   avatar + badge no topo, nome em destaque, contato e tempo abaixo.
+   Border-left colorido por status (mesmo padrão da list view). */
+.mcr-grid-wrap {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    border: 1px solid var(--m-border);
+    border-radius: 10px;
+    overflow: hidden;
+    background: transparent;
+}
+.mcr-grid {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    padding: 12px;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: 10px;
+    align-content: start;
+}
+.mcr-grid::-webkit-scrollbar { width: 5px; }
+.mcr-grid::-webkit-scrollbar-thumb { background: var(--m-border-strong); border-radius: 3px; }
+.mcr-grid__loading {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 32px;
+}
+.mcr-grid__card {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 12px;
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border);
+    border-left: 3px solid var(--m-border-strong);
+    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;
+}
+.mcr-grid__card:hover {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+    transform: translateY(-1px);
+}
+.mcr-grid__card:focus-visible {
+    outline: 2px solid var(--p-primary-color);
+    outline-offset: 2px;
+}
+.mcr-grid__card.is-new      { border-left-color: rgb(37, 99, 235); }
+.mcr-grid__card.is-done     { border-left-color: rgb(22, 163, 74); }
+.mcr-grid__card.is-rejected { border-left-color: rgb(220, 38, 38); opacity: 0.85; }
+.mcr-grid__top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+}
+/* Cluster badge + pencil à direita do top do card. */
+.mcr-grid__top-right {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+}
+.mcr-grid__name {
+    font-size: 0.92rem;
+    font-weight: 600;
+    color: var(--m-text);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mcr-grid__meta {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-size: 0.75rem;
+    color: var(--m-text-muted);
+    min-width: 0;
+}
+.mcr-grid__meta i { margin-right: 5px; font-size: 0.7rem; }
+.mcr-grid__meta span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mcr-grid__time {
+    font-size: 0.7rem;
+    color: var(--m-text-faint);
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    margin-top: auto;
+}
+.mcr-grid__time i { font-size: 0.65rem; }
+
+/* Paginator standalone (grid view) — espelha o estilo do paginator
+   interno do DataTable, mas via classe direta (sem :deep). Centralizado
+   e sem bg de surface (consistente com o pedido de "fundo transparente"). */
+.mcr-paginator.p-paginator {
+    background: var(--m-bg-medium);
+    border: none;
+    border-top: 1px solid var(--m-border);
+    padding: 8px 12px;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 6px;
+    flex-shrink: 0;
+}
 .mcr-paginator.p-paginator .p-paginator-current {
     color: var(--m-text-muted);
     font-size: 0.78rem;
     background: transparent;
     border: none;
-    padding: 0 4px;
-    height: 30px;
-    min-width: auto;
+    padding: 0 6px;
 }
 .mcr-paginator.p-paginator .p-paginator-first,
 .mcr-paginator.p-paginator .p-paginator-prev,
@@ -963,52 +1626,114 @@ onBeforeUnmount(() => {
     background: var(--m-bg-soft-hover);
     border-color: var(--m-border-strong);
 }
-.mcr-paginator.p-paginator .p-paginator-first.p-disabled,
-.mcr-paginator.p-paginator .p-paginator-prev.p-disabled,
-.mcr-paginator.p-paginator .p-paginator-next.p-disabled,
-.mcr-paginator.p-paginator .p-paginator-last.p-disabled {
-    opacity: 0.35;
-}
 .mcr-paginator.p-paginator .p-select {
-    background: var(--m-bg-soft);
+    background: transparent;
     border: 1px solid var(--m-border);
     border-radius: 8px;
     height: 30px;
     font-size: 0.78rem;
     color: var(--m-text);
+    display: inline-flex;
+    align-items: center;
 }
-.mcr-paginator.p-paginator .p-select:hover { border-color: var(--m-border-strong); }
 .mcr-paginator.p-paginator .p-select-label {
     padding: 0 8px;
     color: var(--m-text);
     font-size: 0.78rem;
-}
-
-.mcr-card {
     display: flex;
     align-items: center;
-    gap: 12px;
-    padding: 12px 14px;
-    background: var(--m-bg-soft);
-    border: 1px solid var(--m-border);
-    border-radius: 10px;
-    cursor: pointer;
-    transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
-    text-align: left;
-    font-family: inherit;
-    color: var(--m-text);
+    line-height: 1;
+    height: 100%;
+    background: transparent;
 }
-.mcr-card:hover {
-    background: var(--m-bg-soft-hover);
-    border-color: var(--m-border-strong);
-    transform: translateY(-1px);
-}
-.mcr-card.is-new { border-left: 3px solid rgb(251, 191, 36); }
-.mcr-card.is-done { opacity: 0.75; }
-.mcr-card.is-rejected { opacity: 0.55; }
-.mcr-card--skeleton { cursor: default; pointer-events: none; opacity: 0.95; }
-.mcr-card--skeleton:hover { background: var(--m-bg-soft); transform: none; }
 
+/* Conteúdo das células — substitui o antigo .mcr-card__* (interno). */
+.mcr-row__patient {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+}
+.mcr-row__patient-text {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+}
+.mcr-row__name {
+    font-size: 0.88rem;
+    font-weight: 600;
+    color: var(--m-text);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mcr-row__contact {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-size: 0.78rem;
+    color: var(--m-text-muted);
+    min-width: 0;
+}
+.mcr-row__contact i { margin-right: 5px; font-size: 0.7rem; }
+.mcr-row__contact span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mcr-row__empty { color: var(--m-text-faint); }
+.mcr-row__time {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 0.78rem;
+    color: var(--m-text-muted);
+}
+.mcr-row__time i { font-size: 0.7rem; }
+
+/* Botão de ação (pencil) — ícone primary + bg matching da célula
+   pra não ficar "vazado" durante scroll horizontal (a célula frozen
+   da Ação usa --m-bg-medium; o botão herda o mesmo token, que adapta
+   a dark/light automaticamente). @click.stop no template impede
+   propagar pro row-click do DataTable. */
+.mcr-row__action {
+    width: 30px;
+    height: 30px;
+    display: grid;
+    place-items: center;
+    background: var(--p-content-background);
+    border: 1px solid color-mix(in srgb, var(--p-primary-color) 30%, var(--m-border));
+    color: var(--p-primary-color);
+    border-radius: 8px;
+    cursor: pointer;
+    font-family: inherit;
+    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
+}
+.mcr-row__action:hover {
+    background: color-mix(in srgb, var(--p-primary-color) 12%, var(--p-content-background));
+    border-color: var(--p-primary-color);
+    color: var(--p-primary-color);
+}
+.mcr-row__action > i { font-size: 0.78rem; }
+
+/* Coluna "Ação" frozen à direita — bg sólido em ambos os modos
+   (--p-content-background): branco no light, surface configurada
+   no dark. Mesma referência visual que o header e os cards. */
+.mcr-table :deep(td.p-datatable-frozen-column),
+.mcr-table :deep(th.p-datatable-frozen-column) {
+    background: var(--p-content-background) !important;
+    box-shadow: -3px 0 6px -3px rgba(0, 0, 0, 0.18);
+    z-index: 1;
+}
+.mcr-table :deep(.p-datatable-tbody > tr:hover td.p-datatable-frozen-column) {
+    background: var(--m-bg-soft-hover);
+}
+.mcr-table :deep(.p-datatable-tbody > tr.p-datatable-row-selected td.p-datatable-frozen-column) {
+    background: var(--m-accent-soft);
+}
+
+/* Avatar — usado no row da tabela (modificador --sm) e no dialog (size full). */
 .mcr-card__avatar {
     width: 40px; height: 40px;
     border-radius: 50%;
@@ -1022,21 +1747,11 @@ onBeforeUnmount(() => {
     overflow: hidden;
 }
 .mcr-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
+.mcr-card__avatar--sm {
+    width: 32px; height: 32px;
+    font-size: 0.7rem;
+}
 
-.mcr-card__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
-.mcr-card__name-row {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    flex-wrap: wrap;
-}
-.mcr-card__name {
-    font-size: 0.92rem;
-    font-weight: 600;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
 .mcr-card__badge {
     display: inline-flex;
     align-items: center;
@@ -1049,38 +1764,20 @@ onBeforeUnmount(() => {
     border: 1px solid;
 }
 .mcr-card__badge.is-new {
-    color: rgb(251, 191, 36);
-    background: rgba(251, 191, 36, 0.12);
-    border-color: rgba(251, 191, 36, 0.3);
+    color: rgb(37, 99, 235);
+    background: rgba(37, 99, 235, 0.12);
+    border-color: rgba(37, 99, 235, 0.3);
 }
 .mcr-card__badge.is-done {
-    color: rgb(74, 222, 128);
-    background: rgba(74, 222, 128, 0.12);
-    border-color: rgba(74, 222, 128, 0.3);
+    color: rgb(22, 163, 74);
+    background: rgba(22, 163, 74, 0.12);
+    border-color: rgba(22, 163, 74, 0.3);
 }
 .mcr-card__badge.is-rejected {
-    color: rgb(248, 113, 113);
-    background: rgba(248, 113, 113, 0.12);
-    border-color: rgba(248, 113, 113, 0.3);
+    color: rgb(220, 38, 38);
+    background: rgba(220, 38, 38, 0.12);
+    border-color: rgba(220, 38, 38, 0.3);
 }
-.mcr-card__meta {
-    display: flex;
-    gap: 14px;
-    margin-top: 4px;
-    font-size: 0.7rem;
-    color: var(--m-text-muted);
-}
-.mcr-card__meta i { margin-right: 5px; font-size: 0.65rem; }
-.mcr-card__time {
-    flex-shrink: 0;
-    font-size: 0.7rem;
-    color: var(--m-text-muted);
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-}
-.mcr-card__time i { font-size: 0.65rem; }
-
 .mcr-empty {
     margin: 24px 0;
     padding: 56px 28px;
@@ -1144,11 +1841,22 @@ onBeforeUnmount(() => {
     background: var(--m-border-strong);
     border-radius: 3px;
 }
+/* Reset da .mcr-side quando teleportada pro drawer mobile — o drawer
+   já tem bg/border próprios (.mcr-mobile-drawer), então a sidebar não
+   precisa do bg/border-right que tem em desktop. */
 .mcr-mobile-drawer__scroll .mcr-side {
     width: 100%;
     height: auto;
     overflow: visible;
     padding: 0;
+    background: transparent;
+    border-right: none;
+}
+.mcr-mobile-drawer__scroll .mcr-w--side {
+    margin: 0 0 12px;
+}
+.mcr-mobile-drawer__scroll .mcr-w--side:last-of-type {
+    margin-bottom: 0;
 }
 .mcr-mobile-drawer__backdrop {
     position: fixed;
@@ -1164,10 +1872,15 @@ onBeforeUnmount(() => {
 .mcr-drawer-fade-leave-to { opacity: 0; }
 
 @media (max-width: 1023px) {
-    .mcr-body { flex-direction: column; padding: 8px; }
-    .mcr-main { width: 100%; }
+    /* Em mobile, a sidebar é teleportada pro drawer (mcr-mobile-drawer),
+       então .mcr-body só contém .mcr-main. Padding de 0 no body, padding
+       no .mcr-main já cobre o spacing interno. */
+    .mcr-body { flex-direction: column; padding: 0; }
+    .mcr-main { width: 100%; padding: 8px; }
     .mcr-page__title > span:first-of-type { display: none; }
     .mcr-menu-btn--mobile-only { display: inline-flex; }
-    .mcr-card__time { display: none; }
+    /* Em mobile mostra todas as colunas — scroll horizontal habilitado
+       via tableStyle min-width:640px. Coluna "Ação" frozen à direita
+       continua fixa enquanto o user scrolla horizontalmente. */
 }
 </style>
diff --git a/src/layout/melissa/MelissaEmbed.vue b/src/layout/melissa/MelissaEmbed.vue
index 73397fe..a9f1f80 100644
--- a/src/layout/melissa/MelissaEmbed.vue
+++ b/src/layout/melissa/MelissaEmbed.vue
@@ -53,12 +53,9 @@ const EMBED_MAP = {
         icon: 'pi pi-file-edit',
         comp: defineAsyncComponent(() => import('@/features/documents/DocumentTemplatesPage.vue'))
     },
-    'agendamentos-recebidos': {
-        label: 'Agendamentos recebidos',
-        desc: 'Solicitações vindas do agendador online à espera de confirmação.',
-        icon: 'pi pi-inbox',
-        comp: defineAsyncComponent(() => import('@/features/agenda/pages/AgendamentosRecebidosPage.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.',
diff --git a/src/layout/melissa/MelissaLayout.vue b/src/layout/melissa/MelissaLayout.vue
index 6426048..d2c753c 100644
--- a/src/layout/melissa/MelissaLayout.vue
+++ b/src/layout/melissa/MelissaLayout.vue
@@ -35,6 +35,7 @@ import MelissaGrupos from './MelissaGrupos.vue';
 import MelissaConfiguracoes from './MelissaConfiguracoes.vue';
 import MelissaEmbed from './MelissaEmbed.vue';
 import MelissaCadastrosRecebidos from './MelissaCadastrosRecebidos.vue';
+import MelissaAgendamentosRecebidos from './MelissaAgendamentosRecebidos.vue';
 import MelissaMedicos from './MelissaMedicos.vue';
 import MelissaEventoPanel from './MelissaEventoPanel.vue';
 import { TOQUES, playToque } from './melissaToques';
@@ -42,6 +43,7 @@ import { useMelissaPacientes } from './composables/useMelissaPacientes';
 import { useMelissaEventosHoje } from './composables/useMelissaEventos';
 import { useMelissaWhatsapp } from './composables/useMelissaWhatsapp';
 import { useMelissaAgenda, MELISSA_AGENDA_KEY } from './composables/useMelissaAgenda';
+import { useMelissaDockPins } from './composables/useMelissaDockPins';
 import { supabase } from '@/lib/supabase/client';
 import { useConversationDrawerStore } from '@/stores/conversationDrawerStore';
 import ConversationDrawer from '@/components/conversations/ConversationDrawer.vue';
@@ -56,10 +58,53 @@ import { useNotificationStore } from '@/stores/notificationStore';
 import { useAjuda } from '@/composables/useAjuda';
 import { useTopbarPlanMenu } from '@/composables/useTopbarPlanMenu';
 
-// Pacientes ativos do tenant (real, via Supabase)
-const { pacientes: pacientesReais, loading: pacientesLoading, refetch: refetchPacientes } = useMelissaPacientes();
-// Eventos reais de hoje — alimenta timeline + cards + busca + "Hoje há"
-const { eventos: eventosHojeReais, refetch: refetchEventosHoje } = useMelissaEventosHoje();
+// Pacientes + eventos do dia.
+//
+// PERF: quando o usuário entra direto numa seção (`/melissa/agenda`,
+// `/melissa/pacientes`...), o resumo fica tapado pelo conteúdo da seção.
+// Carregar os dois loaders na hora competiria com as queries da seção
+// (que é o que o user efetivamente vai ver). Adiamos os loaders do
+// resumo pra rodarem em background via `requestIdleCallback` quando a
+// rota inicial já tem seção. Quando o user fecha a seção (volta pro
+// resumo), o cache provavelmente já tá quente — se não estiver, o
+// loading aparece naturalmente.
+//
+// CACHE: composables usam stale-while-revalidate via melissaCacheStore.
+// Reabertura do Melissa na mesma sessão SPA é instantânea.
+// Snapshot da rota no setup pra detectar deep-link com seção já no boot.
+// (`route` reativo é declarado mais abaixo, mas só precisamos do params
+// inicial aqui — `setup` roda 1× por mount, params do router já estão
+// resolvidos nesse ponto.)
+const _hasInitialSecao = !!useRoute().params?.secao;
+const {
+    pacientes: pacientesReais,
+    loading: pacientesLoading,
+    refetch: refetchPacientes,
+    fetchCached: fetchPacientesCached
+} = useMelissaPacientes({ autoFetch: !_hasInitialSecao });
+const {
+    eventos: eventosHojeReais,
+    refetch: refetchEventosHoje,
+    fetchCached: fetchEventosHojeCached
+} = useMelissaEventosHoje({ autoFetch: !_hasInitialSecao });
+
+// Defer manual quando a rota inicial é uma seção: agenda os fetches do
+// resumo pra rodarem após a seção montar (idle callback) — fetchCached
+// usa stale-while-revalidate, então não tomba o cache. setTimeout 200
+// como fallback pra navegadores sem requestIdleCallback (Safari < 16).
+if (_hasInitialSecao) {
+    const _idleFetch = () => {
+        fetchPacientesCached();
+        fetchEventosHojeCached();
+    };
+    if (typeof window !== 'undefined') {
+        if (typeof window.requestIdleCallback === 'function') {
+            window.requestIdleCallback(_idleFetch, { timeout: 1500 });
+        } else {
+            setTimeout(_idleFetch, 200);
+        }
+    }
+}
 
 // ───────────────────────────────────────────────────────────────
 // Catálogo de cards do resumo (extensível — novos cards entram aqui)
@@ -129,14 +174,14 @@ const SECOES = {
 };
 
 // Set de keys que renderizam via MelissaEmbed (Onda 1 — pages 1-coluna)
-const MELISSA_EMBED_KEYS = ['financeiro', 'financeiro-lancamentos', 'documentos', 'documentos-templates', 'agendamentos-recebidos', 'online-scheduling', 'relatorios', 'notificacoes', 'link-externo'];
+const MELISSA_EMBED_KEYS = ['financeiro', 'financeiro-lancamentos', 'documentos', 'documentos-templates', 'online-scheduling', 'relatorios', 'notificacoes', 'link-externo'];
 
 // Slugs reservados pra páginas dedicadas (não-config) — agenda, pacientes,
 // conversas etc. + as MELISSA_EMBED_KEYS. Usado no isConfigRoute pra
 // evitar colisão (ex: /melissa/agenda → MelissaAgenda, não config).
 const MELISSA_NON_CONFIG_SLUGS = new Set([
     'agenda', 'pacientes', 'compromissos', 'recorrencias', 'conversas',
-    'tags', 'grupos', 'cadastros-recebidos', 'medicos',
+    'tags', 'grupos', 'cadastros-recebidos', 'medicos', 'agendamentos-recebidos',
     ...MELISSA_EMBED_KEYS
 ]);
 // Aliases "bonitos" + INLINE_KEYS reconhecidos pelo MelissaConfiguracoes.
@@ -171,6 +216,17 @@ const secaoAberta = computed(() => {
     return null;
 });
 
+// Quando o usuário fecha a seção e volta pro resumo, garante que os
+// dados estão prontos (caso o idle callback ainda não tenha disparado
+// no fluxo deep-link). fetchCached é idempotente: cache hit → instant,
+// cache miss → fetch real. Sem cache, não dispara nada estranho.
+watch(secaoAberta, (newVal, oldVal) => {
+    if (oldVal && !newVal) {
+        fetchPacientesCached();
+        fetchEventosHojeCached();
+    }
+});
+
 function abrirSecao(key) {
     // Fecha overlays paralelos pra evitar empilhamento
     workspaceOpen.value = false;
@@ -183,6 +239,74 @@ function fecharSecao() {
     router.push({ name: 'Melissa', params: {} });
 }
 
+// ── Pins dinâmicos do dock (híbrido: 4 fixos + 3 MRU) ──────────
+const dockPins = useMelissaDockPins();
+const pinContextMenu = ref(null);
+const pinContextSlug = ref('');
+
+// Toda vez que a seção muda, registra como "recente" no dock (se não
+// for builtin nem pinned). Slugs de configuração (cfg-*) também viram
+// recent — útil quando o user fica navegando entre páginas de config.
+watch(secaoAberta, (slug) => {
+    if (slug) dockPins.pushRecent(slug);
+});
+
+function openPinContextMenu(event, slug) {
+    event.preventDefault();
+    event.stopPropagation();
+    pinContextSlug.value = slug;
+    pinContextMenu.value?.show(event);
+}
+
+const pinContextMenuItems = computed(() => {
+    const slug = pinContextSlug.value;
+    if (!slug) return [];
+    const isPinned = dockPins.isPinned(slug);
+    const items = [];
+    if (isPinned) {
+        items.push({
+            label: 'Desafixar',
+            icon: 'pi pi-bookmark',
+            command: () => dockPins.unpin(slug)
+        });
+    } else {
+        items.push({
+            label: 'Fixar no dock',
+            icon: 'pi pi-bookmark-fill',
+            command: () => {
+                const result = dockPins.pin(slug);
+                if (!result.ok && result.reason === 'full') {
+                    toast.add({
+                        severity: 'warn',
+                        summary: 'Limite atingido',
+                        detail: `Você pode fixar até ${dockPins.MAX_PINNED} atalhos. Desafixe um pra liberar espaço.`,
+                        life: 3500
+                    });
+                }
+            }
+        });
+    }
+    items.push({ separator: true });
+    items.push({
+        label: 'Remover do dock',
+        icon: 'pi pi-times',
+        command: () => dockPins.remove(slug)
+    });
+    return items;
+});
+
+// Resolve label/ícone a partir do slug pra renderizar no pin.
+// Usa o catálogo SECOES (já existente) — fallback genérico se slug
+// for de uma rota cfg-* (configurações embeds).
+function pinMeta(slug) {
+    const fromSecoes = SECOES[slug];
+    if (fromSecoes) return { label: fromSecoes.label, icon: fromSecoes.icon };
+    if (slug?.startsWith('cfg-')) {
+        return { label: 'Configuração', icon: 'pi pi-cog' };
+    }
+    return { label: slug, icon: 'pi pi-bookmark' };
+}
+
 // Prefs de layout/UI (toque, fundo, opacidade, formato hora)
 // TODO: migrar pra configs do tenant — hoje só localStorage pra survive refresh
 const LAYOUT_STORAGE_KEY = 'melissa.layout.v1';
@@ -619,14 +743,23 @@ function onConcluir()  { updateEventoStatus('realizado', 'Sessão marcada como r
 function onFaltou()    { updateEventoStatus('faltou', 'Marcada como falta'); }
 function onCancelar()  { updateEventoStatus('cancelado', 'Evento cancelado'); }
 
-function onWhatsapp() {
+async function onWhatsapp() {
     const ev = eventoSelecionado.value;
     if (!ev?.patient_id) {
         toast.add({ severity: 'warn', summary: 'Paciente sem id', life: 2200 });
         return;
     }
-    conversationDrawerStore.openForPatient(String(ev.patient_id));
+    const patientId = String(ev.patient_id);
     fecharEvento();
+    // openForPatient é async — busca thread existente ou cria stub.
+    // Se paciente não tem telefone (ou outro erro), o store seta `error`
+    // e mantém `isOpen=false` silenciosamente. Aguardamos pra dar feedback.
+    await conversationDrawerStore.openForPatient(patientId);
+    if (!conversationDrawerStore.isOpen) {
+        const detail = conversationDrawerStore.error?.message || 'Não foi possível abrir a conversa.';
+        toast.add({ severity: 'warn', summary: 'WhatsApp', detail, life: 3500 });
+        conversationDrawerStore.error = null;
+    }
 }
 
 // ── Pending agenda actions ────────────────────────────────────
@@ -666,8 +799,31 @@ function onAbrirProntuario() {
 }
 
 function onHistoricoSessoes() {
+    const ev = eventoSelecionado.value;
+    if (!ev?.patient_id) {
+        toast.add({ severity: 'warn', summary: 'Paciente não vinculado', life: 2200 });
+        return;
+    }
+    const patientId = ev.patient_id;
     fecharEvento();
-    _callOnAgenda((agenda) => agenda.setView?.('lista'));
+    // Abre a Agenda (se não estiver) e dispara o overlay "Todas as sessões"
+    // filtrado pelo paciente — mesmo fluxo do botão Sessões em .ma-dock-actions.
+    _callOnAgenda((agenda) => agenda.openSessoesPaciente?.(patientId));
+}
+
+// Editar cadastro do paciente vinculado à sessão. Difere de onEditEvento
+// (que abre o AgendaEventDialog pra mexer na sessão em si). Reusa o
+// PatientCadastroDialog já montado dentro do MelissaAgenda via método
+// exposto openEditPatient.
+function onEditPaciente() {
+    const ev = eventoSelecionado.value;
+    if (!ev?.patient_id) {
+        toast.add({ severity: 'warn', summary: 'Paciente não vinculado', life: 2200 });
+        return;
+    }
+    const patientId = ev.patient_id;
+    fecharEvento();
+    _callOnAgenda((agenda) => agenda.openEditPatient?.(patientId));
 }
 
 async function onEditEvento() {
@@ -1178,10 +1334,20 @@ function onKeydown(e) {
     }
 
     if (e.key !== 'Escape') return;
+    // Bail-out: se há um overlay PrimeVue (Dialog/Drawer) aberto, deixa
+    // o componente cuidar do ESC pelo seu próprio closeOnEscape. Sem
+    // este guard, o ESC fechava o overlay E uma camada do cascade —
+    // o usuário via "duas janelas fechando" (drawer WhatsApp + agenda,
+    // AgendaEventDialog + evento panel, ConfirmDialog + workspace, etc).
+    if (document.querySelector('.p-dialog-mask, .p-drawer-mask')) return;
+
+    // Cascata top-down do z-order — ESC fecha SOMENTE a camada do topo.
+    // Ordem (mais sobreposto → menos): central modal > evento panel >
+    // cronômetro > seção (agenda/pacientes/etc) > workspace > settings.
     if (centralOpen.value) centralOpen.value = false;
-    else if (secaoAberta.value) fecharSecao();
     else if (eventoSelecionado.value) fecharEvento();
     else if (cronoVisible.value) fecharCronometro();
+    else if (secaoAberta.value) fecharSecao();
     else if (workspaceOpen.value) closeWorkspace();
     else if (settingsOpen.value) settingsOpen.value = false;
 }
@@ -1774,7 +1940,7 @@ function onKeydown(e) {
                 type="button"
                 class="dock-pin"
                 v-tooltip.top="'WhatsApp'"
-                :class="{ 'dock-pin--active': secaoAtual === 'conversas' }"
+                :class="{ 'dock-pin--active': secaoAberta === 'conversas' }"
                 @click="abrirSecao('conversas')"
             >
                 <i class="pi pi-whatsapp" />
@@ -1784,6 +1950,46 @@ function onKeydown(e) {
                     :title="`${whatsappPendente.count} mensagens não lidas`"
                 >{{ whatsappPendente.count > 99 ? '99+' : whatsappPendente.count }}</span>
             </button>
+
+            <!-- Divisor entre builtins e pins dinâmicos. Só aparece se
+                 o user tem pelo menos 1 pin (fixo ou recente). -->
+            <div
+                v-if="dockPins.pinned.value.length || dockPins.recent.value.length"
+                class="dock-divider"
+                aria-hidden="true"
+            />
+
+            <!-- Pins fixados pelo user (max 4). Click direito → menu
+                 desafixar/remover. Hover mostra subtle ring. -->
+            <button
+                v-for="slug in dockPins.pinned.value" :key="`p-${slug}`"
+                type="button"
+                class="dock-pin dock-pin--user"
+                :class="{ 'dock-pin--active': secaoAberta === slug }"
+                v-tooltip.top="pinMeta(slug).label + ' (fixado)'"
+                @click="abrirSecao(slug)"
+                @contextmenu="openPinContextMenu($event, slug)"
+            >
+                <i :class="pinMeta(slug).icon" />
+                <span class="dock-pin__pinned-mark" aria-hidden="true" />
+            </button>
+
+            <!-- Pins MRU (max 3) — empurrados pelas últimas seções abertas.
+                 Visual mais leve (opacity menor) pra destacar dos fixos. -->
+            <button
+                v-for="slug in dockPins.recent.value" :key="`r-${slug}`"
+                type="button"
+                class="dock-pin dock-pin--recent"
+                :class="{ 'dock-pin--active': secaoAberta === slug }"
+                v-tooltip.top="pinMeta(slug).label + ' (recente — clique direito pra fixar)'"
+                @click="abrirSecao(slug)"
+                @contextmenu="openPinContextMenu($event, slug)"
+            >
+                <i :class="pinMeta(slug).icon" />
+            </button>
+
+            <!-- Menu de contexto dos pins dinâmicos (popup global) -->
+            <Menu ref="pinContextMenu" :model="pinContextMenuItems" :popup="true" />
         </div>
 
 
@@ -1812,7 +2018,8 @@ function onKeydown(e) {
                 @faltou="onFaltou"
                 @cancelar="onCancelar"
                 @remarcar="onRemarcar"
-                @edit="onEditEvento"
+                @edit-sessao="onEditEvento"
+                @edit-paciente="onEditPaciente"
                 @abrir-prontuario="onAbrirProntuario"
                 @whatsapp="onWhatsapp"
                 @historico="onHistoricoSessoes"
@@ -1910,6 +2117,8 @@ function onKeydown(e) {
             @close="fecharSecao"
             @patient-created="refetchPacientes"
             @goto-agenda="abrirSecao('agenda')"
+            @goto-grupos="abrirSecao('grupos')"
+            @goto-tags="abrirSecao('tags')"
         />
 
         <MelissaCompromissos
@@ -1942,6 +2151,11 @@ function onKeydown(e) {
             @close="fecharSecao"
         />
 
+        <MelissaAgendamentosRecebidos
+            v-if="layoutReady && secaoAberta === 'agendamentos-recebidos'"
+            @close="fecharSecao"
+        />
+
         <MelissaMedicos
             v-if="layoutReady && secaoAberta === 'medicos'"
             @close="fecharSecao"
@@ -3177,6 +3391,42 @@ html:not(.app-dark) .melissa-dock .dock-pin:hover {
     box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);
 }
 
+/* ─── Pins dinâmicos do dock (híbrido fixo + recente) ───────── */
+/* Divisor entre builtins e dinâmicos. Fininho, atravessa o gap. */
+.dock-divider {
+    width: 1px;
+    height: 24px;
+    align-self: center;
+    background: var(--m-border, rgba(255, 255, 255, 0.18));
+    opacity: 0.7;
+}
+html:not(.app-dark) .dock-divider {
+    background: rgba(15, 23, 42, 0.18);
+}
+
+/* Pin fixado pelo user — pequena marca no canto pra diferenciar do recente. */
+.dock-pin--user .dock-pin__pinned-mark {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: color-mix(in srgb, var(--p-primary-color) 70%, white);
+    box-shadow: 0 0 6px color-mix(in srgb, var(--p-primary-color) 50%, transparent);
+    pointer-events: none;
+}
+
+/* Pin recente (MRU) — visualmente mais leve pra denotar transitoriedade.
+   Fica entre opacity total (active/hover) e ~70% no estado normal. */
+.dock-pin--recent {
+    opacity: 0.78;
+}
+.dock-pin--recent:hover,
+.dock-pin--recent.dock-pin--active {
+    opacity: 1;
+}
+
 /* ─── Skeleton loading utilitário (global pra atravessar scoped CSS dos
        componentes filhos). Use a classe .melissa-skeleton em qualquer
        container — vira um placeholder com shimmer suave.
diff --git a/src/layout/melissa/MelissaPacientes.vue b/src/layout/melissa/MelissaPacientes.vue
index 4c29005..6b05452 100644
--- a/src/layout/melissa/MelissaPacientes.vue
+++ b/src/layout/melissa/MelissaPacientes.vue
@@ -37,7 +37,8 @@ import {
     listGroupsByPatient,
     listTagsByPatient,
     getSessionCounts,
-    softDeletePatient
+    softDeletePatient,
+    restorePatient
 } from '@/features/patients/services/patientsRepository';
 import PatientProntuario from '@/features/patients/prontuario/PatientProntuario.vue';
 import PatientCreatePopover from '@/components/ui/PatientCreatePopover.vue';
@@ -46,7 +47,7 @@ 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 emit = defineEmits(['close', 'patient-created', 'goto-agenda', 'goto-grupos', 'goto-tags']);
 
 const toast = useToast();
 const confirm = useConfirm();
@@ -437,6 +438,36 @@ watch(() => pacientesOrdenados.value.length, (len) => {
     if (pageMP.value > maxPag) pageMP.value = maxPag;
 });
 
+// ── View mode persistido (list/grid) ──────────────────────
+// Lista = cards verticais empilhados (default, mostra detail panel).
+// Grade = cards num grid responsivo (mais compacto, ideal pra browse).
+const VIEW_MODE_KEY = 'mp.viewMode.v1';
+const viewMode = ref('list');
+try {
+    const saved = localStorage.getItem(VIEW_MODE_KEY);
+    if (saved === 'list' || saved === 'grid') viewMode.value = saved;
+} catch (_) {}
+function setViewMode(m) {
+    if (m !== 'list' && m !== 'grid') return;
+    viewMode.value = m;
+    try { localStorage.setItem(VIEW_MODE_KEY, m); } catch (_) {}
+}
+
+// ── Popover de ações (mobile) ────────────────────────────
+// Em desktop os 5 botões aparecem inline no card. Em mobile, só
+// mostra 1 pencil que dispara este popover com as 5 opções.
+const actionsPopRef = ref(null);
+const actionsTarget = ref(null);
+function openActionsPop(event, p) {
+    actionsTarget.value = p;
+    actionsPopRef.value?.toggle(event);
+}
+function actionsRun(fn) {
+    const p = actionsTarget.value;
+    actionsPopRef.value?.hide();
+    if (p && typeof fn === 'function') fn(p);
+}
+
 // ── KPIs (COL 3) ────────────────────────────────────────────────
 const RECENTE_THRESHOLD_MS = 14 * 24 * 60 * 60 * 1000;
 const kpis = computed(() => {
@@ -465,8 +496,8 @@ 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 grupoCorById = (id) => grupos.value.find((g) => g.id === id)?.color || null;
+const tagCorById = (id) => tags.value.find((t) => t.id === id)?.color || null;
 
 const selectedGroups = computed(() => {
     if (!pacienteSelecionadoId.value) return [];
@@ -567,6 +598,40 @@ function confirmarRemover(p) {
     });
 }
 
+// Helper: paciente está arquivado? (case-insensitive — DB pode vir
+// com "Arquivado" do form ou "arquivado" lowercased de algum lugar.)
+function isArquivado(p) {
+    return String(p?.status || '').toLowerCase() === 'arquivado';
+}
+
+// Restaurar paciente arquivado — volta status pra 'Ativo' via
+// restorePatient (inverso semântico do softDeletePatient).
+function restaurarPaciente(p) {
+    if (!p?.id) return;
+    confirm.require({
+        message: `Restaurar "${p.nome}" pra lista de pacientes ativos?`,
+        header: 'Restaurar paciente',
+        icon: 'pi pi-undo',
+        acceptLabel: 'Restaurar',
+        rejectLabel: 'Cancelar',
+        accept: async () => {
+            try {
+                const tenantId = tenantStore.activeTenantId || tenantStore.tenantId;
+                await restorePatient(p.id, { tenantId });
+                toast.add({ severity: 'success', summary: 'Restaurado', detail: p.nome, life: 2200 });
+                await refetchTudo();
+            } catch (e) {
+                toast.add({
+                    severity: 'error',
+                    summary: 'Falha ao restaurar',
+                    detail: e?.message || 'Tente novamente.',
+                    life: 4000
+                });
+            }
+        }
+    });
+}
+
 // ── Sessões do paciente (dialog) ───────────────────────────────
 const sessoesDialogOpen = ref(false);
 const sessoesPaciente = ref(null);
@@ -666,7 +731,7 @@ function sessaoStatusColor(s) {
                 <span>Menu Pacientes</span>
             </button>
             <div class="mp-page__title">
-                <i class="pi pi-users text-white/85" />
+                <i class="pi pi-users mp-page__title-icon" />
                 <span>Pacientes</span>
                 <span class="mp-page__count">{{ pacientesOrdenados.length }}</span>
                 <span v-if="loadingPacientes" class="mp-page__loading">
@@ -688,12 +753,31 @@ function sessaoStatusColor(s) {
             </div>
         </header>
 
+        <!-- Subheader explicativo — padrão do melissa-table-page-blueprint.md
+             § 9. Diferencia visualmente esta página das outras tabulares e
+             resume as ações principais em <strong>. -->
+        <div class="mp-subheader">
+            <i class="pi pi-info-circle mp-subheader__icon" />
+            <span class="mp-subheader__text">
+                Lista completa dos pacientes cadastrados. Filtre por
+                <strong>status, grupo ou tag</strong> à esquerda, busque por
+                nome ou contato, e clique numa linha pra abrir o
+                <strong>prontuário</strong> com histórico, sessões e
+                documentos.
+            </span>
+        </div>
+
         <div class="mp-body">
             <!-- ═══ COL 1: Filtros ═══════════════════════════════════════
                  Em desktop renderiza in-place. Em mobile (<lg) o Teleport
                  move pra dentro de #mp-mobile-drawer-target. -->
             <Teleport to="#mp-mobile-drawer-target" :disabled="!isMobile">
             <aside class="mp-side">
+                <!-- Wrapper scrollável: cards de filtros (Status / Grupos / Tags).
+                     O footer com "Limpar filtros" fica fora desse scroll
+                     (flex-shrink:0 ancorado no bottom da .mp-side em desktop,
+                     position:sticky no bottom do drawer em mobile). -->
+                <div class="mp-side__scroll">
                 <!-- Card: Status -->
                 <div class="mp-w">
                     <div class="mp-w__head">
@@ -704,7 +788,7 @@ function sessaoStatusColor(s) {
                             v-for="s in STATUS_OPTIONS"
                             :key="s.key"
                             class="mp-status-pill"
-                            :class="{ 'is-active': statusFiltro === s.key }"
+                            :class="[`is-${s.key}`, { 'is-active': statusFiltro === s.key }]"
                             @click="statusFiltro = s.key"
                         >
                             <i :class="s.icon" class="text-xs" />
@@ -728,11 +812,11 @@ function sessaoStatusColor(s) {
                                 <i class="pi pi-times text-[0.6rem]" />
                             </button>
                             <button
-                                class="mp-side__add"
-                                v-tooltip.top="'Adicionar grupo'"
-                                @click="openCreateGroup"
+                                class="mp-side__cog"
+                                v-tooltip.top="'Configurar grupos'"
+                                @click="emit('goto-grupos')"
                             >
-                                <i class="pi pi-plus text-[0.6rem]" />
+                                <i class="pi pi-cog text-[0.62rem]" />
                             </button>
                         </div>
                     </div>
@@ -742,10 +826,10 @@ function sessaoStatusColor(s) {
                             :key="g.id"
                             class="mp-chip"
                             :class="{ 'is-active': grupoFiltroId === g.id }"
-                            :style="g.cor ? { borderLeftColor: g.cor } : null"
+                            :style="g.color ? { borderLeftColor: g.color } : 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__dot" :style="{ backgroundColor: g.color || 'var(--m-text-muted)' }" />
                             <span class="mp-chip__name truncate">{{ g.nome || g.name }}</span>
                             <span class="mp-chip__count">{{ groupCounts.get(g.id) || 0 }}</span>
                         </button>
@@ -753,6 +837,13 @@ function sessaoStatusColor(s) {
                             <span>Nenhum grupo</span>
                         </div>
                     </div>
+                    <button
+                        class="mp-side__add-btn"
+                        @click="openCreateGroup"
+                    >
+                        <i class="pi pi-plus" />
+                        <span>Grupo</span>
+                    </button>
                 </div>
 
                 <!-- Card: Tags -->
@@ -769,11 +860,11 @@ function sessaoStatusColor(s) {
                                 <i class="pi pi-times text-[0.6rem]" />
                             </button>
                             <button
-                                class="mp-side__add"
-                                v-tooltip.top="'Adicionar tag'"
-                                @click="openCreateTag"
+                                class="mp-side__cog"
+                                v-tooltip.top="'Configurar tags'"
+                                @click="emit('goto-tags')"
                             >
-                                <i class="pi pi-plus text-[0.6rem]" />
+                                <i class="pi pi-cog text-[0.62rem]" />
                             </button>
                         </div>
                     </div>
@@ -783,10 +874,10 @@ function sessaoStatusColor(s) {
                             :key="t.id"
                             class="mp-chip"
                             :class="{ 'is-active': tagFiltroId === t.id }"
-                            :style="t.cor ? { borderLeftColor: t.cor } : null"
+                            :style="t.color ? { borderLeftColor: t.color } : 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__dot" :style="{ backgroundColor: t.color || 'var(--m-text-muted)' }" />
                             <span class="mp-chip__name truncate">{{ t.nome || t.name }}</span>
                             <span class="mp-chip__count">{{ tagCounts.get(t.id) || 0 }}</span>
                         </button>
@@ -794,14 +885,29 @@ function sessaoStatusColor(s) {
                             <span>Nenhuma tag</span>
                         </div>
                     </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
+                        class="mp-side__add-btn"
+                        @click="openCreateTag"
+                    >
+                        <i class="pi pi-plus" />
+                        <span>Tag</span>
                     </button>
                 </div>
+                </div><!-- /.mp-side__scroll -->
+
+                <!-- Footer fixo no bottom da sidebar (fora do scroll dos cards).
+                     Aparece com fade+collapse quando algum filtro é ativado. -->
+                <Transition name="mp-clear">
+                    <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>
+                </Transition>
             </aside>
             </Teleport>
 
@@ -817,7 +923,28 @@ function sessaoStatusColor(s) {
                             class="mp-search__input"
                         />
                     </div>
-                    <button class="mp-btn mp-btn--primary" @click="openCreatePopover">
+                    <!-- View toggle (lista/grade) — persiste em localStorage -->
+                    <div class="mp-view-toggle" role="group" aria-label="Visualização">
+                        <button
+                            class="mp-view-toggle__btn"
+                            :class="{ 'is-active': viewMode === 'list' }"
+                            v-tooltip.bottom="'Lista'"
+                            aria-label="Lista"
+                            @click="setViewMode('list')"
+                        >
+                            <i class="pi pi-list" />
+                        </button>
+                        <button
+                            class="mp-view-toggle__btn"
+                            :class="{ 'is-active': viewMode === 'grid' }"
+                            v-tooltip.bottom="'Grade'"
+                            aria-label="Grade"
+                            @click="setViewMode('grid')"
+                        >
+                            <i class="pi pi-th-large" />
+                        </button>
+                    </div>
+                    <button class="mp-btn mp-btn--primary" @click="openCreatePopover($event)">
                         <i class="pi pi-plus text-xs" />
                         <span>Novo paciente</span>
                     </button>
@@ -857,7 +984,7 @@ function sessaoStatusColor(s) {
                                 <i class="pi pi-filter-slash text-xs" />
                                 Limpar busca
                             </button>
-                            <button class="mp-btn mp-btn--primary" @click="openCreatePopover">
+                            <button class="mp-btn mp-btn--primary" @click="openCreatePopover($event)">
                                 <i class="pi pi-plus text-xs" />
                                 Novo paciente
                             </button>
@@ -865,7 +992,7 @@ function sessaoStatusColor(s) {
                     </div>
 
                     <button
-                        v-for="p in (pacientesCarregandoInicial ? [] : pacientesPaginados)"
+                        v-for="p in (pacientesCarregandoInicial || viewMode !== 'list' ? [] : pacientesPaginados)"
                         :key="p.id"
                         class="mp-card"
                         :class="{
@@ -890,16 +1017,6 @@ function sessaoStatusColor(s) {
                                     {{ 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"
@@ -909,7 +1026,7 @@ function sessaoStatusColor(s) {
                                     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' }"
+                                    :style="{ backgroundColor: (t.color || '#94a3b8') + '22', color: t.color || 'var(--m-text-muted)', borderColor: (t.color || '#94a3b8') + '50' }"
                                 >
                                     {{ t.nome || t.name }}
                                 </span>
@@ -921,51 +1038,152 @@ function sessaoStatusColor(s) {
                                 </span>
                             </div>
                         </div>
+                        <!-- Email — coluna própria (separada do main pra leitura
+                             tabular). Trunca com ellipsis. -->
+                        <div class="mp-card__email">
+                            <i class="pi pi-envelope" />
+                            <span class="mp-card__email-text">{{ p.email || '—' }}</span>
+                        </div>
+                        <!-- Telefone — coluna própria, paralela ao email. -->
+                        <div class="mp-card__phone">
+                            <i class="pi pi-phone" />
+                            <span class="mp-card__phone-text">{{ p.telefone ? fmtPhone(p.telefone) : '—' }}</span>
+                        </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. -->
+                        <!-- Ações inline: 5 botões em desktop, 1 pencil que abre
+                             popover em mobile. stopPropagation em todos pra não
+                             disparar selecionarPaciente do botão pai. Mobile: a
+                             coluna é sticky-right (fixada visualmente). -->
                         <div class="mp-card__actions" @click.stop>
+                            <!-- Desktop: 5 ações inline -->
                             <button
-                                class="mp-card__action"
+                                class="mp-card__action mp-card__action--desktop"
                                 v-tooltip.top="'Abrir prontuário'"
                                 @click="abrirProntuario(p)"
                             >
                                 <i class="pi pi-file" />
                             </button>
                             <button
-                                class="mp-card__action"
+                                class="mp-card__action mp-card__action--desktop"
                                 v-tooltip.top="'Ver sessões'"
                                 @click="verSessoes(p)"
                             >
                                 <i class="pi pi-history" />
                             </button>
                             <button
-                                class="mp-card__action"
+                                class="mp-card__action mp-card__action--desktop"
                                 v-tooltip.top="'Conversar (WhatsApp)'"
                                 @click="abrirWhatsapp(p)"
                             >
                                 <i class="pi pi-whatsapp" />
                             </button>
                             <button
-                                class="mp-card__action"
+                                class="mp-card__action mp-card__action--desktop"
                                 v-tooltip.top="'Editar'"
                                 @click="editarPaciente(p)"
                             >
                                 <i class="pi pi-pencil" />
                             </button>
+                            <!-- Arquivar / Restaurar — toggle condicional baseado
+                                 em p.status. Arquivar quando ativo (vermelho),
+                                 Restaurar quando arquivado (neutro/primary). -->
                             <button
-                                class="mp-card__action mp-card__action--danger"
+                                v-if="!isArquivado(p)"
+                                class="mp-card__action mp-card__action--desktop mp-card__action--danger"
                                 v-tooltip.top="'Arquivar'"
                                 @click="confirmarRemover(p)"
                             >
                                 <i class="pi pi-trash" />
                             </button>
+                            <button
+                                v-else
+                                class="mp-card__action mp-card__action--desktop mp-card__action--restore"
+                                v-tooltip.top="'Restaurar'"
+                                @click="restaurarPaciente(p)"
+                            >
+                                <i class="pi pi-undo" />
+                            </button>
+                            <!-- Mobile: 1 pencil que abre popover com todas as ações -->
+                            <button
+                                class="mp-card__action mp-card__action--mobile"
+                                aria-label="Mais ações"
+                                @click="openActionsPop($event, p)"
+                            >
+                                <i class="pi pi-pencil" />
+                            </button>
                         </div>
                     </button>
+
+                    <!-- Grid view — cards num CSS grid responsivo. Mesma fonte
+                         de dados (pacientesPaginados) que a list view. -->
+                    <div v-if="viewMode === 'grid' && !pacientesCarregandoInicial && pacientesOrdenados.length > 0" class="mp-grid">
+                        <div
+                            v-for="p in pacientesPaginados"
+                            :key="p.id"
+                            class="mp-grid__card"
+                            :class="{
+                                'is-active': pacienteSelecionadoId === p.id,
+                                'is-novo': isPacienteNovo(p)
+                            }"
+                            role="button"
+                            tabindex="0"
+                            @click="selecionarPaciente(p.id)"
+                            @dblclick="abrirProntuario(p)"
+                            @keydown.enter.prevent="selecionarPaciente(p.id)"
+                            @keydown.space.prevent="selecionarPaciente(p.id)"
+                        >
+                            <div class="mp-grid__top">
+                                <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>
+                                <button
+                                    class="mp-card__action mp-card__action--mobile"
+                                    aria-label="Mais ações"
+                                    @click.stop="openActionsPop($event, p)"
+                                >
+                                    <i class="pi pi-pencil" />
+                                </button>
+                            </div>
+                            <div class="mp-grid__name-row">
+                                <span class="mp-grid__name">{{ p.nome }}</span>
+                                <span v-if="isPacienteNovo(p)" class="mp-card__novo">novo</span>
+                            </div>
+                            <div v-if="p.status && p.status !== 'Ativo'" class="mp-grid__status">
+                                {{ p.status }}
+                            </div>
+                            <div class="mp-grid__meta">
+                                <span><i class="pi pi-envelope" /> {{ p.email || '—' }}</span>
+                                <span><i class="pi pi-phone" /> {{ p.telefone ? fmtPhone(p.telefone) : '—' }}</span>
+                            </div>
+                            <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.color || '#94a3b8') + '22', color: t.color || 'var(--m-text-muted)', borderColor: (t.color || '#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 class="mp-grid__last">
+                                <i class="pi pi-clock" />
+                                <span>Última: {{ fmtUltimaSessao(p.last_attended_at) }}</span>
+                            </div>
+                        </div>
+                    </div>
                 </div>
 
                 <Paginator
@@ -1059,16 +1277,16 @@ function sessaoStatusColor(s) {
                             v-for="g in selectedGroups"
                             :key="'g' + g.id"
                             class="mp-detail__chip"
-                            :style="{ borderLeftColor: g.cor || 'var(--m-text-muted)' }"
+                            :style="{ borderLeftColor: g.color || 'var(--m-text-muted)' }"
                         >
-                            <span class="mp-chip__dot" :style="{ backgroundColor: g.cor || 'var(--m-text-muted)' }" />
+                            <span class="mp-chip__dot" :style="{ backgroundColor: g.color || '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)' }"
+                            :style="{ backgroundColor: (t.color || '#94a3b8') + '20', borderColor: (t.color || '#94a3b8') + '60', color: t.color || 'var(--m-text)' }"
                         >
                             {{ t.nome || t.name }}
                         </span>
@@ -1233,6 +1451,49 @@ function sessaoStatusColor(s) {
                 </div>
             </template>
         </Dialog>
+
+        <!-- Popover de ações (mobile) — disparado pelo pencil único do
+             card. Reusa as mesmas funções dos botões inline desktop. -->
+        <Popover ref="actionsPopRef" class="mp-actions-popover">
+            <div v-if="actionsTarget" class="mp-actions-menu">
+                <button class="mp-actions-menu__item" @click="actionsRun(abrirProntuario)">
+                    <i class="pi pi-file" />
+                    <span>Abrir prontuário</span>
+                </button>
+                <button class="mp-actions-menu__item" @click="actionsRun(verSessoes)">
+                    <i class="pi pi-history" />
+                    <span>Ver sessões</span>
+                </button>
+                <button class="mp-actions-menu__item" @click="actionsRun(abrirWhatsapp)">
+                    <i class="pi pi-whatsapp" />
+                    <span>Conversar (WhatsApp)</span>
+                </button>
+                <button class="mp-actions-menu__item" @click="actionsRun(editarPaciente)">
+                    <i class="pi pi-pencil" />
+                    <span>Editar</span>
+                </button>
+                <div class="mp-actions-menu__divider" />
+                <!-- Arquivar / Restaurar — toggle baseado em status do paciente
+                     atual no actionsTarget. Substitui um pelo outro pra evitar
+                     ações redundantes (arquivar paciente já arquivado é no-op). -->
+                <button
+                    v-if="!isArquivado(actionsTarget)"
+                    class="mp-actions-menu__item is-danger"
+                    @click="actionsRun(confirmarRemover)"
+                >
+                    <i class="pi pi-trash" />
+                    <span>Arquivar</span>
+                </button>
+                <button
+                    v-else
+                    class="mp-actions-menu__item is-restore"
+                    @click="actionsRun(restaurarPaciente)"
+                >
+                    <i class="pi pi-undo" />
+                    <span>Restaurar</span>
+                </button>
+            </div>
+        </Popover>
     </section>
 </template>
 
@@ -1276,11 +1537,45 @@ function sessaoStatusColor(s) {
     font-size: 1rem;
     font-weight: 500;
 }
+.mp-page__title-icon {
+    color: var(--p-primary-color);
+    font-size: 1.05rem;
+}
 .mp-page__title > span {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
+
+/* Subheader explicativo — padrão do melissa-table-page-blueprint.md § 9.
+   Faixa abaixo do page__head com bg sutil + ícone primary + texto muted.
+   Diferencia esta página de outras com layout idêntico. */
+.mp-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;
+}
+.mp-subheader__icon {
+    color: var(--p-primary-color);
+    font-size: 0.92rem;
+    flex-shrink: 0;
+    margin-top: 1px;
+}
+.mp-subheader__text {
+    flex: 1;
+    min-width: 0;
+}
+.mp-subheader__text strong {
+    color: var(--m-text);
+    font-weight: 600;
+}
 .mp-page__actions {
     display: flex;
     align-items: center;
@@ -1366,20 +1661,30 @@ function sessaoStatusColor(s) {
     min-height: 0;
 }
 
-/* ═══ COL 1: Filtros ═════════════════════════════════════════ */
+/* ═══ COL 1: Filtros ═════════════════════════════════════════
+   Layout flex column com 2 zonas: __scroll (cards, scrollável) e
+   __footer (Limpar filtros, fixo no bottom). overflow: hidden no
+   container externo evita que o scroll vaze pra fora. */
 .mp-side {
     width: 240px;
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
-    gap: 12px;
     border-right: 1px solid var(--m-border);
     background: var(--m-bg-soft);
-    padding: 14px;
-    overflow-y: auto;
+    overflow: hidden;
 }
-.mp-side::-webkit-scrollbar { width: 5px; }
-.mp-side::-webkit-scrollbar-thumb {
+.mp-side__scroll {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 14px;
+}
+.mp-side__scroll::-webkit-scrollbar { width: 5px; }
+.mp-side__scroll::-webkit-scrollbar-thumb {
     background: var(--m-border-strong);
     border-radius: 3px;
 }
@@ -1403,7 +1708,8 @@ function sessaoStatusColor(s) {
     gap: 4px;
 }
 .mp-side__clear,
-.mp-side__add {
+.mp-side__add,
+.mp-side__cog {
     width: 18px; height: 18px;
     display: grid; place-items: center;
     background: transparent;
@@ -1414,15 +1720,29 @@ function sessaoStatusColor(s) {
     font-family: inherit;
     transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
 }
+/* Clear (X) — vermelho pra indicar ação destrutiva (limpar filtro). */
+.mp-side__clear {
+    color: rgb(220, 38, 38);
+    border-color: color-mix(in srgb, rgb(220, 38, 38) 30%, var(--m-border));
+}
 .mp-side__clear:hover {
-    background: var(--m-bg-soft-hover);
-    color: var(--m-text);
+    background: rgba(220, 38, 38, 0.10);
+    border-color: rgba(220, 38, 38, 0.55);
+    color: rgb(220, 38, 38);
 }
 .mp-side__add:hover {
     background: var(--m-accent-soft);
     border-color: color-mix(in srgb, var(--m-accent) 50%, var(--m-border));
     color: var(--m-accent);
 }
+/* Cog — sem borda (ghost icon), hover primary-tinted. */
+.mp-side__cog {
+    border-color: transparent;
+}
+.mp-side__cog:hover {
+    background: color-mix(in srgb, var(--p-primary-color) 10%, transparent);
+    color: var(--p-primary-color);
+}
 .mp-side__divider {
     height: 1px;
     background: var(--m-border);
@@ -1437,18 +1757,76 @@ function sessaoStatusColor(s) {
     font-size: 0.74rem;
     font-style: italic;
 }
+
+/* Botão "+ Grupo" / "+ Tag" abaixo da lista — borda tracejada, vai pra
+   primary no hover. Move o "Adicionar" pra área dedicada (não compete
+   com o título no header como o antigo .mp-side__add fazia). */
+.mp-side__add-btn {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    padding: 8px 10px;
+    background: transparent;
+    border: 1.5px dashed var(--m-border-strong);
+    color: var(--m-text-muted);
+    border-radius: 8px;
+    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-side__add-btn:hover {
+    background: color-mix(in srgb, var(--p-primary-color) 6%, transparent);
+    border-color: var(--p-primary-color);
+    color: var(--p-primary-color);
+}
+.mp-side__add-btn > i { font-size: 0.7rem; }
+/* Footer fixo no bottom da sidebar (fora do scroll dos cards).
+   Bg matching o da sidebar pra "ler" como continuação natural;
+   border-top marca a separação com a área scrollável acima. */
 .mp-side__footer {
-    margin-top: auto;
+    flex-shrink: 0;
     padding: 12px;
+    background: var(--m-bg-soft);
     border-top: 1px solid var(--m-border);
 }
 
+/* Transition do footer "Limpar filtros" — fade + collapse vertical
+   pra entrada/saída suave quando o user ativa/zera o último filtro. */
+.mp-clear-enter-active,
+.mp-clear-leave-active {
+    transition: opacity 220ms ease, transform 220ms ease, max-height 240ms ease;
+    overflow: hidden;
+}
+.mp-clear-enter-from,
+.mp-clear-leave-to {
+    opacity: 0;
+    transform: translateY(6px);
+    max-height: 0;
+}
+.mp-clear-enter-to,
+.mp-clear-leave-from {
+    opacity: 1;
+    transform: translateY(0);
+    max-height: 80px;
+}
+
 .mp-status-list {
     display: flex;
     flex-direction: column;
     gap: 2px;
     padding: 0;
 }
+/* Status pills — coloridos por status (padrão do blueprint § 7).
+   Cores Tailwind 600 (fortes pra ler em ambos os modos). 3 níveis:
+   default tint 5% + hover 10% + active 16% + ring 35%.
+   - Todos      = neutral (sem cor — abrange tudo)
+   - Ativos     = 🟢 verde   (em tratamento)
+   - Inativos   = 🟡 amber   (pausa temporária, atenção)
+   - Arquivados = 🔴 vermelho (fora do ativo, finalizado) */
 .mp-status-pill {
     display: flex;
     align-items: center;
@@ -1461,14 +1839,65 @@ function sessaoStatusColor(s) {
     cursor: pointer;
     font-size: 0.82rem;
     font-family: inherit;
-    transition: background-color 140ms ease, border-color 140ms ease;
+    transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
 }
-.mp-status-pill:hover { background: var(--m-bg-soft-hover); }
-.mp-status-pill.is-active {
+.mp-status-pill > i { font-size: 0.78rem; width: 14px; text-align: center; }
+
+/* Todos — neutral (sem cor) */
+.mp-status-pill.is-todos:hover { background: var(--m-bg-soft-hover); }
+.mp-status-pill.is-todos.is-active {
     background: var(--m-accent-soft);
     border-color: var(--m-accent-strong);
-    color: var(--m-text);
 }
+
+/* Ativos — verde */
+.mp-status-pill.is-ativos {
+    background: rgba(22, 163, 74, 0.05);
+    border-color: rgba(22, 163, 74, 0.18);
+}
+.mp-status-pill.is-ativos > i { color: rgb(22, 163, 74); }
+.mp-status-pill.is-ativos:hover {
+    background: rgba(22, 163, 74, 0.10);
+    border-color: rgba(22, 163, 74, 0.30);
+}
+.mp-status-pill.is-ativos.is-active {
+    background: rgba(22, 163, 74, 0.16);
+    border-color: rgba(22, 163, 74, 0.55);
+    box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.35);
+}
+
+/* Inativos — amber (warn, paciente pausado) */
+.mp-status-pill.is-inativos {
+    background: rgba(217, 119, 6, 0.05);
+    border-color: rgba(217, 119, 6, 0.18);
+}
+.mp-status-pill.is-inativos > i { color: rgb(217, 119, 6); }
+.mp-status-pill.is-inativos:hover {
+    background: rgba(217, 119, 6, 0.10);
+    border-color: rgba(217, 119, 6, 0.30);
+}
+.mp-status-pill.is-inativos.is-active {
+    background: rgba(217, 119, 6, 0.16);
+    border-color: rgba(217, 119, 6, 0.55);
+    box-shadow: 0 0 0 1px rgba(217, 119, 6, 0.35);
+}
+
+/* Arquivados — vermelho (fora do ativo) */
+.mp-status-pill.is-arquivados {
+    background: rgba(220, 38, 38, 0.05);
+    border-color: rgba(220, 38, 38, 0.18);
+}
+.mp-status-pill.is-arquivados > i { color: rgb(220, 38, 38); }
+.mp-status-pill.is-arquivados:hover {
+    background: rgba(220, 38, 38, 0.10);
+    border-color: rgba(220, 38, 38, 0.30);
+}
+.mp-status-pill.is-arquivados.is-active {
+    background: rgba(220, 38, 38, 0.16);
+    border-color: rgba(220, 38, 38, 0.55);
+    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.35);
+}
+
 .mp-status-pill__count {
     font-size: 0.7rem;
     color: var(--m-text-muted);
@@ -1544,6 +1973,11 @@ function sessaoStatusColor(s) {
     display: flex;
     flex-direction: column;
     min-width: 0;
+    /* min-height: 0 é CRÍTICO pra que .mp-list__body (flex:1 + overflow-y:auto)
+       constrinja altura e scrolle de verdade — sem isso, o body cresce
+       indefinidamente e o scroll nunca dispara, especialmente em mobile
+       onde .mp-body vira flex-direction:column. */
+    min-height: 0;
 }
 .mp-list__toolbar {
     display: flex;
@@ -1824,6 +2258,45 @@ function sessaoStatusColor(s) {
     text-overflow: ellipsis;
     white-space: nowrap;
 }
+
+/* Email — coluna própria do card. Width fixa pra alinhar visualmente
+   entre rows. Trunca com ellipsis quando longo. Em mobile, esconde
+   (info migra pro detail panel). */
+.mp-card__email {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    width: 220px;
+    min-width: 0;
+    flex-shrink: 1;
+    font-size: 0.78rem;
+    color: var(--m-text-muted);
+}
+.mp-card__email > i { font-size: 0.7rem; flex-shrink: 0; }
+.mp-card__email-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+}
+
+/* Telefone — coluna própria, width menor (formato fixo). */
+.mp-card__phone {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    width: 140px;
+    flex-shrink: 0;
+    font-size: 0.78rem;
+    color: var(--m-text-muted);
+}
+.mp-card__phone > i { font-size: 0.7rem; flex-shrink: 0; }
+.mp-card__phone-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+}
 .mp-card__tags {
     display: flex;
     gap: 4px;
@@ -1911,11 +2384,238 @@ function sessaoStatusColor(s) {
     border-color: rgba(239, 68, 68, 0.4);
     color: rgb(248, 113, 113);
 }
+/* Restaurar — primary-tinted (ação positiva, oposto de danger). */
+.mp-card__action--restore {
+    color: var(--p-primary-color);
+}
+.mp-card__action--restore:hover {
+    background: color-mix(in srgb, var(--p-primary-color) 14%, transparent);
+    border-color: color-mix(in srgb, var(--p-primary-color) 40%, var(--m-border));
+    color: var(--p-primary-color);
+}
+/* Mobile-only action button — pencil único que abre o popover.
+   Sempre visível, com bg-medium pra ler bem com o sticky-right.
+   Esconde por default; mostra só em mobile via media query abaixo. */
+.mp-card__action--mobile {
+    display: none;
+    background: var(--p-content-background);
+    border-color: color-mix(in srgb, var(--p-primary-color) 30%, var(--m-border));
+    color: var(--p-primary-color);
+}
+.mp-card__action--mobile:hover {
+    background: color-mix(in srgb, var(--p-primary-color) 12%, var(--p-content-background));
+    border-color: var(--p-primary-color);
+    color: var(--p-primary-color);
+}
+
+/* View toggle (lista/grade) — mesmo segmented control do MCR/MAR. */
+.mp-view-toggle {
+    flex-shrink: 0;
+    display: inline-flex;
+    background: var(--m-bg-medium);
+    border: 1px solid var(--m-border);
+    border-radius: 10px;
+    padding: 2px;
+    gap: 2px;
+}
+.mp-view-toggle__btn {
+    width: 32px;
+    height: 32px;
+    display: grid;
+    place-items: center;
+    background: transparent;
+    border: none;
+    color: var(--m-text-muted);
+    border-radius: 8px;
+    cursor: pointer;
+    font-family: inherit;
+    transition: background-color 140ms ease, color 140ms ease;
+}
+.mp-view-toggle__btn:hover {
+    background: var(--m-bg-soft-hover);
+    color: var(--m-text);
+}
+.mp-view-toggle__btn.is-active {
+    background: var(--m-accent-soft);
+    color: var(--m-accent);
+}
+.mp-view-toggle__btn > i { font-size: 0.85rem; }
+
+/* ═══ Grid view — cards num grid responsivo ═════════════════ */
+.mp-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    gap: 10px;
+    padding: 4px 0;
+}
+.mp-grid__card {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 12px;
+    background: var(--m-bg-soft);
+    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;
+}
+.mp-grid__card:hover {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+    transform: translateY(-1px);
+}
+.mp-grid__card:focus-visible {
+    outline: 2px solid var(--p-primary-color);
+    outline-offset: 2px;
+}
+.mp-grid__card.is-active {
+    background: var(--m-accent-soft);
+    border-color: var(--m-accent-strong);
+}
+.mp-grid__card.is-novo {
+    background: color-mix(in srgb, var(--p-primary-color) 8%, var(--m-bg-soft));
+}
+.mp-grid__top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+}
+/* No grid card o pencil sempre visível (mesmo desktop), pra dar acesso
+   às ações sem precisar passar mouse — o card é mais compacto que o
+   da lista. */
+.mp-grid__card .mp-card__action--mobile {
+    display: grid;
+}
+.mp-grid__name-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+.mp-grid__name {
+    font-size: 0.92rem;
+    font-weight: 600;
+    color: var(--m-text);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+}
+.mp-grid__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-medium);
+    color: var(--m-text-muted);
+    border: 1px solid var(--m-border);
+    align-self: flex-start;
+}
+.mp-grid__meta {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-size: 0.74rem;
+    color: var(--m-text-muted);
+    min-width: 0;
+}
+.mp-grid__meta i { margin-right: 5px; font-size: 0.7rem; }
+.mp-grid__meta span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mp-grid__last {
+    margin-top: auto;
+    padding-top: 6px;
+    border-top: 1px solid var(--m-border);
+    font-size: 0.7rem;
+    color: var(--m-text-faint);
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+}
+.mp-grid__last i { font-size: 0.65rem; }
+
+/* ═══ Popover de ações (mobile) ════════════════════════════ */
+.mp-actions-popover :deep(.p-popover-content) {
+    padding: 6px;
+}
+.mp-actions-menu {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 200px;
+}
+.mp-actions-menu__item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 10px;
+    background: transparent;
+    border: 1px solid transparent;
+    color: var(--m-text);
+    border-radius: 8px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.85rem;
+    text-align: left;
+    transition: background-color 140ms ease, color 140ms ease;
+}
+.mp-actions-menu__item > i {
+    font-size: 0.85rem;
+    color: var(--m-text-muted);
+    width: 16px;
+    text-align: center;
+}
+.mp-actions-menu__item:hover {
+    background: var(--m-bg-soft-hover);
+}
+.mp-actions-menu__item:hover > i { color: var(--p-primary-color); }
+.mp-actions-menu__item.is-danger {
+    color: rgb(220, 38, 38);
+}
+.mp-actions-menu__item.is-danger > i { color: rgb(220, 38, 38); }
+.mp-actions-menu__item.is-danger:hover {
+    background: rgba(220, 38, 38, 0.10);
+}
+/* Restore — primary, semanticamente positivo. */
+.mp-actions-menu__item.is-restore {
+    color: var(--p-primary-color);
+}
+.mp-actions-menu__item.is-restore > i { color: var(--p-primary-color); }
+.mp-actions-menu__item.is-restore:hover {
+    background: color-mix(in srgb, var(--p-primary-color) 10%, transparent);
+}
+.mp-actions-menu__divider {
+    height: 1px;
+    background: var(--m-border);
+    margin: 4px 6px;
+}
+
 @media (max-width: 768px) {
     .mp-card__actions {
         opacity: 1;
         transform: none;
+        /* Sticky-right pra fixar visualmente a coluna de ação enquanto
+           o user scrolla horizontalmente o conteúdo do card. */
+        position: sticky;
+        right: 0;
+        background: var(--m-bg-medium);
+        padding-left: 6px;
     }
+    /* Em mobile, esconde os 5 botões inline e mostra só o pencil. */
+    .mp-card__action--desktop { display: none; }
+    .mp-card__action--mobile { display: grid; }
+    /* Esconde email e phone columns em mobile (muito apertado). Email
+       fica só no detail panel e no popover do paciente. */
+    .mp-card__email,
+    .mp-card__phone { display: none; }
 }
 
 /* ═══ COL 3: Quick view ══════════════════════════════════════ */
@@ -1943,6 +2643,12 @@ function sessaoStatusColor(s) {
     border-radius: 12px;
     padding: 12px;
 }
+/* Sombra sutil pros cards de ambas as colunas laterais (igual MCR/MAR).
+   Eleva visualmente os cards sobre os bgs das asides. */
+.mp-side .mp-w,
+.mp-quick .mp-w {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+}
 .mp-w__head {
     display: flex;
     align-items: center;
@@ -2223,7 +2929,10 @@ function sessaoStatusColor(s) {
     border-radius: 3px;
 }
 
-/* Asides perdem padding/scroll/borda próprios quando teleportados */
+/* Asides perdem padding/scroll/borda próprios quando teleportados.
+   .mp-side__scroll também perde scroll/padding (drawer já tem) e o
+   .mp-side__footer vira sticky no bottom do drawer pra manter o
+   "Limpar filtros" sempre acessível. */
 .mp-mobile-drawer__scroll .mp-side,
 .mp-mobile-drawer__scroll .mp-quick {
     width: 100%;
@@ -2235,6 +2944,22 @@ function sessaoStatusColor(s) {
     background: transparent;
     padding: 0;
 }
+.mp-mobile-drawer__scroll .mp-side__scroll {
+    flex: none;
+    min-height: 0;
+    overflow: visible;
+    padding: 0;
+}
+.mp-mobile-drawer__scroll .mp-side__footer {
+    position: sticky;
+    bottom: 0;
+    margin: 8px -12px -24px; /* compensa o padding do drawer pra ficar de borda a borda */
+    background: var(--m-bg-medium);
+    border-top: 1px solid var(--m-border);
+    backdrop-filter: blur(24px) saturate(160%);
+    -webkit-backdrop-filter: blur(24px) saturate(160%);
+    z-index: 5;
+}
 
 /* Reordena dentro do drawer: Visão geral (.mp-quick) vem PRIMEIRO,
    filtros (.mp-side) depois. Em desktop o template mantém a ordem
diff --git a/src/layout/melissa/composables/useMelissaPacientes.js b/src/layout/melissa/composables/useMelissaPacientes.js
index fb77025..344ef4e 100644
--- a/src/layout/melissa/composables/useMelissaPacientes.js
+++ b/src/layout/melissa/composables/useMelissaPacientes.js
@@ -17,6 +17,7 @@
 import { ref, onMounted } from 'vue';
 import { supabase } from '@/lib/supabase/client';
 import { useTenantStore } from '@/stores/tenantStore';
+import { useMelissaCacheStore, MELISSA_CACHE_TTL } from '@/stores/melissaCacheStore';
 
 // Mesma lógica da PatientsListPage.vue — DB pode ter valores variados
 function normalizeStatus(s) {
@@ -37,7 +38,9 @@ function normalizeStatus(s) {
  */
 export function useMelissaPacientes(opts = {}) {
     const onlyActive = opts.onlyActive !== false; // default true (compat)
+    const autoFetch  = opts.autoFetch !== false;  // default true (compat)
     const tenantStore = useTenantStore();
+    const cache = useMelissaCacheStore();
 
     const pacientes = ref([]);
     const loading = ref(false);
@@ -46,17 +49,51 @@ export function useMelissaPacientes(opts = {}) {
 
     async function ensureUid() {
         if (uid.value) return uid.value;
+        // Fast path: session do storage local (<10ms vs ~80ms do getUser)
+        const { data: ses } = await supabase.auth.getSession();
+        if (ses?.session?.user?.id) {
+            uid.value = ses.session.user.id;
+            return uid.value;
+        }
         const { data, error: err } = await supabase.auth.getUser();
         if (err) return null;
         uid.value = data?.user?.id || null;
         return uid.value;
     }
 
-    async function fetchPacientes() {
-        const userId = await ensureUid();
+    async function _doFetch(userId, tid, cacheKey) {
+        const { data, error: err } = await supabase
+            .from('patients')
+            .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 })
+            .limit(1000);
 
-        // Garante que o tenantStore foi hidratado (preview misc não passa por
-        // guard de auth, então o store pode estar vazio mesmo com user logado)
+        if (err) throw err;
+
+        const todos = (data || []).map((r) => ({
+            id: r.id,
+            nome: r.nome_completo || '',
+            email: r.email_principal || '',
+            telefone: r.telefone || '',
+            avatar_url: r.avatar_url || null,
+            status: normalizeStatus(r.status),
+            last_attended_at: r.last_attended_at || null,
+            created_at: r.created_at || null,
+            data_nascimento: r.data_nascimento || null
+        }));
+
+        const finalList = onlyActive ? todos.filter((p) => p.status === 'Ativo') : todos;
+        cache.set('pacientesTimeline', finalList, cacheKey);
+        pacientes.value = finalList;
+        return finalList;
+    }
+
+    // useCache=true (boot/auto): hidrata do cache se válido + revalida em background.
+    // useCache=false (refetch após mutation): força query nova, descarta cache.
+    async function _fetch({ useCache = true } = {}) {
+        const userId = await ensureUid();
         if (typeof tenantStore.ensureLoaded === 'function') {
             await tenantStore.ensureLoaded();
         }
@@ -67,35 +104,28 @@ export function useMelissaPacientes(opts = {}) {
             return;
         }
 
+        const cacheKey = `${userId}:${tid}:${onlyActive ? 'a' : 'all'}`;
+
+        if (useCache) {
+            const cached = cache.get('pacientesTimeline', cacheKey, MELISSA_CACHE_TTL.pacientesTimeline);
+            if (cached) {
+                pacientes.value = cached;
+                _doFetch(userId, tid, cacheKey).catch((e) => {
+                    // eslint-disable-next-line no-console
+                    console.warn('[useMelissaPacientes] revalidate', e);
+                });
+                return;
+            }
+        } else {
+            // Force: invalida o slot pra outras instâncias (se houver) também
+            // pegarem fresh na próxima leitura.
+            cache.invalidate('pacientesTimeline');
+        }
+
         loading.value = true;
         error.value = null;
-
         try {
-            // Não filtra status no SQL — DB tem valores inconsistentes
-            // ('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, data_nascimento')
-                .eq('owner_id', userId)
-                .eq('tenant_id', tid)
-                .order('nome_completo', { ascending: true })
-                .limit(1000);
-
-            if (err) throw err;
-
-            const todos = (data || []).map((r) => ({
-                id: r.id,
-                nome: r.nome_completo || '',
-                email: r.email_principal || '',
-                telefone: r.telefone || '',
-                avatar_url: r.avatar_url || null,
-                status: normalizeStatus(r.status),
-                last_attended_at: r.last_attended_at || null,
-                created_at: r.created_at || null,
-                data_nascimento: r.data_nascimento || null
-            }));
-
-            pacientes.value = onlyActive ? todos.filter((p) => p.status === 'Ativo') : todos;
+            await _doFetch(userId, tid, cacheKey);
         } catch (e) {
             error.value = e?.message || 'Erro ao carregar pacientes';
             pacientes.value = [];
@@ -106,12 +136,15 @@ export function useMelissaPacientes(opts = {}) {
         }
     }
 
-    onMounted(fetchPacientes);
+    if (autoFetch) onMounted(() => _fetch({ useCache: true }));
 
     return {
         pacientes,
         loading,
         error,
-        refetch: fetchPacientes
+        // refetch força query nova (uso em handlers pós-mutation: criar/editar/deletar).
+        refetch: () => _fetch({ useCache: false }),
+        // fetchCached usa stale-while-revalidate (uso em defer/idle callback).
+        fetchCached: () => _fetch({ useCache: true })
     };
 }
diff --git a/src/layout/melissa/composables/useMelissaPacientesAside.js b/src/layout/melissa/composables/useMelissaPacientesAside.js
index 8fff8bc..e34e040 100644
--- a/src/layout/melissa/composables/useMelissaPacientesAside.js
+++ b/src/layout/melissa/composables/useMelissaPacientesAside.js
@@ -66,6 +66,14 @@ export function useMelissaPacientesAside(opts) {
 
     async function _ensureUid() {
         if (_uid.value) return _uid.value;
+        // Fast path: session já hidratada no storage (<10ms).
+        const { data: ses } = await supabase.auth.getSession();
+        const uid = ses?.session?.user?.id;
+        if (uid) {
+            _uid.value = uid;
+            return uid;
+        }
+        // Fallback: round-trip pro auth server (cold start).
         const { data, error: err } = await supabase.auth.getUser();
         if (err) return null;
         _uid.value = data?.user?.id || null;