From 1bcb969f72496df571b7c3272413adfcd2f9ddad Mon Sep 17 00:00:00 2001
From: Leonardo <lmnohama@gmail.com>
Date: Sun, 26 Apr 2026 08:10:53 -0300
Subject: [PATCH] =?UTF-8?q?Layout=20Melissa=20(Dire=C3=A7=C3=A3o=20B):=20p?=
 =?UTF-8?q?review,=20/profile,=20Agenda,=20dock,=20cadastro?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sandbox completo do novo layout Win11 lockscreen-style. Não troca o
AppLayout atual — Fase 5 (router wire-up) fica pra sessão dedicada.

Estrutura
- src/layout/melissa/ — MelissaLayout (bg+ψ+overlays), MelissaCronometro,
  MelissaAgenda (fullscreen), MelissaCard, MelissaMenu, MelissaBusca
- composables/useMelissaEventos.js — semana real do FC + range mensal
  pros dots do mini-cal
- composables/useMelissaPacientes.js — agora retorna created_at p/ "novo"
- melissaToques.js — toques Web Audio do término

Rota e persistência
- /preview/melissa (sem auth, sem AppLayout)
- /account/profile ganha 3º card "Melissa" com badge "Em construção"
- bootstrapUserSettings + layout composable aceitam variant='melissa'
- Migration: CHECK constraint user_settings.layout_variant aceita 'melissa'

Light mode
- Gradiente Bloom flipa via CSS vars (--bloom-c1/c2/base-1/base-2)
  Dark: 400/300/950 · Light: 200/100/0
- Cronômetro/Personalização: color: white → var(--m-text)
- Pílula psi-kbd ganha tokens --m-kbd-bg/--m-kbd-text
- Override mapeia text-X-200/300/400 → text-X-600 (17 cores Tailwind)

Agenda fullscreen
- Mini-cal funcional: click pula FC, range visível destacado, dots reais
- Feriados nacional/municipal/personalizado (rose/amber/violet)
- Dias fechados (workRules) cinza apagado, mutex feriado vence
- Card "Hoje" (stats+sessões) mesclado e movido pra sidebar esquerda
- ProximosFeriadosCard reaproveitado entre mini-cal e Hoje
- Avatar paciente: bg --m-accent-strong → --m-accent (saturado em light)
- Cores light: 12 substituições color:white → var(--m-text)

Dock taskbar Win11-style
- .melissa-dock 76px fixed bottom (CSS global, não scoped — Vue static
  hoisting perderia data-v-{hash})
- ψ centralizado vertical na faixa (bottom:10px)
- Chip cronômetro teleportado pro dock + animação minimize macOS
  (dialog encolhe + voa pro canto bottom-left, 340ms cubic-bezier)
- transform-origin: 96px calc(100% - 38px) (posição do chip no dock)

Pacientes na sidebar
- Botão fake "+" no topo abre PatientCreatePopover (rápido/completo/link)
- Reaproveita PatientCadastroDialog + ComponentCadastroRapido
- Pacientes criados nos últimos 7d sobem pro topo + badge "novo"

Dock contextual (ações do paciente selecionado)
- Avatar + nome + count + 5 ações (sessões/whatsapp/prontuário/editar/fechar)
- Teleportado pro .melissa-dock quando há paciente selecionado
- Em mobile, ações vivem em <Menu> kebab por linha
- Pattern <Transition><Teleport v-if> obrigatório (NUNCA o contrário)
  pra evitar comment placeholder + emitsOptions:null no reconciler

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .gitignore                                    |    3 +
 ...1_user_settings_layout_variant_melissa.sql |   22 +
 src/app/bootstrapUserSettings.js              |    8 +-
 src/layout/composables/layout.js              |    8 +-
 src/layout/melissa/MelissaAgenda.vue          | 1862 +++++++++++++++
 src/layout/melissa/MelissaBusca.vue           |  427 ++++
 src/layout/melissa/MelissaCard.vue            |  175 ++
 src/layout/melissa/MelissaCronometro.vue      |  620 +++++
 src/layout/melissa/MelissaLayout.vue          | 2106 +++++++++++++++++
 src/layout/melissa/MelissaMenu.vue            | 1042 ++++++++
 .../melissa/composables/useMelissaEventos.js  |  212 ++
 .../composables/useMelissaPacientes.js        |  107 +
 src/layout/melissa/melissaToques.js           |  116 +
 src/router/routes.misc.js                     |    8 +
 src/views/pages/account/ProfilePage.vue       |  120 +-
 15 files changed, 6828 insertions(+), 8 deletions(-)
 create mode 100644 database-novo/migrations/20260425000001_user_settings_layout_variant_melissa.sql
 create mode 100644 src/layout/melissa/MelissaAgenda.vue
 create mode 100644 src/layout/melissa/MelissaBusca.vue
 create mode 100644 src/layout/melissa/MelissaCard.vue
 create mode 100644 src/layout/melissa/MelissaCronometro.vue
 create mode 100644 src/layout/melissa/MelissaLayout.vue
 create mode 100644 src/layout/melissa/MelissaMenu.vue
 create mode 100644 src/layout/melissa/composables/useMelissaEventos.js
 create mode 100644 src/layout/melissa/composables/useMelissaPacientes.js
 create mode 100644 src/layout/melissa/melissaToques.js

diff --git a/.gitignore b/.gitignore
index 6901089..1c7424c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,6 +27,9 @@ evolution-api/
 # Backups locais do banco — não comitar (regeneráveis via db.cjs backup)
 database-novo/backups/
 
+# Rascunhos de design locais (Melissa Direção A, etc)
+layout-scratchs/
+
 # Outputs do Playwright
 test-results/
 playwright-report/
