CRM WhatsApp Grupo 3 completo + Marco A/B (Asaas) + admin SaaS + refactors polimórficos

Sessão 11+: fechamento do CRM de WhatsApp com dois providers (Evolution/Twilio),
sistema de créditos com Asaas/PIX, polimorfismo de telefones/emails, e integração
admin SaaS no /saas/addons existente.

═══════════════════════════════════════════════════════════════════════════
GRUPO 3 — WORKFLOW / CRM (completo)
═══════════════════════════════════════════════════════════════════════════

3.1 Tags · migration conversation_tags + seed de 5 system tags · composable
useConversationTags.js · popover + pills no drawer e nos cards do Kanban.

3.2 Atribuição de conversa a terapeuta · migration 20260421000012 com PK
(tenant_id, thread_key), UPSERT, RLS que valida assignee como membro ativo
do mesmo tenant · view conversation_threads expandida com assigned_to +
assigned_at · composable useConversationAssignment.js · drawer com Select
filtrável + botão "Assumir" · inbox com filtro aside (Todas/Minhas/Não
atribuídas) e chip do responsável em cada card (destaca "Eu" em azul).

3.3 Notas internas · migration conversation_notes · composable + seção
colapsável no drawer · apenas o criador pode editar/apagar (RLS).

3.5 Converter desconhecido em paciente · botão + dialog quick-cadastro ·
"Vincular existente" com Select filter de até 500 pacientes · cria
telefone WhatsApp (vinculado) via upsertWhatsappForExisting.

3.6 Histórico de conversa no prontuário · nova aba "Conversas" em
PatientProntuario.vue · PatientConversationsTab.vue com stats (total /
recebidas / enviadas / primeira / última), SelectButton de filtro, timeline
com bolhas por direção, mídia inline (imagem/áudio/vídeo/doc via signed
URL), indicadores ✓ ✓✓ de delivery, botão "Abrir no CRM".

═══════════════════════════════════════════════════════════════════════════
MARCO A — UNIFICAÇÃO WHATSAPP (dois providers mutuamente exclusivos)
═══════════════════════════════════════════════════════════════════════════

- Página chooser ConfiguracoesWhatsappChooserPage.vue com 2 cards (Pessoal/
  Oficial), deactivate via edge function deactivate-notification-channel
- send-whatsapp-message refatorada com roteamento por provider; Twilio deduz
  1 crédito antes do envio e refunda em falha
- Paridade Twilio (novo): módulo compartilhado supabase/functions/_shared/
  whatsapp-hooks.ts com lógica provider-agnóstica (opt-in, opt-out, auto-
  reply, schedule helpers em TZ São Paulo, makeTwilioCreditedSendFn que
  envolve envio em dedução atômica + rollback). Consumido por Evolution E
  Twilio inbound. Evolution refatorado (~290 linhas duplicadas removidas).
- Bucket privado whatsapp-media · decrypt via Evolution getBase64From
  MediaMessage · upload com path tenant/yyyy/mm · signed URLs on-demand

═══════════════════════════════════════════════════════════════════════════
MARCO B — SISTEMA DE CRÉDITOS WHATSAPP + ASAAS
═══════════════════════════════════════════════════════════════════════════

Banco:
- Migration 20260421000007_whatsapp_credits (4 tabelas: balance,
  transactions, packages, purchases) + RPCs add_whatsapp_credits e
  deduct_whatsapp_credits (atômicas com SELECT FOR UPDATE)
- Migration 20260421000013_tenant_cpf_cnpj (coluna em tenants com CHECK
  de 11 ou 14 dígitos)

Edge functions:
- create-whatsapp-credit-charge · Asaas v3 (sandbox + prod) · PIX com
  QR code · getOrCreateAsaasCustomer patcha customer existente com CPF
  quando está faltando
- asaas-webhook · recebe PAYMENT_RECEIVED/CONFIRMED e credita balance

Frontend (tenant):
- Página /configuracoes/creditos-whatsapp com saldo + loja + histórico
- Dialog de confirmação com CPF/CNPJ (validação via isValidCPF/CNPJ de
  utils/validators, formatação on-blur, pré-fill de tenants.cpf_cnpj,
  persiste no primeiro uso) · fallback sandbox 24971563792 REMOVIDO
- Composable useWhatsappCredits extrai erros amigáveis via
  error.context.json()

Frontend (SaaS admin):
- Em /saas/addons (reuso do pattern existente, não criou página paralela):
  - Aba 4 "Pacotes WhatsApp" — CRUD whatsapp_credit_packages com DataTable,
    toggle is_active inline, dialog de edição com validação
  - Aba 5 "Topup WhatsApp" — tenant Select com saldo ao vivo · RPC
    add_whatsapp_credits com p_admin_id = auth.uid() (auditoria) · histórico
    das últimas 20 transações topup/adjustment/refund

═══════════════════════════════════════════════════════════════════════════
GRUPO 2 — AUTOMAÇÃO
═══════════════════════════════════════════════════════════════════════════

2.3 Auto-reply · conversation_autoreply_settings + conversation_autoreply_
log · 3 modos de schedule (agenda das regras semanais, business_hours
custom, custom_window) · cooldown por thread · respeita opt-out · agora
funciona em Evolution E Twilio (hooks compartilhados)

2.4 Lembretes de sessão · conversation_session_reminders_settings +
_logs · edge send-session-reminders (cron) · janelas 24h e 2h antes ·
Twilio deduz crédito com rollback em falha

