From dad1fd72c2ddf6e72c0b2bb3801d6030218fe651 Mon Sep 17 00:00:00 2001
From: Leonardo <lmnohama@gmail.com>
Date: Wed, 6 May 2026 15:22:22 -0300
Subject: [PATCH] MelissaPerfil: cards com chrome estilo financeiro (icon-box +
 sub + body)

Cada card .mpr-w agora segue o mesmo padrao visual do MelissaFinanceiro:
- Head: icon-box 36x36 com bg primary-tint + titulo + subtitulo
- Border-bottom separando head do body
- Body wrappado em .mpr-w__body com padding 14px e gap 12px
- Box-shadow elevando o card sobre o bg da sidebar/main

Subtitulos novos por card:
- Sua evolucao  : Nivel, conquistas e pendencias
- Avatar        : Foto exibida no menu e cabecalho
- Identidade    : Nome, apelido e descricao profissional
- Contato       : WhatsApp e e-mail de login
- Bio           : Apresentacao curta para o seu perfil publico
- Sites e Redes : Site, redes sociais e links customizados

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/layout/melissa/MelissaPerfil.vue | 124 +++++++++++++++++++--------
 1 file changed, 90 insertions(+), 34 deletions(-)

diff --git a/src/layout/melissa/MelissaPerfil.vue b/src/layout/melissa/MelissaPerfil.vue
index 6e8f62f..c605f4f 100644
--- a/src/layout/melissa/MelissaPerfil.vue
+++ b/src/layout/melissa/MelissaPerfil.vue
@@ -533,11 +533,14 @@ onBeforeUnmount(() => {
                         <!-- Card: Sua evolução -->
                         <div class="mpr-w mpr-w--side">
                             <div class="mpr-w__head">
-                                <span class="mpr-w__title">
-                                    <i class="pi pi-star" /> Sua evolução
-                                </span>
+                                <div class="mpr-w__icon"><i class="pi pi-star" /></div>
+                                <div class="mpr-w__title">
+                                    <div class="mpr-w__title-text">Sua evolução</div>
+                                    <div class="mpr-w__sub">Nível, conquistas e pendências</div>
+                                </div>
                             </div>
 
+                            <div class="mpr-w__body">
                             <div class="mpr-level">
                                 <div
                                     class="mpr-level__icon"
@@ -613,15 +616,19 @@ onBeforeUnmount(() => {
                                     {{ tip.text }}
                                 </button>
                             </div>
+                            </div><!-- /.mpr-w__body -->
                         </div>
 
                         <!-- Card: Avatar -->
                         <div id="mpr-sec-avatar" class="mpr-w mpr-w--side">
                             <div class="mpr-w__head">
-                                <span class="mpr-w__title">
-                                    <i class="pi pi-image" /> Avatar
-                                </span>
+                                <div class="mpr-w__icon"><i class="pi pi-image" /></div>
+                                <div class="mpr-w__title">
+                                    <div class="mpr-w__title-text">Avatar</div>
+                                    <div class="mpr-w__sub">Foto exibida no menu e cabeçalho</div>
+                                </div>
                             </div>
+                            <div class="mpr-w__body">
                             <div class="mpr-avatar">
                                 <div class="mpr-avatar__preview">
                                     <img v-if="ui.avatarPreview" :src="ui.avatarPreview" alt="Avatar" />
@@ -650,6 +657,7 @@ onBeforeUnmount(() => {
                                 />
                                 <div class="mpr-avatar__hint">JPG, PNG ou WebP. Máximo 5 MB.</div>
                             </div>
+                            </div><!-- /.mpr-w__body -->
                         </div>
                     </div>
 
@@ -667,8 +675,10 @@ onBeforeUnmount(() => {
                 <!-- Skeleton enquanto carrega -->
                 <template v-if="loading">
                     <div class="mpr-w" v-for="n in 3" :key="`sk-${n}`">
-                        <Skeleton width="40%" height="20px" class="mb-3" />
-                        <Skeleton v-for="m in 3" :key="`sk-${n}-${m}`" width="100%" height="40px" class="mb-2" />
+                        <div class="mpr-w__body">
+                            <Skeleton width="40%" height="20px" class="mb-3" />
+                            <Skeleton v-for="m in 3" :key="`sk-${n}-${m}`" width="100%" height="40px" class="mb-2" />
+                        </div>
                     </div>
                 </template>
 
@@ -676,10 +686,13 @@ onBeforeUnmount(() => {
                     <!-- ── Identidade ── -->
                     <div id="mpr-sec-identidade" class="mpr-w">
                         <div class="mpr-w__head">
-                            <span class="mpr-w__title">
-                                <i class="pi pi-id-card" /> Identidade
-                            </span>
+                            <div class="mpr-w__icon"><i class="pi pi-id-card" /></div>
+                            <div class="mpr-w__title">
+                                <div class="mpr-w__title-text">Identidade</div>
+                                <div class="mpr-w__sub">Nome, apelido e descrição profissional</div>
+                            </div>
                         </div>
+                        <div class="mpr-w__body">
                         <div class="mpr-grid">
                             <div class="mpr-field mpr-field--full">
                                 <FloatLabel variant="on">
@@ -741,15 +754,19 @@ onBeforeUnmount(() => {
                                 </FloatLabel>
                             </div>
                         </div>
+                        </div><!-- /.mpr-w__body -->
                     </div>
 
                     <!-- ── Contato ── -->
                     <div id="mpr-sec-contato" class="mpr-w">
                         <div class="mpr-w__head">
-                            <span class="mpr-w__title">
-                                <i class="pi pi-phone" /> Contato
-                            </span>
+                            <div class="mpr-w__icon"><i class="pi pi-phone" /></div>
+                            <div class="mpr-w__title">
+                                <div class="mpr-w__title-text">Contato</div>
+                                <div class="mpr-w__sub">WhatsApp e e-mail de login</div>
+                            </div>
                         </div>
+                        <div class="mpr-w__body">
                         <div class="mpr-grid">
                             <div class="mpr-field mpr-field--half">
                                 <FloatLabel variant="on">
@@ -780,15 +797,19 @@ onBeforeUnmount(() => {
                                 <small class="mpr-hint">Pra trocar, vá em Segurança.</small>
                             </div>
                         </div>
+                        </div><!-- /.mpr-w__body -->
                     </div>
 
                     <!-- ── Bio ── -->
                     <div id="mpr-sec-bio" class="mpr-w">
                         <div class="mpr-w__head">
-                            <span class="mpr-w__title">
-                                <i class="pi pi-pencil" /> Bio
-                            </span>
+                            <div class="mpr-w__icon"><i class="pi pi-pencil" /></div>
+                            <div class="mpr-w__title">
+                                <div class="mpr-w__title-text">Bio</div>
+                                <div class="mpr-w__sub">Apresentação curta para o seu perfil público</div>
+                            </div>
                         </div>
+                        <div class="mpr-w__body">
                         <FloatLabel variant="on">
                             <Textarea
                                 id="mpr_bio"
@@ -800,19 +821,23 @@ onBeforeUnmount(() => {
                             <label for="mpr_bio">Conte um pouco sobre você</label>
                         </FloatLabel>
                         <small class="mpr-hint">Apresentação curta — aparece no seu perfil público.</small>
+                        </div><!-- /.mpr-w__body -->
                     </div>
 
                     <!-- ── Sites e Redes ── -->
                     <div id="mpr-sec-redes" class="mpr-w">
                         <div class="mpr-w__head">
-                            <span class="mpr-w__title">
-                                <i class="pi pi-share-alt" /> Sites e Redes
-                            </span>
+                            <div class="mpr-w__icon"><i class="pi pi-share-alt" /></div>
+                            <div class="mpr-w__title">
+                                <div class="mpr-w__title-text">Sites e Redes</div>
+                                <div class="mpr-w__sub">Site, redes sociais e links customizados</div>
+                            </div>
                             <button class="mpr-w__action" @click="addCustomSocial">
                                 <i class="pi pi-plus" />
                                 <span>Adicionar</span>
                             </button>
                         </div>
+                        <div class="mpr-w__body">
                         <div class="mpr-grid">
                             <div class="mpr-field mpr-field--half">
                                 <FloatLabel variant="on">
@@ -880,6 +905,7 @@ onBeforeUnmount(() => {
                                 </button>
                             </div>
                         </div>
+                        </div><!-- /.mpr-w__body -->
                     </div>
                 </template>
             </div>
@@ -1109,35 +1135,56 @@ onBeforeUnmount(() => {
     }
 }
 
-/* ═══════ Card-base (mpr-w) ═══════ */
+/* ═══════ Card-base (mpr-w) — visual igual aos cards do MelissaFinanceiro:
+   head com icon-box colorido + titulo + subtitulo + border-bottom; body
+   com padding interno separado; box-shadow pra elevacao. */
 .mpr-w {
-    background: var(--m-bg-medium);
+    background: var(--m-bg-soft);
     border: 1px solid var(--m-border);
     border-radius: 12px;
-    padding: 14px;
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
     display: flex;
     flex-direction: column;
-    gap: 10px;
 }
 .mpr-w--side {
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
 }
 .mpr-w__head {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    padding: 0;
+    gap: 10px;
+    padding: 12px 14px;
+    border-bottom: 1px solid var(--m-border);
 }
+.mpr-w__icon {
+    width: 36px;
+    height: 36px;
+    display: grid;
+    place-items: center;
+    border-radius: 9px;
+    flex-shrink: 0;
+    background: color-mix(in srgb, var(--p-primary-color) 15%, transparent);
+    color: var(--p-primary-color);
+    font-size: 1rem;
+}
+.mpr-w__icon > i { font-size: 0.95rem; }
 .mpr-w__title {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 0.86rem;
+    flex: 1;
+    min-width: 0;
+}
+.mpr-w__title-text {
+    font-size: 0.92rem;
     font-weight: 700;
     color: var(--m-text);
+    line-height: 1.2;
+}
+.mpr-w__sub {
+    font-size: 0.74rem;
+    color: var(--m-text-muted);
+    margin-top: 2px;
+    line-height: 1.3;
 }
-.mpr-w__title > i { color: var(--p-primary-color); font-size: 0.92rem; }
 .mpr-w__action {
     display: inline-flex;
     align-items: center;
@@ -1145,16 +1192,25 @@ onBeforeUnmount(() => {
     padding: 5px 10px;
     border-radius: 7px;
     border: 1px solid var(--m-border);
-    background: var(--m-bg-soft);
+    background: var(--m-bg-medium);
     color: var(--m-text);
     cursor: pointer;
     font-size: 0.74rem;
     font-weight: 600;
+    flex-shrink: 0;
     transition: background-color 120ms ease;
 }
 .mpr-w__action:hover { background: var(--m-bg-soft-hover); }
 .mpr-w__action > i { font-size: 0.72rem; color: var(--p-primary-color); }
 
+/* Body do card — wrapper unificado pra padding/gap consistente */
+.mpr-w__body {
+    padding: 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
 /* ═══════ Gamificação ═══════ */
 .mpr-level {
     display: flex;