From f1c24242e0e912aa16ee348bfa0c5b81158b598a Mon Sep 17 00:00:00 2001
From: Leonardo <lmnohama@gmail.com>
Date: Thu, 21 May 2026 16:53:08 -0300
Subject: [PATCH] melissa/templates: ajustes UI dos cards e icones (4 fixes)

1. Icone "eye" do header de Preview -> cor primary (classe
   mdt-main__title-icon-eye).

2. Icone "ellipsis-v" (3 pontos) dos cards do tenant -> cor
   primary via :deep(.p-button-icon) selector.

3. Variaveis do card: formato "< 12 variaveis >" (entities
   HTML &lt;/&gt;) em font monospace + cor primary + bold.
   Removido o icone pi-code (a propria notacao < > sinaliza).

4. .mdt-card max-height: 200px + overflow hidden. Foot agora
   tem justify-content: center + margin-top: auto pra grudar
   no fundo do card.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../melissa/MelissaDocumentosTemplates.vue    | 35 ++++++++++++++-----
 1 file changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/layout/melissa/MelissaDocumentosTemplates.vue b/src/layout/melissa/MelissaDocumentosTemplates.vue
index 17a1af5..128974a 100644
--- a/src/layout/melissa/MelissaDocumentosTemplates.vue
+++ b/src/layout/melissa/MelissaDocumentosTemplates.vue
@@ -359,7 +359,7 @@ onMounted(() => {
                             <template v-else-if="view === 'preview' && previewTemplate">
                                 <div class="mdt-main__title-row">
                                     <div class="mdt-main__title">
-                                        <i class="pi pi-eye" />
+                                        <i class="pi pi-eye mdt-main__title-icon-eye" />
                                         <span>{{ previewTemplate.nome_template }}</span>
                                     </div>
                                     <div class="mdt-preview-actions">
@@ -440,7 +440,7 @@ onMounted(() => {
                                         text
                                         rounded
                                         size="small"
-                                        class="!w-7 !h-7"
+                                        class="!w-7 !h-7 mdt-card__menu-btn"
                                         @click.stop="$refs[`menu_${tpl.id}`]?.[0]?.toggle($event)"
                                     />
                                     <Menu
@@ -455,8 +455,7 @@ onMounted(() => {
                                         inativo
                                     </span>
                                     <span class="mdt-card__vars">
-                                        <i class="pi pi-code" />
-                                        {{ tpl.variaveis?.length || 0 }} variáveis
+                                        &lt; {{ tpl.variaveis?.length || 0 }} variáveis &gt;
                                     </span>
                                 </div>
                             </div>
@@ -977,6 +976,8 @@ onMounted(() => {
     text-align: left;
     cursor: pointer;
     font-family: inherit;
+    max-height: 200px;
+    overflow: hidden;
     transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
 }
 .mdt-card:hover {
@@ -1086,17 +1087,35 @@ onMounted(() => {
 .mdt-card__foot {
     display: flex;
     align-items: center;
+    justify-content: center;
     gap: 8px;
-    margin-top: 4px;
+    margin-top: auto;
+    padding-top: 8px;
 }
 .mdt-card__vars {
     display: inline-flex;
     align-items: center;
     gap: 4px;
-    font-size: 0.7rem;
-    color: var(--m-text-muted);
+    font-size: 0.72rem;
+    font-weight: 600;
+    color: var(--p-primary-color);
+    font-family: 'JetBrains Mono', 'Consolas', monospace;
+    letter-spacing: 0.02em;
+}
+
+/* Botão 3-pontos do menu do card — cor primary */
+.mdt-card__menu-btn:deep(.p-button-icon) {
+    color: var(--p-primary-color) !important;
+}
+.mdt-card__menu-btn:hover:deep(.p-button-icon) {
+    color: var(--p-primary-color) !important;
+    opacity: 0.85;
+}
+
+/* Ícone eye do header de preview — cor primary */
+.mdt-main__title-icon-eye {
+    color: var(--p-primary-color) !important;
 }
-.mdt-card__vars > i { font-size: 0.65rem; }
 
 /* Mobile (<1024px) */
 @media (max-width: 1023px) {