From 7572cb32959b7fcfebcdd6934faf479138dc80aa Mon Sep 17 00:00:00 2001
From: Leonardo <lmnohama@gmail.com>
Date: Wed, 6 May 2026 14:30:04 -0300
Subject: [PATCH] MelissaMenu: divisor com degrade entre categorias

Cada .mm-cat (exceto a ultima) ganha um ::after de 1px que sai
colado na borda esquerda e some no meio via linear-gradient
(--m-border-strong -> transparent). Da uma separacao visual
sutil sem precisar de border-bottom solido.

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

diff --git a/src/layout/melissa/MelissaMenu.vue b/src/layout/melissa/MelissaMenu.vue
index 385095d..8f13e89 100644
--- a/src/layout/melissa/MelissaMenu.vue
+++ b/src/layout/melissa/MelissaMenu.vue
@@ -738,6 +738,7 @@ async function sair() {
 }
 
 .mm-cat {
+    position: relative;
     width: 100%;
     display: flex;
     align-items: center;
@@ -753,6 +754,21 @@ async function sair() {
     font-size: 0.88rem;
     transition: background-color 120ms ease, color 120ms ease;
 }
+/* Divisor com degrade — sai colado na borda esquerda e some no meio */
+.mm-cat:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 50%;
+    bottom: -1px;
+    height: 1px;
+    background: linear-gradient(
+        to right,
+        var(--m-border-strong) 0%,
+        transparent 100%
+    );
+    pointer-events: none;
+}
 .mm-cat:hover { background: var(--m-bg-soft); color: var(--m-text); }
 .mm-cat.is-active {
     background: var(--m-bg-soft-hover);