═══════════════════════════════════════════════════════════════════════════
GRUPO 5 — COMPLIANCE (LGPD Art. 18 §2)
═══════════════════════════════════════════════════════════════════════════

5.2 Opt-out · conversation_optouts + conversation_optout_keywords (10 system
seed + custom por tenant) · detecção por regex word-boundary e normalização
(lowercase + strip acentos + pontuação) · ack automático (deduz crédito em
Twilio) · opt-in via "voltar", "retornar", "reativar", "restart" ·
página /configuracoes/conversas-optouts com CRUD de keywords

═══════════════════════════════════════════════════════════════════════════
REFACTOR POLIMÓRFICO — TELEFONES + EMAILS
═══════════════════════════════════════════════════════════════════════════

- contact_types + contact_phones (entity_type + entity_id) — migration
  20260421000008 · contact_email_types + contact_emails — 20260421000011
- Componentes ContactPhonesEditor.vue e ContactEmailsEditor.vue (add/edit/
  remove com confirm, primary selector, WhatsApp linked badge)
- Composables useContactPhones.js + useContactEmails.js com
  unsetOtherPrimaries() e validação
- Trocado em PatientsCadastroPage.vue e MedicosPage.vue (removidos campos
  legados telefone/telefone_alternativo e email_principal/email_alternativo)
- Migration retroativa v2 (20260421000010) detecta conversation_messages
  e cria/atualiza phone como WhatsApp vinculado

═══════════════════════════════════════════════════════════════════════════
POLIMENTO VISUAL + INFRA
═══════════════════════════════════════════════════════════════════════════

- Skeletons simplificados no dashboard do terapeuta
- Animações fade-up com stagger via [--delay:Xms] (fix specificity sobre
  .dash-card box-shadow transition)
- ConfirmDialog com group="conversation-drawer" (evita montagem duplicada)
- Image preview PrimeVue com botão de download injetado via MutationObserver
  (fetch + blob para funcionar cross-origin)
- Áudio/vídeo com preload="metadata" e controles de velocidade do browser
- friendlySendError() mapeia códigos do edge pra mensagens pt-BR via
  error.context.json()
- Teleport #cfg-page-actions para ações globais de Configurações
- Brotli/Gzip + auto-import Vue/PrimeVue + bundle analyzer
- AppLayout consolidado (removidas duplicatas por área) + RouterPassthrough
- Removido console.trace debug que estava em watch de router e queries
  Supabase (degradava perf pra todos)
- Realtime em conversation_messages via publication supabase_realtime
- Notifier global flutuante com beep + toggle mute (4 camadas: badge +
  sino + popup + browser notification)

═══════════════════════════════════════════════════════════════════════════
MIGRATIONS NOVAS (13)
═══════════════════════════════════════════════════════════════════════════

20260420000001_patient_intake_invite_info_rpc
20260420000002_audit_logs_lgpd
20260420000003_audit_logs_unified_view
20260420000004_lgpd_export_patient_rpc
20260420000005_conversation_messages
20260420000005_search_global_rpc
20260420000006_conv_messages_notifications
20260420000007_notif_channels_saas_admin_insert
20260420000008_conv_messages_realtime
20260420000009_conv_messages_delivery_status
20260421000001_whatsapp_media_bucket
20260421000002_conversation_notes
20260421000003_conversation_tags
20260421000004_conversation_autoreply
20260421000005_conversation_optouts
20260421000006_session_reminders
20260421000007_whatsapp_credits
20260421000008_contact_phones
20260421000009_retroactive_whatsapp_link
20260421000010_retroactive_whatsapp_link_v2
20260421000011_contact_emails
20260421000012_conversation_assignments
20260421000013_tenant_cpf_cnpj

═══════════════════════════════════════════════════════════════════════════
EDGE FUNCTIONS NOVAS / MODIFICADAS
═══════════════════════════════════════════════════════════════════════════

Novas:
- _shared/whatsapp-hooks.ts (módulo compartilhado)
- asaas-webhook
- create-whatsapp-credit-charge
- deactivate-notification-channel
- evolution-webhook-provision
- evolution-whatsapp-inbound
- get-intake-invite-info
- notification-webhook
- send-session-reminders
- send-whatsapp-message
- submit-patient-intake
- twilio-whatsapp-inbound

═══════════════════════════════════════════════════════════════════════════
FRONTEND — RESUMO
═══════════════════════════════════════════════════════════════════════════

Composables novos: useAddonExtrato, useAuditoria, useAutoReplySettings,
useClinicKPIs, useContactEmails, useContactPhones, useConversationAssignment,
useConversationNotes, useConversationOptouts, useConversationTags,
useConversations, useLgpdExport, useSessionReminders, useWhatsappCredits

Stores: conversationDrawerStore

Componentes novos: ConversationDrawer, GlobalInboundNotifier, GlobalSearch,
ContactEmailsEditor, ContactPhonesEditor

Páginas novas: CRMConversasPage, PatientConversationsTab, AddonsExtratoPage,
AuditoriaPage, NotificationsHistoryPage, ConfiguracoesWhatsappChooserPage,
ConfiguracoesConversasAutoreplyPage, ConfiguracoesConversasOptoutsPage,
ConfiguracoesConversasTagsPage, ConfiguracoesCreditosWhatsappPage,
ConfiguracoesLembretesSessaoPage

