Layout Melissa (Direção B): preview, /profile, Agenda, dock, cadastro

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>

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 {