46 changed files with 1853 additions and 5713 deletions
--- a/README.md
+++ b/README.md
@ -1,379 +1,2 @@
-<div align="center">
+# riseup-squad20
 # 🏥 MEDIConnect
 ### Plataforma de Gestão de Saúde Inteligente
 *Combatendo o absenteísmo em clínicas e hospitais através de tecnologia e inovação*
 [![Next.js](https://img.shields.io/badge/Next.js_15-000000?style=flat&logo=next.js&logoColor=white)](https://nextjs.org/)
 [![TypeScript](https://img.shields.io/badge/TypeScript-2B7FFF?style=flat&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
 [![React](https://img.shields.io/badge/React_19-2B7FFF?style=flat&logo=react&logoColor=white)](https://react.dev/)
 [![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-2B7FFF?style=flat&logo=tailwind-css&logoColor=white)](https://tailwindcss.com/)
 [![Supabase](https://img.shields.io/badge/Supabase-2B7FFF?style=flat&logo=supabase&logoColor=white)](https://supabase.com/)
 </div>
 ---
 ## Índice
 1. [Visão Geral](#-visão-geral)
 2. [Problema e Solução](#-problema-e-solução)
 3. [Funcionalidades](#-funcionalidades)
 4. [Tecnologias](#️-tecnologias)
 5. [Instalação](#-instalação)
 6. [Como Usar](#-como-usar)
 7. [Fluxos de Usuário](#-fluxos-de-usuário)
 8. [Componentes Principais](#-componentes-principais)
 9. [Contribuindo](#-contribuindo)
 10. [Licença](#-licença)
 11. [Contato](#-contato)
 ---
 ## Visão Geral
 **MEDIConnect** é uma plataforma web moderna e intuitiva desenvolvida para revolucionar a gestão de saúde em clínicas e hospitais. Com foco na redução do absenteísmo (faltas em consultas), a plataforma oferece uma experiência completa para pacientes, profissionais de saúde e administradores.
 ### Diferenciais
 - **Zoe IA Assistant**: Assistente virtual inteligente para suporte aos usuários
 - **Interface Responsiva**: Design moderno e adaptável a qualquer dispositivo
 - **Autenticação Segura**: Sistema robusto com perfis diferenciados
 - **Performance**: Construído com Next.js 15 para máxima velocidade
 - **UX/UI Premium**: Interface limpa e profissional voltada para área da saúde
 ---
 ## Problema e Solução
 ### O Problema
 O **absenteísmo** (não comparecimento a consultas agendadas) é um problema crítico em clínicas e hospitais, causando:
 - Desperdício de tempo dos profissionais
 - Perda de receita para estabelecimentos
 - Redução da eficiência operacional
 - Impacto negativo no atendimento de outros pacientes
 ### Nossa Solução
 MEDIConnect oferece um sistema inteligente de gestão que:
 - Facilita o agendamento e reagendamento de consultas
 - Permite visualização clara da agenda para profissionais
 - Oferece assistência via IA para dúvidas e suporte
 ---
 ## Funcionalidades
 ### Para Pacientes
 - **Dashboard Personalizado**: Visão geral de consultas e exames
 - **Agendamento**: Sistema fácil de marcar consultas
 - **Resultados de Exames**: Acesso seguro a laudos e resultados
 - **Busca de Profissionais**: Encontre médicos por especialidade
 - **Zoe IA Assistant**: Tire dúvidas 24/7 com nossa assistente virtual
 ### Para Profissionais
 - **Dashboard Profissional**: Visão completa de atendimentos
 - **Editor de Laudos**: Crie e edite laudos médicos de forma rápida
 - **Gestão de Pacientes**: Acesse informações dos pacientes
 - **Agenda**: Visualização clara de consultas
 ### Para Administradores
 - **Dashboard Administrativo**: Métricas e estatísticas em tempo real
 - **Relatórios Detalhados**: Análise de comparecimento e absenteísmo
 - **Gestão Completa**: Gerencie pacientes, profissionais e agendamentos
 - **Painel de Controle**: Visão 360° da operação da clínica
 ---
 ## Tecnologias
 ### Frontend (Atual)
 - **[Next.js 15](https://nextjs.org/)** - Framework React com Server Components
 - **[React 19](https://react.dev/)** - Biblioteca JavaScript para interfaces
 - **[TypeScript](https://www.typescriptlang.org/)** - Tipagem estática para JavaScript
 - **[Tailwind CSS](https://tailwindcss.com/)** - Framework CSS utilitário
 - **[Shadcn/ui](https://ui.shadcn.com/)** - Componentes UI reutilizáveis
 - **[React Hook Form](https://react-hook-form.com/)** - Gerenciamento de formulários
 - **[Zod](https://zod.dev/)** - Validação de schemas
 - **[date-fns](https://date-fns.org/)** - Manipulação de datas
 ### Backend (Integrado)
 - **[Supabase](https://supabase.com/)** - Backend as a Service (PostgreSQL)
 - **Authentication** - Sistema de autenticação completo
 - **Storage** - Armazenamento de arquivos e documentos
 - **REST API** - Endpoints integrados para todas as funcionalidades
 ### Ferramentas de Desenvolvimento
 - **[ESLint](https://eslint.org/)** - Linter para código JavaScript/TypeScript
 - **[PostCSS](https://postcss.org/)** - Transformação de CSS
 - **[Autoprefixer](https://github.com/postcss/autoprefixer)** - Prefixos CSS automáticos
 ---
 ## Instalação
 ### Pré-requisitos
 Certifique-se de ter instalado:
 - **Node.js** 18.17 ou superior
 - **npm**
 - **Git**
 ### Passo a Passo
 1. **Clone o repositório**
 ```bash
 git clone https://git.popcode.com.br/RiseUP/riseup-squad20.git
 cd susconecta
 ```
 2. **Instale as dependências**
 ```bash
 npm install
 ```
 3. **Configuração de ambiente (desenvolvimento)**
 > Observação: o projeto possui valores _fallback_ em `susconecta/lib/env-config.ts`, mas o recomendado é criar um arquivo `.env.local` não versionado com suas credenciais locais.
 ```env
 # Supabase
 NEXT_PUBLIC_SUPABASE_URL=https://seu-projeto.supabase.co
 NEXT_PUBLIC_SUPABASE_ANON_KEY=pk_... (anon key)
 # Aplicação
 NEXT_PUBLIC_APP_URL=http://localhost:3000
 NEXT_PUBLIC_API_URL=http://localhost:3000/api
 ```
 **Boas práticas de segurança**
 - Nunca exponha a `service_role` key no frontend.
 - Proteja operações sensíveis com Row-Level Security (RLS) no Supabase ou mova-as para rotas/Edge Functions server-side.
 - Não commite `.env.local` no repositório (adicione ao `.gitignore`).
 4. **Inicie o servidor de desenvolvimento**
 ```bash
 npm run dev
 ```
 5. **Acesse a aplicação**
 Abra [http://localhost:3000](http://localhost:3000) no seu navegador.
 ---
 ## Como Usar
 ### Navegação Principal
 #### Página Inicial
 Acesse `/home` para conhecer a plataforma e suas funcionalidades.
 #### Autenticação
 O sistema possui três níveis de acesso:
 - **Pacientes**: `/login-paciente`
 - **Profissionais**: `/login-profissional`
 - **Administradores**: `/login-admin`
 #### Funcionalidades por Perfil
 **Como Paciente:**
 1. Faça login em `/login-paciente`
 2. Acesse seu dashboard em `/paciente`
 3. Agende consultas em `/consultas`
 4. Visualize resultados em `/paciente/resultados`
 5. Gerencie seu perfil em `/perfil`
 **Como Profissional:**
 1. Faça login em `/login-profissional`
 2. Acesse seu dashboard em `/profissional`
 3. Gerencie sua agenda em `/agenda`
 4. Crie laudos em `/laudos-editor`
 5. Visualize pacientes em `/pacientes`
 **Como Administrador:**
 1. Faça login em `/login-admin`
 2. Acesse o painel em `/dashboard`
 3. Visualize relatórios em `/dashboard/relatorios`
 4. Gerencie o sistema completo
 ---
 ## Fluxos de Usuário
 ### Fluxo de Agendamento (Paciente)
 ```mermaid
 graph LR
 A[Login Paciente] --> B[Dashboard]
 B --> C[Buscar Médico]
 C --> D[Selecionar Especialidade]
 D --> E[Escolher Horário]
 E --> F[Confirmar Agendamento]
 F --> G[Receber Confirmação]
 ```
 ### Fluxo de Atendimento (Profissional)
 ```mermaid
 graph LR
 A[Login Profissional] --> B[Ver Agenda]
 B --> C[Realizar Consulta]
 C --> D[Criar Laudo]
 D --> E[Enviar para Paciente]
 E --> F[Atualizar Status]
 ```
 ### Fluxo Administrativo
 ```mermaid
 graph LR
 A[Login Admin] --> B[Dashboard]
 B --> C[Visualizar Métricas]
 C --> D[Gerar Relatórios]
 D --> E[Analisar Absenteísmo]
 E --> F[Tomar Decisões]
 ```
 ---
 ## Componentes Principais
 ### Zoe IA Assistant
 Assistente virtual inteligente que oferece:
 - Suporte 24/7 aos usuários
 - Respostas a dúvidas frequentes
 - Upload de arquivos para análise
 - Interação por voz
 **Arquivos:**
 - `components/ZoeIA/ai-assistant-interface.tsx`
 - `components/ZoeIA/voice-powered-orb.tsx`
 - `components/ZoeIA/demo.tsx`
 ### Sistema de Agendamento
 Gerenciamento completo de consultas e exames:
 - Calendário interativo
 - Seleção de horários disponíveis
 - Confirmação automática
 - Lembretes e notificações
 **Arquivos:**
 - `components/features/agendamento/`
 - `components/features/Calendario/`
 - `app/(main-routes)/consultas/`
 ### Editor de Laudos
 Ferramenta profissional para criação de laudos médicos:
 - Interface intuitiva
 - Frases pré-definidas
 - Exportação em PDF
 **Arquivos:**
 - `app/laudos-editor/`
 - `lib/laudo-exemplos.ts`
 - `lib/laudo-notification.ts`
 ### Dashboard Analytics
 Painéis administrativos com:
 - Métricas em tempo real
 - Gráficos interativos
 - Relatórios de absenteísmo
 - Análise de desempenho
 **Arquivos:**
 - `components/features/dashboard/`
 - `app/(main-routes)/dashboard/`
 - `lib/reportService.ts`
 ---
 ## Contribuindo
 Contribuições são bem-vindas! Siga estes passos:
 ### 1. Fork o projeto
 Clique no botão "Fork" no topo da página.
 ### 2. Clone seu fork
 ```bash
 git clone https://git.popcode.com.br/RiseUP/riseup-squad20.git
 cd susconecta
 ```
 ### 3. Crie uma branch
 ```bash
 git checkout -b feature/nova-funcionalidade
 ```
 ### 4. Faça suas alterações
 Desenvolva sua funcionalidade seguindo os padrões do projeto.
 ### 5. Commit suas mudanças
 ```bash
 git add .
 git commit -m "feat: adiciona nova funcionalidade X"
 ```
 **Padrão de commits:**
 - `feat:` Nova funcionalidade
 - `fix:` Correção de bug
 - `docs:` Documentação
 - `style:` Formatação
 - `refactor:` Refatoração
 - `test:` Testes
 - `chore:` Manutenção
 ### 6. Push para seu fork
 ```bash
 git push origin feature/nova-funcionalidade
 ```
 ### 7. Abra um Pull Request
 Descreva suas mudanças detalhadamente.
 ---
 ## Licença
 Este projeto está sob a licença **MIT**. Veja o arquivo [LICENSE](LICENSE) para mais detalhes.
 ## Contato
 **MEDIConnect Team**
 - Website: [mediconnect.com](https://mediconecta-app-liart.vercel.app/)
 - Email dos Desenvolvedores:  
    - [Jonas Francisco](mailto:jonastom478@gmail.com)
    - [João Gustavo](mailto:jgcmendonca@gmail.com)
    - [Maria Gabrielly](mailto:maria.gabrielly221106@gmail.com)
    - [Pedro Gomes](mailto:pedrogomes5913@gmail.com)
 ---
 <div align="center">
 **Desenvolvido pelo squad 20**
 *Transformando a gestão de saúde através da tecnologia*
 [![Next.js](https://img.shields.io/badge/Powered%20by-Next.js-black?style=for-the-badge&logo=next.js)](https://nextjs.org/)
 </div>
--- a/susconecta/app/(main-routes)/calendar/page.tsx
+++ b/susconecta/app/(main-routes)/calendar/page.tsx
@ -157,7 +157,7 @@ export default function AgendamentoPage() {
    // Mapa de classes para cores conhecidas
    const colorClassMap: Record<string, string> = {
      blue: "bg-blue-500 ring-blue-500/20",
-      green: "bg-[#10B981] ring-[#10B981]/20",
+      green: "bg-green-500 ring-green-500/20",
      orange: "bg-orange-500 ring-orange-500/20",
      red: "bg-red-500 ring-red-500/20",
      purple: "bg-purple-500 ring-purple-500/20",
@ -242,7 +242,7 @@ export default function AgendamentoPage() {
            <span className="text-foreground text-xs sm:text-sm font-medium">Solicitado</span>
          </div>
          <div className="flex items-center gap-2">
-            <span aria-hidden className="h-2 w-2 sm:h-3 sm:w-3 rounded-full ring-1 ring-white/6" style={{ backgroundColor: '#10B981' }} />
+            <span aria-hidden className="h-2 w-2 sm:h-3 sm:w-3 rounded-full bg-green-500 ring-1 ring-white/6" />
            <span className="text-foreground text-xs sm:text-sm font-medium">Confirmado</span>
          </div>
          <div className="flex items-center gap-2">
@ -309,7 +309,7 @@ export default function AgendamentoPage() {
            </div>
            {/* legenda dinâmica: mostra as cores presentes nos agendamentos do dia atual */}
-            <div className="sm:absolute sm:top-2 sm:right-2 mt-2 sm:mt-0 z-10">
+            <div className="sm:absolute sm:top-2 sm:right-2 mt-2 sm:mt-0 z-40">
              <DynamicLegend events={managerEvents} />
            </div>
          </div>
--- a/susconecta/app/(main-routes)/consultas/page.tsx
+++ b/susconecta/app/(main-routes)/consultas/page.tsx
@ -111,11 +111,8 @@ export default function ConsultasPage() {
    const baseDate = scheduledBase ? new Date(scheduledBase) : new Date();
    const duration = appointment.duration_minutes ?? appointment.duration ?? 30;
-    // compute start and end times (HH:MM) and date using local time to avoid timezone issues
+    // compute start and end times (HH:MM)
-    const year = baseDate.getFullYear();
+    const appointmentDateStr = baseDate.toISOString().split("T")[0];
    const month = String(baseDate.getMonth() + 1).padStart(2, '0');
    const day = String(baseDate.getDate()).padStart(2, '0');
    const appointmentDateStr = `${year}-${month}-${day}`;
    const startTime = `${String(baseDate.getHours()).padStart(2, '0')}:${String(baseDate.getMinutes()).padStart(2, '0')}`;
    const endDate = new Date(baseDate.getTime() + duration * 60000);
    const endTime = `${String(endDate.getHours()).padStart(2, '0')}:${String(endDate.getMinutes()).padStart(2, '0')}`;
@ -570,19 +567,13 @@ export default function ConsultasPage() {
                      <TableCell>
                        <Badge
                          variant={
-                            appointment.status === "confirmed" || appointment.status === "confirmado"
+                            appointment.status === "confirmed"
                              ? "default"
-                              : appointment.status === "pending" || appointment.status === "pendente"
+                              : appointment.status === "pending"
                              ? "secondary"
                              : appointment.status === "requested" || appointment.status === "solicitado"
                              ? "default"
                              : "destructive"
                          }
-                          className={
+                          className={appointment.status === "confirmed" ? "bg-green-600" : ""}
                            appointment.status === "confirmed" || appointment.status === "confirmado" ? "bg-[#10B981]" :
                            appointment.status === "requested" || appointment.status === "solicitado" ? "bg-blue-500" :
                            appointment.status === "canceled" || appointment.status === "cancelled" || appointment.status === "cancelado" ? "bg-red-500" : ""
                          }
                        >
                          {translateStatus(appointment.status)}
                        </Badge>
@ -667,21 +658,13 @@ export default function ConsultasPage() {
                        <div className="text-[10px] sm:text-xs text-muted-foreground">Status</div>
                        <Badge
                          variant={
-                            appointment.status === "confirmed" || appointment.status === "confirmado"
+                            appointment.status === "confirmed"
                              ? "default"
-                              : appointment.status === "pending" || appointment.status === "pendente"
+                              : appointment.status === "pending"
                              ? "secondary"
                              : appointment.status === "requested" || appointment.status === "solicitado"
                              ? "default"
                              : "destructive"
                          }
-                          className={
+                          className={`text-[10px] sm:text-xs ${appointment.status === "confirmed" ? "bg-green-600" : ""}`}
                            `text-[10px] sm:text-xs ${
                              appointment.status === "confirmed" || appointment.status === "confirmado" ? "bg-[#10B981]" :
                              appointment.status === "requested" || appointment.status === "solicitado" ? "bg-blue-500" :
                              appointment.status === "canceled" || appointment.status === "cancelled" || appointment.status === "cancelado" ? "bg-red-500" : ""
                            }`
                          }
                        >
                          {translateStatus(appointment.status)}
                        </Badge>
@ -794,19 +777,13 @@ export default function ConsultasPage() {
                <span className="col-span-3">
                  <Badge
                    variant={
-                      viewingAppointment?.status === "confirmed" || viewingAppointment?.status === "confirmado"
+                      viewingAppointment?.status === "confirmed"
                        ? "default"
-                        : viewingAppointment?.status === "pending" || viewingAppointment?.status === "pendente"
+                        : viewingAppointment?.status === "pending"
                        ? "secondary"
                        : viewingAppointment?.status === "requested" || viewingAppointment?.status === "solicitado"
                        ? "default"
                        : "destructive"
                    }
-                    className={
+                    className={viewingAppointment?.status === "confirmed" ? "bg-green-600" : ""}
                      viewingAppointment?.status === "confirmed" || viewingAppointment?.status === "confirmado" ? "bg-[#10B981]" :
                      viewingAppointment?.status === "requested" || viewingAppointment?.status === "solicitado" ? "bg-blue-500" :
                      viewingAppointment?.status === "canceled" || viewingAppointment?.status === "cancelled" || viewingAppointment?.status === "cancelado" ? "bg-red-500" : ""
                    }
                  >
                    {translateStatus(viewingAppointment?.status || "")}
                  </Badge>
@ -814,7 +791,7 @@ export default function ConsultasPage() {
              </div>
              <div className="grid grid-cols-4 items-center gap-4">
                <Label className="text-right">Tipo</Label>
-                <span className="col-span-3">{capitalize(viewingAppointment?.appointment_type || viewingAppointment?.type || "")}</span>
+                <span className="col-span-3">{capitalize(viewingAppointment?.type || "")}</span>
              </div>
              <div className="grid grid-cols-4 items-center gap-4">
                <Label className="text-right">Observações</Label>
--- a/susconecta/app/(main-routes)/dashboard/page.tsx
+++ b/susconecta/app/(main-routes)/dashboard/page.tsx
@ -9,6 +9,7 @@ import {
  getUpcomingAppointments,
  getAppointmentsByDateRange,
  getNewUsersLastDays,
  getPendingReports,
  getDisabledUsers,
  getDoctorsAvailabilityToday,
  getPatientById,
@ -17,7 +18,7 @@ import {
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Alert, AlertDescription } from '@/components/ui/alert';
-import { AlertCircle, Calendar, Users, Stethoscope, Clock, AlertTriangle, Plus, ArrowLeft } from 'lucide-react';
+import { AlertCircle, Calendar, Users, Stethoscope, Clock, FileText, AlertTriangle, Plus, ArrowLeft } from 'lucide-react';
 import Link from 'next/link';
 import { PatientRegistrationForm } from '@/components/features/forms/patient-registration-form';
 import { DoctorRegistrationForm } from '@/components/features/forms/doctor-registration-form';
@ -48,6 +49,7 @@ export default function DashboardPage() {
  const [appointments, setAppointments] = useState<UpcomingAppointment[]>([]);
  const [appointmentData, setAppointmentData] = useState<any[]>([]);
  const [newUsers, setNewUsers] = useState<any[]>([]);
  const [pendingReports, setPendingReports] = useState<any[]>([]);
  const [disabledUsers, setDisabledUsers] = useState<any[]>([]);
  const [doctors, setDoctors] = useState<Map<string, any>>(new Map());
  const [patients, setPatients] = useState<Map<string, any>>(new Map());
@ -81,16 +83,18 @@ export default function DashboardPage() {
      });
      // 2. Carrega dados dos widgets em paralelo
-      const [upcomingAppts, appointmentDataRange, newUsersList, disabledUsersList] = await Promise.all([
+      const [upcomingAppts, appointmentDataRange, newUsersList, pendingReportsList, disabledUsersList] = await Promise.all([
        getUpcomingAppointments(5),
        getAppointmentsByDateRange(7),
        getNewUsersLastDays(7),
        getPendingReports(5),
        getDisabledUsers(5),
      ]);
      setAppointments(upcomingAppts);
      setAppointmentData(appointmentDataRange);
      setNewUsers(newUsersList);
      setPendingReports(pendingReportsList);
      setDisabledUsers(disabledUsersList);
      // 3. Busca detalhes de pacientes e médicos para as próximas consultas
@ -260,7 +264,15 @@ export default function DashboardPage() {
          </div>
        </div>
-
+        <div className="bg-card p-4 sm:p-5 md:p-6 rounded-lg border border-border hover:shadow-md transition">
          <div className="flex items-center justify-between gap-3">
            <div className="min-w-0 flex-1">
              <h3 className="text-xs sm:text-sm font-medium text-muted-foreground truncate">Relatórios Pendentes</h3>
              <p className="text-2xl sm:text-3xl font-bold text-foreground mt-1 sm:mt-2">{pendingReports.length}</p>
            </div>
            <FileText className="h-6 sm:h-8 w-6 sm:w-8 text-orange-500 opacity-20 flex-shrink-0" />
          </div>
        </div>
      </div>
      {/* 6. AÇÕES RÁPIDAS - Responsivo: stack em mobile, wrap em desktop */}
@ -282,12 +294,17 @@ export default function DashboardPage() {
            <span className="hidden sm:inline">Novo Médico</span>
            <span className="sm:hidden">Médico</span>
          </Button>
          <Button onClick={() => router.push('/dashboard/relatorios')} variant="outline" className="gap-2 text-sm sm:text-base w-full sm:w-auto hover:bg-primary! hover:text-white! transition-colors">
            <FileText className="h-4 w-4" />
            <span className="hidden sm:inline">Ver Relatórios</span>
            <span className="sm:hidden">Relatórios</span>
          </Button>
        </div>
      </div>
      {/* 2. PRÓXIMAS CONSULTAS */}
-      <div className="grid grid-cols-1 gap-4 md:gap-6">
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 md:gap-6">
-        <div className="bg-card p-4 sm:p-5 md:p-6 rounded-lg border border-border">
+        <div className="lg:col-span-2 bg-card p-4 sm:p-5 md:p-6 rounded-lg border border-border">
          <h2 className="text-base sm:text-lg font-semibold text-foreground mb-3 sm:mb-4">Próximas Consultas (7 dias)</h2>
          {appointments.length > 0 ? (
            <div className="space-y-2 sm:space-y-3">
@ -313,7 +330,28 @@ export default function DashboardPage() {
          )}
        </div>
-
+        {/* 5. RELATÓRIOS PENDENTES */}
        <div className="bg-card p-4 sm:p-5 md:p-6 rounded-lg border border-border">
          <h2 className="text-base sm:text-lg font-semibold text-foreground mb-3 sm:mb-4 flex items-center gap-2">
            <FileText className="h-4 sm:h-5 w-4 sm:w-5" />
            <span className="truncate">Pendentes</span>
          </h2>
          {pendingReports.length > 0 ? (
            <div className="space-y-2">
              {pendingReports.map(report => (
                <div key={report.id} className="p-2 sm:p-3 bg-muted rounded-lg hover:bg-muted/80 transition cursor-pointer text-xs sm:text-sm">
                  <p className="font-medium text-foreground truncate">{report.order_number}</p>
                  <p className="text-[10px] sm:text-xs text-muted-foreground truncate">{report.exam || 'Sem descrição'}</p>
                </div>
              ))}
              <Button onClick={() => router.push('/dashboard/relatorios')} variant="ghost" className="w-full mt-2 hover:bg-primary! hover:text-white! transition-colors text-xs sm:text-sm" size="sm">
                Ver Todos
              </Button>
            </div>
          ) : (
            <p className="text-xs sm:text-sm text-muted-foreground">Sem relatórios pendentes</p>
          )}
        </div>
      </div>
      {/* 4. NOVOS USUÁRIOS */}
--- a/susconecta/app/(main-routes)/dashboard/relatorios/page.tsx
+++ b/susconecta/app/(main-routes)/dashboard/relatorios/page.tsx
@ -2,11 +2,10 @@
 "use client";
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { FileDown, BarChart2, Users, CalendarCheck } from "lucide-react";
 import jsPDF from "jspdf";
 import html2canvas from "html2canvas";
 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
 import {
  countAppointmentsToday,
@ -31,51 +30,10 @@ const FALLBACK_MEDICOS = [
 // Helper Functions
 // ============================================================================
-async function exportPDF(title: string, content: string, chartElementId?: string) {
+function exportPDF(title: string, content: string) {
  const doc = new jsPDF();
-  let yPosition = 15;
+  doc.text(title, 10, 10);
-
+  doc.text(content, 10, 20);
  // Add title
  doc.setFontSize(16);
  doc.setFont(undefined, "bold");
  doc.text(title, 15, yPosition);
  yPosition += 10;
  // Add description/content
  doc.setFontSize(11);
  doc.setFont(undefined, "normal");
  const contentLines = doc.splitTextToSize(content, 180);
  doc.text(contentLines, 15, yPosition);
  yPosition += contentLines.length * 5 + 15;
  // Capture chart if chartElementId is provided
  if (chartElementId) {
    try {
      const chartElement = document.getElementById(chartElementId);
      if (chartElement) {
        // Create a canvas from the chart element
        const canvas = await html2canvas(chartElement, {
          backgroundColor: "#ffffff",
          scale: 2,
          logging: false,
        });
        // Convert canvas to image
        const imgData = canvas.toDataURL("image/png");
        const imgWidth = 180;
        const imgHeight = (canvas.height * imgWidth) / canvas.width;
        // Add image to PDF
        doc.addImage(imgData, "PNG", 15, yPosition, imgWidth, imgHeight);
        yPosition += imgHeight + 10;
      }
    } catch (error) {
      console.error("Error capturing chart:", error);
      doc.text("(Erro ao capturar gráfico)", 15, yPosition);
      yPosition += 10;
    }
  }
  doc.save(`${title.toLowerCase().replace(/ /g, "-")}.pdf`);
 }
@ -245,7 +203,7 @@ export default function RelatoriosPage() {
              size="sm"
              variant="outline"
              className="hover:bg-primary! hover:text-white! transition-colors w-full md:w-auto"
-              onClick={() => exportPDF("Consultas por Período", "Resumo das consultas realizadas por período.", "chart-consultas")}
+              onClick={() => exportPDF("Consultas por Período", "Resumo das consultas realizadas por período.")}
            >
              <FileDown className="w-4 h-4 mr-1" /> Exportar PDF
            </Button>
@ -253,7 +211,6 @@ export default function RelatoriosPage() {
          {loading ? (
            <div className="h-[220px] flex items-center justify-center text-muted-foreground">Carregando dados...</div>
          ) : (
            <div id="chart-consultas">
            <ResponsiveContainer width="100%" height={220}>
              <BarChart data={consultasData}>
                <CartesianGrid strokeDasharray="3 3" />
@ -263,7 +220,6 @@ export default function RelatoriosPage() {
                <Bar dataKey="consultas" fill="#6366f1" name="Consultas" />
              </BarChart>
            </ResponsiveContainer>
            </div>
          )}
        </div>
      </div>
@ -273,9 +229,8 @@ export default function RelatoriosPage() {
        <div className="bg-card border border-border rounded-lg shadow p-6">
          <div className="flex items-center justify-between mb-2">
            <h2 className="font-semibold text-lg text-foreground flex items-center gap-2"><Users className="w-5 h-5" /> Pacientes Mais Atendidos</h2>
-            <Button size="sm" variant="outline" className="hover:bg-primary! hover:text-white! transition-colors" onClick={() => exportPDF("Pacientes Mais Atendidos", "Lista dos pacientes mais atendidos.", "table-pacientes")}> <FileDown className="w-4 h-4 mr-1" /> Exportar PDF</Button>
+            <Button size="sm" variant="outline" className="hover:bg-primary! hover:text-white! transition-colors" onClick={() => exportPDF("Pacientes Mais Atendidos", "Lista dos pacientes mais atendidos.")}> <FileDown className="w-4 h-4 mr-1" /> Exportar PDF</Button>
          </div>
          <div id="table-pacientes">
          <table className="w-full text-sm mt-4">
            <thead>
              <tr className="text-muted-foreground">
@ -303,15 +258,13 @@ export default function RelatoriosPage() {
            </tbody>
          </table>
        </div>
        </div>
        {/* Médicos mais produtivos */}
        <div className="bg-card border border-border rounded-lg shadow p-6">
          <div className="flex items-center justify-between mb-2">
            <h2 className="font-semibold text-lg text-foreground flex items-center gap-2"><Users className="w-5 h-5" /> Médicos Mais Produtivos</h2>
-            <Button size="sm" variant="outline" className="hover:bg-primary! hover:text-white! transition-colors" onClick={() => exportPDF("Médicos Mais Produtivos", "Lista dos médicos mais produtivos.", "table-medicos")}> <FileDown className="w-4 h-4 mr-1" /> Exportar PDF</Button>
+            <Button size="sm" variant="outline" className="hover:bg-primary! hover:text-white! transition-colors" onClick={() => exportPDF("Médicos Mais Produtivos", "Lista dos médicos mais produtivos.")}> <FileDown className="w-4 h-4 mr-1" /> Exportar PDF</Button>
          </div>
          <div id="table-medicos">
          <table className="w-full text-sm mt-4">
            <thead>
              <tr className="text-muted-foreground">
@ -341,7 +294,6 @@ export default function RelatoriosPage() {
        </div>
      </div>
    </div>
    </div>
  );
 }
--- a/susconecta/app/(main-routes)/doutores/page.tsx
+++ b/susconecta/app/(main-routes)/doutores/page.tsx
@ -131,7 +131,6 @@ export default function DoutoresPage() {
  const [availabilityOpenFor, setAvailabilityOpenFor] = useState<Medico | null>(null);
  const [availabilityViewingFor, setAvailabilityViewingFor] = useState<Medico | null>(null);
  const [availabilities, setAvailabilities] = useState<DoctorAvailability[]>([]);
  const [availabilitiesForCreate, setAvailabilitiesForCreate] = useState<DoctorAvailability[]>([]);
  const [availLoading, setAvailLoading] = useState(false);
  const [editingAvailability, setEditingAvailability] = useState<DoctorAvailability | null>(null);
  const [exceptions, setExceptions] = useState<DoctorException[]>([]);
@ -634,17 +633,7 @@ export default function DoutoresPage() {
                          Ver pacientes atribuídos
                        </DropdownMenuItem>
-                        <DropdownMenuItem onClick={async () => {
+                        <DropdownMenuItem onClick={() => setAvailabilityOpenFor(doctor)}>
                          try {
                            const list = await listarDisponibilidades({ doctorId: doctor.id, active: true });
                            setAvailabilitiesForCreate(list || []);
                            setAvailabilityOpenFor(doctor);
                          } catch (e) {
                            console.warn('Erro ao carregar disponibilidades:', e);
                            setAvailabilitiesForCreate([]);
                            setAvailabilityOpenFor(doctor);
                          }
                        }}>
                          <Plus className="mr-2 h-4 w-4" />
                          Criar disponibilidade
                        </DropdownMenuItem>
@ -844,27 +833,27 @@ export default function DoutoresPage() {
              </DialogDescription>
            </DialogHeader>
            <div className="grid gap-4 py-4">
-              <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
+              <div className="grid grid-cols-4 items-center gap-4">
-                <Label className="text-left sm:text-right">Nome</Label>
+                <Label className="text-right">Nome</Label>
-                <span className="col-span-1 sm:col-span-3 font-medium">{viewingDoctor?.full_name}</span>
+                <span className="col-span-3 font-medium">{viewingDoctor?.full_name}</span>
              </div>
-              <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
+              <div className="grid grid-cols-4 items-center gap-4">
-                <Label className="text-left sm:text-right">Especialidade</Label>
+                <Label className="text-right">Especialidade</Label>
-                <span className="col-span-1 sm:col-span-3">
+                <span className="col-span-3">
                  <Badge variant="outline">{viewingDoctor?.especialidade}</Badge>
                </span>
              </div>
-              <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
+              <div className="grid grid-cols-4 items-center gap-4">
-                <Label className="text-left sm:text-right">CRM</Label>
+                <Label className="text-right">CRM</Label>
-                <span className="col-span-1 sm:col-span-3">{viewingDoctor?.crm}</span>
+                <span className="col-span-3">{viewingDoctor?.crm}</span>
              </div>
-              <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
+              <div className="grid grid-cols-4 items-center gap-4">
-                <Label className="text-left sm:text-right">Email</Label>
+                <Label className="text-right">Email</Label>
-                <span className="col-span-1 sm:col-span-3">{viewingDoctor?.email}</span>
+                <span className="col-span-3">{viewingDoctor?.email}</span>
              </div>
-              <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
+              <div className="grid grid-cols-4 items-center gap-4">
-                <Label className="text-left sm:text-right">Telefone</Label>
+                <Label className="text-right">Telefone</Label>
-                <span className="col-span-1 sm:col-span-3">{viewingDoctor?.telefone}</span>
+                <span className="col-span-3">{viewingDoctor?.telefone}</span>
              </div>
            </div>
            <DialogFooter>
@ -880,7 +869,6 @@ export default function DoutoresPage() {
          open={!!availabilityOpenFor}
          onOpenChange={(open) => { if (!open) setAvailabilityOpenFor(null); }}
          doctorId={availabilityOpenFor?.id}
          existingAvailabilities={availabilitiesForCreate}
          onSaved={(saved) => { console.log('Disponibilidade salva', saved); setAvailabilityOpenFor(null); /* optionally reload list */ reloadAvailabilities(availabilityOpenFor?.id); }}
        />
      )}
@ -902,7 +890,6 @@ export default function DoutoresPage() {
          doctorId={editingAvailability?.doctor_id ?? availabilityViewingFor?.id}
          availability={editingAvailability}
          mode="edit"
          existingAvailabilities={availabilities}
          onSaved={(saved) => { console.log('Disponibilidade atualizada', saved); setEditingAvailability(null); reloadAvailabilities(editingAvailability?.doctor_id ?? availabilityViewingFor?.id); }}
        />
      )}
@ -923,35 +910,14 @@ export default function DoutoresPage() {
                <div>Carregando disponibilidades…</div>
              ) : availabilities && availabilities.length ? (
                <div className="space-y-2">
-                  {availabilities
+                  {availabilities.map((a) => (
                    .sort((a, b) => {
                      // Define a ordem dos dias da semana (Segunda a Domingo)
                      const weekdayOrder: Record<string, number> = {
                        'segunda': 1, 'segunda-feira': 1, 'mon': 1, 'monday': 1, '1': 1,
                        'terca': 2, 'terça': 2, 'terça-feira': 2, 'tue': 2, 'tuesday': 2, '2': 2,
                        'quarta': 3, 'quarta-feira': 3, 'wed': 3, 'wednesday': 3, '3': 3,
                        'quinta': 4, 'quinta-feira': 4, 'thu': 4, 'thursday': 4, '4': 4,
                        'sexta': 5, 'sexta-feira': 5, 'fri': 5, 'friday': 5, '5': 5,
                        'sabado': 6, 'sábado': 6, 'sat': 6, 'saturday': 6, '6': 6,
                        'domingo': 7, 'dom': 7, 'sun': 7, 'sunday': 7, '0': 7, '7': 7
                      };
                      const getWeekdayOrder = (weekday: any) => {
                        if (typeof weekday === 'number') return weekday === 0 ? 7 : weekday;
                        const normalized = String(weekday).toLowerCase().normalize('NFD').replace(/\p{Diacritic}/gu, '');
                        return weekdayOrder[normalized] || 999;
                      };
                      return getWeekdayOrder(a.weekday) - getWeekdayOrder(b.weekday);
                    })
                    .map((a) => (
                      <div key={String(a.id)} className="p-2 border rounded flex justify-between items-start">
                        <div>
                          <div className="font-medium">{translateWeekday(a.weekday)} • {a.start_time} — {a.end_time}</div>
                          <div className="text-xs text-muted-foreground">Duração: {a.slot_minutes} min • Tipo: {a.appointment_type || '—'} • {a.active ? 'Ativa' : 'Inativa'}</div>
                        </div>
                        <div className="flex gap-2">
-                          <Button size="sm" variant="outline" onClick={() => setEditingAvailability(a)} className="hover:bg-muted hover:text-foreground">Editar</Button>
+                          <Button size="sm" variant="outline" onClick={() => setEditingAvailability(a)}>Editar</Button>
                          <Button size="sm" variant="destructive" onClick={async () => {
                            if (!confirm('Excluir esta disponibilidade?')) return;
                            try {
@ -998,14 +964,7 @@ export default function DoutoresPage() {
                  {exceptions.map((ex) => (
                    <div key={String(ex.id)} className="p-2 border rounded flex justify-between items-start">
                      <div>
-                        <div className="font-medium">{(() => {
+                        <div className="font-medium">{ex.date} {ex.start_time ? `• ${ex.start_time}` : ''} {ex.end_time ? `— ${ex.end_time}` : ''}</div>
                          try {
                            const [y, m, d] = String(ex.date).split('-');
                            return `${d}/${m}/${y}`;
                          } catch (e) {
                            return ex.date;
                          }
                        })()} {ex.start_time ? `• ${ex.start_time}` : ''} {ex.end_time ? `— ${ex.end_time}` : ''}</div>
                        <div className="text-xs text-muted-foreground">Tipo: {ex.kind} • Motivo: {ex.reason || '—'}</div>
                      </div>
                      <div className="flex gap-2">
--- a/susconecta/app/(main-routes)/pacientes/layout.tsx
+++ b/susconecta/app/(main-routes)/pacientes/layout.tsx
@ -1,5 +0,0 @@
 import type { ReactNode } from "react";
 export default function PacientesLayout({ children }: { children: ReactNode }) {
  return <>{children}</>;
 }
--- a/susconecta/app/(main-routes)/pacientes/page.tsx
+++ b/susconecta/app/(main-routes)/pacientes/page.tsx
@ -539,27 +539,27 @@ export default function PacientesPage() {
              </DialogDescription>
            </DialogHeader>
            <div className="grid gap-4 py-4">
-              <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
+              <div className="grid grid-cols-4 items-center gap-4">
-                <Label className="text-left sm:text-right">Nome</Label>
+                <Label className="text-right">Nome</Label>
-                <span className="col-span-1 sm:col-span-3 font-medium">{viewingPatient.full_name}</span>
+                <span className="col-span-3 font-medium">{viewingPatient.full_name}</span>
              </div>
-              <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
+              <div className="grid grid-cols-4 items-center gap-4">
-                <Label className="text-left sm:text-right">CPF</Label>
+                <Label className="text-right">CPF</Label>
-                <span className="col-span-1 sm:col-span-3">{viewingPatient.cpf}</span>
+                <span className="col-span-3">{viewingPatient.cpf}</span>
              </div>
-              <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
+              <div className="grid grid-cols-4 items-center gap-4">
-                <Label className="text-left sm:text-right">Telefone</Label>
+                <Label className="text-right">Telefone</Label>
-                <span className="col-span-1 sm:col-span-3">{viewingPatient.phone_mobile}</span>
+                <span className="col-span-3">{viewingPatient.phone_mobile}</span>
              </div>
-              <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
+              <div className="grid grid-cols-4 items-center gap-4">
-                <Label className="text-left sm:text-right">Endereço</Label>
+                <Label className="text-right">Endereço</Label>
-                <span className="col-span-1 sm:col-span-3">
+                <span className="col-span-3">
                  {`${viewingPatient.street || ''}, ${viewingPatient.number || ''} - ${viewingPatient.neighborhood || ''}, ${viewingPatient.city || ''} - ${viewingPatient.state || ''}`}
                </span>
              </div>
-               <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
+               <div className="grid grid-cols-4 items-center gap-4">
-                <Label className="text-left sm:text-right">Observações</Label>
+                <Label className="text-right">Observações</Label>
-                <span className="col-span-1 sm:col-span-3">{viewingPatient.notes || "Nenhuma"}</span>
+                <span className="col-span-3">{viewingPatient.notes || "Nenhuma"}</span>
              </div>
            </div>
            <DialogFooter>
--- a/susconecta/app/audio-teste/page.tsx
+++ b/susconecta/app/audio-teste/page.tsx
@ -1,22 +0,0 @@
 "use client";
 import AIVoiceFlow from "@/components/ZoeIA/ai-voice-flow";
 import { useTheme } from "next-themes";
 import React from "react";
 export default function VozPage() {
  const { theme } = useTheme();
  const isDark = theme === "dark";
  // Classes condicionais para manter coerência com o chat
  const bgClass = isDark
    ? "bg-gray-900 text-white"
    : "bg-gray-50 text-gray-900";
  return (
    <div className={`min-h-screen flex items-center justify-center p-10 transition-colors ${bgClass}`}>
      <AIVoiceFlow />
    </div>
  );
 }
--- a/susconecta/app/globals.css
+++ b/susconecta/app/globals.css
@ -167,19 +167,3 @@ button[aria-label="Close"],
  display: none !important;
 }
 /* Classe padronizada de hover azul - consistente em todos os modos (claro/escuro SO e app) */
 .hover-primary-blue {
  @apply hover:bg-blue-500 hover:text-white hover:border-blue-500 transition-all duration-200;
 }
 /* Hover simples para ícones e botões menores */
 .hover-primary-blue-soft {
  @apply hover:bg-blue-500/10 hover:text-blue-500 transition-colors duration-200;
 }
 /* Hover padronizado para selects de filtro - apenas ao passar o mouse */
 .select-hover-blue {
  background-color: transparent;
  @apply hover:bg-blue-500 hover:text-white hover:border-blue-500 transition-colors duration-200;
 }
--- a/susconecta/app/laudos-editor/page.tsx
+++ b/susconecta/app/laudos-editor/page.tsx
@ -5,7 +5,7 @@ import { useRouter } from 'next/navigation';
 import ProtectedRoute from '@/components/shared/ProtectedRoute';
 import { useAuth } from '@/hooks/useAuth';
 import { useToast } from '@/hooks/use-toast';
-import { listarPacientes, buscarMedicos, getUserInfo } from '@/lib/api';
+import { listarPacientes, buscarMedicos } from '@/lib/api';
 import { useReports } from '@/hooks/useReports';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@ -148,10 +148,7 @@ export default function LaudosEditorPage() {
    if (savedDraft) {
      try {
        const draft = JSON.parse(savedDraft);
        // Carregar paciente do rascunho se existir
        if (draft.pacienteSelecionado) {
        setPacienteSelecionado(draft.pacienteSelecionado);
        }
        setContent(draft.content);
        setCampos(draft.campos);
        setSolicitanteId(draft.solicitanteId);
@ -181,33 +178,6 @@ export default function LaudosEditorPage() {
    }
  }, []);
  // Auto-salvar no localStorage sempre que houver mudanças (com debounce)
  useEffect(() => {
    const timeoutId = setTimeout(() => {
      // Capturar conteúdo atual do editor antes de salvar
      const currentContent = editorRef.current?.innerHTML || content;
      const draft = {
        pacienteSelecionado,
        content: currentContent,
        campos,
        solicitanteId,
        solicitanteNome,
        prazoDate,
        prazoTime,
        imagens,
        lastSaved: new Date().toISOString(),
      };
      // Só salvar se houver conteúdo ou dados preenchidos
      if (currentContent || pacienteSelecionado || campos.exame || campos.diagnostico || imagens.length > 0) {
        localStorage.setItem('laudoDraft', JSON.stringify(draft));
      }
    }, 1000); // Aguarda 1 segundo após última mudança
    return () => clearTimeout(timeoutId);
  }, [pacienteSelecionado, content, campos, solicitanteId, solicitanteNome, prazoDate, prazoTime, imagens]);
  // Tentar obter o registro de médico correspondente ao usuário autenticado
  useEffect(() => {
    let mounted = true;
@ -216,49 +186,25 @@ export default function LaudosEditorPage() {
        // Se já temos um nome razoável, não sobrescrever
        if (solicitanteNome && solicitanteNome.trim().length > 1) return;
        if (!user) return;
-
+        // Buscar médicos por email (buscarMedicos aceita termos com @ e faz a busca por email)
-        // First try: query doctors index with any available identifier (email, id or username)
+        if (user.email && user.email.includes('@')) {
-        try {
+          const docs = await buscarMedicos(user.email).catch(() => []);
          const term = (user.email && user.email.trim()) || user.name || user.id || '';
          if (term && term.length > 1) {
            const docs = await buscarMedicos(term).catch(() => []);
          if (!mounted) return;
          if (Array.isArray(docs) && docs.length > 0) {
            const d = docs[0];
            // Preferir full_name do médico quando disponível
            if (d && (d.full_name || (d as any).nome)) {
              setSolicitanteNome((d.full_name as string) || ((d as any).nome as string) || user.name || user.email || '');
                setSolicitanteId(user.id || solicitanteId);
              return;
            }
          }
        }
        } catch (err) {
          // non-fatal, continue to next fallback
        }
-        // Second try: fetch consolidated user-info (may contain profile.full_name)
+        // Fallbacks: usar user.name se existir; caso contrário, email completo
        try {
          const info = await getUserInfo().catch(() => null);
          if (!mounted) return;
          if (info && (info.profile as any)?.full_name) {
            const full = (info.profile as any).full_name as string;
            if (full && full.trim().length > 1) {
              setSolicitanteNome(full);
              setSolicitanteId(user.id || solicitanteId);
              return;
            }
          }
        } catch (err) {
          // ignore and fallback
        }
        // Final fallback: use name from auth user or email/username
        setSolicitanteNome(user.name || user.email || '');
        setSolicitanteId(user.id || solicitanteId);
      } catch (err) {
        // em caso de erro, manter o fallback
        setSolicitanteNome(user?.name || user?.email || '');
        setSolicitanteId(user?.id || solicitanteId);
      }
    }
@ -277,23 +223,6 @@ export default function LaudosEditorPage() {
    }
  }, [content]);
  // Função para trocar de aba salvando conteúdo antes
  const handleTabChange = (newTab: string) => {
    // Salvar conteúdo do editor antes de trocar
    if (editorRef.current) {
      const editorContent = editorRef.current.innerHTML;
      setContent(editorContent);
    }
    setActiveTab(newTab);
  };
  // Restaurar conteúdo do editor quando voltar para a aba editor
  useEffect(() => {
    if (activeTab === 'editor' && editorRef.current && content) {
      editorRef.current.innerHTML = content;
    }
  }, [activeTab]);
  // Desfazer
  const handleUndo = () => {
    if (historyIndex > 0) {
@ -368,15 +297,11 @@ export default function LaudosEditorPage() {
  // Salvar rascunho no localStorage
  const saveDraft = () => {
    // Capturar conteúdo atual do editor antes de salvar
    const currentContent = editorRef.current?.innerHTML || content;
    const draft = {
      pacienteSelecionado,
-      content: currentContent,
+      content,
      campos,
      solicitanteId,
      solicitanteNome,
      prazoDate,
      prazoTime,
      imagens,
@ -440,9 +365,6 @@ export default function LaudosEditorPage() {
        return;
      }
      // Capturar conteúdo atual do editor antes de salvar
      const currentContent = editorRef.current?.innerHTML || content;
      const userId = user?.id || '00000000-0000-0000-0000-000000000001';
      let composedDueAt = undefined;
@ -458,7 +380,7 @@ export default function LaudosEditorPage() {
        diagnosis: campos.diagnostico || '',
        conclusion: campos.conclusao || '',
        cid_code: campos.cid || '',
-        content_html: currentContent,
+        content_html: content,
        content_json: {},
        requested_by: solicitanteId || userId,
        due_at: composedDueAt ?? new Date().toISOString(),
@ -468,10 +390,6 @@ export default function LaudosEditorPage() {
      if (createNewReport) {
        await createNewReport(payload as any);
        // Limpar rascunho salvo após sucesso
        localStorage.removeItem('laudoDraft');
        toast({
          title: 'Laudo criado com sucesso!',
          description: 'O laudo foi liberado e salvo.',
@ -499,7 +417,7 @@ export default function LaudosEditorPage() {
              <Button
                variant="ghost"
                size="sm"
-                onClick={() => setShowDraftConfirm(true)}
+                onClick={() => router.push('/profissional')}
                className="p-0 h-auto flex-shrink-0"
              >
                <ArrowLeft className="w-4 sm:w-5 h-4 sm:h-5" />
@ -547,7 +465,7 @@ export default function LaudosEditorPage() {
                  <div className="font-semibold text-primary text-sm sm:text-lg truncate">{getPatientName(pacienteSelecionado)}</div>
                  <div className="text-xs sm:text-sm text-muted-foreground line-clamp-2">
                    {getPatientCpf(pacienteSelecionado) ? `CPF: ${getPatientCpf(pacienteSelecionado)} | ` : ''}
-                    {pacienteSelecionado?.birth_date ? `Nascimento: ${pacienteSelecionado.birth_date.split('T')[0].split('-').reverse().join('/')}` : getPatientAge(pacienteSelecionado) ? `Idade: ${getPatientAge(pacienteSelecionado)} anos` : ''}
+                    {pacienteSelecionado?.birth_date ? `Nascimento: ${pacienteSelecionado.birth_date}` : getPatientAge(pacienteSelecionado) ? `Idade: ${getPatientAge(pacienteSelecionado)} anos` : ''}
                    {getPatientSex(pacienteSelecionado) ? ` | Sexo: ${getPatientSex(pacienteSelecionado)}` : ''}
                  </div>
                </div>
@ -562,9 +480,15 @@ export default function LaudosEditorPage() {
              </div>
            )}
-            {/* Prazo */}
+            {/* Solicitante e Prazo */}
            {pacienteSelecionado && (
-              <div className="mt-3 sm:mt-4">
+              <div className="mt-3 sm:mt-4 grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-3">
                <div>
                  <Label htmlFor="solicitante" className="text-xs sm:text-sm">
                    Solicitante
                  </Label>
                  <Input id="solicitante" value={solicitanteNome} readOnly disabled className="text-xs sm:text-sm mt-1 h-8 sm:h-10" />
                </div>
                <div>
                  <Label htmlFor="prazoDate" className="text-xs sm:text-sm">
                    Prazo do Laudo
@ -594,7 +518,7 @@ export default function LaudosEditorPage() {
          {/* Tabs */}
          <div className="flex border-b border-border bg-card overflow-x-auto flex-shrink-0">
            <button
-              onClick={() => handleTabChange('editor')}
+              onClick={() => setActiveTab('editor')}
              className={`px-2 sm:px-4 py-2 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
                activeTab === 'editor'
                  ? 'border-blue-500 text-blue-600'
@ -605,7 +529,18 @@ export default function LaudosEditorPage() {
              Editor
            </button>
            <button
-              onClick={() => handleTabChange('campos')}
+              onClick={() => setActiveTab('imagens')}
              className={`px-2 sm:px-4 py-2 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
                activeTab === 'imagens'
                  ? 'border-blue-500 text-blue-600'
                  : 'border-transparent text-gray-600 dark:text-muted-foreground'
              }`}
            >
              <Upload className="w-3 sm:w-4 h-3 sm:h-4 inline mr-1" />
              Imagens ({imagens.length})
            </button>
            <button
              onClick={() => setActiveTab('campos')}
              className={`px-2 sm:px-4 py-2 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
                activeTab === 'campos'
                  ? 'border-blue-500 text-blue-600'
@ -766,6 +701,48 @@ export default function LaudosEditorPage() {
                </div>
              )}
              {/* Imagens Tab */}
              {activeTab === 'imagens' && (
                <div className="flex-1 p-2 sm:p-3 md:p-4 overflow-y-auto">
                  <div className="mb-3 sm:mb-4">
                    <Label htmlFor="upload-images" className="text-xs sm:text-sm">
                      Upload de Imagens
                    </Label>
                    <Input
                      id="upload-images"
                      type="file"
                      multiple
                      accept="image/*,.pdf"
                      onChange={handleImageUpload}
                      className="mt-1 sm:mt-2 text-xs"
                    />
                  </div>
                  <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-3 gap-2 sm:gap-3 md:gap-4">
                    {imagens.map((img) => (
                      <div key={img.id} className="border border-border rounded-lg p-1.5 sm:p-2">
                        {img.type.startsWith('image/') ? (
                          <img src={img.url} alt={img.name} className="w-full h-20 sm:h-24 md:h-28 object-cover rounded" />
                        ) : (
                          <div className="w-full h-20 sm:h-24 md:h-28 bg-muted rounded flex items-center justify-center">
                            <FileText className="w-6 sm:w-8 h-6 sm:h-8 text-muted-foreground" />
                          </div>
                        )}
                        <p className="text-xs text-muted-foreground mt-1 truncate">{img.name}</p>
                        <Button
                          variant="destructive"
                          size="sm"
                          className="w-full mt-1 text-xs h-8"
                          onClick={() => setImagens((prev) => prev.filter((i) => i.id !== img.id))}
                        >
                          Remover
                        </Button>
                      </div>
                    ))}
                  </div>
                </div>
              )}
              {/* Campos Tab */}
              {activeTab === 'campos' && (
                <div className="flex-1 p-2 sm:p-3 md:p-4 space-y-2 sm:space-y-3 md:space-y-4 overflow-y-auto">
@ -963,14 +940,14 @@ export default function LaudosEditorPage() {
                    setShowDraftConfirm(false);
                    discardDraft();
                  }}
-                  className="text-xs sm:text-sm h-9 sm:h-10 hover:bg-gray-100 dark:hover:bg-gray-800"
+                  className="text-xs sm:text-sm h-9 sm:h-10 hover:bg-blue-50 dark:hover:bg-blue-950"
                >
                  Descartar
                </Button>
                <Button
                  variant="outline"
                  onClick={() => setShowDraftConfirm(false)}
-                  className="text-xs sm:text-sm h-9 sm:h-10 hover:bg-gray-100 dark:hover:bg-gray-800"
+                  className="text-xs sm:text-sm h-9 sm:h-10 hover:bg-blue-50 dark:hover:bg-blue-950"
                >
                  Voltar
                </Button>
--- a/susconecta/app/laudos/[id]/editar/page.tsx
+++ b/susconecta/app/laudos/[id]/editar/page.tsx
@ -12,7 +12,6 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { FileText, Settings, Eye, ArrowLeft, BookOpen } from 'lucide-react';
 export default function EditarLaudoPage() {
@ -30,7 +29,6 @@ export default function EditarLaudoPage() {
  const [activeTab, setActiveTab] = useState('editor');
  const [showPreview, setShowPreview] = useState(false);
  const [loading, setLoading] = useState(true);
  const [showExitDialog, setShowExitDialog] = useState(false);
  // Campos do laudo
  const [campos, setCampos] = useState({
@ -71,45 +69,34 @@ export default function EditarLaudoPage() {
  // Estado para rastrear alinhamento ativo
  const [activeAlignment, setActiveAlignment] = useState('left');
-  // Salvar conteúdo no localStorage sempre que muda (com debounce)
+  // Salvar conteúdo no localStorage sempre que muda
  useEffect(() => {
-    const timeoutId = setTimeout(() => {
+    if (content && laudoId) {
-      if (laudoId) {
+      localStorage.setItem(`laudo-draft-${laudoId}`, content);
        // Capturar conteúdo atual do editor antes de salvar
        const currentContent = editorRef.current?.innerHTML || content;
        const draft = {
          content: currentContent,
          campos,
          lastSaved: new Date().toISOString(),
        };
        localStorage.setItem(`laudo-draft-${laudoId}`, JSON.stringify(draft));
    }
-    }, 1000); // Aguarda 1 segundo após última mudança
+  }, [content, laudoId]);
-    return () => clearTimeout(timeoutId);
+  // Sincronizar conteúdo com o editor
-  }, [content, campos, laudoId]);
+  useEffect(() => {
  // Função para trocar de aba salvando conteúdo antes
  const handleTabChange = (newTab: string) => {
    // Salvar conteúdo do editor antes de trocar
    if (editorRef.current) {
      const editorContent = editorRef.current.innerHTML;
      setContent(editorContent);
    }
    // Se estiver voltando para o editor, restaurar conteúdo
    if (newTab === 'editor') {
      setTimeout(() => {
    if (editorRef.current && content) {
      if (editorRef.current.innerHTML !== content) {
        editorRef.current.innerHTML = content;
      }
      }, 0);
    }
  }, [content]);
-    setActiveTab(newTab);
+  // Restaurar conteúdo quando volta para a aba editor
-  };
+  useEffect(() => {
    if (activeTab === 'editor' && editorRef.current && content) {
      editorRef.current.focus();
      const range = document.createRange();
      const sel = window.getSelection();
      range.setStart(editorRef.current, editorRef.current.childNodes.length);
      range.collapse(true);
      sel?.removeAllRanges();
      sel?.addRange(range);
    }
  }, [activeTab]);
  // Atualizar formatações ativas ao mudar seleção
  useEffect(() => {
@ -175,49 +162,25 @@ export default function EditarLaudoPage() {
          mostrarAssinatura: !r.hide_signature,
        });
-        // Preencher conteúdo - verificar todos os possíveis nomes de campo
+        // Preencher conteúdo
-        const contentHtml = r.content_html || r.conteudo_html || r.contentHtml || r.conteudo || r.content || '';
+        const contentHtml = r.content_html || r.conteudo_html || '';
        console.log('[EditarLaudoPage] Loading content - report:', r);
        console.log('[EditarLaudoPage] Content fields check:', {
          content_html: r.content_html,
          conteudo_html: r.conteudo_html,
          contentHtml: r.contentHtml,
          conteudo: r.conteudo,
          content: r.content,
          finalContent: contentHtml
        });
        // Verificar se existe rascunho salvo no localStorage
-        let finalContent = contentHtml;
+        const draftContent = typeof window !== 'undefined' ? localStorage.getItem(`laudo-draft-${laudoId}`) : null;
-        let finalCampos = {
+        const finalContent = draftContent || contentHtml;
          cid: r.cid_code || r.cid || '',
          diagnostico: r.diagnosis || r.diagnostico || '',
          conclusao: r.conclusion || r.conclusao || '',
          exame: r.exam || r.exame || '',
          especialidade: r.especialidade || '',
          mostrarData: !r.hide_date,
          mostrarAssinatura: !r.hide_signature,
        };
        if (typeof window !== 'undefined') {
          const draftData = localStorage.getItem(`laudo-draft-${laudoId}`);
          if (draftData) {
            try {
              const draft = JSON.parse(draftData);
              if (draft.content) finalContent = draft.content;
              if (draft.campos) finalCampos = { ...finalCampos, ...draft.campos };
            } catch (err) {
              // Se falhar parse, tentar como string simples (formato antigo)
              finalContent = draftData;
            }
          }
        }
        setCampos(finalCampos);
        setContent(finalContent);
-        console.log('[EditarLaudoPage] Setting content state with length:', finalContent.length);
+        if (editorRef.current) {
-        
+          editorRef.current.innerHTML = finalContent;
-        // O innerHTML será setado no useEffect separado abaixo
+          // Colocar cursor no final do texto
          editorRef.current.focus();
          const range = document.createRange();
          const sel = window.getSelection();
          range.setStart(editorRef.current, editorRef.current.childNodes.length);
          range.collapse(true);
          sel?.removeAllRanges();
          sel?.addRange(range);
        }
      } catch (err) {
        console.warn('Erro ao carregar laudo:', err);
        toast({
@ -232,27 +195,6 @@ export default function EditarLaudoPage() {
    fetchLaudo();
  }, [laudoId, token, toast]);
  // UseEffect separado para injetar o conteúdo no editor quando estiver pronto
  useEffect(() => {
    if (content && editorRef.current && !loading) {
      console.log('[EditarLaudoPage] Injecting content into editor, length:', content.length);
      // Só injetar se o conteúdo do editor estiver vazio ou muito diferente
      const currentContent = editorRef.current.innerHTML;
      if (!currentContent || currentContent.length === 0) {
        editorRef.current.innerHTML = content;
        // Mover cursor para o final
        const range = document.createRange();
        const sel = window.getSelection();
        if (editorRef.current.childNodes.length > 0) {
          range.selectNodeContents(editorRef.current);
          range.collapse(false); // false = colapsar no final
          sel?.removeAllRanges();
          sel?.addRange(range);
        }
      }
    }
  }, [content, loading]);
  // Formatação com contenteditable
  const applyFormat = (command: string, value?: string) => {
    document.execCommand(command, false, value || undefined);
@ -390,7 +332,7 @@ export default function EditarLaudoPage() {
              <Button
                variant="ghost"
                size="sm"
-                onClick={() => setShowExitDialog(true)}
+                onClick={() => router.back()}
                className="p-0 h-auto flex-shrink-0"
              >
                <ArrowLeft className="w-4 sm:w-5 h-4 sm:h-5" />
@ -415,7 +357,7 @@ export default function EditarLaudoPage() {
          {/* Tabs */}
          <div className="flex border-b border-border bg-card overflow-x-auto flex-shrink-0">
            <button
-              onClick={() => handleTabChange('editor')}
+              onClick={() => setActiveTab('editor')}
              className={`px-2 sm:px-4 py-2 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
                activeTab === 'editor'
                  ? 'border-blue-500 text-blue-600'
@ -426,7 +368,7 @@ export default function EditarLaudoPage() {
              Editor
            </button>
            <button
-              onClick={() => handleTabChange('campos')}
+              onClick={() => setActiveTab('campos')}
              className={`px-2 sm:px-4 py-2 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
                activeTab === 'campos'
                  ? 'border-blue-500 text-blue-600'
@ -597,10 +539,7 @@ export default function EditarLaudoPage() {
                    <div
                      ref={editorRef}
                      contentEditable
-                      onInput={(e) => {
+                      onInput={(e) => setContent(e.currentTarget.innerHTML)}
                        // Capturar conteúdo sem perder posição do cursor
                        setContent(e.currentTarget.innerHTML);
                      }}
                      onPaste={(e) => {
                        e.preventDefault();
                        const text = e.clipboardData.getData('text/plain');
@ -772,7 +711,7 @@ export default function EditarLaudoPage() {
              Edite as informações do laudo e salve as alterações.
            </div>
            <div className="flex gap-2 w-full sm:w-auto">
-              <Button variant="outline" onClick={() => setShowExitDialog(true)} className="flex-1 sm:flex-none text-xs sm:text-sm h-8 sm:h-10 hover:bg-blue-50 dark:hover:bg-blue-950">
+              <Button variant="outline" onClick={() => router.back()} className="flex-1 sm:flex-none text-xs sm:text-sm h-8 sm:h-10 hover:bg-blue-50 dark:hover:bg-blue-950">
                Cancelar
              </Button>
              <Button onClick={handleSave} className="flex-1 sm:flex-none text-xs sm:text-sm h-8 sm:h-10">
@ -781,66 +720,6 @@ export default function EditarLaudoPage() {
            </div>
          </div>
        </div>
        {/* Dialog de confirmação de saída */}
        <Dialog open={showExitDialog} onOpenChange={setShowExitDialog}>
          <DialogContent className="sm:max-w-md">
            <DialogHeader>
              <DialogTitle>Salvar Rascunho?</DialogTitle>
              <DialogDescription>
                Você tem informações não salvas. Deseja salvar como rascunho para continuar depois?
              </DialogDescription>
            </DialogHeader>
            <DialogFooter className="flex-col sm:flex-row gap-2">
              <Button
                variant="outline"
                onClick={() => {
                  // Limpar rascunho
                  localStorage.removeItem(`laudo-draft-${laudoId}`);
                  setShowExitDialog(false);
                  router.back();
                }}
                className="w-full sm:w-auto hover:bg-gray-100 dark:hover:bg-gray-800"
              >
                Descartar
              </Button>
              <Button
                variant="outline"
                onClick={() => {
                  setShowExitDialog(false);
                  router.back();
                }}
                className="w-full sm:w-auto hover:bg-gray-100 dark:hover:bg-gray-800"
              >
                Voltar
              </Button>
              <Button
                onClick={() => {
                  // Salvar rascunho manualmente antes de sair
                  const currentContent = editorRef.current?.innerHTML || content;
                  const draft = {
                    content: currentContent,
                    campos,
                    lastSaved: new Date().toISOString(),
                  };
                  localStorage.setItem(`laudo-draft-${laudoId}`, JSON.stringify(draft));
                  toast({
                    title: 'Rascunho salvo!',
                    description: 'Suas alterações foram salvas.',
                    variant: 'default',
                  });
                  setShowExitDialog(false);
                  router.back();
                }}
                className="w-full sm:w-auto"
              >
                Salvar Rascunho
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>
    </ProtectedRoute>
  );
--- a/susconecta/app/laudos/[id]/page.tsx
+++ b/susconecta/app/laudos/[id]/page.tsx
@ -5,7 +5,7 @@ import { useRouter, useParams } from 'next/navigation'
 import { useTheme } from 'next-themes'
 import Image from 'next/image'
 import { Button } from '@/components/ui/button'
-import { ArrowLeft, Printer, Download } from 'lucide-react'
+import { ArrowLeft, Printer, Download, MoreVertical } from 'lucide-react'
 import { buscarRelatorioPorId, getDoctorById, buscarMedicosPorIds, buscarPacientePorId } from '@/lib/api'
 import { ENV_CONFIG } from '@/lib/env-config'
 import ProtectedRoute from '@/components/shared/ProtectedRoute'
@ -355,6 +355,18 @@ export default function LaudoPage() {
              >
                <Printer className="w-5 h-5" />
              </Button>
              <Button
                variant="ghost"
                size="icon"
                title="Mais opções"
                className={`${
                  isDark 
                    ? 'text-slate-300 hover:bg-slate-700 hover:text-white' 
                    : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'
                }`}
              >
                <MoreVertical className="w-5 h-5" />
              </Button>
            </div>
          </div>
        </div>
--- a/susconecta/app/layout.tsx
+++ b/susconecta/app/layout.tsx
@ -19,9 +19,6 @@ export default function RootLayout({
 }) {
  return (
    <html lang="pt-BR" className="antialiased" suppressHydrationWarning>
      <head>
        <meta charSet="utf-8" />
      </head>
      <body style={{ fontFamily: "var(--font-geist-sans)" }}>
        <ThemeProvider attribute="class" defaultTheme="light" enableSystem={false}>
          <AuthProvider>
--- a/susconecta/app/paciente/layout.tsx
+++ b/susconecta/app/paciente/layout.tsx
@ -1,11 +0,0 @@
 import type { ReactNode } from "react";
 import { ChatWidget } from "@/components/features/pacientes/chat-widget";
 export default function PacienteLayout({ children }: { children: ReactNode }) {
  return (
    <>
      {children}
      <ChatWidget />
    </>
  );
 }
--- a/susconecta/app/paciente/page.tsx
+++ b/susconecta/app/paciente/page.tsx
@ -19,7 +19,7 @@ import Link from 'next/link'
 import ProtectedRoute from '@/components/shared/ProtectedRoute'
 import { useAuth } from '@/hooks/useAuth'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { buscarPacientes, buscarPacientePorUserId, getUserInfo, listarAgendamentos, buscarMedicosPorIds, buscarMedicos, atualizarPaciente, buscarPacientePorId, getDoctorById, atualizarAgendamento, deletarAgendamento, addDeletedAppointmentId, listarTodosMedicos } from '@/lib/api'
+import { buscarPacientes, buscarPacientePorUserId, getUserInfo, listarAgendamentos, buscarMedicosPorIds, buscarMedicos, atualizarPaciente, buscarPacientePorId, getDoctorById, atualizarAgendamento, deletarAgendamento, addDeletedAppointmentId } from '@/lib/api'
 import { CalendarRegistrationForm } from '@/components/features/forms/calendar-registration-form'
 import { buscarRelatorioPorId, listarRelatoriosPorMedico } from '@/lib/reports'
 import { ENV_CONFIG } from '@/lib/env-config'
@ -309,15 +309,9 @@ export default function PacientePage() {
    setIsEditingProfile(false)
  }
  function DashboardCards() {
    const router = useRouter()
    const [nextAppt, setNextAppt] = useState<string | null>(null)
    const [examsCount, setExamsCount] = useState<number | null>(null)
    const [loading, setLoading] = useState(false)
    const [searchQuery, setSearchQuery] = useState('')
    const [medicos, setMedicos] = useState<any[]>([])
    const [searchLoading, setSearchLoading] = useState(false)
    const [especialidades, setEspecialidades] = useState<string[]>([])
    const [especialidadesLoading, setEspecialidadesLoading] = useState(true)
    useEffect(() => {
      let mounted = true
@ -435,178 +429,14 @@ export default function PacientePage() {
      return () => { mounted = false }
    }, [])
    // Carregar especialidades únicas dos médicos ao montar
    useEffect(() => {
      let mounted = true
      setEspecialidadesLoading(true)
      ;(async () => {
        try {
          console.log('[DashboardCards] Carregando especialidades...')
          const todos = await listarTodosMedicos().catch((err) => {
            console.error('[DashboardCards] Erro ao buscar médicos:', err)
            return []
          })
          console.log('[DashboardCards] Médicos carregados:', todos?.length || 0, todos)
          if (!mounted) return
          // Mapeamento de correções para especialidades com encoding errado
          const specialtyFixes: Record<string, string> = {
            'Cl\u00EDnica Geral': 'Clínica Geral',
            'Cl\u00E3nica Geral': 'Clínica Geral',
            'Cl?nica Geral': 'Clínica Geral',
            'Cl©nica Geral': 'Clínica Geral',
            'Cl\uFFFDnica Geral': 'Clínica Geral',
          };
          let specs: string[] = []
          if (Array.isArray(todos) && todos.length > 0) {
            // Extrai TODAS as especialidades únicas do campo specialty
            specs = Array.from(new Set(
              todos
                .map((m: any) => {
                  let spec = m.specialty || m.speciality || ''
                  // Aplica correções conhecidas
                  for (const [wrong, correct] of Object.entries(specialtyFixes)) {
                    spec = String(spec).replace(new RegExp(wrong, 'g'), correct)
                  }
                  // Normaliza caracteres UTF-8 e limpa
                  try {
                    const normalized = String(spec || '').normalize('NFC').trim()
                    return normalized
                  } catch (e) {
                    return String(spec || '').trim()
                  }
                })
                .filter((s: string) => s && s.length > 0)
            ))
          }
          console.log('[DashboardCards] Especialidades encontradas:', specs)
          // Ordenação alfabética usando localeCompare para suportar acentuação (português)
          setEspecialidades(specs.length > 0 ? specs.sort((a, b) => a.localeCompare(b, 'pt', { sensitivity: 'base' })) : [])
        } catch (e) {
          console.error('[DashboardCards] erro ao carregar especialidades', e)
          if (mounted) setEspecialidades([])
        } finally {
          if (mounted) setEspecialidadesLoading(false)
        }
      })()
      return () => { mounted = false }
    }, [])
    // Debounced search por médico
    useEffect(() => {
      let mounted = true
      const term = String(searchQuery || '').trim()
      const handle = setTimeout(async () => {
        if (!mounted) return
        if (!term || term.length < 2) {
          setMedicos([])
          return
        }
        try {
          setSearchLoading(true)
          const results = await buscarMedicos(term).catch(() => [])
          if (!mounted) return
          setMedicos(Array.isArray(results) ? results : [])
        } catch (e) {
          if (mounted) setMedicos([])
        } finally {
          if (mounted) setSearchLoading(false)
        }
      }, 300)
      return () => { mounted = false; clearTimeout(handle) }
    }, [searchQuery])
    const handleSearchMedico = (medico: any) => {
      const qs = new URLSearchParams()
      qs.set('tipo', 'teleconsulta')
      if (medico?.full_name) qs.set('medico', medico.full_name)
      if (medico?.specialty) qs.set('especialidade', medico.specialty || medico.especialidade || '')
      qs.set('origin', 'paciente')
      router.push(`/paciente/resultados?${qs.toString()}`)
      setSearchQuery('')
      setMedicos([])
    }
    const handleEspecialidadeClick = (especialidade: string) => {
      const qs = new URLSearchParams()
      qs.set('tipo', 'teleconsulta')
      qs.set('especialidade', especialidade)
      qs.set('origin', 'paciente')
      router.push(`/paciente/resultados?${qs.toString()}`)
    }
    return (
-      <div className="space-y-4 sm:space-y-6">
+      <div className="grid grid-cols-1 gap-3 sm:gap-4 md:gap-4 mb-6 md:grid-cols-2">
-        {/* Hero Section com Busca */}
+        <Card className="group rounded-2xl border border-border/60 bg-card/70 p-4 sm:p-5 md:p-5 backdrop-blur-sm shadow-sm transition hover:shadow-md">
        <section className="rounded-2xl sm:rounded-3xl bg-linear-to-br from-primary to-primary/90 p-4 sm:p-6 md:p-8 text-primary-foreground shadow-lg">
          <div className="max-w-4xl mx-auto space-y-4 sm:space-y-6">
            <div className="text-center space-y-2 sm:space-y-3">
              <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold">Encontre especialistas e clínicas</h2>
              <p className="text-sm sm:text-base md:text-lg opacity-90">Busque por médico, especialidade ou localização</p>
            </div>
            {/* Search Bar */}
            <div className="relative">
              <Input
                placeholder="Buscar médico, especialidade..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full px-4 sm:px-5 md:px-6 py-3 sm:py-3.5 md:py-4 rounded-xl bg-white text-foreground placeholder:text-muted-foreground text-sm sm:text-base border-0 shadow-md"
              />
              {searchQuery && medicos.length > 0 && (
                <div className="absolute top-full left-0 right-0 mt-2 bg-card rounded-xl border border-border shadow-lg z-50 max-h-64 overflow-y-auto">
                  {medicos.map((medico) => (
                    <button
                      key={medico.id}
                      onClick={() => handleSearchMedico(medico)}
                      className="w-full text-left px-4 py-3 sm:py-4 hover:bg-primary/10 border-b border-border/50 last:border-0 transition-colors text-foreground text-sm sm:text-base"
                    >
                      <div className="font-semibold">{medico.full_name || 'Médico'}</div>
                      <div className="text-xs sm:text-sm text-muted-foreground">{medico.specialty || medico.especialidade || ''}</div>
                    </button>
                  ))}
                </div>
              )}
            </div>
            {/* Especialidades */}
            <div className="space-y-3 sm:space-y-4">
              <p className="text-sm sm:text-base font-semibold opacity-90">Especialidades populares</p>
              {especialidadesLoading ? (
                <div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-6 gap-2">
                  {[1, 2, 3, 4, 5, 6].map((i) => (
                    <div key={i} className="h-12 w-full bg-white/20 rounded-full animate-pulse" />
                  ))}
                </div>
              ) : especialidades && especialidades.length > 0 ? (
                // Grid responsivo com botões arredondados e tamanho uniforme
                <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-2 sm:gap-3">
                  {especialidades.map((esp) => (
                    <button
                      key={esp}
                      onClick={() => handleEspecialidadeClick(esp)}
                      className="w-full min-h-[44px] sm:min-h-[48px] flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 text-white font-medium text-sm transition-colors border border-white/20 px-3 py-2 text-center break-words"
                    >
                      <span className="leading-tight">{esp}</span>
                    </button>
                  ))}
                </div>
              ) : (
                <p className="text-sm opacity-75">Nenhuma especialidade disponível</p>
              )}
            </div>
          </div>
        </section>
        {/* Cards com Informações */}
        <div className="grid grid-cols-1 gap-3 sm:gap-4 md:gap-4 md:grid-cols-2">
          <Card className="group rounded-2xl border border-border/60 bg-card p-4 sm:p-5 md:p-5 shadow-sm transition hover:shadow-md">
          <div className="flex h-32 sm:h-36 md:h-40 w-full flex-col items-center justify-center gap-2 sm:gap-3">
            <div className="flex h-10 w-10 sm:h-11 sm:w-11 md:h-12 md:w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
              <Calendar className="h-5 w-5 sm:h-5 sm:w-5 md:h-6 md:w-6" aria-hidden />
            </div>
            {/* rótulo e número com mesma fonte e mesmo tamanho (harmônico) */}
            <span className="text-base sm:text-lg md:text-lg font-semibold text-muted-foreground tracking-wide">
              {strings.proximaConsulta}
            </span>
@ -616,7 +446,7 @@ export default function PacientePage() {
          </div>
        </Card>
-          <Card className="group rounded-2xl border border-border/60 bg-card p-4 sm:p-5 md:p-5 shadow-sm transition hover:shadow-md">
+        <Card className="group rounded-2xl border border-border/60 bg-card/70 p-4 sm:p-5 md:p-5 backdrop-blur-sm shadow-sm transition hover:shadow-md">
          <div className="flex h-32 sm:h-36 md:h-40 w-full flex-col items-center justify-center gap-2 sm:gap-3">
            <div className="flex h-10 w-10 sm:h-11 sm:w-11 md:h-12 md:w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
              <FileText className="h-5 w-5 sm:h-5 sm:w-5 md:h-6 md:w-6" aria-hidden />
@ -630,7 +460,6 @@ export default function PacientePage() {
          </div>
        </Card>
  </div>
      </div>
    )
  }
@ -695,10 +524,10 @@ export default function PacientePage() {
    const [tipoConsulta, setTipoConsulta] = useState<'teleconsulta' | 'presencial'>('teleconsulta')
    const [especialidade, setEspecialidade] = useState('cardiologia')
    const [localizacao, setLocalizacao] = useState('')
-    const hoverPrimaryClass = "hover-primary-blue focus-visible:ring-2 focus-visible:ring-blue-500/60 active:scale-[0.97]"
+    const hoverPrimaryClass = "transition duration-200 hover:bg-[#2563eb] hover:text-white focus-visible:ring-2 focus-visible:ring-[#2563eb]/60 active:scale-[0.97]"
-    const activeToggleClass = "w-full transition duration-200 focus-visible:ring-2 focus-visible:ring-blue-500/60 active:scale-[0.97] bg-blue-500 text-white hover:bg-blue-500 hover:text-white"
+    const activeToggleClass = "w-full transition duration-200 focus-visible:ring-2 focus-visible:ring-[#2563eb]/60 active:scale-[0.97] bg-[#2563eb] text-white hover:bg-[#2563eb] hover:text-white"
-    const inactiveToggleClass = "w-full transition duration-200 bg-slate-50 text-blue-500 border border-blue-500/30 hover:bg-blue-50 hover:text-blue-500 dark:bg-white/5 dark:text-white dark:hover:bg-blue-500/20 dark:border-white/20"
+    const inactiveToggleClass = "w-full transition duration-200 bg-slate-50 text-[#2563eb] border border-[#2563eb]/30 hover:bg-slate-100 hover:text-[#2563eb] dark:bg-white/5 dark:text-white dark:hover:bg-white/10 dark:border-white/20"
-    const hoverPrimaryIconClass = "rounded-xl bg-white text-slate-900 border border-black/10 shadow-[0_2px_8px_rgba(0,0,0,0.03)] hover-primary-blue focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:bg-slate-800 dark:text-slate-100 dark:border-white/10 dark:shadow-none"
+    const hoverPrimaryIconClass = "rounded-xl bg-white text-[#1e293b] border border-black/10 shadow-[0_2px_8px_rgba(0,0,0,0.03)] transition duration-200 hover:bg-[#2563eb] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#2563eb] dark:bg-slate-800 dark:text-slate-100 dark:border-white/10 dark:shadow-none dark:hover:bg-[#2563eb] dark:hover:text-white"
    const today = new Date(); today.setHours(0, 0, 0, 0);
    const selectedDate = new Date(currentDate); selectedDate.setHours(0, 0, 0, 0);
    const isSelectedDateToday = selectedDate.getTime() === today.getTime()
@ -897,6 +726,26 @@ export default function PacientePage() {
    return (
      <div className="space-y-6">
        {/* Hero Section */}
        <section className="bg-linear-to-br from-card to-card/95 shadow-lg rounded-2xl border border-primary/10 p-4 sm:p-6 md:p-8">
          <div className="max-w-3xl mx-auto space-y-4 sm:space-y-6 md:space-y-8">
            <header className="text-center space-y-2 sm:space-y-3 md:space-y-4">
              <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-foreground">Agende sua próxima consulta</h2>
              <p className="text-sm sm:text-base md:text-lg text-muted-foreground leading-relaxed">Escolha o formato ideal, selecione a especialidade e encontre o profissional perfeito para você.</p>
            </header>
            <div className="space-y-4 sm:space-y-6 rounded-2xl border border-primary/15 bg-linear-to-r from-primary/5 to-primary/10 p-4 sm:p-6 md:p-8 shadow-sm">
              <div className="flex justify-center">
                <Button asChild className="w-full sm:w-auto px-6 sm:px-8 md:px-10 py-2 sm:py-2.5 md:py-3 bg-primary text-white hover:bg-primary/90! hover:text-white! transition-all duration-200 font-semibold text-sm sm:text-base rounded-lg shadow-md hover:shadow-lg active:scale-95">
                  <Link href={buildResultadosHref()} prefetch={false}>
                    Pesquisar Médicos
                  </Link>
                </Button>
              </div>
            </div>
          </div>
        </section>
        {/* Consultas Agendadas Section */}
        <section className="bg-card shadow-md rounded-lg border border-border p-4 sm:p-5 md:p-6">
          <div className="space-y-4 sm:space-y-5 md:space-y-6">
@ -1698,6 +1547,7 @@ export default function PacientePage() {
                </div>
                <div className="flex gap-2 w-full md:w-auto flex-col sm:flex-row">
                  <Button variant="outline" className="hover:bg-primary! hover:text-white! transition-colors text-xs sm:text-sm w-full md:w-auto" onClick={async () => { router.push(`/laudos/${r.id}`); }}>{strings.visualizarLaudo}</Button>
                  <Button variant="secondary" className="hover:bg-primary! hover:text-white! transition-colors text-xs sm:text-sm w-full md:w-auto" onClick={async () => { try { await navigator.clipboard.writeText(JSON.stringify(r)); setToast({ type: 'success', msg: 'Laudo copiado.' }) } catch { setToast({ type: 'error', msg: 'Falha ao copiar.' }) } }}>{strings.compartilhar}</Button>
                </div>
              </div>
                  ))}
@ -1762,7 +1612,7 @@ export default function PacientePage() {
        </div>
        {/* Grid de 3 colunas (2 + 1) */}
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-5 md:gap-6">
+        <div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-5 md:gap-6">
          {/* Coluna Esquerda - Informações Pessoais */}
          <div className="lg:col-span-2 space-y-4 sm:space-y-5 md:space-y-6">
            {/* Informações Pessoais */}
@ -1888,6 +1738,16 @@ export default function PacientePage() {
            <div className="border border-border rounded-lg p-3 sm:p-4 md:p-6">
              <h3 className="text-base sm:text-lg md:text-lg font-semibold mb-3 sm:mb-4">Foto do Perfil</h3>
              {isEditingProfile ? (
                <div className="space-y-3 sm:space-y-4">
                  <UploadAvatar
                    userId={profileData.id}
                    currentAvatarUrl={profileData.foto_url || "/avatars/01.png"}
                    onAvatarChange={(newUrl) => handleProfileChange('foto_url', newUrl)}
                    userName={profileData.nome}
                  />
                </div>
              ) : (
                <div className="flex flex-col items-center gap-3 sm:gap-4">
                  <Avatar className="h-20 w-20 sm:h-24 sm:w-24 md:h-28 md:w-28">
                    <AvatarImage src={profileData.foto_url} alt={profileData.nome || 'Avatar'} />
@ -1902,6 +1762,7 @@ export default function PacientePage() {
                    </p>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
@ -1914,35 +1775,23 @@ export default function PacientePage() {
    <ProtectedRoute requiredUserType={["paciente"]}>
      <div className="container mx-auto px-2 sm:px-4 py-6 sm:py-8">
        {/* Header com informações do paciente */}
-        <header className="sticky top-0 z-40 bg-card shadow-md rounded-lg border border-border p-2 sm:p-3 md:p-4 mb-4 sm:mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+        <header className="sticky top-0 z-40 bg-card shadow-md rounded-lg border border-border p-3 sm:p-4 md:p-4 mb-4 sm:mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4">
-          <div className="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
+          <div className="flex items-center gap-2 sm:gap-4">
-            {/* Logo MEDIConnect */}
+            <Avatar className="h-10 w-10 sm:h-12 sm:w-12 md:h-12 md:w-12">
            <div className="flex items-center gap-2 mr-2 sm:mr-3 shrink-0">
              <div className="w-8 h-8 sm:w-9 sm:h-9 bg-primary rounded-lg flex items-center justify-center">
                <Stethoscope className="w-4 h-4 sm:w-5 sm:h-5 text-primary-foreground" />
              </div>
              <span className="text-base sm:text-sm font-semibold text-foreground hidden sm:inline">
                MEDIConnect
              </span>
            </div>
            <div className="h-6 w-px bg-border hidden sm:block"></div>
            <Avatar className="h-10 w-10 sm:h-10 sm:w-10 shrink-0">
              <AvatarImage src={profileData.foto_url} alt={profileData.nome || 'Avatar'} />
-              <AvatarFallback className="bg-primary text-white font-bold text-xs sm:text-sm">{profileData.nome?.charAt(0) || 'P'}</AvatarFallback>
+              <AvatarFallback className="bg-primary text-white font-bold text-sm sm:text-base">{profileData.nome?.charAt(0) || 'P'}</AvatarFallback>
            </Avatar>
-            <div className="flex flex-col min-w-0 flex-1">
+            <div className="flex flex-col min-w-0">
-              <span className="text-xs text-muted-foreground truncate">Conta do paciente</span>
+              <span className="text-xs sm:text-sm md:text-sm text-muted-foreground">Conta do paciente</span>
-              <span className="font-bold text-xs sm:text-sm leading-tight truncate">{profileData.nome || 'Paciente'}</span>
+              <span className="font-bold text-sm sm:text-base md:text-lg leading-none">{profileData.nome || 'Paciente'}</span>
-              <span className="text-xs text-muted-foreground truncate">{profileData.email || 'Email não disponível'}</span>
+              <span className="text-xs sm:text-sm md:text-sm text-muted-foreground truncate">{profileData.email || 'Email não disponível'}</span>
            </div>
          </div>
-          <div className="flex items-center gap-2 w-full sm:w-auto shrink-0">
+          <div className="flex items-center gap-2 sm:gap-3 w-full sm:w-auto">
            <SimpleThemeToggle />
-            <Button asChild variant="outline" className="hover:bg-blue-500 hover:text-white transition-colors flex-1 sm:flex-none text-xs sm:text-sm py-1.5 sm:py-2 h-8 sm:h-9 px-2 sm:px-3">
+            <Button asChild variant="outline" className="hover:bg-primary! hover:text-white! hover:border-primary! transition-colors flex-1 sm:flex-none text-xs sm:text-sm">
              <Link href="/">
-                <Home className="h-3 w-3 sm:h-4 sm:w-4" /> <span className="hidden sm:inline ml-1">Início</span>
+                <Home className="h-3 w-3 sm:h-4 sm:w-4 mr-1" /> Início
              </Link>
            </Button>
            <Button 
@ -1950,9 +1799,9 @@ export default function PacientePage() {
              variant="outline" 
              aria-label={strings.sair} 
              disabled={loading} 
-              className="text-destructive border-destructive hover:bg-destructive/20 hover:text-destructive transition-colors text-xs sm:text-sm py-1.5 sm:py-2 h-8 sm:h-9 px-2 sm:px-3"
+              className="text-destructive border-destructive hover:bg-destructive! hover:text-white! hover:border-destructive! transition-colors"
            >
-              <LogOut className="h-3 w-3 sm:h-4 sm:w-4" /> <span className="hidden sm:inline ml-1">{strings.sair}</span>
+              <LogOut className="h-4 w-4 mr-1" /> {strings.sair}
            </Button>
          </div>
        </header>
@ -1960,8 +1809,8 @@ export default function PacientePage() {
        {/* Layout com sidebar e conteúdo */}
        <div className="grid grid-cols-1 md:grid-cols-[200px_1fr] lg:grid-cols-[220px_1fr] gap-4 sm:gap-5 md:gap-6">
          {/* Sidebar vertical - sticky */}
-          <aside className="sticky top-24 h-fit md:top-24 z-40">
+          <aside className="sticky top-24 h-fit md:top-24">
-            <nav aria-label="Navegação do dashboard" className="relative isolate bg-card shadow-lg rounded-lg border border-border p-1.5 sm:p-2 md:p-3 z-50">
+            <nav aria-label="Navegação do dashboard" className="bg-card shadow-md rounded-lg border border-border p-1.5 sm:p-2 md:p-3 z-30">
              <div className="grid grid-cols-2 md:grid-cols-1 gap-1 sm:gap-1.5">
                <Button
                  variant={tab==='dashboard'?'default':'ghost'}
--- a/susconecta/app/paciente/resultados/ResultadosClient.tsx
+++ b/susconecta/app/paciente/resultados/ResultadosClient.tsx
@ -9,16 +9,21 @@ import { Card } from '@/components/ui/card'
 import { Toggle } from '@/components/ui/toggle'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Badge } from '@/components/ui/badge'
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Avatar, AvatarFallback } from '@/components/ui/avatar'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import {
  Building2,
  Filter,
  Globe,
  HeartPulse,
  Languages,
  MapPin,
  ShieldCheck,
  Star,
  Stethoscope,
  ChevronRight,
  UserRound
 } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import {
@ -31,7 +36,6 @@ import {
  buscarPacientes,
  listarDisponibilidades,
  listarExcecoes,
  getAvatarPublicUrl,
  type Medico,
 } from '@/lib/api'
@ -54,11 +58,10 @@ export default function ResultadosClient() {
  // Filtros/controles da UI - initialize with defaults to avoid hydration mismatch
  const [tipoConsulta, setTipoConsulta] = useState<TipoConsulta>('teleconsulta')
  const [especialidadeHero, setEspecialidadeHero] = useState<string>('Psicólogo')
  const [convenio, setConvenio] = useState<string>('Todos')
  const [bairro, setBairro] = useState<string>('Todos')
  // Busca por nome do médico
  const [searchQuery, setSearchQuery] = useState<string>('')
  // Filtro de médico específico vindo da URL (quando clicado no dashboard)
  const [medicoFiltro, setMedicoFiltro] = useState<string | null>(null)
  // Track if URL params have been synced to avoid race condition
  const [paramsSync, setParamsSync] = useState(false)
@ -68,9 +71,6 @@ export default function ResultadosClient() {
  const [medicos, setMedicos] = useState<Medico[]>([])
  const [loadingMedicos, setLoadingMedicos] = useState(false)
  // Avatares dos médicos
  const [medicosAvatars, setMedicosAvatars] = useState<Record<string, string>>({})
  // agenda por médico e loading por médico
  const [agendaByDoctor, setAgendaByDoctor] = useState<Record<string, DayAgenda[]>>({})
  const [agendaLoading, setAgendaLoading] = useState<Record<string, boolean>>({})
@ -117,10 +117,6 @@ export default function ResultadosClient() {
    const especialidadeParam = params.get('especialidade')
    if (especialidadeParam) setEspecialidadeHero(especialidadeParam)
    // Ler filtro de médico específico da URL
    const medicoParam = params.get('medico')
    if (medicoParam) setMedicoFiltro(medicoParam)
    // Mark params as synced
    setParamsSync(true)
  }, [params])
@ -167,10 +163,9 @@ export default function ResultadosClient() {
  }, [])
  // 4) Re-fetch doctors when especialidade changes (after initial sync)
  // SKIP this if medicoFiltro está definido (médico específico selecionado)
  useEffect(() => {
-    // Skip if this is the initial render or if user is searching by name or if a specific doctor is selected
+    // Skip if this is the initial render or if user is searching by name
-    if (!paramsSync || medicoFiltro || (searchQuery && String(searchQuery).trim().length > 1)) return
+    if (!paramsSync || (searchQuery && String(searchQuery).trim().length > 1)) return
    let mounted = true
    ;(async () => {
@ -196,13 +191,10 @@ export default function ResultadosClient() {
      }
    })()
    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [especialidadeHero, paramsSync, medicoFiltro])
+  }, [especialidadeHero, paramsSync])
  // 5) Debounced search by doctor name
  // SKIP this if medicoFiltro está definido
  useEffect(() => {
    if (medicoFiltro) return // Skip se médico específico foi selecionado
    let mounted = true
    const term = String(searchQuery || '').trim()
    const handle = setTimeout(async () => {
@ -224,51 +216,7 @@ export default function ResultadosClient() {
      }
    }, 350)
    return () => { mounted = false; clearTimeout(handle) }
-  }, [searchQuery, medicoFiltro])
+  }, [searchQuery])
  // 5b) Quando um médico específico é selecionado, fazer uma busca por ele (PRIORIDADE MÁXIMA)
  useEffect(() => {
    if (!medicoFiltro || !paramsSync) return
    let mounted = true
    ;(async () => {
      try {
        setLoadingMedicos(true)
        // Resetar agenda e expandidas quando mudar o médico
        setAgendaByDoctor({})
        setAgendasExpandida({})
        console.log('[ResultadosClient] Buscando médico específico:', medicoFiltro)
        // Tentar buscar pelo nome do médico
        const list = await buscarMedicos(medicoFiltro).catch(() => [])
        if (!mounted) return
        console.log('[ResultadosClient] Médicos encontrados:', list?.length || 0)
        setMedicos(Array.isArray(list) ? list : [])
      } catch (e: any) {
        console.warn('[ResultadosClient] Erro ao buscar médico:', e)
        showToast('error', e?.message || 'Falha ao buscar profissional')
      } finally {
        if (mounted) setLoadingMedicos(false)
      }
    })()
    return () => { mounted = false }
  }, [medicoFiltro, paramsSync])
  // Carregar avatares dos médicos quando a lista mudar
  useEffect(() => {
    if (!medicos || medicos.length === 0) return
    const avatars: Record<string, string> = {}
    // Gerar URLs dos avatares sem fazer verificação (deixar o browser carregar)
    for (const medico of medicos) {
      if (!medico.id) continue
      // Usar jpg como padrão (mais comum)
      avatars[medico.id] = getAvatarPublicUrl(medico.id, 'jpg')
    }
    setMedicosAvatars(avatars)
  }, [medicos])
  // 3) Carregar horários disponíveis para um médico (próximos 7 dias) e agrupar por dia
  async function loadAgenda(doctorId: string): Promise<{ iso: string; label: string } | null> {
@ -668,42 +616,14 @@ export default function ResultadosClient() {
    }
  }
-  // Extrair bairros únicos dos médicos
+  // Filtro visual (convenio/bairro são cosméticos; quando sem dado, mantemos tudo)
  const bairrosDisponiveis = useMemo(() => {
    const neighborhoods = new Set<string>();
    (medicos || []).forEach((m: any) => {
      if (m.neighborhood) {
        neighborhoods.add(String(m.neighborhood))
      }
    })
    return Array.from(neighborhoods).sort()
  }, [medicos])
  // Filtro visual (bairro é o único filtro; quando sem dado, mantemos tudo)
  const profissionais = useMemo(() => {
-    let filtered = (medicos || []).filter((m: any) => {
+    return (medicos || []).filter((m: any) => {
-      // Se um bairro específico foi selecionado, filtrar rigorosamente
+      if (convenio !== 'Todos' && m.convenios && !m.convenios.includes(convenio)) return false
-      if (bairro !== 'Todos') {
+      if (bairro !== 'Todos' && m.neighborhood && String(m.neighborhood).toLowerCase() !== String(bairro).toLowerCase()) return false
        // Se o médico não tem neighborhood, não incluir
        if (!m.neighborhood) return false
        // Se tem neighborhood, deve corresponder ao filtro
        if (String(m.neighborhood).toLowerCase() !== String(bairro).toLowerCase()) return false
      }
      return true
    })
-    
+  }, [medicos, convenio, bairro])
    // Se um médico específico foi selecionado no dashboard, filtrar apenas por ele
    if (medicoFiltro) {
      filtered = filtered.filter((m: any) => {
        // Comparar nome completo com flexibilidade
        const nomeMedico = String(m.full_name || m.name || '').toLowerCase()
        const filtro = String(medicoFiltro).toLowerCase()
        return nomeMedico.includes(filtro) || filtro.includes(nomeMedico.split(' ')[0]) // comparar por primeiro nome também
      })
    }
    return filtered
  }, [medicos, bairro, medicoFiltro])
  // Paginação local para a lista de médicos
  const [currentPage, setCurrentPage] = useState(1)
@ -713,21 +633,12 @@ export default function ResultadosClient() {
  useEffect(() => {
    setCurrentPage(1)
  }, [profissionais, itemsPerPage])
  const totalPages = Math.max(1, Math.ceil((profissionais || []).length / itemsPerPage))
  const paginatedProfissionais = (profissionais || []).slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)
  const startItem = (profissionais || []).length ? (currentPage - 1) * itemsPerPage + 1 : 0
  const endItem = Math.min(currentPage * itemsPerPage, (profissionais || []).length)
  // Memoized map para calcular próximos 3 horários para cada médico
  const proximosHorariosPorMedico = useMemo(() => {
    const result: Record<string, Array<{ iso: string; label: string }>> = {}
    for (const id in agendaByDoctor) {
      const slots = agendaByDoctor[id]?.flatMap(d => d.horarios) || []
      result[id] = slots.slice(0, 3)
    }
    return result
  }, [agendaByDoctor])
  // Render
  return (
    <div className="min-h-screen bg-background">
@ -785,49 +696,36 @@ export default function ResultadosClient() {
                <Button variant="outline" onClick={() => setBookingSuccessOpen(false)}>Fechar</Button>
              </div>
            </DialogContent>
-          </Dialog>        {/* Hero section com barra de busca */}
+          </Dialog>
        <section className="rounded-2xl sm:rounded-3xl bg-gradient-to-r from-primary to-primary/80 p-6 sm:p-8 text-primary-foreground shadow-lg">
          <div className="space-y-4">
            <div>
              <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold">Encontre o profissional ideal</h1>
              <p className="text-sm sm:text-base text-primary-foreground/90 mt-1">Busque por nome, especialidade ou disponibilidade</p>
            </div>
-            {/* Barra de busca principal */}
+        {/* Hero de filtros (mantido) */}
-            <div className="flex flex-col sm:flex-row gap-2">
+        <section className="rounded-2xl sm:rounded-3xl bg-primary p-4 sm:p-6 text-primary-foreground shadow-lg">
-              <Input
+          <div className="flex flex-wrap items-center justify-between gap-4">
-                placeholder={especialidadeHero && especialidadeHero !== 'Veja mais' ? especialidadeHero : 'Buscar médico por nome ou especialidade'}
+            <div>
-                value={searchQuery}
+              <h1 className="text-xl font-semibold sm:text-2xl md:text-3xl">Resultados da procura</h1>
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchQuery(e.target.value)}
+              <p className="text-sm text-primary-foreground/80">Qual especialização você deseja?</p>
                className="flex-1 h-11 rounded-full bg-primary-foreground/15 border border-primary-foreground/30 text-primary-foreground placeholder:text-primary-foreground/60 focus:bg-primary-foreground/20"
              />
              {searchQuery && (
                <Button
                  variant="ghost"
                  className="h-11 px-6 rounded-full text-primary-foreground hover:bg-primary-foreground/20"
                  onClick={async () => {
                    setSearchQuery('')
                    setCurrentPage(1)
                    try {
                      setLoadingMedicos(true)
                      setMedicos([])
                      setAgendaByDoctor({})
                      setAgendasExpandida({})
                      // Manter a especialidade da URL se existir
                      const termo = (especialidadeHero && especialidadeHero !== 'Veja mais') ? especialidadeHero : (params?.get('q') || 'medico')
                      const list = await buscarMedicos(termo).catch(() => [])
                      setMedicos(Array.isArray(list) ? list : [])
                    } catch (e: any) {
                      showToast('error', e?.message || 'Falha ao buscar profissionais')
                    } finally {
                      setLoadingMedicos(false)
                    }
                  }}
                >
                  Limpar
                </Button>
              )}
            </div>
            <Button
              variant="outline"
              className="rounded-full border-primary-foreground/30 bg-primary-foreground/10 text-primary-foreground hover:bg-primary-foreground! hover:text-primary! transition-colors"
            >
              Ajustar filtros
            </Button>
          </div>
          <div className="mt-4 sm:mt-6 flex flex-wrap gap-2 sm:gap-3">
            {especialidadesHero.map(item => (
              <button
                key={item}
                type="button"
                onClick={() => setEspecialidadeHero(item)}
                className={cn(
                  'rounded-full px-4 sm:px-5 py-2 text-sm font-medium transition focus-visible:ring-2 focus-visible:ring-primary-foreground/80',
                  especialidadeHero === item ? 'bg-primary-foreground text-primary' : 'bg-primary-foreground/10'
                )}
              >
                {item}
              </button>
            ))}
          </div>
        </section>
@ -859,6 +757,68 @@ export default function ResultadosClient() {
            {/* divider visual */}
            <div className="sm:col-span-12 h-px bg-border/60 my-1" />
            {/* Convênio */}
            <div className="sm:col-span-6 lg:col-span-4">
              <Select value={convenio} onValueChange={setConvenio}>
                <SelectTrigger className="h-10 w-full rounded-full border border-primary/30 bg-primary/5 text-primary hover:border-primary focus:ring-2 focus:ring-primary">
                  <SelectValue placeholder="Convênio" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="Todos">Todos os convênios</SelectItem>
                  <SelectItem value="Amil">Amil</SelectItem>
                  <SelectItem value="Unimed">Unimed</SelectItem>
                  <SelectItem value="SulAmérica">SulAmérica</SelectItem>
                  <SelectItem value="Bradesco Saúde">Bradesco Saúde</SelectItem>
                  <SelectItem value="Particular">Particular</SelectItem>
                </SelectContent>
              </Select>
            </div>
            {/* Busca por nome + Mais filtros/Limpar */}
            <div className="sm:col-span-6 lg:col-span-4">
              <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
                <Input
                  placeholder="Buscar médico por nome"
                  value={searchQuery}
                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchQuery(e.target.value)}
                  className="w-full sm:min-w-[220px] rounded-full"
                />
                {searchQuery ? (
                  <Button
                    variant="ghost"
                    className="h-10 w-full sm:w-auto rounded-full"
                    onClick={async () => {
                      setSearchQuery('')
                      setCurrentPage(1)
                      try {
                        setLoadingMedicos(true)
                        setMedicos([])
                        setAgendaByDoctor({})
                        setAgendasExpandida({})
                        const termo = (especialidadeHero && especialidadeHero !== 'Veja mais') ? especialidadeHero : (params?.get('q') || 'medico')
                        const list = await buscarMedicos(termo).catch(() => [])
                        setMedicos(Array.isArray(list) ? list : [])
                      } catch (e: any) {
                        showToast('error', e?.message || 'Falha ao buscar profissionais')
                      } finally {
                        setLoadingMedicos(false)
                      }
                    }}
                  >
                    Limpar
                  </Button>
                ) : (
                  <Button
                    variant="outline"
                    className="h-10 w-full sm:w-auto rounded-full border border-primary/30 bg-primary/5 text-primary hover:bg-primary hover:text-primary-foreground"
                  >
                    <Filter className="mr-2 h-4 w-4" />
                    Mais filtros
                  </Button>
                )}
              </div>
            </div>
            {/* Bairro */}
            <div className="sm:col-span-6 lg:col-span-4">
              <Select value={bairro} onValueChange={setBairro}>
@ -867,11 +827,9 @@ export default function ResultadosClient() {
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="Todos">Todos os bairros</SelectItem>
-                  {bairrosDisponiveis.map((b: string) => (
+                  <SelectItem value="Centro">Centro</SelectItem>
-                    <SelectItem key={b} value={b}>
+                  <SelectItem value="Jardins">Jardins</SelectItem>
-                      {b}
+                  <SelectItem value="Farolândia">Farolândia</SelectItem>
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
@ -896,109 +854,169 @@ export default function ResultadosClient() {
            <Card className="flex items-center justify-center border border-dashed border-border bg-card/60 p-12 text-muted-foreground">
              Buscando profissionais...
            </Card>
-          )}          {!loadingMedicos && paginatedProfissionais.map((medico) => {
+          )}
          {!loadingMedicos && paginatedProfissionais.map((medico) => {
            const id = String(medico.id)
            const agenda = agendaByDoctor[id]
            const isLoadingAgenda = !!agendaLoading[id]
-            const atendeLocal = true
+            const atendeLocal = true // dados ausentes → manter visual
            const atendeTele = true
            const nome = medico.full_name || 'Profissional'
            const esp = (medico as any).specialty || medico.especialidade || '—'
-            const crm = [medico.crm, (medico as any).crm_uf].filter(Boolean).join(' ')
+            const crm = [medico.crm, (medico as any).crm_uf].filter(Boolean).join(' / ')
            const convenios = '—'
            const endereco = [medico.street, medico.number].filter(Boolean).join(', ') || medico.street || '—'
-            const cidade = medico.city || '—'
+            const cidade = [medico.city, medico.state].filter(Boolean).join(' • ')
-            const precoTipoConsulta = tipoConsulta === 'local' ? 'R$ —' : 'R$ —'
+            const precoLocal = '—'
-            
+            const precoTeleconsulta = '—'
            // Usar os próxios 3 horários já memoizados
            const proximos3Horarios = proximosHorariosPorMedico[id] || []
            return (
              <Card
                key={id}
                className="flex flex-col gap-4 border border-border bg-card/80 p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-lg"
              >
-                {/* Header com Avatar, Nome, Especialidade e Botão Ver Perfil */}
+                <div className="flex flex-wrap items-start gap-4">
-                <div className="flex gap-4 items-start">
+                  <Avatar className="h-14 w-14 border border-primary/20 bg-primary/5">
-                  <Avatar className="h-20 w-20 border-2 border-primary/20 bg-primary/5 flex-shrink-0">
+                    <AvatarFallback className="bg-primary/10 text-primary">
-                    {medicosAvatars[id] && <AvatarImage src={medicosAvatars[id]} alt={nome} />}
+                      <UserRound className="h-6 w-6" />
                    <AvatarFallback className="bg-primary/10 text-primary text-lg font-semibold">
                      {nome.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase()}
                    </AvatarFallback>
                  </Avatar>
-                  
+                  <div className="flex flex-1 flex-col gap-2">
-                  <div className="flex-1 flex flex-col gap-2">
+                    <div className="flex flex-wrap items-center gap-2">
                    <div className="flex items-start justify-between">
                      <div>
                      <h2 className="text-lg font-semibold text-foreground">{nome}</h2>
-                        <p className="text-sm text-primary font-medium">{esp}</p>
+                      <Badge className="rounded-full bg-primary/10 text-primary">{esp}</Badge>
                    </div>
                    <div className="flex flex-wrap items-center gap-3 text-sm text-muted-foreground">
                      <span className="inline-flex items-center gap-1 rounded-full bg-primary/10 px-3 py-1 text-primary">
                        <Star className="h-4 w-4 fill-primary text-primary" />
                        {/* sem avaliação → travar layout */}
                        {'4.9'} • {'23'} avaliações
                      </span>
                      <span>{crm || '—'}</span>
                      <span>{convenios}</span>
                    </div>
                  </div>
                  <Button
                    variant="ghost"
-                        size="sm"
+                    className="ml-0 sm:ml-auto w-full sm:w-auto h-fit rounded-full text-primary hover:bg-primary! hover:text-white! transition-colors"
                        className="text-primary hover:bg-primary/10"
                    onClick={() => {
                      setMedicoSelecionado(medico)
                      setAbaDetalhe('experiencia')
                      // carregar agenda para o diálogo
                      if (!agendaByDoctor[id]) loadAgenda(id)
                    }}
                  >
-                        Mais
+                    Ver perfil completo
                  </Button>
                </div>
-                    {/* Rating e Info */}
+                {tipoConsulta === 'local' && atendeLocal && (
-                    <div className="flex items-center gap-2">
+                  <div className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-border bg-muted/40 p-4 text-sm text-muted-foreground">
-                      <div className="flex items-center gap-1">
+                    <span className="inline-flex items-center gap-2 text-foreground">
                        <Star className="h-4 w-4 fill-primary text-primary" />
                        <span className="text-sm font-medium text-primary">4.9</span>
                        <span className="text-xs text-muted-foreground">• 23 avaliações</span>
                      </div>
                    </div>
                    {/* CRM */}
                    <p className="text-xs text-muted-foreground">CRM: {crm || '—'}</p>
                  </div>
                </div>
                {/* Endereço */}
                {tipoConsulta === 'local' && (
                  <div className="flex items-start gap-2 px-3 py-2 rounded-lg bg-muted/30 border border-border/50">
                    <MapPin className="h-4 w-4 text-primary flex-shrink-0 mt-0.5" />
                    <div className="flex-1 text-sm">
                      <p className="font-medium text-foreground">{endereco}</p>
                      <p className="text-xs text-muted-foreground">{cidade}</p>
                    </div>
                  </div>
                )}
                {/* Tipo de Consulta */}
                <div className="flex items-center gap-2 px-3 py-2 rounded-lg border border-primary/20 bg-primary/5">
                  {tipoConsulta === 'teleconsulta' ? (
                    <>
                      <Globe className="h-4 w-4 text-primary" />
                      <span className="text-sm font-medium text-primary">Teleconsulta</span>
                    </>
                  ) : (
                    <>
                      <MapPin className="h-4 w-4 text-primary" />
-                      <span className="text-sm font-medium text-primary">Consulta presencial</span>
+                      {endereco}
-                    </>
+                    </span>
                    <div className="flex flex-col text-right">
                      <span className="text-xs text-muted-foreground">{cidade || '—'}</span>
                      <span className="text-sm font-semibold text-primary">{precoLocal}</span>
                    </div>
                  </div>
                )}
-                  <span className="ml-auto text-sm font-semibold text-primary">{precoTipoConsulta}</span>
+
                {tipoConsulta === 'teleconsulta' && atendeTele && (
                  <div className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-primary/30 bg-primary/5 p-4 text-primary">
                    <span className="inline-flex items-center gap-2 font-medium">
                      <Globe className="h-4 w-4" />
                      Teleconsulta
                    </span>
                    <span className="text-sm font-semibold">{precoTeleconsulta}</span>
                  </div>
                )}
                <div className="flex flex-wrap gap-2 text-xs text-muted-foreground">
                  <span className="inline-flex items-center gap-1 rounded-full bg-muted px-3 py-1">
                    <Languages className="h-3.5 w-3.5 text-primary" />
                    Idiomas: Português, Inglês
                  </span>
                  <span className="inline-flex items-center gap-1 rounded-full bg-muted px-3 py-1">
                    <HeartPulse className="h-3.5 w-3.5 text-primary" />
                    Acolhimento em cada consulta
                  </span>
                  <span className="inline-flex items-center gap-1 rounded-full bg-muted px-3 py-1">
                    <ShieldCheck className="h-3.5 w-3.5 text-primary" />
                    Pagamento seguro
                  </span>
                  <span className="inline-flex items-center gap-1 rounded-full bg-muted px-3 py-1">
                    <Stethoscope className="h-3.5 w-3.5 text-primary" />
                    Especialista recomendado
                  </span>
                </div>
-                {/* Ações */}
+                {/* Quick action: nearest available slot */}
-                <div className="flex gap-2 pt-2">
+                {nearestSlotByDoctor[id] && (
                  <div className="mb-2 flex items-center gap-3">
                    <span className="text-sm text-muted-foreground">Próximo horário:</span>
                    <Button className="h-9 rounded-full bg-primary/10 text-primary" onClick={() => openConfirmDialog(id, nearestSlotByDoctor[id]!.iso)}>
                      {nearestSlotByDoctor[id]!.label}
                    </Button>
                  </div>
                )}
                <div className="flex flex-wrap gap-3 pt-2">
                  <Button
-                    className="w-full h-10 rounded-full bg-primary text-primary-foreground hover:bg-primary/90"
+                    className="h-11 w-full sm:w-auto rounded-full bg-primary text-primary-foreground hover:bg-primary/90"
                    onClick={async () => {
                      // If we don't have the agenda loaded, load it and try to open the nearest slot.
                      if (!agendaByDoctor[id]) {
                        const nearest = await loadAgenda(id)
                        if (nearest) {
                          openConfirmDialog(id, nearest.iso)
                          return
                        }
                        // fallback: open the "more times" modal to let the user pick a date/time
                        setMoreTimesForDoctor(id)
                        void fetchSlotsForDate(id, moreTimesDate)
                        return
                      }
                      // If agenda already loaded, try nearest known slot
                      const nearest = nearestSlotByDoctor[id]
                      if (nearest) {
                        openConfirmDialog(id, nearest.iso)
                      } else {
                        setMoreTimesForDoctor(id)
                        void fetchSlotsForDate(id, moreTimesDate)
                      }
                    }}
                  >
-                    Agendar
+                    Agendar consulta
                  </Button>
                  <Button variant="outline" className="h-11 w-full sm:w-auto rounded-full border-primary/40 bg-primary/10 text-primary hover:bg-primary! hover:text-white! transition-colors">
                    Enviar mensagem
                  </Button>
                  <Button
                    variant="ghost"
                    className="h-11 w-full sm:w-auto rounded-full text-primary hover:bg-primary! hover:text-white! transition-colors"
                    onClick={() => {
                      const willOpen = !agendasExpandida[id]
                      setAgendasExpandida(prev => ({ ...prev, [id]: !prev[id] }))
                      if (!agendaByDoctor[id]) loadAgenda(id)
                      // open the "more times" modal when expanding
                      if (willOpen) {
                        setMoreTimesForDoctor(id)
                        // prefetch for the default date
                        void fetchSlotsForDate(id, moreTimesDate)
                      } else {
                        setMoreTimesForDoctor(null)
                      }
                    }}
                  >
                    {agendasExpandida[id] ? 'Ocultar horários' : 'Mostrar mais horários'}
                  </Button>
                </div>
                {/* Horários compactos removidos conforme solicitação do design (colunas HOJE/AMANHÃ/etc.). */}
              </Card>
            )
          })}
@ -1022,19 +1040,17 @@ export default function ResultadosClient() {
                    <SelectItem value="5">5</SelectItem>
                    <SelectItem value="10">10</SelectItem>
                    <SelectItem value="20">20</SelectItem>
                    <SelectItem value="50">50</SelectItem>
                    <SelectItem value="100">100</SelectItem>
                  </SelectContent>
                </Select>
                <span>Mostrando {startItem} a {endItem} de {profissionais.length}</span>
              </div>
              <div className="flex items-center gap-2 w-full sm:w-auto">
-                <Button variant="outline" size="sm" onClick={() => setCurrentPage(1)} disabled={currentPage === 1} className="hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white">Primeira</Button>
+                <Button variant="outline" size="sm" onClick={() => setCurrentPage(1)} disabled={currentPage === 1} className="hover:bg-primary! hover:text-white!">Primeira</Button>
-                <Button variant="outline" size="sm" onClick={() => setCurrentPage(p => Math.max(1, p - 1))} disabled={currentPage === 1} className="hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white">Anterior</Button>
+                <Button variant="outline" size="sm" onClick={() => setCurrentPage(p => Math.max(1, p - 1))} disabled={currentPage === 1} className="hover:bg-primary! hover:text-white!">Anterior</Button>
                <span className="text-sm text-muted-foreground">Página {currentPage} de {totalPages}</span>
-                <Button variant="outline" size="sm" onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))} disabled={currentPage === totalPages} className="hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white">Próxima</Button>
+                <Button variant="outline" size="sm" onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))} disabled={currentPage === totalPages} className="hover:bg-primary! hover:text-white!">Próxima</Button>
-                <Button variant="outline" size="sm" onClick={() => setCurrentPage(totalPages)} disabled={currentPage === totalPages} className="hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white">Última</Button>
+                <Button variant="outline" size="sm" onClick={() => setCurrentPage(totalPages)} disabled={currentPage === totalPages} className="hover:bg-primary! hover:text-white!">Última</Button>
              </div>
            </div>
          )}
@ -1165,17 +1181,8 @@ export default function ResultadosClient() {
            </DialogHeader>
            <div className="flex items-center gap-2 mb-4">
-              <input 
+              <input type="date" className="flex-1 rounded-md border border-border px-3 py-2 text-sm" value={moreTimesDate} onChange={(e) => setMoreTimesDate(e.target.value)} />
-                type="date" 
+              <Button className="h-10" onClick={async () => { if (moreTimesForDoctor) await fetchSlotsForDate(moreTimesForDoctor, moreTimesDate) }}>Buscar horários</Button>
                className="flex-1 rounded-md border border-border px-3 py-2 text-sm" 
                value={moreTimesDate} 
                onChange={(e) => {
                  setMoreTimesDate(e.target.value)
                  if (moreTimesForDoctor) {
                    void fetchSlotsForDate(moreTimesForDoctor, e.target.value)
                  }
                }} 
              />
            </div>
            <div className="mt-2">
@ -1184,15 +1191,13 @@ export default function ResultadosClient() {
              ) : moreTimesException ? (
                <div className="text-sm text-red-500">{moreTimesException}</div>
              ) : (moreTimesSlots.length ? (
                <div className="max-h-[60vh] overflow-y-auto pr-2">
                <div className="grid grid-cols-3 gap-2">
                  {moreTimesSlots.map(s => (
-                      <button key={s.iso} type="button" className="rounded-lg bg-primary/10 px-3 py-2 text-sm text-primary hover:bg-primary hover:text-primary-foreground transition-colors" onClick={() => { if (moreTimesForDoctor) { openConfirmDialog(moreTimesForDoctor, s.iso); setMoreTimesForDoctor(null); } }}>
+                    <button key={s.iso} type="button" className="rounded-lg bg-primary/10 px-3 py-2 text-sm text-primary hover:bg-primary hover:text-primary-foreground" onClick={() => { if (moreTimesForDoctor) { openConfirmDialog(moreTimesForDoctor, s.iso); setMoreTimesForDoctor(null); } }}>
                      {s.label}
                    </button>
                  ))}
                </div>
                </div>
              ) : (
                <div className="text-sm text-muted-foreground">Sem horários para a data selecionada.</div>
              ))}
--- a/susconecta/app/profissional/page.tsx
+++ b/susconecta/app/profissional/page.tsx
@ -9,18 +9,15 @@ import { useAuth } from "@/hooks/useAuth";
 import { useToast } from "@/hooks/use-toast";
 import { useAvatarUrl } from "@/hooks/useAvatarUrl";
 import { UploadAvatar } from '@/components/ui/upload-avatar';
-import { buscarPacientes, listarPacientes, buscarPacientePorId, buscarPacientesPorIds, buscarMedicoPorId, buscarMedicosPorIds, buscarMedicos, listarAgendamentos, type Paciente, buscarRelatorioPorId, atualizarMedico, listarDisponibilidades, DoctorAvailability, deletarDisponibilidade, listarExcecoes, DoctorException, deletarExcecao } from "@/lib/api";
+import { buscarPacientes, listarPacientes, buscarPacientePorId, buscarPacientesPorIds, buscarMedicoPorId, buscarMedicosPorIds, buscarMedicos, listarAgendamentos, type Paciente, buscarRelatorioPorId, atualizarMedico } from "@/lib/api";
 import { ENV_CONFIG } from '@/lib/env-config';
 import { useReports } from "@/hooks/useReports";
 import { CreateReportData } from "@/types/report-types";
 import { createAndNotifyReport } from "@/lib/reportService";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from "@/components/ui/select";
 import AvailabilityForm from '@/components/features/forms/availability-form';
 import ExceptionForm from '@/components/features/forms/exception-form';
 import { SimpleThemeToggle } from "@/components/ui/simple-theme-toggle";
 import {
  Table,
@ -67,29 +64,6 @@ const colorsByType = {
  Oftalmologia: "#2ecc71"
 };
  // Função para traduzir dias da semana
  function translateWeekday(w?: string) {
    if (!w) return '';
    const key = w.toString().toLowerCase().normalize('NFD').replace(/\p{Diacritic}/gu, '').replace(/[^a-z0-9]/g, '');
    const map: Record<string, string> = {
      'segunda': 'Segunda',
      'terca': 'Terça',
      'quarta': 'Quarta',
      'quinta': 'Quinta',
      'sexta': 'Sexta',
      'sabado': 'Sábado',
      'domingo': 'Domingo',
      'monday': 'Segunda',
      'tuesday': 'Terça',
      'wednesday': 'Quarta',
      'thursday': 'Quinta',
      'friday': 'Sexta',
      'saturday': 'Sábado',
      'sunday': 'Domingo',
    };
    return map[key] ?? w;
  }
  // Helpers para normalizar dados de paciente (suporta schema antigo e novo)
  const getPatientName = (p: any) => p?.full_name ?? p?.nome ?? '';
  const getPatientCpf = (p: any) => p?.cpf ?? '';
@ -157,17 +131,6 @@ const ProfissionalPage = () => {
  const [isEditingProfile, setIsEditingProfile] = useState(false);
  const [doctorId, setDoctorId] = useState<string | null>(null);
  // Estados para disponibilidades e exceções do médico logado
  const [availabilities, setAvailabilities] = useState<DoctorAvailability[]>([]);
  const [exceptions, setExceptions] = useState<DoctorException[]>([]);
  const [availabilitiesForCreate, setAvailabilitiesForCreate] = useState<DoctorAvailability[]>([]);
  const [availLoading, setAvailLoading] = useState(false);
  const [exceptLoading, setExceptLoading] = useState(false);
  const [editingAvailability, setEditingAvailability] = useState<DoctorAvailability | null>(null);
  const [editingException, setEditingException] = useState<DoctorException | null>(null);
  const [showAvailabilityForm, setShowAvailabilityForm] = useState(false);
  const [showExceptionForm, setShowExceptionForm] = useState(false);
  // Hook para carregar automaticamente o avatar do médico
  const { avatarUrl: retrievedAvatarUrl } = useAvatarUrl(doctorId);
  // Removemos o placeholder extenso — inicializamos com valores minimalistas e vazios.
@ -322,48 +285,6 @@ const ProfissionalPage = () => {
    }
  }, [retrievedAvatarUrl]);
  // Carregar disponibilidades e exceções do médico logado
  const reloadAvailabilities = async (medId?: string) => {
    const id = medId || doctorId;
    if (!id) return;
    try {
      setAvailLoading(true);
      const avails = await listarDisponibilidades({ doctorId: id, active: true });
      setAvailabilities(Array.isArray(avails) ? avails : []);
    } catch (e) {
      console.warn('[ProfissionalPage] Erro ao carregar disponibilidades:', e);
      setAvailabilities([]);
    } finally {
      setAvailLoading(false);
    }
  };
  const reloadExceptions = async (medId?: string) => {
    const id = medId || doctorId;
    if (!id) return;
    try {
      setExceptLoading(true);
      console.log('[ProfissionalPage] Recarregando exceções para médico:', id);
      const excepts = await listarExcecoes({ doctorId: id });
      console.log('[ProfissionalPage] Exceções carregadas:', excepts);
      setExceptions(Array.isArray(excepts) ? excepts : []);
    } catch (e) {
      console.warn('[ProfissionalPage] Erro ao carregar exceções:', e);
      setExceptions([]);
    } finally {
      setExceptLoading(false);
    }
  };
  // Carrega disponibilidades quando doctorId muda
  useEffect(() => {
    if (doctorId) {
      reloadAvailabilities(doctorId);
      reloadExceptions(doctorId);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [doctorId]);
  // Estados para campos principais da consulta
  const [consultaAtual, setConsultaAtual] = useState({
@ -888,13 +809,13 @@ const ProfissionalPage = () => {
        </div>
        {/* Navegação de Data - Responsiva */}
-        <div className="flex flex-col gap-2 sm:gap-3 mb-4 sm:mb-6 p-2 sm:p-3 md:p-4 bg-muted rounded-lg">
+        <div className="flex flex-col gap-2 sm:gap-3 mb-4 sm:mb-6 p-2 sm:p-3 md:p-4 bg-blue-50 rounded-lg dark:bg-muted">
          <div className="flex items-center gap-1.5 sm:gap-2 md:gap-4 flex-wrap">
            <Button 
              variant="outline"
              size="sm"
              onClick={() => navigateDate('prev')}
-              className="p-1.5 sm:p-2 hover-primary-blue cursor-pointer h-auto"
+              className="p-1.5 sm:p-2 hover:bg-primary! hover:text-white! cursor-pointer transition-colors h-auto"
            >
              <ChevronLeft className="h-4 w-4" />
            </Button>
@ -905,7 +826,7 @@ const ProfissionalPage = () => {
              variant="outline"
              size="sm"
              onClick={() => navigateDate('next')}
-              className="p-1.5 sm:p-2 hover-primary-blue cursor-pointer h-auto"
+              className="p-1.5 sm:p-2 hover:bg-primary! hover:text-white! cursor-pointer transition-colors h-auto"
            >
              <ChevronRight className="h-4 w-4" />
            </Button>
@ -1106,7 +1027,7 @@ const ProfissionalPage = () => {
            variant={selectedRange === 'todos' ? 'default' : 'outline'}
            size="sm"
            onClick={() => setSelectedRange('todos')}
-            className="hover-primary-blue"
+            className="hover:bg-primary! hover:text-white! transition-colors"
          >
            Todos
          </Button>
@ -1114,7 +1035,7 @@ const ProfissionalPage = () => {
            variant={selectedRange === 'semana' ? 'default' : 'outline'}
            size="sm"
            onClick={() => setSelectedRange('semana')}
-            className="hover-primary-blue"
+            className="hover:bg-primary! hover:text-white! transition-colors"
          >
            Semana
          </Button>
@ -1122,7 +1043,7 @@ const ProfissionalPage = () => {
            variant={selectedRange === 'mes' ? 'default' : 'outline'}
            size="sm"
            onClick={() => setSelectedRange('mes')}
-            className="hover-primary-blue"
+            className="hover:bg-primary! hover:text-white! transition-colors"
          >
            Mês
          </Button>
@ -1283,7 +1204,7 @@ const ProfissionalPage = () => {
            <Button size="sm" onClick={doSearch} disabled={searching}>
              Buscar
            </Button>
-            <Button size="sm" variant="ghost" onClick={handleClear} className="hover-primary-blue">
+            <Button size="sm" variant="ghost" onClick={handleClear} className="hover:bg-primary! hover:text-white! transition-colors">
              Limpar
            </Button>
          </div>
@ -1294,56 +1215,14 @@ const ProfissionalPage = () => {
    // helper to load laudos for the patients assigned to the logged-in user
    const loadAssignedLaudos = async () => {
      try {
        // Primeiro, tenta carregar laudos criados pelo próprio médico
        console.log('[LaudoManager] Tentando carregar laudos criados pelo médico:', user?.id);
        try {
          const reportsMod = await import('@/lib/reports');
          const allMyReports = await loadReports();
          if (Array.isArray(allMyReports) && allMyReports.length > 0) {
            // Filtrar apenas os criados por mim
            const createdByMe = allMyReports.filter((r: any) => {
              const creator = ((r.created_by ?? r.executante ?? r.createdBy) || '').toString();
              return user?.id && creator && creator === user.id;
            });
            if (createdByMe.length > 0) {
              console.log('[LaudoManager] Encontrados', createdByMe.length, 'laudos criados pelo médico');
              const enriched = await (async (reportsArr: any[]) => {
                if (!reportsArr || !reportsArr.length) return reportsArr;
                const pids = reportsArr.map(r => String(getReportPatientId(r))).filter(Boolean);
                if (!pids.length) return reportsArr;
                try {
                  const patients = await buscarPacientesPorIds(pids);
                  const map = new Map((patients || []).map((p: any) => [String(p.id), p]));
                  return reportsArr.map((r: any) => {
                    const pid = String(getReportPatientId(r));
                    return { ...r, paciente: r.paciente ?? map.get(pid) ?? r.paciente } as any;
                  });
                } catch (e) {
                  console.warn('[LaudoManager] Erro ao enriquecer pacientes:', e);
                  return reportsArr;
                }
              })(createdByMe);
              setLaudos(enriched || []);
              return;
            }
          }
        } catch (e) {
          console.warn('[LaudoManager] erro ao carregar laudos criados pelo médico:', e);
        }
        // Fallback: carregar laudos de pacientes atribuídos
        const assignments = await import('@/lib/assignment').then(m => m.listAssignmentsForUser(user?.id || ''));
        const patientIds = Array.isArray(assignments) ? assignments.map(a => String(a.patient_id)).filter(Boolean) : [];
        if (patientIds.length === 0) {
          console.log('[LaudoManager] Nenhum paciente atribuído, laudos vazios');
          setLaudos([]);
          return;
        }
        console.log('[LaudoManager] Carregando laudos de', patientIds.length, 'pacientes atribuídos');
        try {
          const reportsMod = await import('@/lib/reports');
          if (typeof reportsMod.listarRelatoriosPorPacientes === 'function') {
@ -1435,7 +1314,7 @@ const ProfissionalPage = () => {
          return;
        }
      } catch (e) {
-        console.warn('[LaudoManager] erro ao carregar laudos:', e);
+        console.warn('[LaudoManager] erro ao carregar laudos para pacientes atribuídos:', e);
        setLaudos(reports || []);
      }
    };
@ -1516,13 +1395,13 @@ const ProfissionalPage = () => {
          {/* Filtros */}
          <div className="p-4 border-b border-border">
-            <div className="flex flex-wrap items-start gap-4">
+            <div className="flex flex-wrap items-center gap-4">
              <div className="relative flex-1 min-w-[200px]">
                {/* Search input integrado com busca por ID */}
                <SearchBox />
              </div>
-              <div className="flex items-center gap-2 mt-0">
+              <div className="flex items-center gap-2">
                <div className="flex items-center gap-1 text-sm">
                  <CalendarIcon className="w-4 h-4" />
                  <Input type="date" value={startDate ?? ''} onChange={(e) => { setStartDate(e.target.value); setSelectedRange('custom'); }} className="p-1 text-sm h-10" />
@ -1531,7 +1410,7 @@ const ProfissionalPage = () => {
                </div>
              </div>
-              <div className="flex gap-2 items-center mt-0">
+              <div className="flex gap-2 items-center">
                {/* date range buttons: Semana / Mês */}
                <DateRangeButtons />
              </div>
@ -1624,7 +1503,7 @@ const ProfissionalPage = () => {
                            onClick={() => {
                              router.push(`/laudos/${laudo.id}`);
                            }}
-                            className="flex items-center gap-1 hover-primary-blue"
+                            className="flex items-center gap-1 hover:bg-primary! hover:text-white! transition-colors"
                          >
                            <Eye className="w-4 h-4" />
                            Ver Laudo
@ -1908,15 +1787,7 @@ const ProfissionalPage = () => {
  function LaudoEditor({ pacientes, laudo, onClose, isNewLaudo, preSelectedPatient, createNewReport, updateExistingReport, reloadReports, onSaved }: { pacientes?: any[]; laudo?: any; onClose: () => void; isNewLaudo?: boolean; preSelectedPatient?: any; createNewReport?: (data: any) => Promise<any>; updateExistingReport?: (id: string, data: any) => Promise<any>; reloadReports?: () => Promise<void>; onSaved?: (r:any) => void }) {
  const { toast } = useToast();
    const [activeTab, setActiveTab] = useState("editor");
-    // Initialize content checking all possible field names
+    const [content, setContent] = useState(laudo?.conteudo || "");
    const initialContent = laudo?.conteudo ?? laudo?.content_html ?? laudo?.contentHtml ?? laudo?.content ?? "";
    console.log('[LaudoEditor] Initializing content - laudo:', laudo, 'initialContent length:', initialContent?.length, 'fields:', {
      conteudo: laudo?.conteudo,
      content_html: laudo?.content_html, 
      contentHtml: laudo?.contentHtml,
      content: laudo?.content
    });
    const [content, setContent] = useState(initialContent);
    const [showPreview, setShowPreview] = useState(false);
    const [pacienteSelecionado, setPacienteSelecionado] = useState<any>(preSelectedPatient || null);
    const [listaPacientes, setListaPacientes] = useState<any[]>([]);
@ -2003,10 +1874,8 @@ const ProfissionalPage = () => {
    // Carregar dados do laudo existente quando disponível (mais robusto: suporta vários nomes de campo)
    useEffect(() => {
      if (laudo && !isNewLaudo) {
        console.log('[LaudoEditor useEffect] Loading existing laudo data:', laudo);
        // Conteúdo: aceita 'conteudo', 'content_html', 'contentHtml', 'content'
        const contentValue = laudo.conteudo ?? laudo.content_html ?? laudo.contentHtml ?? laudo.content ?? "";
        console.log('[LaudoEditor useEffect] Content value length:', contentValue?.length, 'Setting content...');
        setContent(contentValue);
        // Campos: use vários fallbacks
@ -2311,6 +2180,32 @@ const ProfissionalPage = () => {
              <FileText className="w-4 h-4 inline mr-1" />
              Editor
            </button>
            <button
              onClick={() => setActiveTab("imagens")}
              className={`px-2 sm:px-4 py-1.5 sm:py-2 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
                activeTab === "imagens"
                  ? "border-blue-500 text-blue-600"
                  : "border-transparent text-gray-600 dark:text-muted-foreground dark:hover:text-foreground dark:hover:bg-blue-900"
              }`}
              style={{
                backgroundColor: activeTab === "imagens" ? undefined : "transparent"
              }}
              onMouseEnter={(e) => {
                if (activeTab !== "imagens") {
                  e.currentTarget.style.backgroundColor = "transparent";
                  e.currentTarget.style.color = "#4B5563";
                }
              }}
              onMouseLeave={(e) => {
                if (activeTab !== "imagens") {
                  e.currentTarget.style.backgroundColor = "transparent";
                  e.currentTarget.style.color = "#4B5563";
                }
              }}
            >
              <Upload className="w-4 h-4 inline mr-1" />
              Imagens ({imagens.length})
            </button>
            <button
              onClick={() => setActiveTab("campos")}
              className={`px-2 sm:px-4 py-1.5 sm:py-2 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
@ -2413,16 +2308,16 @@ const ProfissionalPage = () => {
                        title="Cor da fonte"
                      />
                      {/* Alinhamento */}
-                      <Button variant="outline" size="sm" onClick={() => formatText('align-left')} title="Alinhar à esquerda" className="px-1 hover-primary-blue-soft"><svg width="16" height="16" fill="none"><rect x="2" y="4" width="12" height="2" rx="1" fill="currentColor"/><rect x="2" y="7" width="8" height="2" rx="1" fill="currentColor"/><rect x="2" y="10" width="10" height="2" rx="1" fill="currentColor"/></svg></Button>
+                      <Button variant="outline" size="sm" onClick={() => formatText('align-left')} title="Alinhar à esquerda" className="px-1 hover:bg-primary/10 hover:text-primary"><svg width="16" height="16" fill="none"><rect x="2" y="4" width="12" height="2" rx="1" fill="currentColor"/><rect x="2" y="7" width="8" height="2" rx="1" fill="currentColor"/><rect x="2" y="10" width="10" height="2" rx="1" fill="currentColor"/></svg></Button>
-                      <Button variant="outline" size="sm" onClick={() => formatText('align-center')} title="Centralizar" className="px-1 hover-primary-blue-soft"><svg width="16" height="16" fill="none"><rect x="4" y="4" width="8" height="2" rx="1" fill="currentColor"/><rect x="2" y="7" width="12" height="2" rx="1" fill="currentColor"/><rect x="3" y="10" width="10" height="2" rx="1" fill="currentColor"/></svg></Button>
+                      <Button variant="outline" size="sm" onClick={() => formatText('align-center')} title="Centralizar" className="px-1 hover:bg-primary/10 hover:text-primary"><svg width="16" height="16" fill="none"><rect x="4" y="4" width="8" height="2" rx="1" fill="currentColor"/><rect x="2" y="7" width="12" height="2" rx="1" fill="currentColor"/><rect x="3" y="10" width="10" height="2" rx="1" fill="currentColor"/></svg></Button>
-                      <Button variant="outline" size="sm" onClick={() => formatText('align-right')} title="Alinhar à direita" className="px-1 hover-primary-blue-soft"><svg width="16" height="16" fill="none"><rect x="6" y="4" width="8" height="2" rx="1" fill="currentColor"/><rect x="2" y="7" width="12" height="2" rx="1" fill="currentColor"/><rect x="4" y="10" width="10" height="2" rx="1" fill="currentColor"/></svg></Button>
+                      <Button variant="outline" size="sm" onClick={() => formatText('align-right')} title="Alinhar à direita" className="px-1 hover:bg-primary/10 hover:text-primary"><svg width="16" height="16" fill="none"><rect x="6" y="4" width="8" height="2" rx="1" fill="currentColor"/><rect x="2" y="7" width="12" height="2" rx="1" fill="currentColor"/><rect x="4" y="10" width="10" height="2" rx="1" fill="currentColor"/></svg></Button>
-                      <Button variant="outline" size="sm" onClick={() => formatText('align-justify')} title="Justificar" className="px-1 hover-primary-blue-soft"><svg width="16" height="16" fill="none"><rect x="2" y="4" width="12" height="2" rx="1" fill="currentColor"/><rect x="2" y="7" width="12" height="2" rx="1" fill="currentColor"/><rect x="2" y="10" width="12" height="2" rx="1" fill="currentColor"/></svg></Button>
+                      <Button variant="outline" size="sm" onClick={() => formatText('align-justify')} title="Justificar" className="px-1 hover:bg-primary/10 hover:text-primary"><svg width="16" height="16" fill="none"><rect x="2" y="4" width="12" height="2" rx="1" fill="currentColor"/><rect x="2" y="7" width="12" height="2" rx="1" fill="currentColor"/><rect x="2" y="10" width="12" height="2" rx="1" fill="currentColor"/></svg></Button>
                      {/* Listas */}
-                      <Button variant="outline" size="sm" onClick={() => formatText('list-ol')} title="Lista numerada" className="px-1 hover-primary-blue-soft">1.</Button>
+                      <Button variant="outline" size="sm" onClick={() => formatText('list-ol')} title="Lista numerada" className="px-1 hover:bg-primary/10 hover:text-primary">1.</Button>
-                      <Button variant="outline" size="sm" onClick={() => formatText('list-ul')} title="Lista com marcadores" className="px-1 hover-primary-blue-soft">•</Button>
+                      <Button variant="outline" size="sm" onClick={() => formatText('list-ul')} title="Lista com marcadores" className="px-1 hover:bg-primary/10 hover:text-primary">•</Button>
                      {/* Recuo */}
-                      <Button variant="outline" size="sm" onClick={() => formatText('indent')} title="Aumentar recuo" className="px-1 hover-primary-blue-soft">→</Button>
+                      <Button variant="outline" size="sm" onClick={() => formatText('indent')} title="Aumentar recuo" className="px-1 hover:bg-primary/10 hover:text-primary">→</Button>
-                      <Button variant="outline" size="sm" onClick={() => formatText('outdent')} title="Diminuir recuo" className="px-1 hover-primary-blue-soft">←</Button>
+                      <Button variant="outline" size="sm" onClick={() => formatText('outdent')} title="Diminuir recuo" className="px-1 hover:bg-primary/10 hover:text-primary">←</Button>
                      {/* Desfazer/Refazer */}
                      <Button variant="outline" size="sm" onClick={handleUndo} title="Desfazer" className="px-1 hover:bg-primary/10 hover:text-primary">↺</Button>
                      <div className="flex flex-wrap gap-1">
@ -2453,6 +2348,50 @@ const ProfissionalPage = () => {
                </div>
              )}
              {activeTab === "imagens" && (
                <div className="flex-1 p-2 sm:p-4 overflow-y-auto">
                  <div className="mb-3 sm:mb-4">
                    <Label htmlFor="upload-images" className="text-xs sm:text-sm">Upload de Imagens</Label>
                    <Input
                      id="upload-images"
                      type="file"
                      multiple
                      accept="image/*,.pdf"
                      onChange={handleImageUpload}
                      className="mt-1 text-xs"
                    />
                  </div>
                  <div className="grid grid-cols-2 md:grid-cols-3 gap-2 sm:gap-4">
                    {imagens.map((img) => (
                      <div key={img.id} className="border border-border rounded-lg p-1.5 sm:p-2">
                        {img.type.startsWith('image/') ? (
                          // eslint-disable-next-line @next/next/no-img-element
                          <img 
                            src={img.url} 
                            alt={img.name}
                            className="w-full h-24 sm:h-32 object-cover rounded"
                          />
                        ) : (
                          <div className="w-full h-24 sm:h-32 bg-muted rounded flex items-center justify-center">
                            <FileText className="w-6 sm:w-8 h-6 sm:h-8 text-muted-foreground" />
                          </div>
                        )}
                        <p className="text-xs text-muted-foreground mt-1 truncate">{img.name}</p>
                        <Button
                          variant="destructive"
                          size="sm"
                          className="w-full mt-1 text-xs"
                          onClick={() => setImagens(prev => prev.filter(i => i.id !== img.id))}
                        >
                          Remover
                        </Button>
                      </div>
                    ))}
                  </div>
                </div>
              )}
              {activeTab === "campos" && (
                <div className="flex-1 p-2 sm:p-4 space-y-2 sm:space-y-4 overflow-y-auto">
                  <div>
@ -2649,9 +2588,6 @@ const ProfissionalPage = () => {
                        if (isNewLaudo) {
                          if (createNewReport) {
                            const created = await createNewReport(payload as any);
                            console.log('[LaudoEditor] Report criado:', { created, patient_id: payload.patient_id });
                            // ✅ Webhook agora é enviado automaticamente dentro de createNewReport() / criarRelatorio()
                            if (onSaved) onSaved(created);
                          }
                        } else {
@ -2806,177 +2742,6 @@ const ProfissionalPage = () => {
    </div>
  );
  const renderDisponibilidadesSection = () => {
    // Filtrar apenas a primeira disponibilidade de cada dia da semana
    const availabilityByDay = new Map<string, DoctorAvailability>();
    (availabilities || []).forEach((a) => {
      const day = String(a.weekday ?? '').toLowerCase();
      if (!availabilityByDay.has(day)) {
        availabilityByDay.set(day, a);
      }
    });
    let filteredAvailabilities = Array.from(availabilityByDay.values());
    // Ordenar por dia da semana (Segunda a Domingo)
    filteredAvailabilities = filteredAvailabilities.sort((a, b) => {
      const weekdayOrder: Record<string, number> = {
        'segunda': 1, 'segunda-feira': 1, 'mon': 1, 'monday': 1, '1': 1,
        'terca': 2, 'terça': 2, 'terça-feira': 2, 'tue': 2, 'tuesday': 2, '2': 2,
        'quarta': 3, 'quarta-feira': 3, 'wed': 3, 'wednesday': 3, '3': 3,
        'quinta': 4, 'quinta-feira': 4, 'thu': 4, 'thursday': 4, '4': 4,
        'sexta': 5, 'sexta-feira': 5, 'fri': 5, 'friday': 5, '5': 5,
        'sabado': 6, 'sábado': 6, 'sat': 6, 'saturday': 6, '6': 6,
        'domingo': 7, 'dom': 7, 'sun': 7, 'sunday': 7, '0': 7, '7': 7
      };
      const getWeekdayOrder = (weekday: any) => {
        if (typeof weekday === 'number') return weekday === 0 ? 7 : weekday;
        const normalized = String(weekday).toLowerCase().normalize('NFD').replace(/\p{Diacritic}/gu, '');
        return weekdayOrder[normalized] || 999;
      };
      return getWeekdayOrder(a.weekday) - getWeekdayOrder(b.weekday);
    });
    // Filtrar apenas a primeira exceção de cada data
    const exceptionByDate = new Map<string, DoctorException>();
    (exceptions || []).forEach((ex) => {
      // Alguns backends/versões usam nomes diferentes para a data da exceção.
      // Fazemos cast para any ao verificar campos legados para satisfazer o tipo DoctorException.
      const date = String(((ex as any).exception_date) ?? ((ex as any).exceptionDate) ?? ex.date ?? '');
      if (!exceptionByDate.has(date)) {
        exceptionByDate.set(date, ex);
      }
    });
    const filteredExceptions = Array.from(exceptionByDate.values());
    return (
      <section className="bg-card shadow-md rounded-lg border border-border p-3 sm:p-4 md:p-6 w-full">
        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 mb-6">
          <h2 className="text-xl sm:text-2xl font-bold">Minhas Disponibilidades</h2>
          <div className="flex gap-2 w-full sm:w-auto">
            <Button 
              size="sm"
              className="flex-1 sm:flex-initial bg-blue-600 hover:bg-blue-700 text-xs sm:text-sm"
              onClick={async () => {
                try {
                  const list = await listarDisponibilidades({ doctorId: doctorId!, active: true });
                  setAvailabilitiesForCreate(list || []);
                  setEditingAvailability(null);
                  setShowAvailabilityForm(true);
                } catch (e) {
                  console.warn('Erro ao carregar disponibilidades:', e);
                  setAvailabilitiesForCreate([]);
                  setEditingAvailability(null);
                  setShowAvailabilityForm(true);
                }
              }}
            >
              + Disponibilidade
            </Button>
          </div>
        </div>
        {/* Disponibilidades */}
        {availLoading ? (
          <div className="text-sm text-muted-foreground p-4">Carregando disponibilidades…</div>
        ) : filteredAvailabilities && filteredAvailabilities.length > 0 ? (
          <div className="space-y-2">
            {filteredAvailabilities.map((a) => (
              <div key={String(a.id)} className="p-2 border rounded flex justify-between items-start">
                <div>
                  <div className="font-medium">{translateWeekday(a.weekday)} • {a.start_time} — {a.end_time}</div>
                  <div className="text-xs text-muted-foreground">Duração: {a.slot_minutes} min • Tipo: {a.appointment_type || '—'} • {a.active ? 'Ativa' : 'Inativa'}</div>
                </div>
                <div className="flex gap-2">
                  <Button 
                    size="sm" 
                    variant="outline"
                    onClick={() => {
                      setEditingAvailability(a);
                      setShowAvailabilityForm(true);
                    }}
                    className="hover:bg-muted hover:text-foreground"
                  >
                    Editar
                  </Button>
                  <Button 
                    size="sm" 
                    variant="destructive" 
                    onClick={async () => {
                      if (!confirm('Excluir esta disponibilidade?')) return;
                      try {
                        await deletarDisponibilidade(String(a.id));
                        reloadAvailabilities();
                        toast({ title: 'Disponibilidade excluída', variant: 'default' });
                      } catch (e) {
                        console.warn('Erro ao deletar disponibilidade:', e);
                        alert((e as any)?.message || 'Erro ao deletar disponibilidade');
                      }
                    }}
                  >
                    Excluir
                  </Button>
                </div>
              </div>
            ))}
          </div>
        ) : (
          <div className="text-sm text-muted-foreground p-4 border rounded-lg bg-muted/50">
            Nenhuma disponibilidade cadastrada.
          </div>
        )}
        {/* Exceções */}
        <div className="mt-8">
          <h3 className="text-lg sm:text-xl font-bold mb-4">Exceções (Bloqueios/Liberações)</h3>
            {exceptLoading ? (
            <div className="text-sm text-muted-foreground p-4">Carregando exceções…</div>
          ) : filteredExceptions && filteredExceptions.length > 0 ? (
            <div className="space-y-2">
              {filteredExceptions.map((ex) => (
                <div key={String(ex.id)} className="p-3 border rounded flex justify-between items-start">
                  <div className="flex-1">
                    <div className="font-medium text-sm sm:text-base">
                      {(() => {
                        try {
                          // Normaliza possíveis nomes de campo (exception_date, exceptionDate, date) e formata com fallback
                          const dateRaw = (ex as any).exception_date ?? (ex as any).exceptionDate ?? ex.date ?? '';
                          const parts = String(dateRaw).split('-');
                          if (parts.length >= 3) {
                            const [y, m, d] = parts;
                            return `${d}/${m}/${y}`;
                          }
                          // fallback: tentar parse ISO/locale
                          const dt = new Date(String(dateRaw));
                          if (!isNaN(dt.getTime())) {
                            return `${String(dt.getDate()).padStart(2, '0')}/${String(dt.getMonth() + 1).padStart(2, '0')}/${dt.getFullYear()}`;
                          }
                          return String(dateRaw);
                        } catch (e) {
                          return ((ex as any).exception_date ?? (ex as any).exceptionDate ?? ex.date) as any;
                        }
                      })()}
                    </div>
                    <div className="text-xs text-muted-foreground">
                      Tipo: {(ex as any).kind || 'bloqueio'} • Motivo: {(ex as any).reason || '—'}
                    </div>
                  </div>
                  <div className="flex gap-2 ml-2">
                    {/* Sem ações para exceções */}
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className="text-sm text-muted-foreground p-4 border rounded-lg bg-muted/50">
              Nenhuma exceção cadastrada.
            </div>
          )}
        </div>
      </section>
    );
  };
  const renderPerfilSection = () => (
    <div className="mx-auto flex w-full max-w-6xl flex-col gap-4 sm:gap-6 px-0 py-4 sm:py-8 md:px-4">
@ -3177,6 +2942,25 @@ const ProfissionalPage = () => {
            <h3 className="text-base sm:text-lg font-semibold mb-4">Foto do Perfil</h3>
            <div className="flex flex-col items-center gap-4">
              {isEditingProfile ? (
                <UploadAvatar
                  userId={String(doctorId || (user && (user as any).id) || '')}
                  currentAvatarUrl={(profileData as any).fotoUrl}
                  userName={(profileData as any).nome}
                  onAvatarChange={async (newUrl: string) => {
                    try {
                      setProfileData((prev) => ({ ...prev, fotoUrl: newUrl }));
                      // Foto foi salva no Supabase Storage - atualizar apenas o estado local
                      // Para persistir no banco, o usuário deve clicar em "Salvar" após isso
                      try { toast({ title: 'Foto enviada', description: 'Clique em "Salvar" para confirmar as alterações.', variant: 'default' }); } catch (e) { /* ignore toast errors */ }
                    } catch (err) {
                      console.error('[ProfissionalPage] erro ao processar upload de foto:', err);
                      try { toast({ title: 'Erro ao processar foto', description: (err as any)?.message || 'Falha ao processar a foto do perfil.', variant: 'destructive' }); } catch (e) {}
                    }
                  }}
                />
              ) : (
                <>
                  <Avatar className="h-20 w-20 sm:h-24 sm:w-24">
                    {(profileData as any).fotoUrl ? (
                      <AvatarImage src={(profileData as any).fotoUrl} alt={(profileData as any).nome} />
@ -3192,6 +2976,8 @@ const ProfissionalPage = () => {
                      {profileData.nome?.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2) || 'MD'}
                    </p>
                  </div>
                </>
              )}
            </div>
          </div>
        </div>
@ -3232,8 +3018,6 @@ const ProfissionalPage = () => {
    );
      case 'laudos':
        return renderLaudosSection();
      case 'disponibilidades':
        return renderDisponibilidadesSection();
      case 'comunicacao':
        return renderComunicacaoSection();
      case 'perfil':
@ -3254,18 +3038,6 @@ const ProfissionalPage = () => {
            <div className="flex items-center justify-between gap-4 flex-wrap md:flex-nowrap">
              {/* Logo/Avatar Section */}
              <div className="flex items-center gap-3 min-w-0 flex-1 md:flex-none">
                {/* Logo MEDIConnect */}
                <div className="flex items-center gap-2 mr-2 md:mr-4">
                  <div className="w-8 h-8 md:w-10 md:h-10 bg-primary rounded-lg flex items-center justify-center shrink-0">
                    <Stethoscope className="w-4 h-4 md:w-5 md:h-5 text-primary-foreground" />
                  </div>
                  <span className="text-base md:text-lg font-semibold text-foreground hidden sm:inline">
                    MEDIConnect
                  </span>
                </div>
                <div className="h-8 w-px bg-border hidden sm:block"></div>
                <Avatar className="h-10 w-10 md:h-12 md:w-12 flex-shrink-0">
                  <AvatarImage src={(profileData as any).fotoUrl || undefined} alt={profileData.nome} />
                  <AvatarFallback className="bg-muted text-xs md:text-sm">
@ -3370,17 +3142,6 @@ const ProfissionalPage = () => {
              <FileText className="mr-2 h-4 w-4" />
              Laudos
            </Button>
            <Button 
              variant={activeSection === 'disponibilidades' ? 'default' : 'ghost'} 
              className="w-full justify-start text-sm md:text-base transition-colors hover:bg-primary! hover:text-white! cursor-pointer"
              onClick={() => {
                setActiveSection('disponibilidades');
                setSidebarOpen(false);
              }}
            >
              <Clock className="mr-2 h-4 w-4" />
              Disponibilidades
            </Button>
            <Button 
              variant={activeSection === 'comunicacao' ? 'default' : 'ghost'} 
              className="w-full justify-start text-sm md:text-base transition-colors hover:bg-primary! hover:text-white! cursor-pointer"
@ -3417,32 +3178,7 @@ const ProfissionalPage = () => {
        </main>
      </div>
-      {/* AvailabilityForm para criar/editar disponibilidades */}
+      {}
      {showAvailabilityForm && (
        <AvailabilityForm
          open={showAvailabilityForm}
          onOpenChange={(open) => {
            if (!open) {
              setShowAvailabilityForm(false);
              setEditingAvailability(null);
              setAvailabilitiesForCreate([]);
            }
          }}
          doctorId={editingAvailability?.doctor_id ?? doctorId}
          availability={editingAvailability}
          existingAvailabilities={availabilitiesForCreate}
          mode={editingAvailability ? "edit" : "create"}
          onSaved={(saved) => {
            console.log('Disponibilidade salva', saved);
            setEditingAvailability(null);
            setShowAvailabilityForm(false);
            setAvailabilitiesForCreate([]);
            reloadAvailabilities();
          }}
        />
      )}
      {/* Popup antigo (manter para compatibilidade) */}
      {showPopup && (
        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex justify-center items-center z-50">
--- a/susconecta/components/ZoeIA/ai-assistant-interface.tsx
+++ b/susconecta/components/ZoeIA/ai-assistant-interface.tsx
@ -1,321 +0,0 @@
 "use client";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { motion } from "framer-motion";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { SimpleThemeToggle } from "@/components/ui/simple-theme-toggle";
 import { Clock, Info, Lock, MessageCircle, Plus, Upload } from "lucide-react";
 const API_ENDPOINT = "https://n8n.jonasbomfim.store/webhook/cd7d10e6-bcfc-4f3a-b649-351d12b714f1";
 const FALLBACK_RESPONSE = "Tive um problema para responder agora. Tente novamente em alguns instantes.";
 export interface ChatMessage {
  id: string;
  sender: "user" | "assistant";
  content: string;
  createdAt: string;
 }
 export interface ChatSession {
  id: string;
  startedAt: string;
  updatedAt: string;
  topic: string;
  messages: ChatMessage[];
 }
 interface AIAssistantInterfaceProps {
  onOpenDocuments?: () => void;
  onOpenChat?: () => void;
  history?: ChatSession[];
  onAddHistory?: (session: ChatSession) => void;
  onClearHistory?: () => void;
 }
 export function AIAssistantInterface({
  onOpenDocuments,
  onOpenChat,
  history: externalHistory,
  onAddHistory,
  onClearHistory,
 }: AIAssistantInterfaceProps) {
  const [question, setQuestion] = useState("");
  const [internalHistory, setInternalHistory] = useState<ChatSession[]>(externalHistory ?? []);
  const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
  const [manualSelection, setManualSelection] = useState(false);
  const [historyPanelOpen, setHistoryPanelOpen] = useState(false);
  const messageListRef = useRef<HTMLDivElement | null>(null);
  const pdfInputRef = useRef<HTMLInputElement | null>(null);
  const [pdfFile, setPdfFile] = useState<File | null>(null); // arquivo PDF selecionado
  const history = internalHistory;
  const historyRef = useRef<ChatSession[]>(history);
  const baseGreeting = "Olá, eu sou Zoe. Como posso ajudar hoje?";
  const greetingWords = useMemo(() => baseGreeting.split(" "), [baseGreeting]);
  const [typedGreeting, setTypedGreeting] = useState("");
  const [typedIndex, setTypedIndex] = useState(0);
  const [isTypingGreeting, setIsTypingGreeting] = useState(true);
  const [gradientGreeting, plainGreeting] = useMemo(() => {
    if (!typedGreeting) return ["", ""] as const;
    const separatorIndex = typedGreeting.indexOf("Como");
    if (separatorIndex === -1) {
      return [typedGreeting, ""] as const;
    }
    const gradientPart = typedGreeting.slice(0, separatorIndex).trimEnd();
    const plainPart = typedGreeting.slice(separatorIndex).trimStart();
    return [gradientPart, plainPart] as const;
  }, [typedGreeting]);
  useEffect(() => {
    if (externalHistory) {
      setInternalHistory(externalHistory);
    }
  }, [externalHistory]);
  useEffect(() => {
    historyRef.current = history;
  }, [history]);
  const activeSession = useMemo(
    () => history.find((session) => session.id === activeSessionId) ?? null,
    [history, activeSessionId]
  );
  const activeMessages = activeSession?.messages ?? [];
  const formatTime = useCallback(
    (value: string) =>
      new Date(value).toLocaleTimeString("pt-BR", {
        hour: "2-digit",
        minute: "2-digit",
      }),
    []
  );
  const upsertSession = useCallback(
    (session: ChatSession) => {
      if (onAddHistory) {
        onAddHistory(session);
      } else {
        setInternalHistory((prev) => {
          const index = prev.findIndex((s) => s.id === session.id);
          if (index >= 0) {
            const updated = [...prev];
            updated[index] = session;
            return updated;
          }
          return [...prev, session];
        });
      }
      setActiveSessionId(session.id);
      setManualSelection(false);
    },
    [onAddHistory]
  );
  const sendMessageToAssistant = useCallback(
    async (prompt: string, baseSession: ChatSession) => {
      const sessionId = baseSession.id;
      const appendAssistantMessage = (content: string) => {
        const createdAt = new Date().toISOString();
        const assistantMessage: ChatMessage = {
          id: `msg-assistant-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
          sender: "assistant",
          content,
          createdAt,
        };
        const latestSession =
          historyRef.current.find((s) => s.id === sessionId) ?? baseSession;
        const updatedSession: ChatSession = {
          ...latestSession,
          updatedAt: createdAt,
          messages: [...latestSession.messages, assistantMessage],
        };
        upsertSession(updatedSession);
      };
      try {
        let replyText = "";
        let response: Response;
        if (pdfFile) {
          // Monta FormData conforme especificação: campos 'pdf' e 'message'
          const formData = new FormData();
            formData.append("pdf", pdfFile);
            formData.append("message", prompt);
          response = await fetch(API_ENDPOINT, {
            method: "POST",
            body: formData, // multipart/form-data gerenciado pelo browser
          });
        } else {
          response = await fetch(API_ENDPOINT, {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({ message: prompt }),
          });
        }
        const rawPayload = await response.text();
        if (rawPayload.trim()) {
          try {
            const parsed = JSON.parse(rawPayload) as { message?: unknown; reply?: unknown };
            if (typeof parsed.reply === "string") {
              replyText = parsed.reply.trim();
            } else if (typeof parsed.message === "string") {
              replyText = parsed.message.trim();
            }
          } catch (error) {
            console.error("[ZoeIA] Resposta JSON inválida", error, rawPayload);
          }
        }
        appendAssistantMessage(replyText || FALLBACK_RESPONSE);
      } catch (error) {
        console.error("[ZoeIA] Erro ao buscar resposta da API", error);
        appendAssistantMessage(FALLBACK_RESPONSE);
      }
    },
    [upsertSession, pdfFile]
  );
  const handleSendMessage = () => {
    const trimmed = question.trim();
    if (!trimmed) return;
    const now = new Date();
    const userMessage: ChatMessage = {
      id: `msg-user-${now.getTime()}`,
      sender: "user",
      content: trimmed,
      createdAt: now.toISOString(),
    };
    const session = history.find((s) => s.id === activeSessionId);
    const sessionToUse: ChatSession = session
      ? {
          ...session,
          updatedAt: userMessage.createdAt,
          messages: [...session.messages, userMessage],
        }
      : {
          id: `session-${now.getTime()}`,
          startedAt: now.toISOString(),
          updatedAt: userMessage.createdAt,
          topic: trimmed.length > 60 ? `${trimmed.slice(0, 57)}…` : trimmed,
          messages: [userMessage],
        };
    upsertSession(sessionToUse);
    setQuestion("");
    setHistoryPanelOpen(false);
    void sendMessageToAssistant(trimmed, sessionToUse);
  };
  const handleSelectPdf = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file && file.type === "application/pdf") {
      setPdfFile(file);
    }
    // Permite re-selecionar o mesmo arquivo
    e.target.value = "";
  };
  const removePdf = () => setPdfFile(null);
  return (
    <div className="w-full max-w-3xl mx-auto p-4 space-y-4">
      {/* Área superior exibindo PDF selecionado */}
      {pdfFile && (
        <div className="flex items-center justify-between border rounded-lg p-3 bg-muted/50">
          <div className="flex items-center gap-3 min-w-0">
            <Upload className="w-5 h-5 text-primary" />
            <div className="min-w-0">
              <p className="text-sm font-medium truncate" title={pdfFile.name}>{pdfFile.name}</p>
              <p className="text-xs text-muted-foreground">
                PDF anexado • {(pdfFile.size / 1024).toFixed(1)} KB
              </p>
            </div>
          </div>
          <Button variant="secondary" size="sm" onClick={removePdf}>
            Remover
          </Button>
        </div>
      )}
      {/* Lista de mensagens */}
      <div
        ref={messageListRef}
        className="border rounded-lg p-4 h-96 overflow-y-auto space-y-3 bg-background"
      >
        {activeMessages.length === 0 && (
          <p className="text-sm text-muted-foreground">Nenhuma mensagem ainda. Envie uma pergunta.</p>
        )}
        {activeMessages.map((m) => (
          <div
            key={m.id}
            className={`flex ${m.sender === "user" ? "justify-end" : "justify-start"}`}
          >
            <div
              className={`px-3 py-2 rounded-lg max-w-xs text-sm whitespace-pre-wrap ${
                m.sender === "user" ? "bg-primary text-primary-foreground" : "bg-muted"
              }`}
            >
              {m.content}
              <div className="mt-1 text-[10px] opacity-70">
                {formatTime(m.createdAt)}
              </div>
            </div>
          </div>
        ))}
      </div>
      {/* Input & ações */}
      <div className="flex items-center gap-2">
        <div className="flex gap-2">
          <Button
            type="button"
            variant="secondary"
            size="sm"
            onClick={() => pdfInputRef.current?.click()}
          >
            PDF
          </Button>
          <input
            ref={pdfInputRef}
            type="file"
            accept="application/pdf"
            className="hidden"
            onChange={handleSelectPdf}
          />
        </div>
        <Input
          placeholder="Digite sua pergunta"
          value={question}
          onChange={(e) => setQuestion(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === "Enter" && !e.shiftKey) {
              e.preventDefault();
              handleSendMessage();
            }
          }}
        />
        <Button onClick={handleSendMessage} disabled={!question.trim()}>
          Enviar
        </Button>
      </div>
      <div className="text-xs text-muted-foreground">
        {pdfFile
          ? "A próxima mensagem será enviada junto ao PDF como multipart/form-data."
          : "Selecione um PDF para anexar ao próximo envio."}
      </div>
    </div>
  );
 }
--- a/susconecta/components/ZoeIA/ai-voice-flow.tsx
+++ b/susconecta/components/ZoeIA/ai-voice-flow.tsx
@ -1,196 +0,0 @@
 "use client";
 import React, { useRef, useState } from "react";
 import { VoicePoweredOrb } from "@/components/ZoeIA/voice-powered-orb";
 import { Button } from "@/components/ui/button";
 import { Mic, MicOff } from "lucide-react";
 // ⚠ Coloque aqui o webhook real do seu n8n
 const N8N_WEBHOOK_URL = "https://n8n.jonasbomfim.store/webhook/zoe2";
 const AIVoiceFlow: React.FC = () => {
  const [isRecording, setIsRecording] = useState(false);
  const [isSending, setIsSending] = useState(false);
  const [voiceDetected, setVoiceDetected] = useState(false);
  const [status, setStatus] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [replyAudioUrl, setReplyAudioUrl] = useState<string | null>(null); // URL do áudio retornado
  const [replyAudio, setReplyAudio] = useState<HTMLAudioElement | null>(null); // elemento de áudio reproduzido
  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
  const streamRef = useRef<MediaStream | null>(null);
  const chunksRef = useRef<BlobPart[]>([]);
  // 🚀 Inicia gravação
  const startRecording = async () => {
    try {
      setError(null);
      setStatus("Iniciando microfone...");
      // Se estava reproduzindo áudio da IA → parar imediatamente
      if (replyAudio) {
        replyAudio.pause();
        replyAudio.currentTime = 0;
      }
      setReplyAudio(null);
      setReplyAudioUrl(null);
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      streamRef.current = stream;
      const recorder = new MediaRecorder(stream);
      mediaRecorderRef.current = recorder;
      chunksRef.current = [];
      recorder.ondataavailable = (e) => {
        if (e.data.size > 0) chunksRef.current.push(e.data);
      };
      recorder.onstop = async () => {
        setStatus("Processando áudio...");
        const blob = new Blob(chunksRef.current, { type: "audio/webm" });
        await sendToN8N(blob);
        chunksRef.current = [];
      };
      recorder.start();
      setIsRecording(true);
      setStatus("Gravando... fale algo.");
    } catch (err) {
      console.error(err);
      setError("Erro ao acessar microfone.");
    }
  };
  // ⏹ Finaliza gravação
  const stopRecording = () => {
    try {
      setIsRecording(false);
      setStatus("Finalizando gravação...");
      if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
        mediaRecorderRef.current.stop();
      }
      if (streamRef.current) {
        streamRef.current.getTracks().forEach((t) => t.stop());
        streamRef.current = null;
      }
    } catch (err) {
      console.error(err);
      setError("Erro ao parar gravação.");
    }
  };
  // 📤 Envia áudio ao N8N e recebe o MP3
  const sendToN8N = async (audioBlob: Blob) => {
    try {
      setIsSending(true);
      setStatus("Enviando áudio para IA...");
      const formData = new FormData();
      formData.append("audio", audioBlob, "voz.webm");
      const resp = await fetch(N8N_WEBHOOK_URL, {
        method: "POST",
        body: formData,
      });
      if (!resp.ok) {
        throw new Error("N8N retornou erro");
      }
      const replyBlob = await resp.blob();
      // gera url local
      const url = URL.createObjectURL(replyBlob);
      setReplyAudioUrl(url);
      const audio = new Audio(url);
      setReplyAudio(audio);
      setStatus("Reproduzindo resposta...");
      audio.play().catch(() => {});
    } catch (err) {
      console.error(err);
      setError("Erro ao enviar/receber áudio.");
    } finally {
      setIsSending(false);
    }
  };
  const toggleRecording = () => {
    if (isRecording) stopRecording();
    else startRecording();
  };
  return (
    <div className="flex flex-col items-center justify-center gap-6 p-6">
      {/* ORB — agora com comportamento inteligente */}
      <div className="w-72 h-72 relative">
        <VoicePoweredOrb
          className="w-full h-full"
          /* 🔥 LÓGICA DO ORB: 
             - Gravando?       → usa microfone
             - Não gravando, mas tem MP3? → usa áudio da IA
             - Caso contrário → parado (none)
          */
          {...({ sourceMode:
            isRecording
              ? "microphone"
              : replyAudio
                ? "playback"
                : "none"
          } as any)}
          audioElement={replyAudio}
          onVoiceDetected={setVoiceDetected}
        />
        {isRecording && (
          <span className="absolute bottom-4 right-4 rounded-full bg-black/70 px-3 py-1 text-xs font-medium text-white shadow-lg">
            {voiceDetected ? "Ouvindo…" : "Aguardando voz…"}
          </span>
        )}
      </div>
      {/* 🟣 Botão de gravação */}
      <Button
        onClick={toggleRecording}
        variant={isRecording ? "destructive" : "default"}
        size="lg"
        disabled={isSending}
      >
        {isRecording ? (
          <>
            <MicOff className="w-5 h-5 mr-2" /> Parar gravação
          </>
        ) : (
          <>
            <Mic className="w-5 h-5 mr-2" /> Começar gravação
          </>
        )}
      </Button>
      {/* STATUS */}
      {status && <p className="text-sm text-muted-foreground">{status}</p>}
      {error && <p className="text-sm text-red-500">{error}</p>}
      {/* PLAYER MANUAL DA RESPOSTA */}
      {replyAudioUrl && (
        <div className="w-full max-w-md mt-2 flex flex-col items-center gap-2">
          <span className="text-xs text-muted-foreground">Última resposta da IA:</span>
          <audio controls src={replyAudioUrl} className="w-full" />
        </div>
      )}
    </div>
  );
 };
 export default AIVoiceFlow;
--- a/susconecta/components/ZoeIA/demo-file-upload.tsx
+++ b/susconecta/components/ZoeIA/demo-file-upload.tsx
@ -1,5 +0,0 @@
 import Component from "@/components/ui/file-upload-and-chat";
 export default function FileUploadChat() {
  return <Component />;
 }
--- a/susconecta/components/ZoeIA/demo-voice-orb.tsx
+++ b/susconecta/components/ZoeIA/demo-voice-orb.tsx
@ -1,107 +0,0 @@
 "use client";
 import { useEffect, useState } from "react";
 import { VoicePoweredOrb } from "@/components/ZoeIA/voice-powered-orb";
 import { AIAssistantInterface } from "@/components/ZoeIA/ai-assistant-interface";
 import { Button } from "@/components/ui/button";
 import { ArrowLeft, Mic, MicOff } from "lucide-react";
 export default function VoicePoweredOrbPage() {
  const [isRecording, setIsRecording] = useState(false);
  const [voiceDetected, setVoiceDetected] = useState(false);
  const [assistantOpen, setAssistantOpen] = useState(false);
  const toggleRecording = () => {
    setIsRecording(!isRecording);
  };
  useEffect(() => {
    if (!assistantOpen) return;
    const original = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = original;
    };
  }, [assistantOpen]);
  const openAssistant = () => setAssistantOpen(true);
  const closeAssistant = () => setAssistantOpen(false);
  return (
    <div className="min-h-screen d flex items-center justify-center p-8">
      <div className="flex flex-col items-center space-y-8">
        {assistantOpen && (
          <div className="fixed inset-0 z-50 flex flex-col bg-background">
            <div className="flex items-center justify-between border-b border-border px-4 py-3">
              <Button
                type="button"
                variant="ghost"
                className="flex items-center gap-2"
                onClick={closeAssistant}
              >
                <ArrowLeft className="h-4 w-4" />
                Voltar
              </Button>
            </div>
            <div className="flex-1 overflow-auto">
              <AIAssistantInterface />
            </div>
          </div>
        )}
        {/* Orb */}
        <div
          className="w-96 h-96 relative cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
          role="button"
          tabIndex={0}
          aria-label="Abrir assistente virtual"
          onClick={openAssistant}
          onKeyDown={(event) => {
            if (event.key === "Enter" || event.key === " ") {
              event.preventDefault();
              openAssistant();
            }
          }}
        >
          <VoicePoweredOrb
            enableVoiceControl={isRecording}
            className="rounded-xl overflow-hidden shadow-2xl"
            onVoiceDetected={setVoiceDetected}
          />
          {voiceDetected && (
            <span className="absolute bottom-4 right-4 rounded-full bg-primary/90 px-3 py-1 text-xs font-medium text-primary-foreground shadow-lg">
              Ouvindo…
            </span>
          )}
        </div>
        {/* Control Button */}
        <Button
          onClick={toggleRecording}
          variant={isRecording ? "destructive" : "default"}
          size="lg"
          className="px-8 py-3"
        >
          {isRecording ? (
            <>
              <MicOff className="w-5 h-5 mr-3" />
              Stop Recording
            </>
          ) : (
            <>
              <Mic className="w-5 h-5 mr-3" />
              Start Recording
            </>
          )}
        </Button>
        {/* Simple Instructions */}
        <p className="text-muted-foreground text-center max-w-md">
          Click the button to enable voice control. Speak to see the orb respond to your voice with subtle movements.
        </p>
      </div>
    </div>
  );
 }
--- a/susconecta/components/ZoeIA/demo.tsx
+++ b/susconecta/components/ZoeIA/demo.tsx
@ -1,10 +0,0 @@
 import * as React from "react"
 import { AIAssistantInterface } from "@/components/ZoeIA/ai-assistant-interface"
 export function Demo() {
  return (
    <div className="w-screen">
      <AIAssistantInterface />
    </div>
  )
 }
--- a/susconecta/components/ZoeIA/voice-powered-orb.tsx
+++ b/susconecta/components/ZoeIA/voice-powered-orb.tsx
@ -1,493 +0,0 @@
 "use client";
 import React, { useEffect, useRef, FC } from "react";
 import { Renderer, Program, Mesh, Triangle, Vec3 } from "ogl";
 import { cn } from "@/lib/utils";
 interface VoicePoweredOrbProps {
  className?: string;
  hue?: number;
  enableVoiceControl?: boolean;
  voiceSensitivity?: number;
  maxRotationSpeed?: number;
  maxHoverIntensity?: number;
  onVoiceDetected?: (detected: boolean) => void;
 }
 export const VoicePoweredOrb: FC<VoicePoweredOrbProps> = ({
  className,
  hue = 0,
  enableVoiceControl = true,
  voiceSensitivity = 1.5,
  maxRotationSpeed = 1.2,
  maxHoverIntensity = 0.8,
  onVoiceDetected,
 }) => {
  const ctnDom = useRef<HTMLDivElement>(null);
  const audioContextRef = useRef<AudioContext | null>(null);
  const analyserRef = useRef<AnalyserNode | null>(null);
  const microphoneRef = useRef<MediaStreamAudioSourceNode | null>(null);
  const dataArrayRef = useRef<Uint8Array | null>(null);
  const animationFrameRef = useRef<number>();
  const mediaStreamRef = useRef<MediaStream | null>(null);
  const vert = /* glsl */ `
    precision highp float;
    attribute vec2 position;
    attribute vec2 uv;
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = vec4(position, 0.0, 1.0);
    }
  `;
  const frag = /* glsl */ `
    precision highp float;
    uniform float iTime;
    uniform vec3 iResolution;
    uniform float hue;
    uniform float hover;
    uniform float rot;
    uniform float hoverIntensity;
    varying vec2 vUv;
    vec3 rgb2yiq(vec3 c) {
      float y = dot(c, vec3(0.299, 0.587, 0.114));
      float i = dot(c, vec3(0.596, -0.274, -0.322));
      float q = dot(c, vec3(0.211, -0.523, 0.312));
      return vec3(y, i, q);
    }
    vec3 yiq2rgb(vec3 c) {
      float r = c.x + 0.956 * c.y + 0.621 * c.z;
      float g = c.x - 0.272 * c.y - 0.647 * c.z;
      float b = c.x - 1.106 * c.y + 1.703 * c.z;
      return vec3(r, g, b);
    }
    vec3 adjustHue(vec3 color, float hueDeg) {
      float hueRad = hueDeg * 3.14159265 / 180.0;
      vec3 yiq = rgb2yiq(color);
      float cosA = cos(hueRad);
      float sinA = sin(hueRad);
      float i = yiq.y * cosA - yiq.z * sinA;
      float q = yiq.y * sinA + yiq.z * cosA;
      yiq.y = i;
      yiq.z = q;
      return yiq2rgb(yiq);
    }
    vec3 hash33(vec3 p3) {
      p3 = fract(p3 * vec3(0.1031, 0.11369, 0.13787));
      p3 += dot(p3, p3.yxz + 19.19);
      return -1.0 + 2.0 * fract(vec3(
        p3.x + p3.y,
        p3.x + p3.z,
        p3.y + p3.z
      ) * p3.zyx);
    }
    float snoise3(vec3 p) {
      const float K1 = 0.333333333;
      const float K2 = 0.166666667;
      vec3 i = floor(p + (p.x + p.y + p.z) * K1);
      vec3 d0 = p - (i - (i.x + i.y + i.z) * K2);
      vec3 e = step(vec3(0.0), d0 - d0.yzx);
      vec3 i1 = e * (1.0 - e.zxy);
      vec3 i2 = 1.0 - e.zxy * (1.0 - e);
      vec3 d1 = d0 - (i1 - K2);
      vec3 d2 = d0 - (i2 - K1);
      vec3 d3 = d0 - 0.5;
      vec4 h = max(0.6 - vec4(
        dot(d0, d0),
        dot(d1, d1),
        dot(d2, d2),
        dot(d3, d3)
      ), 0.0);
      vec4 n = h * h * h * h * vec4(
        dot(d0, hash33(i)),
        dot(d1, hash33(i + i1)),
        dot(d2, hash33(i + i2)),
        dot(d3, hash33(i + 1.0))
      );
      return dot(vec4(31.316), n);
    }
    vec4 extractAlpha(vec3 colorIn) {
      float a = max(max(colorIn.r, colorIn.g), colorIn.b);
      return vec4(colorIn.rgb / (a + 1e-5), a);
    }
    const vec3 baseColor1 = vec3(0.611765, 0.262745, 0.996078);
    const vec3 baseColor2 = vec3(0.298039, 0.760784, 0.913725);
    const vec3 baseColor3 = vec3(0.062745, 0.078431, 0.600000);
    const float innerRadius = 0.6;
    const float noiseScale = 0.65;
    float light1(float intensity, float attenuation, float dist) {
      return intensity / (1.0 + dist * attenuation);
    }
    float light2(float intensity, float attenuation, float dist) {
      return intensity / (1.0 + dist * dist * attenuation);
    }
    vec4 draw(vec2 uv) {
      vec3 color1 = adjustHue(baseColor1, hue);
      vec3 color2 = adjustHue(baseColor2, hue);
      vec3 color3 = adjustHue(baseColor3, hue);
      float ang = atan(uv.y, uv.x);
      float len = length(uv);
      float invLen = len > 0.0 ? 1.0 / len : 0.0;
      float n0 = snoise3(vec3(uv * noiseScale, iTime * 0.5)) * 0.5 + 0.5;
      float r0 = mix(mix(innerRadius, 1.0, 0.4), mix(innerRadius, 1.0, 0.6), n0);
      float d0 = distance(uv, (r0 * invLen) * uv);
      float v0 = light1(1.0, 10.0, d0);
      v0 *= smoothstep(r0 * 1.05, r0, len);
      float cl = cos(ang + iTime * 2.0) * 0.5 + 0.5;
      float a = iTime * -1.0;
      vec2 pos = vec2(cos(a), sin(a)) * r0;
      float d = distance(uv, pos);
      float v1 = light2(1.5, 5.0, d);
      v1 *= light1(1.0, 50.0, d0);
      float v2 = smoothstep(1.0, mix(innerRadius, 1.0, n0 * 0.5), len);
      float v3 = smoothstep(innerRadius, mix(innerRadius, 1.0, 0.5), len);
      vec3 col = mix(color1, color2, cl);
      col = mix(color3, col, v0);
      col = (col + v1) * v2 * v3;
      col = clamp(col, 0.0, 1.0);
      return extractAlpha(col);
    }
    vec4 mainImage(vec2 fragCoord) {
      vec2 center = iResolution.xy * 0.5;
      float size = min(iResolution.x, iResolution.y);
      vec2 uv = (fragCoord - center) / size * 2.0;
      float angle = rot;
      float s = sin(angle);
      float c = cos(angle);
      uv = vec2(c * uv.x - s * uv.y, s * uv.x + c * uv.y);
      uv.x += hover * hoverIntensity * 0.1 * sin(uv.y * 10.0 + iTime);
      uv.y += hover * hoverIntensity * 0.1 * sin(uv.x * 10.0 + iTime);
      return draw(uv);
    }
    void main() {
      vec2 fragCoord = vUv * iResolution.xy;
      vec4 col = mainImage(fragCoord);
      gl_FragColor = vec4(col.rgb * col.a, col.a);
    }
  `;
  // Voice analysis function
    const analyzeAudio = () => {
      if (!analyserRef.current || !dataArrayRef.current) return 0;
      // To avoid type incompatibilities between different ArrayBuffer-like types
      // (Uint8Array<ArrayBufferLike> vs Uint8Array<ArrayBuffer>), create a
      // standard Uint8Array copy with an ArrayBuffer backing it. This satisfies
      // the Web Audio API typing and is safe (small cost to copy).
      const src = dataArrayRef.current as Uint8Array;
      const buffer = Uint8Array.from(src);
      analyserRef.current.getByteFrequencyData(buffer);
      // Calculate RMS (Root Mean Square) for better voice detection
      let sum = 0;
      for (let i = 0; i < buffer.length; i++) {
        const value = buffer[i] / 255;
        sum += value * value;
      }
      const rms = Math.sqrt(sum / buffer.length);
      // Apply sensitivity and boost the signal
      const level = Math.min(rms * voiceSensitivity * 3.0, 1);
      return level;
    };
  // Stop microphone and cleanup
  const stopMicrophone = () => {
    try {
      // Stop all tracks in the media stream
      if (mediaStreamRef.current) {
        mediaStreamRef.current.getTracks().forEach(track => {
          track.stop();
        });
        mediaStreamRef.current = null;
      }
      // Disconnect and cleanup audio nodes
      if (microphoneRef.current) {
        microphoneRef.current.disconnect();
        microphoneRef.current = null;
      }
      if (analyserRef.current) {
        analyserRef.current.disconnect();
        analyserRef.current = null;
      }
      // Close audio context
      if (audioContextRef.current && audioContextRef.current.state !== 'closed') {
        audioContextRef.current.close();
        audioContextRef.current = null;
      }
      dataArrayRef.current = null;
      console.log('Microphone stopped and cleaned up');
    } catch (error) {
      console.warn('Error stopping microphone:', error);
    }
  };
  // Initialize microphone access
  const initMicrophone = async () => {
    try {
      // Clean up any existing microphone first
      stopMicrophone();
      const stream = await navigator.mediaDevices.getUserMedia({
        audio: {
          echoCancellation: false,
          noiseSuppression: false,
          autoGainControl: false,
          sampleRate: 44100,
        },
      });
      mediaStreamRef.current = stream;
      audioContextRef.current = new (window.AudioContext || (window as any).webkitAudioContext)();
      if (audioContextRef.current.state === 'suspended') {
        await audioContextRef.current.resume();
      }
      analyserRef.current = audioContextRef.current.createAnalyser();
      microphoneRef.current = audioContextRef.current.createMediaStreamSource(stream);
      analyserRef.current.fftSize = 512;
      analyserRef.current.smoothingTimeConstant = 0.3;
      analyserRef.current.minDecibels = -90;
      analyserRef.current.maxDecibels = -10;
      microphoneRef.current.connect(analyserRef.current);
      dataArrayRef.current = new Uint8Array(analyserRef.current.frequencyBinCount);
      console.log('Microphone initialized successfully');
      return true;
    } catch (error) {
      console.warn("Microphone access denied or not available:", error);
      return false;
    }
  };
  useEffect(() => {
    const container = ctnDom.current;
    if (!container) return;
    let rendererInstance: any = null;
    let glContext: WebGLRenderingContext | WebGL2RenderingContext | null = null;
    let rafId: number;
    let program: any = null;
    try {
      rendererInstance = new Renderer({
        alpha: true,
        premultipliedAlpha: false,
        antialias: true,
        dpr: window.devicePixelRatio || 1
      });
      glContext = rendererInstance.gl as WebGLRenderingContext;
      glContext.clearColor(0, 0, 0, 0);
      glContext.enable((glContext as any).BLEND);
      glContext.blendFunc((glContext as any).SRC_ALPHA, (glContext as any).ONE_MINUS_SRC_ALPHA);
      while (container.firstChild) {
        container.removeChild(container.firstChild);
      }
      container.appendChild((glContext as any).canvas);
      const geometry = new Triangle(glContext as any);
      program = new Program(glContext as any, {
        vertex: vert,
        fragment: frag,
        uniforms: {
          iTime: { value: 0 },
          iResolution: {
            value: new Vec3(
              (glContext as any).canvas.width,
              (glContext as any).canvas.height,
              (glContext as any).canvas.width / (glContext as any).canvas.height
            ),
          },
          hue: { value: hue },
          hover: { value: 0 },
          rot: { value: 0 },
          hoverIntensity: { value: 0 },
        },
      });
      const mesh = new Mesh(glContext as any, { geometry, program });
      const resize = () => {
        if (!container || !rendererInstance || !glContext) return;
        const dpr = window.devicePixelRatio || 1;
        const width = container.clientWidth;
        const height = container.clientHeight;
        if (width === 0 || height === 0) return;
        rendererInstance.setSize(width * dpr, height * dpr);
        (glContext as any).canvas.style.width = width + "px";
        (glContext as any).canvas.style.height = height + "px";
        if (program) {
          program.uniforms.iResolution.value.set(
            (glContext as any).canvas.width,
            (glContext as any).canvas.height,
            (glContext as any).canvas.width / (glContext as any).canvas.height
          );
        }
      };
      window.addEventListener("resize", resize);
      resize();
      let lastTime = 0;
      let currentRot = 0;
      let voiceLevel = 0;
      const baseRotationSpeed = 0.3;
      let isMicrophoneInitialized = false;
      if (enableVoiceControl) {
        initMicrophone().then((success) => {
          isMicrophoneInitialized = success;
        });
      } else {
        stopMicrophone();
        isMicrophoneInitialized = false;
      }
      const update = (t: number) => {
        rafId = requestAnimationFrame(update);
        if (!program) return;
        const dt = (t - lastTime) * 0.001;
        lastTime = t;
        program.uniforms.iTime.value = t * 0.001;
        program.uniforms.hue.value = hue;
        if (enableVoiceControl && isMicrophoneInitialized) {
          voiceLevel = analyzeAudio();
          if (onVoiceDetected) {
            onVoiceDetected(voiceLevel > 0.1);
          }
          const voiceRotationSpeed = baseRotationSpeed + (voiceLevel * maxRotationSpeed * 2.0);
          if (voiceLevel > 0.05) {
            currentRot += dt * voiceRotationSpeed;
          }
          program.uniforms.hover.value = Math.min(voiceLevel * 2.0, 1.0);
          program.uniforms.hoverIntensity.value = Math.min(voiceLevel * maxHoverIntensity * 0.8, maxHoverIntensity);
        } else {
          program.uniforms.hover.value = 0;
          program.uniforms.hoverIntensity.value = 0;
          if (onVoiceDetected) {
            onVoiceDetected(false);
          }
        }
        program.uniforms.rot.value = currentRot;
        if (rendererInstance && glContext) {
          glContext.clear((glContext as any).COLOR_BUFFER_BIT | (glContext as any).DEPTH_BUFFER_BIT);
          rendererInstance.render({ scene: mesh });
        }
      };
      rafId = requestAnimationFrame(update);
      return () => {
        cancelAnimationFrame(rafId);
        window.removeEventListener("resize", resize);
        try {
          if (container && glContext && (glContext as any).canvas) {
            if (container.contains((glContext as any).canvas)) {
              container.removeChild((glContext as any).canvas);
            }
          }
        } catch (error) {
          console.warn("Canvas cleanup error:", error);
        }
        stopMicrophone();
        if (glContext) {
          (glContext as any).getExtension("WEBGL_lose_context")?.loseContext();
        }
      };
    } catch (error) {
      console.error("Error initializing Voice Powered Orb:", error);
      if (container && container.firstChild) {
        container.removeChild(container.firstChild);
      }
      return () => {
        window.removeEventListener("resize", () => {});
      };
    }
  }, [
    hue,
    enableVoiceControl,
    voiceSensitivity,
    maxRotationSpeed,
    maxHoverIntensity,
    vert,
    frag,
  ]);
  useEffect(() => {
    let isMounted = true;
    const handleMicrophoneState = async () => {
      if (enableVoiceControl) {
        const success = await initMicrophone();
        if (!isMounted) return;
      } else {
        stopMicrophone();
      }
    };
    handleMicrophoneState();
    return () => {
      isMounted = false;
    };
  }, [enableVoiceControl]);
  return (
    <div
      ref={ctnDom}
      className={cn(
        "w-full h-full relative",
        className
      )}
    >
    </div>
  );
 };
--- a/susconecta/components/features/dashboard/header.tsx
+++ b/susconecta/components/features/dashboard/header.tsx
@ -33,32 +33,40 @@ export function PagesHeader({ title = "", subtitle = "" }: { title?: string, sub
  }, [dropdownOpen]);
  return (
-    <header className="sticky top-0 z-40 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 px-3 sm:px-6 py-2 flex flex-wrap items-center gap-3">
+    <header className="h-16 border-b border-border bg-background px-6 flex items-center justify-between">
-      <div className="flex items-center gap-3 min-w-0">
+      <div className="flex flex-row items-center gap-4">
        <SidebarTrigger />
-        <div className="flex flex-col justify-center leading-tight min-w-0">
+        <div className="flex items-start flex-col justify-center py-2">
-          <h1 className="text-sm sm:text-lg font-semibold text-foreground truncate max-w-[55vw] sm:max-w-none">{title}</h1>
+          <h1 className="text-lg font-semibold text-foreground">{title}</h1>
-          {subtitle && (
+          <p className="text-muted-foreground">{subtitle}</p>
            <p className="text-[11px] sm:text-xs text-muted-foreground truncate max-w-[55vw] sm:max-w-none">{subtitle}</p>
          )}
        </div>
      </div>
-      <div className="flex items-center gap-2 ml-auto">
+
-        <Button variant="ghost" size="icon" className="hover-primary-blue hidden xs:flex">
+      <div className="flex items-center space-x-4">
  <Button variant="ghost" size="icon" className="hover:bg-primary! hover:text-white! transition-colors">
          <Bell className="h-4 w-4" />
        </Button>
        <SimpleThemeToggle />
                    <Button
                      variant="outline"
                      className="text-primary border-primary bg-transparent shadow-sm shadow-blue-500/10 border border-blue-200 hover:bg-blue-50 dark:shadow-none dark:border-primary dark:hover:bg-primary dark:hover:text-primary-foreground"
                      asChild
                    ></Button>
        {/* Avatar Dropdown Simples */}
        <div className="relative" ref={dropdownRef}>
          <Button 
            variant="ghost" 
-            className="relative h-8 w-8 rounded-full border border-border hover:border-primary"
+            className="relative h-8 w-8 rounded-full border-2 border-border hover:border-primary"
            onClick={() => setDropdownOpen(!dropdownOpen)}
            aria-label="Abrir menu do perfil"
          >
            {/* Mostrar foto do usuário quando disponível; senão, mostrar fallback com iniciais */}
            <Avatar className="h-8 w-8">
-              {(() => {
+              {
                (() => {
                  const userPhoto = (user as any)?.profile?.foto_url || (user as any)?.profile?.fotoUrl || (user as any)?.profile?.avatar_url
                  const alt = user?.name || user?.email || 'Usuário'
                  const getInitials = (name?: string, email?: string) => {
                    if (name) {
                      const parts = name.trim().split(/\s+/)
@ -69,32 +77,37 @@ export function PagesHeader({ title = "", subtitle = "" }: { title?: string, sub
                    if (email) return email.charAt(0).toUpperCase()
                    return 'U'
                  }
                  return (
                    <>
                      <AvatarImage src={userPhoto || undefined} alt={alt} />
                      <AvatarFallback className="bg-primary text-primary-foreground font-semibold">{getInitials(user?.name, user?.email)}</AvatarFallback>
                    </>
                  )
-              })()}
+                })()
              }
            </Avatar>
          </Button>
          {/* Dropdown Content */}
          {dropdownOpen && (
-            <div className="absolute right-0 mt-2 w-64 sm:w-80 bg-popover border border-border rounded-md shadow-lg z-[100] text-popover-foreground animate-in fade-in slide-in-from-top-2">
+            <div className="absolute right-0 mt-2 w-80 bg-popover border border-border rounded-md shadow-lg z-50 text-popover-foreground">
-              <div className="p-3 sm:p-4 border-b border-border">
+              <div className="p-4 border-b border-border">
                <div className="flex flex-col space-y-1">
-                  <p className="text-xs sm:text-sm font-semibold leading-none">
+                  <p className="text-sm font-semibold leading-none">
                    {user?.userType === 'administrador' ? 'Administrador da Clínica' : 'Usuário do Sistema'}
                  </p>
                  {user?.email ? (
-                    <p className="text-[10px] sm:text-xs leading-none text-muted-foreground truncate">{user.email}</p>
+                    <p className="text-xs leading-none text-muted-foreground">{user.email}</p>
                  ) : (
-                    <p className="text-[10px] sm:text-xs leading-none text-muted-foreground">Email não disponível</p>
+                    <p className="text-xs leading-none text-muted-foreground">Email não disponível</p>
                  )}
-                  <p className="text-[10px] sm:text-xs leading-none text-primary font-medium">
+                  <p className="text-xs leading-none text-primary font-medium">
                    Tipo: {user?.userType === 'administrador' ? 'Administrador' : user?.userType || 'Não definido'}
                  </p>
                </div>
              </div>
              <div className="py-1">
                <button 
                  onClick={(e) => {
@ -102,18 +115,21 @@ export function PagesHeader({ title = "", subtitle = "" }: { title?: string, sub
                    setDropdownOpen(false);
                    router.push('/perfil');
                  }}
-                  className="w-full text-left px-3 sm:px-4 py-2 text-xs sm:text-sm hover:bg-accent cursor-pointer"
+                  className="w-full text-left px-4 py-2 text-sm hover:bg-accent cursor-pointer"
                >
                   Perfil
                </button>
-                <div className="border-t border-border my-1" />
+                
                <div className="border-t border-border my-1"></div>
                <button 
                  onClick={(e) => {
                    e.preventDefault();
                    setDropdownOpen(false);
                    // Usar sempre o logout do hook useAuth (ele já redireciona corretamente)
                    logout();
                  }}
-                  className="w-full text-left px-3 sm:px-4 py-2 text-xs sm:text-sm text-destructive hover:bg-destructive/10 cursor-pointer"
+                  className="w-full text-left px-4 py-2 text-sm text-destructive hover:bg-destructive/10 cursor-pointer"
                >
                   Sair
                </button>
--- a/susconecta/components/features/forms/availability-form.tsx
+++ b/susconecta/components/features/forms/availability-form.tsx
@ -1,6 +1,6 @@
 "use client"
-import { useState, useEffect, useMemo } from 'react'
+import { useState, useEffect } from 'react'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
 import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@/components/ui/alert-dialog'
 import { Button } from '@/components/ui/button'
@ -18,11 +18,9 @@ export interface AvailabilityFormProps {
  // when editing, pass the existing availability and set mode to 'edit'
  availability?: DoctorAvailability | null
  mode?: 'create' | 'edit'
  // existing availabilities to prevent duplicate weekday selection
  existingAvailabilities?: DoctorAvailability[]
 }
-export function AvailabilityForm({ open, onOpenChange, doctorId = null, onSaved, availability = null, mode = 'create', existingAvailabilities = [] }: AvailabilityFormProps) {
+export function AvailabilityForm({ open, onOpenChange, doctorId = null, onSaved, availability = null, mode = 'create' }: AvailabilityFormProps) {
  const [weekday, setWeekday] = useState<string>('segunda')
  const [startTime, setStartTime] = useState<string>('09:00')
  const [endTime, setEndTime] = useState<string>('17:00')
@ -33,28 +31,6 @@ export function AvailabilityForm({ open, onOpenChange, doctorId = null, onSaved,
  const { toast } = useToast()
  const [blockedException, setBlockedException] = useState<null | { date: string; reason?: string; times?: string }>(null)
  // Normalize weekday to standard format for comparison
  const normalizeWeekdayForComparison = (w?: string) => {
    if (!w) return w;
    const k = String(w).toLowerCase().normalize('NFD').replace(/\p{Diacritic}/gu, '').replace(/[^a-z0-9]/g, '');
    const map: Record<string,string> = {
      'segunda':'segunda','terca':'terca','quarta':'quarta','quinta':'quinta','sexta':'sexta','sabado':'sabado','domingo':'domingo',
      'monday':'segunda','tuesday':'terca','wednesday':'quarta','thursday':'quinta','friday':'sexta','saturday':'sabado','sunday':'domingo',
      '1':'segunda','2':'terca','3':'quarta','4':'quinta','5':'sexta','6':'sabado','0':'domingo','7':'domingo'
    };
    return map[k] ?? k;
  };
  // Get list of already used weekdays (excluding current one in edit mode)
  const usedWeekdays = useMemo(() => {
    return new Set(
      (existingAvailabilities || [])
        .filter(a => mode === 'edit' ? a.id !== availability?.id : true)
        .map(a => normalizeWeekdayForComparison(a.weekday))
        .filter(Boolean)
    );
  }, [existingAvailabilities, mode, availability?.id]);
  // When editing, populate state from availability prop
  useEffect(() => {
    if (mode === 'edit' && availability) {
@ -71,17 +47,6 @@ export function AvailabilityForm({ open, onOpenChange, doctorId = null, onSaved,
    }
  }, [mode, availability])
  // When creating and modal opens, set the first available weekday
  useEffect(() => {
    if (mode === 'create' && open) {
      const allWeekdays = ['segunda', 'terca', 'quarta', 'quinta', 'sexta', 'sabado', 'domingo'];
      const firstAvailable = allWeekdays.find(day => !usedWeekdays.has(day));
      if (firstAvailable) {
        setWeekday(firstAvailable);
      }
    }
  }, [mode, open, usedWeekdays])
  async function handleSubmit(e?: React.FormEvent) {
    e?.preventDefault()
    if (!doctorId) {
@ -216,25 +181,25 @@ export function AvailabilityForm({ open, onOpenChange, doctorId = null, onSaved,
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
-          <DialogTitle>{mode === 'edit' ? 'Editar disponibilidade' : 'Criar disponibilidade'}</DialogTitle>
+          <DialogTitle>Criar disponibilidade</DialogTitle>
        </DialogHeader>
        <form onSubmit={handleSubmit} className="space-y-4 py-4">
          <div className="grid grid-cols-2 gap-4">
            <div>
              <Label>Dia da semana</Label>
-              <Select value={weekday} onValueChange={(v) => setWeekday(v)} disabled={mode === 'edit'}>
+              <Select value={weekday} onValueChange={(v) => setWeekday(v)}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
-                  <SelectItem value="segunda" disabled={usedWeekdays.has('segunda')}>Segunda</SelectItem>
+                  <SelectItem value="segunda">Segunda</SelectItem>
-                  <SelectItem value="terca" disabled={usedWeekdays.has('terca')}>Terça</SelectItem>
+                  <SelectItem value="terca">Terça</SelectItem>
-                  <SelectItem value="quarta" disabled={usedWeekdays.has('quarta')}>Quarta</SelectItem>
+                  <SelectItem value="quarta">Quarta</SelectItem>
-                  <SelectItem value="quinta" disabled={usedWeekdays.has('quinta')}>Quinta</SelectItem>
+                  <SelectItem value="quinta">Quinta</SelectItem>
-                  <SelectItem value="sexta" disabled={usedWeekdays.has('sexta')}>Sexta</SelectItem>
+                  <SelectItem value="sexta">Sexta</SelectItem>
-                  <SelectItem value="sabado" disabled={usedWeekdays.has('sabado')}>Sábado</SelectItem>
+                  <SelectItem value="sabado">Sábado</SelectItem>
-                  <SelectItem value="domingo" disabled={usedWeekdays.has('domingo')}>Domingo</SelectItem>
+                  <SelectItem value="domingo">Domingo</SelectItem>
                </SelectContent>
              </Select>
            </div>
@ -277,7 +242,7 @@ export function AvailabilityForm({ open, onOpenChange, doctorId = null, onSaved,
          <DialogFooter>
            <Button variant="ghost" onClick={() => onOpenChange(false)} disabled={submitting}>Cancelar</Button>
-            <Button type="submit" disabled={submitting}>{submitting ? 'Salvando...' : (mode === 'edit' ? 'Salvar alterações' : 'Criar disponibilidade')}</Button>
+            <Button type="submit" disabled={submitting}>{submitting ? 'Salvando...' : 'Criar disponibilidade'}</Button>
          </DialogFooter>
        </form>
      </DialogContent>
--- a/susconecta/components/features/forms/calendar-registration-form.tsx
+++ b/susconecta/components/features/forms/calendar-registration-form.tsx
@ -414,32 +414,36 @@ export function CalendarRegistrationForm({ formData, onFormChange, createMode =
          } catch (e) {}
          const generatedSet = new Set<string>();
          // Helper to create ISO-like string without timezone conversion
          const toLocalISOString = (date: Date) => {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');
            return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
          };
          windows.forEach((w: any) => {
            try {
              const perWindowStep = Number(w.slotMinutes) || stepMinutes;
              const startMs = w.winStart.getTime();
              const endMs = w.winEnd.getTime();
              const lastStartMs = endMs - perWindowStep * 60000;
              const backendSlotsInWindow = (av.slots || []).filter((s: any) => {
                try {
                  const sd = new Date(s.datetime);
                  const sm = sd.getHours() * 60 + sd.getMinutes();
                  const wmStart = w.winStart.getHours() * 60 + w.winStart.getMinutes();
                  const wmEnd = w.winEnd.getHours() * 60 + w.winEnd.getMinutes();
                  return sm >= wmStart && sm <= wmEnd;
                } catch (e) { return false; }
              }).map((s: any) => new Date(s.datetime).getTime()).sort((a: number, b: number) => a - b);
-              // Always generate slots from the start of the window to the end
+              if (!backendSlotsInWindow.length) {
              // This ensures slots start at the configured availability start time
                let cursorMs = startMs;
                while (cursorMs <= lastStartMs) {
-                generatedSet.add(toLocalISOString(new Date(cursorMs)));
+                  generatedSet.add(new Date(cursorMs).toISOString());
                  cursorMs += perWindowStep * 60000;
                }
              } else {
                const lastBackendMs = backendSlotsInWindow[backendSlotsInWindow.length - 1];
                let cursorMs = lastBackendMs + perWindowStep * 60000;
                while (cursorMs <= lastStartMs) {
                  generatedSet.add(new Date(cursorMs).toISOString());
                  cursorMs += perWindowStep * 60000;
                }
              }
            } catch (e) {}
          });
@ -459,10 +463,15 @@ export function CalendarRegistrationForm({ formData, onFormChange, createMode =
            } catch (e) { return null; }
          };
-          // Use only generated slots based on availability windows
+          (existingInWindow || []).forEach((s: any) => {
            const sm = findWindowSlotMinutes(s.datetime);
            mergedMap.set(s.datetime, sm ? { ...s, slot_minutes: sm } : { ...s });
          });
          Array.from(generatedSet).forEach((dt) => {
            if (!mergedMap.has(dt)) {
              const sm = findWindowSlotMinutes(dt) || stepMinutes;
              mergedMap.set(dt, { datetime: dt, available: true, slot_minutes: sm });
            }
          });
          const merged = Array.from(mergedMap.values()).sort((a, b) => new Date(a.datetime).getTime() - new Date(b.datetime).getTime());
@ -860,39 +869,22 @@ export function CalendarRegistrationForm({ formData, onFormChange, createMode =
          <div className="md:col-span-6 flex items-start justify-end">
            <div className="text-right text-sm">
              {loadingPatient ? (
-                <div className="text-muted-foreground">Carregando dados do paciente...</div>
+                <div>Carregando dados do paciente...</div>
              ) : patientDetails ? (
                patientDetails.error ? (
                  <div className="text-red-500">Erro ao carregar paciente: {String(patientDetails.error)}</div>
                ) : (
-                  <div className="grid grid-cols-1 gap-2 bg-muted/30 p-4 rounded-lg border border-border">
+                  <div className="text-sm text-muted-foreground space-y-1">
-                    <div className="flex items-center justify-between">
+                    <div><strong>CPF:</strong> {patientDetails.cpf || '-'}</div>
-                      <span className="text-xs text-muted-foreground">CPF:</span>
+                    <div><strong>Telefone:</strong> {patientDetails.phone_mobile || patientDetails.telefone || '-'}</div>
-                      <span className="text-sm font-medium text-foreground">{patientDetails.cpf || '-'}</span>
+                    <div><strong>E-mail:</strong> {patientDetails.email || '-'}</div>
-                    </div>
+                    <div><strong>Data de nascimento:</strong> {patientDetails.birth_date || '-'}</div>
                    <div className="flex items-center justify-between">
                      <span className="text-xs text-muted-foreground">Telefone:</span>
                      <span className="text-sm font-medium text-foreground">{patientDetails.phone_mobile || patientDetails.telefone || '-'}</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-xs text-muted-foreground">E-mail:</span>
                      <span className="text-sm font-medium text-foreground">{patientDetails.email || '-'}</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-xs text-muted-foreground">Data de nascimento:</span>
                      <span className="text-sm font-medium text-foreground">
                        {patientDetails.birth_date 
                          ? new Date(patientDetails.birth_date + 'T00:00:00').toLocaleDateString('pt-BR')
                          : '-'
                        }
                      </span>
                    </div>
                  </div>
                )
              ) : (
                <div className="text-xs text-muted-foreground">Paciente não vinculado</div>
              )}
-              <div className="mt-2 text-xs text-muted-foreground italic">Para editar os dados do paciente, acesse a ficha do paciente.</div>
+              <div className="mt-1 text-xs text-muted-foreground">Para editar os dados do paciente, acesse a ficha do paciente.</div>
            </div>
          </div>
        </div>
@ -1041,11 +1033,7 @@ export function CalendarRegistrationForm({ formData, onFormChange, createMode =
                                    const d = new Date(s.datetime);
                                    const hh = String(d.getHours()).padStart(2, '0');
                                    const mm = String(d.getMinutes()).padStart(2, '0');
-                                    // Use local date components instead of toISOString to avoid timezone conversion
+                                    const dateOnly = d.toISOString().split('T')[0];
                                    const year = d.getFullYear();
                                    const month = String(d.getMonth() + 1).padStart(2, '0');
                                    const day = String(d.getDate()).padStart(2, '0');
                                    const dateOnly = `${year}-${month}-${day}`;
                                    return dateOnly === date && `${hh}:${mm}` === time;
                                  } catch (e) {
                                    return false;
@ -1066,8 +1054,7 @@ export function CalendarRegistrationForm({ formData, onFormChange, createMode =
                                }
                                const hh = String(dt.getHours()).padStart(2, '0');
                                const mm = String(dt.getMinutes()).padStart(2, '0');
-                                // Keep the existing appointmentDate, don't override it
+                                const dateOnly = dt.toISOString().split('T')[0];
                                const currentDate = (formData as any).appointmentDate;
                                // set duration from slot if available
                                const sel = (availableSlots || []).find((s) => s.datetime === value) as any;
                                const slotMinutes = sel && sel.slot_minutes ? Number(sel.slot_minutes) : null;
@ -1078,11 +1065,11 @@ export function CalendarRegistrationForm({ formData, onFormChange, createMode =
                                const endM = String(endDt.getMinutes()).padStart(2, '0');
                                const endStr = `${endH}:${endM}`;
                                if (slotMinutes) {
-                                  onFormChange({ ...formData, appointmentDate: currentDate, startTime: `${hh}:${mm}`, duration_minutes: slotMinutes, endTime: endStr });
+                                  onFormChange({ ...formData, appointmentDate: dateOnly, startTime: `${hh}:${mm}`, duration_minutes: slotMinutes, endTime: endStr });
                                  try { setLockedDurationFromSlot(true); } catch (e) {}
                                  try { (lastAutoEndRef as any).current = endStr; } catch (e) {}
                                } else {
-                                  onFormChange({ ...formData, appointmentDate: currentDate, startTime: `${hh}:${mm}`, endTime: endStr });
+                                  onFormChange({ ...formData, appointmentDate: dateOnly, startTime: `${hh}:${mm}`, endTime: endStr });
                                  try { (lastAutoEndRef as any).current = endStr; } catch (e) {}
                                }
                              } catch (e) {
@ -1184,8 +1171,9 @@ export function CalendarRegistrationForm({ formData, onFormChange, createMode =
                              type="button"
                              className={`h-10 rounded-md border ${formData.startTime === `${hh}:${mm}` ? 'bg-blue-600 text-white' : 'bg-background'}`}
                              onClick={() => {
-                                // when selecting a slot, keep the existing appointmentDate and only update time
+                                // when selecting a slot, set appointmentDate (if missing) and startTime and duration
-                                const currentDate = (formData as any).appointmentDate;
+                                const isoDate = dt.toISOString();
                                const dateOnly = isoDate.split('T')[0];
                                const slotMinutes = s.slot_minutes || null;
                                  // compute endTime based on duration
                                  const durationForCalc = slotMinutes || (formData as any).duration_minutes || 0;
@ -1194,11 +1182,11 @@ export function CalendarRegistrationForm({ formData, onFormChange, createMode =
                                  const endM = String(endDt.getMinutes()).padStart(2, '0');
                                  const endStr = `${endH}:${endM}`;
                                  if (slotMinutes) {
-                                    onFormChange({ ...formData, appointmentDate: currentDate, startTime: `${hh}:${mm}`, duration_minutes: Number(slotMinutes), endTime: endStr });
+                                    onFormChange({ ...formData, appointmentDate: dateOnly, startTime: `${hh}:${mm}`, duration_minutes: Number(slotMinutes), endTime: endStr });
                                    try { setLockedDurationFromSlot(true); } catch (e) {}
                                    try { (lastAutoEndRef as any).current = endStr; } catch (e) {}
                                  } else {
-                                    onFormChange({ ...formData, appointmentDate: currentDate, startTime: `${hh}:${mm}`, endTime: endStr });
+                                    onFormChange({ ...formData, appointmentDate: dateOnly, startTime: `${hh}:${mm}`, endTime: endStr });
                                    try { (lastAutoEndRef as any).current = endStr; } catch (e) {}
                                  }
                              }}
--- a/susconecta/components/features/forms/doctor-registration-form.tsx
+++ b/susconecta/components/features/forms/doctor-registration-form.tsx
@ -821,7 +821,7 @@ async function handleSubmit(ev: React.FormEvent) {
                        <Button
                          variant={"outline"}
                          className={cn(
-                            "w-full justify-start text-left font-normal hover:bg-muted hover:text-foreground",
+                            "w-full justify-start text-left font-normal",
                            !form.data_nascimento && "text-muted-foreground"
                          )}
                        >
@ -835,10 +835,6 @@ async function handleSubmit(ev: React.FormEvent) {
                          selected={form.data_nascimento ?? undefined}
                          onSelect={(date) => setField("data_nascimento", date ?? null)}
                          initialFocus
                          captionLayout="dropdown"
                          fromYear={1900}
                          toYear={new Date().getFullYear()}
                          disabled={(date) => date > new Date()}
                        />
                      </PopoverContent>
                    </Popover>
--- a/susconecta/components/features/forms/exception-form.tsx
+++ b/susconecta/components/features/forms/exception-form.tsx
@ -6,8 +6,6 @@ import { Button } from '@/components/ui/button'
 import { Label } from '@/components/ui/label'
 import { Input } from '@/components/ui/input'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Calendar as CalendarComponent } from '@/components/ui/calendar'
 import { Calendar } from 'lucide-react'
 import { criarExcecao, DoctorExceptionCreate } from '@/lib/api'
 import { useToast } from '@/hooks/use-toast'
@ -25,22 +23,8 @@ export default function ExceptionForm({ open, onOpenChange, doctorId = null, onS
  const [kind, setKind] = useState<'bloqueio'|'liberacao'>('bloqueio')
  const [reason, setReason] = useState<string>('')
  const [submitting, setSubmitting] = useState(false)
  const [showDatePicker, setShowDatePicker] = useState(false)
  const { toast } = useToast()
  // Resetar form quando dialog fecha
  const handleOpenChange = (newOpen: boolean) => {
    if (!newOpen) {
      setDate('')
      setStartTime('')
      setEndTime('')
      setKind('bloqueio')
      setReason('')
      setShowDatePicker(false)
    }
    onOpenChange(newOpen)
  }
  async function handleSubmit(e?: React.FormEvent) {
    e?.preventDefault()
    if (!doctorId) {
@ -66,7 +50,7 @@ export default function ExceptionForm({ open, onOpenChange, doctorId = null, onS
      const saved = await criarExcecao(payload)
      toast({ title: 'Exceção criada', description: `${payload.date} • ${kind}`, variant: 'default' })
      onSaved?.(saved)
-      handleOpenChange(false)
+      onOpenChange(false)
    } catch (err: any) {
      console.error('Erro ao criar exceção:', err)
      toast({ title: 'Erro', description: err?.message || String(err), variant: 'destructive' })
@ -76,74 +60,16 @@ export default function ExceptionForm({ open, onOpenChange, doctorId = null, onS
  }
  return (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
+    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Criar exceção</DialogTitle>
        </DialogHeader>
        <form onSubmit={handleSubmit} className="space-y-4 py-4">
-          <div className="space-y-2">
+          <div>
-            <div className="flex items-center gap-2">
+            <Label>Data</Label>
-              <Label className="text-[13px]">Data *</Label>
+            <Input type="date" value={date} onChange={(e) => setDate(e.target.value)} />
              <button
                type="button"
                aria-label="Abrir seletor de data"
                onClick={() => setShowDatePicker(!showDatePicker)}
                className="h-6 w-6 flex items-center justify-center text-muted-foreground hover:text-foreground cursor-pointer"
              >
                <Calendar className="h-4 w-4" />
              </button>
            </div>
            <div className="relative">
              <Input 
                type="text"
                placeholder="DD/MM/AAAA"
                className="h-11 w-full rounded-md pl-3 pr-3 text-[13px] transition-colors hover:bg-muted/30" 
                value={date ? (() => {
                  try {
                    const [y, m, d] = String(date).split('-');
                    return `${d}/${m}/${y}`;
                  } catch (e) {
                    return '';
                  }
                })() : ''} 
                readOnly
              />
              {showDatePicker && (
                <div className="absolute top-full left-0 mt-1 z-50 bg-card border border-border rounded-md shadow-lg p-3">
                  <CalendarComponent
                    mode="single"
                    selected={date ? (() => {
                      try {
                        // Parse como local date para compatibilidade com Calendar
                        const [y, m, d] = String(date).split('-').map(Number);
                        return new Date(y, m - 1, d);
                      } catch (e) {
                        return undefined;
                      }
                    })() : undefined}
                    onSelect={(selectedDate) => {
                      if (selectedDate) {
                        // Extrair data como local para evitar problemas de timezone
                        const y = selectedDate.getFullYear();
                        const m = String(selectedDate.getMonth() + 1).padStart(2, '0');
                        const d = String(selectedDate.getDate()).padStart(2, '0');
                        const dateStr = `${y}-${m}-${d}`;
                        console.log('[ExceptionForm] Data selecionada:', dateStr, 'de', selectedDate);
                        setDate(dateStr);
                        setShowDatePicker(false);
                      }
                    }}
                    disabled={(checkDate) => {
                      const today = new Date();
                      today.setHours(0, 0, 0, 0);
                      return checkDate < today;
                    }}
                  />
                </div>
              )}
            </div>
          </div>
          <div className="grid grid-cols-2 gap-4">
@ -176,7 +102,7 @@ export default function ExceptionForm({ open, onOpenChange, doctorId = null, onS
          </div>
          <DialogFooter>
-            <Button variant="ghost" onClick={() => handleOpenChange(false)} disabled={submitting}>Cancelar</Button>
+            <Button variant="ghost" onClick={() => onOpenChange(false)} disabled={submitting}>Cancelar</Button>
            <Button type="submit" disabled={submitting}>{submitting ? 'Salvando...' : 'Criar exceção'}</Button>
          </DialogFooter>
        </form>
--- a/susconecta/components/features/forms/patient-registration-form.tsx
+++ b/susconecta/components/features/forms/patient-registration-form.tsx
@ -453,7 +453,7 @@ export function PatientRegistrationForm({
                        <Button
                          variant={"outline"}
                          className={cn(
-                            "w-full justify-start text-left font-normal hover:bg-muted hover:text-foreground",
+                            "w-full justify-start text-left font-normal",
                            !form.birth_date && "text-muted-foreground"
                          )}
                        >
@ -467,10 +467,6 @@ export function PatientRegistrationForm({
                          selected={form.birth_date ?? undefined}
                          onSelect={(date) => setField("birth_date", date || null)}
                          initialFocus
                          captionLayout="dropdown"
                          fromYear={1900}
                          toYear={new Date().getFullYear()}
                          disabled={(date) => date > new Date()}
                        />
                      </PopoverContent>
                    </Popover>
--- a/susconecta/components/features/general/event-manager.tsx
+++ b/susconecta/components/features/general/event-manager.tsx
@ -55,7 +55,7 @@ export interface EventManagerProps {
 const defaultColors = [
  { name: "Blue", value: "blue", bg: "bg-blue-500", text: "text-blue-700" },
-  { name: "Green", value: "green", bg: "bg-[#10B981]", text: "text-green-700" },
+  { name: "Green", value: "green", bg: "bg-green-500", text: "text-green-700" },
  { name: "Purple", value: "purple", bg: "bg-purple-500", text: "text-purple-700" },
  { name: "Orange", value: "orange", bg: "bg-orange-500", text: "text-orange-700" },
  { name: "Pink", value: "pink", bg: "bg-pink-500", text: "text-pink-700" },
@ -336,11 +336,11 @@ export function EventManager({
            {view === "list" && "Todos os eventos"}
          </h2>
          <div className="flex items-center gap-2">
-            <Button variant="outline" size="icon" onClick={() => navigateDate("prev")} className="h-8 w-8 hover:bg-primary/10 hover:border-primary transition-colors hover:!text-primary">
+            <Button variant="outline" size="icon" onClick={() => navigateDate("prev")} className="h-8 w-8">
-              <ChevronLeft className="h-4 w-4 text-current" />
+              <ChevronLeft className="h-4 w-4" />
            </Button>
-            <Button variant="outline" size="icon" onClick={() => navigateDate("next")} className="h-8 w-8 hover:bg-primary/10 hover:border-primary transition-colors hover:!text-primary">
+            <Button variant="outline" size="icon" onClick={() => navigateDate("next")} className="h-8 w-8">
-              <ChevronRight className="h-4 w-4 text-current" />
+              <ChevronRight className="h-4 w-4" />
            </Button>
          </div>
        </div>
@ -384,37 +384,37 @@ export function EventManager({
          {/* Desktop: Button group */}
          <div className="hidden sm:flex items-center gap-1 rounded-lg border bg-background p-1">
            <Button
-              variant={view === "month" ? "default" : "ghost"}
+              variant={view === "month" ? "secondary" : "ghost"}
              size="sm"
              onClick={() => setView("month")}
-              className={cn("h-8", view !== "month" && "hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white")}
+              className="h-8"
            >
              <Calendar className="h-4 w-4" />
              <span className="ml-1">Mês</span>
            </Button>
            <Button
-              variant={view === "week" ? "default" : "ghost"}
+              variant={view === "week" ? "secondary" : "ghost"}
              size="sm"
              onClick={() => setView("week")}
-              className={cn("h-8", view !== "week" && "hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white")}
+              className="h-8"
            >
              <Grid3x3 className="h-4 w-4" />
              <span className="ml-1">Semana</span>
            </Button>
            <Button
-              variant={view === "day" ? "default" : "ghost"}
+              variant={view === "day" ? "secondary" : "ghost"}
              size="sm"
              onClick={() => setView("day")}
-              className={cn("h-8", view !== "day" && "hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white")}
+              className="h-8"
            >
              <Clock className="h-4 w-4" />
              <span className="ml-1">Dia</span>
            </Button>
            <Button
-              variant={view === "list" ? "default" : "ghost"}
+              variant={view === "list" ? "secondary" : "ghost"}
              size="sm"
              onClick={() => setView("list")}
-              className={cn("h-8", view !== "list" && "hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white")}
+              className="h-8"
            >
              <List className="h-4 w-4" />
              <span className="ml-1">Lista</span>
@ -432,7 +432,7 @@ export function EventManager({
              aria-label="Buscar"
              className="flex items-center justify-center h-10 w-10 p-0 text-muted-foreground bg-transparent border-0"
              onClick={() => {
-                const el = document.querySelector<HTMLInputElement>('input[placeholder="Buscar pacientes..."]')
+                const el = document.querySelector<HTMLInputElement>('input[placeholder="Buscar eventos..."]')
                el?.focus()
              }}
            >
@ -441,7 +441,7 @@ export function EventManager({
            {/* Input central com altura consistente e foco visível */}
            <Input
-              placeholder="Buscar paciente..."
+              placeholder="Buscar eventos..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className={cn(
--- a/susconecta/components/features/pacientes/chat-widget.tsx
+++ b/susconecta/components/features/pacientes/chat-widget.tsx
@ -1,114 +0,0 @@
 "use client";
 import { useEffect, useMemo, useState } from "react";
 import { useTheme } from "next-themes";
 import { ArrowLeft, Sparkles } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import FileUploadChat from "@/components/ui/file-upload-and-chat";
 // 👉 AQUI você importa o fluxo correto de voz (já testado e funcionando)
 import AIVoiceFlow from "@/components/ZoeIA/ai-voice-flow";
 export function ChatWidget() {
  const [assistantOpen, setAssistantOpen] = useState(false);
  const [realtimeOpen, setRealtimeOpen] = useState(false);
  const { theme } = useTheme();
  const isDark = theme === "dark";
  useEffect(() => {
    if (!assistantOpen && !realtimeOpen) return;
    const original = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = original;
    };
  }, [assistantOpen, realtimeOpen]);
  const gradientRing = useMemo(
    () => (
      <span
        aria-hidden
        className="absolute inset-0 rounded-full bg-linear-to-br from-primary via-sky-500 to-emerald-400 opacity-90 blur-sm transition group-hover:blur group-hover:opacity-100"
      />
    ),
    []
  );
  const openAssistant = () => setAssistantOpen(true);
  const closeAssistant = () => setAssistantOpen(false);
  const openRealtime = () => setRealtimeOpen(true);
  const closeRealtime = () => {
    setRealtimeOpen(false);
    setAssistantOpen(true);
  };
  return (
    <>
      {/* ----------------- ASSISTANT PANEL ----------------- */}
      {assistantOpen && (
        <div
          id="ai-assistant-overlay"
          className={`fixed inset-0 z-100 flex flex-col transition-colors ${isDark ? "bg-slate-950" : "bg-white"}`}
        >
          <div className={`flex items-center justify-between border-b px-4 py-3 shadow-sm transition-colors ${isDark ? "bg-slate-900 border-slate-700" : "bg-white border-gray-200"}`}>
            <Button
              type="button"
              variant="ghost"
              className={`flex items-center gap-2 ${isDark ? "text-slate-300 hover:bg-slate-800" : "text-slate-700 hover:bg-slate-100"}`}
              onClick={closeAssistant}
            >
              <ArrowLeft className="h-4 w-4" aria-hidden />
              <span className="text-sm font-semibold">Voltar</span>
            </Button>
          </div>
          <div className="flex-1 overflow-auto">
            <FileUploadChat onOpenVoice={openRealtime} />
          </div>
        </div>
      )}
      {/* ----------------- REALTIME VOICE PANEL ----------------- */}
      {realtimeOpen && (
        <div
          id="ai-realtime-overlay"
          className={`fixed inset-0 z-110 flex flex-col transition-colors ${isDark ? "bg-slate-950" : "bg-white"}`}
        >
          <div className={`flex items-center justify-between border-b px-4 py-3 transition-colors ${isDark ? "bg-slate-900 border-slate-700" : "bg-white border-gray-200"}`}>
            <Button
              type="button"
              variant="ghost"
              className={`flex items-center gap-2 ${isDark ? "text-slate-300 hover:bg-slate-800" : "text-slate-700 hover:bg-slate-100"}`}
              onClick={closeRealtime}
            >
              <ArrowLeft className="h-4 w-4" aria-hidden />
              <span className="text-sm">Voltar para a Zoe</span>
            </Button>
          </div>
          {/* 🔥 Aqui entra o AIVoiceFlow COMPLETO */}
          <div className="flex-1 overflow-auto flex items-center justify-center">
            <AIVoiceFlow />
          </div>
        </div>
      )}
      {/* ----------------- FLOATING BUTTON ----------------- */}
      <div className="fixed bottom-6 right-6 z-50 sm:bottom-8 sm:right-8">
        <button
          type="button"
          onClick={openAssistant}
          className="group relative flex h-16 w-16 items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
        >
          {gradientRing}
          <span className="relative flex h-16 w-16 items-center justify-center rounded-full bg-background text-primary shadow-[0_12px_30px_rgba(37,99,235,0.25)] ring-1 ring-primary/10 transition group-hover:scale-[1.03] group-active:scale-95">
            <Sparkles className="h-7 w-7" aria-hidden />
          </span>
        </button>
      </div>
    </>
  );
 }
--- a/susconecta/components/ui/button.tsx
+++ b/susconecta/components/ui/button.tsx
@ -14,7 +14,7 @@ const buttonVariants = cva(
        destructive:
          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
        outline:
-          "border bg-background shadow-xs hover:bg-blue-500 hover:text-white dark:bg-input/30 dark:border-input dark:hover:bg-blue-600 dark:hover:text-white",
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
        secondary:
          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
        ghost:
--- a/susconecta/components/ui/file-upload-and-chat.tsx
+++ b/susconecta/components/ui/file-upload-and-chat.tsx
@ -1,586 +0,0 @@
 "use client";
 import React, { useState, useRef, useCallback, useEffect } from "react";
 import { useTheme } from "next-themes";
 import {
  Upload,
  Paperclip,
  Send,
  Moon,
  Sun,
  X,
  FileText,
  ImageIcon,
  Video,
  Music,
  Archive,
  MessageCircle,
  Bot,
  User,
  Info,
  Lock,
  Mic,
  AudioLines,
  Plus,
 } from "lucide-react";
 const API_ENDPOINT = "https://n8n.jonasbomfim.store/webhook/zoe2";
 const FALLBACK_RESPONSE =
  "Tive um problema para responder agora. Tente novamente em alguns instantes.";
 const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
  // Usa tema global fornecido por next-themes
  const { theme, setTheme } = useTheme();
  const isDarkMode = theme === "dark";
  const [messages, setMessages] = useState([
    {
      id: 1,
      type: "ai",
      content:
        "Compartilhe uma dúvida, exame ou orientação que deseja revisar. A Zoe registra o pedido e te retorna com um resumo organizado para a equipe de saúde.",
      timestamp: new Date(),
    },
  ]);
  const [inputValue, setInputValue] = useState("");
  const [uploadedFiles, setUploadedFiles] = useState<any[]>([]);
  const [isDragOver, setIsDragOver] = useState(false);
  const [isTyping, setIsTyping] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const chatEndRef = useRef<HTMLDivElement>(null);
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  // Placeholder responsivo (não quebra, adapta o texto)
  const [responsivePlaceholder, setResponsivePlaceholder] = useState("Pergunte qualquer coisa para a Zoe");
  const computePlaceholder = (w: number) => {
    if (w < 340) return "Pergunte à Zoe"; // ultra pequeno
    if (w < 400) return "Pergunte algo à Zoe"; // pequeno
    if (w < 520) return "Pergunte algo para a Zoe"; // médio estreito
    return "Pergunte qualquer coisa para a Zoe"; // normal
  };
  useEffect(() => {
    const update = () => setResponsivePlaceholder(computePlaceholder(window.innerWidth));
    update();
    window.addEventListener("resize", update);
    return () => window.removeEventListener("resize", update);
  }, []);
  useEffect(() => {
    chatEndRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages]);
  useEffect(() => {
    if (textareaRef.current) {
      textareaRef.current.style.height = "auto";
      textareaRef.current.style.height = textareaRef.current.scrollHeight + "px";
    }
  }, [inputValue]);
  const getFileIcon = (fileName: string) => {
    const ext = fileName.split(".").pop()?.toLowerCase();
    if (["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(ext || ""))
      return <ImageIcon className="w-4 h-4" aria-hidden="true" />;
    if (["mp4", "avi", "mkv", "mov", "webm"].includes(ext || ""))
      return <Video className="w-4 h-4" aria-hidden="true" />;
    if (["mp3", "wav", "flac", "ogg", "aac"].includes(ext || ""))
      return <Music className="w-4 h-4" aria-hidden="true" />;
    if (["zip", "rar", "7z", "tar", "gz"].includes(ext || ""))
      return <Archive className="w-4 h-4" aria-hidden="true" />;
    return <FileText className="w-4 h-4" aria-hidden="true" />;
  };
  const formatFileSize = (bytes: number) => {
    if (bytes === 0) return "0 Bytes";
    const k = 1024;
    const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
  };
  const handleFileSelect = (files: FileList | null) => {
    if (!files) return;
    const newFiles = Array.from(files).map((file) => ({
      id: Date.now() + Math.random(),
      name: file.name,
      size: file.size,
      type: file.type,
      file: file,
    }));
    setUploadedFiles((prev) => [...prev, ...newFiles]);
    // Removido: mensagem de sistema de arquivos adicionados (não desejada na UI)
  };
  const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    setIsDragOver(false);
    const files = e.dataTransfer.files;
    if (files.length > 0) {
      handleFileSelect(files);
    }
  }, []);
  const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    setIsDragOver(true);
  }, []);
  const handleDragLeave = useCallback((e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    setIsDragOver(false);
  }, []);
  const removeFile = (fileId: number) => {
    setUploadedFiles((prev) => prev.filter((file) => file.id !== fileId));
  };
  const generateAIResponse = useCallback(
    async (userMessage: string, files: any[]) => {
      try {
        const pdfFile = files.find((file) => file.name.toLowerCase().endsWith(".pdf"));
        let response: Response;
        if (pdfFile) {
          const formData = new FormData();
          formData.append("pdf", pdfFile.file); // campo 'pdf'
          formData.append("message", userMessage); // campo 'message'
          response = await fetch(API_ENDPOINT, {
            method: "POST",
            body: formData, // multipart/form-data automático
          });
        } else {
          response = await fetch(API_ENDPOINT, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ message: userMessage }),
          });
        }
        if (!response.ok) {
          throw new Error(`HTTP ${response.status}`);
        }
        let replyText = "";
        try {
          const parsed = await response.json(); // ← já trata como JSON direto
          if (typeof parsed.message === "string") {
            replyText = parsed.message.trim();
          } else if (typeof parsed.reply === "string") {
            replyText = parsed.reply.trim();
          } else {
            console.warn(
              "[Zoe] Nenhum campo 'message' ou 'reply' na resposta:",
              parsed
            );
          }
        } catch (err) {
          console.error("[Zoe] Erro ao processar resposta JSON:", err);
        }
        return replyText || FALLBACK_RESPONSE;
      } catch (error) {
        console.error("[FileUploadChat] Failed to get API response", error);
        return FALLBACK_RESPONSE;
      }
    },
    []
  );
  const sendMessage = useCallback(async () => {
    if (inputValue.trim() || uploadedFiles.length > 0) {
      const newMessage = {
        id: Date.now(),
        type: "user",
        content: inputValue.trim(),
        files: [...uploadedFiles],
        timestamp: new Date(),
      };
      setMessages((prev) => [...prev, newMessage]);
      const messageContent = inputValue.trim();
      const attachedFiles = [...uploadedFiles];
      setInputValue("");
      setUploadedFiles([]);
      setIsTyping(true);
      // Get AI response from API
      const aiResponseContent = await generateAIResponse(
        messageContent,
        attachedFiles
      );
      const aiResponse = {
        id: Date.now() + 1,
        type: "ai",
        content: aiResponseContent,
        timestamp: new Date(),
      };
      setMessages((prev) => [...prev, aiResponse]);
      setIsTyping(false);
    }
  }, [inputValue, uploadedFiles, generateAIResponse]);
  const handleKeyPress = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      sendMessage();
    }
  };
  const themeClasses = {
    background: isDarkMode ? "bg-gray-900" : "bg-gray-50",
    cardBg: isDarkMode ? "bg-gray-800" : "bg-white",
    text: isDarkMode ? "text-white" : "text-gray-900",
    textSecondary: isDarkMode ? "text-gray-300" : "text-gray-600",
    border: isDarkMode ? "border-gray-700" : "border-gray-200",
    inputBg: isDarkMode ? "bg-gray-700" : "bg-gray-100",
    uploadArea: isDragOver
      ? isDarkMode
        ? "bg-blue-900/50 border-blue-500"
        : "bg-blue-50 border-blue-400"
      : isDarkMode
      ? "bg-gray-700 border-gray-600"
      : "bg-gray-50 border-gray-300",
    userMessage: isDarkMode ? "bg-blue-600" : "bg-blue-500",
    aiMessage: isDarkMode ? "bg-gray-700" : "bg-gray-200",
    systemMessage: isDarkMode
      ? "bg-yellow-900/30 text-yellow-200"
      : "bg-yellow-100 text-yellow-800",
  };
  return (
    <div
      className={`w-full min-h-screen transition-colors duration-300 ${themeClasses.background}`}
    >
      <div className="max-w-6xl mx-auto p-3 sm:p-6">
        {/* Main Card - Zoe Assistant Section */}
        <div
          className={`rounded-2xl sm:rounded-3xl shadow-xl border bg-linear-to-br ${
            isDarkMode
              ? "from-primary/15 via-gray-800 to-gray-900"
              : "from-blue-50 via-white to-indigo-50"
          } p-4 sm:p-8 ${
            isDarkMode ? "border-gray-700" : "border-blue-200"
          } mb-4 sm:mb-6 backdrop-blur-sm`}
        >
          <div className="flex flex-col gap-4 sm:gap-8">
            {/* Header */}
            <div className="flex flex-col gap-3 sm:gap-4 sm:flex-row sm:items-start sm:justify-between">
              <div className="flex items-center gap-2 sm:gap-4">
                <span className="flex h-10 w-10 sm:h-12 sm:w-12 shrink-0 items-center justify-center rounded-2xl sm:rounded-3xl bg-linear-to-br from-primary via-indigo-500 to-sky-500 text-sm sm:text-base font-semibold text-white shadow-lg">
                  Zoe
                </span>
                <div className="space-y-1">
                  <p className="text-xs font-semibold uppercase tracking-[0.18em] sm:tracking-[0.24em] text-primary/80">
                    Assistente Clínica Zoe
                  </p>
                  <h1 className="text-lg sm:text-3xl font-semibold tracking-tight text-foreground">
                    <span className="bg-linear-to-r from-sky-400 via-primary to-indigo-500 bg-clip-text text-transparent">
                      Olá, eu sou Zoe.
                    </span>
                    <span className="text-foreground"> Como posso ajudar?</span>
                  </h1>
                </div>
              </div>
              <div className="flex flex-wrap items-center justify-end gap-1 sm:gap-2">
                <button
                  type="button"
                  className={`rounded-full px-2 sm:px-4 py-1 sm:py-2 text-xs font-semibold uppercase tracking-[0.12em] sm:tracking-[0.18em] whitespace-nowrap transition shadow-sm border ${isDarkMode ? "border-primary/40 text-primary hover:bg-primary/10" : "bg-primary border-primary text-white hover:bg-primary/90"}`}
                >
                  Novo atendimento
                </button>
                <button
                  onClick={() => setTheme(isDarkMode ? "light" : "dark")}
                  className={`p-1.5 sm:p-2 rounded-lg sm:rounded-lg border transition-all duration-200 hover:scale-105 hover:shadow-lg ${themeClasses.border} ${themeClasses.inputBg} ${themeClasses.text}`}
                  aria-label="Alternar tema"
                >
                  <Moon className="w-4 h-4 sm:w-5 sm:h-5" />
                </button>
              </div>
            </div>
            {/* Description */}
            <p
              className={`max-w-3xl text-xs sm:text-sm leading-relaxed ${
                isDarkMode ? "text-muted-foreground" : "text-gray-700"
              }`}
            >
              Organizamos exames, orientações e tarefas assistenciais em um
              painel único para acelerar decisões clínicas. Utilize a Zoe para
              revisar resultados, registrar percepções e alinhar próximos passos
              com a equipe de saúde.
            </p>
            {/* Security Info */}
            <div className="flex items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-3 sm:px-4 py-1 sm:py-2 text-xs text-primary shadow-sm">
              <Lock className="h-3 w-3 sm:h-4 sm:w-4 shrink-0" />
              <span className="text-xs sm:text-sm">
                Suas informações permanecem criptografadas e seguras com a
                equipe Zoe.
              </span>
            </div>
            {/* Info Section */}
            <div
              className={`rounded-2xl sm:rounded-3xl border bg-linear-to-br ${
                isDarkMode
                  ? "border-primary/25 from-primary/10 via-background/50 to-background text-muted-foreground"
                  : "border-blue-200 from-blue-50 via-white to-indigo-50 text-gray-700"
              } p-4 sm:p-6 text-xs sm:text-sm leading-relaxed`}
            >
              <div
                className={`mb-3 sm:mb-4 flex items-center gap-2 sm:gap-3 ${
                  isDarkMode ? "text-primary" : "text-blue-600"
                }`}
              >
                <Info className="h-4 w-4 sm:h-5 sm:w-5 shrink-0" />
                <span className="text-sm sm:text-base font-semibold">
                  Informativo importante
                </span>
              </div>
              <p
                className={`mb-3 sm:mb-4 text-xs sm:text-sm ${
                  isDarkMode ? "text-muted-foreground" : "text-gray-700"
                }`}
              >
                A Zoe acompanha toda a jornada clínica, consolida exames e
                registra orientações para que você tenha clareza em cada etapa
                do cuidado. As respostas são informativas e complementam a
                avaliação de um profissional de saúde qualificado.
              </p>
              <p
                className={`font-medium text-xs sm:text-sm ${
                  isDarkMode ? "text-foreground" : "text-gray-900"
                }`}
              >
                Em situações de urgência, entre em contato com a equipe médica
                presencial ou acione os serviços de emergência da sua região.
              </p>
            </div>
            {/* (Removido) Lista de arquivos antiga – agora exibida sobre o input */}
          </div>
        </div>
        {/* Chat Area */}
        <div
          className={`rounded-2xl shadow-xl border ${themeClasses.cardBg} ${themeClasses.border}`}
        >
          {/* Chat Header */}
          <div
            className={`px-4 sm:px-6 py-3 sm:py-4 border-b ${themeClasses.border}`}
          >
            <div className="flex items-center gap-2 sm:gap-3">
              <div className="w-2 h-2 sm:w-3 sm:h-3 bg-green-500 rounded-full animate-pulse"></div>
              <h3
                className={`font-semibold text-sm sm:text-base ${themeClasses.text}`}
              >
                Chat with AI Assistant
              </h3>
              <span
                className={`text-xs sm:text-sm ${themeClasses.textSecondary}`}
              >
                Online
              </span>
            </div>
          </div>
          {/* Chat Messages */}
          <div className="h-64 sm:h-96 overflow-y-auto p-4 sm:p-6 space-y-3 sm:space-y-4">
            {messages.map((message: any) => (
              <div
                key={message.id}
                className={`flex ${
                  message.type === "user"
                    ? "justify-end"
                    : message.type === "system"
                    ? "justify-center"
                    : "justify-start"
                }`}
              >
                {message.type !== "system" && message.type === "ai" && (
                  <span className="flex h-7 w-7 sm:h-8 sm:w-8 shrink-0 items-center justify-center rounded-full bg-linear-to-br from-primary via-indigo-500 to-sky-500 text-xs font-semibold text-white shadow-lg mr-2 sm:mr-3">
                    Z
                  </span>
                )}
                <div
                  className={`max-w-xs sm:max-w-sm lg:max-w-md ${
                    message.type === "user"
                      ? `${themeClasses.userMessage} text-white ml-3`
                      : message.type === "ai"
                      ? `${themeClasses.aiMessage} ${themeClasses.text}`
                      : `${themeClasses.systemMessage} text-xs`
                  } px-4 py-3 rounded-2xl ${
                    message.type === "user"
                      ? "rounded-br-md"
                      : message.type === "ai"
                      ? "rounded-bl-md"
                      : "rounded-lg"
                  }`}
                >
                  {message.content && (
                    <p className="wrap-break-word text-xs sm:text-sm">
                      {message.content}
                    </p>
                  )}
                  {message.files && message.files.length > 0 && (
                    <div className="mt-1 sm:mt-2 space-y-1">
                      {message.files.map((file: any) => (
                        <div
                          key={file.id}
                          className="flex items-center gap-1 sm:gap-2 text-xs opacity-90 bg-black/10 rounded px-2 py-1"
                        >
                          {getFileIcon(file.name)}
                          <span className="truncate text-xs">{file.name}</span>
                          <span className="text-xs">
                            ({formatFileSize(file.size)})
                          </span>
                        </div>
                      ))}
                    </div>
                  )}
                  <p className="text-xs opacity-70 mt-1 sm:mt-2">
                    {message.timestamp.toLocaleTimeString([], {
                      hour: "2-digit",
                      minute: "2-digit",
                    })}
                  </p>
                </div>
                {message.type === "user" && (
                  <div
                    className={`w-8 h-8 rounded-full ml-3 flex items-center justify-center ${themeClasses.userMessage}`}
                  >
                    <User className="w-5 h-5 text-white" />
                  </div>
                )}
              </div>
            ))}
            {/* Typing Indicator */}
            {isTyping && (
              <div className="flex justify-start">
                <span className="flex h-7 w-7 sm:h-8 sm:w-8 shrink-0 items-center justify-center rounded-full bg-linear-to-br from-primary via-indigo-500 to-sky-500 text-xs font-semibold text-white shadow-lg mr-2 sm:mr-3">
                  Z
                </span>
                <div
                  className={`px-4 py-3 rounded-2xl rounded-bl-md ${themeClasses.aiMessage}`}
                >
                  <div className="flex space-x-1">
                    <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
                    <div
                      className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"
                      style={{ animationDelay: "0.1s" }}
                    ></div>
                    <div
                      className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"
                      style={{ animationDelay: "0.2s" }}
                    ></div>
                  </div>
                </div>
              </div>
            )}
            <div ref={chatEndRef} />
          </div>
          {/* Chat Input */}
          <div className={`border-t p-3 sm:p-4 ${themeClasses.border}`}>
            <div className="flex flex-col gap-2">
              {/* Anexos selecionados (chips) */}
              {uploadedFiles.length > 0 && (
                <div className="flex flex-wrap gap-2 max-h-32 overflow-y-auto pb-1">
                  {uploadedFiles.map((file) => (
                    <div
                      key={file.id}
                      className={`group flex items-center gap-2 px-3 py-2 rounded-lg border ${themeClasses.border} ${themeClasses.inputBg} relative`}
                    >
                      {getFileIcon(file.name)}
                      <div className="min-w-0 max-w-[160px]">
                        <p className={`text-xs font-medium truncate ${themeClasses.text}`}>
                          {file.name}
                        </p>
                        <p className={`text-[10px] leading-tight ${themeClasses.textSecondary}`}>
                          {formatFileSize(file.size)}
                        </p>
                      </div>
                      <button
                        onClick={() => removeFile(file.id)}
                        className={`p-1 rounded-full transition-colors ${themeClasses.textSecondary} hover:text-red-500 hover:bg-red-500/20`}
                        aria-label="Remover arquivo"
                      >
                        <X className="w-3 h-3" />
                      </button>
                    </div>
                  ))}
                  <button
                    onClick={() => setUploadedFiles([])}
                    className={`ml-auto text-[11px] px-2 py-1 rounded-md ${themeClasses.textSecondary} hover:text-red-500 transition-colors`}
                  >
                    Limpar tudo
                  </button>
                </div>
              )}
              {/* Input unificado com ícones embutidos */}
              <div className="flex w-full">
                <div className={`flex items-center w-full rounded-full border ${themeClasses.border} ${themeClasses.inputBg} h-11 px-2 gap-2`}>
                  <button
                    onClick={() => fileInputRef.current?.click()}
                    type="button"
                    className={`flex items-center justify-center h-7 w-7 rounded-full transition-colors hover:bg-primary/20 flex-shrink-0 ${themeClasses.text}`}
                    aria-label="Anexar arquivos"
                  >
                    <Plus className="w-4 h-4" />
                  </button>
                  <input
                    ref={fileInputRef}
                    type="file"
                    multiple
                    className="hidden"
                    onChange={(e) => handleFileSelect(e.target.files)}
                  />
                  <textarea
                    ref={textareaRef}
                    value={inputValue}
                    onChange={(e) => setInputValue(e.target.value)}
                    onKeyPress={handleKeyPress}
                    placeholder={responsivePlaceholder}
                    rows={1}
                    className={`flex-1 bg-transparent resize-none focus:outline-none leading-snug py-3 pr-2 ${themeClasses.text} placeholder-gray-400 text-[13px] sm:text-sm placeholder:text-[12px] sm:placeholder:text-sm whitespace-nowrap overflow-hidden text-ellipsis placeholder:overflow-hidden placeholder:text-ellipsis`}
                    style={{ minHeight: 'auto', overflow: 'hidden' }}
                  />
                  <button
                    onClick={() => onOpenVoice?.()}
                    type="button"
                    className={`flex items-center justify-center h-8 w-8 rounded-full border ${themeClasses.border} transition-colors hover:bg-primary/20 flex-shrink-0 ${themeClasses.text}`}
                    aria-label="Entrada de voz"
                  >
                    <AudioLines className="w-4 h-4" />
                  </button>
                  <button
                    onClick={sendMessage}
                    disabled={!inputValue.trim() && uploadedFiles.length === 0}
                    type="button"
                    className="flex items-center justify-center h-8 w-8 rounded-full bg-linear-to-r from-blue-500 to-purple-600 text-white hover:from-blue-600 hover:to-purple-700 disabled:from-gray-400 disabled:to-gray-500 disabled:cursor-not-allowed transition-colors shadow-md flex-shrink-0"
                    aria-label="Enviar mensagem"
                  >
                    <Send className="w-4 h-4" />
                  </button>
                </div>
              </div>
            </div>
            {/* Quick Actions */}
          </div>
        </div>
      </div>
    </div>
  );
 };
 export default FileUploadChat;
--- a/susconecta/components/ui/popover.tsx
+++ b/susconecta/components/ui/popover.tsx
@ -30,7 +30,7 @@ function PopoverContent({
        align={align}
        sideOffset={sideOffset}
        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[9999] w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md",
+          "bg-white text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[9999] w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md",
          className
        )}
        {...props}
--- a/susconecta/components/ui/simple-theme-toggle.tsx
+++ b/susconecta/components/ui/simple-theme-toggle.tsx
@ -19,7 +19,8 @@ export function SimpleThemeToggle() {
      onClick={toggleTheme}
  className="hover:bg-primary! hover:text-white! hover:border-primary! cursor-pointer shadow-sm! shadow-black/10! border-2! border-black! dark:shadow-none! dark:border-border! transition-colors"
    >
-      <Moon className="h-[1.2rem] w-[1.2rem]" />
+      <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
      <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
      <span className="sr-only">Alternar tema</span>
    </Button>
  )
--- a/susconecta/components/ui/upload-avatar.tsx
+++ b/susconecta/components/ui/upload-avatar.tsx
@ -74,28 +74,26 @@ export function UploadAvatar({ userId, currentAvatarUrl, onAvatarChange, userNam
    : 'U'
  return (
-    <div className="w-full flex flex-col sm:flex-row items-center gap-3 sm:gap-4">
+    <div className="space-y-4">
-      <div className="flex-shrink-0">
+      <div className="flex items-center gap-4">
-        <Avatar className="h-20 w-20 sm:h-20 sm:w-20">
+        <Avatar className="h-20 w-20">
          <AvatarImage src={currentAvatarUrl} alt={userName || 'Avatar'} />
          <AvatarFallback className="text-lg">
            {initials}
          </AvatarFallback>
        </Avatar>
      </div>
-      <div className="flex-1 w-full min-w-0">
+        <div className="space-y-2">
-        <div className="flex flex-col gap-2">
+          <div className="flex gap-2">
          <div className="flex gap-2 flex-wrap">
            <Button
              variant="outline"
              size="sm"
              onClick={() => document.getElementById('avatar-upload')?.click()}
              disabled={isUploading}
-              className="transition duration-200 hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white text-xs sm:text-sm"
+              className="transition duration-200 hover:bg-primary/10 hover:text-primary dark:hover:bg-accent dark:hover:text-accent-foreground"
            >
-              <Upload className="h-4 w-4 mr-1 sm:mr-2" />
+              <Upload className="h-4 w-4 mr-2" />
-              <span className="hidden xs:inline">{isUploading ? 'Enviando...' : 'Upload'}</span>
+              {isUploading ? 'Enviando...' : 'Upload'}
            </Button>
            {currentAvatarUrl && (
@ -103,10 +101,10 @@ export function UploadAvatar({ userId, currentAvatarUrl, onAvatarChange, userNam
                variant="outline"
                size="sm"
                onClick={handleDownload}
-                className="transition duration-200 hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white text-xs sm:text-sm"
+                className="transition duration-200 hover:bg-primary/10 hover:text-primary dark:hover:bg-accent dark:hover:text-accent-foreground"
              >
-                <Download className="h-4 w-4 mr-1 sm:mr-2" />
+                <Download className="h-4 w-4 mr-2" />
-                <span className="hidden xs:inline">Download</span>
+                Download
              </Button>
            )}
          </div>
@ -120,8 +118,8 @@ export function UploadAvatar({ userId, currentAvatarUrl, onAvatarChange, userNam
            disabled={isUploading}
          />
-          <p className="text-xs text-muted-foreground leading-snug">
+          <p className="text-xs text-muted-foreground">
-            Formatos: JPG, PNG, WebP (máx. 2MB)
+            Formatos aceitos: JPG, PNG, WebP (máx. 2MB)
          </p>
          {error && (
--- a/susconecta/lib/api.ts
+++ b/susconecta/lib/api.ts
@ -488,10 +488,11 @@ export async function deletarDisponibilidade(id: string): Promise<void> {
    headers: withPrefer({ ...baseHeaders() }, 'return=minimal'),
  });
-  if (res.status === 204 || res.status === 200) return;
+  if (res.status === 204) return;
-  
+  // Some deployments may return 200 with a representation — accept that too
-  // Se chegou aqui e não foi sucesso, lance erro
+  if (res.status === 200) return;
-  throw new Error(`Erro ao deletar disponibilidade: ${res.status}`);
+  // Otherwise surface a friendly error using parse()
  await parse(res as Response);
 }
 // ===== EXCEÇÕES (Doctor Exceptions) =====
@ -579,21 +580,14 @@ export async function listarExcecoes(params?: { doctorId?: string; date?: string
 export async function deletarExcecao(id: string): Promise<void> {
  if (!id) throw new Error('ID da exceção é obrigatório');
  const url = `${REST}/doctor_exceptions?id=eq.${encodeURIComponent(String(id))}`;
  console.log('[deletarExcecao] Deletando exceção:', id, 'URL:', url);
  const res = await fetch(url, {
    method: 'DELETE',
    headers: withPrefer({ ...baseHeaders() }, 'return=minimal'),
  });
-  console.log('[deletarExcecao] Status da resposta:', res.status);
+  if (res.status === 204) return;
-  
+  if (res.status === 200) return;
-  if (res.status === 204 || res.status === 200) {
+  await parse(res as Response);
    console.log('[deletarExcecao] Exceção deletada com sucesso');
    return;
  }
  // Se chegou aqui e não foi sucesso, lance erro
  throw new Error(`Erro ao deletar exceção: ${res.status}`);
 }
@ -1832,7 +1826,7 @@ export async function buscarMedicos(termo: string): Promise<Medico[]> {
  // Executa as buscas e combina resultados únicos
  for (const query of queries) {
    try {
-      const url = `${REST}/doctors?${query}&limit=100`;
+      const url = `${REST}/doctors?${query}&limit=10`;
      const headers = baseHeaders();
      const res = await fetch(url, { method: 'GET', headers });
      const arr = await parse<Medico[]>(res);
@ -1850,49 +1844,7 @@ export async function buscarMedicos(termo: string): Promise<Medico[]> {
    }
  }
-  return results.slice(0, 100); // Limita a 100 resultados
+  return results.slice(0, 20); // Limita a 20 resultados
 }
 export async function listarTodosMedicos(): Promise<Medico[]> {
  try {
    const url = `${REST}/doctors?limit=1000`;
    const headers = baseHeaders();
    const res = await fetch(url, { method: 'GET', headers });
    const arr = await parse<Medico[]>(res);
    // Mapeamento de correções para especialidades com encoding errado
    const specialtyFixes: Record<string, string> = {
      'Cl\u00EDnica Geral': 'Clínica Geral',
      'Cl\u00E3nica Geral': 'Clínica Geral',
      'Cl?nica Geral': 'Clínica Geral',
      'Cl©nica Geral': 'Clínica Geral',
      'Cl\uFFFDnica Geral': 'Clínica Geral',
    };
    // Sanitiza caracteres UTF-8 nos especialties
    if (Array.isArray(arr)) {
      return arr.map((medico: any) => {
        if (medico.specialty && typeof medico.specialty === 'string') {
          try {
            // Primeiro tenta aplicar mapeamento
            let spec = medico.specialty;
            for (const [wrong, correct] of Object.entries(specialtyFixes)) {
              spec = spec.replace(new RegExp(wrong, 'g'), correct);
            }
            // Depois normaliza
            medico.specialty = spec.normalize('NFC');
          } catch (e) {
            // Se falhar, mantém original
          }
        }
        return medico;
      });
    }
    return Array.isArray(arr) ? arr : [];
  } catch (error) {
    console.error('[API] Erro ao listar todos os médicos:', error);
    return [];
  }
 }
 export async function buscarMedicoPorId(id: string | number): Promise<Medico | null> {
--- a/susconecta/lib/laudo-exemplos.ts
+++ b/susconecta/lib/laudo-exemplos.ts
@ -1,275 +0,0 @@
 /**
 * EXEMPLO DE USO: Automação n8n para Notificação de Laudos
 * 
 * Este arquivo demonstra como usar a função criarLaudo com integração n8n
 * para criar um laudo e notificar automaticamente o paciente.
 */
 import { criarLaudo, CriarLaudoData } from '@/lib/reports';
 /**
 * Exemplo 1: Uso básico - criar um laudo simples
 */
 export async function exemploBasico() {
  try {
    const laudoData: CriarLaudoData = {
      pacienteId: 'patient-uuid-123', // ID do paciente (obrigatório)
      textoLaudo: 'Paciente apresenta boa saúde geral. Sem achados relevantes.',
    };
    const novoLaudo = await criarLaudo(laudoData);
    console.log('✓ Laudo criado com sucesso!');
    console.log('ID do laudo:', novoLaudo.id);
    console.log('Mensagem:', novoLaudo.mensagem);
    return novoLaudo;
  } catch (erro) {
    console.error('✗ Erro ao criar laudo:', erro);
    throw erro;
  }
 }
 /**
 * Exemplo 2: Criar laudo com dados médicos completos
 */
 export async function exemploCompleto() {
  try {
    const laudoData: CriarLaudoData = {
      pacienteId: 'patient-uuid-789',
      medicoId: 'doctor-uuid-456',  // Opcional
      textoLaudo: `
        AVALIAÇÃO CLÍNICA COMPLETA
        Queixa Principal: Dor de cabeça persistente
        História Presente:
        Paciente relata dor de cabeça tipo tensional há 2 semanas,
        intensidade 5/10, sem irradiação.
        Exame Físico:
        - PA: 120/80 mmHg
        - FC: 72 bpm
        - Sem alterações neurológicas
        Impressão Diagnóstica:
        Cefaleia tensional
        Conduta:
        - Repouso adequado
        - Analgésicos conforme necessidade
        - Retorno em 2 semanas se persistir
      `,
      exame: 'Consulta Neurologia',
      diagnostico: 'Cefaleia tensional',
      conclusao: 'Prescrição: Dipirona 500mg 6/6h conforme necessidade',
      cidCode: 'G44.2', // CID da cefaleia tensional
      status: 'concluido',
    };
    const novoLaudo = await criarLaudo(laudoData);
    console.log('✓ Laudo completo criado com sucesso!');
    console.log('ID:', novoLaudo.id);
    console.log('Status:', novoLaudo.status);
    console.log('CID:', novoLaudo.cid_code);
    return novoLaudo;
  } catch (erro) {
    console.error('✗ Erro:', erro);
    throw erro;
  }
 }
 /**
 * Exemplo 3: Integração em um componente React
 * Este exemplo mostra como usar a função em um formulário
 * 
 * NOTA: Este código deve ser usado em um arquivo .tsx (não .ts)
 * e com o import de React importado corretamente
 */
 export async function exemploComponenteReact() {
  // Este é apenas um exemplo de estrutura para o componente
  // Copie o código abaixo para um arquivo .tsx:
  /*
  'use client';
  import React from 'react';
  import { criarLaudo, CriarLaudoData } from '@/lib/reports';
  export function ComponenteLaudoExemplo() {
    const [carregando, setCarregando] = React.useState(false);
    const [mensagem, setMensagem] = React.useState('');
    const handleCriarLaudo = async (formData: any) => {
      setCarregando(true);
      setMensagem('');
      try {
        const laudoData: CriarLaudoData = {
          pacienteId: formData.pacienteId,
          medicoId: formData.medicoId,
          textoLaudo: formData.texto,
          exame: formData.exame,
          diagnostico: formData.diagnostico,
          conclusao: formData.conclusao,
          cidCode: formData.cid,
          status: 'concluido',
        };
        const resultado = await criarLaudo(laudoData);
        setMensagem(`✓ ${resultado.mensagem}`);
        console.log('Laudo criado:', resultado.id);
        // Você pode fazer mais algo aqui, como:
        // - Redirecionar para página do laudo
        // - Atualizar lista de laudos
        // - Limpar formulário
      } catch (erro) {
        setMensagem(`✗ Erro: ${erro instanceof Error ? erro.message : String(erro)}`);
      } finally {
        setCarregando(false);
      }
    };
    return (
      <div>
        <form onSubmit={(e) => {
          e.preventDefault();
          const formData = new FormData(e.currentTarget);
          handleCriarLaudo(Object.fromEntries(formData));
        }}>
          <textarea
            name="texto"
            placeholder="Texto do laudo"
            required
          />
          <input
            type="text"
            name="pacienteId"
            placeholder="ID do Paciente"
            required
          />
          <input
            type="text"
            name="medicoId"
            placeholder="ID do Médico"
            required
          />
          <button type="submit" disabled={carregando}>
            {carregando ? 'Criando...' : 'Criar Laudo'}
          </button>
        </form>
        {mensagem && <p>{mensagem}</p>}
      </div>
    );
  }
  */
 }
 /**
 * Exemplo 4: Tratamento de erros específicos
 */
 export async function exemploTratamentoErros() {
  try {
    const laudoData: CriarLaudoData = {
      pacienteId: 'patient-id',
      medicoId: 'doctor-id',
      textoLaudo: 'Texto do laudo',
    };
    const resultado = await criarLaudo(laudoData);
    console.log('Sucesso:', resultado);
  } catch (erro) {
    if (erro instanceof Error) {
      // Trata diferentes tipos de erro
      if (erro.message.includes('Paciente ID') || erro.message.includes('Médico ID')) {
        console.error('Erro de validação: dados incompletos');
      } else if (erro.message.includes('Supabase')) {
        console.error('Erro de conexão com banco de dados');
      } else if (erro.message.includes('n8n')) {
        console.warn('Laudo criado, mas notificação falhou');
      } else {
        console.error('Erro desconhecido:', erro.message);
      }
    }
  }
 }
 /**
 * DOCUMENTAÇÃO DO FLUXO N8N
 * 
 * A função criarLaudo executa o seguinte fluxo:
 * 
 * 1. CRIAÇÃO NO SUPABASE
 *    - Salva o report na tabela 'reports' do Supabase
 *    - Status padrão: 'concluido'
 *    - Retorna o report criado com seu ID
 * 
 * 2. NOTIFICAÇÃO N8N
 *    - Se o report foi criado com sucesso, faz um POST para:
 *      URL: https://joaogustavo.me/webhook/notificar-laudo
 *    - Envia payload com:
 *      - pacienteId: ID do paciente (patient_id)
 *      - reportId: ID do report criado
 * 
 * 3. NO N8N
 *    O webhook deve estar configurado para:
 *    - Receber o payload JSON POST
 *    - Extrair pacienteId e reportId
 *    - Buscar informações do paciente
 *    - Enviar notificação (email, SMS, push, etc.)
 *    - Registrar log da notificação
 * 
 * 4. COMPORTAMENTO EM CASO DE FALHA
 *    - Se a criação do report falhar: exceção é lançada
 *    - Se o envio para n8n falhar: report é mantido, erro é logado
 *      (não bloqueia a operação de criação)
 * 
 * EXEMPLO DE USO:
 * 
 * const novoReport = await criarLaudo({
 *   pacienteId: "3854866a-5476-48be-8313-77029ccdb70f",
 *   textoLaudo: "Texto do laudo aqui..."
 * });
 * 
 * // Depois disto, automaticamente:
 * // 1. Report é salvo no Supabase
 * // 2. n8n recebe: { pacienteId: "...", reportId: "..." }
 * // 3. Paciente é notificado
 */
 /**
 * EXEMPLO DE WEBHOOK N8N (Configuração)
 * 
 * No n8n, você deve:
 * 1. Criar um novo workflow
 * 2. Adicionar trigger: "Webhook"
 * 3. Configurar:
 *    - HTTP Method: POST
 *    - Path: /notificar-laudo
 *    - Authentication: None (ou Bearer token se desejar)
 * 4. Adicionar nós para:
 *    - Parse do payload JSON recebido
 *    - Query no banco de dados para buscar paciente
 *    - Enviar email/SMS/notificação push
 *    - Logging do resultado
 * 
 * Exemplo de nó JavaScript no n8n:
 * 
 * const { pacienteId, laudoId, pacienteName, pacienteEmail } = $input.first().json;
 * 
 * return {
 *   pacienteId,
 *   laudoId,
 *   pacienteName,
 *   pacienteEmail,
 *   notificationType: 'laudo_criado',
 *   timestamp: new Date().toISOString(),
 *   message: `Novo laudo ${laudoId} disponível para ${pacienteName}`
 * };
 */
--- a/susconecta/lib/laudo-notification.ts
+++ b/susconecta/lib/laudo-notification.ts
@ -1,193 +0,0 @@
 /**
 * Módulo de notificação de laudos via n8n
 * Integração com automação n8n para notificar pacientes quando laudos são criados
 */
 import { ENV_CONFIG } from '@/lib/env-config';
 /**
 * Configurações do webhook n8n
 */
 const N8N_WEBHOOK_CONFIG = {
  // URL do webhook configurado no n8n
  webhookUrl: 'https://joaogustavo.me/webhook/notificar-laudo',
  // Timeout para a requisição (em ms)
  timeout: 30000,
  // Tentativas de retry em caso de falha
  maxRetries: 3,
 };
 /**
 * Tipos de dados para notificação de laudo
 */
 export interface NotificacaoLaudoPayload {
  pacienteId: string;
  laudoId: string;
  pacienteName?: string;
  pacienteEmail?: string;
  medicalDetails?: {
    examType?: string;
    medico?: string;
    dataEmissao?: string;
  };
 }
 /**
 * Resultado da notificação
 */
 export interface NotificacaoLaudoResult {
  sucesso: boolean;
  mensagem: string;
  n8nResponse?: any;
  erro?: string;
 }
 /**
 * Notifica o n8n sobre a criação de um novo laudo
 * @param payload Dados do laudo e paciente para notificação
 * @returns Resultado da notificação
 */
 export async function notificarLaudoCriadoN8n(
  payload: NotificacaoLaudoPayload
 ): Promise<NotificacaoLaudoResult> {
  try {
    // Validação básica dos dados
    if (!payload.pacienteId || !payload.laudoId) {
      return {
        sucesso: false,
        mensagem: 'Dados de paciente ou laudo inválidos',
        erro: 'pacienteId e laudoId são obrigatórios',
      };
    }
    // Constrói o payload para o webhook
    const webhookPayload = {
      pacienteId: payload.pacienteId,
      laudoId: payload.laudoId,
      pacienteName: payload.pacienteName || '',
      pacienteEmail: payload.pacienteEmail || '',
      // Adiciona dados médicos se disponíveis
      ...(payload.medicalDetails && {
        examType: payload.medicalDetails.examType,
        medico: payload.medicalDetails.medico,
        dataEmissao: payload.medicalDetails.dataEmissao,
      }),
      // Timestamp da notificação
      notificadoEm: new Date().toISOString(),
    };
    console.log('[n8n] Enviando notificação de laudo criado:', {
      pacienteId: payload.pacienteId,
      laudoId: payload.laudoId,
      webhookUrl: N8N_WEBHOOK_CONFIG.webhookUrl,
    });
    // Tenta enviar o webhook com retry
    let ultimoErro: any = null;
    for (let tentativa = 1; tentativa <= N8N_WEBHOOK_CONFIG.maxRetries; tentativa++) {
      try {
        const controller = new AbortController();
        const timeoutId = setTimeout(
          () => controller.abort(),
          N8N_WEBHOOK_CONFIG.timeout
        );
        const response = await fetch(N8N_WEBHOOK_CONFIG.webhookUrl, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
          },
          body: JSON.stringify(webhookPayload),
          signal: controller.signal,
        });
        clearTimeout(timeoutId);
        if (!response.ok) {
          throw new Error(
            `HTTP ${response.status}: ${response.statusText}`
          );
        }
        const responseData = await response.json();
        console.log('[n8n] Notificação enviada com sucesso:', {
          status: response.status,
          laudoId: payload.laudoId,
        });
        return {
          sucesso: true,
          mensagem: 'Paciente notificado com sucesso',
          n8nResponse: responseData,
        };
      } catch (erro) {
        ultimoErro = erro;
        console.warn(
          `[n8n] Tentativa ${tentativa}/${N8N_WEBHOOK_CONFIG.maxRetries} falhou:`,
          erro instanceof Error ? erro.message : String(erro)
        );
        // Se não for a última tentativa, aguarda um pouco antes de tentar novamente
        if (tentativa < N8N_WEBHOOK_CONFIG.maxRetries) {
          await new Promise((resolve) =>
            setTimeout(resolve, 1000 * tentativa) // Backoff exponencial
          );
        }
      }
    }
    // Se chegou aqui, todas as tentativas falharam
    console.error('[n8n] Todas as tentativas de notificação falharam:', ultimoErro);
    return {
      sucesso: false,
      mensagem: 'Falha ao notificar paciente através do n8n',
      erro: ultimoErro instanceof Error ? ultimoErro.message : String(ultimoErro),
    };
  } catch (erro) {
    console.error('[notificarLaudoCriadoN8n] Erro inesperado:', erro);
    return {
      sucesso: false,
      mensagem: 'Erro ao processar notificação de laudo',
      erro: erro instanceof Error ? erro.message : String(erro),
    };
  }
 }
 /**
 * Versão assíncrona que não bloqueia - envia notificação em background
 * Útil para não aumentar o tempo de resposta da API
 * @param payload Dados do laudo e paciente
 */
 export function notificarLaudoAsyncBackground(
  payload: NotificacaoLaudoPayload
 ): void {
  // Envia notificação em background sem aguardar
  notificarLaudoCriadoN8n(payload)
    .then((result) => {
      if (!result.sucesso) {
        console.warn('[n8n] Notificação de laudo falhou (background):', result.erro);
      }
    })
    .catch((erro) => {
      console.error('[n8n] Erro ao notificar laudo em background:', erro);
    });
 }
 /**
 * Determina se as notificações n8n estão habilitadas
 * Pode ser controlado via variável de ambiente
 */
 export function notificacoesHabilitadas(): boolean {
  if (typeof window === 'undefined') {
    // Server-side: verificar variável de ambiente
    return process.env.NEXT_PUBLIC_N8N_ENABLED !== 'false';
  }
  // Client-side: sempre habilitado
  return true;
 }
--- a/susconecta/lib/reportService.ts
+++ b/susconecta/lib/reportService.ts
@ -1,148 +0,0 @@
 /**
 * serviço para criar relatórios e notificar pacientes via n8n
 * 
 * Este serviço encapsula a lógica de:
 * 1. Criar um novo report no Supabase
 * 2. Notificar o paciente via webhook n8n (que dispara SMS via Twilio)
 */
 interface CreateReportData {
  patientId: string; // UUID do paciente
  requestedBy: string; // UUID de quem solicitou (médico)
  exam: string;
  diagnosis: string;
  conclusion: string;
  contentHtml: string;
 }
 interface CreateReportResult {
  success: boolean;
  report?: any;
  error?: string;
 }
 /**
 * Cria um novo report no Supabase e notifica o paciente via n8n
 * 
 * Fluxo:
 * 1. Insere um novo registro na tabela 'reports' com status 'draft'
 * 2. Envia webhook para n8n com pacienteId e reportId
 * 3. n8n recebe e dispara notificação SMS via Twilio
 * 4. Retorna o report criado (mesmo que a notificação falhe)
 * 
 * @param data Dados do report a ser criado
 * @returns { success: true, report } ou { success: false, error }
 */
 export const createAndNotifyReport = async (data: CreateReportData): Promise<CreateReportResult> => {
  try {
    // Validação básica
    if (!data.patientId || !data.exam || !data.conclusion) {
      throw new Error('Faltam campos obrigatórios: patientId, exam, conclusion');
    }
    console.log('[reportService] Criando novo report para paciente:', data.patientId);
    // 1. Criar report no Supabase
    const BASE_API = 'https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports';
    let token: string | undefined = undefined;
    if (typeof window !== 'undefined') {
      token =
        localStorage.getItem('auth_token') ||
        localStorage.getItem('token') ||
        sessionStorage.getItem('auth_token') ||
        sessionStorage.getItem('token') ||
        undefined;
    }
    const headers: HeadersInit = {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'apikey': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inl1YW5xZnN3aGJlcmtvZXZ0bWZyIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTQ5NTQzNjksImV4cCI6MjA3MDUzMDM2OX0.g8Fm4XAvtX46zifBZnYVH4tVuQkqUH6Ia9CXQj4DztQ',
      'Prefer': 'return=representation',
    };
    if (token) {
      headers['Authorization'] = `Bearer ${token}`;
    }
    const reportPayload = {
      patient_id: data.patientId,
      status: 'draft',
      requested_by: data.requestedBy,
      exam: data.exam,
      diagnosis: data.diagnosis,
      conclusion: data.conclusion,
      content_html: data.contentHtml,
      created_at: new Date().toISOString(),
    };
    const responseSupabase = await fetch(BASE_API, {
      method: 'POST',
      headers,
      body: JSON.stringify(reportPayload),
    });
    if (!responseSupabase.ok) {
      const errorText = await responseSupabase.text();
      console.error('[reportService] Erro ao criar report no Supabase:', errorText);
      throw new Error(`Supabase error: ${responseSupabase.statusText}`);
    }
    const newReport = await responseSupabase.json();
    // Supabase retorna array
    const report = Array.isArray(newReport) ? newReport[0] : newReport;
    if (!report || !report.id) {
      throw new Error('Report criado mas sem ID retornado');
    }
    console.log('[reportService] Report criado com sucesso. ID:', report.id);
    // 2. Notificar paciente via n8n → Twilio
    try {
      console.log('[reportService] Enviando notificação para n8n...');
      const notificationResponse = await fetch('https://joaogustavo.me/webhook/notificar-laudo', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          pacienteId: report.patient_id, // UUID do paciente
          reportId: report.id,            // UUID do report
        }),
      });
      if (!notificationResponse.ok) {
        console.warn(
          '[reportService] Erro ao enviar notificação SMS. Status:',
          notificationResponse.status
        );
        // Não falha a criação do report se SMS falhar
      } else {
        console.log('[reportService] Notificação enviada com sucesso ao n8n');
      }
    } catch (erroNotificacao) {
      console.warn('[reportService] Erro ao enviar notificação para n8n:', erroNotificacao);
      // Não falha a criação do report se a notificação falhar
    }
    return { 
      success: true, 
      report,
    };
  } catch (error) {
    console.error('[reportService] Erro ao criar report:', error);
    return {
      success: false,
      error: error instanceof Error ? error.message : String(error),
    };
  }
 };
 /**
 * Interface exportada para uso em componentes
 */
 export type { CreateReportData, CreateReportResult };
--- a/susconecta/lib/reports.ts
+++ b/susconecta/lib/reports.ts
@ -47,7 +47,6 @@ import {
  ReportsResponse, 
  ReportResponse
 } from '@/types/report-types';
 import { buscarPacientePorId } from '@/lib/api';
 // Definição local para ApiError
 type ApiError = {
@ -215,52 +214,7 @@ export async function criarRelatorio(dadosRelatorio: CreateReportData, token?: s
  const resultado = await resposta.json();
  // Supabase retorna array
  if (Array.isArray(resultado) && resultado.length > 0) {
-    const novoRelatorio = resultado[0];
+    return resultado[0];
    // ✅ ENVIAR NOTIFICAÇÃO PARA N8N APÓS CRIAR RELATÓRIO
    if (novoRelatorio && novoRelatorio.id && dadosRelatorio.patient_id) {
      try {
        console.log('[criarRelatorio] Enviando notificação para n8n webhook...');
        // Buscar dados do paciente para incluir nome e telefone
        const pacienteData = await buscarPacientePorId(dadosRelatorio.patient_id).catch(e => {
          console.warn('[criarRelatorio] Erro ao buscar paciente:', e);
          return null;
        });
        const pacienteNome = pacienteData?.full_name || '';
        const pacienteCelular = pacienteData?.phone_mobile || '';
        const payloadWebhook = {
          pacienteId: dadosRelatorio.patient_id,
          reportId: novoRelatorio.id,
          pacienteNome: pacienteNome,
          pacienteCelular: pacienteCelular
        };
        console.log('[criarRelatorio] Payload do webhook:', payloadWebhook);
        const resNotificacao = await fetch('https://joaogustavo.me/webhook/notificar-laudo', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payloadWebhook)
        }).catch(e => {
          console.warn('[criarRelatorio] Erro de rede ao enviar webhook:', e);
          return null;
        });
        if (resNotificacao?.ok) {
          console.log('[criarRelatorio] ✅ Notificação enviada com sucesso ao n8n');
        } else if (resNotificacao) {
          console.warn('[criarRelatorio] ⚠️ Notificação ao n8n retornou status:', resNotificacao.status);
        }
      } catch (erroNotificacao) {
        console.warn('[criarRelatorio] ❌ Erro ao enviar notificação para n8n:', erroNotificacao);
        // Não falha a criação do relatório se a notificação falhar
      }
    }
    return novoRelatorio;
  }
  throw new Error('Resposta inesperada da API Supabase');
 }
@ -431,133 +385,3 @@ export async function listarRelatoriosParaMedicoAtribuido(userId?: string): Prom
    throw err;
  }
 }
 /**
 * Interface para dados necessários ao criar um laudo
 */
 export interface CriarLaudoData {
  pacienteId: string;           // ID do paciente (obrigatório)
  textoLaudo: string;           // Texto do laudo (obrigatório)
  medicoId?: string;            // ID do médico que criou (opcional)
  exame?: string;               // Tipo de exame (opcional)
  diagnostico?: string;         // Diagnóstico (opcional)
  conclusao?: string;           // Conclusão (opcional)
  cidCode?: string;             // Código CID (opcional)
  status?: 'rascunho' | 'concluido' | 'enviado';  // Status (opcional, padrão: 'concluido')
  contentHtml?: string;         // Conteúdo HTML (opcional)
  contentJson?: any;            // Conteúdo JSON (opcional)
 }
 /**
 * Cria um novo laudo no Supabase e notifica o paciente via n8n
 * 
 * Fluxo:
 * 1. Salva o laudo no Supabase (tabela 'reports')
 * 2. Envia notificação ao n8n com pacienteId e laudoId
 * 3. Retorna o laudo criado
 * 
 * @param laudoData Dados do laudo a criar
 * @returns Laudo criado com ID
 * @throws Erro se falhar ao criar o laudo
 */
 export async function criarLaudo(laudoData: CriarLaudoData): Promise<any> {
  try {
    // 1. Validação dos dados obrigatórios
    if (!laudoData.pacienteId || !laudoData.textoLaudo) {
      throw new Error('Paciente ID e Texto do Laudo são obrigatórios');
    }
    console.log('[criarLaudo] Criando laudo para paciente:', laudoData.pacienteId);
    // 2. Monta o payload para Supabase
    const payloadSupabase = {
      patient_id: laudoData.pacienteId,
      ...(laudoData.medicoId && { requested_by: laudoData.medicoId }),
      ...(laudoData.exame && { exam: laudoData.exame }),
      ...(laudoData.diagnostico && { diagnosis: laudoData.diagnostico }),
      ...(laudoData.conclusao && { conclusion: laudoData.conclusao }),
      ...(laudoData.cidCode && { cid_code: laudoData.cidCode }),
      ...(laudoData.contentHtml && { content_html: laudoData.contentHtml }),
      ...(laudoData.contentJson && { content_json: laudoData.contentJson }),
      status: laudoData.status || 'concluido',
    };
    // 3. Salva o laudo no Supabase
    const urlSupabase = 'https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports';
    let tokenAuth: string | undefined = undefined;
    if (typeof window !== 'undefined') {
      tokenAuth =
        localStorage.getItem('auth_token') ||
        localStorage.getItem('token') ||
        sessionStorage.getItem('auth_token') ||
        sessionStorage.getItem('token') ||
        undefined;
    }
    const headersSupabase: HeadersInit = {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'apikey': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inl1YW5xZnN3aGJlcmtvZXZ0bWZyIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTQ5NTQzNjksImV4cCI6MjA3MDUzMDM2OX0.g8Fm4XAvtX46zifBZnYVH4tVuQkqUH6Ia9CXQj4DztQ',
      'Prefer': 'return=representation',
    };
    if (tokenAuth) {
      headersSupabase['Authorization'] = `Bearer ${tokenAuth}`;
    }
    const resSupabase = await fetch(urlSupabase, {
      method: 'POST',
      headers: headersSupabase,
      body: JSON.stringify(payloadSupabase),
    });
    if (!resSupabase.ok) {
      const errorText = await resSupabase.text();
      console.error('[criarLaudo] Erro ao salvar laudo no Supabase:', errorText);
      throw new Error(`Falha ao salvar laudo: ${resSupabase.statusText}`);
    }
    const novoLaudo = await resSupabase.json();
    const laudoId = novoLaudo?.id;
    if (!laudoId) {
      throw new Error('Laudo criado mas sem ID retornado');
    }
    console.log('[criarLaudo] Laudo salvo com sucesso. ID:', laudoId);
    // 4. CHAMAR O N8N para notificar o paciente
    // Padrão simples: apenas pacienteId e reportId
    try {
      console.log('[criarLaudo] Enviando notificação para n8n...');
      const resNotificacao = await fetch('https://joaogustavo.me/webhook/notificar-laudo', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          pacienteId: laudoData.pacienteId,  // ← ID do paciente
          reportId: laudoId                   // ← ID do report criado
        })
      });
      if (resNotificacao.ok) {
        console.log('[criarLaudo] Notificação enviada com sucesso ao n8n');
      } else {
        console.warn('[criarLaudo] Notificação ao n8n retornou status:', resNotificacao.status);
      }
    } catch (erroNotificacao) {
      // Não falha a criação do laudo se a notificação falhar
      console.warn('[criarLaudo] Erro ao enviar notificação para n8n:', erroNotificacao);
    }
    // 5. Retorna o laudo criado
    return {
      ...novoLaudo,
      mensagem: 'Laudo criado e paciente notificado com sucesso!',
    };
  } catch (erro) {
    console.error('[criarLaudo] Erro ao criar laudo:', erro);
    throw erro;
  }
 }
--- a/susconecta/package.json
+++ b/susconecta/package.json
@ -58,7 +58,6 @@
    "jspdf": "^3.0.3",
    "lucide-react": "^0.454.0",
    "next-themes": "latest",
    "ogl": "^1.0.11",
    "react": "^18",
    "react-day-picker": "latest",
    "react-dom": "^18",
--- a/susconecta/pnpm-lock.yaml
+++ b/susconecta/pnpm-lock.yaml
@ -152,9 +152,6 @@ importers:
      next-themes:
        specifier: latest
        version: 0.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
      ogl:
        specifier: ^1.0.11
        version: 1.0.11
      react:
        specifier: ^18
        version: 18.3.1
@ -2812,9 +2809,6 @@ packages:
    resolution: {integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==}
    engines: {node: '>= 0.4'}
  ogl@1.0.11:
    resolution: {integrity: sha512-kUpC154AFfxi16pmZUK4jk3J+8zxwTWGPo03EoYA8QPbzikHoaC82n6pNTbd+oEaJonaE8aPWBlX7ad9zrqLsA==}
  optionator@0.9.4:
    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
    engines: {node: '>= 0.8.0'}
@ -6095,8 +6089,6 @@ snapshots:
      define-properties: 1.2.1
      es-object-atoms: 1.1.1
  ogl@1.0.11: {}
  optionator@0.9.4:
    dependencies:
      deep-is: 0.1.4
--- a/susconecta/types/lamejs.d.ts
+++ b/susconecta/types/lamejs.d.ts
@ -1,14 +0,0 @@
 // Minimal type declarations for lamejs used in demo-voice-orb
 // Extend if more APIs are required.
 declare module 'lamejs' {
  class Mp3Encoder {
    constructor(channels: number, sampleRate: number, kbps: number);
    encodeBuffer(buffer: Int16Array): Uint8Array;
    flush(): Uint8Array;
  }
  export { Mp3Encoder };
  // Default export pattern support
  const _default: { Mp3Encoder: typeof Mp3Encoder };
  export default _default;
 }
--- a/susconecta/types/ogl.d.ts
+++ b/susconecta/types/ogl.d.ts
@ -1 +0,0 @@
 declare module 'ogl';