Utils novos: addonExtratoExport, auditoriaExport, excelExport,
lgpdExportFormats

Páginas existentes alteradas: ClinicDashboard, PatientsCadastroPage,
PatientCadastroDialog, PatientsListPage, MedicosPage, PatientProntuario,
ConfiguracoesWhatsappPage, SaasWhatsappPage, ConfiguracoesRecursosExtrasPage,
ConfiguracoesPage, AgendaTerapeutaPage, AgendaClinicaPage, NotificationItem,
NotificationDrawer, AppLayout, AppTopbar, useMenuBadges,
patientsRepository, SaasAddonsPage (aba 4 + 5 WhatsApp)

Routes: routes.clinic, routes.configs, routes.therapist atualizados
Menus: clinic.menu, therapist.menu, saas.menu atualizados

═══════════════════════════════════════════════════════════════════════════
NOTAS

- Após subir, rodar supabase functions serve --no-verify-jwt
  --env-file supabase/functions/.env pra carregar o módulo _shared
- WHATSAPP_SETUP.md reescrito (~400 linhas) com setup completo dos 3
  providers + troubleshooting + LGPD
- HANDOFF.md atualizado com estado atual e próximos passos

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

src/features/agenda/components/ProximosFeriadosCard.vue

@@ -95,8 +95,9 @@ const loadingBloqueios = ref(false);
 async function loadBloqueiosMes() {
     if (!_ownerId.value) return;
     const ano = new Date().getFullYear();
+    const lastDay = new Date(ano, mesAtual, 0).getDate();
     const start = `${ano}-${String(mesAtual).padStart(2, '0')}-01`;
-    const end = `${ano}-${String(mesAtual).padStart(2, '0')}-31`;
+    const end = `${ano}-${String(mesAtual).padStart(2, '0')}-${String(lastDay).padStart(2, '0')}`;
     loadingBloqueios.value = true;
     try {
         const { data } = await supabase.from('agenda_bloqueios').select('data_inicio').eq('owner_id', _ownerId.value).in('origem', ['agenda_feriado', 'agenda_dia']).gte('data_inicio', start).lte('data_inicio', end);

src/features/agenda/pages/AgendaClinicaPage.vue

@@ -2075,7 +2075,7 @@ function goRecorrencias() {
     <div ref="headerSentinelRef" class="ag-sentinel" />
 
     <!-- Topbar compacta sticky -->
-    <div ref="headerEl" class="ag-topbar mx-3 md:mx-4 mb-3" :class="{ 'ag-topbar--stuck': headerStuck }">
+    <div ref="headerEl" class="ag-topbar my-3 md:mx-4" :class="{ 'ag-topbar--stuck': headerStuck }">
         <div class="ag-topbar__blobs" aria-hidden="true">
             <div class="ag-topbar__blob ag-topbar__blob--1" />
             <div class="ag-topbar__blob ag-topbar__blob--2" />
@@ -2141,9 +2141,9 @@ function goRecorrencias() {
                 <div class="hidden xl:flex items-center gap-1">
                     <Button label="Bloquear" icon="pi pi-lock" size="small" class="rounded-full" severity="danger" outlined @click="(e) => blockMenuRef.toggle(e)" />
                     <Menu ref="blockMenuRef" :model="blockMenuItems" :popup="true" />
-                    <Button icon="pi pi-refresh" severity="secondary" outlined class="h-9 w-9 rounded-full" @click="refetch" />
-                    <Button icon="pi pi-sync" severity="secondary" outlined class="h-9 w-9 rounded-full" title="Recorrências" @click="goRecorrencias" />
-                    <Button icon="pi pi-cog" severity="secondary" outlined class="h-9 w-9 rounded-full" @click="goSettings" />
+                    <Button icon="pi pi-refresh" severity="secondary" outlined class="h-9 w-9 rounded-full" v-tooltip.bottom="'Recarregar'" @click="refetch" />
+                    <Button icon="pi pi-sync" severity="secondary" outlined class="h-9 w-9 rounded-full" v-tooltip.bottom="'Recorrências'" @click="goRecorrencias" />
+                    <Button icon="pi pi-cog" severity="secondary" outlined class="h-9 w-9 rounded-full" v-tooltip.bottom="'Configurações'" @click="goSettings" />
                 </div>
             </div>
         </div>
@@ -2152,7 +2152,7 @@ function goRecorrencias() {
     <!-- Aviso: fora da jornada -->
     <div
         v-if="hasEventsOutsideWorkHours"
-        class="mx-3 md:mx-4 mb-3 rounded-[6px] p-3"
+        class="my-3 md:mx-4 rounded-[6px] p-3"
         style="background: color-mix(in srgb, var(--yellow-400, #facc15) 10%, var(--surface-card)); border: 1px solid color-mix(in srgb, var(--yellow-400, #facc15) 35%, transparent)"
     >
         <div class="flex items-center gap-3">

src/features/agenda/pages/AgendaRecorrenciasPage.vue

@@ -15,7 +15,7 @@
 |--------------------------------------------------------------------------
 -->
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { supabase } from '@/lib/supabase/client';
 import { useTenantStore } from '@/stores/tenantStore';
@@ -31,6 +31,15 @@ const mode = computed(() => route.meta?.mode || 'therapist');
 const isClinic = computed(() => mode.value === 'clinic');
 const tenantId = computed(() => tenantStore.activeTenantId || tenantStore.tenantId);
 
+// ── Hero sticky ───────────────────────────────────────────
+const headerEl = ref(null);
+const headerSentinelRef = ref(null);
+const headerStuck = ref(false);
+let _observer = null;
+
+// ── Mobile ────────────────────────────────────────────────
+const filtersDlgOpen = ref(false);
+
 // ── state ──────────────────────────────────────────────────────────────────────
 const loading = ref(false);
 const userId = ref(null);
@@ -306,25 +315,59 @@ function goBack() {
     else router.push({ name: 'therapist-agenda' });
 }
 
-onMounted(init);
+onMounted(async () => {
+    const rootMargin = `${document.querySelector('.l2-main') ? '0px' : '-56px'} 0px 0px 0px`;
+    _observer = new IntersectionObserver(
+        ([entry]) => {
+            headerStuck.value = !entry.isIntersecting;
+        },
+        { threshold: 0, rootMargin }
+    );
+    if (headerSentinelRef.value) _observer.observe(headerSentinelRef.value);
+    await init();
+});
+
+onBeforeUnmount(() => {
+    _observer?.disconnect();
+});
 </script>
 
 <template>
-    <!-- ─── Header ─────────────────────────────────────────────────── -->
-    <div class="rr-page mx-3 md:mx-5">
-        <div class="rr-header">
-            <div class="flex items-center gap-3">
+    <!-- Sentinel -->
+    <div ref="headerSentinelRef" class="h-px" />
+
+    <!-- ══════════════════════════════════════
+       Hero sticky
+  ═══════════════════════════════════════ -->
+    <div
+        ref="headerEl"
+        class="sticky my-3 mx-3 md:mx-4 z-20 overflow-hidden rounded-md border border-[var(--surface-border,#e2e8f0)] bg-[var(--surface-card,#fff)] px-3 py-2.5 transition-[border-radius] duration-200"
+        :class="{ 'rounded-tl-none rounded-tr-none': headerStuck }"
+        :style="{ top: 'var(--layout-sticky-top, 56px)' }"
+    >
+        <!-- Blobs decorativos -->
+        <div class="absolute inset-0 pointer-events-none overflow-hidden" aria-hidden="true">
+            <div class="absolute w-64 h-64 -top-16 -right-8 rounded-full blur-[60px] bg-indigo-500/10" />
+            <div class="absolute w-72 h-72 top-0 -left-16 rounded-full blur-[60px] bg-emerald-400/9" />
+        </div>
+
+        <div class="relative z-1 flex items-center gap-3">
+            <!-- Voltar + Brand -->
+            <div class="flex items-center gap-2 shrink-0">
                 <Button icon="pi pi-arrow-left" text severity="secondary" class="h-9 w-9 rounded-full shrink-0" v-tooltip.bottom="'Voltar à agenda'" @click="goBack" />
-                <div>
-                    <div class="text-xl font-bold leading-tight">Recorrências</div>
-                    <div class="text-sm opacity-55">
+                <div class="grid place-items-center w-9 h-9 rounded-md shrink-0 bg-indigo-500/10 text-indigo-500">
+                    <i class="pi pi-refresh text-base" />
+                </div>
+                <div class="min-w-0 hidden lg:block">
+                    <div class="text-[1rem] font-bold tracking-tight text-[var(--text-color)]">Recorrências</div>
+                    <div class="text-[0.75rem] text-[var(--text-color-secondary)]">
                         {{ isClinic ? 'Todas as séries da clínica' : 'Suas séries de sessões recorrentes' }}
                     </div>
                 </div>
             </div>
 
-            <div class="flex items-center gap-2 flex-wrap">
-                <!-- Status filter -->
+            <!-- Filtros desktop -->
+            <div class="hidden xl:flex items-center gap-2 flex-1 min-w-0 mx-2">
                 <SelectButton
                     v-model="filterStatus"
                     :options="[
@@ -335,10 +378,9 @@ onMounted(init);
                     optionLabel="label"
                     optionValue="value"
                     :allowEmpty="false"
+                    size="small"
                     @change="load"
                 />
-
-                <!-- Therapist filter (clinic only) -->
                 <Select
                     v-if="isClinic && staffOptions.length"
                     v-model="filterOwner"
@@ -349,28 +391,75 @@ onMounted(init);
                     class="w-[220px]"
                     @change="load"
                 />
+            </div>
 
+            <!-- Ações -->
+            <div class="flex items-center gap-1 shrink-0 ml-auto">
+                <Button icon="pi pi-filter" severity="secondary" outlined class="xl:hidden h-9 w-9 rounded-full" v-tooltip.bottom="'Filtros'" @click="filtersDlgOpen = true" />
                 <Button icon="pi pi-refresh" severity="secondary" outlined class="h-9 w-9 rounded-full" :loading="loading" v-tooltip.bottom="'Recarregar'" @click="load" />
             </div>
         </div>
+    </div>
 
+    <!-- Dialog filtros mobile -->
+    <Dialog v-model:visible="filtersDlgOpen" modal :draggable="false" pt:mask:class="backdrop-blur-xs" header="Filtros" class="w-[94vw] max-w-sm">
+        <div class="flex flex-col gap-3 pt-1">
+            <div>
+                <label class="block text-xs font-semibold text-[var(--text-color-secondary)] mb-1.5">Status</label>
+                <SelectButton
+                    v-model="filterStatus"
+                    :options="[
+                        { label: 'Ativas', value: 'ativo' },
+                        { label: 'Encerradas', value: 'cancelado' },
+                        { label: 'Todas', value: 'all' }
+                    ]"
+                    optionLabel="label"
+                    optionValue="value"
+                    :allowEmpty="false"
+                    class="w-full"
+                    @change="load"
+                />
+            </div>
+            <div v-if="isClinic && staffOptions.length">
+                <label class="block text-xs font-semibold text-[var(--text-color-secondary)] mb-1.5">Terapeuta</label>
+                <Select v-model="filterOwner" :options="[{ label: 'Todos os terapeutas', value: null }, ...staffOptions]" optionLabel="label" optionValue="value" placeholder="Todos os terapeutas" class="w-full" @change="load" />
+            </div>
+        </div>
+        <template #footer>
+            <Button label="Fechar" severity="secondary" outlined class="rounded-full" @click="filtersDlgOpen = false" />
+        </template>
+    </Dialog>
+
+    <!-- ══════════════════════════════════════
+       Conteúdo principal
+  ═══════════════════════════════════════ -->
+    <div class="px-3 md:px-4 pb-8">
         <!-- ─── Loading ──────────────────────────────────────────────── -->
-        <div v-if="loading" class="flex flex-col gap-3 mt-4">
+        <div v-if="loading" class="flex flex-col gap-3">
             <Skeleton v-for="i in 4" :key="i" height="130px" class="rounded-2xl" />
         </div>
 
         <!-- ─── Empty ────────────────────────────────────────────────── -->
-        <div v-else-if="!rules.length" class="rr-empty">
-            <i class="pi pi-calendar-times text-5xl opacity-25" />
-            <div class="text-lg font-semibold opacity-50">Nenhuma série encontrada</div>
-            <div class="text-sm opacity-35">
-                {{ filterStatus === 'ativo' ? 'Crie sessões recorrentes na agenda para vê-las aqui.' : 'Altere o filtro de status.' }}
+        <div v-else-if="!rules.length" class="rounded-md border border-[var(--surface-border,#e2e8f0)] bg-[var(--surface-card,#fff)] overflow-hidden">
+            <div class="flex items-center justify-between px-4 py-3 border-b border-[var(--surface-border,#e2e8f0)]">
+                <div class="flex items-center gap-2 min-w-0">
+                    <i class="pi pi-list text-[var(--text-color-secondary)] opacity-60" />
+                    <span class="font-semibold text-sm">Séries cadastradas</span>
+                </div>
+                <span class="inline-flex items-center justify-center min-w-[22px] h-[22px] px-1.5 rounded-full bg-[var(--surface-200,#e5e7eb)] text-[var(--text-color-secondary)] text-[0.72rem] font-bold">0</span>
+            </div>
+            <div class="py-10 px-6 text-center">
+                <i class="pi pi-calendar-times text-2xl opacity-20 mb-2 block" />
+                <div class="font-semibold text-sm">Nenhuma série encontrada</div>
+                <div class="text-xs opacity-60 mt-1">
+                    {{ filterStatus === 'ativo' ? 'Crie sessões recorrentes na agenda para vê-las aqui.' : 'Altere o filtro de status.' }}
+                </div>
+                <Button label="Voltar à agenda" icon="pi pi-calendar" outlined severity="secondary" size="small" class="rounded-full mt-3" @click="goBack" />
             </div>
-            <Button label="Voltar à agenda" icon="pi pi-calendar" outlined severity="secondary" class="rounded-full mt-2" @click="goBack" />
         </div>
 
         <!-- ─── Rule cards ───────────────────────────────────────────── -->
-        <div v-else class="flex flex-col gap-4 mt-4 pb-8">
+        <div v-else class="flex flex-col gap-4">
             <div v-for="rule in rules" :key="rule.id" class="rr-card">
                 <!-- Card head: patient info + status badge -->
                 <div class="rr-card__head">
@@ -434,33 +523,6 @@ onMounted(init);
 </template>
 
 <style scoped>
-/* ── Page ─────────────────────────────────────────────────────────── */
-.rr-page {
-    padding-bottom: 2rem;
-}
-
-/* ── Header ───────────────────────────────────────────────────────── */
-.rr-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    gap: 12px;
-    padding: 20px 0 16px;
-    border-bottom: 1px solid var(--surface-border);
-    margin-bottom: 4px;
-}
-
-/* ── Empty ────────────────────────────────────────────────────────── */
-.rr-empty {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
-    padding: 64px 24px;
-    text-align: center;
-}
-
 /* ── Card ─────────────────────────────────────────────────────────── */
 .rr-card {
     border-radius: 1.25rem;

src/features/agenda/pages/AgendaTerapeutaPage.vue

@@ -15,7 +15,7 @@
 |--------------------------------------------------------------------------
 -->
 <script setup>
-import { computed, nextTick, onMounted, ref, watch } from 'vue';
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { useTenantStore } from '@/stores/tenantStore';
 import { supabase } from '@/lib/supabase/client';
@@ -223,6 +223,12 @@ const headerMenuRef = ref(null);
 const agPanelOpen = ref(false);
 const blockMenuRef = ref(null);
 
+// Fecha o drawer mobile ao cruzar para desktop (≥ xl / 1280px)
+const mqDesktop = typeof window !== 'undefined' ? window.matchMedia('(min-width: 1280px)') : null;
+const onMqDesktopChange = (e) => {
+    if (e.matches) agPanelOpen.value = false;
+};
+
 // ── Prontuário ────────────────────────────────────────────────
 const prontuarioOpen = ref(false);
 const selectedPatient = ref(null);
@@ -2305,6 +2311,12 @@ onMounted(async () => {
         );
         io.observe(headerSentinelRef.value);
     }
+
+    mqDesktop?.addEventListener('change', onMqDesktopChange);
+});
+
+onBeforeUnmount(() => {
+    mqDesktop?.removeEventListener('change', onMqDesktopChange);
 });
 </script>
 
@@ -2319,7 +2331,7 @@ onMounted(async () => {
     <!-- Hero compacto — padrão Compromissos -->
     <div
         ref="headerEl"
-        class="relative overflow-hidden rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] px-3 py-2.5 mx-3 md:mx-4 mb-3 sticky top-[var(--layout-sticky-top,56px)] z-20"
+        class="relative overflow-hidden rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] px-3 py-2.5 my-3 mx-3 md:mx-4 sticky top-[var(--layout-sticky-top,56px)] z-20"
         :class="{ 'rounded-tl-none rounded-tr-none': headerStuck }"
     >
         <div class="absolute inset-0 pointer-events-none overflow-hidden" aria-hidden="true">
@@ -2337,7 +2349,7 @@ onMounted(async () => {
             </div>
 
             <!-- Nav + filtros (desktop) -->
-            <div class="hidden xl:flex items-center gap-2 flex-1 min-w-0 mx-2">
+            <div class="hidden min-[1500px]:flex items-center gap-2 flex-1 min-w-0 mx-2">
                 <!-- Navegação
           <div class="flex items-center gap-1 shrink-0">
             <Button label="Hoje" severity="secondary" outlined size="small" class="rounded-full" @click="goToday" />
@@ -2357,7 +2369,7 @@ onMounted(async () => {
             </div>
 
             <!-- Ações desktop -->
-            <div class="hidden xl:flex items-center gap-1 shrink-0">
+            <div class="hidden min-[1500px]:flex items-center gap-1 shrink-0">
                 <div class="w-44">
                     <FloatLabel variant="on">
                         <IconField>
@@ -2376,23 +2388,13 @@ onMounted(async () => {
                 <Button icon="pi pi-plus" class="h-9 w-9 rounded-full" @click="onCreateFromButton" />
                 <Button label="Bloquear" icon="pi pi-lock" size="small" class="rounded-full" severity="danger" outlined @click="(e) => blockMenuRef.toggle(e)" />
                 <Menu ref="blockMenuRef" :model="blockMenuItems" :popup="true" />
-                <Button icon="pi pi-refresh" severity="secondary" outlined class="h-9 w-9 rounded-full" @click="refetch" />
-                <Button icon="pi pi-sync" severity="secondary" outlined class="h-9 w-9 rounded-full" @click="goRecorrencias" />
-                <Button icon="pi pi-cog" severity="secondary" outlined class="h-9 w-9 rounded-full" @click="goSettings" />
+                <Button icon="pi pi-refresh" severity="secondary" outlined class="h-9 w-9 rounded-full" v-tooltip.bottom="'Recarregar'" @click="refetch" />
+                <Button icon="pi pi-sync" severity="secondary" outlined class="h-9 w-9 rounded-full" v-tooltip.bottom="'Recorrências'" @click="goRecorrencias" />
+                <Button icon="pi pi-cog" severity="secondary" outlined class="h-9 w-9 rounded-full" v-tooltip.bottom="'Configurações'" @click="goSettings" />
             </div>
 
             <!-- Mobile -->
-            <div class="flex xl:hidden items-center gap-1 shrink-0 ml-auto">
-                <!-- Nav mobile -->
-                <Button icon="pi pi-chevron-left" severity="secondary" outlined class="h-8 w-8 rounded-full" @click="goPrev" />
-                <span
-                    class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full border border-[var(--surface-border)] bg-[var(--surface-ground)] text-sm font-semibold text-[var(--text-color)] cursor-pointer whitespace-nowrap transition-colors duration-150 hover:border-[var(--p-primary-400)]"
-                    @click="toggleMonthPicker"
-                >
-                    <i class="pi pi-calendar text-xs opacity-60" />
-                    {{ subtitleText }}
-                </span>
-                <Button icon="pi pi-chevron-right" severity="secondary" outlined class="h-8 w-8 rounded-full" @click="goNext" />
+            <div class="flex min-[1500px]:hidden items-center gap-1 shrink-0 ml-auto">
                 <div v-if="feriadosTodosProximos.length" class="relative">
                     <Button icon="pi pi-bell" :severity="feriadosSemBloqueio.length ? 'danger' : 'secondary'" outlined class="h-9 w-9 rounded-full" @click="feriadosAlertaOpen = true" />
                     <span v-if="feriadosSemBloqueio.length" class="absolute -top-1 -right-1 min-w-[16px] h-4 px-1 rounded-full bg-red-500 text-white text-[0.65rem] font-bold flex items-center justify-center pointer-events-none">{{
@@ -2411,7 +2413,7 @@ onMounted(async () => {
     <div
         ref="foraJornadaBannerRef"
         v-if="hasEventsOutsideWorkHours"
-        class="mx-3 md:mx-4 mb-3 rounded-[6px] p-3"
+        class="my-3 mx-3 md:mx-4 rounded-[6px] p-3"
         style="background: color-mix(in srgb, var(--yellow-400, #facc15) 10%, var(--surface-card)); border: 1px solid color-mix(in srgb, var(--yellow-400, #facc15) 35%, transparent)"
     >
         <div class="flex items-center gap-3">
@@ -2423,11 +2425,15 @@ onMounted(async () => {
 
     <!-- ════ GRID 3 COLUNAS ════ -->
     <!-- Overlay mobile -->
-    <div v-if="agPanelOpen" class="fixed inset-0 bg-black/40 backdrop-blur-sm z-[39] xl:hidden" @click="agPanelOpen = false" />
+    <div
+        v-if="agPanelOpen"
+        class="fixed left-0 right-0 bottom-0 top-[calc(var(--notice-banner-height,0px)+56px)] bg-black/40 backdrop-blur-sm z-[39] xl:hidden"
+        @click="agPanelOpen = false"
+    />
 
     <!-- Drawer mobile: col esquerda + col direita empilhadas -->
     <aside
-        class="panel-drawer fixed top-0 left-0 h-[100dvh] w-[min(340px,88vw)] z-40 bg-[var(--surface-card)] border-r border-[var(--surface-border)] shadow-[4px_0_24px_rgba(0,0,0,0.12)] transition-[transform,visibility] duration-[250ms] ease-[cubic-bezier(0.4,0,0.2,1)]"
+        class="panel-drawer fixed top-[calc(var(--notice-banner-height,0px)+56px)] left-0 h-[calc(100dvh-var(--notice-banner-height,0px)-56px)] w-[min(340px,88vw)] z-40 bg-[var(--surface-card)] border-r border-[var(--surface-border)] shadow-[4px_0_24px_rgba(0,0,0,0.12)] transition-[transform,visibility] duration-[250ms] ease-[cubic-bezier(0.4,0,0.2,1)]"
         :class="agPanelOpen ? 'translate-x-0 visible' : '-translate-x-full invisible'"
     >
         <div class="flex flex-col gap-3 p-4 h-full overflow-y-auto">
@@ -2668,22 +2674,23 @@ onMounted(async () => {
         <!-- COL 1: Mini calendário + Jornada + Feriados -->
         <div class="hidden xl:flex flex-col gap-3 w-full xl:w-[25%] shrink-0">
             <div class="border border-[var(--surface-border)] rounded-md bg-[var(--surface-card)] p-3">
-                <div class="flex items-center justify-between">
+                <div class="flex items-center justify-between min-w-0">
                     <!--<span class="flex items-center gap-1.5 text-[1rem] font-bold uppercase tracking-[0.06em] text-[var(--text-color-secondary)] opacity-65"><i class="pi pi-calendar" />{{ visibleTitle }}</span>-->
-                    <div class="flex items-center gap-2 mb-2">
+                    <div class="flex items-center gap-2 mb-2 min-w-0 flex-1">
                         <!--<Button icon="pi pi-home" severity="secondary" text class="h-7 w-7 rounded-full" v-tooltip.top="'Hoje'" @click="miniGoToday" />
               <Button icon="pi pi-chevron-left" severity="secondary" text class="h-7 w-7 rounded-full" @click="miniPrevMonth" />
               <Button icon="pi pi-chevron-right" severity="secondary" text class="h-7 w-7 rounded-full" @click="miniNextMonth" />-->
-                        <Button label="Hoje" severity="secondary" outlined size="small" class="rounded-full" @click="goToday" />
-                        <Button icon="pi pi-chevron-left" severity="secondary" outlined class="h-8 w-8 rounded-full" @click="goPrev" />
+                        <Button label="Hoje" severity="secondary" outlined size="small" class="rounded-full shrink-0" @click="goToday" />
+                        <Button icon="pi pi-chevron-left" severity="secondary" outlined class="h-8 w-8 rounded-full shrink-0" @click="goPrev" />
                         <span
-                            class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full border border-[var(--surface-border)] bg-[var(--surface-ground)] text-sm font-semibold text-[var(--text-color)] cursor-pointer whitespace-nowrap transition-colors duration-150 hover:border-[var(--p-primary-400)]"
+                            v-tooltip.top="subtitleText"
+                            class="inline-flex flex-1 min-w-0 items-center gap-1.5 px-3 py-1 rounded-full border border-[var(--surface-border)] bg-[var(--surface-ground)] text-sm font-semibold text-[var(--text-color)] cursor-pointer transition-colors duration-150 hover:border-[var(--p-primary-400)]"
                             @click="toggleMonthPicker"
                         >
-                            <i class="pi pi-calendar text-xs opacity-60" />
-                            {{ subtitleText }}
+                            <i class="pi pi-calendar text-xs opacity-60 shrink-0" />
+                            <span class="truncate">{{ subtitleText }}</span>
                         </span>
-                        <Button icon="pi pi-chevron-right" severity="secondary" outlined class="h-8 w-8 rounded-full" @click="goNext" />
+                        <Button icon="pi pi-chevron-right" severity="secondary" outlined class="h-8 w-8 rounded-full shrink-0" @click="goNext" />
                     </div>
                 </div>
                 <DatePicker v-model="miniDate" inline class="w-full" @update:modelValue="onMiniPick" :pt="{ day: ({ context }) => ({ class: miniDayClass(context.date) }) }">

src/features/agenda/pages/AgendamentosRecebidosPage.vue

@@ -350,7 +350,7 @@ const emptySub = computed(() => {
        HERO sticky
   ═══════════════════════════════════════════════════════ -->
     <section
-        class="sticky mx-3 md:mx-4 mb-3 z-20 overflow-hidden rounded-md border border-[var(--surface-border,#e2e8f0)] bg-[var(--surface-card,#fff)] px-3 py-2.5 transition-[border-radius] duration-200"
+        class="sticky my-3 md:mx-4 z-20 overflow-hidden rounded-md border border-[var(--surface-border,#e2e8f0)] bg-[var(--surface-card,#fff)] px-3 py-2.5 transition-[border-radius] duration-200"
         :style="{ top: 'var(--layout-sticky-top, 56px)' }"
     >
         <!-- Blobs -->
@@ -421,7 +421,7 @@ const emptySub = computed(() => {
     <Transition name="ar-banner">
         <div
             v-if="totalAutorizados > 0 && filtroStatus !== 'autorizado' && !loading"
-            class="mx-3 md:mx-4 mb-3 flex items-center gap-3 px-4 py-3 rounded-md border border-amber-300/60 bg-amber-50 cursor-pointer hover:bg-amber-100/70 transition-colors duration-150"
+            class="my-3 md:mx-4 flex items-center gap-3 px-4 py-3 rounded-md border border-amber-300/60 bg-amber-50 cursor-pointer hover:bg-amber-100/70 transition-colors duration-150"
             @click="filtroStatus = 'autorizado'"
         >
             <!-- Ícone pulsante -->

src/features/agenda/pages/CompromissosDeterminados.vue

@@ -16,10 +16,11 @@
 -->
 <script setup>
 import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 
 import { useToast } from 'primevue/usetoast';
 
-import InputSwitch from 'primevue/inputswitch';
+import ToggleSwitch from 'primevue/toggleswitch';
 import Menu from 'primevue/menu';
 
 import DeterminedCommitmentDialog from '@/features/agenda/components/DeterminedCommitmentDialog.vue';
@@ -29,6 +30,14 @@ import { useTenantStore } from '@/stores/tenantStore';
 
 const toast = useToast();
 const tenantStore = useTenantStore();
+const route = useRoute();
+const router = useRouter();
+
+function goBack() {
+    const isClinic = (route.name || '').toString().startsWith('admin-');
+    if (isClinic) router.push({ name: 'admin-agenda-clinica' });
+    else router.push({ name: 'therapist-agenda' });
+}
 
 // ── Hero sticky ───────────────────────────────────────────
 const headerEl = ref(null);
@@ -382,7 +391,7 @@ function isRecent(row) {
   ═══════════════════════════════════════ -->
     <div
         ref="headerEl"
-        class="sticky mx-3 md:mx-4 mb-3 z-20 overflow-hidden rounded-md border border-(--surface-border,#e2e8f0) bg-(--surface-card,#fff) px-3 py-2.5 transition-[border-radius] duration-200"
+        class="sticky my-3 mx-3 md:mx-4 z-20 overflow-hidden rounded-md border border-(--surface-border,#e2e8f0) bg-(--surface-card,#fff) px-3 py-2.5 transition-[border-radius] duration-200"
         :class="{ 'rounded-tl-none rounded-tr-none': headerStuck }"
         :style="{ top: 'var(--layout-sticky-top, 56px)' }"
     >
@@ -393,8 +402,9 @@ function isRecent(row) {
         </div>
 
         <div class="relative z-1 flex items-center gap-3">
-            <!-- Brand -->
+            <!-- Voltar + Brand -->
             <div class="flex items-center gap-2 shrink-0">
+                <Button icon="pi pi-arrow-left" text severity="secondary" class="h-9 w-9 rounded-full shrink-0" v-tooltip.bottom="'Voltar à agenda'" @click="goBack" />
                 <div class="grid place-items-center w-9 h-9 rounded-md shrink-0 bg-indigo-500/10 text-indigo-500">
                     <i class="pi pi-list text-base" />
                 </div>
@@ -453,7 +463,7 @@ function isRecent(row) {
   ═══════════════════════════════════════ -->
     <div class="px-3 md:px-4 pb-5 flex flex-col xl:flex-row gap-3 xl:gap-4 items-start">
         <!-- ── Coluna principal ── -->
-        <div class="w-full xl:flex-1 xl:min-w-0">
+        <div class="w-full xl:flex-1 xl:min-w-0 flex flex-col gap-3 xl:gap-4">
             <!-- Stats row -->
             <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-6 gap-2">
                 <template v-if="loading">
@@ -471,7 +481,7 @@ function isRecent(row) {
                         >
                             {{ s.value }}
                         </div>
-                        <div class="text-[1rem] text-[var(--text-color-secondary)] opacity-75 whitespace-nowrap">{{ s.label }}</div>
+                        <div class="text-[1rem] text-[var(--text-color-secondary)] opacity-75 truncate">{{ s.label }}</div>
                     </div>
                 </template>
             </div>
@@ -533,7 +543,7 @@ function isRecent(row) {
 
                     <Column field="active" header="Ativo" style="width: 7rem">
                         <template #body="{ data }">
-                            <InputSwitch v-model="data.active" :disabled="isActiveLocked(data) || saving" @change="onToggleActive(data)" />
+                            <ToggleSwitch v-model="data.active" :disabled="isActiveLocked(data) || saving" @change="onToggleActive(data)" />
                         </template>
                     </Column>