diff --git a/src/layout/melissa/MelissaBusca.vue b/src/layout/melissa/MelissaBusca.vue index 54970cd..2a49552 100644 --- a/src/layout/melissa/MelissaBusca.vue +++ b/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; }