MelissaConfiguracoes: Layout Melissa unificado em 1 pagina

Antes a sidebar tinha 4 items (Aparencia / Plano de fundo / Relogio /
Cronometro), cada um abria uma sessao separada. Agora vira 1 unico
item "Layout Melissa" com os 4 cards stackeados em uma tela so.

- grupos[0].items reduzido pra 1 entrada (key: aparencia, label:
  Layout Melissa)
- INLINE_KEYS so tem 'aparencia' agora
- DEPRECATED_ALIASES adicionado: /melissa/fundo, /melissa/relogio,
  /melissa/cronometro -> 'aparencia' (URLs antigas continuam abrindo
  a tela unificada)
- Template: 4 v-if/v-else-if -> 1 <template v-if> com os 4 .mcfg-w
  como siblings
- MelissaLayout SECOES.aparencia label: "Configuracoes do Melissa"
  -> "Layout Melissa" (icon palette)
- MelissaMenu CATEGORIAS aparencia label idem

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/layout/melissa/MelissaConfiguracoes.vue

@@ -45,6 +45,14 @@ const ROUTE_ALIASES = {
     seguranca: 'cfg-seguranca',
     bloqueios: 'cfg-bloqueios'
 };
+// URLs antigas (/melissa/fundo, /melissa/relogio, /melissa/cronometro)
+// agora caem no slug unificado "aparencia" — pagina Layout Melissa
+// concentra os 4 blocos em uma unica tela.
+const DEPRECATED_ALIASES = {
+    fundo:      'aparencia',
+    relogio:    'aparencia',
+    cronometro: 'aparencia'
+};
 const SECAO_ALIASES = Object.fromEntries(
     Object.entries(ROUTE_ALIASES).map(([slug, key]) => [key, slug])
 );
