MelissaConfiguracoes: titulo + subtitulo de volta no accordion

Restaura label + desc tanto no header do grupo quanto no sub-item,
com altura confortavel (min-height 44px no item). Optimizacoes
mantidas pra evitar lag:

- Sem -webkit-line-clamp (custoso com o backdrop-filter do parent);
  desc 1 linha com text-overflow: ellipsis
- Icone inline (16-18px, sem caixa 32x32 + box-shadow transition)
- Sem transition de color-mix em hover

Hover/active continuam com cor primary (12-16%). Desc no hover/active
ganha tom misturado primary 70% pra ficar legivel sem competir com
o label.

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

src/layout/melissa/MelissaConfiguracoes.vue

@@ -350,7 +350,10 @@ function resetCores() {
                             <AccordionHeader>
                                 <div class="mcfg-grp-head">
                                     <i :class="g.icon" class="mcfg-grp-icon" />
-                                    <span class="mcfg-grp-label">{{ g.label }}</span>
+                                    <div class="mcfg-grp-text">
+                                        <span class="mcfg-grp-label">{{ g.label }}</span>
+                                        <span class="mcfg-grp-desc">{{ g.desc }}</span>
+                                    </div>
                                     <span class="mcfg-grp-badge">{{ g.items.length }}</span>
                                 </div>
                             </AccordionHeader>
@@ -362,11 +365,13 @@ function resetCores() {
                                         type="button"
                                         class="mcfg-nav-item"
                                         :class="{ 'is-active': secaoAtiva === s.key }"
-                                        :title="s.desc"
                                         @click="selecionar(s)"
                                     >
                                         <i :class="s.icon" class="mcfg-nav-item__icon" />
-                                        <span class="mcfg-nav-item__label">{{ s.label }}</span>
+                                        <div class="mcfg-nav-item__text">
+                                            <span class="mcfg-nav-item__label">{{ s.label }}</span>
+                                            <span class="mcfg-nav-item__desc">{{ s.desc }}</span>
+                                        </div>
                                     </button>
                                 </div>
                             </AccordionContent>
@@ -736,7 +741,7 @@ function resetCores() {
     padding: 2px 0 6px;
 }
 
-/* Header de grupo — icone inline + label + badge */
+/* Header de grupo — icone inline + (label + desc) + badge */
 .mcfg-grp-head {
     display: flex;
     align-items: center;
@@ -745,19 +750,33 @@ function resetCores() {
     min-width: 0;
 }
 .mcfg-grp-icon {
-    width: 16px;
+    width: 18px;
     text-align: center;
     color: var(--p-primary-color);
-    font-size: 0.92rem;
+    font-size: 0.95rem;
     flex-shrink: 0;
 }
-.mcfg-grp-label {
+.mcfg-grp-text {
     flex: 1;
     min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    text-align: left;
+}
+.mcfg-grp-label {
     font-size: 0.86rem;
     font-weight: 600;
     color: var(--m-text);
-    text-align: left;
+    line-height: 1.25;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mcfg-grp-desc {
+    font-size: 0.7rem;
+    color: var(--m-text-muted);
+    line-height: 1.3;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -778,28 +797,28 @@ function resetCores() {
     border-radius: 999px;
 }
 
-/* Sub-itens — botao linha unica, denso */
+/* Sub-itens — botao com titulo + subtitulo */
 .mcfg-nav-list {
     display: flex;
     flex-direction: column;
-    gap: 1px;
+    gap: 2px;
-    padding-left: 22px;
+    padding-left: 24px;
     padding-right: 4px;
 }
 .mcfg-nav-item {
     display: flex;
     align-items: center;
     gap: 10px;
-    padding: 7px 10px;
+    padding: 8px 10px;
     background: transparent;
     border: none;
-    border-radius: 7px;
+    border-radius: 8px;
     color: var(--m-text);
     cursor: pointer;
     text-align: left;
     font-family: inherit;
-    font-size: 0.84rem;
     width: 100%;
+    min-height: 44px;
 }
 .mcfg-nav-item:hover {
     background: color-mix(in srgb, var(--p-primary-color) 12%, transparent);
@@ -815,17 +834,36 @@ function resetCores() {
     width: 16px;
     text-align: center;
     color: var(--m-text-muted);
-    font-size: 0.82rem;
+    font-size: 0.85rem;
     flex-shrink: 0;
 }
-.mcfg-nav-item__label {
+.mcfg-nav-item__text {
     flex: 1;
     min-width: 0;
-    font-weight: 500;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+}
+.mcfg-nav-item__label {
+    font-size: 0.84rem;
+    font-weight: 600;
+    line-height: 1.2;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
+.mcfg-nav-item__desc {
+    font-size: 0.7rem;
+    color: var(--m-text-muted);
+    line-height: 1.3;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mcfg-nav-item:hover .mcfg-nav-item__desc,
+.mcfg-nav-item.is-active .mcfg-nav-item__desc {
+    color: color-mix(in srgb, var(--p-primary-color) 70%, var(--m-text-muted));
+}
 
 /* ═════ COL 2: Main ═════ */
 .mcfg-main {