diff --git a/database-novo/migrations/20260425000001_user_settings_layout_variant_melissa.sql b/database-novo/migrations/20260425000001_user_settings_layout_variant_melissa.sql
new file mode 100644
index 0000000..22c672e
--- /dev/null
+++ b/database-novo/migrations/20260425000001_user_settings_layout_variant_melissa.sql
@@ -0,0 +1,22 @@
+-- ==========================================================================
+-- Agencia PSI — Migracao: layout_variant aceita 'melissa'
+-- ==========================================================================
+-- O CHECK constraint user_settings_layout_variant_check restringia o valor
+-- a ('classic', 'rail'). Com a chegada do Layout Melissa (Direção B do
+-- redesign — wrapper estilo Win11 lockscreen), precisamos aceitar o valor
+-- 'melissa' tambem.
+--
+-- Wire-up real do router (troca do AppLayout pelo MelissaLayout) ainda nao
+-- foi feito (Fase 5 do roadmap Melissa) — mas a preferencia ja precisa
+-- persistir desde agora pra UI do /profile funcionar.
+-- ==========================================================================
+
+ALTER TABLE public.user_settings
+    DROP CONSTRAINT IF EXISTS user_settings_layout_variant_check;
+
+ALTER TABLE public.user_settings
+    ADD CONSTRAINT user_settings_layout_variant_check
+    CHECK (layout_variant = ANY (ARRAY['classic'::text, 'rail'::text, 'melissa'::text]));
+
+COMMENT ON COLUMN public.user_settings.layout_variant
+    IS 'classic (sidebar) | rail (mini rail + painel) | melissa (Win11 lockscreen, Beta)';
diff --git a/src/app/bootstrapUserSettings.js b/src/app/bootstrapUserSettings.js
index e504536..bc85ac3 100644
--- a/src/app/bootstrapUserSettings.js
+++ b/src/app/bootstrapUserSettings.js
@@ -105,7 +105,7 @@ export async function bootstrapUserSettings({
     const _lsV = (() => {
         try {
             const v = localStorage.getItem('layout_variant');
-            return v === 'rail' || v === 'classic' ? v : null;
+            return v === 'rail' || v === 'classic' || v === 'melissa' ? v : null;
         } catch {
             return null;
         }
@@ -114,9 +114,9 @@ export async function bootstrapUserSettings({
     if (_lsV !== null) {
         // localStorage já tem valor → aplica ele (garante coerência com layoutConfig)
         if (_lsV !== (settings.layout_variant ?? _lsV)) setVariant(_lsV);
-    } else if (settings.layout_variant === 'rail') {
-        // localStorage vazio + banco tem 'rail' → aplica e grava no localStorage
-        setVariant('rail');
+    } else if (settings.layout_variant === 'rail' || settings.layout_variant === 'melissa') {
+        // localStorage vazio + banco tem 'rail'/'melissa' → aplica e grava no localStorage
+        setVariant(settings.layout_variant);
     }
     // localStorage vazio + banco tem 'classic' → mantém padrão 'rail' (não aplica)
 
diff --git a/src/layout/composables/layout.js b/src/layout/composables/layout.js
index 35ac4c3..f306545 100644
--- a/src/layout/composables/layout.js
+++ b/src/layout/composables/layout.js
@@ -20,10 +20,14 @@ import { computed, reactive, ref, onMounted, onBeforeUnmount } from 'vue';
 const BREAKPOINT_XL = 1280;
 
 // ── resolve variant salvo no localStorage ───────────────────
+// 'classic' = Sidebar lateral
+// 'rail'    = Mini rail + painel
+// 'melissa' = Layout Melissa (Direção B). Hoje só persiste a preferência —
+//             o switch real do app vem na Fase 5 (router wire-up).
 function _loadVariant() {
     try {
         const v = localStorage.getItem('layout_variant');
-        if (v === 'rail' || v === 'classic') return v;
+        if (v === 'rail' || v === 'classic' || v === 'melissa') return v;
     } catch {}
     return 'rail';
 }
@@ -199,7 +203,7 @@ export function useLayout() {
     };
 
     const setVariant = (v, { fromUser = true } = {}) => {
-        if (v !== 'classic' && v !== 'rail') return;
+        if (v !== 'classic' && v !== 'rail' && v !== 'melissa') return;
         layoutConfig.variant = v;
         try {
             localStorage.setItem('layout_variant', v);
diff --git a/src/layout/melissa/MelissaAgenda.vue b/src/layout/melissa/MelissaAgenda.vue
new file mode 100644
index 0000000..04a2b14
--- /dev/null
+++ b/src/layout/melissa/MelissaAgenda.vue
@@ -0,0 +1,1862 @@
+<script setup>
+/*
+ * MelissaAgenda — Sessão Agenda como página fullscreen dentro de Melissa
+ * --------------------------------------------------
+ * Convenção das "Melissa Pages":
+ *   - 6px de padding do viewport
+ *   - Glass container com cantos arredondados
+ *
+ * Layout (adaptado da AgendaTerapeutaPage existente):
+ *   - COL 1 — Aside esquerda (~280px): lista de pacientes (search + lista)
+ *   - COL 2 — Calendar central (flex 1): toolbar + week-view mock
+ *   - COL 3 — Widgets direita (~320px): mini-cal + stats + sessões hoje
+ *
+ * Mock visual (sem FullCalendar real). Quando integrar de verdade,
+ * trocar a área central pelo FullCalendar com tema glass.
+ */
+import { ref, computed, onMounted, watch } from 'vue';
+import FullCalendar from '@fullcalendar/vue3';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import listPlugin from '@fullcalendar/list';
+import interactionPlugin from '@fullcalendar/interaction';
+import ptBrLocale from '@fullcalendar/core/locales/pt-br';
+import { useMelissaEventosRange } from './composables/useMelissaEventos';
+import { useFeriados } from '@/composables/useFeriados';
+import { useTenantStore } from '@/stores/tenantStore';
+import { useAgendaSettings } from '@/features/agenda/composables/useAgendaSettings';
+import ProximosFeriadosCard from '@/features/agenda/components/ProximosFeriadosCard.vue';
+import PatientCreatePopover from '@/components/ui/PatientCreatePopover.vue';
+import PatientCadastroDialog from '@/components/ui/PatientCadastroDialog.vue';
+import ComponentCadastroRapido from '@/components/ComponentCadastroRapido.vue';
+import PatientProntuario from '@/features/patients/prontuario/PatientProntuario.vue';
+import { useConversationDrawerStore } from '@/stores/conversationDrawerStore';
+import { getSessionCounts } from '@/features/patients/services/patientsRepository';
+// `Menu` PrimeVue: NÃO importar explicitamente — projeto usa auto-import
+// via PrimeVueResolver (vite.config). Importar gera instâncias duplicadas
+// e causa "Cannot read properties of null (reading 'emitsOptions')"
+// quando Vue tenta reconciliar.
+
+const props = defineProps({
+    pacientes: { type: Array, default: () => [] },
+    // eventosHoje: removido — agora deriva do composable interno (semana real)
+});
+
+const emit = defineEmits(['select-evento', 'close', 'patient-created']);
+
+// ── Estado ─────────────────────────────────────────────────────
+const busca = ref('');
+const pacienteSelecionadoId = ref(null);
+const calendarView = ref('semana'); // 'dia' | 'semana' | 'mes' | 'lista'
+const refDate = ref(new Date()); // data de referência (sincronizada com o FC via datesSet)
+
+// ── Pacientes filtrados + ordenação (novos no topo) ──────────
+// Pacientes criados nas últimas NOVO_THRESHOLD_DIAS ficam no topo da lista,
+// destacados com bg primary suave. Após esse período voltam pra ordem
+// alfabética normal (já que o composable ordena por nome).
+const NOVO_THRESHOLD_DIAS = 7;
+const NOVO_THRESHOLD_MS = NOVO_THRESHOLD_DIAS * 24 * 60 * 60 * 1000;
+
+function normalize(s) {
+    return String(s || '').normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase().trim();
+}
+
+function isPacienteNovo(p) {
+    if (!p?.created_at) return false;
+    const t = new Date(p.created_at).getTime();
+    if (Number.isNaN(t)) return false;
+    return Date.now() - t < NOVO_THRESHOLD_MS;
+}
+
+const pacientesFiltrados = computed(() => {
+    const q = normalize(busca.value);
+    const base = q ? props.pacientes.filter((p) => normalize(p.nome).includes(q)) : props.pacientes;
+
+    // Particiona em novos (mais recente primeiro) + resto (ordem original alfabética)
+    const novos = [];
+    const resto = [];
+    for (const p of base) {
+        if (isPacienteNovo(p)) novos.push(p);
+        else resto.push(p);
+    }
+    novos.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
+    return [...novos, ...resto];
+});
+
+function pacienteIniciais(nome) {
+    if (!nome) return '?';
+    const partes = nome.trim().split(/\s+/);
+    if (partes.length === 1) return partes[0][0]?.toUpperCase() || '?';
+    return (partes[0][0] + partes[partes.length - 1][0]).toUpperCase();
+}
+
+function fmtUltimaSessao(iso) {
+    if (!iso) return 'Sem atendimento';
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime())) return 'Sem atendimento';
+    return `Última sessão: ${String(d.getDate()).padStart(2, '0')}/${String(d.getMonth() + 1).padStart(2, '0')}`;
+}
+
+function selecionarPaciente(id) {
+    pacienteSelecionadoId.value = pacienteSelecionadoId.value === id ? null : id;
+}
+
+// ── Calendar (FullCalendar) ───────────────────────────────────
+// View modes mapeados pra view names do FC
+const VIEW_MAP = {
+    dia: 'timeGridDay',
+    semana: 'timeGridWeek',
+    mes: 'dayGridMonth',
+    lista: 'listWeek'
+};
+
+const fcRef = ref(null);
+
+// Title visível na toolbar (atualizado pelo FC via datesSet)
+const currentTitle = ref('');
+
+// Range visível atual (passa pro composable que refetcha)
+const viewStart = ref(new Date());
+const viewEnd = ref(new Date());
+
+// Inicializa range de uma semana ao redor de hoje (FC vai sobrescrever no datesSet de mount)
+{
+    const hoje = new Date();
+    const dow = hoje.getDay();
+    const diff = dow === 0 ? -6 : 1 - dow;
+    const segunda = new Date(hoje);
+    segunda.setDate(hoje.getDate() + diff);
+    segunda.setHours(0, 0, 0, 0);
+    const domingoNext = new Date(segunda);
+    domingoNext.setDate(segunda.getDate() + 7);
+    viewStart.value = segunda;
+    viewEnd.value = domingoNext;
+    refDate.value = hoje;
+}
+
+const { eventos: eventosSemana, refetch: refetchEventosFc } = useMelissaEventosRange(viewStart, viewEnd);
+
+// Mapa eventos.dateKey → array (pra widgets de stats e sessões hoje)
+const eventosPorDia = computed(() => {
+    const map = {};
+    for (const ev of eventosSemana.value) {
+        (map[ev.dateKey] ||= []).push(ev);
+    }
+    return map;
+});
+
+function dateKey(date) {
+    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+}
+
+// FC events derivados dos eventos do composable + feriados como background.
+// feriadoFcEvents vem do useFeriados (display:'background', cor amber suave).
+// Pattern espelha AgendaTerapeutaPage:601.
+const fcEvents = computed(() => [
+    ...eventosSemana.value.map((ev) => ({
+        id: ev.id,
+        title: ev.label,
+        start: ev.inicio_em,
+        end: ev.fim_em,
+        backgroundColor: `${ev.color}26`, // ~15% opacity
+        borderColor: ev.color,
+        textColor: 'white',
+        extendedProps: ev
+    })),
+    ...feriadoFcEvents.value
+]);
+
+function escHtml(s) {
+    return String(s ?? '')
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+
+// Custom render do label de hora — matches pattern do AgendaTerapeutaPage
+function slotLabelContent(arg) {
+    const min = arg.date.getMinutes();
+    if (min === 0) {
+        const h = String(arg.date.getHours()).padStart(2, '0');
+        return { html: `<span class="mc-slot-hour">${h}:00</span>` };
+    }
+    return { html: '<span class="mc-slot-half">:30</span>' };
+}
+
+const fcOptions = computed(() => ({
+    plugins: [timeGridPlugin, dayGridPlugin, listPlugin, interactionPlugin],
+    locale: ptBrLocale,
+    headerToolbar: false, // toolbar é nossa (custom glass)
+    initialView: VIEW_MAP[calendarView.value] || 'timeGridWeek',
+    initialDate: refDate.value,
+    nowIndicator: true,
+    editable: false,        // preview: sem drag/resize ainda
+    selectable: false,      // preview: sem click-drag pra criar
+    weekends: true,
+    // Header da semana ("seg 20/04") vira link clicável → vai pra view dia.
+    // Default do FC mandaria pra dayGridDay; forçamos timeGridDay (nossa "dia").
+    navLinks: true,
+    navLinkDayClick: (date) => {
+        fcApi()?.changeView('timeGridDay', date);
+        calendarView.value = 'dia';
+    },
+    allDaySlot: false, // tira a faixa "Dia inteiro" — recupera altura
+    // Slots de 30min com label em CADA linha (08:00, :30, 09:00, :30...)
+    // Snap continua em 15min pra futura criação/drag de eventos.
+    slotMinTime: '08:00:00',
+    slotMaxTime: '20:00:00',
+    slotDuration: '00:30:00',
+    snapDuration: '00:15:00',
+    slotLabelInterval: '00:30:00',
+    slotLabelContent,
+    expandRows: true,
+    height: '100%',
+    dayMaxEvents: true,
+    eventMinHeight: 14,
+    events: fcEvents.value,
+    datesSet: (info) => {
+        viewStart.value = info.start;
+        viewEnd.value = info.end;
+        currentTitle.value = info.view?.title || '';
+        const cd = fcRef.value?.getApi?.()?.getDate?.();
+        if (cd) refDate.value = new Date(cd);
+    },
+    eventClick: (info) => {
+        const ev = info.event.extendedProps;
+        if (ev) emit('select-evento', ev);
+    },
+    eventContent: (arg) => {
+        const ext = arg.event.extendedProps || {};
+        const titulo = arg.event.title || '—';
+        const time = arg.timeText || '';
+        const meta = ext.modalidade || ext.titulo || '';
+        return {
+            html: `
+                <div class="mc-fc-event">
+                    <div class="mc-fc-event__time">${escHtml(time)}</div>
+                    <div class="mc-fc-event__title">${escHtml(titulo)}</div>
+                    ${meta ? `<div class="mc-fc-event__meta">${escHtml(meta)}</div>` : ''}
+                </div>
+            `
+        };
+    }
+}));
+
+// Toolbar — atalhos pra FC API
+function fcApi() {
+    return fcRef.value?.getApi?.() || null;
+}
+function goPrev()  { fcApi()?.prev(); }
+function goNext()  { fcApi()?.next(); }
+function goToday() { fcApi()?.today(); }
+
+function setView(v) {
+    calendarView.value = v;
+    fcApi()?.changeView(VIEW_MAP[v]);
+}
+
+function fmtHora(h) {
+    const horas = Math.floor(h);
+    const mins = Math.round((h - horas) * 60);
+    return `${String(horas).padStart(2, '0')}:${String(mins).padStart(2, '0')}`;
+}
+
+function clicarEvento(ev) {
+    emit('select-evento', ev);
+}
+
+// ── Mini-calendar (mês atual) ──────────────────────────────────
+const miniRefDate = ref(new Date());
+
+// ── Feriados (nacionais via algoritmo + municipais/personalizados via DB)
+// + Jornada semanal (workRules) pra marcar dias fechados em cinza no mini-cal.
+// Pattern espelha AgendaTerapeutaPage:113,129-134,1143.
+// IMPORTANTE: declarado APÓS miniRefDate porque o watch abaixo lê
+// miniRefDate.value durante o setup (rastreio de dependências).
+const tenantStore = useTenantStore();
+const { todos: feriadosTodos, load: loadFeriados, ano: feriadosAno, fcEvents: feriadoFcEvents } = useFeriados();
+const { workRules, load: loadAgendaSettings } = useAgendaSettings();
+
+// Set de dias da semana ativos (0=dom..6=sáb). Fallback seg-sex se sem regras
+// — mesmo default do AgendaTerapeutaPage:370.
+const workDowSet = computed(() => {
+    const ativos = workRules.value.filter((r) => r.ativo).map((r) => Number(r.dia_semana));
+    if (ativos.length > 0) return new Set(ativos);
+    return new Set([1, 2, 3, 4, 5]);
+});
+
+onMounted(() => {
+    const tid = tenantStore.activeTenantId || tenantStore.tenantId || tenantStore.tenant?.id || null;
+    if (tid) loadFeriados(tid, new Date().getFullYear());
+    // workRules é por owner_id (RLS), não precisa do tenant
+    loadAgendaSettings();
+});
+
+// Recarrega feriados quando mini-cal navega pra outro ano (municipais variam).
+// Nacionais são puro algoritmo — recomputam automático no useFeriados via `ano`.
+watch(
+    () => miniRefDate.value.getFullYear(),
+    (novoAno) => {
+        if (novoAno === feriadosAno.value) return;
+        const tid = tenantStore.activeTenantId || tenantStore.tenantId || tenantStore.tenant?.id || null;
+        if (tid) loadFeriados(tid, novoAno);
+    }
+);
+
+// Mapa dateKey → primeiro feriado do dia (raríssimo ter > 1).
+// Usado pro mini-cal aplicar cor + tooltip.
+const feriadosPorDataKey = computed(() => {
+    const map = {};
+    for (const f of feriadosTodos.value) {
+        // f.data já vem no formato 'YYYY-MM-DD' (date column do Postgres)
+        if (!map[f.data]) map[f.data] = { tipo: f.tipo, nome: f.nome };
+    }
+    return map;
+});
+
+const miniMesAno = computed(() => {
+    return miniRefDate.value
+        .toLocaleDateString('pt-BR', { month: 'long', year: 'numeric' })
+        .replace(/(^|\s)\S/g, (l) => l.toUpperCase());
+});
+
+// Range do grid do mini-cal — cobre os 42 slots (6 semanas) que aparecem
+// na grade, incluindo dias do mês anterior/próximo no padding. Assim o
+// composable de eventos cobre tudo que tá visível, não só o mês atual.
+const miniRangeStart = computed(() => {
+    const r = miniRefDate.value;
+    const primeiro = new Date(r.getFullYear(), r.getMonth(), 1);
+    const inicio = primeiro.getDay(); // 0=dom; quantos dias do mês anterior aparecem
+    const start = new Date(primeiro);
+    start.setDate(primeiro.getDate() - inicio);
+    start.setHours(0, 0, 0, 0);
+    return start;
+});
+const miniRangeEnd = computed(() => {
+    const start = miniRangeStart.value;
+    const end = new Date(start);
+    end.setDate(start.getDate() + 42); // 42 dias depois (exclusivo)
+    return end;
+});
+
+// Fetch separado pros eventos do range visível no mini-cal (≠ semana do FC).
+// Mantém o mini com dots reais mesmo navegando meses sem mexer no FC.
+const { eventos: eventosMini, refetch: refetchEventosMini } = useMelissaEventosRange(miniRangeStart, miniRangeEnd);
+
+// Tenant ID reativo — pra passar pro ProximosFeriadosCard como prop string
+// (ele aceita mas faz boot interno se vazio).
+const currentTenantId = computed(
+    () => tenantStore.activeTenantId || tenantStore.tenantId || tenantStore.tenant?.id || null
+);
+
+// Quando o card bloqueia um feriado, ele faz update em agenda_eventos
+// (status='remarcado'). Recarrega ambos os fetchs pra refletir no UI.
+function onFeriadoBloqueado() {
+    refetchEventosFc();
+    refetchEventosMini();
+}
+
+// Mapa dateKey → quantidade de eventos (cap em 3 pra render de dots)
+const eventosCountPorDiaMini = computed(() => {
+    const map = {};
+    for (const ev of eventosMini.value) {
+        map[ev.dateKey] = (map[ev.dateKey] || 0) + 1;
+    }
+    return map;
+});
+
+const miniDias = computed(() => {
+    const ref = miniRefDate.value;
+    const ano = ref.getFullYear();
+    const mes = ref.getMonth();
+    const primeiroDia = new Date(ano, mes, 1);
+    const ultimoDia = new Date(ano, mes + 1, 0);
+    const inicio = primeiroDia.getDay(); // 0=dom
+
+    const dias = workDowSet.value;
+    const arr = [];
+    // Padding antes (do mês anterior, em cinza)
+    for (let i = 0; i < inicio; i++) {
+        const d = new Date(ano, mes, -i);
+        const k = dateKey(d);
+        arr.unshift({
+            dia: d.getDate(),
+            outro: true,
+            isHoje: false,
+            fechado: !dias.has(d.getDay()),
+            count: eventosCountPorDiaMini.value[k] || 0,
+            feriado: feriadosPorDataKey.value[k] || null,
+            date: d
+        });
+    }
+    const hoje = new Date();
+    hoje.setHours(0, 0, 0, 0);
+    for (let d = 1; d <= ultimoDia.getDate(); d++) {
+        const data = new Date(ano, mes, d);
+        const k = dateKey(data);
+        const isHoje = data.getTime() === hoje.getTime();
+        arr.push({
+            dia: d,
+            outro: false,
+            isHoje,
+            fechado: !dias.has(data.getDay()),
+            count: eventosCountPorDiaMini.value[k] || 0,
+            feriado: feriadosPorDataKey.value[k] || null,
+            date: data
+        });
+    }
+    // Padding depois pra completar 6 semanas
+    while (arr.length % 7 !== 0 || arr.length < 42) {
+        const ultDia = arr[arr.length - 1].date;
+        const next = new Date(ultDia);
+        next.setDate(ultDia.getDate() + 1);
+        const k = dateKey(next);
+        arr.push({
+            dia: next.getDate(),
+            outro: true,
+            isHoje: false,
+            fechado: !dias.has(next.getDay()),
+            count: eventosCountPorDiaMini.value[k] || 0,
+            feriado: feriadosPorDataKey.value[k] || null,
+            date: next
+        });
+    }
+    return arr;
+});
+
+function miniPrev() {
+    const d = new Date(miniRefDate.value);
+    d.setMonth(d.getMonth() - 1);
+    miniRefDate.value = d;
+}
+function miniNext() {
+    const d = new Date(miniRefDate.value);
+    d.setMonth(d.getMonth() + 1);
+    miniRefDate.value = d;
+}
+
+// Click no dia do mini-cal → FC pula pra esse dia. Se o dia for de outro
+// mês (padding), atualiza miniRefDate também pra "seguir" o FC.
+function selecionarDiaMini(d) {
+    if (!d?.date) return;
+    fcApi()?.gotoDate(d.date);
+    if (d.outro) {
+        const novo = new Date(d.date);
+        novo.setDate(1);
+        miniRefDate.value = novo;
+    }
+}
+
+// Range visível atualmente no FC — pra destacar os dias correspondentes
+// no mini-cal (semana inteira em view=semana, só o dia em view=dia, etc.).
+function isInFcRange(date) {
+    if (!date) return false;
+    const t = new Date(date).setHours(0, 0, 0, 0);
+    const start = new Date(viewStart.value).setHours(0, 0, 0, 0);
+    const end = new Date(viewEnd.value).setHours(0, 0, 0, 0);
+    // viewEnd do FC é exclusivo (primeiro dia FORA do range)
+    return t >= start && t < end;
+}
+
+// Tooltip do dia no mini-cal — combina feriado + fechado + count de eventos.
+function dayTooltip(d) {
+    const partes = [];
+    if (d.feriado) partes.push(`${d.feriado.nome} (feriado)`);
+    else if (d.fechado) partes.push('Fechado');
+    if (d.count > 0) partes.push(`${d.count} evento${d.count > 1 ? 's' : ''}`);
+    return partes.join(' · ');
+}
+
+// ── Eventos de hoje (derivados dos eventos da semana) ──────
+const eventosHojeReal = computed(() => {
+    const hoje = new Date();
+    const k = dateKey(hoje);
+    return eventosPorDia.value[k] || [];
+});
+
+// ── Stats do dia (real) ────────────────────────────────────────
+const statsHoje = computed(() => {
+    const arr = eventosHojeReal.value;
+    const total = arr.length;
+    const sessoes = arr.filter((e) => e.tipo === 'sessao').length;
+    const realizadas = arr.filter((e) => /realizad/i.test(e.status)).length;
+    const faltas = arr.filter((e) => /falt/i.test(e.status)).length;
+    return [
+        { label: 'Total', value: total, cls: '' },
+        { label: 'Sessões', value: sessoes, cls: 'ok' },
+        { label: 'Realizadas', value: realizadas, cls: '' },
+        { label: 'Faltas', value: faltas, cls: 'warn' }
+    ];
+});
+
+// ── Sessões hoje (lista, ordenadas por hora) ──────────────────
+const sessoesHoje = computed(() => {
+    return [...eventosHojeReal.value].sort((a, b) => a.startH - b.startH);
+});
+
+// ── Cadastro de paciente (popover + dialogs) ──────────────────
+// Pattern espelha PatientsListPage:35-38,260-265,341-347
+const createPopoverRef = ref(null);
+const cadastroFullDialog = ref(false);
+const quickDialog = ref(false);
+const editPatientId = ref(null);
+
+function openCreatePopover(e) {
+    createPopoverRef.value?.toggle(e);
+}
+function openQuickCreate() {
+    quickDialog.value = true;
+}
+function goCreateFull() {
+    editPatientId.value = null;
+    cadastroFullDialog.value = true;
+}
+function onPatientCreated() {
+    // Avisa o parent (MelissaLayout) pra refetchar a lista de pacientes
+    emit('patient-created');
+}
+
+// ── Dock contextual + ações do paciente selecionado ───────────
+// Pattern espelha PatientsListPage (goEdit/goConversation/openProntuario).
+// Aparece no .melissa-dock via Teleport quando há paciente selecionado.
+const conversationDrawerStore = useConversationDrawerStore();
+const prontuarioOpen = ref(false);
+const prontuarioPatient = ref(null);
+const sessionCountsMap = ref(new Map()); // id → count (cache)
+
+const pacienteSelecionado = computed(() => {
+    if (!pacienteSelecionadoId.value) return null;
+    return props.pacientes.find((p) => p.id === pacienteSelecionadoId.value) || null;
+});
+
+const pacienteSelecionadoCount = computed(() => {
+    if (!pacienteSelecionadoId.value) return null;
+    return sessionCountsMap.value.get(pacienteSelecionadoId.value) ?? null;
+});
+
+// Carrega session count via RPC quando seleciona um paciente novo.
+// Cache simples — não refaz se já tem o count na memória.
+watch(pacienteSelecionadoId, async (id) => {
+    if (!id || sessionCountsMap.value.has(id)) return;
+    try {
+        const rows = await getSessionCounts([id]);
+        const r = rows?.[0];
+        sessionCountsMap.value.set(id, r?.session_count ?? 0);
+    } catch {
+        sessionCountsMap.value.set(id, 0);
+    }
+});
+
+function abrirSessoesPaciente() {
+    // MVP: vai pra view 'lista' filtrando pelo paciente — futuramente pode
+    // ser dialog dedicado de histórico. Por enquanto reaproveita FC.
+    setView('lista');
+}
+function abrirWhatsappPaciente() {
+    if (!pacienteSelecionadoId.value) return;
+    conversationDrawerStore.openForPatient(String(pacienteSelecionadoId.value));
+}
+function abrirProntuarioPaciente() {
+    const p = pacienteSelecionado.value;
+    if (!p) return;
+    prontuarioPatient.value = { ...p };
+    prontuarioOpen.value = true;
+}
+function editarPacienteSelecionado() {
+    if (!pacienteSelecionadoId.value) return;
+    editPatientId.value = String(pacienteSelecionadoId.value);
+    cadastroFullDialog.value = true;
+}
+function desselecionarPaciente() {
+    pacienteSelecionadoId.value = null;
+}
+
+// Iniciais pra avatar mini do dock (fallback quando sem foto)
+function pacienteSelecionadoIniciais() {
+    return pacienteIniciais(pacienteSelecionado.value?.nome || '');
+}
+
+// ── Mobile kebab por linha de paciente ────────────────────────
+const kebabMenu = ref(null);
+const kebabPaciente = ref(null);
+
+function toggleKebab(p, ev) {
+    ev.stopPropagation(); // não dispara o click do .ma-pat (selecionar)
+    kebabPaciente.value = p;
+    kebabMenu.value?.toggle(ev);
+}
+
+const kebabItems = computed(() => {
+    const p = kebabPaciente.value;
+    if (!p) return [];
+    return [
+        { label: 'Sessões', icon: 'pi pi-history', command: () => { pacienteSelecionadoId.value = p.id; abrirSessoesPaciente(); } },
+        { label: 'WhatsApp', icon: 'pi pi-whatsapp', command: () => conversationDrawerStore.openForPatient(String(p.id)) },
+        { label: 'Prontuário', icon: 'pi pi-file', command: () => { prontuarioPatient.value = { ...p }; prontuarioOpen.value = true; } },
+        { label: 'Editar', icon: 'pi pi-pencil', command: () => { editPatientId.value = String(p.id); cadastroFullDialog.value = true; } }
+    ];
+});
+</script>
+
+<template>
+    <section class="ma-page">
+        <header class="ma-page__head">
+            <div class="ma-page__title">
+                <i class="pi pi-calendar text-emerald-300" />
+                <span>Agenda</span>
+            </div>
+            <button class="ma-close" title="Voltar ao resumo (Esc)" @click="emit('close')">
+                <i class="pi pi-times" />
+            </button>
+        </header>
+
+        <div class="ma-body">
+            <!-- ════ COL 1: Hoje + Pacientes ════ -->
+            <aside class="ma-side">
+                <!-- Hoje (stats + lista de sessões) — movido da col 3 -->
+                <div class="ma-w ma-w--side">
+                    <div class="ma-w__head">
+                        <span class="ma-w__title"><i class="pi pi-chart-bar" /> Hoje</span>
+                        <span v-if="sessoesHoje.length > 0" class="ma-w__count">{{ sessoesHoje.length }}</span>
+                    </div>
+                    <div class="ma-stats">
+                        <div
+                            v-for="s in statsHoje"
+                            :key="s.label"
+                            class="ma-stat"
+                            :class="`is-${s.cls}`"
+                        >
+                            <div class="ma-stat__val">{{ s.value }}</div>
+                            <div class="ma-stat__lbl">{{ s.label }}</div>
+                        </div>
+                    </div>
+
+                    <div class="ma-w__divider" />
+                    <div class="ma-w__list">
+                        <button
+                            v-for="ev in sessoesHoje"
+                            :key="ev.id"
+                            class="ma-sess"
+                            :style="{ borderLeftColor: ev.color }"
+                            @click="clicarEvento(ev)"
+                        >
+                            <div class="ma-sess__time">
+                                <strong>{{ fmtHora(ev.startH) }}</strong>
+                                <span>{{ Math.round((ev.endH - ev.startH) * 60) }}min</span>
+                            </div>
+                            <div class="ma-sess__main">
+                                <div class="ma-sess__name">
+                                    {{ ev.tipo === 'sessao' ? ev.pacienteNome : ev.label }}
+                                </div>
+                                <div class="ma-sess__meta">
+                                    <span v-if="ev.modalidade">{{ ev.modalidade }}</span>
+                                    <span v-else-if="ev.local">{{ ev.local }}</span>
+                                </div>
+                            </div>
+                        </button>
+                        <div v-if="sessoesHoje.length === 0" class="ma-w__empty">
+                            <i class="pi pi-sun" />
+                            <span>Nenhuma sessão hoje</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="ma-side__head">
+                    <div class="ma-side__title">Pacientes</div>
+                    <div class="ma-side__count">{{ pacientesFiltrados.length }}</div>
+                </div>
+                <div class="ma-search">
+                    <i class="pi pi-search ma-search__icon" />
+                    <input
+                        v-model="busca"
+                        type="text"
+                        placeholder="Buscar paciente…"
+                        class="ma-search__input"
+                    />
+                </div>
+                <div class="ma-side__list">
+                    <!-- Item fake fixo "Adicionar paciente" — abre popover
+                         com 3 opções (rápido, completo, link de cadastro). -->
+                    <button
+                        class="ma-pat ma-pat--add"
+                        title="Adicionar paciente"
+                        @click="openCreatePopover($event)"
+                    >
+                        <i class="pi pi-plus" />
+                        <span>Adicionar paciente</span>
+                    </button>
+
+                    <div
+                        v-for="p in pacientesFiltrados"
+                        :key="p.id"
+                        class="ma-pat"
+                        :class="{
+                            'is-active': pacienteSelecionadoId === p.id,
+                            'is-novo': isPacienteNovo(p)
+                        }"
+                        @click="selecionarPaciente(p.id)"
+                    >
+                        <span class="ma-pat__avatar">
+                            <img v-if="p.avatar_url" :src="p.avatar_url" :alt="p.nome" />
+                            <template v-else>{{ pacienteIniciais(p.nome) }}</template>
+                        </span>
+                        <span class="ma-pat__info">
+                            <span class="ma-pat__name">{{ p.nome }}</span>
+                            <span class="ma-pat__sub">{{ fmtUltimaSessao(p.last_attended_at) }}</span>
+                        </span>
+                        <span v-if="isPacienteNovo(p)" class="ma-pat__novo">novo</span>
+                        <!-- Kebab mobile-only — esconde em desktop via CSS -->
+                        <button
+                            class="ma-pat__kebab"
+                            type="button"
+                            title="Ações"
+                            @click="toggleKebab(p, $event)"
+                        >
+                            <i class="pi pi-ellipsis-v" />
+                        </button>
+                    </div>
+                    <div v-if="pacientesFiltrados.length === 0" class="ma-side__empty">
+                        Nenhum paciente para "{{ busca.trim() }}"
+                    </div>
+                </div>
+            </aside>
+
+            <!-- ════ COL 2: Calendar central ════ -->
+            <div class="ma-cal">
+                <!-- Toolbar -->
+                <div class="ma-cal__toolbar">
+                    <div class="ma-cal__nav">
+                        <button class="ma-cal__btn" @click="goToday">Hoje</button>
+                        <button class="ma-cal__icon" title="Anterior" @click="goPrev">
+                            <i class="pi pi-chevron-left" />
+                        </button>
+                        <div class="ma-cal__period">{{ currentTitle }}</div>
+                        <button class="ma-cal__icon" title="Próximo" @click="goNext">
+                            <i class="pi pi-chevron-right" />
+                        </button>
+                    </div>
+                    <div class="ma-cal__view">
+                        <button
+                            v-for="opt in [{v:'dia',l:'Dia'},{v:'semana',l:'Semana'},{v:'mes',l:'Mês'},{v:'lista',l:'Lista'}]"
+                            :key="opt.v"
+                            class="ma-cal__view-btn"
+                            :class="{ 'is-active': calendarView === opt.v }"
+                            @click="setView(opt.v)"
+                        >
+                            {{ opt.l }}
+                        </button>
+                    </div>
+                </div>
+
+                <!-- FullCalendar — view selecionada via :key pra re-mount limpo -->
+                <div class="ma-cal__fc">
+                    <FullCalendar ref="fcRef" :key="calendarView" :options="fcOptions" />
+                </div>
+            </div>
+
+            <!-- ════ COL 3: Widgets direita ════ -->
+            <aside class="ma-widgets">
+                <!-- Mini calendar -->
+                <div class="ma-w">
+                    <div class="ma-w__head">
+                        <span class="ma-w__title"><i class="pi pi-calendar" /> {{ miniMesAno }}</span>
+                        <div class="ma-w__nav">
+                            <button class="ma-w__icon" @click="miniPrev"><i class="pi pi-chevron-left" /></button>
+                            <button class="ma-w__icon" @click="miniNext"><i class="pi pi-chevron-right" /></button>
+                        </div>
+                    </div>
+                    <div class="mini-cal">
+                        <div class="mini-cal__weekdays">
+                            <span v-for="d in ['D','S','T','Q','Q','S','S']" :key="d">{{ d }}</span>
+                        </div>
+                        <div class="mini-cal__grid">
+                            <button
+                                v-for="(d, i) in miniDias"
+                                :key="i"
+                                class="mini-cal__day"
+                                :class="[
+                                    {
+                                        'is-outro': d.outro,
+                                        'is-hoje': d.isHoje,
+                                        'is-fechado': d.fechado && !d.feriado,
+                                        'is-in-range': isInFcRange(d.date) && !d.isHoje,
+                                        'has-evento': d.count > 0,
+                                        'is-feriado': !!d.feriado
+                                    },
+                                    d.feriado ? `is-feriado--${d.feriado.tipo}` : null
+                                ]"
+                                :title="dayTooltip(d)"
+                                @click="selecionarDiaMini(d)"
+                            >
+                                {{ d.dia }}
+                                <span v-if="d.count > 0" class="mini-cal__dots">
+                                    <span class="mini-cal__dot" />
+                                    <span v-if="d.count >= 2" class="mini-cal__dot" />
+                                    <span v-if="d.count >= 3" class="mini-cal__dot" />
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Próximos feriados (mês atual) — reaproveita componente
+                     existente da AgendaTerapeutaPage. ownerId fica null pra
+                     ele bootar via supabase auth (preview funciona com login). -->
+                <ProximosFeriadosCard
+                    class="ma-w-feriados"
+                    :owner-id="null"
+                    :tenant-id="currentTenantId"
+                    :work-rules="workRules"
+                    @bloqueado="onFeriadoBloqueado"
+                />
+
+            </aside>
+        </div>
+
+        <!-- Popover + dialogs de cadastro (montados fora do scroll/aside
+             pra ficarem por cima do .ma-page sem clipping). -->
+        <PatientCreatePopover
+            ref="createPopoverRef"
+            @quick-create="openQuickCreate"
+            @go-complete="goCreateFull"
+        />
+        <PatientCadastroDialog
+            v-model="cadastroFullDialog"
+            :patient-id="editPatientId"
+            @created="onPatientCreated"
+        />
+        <ComponentCadastroRapido
+            v-model="quickDialog"
+            title="Cadastro Rápido"
+            table-name="patients"
+            name-field="nome_completo"
+            email-field="email_principal"
+            phone-field="telefone"
+            @created="onPatientCreated"
+        />
+
+        <!-- Dock contextual — Teleport pro .melissa-dock no MelissaLayout.
+             Aparece quando há paciente selecionado. Em mobile, fica oculto
+             via CSS pq as ações vivem no kebab da própria lista.
+             Transition envolve Teleport (pattern oficial Vue) pra evitar
+             comment placeholder no target compartilhado com o chip do
+             cronômetro — sem isso, "emitsOptions: null" no diff. -->
+        <Transition name="ma-dock-pop">
+            <Teleport v-if="pacienteSelecionado" to=".melissa-dock">
+                <div class="ma-dock-actions">
+                    <span class="ma-dock-actions__avatar">
+                        <img v-if="pacienteSelecionado.avatar_url" :src="pacienteSelecionado.avatar_url" :alt="pacienteSelecionado.nome" />
+                        <template v-else>{{ pacienteSelecionadoIniciais() }}</template>
+                    </span>
+                    <span class="ma-dock-actions__name" :title="pacienteSelecionado.nome">
+                        {{ pacienteSelecionado.nome }}
+                    </span>
+                    <span v-if="pacienteSelecionadoCount !== null" class="ma-dock-actions__count">
+                        {{ pacienteSelecionadoCount }} {{ pacienteSelecionadoCount === 1 ? 'sessão' : 'sessões' }}
+                    </span>
+
+                    <span class="ma-dock-actions__divider" />
+
+                    <button class="ma-dock-actions__btn" title="Ver sessões" @click="abrirSessoesPaciente">
+                        <i class="pi pi-history" />
+                    </button>
+                    <button class="ma-dock-actions__btn" title="Conversar (WhatsApp)" @click="abrirWhatsappPaciente">
+                        <i class="pi pi-whatsapp" />
+                    </button>
+                    <button class="ma-dock-actions__btn" title="Prontuário" @click="abrirProntuarioPaciente">
+                        <i class="pi pi-file" />
+                    </button>
+                    <button class="ma-dock-actions__btn" title="Editar paciente" @click="editarPacienteSelecionado">
+                        <i class="pi pi-pencil" />
+                    </button>
+                    <button class="ma-dock-actions__btn ma-dock-actions__btn--close" title="Fechar (desselecionar)" @click="desselecionarPaciente">
+                        <i class="pi pi-times" />
+                    </button>
+                </div>
+            </Teleport>
+        </Transition>
+
+        <!-- Menu kebab (mobile) — abre via toggleKebab a partir de qualquer .ma-pat -->
+        <Menu ref="kebabMenu" :model="kebabItems" popup append-to="body" />
+
+        <!-- Dialog Prontuário — reaproveita componente do PatientsListPage.
+             :key força re-mount quando troca de paciente. Optional chain
+             em prontuarioPatient pra blindar contra bloco-tree opt do Vue. -->
+        <PatientProntuario
+            v-if="prontuarioPatient"
+            :key="prontuarioPatient?.id || 'none'"
+            v-model="prontuarioOpen"
+            :patient="prontuarioPatient"
+            @close="prontuarioOpen = false"
+            @edit="(id) => { prontuarioOpen = false; editPatientId = String(id); cadastroFullDialog = true; }"
+        />
+    </section>
+</template>
+
+<style scoped>
+/* ─── Convenção "Melissa Page" ────────────────────────────── */
+/* inset bottom maior pra reservar a faixa do .melissa-dock (76px + 6px
+   respiro). Token --m-dock-h vem do MelissaLayout (style global). */
+.ma-page {
+    position: absolute;
+    inset: 6px 6px calc(var(--m-dock-h, 76px) + 6px) 6px;
+    z-index: 40;
+    display: flex;
+    flex-direction: column;
+    background: var(--m-bg-medium);
+    backdrop-filter: blur(32px) saturate(160%);
+    -webkit-backdrop-filter: blur(32px) saturate(160%);
+    border: 1px solid var(--m-border);
+    border-radius: 18px;
+    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
+    overflow: hidden;
+    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+    color: var(--m-text);
+}
+.ma-page__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 14px 18px;
+    border-bottom: 1px solid var(--m-border);
+    flex-shrink: 0;
+}
+.ma-page__title {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 1rem;
+    font-weight: 500;
+}
+.ma-close {
+    width: 32px; height: 32px;
+    display: grid; place-items: center;
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border);
+    color: var(--m-text);
+    border-radius: 9px;
+    cursor: pointer;
+    transition: background-color 140ms ease;
+}
+.ma-close:hover { background: var(--m-bg-soft-hover); }
+
+.ma-body {
+    flex: 1;
+    display: flex;
+    min-height: 0;
+}
+
+/* ═══ COL 1: Aside Pacientes ═════════════════════════════════ */
+.ma-side {
+    width: 280px;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    border-right: 1px solid var(--m-border);
+    background: var(--m-bg-soft);
+}
+.ma-side__head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    padding: 16px 16px 8px;
+}
+.ma-side__title {
+    font-size: 0.78rem;
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
+    color: var(--m-text-muted);
+    font-weight: 600;
+}
+.ma-side__count {
+    font-size: 0.72rem;
+    color: var(--m-text-faint);
+    background: var(--m-bg-soft);
+    padding: 2px 7px;
+    border-radius: 999px;
+}
+
+.ma-search {
+    position: relative;
+    margin: 0 12px 8px;
+}
+.ma-search__icon {
+    position: absolute;
+    left: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--m-text-muted);
+    font-size: 0.8rem;
+    pointer-events: none;
+}
+.ma-search__input {
+    width: 100%;
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border);
+    color: var(--m-text);
+    padding: 8px 12px 8px 32px;
+    border-radius: 9px;
+    font-size: 0.82rem;
+    font-family: inherit;
+    outline: none;
+    transition: background-color 140ms ease, border-color 140ms ease;
+}
+.ma-search__input::placeholder { color: var(--m-text-faint); }
+.ma-search__input:focus {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+}
+
+.ma-side__list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 4px 8px 12px;
+    scrollbar-width: thin;
+    scrollbar-color: var(--m-border-strong) transparent;
+}
+.ma-side__list::-webkit-scrollbar { width: 5px; }
+.ma-side__list::-webkit-scrollbar-thumb {
+    background: var(--m-border-strong);
+    border-radius: 3px;
+}
+.ma-side__empty {
+    text-align: center;
+    color: var(--m-text-faint);
+    font-size: 0.78rem;
+    padding: 20px;
+}
+
+.ma-pat {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 10px;
+    background: transparent;
+    border: none;
+    border-radius: 9px;
+    color: var(--m-text);
+    text-align: left;
+    cursor: pointer;
+    font-family: inherit;
+    transition: background-color 140ms ease;
+}
+.ma-pat:hover { background: var(--m-bg-soft); }
+.ma-pat.is-active {
+    background: var(--m-accent-soft);
+    border: 1px solid var(--m-accent-strong);
+    padding: 7px 9px;
+}
+
+/* Paciente recém-cadastrado (created_at < 7 dias) — bg primary suave
+   + badge "novo" pra destacar na lista. Aparece ordenado no topo
+   (mais recente primeiro), feito no computed pacientesFiltrados. */
+.ma-pat.is-novo {
+    background: var(--m-accent-soft);
+}
+.ma-pat.is-novo:hover {
+    background: var(--m-accent-strong);
+}
+.ma-pat.is-novo.is-active {
+    /* já tem accent-soft do is-active; reforça borda */
+    background: var(--m-accent-soft);
+    border-color: var(--m-accent);
+}
+.ma-pat__novo {
+    font-size: 0.55rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    padding: 2px 6px;
+    border-radius: 999px;
+    background: var(--m-accent);
+    color: var(--p-primary-contrast-color, white);
+    flex-shrink: 0;
+    line-height: 1.2;
+}
+
+/* Kebab por linha — visível só em mobile (≤ 1024px). Em desktop as
+   ações vivem no .ma-dock-actions teleportado pro dock. */
+.ma-pat__kebab {
+    display: none;
+    width: 28px;
+    height: 28px;
+    background: transparent;
+    border: none;
+    color: var(--m-text-muted);
+    border-radius: 6px;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: background-color 140ms ease, color 140ms ease;
+}
+.ma-pat__kebab:hover {
+    background: var(--m-bg-soft-hover);
+    color: var(--m-text);
+}
+@media (max-width: 1024px) {
+    .ma-pat__kebab { display: grid; place-items: center; }
+}
+
+/* Item fake "Adicionar paciente" — tracejado com + e label.
+   Sempre primeiro na lista; abre PatientCreatePopover ao click. */
+.ma-pat--add {
+    justify-content: center;
+    gap: 8px;
+    padding: 10px;
+    color: var(--m-text-muted);
+    border: 1.5px dashed var(--m-border-strong);
+    background: transparent;
+    font-size: 0.78rem;
+    font-weight: 500;
+    margin-bottom: 6px;
+}
+.ma-pat--add:hover {
+    color: var(--m-accent);
+    border-color: var(--m-accent);
+    background: var(--m-accent-soft);
+}
+.ma-pat--add i { font-size: 0.78rem; }
+.ma-pat__avatar {
+    width: 32px; height: 32px;
+    border-radius: 50%;
+    /* Bg saturado (não translúcido) pra texto branco ficar legível em ambos modos */
+    background: var(--m-accent);
+    border: 1px solid var(--m-accent);
+    display: grid; place-items: center;
+    color: var(--p-primary-contrast-color, white);
+    font-size: 0.78rem;
+    font-weight: 600;
+    flex-shrink: 0;
+    overflow: hidden;
+}
+.ma-pat__avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+.ma-pat__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
+.ma-pat__name {
+    font-size: 0.85rem;
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.ma-pat__sub { font-size: 0.68rem; color: var(--m-text-muted); }
+
+/* ═══ COL 2: Calendar central ════════════════════════════════ */
+.ma-cal {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    border-right: 1px solid var(--m-border);
+}
+.ma-cal__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 14px;
+    border-bottom: 1px solid var(--m-border);
+    flex-shrink: 0;
+    gap: 10px;
+}
+.ma-cal__nav {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+.ma-cal__btn {
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border);
+    color: var(--m-text);
+    padding: 6px 12px;
+    border-radius: 8px;
+    font-size: 0.78rem;
+    font-family: inherit;
+    cursor: pointer;
+    transition: background-color 140ms ease;
+}
+.ma-cal__btn:hover { background: var(--m-bg-soft-hover); }
+.ma-cal__icon {
+    width: 30px; height: 30px;
+    display: grid; place-items: center;
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border);
+    color: var(--m-text);
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 0.7rem;
+    transition: background-color 140ms ease;
+}
+.ma-cal__icon:hover { background: var(--m-bg-soft-hover); }
+.ma-cal__period {
+    padding: 4px 14px;
+    color: var(--m-text);
+    font-size: 0.85rem;
+    font-weight: 500;
+    min-width: 130px;
+    text-align: center;
+}
+.ma-cal__view {
+    display: flex;
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border);
+    border-radius: 8px;
+    padding: 2px;
+}
+.ma-cal__view-btn {
+    background: transparent;
+    border: none;
+    color: var(--m-text-muted);
+    padding: 4px 12px;
+    border-radius: 6px;
+    font-size: 0.75rem;
+    font-family: inherit;
+    cursor: pointer;
+    transition: all 140ms ease;
+}
+.ma-cal__view-btn:hover { color: var(--m-text); }
+.ma-cal__view-btn.is-active {
+    background: var(--m-bg-soft-hover);
+    color: var(--m-text);
+}
+
+/* ─── FullCalendar wrapper ─────────────────────────────────── */
+.ma-cal__fc {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    /* Vars CSS do próprio FC sobrescritas pra glass aesthetic adaptativo */
+    --fc-border-color: var(--m-border);
+    --fc-page-bg-color: transparent;
+    --fc-neutral-bg-color: var(--m-bg-soft);
+    --fc-list-event-hover-bg-color: var(--m-bg-soft);
+    --fc-today-bg-color: var(--m-accent-soft);
+    --fc-now-indicator-color: rgb(239, 68, 68);
+    --fc-event-text-color: var(--m-text);
+    color: var(--m-text);
+    font-family: inherit;
+}
+
+/* ─── Override do FullCalendar pra glass (via :deep) ───────── */
+.ma-cal__fc :deep(.fc) {
+    height: 100%;
+    color: var(--m-text);
+    font-family: inherit;
+}
+.ma-cal__fc :deep(.fc-scrollgrid),
+.ma-cal__fc :deep(.fc-scrollgrid-section > *),
+.ma-cal__fc :deep(.fc-theme-standard td),
+.ma-cal__fc :deep(.fc-theme-standard th) {
+    border-color: var(--m-border);
+}
+.ma-cal__fc :deep(.fc-col-header-cell-cushion),
+.ma-cal__fc :deep(.fc-timegrid-axis-cushion),
+.ma-cal__fc :deep(.fc-timegrid-slot-label-cushion),
+.ma-cal__fc :deep(.fc-list-day-cushion) {
+    color: var(--m-text-muted);
+    font-weight: 500;
+    text-transform: lowercase;
+    text-decoration: none;
+}
+.ma-cal__fc :deep(.fc-col-header-cell-cushion) {
+    color: var(--m-text-muted);
+    font-size: 0.72rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    padding: 8px 4px;
+    /* navLinks ativo — header do dia vira clicável (vai pra view dia).
+       Cursor + transição suave indicam interatividade sem underline. */
+    cursor: pointer;
+    transition: color 140ms ease;
+}
+.ma-cal__fc :deep(.fc-col-header-cell-cushion:hover) {
+    color: var(--m-text);
+}
+.ma-cal__fc :deep(.fc-day-today) {
+    background: var(--m-accent-soft) !important;
+}
+.ma-cal__fc :deep(.fc-day-today .fc-col-header-cell-cushion),
+.ma-cal__fc :deep(.fc-day-today .fc-daygrid-day-number) {
+    color: var(--m-accent);
+}
+.ma-cal__fc :deep(.fc-daygrid-day-number) {
+    color: var(--m-text-muted);
+    font-size: 0.78rem;
+    padding: 4px 6px;
+    text-decoration: none;
+}
+.ma-cal__fc :deep(.fc-list-day-cushion) {
+    background: var(--m-bg-soft);
+}
+.ma-cal__fc :deep(.fc-list-event:hover td) {
+    background: var(--m-bg-soft);
+}
+.ma-cal__fc :deep(.fc-list-empty) {
+    background: transparent;
+    color: var(--m-text-muted);
+}
+
+/* Eventos */
+.ma-cal__fc :deep(.fc-event) {
+    border-radius: 6px;
+    border: none;
+    border-left: 3px solid;
+    padding: 0;
+    cursor: pointer;
+    overflow: hidden;
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    transition: filter 140ms ease, transform 140ms ease;
+}
+.ma-cal__fc :deep(.fc-event:hover) {
+    filter: brightness(1.2);
+}
+.ma-cal__fc :deep(.fc-event-main) {
+    padding: 0;
+}
+.ma-cal__fc :deep(.mc-fc-event) {
+    padding: 4px 6px;
+    color: var(--m-text);
+    font-family: inherit;
+}
+.ma-cal__fc :deep(.mc-fc-event__time) {
+    font-size: 0.6rem;
+    color: var(--m-text-muted);
+    font-variant-numeric: tabular-nums;
+    line-height: 1.1;
+}
+.ma-cal__fc :deep(.mc-fc-event__title) {
+    font-size: 0.74rem;
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    line-height: 1.2;
+    margin-top: 1px;
+}
+.ma-cal__fc :deep(.mc-fc-event__meta) {
+    font-size: 0.6rem;
+    color: var(--m-text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-top: 1px;
+}
+
+/* Cursor "agora" do FC */
+.ma-cal__fc :deep(.fc-timegrid-now-indicator-line) {
+    border-color: rgb(239, 68, 68);
+    border-width: 2px;
+}
+.ma-cal__fc :deep(.fc-timegrid-now-indicator-arrow) {
+    border-color: rgb(239, 68, 68);
+}
+
+/* Grid de horas — 24 slots de 30min em 12h cabem sem scroll com altura confortável */
+.ma-cal__fc :deep(.fc-timegrid-slot) {
+    height: 1.6em;
+    border-color: var(--m-border);
+}
+.ma-cal__fc :deep(.fc-timegrid-slot-minor) {
+    border-top-style: dashed;
+    border-top-color: var(--m-border);
+}
+
+/* Label customizado: HH:00 mais forte, :30 menor/translúcido (pattern AgendaTerapeutaPage) */
+.ma-cal__fc :deep(.mc-slot-hour) {
+    font-size: 0.72rem;
+    font-weight: 600;
+    color: var(--m-text-muted);
+    font-variant-numeric: tabular-nums;
+}
+.ma-cal__fc :deep(.mc-slot-half) {
+    font-size: 0.6rem;
+    color: var(--m-text-faint);
+    font-variant-numeric: tabular-nums;
+}
+.ma-cal__fc :deep(.fc-timegrid-axis),
+.ma-cal__fc :deep(.fc-timegrid-slot-label) {
+    border-color: transparent;
+}
+
+/* Mês: célula */
+.ma-cal__fc :deep(.fc-daygrid-day-frame) {
+    min-height: 5rem;
+}
+.ma-cal__fc :deep(.fc-daygrid-event) {
+    margin: 1px 2px;
+}
+.ma-cal__fc :deep(.fc-daygrid-more-link) {
+    color: var(--m-text-muted);
+    font-size: 0.7rem;
+}
+
+/* Lista (listWeek) */
+.ma-cal__fc :deep(.fc-list-day-text),
+.ma-cal__fc :deep(.fc-list-day-side-text) {
+    color: var(--m-text);
+    font-weight: 600;
+}
+.ma-cal__fc :deep(.fc-list-event-time),
+.ma-cal__fc :deep(.fc-list-event-title) {
+    color: var(--m-text);
+}
+.ma-cal__fc :deep(.fc-list-event-graphic .fc-list-event-dot) {
+    border-color: currentColor;
+}
+
+/* Scrollbar do FC interno */
+.ma-cal__fc :deep(.fc-scroller) {
+    scrollbar-width: thin;
+    scrollbar-color: var(--m-border-strong) transparent;
+}
+.ma-cal__fc :deep(.fc-scroller::-webkit-scrollbar) {
+    width: 6px;
+    height: 6px;
+}
+.ma-cal__fc :deep(.fc-scroller::-webkit-scrollbar-thumb) {
+    background: var(--m-border-strong);
+    border-radius: 3px;
+}
+
+/* ═══ COL 3: Widgets direita ═════════════════════════════════ */
+.ma-widgets {
+    width: 320px;
+    flex-shrink: 0;
+    overflow-y: auto;
+    padding: 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    scrollbar-width: thin;
+    scrollbar-color: var(--m-border-strong) transparent;
+}
+.ma-widgets::-webkit-scrollbar { width: 5px; }
+.ma-widgets::-webkit-scrollbar-thumb {
+    background: var(--m-border-strong);
+    border-radius: 3px;
+}
+
+.ma-w {
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border);
+    border-radius: 12px;
+    padding: 12px;
+}
+
+/* Modificador pra usar o card .ma-w dentro da sidebar (col 1) — adiciona
+   margem nas bordas (a .ma-side não tem padding interno; head/search/list
+   têm padding próprio) e cap de altura interno da lista pra não estourar
+   toda a sidebar. */
+.ma-w--side {
+    margin: 12px 12px 8px;
+    flex-shrink: 0;
+    max-height: 50vh;
+    display: flex;
+    flex-direction: column;
+}
+.ma-w--side .ma-w__list {
+    overflow-y: auto;
+    min-height: 0;
+    scrollbar-width: thin;
+    scrollbar-color: var(--m-border-strong) transparent;
+}
+.ma-w--side .ma-w__list::-webkit-scrollbar { width: 5px; }
+.ma-w--side .ma-w__list::-webkit-scrollbar-thumb {
+    background: var(--m-border-strong);
+    border-radius: 3px;
+}
+
+/* ProximosFeriadosCard reusado da AgendaTerapeutaPage. Override visual
+   pra alinhar com a estética glass dos outros widgets (.ma-w):
+   bg/border via tokens Melissa e cantos menos arredondados (rounded-3xl
+   destoava das outras cards de 12px). */
+.ma-w-feriados {
+    background: var(--m-bg-soft);
+    border-color: var(--m-border);
+    border-radius: 12px;
+}
+.ma-w-feriados :deep(.border-b) {
+    border-color: var(--m-border);
+}
+.ma-w__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+}
+.ma-w__title {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: var(--m-text-muted);
+    font-weight: 600;
+}
+.ma-w__count {
+    font-size: 0.65rem;
+    color: var(--m-text-faint);
+    background: var(--m-bg-soft-hover);
+    padding: 1px 7px;
+    border-radius: 999px;
+}
+.ma-w__nav { display: flex; gap: 2px; }
+.ma-w__icon {
+    width: 24px; height: 24px;
+    display: grid; place-items: center;
+    background: transparent;
+    border: none;
+    color: var(--m-text-muted);
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 0.65rem;
+    transition: background-color 140ms ease, color 140ms ease;
+}
+.ma-w__icon:hover {
+    background: var(--m-bg-soft-hover);
+    color: var(--m-text);
+}
+
+/* Mini calendar */
+.mini-cal__weekdays {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 2px;
+    margin-bottom: 4px;
+}
+.mini-cal__weekdays span {
+    text-align: center;
+    font-size: 0.62rem;
+    color: var(--m-text-faint);
+    font-weight: 600;
+    padding: 4px 0;
+}
+.mini-cal__grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 2px;
+}
+.mini-cal__day {
+    position: relative;
+    background: transparent;
+    border: none;
+    color: var(--m-text);
+    font-family: inherit;
+    font-size: 0.72rem;
+    padding: 6px 0;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background-color 140ms ease, color 140ms ease;
+}
+.mini-cal__day:hover { background: var(--m-bg-soft-hover); }
+.mini-cal__day.is-outro { color: var(--m-text-faint); }
+
+/* Range visível no FC central — destaque sutil pra indicar "esses dias
+   estão na view atual do calendário grande". Mais leve que is-hoje pra
+   não competir visualmente. is-hoje sempre vence (regra mais específica). */
+.mini-cal__day.is-in-range {
+    background: var(--m-accent-soft);
+    color: var(--m-accent);
+    font-weight: 600;
+}
+.mini-cal__day.is-in-range:hover {
+    background: var(--m-accent-strong);
+}
+
+/* Dia fechado (fora da jornada semanal — workRules) — cinza apagado.
+   Mais forte que is-outro (mês passado) pra distinguir as duas razões.
+   Aplicado SÓ quando não há feriado (mutex no template) — feriado em
+   dia fechado vira a cor do feriado, não cinza. */
+.mini-cal__day.is-fechado {
+    color: var(--m-text-faint);
+    background: color-mix(in srgb, var(--p-text-color) 5%, transparent);
+}
+.mini-cal__day.is-fechado:hover {
+    background: color-mix(in srgb, var(--p-text-color) 10%, transparent);
+}
+
+/* Feriados — uma cor por tipo. Aplicado ANTES do is-hoje pra que o dia
+   atual sempre vença (bg accent), mas o número herda a cor do feriado
+   se não for hoje. Tooltip mostra nome do feriado. */
+.mini-cal__day.is-feriado {
+    font-weight: 600;
+}
+.mini-cal__day.is-feriado--nacional {
+    color: rgb(244, 63, 94);                              /* rose-500 */
+    background: color-mix(in srgb, rgb(244, 63, 94) 12%, transparent);
+}
+.mini-cal__day.is-feriado--nacional:hover {
+    background: color-mix(in srgb, rgb(244, 63, 94) 22%, transparent);
+}
+.mini-cal__day.is-feriado--municipal {
+    color: rgb(217, 119, 6);                              /* amber-600 */
+    background: color-mix(in srgb, rgb(245, 158, 11) 14%, transparent);
+}
+.mini-cal__day.is-feriado--municipal:hover {
+    background: color-mix(in srgb, rgb(245, 158, 11) 24%, transparent);
+}
+.mini-cal__day.is-feriado--personalizado {
+    color: rgb(139, 92, 246);                             /* violet-500 */
+    background: color-mix(in srgb, rgb(139, 92, 246) 14%, transparent);
+}
+.mini-cal__day.is-feriado--personalizado:hover {
+    background: color-mix(in srgb, rgb(139, 92, 246) 24%, transparent);
+}
+
+.mini-cal__day.is-hoje {
+    background: var(--m-accent);
+    color: var(--p-primary-contrast-color, white);
+    font-weight: 700;
+}
+/* Hoje E feriado: mantém bg accent saturado mas o ring externo da cor
+   do feriado indica a dupla condição (avoid color collision). */
+.mini-cal__day.is-hoje.is-feriado--nacional       { box-shadow: 0 0 0 2px rgba(244, 63, 94, 0.55); }
+.mini-cal__day.is-hoje.is-feriado--municipal      { box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.55); }
+.mini-cal__day.is-hoje.is-feriado--personalizado  { box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.55); }
+
+/* Container dos dots — flex pra suportar 1-3 dots lado a lado
+   na borda inferior da célula sem deslocar o número. */
+.mini-cal__dots {
+    position: absolute;
+    bottom: 3px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 2px;
+    line-height: 0;
+}
+.mini-cal__dot {
+    display: inline-block;
+    width: 3px; height: 3px;
+    border-radius: 50%;
+    background: var(--m-accent);
+}
+.mini-cal__day.is-hoje .mini-cal__dot { background: var(--p-primary-contrast-color, white); }
+.mini-cal__day.is-in-range .mini-cal__dot { background: var(--m-accent); }
+
+/* Stats */
+.ma-stats {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 6px;
+}
+.ma-stat {
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border);
+    border-radius: 8px;
+    padding: 8px 4px;
+    text-align: center;
+}
+.ma-stat__val {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--m-text);
+    line-height: 1;
+}
+.ma-stat.is-ok .ma-stat__val { color: var(--m-accent); }
+.ma-stat.is-warn .ma-stat__val { color: rgb(239, 68, 68); }
+.ma-stat__lbl {
+    font-size: 0.58rem;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--m-text-muted);
+    margin-top: 4px;
+    font-weight: 600;
+}
+
+/* Divider entre stats e lista de sessões dentro do mesmo card "Hoje".
+   Linha sutil + respiro acima/abaixo pra criar separação visual sem
+   precisar de header próprio pra lista. */
+.ma-w__divider {
+    height: 1px;
+    background: var(--m-border);
+    margin: 12px -2px 10px;
+}
+
+/* Sessões hoje (lista) */
+.ma-w__list {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+.ma-w__empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+    padding: 20px;
+    color: var(--m-text-faint);
+    font-size: 0.78rem;
+}
+.ma-w__empty i { font-size: 1.5rem; opacity: 0.4; }
+
+.ma-sess {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border);
+    border-left: 3px solid;
+    border-radius: 8px;
+    padding: 8px 10px;
+    color: var(--m-text);
+    text-align: left;
+    cursor: pointer;
+    font-family: inherit;
+    transition: background-color 140ms ease;
+}
+.ma-sess:hover { background: var(--m-bg-soft-hover); }
+.ma-sess__time {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    min-width: 40px;
+    flex-shrink: 0;
+    font-variant-numeric: tabular-nums;
+}
+.ma-sess__time strong {
+    font-size: 0.78rem;
+    color: var(--m-text);
+    font-weight: 600;
+}
+.ma-sess__time span {
+    font-size: 0.6rem;
+    color: var(--m-text-muted);
+}
+.ma-sess__main { flex: 1; min-width: 0; }
+.ma-sess__name {
+    font-size: 0.82rem;
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.ma-sess__meta {
+    font-size: 0.65rem;
+    color: var(--m-text-muted);
+    margin-top: 1px;
+}
+
+/* ─── Dock contextual (Teleport pro .melissa-dock) ────────────
+   Aparece quando há paciente selecionado. Estilo glass espelha o
+   .mc-chip do cronômetro — coerente visualmente na faixa do dock. */
+.ma-dock-actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 8px 6px 10px;
+    background: var(--m-bg-medium);
+    backdrop-filter: blur(24px) saturate(160%);
+    -webkit-backdrop-filter: blur(24px) saturate(160%);
+    border: 1px solid var(--m-border-strong);
+    border-radius: 9999px;
+    color: var(--m-text);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+    max-width: min(560px, calc(100vw - 8rem));
+}
+.ma-dock-actions__avatar {
+    width: 28px; height: 28px;
+    border-radius: 50%;
+    background: var(--m-accent);
+    color: var(--p-primary-contrast-color, white);
+    display: grid; place-items: center;
+    font-size: 0.7rem;
+    font-weight: 600;
+    flex-shrink: 0;
+    overflow: hidden;
+}
+.ma-dock-actions__avatar img {
+    width: 100%; height: 100%; object-fit: cover;
+}
+.ma-dock-actions__name {
+    font-size: 0.85rem;
+    font-weight: 500;
+    max-width: 180px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.ma-dock-actions__count {
+    font-size: 0.68rem;
+    color: var(--m-text-muted);
+    padding: 2px 8px;
+    border-radius: 999px;
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border);
+    flex-shrink: 0;
+}
+.ma-dock-actions__divider {
+    width: 1px;
+    height: 22px;
+    background: var(--m-border-strong);
+    margin: 0 2px;
+}
+.ma-dock-actions__btn {
+    width: 32px; height: 32px;
+    display: grid; place-items: center;
+    background: transparent;
+    border: none;
+    color: var(--m-text);
+    border-radius: 50%;
+    cursor: pointer;
+    transition: background-color 140ms ease, color 140ms ease;
+    font-size: 0.85rem;
+}
+.ma-dock-actions__btn:hover {
+    background: var(--m-bg-soft-hover);
+}
+.ma-dock-actions__btn--close {
+    color: var(--m-text-muted);
+}
+.ma-dock-actions__btn--close:hover {
+    color: rgb(239, 68, 68);
+}
+/* Em mobile, dock-actions some — ações vivem no kebab da própria lista */
+@media (max-width: 1024px) {
+    .ma-dock-actions { display: none; }
+}
+
+/* Pop in/out do dock-actions */
+.ma-dock-pop-enter-active,
+.ma-dock-pop-leave-active {
+    transition: opacity 220ms ease, transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
+}
+.ma-dock-pop-enter-from,
+.ma-dock-pop-leave-to {
+    opacity: 0;
+    transform: translateY(8px) scale(0.96);
+}
+
+/* ─── Light mode tweaks ──────────────────────────────────────
+   Cores principais já flipam via var(--m-text). Aqui suavizamos
+   shadows escuras agressivas e ajustamos contraste de eventos. */
+html:not(.app-dark) .ma-page {
+    box-shadow:
+        0 12px 36px rgba(15, 23, 42, 0.10),
+        0 2px 6px rgba(15, 23, 42, 0.06);
+}
+
+/* Eventos do FC: backdrop-filter blur + bg colorido translúcido fica
+   muito lavado em light. Reforça a saturação pra eventos manterem
+   identidade da cor (sessão verde, supervisão azul, reunião amarela). */
+html:not(.app-dark) .ma-cal__fc :deep(.fc-event) {
+    backdrop-filter: blur(2px) saturate(140%);
+    -webkit-backdrop-filter: blur(2px) saturate(140%);
+    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
+}
+
+/* Cursor "agora" — vermelho saturado já funciona em ambos modos,
+   mas em light o background do slot é claro, então o cursor precisa
+   de um pouco mais de presença. */
+html:not(.app-dark) .ma-cal__fc :deep(.fc-timegrid-now-indicator-line) {
+    border-width: 2px;
+    box-shadow: 0 0 8px rgba(239, 68, 68, 0.35);
+}
+</style>
diff --git a/src/layout/melissa/MelissaBusca.vue b/src/layout/melissa/MelissaBusca.vue
new file mode 100644
index 0000000..92bd0cd
--- /dev/null
+++ b/src/layout/melissa/MelissaBusca.vue
@@ -0,0 +1,427 @@
+<script setup>
+/*
+ * MelissaBusca
+ * --------------------------------------------------
+ * Busca rápida glass-style. Adaptação do GlobalSearch da topbar
+ * (`src/components/search/GlobalSearch.vue`) pro layout Melissa.
+ *
+ * Diferenças vs. GlobalSearch:
+ *  - Não chama Supabase — recebe pacientes/eventos via prop (preview)
+ *  - Visual glass (white-on-glass) ao invés de surface-card
+ *  - Sem loading state (busca client-side, instantâneo)
+ *  - Emite ações pro parent decidir o que fazer
+ *
+ * Quando promover pra produção: trocar a busca por chamada à RPC
+ * `search_global` + manter a mesma estrutura de panel/items.
+ */
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+
+const props = defineProps({
+    pacientes: { type: Array, default: () => [] },
+    eventos: { type: Array, default: () => [] },
+    atalhos: {
+        type: Array,
+        default: () => [
+            { id: 'agenda', label: 'Agenda', icon: 'pi pi-calendar', sublabel: 'Sessões e compromissos', keywords: ['agenda', 'calendario', 'sessoes', 'hoje'] },
+            { id: 'pacientes', label: 'Pacientes', icon: 'pi pi-users', sublabel: 'Cadastro e prontuários', keywords: ['pacientes', 'lista', 'cadastro'] },
+            { id: 'conversas', label: 'WhatsApp', icon: 'pi pi-whatsapp', sublabel: 'Conversas em andamento', keywords: ['whatsapp', 'conversas', 'mensagens', 'chat'] },
+            { id: 'financeiro', label: 'Financeiro', icon: 'pi pi-wallet', sublabel: 'Recebíveis e lançamentos', keywords: ['financeiro', 'pagamentos', 'cobrancas', 'dinheiro'] },
+            { id: 'configuracoes', label: 'Configurações', icon: 'pi pi-cog', sublabel: 'Preferências e equipe', keywords: ['configuracoes', 'ajustes', 'preferencias', 'settings'] }
+        ]
+    }
+});
+
+const emit = defineEmits(['acao', 'paciente', 'evento']);
+
+const rootEl = ref(null);
+const inputEl = ref(null);
+const query = ref('');
+const showPanel = ref(false);
+const activeIndex = ref(-1);
+
+function normalize(s) {
+    return String(s || '')
+        .normalize('NFD')
+        .replace(/[̀-ͯ]/g, '')
+        .toLowerCase()
+        .trim();
+}
+
+function fmtHora(h) {
+    const horas = Math.floor(h);
+    const mins = Math.round((h - horas) * 60);
+    return `${String(horas).padStart(2, '0')}:${String(mins).padStart(2, '0')}`;
+}
+
+const filteredAtalhos = computed(() => {
+    const q = normalize(query.value);
+    if (!q) return props.atalhos.slice(0, 4); // 4 defaults quando vazio
+    return props.atalhos.filter((a) => {
+        const hay = normalize(a.label + ' ' + (a.keywords || []).join(' '));
+        return hay.includes(q);
+    }).slice(0, 5);
+});
+
+const filteredPacientes = computed(() => {
+    const q = normalize(query.value);
+    if (q.length < 2) return [];
+    return props.pacientes
+        .filter((p) => normalize(p.nome).includes(q))
+        .slice(0, 5);
+});
+
+const filteredEventos = computed(() => {
+    const q = normalize(query.value);
+    if (q.length < 2) return [];
+    return props.eventos
+        .filter((e) => {
+            const hay = normalize(
+                (e.label || '') + ' ' + (e.pacienteNome || '') + ' ' + (e.descricao || '')
+            );
+            return hay.includes(q);
+        })
+        .slice(0, 5);
+});
+
+const flatList = computed(() => {
+    const out = [];
+    filteredAtalhos.value.forEach((a, i) => out.push({ group: 'atalhos', item: a, idx: i }));
+    filteredPacientes.value.forEach((p, i) => out.push({ group: 'pacientes', item: p, idx: i }));
+    filteredEventos.value.forEach((e, i) => out.push({ group: 'eventos', item: e, idx: i }));
+    return out;
+});
+
+const hasAnyResult = computed(() => flatList.value.length > 0);
+
+function findFlatIndex(group, idx) {
+    return flatList.value.findIndex((x) => x.group === group && x.idx === idx);
+}
+
+function selectEntry(entry) {
+    if (entry.group === 'atalhos') emit('acao', entry.item.id);
+    else if (entry.group === 'pacientes') emit('paciente', entry.item);
+    else if (entry.group === 'eventos') emit('evento', entry.item);
+    closePanel();
+}
+
+function closePanel() {
+    showPanel.value = false;
+    query.value = '';
+    activeIndex.value = -1;
+    inputEl.value?.blur();
+}
+
+function onFocus() {
+    showPanel.value = true;
+}
+
+function onClickOutside(e) {
+    if (rootEl.value && !rootEl.value.contains(e.target)) {
+        showPanel.value = false;
+        activeIndex.value = -1;
+    }
+}
+
+function onKeydown(e) {
+    if (!showPanel.value) return;
+    if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        activeIndex.value = Math.min(activeIndex.value + 1, flatList.value.length - 1);
+    } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        activeIndex.value = Math.max(activeIndex.value - 1, 0);
+    } else if (e.key === 'Enter' && activeIndex.value >= 0) {
+        e.preventDefault();
+        selectEntry(flatList.value[activeIndex.value]);
+    } else if (e.key === 'Escape') {
+        // Stop bubbling pra ESC do parent não fechar overlay aleatório
+        e.stopPropagation();
+        closePanel();
+    }
+}
+
+function onGlobalKeydown(e) {
+    // Ctrl+K / ⌘+K → foca input
+    if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k') {
+        e.preventDefault();
+        showPanel.value = true;
+        inputEl.value?.focus();
+    }
+}
+
+onMounted(() => {
+    document.addEventListener('mousedown', onClickOutside);
+    window.addEventListener('keydown', onGlobalKeydown);
+});
+onBeforeUnmount(() => {
+    document.removeEventListener('mousedown', onClickOutside);
+    window.removeEventListener('keydown', onGlobalKeydown);
+});
+</script>
+
+<template>
+    <div ref="rootEl" class="mb-search">
+        <div class="mb-field">
+            <i class="pi pi-search mb-field__icon" />
+            <input
+                ref="inputEl"
+                v-model="query"
+                type="text"
+                placeholder="Buscar paciente, agenda, atalho…"
+                class="mb-field__input"
+                @focus="onFocus"
+                @keydown="onKeydown"
+            />
+            <span class="mb-field__kbd" aria-hidden="true">Ctrl K</span>
+        </div>
+
+        <Transition name="mb-fade">
+            <div v-if="showPanel" class="mb-panel" role="listbox">
+                <div
+                    v-if="query.trim().length >= 2 && !hasAnyResult"
+                    class="mb-empty"
+                >
+                    Nada encontrado pra "<span class="text-white/80">{{ query.trim() }}</span>"
+                </div>
+
+                <!-- Atalhos -->
+                <div v-if="filteredAtalhos.length" class="mb-group">
+                    <div class="mb-group__title">{{ query.trim() ? 'Ações' : 'Atalhos' }}</div>
+                    <button
+                        v-for="(a, i) in filteredAtalhos"
+                        :key="'a-' + a.id"
+                        class="mb-item"
+                        :class="{ 'is-active': findFlatIndex('atalhos', i) === activeIndex }"
+                        @click="selectEntry({ group: 'atalhos', item: a })"
+                        @mouseenter="activeIndex = findFlatIndex('atalhos', i)"
+                    >
+                        <span class="mb-item__icon"><i :class="a.icon" /></span>
+                        <span class="mb-item__main">
+                            <span class="mb-item__label">{{ a.label }}</span>
+                            <span v-if="a.sublabel" class="mb-item__sub">{{ a.sublabel }}</span>
+                        </span>
+                        <i class="mb-item__go pi pi-arrow-right" />
+                    </button>
+                </div>
+
+                <!-- Pacientes -->
+                <div v-if="filteredPacientes.length" class="mb-group">
+                    <div class="mb-group__title">Pacientes</div>
+                    <button
+                        v-for="(p, i) in filteredPacientes"
+                        :key="'p-' + p.id"
+                        class="mb-item"
+                        :class="{ 'is-active': findFlatIndex('pacientes', i) === activeIndex }"
+                        @click="selectEntry({ group: 'pacientes', item: p })"
+                        @mouseenter="activeIndex = findFlatIndex('pacientes', i)"
+                    >
+                        <span class="mb-item__icon"><i class="pi pi-user" /></span>
+                        <span class="mb-item__main">
+                            <span class="mb-item__label">{{ p.nome }}</span>
+                            <span class="mb-item__sub">Abrir prontuário</span>
+                        </span>
+                        <i class="mb-item__go pi pi-arrow-right" />
+                    </button>
+                </div>
+
+                <!-- Eventos -->
+                <div v-if="filteredEventos.length" class="mb-group">
+                    <div class="mb-group__title">Agenda de hoje</div>
+                    <button
+                        v-for="(e, i) in filteredEventos"
+                        :key="'e-' + e.id"
+                        class="mb-item"
+                        :class="{ 'is-active': findFlatIndex('eventos', i) === activeIndex }"
+                        @click="selectEntry({ group: 'eventos', item: e })"
+                        @mouseenter="activeIndex = findFlatIndex('eventos', i)"
+                    >
+                        <span
+                            class="mb-item__icon"
+                            :style="{ backgroundColor: `${e.color}33`, color: e.color }"
+                        >
+                            <i class="pi pi-clock" />
+                        </span>
+                        <span class="mb-item__main">
+                            <span class="mb-item__label">{{ e.label }}</span>
+                            <span class="mb-item__sub">{{ fmtHora(e.startH) }} – {{ fmtHora(e.endH) }}</span>
+                        </span>
+                        <i class="mb-item__go pi pi-arrow-right" />
+                    </button>
+                </div>
+            </div>
+        </Transition>
+    </div>
+</template>
+
+<style scoped>
+.mb-search {
+    position: relative;
+    width: 100%;
+    max-width: 560px;
+    /* Só horizontal — top/bottom ficam livres pro parent (mt-X do Tailwind) */
+    margin-left: auto;
+    margin-right: auto;
+    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+}
+
+.mb-field {
+    position: relative;
+    display: flex;
+    align-items: center;
+    background: var(--m-bg-soft);
+    backdrop-filter: blur(20px) saturate(140%);
+    -webkit-backdrop-filter: blur(20px) saturate(140%);
+    border: 1px solid var(--m-border-strong);
+    border-radius: 12px;
+    padding: 0 14px;
+    height: 44px;
+    transition: background-color 160ms ease, border-color 160ms ease;
+}
+.mb-field:focus-within {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+}
+.mb-field__icon {
+    color: var(--m-text-muted);
+    font-size: 0.95rem;
+    margin-right: 10px;
+    flex-shrink: 0;
+}
+.mb-field__input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: white;
+    font-size: 0.9rem;
+    font-family: inherit;
+    min-width: 0;
+}
+.mb-field__input::placeholder {
+    color: var(--m-text-muted);
+}
+.mb-field__kbd {
+    color: var(--m-text-muted);
+    font-size: 0.62rem;
+    font-weight: 500;
+    padding: 2px 7px;
+    border-radius: 4px;
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border-strong);
+    margin-left: 8px;
+    flex-shrink: 0;
+    letter-spacing: 0.05em;
+}
+
+.mb-panel {
+    position: absolute;
+    top: calc(100% + 6px);
+    left: 0;
+    right: 0;
+    z-index: 30;
+    max-height: 60vh;
+    overflow-y: auto;
+    background: var(--m-bg-medium);
+    backdrop-filter: blur(28px) saturate(160%);
+    -webkit-backdrop-filter: blur(28px) saturate(160%);
+    border: 1px solid var(--m-border-strong);
+    border-radius: 12px;
+    padding: 6px;
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
+    scrollbar-width: thin;
+    scrollbar-color: var(--m-border-strong) transparent;
+}
+.mb-panel::-webkit-scrollbar { width: 6px; }
+.mb-panel::-webkit-scrollbar-thumb {
+    background: var(--m-border-strong);
+    border-radius: 3px;
+}
+
+.mb-empty {
+    padding: 18px 14px;
+    text-align: center;
+    color: var(--m-text-muted);
+    font-size: 0.85rem;
+}
+
+.mb-group + .mb-group {
+    margin-top: 4px;
+    padding-top: 4px;
+    border-top: 1px solid var(--m-border);
+}
+.mb-group__title {
+    text-transform: uppercase;
+    letter-spacing: 0.18em;
+    color: var(--m-text-faint);
+    font-size: 0.6rem;
+    font-weight: 600;
+    padding: 8px 10px 4px;
+}
+
+.mb-item {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 10px;
+    background: transparent;
+    border: none;
+    border-radius: 8px;
+    color: white;
+    text-align: left;
+    cursor: pointer;
+    font-family: inherit;
+    transition: background-color 100ms ease;
+}
+.mb-item:hover,
+.mb-item.is-active {
+    background: var(--m-bg-soft);
+}
+.mb-item__icon {
+    width: 30px;
+    height: 30px;
+    display: grid;
+    place-items: center;
+    background: var(--m-bg-soft);
+    border-radius: 7px;
+    color: var(--m-text-muted);
+    flex-shrink: 0;
+    font-size: 0.85rem;
+}
+.mb-item__main {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+}
+.mb-item__label {
+    font-size: 0.85rem;
+    color: white;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mb-item__sub {
+    font-size: 0.7rem;
+    color: var(--m-text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mb-item__go {
+    color: var(--m-text-faint);
+    font-size: 0.7rem;
+    flex-shrink: 0;
+}
+
+.mb-fade-enter-active,
+.mb-fade-leave-active {
+    transition: opacity 140ms ease, transform 160ms ease;
+}
+.mb-fade-enter-from,
+.mb-fade-leave-to {
+    opacity: 0;
+    transform: translateY(-6px);
+}
+</style>
diff --git a/src/layout/melissa/MelissaCard.vue b/src/layout/melissa/MelissaCard.vue
new file mode 100644
index 0000000..e3e3d63
--- /dev/null
+++ b/src/layout/melissa/MelissaCard.vue
@@ -0,0 +1,175 @@
+<script setup>
+/*
+ * MelissaCard
+ * --------------------------------------------------
+ * Card glass do dashboard Melissa.
+ *
+ * Dois variants:
+ *  - default: header (ícone+título+badge opcional) + slot de conteúdo
+ *             + botão redondo "+" centralizado na borda inferior que
+ *             emite `open` (parent decide o que fazer)
+ *  - add:     placeholder tracejado, meia largura, com "+" centralizado;
+ *             emite `add` ao clicar
+ *
+ * Largura é fixa (não estica) — o layout flex no parent define o número
+ * de cards visíveis conforme o tamanho da tela.
+ */
+defineProps({
+    variant: {
+        type: String,
+        default: 'default',
+        validator: (v) => ['default', 'add'].includes(v)
+    },
+    icon: { type: String, default: '' },        // ex.: 'pi pi-user'
+    iconColor: { type: String, default: '' },   // classe Tailwind ex.: 'text-emerald-300'
+    title: { type: String, default: '' },
+    badge: { type: [String, Number, null], default: null },
+    badgeColor: { type: String, default: 'bg-red-500/80' }, // classe Tailwind
+    actionTitle: { type: String, default: 'Abrir' }
+});
+
+defineEmits(['open', 'add']);
+</script>
+
+<template>
+    <article v-if="variant === 'default'" class="mc-card">
+        <div class="mc-card__head">
+            <span v-if="icon" class="mc-card__icon">
+                <i :class="[icon, iconColor]" />
+            </span>
+            <span class="mc-card__title">{{ title }}</span>
+            <span v-if="badge !== null && badge !== ''" class="mc-card__badge" :class="badgeColor">
+                {{ badge }}
+            </span>
+        </div>
+        <div class="mc-card__body">
+            <slot />
+        </div>
+        <button class="mc-card__go" :title="actionTitle" @click="$emit('open')">
+            <i class="pi pi-plus text-xs" />
+        </button>
+    </article>
+
+    <button v-else class="mc-card-add" :title="actionTitle" @click="$emit('add')">
+        <i class="pi pi-plus" />
+    </button>
+</template>
+
+<style scoped>
+/* ─── Card padrão ──────────────────────────────────────────── */
+.mc-card {
+    position: relative; /* ancora o botão "+" */
+    flex-shrink: 0;
+    width: 210px;
+    background: var(--m-bg-soft);
+    backdrop-filter: blur(20px) saturate(140%);
+    -webkit-backdrop-filter: blur(20px) saturate(140%);
+    border: 1px solid var(--m-border);
+    border-radius: 14px;
+    padding: 14px 16px;
+    transition: background-color 160ms ease, transform 160ms ease;
+}
+.mc-card:hover {
+    background: var(--m-bg-soft-hover);
+    transform: translateY(-2px);
+}
+
+.mc-card__head {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: var(--m-text);
+    font-size: 0.8rem;
+    font-weight: 500;
+    letter-spacing: 0.01em;
+}
+.mc-card__icon {
+    width: 32px;
+    height: 32px;
+    display: grid;
+    place-items: center;
+    border-radius: 12px;
+    background: var(--m-bg-soft-hover);
+    backdrop-filter: blur(16px) saturate(160%);
+    -webkit-backdrop-filter: blur(16px) saturate(160%);
+    border: 1px solid var(--m-border-strong);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
+    flex-shrink: 0;
+}
+.mc-card__title {
+    /* deixa o título absorver o espaço entre ícone e badge */
+    flex: 1;
+    min-width: 0;
+}
+.mc-card__badge {
+    /* margin-left: auto não precisa mais (title flex:1 empurra o badge) */
+    font-size: 0.7rem;
+    padding: 2px 8px;
+    border-radius: 9999px;
+    color: white;
+    font-weight: 600;
+    flex-shrink: 0;
+}
+
+.mc-card__body {
+    margin-top: 12px;
+    color: white;
+}
+
+/* Botão "+" centralizado na borda inferior do card */
+.mc-card__go {
+    position: absolute;
+    bottom: -16px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 32px;
+    height: 32px;
+    border-radius: 12px;
+    background: rgba(30, 30, 45, 0.85);
+    backdrop-filter: blur(20px) saturate(160%);
+    -webkit-backdrop-filter: blur(20px) saturate(160%);
+    border: 1px solid var(--m-border-strong);
+    color: white;
+    display: grid;
+    place-items: center;
+    cursor: pointer;
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
+    transition: background-color 180ms ease, transform 180ms ease, border-color 180ms ease;
+    z-index: 5;
+}
+.mc-card__go:hover {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+    transform: translateX(-50%) scale(1.08);
+}
+.mc-card__go:active {
+    transform: translateX(-50%) scale(0.96);
+}
+
+/* ─── Card "Adicionar" (tracejado, meia largura) ──────────── */
+/* Sem align-self aqui — o parent (cards-shell) decide se estica
+   (linha única) ou mantém intrínseco (wrap). */
+.mc-card-add {
+    flex-shrink: 0;
+    width: 130px; /* metade do card padrão */
+    min-height: 100px;
+    border: 1.5px dashed var(--m-border-strong);
+    border-radius: 14px;
+    background: var(--m-bg-soft);
+    color: var(--m-text-muted);
+    display: grid;
+    place-items: center;
+    cursor: pointer;
+    font-size: 1.5rem;
+    transition: all 200ms ease;
+}
+.mc-card-add:hover {
+    background: var(--m-bg-soft);
+    border-color: var(--m-text-muted);
+    color: white;
+    transform: translateY(-2px);
+}
+.mc-card-add:active {
+    transform: translateY(0);
+}
+</style>
diff --git a/src/layout/melissa/MelissaCronometro.vue b/src/layout/melissa/MelissaCronometro.vue
new file mode 100644
index 0000000..847c991
--- /dev/null
+++ b/src/layout/melissa/MelissaCronometro.vue
@@ -0,0 +1,620 @@
+<script setup>
+/*
+ * MelissaCronometro
+ * --------------------------------------------------
+ * Cronômetro de sessão estilo "janela do Windows":
+ *   - Dialog centralizado com select de paciente, display gigante e ações
+ *   - Click fora minimiza (chip no canto superior esquerdo)
+ *   - X/ESC fecha (destrói)
+ *   - Botão inferior alterna entre "▶ Começar" e "⏹ Parar"
+ *   - "+1 minuto" estende o tempo
+ *   - Quando minimizado, o timer continua rodando em background
+ *
+ * Uso:
+ *   <MelissaCronometro
+ *       ref="cronoRef"
+ *       :pacientes="lista"
+ *       default-paciente-id="p1"
+ *       :duracao-minutos="50"
+ *       @visible-change="cronoVisivel = $event"
+ *   />
+ *
+ *   cronoRef.value.abrir()   // abre / restaura
+ *   cronoRef.value.fechar()  // destrói
+ */
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue';
+import { playToque } from './melissaToques';
+
+const STORAGE_KEY = 'melissa.cronometro.v1';
+
+const props = defineProps({
+    pacientes: {
+        type: Array,
+        default: () => []
+        // Cada item: { id: string, nome: string }
+    },
+    defaultPacienteId: {
+        type: [String, Number, null],
+        default: null
+    },
+    duracaoMinutos: {
+        type: Number,
+        default: 50
+    },
+    toqueTermino: {
+        type: String,
+        default: 'sino'
+    }
+});
+
+const emit = defineEmits(['visible-change', 'close', 'complete']);
+
+// ── Estado interno ─────────────────────────────────────────────
+const exists = ref(false);
+const minimized = ref(false);
+const running = ref(false);
+const seconds = ref(props.duracaoMinutos * 60);
+const pacienteId = ref(props.defaultPacienteId);
+let timer = null;
+
+// True só durante a transição de minimizar (dialog → chip).
+// Permite trocar a animação leave do dialog por "shrink + fly to dock"
+// (tipo macOS minimize) em vez do lift normal usado pra fechar.
+const isMinimizing = ref(false);
+
+// ── Computeds ──────────────────────────────────────────────────
+const visible = computed(() => exists.value && !minimized.value);
+
+const dialogTransitionName = computed(() => (isMinimizing.value ? 'minimize' : 'lift'));
+
+const display = computed(() => {
+    const total = seconds.value;
+    const sign = total < 0 ? '-' : '';
+    const abs = Math.abs(total);
+    const m = Math.floor(abs / 60);
+    const s = abs % 60;
+    return `${sign}${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
+});
+
+const excedido = computed(() => seconds.value < 0);
+
+const status = computed(() => {
+    if (running.value) return 'Em andamento';
+    if (seconds.value === props.duracaoMinutos * 60) return 'Pronto';
+    return 'Pausado';
+});
+
+const pacienteNome = computed(() => {
+    if (!pacienteId.value) return 'Atividade livre';
+    const p = props.pacientes.find((x) => x.id === pacienteId.value);
+    return p ? p.nome : '';
+});
+
+// ── Watch: avisa parent quando dialog aparece/some ─────────────
+watch(visible, (v) => emit('visible-change', v));
+
+// ── Ações ──────────────────────────────────────────────────────
+function abrir() {
+    if (exists.value) {
+        // Já existe — apenas restaura se tava minimizado (não cria outro)
+        if (minimized.value) minimized.value = false;
+        return;
+    }
+    seconds.value = props.duracaoMinutos * 60;
+    pacienteId.value = props.defaultPacienteId;
+    running.value = false;
+    minimized.value = false;
+    exists.value = true;
+}
+
+function toggle() {
+    if (running.value) {
+        if (timer) clearInterval(timer);
+        timer = null;
+        running.value = false;
+    } else {
+        if (timer) clearInterval(timer);
+        timer = setInterval(() => {
+            const wasPositive = seconds.value > 0;
+            seconds.value -= 1;
+            // Toca exatamente na transição positivo → zero/negativo (uma única vez)
+            if (wasPositive && seconds.value <= 0) {
+                playToque(props.toqueTermino);
+            }
+        }, 1000);
+        running.value = true;
+    }
+}
+
+function minimizar() {
+    isMinimizing.value = true;
+    minimized.value = true;
+    // Reset do flag depois da animação completar (340ms + buffer)
+    setTimeout(() => { isMinimizing.value = false; }, 380);
+}
+
+function restaurar() {
+    minimized.value = false;
+}
+
+function fechar() {
+    if (timer) clearInterval(timer);
+    timer = null;
+    running.value = false;
+    minimized.value = false;
+    exists.value = false;
+    emit('close');
+}
+
+function ajustarMinutos(delta) {
+    seconds.value += delta * 60;
+    // Re-baselina savedAt pra restore após reload pegar o novo valor correto
+    saveState();
+}
+
+// ── Persistência (localStorage) ────────────────────────────────
+// Snapshot inclui timestamp pra calcular elapsed real no restore —
+// caso o usuário recarregue/feche a aba enquanto o timer roda, ao
+// voltar o seconds reflete o tempo real (a sessão acontece na sala,
+// não na aba).
+function saveState() {
+    if (!exists.value) {
+        try { localStorage.removeItem(STORAGE_KEY); } catch {}
+        return;
+    }
+    const snap = {
+        pacienteId: pacienteId.value,
+        minimized: !!minimized.value,
+        running: !!running.value,
+        seconds: seconds.value,
+        savedAt: Date.now()
+    };
+    try { localStorage.setItem(STORAGE_KEY, JSON.stringify(snap)); } catch {}
+}
+
+function loadState() {
+    let raw;
+    try { raw = localStorage.getItem(STORAGE_KEY); } catch { return false; }
+    if (!raw) return false;
+
+    let snap;
+    try { snap = JSON.parse(raw); } catch { return false; }
+    if (!snap || typeof snap !== 'object') return false;
+
+    // Sanitização: cada campo do storage é input externo, não confiar
+    const validIds = new Set(props.pacientes.map((p) => p.id));
+    const pid = snap.pacienteId === null || validIds.has(snap.pacienteId)
+        ? snap.pacienteId
+        : props.defaultPacienteId;
+
+    const savedSeconds = Number(snap.seconds);
+    if (!Number.isFinite(savedSeconds)) return false;
+
+    const savedAt = Number(snap.savedAt);
+    const wasRunning = !!snap.running;
+
+    // Se rodava, desconta tempo real desde o save (limite 24h pra evitar abuso de relógio)
+    let restoredSeconds = savedSeconds;
+    if (wasRunning && Number.isFinite(savedAt)) {
+        const elapsed = Math.max(0, Math.min(86400, Math.floor((Date.now() - savedAt) / 1000)));
+        restoredSeconds = savedSeconds - elapsed;
+    }
+
+    pacienteId.value = pid;
+    minimized.value = !!snap.minimized;
+    seconds.value = restoredSeconds;
+    exists.value = true;
+    running.value = false; // toggle abaixo flipa pra true
+
+    if (wasRunning) {
+        // Retoma o interval. NÃO toca o toque retroativo — se o tempo
+        // já está negativo no restore, foi "perdido" durante o reload.
+        toggle();
+    }
+    return true;
+}
+
+// Watch nas mudanças de estado discreto (não em seconds enquanto roda — savedAt+delta dá conta)
+watch([exists, minimized, running, pacienteId], () => saveState());
+
+// ── Mount / Cleanup ────────────────────────────────────────────
+onMounted(() => {
+    loadState();
+});
+
+onBeforeUnmount(() => {
+    if (timer) clearInterval(timer);
+});
+
+defineExpose({ abrir, fechar, minimizar, restaurar, toggle, visible });
+</script>
+
+<template>
+    <!-- Dialog centralizado.
+         Transition name dinâmico: 'minimize' quando user minimiza (anima
+         shrink + fly em direção ao dock no bottom-left), 'lift' default
+         pros outros casos (fechar, abrir). -->
+    <Transition :name="dialogTransitionName">
+        <div v-if="visible" class="mc-layer" @click.self="minimizar">
+            <div class="mc-panel">
+                <div class="flex items-center justify-between mb-5">
+                    <div>
+                        <div class="text-white/55 text-xs uppercase tracking-[0.2em]">Cronômetro</div>
+                        <div class="text-white text-lg font-light mt-1">{{ status }}</div>
+                    </div>
+                    <div class="flex items-center gap-1.5">
+                        <button class="mc-glass-btn" title="Minimizar" @click="minimizar">
+                            <i class="pi pi-window-minimize text-white/90 text-xs" />
+                        </button>
+                        <button class="mc-glass-btn" title="Fechar" @click="fechar">
+                            <i class="pi pi-times text-white/90 text-sm" />
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Select de paciente / atividade -->
+                <div class="mb-6">
+                    <label class="text-[0.65rem] uppercase tracking-widest text-white/50 mb-2 block">
+                        Paciente / atividade
+                    </label>
+                    <div class="relative">
+                        <select v-model="pacienteId" class="mc-select">
+                            <option :value="null">— Atividade livre (sem paciente)</option>
+                            <option v-for="p in pacientes" :key="p.id" :value="p.id">
+                                {{ p.nome }}
+                            </option>
+                        </select>
+                        <i class="pi pi-chevron-down mc-select-icon" />
+                    </div>
+                </div>
+
+                <!-- Display gigante + steppers manuais (+5 / -5) -->
+                <div class="mb-7">
+                    <div class="flex items-center justify-center gap-4">
+                        <div class="flex flex-col gap-1.5">
+                            <button
+                                class="mc-step-btn"
+                                title="Adicionar 5 minutos"
+                                @click="ajustarMinutos(5)"
+                            >
+                                +5
+                            </button>
+                            <button
+                                class="mc-step-btn"
+                                title="Remover 5 minutos"
+                                :disabled="excedido"
+                                @click="ajustarMinutos(-5)"
+                            >
+                                −5
+                            </button>
+                        </div>
+                        <div class="mc-display" :class="{ 'is-excedido': excedido }">
+                            {{ display }}
+                        </div>
+                    </div>
+                    <div class="text-xs mt-2 text-center" :class="excedido ? 'text-red-400 font-medium' : 'text-white/50'">
+                        {{ excedido ? 'tempo excedido' : 'tempo restante' }}
+                    </div>
+                </div>
+
+                <!-- Ações -->
+                <div class="flex gap-3">
+                    <button class="mc-btn mc-btn--secondary flex-1" @click="ajustarMinutos(1)">
+                        +1 minuto
+                    </button>
+                    <button
+                        class="mc-btn flex-1"
+                        :class="running ? 'mc-btn--danger' : 'mc-btn--primary'"
+                        @click="toggle"
+                    >
+                        <i :class="running ? 'pi pi-stop-circle' : 'pi pi-play'" class="text-xs" />
+                        {{ running ? 'Parar' : 'Começar' }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </Transition>
+
+    <!-- Chip minimizado — teleporta pro .melissa-dock (taskbar Win11
+         no bottom). Vive ao lado do ψ (à direita dele, dentro do flex
+         do dock). Transition envolve o Teleport (pattern oficial Vue):
+         o Teleport some/aparece como unidade, sem deixar comment
+         placeholder no target compartilhado — o que evitaria o bug
+         "emitsOptions: null" causado por múltiplos Teleports + v-if
+         interno apontando pro mesmo target. -->
+    <Transition name="chip-pop">
+        <Teleport v-if="exists && minimized" to=".melissa-dock">
+            <button
+                class="mc-chip"
+                title="Restaurar cronômetro"
+                @click="restaurar"
+            >
+                <i
+                    class="pi pi-stopwatch text-sm"
+                    :class="running ? 'text-emerald-300 mc-chip-pulse' : 'text-white/70'"
+                />
+                <span class="mc-chip-time" :class="{ 'text-red-300': excedido }">
+                    {{ display }}
+                </span>
+                <span class="mc-chip-name">{{ pacienteNome }}</span>
+            </button>
+        </Teleport>
+    </Transition>
+</template>
+
+<style scoped>
+/* ─── Dialog ───────────────────────────────────────────────── */
+.mc-layer {
+    position: fixed;
+    inset: 0;
+    z-index: 60;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+}
+.mc-panel {
+    width: min(420px, 100%);
+    background: var(--m-bg-medium);
+    backdrop-filter: blur(32px) saturate(160%);
+    -webkit-backdrop-filter: blur(32px) saturate(160%);
+    border: 1px solid var(--m-border-strong);
+    border-radius: 22px;
+    padding: 1.75rem;
+    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
+    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+}
+
+.mc-glass-btn {
+    width: 36px;
+    height: 36px;
+    display: grid;
+    place-items: center;
+    background: var(--m-bg-soft);
+    backdrop-filter: blur(20px);
+    border: 1px solid var(--m-border-strong);
+    border-radius: 9999px;
+    cursor: pointer;
+    transition: background-color 160ms ease;
+}
+.mc-glass-btn:hover {
+    background: var(--m-bg-soft-hover);
+}
+
+/* ─── Select customizado ───────────────────────────────────── */
+.mc-select {
+    width: 100%;
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border-strong);
+    color: var(--m-text);
+    padding: 11px 38px 11px 14px;
+    border-radius: 10px;
+    font-size: 0.95rem;
+    font-family: inherit;
+    outline: none;
+    appearance: none;
+    -webkit-appearance: none;
+    cursor: pointer;
+    transition: border-color 140ms ease, background-color 140ms ease;
+}
+.mc-select:hover {
+    background: var(--m-bg-soft-hover);
+}
+.mc-select:focus {
+    border-color: var(--m-border-strong);
+}
+.mc-select option {
+    /* renderizado pelo OS — usa tokens semânticos pra acompanhar dark/light */
+    background: var(--p-content-background);
+    color: var(--m-text);
+}
+.mc-select-icon {
+    position: absolute;
+    right: 14px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--m-text-muted);
+    font-size: 0.7rem;
+    pointer-events: none;
+}
+
+/* ─── Display gigante ──────────────────────────────────────── */
+.mc-display {
+    font-size: 5rem;
+    font-weight: 200;
+    line-height: 1;
+    letter-spacing: -0.04em;
+    color: var(--m-text);
+    font-variant-numeric: tabular-nums;
+    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+    transition: color 200ms ease;
+}
+.mc-display.is-excedido {
+    color: #ef4444;
+    text-shadow: 0 4px 24px rgba(239, 68, 68, 0.45);
+    animation: mc-excedido-pulse 1.4s ease-in-out infinite;
+}
+@keyframes mc-excedido-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.65; }
+}
+
+/* ─── Steppers manuais (+5 / -5) ───────────────────────────── */
+.mc-step-btn {
+    width: 44px;
+    height: 36px;
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border-strong);
+    color: var(--m-text);
+    border-radius: 8px;
+    font-size: 0.85rem;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    font-family: inherit;
+    cursor: pointer;
+    transition: background-color 140ms ease, border-color 140ms ease, transform 100ms ease;
+}
+.mc-step-btn:hover {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+}
+.mc-step-btn:active {
+    transform: scale(0.96);
+}
+.mc-step-btn:disabled {
+    background: var(--m-bg-soft);
+    border-color: var(--m-border);
+    color: var(--m-text-faint);
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+/* ─── Botões de ação ───────────────────────────────────────── */
+.mc-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    padding: 12px 14px;
+    border-radius: 12px;
+    font-size: 0.9rem;
+    font-weight: 500;
+    font-family: inherit;
+    cursor: pointer;
+    transition: background-color 140ms ease, border-color 140ms ease;
+}
+.mc-btn--secondary {
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border-strong);
+    color: var(--m-text);
+}
+.mc-btn--secondary:hover {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+}
+.mc-btn--primary {
+    background: var(--m-accent);
+    border: 1px solid var(--m-accent);
+    color: var(--p-primary-contrast-color, white);
+}
+.mc-btn--primary:hover {
+    background: color-mix(in srgb, var(--m-accent) 80%, white);
+}
+.mc-btn--danger {
+    background: rgba(239, 68, 68, 0.55);
+    border: 1px solid rgba(239, 68, 68, 0.7);
+    color: white;
+}
+.mc-btn--danger:hover {
+    background: rgba(239, 68, 68, 0.75);
+}
+
+/* ─── Chip minimizado (teleportado pro .melissa-dock) ──────
+   Vive como filho flex do dock — não usa position fixed. Dock
+   posiciona ele à esquerda (depois do ψ, via padding-left). */
+.mc-chip {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 14px 8px 12px;
+    background: var(--m-bg-medium);
+    backdrop-filter: blur(24px) saturate(160%);
+    -webkit-backdrop-filter: blur(24px) saturate(160%);
+    border: 1px solid var(--m-border-strong);
+    border-radius: 9999px;
+    color: var(--m-text);
+    cursor: pointer;
+    transition: background-color 200ms ease, transform 200ms ease, border-color 200ms ease;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+}
+.mc-chip:hover {
+    background: var(--m-bg-medium);
+    transform: translateY(-2px);
+    border-color: var(--m-border-strong);
+}
+.mc-chip-time {
+    font-variant-numeric: tabular-nums;
+    font-weight: 500;
+    font-size: 0.85rem;
+}
+.mc-chip-name {
+    font-size: 0.72rem;
+    color: var(--m-text-muted);
+    max-width: 140px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding-left: 6px;
+    border-left: 1px solid var(--m-border-strong);
+}
+.mc-chip-pulse {
+    animation: mc-pulse 1.6s ease-in-out infinite;
+}
+@keyframes mc-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.4; }
+}
+
+/* ─── Transições ───────────────────────────────────────────── */
+.lift-enter-active,
+.lift-leave-active {
+    transition: opacity 240ms ease, transform 280ms cubic-bezier(0.2, 0.7, 0.3, 1);
+}
+.lift-enter-from {
+    opacity: 0;
+    transform: scale(0.96) translateY(12px);
+}
+.lift-leave-to {
+    opacity: 0;
+    transform: scale(0.98) translateY(8px);
+}
+
+.chip-pop-enter-active,
+.chip-pop-leave-active {
+    transition: opacity 200ms ease, transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
+}
+.chip-pop-enter-from,
+.chip-pop-leave-to {
+    opacity: 0;
+    transform: scale(0.85) translateY(-8px);
+}
+/* Chip aparecendo após minimize: leve atraso pra deixar o dialog
+   "voar" antes de aparecer no dock (sensação macOS) */
+.chip-pop-enter-active {
+    transition-delay: 120ms;
+}
+
+/* ─── Animação "minimize" (macOS-style): dialog encolhe + voa pro
+   bottom-left em direção ao chip que vai aparecer no dock. Aplicada
+   só durante minimizar() — fechar normal usa lift. ────────────── */
+.minimize-enter-active,
+.minimize-leave-active {
+    transition: opacity 280ms ease, transform 340ms cubic-bezier(0.5, 0, 0.6, 1);
+    /* origem ~= posição do chip no dock (left:96px após ψ, bottom centro
+       da faixa de 76px = ~38px). Faz o scale "encolher em direção" lá. */
+    transform-origin: 96px calc(100% - 38px);
+}
+.minimize-enter-from {
+    opacity: 0;
+    transform: scale(0.05);
+}
+.minimize-leave-to {
+    opacity: 0;
+    transform: scale(0.05);
+}
+
+/* ─── Light mode tweaks ────────────────────────────────────
+   Texto já usa var(--m-text) (flipa automático), mas alguns
+   shadows escuros agressivos precisam ser suavizados. */
+html:not(.app-dark) .mc-display {
+    text-shadow: none;
+}
+html:not(.app-dark) .mc-chip {
+    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.06);
+}
+html:not(.app-dark) .mc-panel {
+    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);
+}
+</style>
diff --git a/src/layout/melissa/MelissaLayout.vue b/src/layout/melissa/MelissaLayout.vue
new file mode 100644
index 0000000..3b48926
--- /dev/null
+++ b/src/layout/melissa/MelissaLayout.vue
@@ -0,0 +1,2106 @@
+<script setup>
+/*
+ * MelissaLayout — Layout "lockscreen" (Direção B do redesign)
+ * --------------------------------------------------
+ * Tela-resumo (zen, info passiva) com botão único no canto inferior
+ * esquerdo que sobe um workspace por cima (com blur+dim no fundo).
+ *
+ * Status atual: arquivo único contendo TODA a experiência Melissa
+ * (background + resumo + overlays). Em fases futuras será dividido em:
+ *   - MelissaLayout.vue (wrapper: bg + dim + ψ + overlays + slot)
+ *   - MelissaResumo.vue (conteúdo do resumo: clock, greeting, timeline, cards)
+ *
+ * Dados ainda em mock. Próxima fase pluga Supabase.
+ *
+ * Rota atual (sandbox): /preview/melissa
+ */
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue';
+import MelissaCronometro from './MelissaCronometro.vue';
+import MelissaCard from './MelissaCard.vue';
+import MelissaBusca from './MelissaBusca.vue';
+import MelissaMenu from './MelissaMenu.vue';
+import MelissaAgenda from './MelissaAgenda.vue';
+import { TOQUES, playToque } from './melissaToques';
+import { useMelissaPacientes } from './composables/useMelissaPacientes';
+import { useMelissaEventosHoje } from './composables/useMelissaEventos';
+
+// Pacientes ativos do tenant (real, via Supabase)
+const { pacientes: pacientesReais, refetch: refetchPacientes } = useMelissaPacientes();
+// Eventos reais de hoje — alimenta timeline + cards + busca + "Hoje há"
+const { eventos: eventosHojeReais } = useMelissaEventosHoje();
+
+// ───────────────────────────────────────────────────────────────
+// Catálogo de cards do resumo (extensível — novos cards entram aqui)
+// ───────────────────────────────────────────────────────────────
+const CARDS_CATALOG = [
+    { id: 'proximo-paciente', label: 'Próximo paciente', icon: 'pi pi-user', implementado: true },
+    { id: 'whatsapp', label: 'WhatsApp', icon: 'pi pi-whatsapp', implementado: true },
+    { id: 'recebiveis', label: 'Recebíveis hoje', icon: 'pi pi-wallet', implementado: true },
+    { id: 'copilot', label: 'Sugestão Copilot', icon: 'pi pi-sparkles', implementado: true },
+    { id: 'agenda-amanha', label: 'Agenda de amanhã', icon: 'pi pi-calendar', implementado: false },
+    { id: 'aniversariantes', label: 'Aniversariantes', icon: 'pi pi-gift', implementado: false },
+    { id: 'faltas-recentes', label: 'Faltas recentes', icon: 'pi pi-exclamation-circle', implementado: false },
+    { id: 'tempo-resposta', label: 'Tempo médio de resposta', icon: 'pi pi-stopwatch', implementado: false }
+];
+const CARD_IDS = new Set(CARDS_CATALOG.map((c) => c.id));
+
+// User config — quais cards estão ativos e em que ordem; modo de visualização
+const cardsAtivos = ref(['proximo-paciente', 'whatsapp', 'recebiveis', 'copilot']);
+const cardsLayout = ref('linha-unica'); // 'linha-unica' | 'duas-linhas'
+const centralOpen = ref(false);
+
+function toggleCardAtivo(id) {
+    const idx = cardsAtivos.value.indexOf(id);
+    if (idx >= 0) cardsAtivos.value.splice(idx, 1);
+    else cardsAtivos.value.push(id);
+}
+
+function getCatalogItem(id) {
+    return CARDS_CATALOG.find((c) => c.id === id);
+}
+
+// ───────────────────────────────────────────────────────────────
+// Seções (overlay sobre o resumo — não saem do layout Melissa)
+// ───────────────────────────────────────────────────────────────
+const SECOES = {
+    agenda: { label: 'Agenda', icon: 'pi pi-calendar', descricao: 'Sessões agendadas, recorrências, compromissos especiais.' },
+    pacientes: { label: 'Pacientes', icon: 'pi pi-users', descricao: 'Cadastro, grupos, tags, prontuários e histórico.' },
+    conversas: { label: 'WhatsApp', icon: 'pi pi-whatsapp', descricao: 'Conversas em andamento, templates, automações e status.' },
+    prontuarios: { label: 'Prontuários', icon: 'pi pi-file', descricao: 'Documentos clínicos, modelos e histórico por paciente.' },
+    financeiro: { label: 'Financeiro', icon: 'pi pi-wallet', descricao: 'Recebíveis, lançamentos, relatórios e conciliação.' },
+    configuracoes: { label: 'Configurações', icon: 'pi pi-cog', descricao: 'Preferências, integrações e equipe.' },
+    copilot: { label: 'Copilot', icon: 'pi pi-sparkles', descricao: 'Insights da IA, sugestões e automações inteligentes.' },
+    // Sub-itens da categoria "Agenda e Pacientes" do menu
+    'cadastros-recebidos': { label: 'Cadastros recebidos', icon: 'pi pi-inbox', descricao: 'Solicitações vindas do agendador online.' },
+    recorrencias: { label: 'Recorrências', icon: 'pi pi-sync', descricao: 'Sessões recorrentes e séries semanais.' },
+    compromissos: { label: 'Compromissos determinados', icon: 'pi pi-flag', descricao: 'Compromissos especiais com janelas próprias.' },
+    grupos: { label: 'Grupos de pacientes', icon: 'pi pi-th-large', descricao: 'Categorize pacientes por grupos.' },
+    tags: { label: 'Tags', icon: 'pi pi-tag', descricao: 'Etiquetas livres pra organizar pacientes.' },
+    medicos: { label: 'Médicos e referências', icon: 'pi pi-user-edit', descricao: 'Profissionais que encaminham ou recebem pacientes.' }
+};
+
+const secaoAberta = ref(null); // chave em SECOES, ou null
+
+function abrirSecao(key) {
+    // Fecha overlays paralelos pra evitar empilhamento
+    workspaceOpen.value = false;
+    eventoSelecionado.value = null;
+    secaoAberta.value = key;
+}
+function fecharSecao() {
+    secaoAberta.value = null;
+}
+
+// Prefs de layout/UI (toque, fundo, opacidade, formato hora)
+// TODO: migrar pra configs do tenant — hoje só localStorage pra survive refresh
+const LAYOUT_STORAGE_KEY = 'melissa.layout.v1';
+const TOQUE_IDS = new Set(TOQUES.map((t) => t.id));
+
+// ───────────────────────────────────────────────────────────────
+// Relógio (atualiza a cada segundo)
+// ───────────────────────────────────────────────────────────────
+const now = ref(new Date());
+let clockTimer = null;
+
+onMounted(() => {
+    clockTimer = setInterval(() => (now.value = new Date()), 1000);
+    window.addEventListener('keydown', onKeydown);
+});
+onBeforeUnmount(() => {
+    if (clockTimer) clearInterval(clockTimer);
+    window.removeEventListener('keydown', onKeydown);
+});
+
+const use24h = ref(true);
+const horaFormatada = computed(() => {
+    const d = now.value;
+    if (use24h.value) {
+        return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
+    }
+    let h = d.getHours();
+    const ampm = h >= 12 ? 'PM' : 'AM';
+    h = h % 12 || 12;
+    return `${h}:${String(d.getMinutes()).padStart(2, '0')} ${ampm}`;
+});
+
+const dataExtenso = computed(() => {
+    return now.value.toLocaleDateString('pt-BR', {
+        weekday: 'long',
+        day: 'numeric',
+        month: 'long'
+    });
+});
+
+const saudacao = computed(() => {
+    const h = now.value.getHours();
+    if (h >= 5 && h < 12) return 'Bom dia';
+    if (h >= 12 && h < 18) return 'Boa tarde';
+    return 'Boa noite';
+});
+
+// ───────────────────────────────────────────────────────────────
+// Background customizável
+// ───────────────────────────────────────────────────────────────
+const bgUrl = ref(''); // vazio = usa gradiente default
+const overlayOpacity = ref(0.35); // 0–0.8
+const fileInput = ref(null);
+
+function pickFile() {
+    fileInput.value?.click();
+}
+function onFileChange(e) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = (ev) => (bgUrl.value = ev.target.result);
+    reader.readAsDataURL(file);
+}
+function clearBg() {
+    bgUrl.value = '';
+}
+
+const bgStyle = computed(() => {
+    if (bgUrl.value) {
+        return {
+            backgroundImage: `url(${bgUrl.value})`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center'
+        };
+    }
+    // Default: gradiente "Bloom"-ish (Win11) — cores vêm de CSS vars que flipam
+    // automaticamente com dark/light AND seguem o preset escolhido (ver style
+    // global no fim do arquivo: --bloom-c1/c2/base-1/base-2).
+    return {
+        backgroundImage:
+            'radial-gradient(circle at 70% 30%, var(--bloom-c1) 0%, transparent 55%), radial-gradient(circle at 25% 75%, var(--bloom-c2) 0%, transparent 50%), linear-gradient(135deg, var(--bloom-base-1) 0%, var(--bloom-base-2) 50%, var(--bloom-base-1) 100%)',
+        backgroundSize: 'cover'
+    };
+});
+
+// ───────────────────────────────────────────────────────────────
+// Settings popover (canto superior direito)
+// ───────────────────────────────────────────────────────────────
+const settingsOpen = ref(false);
+
+// ───────────────────────────────────────────────────────────────
+// Mock — Timeline horizontal (8h às 20h)
+// ───────────────────────────────────────────────────────────────
+const HORA_INICIO = 8;
+const HORA_FIM = 20;
+const hoursRange = computed(() => {
+    const arr = [];
+    for (let h = HORA_INICIO; h <= HORA_FIM; h++) arr.push(h);
+    return arr;
+});
+
+// timelineEvents removido — agora usa `eventosHojeReais` (Supabase)
+// Pra debug: ver useMelissaEventos.js em src/layout/melissa/composables/
+
+function fmtHora(h) {
+    const horas = Math.floor(h);
+    const mins = Math.round((h - horas) * 60);
+    return `${String(horas).padStart(2, '0')}:${String(mins).padStart(2, '0')}`;
+}
+
+function tipoLabel(tipo) {
+    const map = { sessao: 'Atendimento', supervisao: 'Supervisão', reuniao: 'Reunião' };
+    return map[tipo] || tipo;
+}
+
+// Contagens por tipo + frase resumo do dia
+const contagensDia = computed(() => {
+    const c = { sessao: 0, supervisao: 0, reuniao: 0 };
+    for (const ev of eventosHojeReais.value) c[ev.tipo] = (c[ev.tipo] || 0) + 1;
+    return c;
+});
+
+function pluralizar(n, singular, plural) {
+    return `${n} ${n === 1 ? singular : plural}`;
+}
+
+// Partes estruturadas pro template renderizar cada contagem como link clicável
+const resumoPartes = computed(() => {
+    const c = contagensDia.value;
+    const partes = [];
+    if (c.sessao > 0) partes.push({ tipo: 'sessao', text: pluralizar(c.sessao, 'atendimento', 'atendimentos') });
+    if (c.supervisao > 0) partes.push({ tipo: 'supervisao', text: pluralizar(c.supervisao, 'supervisão', 'supervisões') });
+    if (c.reuniao > 0) partes.push({ tipo: 'reuniao', text: pluralizar(c.reuniao, 'reunião', 'reuniões') });
+    return partes;
+});
+
+// Evento selecionado (dialog de detalhes)
+const eventoSelecionado = ref(null);
+function abrirEvento(ev) {
+    eventoSelecionado.value = ev;
+}
+function fecharEvento() {
+    eventoSelecionado.value = null;
+}
+
+// Filtro da timeline por tipo (clicado a partir do resumo)
+const filtroTipo = ref(null);
+function toggleFiltro(tipo) {
+    filtroTipo.value = filtroTipo.value === tipo ? null : tipo;
+}
+function limparFiltro() {
+    filtroTipo.value = null;
+}
+
+const eventosVisiveis = computed(() => {
+    if (!filtroTipo.value) return eventosHojeReais.value;
+    return eventosHojeReais.value.filter((ev) => ev.tipo === filtroTipo.value);
+});
+
+const filtroLabel = computed(() => {
+    if (!filtroTipo.value) return '';
+    const map = { sessao: 'atendimentos', supervisao: 'supervisões', reuniao: 'reuniões' };
+    return map[filtroTipo.value] || '';
+});
+
+function eventStyle(ev) {
+    const total = HORA_FIM - HORA_INICIO;
+    const left = ((ev.startH - HORA_INICIO) / total) * 100;
+    const width = ((ev.endH - ev.startH) / total) * 100;
+    return {
+        left: `${left}%`,
+        width: `${width}%`,
+        backgroundColor: ev.color
+    };
+}
+
+const nowCursorLeft = computed(() => {
+    const d = now.value;
+    const h = d.getHours() + d.getMinutes() / 60;
+    if (h < HORA_INICIO || h > HORA_FIM) return '-100%';
+    const total = HORA_FIM - HORA_INICIO;
+    return `${((h - HORA_INICIO) / total) * 100}%`;
+});
+
+// Visualização vertical (< lg) — tipo calendário "dia"
+const VT_HOUR_PX = 48; // altura de cada slot de hora em px
+function eventStyleVertical(ev) {
+    return {
+        top: `${(ev.startH - HORA_INICIO) * VT_HOUR_PX}px`,
+        height: `${(ev.endH - ev.startH) * VT_HOUR_PX}px`,
+        backgroundColor: ev.color
+    };
+}
+const nowCursorTop = computed(() => {
+    const d = now.value;
+    const h = d.getHours() + d.getMinutes() / 60;
+    if (h < HORA_INICIO || h > HORA_FIM) return '-100%';
+    return `${(h - HORA_INICIO) * VT_HOUR_PX}px`;
+});
+
+// ───────────────────────────────────────────────────────────────
+// Mock — 4 cards
+// ───────────────────────────────────────────────────────────────
+const proximoPaciente = {
+    nome: 'Marina Silva',
+    iniciais: 'MS',
+    emMin: 23,
+    horario: '09:00'
+};
+
+const whatsappPendente = {
+    count: 3,
+    ultimaMsg: '"Doutor, posso remarcar pra quinta?"',
+    ultimoNome: 'Pedro Costa'
+};
+
+const recebiveis = {
+    previsto: 1450,
+    recebido: 800,
+    sessoes: 6,
+    sessoesPagas: 3
+};
+const recebidoPct = computed(() => Math.round((recebiveis.recebido / recebiveis.previsto) * 100));
+
+const copilotInsight = {
+    titulo: 'Paciente sem retorno',
+    texto: 'Carlos M. não agenda há 32 dias — última sessão sugeria continuidade.',
+    acao: 'Enviar mensagem'
+};
+
+function brl(v) {
+    return v.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
+}
+
+// ───────────────────────────────────────────────────────────────
+// Cronômetro de sessão (componente externo)
+// ───────────────────────────────────────────────────────────────
+// TODO: vir das configurações do tenant (página /configuracoes já existe)
+const CONFIG_DURACAO_MIN = 50;
+
+// pacientesMock removido — agora usa `pacientesReais` (composable Supabase).
+// Mantido como fallback comentado pra debug rápido em dev se precisar:
+// const pacientesMock = [{ id: 'p1', nome: 'Marina Silva' }, ...];
+
+const cronoRef = ref(null);
+const cronoVisible = ref(false); // sincronizado via @visible-change
+const toqueTermino = ref('sino'); // TODO: persistir nas configs do tenant
+
+function abrirCronometro() {
+    cronoRef.value?.abrir();
+}
+function fecharCronometro() {
+    cronoRef.value?.fechar();
+}
+function testarToque() {
+    playToque(toqueTermino.value);
+}
+
+// ───────────────────────────────────────────────────────────────
+// Persistência de prefs UI (localStorage)
+// Só sobrevive a refresh; vai migrar pras configs do tenant depois.
+// ───────────────────────────────────────────────────────────────
+function saveLayoutPrefs() {
+    const prefs = {
+        toqueTermino: toqueTermino.value,
+        overlayOpacity: overlayOpacity.value,
+        use24h: use24h.value,
+        bgUrl: bgUrl.value || '',
+        cardsAtivos: cardsAtivos.value,
+        cardsLayout: cardsLayout.value
+    };
+    try {
+        localStorage.setItem(LAYOUT_STORAGE_KEY, JSON.stringify(prefs));
+    } catch {
+        // Quota provavelmente estourou por causa do bgUrl (data URL grande).
+        // Tenta sem ele — as outras prefs são minúsculas.
+        try {
+            localStorage.setItem(LAYOUT_STORAGE_KEY, JSON.stringify({ ...prefs, bgUrl: '' }));
+        } catch {}
+    }
+}
+
+function loadLayoutPrefs() {
+    let raw;
+    try { raw = localStorage.getItem(LAYOUT_STORAGE_KEY); } catch { return; }
+    if (!raw) return;
+
+    let prefs;
+    try { prefs = JSON.parse(raw); } catch { return; }
+    if (!prefs || typeof prefs !== 'object') return;
+
+    // Sanitização — cada campo é input externo, não confiar
+    if (typeof prefs.toqueTermino === 'string' && TOQUE_IDS.has(prefs.toqueTermino)) {
+        toqueTermino.value = prefs.toqueTermino;
+    }
+    const op = Number(prefs.overlayOpacity);
+    if (Number.isFinite(op) && op >= 0 && op <= 0.8) {
+        overlayOpacity.value = op;
+    }
+    if (typeof prefs.use24h === 'boolean') {
+        use24h.value = prefs.use24h;
+    }
+    // bgUrl: aceita só data URL de imagem (evita injeção de URL externa via storage)
+    if (typeof prefs.bgUrl === 'string' && prefs.bgUrl.startsWith('data:image/')) {
+        bgUrl.value = prefs.bgUrl;
+    }
+    // cardsAtivos: filtra ids inválidos (catálogo pode ter mudado entre versões)
+    if (Array.isArray(prefs.cardsAtivos)) {
+        const valid = prefs.cardsAtivos.filter((id) => typeof id === 'string' && CARD_IDS.has(id));
+        if (valid.length > 0) cardsAtivos.value = valid;
+    }
+    if (prefs.cardsLayout === 'linha-unica' || prefs.cardsLayout === 'duas-linhas') {
+        cardsLayout.value = prefs.cardsLayout;
+    }
+}
+
+// Salva em qualquer mudança das prefs (deep no array de cardsAtivos pra pegar splice/push)
+watch(
+    [toqueTermino, overlayOpacity, use24h, bgUrl, cardsAtivos, cardsLayout],
+    saveLayoutPrefs,
+    { deep: true }
+);
+
+// Carrega antes do paint (use onMounted; o flash inicial é aceitável)
+onMounted(loadLayoutPrefs);
+
+// ───────────────────────────────────────────────────────────────
+// Workspace overlay
+// ───────────────────────────────────────────────────────────────
+const workspaceOpen = ref(false);
+
+function openWorkspace() {
+    workspaceOpen.value = true;
+}
+function closeWorkspace() {
+    workspaceOpen.value = false;
+}
+function toggleWorkspace() {
+    workspaceOpen.value ? closeWorkspace() : openWorkspace();
+}
+
+// Resumo recebe blur quando qualquer overlay tá aberto (cronômetro minimizado NÃO conta)
+const summaryDimmed = computed(
+    () => workspaceOpen.value
+        || cronoVisible.value
+        || !!eventoSelecionado.value
+        || !!secaoAberta.value
+        || centralOpen.value
+);
+
+function onKeydown(e) {
+    // Ctrl+\ ou ⌘+\ → abre/fecha workspace (psi-btn)
+    if ((e.ctrlKey || e.metaKey) && e.key === '\\') {
+        e.preventDefault();
+        toggleWorkspace();
+        return;
+    }
+
+    if (e.key !== 'Escape') return;
+    if (centralOpen.value) centralOpen.value = false;
+    else if (secaoAberta.value) fecharSecao();
+    else if (eventoSelecionado.value) fecharEvento();
+    else if (cronoVisible.value) fecharCronometro();
+    else if (workspaceOpen.value) closeWorkspace();
+    else if (settingsOpen.value) settingsOpen.value = false;
+}
+
+// modulos[] removido — MelissaMenu agora tem catálogo próprio (CATEGORIAS)
+</script>
+
+<template>
+    <div class="win11-root" :class="{ 'win11-has-photo': !!bgUrl }" :style="bgStyle">
+        <!-- Overlay escurecedor (controlado pelo slider) -->
+        <div class="win11-dim" :style="{ backgroundColor: `rgba(var(--m-dim-rgb), ${overlayOpacity})` }" />
+
+        <!-- ═══════════════════════════════════════════════════════ -->
+        <!-- PLANO DE TRÁS — Resumo (recebe blur quando workspace abre) -->
+        <!-- ═══════════════════════════════════════════════════════ -->
+        <div class="win11-summary" :class="{ 'is-behind': summaryDimmed }">
+            <!-- Botão settings (canto sup. direito) -->
+            <div class="absolute top-5 right-5 z-30">
+                <button
+                    class="glass-btn w-10 h-10 grid place-items-center"
+                    title="Personalizar"
+                    @click="settingsOpen = !settingsOpen"
+                >
+                    <i class="pi pi-cog text-white/90 text-base" />
+                </button>
+
+                <Transition name="settings-pop">
+                    <div
+                        v-if="settingsOpen"
+                        class="glass-panel absolute top-12 right-0 w-72 p-4 text-white/95"
+                    >
+                        <div class="text-xs uppercase tracking-widest text-white/60 mb-3">Personalização</div>
+
+                        <button
+                            class="w-full text-left px-3 py-2 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 mb-2 flex items-center gap-2 text-sm"
+                            @click="pickFile"
+                        >
+                            <i class="pi pi-image" />
+                            Trocar imagem de fundo
+                        </button>
+                        <button
+                            v-if="bgUrl"
+                            class="w-full text-left px-3 py-2 rounded-lg hover:bg-white/10 mb-3 flex items-center gap-2 text-sm text-white/70"
+                            @click="clearBg"
+                        >
+                            <i class="pi pi-refresh" />
+                            Voltar ao padrão
+                        </button>
+                        <input ref="fileInput" type="file" accept="image/*" hidden @change="onFileChange" />
+
+                        <div class="mb-3">
+                            <label class="text-xs text-white/60 mb-1.5 block">
+                                Opacidade do fundo: {{ Math.round(overlayOpacity * 100) }}%
+                            </label>
+                            <input
+                                v-model.number="overlayOpacity"
+                                type="range"
+                                min="0"
+                                max="0.8"
+                                step="0.05"
+                                class="w-full accent-white"
+                            />
+                        </div>
+
+                        <div class="mb-3">
+                            <label class="text-xs text-white/60 mb-1.5 block">Toque de término</label>
+                            <div class="flex gap-1.5">
+                                <select v-model="toqueTermino" class="settings-select flex-1">
+                                    <option v-for="t in TOQUES" :key="t.id" :value="t.id">
+                                        {{ t.label }}
+                                    </option>
+                                </select>
+                                <button
+                                    class="settings-test-btn"
+                                    title="Testar"
+                                    :disabled="toqueTermino === 'nenhum'"
+                                    @click="testarToque"
+                                >
+                                    <i class="pi pi-play text-[0.65rem]" />
+                                </button>
+                            </div>
+                        </div>
+
+                        <div class="flex items-center justify-between text-sm">
+                            <span class="text-white/80">Formato 24h</span>
+                            <button
+                                class="w-10 h-6 rounded-full transition-colors relative"
+                                :class="use24h ? 'bg-emerald-500' : 'bg-white/20'"
+                                @click="use24h = !use24h"
+                            >
+                                <span
+                                    class="absolute top-0.5 w-5 h-5 rounded-full bg-white transition-all"
+                                    :style="{ left: use24h ? '1.125rem' : '0.125rem' }"
+                                />
+                            </button>
+                        </div>
+                    </div>
+                </Transition>
+            </div>
+
+            <!-- Conteúdo central -->
+            <div class="win11-summary__inner">
+                <!-- Bloco hero: relógio + data + saudação -->
+                <header class="text-center text-white drop-shadow-lg select-none">
+                    <div class="inline-flex items-center gap-6">
+                        <div class="clock-display">{{ horaFormatada }}</div>
+                        <button
+                            class="crono-icon-btn"
+                            title="Cronômetro de sessão"
+                            @click="abrirCronometro"
+                        >
+                            <i class="pi pi-stopwatch text-xl text-white/85" />
+                        </button>
+                    </div>
+                    <div class="text-lg md:text-xl font-light tracking-wide text-white/90 mt-1 capitalize">
+                        {{ dataExtenso }}
+                    </div>
+                    <div class="text-2xl md:text-3xl font-light mt-6 text-white/95 tracking-tight">
+                        {{ saudacao }}, <span class="font-normal">Dr. Leonardo</span>.
+                    </div>
+                    <div class="text-base md:text-lg font-light text-white/70 mt-2 tracking-wide">
+                        <template v-if="resumoPartes.length === 0">
+                            Sua agenda está livre hoje.
+                        </template>
+                        <template v-else>
+                            Hoje há
+                            <template v-for="(p, i) in resumoPartes" :key="p.tipo">
+                                <button
+                                    type="button"
+                                    class="resumo-link"
+                                    :class="{ 'is-active': filtroTipo === p.tipo }"
+                                    @click="toggleFiltro(p.tipo)"
+                                >{{ p.text }}</button><span v-if="i < resumoPartes.length - 2">,&nbsp;</span><span v-else-if="i === resumoPartes.length - 2">&nbsp;e&nbsp;</span>
+                            </template>.
+                        </template>
+                    </div>
+                </header>
+
+                <!-- Busca rápida (entre o "Hoje há" e a timeline) -->
+                <MelissaBusca
+                    class="mt-8"
+                    :pacientes="pacientesReais"
+                    :eventos="eventosHojeReais"
+                    @acao="abrirSecao"
+                    @paciente="() => abrirSecao('pacientes')"
+                    @evento="abrirEvento"
+                />
+
+                <!-- Timeline horizontal -->
+                <section class="glass-panel mt-8 px-5 py-4 max-w-5xl w-full mx-auto">
+                    <div class="flex items-center justify-between mb-3">
+                        <div class="flex items-center gap-2 text-white/90 text-sm font-medium">
+                            <i class="pi pi-clock text-xs" />
+                            Linha do tempo — Hoje
+                            <button
+                                v-if="filtroTipo"
+                                type="button"
+                                class="filtro-chip"
+                                @click="limparFiltro"
+                                :title="`Mostrando apenas ${filtroLabel}. Clique pra mostrar tudo.`"
+                            >
+                                {{ filtroLabel }}
+                                <i class="pi pi-times text-[0.6rem]" />
+                            </button>
+                        </div>
+                        <div class="text-xs text-white/70 flex items-center gap-1.5">
+                            <span class="pulse-dot w-2.5 h-0.5 rounded-full bg-red-500" />
+                            Agora
+                        </div>
+                    </div>
+
+                    <!-- Horizontal (lg+) -->
+                    <div class="relative hidden lg:block">
+                        <div class="flex justify-between mb-1">
+                            <div v-for="h in hoursRange" :key="h" class="flex-1 text-left">
+                                <span class="text-[0.65rem] text-white/55 font-medium">{{ h }}h</span>
+                            </div>
+                        </div>
+                        <div class="relative h-9 bg-white/5 rounded-md overflow-visible border border-white/10">
+                            <div
+                                v-for="ev in eventosVisiveis"
+                                :key="ev.id"
+                                class="absolute h-[30px] rounded flex items-center px-2 overflow-hidden cursor-pointer min-w-[32px] hover:brightness-110 transition-[filter,opacity] duration-200 z-10"
+                                :style="eventStyle(ev)"
+                                :title="ev.label"
+                                @click="abrirEvento(ev)"
+                            >
+                                <span class="text-[0.8rem] font-semibold text-white truncate">{{ ev.label }}</span>
+                            </div>
+                            <div
+                                class="absolute top-0 h-full flex flex-col items-center pointer-events-none z-20"
+                                :style="{ left: nowCursorLeft }"
+                            >
+                                <div class="w-0.5 h-full bg-red-500 opacity-90" />
+                                <div class="absolute -top-0.5 w-[7px] h-[7px] rounded-full bg-red-500" />
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Vertical (< lg) — tipo calendário "dia" -->
+                    <div class="vt lg:hidden">
+                        <div
+                            v-for="h in hoursRange"
+                            :key="h"
+                            class="vt-row"
+                            :style="{ top: `${(h - HORA_INICIO) * VT_HOUR_PX}px` }"
+                        >
+                            <span class="vt-hour">{{ h }}h</span>
+                            <div class="vt-line" />
+                        </div>
+
+                        <div
+                            v-for="ev in eventosVisiveis"
+                            :key="ev.id"
+                            class="vt-event hover:brightness-110 transition-[filter,opacity] duration-200"
+                            :style="eventStyleVertical(ev)"
+                            :title="ev.label"
+                            @click="abrirEvento(ev)"
+                        >
+                            <div class="vt-event-time">
+                                {{ fmtHora(ev.startH) }} – {{ fmtHora(ev.endH) }}
+                            </div>
+                            <div class="vt-event-label">{{ ev.label }}</div>
+                        </div>
+
+                        <div class="vt-now" :style="{ top: nowCursorTop }">
+                            <div class="vt-now-dot" />
+                            <div class="vt-now-line" />
+                        </div>
+                    </div>
+                </section>
+
+                <!-- Cards (catálogo + ativos + layout switchável) -->
+                <section
+                    class="cards-shell mt-5 w-full mx-auto"
+                    :class="{ 'is-wrap': cardsLayout === 'duas-linhas' }"
+                >
+                    <div
+                        class="cards-row"
+                        :class="cardsLayout === 'linha-unica' ? 'cards-row--linha' : 'cards-row--wrap'"
+                    >
+                    <template v-for="cardId in cardsAtivos" :key="cardId">
+                        <!-- Próximo paciente -->
+                        <MelissaCard
+                            v-if="cardId === 'proximo-paciente'"
+                            icon="pi pi-user"
+                            icon-color="text-emerald-300"
+                            title="Próximo paciente"
+                            action-title="Abrir Pacientes"
+                            @open="abrirSecao('pacientes')"
+                        >
+                            <div class="flex items-center gap-3">
+                                <div class="w-12 h-12 rounded-full bg-emerald-500/30 border border-emerald-300/40 grid place-items-center text-white font-semibold">
+                                    {{ proximoPaciente.iniciais }}
+                                </div>
+                                <div class="min-w-0">
+                                    <div class="text-white font-medium truncate">{{ proximoPaciente.nome }}</div>
+                                    <div class="text-white/60 text-xs">
+                                        {{ proximoPaciente.horario }} · em {{ proximoPaciente.emMin }} min
+                                    </div>
+                                </div>
+                            </div>
+                        </MelissaCard>
+
+                        <!-- WhatsApp -->
+                        <MelissaCard
+                            v-else-if="cardId === 'whatsapp'"
+                            icon="pi pi-whatsapp"
+                            icon-color="text-green-300"
+                            title="WhatsApp"
+                            :badge="whatsappPendente.count"
+                            action-title="Abrir WhatsApp"
+                            @open="abrirSecao('conversas')"
+                        >
+                            <div class="text-white/85 text-xs italic line-clamp-2 leading-relaxed">
+                                {{ whatsappPendente.ultimaMsg }}
+                            </div>
+                            <div class="text-white/50 text-[0.7rem] mt-1">— {{ whatsappPendente.ultimoNome }}</div>
+                        </MelissaCard>
+
+                        <!-- Recebíveis -->
+                        <MelissaCard
+                            v-else-if="cardId === 'recebiveis'"
+                            icon="pi pi-wallet"
+                            icon-color="text-amber-300"
+                            title="Recebíveis hoje"
+                            action-title="Abrir Financeiro"
+                            @open="abrirSecao('financeiro')"
+                        >
+                            <div class="flex items-baseline gap-1.5">
+                                <span class="text-white text-xl font-medium">{{ brl(recebiveis.recebido) }}</span>
+                                <span class="text-white/50 text-xs">/ {{ brl(recebiveis.previsto) }}</span>
+                            </div>
+                            <div class="h-1.5 rounded-full bg-white/10 mt-2 overflow-hidden">
+                                <div
+                                    class="h-full bg-gradient-to-r from-amber-400 to-amber-300 transition-all"
+                                    :style="{ width: `${recebidoPct}%` }"
+                                />
+                            </div>
+                            <div class="text-white/55 text-[0.7rem] mt-1.5">
+                                {{ recebiveis.sessoesPagas }}/{{ recebiveis.sessoes }} sessões pagas
+                            </div>
+                        </MelissaCard>
+
+                        <!-- Copilot -->
+                        <MelissaCard
+                            v-else-if="cardId === 'copilot'"
+                            icon="pi pi-sparkles"
+                            icon-color="text-purple-300"
+                            title="Sugestão Copilot"
+                            action-title="Abrir Copilot"
+                            @open="abrirSecao('copilot')"
+                        >
+                            <div class="text-white/85 text-xs font-medium">{{ copilotInsight.titulo }}</div>
+                            <div class="text-white/65 text-[0.7rem] mt-1 leading-relaxed">
+                                {{ copilotInsight.texto }}
+                            </div>
+                        </MelissaCard>
+
+                        <!-- Card "em breve" — placeholder pra ids do catálogo ainda não implementados -->
+                        <MelissaCard
+                            v-else
+                            :icon="getCatalogItem(cardId)?.icon || 'pi pi-clock'"
+                            icon-color="text-white/40"
+                            :title="getCatalogItem(cardId)?.label || cardId"
+                            action-title="Em breve"
+                            @open="abrirSecao('configuracoes')"
+                        >
+                            <div class="text-white/40 text-xs italic">Em breve</div>
+                        </MelissaCard>
+                    </template>
+
+                    <!-- Em wrap: "+" segue o fluxo, ao final dos cards, com altura
+                         espelhada (flex align-items: stretch faz isso natural) -->
+                    <MelissaCard
+                        v-if="cardsLayout === 'duas-linhas'"
+                        variant="add"
+                        action-title="Personalizar cards"
+                        @add="centralOpen = true"
+                    />
+                    </div>
+
+                    <!-- Em linha única: "+" fora do scroll, sempre visível à direita -->
+                    <MelissaCard
+                        v-if="cardsLayout === 'linha-unica'"
+                        variant="add"
+                        action-title="Personalizar cards"
+                        @add="centralOpen = true"
+                    />
+                </section>
+            </div>
+
+        </div>
+        <!-- /win11-summary fecha aqui -->
+
+        <!-- Botão único ψ — FORA da summary (não recebe blur/pointer-none
+             quando overlays estão abertos; permanece sempre clicável).
+             Continua position:absolute (não é filho do dock), mas vive na
+             mesma faixa visual da .melissa-dock (ambos no bottom). -->
+        <button
+            class="psi-btn"
+            :title="workspaceOpen ? 'Fechar workspace (Ctrl + \\)' : 'Abrir workspace (Ctrl + \\)'"
+            @click="toggleWorkspace"
+        >
+            <span class="psi-glyph">ψ</span>
+            <span class="psi-kbd" aria-hidden="true">Ctrl \</span>
+        </button>
+
+        <!-- ═══════════════════════════════════════════════════════ -->
+        <!-- DOCK (taskbar Win11-style sem chrome) — receptáculo pra  -->
+        <!-- elementos minimizados (cronômetro, futuros). Transparent,-->
+        <!-- só os items são clicáveis. ψ vive ao lado (absolute).    -->
+        <!-- ═══════════════════════════════════════════════════════ -->
+        <div class="melissa-dock" />
+
+
+        <!-- ═══════════════════════════════════════════════════════ -->
+        <!-- MENU FLOAT (Win11-style Start) — abre via ψ ou Ctrl+\ -->
+        <!-- ═══════════════════════════════════════════════════════ -->
+        <Transition name="menu-rise">
+            <MelissaMenu
+                v-if="workspaceOpen"
+                :secao-ativa="secaoAberta"
+                @select="abrirSecao"
+                @close="closeWorkspace"
+            />
+        </Transition>
+
+        <!-- ═══════════════════════════════════════════════════════ -->
+        <!-- DIALOG — Evento da timeline (sessão / supervisão / reunião) -->
+        <!-- ═══════════════════════════════════════════════════════ -->
+        <Transition name="lift">
+            <div
+                v-if="eventoSelecionado"
+                class="evento-layer"
+                @click.self="fecharEvento"
+            >
+                <div class="evento-panel">
+                    <!-- Header -->
+                    <div class="flex items-start justify-between mb-5">
+                        <div class="flex items-center gap-3 min-w-0">
+                            <div class="evento-pill" :style="{ backgroundColor: eventoSelecionado.color }" />
+                            <div class="min-w-0">
+                                <div class="text-white/55 text-xs uppercase tracking-[0.2em]">
+                                    {{ tipoLabel(eventoSelecionado.tipo) }}
+                                </div>
+                                <div class="text-white text-lg font-light mt-1 truncate">
+                                    {{ eventoSelecionado.tipo === 'sessao'
+                                        ? eventoSelecionado.pacienteNome
+                                        : eventoSelecionado.label }}
+                                </div>
+                            </div>
+                        </div>
+                        <button
+                            class="glass-btn w-9 h-9 grid place-items-center shrink-0"
+                            title="Fechar (Esc)"
+                            @click="fecharEvento"
+                        >
+                            <i class="pi pi-times text-white/90 text-sm" />
+                        </button>
+                    </div>
+
+                    <!-- Conteúdo -->
+                    <div class="flex flex-col gap-3 mb-6">
+                        <div class="evento-row">
+                            <i class="pi pi-clock" />
+                            <span>{{ fmtHora(eventoSelecionado.startH) }} – {{ fmtHora(eventoSelecionado.endH) }}</span>
+                        </div>
+
+                        <template v-if="eventoSelecionado.tipo === 'sessao'">
+                            <div class="evento-row">
+                                <i class="pi pi-map-marker" />
+                                <span>{{ eventoSelecionado.modalidade }}</span>
+                            </div>
+                            <div class="evento-row">
+                                <i class="pi pi-dollar" />
+                                <span>R$ {{ eventoSelecionado.valor.toFixed(2).replace('.', ',') }}</span>
+                            </div>
+                            <div class="evento-row">
+                                <i class="pi pi-info-circle" />
+                                <span>{{ eventoSelecionado.status }}</span>
+                            </div>
+                        </template>
+
+                        <template v-else-if="eventoSelecionado.tipo === 'reuniao'">
+                            <div class="evento-row">
+                                <i class="pi pi-map-marker" />
+                                <span>{{ eventoSelecionado.local }}</span>
+                            </div>
+                            <div class="evento-row">
+                                <i class="pi pi-users" />
+                                <span>{{ eventoSelecionado.participantes }} participantes</span>
+                            </div>
+                            <div class="evento-desc">{{ eventoSelecionado.descricao }}</div>
+                        </template>
+
+                        <template v-else-if="eventoSelecionado.tipo === 'supervisao'">
+                            <div class="evento-row">
+                                <i class="pi pi-user" />
+                                <span>{{ eventoSelecionado.supervisorNome }}</span>
+                            </div>
+                            <div class="evento-row">
+                                <i class="pi pi-map-marker" />
+                                <span>{{ eventoSelecionado.local }}</span>
+                            </div>
+                            <div class="evento-desc">{{ eventoSelecionado.descricao }}</div>
+                        </template>
+                    </div>
+
+                    <!-- Ação principal -->
+                    <button class="evento-action" @click="fecharEvento">
+                        <template v-if="eventoSelecionado.tipo === 'sessao'">
+                            <i class="pi pi-file-edit text-xs" />
+                            Abrir prontuário
+                        </template>
+                        <template v-else>
+                            <i class="pi pi-info-circle text-xs" />
+                            Ver detalhes
+                        </template>
+                    </button>
+                </div>
+            </div>
+        </Transition>
+
+        <!-- ═══════════════════════════════════════════════════════ -->
+        <!-- CENTRAL DE CARDS — toggle de cards + modo de visualização -->
+        <!-- ═══════════════════════════════════════════════════════ -->
+        <Transition name="lift">
+            <div
+                v-if="centralOpen"
+                class="central-layer"
+                @click.self="centralOpen = false"
+            >
+                <div class="central-panel">
+                    <header class="flex items-start justify-between mb-5">
+                        <div>
+                            <div class="text-white/55 text-xs uppercase tracking-[0.2em]">Central de cards</div>
+                            <div class="text-white text-xl font-light mt-1">Personalize seu resumo</div>
+                        </div>
+                        <button
+                            class="glass-btn w-9 h-9 grid place-items-center shrink-0"
+                            title="Fechar (Esc)"
+                            @click="centralOpen = false"
+                        >
+                            <i class="pi pi-times text-white/90 text-sm" />
+                        </button>
+                    </header>
+
+                    <!-- Modo de visualização -->
+                    <div class="mb-5">
+                        <div class="text-[0.65rem] uppercase tracking-widest text-white/50 mb-2">Visualização</div>
+                        <div class="flex flex-col gap-2">
+                            <label class="central-radio">
+                                <input type="radio" v-model="cardsLayout" value="linha-unica" />
+                                <span>Linha única <span class="text-white/40">(scroll horizontal)</span></span>
+                            </label>
+                            <label class="central-radio">
+                                <input type="radio" v-model="cardsLayout" value="duas-linhas" />
+                                <span>Duas linhas <span class="text-white/40">(quebra automática)</span></span>
+                            </label>
+                        </div>
+                    </div>
+
+                    <!-- Cards disponíveis -->
+                    <div>
+                        <div class="text-[0.65rem] uppercase tracking-widest text-white/50 mb-2">
+                            Cards disponíveis
+                        </div>
+                        <div class="flex flex-col gap-1">
+                            <label
+                                v-for="c in CARDS_CATALOG"
+                                :key="c.id"
+                                class="central-card-row"
+                                :class="{ 'is-em-breve': !c.implementado }"
+                            >
+                                <input
+                                    type="checkbox"
+                                    :checked="cardsAtivos.includes(c.id)"
+                                    @change="toggleCardAtivo(c.id)"
+                                />
+                                <i :class="c.icon" class="text-white/70 w-4 text-center" />
+                                <span class="flex-1">{{ c.label }}</span>
+                                <span v-if="!c.implementado" class="text-[0.65rem] text-white/40">em breve</span>
+                            </label>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </Transition>
+
+        <!-- ═══════════════════════════════════════════════════════ -->
+        <!-- SESSÕES "promovidas" — páginas fullscreen dentro de Melissa -->
+        <!-- (não usam o dialog placeholder, viram páginas próprias) -->
+        <!-- ═══════════════════════════════════════════════════════ -->
+        <Transition name="page-fade">
+            <MelissaAgenda
+                v-if="secaoAberta === 'agenda'"
+                :pacientes="pacientesReais"
+                @select-evento="abrirEvento"
+                @close="fecharSecao"
+                @patient-created="refetchPacientes"
+            />
+        </Transition>
+
+        <!-- ═══════════════════════════════════════════════════════ -->
+        <!-- SEÇÃO — placeholder dialog pras sessões ainda não promovidas -->
+        <!-- (Pacientes, WhatsApp, Financeiro, Copilot...) -->
+        <!-- ═══════════════════════════════════════════════════════ -->
+        <Transition name="lift">
+            <div
+                v-if="secaoAberta && secaoAberta !== 'agenda'"
+                class="secao-layer"
+                @click.self="fecharSecao"
+            >
+                <div class="secao-panel">
+                    <header class="flex items-start justify-between mb-6">
+                        <div class="flex items-center gap-3 min-w-0">
+                            <div class="secao-icon">
+                                <i :class="SECOES[secaoAberta].icon" class="text-xl text-white/85" />
+                            </div>
+                            <div class="min-w-0">
+                                <div class="text-white/55 text-xs uppercase tracking-[0.2em]">Seção</div>
+                                <div class="text-white text-2xl font-light mt-1">
+                                    {{ SECOES[secaoAberta].label }}
+                                </div>
+                            </div>
+                        </div>
+                        <button
+                            class="glass-btn w-9 h-9 grid place-items-center shrink-0"
+                            title="Fechar (Esc)"
+                            @click="fecharSecao"
+                        >
+                            <i class="pi pi-times text-white/90 text-sm" />
+                        </button>
+                    </header>
+
+                    <div class="secao-body">
+                        <i :class="SECOES[secaoAberta].icon" class="secao-body-icon" />
+                        <div class="text-white/75 text-base font-light max-w-md text-center">
+                            {{ SECOES[secaoAberta].descricao }}
+                        </div>
+                        <div class="text-white/35 text-xs mt-3 text-center">
+                            Placeholder — aqui virá o módulo de {{ SECOES[secaoAberta].label }}.
+                        </div>
+                    </div>
+
+                    <footer class="text-white/40 text-[0.7rem] text-center mt-4">
+                        Pressione <kbd class="px-1.5 py-0.5 rounded bg-white/10 border border-white/15">Esc</kbd>
+                        ou clique fora para voltar ao resumo
+                    </footer>
+                </div>
+            </div>
+        </Transition>
+
+        <!-- Cronômetro (componente externo, gerencia próprio estado) -->
+        <MelissaCronometro
+            ref="cronoRef"
+            :pacientes="pacientesReais"
+            :default-paciente-id="null"
+            :duracao-minutos="CONFIG_DURACAO_MIN"
+            :toque-termino="toqueTermino"
+            @visible-change="cronoVisible = $event"
+        />
+    </div>
+</template>
+
+<style scoped>
+/* ─── Root ─────────────────────────────────────────────────── */
+.win11-root {
+    position: fixed;
+    inset: 0;
+    overflow: hidden;
+    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+}
+.win11-dim {
+    position: absolute;
+    inset: 0;
+    transition: background-color 200ms ease;
+}
+
+/* ─── Plano de trás (resumo) ───────────────────────────────── */
+.win11-summary {
+    position: relative;
+    z-index: 10;
+    width: 100%;
+    height: 100%;
+    transition: filter 320ms ease, transform 320ms ease;
+}
+.win11-summary.is-behind {
+    filter: blur(14px) brightness(0.7);
+    transform: scale(0.98);
+    pointer-events: none;
+}
+.win11-summary__inner {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    /* `safe center`: centraliza vertical quando o conteúdo cabe;
+       vira flex-start (sem clipar) quando excede e exige scroll */
+    justify-content: safe center;
+    padding: 4rem 2rem 6rem;
+    /* Scrollbar discreta */
+    scrollbar-width: thin;
+    scrollbar-color: var(--m-border-strong) transparent;
+}
+.win11-summary__inner::-webkit-scrollbar {
+    width: 6px;
+}
+.win11-summary__inner::-webkit-scrollbar-thumb {
+    background: var(--m-border-strong);
+    border-radius: 3px;
+}
+
+/* ─── Relógio ──────────────────────────────────────────────── */
+.clock-display {
+    font-size: clamp(5rem, 12vw, 9rem);
+    font-weight: 200;
+    line-height: 1;
+    letter-spacing: -0.04em;
+    font-variant-numeric: tabular-nums;
+    color: white;
+    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+}
+
+/* ─── Glass primitives ─────────────────────────────────────── */
+.glass-panel {
+    background: var(--m-bg-soft);
+    backdrop-filter: blur(24px) saturate(140%);
+    -webkit-backdrop-filter: blur(24px) saturate(140%);
+    border: 1px solid var(--m-border);
+    border-radius: 16px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+}
+.glass-btn {
+    background: var(--m-bg-soft);
+    backdrop-filter: blur(20px);
+    border: 1px solid var(--m-border-strong);
+    border-radius: 9999px;
+    transition: background-color 160ms ease;
+    cursor: pointer;
+}
+.glass-btn:hover {
+    background: var(--m-bg-soft-hover);
+}
+
+/* ─── Shell: cards-row scroll/wrap + card "+" sempre fora ──── */
+.cards-shell {
+    display: flex;
+    align-items: stretch; /* "+" estica até a altura do row (linha única) */
+    gap: 1rem;
+    /* Sem padding aqui: o respiro vai dentro do .cards-row (pra estar
+       dentro da área que tem overflow controlado). */
+}
+.cards-shell.is-wrap {
+    align-items: flex-start; /* em wrap o "+" não estica (cards-row pode ter 2+ linhas) */
+}
+
+/* Row interno: ocupa o espaço restante; comporta cards (scroll ou wrap) */
+.cards-row {
+    flex: 1;
+    min-width: 0; /* essencial pra flex item permitir overflow-x */
+    display: flex;
+    gap: 1rem;
+}
+.cards-row--linha {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    /* `overflow-y: hidden` explícito suprime o scroll vertical que o
+       browser adicionaria (overflow-x:auto força overflow-y:auto). O
+       padding abaixo já deu altura suficiente pra lift e botão "+". */
+    overflow-y: hidden;
+    /* `safe center`: centraliza quando os cards cabem; vira start
+       (sem clipar) quando overflow exigir scroll horizontal */
+    justify-content: safe center;
+    /* Padding interno (só nesse modo, pq o overflow-y:hidden exige):
+        - top: 8px → respiro pro hover-lift
+        - bottom: 24px → respiro pro botão "+" do card (bottom: -16px)
+        - lateral: 4px → pra cards das pontas não colarem */
+    padding: 8px 4px 24px;
+    /* Scrollbar horizontal discreta */
+    scrollbar-width: thin;
+    scrollbar-color: var(--m-border-strong) transparent;
+}
+.cards-row--linha::-webkit-scrollbar {
+    height: 6px;
+}
+.cards-row--linha::-webkit-scrollbar-thumb {
+    background: var(--m-border-strong);
+    border-radius: 3px;
+}
+.cards-row--wrap {
+    flex-wrap: wrap;
+    justify-content: center;
+    /* Wrap não precisa do padding/overflow do linha-única.
+       row-gap maior pra botão "+" da linha de cima não colar nas
+       cards da linha de baixo. */
+    row-gap: 2rem;
+    padding-bottom: 16px;
+}
+
+/* Card "+" em linha única: tamanho fixo + margin pra alinhar
+   visualmente com os cards (que estão dentro do padding-top: 8 da row).
+   Usa :deep() pra atravessar o scope do MelissaCard.vue. */
+.cards-shell:not(.is-wrap) :deep(.mc-card-add) {
+    height: 100px;
+    margin-top: 8px;
+}
+
+/* Mobile: "+" vira pill mínimo na linha única (economiza horizontal) */
+@media (max-width: 640px) {
+    .cards-shell:not(.is-wrap) :deep(.mc-card-add) {
+        width: 30px;
+        border-radius: 9px;
+    }
+}
+
+/* ─── Central de cards (dialog de personalização) ─────────── */
+.central-layer {
+    position: absolute;
+    inset: 0;
+    z-index: 56;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+}
+.central-panel {
+    width: min(440px, 100%);
+    max-height: 80vh;
+    overflow: auto;
+    background: var(--m-bg-medium);
+    backdrop-filter: blur(32px) saturate(160%);
+    -webkit-backdrop-filter: blur(32px) saturate(160%);
+    border: 1px solid var(--m-border-strong);
+    border-radius: 22px;
+    padding: 1.75rem;
+    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
+}
+.central-radio {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: var(--m-text);
+    font-size: 0.85rem;
+    cursor: pointer;
+    padding: 6px 8px;
+    border-radius: 8px;
+    transition: background-color 140ms ease;
+}
+.central-radio:hover {
+    background: var(--m-bg-soft);
+}
+.central-radio input[type='radio'] {
+    accent-color: #34d399;
+    cursor: pointer;
+}
+.central-card-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: var(--m-text);
+    font-size: 0.85rem;
+    cursor: pointer;
+    padding: 8px 10px;
+    border-radius: 8px;
+    transition: background-color 140ms ease;
+}
+.central-card-row:hover {
+    background: var(--m-bg-soft);
+}
+.central-card-row input[type='checkbox'] {
+    accent-color: #34d399;
+    cursor: pointer;
+}
+.central-card-row.is-em-breve {
+    color: var(--m-text-muted);
+}
+
+/* ─── Botão ψ (avatar — futuramente logo da empresa) ─────── */
+/* z-index alto: sempre acima de QUALQUER overlay (page, menu, dialogs)
+   pra continuar acessível mesmo com cronômetro/agenda/secao abertos.
+   Vive centralizado verticalmente na faixa do .melissa-dock (76px) —
+   bottom calculado pra centralizar o ψ de 56px na faixa: (76-56)/2 = 10px. */
+.psi-btn {
+    position: absolute;
+    bottom: 10px;
+    left: 1.25rem;
+    z-index: 70;
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    background: var(--m-bg-soft-hover);
+    backdrop-filter: blur(24px) saturate(160%);
+    -webkit-backdrop-filter: blur(24px) saturate(160%);
+    border: 1px solid var(--m-border-strong);
+    display: grid;
+    place-items: center;
+    cursor: pointer;
+    transition: all 200ms ease;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+}
+
+/* (.melissa-dock vive no bloco <style> global no fim do arquivo —
+   tem que ser global porque (a) o nó <div class="melissa-dock"/> é
+   static-hoisted pelo compiler e perde o data-v scoped, e (b) recebe
+   filhos via Teleport de outros componentes que precisam herdar pointer-events) */
+.psi-btn:hover {
+    background: var(--m-border-strong);
+    transform: translateY(-2px);
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
+}
+.psi-glyph {
+    font-family: 'Instrument Serif', Georgia, serif;
+    font-size: 2rem;
+    line-height: 1;
+    color: white;
+    font-style: italic;
+    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    /* ψ tem descender pronunciado (cauda que vai abaixo da baseline);
+       o `place-items: center` do botão centraliza pela line-box, não pelo
+       glifo, então empurro 3px pra cima pra equilibrar visualmente. */
+    transform: translateY(-3px);
+}
+
+/* Pill overlay com atalho de teclado, ancorado no canto inferior-direito do ψ */
+.psi-kbd {
+    position: absolute;
+    bottom: calc(-15% + 8px);
+    left: 60%;
+    /* Bg/color usam tokens — em dark vira pílula escura com texto claro,
+       em light vira pílula clara com texto escuro. --m-kbd-* definidos
+       no bloco global de tokens no fim do arquivo. */
+    background: var(--m-kbd-bg);
+    color: var(--m-kbd-text);
+    padding: 3px 9px;
+    border-radius: 9999px;
+    font-size: 0.6rem;
+    font-weight: 500;
+    letter-spacing: 0.05em;
+    white-space: nowrap;
+    pointer-events: none;
+    border: 1px solid var(--m-border-strong);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+}
+
+/* ─── Settings popover: select + botão testar do toque ────── */
+.settings-select {
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border-strong);
+    color: var(--m-text);
+    padding: 7px 10px;
+    border-radius: 8px;
+    font-size: 0.8rem;
+    outline: none;
+    appearance: none;
+    -webkit-appearance: none;
+    cursor: pointer;
+    min-width: 0;
+}
+.settings-select:hover {
+    background: var(--m-bg-soft-hover);
+}
+.settings-select option {
+    /* renderizado pelo OS — usa tokens semânticos pra acompanhar dark/light */
+    background: var(--p-content-background);
+    color: var(--m-text);
+}
+
+.settings-test-btn {
+    width: 32px;
+    height: 32px;
+    display: grid;
+    place-items: center;
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border-strong);
+    color: var(--m-text);
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 140ms ease;
+}
+.settings-test-btn:hover {
+    background: var(--m-accent);
+    border-color: var(--m-accent);
+}
+.settings-test-btn:disabled {
+    background: var(--m-bg-soft);
+    border-color: var(--m-border);
+    color: var(--m-text-faint);
+    cursor: not-allowed;
+}
+
+/* ─── Botão-trigger do cronômetro (irmão flex do relógio) ───── */
+.crono-icon-btn {
+    width: 48px;
+    height: 48px;
+    border-radius: 12px;
+    background: var(--m-bg-soft-hover);
+    backdrop-filter: blur(20px) saturate(160%);
+    -webkit-backdrop-filter: blur(20px) saturate(160%);
+    border: 1px solid var(--m-border-strong);
+    display: grid;
+    place-items: center;
+    cursor: pointer;
+    transition: all 200ms ease;
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
+    flex-shrink: 0;
+}
+.crono-icon-btn:hover {
+    background: var(--m-border-strong);
+    transform: scale(1.06);
+}
+
+/* ─── Seção: overlay grande (Pacientes, WhatsApp, etc.) ─────── */
+.secao-layer {
+    position: absolute;
+    inset: 0;
+    z-index: 50;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+}
+.secao-panel {
+    width: min(1100px, 100%);
+    height: min(80vh, 720px);
+    background: var(--m-bg-medium);
+    backdrop-filter: blur(32px) saturate(160%);
+    -webkit-backdrop-filter: blur(32px) saturate(160%);
+    border: 1px solid var(--m-border-strong);
+    border-radius: 22px;
+    padding: 1.75rem;
+    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
+    display: flex;
+    flex-direction: column;
+}
+.secao-icon {
+    width: 44px;
+    height: 44px;
+    border-radius: 12px;
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border-strong);
+    display: grid;
+    place-items: center;
+    flex-shrink: 0;
+}
+.secao-body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    overflow: auto;
+    padding: 1rem;
+}
+.secao-body-icon {
+    font-size: 4.5rem;
+    color: var(--m-text-faint);
+    margin-bottom: 1.5rem;
+}
+
+/* ─── Dialog de evento da timeline ─────────────────────────── */
+.evento-layer {
+    position: absolute;
+    inset: 0;
+    z-index: 55;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+}
+.evento-panel {
+    width: min(420px, 100%);
+    background: var(--m-bg-medium);
+    backdrop-filter: blur(32px) saturate(160%);
+    -webkit-backdrop-filter: blur(32px) saturate(160%);
+    border: 1px solid var(--m-border-strong);
+    border-radius: 22px;
+    padding: 1.75rem;
+    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
+}
+.evento-pill {
+    width: 4px;
+    height: 40px;
+    border-radius: 2px;
+    flex-shrink: 0;
+}
+.evento-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 0.85rem;
+    color: var(--m-text);
+}
+.evento-row i {
+    width: 16px;
+    text-align: center;
+    color: var(--m-text-muted);
+    font-size: 0.85rem;
+}
+.evento-desc {
+    color: var(--m-text-muted);
+    font-size: 0.85rem;
+    line-height: 1.5;
+    padding-top: 12px;
+    margin-top: 4px;
+    border-top: 1px solid var(--m-border);
+}
+.evento-action {
+    width: 100%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 12px 14px;
+    background: var(--m-bg-soft-hover);
+    border: 1px solid var(--m-border-strong);
+    color: white;
+    border-radius: 12px;
+    font-size: 0.9rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 140ms ease, border-color 140ms ease;
+}
+.evento-action:hover {
+    background: var(--m-border-strong);
+    border-color: var(--m-border-strong);
+}
+
+/* ─── MelissaPage — transição "fade" pra páginas fullscreen ─── */
+.page-fade-enter-active,
+.page-fade-leave-active {
+    transition: opacity 220ms ease, transform 260ms cubic-bezier(0.2, 0.7, 0.3, 1);
+}
+.page-fade-enter-from {
+    opacity: 0;
+    transform: scale(0.985);
+}
+.page-fade-leave-to {
+    opacity: 0;
+    transform: scale(0.99);
+}
+
+/* ─── MelissaMenu — transição "rise" no .mm-panel (não no layer) ─── */
+.menu-rise-enter-active :deep(.mm-panel),
+.menu-rise-leave-active :deep(.mm-panel) {
+    transition: opacity 240ms ease, transform 280ms cubic-bezier(0.2, 0.7, 0.3, 1);
+    transform-origin: bottom left;
+}
+.menu-rise-enter-from :deep(.mm-panel) {
+    opacity: 0;
+    transform: translateY(16px) scale(0.97);
+}
+.menu-rise-leave-to :deep(.mm-panel) {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+}
+
+/* ─── Links clicáveis dentro do resumo do dia ─────────────── */
+.resumo-link {
+    display: inline;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    color: var(--m-text);
+    cursor: pointer;
+    border-bottom: 1px dashed var(--m-border-strong);
+    transition: color 160ms ease, border-color 160ms ease;
+}
+.resumo-link:hover {
+    color: white;
+    border-bottom-color: var(--m-text-muted);
+}
+.resumo-link.is-active {
+    color: white;
+    font-weight: 500;
+    border-bottom: 1px solid var(--m-text);
+}
+
+/* ─── Chip do filtro ativo (header da timeline) ────────────── */
+.filtro-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    margin-left: 6px;
+    padding: 2px 8px 2px 10px;
+    border-radius: 9999px;
+    background: var(--m-bg-soft-hover);
+    border: 1px solid var(--m-border-strong);
+    color: var(--m-text);
+    font-size: 0.7rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 140ms ease;
+}
+.filtro-chip:hover {
+    background: var(--m-border-strong);
+}
+
+/* ─── Timeline vertical (< lg) — tipo calendário dia ─────── */
+.vt {
+    position: relative;
+    height: calc((20 - 8) * 48px + 24px); /* HORA_FIM-HORA_INICIO+respiro */
+    margin-top: 0.75rem;
+}
+.vt-row {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 0;
+    display: flex;
+    align-items: center;
+}
+.vt-hour {
+    width: 36px;
+    text-align: right;
+    padding-right: 8px;
+    color: var(--m-text-muted);
+    font-size: 0.65rem;
+    font-weight: 500;
+    flex-shrink: 0;
+    /* O texto fica visualmente centrado na linha (transform shift up half) */
+    transform: translateY(-50%);
+    background: transparent;
+    line-height: 1;
+}
+.vt-line {
+    flex: 1;
+    height: 1px;
+    background: var(--m-bg-soft);
+}
+.vt-event {
+    position: absolute;
+    left: 44px;
+    right: 4px;
+    padding: 4px 10px;
+    border-radius: 4px;
+    color: white;
+    cursor: pointer;
+    overflow: hidden;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: 24px;
+}
+.vt-event-time {
+    font-size: 0.62rem;
+    opacity: 0.85;
+    line-height: 1.1;
+}
+.vt-event-label {
+    font-size: 0.78rem;
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    line-height: 1.2;
+}
+.vt-now {
+    position: absolute;
+    left: 32px;
+    right: 0;
+    z-index: 2;
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+    transform: translateY(-50%); /* centro do cursor sobre a linha do horário */
+}
+.vt-now-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: rgb(239, 68, 68);
+    flex-shrink: 0;
+    animation: pulse 1.6s ease-in-out infinite;
+}
+.vt-now-line {
+    flex: 1;
+    height: 2px;
+    background: rgb(239, 68, 68);
+    box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
+    margin-left: 2px;
+}
+
+/* ─── Pulse no "Agora" ─────────────────────────────────────── */
+.pulse-dot {
+    animation: pulse 1.6s ease-in-out infinite;
+}
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.4; }
+}
+
+/* ─── Transições ───────────────────────────────────────────── */
+.lift-enter-active,
+.lift-leave-active {
+    transition: opacity 240ms ease, transform 280ms cubic-bezier(0.2, 0.7, 0.3, 1);
+}
+.lift-enter-from {
+    opacity: 0;
+    transform: scale(0.96) translateY(12px);
+}
+.lift-leave-to {
+    opacity: 0;
+    transform: scale(0.98) translateY(8px);
+}
+
+.settings-pop-enter-active,
+.settings-pop-leave-active {
+    transition: opacity 160ms ease, transform 160ms ease;
+}
+.settings-pop-enter-from,
+.settings-pop-leave-to {
+    opacity: 0;
+    transform: translateY(-6px) scale(0.98);
+}
+
+/* line-clamp util (caso Tailwind não tenha) */
+.line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+</style>
+
+<!-- ────────────────────────────────────────────────────────────
+     Variáveis de tema Melissa — bloco GLOBAL (não scoped) pra
+     atravessar o scoped CSS dos componentes filhos (MelissaMenu,
+     MelissaCronometro, MelissaAgenda, MelissaCard, MelissaBusca).
+
+     Defaults (modo escuro):
+       --m-bg-soft   bg sutil em superfícies internas (cards, hovers)
+       --m-bg-medium bg dos painéis flutuantes (panel principal)
+       --m-text      cor de texto principal
+       --m-text-muted texto secundário
+       --m-border    cor de bordas glass
+       --m-accent    cor primária do tema (PrimeVue --p-primary-color)
+       --m-accent-soft tint sutil da primária pra active/hover
+
+     Em modo light (html sem .app-dark) os valores invertem.
+──────────────────────────────────────────────────────────── -->
+<style>
+/* Tokens Melissa derivados dos tokens semânticos do PrimeVue (--p-*) que
+   já flipam automaticamente com dark/light AND seguem o preset escolhido
+   (Aura/Lara/Nora/Material têm escalas e radii próprios). */
+.win11-root {
+    /* Cor primária — vem do preset escolhido pelo user */
+    --m-accent:        var(--p-primary-color);
+    --m-accent-soft:   color-mix(in srgb, var(--p-primary-color) 18%, transparent);
+    --m-accent-strong: color-mix(in srgb, var(--p-primary-color) 35%, transparent);
+
+    /* Glass derivado do content/surface tokens com alpha pra preservar
+       o efeito translúcido sobre a photo. Auto-flip dark/light. */
+    --m-bg-soft:       color-mix(in srgb, var(--p-content-background) 50%, transparent);
+    --m-bg-soft-hover: color-mix(in srgb, var(--p-content-hover-background, var(--p-surface-100)) 70%, transparent);
+    --m-bg-medium:     color-mix(in srgb, var(--p-content-background) 88%, transparent);
+
+    /* Texto e bordas — auto-flip via PrimeVue */
+    --m-text:          var(--p-text-color);
+    --m-text-muted:    var(--p-text-muted-color);
+    --m-text-faint:    color-mix(in srgb, var(--p-text-color) 45%, transparent);
+    --m-border:        var(--p-content-border-color);
+    --m-border-strong: color-mix(in srgb, var(--p-text-color) 22%, transparent);
+
+    /* Border-radius do preset (Aura usa 12px, Nora 6px, Lara 6px etc.) */
+    --m-radius:    var(--p-border-radius, 8px);
+    --m-radius-lg: calc(var(--p-border-radius, 8px) * 1.5);
+
+    /* RGB do dim (overlay sobre a photo). Opacidade vem do slider via
+       rgba(var(--m-dim-rgb), opacity) no inline style. Único token que
+       precisa de override manual (PrimeVue não tem "dim" nativo). */
+    --m-dim-rgb: 0, 0, 0;
+
+    /* ─── Gradiente "Bloom" (default = dark) ────────────────────────
+       Derivado da palette primária + surface do preset. Em light flipam
+       pra tons claros (200/100 + surface-0/primary-50). O computed bgStyle
+       no <script> referencia essas vars; mudar aqui muda o bloom todo. */
+    --bloom-c1:     var(--p-primary-400);
+    --bloom-c2:     var(--p-primary-300);
+    --bloom-base-1: var(--p-surface-950);
+    --bloom-base-2: var(--p-primary-950);
+
+    /* ─── Pílula de atalho de teclado (psi-kbd) ─────────────────────
+       Em dark: pílula escura com texto claro. Em light: pílula clara
+       com texto escuro (override no bloco light abaixo). */
+    --m-kbd-bg:   rgba(0, 0, 0, 0.65);
+    --m-kbd-text: rgba(255, 255, 255, 0.92);
+
+    /* ─── Dock (taskbar transparent) ────────────────────────────────
+       Altura da faixa inferior que recebe items minimizados (chip do
+       cronômetro, futuros). Páginas fullscreen reservam esse espaço
+       no inset bottom pra não ficar atrás do dock. */
+    --m-dock-h: 76px;
+}
+
+/* ─── Dock (global pra atravessar Teleport + evitar perda de scoped
+   em static-hoisted nodes). Faixa horizontal no bottom. Sem bg.
+   Items individuais (chip cronômetro, dock-actions, futuros) têm
+   visuais próprios e posicionam-se dentro do flexbox. */
+.melissa-dock {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: var(--m-dock-h, 76px);
+    z-index: 65;             /* abaixo do ψ (70) e overlays modais */
+    display: flex;
+    align-items: center;
+    /* padding-left reserva ~96px pro ψ (56px + 1.25rem left + gap) */
+    padding: 0 1.5rem 0 6rem;
+    gap: 12px;
+    pointer-events: none;    /* só os items recebem clique */
+}
+.melissa-dock > * { pointer-events: auto; }
+
+/* ════════════════════════════════════════════════════════════════
+   LIGHT MODE — aesthetic "Pippit/Linear": superfícies sólidas,
+   bordas finas, sombras suaves. Sem photo nem glass blur.
+   Texto SEMPRE legível porque vem do --p-text-color sobre superfície
+   sólida (não depende do slider de opacidade nem da photo).
+   ════════════════════════════════════════════════════════════════ */
+html:not(.app-dark) .win11-root {
+    /* Surfaces sólidas (sem alpha) — vem dos tokens PrimeVue */
+    --m-bg-soft:       var(--p-surface-100, #f3f4f6);
+    --m-bg-soft-hover: var(--p-surface-200, #e5e7eb);
+    --m-bg-medium:     var(--p-content-background);  /* opaco */
+
+    /* Bordas mais sutis em light (Pippit-style) */
+    --m-border:        var(--p-content-border-color);
+    --m-border-strong: color-mix(in srgb, var(--p-text-color) 14%, transparent);
+
+    /* Sombras leves (substituem o glass blur em light) */
+    --m-shadow:    0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.05);
+    --m-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08);
+
+    /* Dim só aparece quando há foto custom (ver regra .win11-has-photo
+       no fim do arquivo). Sem foto, o bloom claro já é leve o suficiente. */
+    --m-dim-rgb: 255, 255, 255;
+
+    /* ─── Gradiente "Bloom" — versão clara (Pippit/Linear morning) ────
+       Tons 50/100/200 da primary + surface-0/50. Gradiente fica suave,
+       legível, dá identidade Win11 sem competir com o conteúdo. */
+    --bloom-c1:     var(--p-primary-200);
+    --bloom-c2:     var(--p-primary-100);
+    --bloom-base-1: var(--p-surface-0, #ffffff);
+    --bloom-base-2: var(--p-primary-50);
+
+    /* Pílula psi-kbd em light: bg escuro suave + texto branco
+       (NÃO usar var(--m-text) aqui — em light vira preto e fica preto sobre preto). */
+    --m-kbd-bg:   color-mix(in srgb, var(--p-text-color) 78%, transparent);
+    --m-kbd-text: var(--p-content-background);
+}
+
+/* Light: dim escondido por padrão (sem foto, bloom claro já é leve).
+   Quando o user faz upload de foto custom, .win11-has-photo é adicionada
+   e o dim volta a fazer sentido. */
+html:not(.app-dark) .win11-root .win11-dim {
+    display: none;
+}
+html:not(.app-dark) .win11-root.win11-has-photo .win11-dim {
+    display: block;
+}
+
+/* Light: panels viram OPACOS com borda + shadow (sem backdrop-filter).
+   Aplica em todos os "glass-*" e cards Melissa via :is(). */
+html:not(.app-dark) .win11-root :is(
+    .glass-panel,
+    .glass-btn,
+    .mc-card,
+    .mc-card-add,
+    .mc-card__go,
+    .mc-fc-event,
+    .mb-field,
+    .mb-panel,
+    .mb-item,
+    .mc-panel,
+    .mm-panel,
+    .secao-panel,
+    .central-panel,
+    .evento-panel,
+    .ma-page,
+    .ma-w,
+    .ma-sess,
+    .ma-ev,
+    .crono-icon-btn,
+    .psi-btn,
+    .psi-kbd,
+    .crono-chip,
+    .resumo-link,
+    .filtro-chip,
+    .module-tile,
+    .settings-select,
+    .settings-test-btn
+) {
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
+}
+
+/* Sombra suave nos painéis principais em light (substitui o "depth" do blur) */
+html:not(.app-dark) .win11-root :is(
+    .glass-panel,
+    .mc-card,
+    .mc-panel,
+    .mm-panel,
+    .secao-panel,
+    .central-panel,
+    .evento-panel,
+    .ma-page,
+    .ma-w,
+    .mb-panel
+) {
+    box-shadow: var(--m-shadow);
+}
+html:not(.app-dark) .win11-root :is(
+    .mm-panel,
+    .secao-panel,
+    .central-panel,
+    .evento-panel,
+    .mc-panel,
+    .ma-page
+) {
+    box-shadow: var(--m-shadow-md);
+}
+
+/* ─── Override de classes Tailwind hardcoded (`text-white/X`, `bg-white/X`,
+   `border-white/X`) que vêm dos templates. Em light: textos viram dark,
+   bgs viram surface tokens. */
+
+html:not(.app-dark) .win11-root .text-white,
+html:not(.app-dark) .win11-root [class*="text-white/9"],
+html:not(.app-dark) .win11-root [class*="text-white/85"],
+html:not(.app-dark) .win11-root [class*="text-white/8"] {
+    color: var(--m-text);
+}
+html:not(.app-dark) .win11-root [class*="text-white/7"],
+html:not(.app-dark) .win11-root [class*="text-white/6"],
+html:not(.app-dark) .win11-root [class*="text-white/55"],
+html:not(.app-dark) .win11-root [class*="text-white/5"] {
+    color: var(--m-text-muted);
+}
+html:not(.app-dark) .win11-root [class*="text-white/4"],
+html:not(.app-dark) .win11-root [class*="text-white/3"],
+html:not(.app-dark) .win11-root [class*="text-white/2"] {
+    color: var(--m-text-faint);
+}
+
+html:not(.app-dark) .win11-root [class*="bg-white/"] {
+    background-color: var(--m-bg-soft);
+}
+html:not(.app-dark) .win11-root [class*="bg-white/2"],
+html:not(.app-dark) .win11-root [class*="bg-white/3"] {
+    background-color: var(--m-bg-soft-hover);
+}
+html:not(.app-dark) .win11-root [class*="hover:bg-white/"]:hover {
+    background-color: var(--m-bg-soft-hover) !important;
+}
+
+html:not(.app-dark) .win11-root [class*="border-white/"] {
+    border-color: var(--m-border);
+}
+html:not(.app-dark) .win11-root [class*="border-white/2"],
+html:not(.app-dark) .win11-root [class*="border-white/3"] {
+    border-color: var(--m-border-strong);
+}
+
+/* Light: clock e ψ usam color: white hardcoded (CSS scoped, fora do alcance
+   dos overrides Tailwind). Sobre o bloom claro, branco vira invisível —
+   forçar var(--m-text) e shadow leve. */
+html:not(.app-dark) .win11-root .clock-display {
+    color: var(--m-text);
+    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
+}
+html:not(.app-dark) .win11-root .psi-glyph {
+    color: var(--m-text);
+    text-shadow: none;
+}
+
+/* Light: psi-btn ganha sombra suave (substitui a preta agressiva 24px)
+   + um leve halo da primary pra destacar o botão sobre o bloom claro. */
+html:not(.app-dark) .win11-root .psi-btn {
+    box-shadow:
+        0 4px 14px rgba(15, 23, 42, 0.08),
+        0 1px 3px rgba(15, 23, 42, 0.06),
+        0 0 0 1px color-mix(in srgb, var(--p-primary-color) 12%, transparent);
+}
+html:not(.app-dark) .win11-root .psi-btn:hover {
+    box-shadow:
+        0 8px 20px rgba(15, 23, 42, 0.12),
+        0 2px 6px rgba(15, 23, 42, 0.08),
+        0 0 0 1px color-mix(in srgb, var(--p-primary-color) 24%, transparent);
+}
+
+/* Light + bloom: panels com leve transparência pra deixar a cor do bloom
+   transparecer, mas mantendo legibilidade. 92% de opacidade em vez de 100%. */
+html:not(.app-dark) .win11-root :is(
+    .glass-panel,
+    .mc-card,
+    .mc-panel,
+    .mm-panel,
+    .secao-panel,
+    .central-panel,
+    .evento-panel,
+    .ma-page,
+    .ma-w,
+    .mb-panel
+) {
+    background-color: color-mix(in srgb, var(--p-content-background) 92%, transparent);
+}
+
+/* ─── Ícones com tons claros (Tailwind text-X-300/400) ────────
+   Tons claros são pensados pra fundo escuro (dark glass). Em light
+   ficam invisíveis sobre bloom claro/panels brancos. Mapeia pra
+   tons -600 (legível em fundo claro, mantém identidade da cor). */
+html:not(.app-dark) .win11-root .text-emerald-200,
+html:not(.app-dark) .win11-root .text-emerald-300,
+html:not(.app-dark) .win11-root .text-emerald-400 { color: rgb(5 150 105); }     /* emerald-600 */
+
+html:not(.app-dark) .win11-root .text-green-200,
+html:not(.app-dark) .win11-root .text-green-300,
+html:not(.app-dark) .win11-root .text-green-400   { color: rgb(22 163 74); }     /* green-600 */
+
+html:not(.app-dark) .win11-root .text-amber-200,
+html:not(.app-dark) .win11-root .text-amber-300,
+html:not(.app-dark) .win11-root .text-amber-400   { color: rgb(217 119 6); }     /* amber-600 */
+
+html:not(.app-dark) .win11-root .text-purple-200,
+html:not(.app-dark) .win11-root .text-purple-300,
+html:not(.app-dark) .win11-root .text-purple-400  { color: rgb(147 51 234); }    /* purple-600 */
+
+html:not(.app-dark) .win11-root .text-blue-200,
+html:not(.app-dark) .win11-root .text-blue-300,
+html:not(.app-dark) .win11-root .text-blue-400    { color: rgb(37 99 235); }     /* blue-600 */
+
+html:not(.app-dark) .win11-root .text-sky-200,
+html:not(.app-dark) .win11-root .text-sky-300,
+html:not(.app-dark) .win11-root .text-sky-400     { color: rgb(2 132 199); }     /* sky-600 */
+
+html:not(.app-dark) .win11-root .text-cyan-200,
+html:not(.app-dark) .win11-root .text-cyan-300,
+html:not(.app-dark) .win11-root .text-cyan-400    { color: rgb(8 145 178); }     /* cyan-600 */
+
+html:not(.app-dark) .win11-root .text-teal-200,
+html:not(.app-dark) .win11-root .text-teal-300,
+html:not(.app-dark) .win11-root .text-teal-400    { color: rgb(13 148 136); }    /* teal-600 */
+
+html:not(.app-dark) .win11-root .text-indigo-200,
+html:not(.app-dark) .win11-root .text-indigo-300,
+html:not(.app-dark) .win11-root .text-indigo-400  { color: rgb(79 70 229); }     /* indigo-600 */
+
+html:not(.app-dark) .win11-root .text-violet-200,
+html:not(.app-dark) .win11-root .text-violet-300,
+html:not(.app-dark) .win11-root .text-violet-400  { color: rgb(124 58 237); }    /* violet-600 */
+
+html:not(.app-dark) .win11-root .text-pink-200,
+html:not(.app-dark) .win11-root .text-pink-300,
+html:not(.app-dark) .win11-root .text-pink-400    { color: rgb(219 39 119); }    /* pink-600 */
+
+html:not(.app-dark) .win11-root .text-rose-200,
+html:not(.app-dark) .win11-root .text-rose-300,
+html:not(.app-dark) .win11-root .text-rose-400    { color: rgb(225 29 72); }     /* rose-600 */
+
+html:not(.app-dark) .win11-root .text-red-200,
+html:not(.app-dark) .win11-root .text-red-300,
+html:not(.app-dark) .win11-root .text-red-400     { color: rgb(220 38 38); }     /* red-600 */
+
+html:not(.app-dark) .win11-root .text-orange-200,
+html:not(.app-dark) .win11-root .text-orange-300,
+html:not(.app-dark) .win11-root .text-orange-400  { color: rgb(234 88 12); }     /* orange-600 */
+
+html:not(.app-dark) .win11-root .text-yellow-200,
+html:not(.app-dark) .win11-root .text-yellow-300,
+html:not(.app-dark) .win11-root .text-yellow-400  { color: rgb(202 138 4); }     /* yellow-600 */
+
+html:not(.app-dark) .win11-root .text-fuchsia-200,
+html:not(.app-dark) .win11-root .text-fuchsia-300,
+html:not(.app-dark) .win11-root .text-fuchsia-400 { color: rgb(192 38 211); }    /* fuchsia-600 */
+
+html:not(.app-dark) .win11-root .text-lime-200,
+html:not(.app-dark) .win11-root .text-lime-300,
+html:not(.app-dark) .win11-root .text-lime-400    { color: rgb(101 163 13); }    /* lime-600 */
+</style>
diff --git a/src/layout/melissa/MelissaMenu.vue b/src/layout/melissa/MelissaMenu.vue
new file mode 100644
index 0000000..115b8d9
--- /dev/null
+++ b/src/layout/melissa/MelissaMenu.vue
@@ -0,0 +1,1042 @@
+<script setup>
+/*
+ * MelissaMenu — Menu float estilo "Start" do Win11
+ * --------------------------------------------------
+ * Modelo categoria → sub-itens em grupos:
+ *   - LEFT (~280px): lista de categorias
+ *   - RIGHT (~360px): grupos de sub-itens da categoria ativa
+ *
+ * Sub-item especial `tipo: 'link-cadastro'` renderiza inline
+ * (input com link + botão copiar) em vez de virar item navegável.
+ *
+ * Default: primeira categoria selecionada na abertura.
+ *
+ * Props:
+ *   - secaoAtiva: string|null — destaca o sub-item correspondente
+ *
+ * Emit:
+ *   - select(key) — sub-item clicado (parent decide navegação)
+ *   - close — clique fora ou X
+ */
+import { ref, computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { sessionUser, sessionRole } from '@/app/session';
+import { supabase } from '@/lib/supabase/client';
+import { useRoleGuard } from '@/composables/useRoleGuard';
+import { useLayout } from '@/layout/composables/layout';
+import { useUserSettingsPersistence } from '@/composables/useUserSettingsPersistence';
+import { primaryColors, surfaces, presetOptions, applyThemeEngine } from '@/theme/theme.options';
+
+defineProps({
+    secaoAtiva: { type: String, default: null }
+});
+
+const emit = defineEmits(['select', 'close']);
+
+const router = useRouter();
+const { role } = useRoleGuard();
+const { layoutConfig, toggleDarkMode, isDarkTheme } = useLayout();
+const { queuePatch } = useUserSettingsPersistence();
+
+// ── Catálogo de categorias ────────────────────────────────────
+// Quando promover Melissa pra produção, mover pra um composable que
+// também filtra por entitlements/feature flags do tenant.
+const CATEGORIAS = [
+    {
+        key: 'agenda-pacientes',
+        label: 'Agenda e Pacientes',
+        icon: 'pi pi-calendar-plus',
+        color: '#10b981',
+        groups: [
+            {
+                title: 'Principais',
+                items: [
+                    { key: 'agenda', label: 'Minha Agenda', icon: 'pi pi-calendar' },
+                    { key: 'pacientes', label: 'Meus Pacientes', icon: 'pi pi-users' },
+                    { key: 'cadastros-recebidos', label: 'Cadastros recebidos', icon: 'pi pi-inbox' },
+                    { key: 'meu-link-cadastro', label: 'Meu link de cadastro', icon: 'pi pi-link', tipo: 'link-cadastro' }
+                ]
+            },
+            {
+                title: 'Outros',
+                items: [
+                    { key: 'recorrencias', label: 'Recorrências', icon: 'pi pi-sync' },
+                    { key: 'compromissos', label: 'Compromissos determinados', icon: 'pi pi-flag' },
+                    { key: 'grupos', label: 'Grupos de pacientes', icon: 'pi pi-th-large' },
+                    { key: 'tags', label: 'Tags', icon: 'pi pi-tag' },
+                    { key: 'medicos', label: 'Médicos e referências', icon: 'pi pi-user-edit' }
+                ]
+            }
+        ]
+    },
+    {
+        key: 'whatsapp',
+        label: 'WhatsApp',
+        icon: 'pi pi-whatsapp',
+        color: '#22c55e',
+        groups: []
+    },
+    {
+        key: 'prontuarios',
+        label: 'Prontuários',
+        icon: 'pi pi-file',
+        color: '#0ea5e9',
+        groups: []
+    },
+    {
+        key: 'financeiro',
+        label: 'Financeiro',
+        icon: 'pi pi-wallet',
+        color: '#f59e0b',
+        groups: []
+    },
+    {
+        key: 'configuracoes',
+        label: 'Configurações',
+        icon: 'pi pi-cog',
+        color: '#94a3b8',
+        groups: []
+    }
+];
+
+// ── Estado ──────────────────────────────────────────────────────
+const selectedKey = ref(CATEGORIAS[0].key); // primeira categoria por default
+const copiado = ref(false);
+
+const categoriaAtiva = computed(() =>
+    CATEGORIAS.find((c) => c.key === selectedKey.value) || CATEGORIAS[0]
+);
+
+// TODO: trocar por busca real do convite ativo (patient_invites)
+// O AgendaTerapeutaPage faz isso ~ linha 919.
+const linkCadastro = 'https://app.agenciapsi.com.br/cadastrar/abc123';
+
+function selecionarCategoria(key) {
+    selectedKey.value = key;
+    copiado.value = false;
+    themeViewActive.value = false; // sai do tema ao mudar categoria
+}
+
+function clicarSubItem(item) {
+    if (item.tipo === 'link-cadastro') return; // inline, não navega
+    emit('select', item.key);
+}
+
+async function copiarLink() {
+    try {
+        await navigator.clipboard.writeText(linkCadastro);
+        copiado.value = true;
+        setTimeout(() => (copiado.value = false), 1800);
+    } catch {
+        // Falha silenciosa (browser sem permissão de clipboard)
+    }
+}
+
+// ── User session (avatar, label, role) ─────────────────────────
+// Pattern espelhado de src/layout/AppMenuFooterPanel.vue
+const userInitials = computed(() => {
+    const name = sessionUser.value?.user_metadata?.full_name || sessionUser.value?.email || '';
+    const parts = String(name).trim().split(/\s+/).filter(Boolean);
+    const a = parts[0]?.[0] || 'U';
+    const b = parts.length > 1 ? parts[parts.length - 1][0] : '';
+    return (a + b).toUpperCase();
+});
+const userLabel = computed(
+    () => sessionUser.value?.user_metadata?.full_name || sessionUser.value?.email || 'Conta'
+);
+const userSublabel = computed(() => {
+    const r = role.value || sessionRole.value;
+    if (!r) return 'Sessão';
+    if (r === 'clinic_admin' || r === 'tenant_admin' || r === 'admin') return 'Administrador';
+    if (r === 'therapist') return 'Terapeuta';
+    if (r === 'supervisor') return 'Supervisor';
+    if (r === 'portal_user' || r === 'patient') return 'Portal';
+    return r;
+});
+const userAvatarUrl = computed(() => sessionUser.value?.user_metadata?.avatar_url || null);
+
+// ── Footer actions ─────────────────────────────────────────────
+async function safePush(target, fallback) {
+    try {
+        const r = router.resolve(target);
+        if (r?.matched?.length) return await router.push(target);
+    } catch {}
+    if (fallback) {
+        try { return await router.push(fallback); } catch {}
+    }
+    return router.push('/');
+}
+
+function navAndClose(target, fallback) {
+    emit('close');
+    safePush(target, fallback);
+}
+
+function goPerfil()    { navAndClose({ name: 'account-profile' }, '/account/profile'); }
+function goSeguranca() { navAndClose({ name: 'account-security' }, '/account/security'); }
+function goPlano() {
+    const r = role.value || sessionRole.value;
+    if (r === 'clinic_admin' || r === 'tenant_admin' || r === 'admin') {
+        return navAndClose({ name: 'admin-meu-plano' }, '/admin/meu-plano');
+    }
+    if (r === 'supervisor') return navAndClose({ name: 'supervisor.meu-plano' }, '/supervisor/meu-plano');
+    return navAndClose({ name: 'therapist-meu-plano' }, '/therapist/meu-plano');
+}
+
+async function toggleDarkAndPersist() {
+    try {
+        toggleDarkMode();
+        // requestAnimationFrame pra garantir que a classe já foi aplicada
+        await new Promise((r) => requestAnimationFrame(r));
+        const after = document.documentElement.classList.contains('app-dark');
+        const theme_mode = after ? 'dark' : 'light';
+        try { localStorage.setItem('ui_theme_mode', theme_mode); } catch {}
+        await queuePatch({ theme_mode }, { flushNow: true });
+    } catch (e) {
+        // eslint-disable-next-line no-console
+        console.warn('[MelissaMenu] toggleDark falhou:', e);
+    }
+}
+
+// ── Cores do Tema (embutido no aside, não em popover externo) ──
+const themeViewActive = ref(false);
+
+function toggleThemeView() {
+    themeViewActive.value = !themeViewActive.value;
+}
+
+function saveThemeToStorage() {
+    try {
+        localStorage.setItem('ui_theme_config', JSON.stringify({
+            preset: layoutConfig.preset,
+            primary: layoutConfig.primary,
+            surface: layoutConfig.surface,
+            menuMode: layoutConfig.menuMode
+        }));
+    } catch {}
+}
+
+function setPrimary(c) {
+    layoutConfig.primary = c.name;
+    applyThemeEngine(layoutConfig);
+    queuePatch?.({ primary_color: c.name });
+    saveThemeToStorage();
+}
+
+function setSurface(s) {
+    layoutConfig.surface = s.name;
+    applyThemeEngine(layoutConfig);
+    queuePatch?.({ surface_color: s.name });
+    saveThemeToStorage();
+}
+
+function setPreset(p) {
+    if (!p || p === layoutConfig.preset) return;
+    layoutConfig.preset = p;
+    applyThemeEngine(layoutConfig);
+    queuePatch?.({ preset: p });
+    saveThemeToStorage();
+}
+
+function surfaceIsActive(s) {
+    if (layoutConfig.surface) return layoutConfig.surface === s.name;
+    // fallback default por mode
+    return isDarkTheme.value ? s.name === 'zinc' : s.name === 'slate';
+}
+
+async function sair() {
+    try { await supabase.auth.signOut(); } catch {}
+    router.push('/auth/login');
+}
+</script>
+
+<template>
+    <div class="mm-layer" @click.self="emit('close')">
+        <div class="mm-panel">
+            <!-- ════ ESQUERDA: categorias ════ -->
+            <nav class="mm-side">
+                <div class="mm-side__head">
+                    <div class="mm-side__title">Menu</div>
+                </div>
+
+                <div class="mm-side__list">
+                    <button
+                        v-for="c in CATEGORIAS"
+                        :key="c.key"
+                        class="mm-cat"
+                        :class="{ 'is-active': selectedKey === c.key }"
+                        @click="selecionarCategoria(c.key)"
+                    >
+                        <span
+                            class="mm-cat__icon"
+                            :style="{
+                                backgroundColor: c.color ? `${c.color}1f` : 'rgba(255,255,255,0.08)',
+                                borderColor: c.color ? `${c.color}55` : 'rgba(255,255,255,0.15)'
+                            }"
+                        >
+                            <i :class="c.icon" :style="{ color: c.color || 'rgba(255,255,255,0.85)' }" />
+                        </span>
+                        <span class="mm-cat__label">{{ c.label }}</span>
+                        <i class="mm-cat__chevron pi pi-chevron-right" />
+                    </button>
+                </div>
+
+                <!-- Rodapé: ações + usuário -->
+                <div class="mm-side__foot">
+                    <!-- Itens grudados acima do usuário -->
+                    <div class="mm-foot-actions">
+                        <button class="mm-foot-item" @click="goPerfil">
+                            <i class="pi pi-user" /><span>Meu Perfil</span>
+                        </button>
+                        <button class="mm-foot-item" @click="goPlano">
+                            <i class="pi pi-credit-card" /><span>Meus Planos</span>
+                        </button>
+                        <button class="mm-foot-item" @click="goSeguranca">
+                            <i class="pi pi-shield" /><span>Segurança</span>
+                        </button>
+                        <button class="mm-foot-item" @click="toggleDarkAndPersist">
+                            <i :class="isDarkTheme ? 'pi pi-sun' : 'pi pi-moon'" />
+                            <span>Modo escuro</span>
+                            <span class="mm-foot-item__hint">{{ isDarkTheme ? 'Ligado' : 'Desligado' }}</span>
+                        </button>
+                        <button
+                            class="mm-foot-item"
+                            :class="{ 'is-active': themeViewActive }"
+                            @click="toggleThemeView"
+                        >
+                            <i class="pi pi-palette" /><span>Cores do Tema</span>
+                        </button>
+                    </div>
+
+                    <!-- User row com botão Sair à direita -->
+                    <div class="mm-user">
+                        <div class="mm-user__avatar">
+                            <img v-if="userAvatarUrl" :src="userAvatarUrl" :alt="userLabel" />
+                            <template v-else>{{ userInitials }}</template>
+                        </div>
+                        <div class="mm-user__info">
+                            <div class="mm-user__name">{{ userLabel }}</div>
+                            <div class="mm-user__role">{{ userSublabel }}</div>
+                        </div>
+                        <button class="mm-user__signout" title="Sair" @click="sair">
+                            <i class="pi pi-sign-out" />
+                        </button>
+                    </div>
+                </div>
+            </nav>
+
+            <!-- ════ DIREITA: sub-itens OU cores do tema ════ -->
+            <aside class="mm-aside">
+                <div class="mm-aside__head">
+                    <div class="mm-aside__title">
+                        {{ themeViewActive ? 'Cores do Tema' : categoriaAtiva.label }}
+                    </div>
+                </div>
+
+                <div class="mm-aside__body">
+                    <!-- View especial: Cores do Tema -->
+                    <div v-if="themeViewActive" class="mm-theme">
+                        <div class="mm-theme__group">
+                            <div class="mm-theme__title">Cor primária</div>
+                            <div class="mm-theme__swatches">
+                                <button
+                                    v-for="c in primaryColors"
+                                    :key="c.name"
+                                    type="button"
+                                    class="mm-theme__swatch"
+                                    :class="{ 'is-active': layoutConfig.primary === c.name }"
+                                    :title="c.name"
+                                    :style="{ backgroundColor: c.name === 'noir' ? 'var(--text-color)' : c.palette['500'] }"
+                                    @click="setPrimary(c)"
+                                />
+                            </div>
+                        </div>
+
+                        <div class="mm-theme__group">
+                            <div class="mm-theme__title">Surface (cinzas)</div>
+                            <div class="mm-theme__swatches">
+                                <button
+                                    v-for="s in surfaces"
+                                    :key="s.name"
+                                    type="button"
+                                    class="mm-theme__swatch"
+                                    :class="{ 'is-active': surfaceIsActive(s) }"
+                                    :title="s.name"
+                                    :style="{ backgroundColor: s.palette['500'] }"
+                                    @click="setSurface(s)"
+                                />
+                            </div>
+                        </div>
+
+                        <div class="mm-theme__group">
+                            <div class="mm-theme__title">Preset</div>
+                            <div class="mm-theme__presets">
+                                <button
+                                    v-for="p in presetOptions"
+                                    :key="p"
+                                    type="button"
+                                    class="mm-theme__preset"
+                                    :class="{ 'is-active': layoutConfig.preset === p }"
+                                    @click="setPreset(p)"
+                                >{{ p }}</button>
+                            </div>
+                        </div>
+
+                        <div class="mm-theme__hint">
+                            Mudanças se aplicam ao app inteiro e ficam salvas no seu perfil.
+                        </div>
+
+                        <!-- Cards informativos (sem interação ainda) -->
+                        <div class="mm-info-card">
+                            <div class="mm-info-card__head">
+                                <i class="pi pi-window-maximize" />
+                                <span>Layout Variant</span>
+                                <span class="mm-info-card__badge">Em breve</span>
+                            </div>
+                            <div class="mm-info-card__body">
+                                Estrutura principal do menu lateral.
+                                <ul>
+                                    <li><strong>Rail</strong> — sidebar fina (60px) que expande pra 260px no hover. <em>Padrão atual.</em></li>
+                                    <li><strong>Classic</strong> — sidebar tradicional sempre visível.</li>
+                                </ul>
+                                <div class="mm-info-card__note">
+                                    No Melissa não se aplica (não tem sidebar). Configurável apenas no layout clássico.
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="mm-info-card">
+                            <div class="mm-info-card__head">
+                                <i class="pi pi-th-large" />
+                                <span>Menu Mode</span>
+                                <span class="mm-info-card__badge">Em breve</span>
+                            </div>
+                            <div class="mm-info-card__body">
+                                Comportamento do menu (somente quando o variant é <strong>Classic</strong>).
+                                <ul>
+                                    <li><strong>Static</strong> — menu fica fixo ao lado do conteúdo, sempre visível.</li>
+                                    <li><strong>Overlay</strong> — menu abre/fecha por cima do conteúdo (ganha mais espaço de trabalho).</li>
+                                </ul>
+                                <div class="mm-info-card__note">
+                                    Idem — só faz sentido no layout clássico.
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Grupos de sub-itens -->
+                    <template v-else-if="categoriaAtiva.groups.length">
+                        <div
+                            v-for="(g, gi) in categoriaAtiva.groups"
+                            :key="g.title"
+                            class="mm-group"
+                            :class="{ 'mm-group--divided': gi > 0 }"
+                        >
+                            <div class="mm-group__title">{{ g.title }}</div>
+
+                            <template v-for="item in g.items" :key="item.key">
+                                <!-- Sub-item especial: link de cadastro inline -->
+                                <div v-if="item.tipo === 'link-cadastro'" class="mm-link-row">
+                                    <div class="mm-link-row__head">
+                                        <i :class="item.icon" class="mm-link-row__icon" />
+                                        <span class="mm-link-row__label">{{ item.label }}</span>
+                                    </div>
+                                    <div class="mm-link-row__field">
+                                        <input
+                                            type="text"
+                                            :value="linkCadastro"
+                                            readonly
+                                            class="mm-link-row__input"
+                                            @click="$event.target.select()"
+                                        />
+                                        <button
+                                            class="mm-link-row__copy"
+                                            :class="{ 'is-copiado': copiado }"
+                                            :title="copiado ? 'Copiado!' : 'Copiar link'"
+                                            @click="copiarLink"
+                                        >
+                                            <i :class="copiado ? 'pi pi-check' : 'pi pi-copy'" class="text-xs" />
+                                        </button>
+                                    </div>
+                                </div>
+
+                                <!-- Sub-item normal -->
+                                <button
+                                    v-else
+                                    class="mm-sub"
+                                    :class="{ 'is-active': secaoAtiva === item.key }"
+                                    @click="clicarSubItem(item)"
+                                >
+                                    <i :class="item.icon" class="mm-sub__icon" />
+                                    <span class="mm-sub__label">{{ item.label }}</span>
+                                    <i class="mm-sub__chevron pi pi-chevron-right" />
+                                </button>
+                            </template>
+                        </div>
+                    </template>
+
+                    <!-- Categoria sem sub-itens (placeholder) -->
+                    <div v-else class="mm-empty">
+                        <i class="pi pi-th-large" />
+                        <div class="mm-empty__text">
+                            <strong>Em breve</strong>
+                            <span>Os atalhos de {{ categoriaAtiva.label }} ainda serão definidos.</span>
+                        </div>
+                    </div>
+                </div>
+            </aside>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+/* ─── Layer (overlay full-screen, transparente) ───────────── */
+.mm-layer {
+    position: absolute;
+    inset: 0;
+    z-index: 50;
+}
+
+/* ─── Painel float ───────────────────────────────────────── */
+.mm-panel {
+    position: absolute;
+    bottom: 6rem;
+    left: 1.75rem;
+    width: 640px;
+    height: 80vh;
+    max-height: calc(100vh - 8rem);
+    display: flex;
+    background: var(--m-bg-medium);
+    backdrop-filter: blur(32px) saturate(160%);
+    -webkit-backdrop-filter: blur(32px) saturate(160%);
+    border: 1px solid var(--m-border-strong);
+    border-radius: 18px;
+    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
+    overflow: hidden;
+    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+}
+
+/* ═══ ESQUERDA: categorias ═══════════════════════════════════ */
+.mm-side {
+    width: 280px;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    border-right: 1px solid var(--m-border);
+    background: var(--m-bg-soft);
+}
+.mm-side__head { padding: 18px 18px 8px; }
+.mm-side__title {
+    text-transform: uppercase;
+    letter-spacing: 0.18em;
+    color: var(--m-text-faint);
+    font-size: 0.62rem;
+    font-weight: 600;
+}
+.mm-side__list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 4px 10px;
+    scrollbar-width: thin;
+    scrollbar-color: var(--m-border-strong) transparent;
+}
+.mm-side__list::-webkit-scrollbar { width: 5px; }
+.mm-side__list::-webkit-scrollbar-thumb {
+    background: var(--m-border-strong);
+    border-radius: 3px;
+}
+
+.mm-cat {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 8px 10px;
+    background: transparent;
+    border: none;
+    border-radius: 10px;
+    color: var(--m-text);
+    text-align: left;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.88rem;
+    transition: background-color 120ms ease, color 120ms ease;
+}
+.mm-cat:hover { background: var(--m-bg-soft); color: var(--m-text); }
+.mm-cat.is-active {
+    background: var(--m-bg-soft-hover);
+    color: var(--m-text);
+}
+.mm-cat__icon {
+    width: 32px;
+    height: 32px;
+    display: grid;
+    place-items: center;
+    border-radius: 9px;
+    border: 1px solid var(--m-border-strong);
+    background: var(--m-bg-soft-hover);
+    flex-shrink: 0;
+    font-size: 0.85rem;
+}
+.mm-cat__label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mm-cat__chevron {
+    color: var(--m-text-faint);
+    font-size: 0.6rem;
+    opacity: 0;
+    transform: translateX(-4px);
+    transition: opacity 140ms ease, transform 140ms ease;
+}
+.mm-cat:hover .mm-cat__chevron,
+.mm-cat.is-active .mm-cat__chevron {
+    opacity: 1;
+    transform: translateX(0);
+}
+
+/* Rodapé do menu (ações + usuário) */
+.mm-side__foot {
+    padding: 8px;
+    border-top: 1px solid var(--m-border);
+}
+
+/* Lista de ações acima do user row */
+.mm-foot-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    margin-bottom: 6px;
+    padding-bottom: 6px;
+    border-bottom: 1px solid var(--m-border);
+}
+.mm-foot-item {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 7px 10px;
+    background: transparent;
+    border: none;
+    border-radius: 8px;
+    color: var(--m-text);
+    text-align: left;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.78rem;
+    transition: background-color 120ms ease, color 120ms ease;
+}
+.mm-foot-item:hover {
+    background: var(--m-bg-soft);
+    color: var(--m-text);
+}
+.mm-foot-item.is-active {
+    background: var(--m-bg-soft-hover);
+    color: var(--m-text);
+}
+.mm-foot-item.is-active > i {
+    color: var(--m-text);
+}
+.mm-foot-item > i {
+    width: 14px;
+    text-align: center;
+    color: var(--m-text-muted);
+    font-size: 0.78rem;
+}
+.mm-foot-item > span {
+    flex: 1;
+}
+.mm-foot-item__hint {
+    flex: none !important;
+    font-size: 0.65rem;
+    color: var(--m-text-muted);
+    background: var(--m-bg-soft);
+    padding: 1px 6px;
+    border-radius: 999px;
+}
+
+/* User row */
+.mm-user {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 10px;
+    border-radius: 10px;
+    transition: background-color 120ms ease;
+}
+.mm-user:hover { background: var(--m-bg-soft); }
+.mm-user__avatar {
+    width: 32px; height: 32px;
+    border-radius: 50%;
+    background: var(--m-accent-strong);
+    border: 1px solid var(--m-accent);
+    color: var(--p-primary-contrast-color, white);
+    font-weight: 600;
+    font-size: 0.78rem;
+    display: grid;
+    place-items: center;
+    flex-shrink: 0;
+    overflow: hidden;
+}
+.mm-user__avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+.mm-user__info { flex: 1; min-width: 0; }
+.mm-user__name {
+    font-size: 0.82rem;
+    font-weight: 500;
+    color: var(--m-text);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mm-user__role {
+    font-size: 0.68rem;
+    color: var(--m-text-muted);
+}
+.mm-user__signout {
+    width: 32px; height: 32px;
+    display: grid; place-items: center;
+    background: transparent;
+    border: 1px solid rgba(239, 68, 68, 0.25);
+    color: rgba(239, 68, 68, 0.85);
+    border-radius: 8px;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: all 140ms ease;
+    font-family: inherit;
+}
+.mm-user__signout:hover {
+    background: rgba(239, 68, 68, 0.15);
+    border-color: rgba(239, 68, 68, 0.5);
+    color: rgb(239, 68, 68);
+}
+
+/* ═══ DIREITA: sub-itens da categoria ═══════════════════════ */
+.mm-aside {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    padding: 18px;
+}
+.mm-aside__head { margin-bottom: 14px; }
+.mm-aside__title {
+    color: var(--m-text);
+    font-size: 1.15rem;
+    font-weight: 500;
+}
+.mm-aside__body {
+    flex: 1;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--m-border-strong) transparent;
+}
+.mm-aside__body::-webkit-scrollbar { width: 5px; }
+.mm-aside__body::-webkit-scrollbar-thumb {
+    background: var(--m-border-strong);
+    border-radius: 3px;
+}
+
+.mm-group + .mm-group {
+    margin-top: 12px;
+}
+.mm-group--divided {
+    padding-top: 12px;
+    border-top: 1px solid var(--m-border);
+}
+.mm-group__title {
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
+    color: var(--m-text-faint);
+    font-size: 0.62rem;
+    font-weight: 600;
+    padding: 0 10px 6px;
+}
+
+/* Sub-item normal */
+.mm-sub {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 10px;
+    background: transparent;
+    border: none;
+    border-radius: 8px;
+    color: var(--m-text);
+    text-align: left;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.85rem;
+    transition: background-color 120ms ease, color 120ms ease;
+}
+.mm-sub:hover { background: var(--m-bg-soft); color: var(--m-text); }
+.mm-sub.is-active {
+    background: var(--m-accent-soft);
+    border-left: 2px solid var(--m-accent);
+    padding-left: 8px;
+    color: var(--m-text);
+}
+.mm-sub__icon {
+    color: var(--m-text-muted);
+    width: 16px;
+    text-align: center;
+    flex-shrink: 0;
+    font-size: 0.85rem;
+}
+.mm-sub__label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mm-sub__chevron {
+    color: var(--m-text-faint);
+    font-size: 0.6rem;
+    opacity: 0;
+    transform: translateX(-3px);
+    transition: opacity 140ms ease, transform 140ms ease;
+}
+.mm-sub:hover .mm-sub__chevron { opacity: 1; transform: translateX(0); }
+
+/* Sub-item especial: link de cadastro (inline) */
+.mm-link-row {
+    padding: 8px 10px 12px;
+}
+.mm-link-row__head {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: var(--m-text);
+    font-size: 0.85rem;
+    margin-bottom: 8px;
+}
+.mm-link-row__icon {
+    color: var(--m-text-muted);
+    width: 16px;
+    text-align: center;
+    flex-shrink: 0;
+    font-size: 0.85rem;
+}
+.mm-link-row__label { font-weight: 500; }
+.mm-link-row__field {
+    display: flex;
+    align-items: stretch;
+    gap: 6px;
+    margin-left: 26px; /* alinha com o label, depois do espaço do ícone */
+}
+.mm-link-row__input {
+    flex: 1;
+    min-width: 0;
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border);
+    color: var(--m-text);
+    padding: 6px 10px;
+    border-radius: 7px;
+    font-size: 0.72rem;
+    font-family: 'JetBrains Mono', ui-monospace, monospace;
+    outline: none;
+    transition: background-color 140ms ease, border-color 140ms ease;
+}
+.mm-link-row__input:focus {
+    background: var(--m-bg-soft-hover);
+    border-color: var(--m-border-strong);
+}
+.mm-link-row__copy {
+    width: 30px;
+    height: auto;
+    flex-shrink: 0;
+    display: grid;
+    place-items: center;
+    background: var(--m-bg-soft-hover);
+    border: 1px solid var(--m-border-strong);
+    color: var(--m-text);
+    border-radius: 7px;
+    cursor: pointer;
+    font-family: inherit;
+    transition: all 140ms ease;
+}
+.mm-link-row__copy:hover {
+    background: var(--m-bg-soft-hover);
+}
+.mm-link-row__copy.is-copiado {
+    background: var(--m-accent-strong);
+    border-color: var(--m-accent);
+    color: var(--p-primary-contrast-color, white);
+}
+
+/* ─── View "Cores do Tema" embutida ─────────────────────────── */
+.mm-theme {
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+    padding: 4px 4px 12px;
+}
+.mm-theme__group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+.mm-theme__title {
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
+    color: var(--m-text-muted);
+    font-size: 0.62rem;
+    font-weight: 600;
+}
+.mm-theme__swatches {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+.mm-theme__swatch {
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    border: 1px solid var(--m-border-strong);
+    cursor: pointer;
+    padding: 0;
+    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
+}
+.mm-theme__swatch:hover {
+    transform: scale(1.12);
+}
+.mm-theme__swatch.is-active {
+    border-color: var(--m-text);
+    box-shadow: 0 0 0 2px var(--m-bg-soft-hover);
+    transform: scale(1.08);
+}
+.mm-theme__presets {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+.mm-theme__preset {
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border);
+    color: var(--m-text);
+    padding: 5px 11px;
+    border-radius: 8px;
+    font-size: 0.72rem;
+    font-family: inherit;
+    text-transform: capitalize;
+    cursor: pointer;
+    transition: all 140ms ease;
+}
+.mm-theme__preset:hover {
+    background: var(--m-bg-soft-hover);
+    color: var(--m-text);
+}
+.mm-theme__preset.is-active {
+    background: var(--m-border-strong);
+    border-color: var(--m-border-strong);
+    color: var(--m-text);
+}
+.mm-theme__hint {
+    font-size: 0.7rem;
+    color: var(--m-text-faint);
+    line-height: 1.4;
+    padding-top: 6px;
+    border-top: 1px solid var(--m-border);
+}
+
+/* ─── Info cards (descritivos, sem interação ainda) ─────── */
+.mm-info-card {
+    background: var(--m-bg-soft);
+    border: 1px solid var(--m-border);
+    border-radius: 12px;
+    padding: 12px 14px;
+    margin-top: 10px;
+}
+.mm-info-card__head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--m-text);
+    font-size: 0.78rem;
+    font-weight: 600;
+    margin-bottom: 8px;
+}
+.mm-info-card__head > i {
+    color: var(--m-text-muted);
+    font-size: 0.78rem;
+}
+.mm-info-card__badge {
+    margin-left: auto;
+    font-size: 0.6rem;
+    font-weight: 500;
+    padding: 1px 7px;
+    border-radius: 999px;
+    background: var(--m-bg-soft-hover);
+    border: 1px solid var(--m-border);
+    color: var(--m-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+.mm-info-card__body {
+    color: var(--m-text-muted);
+    font-size: 0.72rem;
+    line-height: 1.5;
+}
+.mm-info-card__body ul {
+    margin: 6px 0;
+    padding-left: 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+}
+.mm-info-card__body strong {
+    color: var(--m-text);
+    font-weight: 600;
+}
+.mm-info-card__body em {
+    color: var(--m-text-muted);
+    font-style: normal;
+    font-size: 0.66rem;
+}
+.mm-info-card__note {
+    margin-top: 6px;
+    padding-top: 6px;
+    border-top: 1px solid var(--m-border);
+    color: var(--m-text-faint);
+    font-size: 0.66rem;
+    font-style: italic;
+}
+
+/* Categoria vazia — placeholder */
+.mm-empty {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    color: var(--m-text-muted);
+    gap: 16px;
+    padding: 24px;
+}
+.mm-empty > i {
+    font-size: 2.5rem;
+    color: var(--m-text-faint);
+}
+.mm-empty__text {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    max-width: 280px;
+}
+.mm-empty__text strong {
+    color: var(--m-text-muted);
+    font-weight: 500;
+    font-size: 0.85rem;
+}
+.mm-empty__text span {
+    font-size: 0.75rem;
+    line-height: 1.4;
+}
+</style>
diff --git a/src/layout/melissa/composables/useMelissaEventos.js b/src/layout/melissa/composables/useMelissaEventos.js
new file mode 100644
index 0000000..e7d853a
--- /dev/null
+++ b/src/layout/melissa/composables/useMelissaEventos.js
@@ -0,0 +1,212 @@
+/*
+ * useMelissaEventos — composables que carregam eventos reais da agenda
+ * --------------------------------------------------
+ * Pattern espelhado de `src/features/agenda/pages/AgendaTerapeutaPage.vue`
+ * (loadMonthSearchRows ~ linha 539).
+ *
+ * Exporta dois composables:
+ *   - useMelissaEventosSemana(refDateRef) — semana de refDate (ref<Date>)
+ *   - useMelissaEventosHoje()             — apenas o dia atual
+ *
+ * Forma normalizada do evento:
+ *   {
+ *     id, tipo, status, titulo,
+ *     pacienteNome, modalidade, descricao,
+ *     color, label,
+ *     inicio_em, fim_em,
+ *     startH, endH,        // decimais (9.5 = 09:30) — usado pelo layout
+ *     dateKey              // 'YYYY-MM-DD' pra agrupar por dia
+ *   }
+ *
+ * Sem auth/tenant: retorna [] silencioso (UI segue funcional).
+ *
+ * NÃO inclui ocorrências virtuais de recorrência (loadAndExpand) pra simplificar
+ * o preview. Adicionar quando promover Melissa pra produção.
+ */
+import { ref, watch, onMounted, computed } from 'vue';
+import { supabase } from '@/lib/supabase/client';
+import { useTenantStore } from '@/stores/tenantStore';
+
+// ── Cores por tipo/status (consistente com o resto do Melissa) ──
+function pickColor(tipo, status) {
+    const s = String(status || '').toLowerCase();
+    if (s === 'realizado' || s === 'realizada') return '#10b981';
+    if (s === 'faltou') return '#ef4444';
+    if (s === 'cancelado' || s === 'cancelada') return '#94a3b8';
+
+    const t = String(tipo || '').toLowerCase();
+    if (t === 'supervisao' || t === 'supervisão') return '#a855f7';
+    if (t === 'reuniao' || t === 'reunião') return '#0ea5e9';
+    if (t === 'bloqueio') return '#64748b';
+    return '#6366f1'; // sessao default
+}
+
+function isoToDecimalHour(iso) {
+    const d = new Date(iso);
+    return d.getHours() + d.getMinutes() / 60;
+}
+
+function normalizeEvent(r) {
+    const pacNome = r.patients?.nome_completo || '';
+    return {
+        id: r.id,
+        tipo: r.tipo || 'sessao',
+        status: r.status || '',
+        titulo: r.titulo || '',
+        pacienteNome: pacNome,
+        modalidade: r.modalidade || '',
+        descricao: r.observacoes || '',
+        color: pickColor(r.tipo, r.status),
+        label: pacNome || r.titulo || '—',
+        inicio_em: r.inicio_em,
+        fim_em: r.fim_em,
+        startH: isoToDecimalHour(r.inicio_em),
+        endH: isoToDecimalHour(r.fim_em),
+        dateKey: String(r.inicio_em || '').slice(0, 10)
+    };
+}
+
+// ── Helper interno: garante uid + tenant + faz a query ──
+async function _fetchRange(start, end) {
+    const tenantStore = useTenantStore();
+    const { data: userData } = await supabase.auth.getUser();
+    const userId = userData?.user?.id || null;
+    if (typeof tenantStore.ensureLoaded === 'function') {
+        await tenantStore.ensureLoaded();
+    }
+    const tid = tenantStore.activeTenantId || tenantStore.tenantId || null;
+
+    if (!userId || !tid) return [];
+
+    const { data, error } = await supabase
+        .from('agenda_eventos')
+        .select('id, tipo, status, titulo, inicio_em, fim_em, modalidade, observacoes, patients!agenda_eventos_patient_id_fkey(nome_completo, status)')
+        .eq('owner_id', userId)
+        .is('mirror_of_event_id', null)
+        .gte('inicio_em', start.toISOString())
+        .lt('inicio_em', end.toISOString())
+        .order('inicio_em', { ascending: true });
+
+    if (error) throw error;
+    return (data || []).map(normalizeEvent);
+}
+
+// ── Range helpers ──────────────────────────────────────────────
+function rangeSemana(refDate) {
+    const ref = new Date(refDate);
+    const dow = ref.getDay(); // 0=dom, 1=seg
+    const diff = dow === 0 ? -6 : 1 - dow;
+    const segunda = new Date(ref);
+    segunda.setDate(ref.getDate() + diff);
+    segunda.setHours(0, 0, 0, 0);
+
+    // domingo final → usa dia seguinte 00:00 com `lt` pra incluir tudo até 23:59:59.999
+    const apósDomingo = new Date(segunda);
+    apósDomingo.setDate(segunda.getDate() + 7);
+    return { start: segunda, end: apósDomingo };
+}
+
+function rangeHoje() {
+    const inicio = new Date();
+    inicio.setHours(0, 0, 0, 0);
+    const fim = new Date(inicio);
+    fim.setDate(inicio.getDate() + 1); // amanhã 00:00
+    return { start: inicio, end: fim };
+}
+
+// ── COMPOSABLE 1: semana visível (MelissaAgenda) ──────────────
+export function useMelissaEventosSemana(refDateRef) {
+    const eventos = ref([]);
+    const loading = ref(false);
+    const error = ref(null);
+
+    async function fetch() {
+        loading.value = true;
+        error.value = null;
+        try {
+            const { start, end } = rangeSemana(refDateRef.value);
+            eventos.value = await _fetchRange(start, end);
+        } catch (e) {
+            error.value = e?.message || 'Erro ao carregar agenda';
+            eventos.value = [];
+            // eslint-disable-next-line no-console
+            console.warn('[useMelissaEventosSemana]', e);
+        } finally {
+            loading.value = false;
+        }
+    }
+
+    onMounted(fetch);
+    watch(refDateRef, fetch);
+
+    // Helper computado: agrupa por dateKey ('YYYY-MM-DD')
+    const eventosPorDia = computed(() => {
+        const map = {};
+        for (const ev of eventos.value) {
+            (map[ev.dateKey] ||= []).push(ev);
+        }
+        return map;
+    });
+
+    return { eventos, eventosPorDia, loading, error, refetch: fetch };
+}
+
+// ── COMPOSABLE 3: range arbitrário (FullCalendar passa via datesSet) ──
+// Usado pelo MelissaAgenda — refetcha sempre que start/end mudam (mudança
+// de view, navegação prev/next/today). Cobre Day/Week/Month/List sem custo.
+export function useMelissaEventosRange(startRef, endRef) {
+    const eventos = ref([]);
+    const loading = ref(false);
+    const error = ref(null);
+
+    async function fetch() {
+        const s = startRef.value;
+        const e = endRef.value;
+        if (!s || !e) { eventos.value = []; return; }
+
+        loading.value = true;
+        error.value = null;
+        try {
+            eventos.value = await _fetchRange(new Date(s), new Date(e));
+        } catch (err) {
+            error.value = err?.message || 'Erro ao carregar agenda';
+            eventos.value = [];
+            // eslint-disable-next-line no-console
+            console.warn('[useMelissaEventosRange]', err);
+        } finally {
+            loading.value = false;
+        }
+    }
+
+    onMounted(fetch);
+    watch([startRef, endRef], fetch);
+
+    return { eventos, loading, error, refetch: fetch };
+}
+
+// ── COMPOSABLE 2: apenas hoje (MelissaLayout) ──────────────────
+export function useMelissaEventosHoje() {
+    const eventos = ref([]);
+    const loading = ref(false);
+    const error = ref(null);
+
+    async function fetch() {
+        loading.value = true;
+        error.value = null;
+        try {
+            const { start, end } = rangeHoje();
+            eventos.value = await _fetchRange(start, end);
+        } catch (e) {
+            error.value = e?.message || 'Erro ao carregar agenda';
+            eventos.value = [];
+            // eslint-disable-next-line no-console
+            console.warn('[useMelissaEventosHoje]', e);
+        } finally {
+            loading.value = false;
+        }
+    }
+
+    onMounted(fetch);
+
+    return { eventos, loading, error, refetch: fetch };
+}
diff --git a/src/layout/melissa/composables/useMelissaPacientes.js b/src/layout/melissa/composables/useMelissaPacientes.js
new file mode 100644
index 0000000..bb92b44
--- /dev/null
+++ b/src/layout/melissa/composables/useMelissaPacientes.js
@@ -0,0 +1,107 @@
+/*
+ * useMelissaPacientes — composable que carrega pacientes ativos do terapeuta
+ * --------------------------------------------------
+ * Pattern espelhado de `src/features/patients/PatientsListPage.vue`:
+ *   - withOwnerFilter (apenas os pacientes do owner_id = uid do user logado)
+ *   - withTenantFilter (defesa em profundidade — RLS cobre, mas blindamos no client)
+ *   - normalizeStatus client-side (DB pode ter 'ativo'/'active'/null/etc.)
+ *
+ * Sem auth (sem uid ou tenant), retorna vazio sem erro — uso em /preview/melissa
+ * permite a página renderizar mesmo sem session.
+ *
+ * Forma normalizada do paciente:
+ *   { id, nome, email, telefone, avatar_url, status, last_attended_at, created_at }
+ *
+ * Quando precisar fora do Melissa: promover pra src/composables/.
+ */
+import { ref, onMounted } from 'vue';
+import { supabase } from '@/lib/supabase/client';
+import { useTenantStore } from '@/stores/tenantStore';
+
+// Mesma lógica da PatientsListPage.vue — DB pode ter valores variados
+function normalizeStatus(s) {
+    const v = String(s || '').toLowerCase().trim();
+    if (!v) return 'Ativo';
+    if (v === 'active' || v === 'ativo') return 'Ativo';
+    if (v === 'inactive' || v === 'inativo') return 'Inativo';
+    return v.charAt(0).toUpperCase() + v.slice(1);
+}
+
+export function useMelissaPacientes() {
+    const tenantStore = useTenantStore();
+
+    const pacientes = ref([]);
+    const loading = ref(false);
+    const error = ref(null);
+    const uid = ref(null);
+
+    async function ensureUid() {
+        if (uid.value) return uid.value;
+        const { data, error: err } = await supabase.auth.getUser();
+        if (err) return null;
+        uid.value = data?.user?.id || null;
+        return uid.value;
+    }
+
+    async function fetchPacientes() {
+        const userId = await ensureUid();
+
+        // Garante que o tenantStore foi hidratado (preview misc não passa por
+        // guard de auth, então o store pode estar vazio mesmo com user logado)
+        if (typeof tenantStore.ensureLoaded === 'function') {
+            await tenantStore.ensureLoaded();
+        }
+        const tid = tenantStore.activeTenantId || tenantStore.tenantId || null;
+
+        if (!userId || !tid) {
+            pacientes.value = [];
+            return;
+        }
+
+        loading.value = true;
+        error.value = null;
+
+        try {
+            // Não filtra status no SQL — DB tem valores inconsistentes
+            // ('ativo', 'Ativo', 'active', null...). Normaliza e filtra no client.
+            const { data, error: err } = await supabase
+                .from('patients')
+                .select('id, nome_completo, email_principal, telefone, status, avatar_url, last_attended_at, created_at')
+                .eq('owner_id', userId)
+                .eq('tenant_id', tid)
+                .order('nome_completo', { ascending: true })
+                .limit(1000);
+
+            if (err) throw err;
+
+            const todos = (data || []).map((r) => ({
+                id: r.id,
+                nome: r.nome_completo || '',
+                email: r.email_principal || '',
+                telefone: r.telefone || '',
+                avatar_url: r.avatar_url || null,
+                status: normalizeStatus(r.status),
+                last_attended_at: r.last_attended_at || null,
+                created_at: r.created_at || null
+            }));
+
+            pacientes.value = todos.filter((p) => p.status === 'Ativo');
+        } catch (e) {
+            error.value = e?.message || 'Erro ao carregar pacientes';
+            pacientes.value = [];
+            // eslint-disable-next-line no-console
+            console.warn('[useMelissaPacientes]', e);
+        } finally {
+            loading.value = false;
+        }
+    }
+
+    onMounted(fetchPacientes);
+
+    return {
+        pacientes,
+        loading,
+        error,
+        refetch: fetchPacientes
+    };
+}
diff --git a/src/layout/melissa/melissaToques.js b/src/layout/melissa/melissaToques.js
new file mode 100644
index 0000000..bc6c0fd
--- /dev/null
+++ b/src/layout/melissa/melissaToques.js
@@ -0,0 +1,116 @@
+/*
+ * melissaToques — geração de toques de término via Web Audio API
+ * --------------------------------------------------------------
+ * Não usa arquivos de áudio externos. Tudo gerado em runtime com
+ * osciladores. Mantém self-hosted, leve e sem build de assets.
+ *
+ * Uso:
+ *   import { TOQUES, playToque } from './melissaToques';
+ *   playToque('sino');
+ */
+
+export const TOQUES = [
+    { id: 'sino', label: 'Sino' },
+    { id: 'acorde', label: 'Acorde' },
+    { id: 'tic-tac', label: 'Tic-tac' },
+    { id: 'suave', label: 'Suave' },
+    { id: 'nenhum', label: 'Nenhum (silencioso)' }
+];
+
+function getCtx() {
+    const Ctx = window.AudioContext || window.webkitAudioContext;
+    return Ctx ? new Ctx() : null;
+}
+
+// Sino: clássico ding com decaimento longo
+function playSino(ctx) {
+    const osc = ctx.createOscillator();
+    const gain = ctx.createGain();
+    osc.connect(gain);
+    gain.connect(ctx.destination);
+    osc.type = 'sine';
+    osc.frequency.value = 880; // A5
+    gain.gain.setValueAtTime(0.0001, ctx.currentTime);
+    gain.gain.exponentialRampToValueAtTime(0.25, ctx.currentTime + 0.01);
+    gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 1.6);
+    osc.start();
+    osc.stop(ctx.currentTime + 1.7);
+    setTimeout(() => ctx.close(), 1900);
+}
+
+// Acorde: C maior arpejado (C5 E5 G5)
+function playAcorde(ctx) {
+    const freqs = [523.25, 659.25, 783.99];
+    freqs.forEach((freq, i) => {
+        const osc = ctx.createOscillator();
+        const gain = ctx.createGain();
+        osc.connect(gain);
+        gain.connect(ctx.destination);
+        osc.type = 'sine';
+        osc.frequency.value = freq;
+        const start = ctx.currentTime + i * 0.07;
+        gain.gain.setValueAtTime(0.0001, start);
+        gain.gain.exponentialRampToValueAtTime(0.18, start + 0.01);
+        gain.gain.exponentialRampToValueAtTime(0.001, start + 1.5);
+        osc.start(start);
+        osc.stop(start + 1.6);
+    });
+    setTimeout(() => ctx.close(), 2100);
+}
+
+// Tic-tac: dois cliques curtos e secos
+function playTicTac(ctx) {
+    [0, 0.18].forEach((delay) => {
+        const osc = ctx.createOscillator();
+        const gain = ctx.createGain();
+        osc.connect(gain);
+        gain.connect(ctx.destination);
+        osc.type = 'square';
+        osc.frequency.value = 1500;
+        const start = ctx.currentTime + delay;
+        gain.gain.setValueAtTime(0.0001, start);
+        gain.gain.exponentialRampToValueAtTime(0.12, start + 0.005);
+        gain.gain.exponentialRampToValueAtTime(0.001, start + 0.06);
+        osc.start(start);
+        osc.stop(start + 0.07);
+    });
+    setTimeout(() => ctx.close(), 500);
+}
+
+// Suave: fade-in/fade-out lento, quase respiração
+function playSuave(ctx) {
+    const osc = ctx.createOscillator();
+    const gain = ctx.createGain();
+    osc.connect(gain);
+    gain.connect(ctx.destination);
+    osc.type = 'sine';
+    osc.frequency.value = 660; // E5
+    gain.gain.setValueAtTime(0.0001, ctx.currentTime);
+    gain.gain.exponentialRampToValueAtTime(0.18, ctx.currentTime + 0.5);
+    gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 2.5);
+    osc.start();
+    osc.stop(ctx.currentTime + 2.6);
+    setTimeout(() => ctx.close(), 2800);
+}
+
+const PLAYERS = {
+    sino: playSino,
+    acorde: playAcorde,
+    'tic-tac': playTicTac,
+    suave: playSuave,
+    nenhum: () => {}
+};
+
+export function playToque(id) {
+    if (id === 'nenhum') return;
+    const fn = PLAYERS[id] || PLAYERS.sino;
+    try {
+        const ctx = getCtx();
+        if (!ctx) return;
+        // Web Audio em alguns browsers começa suspended até primeira interação
+        if (ctx.state === 'suspended') ctx.resume?.();
+        fn(ctx);
+    } catch {
+        // Falha silenciosa: não há nada útil a fazer aqui
+    }
+}
diff --git a/src/router/routes.misc.js b/src/router/routes.misc.js
index 80b8442..4d2ea03 100644
--- a/src/router/routes.misc.js
+++ b/src/router/routes.misc.js
@@ -23,6 +23,14 @@ export default {
             component: () => import('@/views/pages/Landing.vue')
         },
 
+        // Sandbox do layout Melissa (Direção B — lockscreen-style)
+        // Standalone, sem auth, sem AppLayout. Promovido de /preview/dashboard-win11.
+        {
+            path: 'preview/melissa',
+            name: 'PreviewMelissa',
+            component: () => import('@/layout/melissa/MelissaLayout.vue')
+        },
+
         // 404
         {
             path: 'pages/notfound',
diff --git a/src/views/pages/account/ProfilePage.vue b/src/views/pages/account/ProfilePage.vue
index 0e34815..6f7c85f 100644
--- a/src/views/pages/account/ProfilePage.vue
+++ b/src/views/pages/account/ProfilePage.vue
@@ -1366,7 +1366,7 @@ onBeforeUnmount(() => {
 
                 <div class="h-px bg-[var(--surface-border)] my-5" />
 
-                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                     <!-- Layout 1: Clássico -->
                     <button
                         class="lv-card"
@@ -1423,12 +1423,44 @@ onBeforeUnmount(() => {
                             </div>
                         </div>
                     </button>
+
+                    <!-- Layout 3: Melissa (Direção B) — Em construção -->
+                    <button
+                        class="lv-card lv-card--wip"
+                        :class="{ 'lv-card--active': layoutConfig.variant === 'melissa' }"
+                        @click="
+                            setVariant('melissa');
+                            markDirty();
+                        "
+                    >
+                        <span class="lv-card__badge">Em construção</span>
+                        <div class="lv-card__preview lv-card__preview--melissa">
+                            <div class="lv-pm__clock">12<span class="lv-pm__sep">:</span>30</div>
+                            <div class="lv-pm__cards">
+                                <div class="lv-pm__card" />
+                                <div class="lv-pm__card" />
+                                <div class="lv-pm__card" />
+                            </div>
+                            <div class="lv-pm__psi">ψ</div>
+                        </div>
+                        <div class="lv-card__foot">
+                            <div class="lv-card__radio">
+                                <div v-if="layoutConfig.variant === 'melissa'" class="lv-card__dot" />
+                            </div>
+                            <div>
+                                <div class="lv-card__name">Melissa</div>
+                                <div class="lv-card__sub">Tela cheia estilo Win11 lockscreen</div>
+                            </div>
+                        </div>
+                    </button>
                 </div>
 
                 <div class="mt-4 rounded-md border border-[var(--surface-border)] bg-[var(--surface-ground)] px-4 py-3 flex items-start gap-3">
                     <i class="pi pi-info-circle text-[var(--text-color-secondary)] mt-0.5 shrink-0" />
                     <div class="text-[1rem] text-[var(--text-color-secondary)] leading-relaxed">
-                        O layout Rail exibe ícones no canto esquerdo. Ao clicar em um ícone, o painel lateral expande com os itens de navegação. Disponível apenas no desktop.
+                        <strong>Rail:</strong> ícones no canto esquerdo + painel expansível. Disponível apenas no desktop.<br />
+                        <strong>Melissa</strong> <span class="text-[0.85rem] uppercase tracking-wider font-semibold" style="color: var(--primary-color)">— em construção:</span> layout fullscreen com resumo do dia, busca rápida e cronômetro de sessão. Selecionar aqui salva sua preferência, mas a navegação completa ainda não está integrada. Acesse o preview em
+                        <a href="/preview/melissa" target="_blank" rel="noopener" class="underline hover:text-[var(--text-color)]">/preview/melissa</a>.
                     </div>
                 </div>
             </div>
@@ -1702,6 +1734,90 @@ onBeforeUnmount(() => {
     margin-top: 1px;
 }
 
+/* ─── Card Melissa (Direção B) — preview Win11 lockscreen ──── */
+.lv-card--wip {
+    /* Listras suaves no fundo do card pra reforçar visualmente "em obras",
+       sem prejudicar o preview no topo. */
+    background-image: repeating-linear-gradient(
+        135deg,
+        transparent 0,
+        transparent 12px,
+        color-mix(in srgb, var(--primary-color) 4%, transparent) 12px,
+        color-mix(in srgb, var(--primary-color) 4%, transparent) 14px
+    );
+}
+.lv-card__badge {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    z-index: 2;
+    font-size: 0.62rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    padding: 3px 9px;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--primary-color) 22%, transparent);
+    color: var(--primary-color);
+    border: 1px solid color-mix(in srgb, var(--primary-color) 40%, transparent);
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+}
+.lv-card__preview--melissa {
+    position: relative;
+    background:
+        radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--primary-color) 35%, transparent) 0%, transparent 55%),
+        radial-gradient(circle at 25% 75%, color-mix(in srgb, var(--primary-color) 22%, transparent) 0%, transparent 50%),
+        linear-gradient(135deg, var(--surface-900, #0f172a) 0%, color-mix(in srgb, var(--primary-color) 50%, var(--surface-900, #0f172a)) 50%, var(--surface-900, #0f172a) 100%);
+    padding: 0;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 4px;
+}
+.lv-pm__clock {
+    font-family: 'Segoe UI', system-ui, sans-serif;
+    font-size: 1.4rem;
+    font-weight: 200;
+    color: rgba(255, 255, 255, 0.95);
+    letter-spacing: -0.04em;
+    line-height: 1;
+    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+}
+.lv-pm__sep {
+    opacity: 0.6;
+}
+.lv-pm__cards {
+    display: flex;
+    gap: 4px;
+    margin-top: 2px;
+}
+.lv-pm__card {
+    width: 14px;
+    height: 10px;
+    border-radius: 3px;
+    background: rgba(255, 255, 255, 0.18);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    backdrop-filter: blur(2px);
+}
+.lv-pm__psi {
+    position: absolute;
+    bottom: 6px;
+    left: 8px;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    color: rgba(255, 255, 255, 0.95);
+    font-family: 'Instrument Serif', Georgia, serif;
+    font-size: 0.7rem;
+    font-style: italic;
+    display: grid;
+    place-items: center;
+    line-height: 1;
+}
+
 /* ─── Animation ─────────────────────────────────────────── */
 @keyframes prof-fadeUp {
     from {