From 6c39c58dc83740d783e104e8ce8bb89f38f2b60a Mon Sep 17 00:00:00 2001
From: Leonardo <lmnohama@gmail.com>
Date: Thu, 21 May 2026 21:54:37 -0300
Subject: [PATCH] melissa/paciente-docs: drawer mobile herda tema (win11-root
 no portal)

Drawer teleportado pro body perdia as vars --m-* (definidas em
.win11-root no MelissaLayout), caia nos fallbacks hardcoded (#1a1d2e)
e ficava mais escuro que o resto do tema.

Fix:
- Wrapper .mpd-drawer-portal recebe class win11-root pra trazer as
  vars --m-* pro escopo teleportado.
- Vars locais --mpd-bg/--mpd-border/--mpd-text com cascata:
  --m-* (win11-root) -> --p-* (PrimeVue global) -> hardcoded.
  Respeita dark/light automaticamente.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../melissa/MelissaPatientDocuments.vue       | 56 +++++++++++--------
 1 file changed, 34 insertions(+), 22 deletions(-)

diff --git a/src/layout/melissa/MelissaPatientDocuments.vue b/src/layout/melissa/MelissaPatientDocuments.vue
index 0e39665..ecabb3c 100644
--- a/src/layout/melissa/MelissaPatientDocuments.vue
+++ b/src/layout/melissa/MelissaPatientDocuments.vue
@@ -181,24 +181,27 @@ onBeforeUnmount(() => {
 <template>
     <!-- Mobile drawer (tipos) — teleportado pro body pra escapar de
          stacking contexts pais (transform/filter no MelissaPaciente
-         travavam o fixed) -->
+         travavam o fixed). win11-root no wrapper pra herdar os
+         tokens --m-* definidos nesse escopo. -->
     <Teleport to="body">
-        <Transition name="mpd-drawer-fade">
-            <div
-                v-show="isMobile && drawerOpen"
-                class="mpd-mobile-drawer"
-                :class="{ 'is-open': drawerOpen }"
-            >
-                <div id="mpd-mobile-drawer-target" class="mpd-mobile-drawer__scroll" />
-            </div>
-        </Transition>
-        <Transition name="mpd-drawer-fade">
-            <div
-                v-show="isMobile && drawerOpen"
-                class="mpd-mobile-drawer__backdrop"
-                @click="fecharDrawer"
-            />
-        </Transition>
+        <div class="win11-root mpd-drawer-portal">
+            <Transition name="mpd-drawer-fade">
+                <div
+                    v-show="isMobile && drawerOpen"
+                    class="mpd-mobile-drawer"
+                    :class="{ 'is-open': drawerOpen }"
+                >
+                    <div id="mpd-mobile-drawer-target" class="mpd-mobile-drawer__scroll" />
+                </div>
+            </Transition>
+            <Transition name="mpd-drawer-fade">
+                <div
+                    v-show="isMobile && drawerOpen"
+                    class="mpd-mobile-drawer__backdrop"
+                    @click="fecharDrawer"
+                />
+            </Transition>
+        </div>
     </Teleport>
 
     <section class="mpd-page">
@@ -670,8 +673,17 @@ onBeforeUnmount(() => {
 
 <!-- Styles do drawer mobile NÃO-scoped — o <Teleport to="body"> tira o
      elemento da árvore do componente, então perde os atributos data-v
-     do scoped. Classes globais .mpd-mobile-drawer* garantem que aplique. -->
+     do scoped. O wrapper .mpd-drawer-portal carrega .win11-root pra
+     herdar os tokens --m-* (definidos em MelissaLayout). -->
 <style>
+/* Wrapper inerte — não cria stacking, só serve como host das vars */
+.mpd-drawer-portal {
+    /* Garante que mesmo sem .win11-root (improvável) caia em fallbacks
+       de PrimeVue tokens, que existem globalmente e respeitam dark/light. */
+    --mpd-bg: var(--m-bg-medium, var(--p-content-background, #ffffff));
+    --mpd-border: var(--m-border, var(--p-content-border-color, rgba(0,0,0,0.1)));
+    --mpd-text: var(--m-text, var(--p-text-color, #1a1a1a));
+}
 .mpd-mobile-drawer {
     position: fixed;
     top: 0;
@@ -680,13 +692,13 @@ onBeforeUnmount(() => {
     height: 100dvh;
     width: min(320px, 86vw);
     z-index: 80;
-    background: var(--m-bg-medium, #1a1d2e);
+    background: var(--mpd-bg);
     backdrop-filter: blur(28px) saturate(160%);
     -webkit-backdrop-filter: blur(28px) saturate(160%);
-    border-right: 1px solid var(--m-border, rgba(255,255,255,0.1));
+    border-right: 1px solid var(--mpd-border);
     transform: translateX(-100%);
     transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
-    color: var(--m-text, #fff);
+    color: var(--mpd-text);
     display: flex;
     flex-direction: column;
     font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
@@ -709,7 +721,7 @@ onBeforeUnmount(() => {
 .mpd-mobile-drawer__scroll .mpd-side {
     width: 100%;
     height: 100%;
-    border: 1px solid var(--m-border, rgba(255,255,255,0.1));
+    border: 1px solid var(--mpd-border);
 }
 .mpd-mobile-drawer__backdrop {
     position: fixed;