From 98f7252dcd728b776b4a1c3ffb85e3e4e54e1a18 Mon Sep 17 00:00:00 2001
From: Leonardo <lmnohama@gmail.com>
Date: Wed, 6 May 2026 09:14:35 -0300
Subject: [PATCH] Melissa: 6 Pages aplicando blueprint + dialogs unificados +
 Conversa estilo WhatsApp

Sprint F (05-06). Blueprint tabular aplicado nas 6 paginas restantes;
dialogs harmonizados (FloatLabel + IconField + variant=filled + section
dividers, espelhando PatientsCadastroPage Identidade); ConversationDrawer
repaginado pra visual estilo WhatsApp.

Pages refatoradas (cada uma com subheader, sidebar __scroll + __footer
fixo "Limpar filtros", Xs inline pra zerar filtro individual, mobile
drawer com sticky footer):

- MelissaCompromissos: blueprint mantendo row design original (color
  stripe + name + badges + descricao + meta inline). Filtros Status
  (Ativos/Inativos) + Tipo (Nativos/Meus). Coluna Acoes frozen 140px
  com toggle+pencil+trash.

- MelissaGrupos / MelissaTags: pattern completo + dialog "Pacientes
  do grupo/tag" com lista vinculada via patient_group_patient /
  patient_patient_tag. Avatar primary nos pacientes, header colorido
  com cor da entidade, X de fechar igual .mc-close. Dialog de
  criar/editar com FloatLabel + section dividers.

- MelissaMedicos: blueprint + dialog "Pacientes encaminhados" usando
  cor primary do tema (medicos nao tem cor propria); dialog de
  criar/editar com 4 secoes (Identificacao/Contato/Localizacao/Obs)
  espelhando PatientsCadastroPage. Service ja tinha
  fetchPatientsByMedicoNome (ILIKE em encaminhado_por).

- MelissaConversas: subheader, sidebar com bg-soft + border-right e
  cards com sombra (mw-w--side), Limpar filtros global no footer fixo
  (fix bug: filters era ref({...}) e eu lia filters.search direto, agora
  usa .value), alerta de unlinked movido pro topo, kanban mobile com
  min-height nas colunas pra mostrar mensagens.

- MelissaRecorrencias: subheader, button list de status (Ativas verde/
  Encerradas vermelho/Todas) substitui SelectButton, busca por nome do
  paciente, footer Limpar filtros, X inline no filtro Status.

ConversationDrawer redesign (WhatsApp-style):
- Header com avatar circular primary + iniciais + numero formatado
- Container de mensagens com bg "papel de parede" (color-mix com bege
  esverdeado WA + radial-gradient pattern)
- Bolhas com cantos certos (top-left ou top-right zerado simulando
  tail), sombra sutil, cores autenticas (#d9fdd3 light/#005c4b dark
  outbound; #fff/#202c33 inbound), detecao dark via :global
- Time HH:MM + status overlay no canto inferior direito DENTRO do
  balao; checks azuis quando lida (#53bdeb)
- Compose pill rounded-full + botao Send circular verde #00a884
- Removido fmtDateTime obsoleto (substituido por fmtTimeOnly)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../conversations/ConversationDrawer.vue      |  333 ++-
 src/layout/melissa/MelissaCompromissos.vue    | 1598 +++++++++---
 src/layout/melissa/MelissaConversas.vue       |  481 +++-
 src/layout/melissa/MelissaGrupos.vue          | 2068 ++++++++++++++--
 src/layout/melissa/MelissaMedicos.vue         | 2202 +++++++++++++++--
 src/layout/melissa/MelissaRecorrencias.vue    |  546 +++-
 src/layout/melissa/MelissaTags.vue            | 2048 +++++++++++++--
 7 files changed, 7844 insertions(+), 1432 deletions(-)

diff --git a/src/components/conversations/ConversationDrawer.vue b/src/components/conversations/ConversationDrawer.vue
index d8a0389..472d653 100644
--- a/src/components/conversations/ConversationDrawer.vue
+++ b/src/components/conversations/ConversationDrawer.vue
@@ -336,12 +336,19 @@ const KANBAN_COLUMNS = [
 ];
 
 // ── Formatters ─────────────────────────────────────────────
-function fmtDateTime(iso) {
+// HH:MM curto pra exibir dentro da bolha (estilo WhatsApp).
+function fmtTimeOnly(iso) {
     if (!iso) return '';
-    return new Date(iso).toLocaleString('pt-BR', {
-        day: '2-digit', month: '2-digit', year: 'numeric',
-        hour: '2-digit', minute: '2-digit'
-    });
+    return new Date(iso).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });
+}
+
+// Iniciais pro avatar circular do header.
+function iniciaisChat(name) {
+    if (!name) return '?';
+    const parts = String(name).trim().split(/\s+/).filter(Boolean);
+    if (!parts.length) return '?';
+    if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
 }
 
 function channelIcon(ch) {
@@ -699,11 +706,16 @@ function insertEmoji(emoji) {
     <ConfirmDialog group="conversation-drawer" />
     <Drawer v-model:visible="isOpen" position="right" class="!w-full md:!w-[520px]">
         <template #header>
-            <div v-if="store.thread" class="flex items-center gap-2">
-                <i :class="['pi', channelIcon(store.thread.channel)]" />
-                <div class="flex flex-col">
-                    <span class="font-semibold">{{ contactLabel() }}</span>
-                    <span v-if="store.thread.contact_number" class="text-xs text-[var(--text-color-secondary)]">{{ store.thread.contact_number }}</span>
+            <div v-if="store.thread" class="flex items-center gap-3 min-w-0">
+                <span class="cd-avatar">
+                    {{ iniciaisChat(contactLabel()) }}
+                </span>
+                <div class="flex flex-col min-w-0">
+                    <span class="font-semibold truncate text-[0.95rem]">{{ contactLabel() }}</span>
+                    <span v-if="store.thread.contact_number" class="text-[0.72rem] text-[var(--text-color-secondary)] flex items-center gap-1.5">
+                        <i :class="['pi', channelIcon(store.thread.channel), 'text-[0.65rem]']" />
+                        <span class="font-mono">{{ formatPhoneShort(store.thread.contact_number) }}</span>
+                    </span>
                 </div>
             </div>
         </template>
@@ -1030,8 +1042,8 @@ function insertEmoji(emoji) {
                 </div>
             </div>
 
-            <!-- Mensagens -->
-            <div ref="messagesContainerRef" class="flex-1 overflow-y-auto flex flex-col gap-2 p-1">
+            <!-- Mensagens — container com bg WhatsApp-like -->
+            <div ref="messagesContainerRef" class="cd-msgs flex-1 overflow-y-auto flex flex-col gap-1.5 p-3">
                 <div v-if="store.loading" class="text-xs text-[var(--text-color-secondary)] text-center py-6">
                     <i class="pi pi-spin pi-spinner mr-2" />Carregando mensagens...
                 </div>
@@ -1042,12 +1054,12 @@ function insertEmoji(emoji) {
                 <div
                     v-for="m in store.messages"
                     :key="m.id"
-                    class="flex flex-col gap-0.5"
-                    :class="m.direction === 'inbound' ? 'items-start' : 'items-end'"
+                    class="cd-bubble-wrap"
+                    :class="m.direction === 'inbound' ? 'cd-bubble-wrap--in' : 'cd-bubble-wrap--out'"
                 >
                     <div
-                        class="max-w-[85%] px-3 py-2 rounded-lg text-sm whitespace-pre-wrap break-words"
-                        :class="m.direction === 'inbound' ? 'bg-[var(--surface-ground)] rounded-tl-none' : 'bg-emerald-500/10 text-emerald-900 dark:text-emerald-100 rounded-tr-none'"
+                        class="cd-bubble"
+                        :class="m.direction === 'inbound' ? 'cd-bubble--in' : 'cd-bubble--out'"
                     >
                         <template v-if="m.media_url">
                             <!-- Loading enquanto resolve signed URL -->
@@ -1061,7 +1073,7 @@ function insertEmoji(emoji) {
                                     :preview="true"
                                     alt="imagem"
                                     imageClass="max-w-full rounded-md cursor-zoom-in"
-                                    class="mb-1 block"
+                                    class="mb-1 block cd-bubble__media"
                                 />
                                 <audio
                                     v-else-if="isAudio(m.media_mime)"
@@ -1074,7 +1086,7 @@ function insertEmoji(emoji) {
                                     v-else-if="isVideo(m.media_mime)"
                                     :src="mediaUrls[m.id]"
                                     controls
-                                    class="max-w-full rounded-md mb-1"
+                                    class="max-w-full rounded-md mb-1 cd-bubble__media"
                                 />
                                 <a
                                     v-else
@@ -1088,18 +1100,19 @@ function insertEmoji(emoji) {
                                 </a>
                             </template>
                         </template>
-                        <div v-if="m.body">{{ m.body }}</div>
-                    </div>
-                    <div class="text-[0.65rem] text-[var(--text-color-secondary)] opacity-75 px-1 flex items-center gap-1">
-                        <span>{{ fmtDateTime(m.created_at) }}</span>
-                        <span v-if="m.direction === 'outbound'" class="flex items-center">
-                            <i v-if="m.delivery_status === 'read'" class="pi pi-check-double text-sky-500" v-tooltip.top="'Lida'" />
-                            <i v-else-if="m.delivery_status === 'delivered'" class="pi pi-check-double" v-tooltip.top="'Entregue'" />
-                            <i v-else-if="m.delivery_status === 'sent'" class="pi pi-check" v-tooltip.top="'Enviada'" />
-                            <i v-else-if="m.delivery_status === 'failed'" class="pi pi-exclamation-circle text-red-500" v-tooltip.top="'Falhou'" />
-                        </span>
-                        <span v-if="m.direction === 'inbound' && !m.patient_id" class="italic">· número não vinculado</span>
+                        <div v-if="m.body" class="cd-bubble__body">{{ m.body }}</div>
+                        <!-- Time + status overlay no canto inferior direito (estilo WhatsApp) -->
+                        <div class="cd-bubble__meta">
+                            <span>{{ fmtTimeOnly(m.created_at) }}</span>
+                            <span v-if="m.direction === 'outbound'" class="cd-bubble__status">
+                                <i v-if="m.delivery_status === 'read'" class="pi pi-check-double cd-bubble__status--read" v-tooltip.top="'Lida'" />
+                                <i v-else-if="m.delivery_status === 'delivered'" class="pi pi-check-double" v-tooltip.top="'Entregue'" />
+                                <i v-else-if="m.delivery_status === 'sent'" class="pi pi-check" v-tooltip.top="'Enviada'" />
+                                <i v-else-if="m.delivery_status === 'failed'" class="pi pi-exclamation-circle text-red-500" v-tooltip.top="'Falhou'" />
+                            </span>
+                        </div>
                     </div>
+                    <span v-if="m.direction === 'inbound' && !m.patient_id" class="cd-bubble__unlinked">não vinculado</span>
                 </div>
             </div>
 
@@ -1142,34 +1155,48 @@ function insertEmoji(emoji) {
                 </button>
             </div>
 
-            <!-- Compose -->
-            <div v-if="store.thread.channel === 'whatsapp' && store.thread.contact_number" class="border-t border-[var(--surface-border)] pt-2 flex flex-col gap-2">
-                <div class="flex items-end gap-2">
+            <!-- Compose — barra estilo WhatsApp (input pill + send circular) -->
+            <div v-if="store.thread.channel === 'whatsapp' && store.thread.contact_number" class="cd-compose">
+                <div class="cd-compose__row">
+                    <button
+                        class="cd-compose__icon-btn"
+                        v-tooltip.top="'Emoji'"
+                        @click="toggleEmojiPopover"
+                    >
+                        <i class="pi pi-face-smile" />
+                    </button>
+                    <button
+                        class="cd-compose__icon-btn"
+                        v-tooltip.top="'Templates'"
+                        @click="openTemplatesPopover"
+                    >
+                        <i class="pi pi-bookmark" />
+                    </button>
                     <Textarea
                         ref="composeTextareaRef"
                         v-model="composeText"
                         autoResize
                         rows="1"
-                        placeholder="Digite sua mensagem... (Enter envia, Shift+Enter quebra linha)"
-                        class="flex-1 !text-sm !resize-none"
+                        placeholder="Digite uma mensagem"
+                        class="cd-compose__input flex-1"
                         :disabled="store.sending"
                         :maxlength="4000"
                         @keydown="onComposeKeydown"
                     />
-                    <Button
-                        icon="pi pi-send"
-                        severity="success"
-                        class="!w-10 !h-10 shrink-0"
-                        :loading="store.sending"
+                    <button
+                        class="cd-compose__send"
+                        :class="{ 'is-disabled': !composeText.trim() || store.sending }"
                         :disabled="!composeText.trim() || store.sending"
                         v-tooltip.top="'Enviar (Enter)'"
                         @click="sendMessage"
-                    />
+                    >
+                        <i v-if="store.sending" class="pi pi-spin pi-spinner" />
+                        <i v-else class="pi pi-send" />
+                    </button>
                 </div>
-                <div class="flex items-center gap-1 text-[var(--text-color-secondary)]">
-                    <Button icon="pi pi-bookmark" text rounded size="small" class="!w-8 !h-8" v-tooltip.top="'Templates'" @click="openTemplatesPopover" />
-                    <Button icon="pi pi-face-smile" text rounded size="small" class="!w-8 !h-8" v-tooltip.top="'Emoji'" @click="toggleEmojiPopover" />
-                    <span class="ml-auto text-[0.65rem] opacity-60">{{ composeText.length }}/4000</span>
+                <div class="cd-compose__hint">
+                    <span>Enter envia · Shift+Enter quebra linha</span>
+                    <span class="ml-auto">{{ composeText.length }}/4000</span>
                 </div>
             </div>
             <div v-else class="text-[0.7rem] text-[var(--text-color-secondary)] italic text-center py-2 border-t border-[var(--surface-border)]">
@@ -1214,3 +1241,221 @@ function insertEmoji(emoji) {
         </Popover>
     </Drawer>
 </template>
+
+<style scoped>
+/* ─── Avatar do header (iniciais sobre primary) ─── */
+.cd-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: grid;
+    place-items: center;
+    background: var(--p-primary-color);
+    color: var(--p-primary-contrast-color, white);
+    font-weight: 700;
+    font-size: 0.85rem;
+    flex-shrink: 0;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+}
+
+/* ─── Container de mensagens (bg estilo "papel de parede" WhatsApp) ─── */
+/* Light: bege esverdeado clássico do WA. Dark: cinza profundo tipo
+   wallpaper de modo escuro. Adapta via CSS variable `--p-content-background`
+   pra harmonizar com o tema do app. */
+.cd-msgs {
+    background-color: color-mix(in srgb, var(--p-content-background) 85%, #efeae2);
+    background-image:
+        radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--p-text-color) 4%, transparent) 1px, transparent 0);
+    background-size: 18px 18px;
+    border-radius: 8px;
+    margin: 0 -2px;
+}
+
+/* ─── Bolha (wrapper + content + meta) ─── */
+.cd-bubble-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    max-width: 80%;
+}
+.cd-bubble-wrap--in { align-self: flex-start; }
+.cd-bubble-wrap--out { align-self: flex-end; align-items: flex-end; }
+
+.cd-bubble {
+    position: relative;
+    padding: 6px 10px 18px 10px;
+    border-radius: 8px;
+    font-size: 0.88rem;
+    line-height: 1.42;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    white-space: pre-wrap;
+    box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
+    min-width: 80px;
+}
+/* Inbound: surface-card adapta light/dark; canto top-left "achatado" vira o tail */
+.cd-bubble--in {
+    background: var(--p-surface-0, #ffffff);
+    color: var(--p-text-color);
+    border-top-left-radius: 0;
+}
+:global(.p-dark) .cd-bubble--in,
+:global(html.dark) .cd-bubble--in,
+:global([data-theme="dark"]) .cd-bubble--in,
+.cd-bubble--in:where(.p-dark *, html.dark *, [data-theme="dark"] *) {
+    background: #202c33;
+    color: rgb(233, 237, 239);
+}
+
+/* Outbound: verde claro WA (light) / verde escuro WA (dark) */
+.cd-bubble--out {
+    background: #d9fdd3;
+    color: rgb(17, 27, 33);
+    border-top-right-radius: 0;
+}
+:global(.p-dark) .cd-bubble--out,
+:global(html.dark) .cd-bubble--out,
+:global([data-theme="dark"]) .cd-bubble--out,
+.cd-bubble--out:where(.p-dark *, html.dark *, [data-theme="dark"] *) {
+    background: #005c4b;
+    color: rgb(233, 237, 239);
+}
+
+.cd-bubble__body {
+    margin-bottom: 2px;
+}
+.cd-bubble__media {
+    border-radius: 6px;
+    margin: -2px -4px 6px -4px;
+    max-width: calc(100% + 8px);
+}
+
+/* Meta (HH:MM + status checks) overlay no canto inferior direito */
+.cd-bubble__meta {
+    position: absolute;
+    right: 8px;
+    bottom: 4px;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 0.62rem;
+    font-weight: 500;
+    line-height: 1;
+    color: rgba(0, 0, 0, 0.45);
+    pointer-events: auto;
+    user-select: none;
+}
+.cd-bubble--in .cd-bubble__meta { color: rgba(0, 0, 0, 0.45); }
+.cd-bubble--out .cd-bubble__meta { color: rgba(0, 0, 0, 0.55); }
+:global(.p-dark) .cd-bubble--in .cd-bubble__meta,
+:global(html.dark) .cd-bubble--in .cd-bubble__meta,
+:global([data-theme="dark"]) .cd-bubble--in .cd-bubble__meta,
+.cd-bubble--in:where(.p-dark *, html.dark *, [data-theme="dark"] *) .cd-bubble__meta {
+    color: rgba(255, 255, 255, 0.55);
+}
+:global(.p-dark) .cd-bubble--out .cd-bubble__meta,
+:global(html.dark) .cd-bubble--out .cd-bubble__meta,
+:global([data-theme="dark"]) .cd-bubble--out .cd-bubble__meta,
+.cd-bubble--out:where(.p-dark *, html.dark *, [data-theme="dark"] *) .cd-bubble__meta {
+    color: rgba(233, 237, 239, 0.6);
+}
+
+.cd-bubble__status > i {
+    font-size: 0.78rem;
+}
+.cd-bubble__status--read {
+    color: rgb(83, 189, 235) !important; /* azul WA quando lido */
+}
+
+.cd-bubble__unlinked {
+    font-size: 0.62rem;
+    color: var(--p-text-muted-color, var(--text-color-secondary));
+    font-style: italic;
+    padding-left: 2px;
+}
+
+/* ─── Compose bar estilo WhatsApp ─── */
+.cd-compose {
+    border-top: 1px solid var(--p-content-border-color, var(--surface-border));
+    padding: 8px 4px 6px;
+    background: color-mix(in srgb, var(--p-content-background) 80%, transparent);
+}
+.cd-compose__row {
+    display: flex;
+    align-items: flex-end;
+    gap: 6px;
+}
+.cd-compose__icon-btn {
+    width: 36px;
+    height: 36px;
+    display: grid;
+    place-items: center;
+    background: transparent;
+    border: none;
+    color: var(--p-text-muted-color);
+    border-radius: 50%;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: background-color 140ms ease, color 140ms ease;
+}
+.cd-compose__icon-btn:hover {
+    background: var(--p-content-hover-background, color-mix(in srgb, var(--p-text-color) 8%, transparent));
+    color: var(--p-text-color);
+}
+.cd-compose__icon-btn > i { font-size: 1rem; }
+
+.cd-compose__input :deep(textarea),
+.cd-compose__input.p-textarea {
+    border-radius: 22px !important;
+    background: var(--p-surface-0) !important;
+    border: 1px solid var(--p-content-border-color) !important;
+    padding: 9px 16px !important;
+    font-size: 0.88rem !important;
+    line-height: 1.4 !important;
+    resize: none !important;
+    min-height: 40px;
+    max-height: 120px;
+    transition: border-color 140ms ease, box-shadow 140ms ease;
+}
+.cd-compose__input :deep(textarea:focus) {
+    border-color: var(--p-primary-color) !important;
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--p-primary-color) 22%, transparent) !important;
+}
+
+.cd-compose__send {
+    width: 40px;
+    height: 40px;
+    display: grid;
+    place-items: center;
+    background: #00a884; /* verde send do WA */
+    border: none;
+    color: white;
+    border-radius: 50%;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: background-color 140ms ease, transform 140ms ease, opacity 140ms ease;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+}
+.cd-compose__send:hover:not(.is-disabled) {
+    background: #06cf9c;
+    transform: translateY(-1px);
+}
+.cd-compose__send.is-disabled,
+.cd-compose__send:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    background: var(--p-content-hover-background);
+    color: var(--p-text-muted-color);
+}
+.cd-compose__send > i { font-size: 1rem; }
+
+.cd-compose__hint {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 12px 0;
+    font-size: 0.62rem;
+    color: var(--p-text-muted-color);
+    opacity: 0.7;
+}
+</style>
diff --git a/src/layout/melissa/MelissaCompromissos.vue b/src/layout/melissa/MelissaCompromissos.vue
index f2071d7..387cd53 100644
--- a/src/layout/melissa/MelissaCompromissos.vue
+++ b/src/layout/melissa/MelissaCompromissos.vue
@@ -1,78 +1,105 @@
 <script setup>
 /*
- * MelissaCompromissos — Sessão "Compromissos determinados" como página
- * fullscreen dentro de Melissa. Segue o blueprint melissa-page-blueprint.md.
+ * MelissaCompromissos — Tipos de compromissos determinados.
+ * Segue blueprint melissa-table-page-blueprint.md (DataTable + sidebar com
+ * stats e filtros coloridos, view toggle list/grade, subheader explicativo).
  *
- * Layout 2-col:
- *   - COL 1 — Aside esquerda (~280px): stats compactos + filtros (tipo + busca)
- *   - COL 2 — Lista central (flex 1): cards de compromisso (cor, nome, desc,
- *            tempo total, nº de campos, toggle ativo, editar/excluir)
- *
- * Mobile (<lg): aside vai pro drawer off-canvas, lista ocupa 100%, botão
- * "Menu Compromissos" no header esquerda + filtros via popover de "Ações".
- *
- * Reusa DeterminedCommitmentDialog pra criar/editar (mesmo dialog da página
- * antiga em src/features/agenda/pages/CompromissosDeterminados.vue).
+ * Diferença vs. blueprint canônico (MelissaCadastrosRecebidos):
+ *   - Row design preservado: o "Compromisso" é uma única coluna larga com
+ *     color-stripe vertical + name + badges + descrição + meta inline,
+ *     espelhando o card antigo. Coluna "Ações" frozen é alargada pra 140px
+ *     pra caber os 3 controles (ToggleSwitch + Editar + Excluir).
+ *   - Dois grupos de filtros na sidebar: Status (Ativos/Inativos) e
+ *     Tipo (Nativos/Meus), cada um com botão "Limpar filtro" próprio.
+ *   - Stats: Total / Ativos (verde) / Inativos (amber) / Tempo total.
  */
-import { ref, computed, reactive, onMounted, onBeforeUnmount } from 'vue';
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue';
 import { useToast } from 'primevue/usetoast';
-import Popover from 'primevue/popover';
 import { supabase } from '@/lib/supabase/client';
 import { useTenantStore } from '@/stores/tenantStore';
 import DeterminedCommitmentDialog from '@/features/agenda/components/DeterminedCommitmentDialog.vue';
-// Dialog/SelectButton/InputText/Button/Toggle: auto-importados via PrimeVueResolver.
+// DataTable/Column/Paginator/ToggleSwitch/Dialog: auto-importados via PrimeVueResolver.
 
 const emit = defineEmits(['close']);
 
 const toast = useToast();
 const tenantStore = useTenantStore();
 
-// ── Breakpoints + drawer (blueprint §2/§3) ─────────────────
+// ── Breakpoints + drawer ──────────────────────────────────
 const drawerOpen = ref(false);
 const isMobile = ref(false);
-const isCompact = ref(false);
 let _mqMobile = null;
-let _mqCompact = null;
 function _onMqMobileChange(e) {
     isMobile.value = e.matches;
     if (!e.matches) drawerOpen.value = false;
 }
-function _onMqCompactChange(e) {
-    isCompact.value = e.matches;
-}
 function toggleDrawer() { drawerOpen.value = !drawerOpen.value; }
 function fecharDrawer() { drawerOpen.value = false; }
 
 // ── Estado ─────────────────────────────────────────────────
 const loading = ref(false);
-const hasLoaded = ref(false);
 const saving = ref(false);
 
 const commitments = ref([]);
 const totalsByCommitmentId = ref({});
 
-const typeFilter = ref('all');
-const typeOptions = [
-    { label: 'Todos', value: 'all' },
-    { label: 'Nativos', value: 'native' },
-    { label: 'Meus', value: 'custom' }
-];
+const busca = ref('');
+const statusFilter = ref('');   // '' | 'active' | 'inactive'
+const typeFilter = ref('');     // '' | 'native' | 'custom'
 
-const filters = reactive({
-    global: { value: null, matchMode: 'contains' }
+// ── Helpers de status ─────────────────────────────────────
+function rowStatusClass(c) {
+    if (!c) return '';
+    return c.active ? 'is-ok' : 'is-warn';
+}
+
+// ── Stats ─────────────────────────────────────────────────
+const stats = computed(() => {
+    const all = commitments.value;
+    const ativos = all.filter((c) => c.active).length;
+    const inativos = all.filter((c) => !c.active).length;
+    const totalMin = Object.values(totalsByCommitmentId.value).reduce((a, b) => a + b, 0);
+    return [
+        { key: 'total', label: 'Total', value: all.length, cls: 'neutral' },
+        { key: 'ativos', label: 'Ativos', value: ativos, cls: ativos > 0 ? 'ok' : 'neutral' },
+        { key: 'inativos', label: 'Inativos', value: inativos, cls: inativos > 0 ? 'warn' : 'neutral' },
+        { key: 'tempo', label: 'Tempo', value: formatMinutes(totalMin), cls: 'neutral' }
+    ];
 });
 
-// ── Carregando inicial (blueprint §9) ──────────────────────
-const carregandoInicial = computed(
-    () => loading.value && commitments.value.length === 0
-);
+const STATUS_FILTER_OPTIONS = [
+    { key: 'active', label: 'Ativos', icon: 'pi pi-check-circle' },
+    { key: 'inactive', label: 'Inativos', icon: 'pi pi-pause-circle' }
+];
+const TYPE_FILTER_OPTIONS = [
+    { key: 'native', label: 'Nativos', icon: 'pi pi-shield' },
+    { key: 'custom', label: 'Meus', icon: 'pi pi-user' }
+];
 
-// ── Filtragem ──────────────────────────────────────────────
-const visibleCommitments = computed(() => {
+function toggleStatusFilter(s) {
+    statusFilter.value = statusFilter.value === s ? '' : s;
+}
+function toggleTypeFilter(t) {
+    typeFilter.value = typeFilter.value === t ? '' : t;
+}
+
+const hasActiveFilters = computed(() =>
+    !!(busca.value || statusFilter.value || typeFilter.value)
+);
+function clearAllFilters() {
+    busca.value = '';
+    statusFilter.value = '';
+    typeFilter.value = '';
+}
+
+// ── Filtragem ─────────────────────────────────────────────
+const filtered = computed(() => {
     let list = commitments.value;
+    if (statusFilter.value === 'active') list = list.filter((c) => !!c.active);
+    if (statusFilter.value === 'inactive') list = list.filter((c) => !c.active);
     if (typeFilter.value === 'native') list = list.filter((c) => !!c.is_native);
     if (typeFilter.value === 'custom') list = list.filter((c) => !c.is_native);
-    const q = String(filters.global?.value ?? '').trim().toLowerCase();
+    const q = String(busca.value || '').trim().toLowerCase();
     if (q) {
         list = list.filter((c) =>
             String(c.name || '').toLowerCase().includes(q) ||
@@ -82,20 +109,34 @@ const visibleCommitments = computed(() => {
     return list;
 });
 
-// ── Stats ──────────────────────────────────────────────────
-const stats = computed(() => {
-    const all = commitments.value;
-    const ativos = all.filter((c) => c.active).length;
-    const inativos = all.filter((c) => !c.active).length;
-    const totalMin = Object.values(totalsByCommitmentId.value).reduce((a, b) => a + b, 0);
-    return [
-        { key: 'total', label: 'Total', value: all.length, cls: '' },
-        { key: 'ativos', label: 'Ativos', value: ativos, cls: ativos > 0 ? 'is-ok' : '' },
-        { key: 'inativos', label: 'Inativos', value: inativos, cls: inativos > 0 ? 'is-warn' : '' },
-        { key: 'tempo', label: 'Tempo', value: formatMinutes(totalMin), cls: '' }
-    ];
-});
+// ── Paginação compartilhada (DataTable + grid) ────────────
+const PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
+const rowsMC = ref(10);
+const firstMC = ref(0);
+function onPage(event) {
+    firstMC.value = event.first;
+    rowsMC.value = event.rows;
+}
+watch([busca, statusFilter, typeFilter], () => { firstMC.value = 0; });
 
+const pagedItems = computed(() =>
+    filtered.value.slice(firstMC.value, firstMC.value + rowsMC.value)
+);
+
+// ── View mode (list / grid) ───────────────────────────────
+const VIEW_MODE_KEY = 'mc.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 */ }
+}
+
+// ── Helpers de tempo ──────────────────────────────────────
 function formatMinutes(minutes) {
     const m = Math.max(0, Number(minutes) || 0);
     const h = Math.floor(m / 60);
@@ -107,7 +148,7 @@ function getTotalMinutes(id) {
     return Number(totalsByCommitmentId.value?.[id] ?? 0);
 }
 
-// ── Fetch ──────────────────────────────────────────────────
+// ── Fetch ─────────────────────────────────────────────────
 function getTenantId() {
     return tenantStore.activeTenantId || tenantStore.tenantId || null;
 }
@@ -166,7 +207,6 @@ async function fetchAll() {
         toast.add({ severity: 'error', summary: 'Erro', detail: e?.message || 'Falha ao carregar.', life: 4500 });
     } finally {
         loading.value = false;
-        hasLoaded.value = true;
     }
 }
 
@@ -175,9 +215,6 @@ onMounted(async () => {
         _mqMobile = window.matchMedia('(max-width: 1023px)');
         isMobile.value = _mqMobile.matches;
         _mqMobile.addEventListener('change', _onMqMobileChange);
-        _mqCompact = window.matchMedia('(max-width: 1279px)');
-        isCompact.value = _mqCompact.matches;
-        _mqCompact.addEventListener('change', _onMqCompactChange);
     }
     if (typeof tenantStore.loadSessionAndTenant === 'function') {
         await tenantStore.loadSessionAndTenant();
@@ -186,10 +223,9 @@ onMounted(async () => {
 });
 onBeforeUnmount(() => {
     if (_mqMobile) _mqMobile.removeEventListener('change', _onMqMobileChange);
-    if (_mqCompact) _mqCompact.removeEventListener('change', _onMqCompactChange);
 });
 
-// ── CRUD (espelhado da CompromissosDeterminados.vue) ───────
+// ── CRUD ──────────────────────────────────────────────────
 const dlgOpen = ref(false);
 const dlgMode = ref('create');
 const editing = ref(null);
@@ -204,6 +240,9 @@ function openEdit(c) {
     editing.value = JSON.parse(JSON.stringify(c));
     dlgOpen.value = true;
 }
+function onRowClick(event) {
+    if (event?.data) openEdit(event.data);
+}
 
 function isActiveLocked(c) { return !!c.is_locked; }
 function isDeleteLocked(c) { return !!c.is_native; }
@@ -276,7 +315,6 @@ async function onSave(payload) {
                 .eq('tenant_id', tenantId).eq('id', cid);
             if (uErr) throw uErr;
 
-            // Re-sync fields (delete all + insert)
             const { error: dErr } = await supabase.from('determined_commitment_fields')
                 .delete().eq('tenant_id', tenantId).eq('commitment_id', cid);
             if (dErr) throw dErr;
@@ -341,20 +379,14 @@ async function onDelete(c) {
         saving.value = false;
     }
 }
-
-// ── Popover de Ações (mobile compact, blueprint §10) ───────
-const actionsPopRef = ref(null);
-function openActions(e) { actionsPopRef.value?.toggle(e); }
-function clearSearch() { filters.global.value = null; }
 </script>
 
 <template>
-    <!-- Drawer host (blueprint §2) -->
     <aside
         class="mc-mobile-drawer"
         :class="{ 'is-open': drawerOpen }"
         v-show="isMobile"
-        aria-label="Filtros e estatísticas"
+        aria-label="Estatísticas e filtros"
     >
         <div id="mc-mobile-drawer-target" class="mc-mobile-drawer__scroll" />
     </aside>
@@ -370,16 +402,16 @@ function clearSearch() { filters.global.value = null; }
         <header class="mc-page__head">
             <button
                 class="mc-menu-btn mc-menu-btn--mobile-only"
-                v-tooltip.bottom="'Filtros & estatísticas'"
+                v-tooltip.bottom="'Estatísticas & filtros'"
                 @click="toggleDrawer"
             >
                 <i class="pi pi-bars" />
                 <span>Menu Compromissos</span>
             </button>
             <div class="mc-page__title">
-                <i class="pi pi-list text-indigo-300" />
+                <i class="pi pi-list mc-page__title-icon" />
                 <span>Compromissos</span>
-                <span class="mc-page__count">{{ visibleCommitments.length }}</span>
+                <span class="mc-page__count">{{ filtered.length }}</span>
             </div>
             <div class="mc-page__actions">
                 <button
@@ -391,13 +423,6 @@ function clearSearch() { filters.global.value = null; }
                     <i :class="saving ? 'pi pi-spin pi-spinner' : 'pi pi-plus'" />
                     <span>Novo</span>
                 </button>
-                <button
-                    class="mc-head-btn mc-head-btn--compact-only"
-                    v-tooltip.bottom="'Ações & filtros'"
-                    @click="openActions"
-                >
-                    <i class="pi pi-sliders-h" />
-                </button>
                 <button
                     class="mc-head-btn"
                     v-tooltip.bottom="'Recarregar'"
@@ -406,192 +431,383 @@ function clearSearch() { filters.global.value = null; }
                 >
                     <i :class="loading ? 'pi pi-spin pi-spinner' : 'pi pi-refresh'" />
                 </button>
-                <button class="mc-close" v-tooltip.bottom="'Voltar ao resumo (Esc)'" @click="emit('close')">
+                <button class="mc-close" v-tooltip.bottom="'Voltar (Esc)'" @click="emit('close')">
                     <i class="pi pi-times" />
                 </button>
             </div>
         </header>
 
-        <!-- Popover de filtros (compact + mobile) -->
-        <Popover ref="actionsPopRef" class="mc-actions-pop">
-            <div class="mc-actions">
-                <div class="mc-actions__group">
-                    <div class="mc-actions__label">Tipo</div>
-                    <SelectButton
-                        v-model="typeFilter"
-                        :options="typeOptions"
-                        optionLabel="label"
-                        optionValue="value"
-                        :allowEmpty="false"
-                        size="small"
-                        class="w-full"
-                    />
-                </div>
-                <div class="mc-actions__group">
-                    <div class="mc-actions__label">Buscar</div>
-                    <InputText
-                        v-model="filters.global.value"
-                        placeholder="Nome ou descrição…"
-                        class="w-full"
-                    />
-                </div>
-            </div>
-        </Popover>
+        <!-- Subheader explicativo (blueprint §9) -->
+        <div class="mc-subheader">
+            <i class="pi pi-info-circle mc-subheader__icon" />
+            <span class="mc-subheader__text">
+                Modelos de compromissos que aparecem na agenda além das sessões.
+                <strong>Crie tipos próprios</strong> com campos personalizados ou
+                <strong>edite/desative</strong> os nativos disponíveis pra todos os usuários.
+            </span>
+        </div>
 
         <div class="mc-body">
-            <!-- ═══ COL 1: Stats + filtros ═══════════════════════════════
-                 Em desktop renderiza in-place. Em mobile vai pro drawer. -->
             <Teleport to="#mc-mobile-drawer-target" :disabled="!isMobile">
             <aside class="mc-side">
-                <div class="mc-w">
-                    <div class="mc-w__head">
-                        <span class="mc-w__title"><i class="pi pi-chart-bar" /> Estatísticas</span>
-                    </div>
-                    <div class="mc-stats">
-                        <template v-if="carregandoInicial">
-                            <div v-for="i in 4" :key="`stsk-${i}`" class="mc-stat mc-stat--skeleton" aria-busy="true">
-                                <div class="mc-stat__val melissa-skeleton melissa-skeleton--number" />
-                                <div class="mc-stat__lbl melissa-skeleton melissa-skeleton--text" style="width: 60%; margin-top: 6px;" />
+                <!-- Conteúdo scrollável: cards de estatísticas e filtros.
+                     O footer com "Limpar filtros" fica fora desse scroll
+                     (flex-shrink: 0 ancorado no bottom da .mc-side). -->
+                <div class="mc-side__scroll">
+                    <!-- Stats -->
+                    <div class="mc-w mc-w--side">
+                        <div class="mc-w__head">
+                            <span class="mc-w__title"><i class="pi pi-chart-bar" /> Estatísticas</span>
+                        </div>
+                        <div class="mc-stats">
+                            <div
+                                v-for="s in stats"
+                                :key="s.key"
+                                class="mc-stat"
+                                :class="`is-${s.cls}`"
+                            >
+                                <div class="mc-stat__val">{{ s.value }}</div>
+                                <div class="mc-stat__lbl">{{ s.label }}</div>
                             </div>
-                        </template>
-                        <div
-                            v-for="s in stats"
-                            v-else
-                            :key="s.key"
-                            class="mc-stat"
-                            :class="`is-${s.cls || 'neutral'}`"
-                        >
-                            <div class="mc-stat__val">{{ s.value }}</div>
-                            <div class="mc-stat__lbl">{{ s.label }}</div>
+                        </div>
+                    </div>
+
+                    <!-- Filtro de status -->
+                    <div class="mc-w mc-w--side">
+                        <div class="mc-w__head">
+                            <span class="mc-w__title"><i class="pi pi-filter" /> Status</span>
+                            <button
+                                v-if="statusFilter"
+                                class="mc-side__clear-inline"
+                                v-tooltip.top="'Limpar filtro de status'"
+                                aria-label="Limpar filtro de status"
+                                @click="statusFilter = ''"
+                            >
+                                <i class="pi pi-times" />
+                            </button>
+                        </div>
+                        <div class="mc-side__list">
+                            <button
+                                v-for="o in STATUS_FILTER_OPTIONS"
+                                :key="o.key"
+                                class="mc-side__item"
+                                :class="[`is-status-${o.key}`, { 'is-active': statusFilter === o.key }]"
+                                @click="toggleStatusFilter(o.key)"
+                            >
+                                <i :class="o.icon" />
+                                <span>{{ o.label }}</span>
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Filtro de tipo -->
+                    <div class="mc-w mc-w--side">
+                        <div class="mc-w__head">
+                            <span class="mc-w__title"><i class="pi pi-tag" /> Tipo</span>
+                            <button
+                                v-if="typeFilter"
+                                class="mc-side__clear-inline"
+                                v-tooltip.top="'Limpar filtro de tipo'"
+                                aria-label="Limpar filtro de tipo"
+                                @click="typeFilter = ''"
+                            >
+                                <i class="pi pi-times" />
+                            </button>
+                        </div>
+                        <div class="mc-side__list">
+                            <button
+                                v-for="o in TYPE_FILTER_OPTIONS"
+                                :key="o.key"
+                                class="mc-side__item"
+                                :class="[`is-type-${o.key}`, { 'is-active': typeFilter === o.key }]"
+                                @click="toggleTypeFilter(o.key)"
+                            >
+                                <i :class="o.icon" />
+                                <span>{{ o.label }}</span>
+                            </button>
                         </div>
                     </div>
                 </div>
 
-                <div class="mc-w mc-w--side-only">
-                    <div class="mc-w__head">
-                        <span class="mc-w__title"><i class="pi pi-filter" /> Filtros</span>
-                    </div>
-                    <div class="mc-side__filters">
-                        <div>
-                            <div class="mc-side__label">Tipo</div>
-                            <SelectButton
-                                v-model="typeFilter"
-                                :options="typeOptions"
-                                optionLabel="label"
-                                optionValue="value"
-                                :allowEmpty="false"
-                                size="small"
-                                class="w-full"
-                            />
-                        </div>
-                        <div>
-                            <div class="mc-side__label">Buscar</div>
-                            <InputText
-                                v-model="filters.global.value"
-                                placeholder="Nome ou descrição…"
-                                class="w-full"
-                            />
-                        </div>
-                        <button
-                            v-if="filters.global.value"
-                            class="mc-side__clear-btn"
-                            @click="clearSearch"
-                        >
-                            <i class="pi pi-times text-[0.65rem]" />
-                            Limpar busca
+                <!-- Footer fixo no bottom da sidebar (fora do scroll).
+                     Botão "Limpar filtros" só aparece se algum filtro
+                     estiver ativo (busca, status, ou tipo). Em desktop
+                     fica ancorado no fundo da .mc-side via flex; em
+                     mobile teleportado fica sticky no bottom do drawer. -->
+                <Transition name="mc-clear">
+                    <div v-if="hasActiveFilters" class="mc-side__footer">
+                        <button class="mc-side__clear-all" @click="clearAllFilters">
+                            <i class="pi pi-filter-slash" />
+                            <span>Limpar filtros</span>
                         </button>
                     </div>
-                </div>
+                </Transition>
             </aside>
             </Teleport>
 
-            <!-- ═══ COL 2: Lista central ═══════════════════════════════ -->
             <div class="mc-main">
-                <div class="mc-list">
-                    <!-- Skeletons na 1ª carga (blueprint §9) -->
-                    <template v-if="carregandoInicial">
-                        <div v-for="i in 5" :key="`csk-${i}`" class="mc-card mc-card--skeleton" aria-busy="true">
-                            <span class="mc-card__color melissa-skeleton" style="border-radius: 6px;" />
-                            <div class="mc-card__main">
-                                <span class="melissa-skeleton melissa-skeleton--title" :style="{ width: `${50 + (i * 7) % 30}%` }" />
-                                <span class="melissa-skeleton melissa-skeleton--text" style="width: 70%; margin-top: 8px;" />
+                <!-- Toolbar (busca + view toggle) -->
+                <div class="mc-toolbar">
+                    <div class="mc-search">
+                        <i class="pi pi-search mc-search__icon" />
+                        <input
+                            v-model="busca"
+                            type="text"
+                            placeholder="Buscar por nome ou descrição…"
+                            class="mc-search__input"
+                        />
+                        <button
+                            v-if="busca"
+                            class="mc-search__clear"
+                            v-tooltip.bottom="'Limpar busca'"
+                            @click="busca = ''"
+                        >
+                            <i class="pi pi-times" />
+                        </button>
+                    </div>
+                    <div class="mc-view-toggle" role="group" aria-label="Visualização">
+                        <button
+                            class="mc-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="mc-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>
+
+                <!-- View Lista (DataTable) — row design preservado:
+                     coluna "Compromisso" larga renderiza color-stripe + name +
+                     badges + descrição + meta inline (mesmo conteúdo do card
+                     antigo); coluna "Ações" frozen 140px com 3 controles. -->
+                <DataTable
+                    v-if="viewMode === 'list'"
+                    :value="filtered"
+                    :loading="loading"
+                    dataKey="id"
+                    paginator
+                    :rows="rowsMC"
+                    :first="firstMC"
+                    :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: 720px"
+                    class="mc-table"
+                    @row-click="onRowClick"
+                    @page="onPage"
+                >
+                    <Column header="Compromisso" style="min-width: 320px">
+                        <template #body="{ data }">
+                            <div class="mc-row__commit" :class="{ 'is-inactive': !data.active }">
+                                <span
+                                    class="mc-row__color"
+                                    :style="{ background: data.bg_color ? `#${data.bg_color}` : 'var(--m-bg-soft-hover)' }"
+                                />
+                                <div class="mc-row__main">
+                                    <div class="mc-row__name-row">
+                                        <span class="mc-row__name">{{ data.name }}</span>
+                                        <span v-if="data.is_native" class="mc-row__badge mc-row__badge--native">
+                                            <i class="pi pi-shield" /> Nativo
+                                        </span>
+                                        <span v-if="!data.active" class="mc-row__badge mc-row__badge--off">Inativo</span>
+                                    </div>
+                                    <div v-if="data.description" class="mc-row__desc">{{ data.description }}</div>
+                                </div>
                             </div>
+                        </template>
+                    </Column>
+
+                    <Column header="Atividade" style="width: 220px; min-width: 200px">
+                        <template #body="{ data }">
+                            <div class="mc-row__meta">
+                                <span class="mc-row__meta-item" v-tooltip.top="'Tempo total registrado'">
+                                    <i class="pi pi-clock" />
+                                    {{ formatMinutes(getTotalMinutes(data.id)) }}
+                                </span>
+                                <span class="mc-row__meta-item" v-tooltip.top="'Campos extras'">
+                                    <i class="pi pi-list" />
+                                    {{ (data.fields || []).length }}
+                                    {{ (data.fields || []).length === 1 ? 'campo' : 'campos' }}
+                                </span>
+                            </div>
+                        </template>
+                    </Column>
+
+                    <Column
+                        header=""
+                        :style="{ width: '140px', maxWidth: '140px', minWidth: '140px' }"
+                        frozen
+                        alignFrozen="right"
+                        class="mc-col-acoes"
+                    >
+                        <template #body="{ data }">
+                            <div class="mc-row__actions" @click.stop>
+                                <ToggleSwitch
+                                    v-model="data.active"
+                                    :disabled="isActiveLocked(data) || saving"
+                                    @change="onToggleActive(data)"
+                                    v-tooltip.left="isActiveLocked(data) ? 'Bloqueado' : (data.active ? 'Desativar' : 'Ativar')"
+                                />
+                                <button
+                                    class="mc-row__btn"
+                                    v-tooltip.left="'Editar'"
+                                    aria-label="Editar"
+                                    @click.stop="openEdit(data)"
+                                >
+                                    <i class="pi pi-pencil" />
+                                </button>
+                                <button
+                                    class="mc-row__btn mc-row__btn--danger"
+                                    v-tooltip.left="isDeleteLocked(data) ? 'Não pode excluir nativos' : 'Excluir'"
+                                    aria-label="Excluir"
+                                    :disabled="isDeleteLocked(data)"
+                                    @click.stop="confirmDelete(data)"
+                                >
+                                    <i class="pi pi-trash" />
+                                </button>
+                            </div>
+                        </template>
+                    </Column>
+
+                    <template #empty>
+                        <div class="mc-empty">
+                            <i class="pi pi-list mc-empty__icon" />
+                            <div class="mc-empty__title">Nenhum compromisso encontrado</div>
+                            <div class="mc-empty__hint">
+                                <template v-if="busca || statusFilter || typeFilter">
+                                    Ajuste os filtros pra ver mais resultados.
+                                </template>
+                                <template v-else>
+                                    Crie seu primeiro tipo de compromisso.
+                                </template>
+                            </div>
+                            <button class="mc-act-btn mc-act-btn--primary mc-empty__btn" @click="openCreate()">
+                                <i class="pi pi-plus" />
+                                <span>Novo compromisso</span>
+                            </button>
                         </div>
                     </template>
 
-                    <div v-else-if="visibleCommitments.length === 0" class="mc-empty">
+                    <template #loading>
+                        <div class="mc-table__loading">
+                            <i class="pi pi-spin pi-spinner" />
+                            <span>Carregando compromissos…</span>
+                        </div>
+                    </template>
+                </DataTable>
+
+                <!-- View Grade — cards num CSS grid; mesmo conteúdo do row
+                     preservado em formato vertical. Paginator standalone
+                     compartilha rowsMC/firstMC com a list view. -->
+                <div v-else-if="viewMode === 'grid'" class="mc-grid-wrap">
+                    <div v-if="loading && filtered.length === 0" class="mc-table__loading mc-grid__loading">
+                        <i class="pi pi-spin pi-spinner" />
+                        <span>Carregando compromissos…</span>
+                    </div>
+                    <div v-else-if="filtered.length === 0" class="mc-empty">
                         <i class="pi pi-list mc-empty__icon" />
                         <div class="mc-empty__title">Nenhum compromisso encontrado</div>
                         <div class="mc-empty__hint">
-                            <template v-if="filters.global.value || typeFilter !== 'all'">
+                            <template v-if="busca || statusFilter || typeFilter">
                                 Ajuste os filtros pra ver mais resultados.
                             </template>
                             <template v-else>
                                 Crie seu primeiro tipo de compromisso.
                             </template>
                         </div>
-                        <button class="mc-act-btn mc-act-btn--primary" @click="openCreate()">
-                            <i class="pi pi-plus" />
-                            <span>Novo compromisso</span>
-                        </button>
                     </div>
-
-                    <div
-                        v-for="c in visibleCommitments"
-                        v-else
-                        :key="c.id"
-                        class="mc-card"
-                        :class="{ 'is-inactive': !c.active }"
-                        @click="openEdit(c)"
-                    >
-                        <span
-                            class="mc-card__color"
-                            :style="{ background: c.bg_color ? `#${c.bg_color}` : 'var(--m-bg-soft-hover)' }"
-                        />
-                        <div class="mc-card__main">
-                            <div class="mc-card__name-row">
-                                <span class="mc-card__name">{{ c.name }}</span>
-                                <span v-if="c.is_native" class="mc-card__badge mc-card__badge--native">
+                    <div v-else class="mc-grid">
+                        <div
+                            v-for="c in pagedItems"
+                            :key="c.id"
+                            class="mc-grid__card"
+                            :class="[rowStatusClass(c), { 'is-inactive': !c.active }]"
+                            role="button"
+                            tabindex="0"
+                            @click="openEdit(c)"
+                            @keydown.enter.prevent="openEdit(c)"
+                            @keydown.space.prevent="openEdit(c)"
+                        >
+                            <div class="mc-grid__top">
+                                <span
+                                    class="mc-grid__color"
+                                    :style="{ background: c.bg_color ? `#${c.bg_color}` : 'var(--m-bg-soft-hover)' }"
+                                />
+                                <div class="mc-grid__top-right" @click.stop>
+                                    <ToggleSwitch
+                                        v-model="c.active"
+                                        :disabled="isActiveLocked(c) || saving"
+                                        @change="onToggleActive(c)"
+                                        v-tooltip.left="isActiveLocked(c) ? 'Bloqueado' : (c.active ? 'Desativar' : 'Ativar')"
+                                    />
+                                </div>
+                            </div>
+                            <div class="mc-grid__name-row">
+                                <span class="mc-grid__name">{{ c.name }}</span>
+                                <span v-if="c.is_native" class="mc-row__badge mc-row__badge--native">
                                     <i class="pi pi-shield" /> Nativo
                                 </span>
-                                <span v-if="!c.active" class="mc-card__badge mc-card__badge--off">Inativo</span>
+                                <span v-if="!c.active" class="mc-row__badge mc-row__badge--off">Inativo</span>
                             </div>
-                            <div v-if="c.description" class="mc-card__desc">{{ c.description }}</div>
-                            <div class="mc-card__meta">
-                                <span class="mc-card__meta-item" v-tooltip.top="'Tempo total registrado'">
+                            <div v-if="c.description" class="mc-grid__desc">{{ c.description }}</div>
+                            <div class="mc-grid__meta">
+                                <span class="mc-row__meta-item" v-tooltip.top="'Tempo total registrado'">
                                     <i class="pi pi-clock" />
                                     {{ formatMinutes(getTotalMinutes(c.id)) }}
                                 </span>
-                                <span class="mc-card__meta-item" v-tooltip.top="'Campos extras'">
+                                <span class="mc-row__meta-item" v-tooltip.top="'Campos extras'">
                                     <i class="pi pi-list" />
-                                    {{ (c.fields || []).length }} {{ (c.fields || []).length === 1 ? 'campo' : 'campos' }}
+                                    {{ (c.fields || []).length }}
+                                    {{ (c.fields || []).length === 1 ? 'campo' : 'campos' }}
                                 </span>
                             </div>
-                        </div>
-                        <div class="mc-card__actions" @click.stop>
-                            <ToggleSwitch
-                                v-model="c.active"
-                                :disabled="isActiveLocked(c) || saving"
-                                @change="onToggleActive(c)"
-                                v-tooltip.left="isActiveLocked(c) ? 'Bloqueado' : (c.active ? 'Desativar' : 'Ativar')"
-                            />
-                            <button
-                                class="mc-card__btn"
-                                v-tooltip.left="'Editar'"
-                                @click="openEdit(c)"
-                            >
-                                <i class="pi pi-pencil" />
-                            </button>
-                            <button
-                                class="mc-card__btn mc-card__btn--danger"
-                                v-tooltip.left="isDeleteLocked(c) ? 'Não pode excluir compromissos nativos' : 'Excluir'"
-                                :disabled="isDeleteLocked(c)"
-                                @click="confirmDelete(c)"
-                            >
-                                <i class="pi pi-trash" />
-                            </button>
+                            <div class="mc-grid__footer" @click.stop>
+                                <button
+                                    class="mc-row__btn"
+                                    v-tooltip.top="'Editar'"
+                                    aria-label="Editar"
+                                    @click.stop="openEdit(c)"
+                                >
+                                    <i class="pi pi-pencil" />
+                                </button>
+                                <button
+                                    class="mc-row__btn mc-row__btn--danger"
+                                    v-tooltip.top="isDeleteLocked(c) ? 'Não pode excluir nativos' : 'Excluir'"
+                                    aria-label="Excluir"
+                                    :disabled="isDeleteLocked(c)"
+                                    @click.stop="confirmDelete(c)"
+                                >
+                                    <i class="pi pi-trash" />
+                                </button>
+                            </div>
                         </div>
                     </div>
+                    <Paginator
+                        v-if="filtered.length > 0"
+                        class="mc-paginator"
+                        :rows="rowsMC"
+                        :totalRecords="filtered.length"
+                        :first="firstMC"
+                        :rowsPerPageOptions="PAGE_SIZE_OPTIONS"
+                        template="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+                        currentPageReportTemplate="{first}–{last} de {totalRecords}"
+                        @page="onPage"
+                    />
                 </div>
             </div>
         </div>
@@ -609,7 +825,7 @@ function clearSearch() { filters.global.value = null; }
 </template>
 
 <style scoped>
-/* ─── Convenção "Melissa Page" (blueprint §6) ─── */
+/* ─── Page chrome (espelha MelissaCadastrosRecebidos) ─── */
 .mc-page {
     position: absolute;
     inset: 6px 6px calc(var(--m-dock-h, 76px) + 6px) 6px;
@@ -632,7 +848,6 @@ function clearSearch() { filters.global.value = null; }
     to   { opacity: 1; transform: scale(1); }
 }
 
-/* Header */
 .mc-page__head {
     display: flex;
     align-items: center;
@@ -651,6 +866,10 @@ function clearSearch() { filters.global.value = null; }
     font-size: 1rem;
     font-weight: 500;
 }
+.mc-page__title-icon {
+    color: var(--p-primary-color);
+    font-size: 1.05rem;
+}
 .mc-page__title > span:not(.mc-page__count) {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -665,20 +884,11 @@ function clearSearch() { filters.global.value = null; }
     padding: 2px 8px;
     border-radius: 999px;
 }
-.mc-page__actions {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    flex-shrink: 0;
-}
+.mc-page__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
 
-/* Botões header (blueprint §11) */
-.mc-close,
-.mc-head-btn {
-    width: 32px;
-    height: 32px;
-    display: grid;
-    place-items: center;
+.mc-close, .mc-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);
@@ -687,10 +897,8 @@ function clearSearch() { filters.global.value = null; }
     font-family: inherit;
     transition: background-color 140ms ease;
 }
-.mc-close:hover,
-.mc-head-btn:hover { background: var(--m-bg-soft-hover); }
+.mc-close:hover, .mc-head-btn:hover { background: var(--m-bg-soft-hover); }
 .mc-head-btn > i { font-size: 0.85rem; }
-.mc-head-btn--compact-only { display: none; }
 
 .mc-act-btn {
     display: inline-flex;
@@ -720,7 +928,6 @@ function clearSearch() { filters.global.value = null; }
 .mc-act-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
 .mc-act-btn > i { font-size: 0.78rem; }
 
-/* Menu mobile */
 .mc-menu-btn {
     display: none;
     height: 32px;
@@ -742,42 +949,114 @@ function clearSearch() { filters.global.value = null; }
     background: color-mix(in srgb, var(--m-accent) 88%, white);
     transform: translateY(-1px);
 }
-.mc-menu-btn > i { font-size: 0.85rem; }
 
-/* Body — flex row em desktop, column em mobile */
+/* Subheader (blueprint §9) */
+.mc-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;
+}
+.mc-subheader__icon {
+    color: var(--p-primary-color);
+    font-size: 0.92rem;
+    flex-shrink: 0;
+    margin-top: 1px;
+}
+.mc-subheader__text { flex: 1; min-width: 0; }
+.mc-subheader__text strong { color: var(--m-text); font-weight: 600; }
+
 .mc-body {
     flex: 1;
     display: flex;
     min-height: 0;
-    position: relative;
-    gap: 12px;
-    padding: 12px;
+    gap: 0;
+    padding: 0;
 }
 
-/* ═══ COL 1: aside esquerda ═══ */
+/* ─── Sidebar ─── */
+/* 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. */
 .mc-side {
     width: 280px;
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
-    gap: 12px;
-    overflow-y: auto;
-    scrollbar-width: thin;
-    scrollbar-color: var(--m-border-strong) transparent;
+    background: var(--m-bg-soft);
+    border-right: 1px solid var(--m-border);
+    overflow: hidden;
 }
-.mc-side::-webkit-scrollbar { width: 5px; }
-.mc-side::-webkit-scrollbar-thumb {
+.mc-side__scroll {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+}
+.mc-side__scroll::-webkit-scrollbar { width: 5px; }
+.mc-side__scroll::-webkit-scrollbar-thumb {
     background: var(--m-border-strong);
     border-radius: 3px;
 }
 
-/* Widget container (blueprint §12 — radius 12px) */
-.mc-w {
+/* Footer da sidebar — sempre ancorado no bottom (fora do scroll).
+   Bg um pouco mais opaco que --m-bg-soft pra "ler" como faixa fixa
+   separada. Border-top marca o limite com a área scrollável acima. */
+.mc-side__footer {
+    flex-shrink: 0;
+    padding: 12px;
     background: var(--m-bg-soft);
+    border-top: 1px solid var(--m-border);
+}
+.mc-side__clear-all {
+    width: 100%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 9px 12px;
+    background: var(--m-bg-medium);
+    border: 1px solid var(--m-border);
+    color: var(--m-text);
+    border-radius: 10px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.78rem;
+    font-weight: 600;
+    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
+}
+.mc-side__clear-all:hover {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+    color: var(--m-text);
+}
+.mc-side__clear-all > i {
+    font-size: 0.78rem;
+    color: var(--m-text-muted);
+    transition: color 140ms ease;
+}
+.mc-side__clear-all:hover > i { color: var(--m-text); }
+
+.mc-w {
+    background: var(--m-bg-medium);
     border: 1px solid var(--m-border);
     border-radius: 12px;
     padding: 12px;
 }
+.mc-w--side {
+    margin: 12px 12px 0;
+    flex-shrink: 0;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+}
+.mc-w--side:last-of-type { margin-bottom: 12px; }
+
 .mc-w__head {
     display: flex;
     align-items: center;
@@ -788,29 +1067,60 @@ function clearSearch() { filters.global.value = null; }
     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;
-    color: var(--m-text);
 }
-.mc-w__title > i { color: var(--m-text-muted); font-size: 0.78rem; }
+.mc-w__title > i { color: var(--m-text-muted); font-size: 0.7rem; }
+.mc-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;
+}
+
+/* Botão X inline ao lado do título do filter card — limpa o filtro
+   individual (espelha .mp-side__clear do MelissaPacientes). Cor vermelha
+   pra indicar ação destrutiva (remover filtro ativo). Aparece apenas
+   quando o filtro correspondente está ativo (v-if). */
+.mc-side__clear-inline {
+    width: 18px;
+    height: 18px;
+    display: grid;
+    place-items: center;
+    background: transparent;
+    border: 1px solid color-mix(in srgb, rgb(220, 38, 38) 30%, var(--m-border));
+    color: rgb(220, 38, 38);
+    border-radius: 4px;
+    cursor: pointer;
+    font-family: inherit;
+    transition: background-color 140ms ease, border-color 140ms ease;
+}
+.mc-side__clear-inline:hover {
+    background: rgba(220, 38, 38, 0.10);
+    border-color: rgba(220, 38, 38, 0.55);
+}
+.mc-side__clear-inline > i { font-size: 0.6rem; }
 
-/* Stats grid */
 .mc-stats {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 6px;
 }
 .mc-stat {
-    background: var(--m-bg-medium);
+    background: var(--m-bg-soft);
     border: 1px solid var(--m-border);
     border-radius: 10px;
     padding: 8px 10px;
-    text-align: left;
 }
 .mc-stat__val {
     font-size: 1.1rem;
     font-weight: 600;
-    color: var(--m-text);
     line-height: 1.1;
 }
 .mc-stat__lbl {
@@ -820,108 +1130,398 @@ function clearSearch() { filters.global.value = null; }
     text-transform: uppercase;
     letter-spacing: 0.06em;
 }
-.mc-stat.is-ok .mc-stat__val { color: rgb(74, 222, 128); }
-.mc-stat.is-warn .mc-stat__val { color: rgb(248, 113, 113); }
+.mc-stat.is-ok .mc-stat__val   { color: rgb(22, 163, 74); }   /* green-600 */
+.mc-stat.is-warn .mc-stat__val { color: rgb(217, 119, 6); }   /* amber-600 */
 
-/* Filtros side */
-.mc-side__filters {
+/* ─── Filtros (blueprint §8) ─── */
+.mc-side__list {
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    gap: 4px;
 }
-.mc-side__label {
-    text-transform: uppercase;
-    letter-spacing: 0.12em;
-    color: var(--m-text-muted);
-    font-size: 0.62rem;
-    font-weight: 600;
-    margin-bottom: 6px;
-}
-.mc-side__clear-btn {
-    display: inline-flex;
+.mc-side__item {
+    width: 100%;
+    display: flex;
     align-items: center;
-    gap: 6px;
+    gap: 10px;
+    padding: 8px 10px;
     background: transparent;
-    border: 1px solid var(--m-border);
-    color: var(--m-text-muted);
-    padding: 6px 10px;
-    border-radius: 8px;
-    font-family: inherit;
-    font-size: 0.72rem;
-    cursor: pointer;
-    transition: background-color 140ms ease, color 140ms ease;
-    align-self: flex-start;
-}
-.mc-side__clear-btn:hover {
-    background: var(--m-bg-soft-hover);
+    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;
+}
+.mc-side__item > i {
+    font-size: 0.78rem;
+    width: 14px;
+    text-align: center;
 }
 
-/* ═══ COL 2: lista central ═══ */
+/* Status: Ativos = green-600, Inativos = amber-600 */
+.mc-side__item.is-status-active {
+    background: rgba(22, 163, 74, 0.05);
+    border-color: rgba(22, 163, 74, 0.18);
+}
+.mc-side__item.is-status-active > i { color: rgb(22, 163, 74); }
+.mc-side__item.is-status-active:hover {
+    background: rgba(22, 163, 74, 0.10);
+    border-color: rgba(22, 163, 74, 0.30);
+}
+.mc-side__item.is-active.is-status-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);
+}
+
+.mc-side__item.is-status-inactive {
+    background: rgba(217, 119, 6, 0.05);
+    border-color: rgba(217, 119, 6, 0.18);
+}
+.mc-side__item.is-status-inactive > i { color: rgb(217, 119, 6); }
+.mc-side__item.is-status-inactive:hover {
+    background: rgba(217, 119, 6, 0.10);
+    border-color: rgba(217, 119, 6, 0.30);
+}
+.mc-side__item.is-active.is-status-inactive {
+    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);
+}
+
+/* Tipo: Nativos = blue-600 (info), Meus = primary-tinted */
+.mc-side__item.is-type-native {
+    background: rgba(37, 99, 235, 0.05);
+    border-color: rgba(37, 99, 235, 0.18);
+}
+.mc-side__item.is-type-native > i { color: rgb(37, 99, 235); }
+.mc-side__item.is-type-native:hover {
+    background: rgba(37, 99, 235, 0.10);
+    border-color: rgba(37, 99, 235, 0.30);
+}
+.mc-side__item.is-active.is-type-native {
+    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);
+}
+
+.mc-side__item.is-type-custom {
+    background: color-mix(in srgb, var(--m-accent) 5%, transparent);
+    border-color: color-mix(in srgb, var(--m-accent) 18%, transparent);
+}
+.mc-side__item.is-type-custom > i { color: var(--m-accent); }
+.mc-side__item.is-type-custom:hover {
+    background: color-mix(in srgb, var(--m-accent) 10%, transparent);
+    border-color: color-mix(in srgb, var(--m-accent) 30%, transparent);
+}
+.mc-side__item.is-active.is-type-custom {
+    background: color-mix(in srgb, var(--m-accent) 16%, transparent);
+    border-color: color-mix(in srgb, var(--m-accent) 55%, transparent);
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--m-accent) 35%, transparent);
+}
+
+/* Transition do footer "Limpar filtros" — fade + collapse vertical
+   pra entrada/saída suave quando o user ativa/desativa o último filtro. */
+.mc-clear-enter-active,
+.mc-clear-leave-active {
+    transition: opacity 220ms ease, transform 220ms ease, max-height 240ms ease;
+    overflow: hidden;
+}
+.mc-clear-enter-from,
+.mc-clear-leave-to {
+    opacity: 0;
+    transform: translateY(6px);
+    max-height: 0;
+}
+.mc-clear-enter-to,
+.mc-clear-leave-from {
+    opacity: 1;
+    transform: translateY(0);
+    max-height: 80px;
+}
+
+/* ─── Main column ─── */
 .mc-main {
     flex: 1;
     min-width: 0;
+    min-height: 0;
     display: flex;
     flex-direction: column;
-}
-.mc-list {
-    flex: 1;
-    overflow-y: auto;
-    padding: 0 4px 4px;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    scrollbar-width: thin;
-    scrollbar-color: var(--m-border-strong) transparent;
-}
-.mc-list::-webkit-scrollbar { width: 5px; }
-.mc-list::-webkit-scrollbar-thumb {
-    background: var(--m-border-strong);
-    border-radius: 3px;
+    padding: 12px;
+    gap: 10px;
 }
 
-/* Card (blueprint §12 — item dentro de card 10px) */
-.mc-card {
+.mc-toolbar {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.mc-search {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+}
+.mc-search__icon {
+    position: absolute;
+    left: 12px;
+    color: var(--m-text-muted);
+    font-size: 0.78rem;
+    pointer-events: none;
+}
+.mc-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;
+}
+.mc-search__input::placeholder { color: var(--m-text-faint); }
+.mc-search__input:focus {
+    border-color: var(--m-border-strong);
+    background: var(--m-bg-medium);
+}
+.mc-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;
+}
+.mc-search__clear:hover {
+    background: var(--m-bg-soft-hover);
+    color: var(--m-text);
+}
+.mc-search__clear > i { font-size: 0.7rem; }
+
+.mc-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;
+}
+.mc-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;
+}
+.mc-view-toggle__btn:hover {
+    background: var(--m-bg-soft-hover);
+    color: var(--m-text);
+}
+.mc-view-toggle__btn.is-active {
+    background: var(--m-accent-soft);
+    color: var(--m-accent);
+}
+.mc-view-toggle__btn > i { font-size: 0.85rem; }
+
+/* ─── DataTable ─── */
+.mc-table {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+}
+.mc-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;
+}
+.mc-table :deep(.p-datatable-table-container) {
+    flex: 1;
+    min-height: 0;
+    background: transparent;
+}
+.mc-table :deep(.p-datatable-thead),
+.mc-table :deep(.p-datatable-thead > tr) {
+    background: transparent !important;
+}
+.mc-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);
+}
+.mc-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);
+}
+.mc-table :deep(.p-datatable-tbody > tr > td) {
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--m-border);
+    background: transparent;
+    vertical-align: middle;
+}
+.mc-table :deep(.p-datatable-tbody > tr:hover) {
+    background: var(--m-bg-soft-hover);
+}
+.mc-table :deep(.p-datatable-tbody > tr.p-datatable-row-selected) {
+    background: var(--m-accent-soft);
+}
+/* Border-left por status */
+.mc-table :deep(.p-datatable-tbody > tr.is-ok)   { border-left-color: rgb(22, 163, 74); }
+.mc-table :deep(.p-datatable-tbody > tr.is-warn) { border-left-color: rgb(217, 119, 6); opacity: 0.85; }
+
+.mc-table :deep(.p-datatable-loading-overlay) {
+    background: color-mix(in srgb, var(--m-bg-medium) 70%, transparent);
+    backdrop-filter: blur(2px);
+}
+.mc-table__loading {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--m-text);
+    font-size: 0.85rem;
+}
+
+/* Paginator (DataTable interno) */
+.mc-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;
+}
+.mc-table :deep(.p-paginator-current) {
+    color: var(--m-text-muted);
+    font-size: 0.78rem;
+    background: transparent;
+    border: none;
+    padding: 0 6px;
+}
+.mc-table :deep(.p-paginator-first),
+.mc-table :deep(.p-paginator-prev),
+.mc-table :deep(.p-paginator-next),
+.mc-table :deep(.p-paginator-last),
+.mc-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;
+}
+.mc-table :deep(.p-paginator-page.p-paginator-page-selected) {
+    background: var(--m-accent-soft);
+    border-color: var(--m-accent-strong);
+    color: var(--m-accent);
+}
+.mc-table :deep(.p-paginator-first:not(.p-disabled):hover),
+.mc-table :deep(.p-paginator-prev:not(.p-disabled):hover),
+.mc-table :deep(.p-paginator-next:not(.p-disabled):hover),
+.mc-table :deep(.p-paginator-last:not(.p-disabled):hover),
+.mc-table :deep(.p-paginator-page:not(.p-paginator-page-selected):hover) {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+}
+.mc-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;
+}
+.mc-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ções" — bg sólido em ambos modos */
+.mc-table :deep(td.p-datatable-frozen-column),
+.mc-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;
+}
+.mc-table :deep(.p-datatable-tbody > tr:hover td.p-datatable-frozen-column) {
+    background: var(--m-bg-soft-hover);
+}
+.mc-table :deep(.p-datatable-tbody > tr.p-datatable-row-selected td.p-datatable-frozen-column) {
+    background: var(--m-accent-soft);
+}
+
+/* ─── Row content (design preservado do card antigo) ─── */
+.mc-row__commit {
     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;
+    min-width: 0;
 }
-.mc-card:hover {
-    background: var(--m-bg-soft-hover);
-    border-color: var(--m-border-strong);
-    transform: translateY(-1px);
-}
-.mc-card.is-inactive { opacity: 0.6; }
-.mc-card--skeleton { cursor: default; pointer-events: none; opacity: 0.95; }
-.mc-card--skeleton:hover { background: var(--m-bg-soft); transform: none; }
-
-.mc-card__color {
+.mc-row__commit.is-inactive { opacity: 0.65; }
+.mc-row__color {
     width: 6px;
     height: 40px;
     border-radius: 3px;
     flex-shrink: 0;
 }
-.mc-card__main {
+.mc-row__main {
     flex: 1;
     min-width: 0;
     display: flex;
     flex-direction: column;
     gap: 2px;
 }
-.mc-card__name-row {
+.mc-row__name-row {
     display: flex;
     align-items: center;
     gap: 8px;
     flex-wrap: wrap;
 }
-.mc-card__name {
+.mc-row__name {
     font-size: 0.92rem;
     font-weight: 600;
     color: var(--m-text);
@@ -929,28 +1529,29 @@ function clearSearch() { filters.global.value = null; }
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-.mc-card__desc {
+.mc-row__desc {
     font-size: 0.78rem;
     color: var(--m-text-muted);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    margin-top: 2px;
 }
-.mc-card__meta {
+.mc-row__meta {
     display: flex;
-    gap: 14px;
-    margin-top: 4px;
-    font-size: 0.7rem;
+    flex-direction: column;
+    gap: 4px;
+    font-size: 0.75rem;
     color: var(--m-text-muted);
 }
-.mc-card__meta-item {
+.mc-row__meta-item {
     display: inline-flex;
     align-items: center;
     gap: 5px;
 }
-.mc-card__meta-item > i { font-size: 0.7rem; }
+.mc-row__meta-item > i { font-size: 0.7rem; }
 
-.mc-card__badge {
+.mc-row__badge {
     display: inline-flex;
     align-items: center;
     gap: 4px;
@@ -960,58 +1561,257 @@ function clearSearch() { filters.global.value = null; }
     border-radius: 999px;
     text-transform: uppercase;
     letter-spacing: 0.04em;
+    border: 1px solid;
+    flex-shrink: 0;
 }
-.mc-card__badge--native {
-    color: rgb(96, 165, 250);
-    background: rgba(96, 165, 250, 0.12);
-    border: 1px solid rgba(96, 165, 250, 0.3);
+.mc-row__badge--native {
+    color: rgb(37, 99, 235);
+    background: rgba(37, 99, 235, 0.12);
+    border-color: rgba(37, 99, 235, 0.3);
 }
-.mc-card__badge--off {
+.mc-row__badge--off {
     color: var(--m-text-muted);
     background: var(--m-bg-medium);
-    border: 1px solid var(--m-border);
+    border-color: var(--m-border);
 }
-.mc-card__badge > i { font-size: 0.55rem; }
+.mc-row__badge > i { font-size: 0.55rem; }
 
-.mc-card__actions {
+/* Coluna de ações — toggle + 2 botões pequenos */
+.mc-row__actions {
     display: flex;
     align-items: center;
+    justify-content: flex-end;
     gap: 6px;
     flex-shrink: 0;
 }
-.mc-card__btn {
+.mc-row__btn {
     width: 28px;
     height: 28px;
     display: grid;
     place-items: center;
-    background: transparent;
+    background: var(--p-content-background);
     border: 1px solid var(--m-border);
     color: var(--m-text-muted);
-    border-radius: 9px;
+    border-radius: 8px;
     cursor: pointer;
     font-family: inherit;
     transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
+    flex-shrink: 0;
 }
-.mc-card__btn:hover {
-    background: var(--m-bg-soft-hover);
-    color: var(--m-text);
+.mc-row__btn: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);
 }
-.mc-card__btn--danger:hover {
-    background: rgba(239, 68, 68, 0.15);
-    border-color: rgba(239, 68, 68, 0.4);
-    color: rgb(248, 113, 113);
+.mc-row__btn--danger:hover {
+    background: rgba(220, 38, 38, 0.12);
+    border-color: rgba(220, 38, 38, 0.5);
+    color: rgb(220, 38, 38);
 }
-.mc-card__btn:disabled { opacity: 0.4; cursor: not-allowed; }
-.mc-card__btn > i { font-size: 0.7rem; }
+.mc-row__btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    background: transparent;
+    border-color: var(--m-border);
+    color: var(--m-text-muted);
+}
+.mc-row__btn:disabled:hover {
+    background: transparent;
+    border-color: var(--m-border);
+    color: var(--m-text-muted);
+}
+.mc-row__btn > i { font-size: 0.7rem; }
 
-/* Empty state (blueprint §12 — teto 12px) */
+/* ─── Grid view ─── */
+.mc-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;
+}
+.mc-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;
+}
+.mc-grid::-webkit-scrollbar { width: 5px; }
+.mc-grid::-webkit-scrollbar-thumb { background: var(--m-border-strong); border-radius: 3px; }
+.mc-grid__loading {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 32px;
+}
+.mc-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;
+}
+.mc-grid__card:hover {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+    transform: translateY(-1px);
+}
+.mc-grid__card:focus-visible {
+    outline: 2px solid var(--p-primary-color);
+    outline-offset: 2px;
+}
+.mc-grid__card.is-ok   { border-left-color: rgb(22, 163, 74); }
+.mc-grid__card.is-warn { border-left-color: rgb(217, 119, 6); }
+.mc-grid__card.is-inactive { opacity: 0.7; }
+
+.mc-grid__top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+}
+.mc-grid__color {
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    flex-shrink: 0;
+}
+.mc-grid__top-right {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+}
+.mc-grid__name-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-wrap: wrap;
+}
+.mc-grid__name {
+    font-size: 0.92rem;
+    font-weight: 600;
+    color: var(--m-text);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mc-grid__desc {
+    font-size: 0.78rem;
+    color: var(--m-text-muted);
+    line-height: 1.45;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+.mc-grid__meta {
+    display: flex;
+    gap: 12px;
+    font-size: 0.75rem;
+    color: var(--m-text-muted);
+    margin-top: auto;
+    padding-top: 4px;
+}
+.mc-grid__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 6px;
+    border-top: 1px solid var(--m-border);
+    padding-top: 8px;
+    margin-top: 4px;
+}
+
+/* Paginator standalone (grid view) */
+.mc-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;
+}
+.mc-paginator.p-paginator .p-paginator-current {
+    color: var(--m-text-muted);
+    font-size: 0.78rem;
+    background: transparent;
+    border: none;
+    padding: 0 6px;
+}
+.mc-paginator.p-paginator .p-paginator-first,
+.mc-paginator.p-paginator .p-paginator-prev,
+.mc-paginator.p-paginator .p-paginator-next,
+.mc-paginator.p-paginator .p-paginator-last,
+.mc-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;
+}
+.mc-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);
+}
+.mc-paginator.p-paginator .p-paginator-first:not(.p-disabled):hover,
+.mc-paginator.p-paginator .p-paginator-prev:not(.p-disabled):hover,
+.mc-paginator.p-paginator .p-paginator-next:not(.p-disabled):hover,
+.mc-paginator.p-paginator .p-paginator-last:not(.p-disabled):hover,
+.mc-paginator.p-paginator .p-paginator-page:not(.p-paginator-page-selected):hover {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+}
+.mc-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;
+}
+.mc-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;
+}
+
+/* ─── Empty state ─── */
 .mc-empty {
     margin: 24px 0;
     padding: 56px 28px;
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
     text-align: center;
     color: var(--m-text-muted);
     border: 2px dashed var(--m-border-strong);
@@ -1019,48 +1819,15 @@ function clearSearch() { filters.global.value = null; }
     background: color-mix(in srgb, var(--m-bg-soft) 40%, transparent);
     gap: 8px;
 }
-.mc-empty__icon {
-    font-size: 2rem;
-    color: var(--m-text-faint);
-    margin-bottom: 4px;
-}
-.mc-empty__title {
-    font-size: 0.92rem;
-    font-weight: 600;
-    color: var(--m-text);
-}
-.mc-empty__hint {
-    font-size: 0.78rem;
-    color: var(--m-text-muted);
-    margin-bottom: 8px;
-}
+.mc-empty__icon { font-size: 2rem; color: var(--m-text-faint); margin-bottom: 4px; }
+.mc-empty__title { font-size: 0.92rem; font-weight: 600; color: var(--m-text); }
+.mc-empty__hint { font-size: 0.78rem; }
+.mc-empty__btn { margin-top: 8px; }
 
-/* Popover de Ações (blueprint §10) */
-.mc-actions {
-    display: flex;
-    flex-direction: column;
-    gap: 14px;
-    min-width: 240px;
-    padding: 4px;
-}
-.mc-actions__group {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-}
-.mc-actions__label {
-    text-transform: uppercase;
-    letter-spacing: 0.14em;
-    color: var(--text-color-secondary, var(--m-text-faint));
-    font-size: 0.62rem;
-    font-weight: 600;
-}
-
-/* Drawer mobile (blueprint §6) */
+/* ─── Drawer mobile ─── */
 .mc-mobile-drawer {
     position: fixed;
-    top: 0;
-    left: 0;
+    top: 0; left: 0;
     height: 100vh;
     height: 100dvh;
     width: min(360px, 88vw);
@@ -1078,27 +1845,52 @@ function clearSearch() { filters.global.value = null; }
 .mc-mobile-drawer__scroll {
     height: 100%;
     overflow-y: auto;
-    overflow-x: hidden;
     padding: 12px 12px 24px;
     display: flex;
     flex-direction: column;
     gap: 12px;
-    scrollbar-width: thin;
-    scrollbar-color: var(--m-border-strong) transparent;
 }
 .mc-mobile-drawer__scroll::-webkit-scrollbar { width: 5px; }
 .mc-mobile-drawer__scroll::-webkit-scrollbar-thumb {
     background: var(--m-border-strong);
     border-radius: 3px;
 }
+/* Em mobile a sidebar é teleportada pro drawer. O drawer tem seu próprio
+   scroll (.mc-mobile-drawer__scroll), então a .mc-side e o .mc-side__scroll
+   não devem ter overflow/altura próprios — viram containers passivos.
+   O .mc-side__footer mantém o "Limpar filtros" sempre visível no bottom
+   do drawer via position: sticky. */
 .mc-mobile-drawer__scroll .mc-side {
     width: 100%;
     height: auto;
     overflow: visible;
     padding: 0;
-    flex-shrink: 0;
+    background: transparent;
+    border-right: none;
+}
+.mc-mobile-drawer__scroll .mc-side__scroll {
+    flex: none;
+    min-height: 0;
+    overflow: visible;
+    display: flex;
+    flex-direction: column;
+}
+.mc-mobile-drawer__scroll .mc-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;
+}
+.mc-mobile-drawer__scroll .mc-w--side {
+    margin: 0 0 12px;
+}
+.mc-mobile-drawer__scroll .mc-w--side:last-of-type {
+    margin-bottom: 0;
 }
-
 .mc-mobile-drawer__backdrop {
     position: fixed;
     inset: 0;
@@ -1112,20 +1904,12 @@ function clearSearch() { filters.global.value = null; }
 .mc-drawer-fade-enter-from,
 .mc-drawer-fade-leave-to { opacity: 0; }
 
-/* ═══ Compact (<xl) — botão "Ações" e remover busca inline da side ═══ */
-@media (max-width: 1279px) {
-    .mc-head-btn--compact-only { display: grid; }
-    .mc-act-btn--primary span { display: inline; } /* mantém label "Novo" */
-}
-
-/* ═══ Mobile (<lg) — drawer + lista 100% ═══ */
+/* ─── Mobile (<1024px) ─── */
 @media (max-width: 1023px) {
-    .mc-body { flex-direction: column; padding: 8px; }
-    .mc-main { width: 100%; }
+    .mc-body { flex-direction: column; padding: 0; }
+    .mc-main { width: 100%; padding: 8px; }
     .mc-page__title > span:first-of-type { display: none; }
     .mc-menu-btn--mobile-only { display: inline-flex; }
-    .mc-card__actions { gap: 4px; }
-    .mc-card__desc { white-space: normal; }
     /* Em mobile o "Novo" só ícone pra economizar espaço */
     .mc-act-btn--primary span { display: none; }
     .mc-act-btn--primary { width: 32px; padding: 0; justify-content: center; }
diff --git a/src/layout/melissa/MelissaConversas.vue b/src/layout/melissa/MelissaConversas.vue
index ab2cafe..68af74a 100644
--- a/src/layout/melissa/MelissaConversas.vue
+++ b/src/layout/melissa/MelissaConversas.vue
@@ -148,6 +148,19 @@ const carregandoInicial = computed(
 
 const unlinkedCount = computed(() => filteredThreads.value.filter((t) => !t.patient_id).length);
 
+// ── "Limpar filtros" global (footer fixo da sidebar) ─────────────
+// `filters` é um ref({...}) (vide useConversations.js). No script
+// preciso acessar via .value; no template o auto-unwrap cuida.
+const hasActiveFilters = computed(() =>
+    !!(filters.value.search || filters.value.unreadOnly || filters.value.assigned || filters.value.channel)
+);
+function clearAllFilters() {
+    filters.value.search = '';
+    filters.value.unreadOnly = false;
+    filters.value.assigned = null;
+    filters.value.channel = null;
+}
+
 // Popover de Ações (compact)
 const actionsPopRef = ref(null);
 function openActions(e) { actionsPopRef.value?.toggle(e); }
@@ -266,119 +279,172 @@ watch(() => tenantStore.activeTenantId, async () => {
             </div>
         </Popover>
 
+        <!-- Subheader explicativo (blueprint §9) — diferencia de
+             outras páginas Melissa que mostram listas tabulares. -->
+        <div class="mw-subheader">
+            <i class="pi pi-info-circle mw-subheader__icon" />
+            <span class="mw-subheader__text">
+                CRM de mensagens organizado em <strong>kanban por urgência</strong>:
+                Urgente / Aguardando resposta / Aguardando paciente / Resolvido.
+                Click num card abre a conversa no painel lateral.
+            </span>
+        </div>
+
         <div class="mw-body">
             <!-- ═══ COL 1: Filtros + atribuição + canais + status ═══ -->
             <Teleport to="#mw-mobile-drawer-target" :disabled="!isMobile">
             <aside class="mw-side">
-                <!-- Filtros rápidos -->
-                <div class="mw-w">
-                    <div class="mw-w__head">
-                        <span class="mw-w__title"><i class="pi pi-filter" /> Filtros rápidos</span>
-                    </div>
-                    <div class="mw-side__list">
-                        <button
-                            class="mw-side__item"
-                            :class="{ 'is-active': !filters.unreadOnly && !filters.channel }"
-                            @click="filters.unreadOnly = false; filters.channel = null; filters.search = ''"
-                        >
-                            <i class="pi pi-list" />
-                            <span>Todas</span>
-                            <span class="mw-side__count">{{ summary.total }}</span>
-                        </button>
-                        <button
-                            class="mw-side__item"
-                            :class="{ 'is-active': filters.unreadOnly, 'is-warn': summary.unreadTotal > 0 }"
-                            @click="filters.unreadOnly = !filters.unreadOnly"
-                        >
-                            <i class="pi pi-bell" />
-                            <span>Não lidas</span>
-                            <span class="mw-side__count" :class="{ 'is-danger': summary.unreadTotal > 0 }">{{ summary.unreadTotal }}</span>
-                        </button>
-                    </div>
-                </div>
-
-                <!-- Atribuição -->
-                <div class="mw-w">
-                    <div class="mw-w__head">
-                        <span class="mw-w__title"><i class="pi pi-user" /> Atribuição</span>
-                    </div>
-                    <div class="mw-side__list">
-                        <button
-                            class="mw-side__item"
-                            :class="{ 'is-active': !filters.assigned }"
-                            @click="filters.assigned = null"
-                        >
-                            <i class="pi pi-list" />
-                            <span>Todas</span>
-                        </button>
-                        <button
-                            class="mw-side__item"
-                            :class="{ 'is-active': filters.assigned === 'me' }"
-                            @click="filters.assigned = 'me'"
-                        >
-                            <i class="pi pi-user" />
-                            <span>Minhas</span>
-                            <span class="mw-side__count">{{ mineCount }}</span>
-                        </button>
-                        <button
-                            class="mw-side__item"
-                            :class="{ 'is-active': filters.assigned === 'unassigned' }"
-                            @click="filters.assigned = 'unassigned'"
-                        >
-                            <i class="pi pi-user-minus" />
-                            <span>Não atribuídas</span>
-                            <span class="mw-side__count" :class="{ 'is-warn': unassignedCount > 0 }">{{ unassignedCount }}</span>
-                        </button>
-                    </div>
-                </div>
-
-                <!-- Por status (kanban resumo) -->
-                <div class="mw-w">
-                    <div class="mw-w__head">
-                        <span class="mw-w__title"><i class="pi pi-chart-bar" /> Por status</span>
-                    </div>
-                    <div class="mw-side__list">
-                        <div
-                            v-for="col in KANBAN_COLUMNS"
-                            :key="col.key"
-                            class="mw-side__row"
-                            :class="`is-${col.color}`"
-                        >
-                            <i :class="col.icon" />
-                            <span>{{ col.label }}</span>
-                            <span class="mw-side__count">{{ summary[col.key] || 0 }}</span>
+                <div class="mw-side__scroll">
+                    <!-- Alerta unlinked — no topo pra ficar bem visível
+                         (números de telefone sem paciente vinculado). -->
+                    <div v-if="unlinkedCount > 0" class="mw-alert">
+                        <i class="pi pi-exclamation-circle" />
+                        <div>
+                            <div class="mw-alert__title">{{ unlinkedCount }} sem paciente vinculado</div>
+                            <div class="mw-alert__hint">Números de telefone que não batem com pacientes cadastrados.</div>
                         </div>
                     </div>
+
+                    <!-- Filtros rápidos -->
+                    <div class="mw-w mw-w--side">
+                        <div class="mw-w__head">
+                            <span class="mw-w__title"><i class="pi pi-filter" /> Filtros rápidos</span>
+                            <button
+                                v-if="filters.unreadOnly"
+                                class="mw-side__clear-inline"
+                                v-tooltip.top="'Limpar filtro de não lidas'"
+                                aria-label="Limpar filtro de não lidas"
+                                @click="filters.unreadOnly = false"
+                            >
+                                <i class="pi pi-times" />
+                            </button>
+                        </div>
+                        <div class="mw-side__list">
+                            <button
+                                class="mw-side__item"
+                                :class="{ 'is-active': !filters.unreadOnly }"
+                                @click="filters.unreadOnly = false"
+                            >
+                                <i class="pi pi-list" />
+                                <span>Todas</span>
+                                <span class="mw-side__count">{{ summary.total }}</span>
+                            </button>
+                            <button
+                                class="mw-side__item"
+                                :class="{ 'is-active': filters.unreadOnly, 'is-warn': summary.unreadTotal > 0 }"
+                                @click="filters.unreadOnly = !filters.unreadOnly"
+                            >
+                                <i class="pi pi-bell" />
+                                <span>Não lidas</span>
+                                <span class="mw-side__count" :class="{ 'is-danger': summary.unreadTotal > 0 }">{{ summary.unreadTotal }}</span>
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Atribuição -->
+                    <div class="mw-w mw-w--side">
+                        <div class="mw-w__head">
+                            <span class="mw-w__title"><i class="pi pi-user" /> Atribuição</span>
+                            <button
+                                v-if="filters.assigned"
+                                class="mw-side__clear-inline"
+                                v-tooltip.top="'Limpar filtro de atribuição'"
+                                aria-label="Limpar filtro de atribuição"
+                                @click="filters.assigned = null"
+                            >
+                                <i class="pi pi-times" />
+                            </button>
+                        </div>
+                        <div class="mw-side__list">
+                            <button
+                                class="mw-side__item"
+                                :class="{ 'is-active': !filters.assigned }"
+                                @click="filters.assigned = null"
+                            >
+                                <i class="pi pi-list" />
+                                <span>Todas</span>
+                            </button>
+                            <button
+                                class="mw-side__item"
+                                :class="{ 'is-active': filters.assigned === 'me' }"
+                                @click="filters.assigned = 'me'"
+                            >
+                                <i class="pi pi-user" />
+                                <span>Minhas</span>
+                                <span class="mw-side__count">{{ mineCount }}</span>
+                            </button>
+                            <button
+                                class="mw-side__item"
+                                :class="{ 'is-active': filters.assigned === 'unassigned' }"
+                                @click="filters.assigned = 'unassigned'"
+                            >
+                                <i class="pi pi-user-minus" />
+                                <span>Não atribuídas</span>
+                                <span class="mw-side__count" :class="{ 'is-warn': unassignedCount > 0 }">{{ unassignedCount }}</span>
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Por status (kanban resumo — display-only, sem X) -->
+                    <div class="mw-w mw-w--side">
+                        <div class="mw-w__head">
+                            <span class="mw-w__title"><i class="pi pi-chart-bar" /> Por status</span>
+                        </div>
+                        <div class="mw-side__list">
+                            <div
+                                v-for="col in KANBAN_COLUMNS"
+                                :key="col.key"
+                                class="mw-side__row"
+                                :class="`is-${col.color}`"
+                            >
+                                <i :class="col.icon" />
+                                <span>{{ col.label }}</span>
+                                <span class="mw-side__count">{{ summary[col.key] || 0 }}</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Canais -->
+                    <div class="mw-w mw-w--side">
+                        <div class="mw-w__head">
+                            <span class="mw-w__title"><i class="pi pi-send" /> Canais</span>
+                            <button
+                                v-if="filters.channel"
+                                class="mw-side__clear-inline"
+                                v-tooltip.top="'Limpar filtro de canal'"
+                                aria-label="Limpar filtro de canal"
+                                @click="filters.channel = null"
+                            >
+                                <i class="pi pi-times" />
+                            </button>
+                        </div>
+                        <div class="mw-side__list">
+                            <button
+                                v-for="opt in CHANNEL_OPTIONS"
+                                :key="String(opt.value)"
+                                class="mw-side__item"
+                                :class="{ 'is-active': filters.channel === opt.value }"
+                                @click="filters.channel = opt.value"
+                            >
+                                <i v-if="opt.value" :class="['pi', channelIcon(opt.value)]" />
+                                <i v-else class="pi pi-list" />
+                                <span>{{ opt.label }}</span>
+                            </button>
+                        </div>
+                    </div>
+
                 </div>
 
-                <!-- Canais -->
-                <div class="mw-w">
-                    <div class="mw-w__head">
-                        <span class="mw-w__title"><i class="pi pi-send" /> Canais</span>
-                    </div>
-                    <div class="mw-side__list">
-                        <button
-                            v-for="opt in CHANNEL_OPTIONS"
-                            :key="String(opt.value)"
-                            class="mw-side__item"
-                            :class="{ 'is-active': filters.channel === opt.value }"
-                            @click="filters.channel = opt.value"
-                        >
-                            <i v-if="opt.value" :class="['pi', channelIcon(opt.value)]" />
-                            <i v-else class="pi pi-list" />
-                            <span>{{ opt.label }}</span>
+                <!-- Footer fixo: "Limpar filtros" global (zera busca,
+                     unread, atribuição e canal de uma vez). -->
+                <Transition name="mw-clear">
+                    <div v-if="hasActiveFilters" class="mw-side__footer">
+                        <button class="mw-side__clear-all" @click="clearAllFilters">
+                            <i class="pi pi-filter-slash" />
+                            <span>Limpar filtros</span>
                         </button>
                     </div>
-                </div>
-
-                <!-- Alerta unlinked -->
-                <div v-if="unlinkedCount > 0" class="mw-alert">
-                    <i class="pi pi-exclamation-circle" />
-                    <div>
-                        <div class="mw-alert__title">{{ unlinkedCount }} sem paciente vinculado</div>
-                        <div class="mw-alert__hint">Números de telefone que não batem com pacientes cadastrados.</div>
-                    </div>
-                </div>
+                </Transition>
             </aside>
             </Teleport>
 
@@ -611,42 +677,166 @@ watch(() => tenantStore.activeTenantId, async () => {
 }
 .mw-menu-btn > i { font-size: 0.85rem; }
 
-/* Body */
+/* Subheader explicativo (blueprint §9) */
+.mw-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;
+}
+.mw-subheader__icon {
+    color: var(--p-primary-color);
+    font-size: 0.92rem;
+    flex-shrink: 0;
+    margin-top: 1px;
+}
+.mw-subheader__text { flex: 1; min-width: 0; }
+.mw-subheader__text strong { color: var(--m-text); font-weight: 600; }
+
+/* Body — sem padding/gap; a sidebar tem bg+border-right próprios e o
+   main column controla seu padding interno. Espelha o pattern usado
+   em MelissaGrupos / MelissaTags / MelissaMedicos. */
 .mw-body {
     flex: 1;
     display: flex;
     min-height: 0;
     position: relative;
-    gap: 12px;
-    padding: 12px;
+    gap: 0;
+    padding: 0;
 }
 
-/* Aside */
+/* Aside — 2 zonas: __scroll (cards) + __footer (Limpar filtros fixo).
+   bg colorido próprio (--m-bg-soft) + border-right pra separar
+   visualmente da coluna principal. */
 .mw-side {
     width: 280px;
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    background: var(--m-bg-soft);
+    border-right: 1px solid var(--m-border);
+    overflow: hidden;
+}
+.mw-side__scroll {
+    flex: 1;
+    min-height: 0;
     overflow-y: auto;
+    display: flex;
+    flex-direction: column;
     scrollbar-width: thin;
     scrollbar-color: var(--m-border-strong) transparent;
 }
-.mw-side::-webkit-scrollbar { width: 5px; }
-.mw-side::-webkit-scrollbar-thumb {
+.mw-side__scroll::-webkit-scrollbar { width: 5px; }
+.mw-side__scroll::-webkit-scrollbar-thumb {
     background: var(--m-border-strong);
     border-radius: 3px;
 }
 
+/* Footer fixo no bottom da sidebar (fora do scroll dos filter cards).
+   Aparece com fade+collapse quando algum filtro está ativo. */
+.mw-side__footer {
+    flex-shrink: 0;
+    padding: 12px;
+    background: var(--m-bg-soft);
+    border-top: 1px solid var(--m-border);
+}
+.mw-side__clear-all {
+    width: 100%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 9px 12px;
+    background: var(--m-bg-medium);
+    border: 1px solid var(--m-border);
+    color: var(--m-text);
+    border-radius: 10px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.78rem;
+    font-weight: 600;
+    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
+}
+.mw-side__clear-all:hover {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+    color: var(--m-text);
+}
+.mw-side__clear-all > i {
+    font-size: 0.78rem;
+    color: var(--m-text-muted);
+    transition: color 140ms ease;
+}
+.mw-side__clear-all:hover > i { color: var(--m-text); }
+
+/* X inline ao lado do título de cada filter card — limpa o filtro
+   individual. Espelha o pattern do MelissaPacientes/Grupos/Tags. */
+.mw-side__clear-inline {
+    width: 18px;
+    height: 18px;
+    display: grid;
+    place-items: center;
+    background: transparent;
+    border: 1px solid color-mix(in srgb, rgb(220, 38, 38) 30%, var(--m-border));
+    color: rgb(220, 38, 38);
+    border-radius: 4px;
+    cursor: pointer;
+    font-family: inherit;
+    transition: background-color 140ms ease, border-color 140ms ease;
+}
+.mw-side__clear-inline:hover {
+    background: rgba(220, 38, 38, 0.10);
+    border-color: rgba(220, 38, 38, 0.55);
+}
+.mw-side__clear-inline > i { font-size: 0.6rem; }
+
+/* Transition do footer "Limpar filtros" */
+.mw-clear-enter-active,
+.mw-clear-leave-active {
+    transition: opacity 220ms ease, transform 220ms ease, max-height 240ms ease;
+    overflow: hidden;
+}
+.mw-clear-enter-from,
+.mw-clear-leave-to {
+    opacity: 0;
+    transform: translateY(6px);
+    max-height: 0;
+}
+.mw-clear-enter-to,
+.mw-clear-leave-from {
+    opacity: 1;
+    transform: translateY(0);
+    max-height: 80px;
+}
+
 /* Card-base — alinhado com .ma-w / .mp-w / .mcr-w: surface --m-bg-medium
-   pra destacar do bg da página/dialog (ambos --m-bg-soft). */
+   pra destacar do bg da sidebar (--m-bg-soft). */
 .mw-w {
     background: var(--m-bg-medium);
     border: 1px solid var(--m-border);
     border-radius: 12px;
     padding: 12px;
 }
-.mw-w__head { margin-bottom: 10px; }
+/* Modifier pros cards dentro da .mw-side — margem lateral + sombra
+   sutil pra elevar sobre o bg da sidebar. Espelha .mc-w--side, .mt-w--side. */
+.mw-w--side {
+    margin: 12px 12px 0;
+    flex-shrink: 0;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+}
+.mw-w--side:last-of-type { margin-bottom: 12px; }
+.mw-w__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+}
 .mw-w__title {
     display: inline-flex;
     align-items: center;
@@ -734,12 +924,16 @@ watch(() => tenantStore.activeTenantId, async () => {
 .mw-alert {
     display: flex;
     gap: 10px;
+    margin: 12px 12px 0;
     padding: 12px;
     border-radius: 10px;
     border: 1px solid rgba(251, 191, 36, 0.3);
     background: rgba(251, 191, 36, 0.05);
     color: rgb(251, 191, 36);
+    flex-shrink: 0;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
 }
+.mw-alert:last-child { margin-bottom: 12px; }
 .mw-alert > i { font-size: 0.85rem; margin-top: 2px; }
 .mw-alert__title {
     font-size: 0.78rem;
@@ -751,13 +945,15 @@ watch(() => tenantStore.activeTenantId, async () => {
     margin-top: 2px;
 }
 
-/* Main */
+/* Main — recebe padding interno (o body não tem mais padding/gap;
+   sidebar fica colada à esquerda com border-right). */
 .mw-main {
     flex: 1;
     min-width: 0;
     overflow: hidden;
     display: flex;
     flex-direction: column;
+    padding: 12px;
 }
 
 /* Kanban */
@@ -1009,11 +1205,40 @@ watch(() => tenantStore.activeTenantId, async () => {
     background: var(--m-border-strong);
     border-radius: 3px;
 }
+/* Sidebar teleportada pro drawer — perde bg/border-right (o drawer
+   já tem chrome próprio) + cards perdem margem lateral (drawer já
+   tem padding). Footer vira sticky no bottom do drawer. */
 .mw-mobile-drawer__scroll .mw-side {
     width: 100%;
     height: auto;
     overflow: visible;
     padding: 0;
+    background: transparent;
+    border-right: none;
+}
+.mw-mobile-drawer__scroll .mw-side__scroll {
+    flex: none;
+    min-height: 0;
+    overflow: visible;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+.mw-mobile-drawer__scroll .mw-w--side {
+    margin: 0;
+}
+.mw-mobile-drawer__scroll .mw-w--side:last-of-type { margin-bottom: 0; }
+.mw-mobile-drawer__scroll .mw-alert { margin: 0; }
+.mw-mobile-drawer__scroll .mw-side__footer {
+    position: sticky;
+    bottom: 0;
+    margin: 8px -12px -24px;
+    padding: 12px;
+    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;
 }
 .mw-mobile-drawer__backdrop {
     position: fixed;
@@ -1035,12 +1260,32 @@ watch(() => tenantStore.activeTenantId, async () => {
     .mw-kanban { grid-template-columns: repeat(2, 1fr); }
 }
 
-/* ═══ Mobile (<lg) — drawer + kanban 1-col ═══ */
+/* ═══ Mobile (<lg) — drawer + kanban 1-col stacked ═══
+   Em mobile o kanban vira flex column (stacked) e o scroll passa a ser
+   global no .mw-main (não interno por coluna). Cada .mw-col cresce com
+   o conteúdo + min-height pra empty state ter altura visível. */
 @media (max-width: 1023px) {
-    .mw-body { flex-direction: column; padding: 8px; }
-    .mw-main { width: 100%; }
-    .mw-kanban { grid-template-columns: 1fr; }
-    .mw-col { min-height: auto; }
+    .mw-body { flex-direction: column; padding: 0; }
+    .mw-main {
+        width: 100%;
+        padding: 8px;
+        overflow-y: auto;
+    }
+    .mw-kanban {
+        display: flex;
+        flex-direction: column;
+        flex: none;
+        gap: 8px;
+    }
+    .mw-col {
+        flex: none;
+        min-height: 200px;
+    }
+    .mw-col__body {
+        flex: none;
+        overflow: visible;
+        min-height: 80px;
+    }
     .mw-page__title > span:first-of-type { display: none; }
     .mw-menu-btn--mobile-only { display: inline-flex; }
 }
diff --git a/src/layout/melissa/MelissaGrupos.vue b/src/layout/melissa/MelissaGrupos.vue
index c9e0b12..a34c87d 100644
--- a/src/layout/melissa/MelissaGrupos.vue
+++ b/src/layout/melissa/MelissaGrupos.vue
@@ -1,27 +1,31 @@
 <script setup>
 /*
- * MelissaGrupos — CRUD de grupos de pacientes dentro de Melissa.
- * Segue blueprint melissa-page-blueprint.md.
+ * MelissaGrupos — Grupos de pacientes (CRUD).
+ * Segue blueprint melissa-table-page-blueprint.md (DataTable + sidebar com
+ * filtros coloridos, view toggle list/grade, subheader explicativo, footer
+ * fixo com "Limpar filtros", Xs inline pra zerar filtro individual).
  *
- * Layout 2-col (espelha MelissaTags):
- *   - COL 1 — Aside (~280px): stats + busca
- *   - COL 2 — Lista de grupos (cor + nome + contagem de pacientes)
+ * Tabela: patient_groups; vínculo: patient_group_patient. Sem view agregada
+ * — contagem feita no client após carregar vínculos.
  *
- * Tabela: patient_groups, vínculo: patient_group_patient.
- * Sem view agregada — contagem feita no client após carregar vínculos.
+ * Row design preservado: dot colorido grande + nome + badge "Sistema" +
+ * contagem de pacientes na lista; coluna "Ações" frozen 100px com pencil
+ * e trash (ocultos em is_system).
  */
-import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+import { ref, reactive, 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 PatientCadastroDialog from '@/components/ui/PatientCadastroDialog.vue';
+// DataTable/Column/Paginator/Dialog/InputText/Button: auto via PrimeVueResolver
 
 const emit = defineEmits(['close']);
 const toast = useToast();
 const confirm = useConfirm();
 const tenantStore = useTenantStore();
 
-// ── Breakpoints + drawer ───────────────────────────────────
+// ── Breakpoints + drawer ──────────────────────────────────
 const drawerOpen = ref(false);
 const isMobile = ref(false);
 let _mqMobile = null;
@@ -37,11 +41,100 @@ const loading = ref(false);
 const saving = ref(false);
 const grupos = ref([]);
 const counts = ref(new Map()); // groupId → patient count
+
 const busca = ref('');
-const carregandoInicial = computed(
-    () => loading.value && grupos.value.length === 0
+const tipoFilter = ref('');   // '' | 'system' | 'mine'
+const usoFilter = ref('');    // '' | 'em_uso' | 'vazio'
+
+// ── Helpers de status (rowClass) ──────────────────────────
+function rowStatusClass(g) {
+    if (!g) return '';
+    if (g.is_system) return 'is-system';
+    if (g.pacientes_count > 0) return 'is-em-uso';
+    return 'is-vazio';
+}
+
+// ── Stats ─────────────────────────────────────────────────
+const stats = computed(() => {
+    const all = grupos.value;
+    const meus = all.filter((g) => !g.is_system).length;
+    const sistema = all.filter((g) => g.is_system).length;
+    const emUso = all.filter((g) => (g.pacientes_count || 0) > 0).length;
+    return [
+        { key: 'total', label: 'Total', value: all.length, cls: 'neutral' },
+        { key: 'meus', label: 'Meus', value: meus, cls: meus > 0 ? 'accent' : 'neutral' },
+        { key: 'uso', label: 'Em uso', value: emUso, cls: emUso > 0 ? 'ok' : 'neutral' },
+        { key: 'sistema', label: 'Sistema', value: sistema, cls: sistema > 0 ? 'info' : 'neutral' }
+    ];
+});
+
+const TIPO_FILTER_OPTIONS = [
+    { key: 'system', label: 'Sistema', icon: 'pi pi-shield' },
+    { key: 'mine', label: 'Meus', icon: 'pi pi-user' }
+];
+const USO_FILTER_OPTIONS = [
+    { key: 'em_uso', label: 'Em uso', icon: 'pi pi-users' },
+    { key: 'vazio', label: 'Vazios', icon: 'pi pi-circle' }
+];
+
+function toggleTipoFilter(t) {
+    tipoFilter.value = tipoFilter.value === t ? '' : t;
+}
+function toggleUsoFilter(u) {
+    usoFilter.value = usoFilter.value === u ? '' : u;
+}
+
+const hasActiveFilters = computed(() =>
+    !!(busca.value || tipoFilter.value || usoFilter.value)
+);
+function clearAllFilters() {
+    busca.value = '';
+    tipoFilter.value = '';
+    usoFilter.value = '';
+}
+
+// ── Filtragem ─────────────────────────────────────────────
+const filtered = computed(() => {
+    let list = grupos.value;
+    if (tipoFilter.value === 'system') list = list.filter((g) => !!g.is_system);
+    if (tipoFilter.value === 'mine') list = list.filter((g) => !g.is_system);
+    if (usoFilter.value === 'em_uso') list = list.filter((g) => (g.pacientes_count || 0) > 0);
+    if (usoFilter.value === 'vazio') list = list.filter((g) => (g.pacientes_count || 0) === 0);
+    const q = String(busca.value || '').trim().toLowerCase();
+    if (q) {
+        list = list.filter((g) => String(g.nome || '').toLowerCase().includes(q));
+    }
+    return list;
+});
+
+// ── Paginação compartilhada (DataTable + grid) ────────────
+const PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
+const rowsMG = ref(10);
+const firstMG = ref(0);
+function onPage(event) {
+    firstMG.value = event.first;
+    rowsMG.value = event.rows;
+}
+watch([busca, tipoFilter, usoFilter], () => { firstMG.value = 0; });
+
+const pagedItems = computed(() =>
+    filtered.value.slice(firstMG.value, firstMG.value + rowsMG.value)
 );
 
+// ── View mode (list / grid) ───────────────────────────────
+const VIEW_MODE_KEY = 'mg.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 */ }
+}
+
+// ── Auth/tenant ───────────────────────────────────────────
 async function getOwnerId() {
     const { data } = await supabase.auth.getUser();
     if (!data?.user?.id) throw new Error('Sessão não inicializada.');
@@ -54,12 +147,11 @@ async function getTenantId() {
     return tid;
 }
 
+// ── Fetch ─────────────────────────────────────────────────
 async function load() {
     loading.value = true;
     try {
-        const ownerId = await getOwnerId();
         const tenantId = await getTenantId();
-
         const [{ data: gData, error: gErr }, { data: vData }] = await Promise.all([
             supabase.from('patient_groups')
                 .select('id, owner_id, tenant_id, nome, cor, is_system, is_active, created_at')
@@ -69,7 +161,7 @@ async function load() {
         ]);
         if (gErr) throw gErr;
 
-        // Conta vínculos por grupo no client
+        // Conta vínculos por grupo no client.
         const map = new Map();
         for (const v of vData || []) {
             const id = v.patient_group_id;
@@ -87,27 +179,19 @@ async function load() {
     }
 }
 
-const stats = computed(() => {
-    const all = grupos.value;
-    const ativos = all.filter((g) => g.is_active !== false).length;
-    const sistema = all.filter((g) => g.is_system).length;
-    const meus = all.filter((g) => !g.is_system).length;
-    const emUso = all.filter((g) => g.pacientes_count > 0).length;
-    return [
-        { key: 'total', label: 'Total', value: all.length, cls: 'neutral' },
-        { key: 'meus', label: 'Meus', value: meus, cls: meus > 0 ? 'ok' : 'neutral' },
-        { key: 'uso', label: 'Em uso', value: emUso, cls: emUso > 0 ? 'ok' : 'neutral' },
-        { key: 'sistema', label: 'Sistema', value: sistema, cls: 'neutral' }
-    ];
+onMounted(() => {
+    if (typeof window !== 'undefined' && window.matchMedia) {
+        _mqMobile = window.matchMedia('(max-width: 1023px)');
+        isMobile.value = _mqMobile.matches;
+        _mqMobile.addEventListener('change', _onMqMobileChange);
+    }
+    load();
+});
+onBeforeUnmount(() => {
+    if (_mqMobile) _mqMobile.removeEventListener('change', _onMqMobileChange);
 });
 
-const gruposFiltrados = computed(() => {
-    const q = String(busca.value || '').trim().toLowerCase();
-    if (!q) return grupos.value;
-    return grupos.value.filter((g) => String(g.nome || '').toLowerCase().includes(q));
-});
-
-// Dialog
+// ── CRUD ──────────────────────────────────────────────────
 const dlgOpen = ref(false);
 const dlgMode = ref('create');
 const dlgForm = ref({ id: '', nome: '', cor: '#6366F1' });
@@ -134,6 +218,9 @@ function abrirEditar(row) {
     dlgError.value = '';
     dlgOpen.value = true;
 }
+function onRowClick(event) {
+    if (event?.data && !event.data.is_system) abrirEditar(event.data);
+}
 
 async function salvar() {
     const nome = String(dlgForm.value.nome || '').trim();
@@ -198,16 +285,93 @@ async function excluir(row) {
     }
 }
 
-onMounted(() => {
-    if (typeof window !== 'undefined' && window.matchMedia) {
-        _mqMobile = window.matchMedia('(max-width: 1023px)');
-        isMobile.value = _mqMobile.matches;
-        _mqMobile.addEventListener('change', _onMqMobileChange);
-    }
-    load();
+// ── Helpers de formatação (pra dialog "Pacientes do grupo") ─────
+function initials(name) {
+    const parts = String(name || '').trim().split(/\s+/).filter(Boolean);
+    if (!parts.length) return '—';
+    if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+function fmtPhone(v) {
+    const d = String(v ?? '').replace(/\D/g, '');
+    if (!d) return '—';
+    if (d.length === 11) return `(${d.slice(0, 2)}) ${d.slice(2, 7)}-${d.slice(7)}`;
+    if (d.length === 10) return `(${d.slice(0, 2)}) ${d.slice(2, 6)}-${d.slice(6)}`;
+    return d;
+}
+
+// ── Dialog: Pacientes do grupo ──────────────────────────────────
+// Espelha o pattern de GruposPacientesPage (layout Rail): click na coluna
+// "Pacientes" abre dialog com a lista vinculada via patient_group_patient.
+const patientsDialog = reactive({
+    open: false,
+    loading: false,
+    error: '',
+    group: null,
+    items: [],
+    search: ''
 });
-onBeforeUnmount(() => {
-    if (_mqMobile) _mqMobile.removeEventListener('change', _onMqMobileChange);
+
+const patientsDialogFiltered = computed(() => {
+    const s = String(patientsDialog.search || '').toLowerCase().trim();
+    if (!s) return patientsDialog.items || [];
+    return (patientsDialog.items || []).filter((p) =>
+        String(p.full_name || '').toLowerCase().includes(s) ||
+        String(p.email || '').toLowerCase().includes(s) ||
+        String(p.phone || '').toLowerCase().includes(s)
+    );
+});
+
+// Cor do grupo em formato hex (#xxxxxx) — usada no header colorido,
+// pills, borda do dialog. Default pra primary se sem cor.
+const patientsGroupHex = computed(() => {
+    if (!patientsDialog.group) return '#6366f1';
+    const c = patientsDialog.group.cor || '#6366f1';
+    return c.startsWith('#') ? c : '#' + c;
+});
+
+async function openGroupPatientsModal(groupRow) {
+    if (!groupRow) return;
+    patientsDialog.open = true;
+    patientsDialog.loading = true;
+    patientsDialog.error = '';
+    patientsDialog.group = groupRow;
+    patientsDialog.items = [];
+    patientsDialog.search = '';
+    try {
+        const { data, error } = await supabase
+            .from('patient_group_patient')
+            .select('patient_id, patient:patients(id, nome_completo, email_principal, telefone, avatar_url)')
+            .eq('patient_group_id', groupRow.id);
+        if (error) throw error;
+        patientsDialog.items = (data || [])
+            .map((r) => r.patient)
+            .filter(Boolean)
+            .map((p) => ({
+                id: p.id,
+                full_name: p.nome_completo || '—',
+                email: p.email_principal || '—',
+                phone: p.telefone || '—',
+                avatar_url: p.avatar_url || null
+            }))
+            .sort((a, b) => String(a.full_name).localeCompare(String(b.full_name), 'pt-BR'));
+    } catch (e) {
+        patientsDialog.error = e?.message || 'Erro ao carregar pacientes do grupo.';
+    } finally {
+        patientsDialog.loading = false;
+    }
+}
+
+// Edição de paciente abre o PatientCadastroDialog reutilizado.
+const editPatientId = ref(null);
+const editPatientDialog = ref(false);
+function abrirPaciente(patient) {
+    if (!patient?.id) return;
+    editPatientId.value = String(patient.id);
+    editPatientDialog.value = true;
+}
+watch(editPatientDialog, (isOpen) => {
+    if (!isOpen) editPatientId.value = null;
 });
 </script>
 
@@ -216,7 +380,7 @@ onBeforeUnmount(() => {
         class="mg-mobile-drawer"
         :class="{ 'is-open': drawerOpen }"
         v-show="isMobile"
-        aria-label="Estatísticas e busca"
+        aria-label="Estatísticas e filtros"
     >
         <div id="mg-mobile-drawer-target" class="mg-mobile-drawer__scroll" />
     </aside>
@@ -232,25 +396,25 @@ onBeforeUnmount(() => {
         <header class="mg-page__head">
             <button
                 class="mg-menu-btn mg-menu-btn--mobile-only"
-                v-tooltip.bottom="'Estatísticas & busca'"
+                v-tooltip.bottom="'Estatísticas & filtros'"
                 @click="toggleDrawer"
             >
                 <i class="pi pi-bars" />
                 <span>Menu Grupos</span>
             </button>
             <div class="mg-page__title">
-                <i class="pi pi-th-large text-cyan-300" />
+                <i class="pi pi-th-large mg-page__title-icon" />
                 <span>Grupos</span>
-                <span class="mg-page__count">{{ gruposFiltrados.length }}</span>
+                <span class="mg-page__count">{{ filtered.length }}</span>
             </div>
             <div class="mg-page__actions">
                 <button
-                    class="mg-act-btn"
+                    class="mg-act-btn mg-act-btn--primary"
                     v-tooltip.bottom="'Novo grupo'"
                     :disabled="loading"
                     @click="abrirCriar"
                 >
-                    <i class="pi pi-plus" />
+                    <i :class="saving ? 'pi pi-spin pi-spinner' : 'pi pi-plus'" />
                     <span>Novo</span>
                 </button>
                 <button
@@ -267,149 +431,642 @@ onBeforeUnmount(() => {
             </div>
         </header>
 
+        <!-- Subheader explicativo (blueprint §9) -->
+        <div class="mg-subheader">
+            <i class="pi pi-info-circle mg-subheader__icon" />
+            <span class="mg-subheader__text">
+                Coleções pra organizar pacientes (ex: Adolescentes, Casais, Avulsos).
+                <strong>Crie grupos próprios</strong> com cor identificadora — eles aparecem
+                como filtro rápido na lista de pacientes.
+            </span>
+        </div>
+
         <div class="mg-body">
             <Teleport to="#mg-mobile-drawer-target" :disabled="!isMobile">
             <aside class="mg-side">
-                <div class="mg-w">
-                    <div class="mg-w__head">
-                        <span class="mg-w__title"><i class="pi pi-chart-bar" /> Estatísticas</span>
-                    </div>
-                    <div class="mg-stats">
-                        <template v-if="carregandoInicial">
-                            <div v-for="i in 4" :key="`gsk-${i}`" class="mg-stat" aria-busy="true">
-                                <div class="mg-stat__val melissa-skeleton melissa-skeleton--number" />
-                                <div class="mg-stat__lbl melissa-skeleton melissa-skeleton--text" style="width: 60%; margin-top: 6px;" />
+                <div class="mg-side__scroll">
+                    <!-- Stats -->
+                    <div class="mg-w mg-w--side">
+                        <div class="mg-w__head">
+                            <span class="mg-w__title"><i class="pi pi-chart-bar" /> Estatísticas</span>
+                        </div>
+                        <div class="mg-stats">
+                            <div
+                                v-for="s in stats"
+                                :key="s.key"
+                                class="mg-stat"
+                                :class="`is-${s.cls}`"
+                            >
+                                <div class="mg-stat__val">{{ s.value }}</div>
+                                <div class="mg-stat__lbl">{{ s.label }}</div>
                             </div>
-                        </template>
-                        <div
-                            v-for="s in stats"
-                            v-else
-                            :key="s.key"
-                            class="mg-stat"
-                            :class="`is-${s.cls}`"
-                        >
-                            <div class="mg-stat__val">{{ s.value }}</div>
-                            <div class="mg-stat__lbl">{{ s.label }}</div>
+                        </div>
+                    </div>
+
+                    <!-- Filtro de tipo -->
+                    <div class="mg-w mg-w--side">
+                        <div class="mg-w__head">
+                            <span class="mg-w__title"><i class="pi pi-filter" /> Tipo</span>
+                            <button
+                                v-if="tipoFilter"
+                                class="mg-side__clear-inline"
+                                v-tooltip.top="'Limpar filtro de tipo'"
+                                aria-label="Limpar filtro de tipo"
+                                @click="tipoFilter = ''"
+                            >
+                                <i class="pi pi-times" />
+                            </button>
+                        </div>
+                        <div class="mg-side__list">
+                            <button
+                                v-for="o in TIPO_FILTER_OPTIONS"
+                                :key="o.key"
+                                class="mg-side__item"
+                                :class="[`is-tipo-${o.key}`, { 'is-active': tipoFilter === o.key }]"
+                                @click="toggleTipoFilter(o.key)"
+                            >
+                                <i :class="o.icon" />
+                                <span>{{ o.label }}</span>
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Filtro de uso -->
+                    <div class="mg-w mg-w--side">
+                        <div class="mg-w__head">
+                            <span class="mg-w__title"><i class="pi pi-users" /> Uso</span>
+                            <button
+                                v-if="usoFilter"
+                                class="mg-side__clear-inline"
+                                v-tooltip.top="'Limpar filtro de uso'"
+                                aria-label="Limpar filtro de uso"
+                                @click="usoFilter = ''"
+                            >
+                                <i class="pi pi-times" />
+                            </button>
+                        </div>
+                        <div class="mg-side__list">
+                            <button
+                                v-for="o in USO_FILTER_OPTIONS"
+                                :key="o.key"
+                                class="mg-side__item"
+                                :class="[`is-uso-${o.key}`, { 'is-active': usoFilter === o.key }]"
+                                @click="toggleUsoFilter(o.key)"
+                            >
+                                <i :class="o.icon" />
+                                <span>{{ o.label }}</span>
+                            </button>
                         </div>
                     </div>
                 </div>
 
-                <div class="mg-w">
-                    <div class="mg-w__head">
-                        <span class="mg-w__title"><i class="pi pi-search" /> Buscar</span>
+                <!-- Footer fixo com Limpar filtros (Transition fade+collapse) -->
+                <Transition name="mg-clear">
+                    <div v-if="hasActiveFilters" class="mg-side__footer">
+                        <button class="mg-side__clear-all" @click="clearAllFilters">
+                            <i class="pi pi-filter-slash" />
+                            <span>Limpar filtros</span>
+                        </button>
                     </div>
-                    <input
-                        v-model="busca"
-                        type="text"
-                        placeholder="Nome do grupo…"
-                        class="mg-search__input"
-                    />
-                </div>
+                </Transition>
             </aside>
             </Teleport>
 
             <div class="mg-main">
-                <div class="mg-list">
-                    <template v-if="carregandoInicial">
-                        <div v-for="i in 5" :key="`gpsk-${i}`" class="mg-card mg-card--skeleton" aria-busy="true">
-                            <span class="mg-card__dot melissa-skeleton" style="border-radius: 50%;" />
-                            <div style="flex:1; display:flex; flex-direction:column; gap:6px;">
-                                <span class="melissa-skeleton melissa-skeleton--title" :style="{ width: `${50 + (i * 9) % 30}%` }" />
+                <!-- Toolbar (busca + view toggle) -->
+                <div class="mg-toolbar">
+                    <div class="mg-search">
+                        <i class="pi pi-search mg-search__icon" />
+                        <input
+                            v-model="busca"
+                            type="text"
+                            placeholder="Buscar por nome…"
+                            class="mg-search__input"
+                        />
+                        <button
+                            v-if="busca"
+                            class="mg-search__clear"
+                            v-tooltip.bottom="'Limpar busca'"
+                            @click="busca = ''"
+                        >
+                            <i class="pi pi-times" />
+                        </button>
+                    </div>
+                    <div class="mg-view-toggle" role="group" aria-label="Visualização">
+                        <button
+                            class="mg-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="mg-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>
+
+                <!-- View Lista (DataTable) — row design preservado:
+                     coluna "Grupo" larga renderiza dot + nome + badge Sistema
+                     (mesma cara do card antigo); coluna "Pacientes" 160px com
+                     contagem; coluna "Ações" frozen 100px com edit + trash. -->
+                <DataTable
+                    v-if="viewMode === 'list'"
+                    :value="filtered"
+                    :loading="loading"
+                    dataKey="id"
+                    paginator
+                    :rows="rowsMG"
+                    :first="firstMG"
+                    :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: 600px"
+                    class="mg-table"
+                    @row-click="onRowClick"
+                    @page="onPage"
+                >
+                    <Column header="Grupo" style="min-width: 280px">
+                        <template #body="{ data }">
+                            <div class="mg-row__group">
+                                <span
+                                    class="mg-row__dot"
+                                    :style="{ background: data.cor || '#6366f1' }"
+                                />
+                                <div class="mg-row__main">
+                                    <div class="mg-row__name-row">
+                                        <span class="mg-row__name">{{ data.nome }}</span>
+                                        <span v-if="data.is_system" class="mg-row__badge mg-row__badge--system">
+                                            <i class="pi pi-shield" /> Sistema
+                                        </span>
+                                    </div>
+                                </div>
                             </div>
+                        </template>
+                    </Column>
+
+                    <Column header="Pacientes" style="width: 180px; min-width: 160px">
+                        <template #body="{ data }">
+                            <button
+                                type="button"
+                                class="mg-row__count-btn"
+                                :class="{ 'is-empty': data.pacientes_count === 0 }"
+                                :disabled="data.pacientes_count === 0"
+                                v-tooltip.top="data.pacientes_count > 0 ? 'Ver pacientes do grupo' : 'Sem pacientes vinculados'"
+                                aria-label="Ver pacientes do grupo"
+                                @click.stop="openGroupPatientsModal(data)"
+                            >
+                                <i class="pi pi-users" />
+                                <span>
+                                    {{ data.pacientes_count }}
+                                    {{ data.pacientes_count === 1 ? 'paciente' : 'pacientes' }}
+                                </span>
+                            </button>
+                        </template>
+                    </Column>
+
+                    <Column
+                        header=""
+                        :style="{ width: '100px', maxWidth: '100px', minWidth: '100px' }"
+                        frozen
+                        alignFrozen="right"
+                        class="mg-col-acoes"
+                    >
+                        <template #body="{ data }">
+                            <div class="mg-row__actions" @click.stop>
+                                <button
+                                    v-if="!data.is_system"
+                                    class="mg-row__btn"
+                                    v-tooltip.left="'Editar'"
+                                    aria-label="Editar"
+                                    @click.stop="abrirEditar(data)"
+                                >
+                                    <i class="pi pi-pencil" />
+                                </button>
+                                <button
+                                    v-if="!data.is_system"
+                                    class="mg-row__btn mg-row__btn--danger"
+                                    v-tooltip.left="'Excluir'"
+                                    aria-label="Excluir"
+                                    @click.stop="confirmarExcluir(data)"
+                                >
+                                    <i class="pi pi-trash" />
+                                </button>
+                                <span v-else class="mg-row__locked" v-tooltip.left="'Grupo do sistema (bloqueado)'">
+                                    <i class="pi pi-lock" />
+                                </span>
+                            </div>
+                        </template>
+                    </Column>
+
+                    <template #empty>
+                        <div class="mg-empty">
+                            <i class="pi pi-th-large mg-empty__icon" />
+                            <div class="mg-empty__title">Nenhum grupo encontrado</div>
+                            <div class="mg-empty__hint">
+                                <template v-if="busca || tipoFilter || usoFilter">
+                                    Ajuste os filtros pra ver mais resultados.
+                                </template>
+                                <template v-else>
+                                    Crie seu primeiro grupo pra organizar pacientes.
+                                </template>
+                            </div>
+                            <button class="mg-act-btn mg-act-btn--primary mg-empty__btn" @click="abrirCriar">
+                                <i class="pi pi-plus" />
+                                <span>Novo grupo</span>
+                            </button>
                         </div>
                     </template>
 
-                    <div v-else-if="gruposFiltrados.length === 0" class="mg-empty">
+                    <template #loading>
+                        <div class="mg-table__loading">
+                            <i class="pi pi-spin pi-spinner" />
+                            <span>Carregando grupos…</span>
+                        </div>
+                    </template>
+                </DataTable>
+
+                <!-- View Grade — cards num CSS grid; mesmo conteúdo do row
+                     em formato vertical. Paginator standalone compartilha
+                     rowsMG/firstMG com a list view. -->
+                <div v-else-if="viewMode === 'grid'" class="mg-grid-wrap">
+                    <div v-if="loading && filtered.length === 0" class="mg-table__loading mg-grid__loading">
+                        <i class="pi pi-spin pi-spinner" />
+                        <span>Carregando grupos…</span>
+                    </div>
+                    <div v-else-if="filtered.length === 0" class="mg-empty">
                         <i class="pi pi-th-large mg-empty__icon" />
                         <div class="mg-empty__title">Nenhum grupo encontrado</div>
                         <div class="mg-empty__hint">
-                            <template v-if="busca">Ajuste a busca pra ver mais resultados.</template>
-                            <template v-else>Crie seu primeiro grupo pra organizar pacientes.</template>
-                        </div>
-                        <button class="mg-act-btn" @click="abrirCriar">
-                            <i class="pi pi-plus" /><span>Novo grupo</span>
-                        </button>
-                    </div>
-
-                    <div
-                        v-for="g in gruposFiltrados"
-                        v-else
-                        :key="g.id"
-                        class="mg-card"
-                        :class="{ 'is-system': g.is_system }"
-                        @click="abrirEditar(g)"
-                    >
-                        <span class="mg-card__dot" :style="{ background: g.cor || '#6366f1' }" />
-                        <div class="mg-card__main">
-                            <div class="mg-card__name-row">
-                                <span class="mg-card__name">{{ g.nome }}</span>
-                                <span v-if="g.is_system" class="mg-card__badge">Sistema</span>
-                            </div>
-                            <div class="mg-card__meta">
-                                <span><i class="pi pi-users" /> {{ g.pacientes_count }} {{ g.pacientes_count === 1 ? 'paciente' : 'pacientes' }}</span>
-                            </div>
-                        </div>
-                        <div class="mg-card__actions" @click.stop>
-                            <button
-                                v-if="!g.is_system"
-                                class="mg-card__btn"
-                                v-tooltip.left="'Editar'"
-                                @click="abrirEditar(g)"
-                            >
-                                <i class="pi pi-pencil" />
-                            </button>
-                            <button
-                                v-if="!g.is_system"
-                                class="mg-card__btn mg-card__btn--danger"
-                                v-tooltip.left="'Excluir'"
-                                @click="confirmarExcluir(g)"
-                            >
-                                <i class="pi pi-trash" />
-                            </button>
+                            <template v-if="busca || tipoFilter || usoFilter">
+                                Ajuste os filtros pra ver mais resultados.
+                            </template>
+                            <template v-else>
+                                Crie seu primeiro grupo pra organizar pacientes.
+                            </template>
                         </div>
                     </div>
+                    <div v-else class="mg-grid">
+                        <div
+                            v-for="g in pagedItems"
+                            :key="g.id"
+                            class="mg-grid__card"
+                            :class="rowStatusClass(g)"
+                            role="button"
+                            tabindex="0"
+                            @click="abrirEditar(g)"
+                            @keydown.enter.prevent="abrirEditar(g)"
+                            @keydown.space.prevent="abrirEditar(g)"
+                        >
+                            <div class="mg-grid__top">
+                                <span
+                                    class="mg-grid__dot"
+                                    :style="{ background: g.cor || '#6366f1' }"
+                                />
+                                <span v-if="g.is_system" class="mg-row__badge mg-row__badge--system">
+                                    <i class="pi pi-shield" /> Sistema
+                                </span>
+                            </div>
+                            <div class="mg-grid__name">{{ g.nome }}</div>
+                            <div class="mg-grid__meta" @click.stop>
+                                <button
+                                    type="button"
+                                    class="mg-row__count-btn"
+                                    :class="{ 'is-empty': g.pacientes_count === 0 }"
+                                    :disabled="g.pacientes_count === 0"
+                                    v-tooltip.top="g.pacientes_count > 0 ? 'Ver pacientes do grupo' : 'Sem pacientes vinculados'"
+                                    aria-label="Ver pacientes do grupo"
+                                    @click.stop="openGroupPatientsModal(g)"
+                                >
+                                    <i class="pi pi-users" />
+                                    <span>
+                                        {{ g.pacientes_count }}
+                                        {{ g.pacientes_count === 1 ? 'paciente' : 'pacientes' }}
+                                    </span>
+                                </button>
+                            </div>
+                            <div class="mg-grid__footer" @click.stop>
+                                <button
+                                    v-if="!g.is_system"
+                                    class="mg-row__btn"
+                                    v-tooltip.top="'Editar'"
+                                    aria-label="Editar"
+                                    @click.stop="abrirEditar(g)"
+                                >
+                                    <i class="pi pi-pencil" />
+                                </button>
+                                <button
+                                    v-if="!g.is_system"
+                                    class="mg-row__btn mg-row__btn--danger"
+                                    v-tooltip.top="'Excluir'"
+                                    aria-label="Excluir"
+                                    @click.stop="confirmarExcluir(g)"
+                                >
+                                    <i class="pi pi-trash" />
+                                </button>
+                                <span v-else class="mg-row__locked" v-tooltip.top="'Grupo do sistema (bloqueado)'">
+                                    <i class="pi pi-lock" />
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                    <Paginator
+                        v-if="filtered.length > 0"
+                        class="mg-paginator"
+                        :rows="rowsMG"
+                        :totalRecords="filtered.length"
+                        :first="firstMG"
+                        :rowsPerPageOptions="PAGE_SIZE_OPTIONS"
+                        template="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+                        currentPageReportTemplate="{first}–{last} de {totalRecords}"
+                        @page="onPage"
+                    />
                 </div>
             </div>
         </div>
 
+        <!-- Dialog: criar/editar grupo — pattern espelhado do
+             PatientsCadastroPage Identidade (FloatLabel + IconField +
+             variant="filled" + section dividers uppercase). -->
         <Dialog
             v-model:visible="dlgOpen"
             modal
             dismissable-mask
-            :style="{ width: '380px', maxWidth: '92vw' }"
+            :draggable="false"
+            :style="{ width: '480px', maxWidth: '94vw' }"
             :header="dlgMode === 'create' ? 'Novo grupo' : 'Editar grupo'"
         >
-            <div class="flex flex-col gap-3">
-                <label class="text-xs text-[var(--text-color-secondary)]">
-                    Nome
-                    <InputText v-model="dlgForm.nome" placeholder="Ex: Adolescentes, Casais, Adultos…" class="w-full mt-1" autofocus @keydown.enter="salvar" />
-                </label>
-                <label class="text-xs text-[var(--text-color-secondary)]">
-                    Cor
-                    <input v-model="dlgForm.cor" type="color" class="w-full h-9 mt-1 rounded-md border border-[var(--surface-border)] bg-transparent cursor-pointer" />
-                </label>
-                <div class="flex flex-wrap gap-1.5">
+            <div class="p-1">
+                <!-- ── Identificação ─────────────────────────── -->
+                <div class="flex items-center gap-2 mb-5">
+                    <span class="text-[0.7rem] font-bold uppercase tracking-widest text-[var(--p-primary-color)]">
+                        Grupo
+                    </span>
+                    <div class="flex-1 h-px bg-[color-mix(in_srgb,var(--p-primary-color)_25%,transparent)]" />
+                </div>
+                <div class="mb-6">
+                    <FloatLabel variant="on">
+                        <IconField>
+                            <InputIcon class="pi pi-folder" />
+                            <InputText
+                                id="grp-nome"
+                                v-model="dlgForm.nome"
+                                class="w-full"
+                                variant="filled"
+                                autofocus
+                                @keydown.enter="salvar"
+                            />
+                        </IconField>
+                        <label for="grp-nome">Nome do grupo *</label>
+                    </FloatLabel>
+                </div>
+
+                <!-- ── Cor identificadora ────────────────────── -->
+                <div class="flex items-center gap-2 mb-4">
+                    <span class="text-[0.7rem] font-bold uppercase tracking-widest text-[var(--p-primary-color)]">
+                        Cor
+                    </span>
+                    <div class="flex-1 h-px bg-[color-mix(in_srgb,var(--p-primary-color)_25%,transparent)]" />
+                </div>
+                <div class="flex items-center gap-3 mb-4">
+                    <input
+                        v-model="dlgForm.cor"
+                        type="color"
+                        class="h-10 w-14 rounded-lg border border-[var(--surface-border)] bg-transparent cursor-pointer"
+                    />
+                    <span class="text-[0.82rem] font-mono text-[var(--text-color-secondary)] uppercase">
+                        {{ dlgForm.cor }}
+                    </span>
+                </div>
+                <div class="flex flex-wrap gap-2">
                     <button
                         v-for="c in PRESET_COLORS"
                         :key="c"
                         type="button"
-                        class="w-6 h-6 rounded-full border border-white/20 transition-transform hover:scale-110"
+                        class="mg-color-preset"
+                        :class="{ 'is-selected': dlgForm.cor.toLowerCase() === '#' + c }"
                         :style="{ background: '#' + c }"
+                        :aria-label="`Usar cor #${c}`"
                         @click="dlgForm.cor = '#' + c"
                     />
                 </div>
-                <div v-if="dlgError" class="text-xs text-red-400">{{ dlgError }}</div>
+
+                <small
+                    v-if="dlgError"
+                    class="mt-4 text-[0.85rem] text-red-500 flex items-center gap-1.5"
+                >
+                    <i class="pi pi-exclamation-circle text-[0.78rem]" />
+                    <span>{{ dlgError }}</span>
+                </small>
             </div>
+
             <template #footer>
-                <Button label="Cancelar" text @click="dlgOpen = false" />
-                <Button :label="saving ? 'Salvando…' : 'Salvar'" :loading="saving" :disabled="!dlgForm.nome.trim() || saving" @click="salvar" />
+                <Button
+                    label="Cancelar"
+                    severity="secondary"
+                    text
+                    :disabled="saving"
+                    @click="dlgOpen = false"
+                />
+                <Button
+                    :label="saving ? 'Salvando…' : 'Salvar'"
+                    icon="pi pi-check"
+                    :loading="saving"
+                    :disabled="!dlgForm.nome.trim() || saving"
+                    @click="salvar"
+                />
             </template>
         </Dialog>
+
+        <!-- Dialog: Pacientes do grupo (espelha o pattern de
+             GruposPacientesPage do layout Rail). Abre ao clicar na
+             coluna "Pacientes" da DataTable ou no contador da grid view.
+             Borda colorida com a cor do grupo + DataTable interno
+             com search, paginator e botão "Abrir" pra cada paciente. -->
+        <Dialog
+            v-model:visible="patientsDialog.open"
+            modal
+            dismissable-mask
+            :draggable="false"
+            :style="{ width: '720px', maxWidth: '94vw' }"
+            :pt="{
+                root: { style: `border: 2px solid ${patientsGroupHex}` },
+                header: { style: `border-bottom: 1px solid ${patientsGroupHex}30` },
+                pcCloseButton: { root: { class: 'mg-pdlg-close-btn' } }
+            }"
+        >
+            <template #header>
+                <div class="mg-pdlg__header">
+                    <span class="mg-pdlg__avatar" :style="{ background: patientsGroupHex }">
+                        {{ (patientsDialog.group?.nome || '?')[0].toUpperCase() }}
+                    </span>
+                    <div class="mg-pdlg__title">
+                        <div class="mg-pdlg__name" :style="{ color: patientsGroupHex }">
+                            Grupo — {{ patientsDialog.group?.nome }}
+                        </div>
+                        <div class="mg-pdlg__sub">
+                            {{ patientsDialog.items.length }}
+                            paciente{{ patientsDialog.items.length !== 1 ? 's' : '' }}
+                        </div>
+                    </div>
+                </div>
+            </template>
+
+            <div class="mg-pdlg__body">
+                <!-- Toolbar: busca + count pill -->
+                <div class="mg-pdlg__toolbar">
+                    <div class="mg-search mg-pdlg__search">
+                        <i class="pi pi-search mg-search__icon" />
+                        <input
+                            v-model="patientsDialog.search"
+                            type="text"
+                            placeholder="Buscar paciente…"
+                            class="mg-search__input"
+                            :disabled="patientsDialog.loading"
+                        />
+                        <button
+                            v-if="patientsDialog.search"
+                            class="mg-search__clear"
+                            v-tooltip.bottom="'Limpar busca'"
+                            @click="patientsDialog.search = ''"
+                        >
+                            <i class="pi pi-times" />
+                        </button>
+                    </div>
+                    <span
+                        v-if="!patientsDialog.loading"
+                        class="mg-pdlg__count-pill"
+                        :style="{ background: `${patientsGroupHex}18`, color: patientsGroupHex }"
+                    >
+                        {{ patientsDialog.items.length }}
+                        {{ patientsDialog.items.length === 1 ? 'paciente' : 'pacientes' }}
+                    </span>
+                </div>
+
+                <!-- Loading -->
+                <div
+                    v-if="patientsDialog.loading"
+                    class="mg-pdlg__loading"
+                    :style="{ color: patientsGroupHex }"
+                >
+                    <i class="pi pi-spin pi-spinner" />
+                    <span>Carregando pacientes…</span>
+                </div>
+
+                <!-- Erro -->
+                <div v-else-if="patientsDialog.error" class="mg-pdlg__error">
+                    <i class="pi pi-exclamation-triangle" />
+                    <span>{{ patientsDialog.error }}</span>
+                </div>
+
+                <!-- Vazio (grupo sem pacientes) -->
+                <div v-else-if="patientsDialog.items.length === 0" class="mg-pdlg__empty">
+                    <div
+                        class="mg-pdlg__empty-icon"
+                        :style="{ background: `${patientsGroupHex}18`, color: patientsGroupHex }"
+                    >
+                        <i class="pi pi-users" />
+                    </div>
+                    <div class="mg-pdlg__empty-title">Nenhum paciente neste grupo</div>
+                    <div class="mg-pdlg__empty-hint">
+                        Associe pacientes a este grupo na página de pacientes.
+                    </div>
+                </div>
+
+                <!-- Tabela de pacientes -->
+                <DataTable
+                    v-else
+                    :value="patientsDialogFiltered"
+                    dataKey="id"
+                    paginator
+                    :rows="8"
+                    :rowsPerPageOptions="[8, 15, 30]"
+                    paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+                    currentPageReportTemplate="{first}–{last} de {totalRecords}"
+                    stripedRows
+                    responsiveLayout="scroll"
+                    class="mg-pdlg__table"
+                >
+                    <Column header="Paciente" sortable>
+                        <template #body="{ data }">
+                            <div class="mg-pdlg__patient">
+                                <span
+                                    class="mg-pdlg__avatar mg-pdlg__avatar--sm"
+                                    :style="data.avatar_url ? null : { background: `${patientsGroupHex}25`, color: patientsGroupHex }"
+                                >
+                                    <img v-if="data.avatar_url" :src="data.avatar_url" :alt="data.full_name" />
+                                    <span v-else>{{ initials(data.full_name) }}</span>
+                                </span>
+                                <div class="mg-pdlg__patient-text">
+                                    <span class="mg-pdlg__patient-name">{{ data.full_name }}</span>
+                                    <span class="mg-pdlg__patient-email">{{ data.email || '—' }}</span>
+                                </div>
+                            </div>
+                        </template>
+                    </Column>
+
+                    <Column header="Telefone" style="min-width: 11rem">
+                        <template #body="{ data }">
+                            <span class="mg-pdlg__phone">{{ fmtPhone(data.phone) }}</span>
+                        </template>
+                    </Column>
+
+                    <Column header="" style="width: 7rem">
+                        <template #body="{ data }">
+                            <button
+                                type="button"
+                                class="mg-pdlg__open-btn"
+                                :style="{ borderColor: patientsGroupHex, color: patientsGroupHex }"
+                                v-tooltip.left="'Abrir prontuário'"
+                                aria-label="Abrir prontuário do paciente"
+                                @click="abrirPaciente(data)"
+                            >
+                                <i class="pi pi-external-link" />
+                                <span>Abrir</span>
+                            </button>
+                        </template>
+                    </Column>
+
+                    <template #empty>
+                        <div class="mg-pdlg__empty">
+                            <i class="pi pi-search mg-pdlg__empty-icon-pi" />
+                            <div class="mg-pdlg__empty-title">Nenhum resultado</div>
+                            <div class="mg-pdlg__empty-hint">
+                                Nenhum paciente corresponde à busca.
+                            </div>
+                            <button
+                                class="mg-pdlg__inline-clear-btn"
+                                @click="patientsDialog.search = ''"
+                            >
+                                <i class="pi pi-filter-slash" />
+                                <span>Limpar busca</span>
+                            </button>
+                        </div>
+                    </template>
+                </DataTable>
+            </div>
+        </Dialog>
+
+        <!-- Edição de paciente vinda do dialog "Pacientes do grupo".
+             v-model controla open/close; quando fecha, limpa o id (watch). -->
+        <PatientCadastroDialog v-model="editPatientDialog" :patient-id="editPatientId" />
     </section>
 </template>
 
 <style scoped>
-/* Mesmo CSS do MelissaTags trocando o prefixo mt- → mg- */
+/* ─── Page chrome (espelha MelissaCadastrosRecebidos / MelissaCompromissos) ─── */
 .mg-page {
     position: absolute;
     inset: 6px 6px calc(var(--m-dock-h, 76px) + 6px) 6px;
@@ -450,6 +1107,10 @@ onBeforeUnmount(() => {
     font-size: 1rem;
     font-weight: 500;
 }
+.mg-page__title-icon {
+    color: var(--p-primary-color);
+    font-size: 1.05rem;
+}
 .mg-page__title > span:not(.mg-page__count) {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -491,16 +1152,22 @@ onBeforeUnmount(() => {
     font-family: inherit;
     font-size: 0.78rem;
     font-weight: 600;
-    background: var(--m-accent);
-    border: 1px solid var(--m-accent);
-    color: white;
     transition: background-color 140ms ease, transform 140ms ease;
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border);
+    color: var(--m-text);
 }
-.mg-act-btn:hover {
+.mg-act-btn--primary {
+    background: var(--m-accent);
+    border-color: var(--m-accent);
+    color: white;
+}
+.mg-act-btn--primary:hover {
     background: color-mix(in srgb, var(--m-accent) 88%, white);
     transform: translateY(-1px);
 }
 .mg-act-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
+.mg-act-btn > i { font-size: 0.78rem; }
 
 .mg-menu-btn {
     display: none;
@@ -524,42 +1191,144 @@ onBeforeUnmount(() => {
     transform: translateY(-1px);
 }
 
+/* Subheader (blueprint §9) */
+.mg-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;
+}
+.mg-subheader__icon {
+    color: var(--p-primary-color);
+    font-size: 0.92rem;
+    flex-shrink: 0;
+    margin-top: 1px;
+}
+.mg-subheader__text { flex: 1; min-width: 0; }
+.mg-subheader__text strong { color: var(--m-text); font-weight: 600; }
+
 .mg-body {
     flex: 1;
     display: flex;
     min-height: 0;
-    gap: 12px;
-    padding: 12px;
+    gap: 0;
+    padding: 0;
 }
+
+/* ─── Sidebar (2 zonas: __scroll + __footer fixo) ─── */
 .mg-side {
     width: 280px;
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
-    gap: 12px;
-    overflow-y: auto;
+    background: var(--m-bg-soft);
+    border-right: 1px solid var(--m-border);
+    overflow: hidden;
 }
-.mg-side::-webkit-scrollbar { width: 5px; }
-.mg-side::-webkit-scrollbar-thumb {
+.mg-side__scroll {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+}
+.mg-side__scroll::-webkit-scrollbar { width: 5px; }
+.mg-side__scroll::-webkit-scrollbar-thumb {
     background: var(--m-border-strong);
     border-radius: 3px;
 }
 
-.mg-w {
+.mg-side__footer {
+    flex-shrink: 0;
+    padding: 12px;
     background: var(--m-bg-soft);
+    border-top: 1px solid var(--m-border);
+}
+.mg-side__clear-all {
+    width: 100%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 9px 12px;
+    background: var(--m-bg-medium);
+    border: 1px solid var(--m-border);
+    color: var(--m-text);
+    border-radius: 10px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.78rem;
+    font-weight: 600;
+    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
+}
+.mg-side__clear-all:hover {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+    color: var(--m-text);
+}
+.mg-side__clear-all > i {
+    font-size: 0.78rem;
+    color: var(--m-text-muted);
+    transition: color 140ms ease;
+}
+.mg-side__clear-all:hover > i { color: var(--m-text); }
+
+/* X inline ao lado do título de cada filter card */
+.mg-side__clear-inline {
+    width: 18px;
+    height: 18px;
+    display: grid;
+    place-items: center;
+    background: transparent;
+    border: 1px solid color-mix(in srgb, rgb(220, 38, 38) 30%, var(--m-border));
+    color: rgb(220, 38, 38);
+    border-radius: 4px;
+    cursor: pointer;
+    font-family: inherit;
+    transition: background-color 140ms ease, border-color 140ms ease;
+}
+.mg-side__clear-inline:hover {
+    background: rgba(220, 38, 38, 0.10);
+    border-color: rgba(220, 38, 38, 0.55);
+}
+.mg-side__clear-inline > i { font-size: 0.6rem; }
+
+/* Cards na sidebar */
+.mg-w {
+    background: var(--m-bg-medium);
     border: 1px solid var(--m-border);
     border-radius: 12px;
     padding: 12px;
 }
-.mg-w__head { margin-bottom: 10px; }
+.mg-w--side {
+    margin: 12px 12px 0;
+    flex-shrink: 0;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+}
+.mg-w--side:last-of-type { margin-bottom: 12px; }
+.mg-w__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+}
 .mg-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;
 }
-.mg-w__title > i { color: var(--m-text-muted); font-size: 0.78rem; }
+.mg-w__title > i { color: var(--m-text-muted); font-size: 0.7rem; }
 
 .mg-stats {
     display: grid;
@@ -567,7 +1336,7 @@ onBeforeUnmount(() => {
     gap: 6px;
 }
 .mg-stat {
-    background: var(--m-bg-medium);
+    background: var(--m-bg-soft);
     border: 1px solid var(--m-border);
     border-radius: 10px;
     padding: 8px 10px;
@@ -584,124 +1353,683 @@ onBeforeUnmount(() => {
     text-transform: uppercase;
     letter-spacing: 0.06em;
 }
-.mg-stat.is-ok .mg-stat__val { color: rgb(74, 222, 128); }
+.mg-stat.is-ok .mg-stat__val     { color: rgb(22, 163, 74); }   /* green-600 */
+.mg-stat.is-info .mg-stat__val   { color: rgb(37, 99, 235); }   /* blue-600 */
+.mg-stat.is-accent .mg-stat__val { color: var(--m-accent); }
 
+/* ─── Filter buttons (blueprint §8) ─── */
+.mg-side__list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+.mg-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;
+}
+.mg-side__item > i {
+    font-size: 0.78rem;
+    width: 14px;
+    text-align: center;
+}
+
+/* Tipo: Sistema = blue-600, Meus = accent */
+.mg-side__item.is-tipo-system {
+    background: rgba(37, 99, 235, 0.05);
+    border-color: rgba(37, 99, 235, 0.18);
+}
+.mg-side__item.is-tipo-system > i { color: rgb(37, 99, 235); }
+.mg-side__item.is-tipo-system:hover {
+    background: rgba(37, 99, 235, 0.10);
+    border-color: rgba(37, 99, 235, 0.30);
+}
+.mg-side__item.is-active.is-tipo-system {
+    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);
+}
+
+.mg-side__item.is-tipo-mine {
+    background: color-mix(in srgb, var(--m-accent) 5%, transparent);
+    border-color: color-mix(in srgb, var(--m-accent) 18%, transparent);
+}
+.mg-side__item.is-tipo-mine > i { color: var(--m-accent); }
+.mg-side__item.is-tipo-mine:hover {
+    background: color-mix(in srgb, var(--m-accent) 10%, transparent);
+    border-color: color-mix(in srgb, var(--m-accent) 30%, transparent);
+}
+.mg-side__item.is-active.is-tipo-mine {
+    background: color-mix(in srgb, var(--m-accent) 16%, transparent);
+    border-color: color-mix(in srgb, var(--m-accent) 55%, transparent);
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--m-accent) 35%, transparent);
+}
+
+/* Uso: Em uso = green-600, Vazio = amber-600 (warn) */
+.mg-side__item.is-uso-em_uso {
+    background: rgba(22, 163, 74, 0.05);
+    border-color: rgba(22, 163, 74, 0.18);
+}
+.mg-side__item.is-uso-em_uso > i { color: rgb(22, 163, 74); }
+.mg-side__item.is-uso-em_uso:hover {
+    background: rgba(22, 163, 74, 0.10);
+    border-color: rgba(22, 163, 74, 0.30);
+}
+.mg-side__item.is-active.is-uso-em_uso {
+    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);
+}
+
+.mg-side__item.is-uso-vazio {
+    background: rgba(217, 119, 6, 0.05);
+    border-color: rgba(217, 119, 6, 0.18);
+}
+.mg-side__item.is-uso-vazio > i { color: rgb(217, 119, 6); }
+.mg-side__item.is-uso-vazio:hover {
+    background: rgba(217, 119, 6, 0.10);
+    border-color: rgba(217, 119, 6, 0.30);
+}
+.mg-side__item.is-active.is-uso-vazio {
+    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);
+}
+
+/* Transition do footer "Limpar filtros" */
+.mg-clear-enter-active,
+.mg-clear-leave-active {
+    transition: opacity 220ms ease, transform 220ms ease, max-height 240ms ease;
+    overflow: hidden;
+}
+.mg-clear-enter-from,
+.mg-clear-leave-to {
+    opacity: 0;
+    transform: translateY(6px);
+    max-height: 0;
+}
+.mg-clear-enter-to,
+.mg-clear-leave-from {
+    opacity: 1;
+    transform: translateY(0);
+    max-height: 80px;
+}
+
+/* ─── Main column ─── */
+.mg-main {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    padding: 12px;
+    gap: 10px;
+}
+
+.mg-toolbar {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.mg-search {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+}
+.mg-search__icon {
+    position: absolute;
+    left: 12px;
+    color: var(--m-text-muted);
+    font-size: 0.78rem;
+    pointer-events: none;
+}
 .mg-search__input {
     width: 100%;
     background: var(--m-bg-medium);
     border: 1px solid var(--m-border);
     color: var(--m-text);
-    padding: 8px 12px;
-    border-radius: 9px;
-    font-size: 0.82rem;
+    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;
 }
-.mg-search__input:focus { border-color: var(--m-border-strong); }
+.mg-search__input::placeholder { color: var(--m-text-faint); }
+.mg-search__input:focus {
+    border-color: var(--m-border-strong);
+    background: var(--m-bg-medium);
+}
+.mg-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;
+}
+.mg-search__clear:hover {
+    background: var(--m-bg-soft-hover);
+    color: var(--m-text);
+}
+.mg-search__clear > i { font-size: 0.7rem; }
 
-.mg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
-.mg-list {
+.mg-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;
+}
+.mg-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;
+}
+.mg-view-toggle__btn:hover {
+    background: var(--m-bg-soft-hover);
+    color: var(--m-text);
+}
+.mg-view-toggle__btn.is-active {
+    background: var(--m-accent-soft);
+    color: var(--m-accent);
+}
+.mg-view-toggle__btn > i { font-size: 0.85rem; }
+
+/* ─── DataTable ─── */
+.mg-table {
     flex: 1;
-    overflow-y: auto;
-    padding: 0 4px 4px;
+    min-height: 0;
     display: flex;
     flex-direction: column;
-    gap: 8px;
 }
-.mg-list::-webkit-scrollbar { width: 5px; }
-.mg-list::-webkit-scrollbar-thumb {
-    background: var(--m-border-strong);
-    border-radius: 3px;
+.mg-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;
+}
+.mg-table :deep(.p-datatable-table-container) {
+    flex: 1;
+    min-height: 0;
+    background: transparent;
+}
+.mg-table :deep(.p-datatable-thead),
+.mg-table :deep(.p-datatable-thead > tr) {
+    background: transparent !important;
+}
+.mg-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);
+}
+.mg-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);
+}
+.mg-table :deep(.p-datatable-tbody > tr > td) {
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--m-border);
+    background: transparent;
+    vertical-align: middle;
+}
+.mg-table :deep(.p-datatable-tbody > tr:hover) {
+    background: var(--m-bg-soft-hover);
+}
+.mg-table :deep(.p-datatable-tbody > tr.p-datatable-row-selected) {
+    background: var(--m-accent-soft);
+}
+/* Border-left: Sistema = azul, Em uso = verde, Vazio = sutil */
+.mg-table :deep(.p-datatable-tbody > tr.is-system)  { border-left-color: rgb(37, 99, 235); cursor: default; }
+.mg-table :deep(.p-datatable-tbody > tr.is-em-uso)  { border-left-color: rgb(22, 163, 74); }
+.mg-table :deep(.p-datatable-tbody > tr.is-vazio)   { border-left-color: var(--m-border-strong); }
+
+.mg-table :deep(.p-datatable-loading-overlay) {
+    background: color-mix(in srgb, var(--m-bg-medium) 70%, transparent);
+    backdrop-filter: blur(2px);
+}
+.mg-table__loading {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--m-text);
+    font-size: 0.85rem;
 }
 
-.mg-card {
+/* Paginator (DataTable interno) */
+.mg-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;
+}
+.mg-table :deep(.p-paginator-current) {
+    color: var(--m-text-muted);
+    font-size: 0.78rem;
+    background: transparent;
+    border: none;
+    padding: 0 6px;
+}
+.mg-table :deep(.p-paginator-first),
+.mg-table :deep(.p-paginator-prev),
+.mg-table :deep(.p-paginator-next),
+.mg-table :deep(.p-paginator-last),
+.mg-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;
+}
+.mg-table :deep(.p-paginator-page.p-paginator-page-selected) {
+    background: var(--m-accent-soft);
+    border-color: var(--m-accent-strong);
+    color: var(--m-accent);
+}
+.mg-table :deep(.p-paginator-first:not(.p-disabled):hover),
+.mg-table :deep(.p-paginator-prev:not(.p-disabled):hover),
+.mg-table :deep(.p-paginator-next:not(.p-disabled):hover),
+.mg-table :deep(.p-paginator-last:not(.p-disabled):hover),
+.mg-table :deep(.p-paginator-page:not(.p-paginator-page-selected):hover) {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+}
+.mg-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;
+}
+.mg-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ções" — bg sólido em ambos modos */
+.mg-table :deep(td.p-datatable-frozen-column),
+.mg-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;
+}
+.mg-table :deep(.p-datatable-tbody > tr:hover td.p-datatable-frozen-column) {
+    background: var(--m-bg-soft-hover);
+}
+.mg-table :deep(.p-datatable-tbody > tr.p-datatable-row-selected td.p-datatable-frozen-column) {
+    background: var(--m-accent-soft);
+}
+
+/* ─── Row content (design preservado do card antigo) ─── */
+.mg-row__group {
     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;
+    min-width: 0;
 }
-.mg-card:hover {
-    background: var(--m-bg-soft-hover);
-    border-color: var(--m-border-strong);
-    transform: translateY(-1px);
-}
-.mg-card.is-system { cursor: default; }
-.mg-card.is-system:hover { transform: none; }
-.mg-card--skeleton { cursor: default; pointer-events: none; opacity: 0.95; }
-.mg-card--skeleton:hover { background: var(--m-bg-soft); transform: none; }
-
-.mg-card__dot {
-    width: 16px; height: 16px;
+.mg-row__dot {
+    width: 16px;
+    height: 16px;
     border-radius: 50%;
     flex-shrink: 0;
     border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--p-content-background) 60%, transparent);
 }
-.mg-card__main {
+.mg-row__main {
     flex: 1;
     min-width: 0;
     display: flex;
     flex-direction: column;
     gap: 2px;
 }
-.mg-card__name-row {
+.mg-row__name-row {
     display: flex;
     align-items: center;
     gap: 8px;
+    flex-wrap: wrap;
 }
-.mg-card__name {
+.mg-row__name {
     font-size: 0.92rem;
     font-weight: 600;
+    color: var(--m-text);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-.mg-card__badge {
+.mg-row__count {
     display: inline-flex;
     align-items: center;
+    gap: 5px;
+    font-size: 0.78rem;
+    color: var(--m-text-muted);
+}
+.mg-row__count > i { font-size: 0.7rem; }
+
+/* Botão "X pacientes" clicável (na coluna Pacientes da DataTable
+   e na meta do grid). Quando há pacientes, vira pill primary tinted
+   pra sinalizar que é clicável; quando vazio, fica neutro/disabled. */
+.mg-row__count-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px;
+    background: transparent;
+    border: 1px solid color-mix(in srgb, var(--p-primary-color) 25%, var(--m-border));
+    color: var(--p-primary-color);
+    border-radius: 999px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.78rem;
+    font-weight: 500;
+    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
+    white-space: nowrap;
+}
+.mg-row__count-btn:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--p-primary-color) 12%, transparent);
+    border-color: var(--p-primary-color);
+}
+.mg-row__count-btn:focus-visible {
+    outline: 2px solid var(--p-primary-color);
+    outline-offset: 2px;
+}
+.mg-row__count-btn.is-empty,
+.mg-row__count-btn:disabled {
+    color: var(--m-text-muted);
+    border-color: var(--m-border);
+    cursor: default;
+    background: transparent;
+}
+.mg-row__count-btn > i { font-size: 0.7rem; }
+
+.mg-row__badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
     font-size: 0.62rem;
     font-weight: 600;
     padding: 2px 8px;
     border-radius: 999px;
-    background: var(--m-bg-medium);
-    border: 1px solid var(--m-border);
-    color: var(--m-text-muted);
     text-transform: uppercase;
     letter-spacing: 0.04em;
+    border: 1px solid;
+    flex-shrink: 0;
 }
-.mg-card__meta {
-    font-size: 0.7rem;
-    color: var(--m-text-muted);
-    display: flex;
-    gap: 12px;
+.mg-row__badge--system {
+    color: rgb(37, 99, 235);
+    background: rgba(37, 99, 235, 0.12);
+    border-color: rgba(37, 99, 235, 0.3);
 }
-.mg-card__meta i { margin-right: 4px; }
+.mg-row__badge > i { font-size: 0.55rem; }
 
-.mg-card__actions { display: flex; gap: 4px; flex-shrink: 0; }
-.mg-card__btn {
-    width: 28px; height: 28px;
-    display: grid; place-items: center;
-    background: transparent;
+/* Coluna de ações */
+.mg-row__actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 6px;
+    flex-shrink: 0;
+}
+.mg-row__btn {
+    width: 28px;
+    height: 28px;
+    display: grid;
+    place-items: center;
+    background: var(--p-content-background);
     border: 1px solid var(--m-border);
     color: var(--m-text-muted);
-    border-radius: 9px;
+    border-radius: 8px;
     cursor: pointer;
     font-family: inherit;
     transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
+    flex-shrink: 0;
 }
-.mg-card__btn:hover { background: var(--m-bg-soft-hover); color: var(--m-text); }
-.mg-card__btn--danger:hover {
-    background: rgba(239, 68, 68, 0.15);
-    border-color: rgba(239, 68, 68, 0.4);
-    color: rgb(248, 113, 113);
+.mg-row__btn: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);
 }
-.mg-card__btn > i { font-size: 0.7rem; }
+.mg-row__btn--danger:hover {
+    background: rgba(220, 38, 38, 0.12);
+    border-color: rgba(220, 38, 38, 0.5);
+    color: rgb(220, 38, 38);
+}
+.mg-row__btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+.mg-row__btn > i { font-size: 0.7rem; }
 
+/* Lock icon (sistema, sem ações) */
+.mg-row__locked {
+    width: 28px;
+    height: 28px;
+    display: grid;
+    place-items: center;
+    color: var(--m-text-faint);
+    font-size: 0.7rem;
+}
+
+/* ─── Grid view ─── */
+.mg-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;
+}
+.mg-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;
+}
+.mg-grid::-webkit-scrollbar { width: 5px; }
+.mg-grid::-webkit-scrollbar-thumb { background: var(--m-border-strong); border-radius: 3px; }
+.mg-grid__loading {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 32px;
+}
+.mg-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;
+}
+.mg-grid__card:hover {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+    transform: translateY(-1px);
+}
+.mg-grid__card:focus-visible {
+    outline: 2px solid var(--p-primary-color);
+    outline-offset: 2px;
+}
+.mg-grid__card.is-system  { border-left-color: rgb(37, 99, 235); cursor: default; }
+.mg-grid__card.is-system:hover { transform: none; }
+.mg-grid__card.is-em-uso  { border-left-color: rgb(22, 163, 74); }
+.mg-grid__card.is-vazio   { border-left-color: var(--m-border-strong); }
+
+.mg-grid__top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+}
+.mg-grid__dot {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    flex-shrink: 0;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+}
+.mg-grid__name {
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: var(--m-text);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mg-grid__meta {
+    margin-top: auto;
+    padding-top: 4px;
+}
+.mg-grid__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 6px;
+    border-top: 1px solid var(--m-border);
+    padding-top: 8px;
+    margin-top: 4px;
+    min-height: 36px;
+}
+
+/* Paginator standalone (grid view) */
+.mg-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;
+}
+.mg-paginator.p-paginator .p-paginator-current {
+    color: var(--m-text-muted);
+    font-size: 0.78rem;
+    background: transparent;
+    border: none;
+    padding: 0 6px;
+}
+.mg-paginator.p-paginator .p-paginator-first,
+.mg-paginator.p-paginator .p-paginator-prev,
+.mg-paginator.p-paginator .p-paginator-next,
+.mg-paginator.p-paginator .p-paginator-last,
+.mg-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;
+}
+.mg-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);
+}
+.mg-paginator.p-paginator .p-paginator-first:not(.p-disabled):hover,
+.mg-paginator.p-paginator .p-paginator-prev:not(.p-disabled):hover,
+.mg-paginator.p-paginator .p-paginator-next:not(.p-disabled):hover,
+.mg-paginator.p-paginator .p-paginator-last:not(.p-disabled):hover,
+.mg-paginator.p-paginator .p-paginator-page:not(.p-paginator-page-selected):hover {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+}
+.mg-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;
+}
+.mg-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;
+}
+
+/* ─── Empty state ─── */
 .mg-empty {
     margin: 24px 0;
     padding: 56px 28px;
@@ -715,21 +2043,242 @@ onBeforeUnmount(() => {
     background: color-mix(in srgb, var(--m-bg-soft) 40%, transparent);
     gap: 8px;
 }
-.mg-empty__icon {
-    font-size: 2rem;
-    color: var(--m-text-faint);
-    margin-bottom: 4px;
+.mg-empty__icon { font-size: 2rem; color: var(--m-text-faint); margin-bottom: 4px; }
+.mg-empty__title { font-size: 0.92rem; font-weight: 600; color: var(--m-text); }
+.mg-empty__hint { font-size: 0.78rem; }
+.mg-empty__btn { margin-top: 8px; }
+
+/* ─── Dialog "Pacientes do grupo" ─── */
+.mg-pdlg__header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
 }
-.mg-empty__title {
+.mg-pdlg__avatar {
+    width: 36px;
+    height: 36px;
+    display: grid;
+    place-items: center;
+    border-radius: 8px;
+    color: white;
+    font-weight: 700;
+    font-size: 0.95rem;
+    flex-shrink: 0;
+    overflow: hidden;
+}
+.mg-pdlg__avatar--sm {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    font-size: 0.78rem;
+    border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
+}
+.mg-pdlg__avatar img { width: 100%; height: 100%; object-fit: cover; }
+.mg-pdlg__title {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+}
+.mg-pdlg__name {
+    font-size: 1rem;
+    font-weight: 700;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mg-pdlg__sub {
+    font-size: 0.72rem;
+    color: var(--m-text-muted);
+}
+
+.mg-pdlg__body {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+}
+.mg-pdlg__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+.mg-pdlg__search {
+    flex: 1;
+    min-width: 200px;
+    max-width: 320px;
+}
+.mg-pdlg__count-pill {
+    padding: 4px 10px;
+    border-radius: 999px;
+    font-size: 0.72rem;
+    font-weight: 600;
+    flex-shrink: 0;
+}
+
+.mg-pdlg__loading {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 20px;
+    font-size: 0.85rem;
+    justify-content: center;
+}
+.mg-pdlg__error {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 16px;
+    background: rgba(220, 38, 38, 0.10);
+    border: 1px solid rgba(220, 38, 38, 0.30);
+    border-radius: 8px;
+    color: rgb(220, 38, 38);
+    font-size: 0.82rem;
+}
+
+.mg-pdlg__empty {
+    padding: 36px 20px;
+    text-align: center;
+    color: var(--m-text-muted);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+}
+.mg-pdlg__empty-icon {
+    width: 48px;
+    height: 48px;
+    display: grid;
+    place-items: center;
+    border-radius: 10px;
+    margin-bottom: 8px;
+    font-size: 1.4rem;
+}
+.mg-pdlg__empty-icon-pi {
+    font-size: 1.6rem;
+    opacity: 0.4;
+    margin-bottom: 8px;
+}
+.mg-pdlg__empty-title {
     font-size: 0.92rem;
     font-weight: 600;
     color: var(--m-text);
 }
-.mg-empty__hint {
+.mg-pdlg__empty-hint {
     font-size: 0.78rem;
-    margin-bottom: 8px;
+}
+.mg-pdlg__inline-clear-btn {
+    margin-top: 10px;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    background: transparent;
+    border: 1px solid var(--m-border);
+    color: var(--m-text-muted);
+    border-radius: 8px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.78rem;
+    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
+}
+.mg-pdlg__inline-clear-btn:hover {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+    color: var(--m-text);
 }
 
+/* DataTable interna do dialog — estilo mais leve que a tabela principal
+   pra não competir com o chrome do dialog. */
+.mg-pdlg__table :deep(.p-datatable) {
+    background: transparent;
+    border: 1px solid var(--m-border);
+    border-radius: 10px;
+    overflow: hidden;
+}
+.mg-pdlg__table :deep(.p-datatable-thead > tr > th) {
+    background: var(--m-bg-soft) !important;
+    color: var(--m-text);
+    font-size: 0.74rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--m-border);
+}
+.mg-pdlg__table :deep(.p-datatable-tbody > tr > td) {
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--m-border);
+    background: transparent;
+    vertical-align: middle;
+}
+.mg-pdlg__table :deep(.p-datatable-tbody > tr:hover) {
+    background: var(--m-bg-soft-hover);
+}
+.mg-pdlg__table :deep(.p-paginator) {
+    background: var(--m-bg-soft);
+    border: none;
+    border-top: 1px solid var(--m-border);
+    padding: 8px 12px;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+
+.mg-pdlg__patient {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+}
+.mg-pdlg__patient-text {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+}
+.mg-pdlg__patient-name {
+    font-size: 0.88rem;
+    font-weight: 600;
+    color: var(--m-text);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mg-pdlg__patient-email {
+    font-size: 0.74rem;
+    color: var(--m-text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mg-pdlg__phone {
+    color: var(--m-text-muted);
+    font-size: 0.85rem;
+}
+
+.mg-pdlg__open-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    background: transparent;
+    border: 1px solid;
+    border-radius: 8px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.78rem;
+    font-weight: 600;
+    transition: background-color 140ms ease;
+}
+.mg-pdlg__open-btn:hover {
+    background: color-mix(in srgb, currentColor 12%, transparent);
+}
+.mg-pdlg__open-btn > i { font-size: 0.7rem; }
+
+/* ─── Drawer mobile ─── */
 .mg-mobile-drawer {
     position: fixed;
     top: 0; left: 0;
@@ -765,6 +2314,31 @@ onBeforeUnmount(() => {
     height: auto;
     overflow: visible;
     padding: 0;
+    background: transparent;
+    border-right: none;
+}
+.mg-mobile-drawer__scroll .mg-side__scroll {
+    flex: none;
+    min-height: 0;
+    overflow: visible;
+    display: flex;
+    flex-direction: column;
+}
+.mg-mobile-drawer__scroll .mg-side__footer {
+    position: sticky;
+    bottom: 0;
+    margin: 8px -12px -24px;
+    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;
+}
+.mg-mobile-drawer__scroll .mg-w--side {
+    margin: 0 0 12px;
+}
+.mg-mobile-drawer__scroll .mg-w--side:last-of-type {
+    margin-bottom: 0;
 }
 .mg-mobile-drawer__backdrop {
     position: fixed;
@@ -779,12 +2353,50 @@ onBeforeUnmount(() => {
 .mg-drawer-fade-enter-from,
 .mg-drawer-fade-leave-to { opacity: 0; }
 
+/* Botão X de fechar no header do dialog "Pacientes do grupo" — estilo
+   igual ao .mg-close da página (32×32, bg --m-bg-soft, border). Usa
+   :global() porque o Dialog do PrimeVue é teleportado pra body, fora
+   do escopo scoped do componente. */
+:global(.mg-pdlg-close-btn) {
+    width: 32px !important;
+    height: 32px !important;
+    background: var(--m-bg-soft) !important;
+    border: 1px solid var(--m-border) !important;
+    color: var(--m-text) !important;
+    border-radius: 9px !important;
+    transition: background-color 140ms ease !important;
+}
+:global(.mg-pdlg-close-btn:hover) {
+    background: var(--m-bg-soft-hover) !important;
+}
+:global(.mg-pdlg-close-btn .p-button-icon) {
+    font-size: 0.85rem !important;
+}
+
+/* ─── Color preset (no dialog de criar/editar grupo) ─── */
+.mg-color-preset {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    cursor: pointer;
+    transition: transform 140ms ease, box-shadow 140ms ease;
+}
+.mg-color-preset:hover {
+    transform: scale(1.12);
+}
+.mg-color-preset.is-selected {
+    box-shadow: 0 0 0 2px var(--p-content-background), 0 0 0 4px var(--p-primary-color);
+    transform: scale(1.08);
+}
+
+/* ─── Mobile (<1024px) ─── */
 @media (max-width: 1023px) {
-    .mg-body { flex-direction: column; padding: 8px; }
-    .mg-main { width: 100%; }
+    .mg-body { flex-direction: column; padding: 0; }
+    .mg-main { width: 100%; padding: 8px; }
     .mg-page__title > span:first-of-type { display: none; }
     .mg-menu-btn--mobile-only { display: inline-flex; }
-    .mg-act-btn span { display: none; }
-    .mg-act-btn { width: 32px; padding: 0; justify-content: center; }
+    .mg-act-btn--primary span { display: none; }
+    .mg-act-btn--primary { width: 32px; padding: 0; justify-content: center; }
 }
 </style>
diff --git a/src/layout/melissa/MelissaMedicos.vue b/src/layout/melissa/MelissaMedicos.vue
index 5abe786..9706f4a 100644
--- a/src/layout/melissa/MelissaMedicos.vue
+++ b/src/layout/melissa/MelissaMedicos.vue
@@ -1,31 +1,37 @@
 <script setup>
 /*
- * MelissaMedicos — CRUD de médicos/encaminhadores dentro de Melissa.
- * Segue blueprint melissa-page-blueprint.md.
+ * MelissaMedicos — Médicos & encaminhadores (CRUD + lista de pacientes
+ * encaminhados). Segue blueprint melissa-table-page-blueprint.md.
  *
- * Layout 2-col:
- *   - COL 1 — Aside (~280px): stats (total, com pacientes, especialidades) + busca
- *   - COL 2 — Lista de cards (avatar com inicial, nome, especialidade, contato,
- *            contagem de pacientes encaminhados)
+ * Tabela: medicos (filtro por owner_id + ativo=true). Vínculo com paciente
+ * é "implícito" via patients.encaminhado_por (ILIKE %nome%) — não há
+ * join table dedicada. Por isso a contagem é feita comparando strings.
  *
- * Click no card abre dialog de edição. Botão "+" cria novo.
- * Reusa Medicos.service.js (createMedico, updateMedico, deleteMedico).
+ * Row design preservado: avatar circular com iniciais + Dr(a). nome +
+ * chip especialidade + meta inline (CRM, phone, email, clínica). Coluna
+ * "Ações" frozen 100px com pencil + trash (soft delete: ativo=false).
+ *
+ * Click na coluna "Pacientes" abre dialog listando pacientes encaminhados
+ * (espelha MelissaGrupos / MelissaTags).
  */
-import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+import { ref, reactive, computed, watch, onMounted, onBeforeUnmount } from 'vue';
 import { useToast } from 'primevue/usetoast';
 import { useConfirm } from 'primevue/useconfirm';
 import {
     listMedicosWithPatientCounts,
     createMedico,
     updateMedico,
-    deleteMedico
+    deleteMedico,
+    fetchPatientsByMedicoNome
 } from '@/services/Medicos.service.js';
+import PatientCadastroDialog from '@/components/ui/PatientCadastroDialog.vue';
+// DataTable/Column/Paginator/Dialog/InputText/Select/Textarea/Button: auto via PrimeVueResolver
 
 const emit = defineEmits(['close']);
 const toast = useToast();
 const confirm = useConfirm();
 
-// ── Breakpoints + drawer ───────────────────────────────────
+// ── Breakpoints + drawer ──────────────────────────────────
 const drawerOpen = ref(false);
 const isMobile = ref(false);
 let _mqMobile = null;
@@ -40,10 +46,10 @@ function fecharDrawer() { drawerOpen.value = false; }
 const loading = ref(false);
 const saving = ref(false);
 const medicos = ref([]);
+
 const busca = ref('');
-const carregandoInicial = computed(
-    () => loading.value && medicos.value.length === 0
-);
+const especFilter = ref('');   // string vazia = todas; senão = especialidade exata
+const usoFilter = ref('');     // '' | 'com_pacs' | 'sem_pacs'
 
 // ── Especialidades ─────────────────────────────────────────
 const ESPECIALIDADES = [
@@ -62,13 +68,41 @@ const ESPECIALIDADES = [
     'Outra'
 ];
 
-// ── Helpers ────────────────────────────────────────────────
+const USO_FILTER_OPTIONS = [
+    { key: 'com_pacs', label: 'Com pacientes', icon: 'pi pi-users' },
+    { key: 'sem_pacs', label: 'Sem pacientes', icon: 'pi pi-circle' }
+];
+
+// Lista de especialidades disponíveis no Select (somente as que aparecem
+// nos médicos cadastrados; evita opções vazias). Inclui "Todas".
+const especOptions = computed(() => {
+    const set = new Set();
+    for (const m of medicos.value) {
+        if (m.especialidade) set.add(m.especialidade);
+    }
+    return Array.from(set).sort((a, b) => a.localeCompare(b, 'pt-BR'));
+});
+
+function toggleUsoFilter(u) {
+    usoFilter.value = usoFilter.value === u ? '' : u;
+}
+
+const hasActiveFilters = computed(() =>
+    !!(busca.value || especFilter.value || usoFilter.value)
+);
+function clearAllFilters() {
+    busca.value = '';
+    especFilter.value = '';
+    usoFilter.value = '';
+}
+
+// ── Helpers ───────────────────────────────────────────────
 function digitsOnly(v) { return String(v ?? '').replace(/\D/g, ''); }
 function fmtPhone(v) {
     const d = digitsOnly(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)}`;
+    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 iniciais(nome) {
@@ -78,32 +112,78 @@ function iniciais(nome) {
     return (partes[0][0] + partes[partes.length - 1][0]).toUpperCase();
 }
 
-// ── Stats ──────────────────────────────────────────────────
+// ── Helpers de status (rowClass) ──────────────────────────
+function rowStatusClass(m) {
+    if (!m) return '';
+    return Number(m.patients_count || 0) > 0 ? 'is-com-pacs' : 'is-sem-pacs';
+}
+
+// ── Stats ─────────────────────────────────────────────────
 const stats = computed(() => {
     const all = medicos.value;
+    const especs = new Set(all.map((m) => m.especialidade).filter(Boolean)).size;
     const comPacs = all.filter((m) => Number(m.patients_count || 0) > 0).length;
     const totalPacs = all.reduce((s, m) => s + Number(m.patients_count || 0), 0);
-    const especs = new Set(all.map((m) => m.especialidade).filter(Boolean)).size;
     return [
         { key: 'total', label: 'Médicos', value: all.length, cls: 'neutral' },
-        { key: 'esp', label: 'Especialidades', value: especs, cls: 'neutral' },
+        { key: 'esp', label: 'Especialidades', value: especs, cls: especs > 0 ? 'info' : 'neutral' },
         { key: 'com', label: 'Com pacientes', value: comPacs, cls: comPacs > 0 ? 'ok' : 'neutral' },
-        { key: 'enc', label: 'Encaminhados', value: totalPacs, cls: totalPacs > 0 ? 'ok' : 'neutral' }
+        { key: 'enc', label: 'Encaminhados', value: totalPacs, cls: totalPacs > 0 ? 'accent' : 'neutral' }
     ];
 });
 
-const medicosFiltrados = computed(() => {
+// ── Filtragem ─────────────────────────────────────────────
+const filtered = computed(() => {
+    let list = medicos.value;
+    if (especFilter.value) {
+        list = list.filter((m) => m.especialidade === especFilter.value);
+    }
+    if (usoFilter.value === 'com_pacs') {
+        list = list.filter((m) => Number(m.patients_count || 0) > 0);
+    }
+    if (usoFilter.value === 'sem_pacs') {
+        list = list.filter((m) => Number(m.patients_count || 0) === 0);
+    }
     const q = String(busca.value || '').trim().toLowerCase();
-    if (!q) return medicos.value;
-    return medicos.value.filter((m) => {
-        return String(m.nome || '').toLowerCase().includes(q) ||
+    if (q) {
+        list = list.filter((m) =>
+            String(m.nome || '').toLowerCase().includes(q) ||
             String(m.especialidade || '').toLowerCase().includes(q) ||
             String(m.crm || '').toLowerCase().includes(q) ||
-            String(m.clinica || '').toLowerCase().includes(q);
-    });
+            String(m.clinica || '').toLowerCase().includes(q)
+        );
+    }
+    return list;
 });
 
-// ── Fetch ──────────────────────────────────────────────────
+// ── Paginação compartilhada (DataTable + grid) ────────────
+const PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
+const rowsMM = ref(10);
+const firstMM = ref(0);
+function onPage(event) {
+    firstMM.value = event.first;
+    rowsMM.value = event.rows;
+}
+watch([busca, especFilter, usoFilter], () => { firstMM.value = 0; });
+
+const pagedItems = computed(() =>
+    filtered.value.slice(firstMM.value, firstMM.value + rowsMM.value)
+);
+
+// ── View mode (list / grid) ───────────────────────────────
+const VIEW_MODE_KEY = 'mm.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 */ }
+}
+
+// ── Fetch ─────────────────────────────────────────────────
 async function fetchAll() {
     loading.value = true;
     try {
@@ -116,7 +196,19 @@ async function fetchAll() {
     }
 }
 
-// ── Dialog ─────────────────────────────────────────────────
+onMounted(async () => {
+    if (typeof window !== 'undefined' && window.matchMedia) {
+        _mqMobile = window.matchMedia('(max-width: 1023px)');
+        isMobile.value = _mqMobile.matches;
+        _mqMobile.addEventListener('change', _onMqMobileChange);
+    }
+    await fetchAll();
+});
+onBeforeUnmount(() => {
+    if (_mqMobile) _mqMobile.removeEventListener('change', _onMqMobileChange);
+});
+
+// ── CRUD ──────────────────────────────────────────────────
 const dlgOpen = ref(false);
 const dlgMode = ref('create');
 const dlgError = ref('');
@@ -170,6 +262,9 @@ function abrirEditar(row) {
     dlgError.value = '';
     dlgOpen.value = true;
 }
+function onRowClick(event) {
+    if (event?.data) abrirEditar(event.data);
+}
 
 async function salvar() {
     const nome = String(dlgForm.value.nome || '').trim();
@@ -214,7 +309,6 @@ async function salvar() {
     }
 }
 
-// ── Delete ─────────────────────────────────────────────────
 function confirmarExcluir(row) {
     confirm.require({
         message: `Desativar "Dr(a). ${row.nome}"? O registro será ocultado da listagem.`,
@@ -239,16 +333,55 @@ async function excluir(row) {
     }
 }
 
-onMounted(async () => {
-    if (typeof window !== 'undefined' && window.matchMedia) {
-        _mqMobile = window.matchMedia('(max-width: 1023px)');
-        isMobile.value = _mqMobile.matches;
-        _mqMobile.addEventListener('change', _onMqMobileChange);
-    }
-    await fetchAll();
+// ── Dialog: Pacientes encaminhados pelo médico ─────────────────
+// Mesmo pattern de MelissaGrupos/MelissaTags. A listagem vem do service
+// (fetchPatientsByMedicoNome) que faz ILIKE em patients.encaminhado_por.
+const patientsDialog = reactive({
+    open: false,
+    loading: false,
+    error: '',
+    medico: null,
+    items: [],
+    search: ''
 });
-onBeforeUnmount(() => {
-    if (_mqMobile) _mqMobile.removeEventListener('change', _onMqMobileChange);
+
+const patientsDialogFiltered = computed(() => {
+    const s = String(patientsDialog.search || '').toLowerCase().trim();
+    if (!s) return patientsDialog.items || [];
+    return (patientsDialog.items || []).filter((p) =>
+        String(p.full_name || '').toLowerCase().includes(s) ||
+        String(p.email || '').toLowerCase().includes(s) ||
+        String(p.phone || '').toLowerCase().includes(s)
+    );
+});
+
+async function openMedicoPatientsModal(medicoRow) {
+    if (!medicoRow) return;
+    patientsDialog.open = true;
+    patientsDialog.loading = true;
+    patientsDialog.error = '';
+    patientsDialog.medico = medicoRow;
+    patientsDialog.items = [];
+    patientsDialog.search = '';
+    try {
+        const data = await fetchPatientsByMedicoNome(medicoRow.nome);
+        patientsDialog.items = data || [];
+    } catch (e) {
+        patientsDialog.error = e?.message || 'Erro ao carregar pacientes encaminhados.';
+    } finally {
+        patientsDialog.loading = false;
+    }
+}
+
+const editPatientId = ref(null);
+const editPatientDialog = ref(false);
+function abrirPaciente(patient) {
+    if (!patient?.id) return;
+    editPatientId.value = String(patient.id);
+    editPatientDialog.value = true;
+}
+watch(editPatientDialog, (isOpen) => {
+    if (!isOpen) editPatientId.value = null;
 });
 </script>
 
@@ -257,7 +390,7 @@ onBeforeUnmount(() => {
         class="mm-mobile-drawer"
         :class="{ 'is-open': drawerOpen }"
         v-show="isMobile"
-        aria-label="Estatísticas e busca"
+        aria-label="Estatísticas e filtros"
     >
         <div id="mm-mobile-drawer-target" class="mm-mobile-drawer__scroll" />
     </aside>
@@ -273,25 +406,25 @@ onBeforeUnmount(() => {
         <header class="mm-page__head">
             <button
                 class="mm-menu-btn mm-menu-btn--mobile-only"
-                v-tooltip.bottom="'Estatísticas & busca'"
+                v-tooltip.bottom="'Estatísticas & filtros'"
                 @click="toggleDrawer"
             >
                 <i class="pi pi-bars" />
                 <span>Menu Médicos</span>
             </button>
             <div class="mm-page__title">
-                <i class="pi pi-user-edit text-rose-300" />
+                <i class="pi pi-user-edit mm-page__title-icon" />
                 <span>Médicos & referências</span>
-                <span class="mm-page__count">{{ medicosFiltrados.length }}</span>
+                <span class="mm-page__count">{{ filtered.length }}</span>
             </div>
             <div class="mm-page__actions">
                 <button
-                    class="mm-act-btn"
+                    class="mm-act-btn mm-act-btn--primary"
                     v-tooltip.bottom="'Novo médico'"
                     :disabled="loading"
                     @click="abrirCriar"
                 >
-                    <i class="pi pi-plus" />
+                    <i :class="saving ? 'pi pi-spin pi-spinner' : 'pi pi-plus'" />
                     <span>Novo</span>
                 </button>
                 <button
@@ -308,182 +441,770 @@ onBeforeUnmount(() => {
             </div>
         </header>
 
+        <!-- Subheader explicativo (blueprint §9) -->
+        <div class="mm-subheader">
+            <i class="pi pi-info-circle mm-subheader__icon" />
+            <span class="mm-subheader__text">
+                Médicos e profissionais de referência que <strong>encaminham pacientes</strong>
+                pra clínica. Cadastre pra registrar a origem do paciente — a contagem é feita
+                automaticamente pelo campo <strong>"encaminhado por"</strong> do prontuário.
+            </span>
+        </div>
+
         <div class="mm-body">
             <Teleport to="#mm-mobile-drawer-target" :disabled="!isMobile">
             <aside class="mm-side">
-                <div class="mm-w">
-                    <div class="mm-w__head">
-                        <span class="mm-w__title"><i class="pi pi-chart-bar" /> Estatísticas</span>
-                    </div>
-                    <div class="mm-stats">
-                        <template v-if="carregandoInicial">
-                            <div v-for="i in 4" :key="`sk-${i}`" class="mm-stat" aria-busy="true">
-                                <div class="mm-stat__val melissa-skeleton melissa-skeleton--number" />
-                                <div class="mm-stat__lbl melissa-skeleton melissa-skeleton--text" style="width: 60%; margin-top: 6px;" />
+                <div class="mm-side__scroll">
+                    <!-- Stats -->
+                    <div class="mm-w mm-w--side">
+                        <div class="mm-w__head">
+                            <span class="mm-w__title"><i class="pi pi-chart-bar" /> Estatísticas</span>
+                        </div>
+                        <div class="mm-stats">
+                            <div
+                                v-for="s in stats"
+                                :key="s.key"
+                                class="mm-stat"
+                                :class="`is-${s.cls}`"
+                            >
+                                <div class="mm-stat__val">{{ s.value }}</div>
+                                <div class="mm-stat__lbl">{{ s.label }}</div>
                             </div>
-                        </template>
-                        <div
-                            v-for="s in stats"
-                            v-else
-                            :key="s.key"
-                            class="mm-stat"
-                            :class="`is-${s.cls}`"
-                        >
-                            <div class="mm-stat__val">{{ s.value }}</div>
-                            <div class="mm-stat__lbl">{{ s.label }}</div>
+                        </div>
+                    </div>
+
+                    <!-- Filtro de especialidade (Select PrimeVue — muitas opções
+                         pra usar button list).  -->
+                    <div class="mm-w mm-w--side">
+                        <div class="mm-w__head">
+                            <span class="mm-w__title"><i class="pi pi-bookmark" /> Especialidade</span>
+                            <button
+                                v-if="especFilter"
+                                class="mm-side__clear-inline"
+                                v-tooltip.top="'Limpar filtro de especialidade'"
+                                aria-label="Limpar filtro de especialidade"
+                                @click="especFilter = ''"
+                            >
+                                <i class="pi pi-times" />
+                            </button>
+                        </div>
+                        <Select
+                            v-model="especFilter"
+                            :options="especOptions"
+                            placeholder="Todas as especialidades"
+                            class="w-full mm-side__select"
+                            :disabled="especOptions.length === 0"
+                            showClear
+                        />
+                    </div>
+
+                    <!-- Filtro de uso -->
+                    <div class="mm-w mm-w--side">
+                        <div class="mm-w__head">
+                            <span class="mm-w__title"><i class="pi pi-users" /> Uso</span>
+                            <button
+                                v-if="usoFilter"
+                                class="mm-side__clear-inline"
+                                v-tooltip.top="'Limpar filtro de uso'"
+                                aria-label="Limpar filtro de uso"
+                                @click="usoFilter = ''"
+                            >
+                                <i class="pi pi-times" />
+                            </button>
+                        </div>
+                        <div class="mm-side__list">
+                            <button
+                                v-for="o in USO_FILTER_OPTIONS"
+                                :key="o.key"
+                                class="mm-side__item"
+                                :class="[`is-uso-${o.key}`, { 'is-active': usoFilter === o.key }]"
+                                @click="toggleUsoFilter(o.key)"
+                            >
+                                <i :class="o.icon" />
+                                <span>{{ o.label }}</span>
+                            </button>
                         </div>
                     </div>
                 </div>
 
-                <div class="mm-w">
-                    <div class="mm-w__head">
-                        <span class="mm-w__title"><i class="pi pi-search" /> Buscar</span>
+                <Transition name="mm-clear">
+                    <div v-if="hasActiveFilters" class="mm-side__footer">
+                        <button class="mm-side__clear-all" @click="clearAllFilters">
+                            <i class="pi pi-filter-slash" />
+                            <span>Limpar filtros</span>
+                        </button>
                     </div>
-                    <input
-                        v-model="busca"
-                        type="text"
-                        placeholder="Nome, especialidade, CRM, clínica…"
-                        class="mm-search__input"
-                    />
-                </div>
+                </Transition>
             </aside>
             </Teleport>
 
             <div class="mm-main">
-                <div class="mm-list">
-                    <template v-if="carregandoInicial">
-                        <div v-for="i in 5" :key="`csk-${i}`" class="mm-card mm-card--skeleton" aria-busy="true">
-                            <span class="mm-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%;" />
-                            </div>
-                        </div>
-                    </template>
-
-                    <div v-else-if="medicosFiltrados.length === 0" class="mm-empty">
-                        <i class="pi pi-user-edit mm-empty__icon" />
-                        <div class="mm-empty__title">Nenhum médico encontrado</div>
-                        <div class="mm-empty__hint">
-                            <template v-if="busca">Ajuste a busca pra ver mais resultados.</template>
-                            <template v-else>Cadastre médicos pra registrar encaminhamentos.</template>
-                        </div>
-                        <button class="mm-act-btn" @click="abrirCriar">
-                            <i class="pi pi-plus" /><span>Novo médico</span>
+                <div class="mm-toolbar">
+                    <div class="mm-search">
+                        <i class="pi pi-search mm-search__icon" />
+                        <input
+                            v-model="busca"
+                            type="text"
+                            placeholder="Buscar por nome, especialidade, CRM, clínica…"
+                            class="mm-search__input"
+                        />
+                        <button
+                            v-if="busca"
+                            class="mm-search__clear"
+                            v-tooltip.bottom="'Limpar busca'"
+                            @click="busca = ''"
+                        >
+                            <i class="pi pi-times" />
                         </button>
                     </div>
+                    <div class="mm-view-toggle" role="group" aria-label="Visualização">
+                        <button
+                            class="mm-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="mm-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>
 
-                    <div
-                        v-for="m in medicosFiltrados"
-                        v-else
-                        :key="m.id"
-                        class="mm-card"
-                        @click="abrirEditar(m)"
-                    >
-                        <span class="mm-card__avatar">{{ iniciais(m.nome) }}</span>
-                        <div class="mm-card__main">
-                            <div class="mm-card__name-row">
-                                <span class="mm-card__name">Dr(a). {{ m.nome }}</span>
-                                <span v-if="m.especialidade" class="mm-card__esp">{{ m.especialidade }}</span>
+                <DataTable
+                    v-if="viewMode === 'list'"
+                    :value="filtered"
+                    :loading="loading"
+                    dataKey="id"
+                    paginator
+                    :rows="rowsMM"
+                    :first="firstMM"
+                    :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: 800px"
+                    class="mm-table"
+                    @row-click="onRowClick"
+                    @page="onPage"
+                >
+                    <Column header="Médico" style="min-width: 280px">
+                        <template #body="{ data }">
+                            <div class="mm-row__med">
+                                <span class="mm-row__avatar">{{ iniciais(data.nome) }}</span>
+                                <div class="mm-row__main">
+                                    <div class="mm-row__name-row">
+                                        <span class="mm-row__name">Dr(a). {{ data.nome }}</span>
+                                        <span v-if="data.especialidade" class="mm-row__esp">
+                                            {{ data.especialidade }}
+                                        </span>
+                                    </div>
+                                    <div v-if="data.clinica || data.cidade" class="mm-row__sub">
+                                        <i v-if="data.clinica" class="pi pi-building" />
+                                        <span v-if="data.clinica">{{ data.clinica }}</span>
+                                        <span v-if="data.clinica && data.cidade" class="mm-row__sep">·</span>
+                                        <span v-if="data.cidade">
+                                            {{ data.cidade }}{{ data.estado ? '/' + data.estado : '' }}
+                                        </span>
+                                    </div>
+                                </div>
                             </div>
-                            <div class="mm-card__meta">
-                                <span v-if="m.crm"><i class="pi pi-id-card" /> CRM {{ m.crm }}</span>
-                                <span v-if="m.telefone_profissional"><i class="pi pi-phone" /> {{ fmtPhone(m.telefone_profissional) }}</span>
-                                <span v-if="m.email"><i class="pi pi-envelope" /> {{ m.email }}</span>
-                                <span v-if="m.clinica"><i class="pi pi-building" /> {{ m.clinica }}</span>
+                        </template>
+                    </Column>
+
+                    <Column header="Contato" style="min-width: 220px">
+                        <template #body="{ data }">
+                            <div class="mm-row__contact">
+                                <span v-if="data.crm">
+                                    <i class="pi pi-id-card" /> CRM {{ data.crm }}
+                                </span>
+                                <span v-if="data.telefone_profissional">
+                                    <i class="pi pi-phone" /> {{ fmtPhone(data.telefone_profissional) }}
+                                </span>
+                                <span v-if="data.email">
+                                    <i class="pi pi-envelope" /> {{ data.email }}
+                                </span>
+                                <span v-if="!data.crm && !data.telefone_profissional && !data.email" class="mm-row__empty">—</span>
                             </div>
-                        </div>
-                        <div class="mm-card__right">
-                            <div class="mm-card__count">
+                        </template>
+                    </Column>
+
+                    <Column header="Pacientes" style="width: 180px; min-width: 160px">
+                        <template #body="{ data }">
+                            <button
+                                type="button"
+                                class="mm-row__count-btn"
+                                :class="{ 'is-empty': !data.patients_count }"
+                                :disabled="!data.patients_count"
+                                v-tooltip.top="data.patients_count > 0 ? 'Ver pacientes encaminhados' : 'Nenhum paciente encaminhado'"
+                                aria-label="Ver pacientes encaminhados"
+                                @click.stop="openMedicoPatientsModal(data)"
+                            >
                                 <i class="pi pi-users" />
-                                {{ m.patients_count || 0 }}
-                            </div>
-                            <div class="mm-card__actions" @click.stop>
+                                <span>
+                                    {{ data.patients_count || 0 }}
+                                    {{ (data.patients_count || 0) === 1 ? 'paciente' : 'pacientes' }}
+                                </span>
+                            </button>
+                        </template>
+                    </Column>
+
+                    <Column
+                        header=""
+                        :style="{ width: '100px', maxWidth: '100px', minWidth: '100px' }"
+                        frozen
+                        alignFrozen="right"
+                        class="mm-col-acoes"
+                    >
+                        <template #body="{ data }">
+                            <div class="mm-row__actions" @click.stop>
                                 <button
-                                    class="mm-card__btn"
+                                    class="mm-row__btn"
                                     v-tooltip.left="'Editar'"
-                                    @click="abrirEditar(m)"
+                                    aria-label="Editar"
+                                    @click.stop="abrirEditar(data)"
                                 >
                                     <i class="pi pi-pencil" />
                                 </button>
                                 <button
-                                    class="mm-card__btn mm-card__btn--danger"
+                                    class="mm-row__btn mm-row__btn--danger"
                                     v-tooltip.left="'Desativar'"
-                                    @click="confirmarExcluir(m)"
+                                    aria-label="Desativar"
+                                    @click.stop="confirmarExcluir(data)"
+                                >
+                                    <i class="pi pi-trash" />
+                                </button>
+                            </div>
+                        </template>
+                    </Column>
+
+                    <template #empty>
+                        <div class="mm-empty">
+                            <i class="pi pi-user-edit mm-empty__icon" />
+                            <div class="mm-empty__title">Nenhum médico encontrado</div>
+                            <div class="mm-empty__hint">
+                                <template v-if="busca || especFilter || usoFilter">
+                                    Ajuste os filtros pra ver mais resultados.
+                                </template>
+                                <template v-else>
+                                    Cadastre médicos pra registrar encaminhamentos.
+                                </template>
+                            </div>
+                            <button class="mm-act-btn mm-act-btn--primary mm-empty__btn" @click="abrirCriar">
+                                <i class="pi pi-plus" />
+                                <span>Novo médico</span>
+                            </button>
+                        </div>
+                    </template>
+
+                    <template #loading>
+                        <div class="mm-table__loading">
+                            <i class="pi pi-spin pi-spinner" />
+                            <span>Carregando médicos…</span>
+                        </div>
+                    </template>
+                </DataTable>
+
+                <!-- View Grade -->
+                <div v-else-if="viewMode === 'grid'" class="mm-grid-wrap">
+                    <div v-if="loading && filtered.length === 0" class="mm-table__loading mm-grid__loading">
+                        <i class="pi pi-spin pi-spinner" />
+                        <span>Carregando médicos…</span>
+                    </div>
+                    <div v-else-if="filtered.length === 0" class="mm-empty">
+                        <i class="pi pi-user-edit mm-empty__icon" />
+                        <div class="mm-empty__title">Nenhum médico encontrado</div>
+                        <div class="mm-empty__hint">
+                            <template v-if="busca || especFilter || usoFilter">
+                                Ajuste os filtros pra ver mais resultados.
+                            </template>
+                            <template v-else>
+                                Cadastre médicos pra registrar encaminhamentos.
+                            </template>
+                        </div>
+                    </div>
+                    <div v-else class="mm-grid">
+                        <div
+                            v-for="m in pagedItems"
+                            :key="m.id"
+                            class="mm-grid__card"
+                            :class="rowStatusClass(m)"
+                            role="button"
+                            tabindex="0"
+                            @click="abrirEditar(m)"
+                            @keydown.enter.prevent="abrirEditar(m)"
+                            @keydown.space.prevent="abrirEditar(m)"
+                        >
+                            <div class="mm-grid__top">
+                                <span class="mm-row__avatar mm-row__avatar--lg">{{ iniciais(m.nome) }}</span>
+                                <span v-if="m.especialidade" class="mm-row__esp">{{ m.especialidade }}</span>
+                            </div>
+                            <div class="mm-grid__name">Dr(a). {{ m.nome }}</div>
+                            <div v-if="m.crm || m.telefone_profissional || m.email" class="mm-grid__contact">
+                                <span v-if="m.crm"><i class="pi pi-id-card" /> CRM {{ m.crm }}</span>
+                                <span v-if="m.telefone_profissional"><i class="pi pi-phone" /> {{ fmtPhone(m.telefone_profissional) }}</span>
+                                <span v-if="m.email"><i class="pi pi-envelope" /> {{ m.email }}</span>
+                            </div>
+                            <div class="mm-grid__meta" @click.stop>
+                                <button
+                                    type="button"
+                                    class="mm-row__count-btn"
+                                    :class="{ 'is-empty': !m.patients_count }"
+                                    :disabled="!m.patients_count"
+                                    v-tooltip.top="m.patients_count > 0 ? 'Ver pacientes encaminhados' : 'Nenhum paciente encaminhado'"
+                                    aria-label="Ver pacientes encaminhados"
+                                    @click.stop="openMedicoPatientsModal(m)"
+                                >
+                                    <i class="pi pi-users" />
+                                    <span>
+                                        {{ m.patients_count || 0 }}
+                                        {{ (m.patients_count || 0) === 1 ? 'paciente' : 'pacientes' }}
+                                    </span>
+                                </button>
+                            </div>
+                            <div class="mm-grid__footer" @click.stop>
+                                <button
+                                    class="mm-row__btn"
+                                    v-tooltip.top="'Editar'"
+                                    aria-label="Editar"
+                                    @click.stop="abrirEditar(m)"
+                                >
+                                    <i class="pi pi-pencil" />
+                                </button>
+                                <button
+                                    class="mm-row__btn mm-row__btn--danger"
+                                    v-tooltip.top="'Desativar'"
+                                    aria-label="Desativar"
+                                    @click.stop="confirmarExcluir(m)"
                                 >
                                     <i class="pi pi-trash" />
                                 </button>
                             </div>
                         </div>
                     </div>
+                    <Paginator
+                        v-if="filtered.length > 0"
+                        class="mm-paginator"
+                        :rows="rowsMM"
+                        :totalRecords="filtered.length"
+                        :first="firstMM"
+                        :rowsPerPageOptions="PAGE_SIZE_OPTIONS"
+                        template="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+                        currentPageReportTemplate="{first}–{last} de {totalRecords}"
+                        @page="onPage"
+                    />
                 </div>
             </div>
         </div>
 
-        <!-- Dialog create/edit -->
+        <!-- Dialog: criar/editar médico — pattern espelhado da seção
+             "Identidade" do PatientsCadastroPage: FloatLabel + IconField
+             + variant="filled" em todos os campos, section dividers
+             uppercase com linha h-px, grid xl:grid-cols-2. Botões e
+             chrome do dialog ficam no padrão PrimeVue. -->
         <Dialog
             v-model:visible="dlgOpen"
             modal
             dismissable-mask
-            :style="{ width: '560px', maxWidth: '94vw' }"
+            :draggable="false"
+            :style="{ width: '720px', maxWidth: '94vw' }"
             :header="dlgMode === 'create' ? 'Novo médico' : 'Editar médico'"
         >
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
-                <label class="text-xs text-[var(--text-color-secondary)] md:col-span-2">
-                    Nome *
-                    <InputText v-model="dlgForm.nome" placeholder="Nome completo" class="w-full mt-1" autofocus />
-                </label>
-                <label class="text-xs text-[var(--text-color-secondary)]">
-                    CRM
-                    <InputText v-model="dlgForm.crm" placeholder="Ex: 123456-SP" class="w-full mt-1" />
-                </label>
-                <label class="text-xs text-[var(--text-color-secondary)]">
-                    Especialidade
-                    <Select v-model="dlgForm.especialidade" :options="ESPECIALIDADES" placeholder="Selecione…" class="w-full mt-1" />
-                </label>
-                <label v-if="dlgForm.especialidade === 'Outra'" class="text-xs text-[var(--text-color-secondary)] md:col-span-2">
-                    Especialidade (livre)
-                    <InputText v-model="dlgForm.especialidade_outra" class="w-full mt-1" />
-                </label>
-                <label class="text-xs text-[var(--text-color-secondary)]">
-                    Telefone profissional
-                    <InputText v-model="dlgForm.telefone_profissional" placeholder="(11) 91234-5678" class="w-full mt-1" />
-                </label>
-                <label class="text-xs text-[var(--text-color-secondary)]">
-                    Telefone pessoal
-                    <InputText v-model="dlgForm.telefone_pessoal" placeholder="(11) 91234-5678" class="w-full mt-1" />
-                </label>
-                <label class="text-xs text-[var(--text-color-secondary)] md:col-span-2">
-                    E-mail
-                    <InputText v-model="dlgForm.email" placeholder="email@dominio.com" class="w-full mt-1" />
-                </label>
-                <label class="text-xs text-[var(--text-color-secondary)] md:col-span-2">
-                    Clínica/instituição
-                    <InputText v-model="dlgForm.clinica" class="w-full mt-1" />
-                </label>
-                <label class="text-xs text-[var(--text-color-secondary)]">
-                    Cidade
-                    <InputText v-model="dlgForm.cidade" class="w-full mt-1" />
-                </label>
-                <label class="text-xs text-[var(--text-color-secondary)]">
-                    Estado
-                    <InputText v-model="dlgForm.estado" maxlength="2" class="w-full mt-1" />
-                </label>
-                <label class="text-xs text-[var(--text-color-secondary)] md:col-span-2">
-                    Observações
-                    <Textarea v-model="dlgForm.observacoes" autoResize rows="2" class="w-full mt-1" />
-                </label>
-                <div v-if="dlgError" class="text-xs text-red-400 md:col-span-2">{{ dlgError }}</div>
+            <div class="p-1">
+                <!-- ── Identificação ─────────────────────────── -->
+                <div class="flex items-center gap-2 mb-5">
+                    <span class="text-[0.7rem] font-bold uppercase tracking-widest text-[var(--p-primary-color)]">
+                        Identificação
+                    </span>
+                    <div class="flex-1 h-px bg-[color-mix(in_srgb,var(--p-primary-color)_25%,transparent)]" />
+                </div>
+                <div class="grid grid-cols-1 gap-6 xl:grid-cols-2 mb-7">
+                    <!-- Nome — full width -->
+                    <div class="xl:col-span-2">
+                        <FloatLabel variant="on">
+                            <IconField>
+                                <InputIcon class="pi pi-user" />
+                                <InputText
+                                    id="med-nome"
+                                    v-model="dlgForm.nome"
+                                    class="w-full"
+                                    variant="filled"
+                                    autofocus
+                                />
+                            </IconField>
+                            <label for="med-nome">Nome completo *</label>
+                        </FloatLabel>
+                    </div>
+
+                    <!-- CRM -->
+                    <div>
+                        <FloatLabel variant="on">
+                            <IconField>
+                                <InputIcon class="pi pi-id-card" />
+                                <InputText
+                                    id="med-crm"
+                                    v-model="dlgForm.crm"
+                                    class="w-full"
+                                    variant="filled"
+                                />
+                            </IconField>
+                            <label for="med-crm">CRM</label>
+                        </FloatLabel>
+                    </div>
+
+                    <!-- Especialidade -->
+                    <div>
+                        <FloatLabel variant="on">
+                            <Select
+                                id="med-esp"
+                                v-model="dlgForm.especialidade"
+                                :options="ESPECIALIDADES"
+                                class="w-full"
+                                variant="filled"
+                            />
+                            <label for="med-esp">Especialidade</label>
+                        </FloatLabel>
+                    </div>
+
+                    <!-- Especialidade livre — aparece quando "Outra" -->
+                    <div v-if="dlgForm.especialidade === 'Outra'" class="xl:col-span-2">
+                        <FloatLabel variant="on">
+                            <IconField>
+                                <InputIcon class="pi pi-bookmark" />
+                                <InputText
+                                    id="med-esp-outra"
+                                    v-model="dlgForm.especialidade_outra"
+                                    class="w-full"
+                                    variant="filled"
+                                />
+                            </IconField>
+                            <label for="med-esp-outra">Especialidade (livre) *</label>
+                        </FloatLabel>
+                    </div>
+                </div>
+
+                <!-- ── Contato ──────────────────────────────── -->
+                <div class="flex items-center gap-2 mb-5">
+                    <span class="text-[0.7rem] font-bold uppercase tracking-widest text-[var(--p-primary-color)]">
+                        Contato
+                    </span>
+                    <div class="flex-1 h-px bg-[color-mix(in_srgb,var(--p-primary-color)_25%,transparent)]" />
+                </div>
+                <div class="grid grid-cols-1 gap-6 xl:grid-cols-2 mb-7">
+                    <div>
+                        <FloatLabel variant="on">
+                            <IconField>
+                                <InputIcon class="pi pi-phone" />
+                                <InputText
+                                    id="med-tel-prof"
+                                    v-model="dlgForm.telefone_profissional"
+                                    class="w-full"
+                                    variant="filled"
+                                />
+                            </IconField>
+                            <label for="med-tel-prof">Telefone profissional</label>
+                        </FloatLabel>
+                    </div>
+
+                    <div>
+                        <FloatLabel variant="on">
+                            <IconField>
+                                <InputIcon class="pi pi-mobile" />
+                                <InputText
+                                    id="med-tel-pes"
+                                    v-model="dlgForm.telefone_pessoal"
+                                    class="w-full"
+                                    variant="filled"
+                                />
+                            </IconField>
+                            <label for="med-tel-pes">Telefone pessoal</label>
+                        </FloatLabel>
+                    </div>
+
+                    <div class="xl:col-span-2">
+                        <FloatLabel variant="on">
+                            <IconField>
+                                <InputIcon class="pi pi-envelope" />
+                                <InputText
+                                    id="med-email"
+                                    v-model="dlgForm.email"
+                                    class="w-full"
+                                    variant="filled"
+                                />
+                            </IconField>
+                            <label for="med-email">E-mail</label>
+                        </FloatLabel>
+                    </div>
+                </div>
+
+                <!-- ── Localização ───────────────────────────── -->
+                <div class="flex items-center gap-2 mb-5">
+                    <span class="text-[0.7rem] font-bold uppercase tracking-widest text-[var(--p-primary-color)]">
+                        Localização
+                    </span>
+                    <div class="flex-1 h-px bg-[color-mix(in_srgb,var(--p-primary-color)_25%,transparent)]" />
+                </div>
+                <div class="grid grid-cols-1 gap-6 xl:grid-cols-2 mb-7">
+                    <div class="xl:col-span-2">
+                        <FloatLabel variant="on">
+                            <IconField>
+                                <InputIcon class="pi pi-building" />
+                                <InputText
+                                    id="med-clinica"
+                                    v-model="dlgForm.clinica"
+                                    class="w-full"
+                                    variant="filled"
+                                />
+                            </IconField>
+                            <label for="med-clinica">Clínica/instituição</label>
+                        </FloatLabel>
+                    </div>
+
+                    <div>
+                        <FloatLabel variant="on">
+                            <IconField>
+                                <InputIcon class="pi pi-map-marker" />
+                                <InputText
+                                    id="med-cidade"
+                                    v-model="dlgForm.cidade"
+                                    class="w-full"
+                                    variant="filled"
+                                />
+                            </IconField>
+                            <label for="med-cidade">Cidade</label>
+                        </FloatLabel>
+                    </div>
+
+                    <div>
+                        <FloatLabel variant="on">
+                            <InputText
+                                id="med-estado"
+                                v-model="dlgForm.estado"
+                                maxlength="2"
+                                class="w-full uppercase"
+                                variant="filled"
+                            />
+                            <label for="med-estado">UF</label>
+                        </FloatLabel>
+                    </div>
+                </div>
+
+                <!-- ── Observações ───────────────────────────── -->
+                <div class="flex items-center gap-2 mb-5">
+                    <span class="text-[0.7rem] font-bold uppercase tracking-widest text-[var(--p-primary-color)]">
+                        Observações
+                    </span>
+                    <div class="flex-1 h-px bg-[color-mix(in_srgb,var(--p-primary-color)_25%,transparent)]" />
+                </div>
+                <div class="grid grid-cols-1 mb-2">
+                    <FloatLabel variant="on">
+                        <Textarea
+                            id="med-obs"
+                            v-model="dlgForm.observacoes"
+                            autoResize
+                            rows="3"
+                            class="w-full"
+                            variant="filled"
+                        />
+                        <label for="med-obs">Observações livres</label>
+                    </FloatLabel>
+                </div>
+
+                <small
+                    v-if="dlgError"
+                    class="mt-3 text-[0.85rem] text-red-500 flex items-center gap-1.5"
+                >
+                    <i class="pi pi-exclamation-circle text-[0.78rem]" />
+                    <span>{{ dlgError }}</span>
+                </small>
             </div>
+
             <template #footer>
-                <Button label="Cancelar" text @click="dlgOpen = false" />
-                <Button :label="saving ? 'Salvando…' : 'Salvar'" :loading="saving" :disabled="!dlgForm.nome.trim() || saving" @click="salvar" />
+                <Button
+                    label="Cancelar"
+                    severity="secondary"
+                    text
+                    :disabled="saving"
+                    @click="dlgOpen = false"
+                />
+                <Button
+                    :label="saving ? 'Salvando…' : 'Salvar'"
+                    icon="pi pi-check"
+                    :loading="saving"
+                    :disabled="!dlgForm.nome.trim() || saving"
+                    @click="salvar"
+                />
             </template>
         </Dialog>
+
+        <!-- Dialog: Pacientes encaminhados — espelha o pattern de
+             MelissaTags > "Pacientes da tag", usando cor primary do
+             tema (médicos não têm cor própria como tags/grupos). Borda
+             colorida + header com avatar + count pill + lista com
+             avatares primary-tinted. -->
+        <Dialog
+            v-model:visible="patientsDialog.open"
+            modal
+            dismissable-mask
+            :draggable="false"
+            :style="{ width: '720px', maxWidth: '94vw' }"
+            :pt="{
+                root: { style: 'border: 2px solid var(--p-primary-color)' },
+                header: { style: 'border-bottom: 1px solid color-mix(in srgb, var(--p-primary-color) 30%, transparent)' },
+                pcCloseButton: { root: { class: 'mm-pdlg-close-btn' } }
+            }"
+        >
+            <template #header>
+                <div class="mm-pdlg__header">
+                    <span class="mm-pdlg__avatar mm-pdlg__avatar--primary">
+                        {{ iniciais(patientsDialog.medico?.nome) }}
+                    </span>
+                    <div class="mm-pdlg__title">
+                        <div class="mm-pdlg__name mm-pdlg__name--primary">
+                            Dr(a). {{ patientsDialog.medico?.nome }}
+                        </div>
+                        <div class="mm-pdlg__sub">
+                            {{ patientsDialog.items.length }}
+                            paciente{{ patientsDialog.items.length !== 1 ? 's' : '' }}
+                            encaminhado{{ patientsDialog.items.length !== 1 ? 's' : '' }}
+                        </div>
+                    </div>
+                </div>
+            </template>
+
+            <div class="mm-pdlg__body">
+                <div class="mm-pdlg__toolbar">
+                    <div class="mm-search mm-pdlg__search">
+                        <i class="pi pi-search mm-search__icon" />
+                        <input
+                            v-model="patientsDialog.search"
+                            type="text"
+                            placeholder="Buscar paciente…"
+                            class="mm-search__input"
+                            :disabled="patientsDialog.loading"
+                        />
+                        <button
+                            v-if="patientsDialog.search"
+                            class="mm-search__clear"
+                            v-tooltip.bottom="'Limpar busca'"
+                            @click="patientsDialog.search = ''"
+                        >
+                            <i class="pi pi-times" />
+                        </button>
+                    </div>
+                    <span v-if="!patientsDialog.loading" class="mm-pdlg__count-pill mm-pdlg__count-pill--primary">
+                        {{ patientsDialog.items.length }}
+                        {{ patientsDialog.items.length === 1 ? 'paciente' : 'pacientes' }}
+                    </span>
+                </div>
+
+                <div v-if="patientsDialog.loading" class="mm-pdlg__loading mm-pdlg__loading--primary">
+                    <i class="pi pi-spin pi-spinner" />
+                    <span>Carregando pacientes…</span>
+                </div>
+
+                <div v-else-if="patientsDialog.error" class="mm-pdlg__error">
+                    <i class="pi pi-exclamation-triangle" />
+                    <span>{{ patientsDialog.error }}</span>
+                </div>
+
+                <div v-else-if="patientsDialog.items.length === 0" class="mm-pdlg__empty">
+                    <div class="mm-pdlg__empty-icon mm-pdlg__empty-icon--primary">
+                        <i class="pi pi-users" />
+                    </div>
+                    <div class="mm-pdlg__empty-title">Nenhum paciente encaminhado</div>
+                    <div class="mm-pdlg__empty-hint">
+                        Pacientes com este médico no campo
+                        <strong>"encaminhado por"</strong> aparecem aqui.
+                    </div>
+                </div>
+
+                <DataTable
+                    v-else
+                    :value="patientsDialogFiltered"
+                    dataKey="id"
+                    paginator
+                    :rows="8"
+                    :rowsPerPageOptions="[8, 15, 30]"
+                    paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+                    currentPageReportTemplate="{first}–{last} de {totalRecords}"
+                    stripedRows
+                    responsiveLayout="scroll"
+                    class="mm-pdlg__table"
+                >
+                    <Column header="Paciente" sortable>
+                        <template #body="{ data }">
+                            <div class="mm-pdlg__patient">
+                                <span class="mm-pdlg__avatar mm-pdlg__avatar--sm mm-pdlg__avatar--primary-soft">
+                                    <img v-if="data.avatar_url" :src="data.avatar_url" :alt="data.full_name" />
+                                    <span v-else>{{ iniciais(data.full_name) }}</span>
+                                </span>
+                                <div class="mm-pdlg__patient-text">
+                                    <span class="mm-pdlg__patient-name">{{ data.full_name }}</span>
+                                    <span class="mm-pdlg__patient-email">{{ data.email || '—' }}</span>
+                                </div>
+                            </div>
+                        </template>
+                    </Column>
+
+                    <Column header="Telefone" style="min-width: 11rem">
+                        <template #body="{ data }">
+                            <span class="mm-pdlg__phone">{{ fmtPhone(data.phone) || '—' }}</span>
+                        </template>
+                    </Column>
+
+                    <Column header="" style="width: 7rem">
+                        <template #body="{ data }">
+                            <button
+                                type="button"
+                                class="mm-pdlg__open-btn mm-pdlg__open-btn--primary"
+                                v-tooltip.left="'Abrir prontuário'"
+                                aria-label="Abrir prontuário do paciente"
+                                @click="abrirPaciente(data)"
+                            >
+                                <i class="pi pi-external-link" />
+                                <span>Abrir</span>
+                            </button>
+                        </template>
+                    </Column>
+
+                    <template #empty>
+                        <div class="mm-pdlg__empty">
+                            <i class="pi pi-search mm-pdlg__empty-icon-pi" />
+                            <div class="mm-pdlg__empty-title">Nenhum resultado</div>
+                            <div class="mm-pdlg__empty-hint">
+                                Nenhum paciente corresponde à busca.
+                            </div>
+                            <button
+                                class="mm-pdlg__inline-clear-btn"
+                                @click="patientsDialog.search = ''"
+                            >
+                                <i class="pi pi-filter-slash" />
+                                <span>Limpar busca</span>
+                            </button>
+                        </div>
+                    </template>
+                </DataTable>
+            </div>
+        </Dialog>
+
+        <PatientCadastroDialog v-model="editPatientDialog" :patient-id="editPatientId" />
     </section>
 </template>
 
 <style scoped>
+/* ─── Page chrome ─── */
 .mm-page {
     position: absolute;
     inset: 6px 6px calc(var(--m-dock-h, 76px) + 6px) 6px;
@@ -524,6 +1245,10 @@ onBeforeUnmount(() => {
     font-size: 1rem;
     font-weight: 500;
 }
+.mm-page__title-icon {
+    color: var(--p-primary-color);
+    font-size: 1.05rem;
+}
 .mm-page__title > span:not(.mm-page__count) {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -565,16 +1290,22 @@ onBeforeUnmount(() => {
     font-family: inherit;
     font-size: 0.78rem;
     font-weight: 600;
-    background: var(--m-accent);
-    border: 1px solid var(--m-accent);
-    color: white;
     transition: background-color 140ms ease, transform 140ms ease;
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border);
+    color: var(--m-text);
 }
-.mm-act-btn:hover {
+.mm-act-btn--primary {
+    background: var(--m-accent);
+    border-color: var(--m-accent);
+    color: white;
+}
+.mm-act-btn--primary:hover {
     background: color-mix(in srgb, var(--m-accent) 88%, white);
     transform: translateY(-1px);
 }
 .mm-act-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
+.mm-act-btn > i { font-size: 0.78rem; }
 
 .mm-menu-btn {
     display: none;
@@ -598,42 +1329,141 @@ onBeforeUnmount(() => {
     transform: translateY(-1px);
 }
 
+.mm-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;
+}
+.mm-subheader__icon {
+    color: var(--p-primary-color);
+    font-size: 0.92rem;
+    flex-shrink: 0;
+    margin-top: 1px;
+}
+.mm-subheader__text { flex: 1; min-width: 0; }
+.mm-subheader__text strong { color: var(--m-text); font-weight: 600; }
+
 .mm-body {
     flex: 1;
     display: flex;
     min-height: 0;
-    gap: 12px;
-    padding: 12px;
+    gap: 0;
+    padding: 0;
 }
+
+/* ─── Sidebar ─── */
 .mm-side {
     width: 280px;
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
-    gap: 12px;
-    overflow-y: auto;
+    background: var(--m-bg-soft);
+    border-right: 1px solid var(--m-border);
+    overflow: hidden;
 }
-.mm-side::-webkit-scrollbar { width: 5px; }
-.mm-side::-webkit-scrollbar-thumb {
+.mm-side__scroll {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+}
+.mm-side__scroll::-webkit-scrollbar { width: 5px; }
+.mm-side__scroll::-webkit-scrollbar-thumb {
     background: var(--m-border-strong);
     border-radius: 3px;
 }
 
-.mm-w {
+.mm-side__footer {
+    flex-shrink: 0;
+    padding: 12px;
     background: var(--m-bg-soft);
+    border-top: 1px solid var(--m-border);
+}
+.mm-side__clear-all {
+    width: 100%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 9px 12px;
+    background: var(--m-bg-medium);
+    border: 1px solid var(--m-border);
+    color: var(--m-text);
+    border-radius: 10px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.78rem;
+    font-weight: 600;
+    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
+}
+.mm-side__clear-all:hover {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+    color: var(--m-text);
+}
+.mm-side__clear-all > i {
+    font-size: 0.78rem;
+    color: var(--m-text-muted);
+    transition: color 140ms ease;
+}
+.mm-side__clear-all:hover > i { color: var(--m-text); }
+
+.mm-side__clear-inline {
+    width: 18px;
+    height: 18px;
+    display: grid;
+    place-items: center;
+    background: transparent;
+    border: 1px solid color-mix(in srgb, rgb(220, 38, 38) 30%, var(--m-border));
+    color: rgb(220, 38, 38);
+    border-radius: 4px;
+    cursor: pointer;
+    font-family: inherit;
+    transition: background-color 140ms ease, border-color 140ms ease;
+}
+.mm-side__clear-inline:hover {
+    background: rgba(220, 38, 38, 0.10);
+    border-color: rgba(220, 38, 38, 0.55);
+}
+.mm-side__clear-inline > i { font-size: 0.6rem; }
+
+.mm-w {
+    background: var(--m-bg-medium);
     border: 1px solid var(--m-border);
     border-radius: 12px;
     padding: 12px;
 }
-.mm-w__head { margin-bottom: 10px; }
+.mm-w--side {
+    margin: 12px 12px 0;
+    flex-shrink: 0;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+}
+.mm-w--side:last-of-type { margin-bottom: 12px; }
+.mm-w__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+}
 .mm-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;
 }
-.mm-w__title > i { color: var(--m-text-muted); font-size: 0.78rem; }
+.mm-w__title > i { color: var(--m-text-muted); font-size: 0.7rem; }
 
 .mm-stats {
     display: grid;
@@ -641,7 +1471,7 @@ onBeforeUnmount(() => {
     gap: 6px;
 }
 .mm-stat {
-    background: var(--m-bg-medium);
+    background: var(--m-bg-soft);
     border: 1px solid var(--m-border);
     border-radius: 10px;
     padding: 8px 10px;
@@ -658,83 +1488,397 @@ onBeforeUnmount(() => {
     text-transform: uppercase;
     letter-spacing: 0.06em;
 }
-.mm-stat.is-ok .mm-stat__val { color: rgb(74, 222, 128); }
+.mm-stat.is-ok .mm-stat__val     { color: rgb(22, 163, 74); }
+.mm-stat.is-info .mm-stat__val   { color: rgb(37, 99, 235); }
+.mm-stat.is-accent .mm-stat__val { color: var(--m-accent); }
 
+/* Select de Especialidade na sidebar */
+.mm-side__select :deep(.p-select) {
+    width: 100%;
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border);
+    border-radius: 9px;
+    height: 36px;
+}
+.mm-side__select :deep(.p-select-label) {
+    font-size: 0.82rem;
+    padding: 0 10px;
+    color: var(--m-text);
+    line-height: 36px;
+}
+
+/* ─── Filter buttons ─── */
+.mm-side__list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+.mm-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;
+}
+.mm-side__item > i {
+    font-size: 0.78rem;
+    width: 14px;
+    text-align: center;
+}
+
+/* Uso: Com pacientes = green-600, Sem pacientes = neutral/cinza */
+.mm-side__item.is-uso-com_pacs {
+    background: rgba(22, 163, 74, 0.05);
+    border-color: rgba(22, 163, 74, 0.18);
+}
+.mm-side__item.is-uso-com_pacs > i { color: rgb(22, 163, 74); }
+.mm-side__item.is-uso-com_pacs:hover {
+    background: rgba(22, 163, 74, 0.10);
+    border-color: rgba(22, 163, 74, 0.30);
+}
+.mm-side__item.is-active.is-uso-com_pacs {
+    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);
+}
+
+.mm-side__item.is-uso-sem_pacs {
+    background: var(--m-bg-soft);
+    border-color: var(--m-border);
+}
+.mm-side__item.is-uso-sem_pacs > i { color: var(--m-text-muted); }
+.mm-side__item.is-uso-sem_pacs:hover {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+}
+.mm-side__item.is-active.is-uso-sem_pacs {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+    box-shadow: 0 0 0 1px var(--m-border-strong);
+}
+
+.mm-clear-enter-active,
+.mm-clear-leave-active {
+    transition: opacity 220ms ease, transform 220ms ease, max-height 240ms ease;
+    overflow: hidden;
+}
+.mm-clear-enter-from,
+.mm-clear-leave-to {
+    opacity: 0;
+    transform: translateY(6px);
+    max-height: 0;
+}
+.mm-clear-enter-to,
+.mm-clear-leave-from {
+    opacity: 1;
+    transform: translateY(0);
+    max-height: 80px;
+}
+
+/* ─── Main column ─── */
+.mm-main {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    padding: 12px;
+    gap: 10px;
+}
+
+.mm-toolbar {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.mm-search {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+}
+.mm-search__icon {
+    position: absolute;
+    left: 12px;
+    color: var(--m-text-muted);
+    font-size: 0.78rem;
+    pointer-events: none;
+}
 .mm-search__input {
     width: 100%;
     background: var(--m-bg-medium);
     border: 1px solid var(--m-border);
     color: var(--m-text);
-    padding: 8px 12px;
-    border-radius: 9px;
-    font-size: 0.82rem;
+    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;
 }
-.mm-search__input:focus { border-color: var(--m-border-strong); }
+.mm-search__input::placeholder { color: var(--m-text-faint); }
+.mm-search__input:focus {
+    border-color: var(--m-border-strong);
+    background: var(--m-bg-medium);
+}
+.mm-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;
+}
+.mm-search__clear:hover {
+    background: var(--m-bg-soft-hover);
+    color: var(--m-text);
+}
+.mm-search__clear > i { font-size: 0.7rem; }
 
-.mm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
-.mm-list {
+.mm-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;
+}
+.mm-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;
+}
+.mm-view-toggle__btn:hover {
+    background: var(--m-bg-soft-hover);
+    color: var(--m-text);
+}
+.mm-view-toggle__btn.is-active {
+    background: var(--m-accent-soft);
+    color: var(--m-accent);
+}
+.mm-view-toggle__btn > i { font-size: 0.85rem; }
+
+/* ─── DataTable ─── */
+.mm-table {
     flex: 1;
-    overflow-y: auto;
-    padding: 0 4px 4px;
+    min-height: 0;
     display: flex;
     flex-direction: column;
-    gap: 8px;
 }
-.mm-list::-webkit-scrollbar { width: 5px; }
-.mm-list::-webkit-scrollbar-thumb {
-    background: var(--m-border-strong);
-    border-radius: 3px;
+.mm-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;
+}
+.mm-table :deep(.p-datatable-table-container) {
+    flex: 1;
+    min-height: 0;
+    background: transparent;
+}
+.mm-table :deep(.p-datatable-thead),
+.mm-table :deep(.p-datatable-thead > tr) {
+    background: transparent !important;
+}
+.mm-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);
+}
+.mm-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);
+}
+.mm-table :deep(.p-datatable-tbody > tr > td) {
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--m-border);
+    background: transparent;
+    vertical-align: middle;
+}
+.mm-table :deep(.p-datatable-tbody > tr:hover) {
+    background: var(--m-bg-soft-hover);
+}
+.mm-table :deep(.p-datatable-tbody > tr.p-datatable-row-selected) {
+    background: var(--m-accent-soft);
+}
+.mm-table :deep(.p-datatable-tbody > tr.is-com-pacs) { border-left-color: rgb(22, 163, 74); }
+.mm-table :deep(.p-datatable-tbody > tr.is-sem-pacs) { border-left-color: var(--m-border-strong); }
+
+.mm-table :deep(.p-datatable-loading-overlay) {
+    background: color-mix(in srgb, var(--m-bg-medium) 70%, transparent);
+    backdrop-filter: blur(2px);
+}
+.mm-table__loading {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--m-text);
+    font-size: 0.85rem;
 }
 
-.mm-card {
+.mm-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;
+}
+.mm-table :deep(.p-paginator-current) {
+    color: var(--m-text-muted);
+    font-size: 0.78rem;
+    background: transparent;
+    border: none;
+    padding: 0 6px;
+}
+.mm-table :deep(.p-paginator-first),
+.mm-table :deep(.p-paginator-prev),
+.mm-table :deep(.p-paginator-next),
+.mm-table :deep(.p-paginator-last),
+.mm-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;
+}
+.mm-table :deep(.p-paginator-page.p-paginator-page-selected) {
+    background: var(--m-accent-soft);
+    border-color: var(--m-accent-strong);
+    color: var(--m-accent);
+}
+.mm-table :deep(.p-paginator-first:not(.p-disabled):hover),
+.mm-table :deep(.p-paginator-prev:not(.p-disabled):hover),
+.mm-table :deep(.p-paginator-next:not(.p-disabled):hover),
+.mm-table :deep(.p-paginator-last:not(.p-disabled):hover),
+.mm-table :deep(.p-paginator-page:not(.p-paginator-page-selected):hover) {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+}
+.mm-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;
+}
+.mm-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;
+}
+
+.mm-table :deep(td.p-datatable-frozen-column),
+.mm-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;
+}
+.mm-table :deep(.p-datatable-tbody > tr:hover td.p-datatable-frozen-column) {
+    background: var(--m-bg-soft-hover);
+}
+.mm-table :deep(.p-datatable-tbody > tr.p-datatable-row-selected td.p-datatable-frozen-column) {
+    background: var(--m-accent-soft);
+}
+
+/* ─── Row content (design preservado: avatar + nome + esp + meta) ─── */
+.mm-row__med {
     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;
+    min-width: 0;
 }
-.mm-card:hover {
-    background: var(--m-bg-soft-hover);
-    border-color: var(--m-border-strong);
-    transform: translateY(-1px);
-}
-.mm-card--skeleton { cursor: default; pointer-events: none; opacity: 0.95; }
-.mm-card--skeleton:hover { background: var(--m-bg-soft); transform: none; }
-
-.mm-card__avatar {
-    width: 40px; height: 40px;
+.mm-row__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;
+    display: grid;
+    place-items: center;
     flex-shrink: 0;
 }
-
-.mm-card__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
-.mm-card__name-row {
+.mm-row__avatar--lg {
+    width: 48px;
+    height: 48px;
+    font-size: 0.92rem;
+}
+.mm-row__main {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+.mm-row__name-row {
     display: flex;
     align-items: center;
     gap: 8px;
     flex-wrap: wrap;
 }
-.mm-card__name {
+.mm-row__name {
     font-size: 0.92rem;
     font-weight: 600;
+    color: var(--m-text);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-.mm-card__esp {
+.mm-row__esp {
     display: inline-flex;
     align-items: center;
     font-size: 0.62rem;
@@ -746,57 +1890,269 @@ onBeforeUnmount(() => {
     color: var(--m-accent);
     text-transform: uppercase;
     letter-spacing: 0.04em;
-}
-.mm-card__meta {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 12px;
-    margin-top: 4px;
-    font-size: 0.7rem;
-    color: var(--m-text-muted);
-}
-.mm-card__meta i { margin-right: 4px; font-size: 0.65rem; }
-
-.mm-card__right {
-    display: flex;
-    align-items: center;
-    gap: 12px;
     flex-shrink: 0;
 }
-.mm-card__count {
+.mm-row__sub {
+    display: flex;
+    align-items: center;
+    gap: 5px;
     font-size: 0.74rem;
-    font-weight: 600;
-    color: var(--m-accent);
-    background: var(--m-accent-soft);
-    padding: 4px 10px;
-    border-radius: 999px;
-    border: 1px solid color-mix(in srgb, var(--m-accent) 35%, transparent);
+    color: var(--m-text-muted);
+    flex-wrap: wrap;
+}
+.mm-row__sub > i { font-size: 0.7rem; }
+.mm-row__sep { color: var(--m-text-faint); }
+
+.mm-row__contact {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-size: 0.78rem;
+    color: var(--m-text-muted);
+    min-width: 0;
+}
+.mm-row__contact > span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mm-row__contact i { margin-right: 5px; font-size: 0.7rem; }
+.mm-row__empty { color: var(--m-text-faint); }
+
+/* Botão "X pacientes" clicável */
+.mm-row__count-btn {
     display: inline-flex;
     align-items: center;
-    gap: 4px;
-}
-.mm-card__count i { font-size: 0.65rem; }
-
-.mm-card__actions { display: flex; gap: 4px; }
-.mm-card__btn {
-    width: 28px; height: 28px;
-    display: grid; place-items: center;
+    gap: 6px;
+    padding: 4px 10px;
     background: transparent;
+    border: 1px solid color-mix(in srgb, var(--p-primary-color) 25%, var(--m-border));
+    color: var(--p-primary-color);
+    border-radius: 999px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.78rem;
+    font-weight: 500;
+    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
+    white-space: nowrap;
+}
+.mm-row__count-btn:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--p-primary-color) 12%, transparent);
+    border-color: var(--p-primary-color);
+}
+.mm-row__count-btn:focus-visible {
+    outline: 2px solid var(--p-primary-color);
+    outline-offset: 2px;
+}
+.mm-row__count-btn.is-empty,
+.mm-row__count-btn:disabled {
+    color: var(--m-text-muted);
+    border-color: var(--m-border);
+    cursor: default;
+    background: transparent;
+}
+.mm-row__count-btn > i { font-size: 0.7rem; }
+
+.mm-row__actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 6px;
+    flex-shrink: 0;
+}
+.mm-row__btn {
+    width: 28px;
+    height: 28px;
+    display: grid;
+    place-items: center;
+    background: var(--p-content-background);
     border: 1px solid var(--m-border);
     color: var(--m-text-muted);
-    border-radius: 9px;
+    border-radius: 8px;
     cursor: pointer;
     font-family: inherit;
     transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
+    flex-shrink: 0;
 }
-.mm-card__btn:hover { background: var(--m-bg-soft-hover); color: var(--m-text); }
-.mm-card__btn--danger:hover {
-    background: rgba(239, 68, 68, 0.15);
-    border-color: rgba(239, 68, 68, 0.4);
-    color: rgb(248, 113, 113);
+.mm-row__btn: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);
 }
-.mm-card__btn > i { font-size: 0.7rem; }
+.mm-row__btn--danger:hover {
+    background: rgba(220, 38, 38, 0.12);
+    border-color: rgba(220, 38, 38, 0.5);
+    color: rgb(220, 38, 38);
+}
+.mm-row__btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.mm-row__btn > i { font-size: 0.7rem; }
 
+/* ─── Grid view ─── */
+.mm-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;
+}
+.mm-grid {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    padding: 12px;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+    gap: 10px;
+    align-content: start;
+}
+.mm-grid::-webkit-scrollbar { width: 5px; }
+.mm-grid::-webkit-scrollbar-thumb { background: var(--m-border-strong); border-radius: 3px; }
+.mm-grid__loading {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 32px;
+}
+.mm-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;
+}
+.mm-grid__card:hover {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+    transform: translateY(-1px);
+}
+.mm-grid__card:focus-visible {
+    outline: 2px solid var(--p-primary-color);
+    outline-offset: 2px;
+}
+.mm-grid__card.is-com-pacs { border-left-color: rgb(22, 163, 74); }
+.mm-grid__card.is-sem-pacs { border-left-color: var(--m-border-strong); }
+
+.mm-grid__top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+}
+.mm-grid__name {
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: var(--m-text);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mm-grid__contact {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-size: 0.74rem;
+    color: var(--m-text-muted);
+}
+.mm-grid__contact > span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mm-grid__contact i { margin-right: 5px; font-size: 0.65rem; }
+.mm-grid__meta {
+    margin-top: auto;
+    padding-top: 4px;
+}
+.mm-grid__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 6px;
+    border-top: 1px solid var(--m-border);
+    padding-top: 8px;
+    margin-top: 4px;
+}
+
+/* Paginator standalone (grid) */
+.mm-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;
+}
+.mm-paginator.p-paginator .p-paginator-current {
+    color: var(--m-text-muted);
+    font-size: 0.78rem;
+    background: transparent;
+    border: none;
+    padding: 0 6px;
+}
+.mm-paginator.p-paginator .p-paginator-first,
+.mm-paginator.p-paginator .p-paginator-prev,
+.mm-paginator.p-paginator .p-paginator-next,
+.mm-paginator.p-paginator .p-paginator-last,
+.mm-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;
+}
+.mm-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);
+}
+.mm-paginator.p-paginator .p-paginator-first:not(.p-disabled):hover,
+.mm-paginator.p-paginator .p-paginator-prev:not(.p-disabled):hover,
+.mm-paginator.p-paginator .p-paginator-next:not(.p-disabled):hover,
+.mm-paginator.p-paginator .p-paginator-last:not(.p-disabled):hover,
+.mm-paginator.p-paginator .p-paginator-page:not(.p-paginator-page-selected):hover {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+}
+.mm-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;
+}
+.mm-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;
+}
+
+/* ─── Empty state ─── */
 .mm-empty {
     margin: 24px 0;
     padding: 56px 28px;
@@ -812,9 +2168,294 @@ onBeforeUnmount(() => {
 }
 .mm-empty__icon { font-size: 2rem; color: var(--m-text-faint); margin-bottom: 4px; }
 .mm-empty__title { font-size: 0.92rem; font-weight: 600; color: var(--m-text); }
-.mm-empty__hint { font-size: 0.78rem; margin-bottom: 8px; }
+.mm-empty__hint { font-size: 0.78rem; }
+.mm-empty__btn { margin-top: 8px; }
 
-/* Drawer mobile */
+/* ─── Dialog "Pacientes encaminhados" ─── */
+.mm-pdlg__header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
+}
+.mm-pdlg__avatar {
+    width: 40px;
+    height: 40px;
+    display: grid;
+    place-items: center;
+    border-radius: 50%;
+    background: var(--m-accent-strong);
+    border: 1px solid var(--m-accent);
+    color: white;
+    font-weight: 600;
+    font-size: 0.85rem;
+    flex-shrink: 0;
+    overflow: hidden;
+}
+/* Avatar primary (header do dialog) — sólido */
+.mm-pdlg__avatar--primary {
+    background: var(--p-primary-color);
+    border-color: var(--p-primary-color);
+    color: var(--p-primary-contrast-color, white);
+}
+/* Avatar primary-soft (lista de pacientes) — tinted */
+.mm-pdlg__avatar--primary-soft {
+    background: color-mix(in srgb, var(--p-primary-color) 22%, transparent);
+    border: 1px solid color-mix(in srgb, var(--p-primary-color) 30%, transparent);
+    color: var(--p-primary-color);
+}
+.mm-pdlg__avatar--sm {
+    width: 32px;
+    height: 32px;
+    font-size: 0.74rem;
+}
+.mm-pdlg__avatar img { width: 100%; height: 100%; object-fit: cover; }
+.mm-pdlg__title {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+}
+.mm-pdlg__name {
+    font-size: 1rem;
+    font-weight: 700;
+    color: var(--m-text);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mm-pdlg__name--primary { color: var(--p-primary-color); }
+.mm-pdlg__sub {
+    font-size: 0.72rem;
+    color: var(--m-text-muted);
+}
+
+.mm-pdlg__body {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+}
+.mm-pdlg__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+.mm-pdlg__search {
+    flex: 1;
+    min-width: 200px;
+    max-width: 320px;
+}
+.mm-pdlg__count-pill {
+    padding: 4px 10px;
+    border-radius: 999px;
+    font-size: 0.72rem;
+    font-weight: 600;
+    flex-shrink: 0;
+    background: var(--m-accent-soft);
+    color: var(--m-accent);
+    border: 1px solid color-mix(in srgb, var(--m-accent) 35%, transparent);
+}
+.mm-pdlg__count-pill--primary {
+    background: color-mix(in srgb, var(--p-primary-color) 18%, transparent);
+    color: var(--p-primary-color);
+    border-color: color-mix(in srgb, var(--p-primary-color) 35%, transparent);
+}
+
+.mm-pdlg__loading {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 20px;
+    font-size: 0.85rem;
+    justify-content: center;
+    color: var(--m-accent);
+}
+.mm-pdlg__loading--primary { color: var(--p-primary-color); }
+.mm-pdlg__error {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 16px;
+    background: rgba(220, 38, 38, 0.10);
+    border: 1px solid rgba(220, 38, 38, 0.30);
+    border-radius: 8px;
+    color: rgb(220, 38, 38);
+    font-size: 0.82rem;
+}
+
+.mm-pdlg__empty {
+    padding: 36px 20px;
+    text-align: center;
+    color: var(--m-text-muted);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+}
+.mm-pdlg__empty-icon {
+    width: 48px;
+    height: 48px;
+    display: grid;
+    place-items: center;
+    border-radius: 10px;
+    margin-bottom: 8px;
+    font-size: 1.4rem;
+    background: var(--m-accent-soft);
+    color: var(--m-accent);
+}
+.mm-pdlg__empty-icon--primary {
+    background: color-mix(in srgb, var(--p-primary-color) 18%, transparent);
+    color: var(--p-primary-color);
+}
+.mm-pdlg__empty-icon-pi {
+    font-size: 1.6rem;
+    opacity: 0.4;
+    margin-bottom: 8px;
+}
+.mm-pdlg__empty-title {
+    font-size: 0.92rem;
+    font-weight: 600;
+    color: var(--m-text);
+}
+.mm-pdlg__empty-hint { font-size: 0.78rem; }
+.mm-pdlg__empty-hint strong { color: var(--m-text); font-weight: 600; }
+.mm-pdlg__inline-clear-btn {
+    margin-top: 10px;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    background: transparent;
+    border: 1px solid var(--m-border);
+    color: var(--m-text-muted);
+    border-radius: 8px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.78rem;
+    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
+}
+.mm-pdlg__inline-clear-btn:hover {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+    color: var(--m-text);
+}
+
+.mm-pdlg__table :deep(.p-datatable) {
+    background: transparent;
+    border: 1px solid var(--m-border);
+    border-radius: 10px;
+    overflow: hidden;
+}
+.mm-pdlg__table :deep(.p-datatable-thead > tr > th) {
+    background: var(--m-bg-soft) !important;
+    color: var(--m-text);
+    font-size: 0.74rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--m-border);
+}
+.mm-pdlg__table :deep(.p-datatable-tbody > tr > td) {
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--m-border);
+    background: transparent;
+    vertical-align: middle;
+}
+.mm-pdlg__table :deep(.p-datatable-tbody > tr:hover) {
+    background: var(--m-bg-soft-hover);
+}
+.mm-pdlg__table :deep(.p-paginator) {
+    background: var(--m-bg-soft);
+    border: none;
+    border-top: 1px solid var(--m-border);
+    padding: 8px 12px;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+
+.mm-pdlg__patient {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+}
+.mm-pdlg__patient-text {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+}
+.mm-pdlg__patient-name {
+    font-size: 0.88rem;
+    font-weight: 600;
+    color: var(--m-text);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mm-pdlg__patient-email {
+    font-size: 0.74rem;
+    color: var(--m-text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mm-pdlg__phone {
+    color: var(--m-text-muted);
+    font-size: 0.85rem;
+}
+.mm-pdlg__open-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    background: transparent;
+    border: 1px solid var(--m-accent);
+    color: var(--m-accent);
+    border-radius: 8px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.78rem;
+    font-weight: 600;
+    transition: background-color 140ms ease;
+}
+.mm-pdlg__open-btn:hover {
+    background: var(--m-accent-soft);
+}
+.mm-pdlg__open-btn > i { font-size: 0.7rem; }
+.mm-pdlg__open-btn--primary {
+    border-color: var(--p-primary-color);
+    color: var(--p-primary-color);
+}
+.mm-pdlg__open-btn--primary:hover {
+    background: color-mix(in srgb, var(--p-primary-color) 12%, transparent);
+}
+
+/* Botão X de fechar no header do dialog "Pacientes encaminhados" —
+   estilo igual ao .mm-close da página (32×32, bg --m-bg-soft, border).
+   Usa :global() porque o Dialog do PrimeVue é teleportado pra body,
+   fora do escopo scoped do componente. */
+:global(.mm-pdlg-close-btn) {
+    width: 32px !important;
+    height: 32px !important;
+    background: var(--m-bg-soft) !important;
+    border: 1px solid var(--m-border) !important;
+    color: var(--m-text) !important;
+    border-radius: 9px !important;
+    transition: background-color 140ms ease !important;
+}
+:global(.mm-pdlg-close-btn:hover) {
+    background: var(--m-bg-soft-hover) !important;
+}
+:global(.mm-pdlg-close-btn .p-button-icon) {
+    font-size: 0.85rem !important;
+}
+
+/* ─── Drawer mobile ─── */
 .mm-mobile-drawer {
     position: fixed;
     top: 0; left: 0;
@@ -850,6 +2491,31 @@ onBeforeUnmount(() => {
     height: auto;
     overflow: visible;
     padding: 0;
+    background: transparent;
+    border-right: none;
+}
+.mm-mobile-drawer__scroll .mm-side__scroll {
+    flex: none;
+    min-height: 0;
+    overflow: visible;
+    display: flex;
+    flex-direction: column;
+}
+.mm-mobile-drawer__scroll .mm-side__footer {
+    position: sticky;
+    bottom: 0;
+    margin: 8px -12px -24px;
+    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;
+}
+.mm-mobile-drawer__scroll .mm-w--side {
+    margin: 0 0 12px;
+}
+.mm-mobile-drawer__scroll .mm-w--side:last-of-type {
+    margin-bottom: 0;
 }
 .mm-mobile-drawer__backdrop {
     position: fixed;
@@ -864,13 +2530,13 @@ onBeforeUnmount(() => {
 .mm-drawer-fade-enter-from,
 .mm-drawer-fade-leave-to { opacity: 0; }
 
+/* ─── Mobile (<1024px) ─── */
 @media (max-width: 1023px) {
-    .mm-body { flex-direction: column; padding: 8px; }
-    .mm-main { width: 100%; }
+    .mm-body { flex-direction: column; padding: 0; }
+    .mm-main { width: 100%; padding: 8px; }
     .mm-page__title > span:first-of-type { display: none; }
     .mm-menu-btn--mobile-only { display: inline-flex; }
-    .mm-act-btn span { display: none; }
-    .mm-act-btn { width: 32px; padding: 0; justify-content: center; }
-    .mm-card__count { display: none; }
+    .mm-act-btn--primary span { display: none; }
+    .mm-act-btn--primary { width: 32px; padding: 0; justify-content: center; }
 }
 </style>
diff --git a/src/layout/melissa/MelissaRecorrencias.vue b/src/layout/melissa/MelissaRecorrencias.vue
index eabc033..0290297 100644
--- a/src/layout/melissa/MelissaRecorrencias.vue
+++ b/src/layout/melissa/MelissaRecorrencias.vue
@@ -14,7 +14,6 @@
  */
 import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
 import { useToast } from 'primevue/usetoast';
-import Popover from 'primevue/popover';
 import { supabase } from '@/lib/supabase/client';
 import { useTenantStore } from '@/stores/tenantStore';
 // Dialog/SelectButton/Button/Tag/ProgressBar/Avatar/Select: auto-import via PrimeVueResolver
@@ -49,16 +48,46 @@ const sessionsMap = ref({});   // ruleId → AgendaEvento[]
 const expandedId = ref(null);
 
 const filterStatus = ref('ativo');
-const statusOptions = [
-    { label: 'Ativas', value: 'ativo' },
-    { label: 'Encerradas', value: 'cancelado' },
-    { label: 'Todas', value: 'all' }
+
+// Button list de status (icons + cores). Ativa = verde / Encerrada = vermelho.
+// Todas = neutral. O blueprint pede botões coloridos por status (§7).
+const STATUS_FILTER_OPTIONS = [
+    { key: 'ativo', label: 'Ativas', icon: 'pi pi-check-circle' },
+    { key: 'cancelado', label: 'Encerradas', icon: 'pi pi-times-circle' },
+    { key: 'all', label: 'Todas', icon: 'pi pi-list' }
 ];
 
+const busca = ref('');
+
+function setStatusFilter(s) {
+    filterStatus.value = s;
+    load();
+}
+
+const hasActiveFilters = computed(() =>
+    !!(busca.value || filterStatus.value !== 'ativo')
+);
+function clearAllFilters() {
+    busca.value = '';
+    if (filterStatus.value !== 'ativo') {
+        filterStatus.value = 'ativo';
+        load();
+    }
+}
+
 const carregandoInicial = computed(
     () => loading.value && rules.value.length === 0
 );
 
+// Filtragem client-side por nome do paciente (status é server-side via load).
+const filteredRules = computed(() => {
+    const q = String(busca.value || '').trim().toLowerCase();
+    if (!q) return rules.value;
+    return rules.value.filter((r) =>
+        String(r._patient?.nome_completo || '').toLowerCase().includes(q)
+    );
+});
+
 // ── Data load ───────────────────────────────────────────────
 async function init() {
     const { data } = await supabase.auth.getUser();
@@ -325,10 +354,6 @@ function toggleExpand(ruleId) {
     expandedId.value = expandedId.value === ruleId ? null : ruleId;
 }
 
-// ── Popover de Ações (mobile compact) ──────────────────────
-const actionsPopRef = ref(null);
-function openActions(e) { actionsPopRef.value?.toggle(e); }
-
 onMounted(async () => {
     if (typeof window !== 'undefined' && window.matchMedia) {
         _mqMobile = window.matchMedia('(max-width: 1023px)');
@@ -378,18 +403,11 @@ onBeforeUnmount(() => {
                 <span>Menu Recorrências</span>
             </button>
             <div class="mr-page__title">
-                <i class="pi pi-sync text-indigo-300" />
+                <i class="pi pi-sync mr-page__title-icon" />
                 <span>Recorrências</span>
-                <span class="mr-page__count">{{ rules.length }}</span>
+                <span class="mr-page__count">{{ filteredRules.length }}</span>
             </div>
             <div class="mr-page__actions">
-                <button
-                    class="mr-head-btn mr-head-btn--compact-only"
-                    v-tooltip.bottom="'Filtros'"
-                    @click="openActions"
-                >
-                    <i class="pi pi-sliders-h" />
-                </button>
                 <button
                     class="mr-head-btn"
                     v-tooltip.bottom="'Recarregar'"
@@ -404,77 +422,110 @@ onBeforeUnmount(() => {
             </div>
         </header>
 
-        <Popover ref="actionsPopRef" class="mr-actions-pop">
-            <div class="mr-actions">
-                <div class="mr-actions__group">
-                    <div class="mr-actions__label">Status</div>
-                    <SelectButton
-                        v-model="filterStatus"
-                        :options="statusOptions"
-                        optionLabel="label"
-                        optionValue="value"
-                        :allowEmpty="false"
-                        size="small"
-                        class="w-full"
-                        @change="load"
-                    />
-                </div>
-            </div>
-        </Popover>
+        <!-- Subheader explicativo (blueprint §9) -->
+        <div class="mr-subheader">
+            <i class="pi pi-info-circle mr-subheader__icon" />
+            <span class="mr-subheader__text">
+                Séries de sessões que se repetem (semanal, quinzenal, dias específicos).
+                Acompanhe o <strong>progresso</strong> de cada uma e marque como
+                <strong>encerrada</strong> quando o paciente terminar o tratamento.
+            </span>
+        </div>
 
         <div class="mr-body">
             <!-- ═══ COL 1: Stats + filtros ═══════════════════════════════ -->
             <Teleport to="#mr-mobile-drawer-target" :disabled="!isMobile">
             <aside class="mr-side">
-                <div class="mr-w">
-                    <div class="mr-w__head">
-                        <span class="mr-w__title"><i class="pi pi-chart-bar" /> Estatísticas</span>
-                    </div>
-                    <div class="mr-stats">
-                        <template v-if="carregandoInicial">
-                            <div v-for="i in 4" :key="`stsk-${i}`" class="mr-stat mr-stat--skeleton" aria-busy="true">
-                                <div class="mr-stat__val melissa-skeleton melissa-skeleton--number" />
-                                <div class="mr-stat__lbl melissa-skeleton melissa-skeleton--text" style="width: 60%; margin-top: 6px;" />
+                <div class="mr-side__scroll">
+                    <!-- Stats -->
+                    <div class="mr-w mr-w--side">
+                        <div class="mr-w__head">
+                            <span class="mr-w__title"><i class="pi pi-chart-bar" /> Estatísticas</span>
+                        </div>
+                        <div class="mr-stats">
+                            <template v-if="carregandoInicial">
+                                <div v-for="i in 4" :key="`stsk-${i}`" class="mr-stat mr-stat--skeleton" aria-busy="true">
+                                    <div class="mr-stat__val melissa-skeleton melissa-skeleton--number" />
+                                    <div class="mr-stat__lbl melissa-skeleton melissa-skeleton--text" style="width: 60%; margin-top: 6px;" />
+                                </div>
+                            </template>
+                            <div
+                                v-for="s in aggregateStats"
+                                v-else
+                                :key="s.key"
+                                class="mr-stat"
+                                :class="`is-${s.cls}`"
+                            >
+                                <div class="mr-stat__val">{{ s.value }}</div>
+                                <div class="mr-stat__lbl">{{ s.label }}</div>
                             </div>
-                        </template>
-                        <div
-                            v-for="s in aggregateStats"
-                            v-else
-                            :key="s.key"
-                            class="mr-stat"
-                            :class="`is-${s.cls}`"
-                        >
-                            <div class="mr-stat__val">{{ s.value }}</div>
-                            <div class="mr-stat__lbl">{{ s.label }}</div>
+                        </div>
+                    </div>
+
+                    <!-- Filtro de status (button list colorido) -->
+                    <div class="mr-w mr-w--side">
+                        <div class="mr-w__head">
+                            <span class="mr-w__title"><i class="pi pi-filter" /> Status</span>
+                            <button
+                                v-if="filterStatus !== 'ativo'"
+                                class="mr-side__clear-inline"
+                                v-tooltip.top="'Voltar pro filtro padrão (Ativas)'"
+                                aria-label="Voltar pro filtro padrão"
+                                @click="setStatusFilter('ativo')"
+                            >
+                                <i class="pi pi-times" />
+                            </button>
+                        </div>
+                        <div class="mr-side__list">
+                            <button
+                                v-for="o in STATUS_FILTER_OPTIONS"
+                                :key="o.key"
+                                class="mr-side__item"
+                                :class="[`is-status-${o.key}`, { 'is-active': filterStatus === o.key }]"
+                                @click="setStatusFilter(o.key)"
+                            >
+                                <i :class="o.icon" />
+                                <span>{{ o.label }}</span>
+                            </button>
                         </div>
                     </div>
                 </div>
 
-                <div class="mr-w mr-w--side-only">
-                    <div class="mr-w__head">
-                        <span class="mr-w__title"><i class="pi pi-filter" /> Filtros</span>
+                <!-- Footer fixo: Limpar filtros (Transition fade+collapse) -->
+                <Transition name="mr-clear">
+                    <div v-if="hasActiveFilters" class="mr-side__footer">
+                        <button class="mr-side__clear-all" @click="clearAllFilters">
+                            <i class="pi pi-filter-slash" />
+                            <span>Limpar filtros</span>
+                        </button>
                     </div>
-                    <div class="mr-side__filters">
-                        <div>
-                            <div class="mr-side__label">Status</div>
-                            <SelectButton
-                                v-model="filterStatus"
-                                :options="statusOptions"
-                                optionLabel="label"
-                                optionValue="value"
-                                :allowEmpty="false"
-                                size="small"
-                                class="w-full"
-                                @change="load"
-                            />
-                        </div>
-                    </div>
-                </div>
+                </Transition>
             </aside>
             </Teleport>
 
             <!-- ═══ COL 2: Lista de regras ═══════════════════════════════ -->
             <div class="mr-main">
+                <!-- Toolbar: busca por nome do paciente -->
+                <div class="mr-toolbar">
+                    <div class="mr-search">
+                        <i class="pi pi-search mr-search__icon" />
+                        <input
+                            v-model="busca"
+                            type="text"
+                            placeholder="Buscar por nome do paciente…"
+                            class="mr-search__input"
+                        />
+                        <button
+                            v-if="busca"
+                            class="mr-search__clear"
+                            v-tooltip.bottom="'Limpar busca'"
+                            @click="busca = ''"
+                        >
+                            <i class="pi pi-times" />
+                        </button>
+                    </div>
+                </div>
+
                 <div class="mr-list">
                     <!-- Skeletons (blueprint §9) -->
                     <template v-if="carregandoInicial">
@@ -490,11 +541,14 @@ onBeforeUnmount(() => {
                         </div>
                     </template>
 
-                    <div v-else-if="!rules.length" class="mr-empty">
+                    <div v-else-if="!filteredRules.length" class="mr-empty">
                         <i class="pi pi-calendar-times mr-empty__icon" />
                         <div class="mr-empty__title">Nenhuma série encontrada</div>
                         <div class="mr-empty__hint">
-                            <template v-if="filterStatus === 'ativo'">
+                            <template v-if="busca">
+                                Nenhum paciente corresponde à busca. Ajuste ou limpe os filtros.
+                            </template>
+                            <template v-else-if="filterStatus === 'ativo'">
                                 Crie sessões recorrentes na agenda pra vê-las aqui.
                             </template>
                             <template v-else>
@@ -503,7 +557,7 @@ onBeforeUnmount(() => {
                         </div>
                     </div>
 
-                    <div v-else v-for="rule in rules" :key="rule.id" class="mr-card">
+                    <div v-else v-for="rule in filteredRules" :key="rule.id" class="mr-card">
                         <!-- Head: paciente + descrição + período -->
                         <div class="mr-card__head">
                             <span class="mr-card__avatar">
@@ -637,6 +691,10 @@ onBeforeUnmount(() => {
     font-size: 1rem;
     font-weight: 500;
 }
+.mr-page__title-icon {
+    color: var(--p-primary-color);
+    font-size: 1.05rem;
+}
 .mr-page__title > span:not(.mr-page__count) {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -699,40 +757,159 @@ onBeforeUnmount(() => {
 }
 .mr-menu-btn > i { font-size: 0.85rem; }
 
-/* Body */
+/* Subheader (blueprint §9) */
+.mr-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;
+}
+.mr-subheader__icon {
+    color: var(--p-primary-color);
+    font-size: 0.92rem;
+    flex-shrink: 0;
+    margin-top: 1px;
+}
+.mr-subheader__text { flex: 1; min-width: 0; }
+.mr-subheader__text strong { color: var(--m-text); font-weight: 600; }
+
+/* Body — sidebar fica colada à esquerda com border-right; main com
+   padding interno. Espelha Grupos/Tags/Médicos/Conversas. */
 .mr-body {
     flex: 1;
     display: flex;
     min-height: 0;
     position: relative;
-    gap: 12px;
-    padding: 12px;
+    gap: 0;
+    padding: 0;
 }
 
-/* Aside */
+/* Aside — 2 zonas: __scroll (cards) + __footer (Limpar filtros fixo) */
 .mr-side {
     width: 280px;
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    background: var(--m-bg-soft);
+    border-right: 1px solid var(--m-border);
+    overflow: hidden;
+}
+.mr-side__scroll {
+    flex: 1;
+    min-height: 0;
     overflow-y: auto;
+    display: flex;
+    flex-direction: column;
     scrollbar-width: thin;
     scrollbar-color: var(--m-border-strong) transparent;
 }
-.mr-side::-webkit-scrollbar { width: 5px; }
-.mr-side::-webkit-scrollbar-thumb {
+.mr-side__scroll::-webkit-scrollbar { width: 5px; }
+.mr-side__scroll::-webkit-scrollbar-thumb {
     background: var(--m-border-strong);
     border-radius: 3px;
 }
 
-.mr-w {
+/* Footer fixo: Limpar filtros (espelha Grupos/Tags/Médicos/Conversas) */
+.mr-side__footer {
+    flex-shrink: 0;
+    padding: 12px;
     background: var(--m-bg-soft);
+    border-top: 1px solid var(--m-border);
+}
+.mr-side__clear-all {
+    width: 100%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 9px 12px;
+    background: var(--m-bg-medium);
+    border: 1px solid var(--m-border);
+    color: var(--m-text);
+    border-radius: 10px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.78rem;
+    font-weight: 600;
+    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
+}
+.mr-side__clear-all:hover {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+    color: var(--m-text);
+}
+.mr-side__clear-all > i {
+    font-size: 0.78rem;
+    color: var(--m-text-muted);
+    transition: color 140ms ease;
+}
+.mr-side__clear-all:hover > i { color: var(--m-text); }
+
+/* X inline ao lado do título do filter card */
+.mr-side__clear-inline {
+    width: 18px;
+    height: 18px;
+    display: grid;
+    place-items: center;
+    background: transparent;
+    border: 1px solid color-mix(in srgb, rgb(220, 38, 38) 30%, var(--m-border));
+    color: rgb(220, 38, 38);
+    border-radius: 4px;
+    cursor: pointer;
+    font-family: inherit;
+    transition: background-color 140ms ease, border-color 140ms ease;
+}
+.mr-side__clear-inline:hover {
+    background: rgba(220, 38, 38, 0.10);
+    border-color: rgba(220, 38, 38, 0.55);
+}
+.mr-side__clear-inline > i { font-size: 0.6rem; }
+
+/* Transition do footer */
+.mr-clear-enter-active,
+.mr-clear-leave-active {
+    transition: opacity 220ms ease, transform 220ms ease, max-height 240ms ease;
+    overflow: hidden;
+}
+.mr-clear-enter-from,
+.mr-clear-leave-to {
+    opacity: 0;
+    transform: translateY(6px);
+    max-height: 0;
+}
+.mr-clear-enter-to,
+.mr-clear-leave-from {
+    opacity: 1;
+    transform: translateY(0);
+    max-height: 80px;
+}
+
+.mr-w {
+    background: var(--m-bg-medium);
     border: 1px solid var(--m-border);
     border-radius: 12px;
     padding: 12px;
 }
-.mr-w__head { margin-bottom: 10px; }
+/* Modifier pros cards dentro da sidebar — margem lateral + sombra */
+.mr-w--side {
+    margin: 12px 12px 0;
+    flex-shrink: 0;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+}
+.mr-w--side:last-of-type { margin-bottom: 12px; }
+
+.mr-w__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+}
 .mr-w__title {
     display: inline-flex;
     align-items: center;
@@ -748,7 +925,7 @@ onBeforeUnmount(() => {
     gap: 6px;
 }
 .mr-stat {
-    background: var(--m-bg-medium);
+    background: var(--m-bg-soft);
     border: 1px solid var(--m-border);
     border-radius: 10px;
     padding: 8px 10px;
@@ -765,15 +942,80 @@ onBeforeUnmount(() => {
     text-transform: uppercase;
     letter-spacing: 0.06em;
 }
-.mr-stat.is-ok .mr-stat__val { color: rgb(74, 222, 128); }
+.mr-stat.is-ok .mr-stat__val { color: rgb(22, 163, 74); }
 
-.mr-side__label {
-    text-transform: uppercase;
-    letter-spacing: 0.12em;
-    color: var(--m-text-muted);
-    font-size: 0.62rem;
-    font-weight: 600;
-    margin-bottom: 6px;
+/* Filter button list (blueprint §8) */
+.mr-side__list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+.mr-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;
+}
+.mr-side__item > i {
+    font-size: 0.78rem;
+    width: 14px;
+    text-align: center;
+}
+
+/* Status: Ativas verde / Encerradas vermelho / Todas neutral */
+.mr-side__item.is-status-ativo {
+    background: rgba(22, 163, 74, 0.05);
+    border-color: rgba(22, 163, 74, 0.18);
+}
+.mr-side__item.is-status-ativo > i { color: rgb(22, 163, 74); }
+.mr-side__item.is-status-ativo:hover {
+    background: rgba(22, 163, 74, 0.10);
+    border-color: rgba(22, 163, 74, 0.30);
+}
+.mr-side__item.is-active.is-status-ativo {
+    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);
+}
+
+.mr-side__item.is-status-cancelado {
+    background: rgba(220, 38, 38, 0.05);
+    border-color: rgba(220, 38, 38, 0.18);
+}
+.mr-side__item.is-status-cancelado > i { color: rgb(220, 38, 38); }
+.mr-side__item.is-status-cancelado:hover {
+    background: rgba(220, 38, 38, 0.10);
+    border-color: rgba(220, 38, 38, 0.30);
+}
+.mr-side__item.is-active.is-status-cancelado {
+    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);
+}
+
+.mr-side__item.is-status-all {
+    background: var(--m-bg-soft);
+    border-color: var(--m-border);
+}
+.mr-side__item.is-status-all > i { color: var(--m-text-muted); }
+.mr-side__item.is-status-all:hover {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+}
+.mr-side__item.is-active.is-status-all {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+    box-shadow: 0 0 0 1px var(--m-border-strong);
 }
 
 /* Main */
@@ -782,9 +1024,70 @@ onBeforeUnmount(() => {
     min-width: 0;
     display: flex;
     flex-direction: column;
+    padding: 12px;
+    gap: 10px;
 }
+
+/* Toolbar com busca */
+.mr-toolbar {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.mr-search {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+}
+.mr-search__icon {
+    position: absolute;
+    left: 12px;
+    color: var(--m-text-muted);
+    font-size: 0.78rem;
+    pointer-events: none;
+}
+.mr-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;
+}
+.mr-search__input::placeholder { color: var(--m-text-faint); }
+.mr-search__input:focus {
+    border-color: var(--m-border-strong);
+}
+.mr-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;
+}
+.mr-search__clear:hover {
+    background: var(--m-bg-soft-hover);
+    color: var(--m-text);
+}
+.mr-search__clear > i { font-size: 0.7rem; }
 .mr-list {
     flex: 1;
+    min-height: 0;
     overflow-y: auto;
     padding: 0 4px 4px;
     display: flex;
@@ -1049,27 +1352,6 @@ onBeforeUnmount(() => {
     color: var(--m-text-muted);
 }
 
-/* Popover de Ações */
-.mr-actions {
-    display: flex;
-    flex-direction: column;
-    gap: 14px;
-    min-width: 240px;
-    padding: 4px;
-}
-.mr-actions__group {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-}
-.mr-actions__label {
-    text-transform: uppercase;
-    letter-spacing: 0.14em;
-    color: var(--text-color-secondary, var(--m-text-faint));
-    font-size: 0.62rem;
-    font-weight: 600;
-}
-
 /* Drawer mobile (blueprint §6) */
 .mr-mobile-drawer {
     position: fixed;
@@ -1110,6 +1392,31 @@ onBeforeUnmount(() => {
     height: auto;
     overflow: visible;
     padding: 0;
+    background: transparent;
+    border-right: none;
+}
+.mr-mobile-drawer__scroll .mr-side__scroll {
+    flex: none;
+    min-height: 0;
+    overflow: visible;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+.mr-mobile-drawer__scroll .mr-w--side {
+    margin: 0;
+}
+.mr-mobile-drawer__scroll .mr-w--side:last-of-type { margin-bottom: 0; }
+.mr-mobile-drawer__scroll .mr-side__footer {
+    position: sticky;
+    bottom: 0;
+    margin: 8px -12px -24px;
+    padding: 12px;
+    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;
 }
 .mr-mobile-drawer__backdrop {
     position: fixed;
@@ -1124,15 +1431,10 @@ onBeforeUnmount(() => {
 .mr-drawer-fade-enter-from,
 .mr-drawer-fade-leave-to { opacity: 0; }
 
-/* Compact (<xl) */
-@media (max-width: 1279px) {
-    .mr-head-btn--compact-only { display: grid; }
-}
-
 /* Mobile (<lg) */
 @media (max-width: 1023px) {
-    .mr-body { flex-direction: column; padding: 8px; }
-    .mr-main { width: 100%; }
+    .mr-body { flex-direction: column; padding: 0; }
+    .mr-main { width: 100%; padding: 8px; }
     .mr-page__title > span:first-of-type { display: none; }
     .mr-menu-btn--mobile-only { display: inline-flex; }
     .mr-card__foot { gap: 4px; }
diff --git a/src/layout/melissa/MelissaTags.vue b/src/layout/melissa/MelissaTags.vue
index 69e0633..87f5d8c 100644
--- a/src/layout/melissa/MelissaTags.vue
+++ b/src/layout/melissa/MelissaTags.vue
@@ -1,26 +1,33 @@
 <script setup>
 /*
- * MelissaTags — CRUD de tags de pacientes dentro de Melissa.
- * Segue blueprint melissa-page-blueprint.md.
+ * MelissaTags — Tags de pacientes (CRUD + lista de pacientes vinculados).
+ * Segue blueprint melissa-table-page-blueprint.md (DataTable + sidebar com
+ * filtros coloridos, view toggle list/grade, subheader, footer fixo com
+ * "Limpar filtros", Xs inline pra zerar filtro individual).
  *
- * Layout 2-col:
- *   - COL 1 — Aside (~280px): stats (total, em uso, padrão, minhas) + busca
- *   - COL 2 — Lista central: cards de tag (dot colorido + nome + contagem)
+ * Tabela: patient_tags (filtro por owner_id — tags são per-user, não
+ * tenant-wide como grupos); join com pacientes via patient_patient_tag.
+ * View opcional: v_tag_patient_counts (com pacientes_count agregado).
  *
- * Click num card abre dialog de edição. Botão "+" cria nova.
- * Reutiliza lógica de patient_tags da TagsPage (mais enxuta — sem multi-select).
+ * Row design preservado: dot colorido + nome + badge "Padrão" + contagem
+ * de pacientes; coluna "Ações" frozen 100px com pencil + trash (ocultos
+ * em is_padrao).
+ *
+ * Click na coluna "Pacientes" abre dialog com a lista vinculada (espelha
+ * GruposPacientesPage / MelissaGrupos).
  */
-import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+import { ref, reactive, computed, watch, onMounted, onBeforeUnmount } from 'vue';
 import { useToast } from 'primevue/usetoast';
 import { useConfirm } from 'primevue/useconfirm';
 import { supabase } from '@/lib/supabase/client';
-// Dialog/InputText/Button auto-imported via PrimeVueResolver
+import PatientCadastroDialog from '@/components/ui/PatientCadastroDialog.vue';
+// DataTable/Column/Paginator/Dialog/InputText/Button: auto via PrimeVueResolver
 
 const emit = defineEmits(['close']);
 const toast = useToast();
 const confirm = useConfirm();
 
-// ── Breakpoints + drawer (blueprint §2/§3) ─────────────────
+// ── Breakpoints + drawer ──────────────────────────────────
 const drawerOpen = ref(false);
 const isMobile = ref(false);
 let _mqMobile = null;
@@ -35,12 +42,100 @@ function fecharDrawer() { drawerOpen.value = false; }
 const loading = ref(false);
 const saving = ref(false);
 const tags = ref([]);
+
 const busca = ref('');
-const carregandoInicial = computed(
-    () => loading.value && tags.value.length === 0
+const tipoFilter = ref('');   // '' | 'padrao' | 'mine'
+const usoFilter = ref('');    // '' | 'em_uso' | 'vazio'
+
+// ── Helpers de status (rowClass) ──────────────────────────
+function rowStatusClass(t) {
+    if (!t) return '';
+    if (t.is_padrao) return 'is-padrao';
+    if ((t.pacientes_count || 0) > 0) return 'is-em-uso';
+    return 'is-vazio';
+}
+
+// ── Stats ─────────────────────────────────────────────────
+const stats = computed(() => {
+    const all = tags.value;
+    const minhas = all.filter((t) => !t.is_padrao).length;
+    const padrao = all.filter((t) => t.is_padrao).length;
+    const emUso = all.filter((t) => (t.pacientes_count || 0) > 0).length;
+    return [
+        { key: 'total', label: 'Total', value: all.length, cls: 'neutral' },
+        { key: 'minhas', label: 'Minhas', value: minhas, cls: minhas > 0 ? 'accent' : 'neutral' },
+        { key: 'uso', label: 'Em uso', value: emUso, cls: emUso > 0 ? 'ok' : 'neutral' },
+        { key: 'padrao', label: 'Padrão', value: padrao, cls: padrao > 0 ? 'info' : 'neutral' }
+    ];
+});
+
+const TIPO_FILTER_OPTIONS = [
+    { key: 'padrao', label: 'Padrão', icon: 'pi pi-shield' },
+    { key: 'mine', label: 'Minhas', icon: 'pi pi-user' }
+];
+const USO_FILTER_OPTIONS = [
+    { key: 'em_uso', label: 'Em uso', icon: 'pi pi-users' },
+    { key: 'vazio', label: 'Vazias', icon: 'pi pi-circle' }
+];
+
+function toggleTipoFilter(t) {
+    tipoFilter.value = tipoFilter.value === t ? '' : t;
+}
+function toggleUsoFilter(u) {
+    usoFilter.value = usoFilter.value === u ? '' : u;
+}
+
+const hasActiveFilters = computed(() =>
+    !!(busca.value || tipoFilter.value || usoFilter.value)
+);
+function clearAllFilters() {
+    busca.value = '';
+    tipoFilter.value = '';
+    usoFilter.value = '';
+}
+
+// ── Filtragem ─────────────────────────────────────────────
+const filtered = computed(() => {
+    let list = tags.value;
+    if (tipoFilter.value === 'padrao') list = list.filter((t) => !!t.is_padrao);
+    if (tipoFilter.value === 'mine') list = list.filter((t) => !t.is_padrao);
+    if (usoFilter.value === 'em_uso') list = list.filter((t) => (t.pacientes_count || 0) > 0);
+    if (usoFilter.value === 'vazio') list = list.filter((t) => (t.pacientes_count || 0) === 0);
+    const q = String(busca.value || '').trim().toLowerCase();
+    if (q) {
+        list = list.filter((t) => String(t.nome || '').toLowerCase().includes(q));
+    }
+    return list;
+});
+
+// ── Paginação compartilhada (DataTable + grid) ────────────
+const PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
+const rowsMT = ref(10);
+const firstMT = ref(0);
+function onPage(event) {
+    firstMT.value = event.first;
+    rowsMT.value = event.rows;
+}
+watch([busca, tipoFilter, usoFilter], () => { firstMT.value = 0; });
+
+const pagedItems = computed(() =>
+    filtered.value.slice(firstMT.value, firstMT.value + rowsMT.value)
 );
 
-// ── Auth ───────────────────────────────────────────────────
+// ── View mode (list / grid) ───────────────────────────────
+const VIEW_MODE_KEY = 'mt.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 */ }
+}
+
+// ── Auth/tenant ───────────────────────────────────────────
 async function getOwnerId() {
     const { data } = await supabase.auth.getUser();
     if (!data?.user?.id) throw new Error('Sessão não inicializada.');
@@ -55,7 +150,7 @@ async function getActiveTenantId(uid) {
     return data.tenant_id;
 }
 
-// ── Fetch ──────────────────────────────────────────────────
+// ── Fetch ─────────────────────────────────────────────────
 function normalize(r) {
     return {
         ...r,
@@ -69,6 +164,8 @@ async function load() {
     loading.value = true;
     try {
         const ownerId = await getOwnerId();
+        // Tenta a view agregada primeiro (já traz pacientes_count); se falhar
+        // (RLS, view não existir), cai pra patient_tags + count manual.
         const v = await supabase.from('v_tag_patient_counts').select('*').eq('owner_id', ownerId).order('nome', { ascending: true });
         if (!v.error) {
             tags.value = (v.data || []).map(normalize);
@@ -76,7 +173,19 @@ async function load() {
         }
         const t = await supabase.from('patient_tags').select('*').eq('owner_id', ownerId);
         if (t.error) throw t.error;
-        tags.value = (t.data || []).map(normalize).sort((a, b) => a.nome.localeCompare(b.nome));
+        // Sem a view, busca o count via patient_patient_tag agrupado por tag_id.
+        const ids = (t.data || []).map((x) => x.id);
+        let counts = new Map();
+        if (ids.length > 0) {
+            const { data: vData } = await supabase
+                .from('patient_patient_tag').select('tag_id').in('tag_id', ids);
+            for (const r of vData || []) {
+                counts.set(r.tag_id, (counts.get(r.tag_id) || 0) + 1);
+            }
+        }
+        tags.value = (t.data || [])
+            .map((r) => normalize({ ...r, pacientes_count: counts.get(r.id) || 0 }))
+            .sort((a, b) => a.nome.localeCompare(b.nome));
     } catch (e) {
         toast.add({ severity: 'error', summary: 'Erro ao carregar tags', detail: e?.message, life: 4500 });
     } finally {
@@ -84,34 +193,23 @@ async function load() {
     }
 }
 
-// ── Stats ──────────────────────────────────────────────────
-const stats = computed(() => {
-    const all = tags.value;
-    const padrao = all.filter((t) => t.is_padrao).length;
-    const minhas = all.filter((t) => !t.is_padrao).length;
-    const emUso = all.filter((t) => t.pacientes_count > 0).length;
-    const totalPac = all.reduce((s, t) => s + Number(t.pacientes_count || 0), 0);
-    return [
-        { key: 'total', label: 'Total', value: all.length, cls: 'neutral' },
-        { key: 'minhas', label: 'Minhas', value: minhas, cls: minhas > 0 ? 'ok' : 'neutral' },
-        { key: 'uso', label: 'Em uso', value: emUso, cls: emUso > 0 ? 'ok' : 'neutral' },
-        { key: 'pacientes', label: 'Pacientes', value: totalPac, cls: 'neutral' }
-    ];
+onMounted(() => {
+    if (typeof window !== 'undefined' && window.matchMedia) {
+        _mqMobile = window.matchMedia('(max-width: 1023px)');
+        isMobile.value = _mqMobile.matches;
+        _mqMobile.addEventListener('change', _onMqMobileChange);
+    }
+    load();
+});
+onBeforeUnmount(() => {
+    if (_mqMobile) _mqMobile.removeEventListener('change', _onMqMobileChange);
 });
 
-// ── Filtro ─────────────────────────────────────────────────
-const tagsFiltradas = computed(() => {
-    const q = String(busca.value || '').trim().toLowerCase();
-    if (!q) return tags.value;
-    return tags.value.filter((t) => String(t.nome || '').toLowerCase().includes(q));
-});
-
-// ── Dialog create/edit ─────────────────────────────────────
+// ── CRUD ──────────────────────────────────────────────────
 const dlgOpen = ref(false);
 const dlgMode = ref('create');
 const dlgForm = ref({ id: '', nome: '', cor: '#22C55E' });
 const dlgError = ref('');
-
 const PRESET_COLORS = ['6366f1', '8b5cf6', 'ec4899', 'ef4444', 'f97316', 'eab308', '22c55e', '14b8a6', '3b82f6', '06b6d4', '64748b', '292524'];
 
 function abrirCriar() {
@@ -134,6 +232,9 @@ function abrirEditar(row) {
     dlgError.value = '';
     dlgOpen.value = true;
 }
+function onRowClick(event) {
+    if (event?.data && !event.data.is_padrao) abrirEditar(event.data);
+}
 
 async function salvar() {
     const nome = String(dlgForm.value.nome || '').trim();
@@ -148,11 +249,15 @@ async function salvar() {
         const cor = dlgForm.value.cor.startsWith('#') ? dlgForm.value.cor : '#' + dlgForm.value.cor;
         if (dlgMode.value === 'create') {
             const tenantId = await getActiveTenantId(ownerId);
-            const { error } = await supabase.from('patient_tags').insert({ owner_id: ownerId, tenant_id: tenantId, nome, cor });
+            const { error } = await supabase.from('patient_tags').insert({
+                owner_id: ownerId, tenant_id: tenantId, nome, cor
+            });
             if (error) throw error;
             toast.add({ severity: 'success', summary: 'Tag criada', life: 2200 });
         } else {
-            const { error } = await supabase.from('patient_tags').update({ nome, cor, updated_at: new Date().toISOString() }).eq('id', dlgForm.value.id).eq('owner_id', ownerId);
+            const { error } = await supabase.from('patient_tags')
+                .update({ nome, cor, updated_at: new Date().toISOString() })
+                .eq('id', dlgForm.value.id).eq('owner_id', ownerId);
             if (error) throw error;
             toast.add({ severity: 'success', summary: 'Tag atualizada', life: 2200 });
         }
@@ -166,7 +271,6 @@ async function salvar() {
     }
 }
 
-// ── Delete ─────────────────────────────────────────────────
 function confirmarExcluir(row) {
     if (row.is_padrao) return;
     confirm.require({
@@ -195,16 +299,90 @@ async function excluir(row) {
     }
 }
 
-onMounted(() => {
-    if (typeof window !== 'undefined' && window.matchMedia) {
-        _mqMobile = window.matchMedia('(max-width: 1023px)');
-        isMobile.value = _mqMobile.matches;
-        _mqMobile.addEventListener('change', _onMqMobileChange);
-    }
-    load();
+// ── Helpers de formatação (pra dialog "Pacientes da tag") ─────
+function initials(name) {
+    const parts = String(name || '').trim().split(/\s+/).filter(Boolean);
+    if (!parts.length) return '—';
+    if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+function fmtPhone(v) {
+    const d = String(v ?? '').replace(/\D/g, '');
+    if (!d) return '—';
+    if (d.length === 11) return `(${d.slice(0, 2)}) ${d.slice(2, 7)}-${d.slice(7)}`;
+    if (d.length === 10) return `(${d.slice(0, 2)}) ${d.slice(2, 6)}-${d.slice(6)}`;
+    return d;
+}
+
+// ── Dialog: Pacientes da tag ──────────────────────────────────
+// Espelha o pattern de MelissaGrupos: click na coluna "Pacientes" abre
+// dialog com a lista vinculada via patient_patient_tag.
+const patientsDialog = reactive({
+    open: false,
+    loading: false,
+    error: '',
+    tag: null,
+    items: [],
+    search: ''
 });
-onBeforeUnmount(() => {
-    if (_mqMobile) _mqMobile.removeEventListener('change', _onMqMobileChange);
+
+const patientsDialogFiltered = computed(() => {
+    const s = String(patientsDialog.search || '').toLowerCase().trim();
+    if (!s) return patientsDialog.items || [];
+    return (patientsDialog.items || []).filter((p) =>
+        String(p.full_name || '').toLowerCase().includes(s) ||
+        String(p.email || '').toLowerCase().includes(s) ||
+        String(p.phone || '').toLowerCase().includes(s)
+    );
+});
+
+const patientsTagHex = computed(() => {
+    if (!patientsDialog.tag) return '#22c55e';
+    const c = patientsDialog.tag.cor || '#22c55e';
+    return c.startsWith('#') ? c : '#' + c;
+});
+
+async function openTagPatientsModal(tagRow) {
+    if (!tagRow) return;
+    patientsDialog.open = true;
+    patientsDialog.loading = true;
+    patientsDialog.error = '';
+    patientsDialog.tag = tagRow;
+    patientsDialog.items = [];
+    patientsDialog.search = '';
+    try {
+        const { data, error } = await supabase
+            .from('patient_patient_tag')
+            .select('tag_id, patient:patients(id, nome_completo, email_principal, telefone, avatar_url)')
+            .eq('tag_id', tagRow.id);
+        if (error) throw error;
+        patientsDialog.items = (data || [])
+            .map((r) => r.patient)
+            .filter(Boolean)
+            .map((p) => ({
+                id: p.id,
+                full_name: p.nome_completo || '—',
+                email: p.email_principal || '—',
+                phone: p.telefone || '—',
+                avatar_url: p.avatar_url || null
+            }))
+            .sort((a, b) => String(a.full_name).localeCompare(String(b.full_name), 'pt-BR'));
+    } catch (e) {
+        patientsDialog.error = e?.message || 'Erro ao carregar pacientes da tag.';
+    } finally {
+        patientsDialog.loading = false;
+    }
+}
+
+const editPatientId = ref(null);
+const editPatientDialog = ref(false);
+function abrirPaciente(patient) {
+    if (!patient?.id) return;
+    editPatientId.value = String(patient.id);
+    editPatientDialog.value = true;
+}
+watch(editPatientDialog, (isOpen) => {
+    if (!isOpen) editPatientId.value = null;
 });
 </script>
 
@@ -213,7 +391,7 @@ onBeforeUnmount(() => {
         class="mt-mobile-drawer"
         :class="{ 'is-open': drawerOpen }"
         v-show="isMobile"
-        aria-label="Estatísticas e busca"
+        aria-label="Estatísticas e filtros"
     >
         <div id="mt-mobile-drawer-target" class="mt-mobile-drawer__scroll" />
     </aside>
@@ -229,16 +407,16 @@ onBeforeUnmount(() => {
         <header class="mt-page__head">
             <button
                 class="mt-menu-btn mt-menu-btn--mobile-only"
-                v-tooltip.bottom="'Estatísticas & busca'"
+                v-tooltip.bottom="'Estatísticas & filtros'"
                 @click="toggleDrawer"
             >
                 <i class="pi pi-bars" />
                 <span>Menu Tags</span>
             </button>
             <div class="mt-page__title">
-                <i class="pi pi-tag text-purple-300" />
+                <i class="pi pi-tag mt-page__title-icon" />
                 <span>Tags</span>
-                <span class="mt-page__count">{{ tagsFiltradas.length }}</span>
+                <span class="mt-page__count">{{ filtered.length }}</span>
             </div>
             <div class="mt-page__actions">
                 <button
@@ -247,7 +425,7 @@ onBeforeUnmount(() => {
                     :disabled="loading"
                     @click="abrirCriar"
                 >
-                    <i class="pi pi-plus" />
+                    <i :class="saving ? 'pi pi-spin pi-spinner' : 'pi pi-plus'" />
                     <span>Nova</span>
                 </button>
                 <button
@@ -264,149 +442,618 @@ onBeforeUnmount(() => {
             </div>
         </header>
 
+        <!-- Subheader explicativo (blueprint §9) -->
+        <div class="mt-subheader">
+            <i class="pi pi-info-circle mt-subheader__icon" />
+            <span class="mt-subheader__text">
+                Marcadores rápidos pra classificar pacientes (ex: TDAH, VIP, Convênio).
+                <strong>Crie tags próprias</strong> com cor identificadora — diferente de
+                grupos, tags são <strong>per-usuário</strong> e podem ser combinadas.
+            </span>
+        </div>
+
         <div class="mt-body">
             <Teleport to="#mt-mobile-drawer-target" :disabled="!isMobile">
             <aside class="mt-side">
-                <div class="mt-w">
-                    <div class="mt-w__head">
-                        <span class="mt-w__title"><i class="pi pi-chart-bar" /> Estatísticas</span>
-                    </div>
-                    <div class="mt-stats">
-                        <template v-if="carregandoInicial">
-                            <div v-for="i in 4" :key="`stsk-${i}`" class="mt-stat" aria-busy="true">
-                                <div class="mt-stat__val melissa-skeleton melissa-skeleton--number" />
-                                <div class="mt-stat__lbl melissa-skeleton melissa-skeleton--text" style="width: 60%; margin-top: 6px;" />
+                <div class="mt-side__scroll">
+                    <!-- Stats -->
+                    <div class="mt-w mt-w--side">
+                        <div class="mt-w__head">
+                            <span class="mt-w__title"><i class="pi pi-chart-bar" /> Estatísticas</span>
+                        </div>
+                        <div class="mt-stats">
+                            <div
+                                v-for="s in stats"
+                                :key="s.key"
+                                class="mt-stat"
+                                :class="`is-${s.cls}`"
+                            >
+                                <div class="mt-stat__val">{{ s.value }}</div>
+                                <div class="mt-stat__lbl">{{ s.label }}</div>
                             </div>
-                        </template>
-                        <div
-                            v-for="s in stats"
-                            v-else
-                            :key="s.key"
-                            class="mt-stat"
-                            :class="`is-${s.cls}`"
-                        >
-                            <div class="mt-stat__val">{{ s.value }}</div>
-                            <div class="mt-stat__lbl">{{ s.label }}</div>
+                        </div>
+                    </div>
+
+                    <!-- Filtro de tipo -->
+                    <div class="mt-w mt-w--side">
+                        <div class="mt-w__head">
+                            <span class="mt-w__title"><i class="pi pi-filter" /> Tipo</span>
+                            <button
+                                v-if="tipoFilter"
+                                class="mt-side__clear-inline"
+                                v-tooltip.top="'Limpar filtro de tipo'"
+                                aria-label="Limpar filtro de tipo"
+                                @click="tipoFilter = ''"
+                            >
+                                <i class="pi pi-times" />
+                            </button>
+                        </div>
+                        <div class="mt-side__list">
+                            <button
+                                v-for="o in TIPO_FILTER_OPTIONS"
+                                :key="o.key"
+                                class="mt-side__item"
+                                :class="[`is-tipo-${o.key}`, { 'is-active': tipoFilter === o.key }]"
+                                @click="toggleTipoFilter(o.key)"
+                            >
+                                <i :class="o.icon" />
+                                <span>{{ o.label }}</span>
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Filtro de uso -->
+                    <div class="mt-w mt-w--side">
+                        <div class="mt-w__head">
+                            <span class="mt-w__title"><i class="pi pi-users" /> Uso</span>
+                            <button
+                                v-if="usoFilter"
+                                class="mt-side__clear-inline"
+                                v-tooltip.top="'Limpar filtro de uso'"
+                                aria-label="Limpar filtro de uso"
+                                @click="usoFilter = ''"
+                            >
+                                <i class="pi pi-times" />
+                            </button>
+                        </div>
+                        <div class="mt-side__list">
+                            <button
+                                v-for="o in USO_FILTER_OPTIONS"
+                                :key="o.key"
+                                class="mt-side__item"
+                                :class="[`is-uso-${o.key}`, { 'is-active': usoFilter === o.key }]"
+                                @click="toggleUsoFilter(o.key)"
+                            >
+                                <i :class="o.icon" />
+                                <span>{{ o.label }}</span>
+                            </button>
                         </div>
                     </div>
                 </div>
 
-                <div class="mt-w">
-                    <div class="mt-w__head">
-                        <span class="mt-w__title"><i class="pi pi-search" /> Buscar</span>
+                <Transition name="mt-clear">
+                    <div v-if="hasActiveFilters" class="mt-side__footer">
+                        <button class="mt-side__clear-all" @click="clearAllFilters">
+                            <i class="pi pi-filter-slash" />
+                            <span>Limpar filtros</span>
+                        </button>
                     </div>
-                    <input
-                        v-model="busca"
-                        type="text"
-                        placeholder="Nome da tag…"
-                        class="mt-search__input"
-                    />
-                </div>
+                </Transition>
             </aside>
             </Teleport>
 
             <div class="mt-main">
-                <div class="mt-list">
-                    <template v-if="carregandoInicial">
-                        <div v-for="i in 5" :key="`tsk-${i}`" class="mt-card mt-card--skeleton" aria-busy="true">
-                            <span class="mt-card__dot melissa-skeleton" style="border-radius: 50%;" />
-                            <div style="flex:1; display:flex; flex-direction:column; gap:6px;">
-                                <span class="melissa-skeleton melissa-skeleton--title" :style="{ width: `${50 + (i * 9) % 30}%` }" />
+                <!-- Toolbar (busca + view toggle) -->
+                <div class="mt-toolbar">
+                    <div class="mt-search">
+                        <i class="pi pi-search mt-search__icon" />
+                        <input
+                            v-model="busca"
+                            type="text"
+                            placeholder="Buscar por nome…"
+                            class="mt-search__input"
+                        />
+                        <button
+                            v-if="busca"
+                            class="mt-search__clear"
+                            v-tooltip.bottom="'Limpar busca'"
+                            @click="busca = ''"
+                        >
+                            <i class="pi pi-times" />
+                        </button>
+                    </div>
+                    <div class="mt-view-toggle" role="group" aria-label="Visualização">
+                        <button
+                            class="mt-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="mt-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="rowsMT"
+                    :first="firstMT"
+                    :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: 600px"
+                    class="mt-table"
+                    @row-click="onRowClick"
+                    @page="onPage"
+                >
+                    <Column header="Tag" style="min-width: 280px">
+                        <template #body="{ data }">
+                            <div class="mt-row__tag">
+                                <span class="mt-row__dot" :style="{ background: data.cor || '#64748b' }" />
+                                <div class="mt-row__main">
+                                    <div class="mt-row__name-row">
+                                        <span class="mt-row__name">{{ data.nome }}</span>
+                                        <span v-if="data.is_padrao" class="mt-row__badge mt-row__badge--padrao">
+                                            <i class="pi pi-shield" /> Padrão
+                                        </span>
+                                    </div>
+                                </div>
                             </div>
+                        </template>
+                    </Column>
+
+                    <Column header="Pacientes" style="width: 180px; min-width: 160px">
+                        <template #body="{ data }">
+                            <button
+                                type="button"
+                                class="mt-row__count-btn"
+                                :class="{ 'is-empty': data.pacientes_count === 0 }"
+                                :disabled="data.pacientes_count === 0"
+                                v-tooltip.top="data.pacientes_count > 0 ? 'Ver pacientes da tag' : 'Sem pacientes vinculados'"
+                                aria-label="Ver pacientes da tag"
+                                @click.stop="openTagPatientsModal(data)"
+                            >
+                                <i class="pi pi-users" />
+                                <span>
+                                    {{ data.pacientes_count }}
+                                    {{ data.pacientes_count === 1 ? 'paciente' : 'pacientes' }}
+                                </span>
+                            </button>
+                        </template>
+                    </Column>
+
+                    <Column
+                        header=""
+                        :style="{ width: '100px', maxWidth: '100px', minWidth: '100px' }"
+                        frozen
+                        alignFrozen="right"
+                        class="mt-col-acoes"
+                    >
+                        <template #body="{ data }">
+                            <div class="mt-row__actions" @click.stop>
+                                <button
+                                    v-if="!data.is_padrao"
+                                    class="mt-row__btn"
+                                    v-tooltip.left="'Editar'"
+                                    aria-label="Editar"
+                                    @click.stop="abrirEditar(data)"
+                                >
+                                    <i class="pi pi-pencil" />
+                                </button>
+                                <button
+                                    v-if="!data.is_padrao"
+                                    class="mt-row__btn mt-row__btn--danger"
+                                    v-tooltip.left="'Excluir'"
+                                    aria-label="Excluir"
+                                    @click.stop="confirmarExcluir(data)"
+                                >
+                                    <i class="pi pi-trash" />
+                                </button>
+                                <span v-else class="mt-row__locked" v-tooltip.left="'Tag padrão (bloqueada)'">
+                                    <i class="pi pi-lock" />
+                                </span>
+                            </div>
+                        </template>
+                    </Column>
+
+                    <template #empty>
+                        <div class="mt-empty">
+                            <i class="pi pi-tag mt-empty__icon" />
+                            <div class="mt-empty__title">Nenhuma tag encontrada</div>
+                            <div class="mt-empty__hint">
+                                <template v-if="busca || tipoFilter || usoFilter">
+                                    Ajuste os filtros pra ver mais resultados.
+                                </template>
+                                <template v-else>
+                                    Crie sua primeira tag pra organizar pacientes.
+                                </template>
+                            </div>
+                            <button class="mt-act-btn mt-act-btn--primary mt-empty__btn" @click="abrirCriar">
+                                <i class="pi pi-plus" />
+                                <span>Nova tag</span>
+                            </button>
                         </div>
                     </template>
 
-                    <div v-else-if="tagsFiltradas.length === 0" class="mt-empty">
+                    <template #loading>
+                        <div class="mt-table__loading">
+                            <i class="pi pi-spin pi-spinner" />
+                            <span>Carregando tags…</span>
+                        </div>
+                    </template>
+                </DataTable>
+
+                <!-- View Grade -->
+                <div v-else-if="viewMode === 'grid'" class="mt-grid-wrap">
+                    <div v-if="loading && filtered.length === 0" class="mt-table__loading mt-grid__loading">
+                        <i class="pi pi-spin pi-spinner" />
+                        <span>Carregando tags…</span>
+                    </div>
+                    <div v-else-if="filtered.length === 0" class="mt-empty">
                         <i class="pi pi-tag mt-empty__icon" />
                         <div class="mt-empty__title">Nenhuma tag encontrada</div>
                         <div class="mt-empty__hint">
-                            <template v-if="busca">Ajuste a busca pra ver mais resultados.</template>
-                            <template v-else>Crie sua primeira tag pra organizar pacientes.</template>
-                        </div>
-                        <button class="mt-act-btn mt-act-btn--primary" @click="abrirCriar">
-                            <i class="pi pi-plus" /><span>Nova tag</span>
-                        </button>
-                    </div>
-
-                    <div
-                        v-for="t in tagsFiltradas"
-                        v-else
-                        :key="t.id"
-                        class="mt-card"
-                        :class="{ 'is-padrao': t.is_padrao }"
-                        @click="abrirEditar(t)"
-                    >
-                        <span class="mt-card__dot" :style="{ background: t.cor || '#64748b' }" />
-                        <div class="mt-card__main">
-                            <div class="mt-card__name-row">
-                                <span class="mt-card__name">{{ t.nome }}</span>
-                                <span v-if="t.is_padrao" class="mt-card__badge">Padrão</span>
-                            </div>
-                            <div class="mt-card__meta">
-                                <span><i class="pi pi-users" /> {{ t.pacientes_count }} {{ t.pacientes_count === 1 ? 'paciente' : 'pacientes' }}</span>
-                            </div>
-                        </div>
-                        <div class="mt-card__actions" @click.stop>
-                            <button
-                                v-if="!t.is_padrao"
-                                class="mt-card__btn"
-                                v-tooltip.left="'Editar'"
-                                @click="abrirEditar(t)"
-                            >
-                                <i class="pi pi-pencil" />
-                            </button>
-                            <button
-                                v-if="!t.is_padrao"
-                                class="mt-card__btn mt-card__btn--danger"
-                                v-tooltip.left="'Excluir'"
-                                @click="confirmarExcluir(t)"
-                            >
-                                <i class="pi pi-trash" />
-                            </button>
+                            <template v-if="busca || tipoFilter || usoFilter">
+                                Ajuste os filtros pra ver mais resultados.
+                            </template>
+                            <template v-else>
+                                Crie sua primeira tag pra organizar pacientes.
+                            </template>
                         </div>
                     </div>
+                    <div v-else class="mt-grid">
+                        <div
+                            v-for="t in pagedItems"
+                            :key="t.id"
+                            class="mt-grid__card"
+                            :class="rowStatusClass(t)"
+                            role="button"
+                            tabindex="0"
+                            @click="abrirEditar(t)"
+                            @keydown.enter.prevent="abrirEditar(t)"
+                            @keydown.space.prevent="abrirEditar(t)"
+                        >
+                            <div class="mt-grid__top">
+                                <span class="mt-grid__dot" :style="{ background: t.cor || '#64748b' }" />
+                                <span v-if="t.is_padrao" class="mt-row__badge mt-row__badge--padrao">
+                                    <i class="pi pi-shield" /> Padrão
+                                </span>
+                            </div>
+                            <div class="mt-grid__name">{{ t.nome }}</div>
+                            <div class="mt-grid__meta" @click.stop>
+                                <button
+                                    type="button"
+                                    class="mt-row__count-btn"
+                                    :class="{ 'is-empty': t.pacientes_count === 0 }"
+                                    :disabled="t.pacientes_count === 0"
+                                    v-tooltip.top="t.pacientes_count > 0 ? 'Ver pacientes da tag' : 'Sem pacientes vinculados'"
+                                    aria-label="Ver pacientes da tag"
+                                    @click.stop="openTagPatientsModal(t)"
+                                >
+                                    <i class="pi pi-users" />
+                                    <span>
+                                        {{ t.pacientes_count }}
+                                        {{ t.pacientes_count === 1 ? 'paciente' : 'pacientes' }}
+                                    </span>
+                                </button>
+                            </div>
+                            <div class="mt-grid__footer" @click.stop>
+                                <button
+                                    v-if="!t.is_padrao"
+                                    class="mt-row__btn"
+                                    v-tooltip.top="'Editar'"
+                                    aria-label="Editar"
+                                    @click.stop="abrirEditar(t)"
+                                >
+                                    <i class="pi pi-pencil" />
+                                </button>
+                                <button
+                                    v-if="!t.is_padrao"
+                                    class="mt-row__btn mt-row__btn--danger"
+                                    v-tooltip.top="'Excluir'"
+                                    aria-label="Excluir"
+                                    @click.stop="confirmarExcluir(t)"
+                                >
+                                    <i class="pi pi-trash" />
+                                </button>
+                                <span v-else class="mt-row__locked" v-tooltip.top="'Tag padrão (bloqueada)'">
+                                    <i class="pi pi-lock" />
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                    <Paginator
+                        v-if="filtered.length > 0"
+                        class="mt-paginator"
+                        :rows="rowsMT"
+                        :totalRecords="filtered.length"
+                        :first="firstMT"
+                        :rowsPerPageOptions="PAGE_SIZE_OPTIONS"
+                        template="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+                        currentPageReportTemplate="{first}–{last} de {totalRecords}"
+                        @page="onPage"
+                    />
                 </div>
             </div>
         </div>
 
-        <!-- Dialog create/edit -->
+        <!-- Dialog: criar/editar tag — pattern espelhado do
+             PatientsCadastroPage Identidade (FloatLabel + IconField +
+             variant="filled" + section dividers uppercase). -->
         <Dialog
             v-model:visible="dlgOpen"
             modal
             dismissable-mask
-            :style="{ width: '380px', maxWidth: '92vw' }"
+            :draggable="false"
+            :style="{ width: '480px', maxWidth: '94vw' }"
             :header="dlgMode === 'create' ? 'Nova tag' : 'Editar tag'"
         >
-            <div class="flex flex-col gap-3">
-                <label class="text-xs text-[var(--text-color-secondary)]">
-                    Nome
-                    <InputText v-model="dlgForm.nome" placeholder="Ex: TDAH, VIP, Convênio…" class="w-full mt-1" autofocus @keydown.enter="salvar" />
-                </label>
-                <label class="text-xs text-[var(--text-color-secondary)]">
-                    Cor
-                    <input v-model="dlgForm.cor" type="color" class="w-full h-9 mt-1 rounded-md border border-[var(--surface-border)] bg-transparent cursor-pointer" />
-                </label>
-                <div class="flex flex-wrap gap-1.5">
+            <div class="p-1">
+                <!-- ── Identificação ─────────────────────────── -->
+                <div class="flex items-center gap-2 mb-5">
+                    <span class="text-[0.7rem] font-bold uppercase tracking-widest text-[var(--p-primary-color)]">
+                        Tag
+                    </span>
+                    <div class="flex-1 h-px bg-[color-mix(in_srgb,var(--p-primary-color)_25%,transparent)]" />
+                </div>
+                <div class="mb-6">
+                    <FloatLabel variant="on">
+                        <IconField>
+                            <InputIcon class="pi pi-tag" />
+                            <InputText
+                                id="tag-nome"
+                                v-model="dlgForm.nome"
+                                class="w-full"
+                                variant="filled"
+                                autofocus
+                                @keydown.enter="salvar"
+                            />
+                        </IconField>
+                        <label for="tag-nome">Nome da tag *</label>
+                    </FloatLabel>
+                </div>
+
+                <!-- ── Cor identificadora ────────────────────── -->
+                <div class="flex items-center gap-2 mb-4">
+                    <span class="text-[0.7rem] font-bold uppercase tracking-widest text-[var(--p-primary-color)]">
+                        Cor
+                    </span>
+                    <div class="flex-1 h-px bg-[color-mix(in_srgb,var(--p-primary-color)_25%,transparent)]" />
+                </div>
+                <div class="flex items-center gap-3 mb-4">
+                    <input
+                        v-model="dlgForm.cor"
+                        type="color"
+                        class="h-10 w-14 rounded-lg border border-[var(--surface-border)] bg-transparent cursor-pointer"
+                    />
+                    <span class="text-[0.82rem] font-mono text-[var(--text-color-secondary)] uppercase">
+                        {{ dlgForm.cor }}
+                    </span>
+                </div>
+                <div class="flex flex-wrap gap-2">
                     <button
                         v-for="c in PRESET_COLORS"
                         :key="c"
                         type="button"
-                        class="w-6 h-6 rounded-full border border-white/20 transition-transform hover:scale-110"
+                        class="mt-color-preset"
+                        :class="{ 'is-selected': dlgForm.cor.toLowerCase() === '#' + c }"
                         :style="{ background: '#' + c }"
+                        :aria-label="`Usar cor #${c}`"
                         @click="dlgForm.cor = '#' + c"
                     />
                 </div>
-                <div v-if="dlgError" class="text-xs text-red-400">{{ dlgError }}</div>
+
+                <small
+                    v-if="dlgError"
+                    class="mt-4 text-[0.85rem] text-red-500 flex items-center gap-1.5"
+                >
+                    <i class="pi pi-exclamation-circle text-[0.78rem]" />
+                    <span>{{ dlgError }}</span>
+                </small>
             </div>
+
             <template #footer>
-                <Button label="Cancelar" text @click="dlgOpen = false" />
-                <Button :label="saving ? 'Salvando…' : 'Salvar'" :loading="saving" :disabled="!dlgForm.nome.trim() || saving" @click="salvar" />
+                <Button
+                    label="Cancelar"
+                    severity="secondary"
+                    text
+                    :disabled="saving"
+                    @click="dlgOpen = false"
+                />
+                <Button
+                    :label="saving ? 'Salvando…' : 'Salvar'"
+                    icon="pi pi-check"
+                    :loading="saving"
+                    :disabled="!dlgForm.nome.trim() || saving"
+                    @click="salvar"
+                />
             </template>
         </Dialog>
+
+        <!-- Dialog: Pacientes da tag -->
+        <Dialog
+            v-model:visible="patientsDialog.open"
+            modal
+            dismissable-mask
+            :draggable="false"
+            :style="{ width: '720px', maxWidth: '94vw' }"
+            :pt="{
+                root: { style: `border: 2px solid ${patientsTagHex}` },
+                header: { style: `border-bottom: 1px solid ${patientsTagHex}30` },
+                pcCloseButton: { root: { class: 'mt-pdlg-close-btn' } }
+            }"
+        >
+            <template #header>
+                <div class="mt-pdlg__header">
+                    <span class="mt-pdlg__avatar" :style="{ background: patientsTagHex }">
+                        <i class="pi pi-tag" />
+                    </span>
+                    <div class="mt-pdlg__title">
+                        <div class="mt-pdlg__name" :style="{ color: patientsTagHex }">
+                            Tag — {{ patientsDialog.tag?.nome }}
+                        </div>
+                        <div class="mt-pdlg__sub">
+                            {{ patientsDialog.items.length }}
+                            paciente{{ patientsDialog.items.length !== 1 ? 's' : '' }}
+                        </div>
+                    </div>
+                </div>
+            </template>
+
+            <div class="mt-pdlg__body">
+                <div class="mt-pdlg__toolbar">
+                    <div class="mt-search mt-pdlg__search">
+                        <i class="pi pi-search mt-search__icon" />
+                        <input
+                            v-model="patientsDialog.search"
+                            type="text"
+                            placeholder="Buscar paciente…"
+                            class="mt-search__input"
+                            :disabled="patientsDialog.loading"
+                        />
+                        <button
+                            v-if="patientsDialog.search"
+                            class="mt-search__clear"
+                            v-tooltip.bottom="'Limpar busca'"
+                            @click="patientsDialog.search = ''"
+                        >
+                            <i class="pi pi-times" />
+                        </button>
+                    </div>
+                    <span
+                        v-if="!patientsDialog.loading"
+                        class="mt-pdlg__count-pill"
+                        :style="{ background: `${patientsTagHex}18`, color: patientsTagHex }"
+                    >
+                        {{ patientsDialog.items.length }}
+                        {{ patientsDialog.items.length === 1 ? 'paciente' : 'pacientes' }}
+                    </span>
+                </div>
+
+                <div
+                    v-if="patientsDialog.loading"
+                    class="mt-pdlg__loading"
+                    :style="{ color: patientsTagHex }"
+                >
+                    <i class="pi pi-spin pi-spinner" />
+                    <span>Carregando pacientes…</span>
+                </div>
+
+                <div v-else-if="patientsDialog.error" class="mt-pdlg__error">
+                    <i class="pi pi-exclamation-triangle" />
+                    <span>{{ patientsDialog.error }}</span>
+                </div>
+
+                <div v-else-if="patientsDialog.items.length === 0" class="mt-pdlg__empty">
+                    <div
+                        class="mt-pdlg__empty-icon"
+                        :style="{ background: `${patientsTagHex}18`, color: patientsTagHex }"
+                    >
+                        <i class="pi pi-users" />
+                    </div>
+                    <div class="mt-pdlg__empty-title">Nenhum paciente com esta tag</div>
+                    <div class="mt-pdlg__empty-hint">
+                        Aplique a tag a pacientes na página de pacientes.
+                    </div>
+                </div>
+
+                <DataTable
+                    v-else
+                    :value="patientsDialogFiltered"
+                    dataKey="id"
+                    paginator
+                    :rows="8"
+                    :rowsPerPageOptions="[8, 15, 30]"
+                    paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+                    currentPageReportTemplate="{first}–{last} de {totalRecords}"
+                    stripedRows
+                    responsiveLayout="scroll"
+                    class="mt-pdlg__table"
+                >
+                    <Column header="Paciente" sortable>
+                        <template #body="{ data }">
+                            <div class="mt-pdlg__patient">
+                                <span
+                                    class="mt-pdlg__avatar mt-pdlg__avatar--sm"
+                                    :style="data.avatar_url ? null : { background: `${patientsTagHex}25`, color: patientsTagHex }"
+                                >
+                                    <img v-if="data.avatar_url" :src="data.avatar_url" :alt="data.full_name" />
+                                    <span v-else>{{ initials(data.full_name) }}</span>
+                                </span>
+                                <div class="mt-pdlg__patient-text">
+                                    <span class="mt-pdlg__patient-name">{{ data.full_name }}</span>
+                                    <span class="mt-pdlg__patient-email">{{ data.email || '—' }}</span>
+                                </div>
+                            </div>
+                        </template>
+                    </Column>
+
+                    <Column header="Telefone" style="min-width: 11rem">
+                        <template #body="{ data }">
+                            <span class="mt-pdlg__phone">{{ fmtPhone(data.phone) }}</span>
+                        </template>
+                    </Column>
+
+                    <Column header="" style="width: 7rem">
+                        <template #body="{ data }">
+                            <button
+                                type="button"
+                                class="mt-pdlg__open-btn"
+                                :style="{ borderColor: patientsTagHex, color: patientsTagHex }"
+                                v-tooltip.left="'Abrir prontuário'"
+                                aria-label="Abrir prontuário do paciente"
+                                @click="abrirPaciente(data)"
+                            >
+                                <i class="pi pi-external-link" />
+                                <span>Abrir</span>
+                            </button>
+                        </template>
+                    </Column>
+
+                    <template #empty>
+                        <div class="mt-pdlg__empty">
+                            <i class="pi pi-search mt-pdlg__empty-icon-pi" />
+                            <div class="mt-pdlg__empty-title">Nenhum resultado</div>
+                            <div class="mt-pdlg__empty-hint">
+                                Nenhum paciente corresponde à busca.
+                            </div>
+                            <button
+                                class="mt-pdlg__inline-clear-btn"
+                                @click="patientsDialog.search = ''"
+                            >
+                                <i class="pi pi-filter-slash" />
+                                <span>Limpar busca</span>
+                            </button>
+                        </div>
+                    </template>
+                </DataTable>
+            </div>
+        </Dialog>
+
+        <PatientCadastroDialog v-model="editPatientDialog" :patient-id="editPatientId" />
     </section>
 </template>
 
 <style scoped>
+/* ─── Page chrome ─── */
 .mt-page {
     position: absolute;
     inset: 6px 6px calc(var(--m-dock-h, 76px) + 6px) 6px;
@@ -447,6 +1094,10 @@ onBeforeUnmount(() => {
     font-size: 1rem;
     font-weight: 500;
 }
+.mt-page__title-icon {
+    color: var(--p-primary-color);
+    font-size: 1.05rem;
+}
 .mt-page__title > span:not(.mt-page__count) {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -461,15 +1112,9 @@ onBeforeUnmount(() => {
     padding: 2px 8px;
     border-radius: 999px;
 }
-.mt-page__actions {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    flex-shrink: 0;
-}
+.mt-page__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
 
-.mt-close,
-.mt-head-btn {
+.mt-close, .mt-head-btn {
     width: 32px; height: 32px;
     display: grid; place-items: center;
     background: var(--m-bg-soft);
@@ -495,15 +1140,21 @@ onBeforeUnmount(() => {
     font-size: 0.78rem;
     font-weight: 600;
     transition: background-color 140ms ease, transform 140ms ease;
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border);
+    color: var(--m-text);
+}
+.mt-act-btn--primary {
     background: var(--m-accent);
-    border: 1px solid var(--m-accent);
+    border-color: var(--m-accent);
     color: white;
 }
-.mt-act-btn:hover {
+.mt-act-btn--primary:hover {
     background: color-mix(in srgb, var(--m-accent) 88%, white);
     transform: translateY(-1px);
 }
 .mt-act-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
+.mt-act-btn > i { font-size: 0.78rem; }
 
 .mt-menu-btn {
     display: none;
@@ -527,43 +1178,141 @@ onBeforeUnmount(() => {
     transform: translateY(-1px);
 }
 
+.mt-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;
+}
+.mt-subheader__icon {
+    color: var(--p-primary-color);
+    font-size: 0.92rem;
+    flex-shrink: 0;
+    margin-top: 1px;
+}
+.mt-subheader__text { flex: 1; min-width: 0; }
+.mt-subheader__text strong { color: var(--m-text); font-weight: 600; }
+
 .mt-body {
     flex: 1;
     display: flex;
     min-height: 0;
-    gap: 12px;
-    padding: 12px;
+    gap: 0;
+    padding: 0;
 }
 
+/* ─── Sidebar ─── */
 .mt-side {
     width: 280px;
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
-    gap: 12px;
-    overflow-y: auto;
+    background: var(--m-bg-soft);
+    border-right: 1px solid var(--m-border);
+    overflow: hidden;
 }
-.mt-side::-webkit-scrollbar { width: 5px; }
-.mt-side::-webkit-scrollbar-thumb {
+.mt-side__scroll {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+}
+.mt-side__scroll::-webkit-scrollbar { width: 5px; }
+.mt-side__scroll::-webkit-scrollbar-thumb {
     background: var(--m-border-strong);
     border-radius: 3px;
 }
 
-.mt-w {
+.mt-side__footer {
+    flex-shrink: 0;
+    padding: 12px;
     background: var(--m-bg-soft);
+    border-top: 1px solid var(--m-border);
+}
+.mt-side__clear-all {
+    width: 100%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 9px 12px;
+    background: var(--m-bg-medium);
+    border: 1px solid var(--m-border);
+    color: var(--m-text);
+    border-radius: 10px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.78rem;
+    font-weight: 600;
+    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
+}
+.mt-side__clear-all:hover {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+    color: var(--m-text);
+}
+.mt-side__clear-all > i {
+    font-size: 0.78rem;
+    color: var(--m-text-muted);
+    transition: color 140ms ease;
+}
+.mt-side__clear-all:hover > i { color: var(--m-text); }
+
+.mt-side__clear-inline {
+    width: 18px;
+    height: 18px;
+    display: grid;
+    place-items: center;
+    background: transparent;
+    border: 1px solid color-mix(in srgb, rgb(220, 38, 38) 30%, var(--m-border));
+    color: rgb(220, 38, 38);
+    border-radius: 4px;
+    cursor: pointer;
+    font-family: inherit;
+    transition: background-color 140ms ease, border-color 140ms ease;
+}
+.mt-side__clear-inline:hover {
+    background: rgba(220, 38, 38, 0.10);
+    border-color: rgba(220, 38, 38, 0.55);
+}
+.mt-side__clear-inline > i { font-size: 0.6rem; }
+
+.mt-w {
+    background: var(--m-bg-medium);
     border: 1px solid var(--m-border);
     border-radius: 12px;
     padding: 12px;
 }
-.mt-w__head { margin-bottom: 10px; }
+.mt-w--side {
+    margin: 12px 12px 0;
+    flex-shrink: 0;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+}
+.mt-w--side:last-of-type { margin-bottom: 12px; }
+.mt-w__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+}
 .mt-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;
 }
-.mt-w__title > i { color: var(--m-text-muted); font-size: 0.78rem; }
+.mt-w__title > i { color: var(--m-text-muted); font-size: 0.7rem; }
 
 .mt-stats {
     display: grid;
@@ -571,7 +1320,7 @@ onBeforeUnmount(() => {
     gap: 6px;
 }
 .mt-stat {
-    background: var(--m-bg-medium);
+    background: var(--m-bg-soft);
     border: 1px solid var(--m-border);
     border-radius: 10px;
     padding: 8px 10px;
@@ -588,135 +1337,665 @@ onBeforeUnmount(() => {
     text-transform: uppercase;
     letter-spacing: 0.06em;
 }
-.mt-stat.is-ok .mt-stat__val { color: rgb(74, 222, 128); }
+.mt-stat.is-ok .mt-stat__val     { color: rgb(22, 163, 74); }
+.mt-stat.is-info .mt-stat__val   { color: rgb(37, 99, 235); }
+.mt-stat.is-accent .mt-stat__val { color: var(--m-accent); }
 
+/* ─── Filter buttons ─── */
+.mt-side__list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+.mt-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;
+}
+.mt-side__item > i {
+    font-size: 0.78rem;
+    width: 14px;
+    text-align: center;
+}
+
+/* Tipo: Padrão = blue-600, Minhas = accent */
+.mt-side__item.is-tipo-padrao {
+    background: rgba(37, 99, 235, 0.05);
+    border-color: rgba(37, 99, 235, 0.18);
+}
+.mt-side__item.is-tipo-padrao > i { color: rgb(37, 99, 235); }
+.mt-side__item.is-tipo-padrao:hover {
+    background: rgba(37, 99, 235, 0.10);
+    border-color: rgba(37, 99, 235, 0.30);
+}
+.mt-side__item.is-active.is-tipo-padrao {
+    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);
+}
+
+.mt-side__item.is-tipo-mine {
+    background: color-mix(in srgb, var(--m-accent) 5%, transparent);
+    border-color: color-mix(in srgb, var(--m-accent) 18%, transparent);
+}
+.mt-side__item.is-tipo-mine > i { color: var(--m-accent); }
+.mt-side__item.is-tipo-mine:hover {
+    background: color-mix(in srgb, var(--m-accent) 10%, transparent);
+    border-color: color-mix(in srgb, var(--m-accent) 30%, transparent);
+}
+.mt-side__item.is-active.is-tipo-mine {
+    background: color-mix(in srgb, var(--m-accent) 16%, transparent);
+    border-color: color-mix(in srgb, var(--m-accent) 55%, transparent);
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--m-accent) 35%, transparent);
+}
+
+/* Uso: Em uso = green-600, Vazio = amber-600 */
+.mt-side__item.is-uso-em_uso {
+    background: rgba(22, 163, 74, 0.05);
+    border-color: rgba(22, 163, 74, 0.18);
+}
+.mt-side__item.is-uso-em_uso > i { color: rgb(22, 163, 74); }
+.mt-side__item.is-uso-em_uso:hover {
+    background: rgba(22, 163, 74, 0.10);
+    border-color: rgba(22, 163, 74, 0.30);
+}
+.mt-side__item.is-active.is-uso-em_uso {
+    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);
+}
+
+.mt-side__item.is-uso-vazio {
+    background: rgba(217, 119, 6, 0.05);
+    border-color: rgba(217, 119, 6, 0.18);
+}
+.mt-side__item.is-uso-vazio > i { color: rgb(217, 119, 6); }
+.mt-side__item.is-uso-vazio:hover {
+    background: rgba(217, 119, 6, 0.10);
+    border-color: rgba(217, 119, 6, 0.30);
+}
+.mt-side__item.is-active.is-uso-vazio {
+    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);
+}
+
+/* Transition do footer "Limpar filtros" */
+.mt-clear-enter-active,
+.mt-clear-leave-active {
+    transition: opacity 220ms ease, transform 220ms ease, max-height 240ms ease;
+    overflow: hidden;
+}
+.mt-clear-enter-from,
+.mt-clear-leave-to {
+    opacity: 0;
+    transform: translateY(6px);
+    max-height: 0;
+}
+.mt-clear-enter-to,
+.mt-clear-leave-from {
+    opacity: 1;
+    transform: translateY(0);
+    max-height: 80px;
+}
+
+/* ─── Main column ─── */
+.mt-main {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    padding: 12px;
+    gap: 10px;
+}
+
+.mt-toolbar {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.mt-search {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+}
+.mt-search__icon {
+    position: absolute;
+    left: 12px;
+    color: var(--m-text-muted);
+    font-size: 0.78rem;
+    pointer-events: none;
+}
 .mt-search__input {
     width: 100%;
     background: var(--m-bg-medium);
     border: 1px solid var(--m-border);
     color: var(--m-text);
-    padding: 8px 12px;
-    border-radius: 9px;
-    font-size: 0.82rem;
+    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;
 }
+.mt-search__input::placeholder { color: var(--m-text-faint); }
 .mt-search__input:focus {
     border-color: var(--m-border-strong);
+    background: var(--m-bg-medium);
 }
+.mt-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;
+}
+.mt-search__clear:hover {
+    background: var(--m-bg-soft-hover);
+    color: var(--m-text);
+}
+.mt-search__clear > i { font-size: 0.7rem; }
 
-.mt-main {
+.mt-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;
+}
+.mt-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;
+}
+.mt-view-toggle__btn:hover {
+    background: var(--m-bg-soft-hover);
+    color: var(--m-text);
+}
+.mt-view-toggle__btn.is-active {
+    background: var(--m-accent-soft);
+    color: var(--m-accent);
+}
+.mt-view-toggle__btn > i { font-size: 0.85rem; }
+
+/* ─── DataTable ─── */
+.mt-table {
     flex: 1;
-    min-width: 0;
+    min-height: 0;
     display: flex;
     flex-direction: column;
 }
-.mt-list {
+.mt-table :deep(.p-datatable) {
     flex: 1;
-    overflow-y: auto;
-    padding: 0 4px 4px;
+    min-height: 0;
     display: flex;
     flex-direction: column;
+    background: transparent;
+    border: 1px solid var(--m-border);
+    border-radius: 10px;
+    overflow: hidden;
+}
+.mt-table :deep(.p-datatable-table-container) {
+    flex: 1;
+    min-height: 0;
+    background: transparent;
+}
+.mt-table :deep(.p-datatable-thead),
+.mt-table :deep(.p-datatable-thead > tr) {
+    background: transparent !important;
+}
+.mt-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);
+}
+.mt-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);
+}
+.mt-table :deep(.p-datatable-tbody > tr > td) {
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--m-border);
+    background: transparent;
+    vertical-align: middle;
+}
+.mt-table :deep(.p-datatable-tbody > tr:hover) {
+    background: var(--m-bg-soft-hover);
+}
+.mt-table :deep(.p-datatable-tbody > tr.p-datatable-row-selected) {
+    background: var(--m-accent-soft);
+}
+.mt-table :deep(.p-datatable-tbody > tr.is-padrao)  { border-left-color: rgb(37, 99, 235); cursor: default; }
+.mt-table :deep(.p-datatable-tbody > tr.is-em-uso)  { border-left-color: rgb(22, 163, 74); }
+.mt-table :deep(.p-datatable-tbody > tr.is-vazio)   { border-left-color: var(--m-border-strong); }
+
+.mt-table :deep(.p-datatable-loading-overlay) {
+    background: color-mix(in srgb, var(--m-bg-medium) 70%, transparent);
+    backdrop-filter: blur(2px);
+}
+.mt-table__loading {
+    display: inline-flex;
+    align-items: center;
     gap: 8px;
-}
-.mt-list::-webkit-scrollbar { width: 5px; }
-.mt-list::-webkit-scrollbar-thumb {
-    background: var(--m-border-strong);
-    border-radius: 3px;
+    color: var(--m-text);
+    font-size: 0.85rem;
 }
 
-.mt-card {
+.mt-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;
+}
+.mt-table :deep(.p-paginator-current) {
+    color: var(--m-text-muted);
+    font-size: 0.78rem;
+    background: transparent;
+    border: none;
+    padding: 0 6px;
+}
+.mt-table :deep(.p-paginator-first),
+.mt-table :deep(.p-paginator-prev),
+.mt-table :deep(.p-paginator-next),
+.mt-table :deep(.p-paginator-last),
+.mt-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;
+}
+.mt-table :deep(.p-paginator-page.p-paginator-page-selected) {
+    background: var(--m-accent-soft);
+    border-color: var(--m-accent-strong);
+    color: var(--m-accent);
+}
+.mt-table :deep(.p-paginator-first:not(.p-disabled):hover),
+.mt-table :deep(.p-paginator-prev:not(.p-disabled):hover),
+.mt-table :deep(.p-paginator-next:not(.p-disabled):hover),
+.mt-table :deep(.p-paginator-last:not(.p-disabled):hover),
+.mt-table :deep(.p-paginator-page:not(.p-paginator-page-selected):hover) {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+}
+.mt-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;
+}
+.mt-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;
+}
+
+.mt-table :deep(td.p-datatable-frozen-column),
+.mt-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;
+}
+.mt-table :deep(.p-datatable-tbody > tr:hover td.p-datatable-frozen-column) {
+    background: var(--m-bg-soft-hover);
+}
+.mt-table :deep(.p-datatable-tbody > tr.p-datatable-row-selected td.p-datatable-frozen-column) {
+    background: var(--m-accent-soft);
+}
+
+/* ─── Row content (design preservado) ─── */
+.mt-row__tag {
     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;
+    min-width: 0;
 }
-.mt-card:hover {
-    background: var(--m-bg-soft-hover);
-    border-color: var(--m-border-strong);
-    transform: translateY(-1px);
-}
-.mt-card.is-padrao { cursor: default; }
-.mt-card.is-padrao:hover { transform: none; }
-.mt-card--skeleton { cursor: default; pointer-events: none; opacity: 0.95; }
-.mt-card--skeleton:hover { background: var(--m-bg-soft); transform: none; }
-
-.mt-card__dot {
-    width: 16px; height: 16px;
+.mt-row__dot {
+    width: 16px;
+    height: 16px;
     border-radius: 50%;
     flex-shrink: 0;
     border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--p-content-background) 60%, transparent);
 }
-.mt-card__main {
+.mt-row__main {
     flex: 1;
     min-width: 0;
     display: flex;
     flex-direction: column;
     gap: 2px;
 }
-.mt-card__name-row {
+.mt-row__name-row {
     display: flex;
     align-items: center;
     gap: 8px;
+    flex-wrap: wrap;
 }
-.mt-card__name {
+.mt-row__name {
     font-size: 0.92rem;
     font-weight: 600;
+    color: var(--m-text);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-.mt-card__badge {
+
+.mt-row__badge {
     display: inline-flex;
     align-items: center;
+    gap: 4px;
     font-size: 0.62rem;
     font-weight: 600;
     padding: 2px 8px;
     border-radius: 999px;
-    background: var(--m-bg-medium);
-    border: 1px solid var(--m-border);
-    color: var(--m-text-muted);
     text-transform: uppercase;
     letter-spacing: 0.04em;
-}
-.mt-card__meta {
-    font-size: 0.7rem;
-    color: var(--m-text-muted);
-    display: flex;
-    gap: 12px;
-}
-.mt-card__meta i { margin-right: 4px; }
-
-.mt-card__actions {
-    display: flex;
-    gap: 4px;
+    border: 1px solid;
     flex-shrink: 0;
 }
-.mt-card__btn {
-    width: 28px; height: 28px;
-    display: grid; place-items: center;
+.mt-row__badge--padrao {
+    color: rgb(37, 99, 235);
+    background: rgba(37, 99, 235, 0.12);
+    border-color: rgba(37, 99, 235, 0.3);
+}
+.mt-row__badge > i { font-size: 0.55rem; }
+
+/* Botão "X pacientes" clicável (lista + grid) */
+.mt-row__count-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px;
     background: transparent;
+    border: 1px solid color-mix(in srgb, var(--p-primary-color) 25%, var(--m-border));
+    color: var(--p-primary-color);
+    border-radius: 999px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.78rem;
+    font-weight: 500;
+    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
+    white-space: nowrap;
+}
+.mt-row__count-btn:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--p-primary-color) 12%, transparent);
+    border-color: var(--p-primary-color);
+}
+.mt-row__count-btn:focus-visible {
+    outline: 2px solid var(--p-primary-color);
+    outline-offset: 2px;
+}
+.mt-row__count-btn.is-empty,
+.mt-row__count-btn:disabled {
+    color: var(--m-text-muted);
+    border-color: var(--m-border);
+    cursor: default;
+    background: transparent;
+}
+.mt-row__count-btn > i { font-size: 0.7rem; }
+
+.mt-row__actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 6px;
+    flex-shrink: 0;
+}
+.mt-row__btn {
+    width: 28px;
+    height: 28px;
+    display: grid;
+    place-items: center;
+    background: var(--p-content-background);
     border: 1px solid var(--m-border);
     color: var(--m-text-muted);
-    border-radius: 9px;
+    border-radius: 8px;
     cursor: pointer;
     font-family: inherit;
     transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
+    flex-shrink: 0;
 }
-.mt-card__btn:hover { background: var(--m-bg-soft-hover); color: var(--m-text); }
-.mt-card__btn--danger:hover {
-    background: rgba(239, 68, 68, 0.15);
-    border-color: rgba(239, 68, 68, 0.4);
-    color: rgb(248, 113, 113);
+.mt-row__btn: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);
 }
-.mt-card__btn > i { font-size: 0.7rem; }
+.mt-row__btn--danger:hover {
+    background: rgba(220, 38, 38, 0.12);
+    border-color: rgba(220, 38, 38, 0.5);
+    color: rgb(220, 38, 38);
+}
+.mt-row__btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.mt-row__btn > i { font-size: 0.7rem; }
 
+.mt-row__locked {
+    width: 28px;
+    height: 28px;
+    display: grid;
+    place-items: center;
+    color: var(--m-text-faint);
+    font-size: 0.7rem;
+}
+
+/* ─── Grid view ─── */
+.mt-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;
+}
+.mt-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;
+}
+.mt-grid::-webkit-scrollbar { width: 5px; }
+.mt-grid::-webkit-scrollbar-thumb { background: var(--m-border-strong); border-radius: 3px; }
+.mt-grid__loading {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 32px;
+}
+.mt-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;
+}
+.mt-grid__card:hover {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+    transform: translateY(-1px);
+}
+.mt-grid__card:focus-visible {
+    outline: 2px solid var(--p-primary-color);
+    outline-offset: 2px;
+}
+.mt-grid__card.is-padrao  { border-left-color: rgb(37, 99, 235); cursor: default; }
+.mt-grid__card.is-padrao:hover { transform: none; }
+.mt-grid__card.is-em-uso  { border-left-color: rgb(22, 163, 74); }
+.mt-grid__card.is-vazio   { border-left-color: var(--m-border-strong); }
+
+.mt-grid__top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+}
+.mt-grid__dot {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    flex-shrink: 0;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+}
+.mt-grid__name {
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: var(--m-text);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mt-grid__meta {
+    margin-top: auto;
+    padding-top: 4px;
+}
+.mt-grid__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 6px;
+    border-top: 1px solid var(--m-border);
+    padding-top: 8px;
+    margin-top: 4px;
+    min-height: 36px;
+}
+
+/* Paginator standalone (grid) */
+.mt-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;
+}
+.mt-paginator.p-paginator .p-paginator-current {
+    color: var(--m-text-muted);
+    font-size: 0.78rem;
+    background: transparent;
+    border: none;
+    padding: 0 6px;
+}
+.mt-paginator.p-paginator .p-paginator-first,
+.mt-paginator.p-paginator .p-paginator-prev,
+.mt-paginator.p-paginator .p-paginator-next,
+.mt-paginator.p-paginator .p-paginator-last,
+.mt-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;
+}
+.mt-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);
+}
+.mt-paginator.p-paginator .p-paginator-first:not(.p-disabled):hover,
+.mt-paginator.p-paginator .p-paginator-prev:not(.p-disabled):hover,
+.mt-paginator.p-paginator .p-paginator-next:not(.p-disabled):hover,
+.mt-paginator.p-paginator .p-paginator-last:not(.p-disabled):hover,
+.mt-paginator.p-paginator .p-paginator-page:not(.p-paginator-page-selected):hover {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+}
+.mt-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;
+}
+.mt-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;
+}
+
+/* ─── Empty state ─── */
 .mt-empty {
     margin: 24px 0;
     padding: 56px 28px;
@@ -730,22 +2009,238 @@ onBeforeUnmount(() => {
     background: color-mix(in srgb, var(--m-bg-soft) 40%, transparent);
     gap: 8px;
 }
-.mt-empty__icon {
-    font-size: 2rem;
-    color: var(--m-text-faint);
-    margin-bottom: 4px;
+.mt-empty__icon { font-size: 2rem; color: var(--m-text-faint); margin-bottom: 4px; }
+.mt-empty__title { font-size: 0.92rem; font-weight: 600; color: var(--m-text); }
+.mt-empty__hint { font-size: 0.78rem; }
+.mt-empty__btn { margin-top: 8px; }
+
+/* ─── Dialog "Pacientes da tag" ─── */
+.mt-pdlg__header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
 }
-.mt-empty__title {
+.mt-pdlg__avatar {
+    width: 36px;
+    height: 36px;
+    display: grid;
+    place-items: center;
+    border-radius: 8px;
+    color: white;
+    font-weight: 700;
+    font-size: 0.95rem;
+    flex-shrink: 0;
+    overflow: hidden;
+}
+.mt-pdlg__avatar > i { color: white; font-size: 1rem; }
+.mt-pdlg__avatar--sm {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    font-size: 0.78rem;
+    border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
+}
+.mt-pdlg__avatar img { width: 100%; height: 100%; object-fit: cover; }
+.mt-pdlg__title {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+}
+.mt-pdlg__name {
+    font-size: 1rem;
+    font-weight: 700;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mt-pdlg__sub {
+    font-size: 0.72rem;
+    color: var(--m-text-muted);
+}
+
+.mt-pdlg__body {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+}
+.mt-pdlg__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+.mt-pdlg__search {
+    flex: 1;
+    min-width: 200px;
+    max-width: 320px;
+}
+.mt-pdlg__count-pill {
+    padding: 4px 10px;
+    border-radius: 999px;
+    font-size: 0.72rem;
+    font-weight: 600;
+    flex-shrink: 0;
+}
+
+.mt-pdlg__loading {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 20px;
+    font-size: 0.85rem;
+    justify-content: center;
+}
+.mt-pdlg__error {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 16px;
+    background: rgba(220, 38, 38, 0.10);
+    border: 1px solid rgba(220, 38, 38, 0.30);
+    border-radius: 8px;
+    color: rgb(220, 38, 38);
+    font-size: 0.82rem;
+}
+
+.mt-pdlg__empty {
+    padding: 36px 20px;
+    text-align: center;
+    color: var(--m-text-muted);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+}
+.mt-pdlg__empty-icon {
+    width: 48px;
+    height: 48px;
+    display: grid;
+    place-items: center;
+    border-radius: 10px;
+    margin-bottom: 8px;
+    font-size: 1.4rem;
+}
+.mt-pdlg__empty-icon-pi {
+    font-size: 1.6rem;
+    opacity: 0.4;
+    margin-bottom: 8px;
+}
+.mt-pdlg__empty-title {
     font-size: 0.92rem;
     font-weight: 600;
     color: var(--m-text);
 }
-.mt-empty__hint {
+.mt-pdlg__empty-hint { font-size: 0.78rem; }
+.mt-pdlg__inline-clear-btn {
+    margin-top: 10px;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    background: transparent;
+    border: 1px solid var(--m-border);
+    color: var(--m-text-muted);
+    border-radius: 8px;
+    cursor: pointer;
+    font-family: inherit;
     font-size: 0.78rem;
-    margin-bottom: 8px;
+    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
+}
+.mt-pdlg__inline-clear-btn:hover {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+    color: var(--m-text);
 }
 
-/* Drawer mobile */
+.mt-pdlg__table :deep(.p-datatable) {
+    background: transparent;
+    border: 1px solid var(--m-border);
+    border-radius: 10px;
+    overflow: hidden;
+}
+.mt-pdlg__table :deep(.p-datatable-thead > tr > th) {
+    background: var(--m-bg-soft) !important;
+    color: var(--m-text);
+    font-size: 0.74rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--m-border);
+}
+.mt-pdlg__table :deep(.p-datatable-tbody > tr > td) {
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--m-border);
+    background: transparent;
+    vertical-align: middle;
+}
+.mt-pdlg__table :deep(.p-datatable-tbody > tr:hover) {
+    background: var(--m-bg-soft-hover);
+}
+.mt-pdlg__table :deep(.p-paginator) {
+    background: var(--m-bg-soft);
+    border: none;
+    border-top: 1px solid var(--m-border);
+    padding: 8px 12px;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+
+.mt-pdlg__patient {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+}
+.mt-pdlg__patient-text {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+}
+.mt-pdlg__patient-name {
+    font-size: 0.88rem;
+    font-weight: 600;
+    color: var(--m-text);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mt-pdlg__patient-email {
+    font-size: 0.74rem;
+    color: var(--m-text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mt-pdlg__phone {
+    color: var(--m-text-muted);
+    font-size: 0.85rem;
+}
+.mt-pdlg__open-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    background: transparent;
+    border: 1px solid;
+    border-radius: 8px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.78rem;
+    font-weight: 600;
+    transition: background-color 140ms ease;
+}
+.mt-pdlg__open-btn:hover {
+    background: color-mix(in srgb, currentColor 12%, transparent);
+}
+.mt-pdlg__open-btn > i { font-size: 0.7rem; }
+
+/* ─── Drawer mobile ─── */
 .mt-mobile-drawer {
     position: fixed;
     top: 0; left: 0;
@@ -781,6 +2276,31 @@ onBeforeUnmount(() => {
     height: auto;
     overflow: visible;
     padding: 0;
+    background: transparent;
+    border-right: none;
+}
+.mt-mobile-drawer__scroll .mt-side__scroll {
+    flex: none;
+    min-height: 0;
+    overflow: visible;
+    display: flex;
+    flex-direction: column;
+}
+.mt-mobile-drawer__scroll .mt-side__footer {
+    position: sticky;
+    bottom: 0;
+    margin: 8px -12px -24px;
+    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;
+}
+.mt-mobile-drawer__scroll .mt-w--side {
+    margin: 0 0 12px;
+}
+.mt-mobile-drawer__scroll .mt-w--side:last-of-type {
+    margin-bottom: 0;
 }
 .mt-mobile-drawer__backdrop {
     position: fixed;
@@ -795,12 +2315,50 @@ onBeforeUnmount(() => {
 .mt-drawer-fade-enter-from,
 .mt-drawer-fade-leave-to { opacity: 0; }
 
+/* Botão X de fechar no header do dialog "Pacientes da tag" — estilo
+   igual ao .mt-close da página (32×32, bg --m-bg-soft, border). Usa
+   :global() porque o Dialog do PrimeVue é teleportado pra body, fora
+   do escopo scoped do componente. */
+:global(.mt-pdlg-close-btn) {
+    width: 32px !important;
+    height: 32px !important;
+    background: var(--m-bg-soft) !important;
+    border: 1px solid var(--m-border) !important;
+    color: var(--m-text) !important;
+    border-radius: 9px !important;
+    transition: background-color 140ms ease !important;
+}
+:global(.mt-pdlg-close-btn:hover) {
+    background: var(--m-bg-soft-hover) !important;
+}
+:global(.mt-pdlg-close-btn .p-button-icon) {
+    font-size: 0.85rem !important;
+}
+
+/* ─── Color preset (no dialog de criar/editar tag) ─── */
+.mt-color-preset {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    cursor: pointer;
+    transition: transform 140ms ease, box-shadow 140ms ease;
+}
+.mt-color-preset:hover {
+    transform: scale(1.12);
+}
+.mt-color-preset.is-selected {
+    box-shadow: 0 0 0 2px var(--p-content-background), 0 0 0 4px var(--p-primary-color);
+    transform: scale(1.08);
+}
+
+/* ─── Mobile (<1024px) ─── */
 @media (max-width: 1023px) {
-    .mt-body { flex-direction: column; padding: 8px; }
-    .mt-main { width: 100%; }
+    .mt-body { flex-direction: column; padding: 0; }
+    .mt-main { width: 100%; padding: 8px; }
     .mt-page__title > span:first-of-type { display: none; }
     .mt-menu-btn--mobile-only { display: inline-flex; }
-    .mt-act-btn span { display: none; }
-    .mt-act-btn { width: 32px; padding: 0; justify-content: center; }
+    .mt-act-btn--primary span { display: none; }
+    .mt-act-btn--primary { width: 32px; padding: 0; justify-content: center; }
 }
 </style>