@@ -53,6 +61,7 @@ function rotaToSecao(rota) {
     if (!rota) return 'aparencia';
     const r = String(rota).toLowerCase();
     if (ROUTE_ALIASES[r]) return ROUTE_ALIASES[r];
+    if (DEPRECATED_ALIASES[r]) return DEPRECATED_ALIASES[r];
     if (INLINE_KEYS.has(r)) return r;
     if (COMPONENT_MAP[r]) return r;
     return 'aparencia';
@@ -96,8 +105,10 @@ const COMPONENT_MAP = {
     'cfg-seguranca':           defineAsyncComponent(() => import('@/views/pages/auth/SecurityPage.vue'))
 };
 
-// Keys que renderizam controles inline definidos neste arquivo (Layout Melissa)
-const INLINE_KEYS = new Set(['aparencia', 'fundo', 'relogio', 'cronometro']);
+// Keys que renderizam controles inline definidos neste arquivo (Layout Melissa).
+// Hoje ha apenas 1: pagina unificada que concentra Aparencia + Fundo
+// + Relogio + Cronometro nos 4 cards stackeados.
+const INLINE_KEYS = new Set(['aparencia']);
 
 const settings = inject('melissaSettings', null);
 if (!settings) {
@@ -131,13 +142,10 @@ const grupos = [
     {
         key: 'layout-melissa',
         label: 'Layout Melissa',
-        desc: 'Aparência, plano de fundo e cronômetro do resumo.',
+        desc: 'Aparência, plano de fundo, relógio e cronômetro do resumo.',
         icon: 'pi pi-palette',
         items: [
-            { key: 'aparencia',  label: 'Aparência',            desc: 'Tema claro/escuro, cor primária e tom de surface.',   icon: 'pi pi-palette' },
-            { key: 'fundo',      label: 'Plano de fundo',       desc: 'Imagem do resumo + opacidades (escurecedor e foto).', icon: 'pi pi-image' },
-            { key: 'relogio',    label: 'Relógio',              desc: 'Formato 24h ou 12h (AM/PM) no resumo.',               icon: 'pi pi-clock' },
-            { key: 'cronometro', label: 'Cronômetro de sessão', desc: 'Som ao terminar os 50 minutos da sessão.',            icon: 'pi pi-stopwatch' }
+            { key: 'aparencia', label: 'Layout Melissa', desc: 'Tema, cor primária, surface, plano de fundo, relógio e cronômetro — tudo numa tela só.', icon: 'pi pi-palette' }
         ]
     },
     {
@@ -395,8 +403,9 @@ function resetCores() {
 
                 <div class="mcfg-main__inner">
 
-                    <!-- ──── Aparência ──── -->
-                    <div v-if="secaoAtiva === 'aparencia'" class="mcfg-w">
+                    <!-- ──── Layout Melissa unificado: Aparência + Fundo + Relógio + Cronômetro ──── -->
+                    <template v-if="secaoAtiva === 'aparencia'">
+                    <div class="mcfg-w">
                         <div class="mcfg-w__head">
                             <span class="mcfg-w__title"><i class="pi pi-palette" /> Aparência</span>
                             <button class="mcfg-w__action" v-tooltip.left="'Voltar ao padrão (noir)'" @click="resetCores">
@@ -457,7 +466,7 @@ function resetCores() {
                     </div>
 
                     <!-- ──── Plano de fundo ──── -->
-                    <div v-else-if="secaoAtiva === 'fundo'" class="mcfg-w">
+                    <div class="mcfg-w">
                         <div class="mcfg-w__head">
                             <span class="mcfg-w__title"><i class="pi pi-image" /> Plano de fundo</span>
                             <button v-if="bgUrl" class="mcfg-w__action mcfg-w__action--danger" v-tooltip.left="'Voltar ao gradiente padrão'" @click="clearBg">
@@ -518,7 +527,7 @@ function resetCores() {
                     </div>
 
                     <!-- ──── Relógio ──── -->
-                    <div v-else-if="secaoAtiva === 'relogio'" class="mcfg-w">
+                    <div class="mcfg-w">
                         <div class="mcfg-w__head">
                             <span class="mcfg-w__title"><i class="pi pi-clock" /> Relógio</span>
                         </div>
@@ -537,7 +546,7 @@ function resetCores() {
                     </div>
 
                     <!-- ──── Cronômetro ──── -->
-                    <div v-else-if="secaoAtiva === 'cronometro'" class="mcfg-w">
+                    <div class="mcfg-w">
                         <div class="mcfg-w__head">
                             <span class="mcfg-w__title"><i class="pi pi-stopwatch" /> Cronômetro de sessão</span>
                         </div>
@@ -555,6 +564,7 @@ function resetCores() {
                             <div class="mcfg-field__hint">Som ao final dos 50 minutos da sessão.</div>
                         </div>
                     </div>
+                    </template>
 
                     <!-- ──── Embed dinâmico (páginas /configuracoes/*) ──── -->
                     <div v-else-if="embedComp" class="mcfg-embed-wrap">

src/layout/melissa/MelissaLayout.vue

@@ -161,8 +161,8 @@ const SECOES = {
     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.' },
-    // Página interna de configs do layout Melissa (aparência, fundo, relógio, cronômetro)
-    aparencia: { label: 'Configurações do Melissa', icon: 'pi pi-cog', descricao: 'Aparência, plano de fundo, relógio e cronômetro.' },
+    // Pagina unificada do Layout Melissa (Aparencia + Fundo + Relogio + Cronometro)
+    aparencia: { label: 'Layout Melissa', icon: 'pi pi-palette', descricao: 'Aparência, plano de fundo, relógio e cronômetro do resumo.' },
     // Atalhos de Conta — todas montam o MelissaConfiguracoes com a seção embed pré-selecionada
     perfil:    { label: 'Meu Perfil',  icon: 'pi pi-user',        descricao: 'Dados pessoais, avatar e preferências.' },
     plano:     { label: 'Meu Plano',   icon: 'pi pi-credit-card', descricao: 'Plano contratado, limites e fatura.' },

src/layout/melissa/MelissaMenu.vue

@@ -151,7 +151,7 @@ const CATEGORIAS = [
                 title: 'Layout Melissa',
                 items: [
                     // Sem `route` — emit('select', 'aparencia') abre página interna do Melissa
-                    { key: 'aparencia', label: 'Aparência e cronômetro', icon: 'pi pi-palette' }
+                    { key: 'aparencia', label: 'Layout Melissa', icon: 'pi pi-palette' }
                 ]
             },
             {