MelissaMenu: hover/active primary nos itens do rodape

Hover e is-active dos .mm-foot-item agora usam --p-primary-color (text +
icone + bg color-mix 12-16%). Trocado "Meus Planos" -> "Meu Plano"
(singular). Cada item ganha is-active baseado em props.secaoAtiva
(perfil/plano/negocio/seguranca), Modo escuro fica is-active quando
isDarkTheme = true, Cores do Tema mantem is-active baseado em
themeViewActive.

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

src/layout/melissa/MelissaMenu.vue

@@ -408,20 +408,37 @@ async function sair() {
                 <div class="mm-side__foot">
                     <!-- Itens grudados acima do usuário -->
                     <div class="mm-foot-actions">
-                        <button class="mm-foot-item" @click="goPerfil">
+                        <button
+                            class="mm-foot-item"
+                            :class="{ 'is-active': props.secaoAtiva === 'perfil' }"
+                            @click="goPerfil"
+                        >
                             <i class="pi pi-user" /><span>Meu Perfil</span>
                         </button>
-                        <button class="mm-foot-item" @click="goPlano">
+                        <button
-                            <i class="pi pi-credit-card" /><span>Meus Planos</span>
+                            class="mm-foot-item"
+                            :class="{ 'is-active': props.secaoAtiva === 'plano' }"
+                            @click="goPlano"
+                        >
+                            <i class="pi pi-credit-card" /><span>Meu Plano</span>
                         </button>
-                        <button class="mm-foot-item" @click="goNegocio">
+                        <button
+                            class="mm-foot-item"
+                            :class="{ 'is-active': props.secaoAtiva === 'negocio' }"
+                            @click="goNegocio"
+                        >
                             <i class="pi pi-briefcase" /><span>Meu Negócio</span>
                         </button>
-                        <button class="mm-foot-item" @click="goSeguranca">
+                        <button
+                            class="mm-foot-item"
+                            :class="{ 'is-active': props.secaoAtiva === 'seguranca' }"
+                            @click="goSeguranca"
+                        >
                             <i class="pi pi-shield" /><span>Segurança</span>
                         </button>
                         <button
                             class="mm-foot-item"
+                            :class="{ 'is-active': isDarkTheme }"
                             :aria-pressed="isDarkTheme"
                             @click="toggleDarkAndPersist"
                         >
@@ -803,21 +820,25 @@ async function sair() {
     transition: background-color 120ms ease, color 120ms ease;
 }
 .mm-foot-item:hover {
-    background: var(--m-bg-soft);
+    background: color-mix(in srgb, var(--p-primary-color) 12%, transparent);
-    color: var(--m-text);
+    color: var(--p-primary-color);
+}
+.mm-foot-item:hover > i {
+    color: var(--p-primary-color);
 }
 .mm-foot-item.is-active {
-    background: var(--m-bg-soft-hover);
+    background: color-mix(in srgb, var(--p-primary-color) 16%, transparent);
-    color: var(--m-text);
+    color: var(--p-primary-color);
 }
 .mm-foot-item.is-active > i {
-    color: var(--m-text);
+    color: var(--p-primary-color);
 }
 .mm-foot-item > i {
     width: 14px;
     text-align: center;
     color: var(--m-text-muted);
     font-size: 0.78rem;
+    transition: color 120ms ease;
 }
 .mm-foot-item > span {
     flex: 1;