busca melissa: panel usa surface do tema (resolve branco-em-branco)

Texto branco hardcoded ficava ilegivel no tema claro do PrimeVue
(branco em branco). Tema escuro funcionava ok pq fundo era escuro.

Fix: troca cores hardcoded por CSS tokens do tema:
- mb-panel background: var(--surface-card)
- mb-panel border: var(--surface-border)
- mb-item color: var(--text-color)
- mb-item__sub color: var(--text-color-secondary)
- mb-group__title color: var(--text-color-secondary) com opacity
- mb-item hover: color-mix com p-primary-color 8%

Icones semanticos (patient pink, sessao indigo, doc sky, intake
orange) ficam mais saturados no tema claro e suavizados no escuro
via :root.app-dark selectors.

Input field do search bar mantem fallback `white` — ele fica no
shell escuro do Melissa (lockscreen-style), nao depende do tema
PrimeVue.

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

src/layout/melissa/MelissaBusca.vue

@@ -472,7 +472,7 @@ onBeforeUnmount(() => {
     background: transparent;
     border: none;
     outline: none;
-    color: white;
+    color: var(--m-text, white); /* fallback white pro shell escuro do Melissa */
     font-size: 0.9rem;
     font-family: inherit;
     min-width: 0;
@@ -501,42 +501,45 @@ onBeforeUnmount(() => {
     z-index: 30;
     max-height: 60vh;
     overflow-y: auto;
-    /* Fundo mais sólido pra melhor contraste com o lockscreen */
-    background: rgba(20, 22, 32, 0.92);
-    backdrop-filter: blur(28px) saturate(160%);
-    -webkit-backdrop-filter: blur(28px) saturate(160%);
-    border: 1px solid rgba(255, 255, 255, 0.14);
+    /* Background do tema atual (claro ou escuro) — herda do PrimeVue
+       theme tokens. Antes era hardcoded escuro/transparente e ficava
+       texto-branco-em-fundo-branco no tema claro. */
+    background: var(--surface-card);
+    backdrop-filter: blur(20px) saturate(140%);
+    -webkit-backdrop-filter: blur(20px) saturate(140%);
+    border: 1px solid var(--surface-border);
     border-radius: 12px;
     padding: 6px;
-    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
     scrollbar-width: thin;
-    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
+    scrollbar-color: var(--surface-border) transparent;
 }
 .mb-panel::-webkit-scrollbar { width: 6px; }
 .mb-panel::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.18);
+    background: var(--surface-border);
     border-radius: 3px;
 }
 
 .mb-empty {
     padding: 18px 14px;
     text-align: center;
-    color: rgba(255, 255, 255, 0.65);
+    color: var(--text-color-secondary);
     font-size: 0.85rem;
 }
 
 .mb-group + .mb-group {
     margin-top: 4px;
     padding-top: 4px;
-    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    border-top: 1px solid var(--surface-border);
 }
 .mb-group__title {
     text-transform: uppercase;
     letter-spacing: 0.18em;
-    color: rgba(255, 255, 255, 0.5);
+    color: var(--text-color-secondary);
     font-size: 0.62rem;
     font-weight: 700;
     padding: 8px 10px 4px;
+    opacity: 0.75;
 }
 
 .mb-item {
@@ -548,7 +551,7 @@ onBeforeUnmount(() => {
     background: transparent;
     border: none;
     border-radius: 8px;
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--text-color);
     text-align: left;
     cursor: pointer;
     font-family: inherit;
@@ -556,36 +559,42 @@ onBeforeUnmount(() => {
 }
 .mb-item:hover,
 .mb-item.is-active {
-    background: rgba(255, 255, 255, 0.08);
+    background: color-mix(in srgb, var(--p-primary-color) 8%, transparent);
 }
 .mb-item__icon {
     width: 32px;
     height: 32px;
     display: grid;
     place-items: center;
-    background: rgba(255, 255, 255, 0.08);
+    background: var(--surface-ground);
     border-radius: 7px;
-    color: rgba(255, 255, 255, 0.7);
+    color: var(--text-color-secondary);
     flex-shrink: 0;
     font-size: 0.9rem;
 }
-/* Cores por tipo — espelha a paleta da agenda */
+/* Cores por tipo — semântica fixa (não depende do tema, é categoria). */
 .mb-item__icon--patient {
-    background: rgba(244, 114, 182, 0.18);   /* pink-400 — paciente */
-    color: #f9a8d4;
+    background: rgba(244, 114, 182, 0.18);
+    color: #ec4899;
 }
 .mb-item__icon--sessao {
-    background: rgba(99, 102, 241, 0.20);    /* indigo-500 — sessão (compromisso determinístico) */
-    color: #a5b4fc;
+    background: rgba(99, 102, 241, 0.20);
+    color: #6366f1;
 }
 .mb-item__icon--doc {
-    background: rgba(14, 165, 233, 0.18);    /* sky-500 — documentos */
-    color: #7dd3fc;
+    background: rgba(14, 165, 233, 0.18);
+    color: #0ea5e9;
 }
 .mb-item__icon--intake {
-    background: rgba(251, 146, 60, 0.18);    /* orange-400 — cadastros recebidos */
-    color: #fdba74;
+    background: rgba(251, 146, 60, 0.18);
+    color: #f97316;
 }
+/* Dark mode: clareia as cores semânticas pra manter contraste */
+:root.app-dark .mb-item__icon--patient { color: #f9a8d4; }
+:root.app-dark .mb-item__icon--sessao { color: #a5b4fc; }
+:root.app-dark .mb-item__icon--doc { color: #7dd3fc; }
+:root.app-dark .mb-item__icon--intake { color: #fdba74; }
+
 .mb-item__main {
     flex: 1;
     min-width: 0;
@@ -596,24 +605,21 @@ onBeforeUnmount(() => {
 .mb-item__label {
     font-size: 0.88rem;
     font-weight: 500;
-    color: rgba(255, 255, 255, 0.96);
+    color: var(--text-color);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 .mb-item__sub {
     font-size: 0.74rem;
-    color: rgba(255, 255, 255, 0.65);
+    color: var(--text-color-secondary);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-.mb-item:hover .mb-item__sub,
-.mb-item.is-active .mb-item__sub {
-    color: rgba(255, 255, 255, 0.78);
-}
 .mb-item__go {
-    color: rgba(255, 255, 255, 0.4);
+    color: var(--text-color-secondary);
+    opacity: 0.5;
     font-size: 0.75rem;
     flex-shrink: 0;
 }