From c1ff6524234767d56efbccd0d4765f308c06fe92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Gustavo?=
 <166467972+JoaoGustavo-dev@users.noreply.github.com>
Date: Fri, 3 Oct 2025 00:47:45 -0300
Subject: [PATCH 01/19] fixing-laudo

---
 .../configuracao/agenda/page.tsx              |   34 -
 .../configuracao/comunicacao/page.tsx         |   36 -
 .../configuracao/notificacoes/page.tsx        |   25 -
 .../app/(main-routes)/configuracao/page.tsx   |   77 -
 .../configuracao/seguranca/page.tsx           |   33 -
 .../configuracao/usuarios/page.tsx            |   37 -
 susconecta/app/profissional/page.tsx          | 1517 +++++++++++++----
 susconecta/components/dashboard/sidebar.tsx   |    2 -
 susconecta/next-env.d.ts                      |    3 +-
 9 files changed, 1143 insertions(+), 621 deletions(-)
 delete mode 100644 susconecta/app/(main-routes)/configuracao/agenda/page.tsx
 delete mode 100644 susconecta/app/(main-routes)/configuracao/comunicacao/page.tsx
 delete mode 100644 susconecta/app/(main-routes)/configuracao/notificacoes/page.tsx
 delete mode 100644 susconecta/app/(main-routes)/configuracao/page.tsx
 delete mode 100644 susconecta/app/(main-routes)/configuracao/seguranca/page.tsx
 delete mode 100644 susconecta/app/(main-routes)/configuracao/usuarios/page.tsx

diff --git a/susconecta/app/(main-routes)/configuracao/agenda/page.tsx b/susconecta/app/(main-routes)/configuracao/agenda/page.tsx
deleted file mode 100644
index 0b55e39..0000000
--- a/susconecta/app/(main-routes)/configuracao/agenda/page.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-"use client"
-
-import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
-
-export default function AgendaConfigPage() {
-  return (
-    <div className="p-6 space-y-6">
-      <h1 className="text-2xl font-bold">Configurações da Agenda</h1>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Tempo padrão de consulta</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <select className="border rounded p-2">
-            <option>15 minutos</option>
-            <option>30 minutos</option>
-            <option>1 hora</option>
-          </select>
-        </CardContent>
-      </Card>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Horário de funcionamento</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <input type="time" className="border rounded p-2 mr-2" /> até
-          <input type="time" className="border rounded p-2 ml-2" />
-        </CardContent>
-      </Card>
-    </div>
-  )
-}
diff --git a/susconecta/app/(main-routes)/configuracao/comunicacao/page.tsx b/susconecta/app/(main-routes)/configuracao/comunicacao/page.tsx
deleted file mode 100644
index 9da30df..0000000
--- a/susconecta/app/(main-routes)/configuracao/comunicacao/page.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-"use client"
-
-import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
-
-export default function ComunicacaoConfigPage() {
-  return (
-    <div className="p-6 space-y-6">
-      <h1 className="text-2xl font-bold">Configurações de Comunicação</h1>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Modelo de Lembrete</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <textarea
-            className="w-full border rounded p-2"
-            placeholder="Exemplo: Olá {nome}, sua consulta está marcada para {data} às {hora}."
-          />
-        </CardContent>
-      </Card>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Frequência de Lembretes</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <select className="border rounded p-2">
-            <option>24 horas antes</option>
-            <option>4 horas antes</option>
-            <option>1 hora antes</option>
-          </select>
-        </CardContent>
-      </Card>
-    </div>
-  )
-}
diff --git a/susconecta/app/(main-routes)/configuracao/notificacoes/page.tsx b/susconecta/app/(main-routes)/configuracao/notificacoes/page.tsx
deleted file mode 100644
index cf050a5..0000000
--- a/susconecta/app/(main-routes)/configuracao/notificacoes/page.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-    "use client"
-
-import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
-
-export default function NotificacoesConfigPage() {
-  return (
-    <div className="p-6 space-y-6">
-      <h1 className="text-2xl font-bold">Configurações de Notificações</h1>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Alertas Internos</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <label className="flex items-center space-x-2">
-            <input type="checkbox" className="h-4 w-4" /> <span>Notificar quando consulta for cancelada</span>
-          </label>
-          <label className="flex items-center space-x-2 mt-2">
-            <input type="checkbox" className="h-4 w-4" /> <span>Notificar quando novo paciente for cadastrado</span>
-          </label>
-        </CardContent>
-      </Card>
-    </div>
-  )
-}
diff --git a/susconecta/app/(main-routes)/configuracao/page.tsx b/susconecta/app/(main-routes)/configuracao/page.tsx
deleted file mode 100644
index c88f8b6..0000000
--- a/susconecta/app/(main-routes)/configuracao/page.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-"use client"
-
-import Link from "next/link"
-import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
-import {
-  Calendar,
-  MessageSquare,
-  Bell,
-  Users,
-  ShieldCheck,
-} from "lucide-react"
-
-export default function ConfiguracaoPage() {
-  const items = [
-    {
-      title: "Agenda",
-      desc: "Defina horários e bloqueios",
-      href: "/dashboard/configuracao/agenda",
-      icon: Calendar,
-    },
-    {
-      title: "Comunicação",
-      desc: "Gerencie mensagens automáticas",
-      href: "/dashboard/configuracao/comunicacao",
-      icon: MessageSquare,
-    },
-    {
-      title: "Notificações",
-      desc: "Configure alertas internos",
-      href: "/dashboard/configuracao/notificacoes",
-      icon: Bell,
-    },
-    {
-      title: "Usuários",
-      desc: "Controle acessos e permissões",
-      href: "/dashboard/configuracao/usuarios",
-      icon: Users,
-    },
-    {
-      title: "Segurança",
-      desc: "Senhas, privacidade e LGPD",
-      href: "/dashboard/configuracao/seguranca",
-      icon: ShieldCheck,
-    },
-  ]
-
-  return (
-    <div className="p-6 space-y-6">
-      {/* título */}
-      <h1 className="text-2xl font-bold">Configurações</h1>
-
-      {/* introdução */}
-      <p className="text-gray-600">
-        Ajuste os principais parâmetros do sistema. Escolha uma das seções abaixo
-        para configurar horários, mensagens, notificações internas, permissões de usuários
-        e regras de segurança da clínica.
-      </p>
-
-      {/* grid de cards */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-        {items.map((item) => (
-          <Link key={item.title} href={item.href}>
-            <Card className="cursor-pointer hover:shadow-md transition">
-              <CardHeader className="flex flex-row items-center gap-2">
-                <item.icon className="w-5 h-5 text-primary" />
-                <CardTitle>{item.title}</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <p className="text-sm text-gray-600">{item.desc}</p>
-              </CardContent>
-            </Card>
-          </Link>
-        ))}
-      </div>
-    </div>
-  )
-}
diff --git a/susconecta/app/(main-routes)/configuracao/seguranca/page.tsx b/susconecta/app/(main-routes)/configuracao/seguranca/page.tsx
deleted file mode 100644
index d43de85..0000000
--- a/susconecta/app/(main-routes)/configuracao/seguranca/page.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-"use client"
-
-import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
-
-export default function SegurancaConfigPage() {
-  return (
-    <div className="p-6 space-y-6">
-      <h1 className="text-2xl font-bold">Configurações de Segurança</h1>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Alterar Senha</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <input type="password" placeholder="Senha atual" className="w-full border rounded p-2 mb-2" />
-          <input type="password" placeholder="Nova senha" className="w-full border rounded p-2 mb-2" />
-          <input type="password" placeholder="Confirmar nova senha" className="w-full border rounded p-2" />
-        </CardContent>
-      </Card>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Política de Dados (LGPD)</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <label className="flex items-center space-x-2">
-            <input type="checkbox" className="h-4 w-4" /> <span>Solicitar consentimento do paciente no cadastro</span>
-          </label>
-        </CardContent>
-      </Card>
-    </div>
-  )
-}
diff --git a/susconecta/app/(main-routes)/configuracao/usuarios/page.tsx b/susconecta/app/(main-routes)/configuracao/usuarios/page.tsx
deleted file mode 100644
index 21db097..0000000
--- a/susconecta/app/(main-routes)/configuracao/usuarios/page.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-"use client"
-
-import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
-
-export default function UsuariosConfigPage() {
-  return (
-    <div className="p-6 space-y-6">
-      <h1 className="text-2xl font-bold">Gerenciamento de Usuários</h1>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Usuários da Clínica</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <table className="w-full border">
-            <thead>
-              <tr className="bg-gray-100">
-                <th className="p-2 text-left">Nome</th>
-                <th className="p-2 text-left">Email</th>
-                <th className="p-2 text-left">Permissão</th>
-                <th className="p-2">Ações</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td className="p-2">Maria Silva</td>
-                <td className="p-2">maria@clinica.com</td>
-                <td className="p-2">Secretária</td>
-                <td className="p-2">[Editar] [Remover]</td>
-              </tr>
-            </tbody>
-          </table>
-        </CardContent>
-      </Card>
-    </div>
-  )
-}
diff --git a/susconecta/app/profissional/page.tsx b/susconecta/app/profissional/page.tsx
index d2c6ab0..1119199 100644
--- a/susconecta/app/profissional/page.tsx
+++ b/susconecta/app/profissional/page.tsx
@@ -1,9 +1,194 @@
 "use client";
 
-import React, { useState, useRef } from "react";
-import SignatureCanvas from "react-signature-canvas";
-import ReactQuill from "react-quill";
-import "react-quill/dist/quill.snow.css";
+import React, { useState, useRef, useEffect } from "react";
+import dynamic from "next/dynamic";
+
+// Importações dinâmicas para evitar erros de SSR
+const SignatureCanvas = dynamic(() => import("react-signature-canvas"), {
+  ssr: false,
+});
+
+
+
+// Função para converter marcações em HTML
+const formatTextToHtml = (text: string): string => {
+  return text
+    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+    .replace(/\*(.*?)\*/g, '<em>$1</em>')
+    .replace(/<u>(.*?)<\/u>/g, '<u>$1</u>')
+    .replace(/\n/g, '<br>');
+};
+
+// Editor simples para laudos
+const QuillEditor = ({ value, onChange }: { value: string; onChange: (content: string) => void }) => {
+  const [showPreview, setShowPreview] = useState(false);
+
+  return (
+    <div className="space-y-2">
+      <div className="flex flex-wrap gap-2 p-2 border-b justify-between">
+        <div className="flex gap-2">
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => {
+              const textarea = document.querySelector('textarea[data-quill-temp]') as HTMLTextAreaElement;
+              if (textarea) {
+                const start = textarea.selectionStart;
+                const end = textarea.selectionEnd;
+                const selectedText = textarea.value.substring(start, end);
+                
+                if (selectedText) {
+                  const newText = textarea.value.substring(0, start) + `**${selectedText}**` + textarea.value.substring(end);
+                  onChange(newText);
+                  setTimeout(() => {
+                    textarea.setSelectionRange(start + 2, end + 2);
+                    textarea.focus();
+                  }, 0);
+                } else {
+                  const newText = textarea.value.substring(0, start) + `**texto em negrito**` + textarea.value.substring(end);
+                  onChange(newText);
+                  setTimeout(() => {
+                    textarea.setSelectionRange(start + 2, start + 18);
+                    textarea.focus();
+                  }, 0);
+                }
+              }
+            }}
+            title="Negrito"
+          >
+            <strong>B</strong>
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => {
+              const textarea = document.querySelector('textarea[data-quill-temp]') as HTMLTextAreaElement;
+              if (textarea) {
+                const start = textarea.selectionStart;
+                const end = textarea.selectionEnd;
+                const selectedText = textarea.value.substring(start, end);
+                
+                if (selectedText) {
+                  const newText = textarea.value.substring(0, start) + `*${selectedText}*` + textarea.value.substring(end);
+                  onChange(newText);
+                  setTimeout(() => {
+                    textarea.setSelectionRange(start + 1, end + 1);
+                    textarea.focus();
+                  }, 0);
+                } else {
+                  const newText = textarea.value.substring(0, start) + `*texto em itálico*` + textarea.value.substring(end);
+                  onChange(newText);
+                  setTimeout(() => {
+                    textarea.setSelectionRange(start + 1, start + 17);
+                    textarea.focus();
+                  }, 0);
+                }
+              }
+            }}
+            title="Itálico"
+          >
+            <em>I</em>
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => {
+              const textarea = document.querySelector('textarea[data-quill-temp]') as HTMLTextAreaElement;
+              if (textarea) {
+                const start = textarea.selectionStart;
+                const end = textarea.selectionEnd;
+                const selectedText = textarea.value.substring(start, end);
+                
+                if (selectedText) {
+                  const newText = textarea.value.substring(0, start) + `<u>${selectedText}</u>` + textarea.value.substring(end);
+                  onChange(newText);
+                  setTimeout(() => {
+                    textarea.setSelectionRange(start + 3, end + 3);
+                    textarea.focus();
+                  }, 0);
+                } else {
+                  const newText = textarea.value.substring(0, start) + `<u>texto sublinhado</u>` + textarea.value.substring(end);
+                  onChange(newText);
+                  setTimeout(() => {
+                    textarea.setSelectionRange(start + 3, start + 19);
+                    textarea.focus();
+                  }, 0);
+                }
+              }
+            }}
+            title="Sublinhado"
+          >
+            <u>U</u>
+          </Button>
+        </div>
+        
+        <Button
+          type="button"
+          variant={showPreview ? "default" : "outline"}
+          size="sm"
+          onClick={() => setShowPreview(!showPreview)}
+        >
+          {showPreview ? "Editar" : "Prévia"}
+        </Button>
+      </div>
+
+      {showPreview ? (
+        <div className="min-h-64 p-3 border rounded-md bg-white text-sm">
+          {value ? (
+            <div dangerouslySetInnerHTML={{ __html: formatTextToHtml(value) }} />
+          ) : (
+            <p className="text-gray-400">Nenhum conteúdo para prévia</p>
+          )}
+        </div>
+      ) : (
+        <Textarea
+          data-quill-temp="true"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder="Digite o conteúdo do laudo aqui..."
+          className="min-h-64 text-sm"
+          rows={12}
+        />
+      )}
+      
+      <div className="text-xs text-gray-500">
+        <strong>Dica:</strong> Selecione um texto e clique nos botões B, I, U para formatar. Use o botão "Prévia" para ver como ficará formatado.
+        <br />
+        <strong>Formatação:</strong> **negrito**, *itálico*, &lt;u&gt;sublinhado&lt;/u&gt;
+      </div>
+    </div>
+  );
+};
+
+// Wrapper para o SignatureCanvas para evitar erros
+const SignaturePad = ({ canvasRef, onEnd }: { canvasRef: any; onEnd: () => void }) => {
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  if (!isMounted) {
+    return <div className="h-32 border rounded bg-gray-50 flex items-center justify-center">Carregando área de assinatura...</div>;
+  }
+
+  return (
+    <SignatureCanvas
+      ref={canvasRef}
+      penColor="#000"
+      backgroundColor="#fff"
+      canvasProps={{ 
+        width: 400, 
+        height: 120, 
+        className: "border rounded bg-white w-full" 
+      }}
+      onEnd={onEnd}
+    />
+  );
+};
 import Link from "next/link";
 import ProtectedRoute from "@/components/ProtectedRoute";
 import { useAuth } from "@/hooks/useAuth";
@@ -30,6 +215,12 @@ import {
 import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
 import { User, FolderOpen, X, Users, MessageSquare, ClipboardList, Plus, Edit, Trash2, ChevronLeft, ChevronRight, Clock, FileCheck, Upload, Download, Eye, History, Stethoscope, Pill, Activity } from "lucide-react"
 import { Calendar as CalendarIcon, FileText, Settings } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import {
   Tooltip,
   TooltipContent,
@@ -37,8 +228,6 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 
-
-import dynamic from "next/dynamic";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin from "@fullcalendar/interaction";
@@ -176,6 +365,185 @@ const ProfissionalPage = () => {
   const [selectedEvent, setSelectedEvent] = useState<any>(null);
   const [currentCalendarDate, setCurrentCalendarDate] = useState(new Date());
 
+  // Estados para o gerenciamento de laudos
+  const [laudosData, setLaudosData] = useState<any[]>([
+    {
+      id: "30648642",
+      data: "23/07/2025",
+      preco: "25/07/2025",
+      recipient: "Ana Souza",
+      execSolicitante: "Dr. Carlos Andrade",
+      exameTipo: "Avaliação Cardiológica Completa",
+      status: "Entregue",
+      cid: "I25.1",
+      diagnostico: "Doença aterosclerótica do coração com angina de peito",
+      conclusao: "Paciente apresenta quadro de doença arterial coronariana estável. Recomendado tratamento medicamentoso e acompanhamento regular.",
+      conteudo: `**HISTÓRIA CLÍNICA:**
+Paciente do sexo feminino, 42 anos, procurou atendimento devido a episódios de dor torácica aos esforços, com duração de aproximadamente 5 minutos, que melhora com repouso. Relata também dispneia aos médios esforços e palpitações ocasionais.
+
+**ANTECEDENTES:**
+- Hipertensão arterial sistêmica há 8 anos
+- Dislipidemia
+- Histórico familiar de doença arterial coronariana (pai)
+- Sedentarismo
+
+**EXAME FÍSICO:**
+- PA: 145/90 mmHg
+- FC: 76 bpm
+- Peso: 68 kg, Altura: 1,62 m, IMC: 25,9 kg/m²
+- Ausculta cardíaca: bulhas normofonéticas, sem sopros
+- Ausculta pulmonar: murmúrio vesicular presente bilateralmente
+
+**EXAMES COMPLEMENTARES:**
+- ECG: ritmo sinusal, sem alterações isquêmicas
+- Ecocardiograma: função sistólica preservada (FEVE: 65%), sem alterações segmentares
+- Teste ergométrico: positivo para isquemia miocárdica
+
+**CONDUTA:**
+- Otimização do tratamento anti-hipertensivo
+- Estatina para controle da dislipidemia  
+- Antiagregante plaquetário
+- Orientações sobre estilo de vida
+- Retorno em 30 dias`
+    },
+    {
+      id: "30645947",
+      data: "24/07/2025", 
+      preco: "25/07/2025",
+      recipient: "Bruno Lima",
+      execSolicitante: "Dr. Carlos Andrade",
+      exameTipo: "Avaliação Dermatológica - Lesões Pigmentadas",
+      status: "Entregue",
+      cid: "D22.9",
+      diagnostico: "Nevo melanocítico benigno",
+      conclusao: "Lesões pigmentadas benignas. Recomendado acompanhamento dermatológico anual e uso de protetor solar.",
+      conteudo: `**HISTÓRIA CLÍNICA:**
+Paciente masculino, 33 anos, comparece para avaliação de múltiplas lesões pigmentadas pelo corpo, algumas com crescimento recente. Nega sintomas como prurido, sangramento ou mudanças de coloração. Histórico de exposição solar intensa durante a infância e adolescência.
+
+**ANTECEDENTES:**
+- Fototipo II (pele clara, queima facilmente)
+- Múltiplas queimaduras solares na infância
+- Histórico familiar negativo para melanoma
+- Uso irregular de protetor solar
+
+**EXAME FÍSICO:**
+**Dermatoscopia realizada em 12 lesões:**
+
+*Lesão dorso (2cm superior ao ombro direito):*
+- Mácula acastanhada, 4mm, bordas regulares
+- Padrão dermatoscópico: rede pigmentar homogênea
+- Score ABCD: 2,5 (baixo risco)
+
+*Lesão região escapular esquerda:*
+- Pápula pigmentada, 3mm, simétrica
+- Padrão globular homogêneo
+- Sem sinais de malignidade
+
+*Demais lesões:*
+- Características benignas similares
+- Ausência de critérios de malignidade
+- Padrões dermatoscópicos típicos de nevos
+
+**CONDUTA:**
+- Mapeamento corporal documentado
+- Fotoproteção rigorosa (FPS 60+)
+- Autoexame mensal orientado
+- Reavaliação dermatoscópica em 12 meses
+- Biópsia desnecessária no momento atual`
+    },
+    {
+      id: "30649123",
+      data: "25/07/2025",
+      preco: "26/07/2025", 
+      recipient: "Carla Menezes",
+      execSolicitante: "Dr. Carlos Andrade",
+      exameTipo: "Avaliação Cardiológica - Insuficiência Cardíaca",
+      status: "Rascunho",
+      cid: "I50.9",
+      diagnostico: "Insuficiência cardíaca não especificada",
+      conclusao: "Insuficiência cardíaca classe funcional II. Necessário ajuste da medicação e monitorização rigorosa.",
+      conteudo: `**HISTÓRIA CLÍNICA:**
+Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há 6 meses, associada a edema de membros inferiores e fadiga. Nega dor torácica, palpitações ou síncope.
+
+**ANTECEDENTES:**
+- Hipertensão arterial há 15 anos
+- Diabetes mellitus tipo 2 há 10 anos
+- Infarto agudo do miocárdio há 3 anos
+- Tabagismo pregresso (parou há 5 anos)
+
+**EXAME FÍSICO:**
+- PA: 130/80 mmHg
+- FC: 88 bpm (irregular)
+- Edema ++/4+ em MMII
+- Estase jugular a 45°
+- Ausculta cardíaca: B3 audível, sopro sistólico 2+/6+
+- Crepitações bibasais
+
+**EXAMES:**
+- BNP: 850 pg/ml (elevado)
+- Ecocardiograma: FEVE 35%, dilatação de VE
+- RX tórax: cardiomegalia, congestão pulmonar
+
+**MEDICAÇÕES EM USO:**
+- Enalapril 10mg 2x/dia
+- Carvedilol 6,25mg 2x/dia  
+- Furosemida 40mg/dia
+- Metformina 850mg 2x/dia
+
+**CONDUTA PROPOSTA:**
+- Ajuste das medicações para IC
+- Restrição de sódio (<2g/dia)
+- Controle rigoroso de peso diário
+- Retorno em 15 dias`
+    }
+  ]);
+  
+  const [filtroStatus, setFiltroStatus] = useState("todos");
+  const [buscarTexto, setBuscarTexto] = useState("");
+  const [dataInicio, setDataInicio] = useState("");
+  const [dataFim, setDataFim] = useState("");
+  const [laudoAtivo, setLaudoAtivo] = useState<any>(null);
+  const [modoEdicao, setModoEdicao] = useState<'novo' | 'editar' | null>(null);
+
+  // Estados para o editor de laudo
+  const [editorLaudo, setEditorLaudo] = useState({
+    pacienteId: "",
+    pacienteNome: "",
+    pacienteCpf: "",
+    pacienteIdade: "",
+    cid: "",
+    diagnostico: "",
+    conclusao: "",
+    conteudo: "",
+    imagens: [] as string[],
+    pdfAnexos: [] as string[],
+    incluirData: true,
+    incluirAssinatura: true,
+    status: "Rascunho"
+  });
+  const [assinaturaLaudo, setAssinaturaLaudo] = useState<string | null>(null);
+  const [previewLaudo, setPreviewLaudo] = useState(false);
+  const [abaAtiva, setAbaAtiva] = useState<'editor' | 'imagens' | 'anexos' | 'preview'>('editor');
+  const [laudoVisualizacao, setLaudoVisualizacao] = useState<any>(null);
+  const sigCanvasLaudoRef = useRef<any>(null);
+
+  // Modelos e frases prontas
+  const modelosTexto = {
+    "Exame Normal": "O exame realizado apresentou parâmetros dentro da normalidade, sem alterações significativas detectadas.",
+    "Acompanhamento": "Recomenda-se acompanhamento médico regular para monitoramento da evolução do quadro clínico.",
+    "Alterações Leves": "Foram observadas alterações leves que requerem acompanhamento, sem indicação de intervenção imediata.",
+    "Urgente": "Os achados indicam necessidade de avaliação médica urgente e início de tratamento adequado."
+  };
+
+  const camposDinamicos = [
+    { label: "Nome do Paciente", value: "{NOME_PACIENTE}" },
+    { label: "Idade", value: "{IDADE}" },
+    { label: "CPF", value: "{CPF}" },
+    { label: "Data Atual", value: "{DATA_ATUAL}" },
+    { label: "CID", value: "{CID}" },
+    { label: "Médico", value: "{MEDICO}" }
+  ];
+
   const handleSave = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
     console.log("Laudo salvo!");
@@ -568,143 +936,13 @@ const ProfissionalPage = () => {
 
   
   function PacientesSection({ handleAbrirProntuario, setActiveSection }) {
-    // Estados para busca de pacientes
-     const [buscaPaciente, setBuscaPaciente] = useState("");
-  const [pacientesBusca, setPacientesBusca] = useState<any[]>([]);
-  const [carregandoBusca, setCarregandoBusca] = useState(false);
-  const [erroBusca, setErroBusca] = useState<string | null>(null);
-
-
-    // Função para buscar pacientes
-    const handleBuscarPaciente = async () => {
-      if (!buscaPaciente.trim()) {
-        setPacientesBusca([]);
-        setErroBusca(null);
-        return;
-      }
-
-      setCarregandoBusca(true);
-      setErroBusca(null);
-
-      try {
-        // Importa a função de busca
-        const { buscarPacientes } = await import("@/lib/api");
-        const resultados = await buscarPacientes(buscaPaciente.trim());
-        
-        if (resultados.length === 0) {
-          setErroBusca("Nenhum paciente encontrado com os critérios informados.");
-          setPacientesBusca([]);
-        } else {
-          // Transforma os dados da API para o formato usado no componente
-          const pacientesFormatados = resultados.map(p => ({
-            nome: p.full_name || "Nome não informado",
-            cpf: p.cpf || "CPF não informado",
-            idade: p.birth_date ? new Date().getFullYear() - new Date(p.birth_date).getFullYear() : "N/A",
-            statusLaudo: "Pendente", // Status padrão
-            id: p.id
-          }));
-          setPacientesBusca(pacientesFormatados);
-          setErroBusca(null);
-        }
-      } catch (error: any) {
-        console.error("Erro ao buscar pacientes:", error);
-        setErroBusca(error.message || "Erro ao buscar pacientes. Tente novamente.");
-        setPacientesBusca([]);
-      } finally {
-        setCarregandoBusca(false);
-      }
-    };
-
-    const handleLimparBusca = () => {
-      setBuscaPaciente("");
-      setPacientesBusca([]);
-      setErroBusca(null);
-    };
-
     return (
       <div className="bg-white shadow-md rounded-lg p-6">
         <h2 className="text-2xl font-bold mb-4">Gerenciamento de Pacientes</h2>
         
-        {/* Campo de busca */}
-        <div className="mb-6 p-4 bg-gray-50 rounded-lg">
-          <h3 className="text-lg font-semibold mb-3">Buscar Paciente</h3>
-          <div className="flex gap-2">
-            <div className="flex-1">
-              <Input
-                placeholder="Digite ID, CPF, nome ou email do paciente..."
-                value={buscaPaciente}
-                onChange={(e) => setBuscaPaciente(e.target.value)}
-                onKeyDown={(e) => e.key === "Enter" && handleBuscarPaciente()}
-                className="w-full"
-              />
-            </div>
-            <Button 
-              onClick={handleBuscarPaciente} 
-              disabled={carregandoBusca}
-              className="flex items-center gap-2"
-            >
-              {carregandoBusca ? (
-                <>
-                  <div className="animate-spin h-4 w-4 border-2 border-white border-t-transparent rounded-full"></div>
-                  Buscando...
-                </>
-              ) : (
-                <>
-                  <User className="h-4 w-4" />
-                  Buscar
-                </>
-              )}
-            </Button>
-            {(buscaPaciente || pacientesBusca.length > 0 || erroBusca) && (
-              <Button 
-                variant="outline" 
-                onClick={handleLimparBusca}
-                className="flex items-center gap-2"
-              >
-                <X className="h-4 w-4" />
-                Limpar
-              </Button>
-            )}
-          </div>
-          
-          {/* Resultados da busca */}
-          {erroBusca && (
-            <div className="mt-3 p-3 bg-red-50 border border-red-200 rounded-md">
-              <p className="text-red-700 text-sm">{erroBusca}</p>
-            </div>
-          )}
-          
-          {pacientesBusca.length > 0 && (
-            <div className="mt-4">
-              <h4 className="text-md font-medium mb-2">Resultados da busca ({pacientesBusca.length}):</h4>
-              <div className="space-y-2">
-                {pacientesBusca.map((paciente, index) => (
-                  <div key={index} className="flex items-center justify-between p-3 bg-white border rounded-lg hover:shadow-sm">
-                    <div>
-                      <p className="font-medium">{paciente.nome}</p>
-                      <p className="text-sm text-gray-600">CPF: {paciente.cpf} • Idade: {paciente.idade} anos</p>
-                    </div>
-                    <Button
-                      size="sm"
-                      onClick={() => {
-                        handleAbrirProntuario(paciente);
-                        setActiveSection('prontuario');
-                      }}
-                      className="flex items-center gap-2"
-                    >
-                      <FolderOpen className="h-4 w-4" />
-                      Abrir Prontuário
-                    </Button>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-        </div>
-
-        {/* Tabela de pacientes padrão */}
+        {/* Tabela de pacientes */}
         <div>
-          <h3 className="text-lg font-semibold mb-3">Pacientes Recentes</h3>
+          <h3 className="text-lg font-semibold mb-3">Lista de Pacientes</h3>
           <Table>
             <TableHeader>
               <TableRow>
@@ -1644,259 +1882,716 @@ const ProfissionalPage = () => {
     </div>
   );
 
-  
-  const renderLaudosSection = () => (
-    <section>
-      <LaudoEditor />
-    </section>
-  );
-// --- LaudoEditor COMPONENT ---
-function LaudoEditor() {
-  
-  const pacientes = [
-    { nome: "Ana Souza", cpf: "123.456.789-00", idade: 32, sexo: "Feminino" },
-    { nome: "Bruno Lima", cpf: "987.654.321-00", idade: 45, sexo: "Masculino" },
-    { nome: "Carla Menezes", cpf: "111.222.333-44", idade: 28, sexo: "Feminino" },
-  ];
-
-  const [conteudo, setConteudo] = useState("");
-  const [pacienteSelecionado, setPacienteSelecionado] = useState<any>(null);
-  const [cid, setCid] = useState("");
-  const [imagem, setImagem] = useState<string | null>(null);
-  const [assinatura, setAssinatura] = useState<string | null>(null);
-  const sigCanvasRef = useRef<any>(null);
-  const [laudos, setLaudos] = useState<any[]>([]);
-  const [preview, setPreview] = useState(false);
-
-  
-  const handleSelectPaciente = (paciente: any) => {
-    setPacienteSelecionado(paciente);
-  };
-
-  const limparPaciente = () => setPacienteSelecionado(null);
-
-  const salvarLaudo = (status: string) => {
-    if (!pacienteSelecionado) {
-      alert('Selecione um paciente.');
-      return;
+  const renderLaudosSection = () => {
+    if (modoEdicao) {
+      return renderEditorLaudo();
     }
-    const novoLaudo = {
-      paciente: pacienteSelecionado.nome,
-      cpf: pacienteSelecionado.cpf,
-      idade: pacienteSelecionado.idade,
-      sexo: pacienteSelecionado.sexo,
-      cid,
-      conteudo,
-      imagem,
-      assinatura,
-      data: new Date().toLocaleString(),
-      status
-    };
-    setLaudos(prev => [novoLaudo, ...prev]);
-    setPacienteSelecionado(null); setCid(""); setConteudo(""); setImagem(null); setAssinatura(null);
-    if (sigCanvasRef.current) sigCanvasRef.current.clear();
+    
+    return (
+      <div className="space-y-6">
+        {/* Cabeçalho */}
+        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+          <div>
+            <h2 className="text-2xl font-bold text-gray-900">Gerenciamento de Laudos</h2>
+            <p className="text-gray-600 text-sm mt-1">
+              Nesta seção você pode gerenciar todos os laudos gerados através da integração.
+            </p>
+          </div>
+          <Button 
+            onClick={() => {
+              // Limpar dados ao criar novo laudo
+              setEditorLaudo({
+                pacienteId: "",
+                pacienteNome: "",
+                pacienteCpf: "",
+                pacienteIdade: "",
+                cid: "",
+                diagnostico: "",
+                conclusao: "",
+                conteudo: "",
+                imagens: [] as string[],
+                pdfAnexos: [] as string[],
+                incluirData: true,
+                incluirAssinatura: true,
+                status: "Rascunho"
+              });
+              setLaudoAtivo(null);
+              setModoEdicao('novo');
+            }}
+            className="flex items-center gap-2 cursor-pointer"
+          >
+            <Plus className="h-4 w-4" />
+            Adicionar
+          </Button>
+        </div>
+
+        {/* Filtros e Busca */}
+        <div className="bg-white rounded-lg shadow-sm border p-4 space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="buscar">Buscar paciente/código</Label>
+              <Input
+                id="buscar"
+                placeholder="Digite para buscar..."
+                value={buscarTexto}
+                onChange={(e) => setBuscarTexto(e.target.value)}
+                className="w-full"
+              />
+            </div>
+            
+            <div className="space-y-2">
+              <Label htmlFor="dataInicio">Data Início</Label>
+              <Input
+                id="dataInicio"
+                type="date"
+                value={dataInicio}
+                onChange={(e) => setDataInicio(e.target.value)}
+              />
+            </div>
+            
+            <div className="space-y-2">
+              <Label htmlFor="dataFim">Data Fim</Label>
+              <Input
+                id="dataFim"
+                type="date"
+                value={dataFim}
+                onChange={(e) => setDataFim(e.target.value)}
+              />
+            </div>
+            
+            <div className="space-y-2">
+              <Label>Status</Label>
+              <Select value={filtroStatus} onValueChange={setFiltroStatus}>
+                <SelectTrigger className="cursor-pointer">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="todos">Todos</SelectItem>
+                  <SelectItem value="Rascunho">Rascunho</SelectItem>
+                  <SelectItem value="Pendente">Pendente</SelectItem>
+                  <SelectItem value="Entregue">Entregue</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          
+          <div className="flex items-center gap-2">
+            <Button variant="outline" size="sm" className="cursor-pointer">
+              Hoje
+            </Button>
+            <Button variant="outline" size="sm" className="cursor-pointer">
+              Semana
+            </Button>
+            <Button variant="outline" size="sm" className="cursor-pointer">
+              Mês
+            </Button>
+            <Button variant="outline" size="sm" className="cursor-pointer">
+              <Download className="h-4 w-4 mr-1" />
+              Filtrar
+            </Button>
+          </div>
+        </div>
+
+        {/* Tabela de Laudos */}
+        <div className="bg-white rounded-lg shadow-sm border overflow-hidden">
+          <Table>
+            <TableHeader>
+              <TableRow className="bg-gray-50">
+                <TableHead className="font-semibold">Pedido</TableHead>
+                <TableHead className="font-semibold">Data</TableHead>
+                <TableHead className="font-semibold">Preço</TableHead>
+                <TableHead className="font-semibold">Paciente</TableHead>
+                <TableHead className="font-semibold">Executante/Solicitante</TableHead>
+                <TableHead className="font-semibold">Exame/Classificação</TableHead>
+                <TableHead className="font-semibold">Ação</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {laudosData.map((laudo) => (
+                <TableRow key={laudo.id} className="hover:bg-gray-50">
+                  <TableCell className="font-medium">{laudo.id}</TableCell>
+                  <TableCell>{laudo.data}</TableCell>
+                  <TableCell>{laudo.preco}</TableCell>
+                  <TableCell>
+                    <div className="flex items-center gap-2">
+                      <div 
+                        className={`w-2 h-2 rounded-full ${
+                          laudo.status === 'Pendente' ? 'bg-red-500' : 
+                          laudo.status === 'Rascunho' ? 'bg-yellow-500' : 'bg-green-500'
+                        }`}
+                      />
+                      <span className="truncate max-w-[200px]">{laudo.recipient}</span>
+                    </div>
+                  </TableCell>
+                  <TableCell className="truncate max-w-[200px]">{laudo.execSolicitante}</TableCell>
+                  <TableCell className="truncate max-w-[200px]">{laudo.exameTipo}</TableCell>
+                  <TableCell>
+                    <div className="flex items-center gap-1">
+                      <TooltipProvider>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button 
+                              variant="ghost" 
+                              size="sm"
+                              onClick={() => {
+                                setLaudoAtivo(laudo);
+                                // Buscar dados do paciente pelo nome no laudo
+                                const pacienteEncontrado = pacientes.find(p => p.nome === laudo.recipient);
+                                if (pacienteEncontrado) {
+                                  // Carregar TODOS os dados do laudo para edição
+                                  setEditorLaudo({
+                                    pacienteId: pacienteEncontrado.cpf,
+                                    pacienteNome: pacienteEncontrado.nome,
+                                    pacienteCpf: pacienteEncontrado.cpf,
+                                    pacienteIdade: pacienteEncontrado.idade.toString(),
+                                    cid: laudo.cid || "",
+                                    diagnostico: laudo.diagnostico || "",
+                                    conclusao: laudo.conclusao || "",
+                                    conteudo: laudo.conteudo || "",
+                                    imagens: [],
+                                    pdfAnexos: [],
+                                    incluirData: true,
+                                    incluirAssinatura: true,
+                                    status: laudo.status || "Rascunho"
+                                  });
+                                }
+                                setModoEdicao('editar');
+                              }}
+                              className="cursor-pointer"
+                            >
+                              <Edit className="h-4 w-4" />
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p>Editar laudo</p>
+                          </TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
+                      
+                      <TooltipProvider>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button 
+                              variant="ghost" 
+                              size="sm" 
+                              className="cursor-pointer"
+                              onClick={() => setLaudoVisualizacao(laudo)}
+                            >
+                              <Eye className="h-4 w-4" />
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p>Visualizar laudo</p>
+                          </TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
+                      
+                      <TooltipProvider>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button variant="ghost" size="sm" className="cursor-pointer">
+                              <Download className="h-4 w-4" />
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p>Download PDF</p>
+                          </TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+    );
   };
 
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-primary/5 to-white p-2 md:p-4">
-      <div className="max-w-2xl mx-auto">
-        <div className="bg-white border border-primary/10 shadow-lg rounded-xl p-4 md:p-6 mb-6">
-          <h2 className="text-2xl font-bold text-primary mb-4 text-center tracking-tight">Laudo Médico</h2>
+  const renderEditorLaudo = () => {
+    return (
+      <div className="space-y-6">
+        {/* Cabeçalho do Editor */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <Button 
+              variant="ghost" 
+              onClick={() => setModoEdicao(null)}
+              className="cursor-pointer"
+            >
+              <ChevronLeft className="h-4 w-4 mr-1" />
+              Voltar
+            </Button>
+            <div>
+              <h2 className="text-2xl font-bold">
+                {modoEdicao === 'novo' ? 'Novo Laudo' : 'Editar Laudo'}
+              </h2>
+              <p className="text-gray-600 text-sm">
+                Este editor permite escrever relatórios de forma livre, com formatação de texto rica.
+              </p>
+            </div>
+          </div>
           
-          {!pacienteSelecionado ? (
-            <div className="flex flex-col items-center justify-center py-8 px-1 bg-white rounded-xl shadow-sm">
-              <div className="mb-2">
-                <svg width="40" height="40" fill="none" viewBox="0 0 24 24" className="mx-auto text-gray-400">
-                  <circle cx="12" cy="8" r="4" stroke="currentColor" strokeWidth="2"/>
-                  <path d="M4 20c0-2.5 3.5-4.5 8-4.5s8 2 8 4.5" stroke="currentColor" strokeWidth="2"/>
-                </svg>
-              </div>
-              <h2 className="text-lg font-bold text-center text-gray-800 mb-1">Selecionar Paciente</h2>
-              <p className="text-gray-500 text-center mb-4 max-w-xs text-sm">Escolha um paciente para visualizar o prontuário completo</p>
-              <div className="w-full max-w-xs">
-                <label htmlFor="select-paciente" className="block text-sm font-medium text-gray-700 mb-1">Escolha o paciente:</label>
-                <div className="relative">
-                  <select
-                    id="select-paciente"
-                    className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-200 focus:border-blue-300 focus:outline-none bg-white text-sm text-gray-900 shadow-sm transition-all appearance-none"
-                    onChange={e => {
-                      const p = pacientes.find(p => p.cpf === e.target.value);
-                      if (p) handleSelectPaciente(p);
-                    }}
-                    defaultValue=""
+          <div className="flex items-center gap-2">
+            <Button 
+              variant="outline" 
+              onClick={() => setModoEdicao(null)}
+              className="cursor-pointer"
+            >
+              Cancelar
+            </Button>
+            <Button 
+              variant="outline"
+              onClick={() => {
+                setEditorLaudo(prev => ({ ...prev, status: "Rascunho" }));
+                alert("Laudo salvo como rascunho!");
+              }}
+              className="cursor-pointer"
+            >
+              Salvar Rascunho
+            </Button>
+            <Button 
+              onClick={() => {
+                setEditorLaudo(prev => ({ ...prev, status: "Entregue" }));
+                alert("Laudo liberado com sucesso!");
+                setModoEdicao(null);
+              }}
+              className="cursor-pointer"
+            >
+              Liberar Laudo
+            </Button>
+          </div>
+        </div>
+
+        {/* Tabs do Editor */}
+        <div className="bg-white rounded-lg shadow-sm border">
+          <div className="border-b">
+            <nav className="flex space-x-8 px-6">
+              {[
+                { id: 'editor', nome: 'Editor', icone: FileText },
+                { id: 'imagens', nome: 'Imagens', icone: Upload },
+                { id: 'anexos', nome: 'Anexos PDF', icone: FileText },
+                { id: 'preview', nome: 'Pré-visualização', icone: Eye }
+              ].map((aba) => {
+                const Icone = aba.icone;
+                return (
+                  <button
+                    key={aba.id}
+                    onClick={() => setAbaAtiva(aba.id as any)}
+                    className={`py-4 px-1 border-b-2 font-medium text-sm flex items-center gap-2 transition-colors cursor-pointer ${
+                      abaAtiva === aba.id
+                        ? 'border-primary text-primary'
+                        : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                    }`}
                   >
-                    <option value="" className="text-gray-400">Selecione um paciente...</option>
-                    {pacientes.map(p => (
-                      <option key={p.cpf} value={p.cpf}>{p.nome} - {p.cpf}</option>
-                    ))}
-                  </select>
-                  <span className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">
-                    <svg width="16" height="16" fill="none" viewBox="0 0 24 24"><path d="M12 14l-4-4h8l-4 4z" fill="currentColor"/></svg>
-                  </span>
-                </div>
+                    <Icone className="h-4 w-4" />
+                    {aba.nome}
+                  </button>
+                );
+              })}
+            </nav>
+          </div>
+
+          <div className="p-6">
+            {abaAtiva === 'editor' && renderAbaEditor()}
+            {abaAtiva === 'imagens' && renderAbaImagens()}
+            {abaAtiva === 'anexos' && renderAbaAnexos()}
+            {abaAtiva === 'preview' && renderAbaPreview()}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  const renderAbaEditor = () => (
+    <div className="space-y-6">
+      {/* Seleção de Paciente */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <Label htmlFor="paciente">Paciente *</Label>
+          {modoEdicao === 'editar' ? (
+            // Modo edição: mostrar dados fixos do paciente
+            <div className="flex items-center gap-2 p-3 border rounded-md bg-gray-50">
+              <User className="h-4 w-4 text-gray-500" />
+              <div>
+                <div className="font-medium">{editorLaudo.pacienteNome || laudoAtivo?.recipient}</div>
+                <div className="text-sm text-gray-500">{editorLaudo.pacienteCpf}</div>
               </div>
             </div>
           ) : (
-            <div className="bg-primary/10 border border-primary/20 rounded-lg p-3 mb-4 flex flex-col md:flex-row md:items-center md:justify-between gap-2">
-              <div>
-                <div className="font-bold text-primary text-base mb-0.5">{pacienteSelecionado.nome}</div>
-                <div className="text-xs text-gray-700">CPF: {pacienteSelecionado.cpf}</div>
-                <div className="text-xs text-gray-700">Idade: {pacienteSelecionado.idade}</div>
-                <div className="text-xs text-gray-700">Sexo: {pacienteSelecionado.sexo}</div>
-              </div>
-              <button type="button" onClick={limparPaciente} className="px-3 py-1 rounded bg-red-100 text-red-700 hover:bg-red-200 font-semibold shadow text-xs">Trocar paciente</button>
-            </div>
+            // Modo novo: mostrar select de pacientes
+            <Select 
+              value={editorLaudo.pacienteId}
+              onValueChange={(value) => {
+                const pacienteSelecionado = pacientes.find(p => p.cpf === value);
+                if (pacienteSelecionado) {
+                  setEditorLaudo(prev => ({
+                    ...prev,
+                    pacienteId: value,
+                    pacienteNome: pacienteSelecionado.nome,
+                    pacienteCpf: pacienteSelecionado.cpf,
+                    pacienteIdade: pacienteSelecionado.idade.toString()
+                  }));
+                }
+              }}
+            >
+              <SelectTrigger className="cursor-pointer">
+                <SelectValue placeholder="Selecione o paciente" />
+              </SelectTrigger>
+              <SelectContent>
+                {pacientes.map((paciente) => (
+                  <SelectItem key={paciente.cpf} value={paciente.cpf}>
+                    {paciente.nome} - {paciente.cpf}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           )}
-          
-          <form className="space-y-4">
-            <div className="space-y-1">
-              <label className="block text-sm font-semibold text-primary">CID</label>
-              <input
-                type="text"
-                value={cid}
-                onChange={e => setCid(e.target.value)}
-                placeholder="Ex: I10, E11, etc."
-                className="w-full p-2 border border-primary/20 rounded-md focus:ring-2 focus:ring-primary/30 focus:outline-none text-sm"
-              />
-            </div>
-            <div className="space-y-1">
-              <label className="block text-sm font-semibold text-primary">Conteúdo do Laudo *</label>
-              {!preview ? (
-                <ReactQuill
-                  value={conteudo}
-                  onChange={setConteudo}
-                  modules={{
-                    toolbar: [
-                      ['bold', 'italic', 'underline'],
-                      [{ 'list': 'ordered' }, { 'list': 'bullet' }],
-                      [{ 'align': [] }],
-                      [{ 'size': ['small', false, 'large', 'huge'] }],
-                      ['clean']
-                    ]
-                  }}
-                  className="h-40 border border-primary/20 rounded-md text-sm"
-                />
-              ) : (
-                <div className="border border-primary/20 p-2 rounded-md bg-muted overflow-auto">
-                  <h3 className="text-base font-semibold mb-1 text-primary">Pré-visualização:</h3>
-                  <div dangerouslySetInnerHTML={{ __html: conteudo }} />
-                </div>
-              )}
-            </div>
-            <div className="space-y-1">
-              <label className="block text-sm font-semibold text-primary mb-2">Imagem (opcional)</label>
-              <div className="mb-2"></div>
-              <input
-                type="file"
-                accept="image/*"
-                onChange={e => {
-                  const file = e.target.files?.[0];
-                  if (file) {
-                    const reader = new FileReader();
-                    reader.onloadend = () => setImagem(reader.result as string);
-                    reader.readAsDataURL(file);
-                  } else {
-                    setImagem(null);
-                  }
-                }}
-                className="block w-full text-xs text-muted-foreground file:mr-2 file:py-1 file:px-2 file:rounded-md file:border-0 file:text-xs file:font-semibold file:bg-primary/10 file:text-primary hover:file:bg-primary/20"
-              />
-              {imagem && (
-                <img src={imagem} alt="Pré-visualização" className="mt-1 rounded-md max-h-20 border border-primary/20" />
-              )}
-            </div>
-            <div className="space-y-1">
-              <label className="block text-sm font-semibold text-primary">Assinatura Digital</label>
-              <div className="bg-muted rounded-md border border-primary/20 p-2 flex flex-col items-center">
-                <SignatureCanvas
-                  ref={sigCanvasRef}
-                  penColor="#0f172a"
-                  backgroundColor="#fff"
-                  canvasProps={{ width: 220, height: 60, className: "rounded-md border bg-white shadow" }}
-                  onEnd={() => setAssinatura(sigCanvasRef.current?.isEmpty() ? null : sigCanvasRef.current?.toDataURL())}
-                />
-                <div className="flex gap-2 mt-2">
-                  <button type="button" onClick={() => { sigCanvasRef.current?.clear(); setAssinatura(null); }} className="px-2 py-1 text-xs rounded-md bg-muted-foreground text-white hover:bg-muted font-semibold shadow">Limpar</button>
-                </div>
-                {assinatura && (
-                  <img src={assinatura} alt="Assinatura" className="mt-2 max-h-10 border rounded-md bg-white shadow" />
-                )}
-              </div>
-            </div>
-            <div className="flex flex-col md:flex-row gap-2 mt-4">
-              <button
-                type="button"
-                onClick={() => salvarLaudo("Rascunho")}
-                className="w-full md:w-1/3 flex items-center justify-center gap-1 bg-gray-100 text-gray-700 py-2 rounded-lg font-semibold text-base shadow-sm hover:bg-gray-200 transition-all border border-gray-200"
-              >
-                <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" strokeLinecap="round" strokeLinejoin="round"/></svg>
-                Salvar Rascunho
-              </button>
-              <button
-                type="button"
-                onClick={() => salvarLaudo("Entregue")}
-                className="w-full md:w-1/3 flex items-center justify-center gap-1 bg-primary text-white py-2 rounded-lg font-semibold text-base shadow-sm hover:bg-primary/90 transition-all border border-primary/20"
-              >
-                <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path d="M9 12l2 2l4-4" strokeLinecap="round" strokeLinejoin="round"/></svg>
-                Liberar Laudo
-              </button>
-              <button
-                type="button"
-                onClick={() => setPreview(!preview)}
-                className="w-full md:w-1/3 flex items-center justify-center gap-1 bg-white text-primary py-2 rounded-lg font-semibold text-base shadow-sm hover:bg-primary/10 transition-all border border-primary/20"
-              >
-                <svg className="w-4 h-4 text-primary" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path d="M15 10l4.553 2.276A2 2 0 0121 14.09V17a2 2 0 01-2 2H5a2 2 0 01-2-2v-2.91a2 2 0 01.447-1.814L8 10m7-4v4m0 0l-4 4m4-4l4 4" strokeLinecap="round" strokeLinejoin="round"/></svg>
-                Pré-visualizar Laudo
-              </button>
-            </div>
-          </form>
         </div>
         
-        <div className="bg-white border border-primary/10 shadow-lg rounded-xl p-4 md:p-6">
-          <h3 className="text-xl font-bold text-primary mb-3 text-center">Histórico de Laudos</h3>
-          {laudos.length === 0 ? (
-            <p className="text-muted-foreground text-center text-sm">Nenhum laudo registrado.</p>
-          ) : (
-            laudos.map((laudo: any, idx: number) => (
-              <div key={idx} className="border border-primary/20 rounded-2xl p-4 mb-6 bg-primary/5 shadow-sm">
-                <div className="flex flex-col md:flex-row md:justify-between md:items-center mb-3 gap-2">
-                  <div className="flex items-center gap-2">
-                    <svg className="w-7 h-7 text-primary" fill="none" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" stroke="currentColor" strokeWidth="2"/><path d="M4 20c0-2.5 3.5-4.5 8-4.5s8 2 8 4.5" stroke="currentColor" strokeWidth="2"/></svg>
-                    <span className="font-bold text-lg md:text-xl text-primary drop-shadow-sm">{laudo.paciente}</span>
-                  </div>
-                  <span className="text-base text-gray-500 font-medium">CPF: {laudo.cpf}</span>
-                </div>
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-2 mb-2 text-sm text-gray-700">
-                  <div>Idade: <span className="font-medium">{laudo.idade}</span></div>
-                  <div>Sexo: <span className="font-medium">{laudo.sexo}</span></div>
-                  <div>Status: <span className="font-medium">{laudo.status}</span></div>
-                  <div>CID: <span className="font-medium">{laudo.cid}</span></div>
-                  <div>Data: <span className="font-medium">{laudo.data}</span></div>
-                </div>
-                {laudo.assinatura && (
-                  <div className="mb-2">
-                    <p className="font-semibold text-primary text-sm mb-1">Assinatura Digital:</p>
-                    <img src={laudo.assinatura} alt="Assinatura digital" className="rounded-lg max-h-16 border bg-white shadow" />
-                  </div>
-                )}
-                {laudo.imagem && (
-                  <div className="mb-2">
-                    <p className="font-semibold text-primary text-sm mb-1">Imagem:</p>
-                    <img src={laudo.imagem} alt="Imagem do laudo" className="rounded-lg max-h-20 border border-primary/20 mb-1" />
-                  </div>
-                )}
-                <div className="mb-1">
-                  <p className="font-semibold text-primary text-sm mb-1">Conteúdo:</p>
-                  <div className="text-sm text-gray-800" dangerouslySetInnerHTML={{ __html: laudo.conteudo }} />
-                </div>
-              </div>
-            ))
-          )}
+        <div className="space-y-2">
+          <Label htmlFor="cid">CID *</Label>
+          <Input
+            id="cid"
+            placeholder="Ex: I10, E11, etc."
+            value={editorLaudo.cid}
+            onChange={(e) => setEditorLaudo(prev => ({ ...prev, cid: e.target.value }))}
+          />
+        </div>
+      </div>
+
+      {/* Campos Principais do Laudo */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <Label htmlFor="diagnostico">Diagnóstico *</Label>
+          <Textarea
+            id="diagnostico"
+            placeholder="Insira o diagnóstico..."
+            value={editorLaudo.diagnostico}
+            onChange={(e) => setEditorLaudo(prev => ({ ...prev, diagnostico: e.target.value }))}
+            rows={4}
+            className="resize-none"
+          />
+        </div>
+        
+        <div className="space-y-2">
+          <Label htmlFor="conclusao">Conclusão *</Label>
+          <Textarea
+            id="conclusao"
+            placeholder="Insira a conclusão..."
+            value={editorLaudo.conclusao}
+            onChange={(e) => setEditorLaudo(prev => ({ ...prev, conclusao: e.target.value }))}
+            rows={4}
+            className="resize-none"
+          />
+        </div>
+      </div>
+
+      {/* Modelos e Frases */}
+      <div className="space-y-3">
+        <h4 className="font-semibold text-sm">Modelos e Frases</h4>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
+          {Object.entries(modelosTexto).map(([nome, texto]) => (
+            <Button
+              key={nome}
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                setEditorLaudo(prev => ({
+                  ...prev,
+                  conteudo: prev.conteudo + (prev.conteudo ? '\n\n' : '') + texto
+                }));
+              }}
+              className="text-left justify-start cursor-pointer"
+            >
+              {nome}
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      {/* Editor de Texto Rico */}
+      <div className="space-y-2">
+        <Label>Conteúdo do Laudo *</Label>
+        <QuillEditor
+          value={editorLaudo.conteudo}
+          onChange={(content: string) => setEditorLaudo(prev => ({ ...prev, conteudo: content }))}
+        />
+      </div>
+
+
+
+      {/* Assinatura Digital */}
+      <div className="space-y-4">
+        <h4 className="font-semibold">Assinatura Digital</h4>
+        <div className="border rounded-lg p-4 bg-gray-50">
+          <SignaturePad
+            canvasRef={sigCanvasLaudoRef}
+            onEnd={() => {
+              if (!sigCanvasLaudoRef.current?.isEmpty()) {
+                setAssinaturaLaudo(sigCanvasLaudoRef.current?.toDataURL());
+              }
+            }}
+          />
+          <div className="flex gap-2 mt-2">
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                sigCanvasLaudoRef.current?.clear();
+                setAssinaturaLaudo(null);
+              }}
+              className="cursor-pointer"
+            >
+              Limpar
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Opções Finais */}
+      <div className="space-y-4">
+        <h4 className="font-semibold">Opções do Laudo</h4>
+        <div className="space-y-3">
+          <div className="flex items-center space-x-2">
+            <input
+              type="checkbox"
+              id="incluirData"
+              checked={editorLaudo.incluirData}
+              onChange={(e) => setEditorLaudo(prev => ({ ...prev, incluirData: e.target.checked }))}
+            />
+            <Label htmlFor="incluirData">Incluir data no laudo</Label>
+          </div>
+          
+          <div className="flex items-center space-x-2">
+            <input
+              type="checkbox"
+              id="incluirAssinatura"
+              checked={editorLaudo.incluirAssinatura}
+              onChange={(e) => setEditorLaudo(prev => ({ ...prev, incluirAssinatura: e.target.checked }))}
+            />
+            <Label htmlFor="incluirAssinatura">Incluir assinatura no laudo</Label>
+          </div>
         </div>
       </div>
     </div>
   );
-}
+
+  const renderAbaImagens = () => (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h3 className="text-lg font-semibold">Imagens do Laudo</h3>
+        <Button className="cursor-pointer">
+          <Upload className="h-4 w-4 mr-2" />
+          Upload Imagem
+        </Button>
+      </div>
+      
+      <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
+        <Upload className="h-12 w-12 mx-auto text-gray-400 mb-4" />
+        <p className="text-gray-600 mb-2">Arraste imagens aqui ou clique para selecionar</p>
+        <p className="text-sm text-gray-500">Formatos aceitos: JPG, PNG, DICOM (máx. 10MB por arquivo)</p>
+        <input
+          type="file"
+          multiple
+          accept="image/*"
+          className="hidden"
+          onChange={(e) => {
+            // Lógica para upload de imagens
+            console.log("Imagens selecionadas:", e.target.files);
+          }}
+        />
+      </div>
+      
+      {editorLaudo.imagens.length > 0 && (
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          {editorLaudo.imagens.map((img, index) => (
+            <div key={index} className="relative border rounded-lg p-2">
+              <img src={img} alt={`Imagem ${index + 1}`} className="w-full h-24 object-cover rounded" />
+              <Button
+                variant="destructive"
+                size="sm"
+                className="absolute -top-2 -right-2 h-8 w-8 cursor-pointer"
+                onClick={() => {
+                  setEditorLaudo(prev => ({
+                    ...prev,
+                    imagens: prev.imagens.filter((_, i) => i !== index)
+                  }));
+                }}
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+
+  const renderAbaAnexos = () => (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h3 className="text-lg font-semibold">Anexos PDF</h3>
+        <Button className="cursor-pointer">
+          <Upload className="h-4 w-4 mr-2" />
+          Importar PDF
+        </Button>
+      </div>
+      
+      <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
+        <FileText className="h-12 w-12 mx-auto text-gray-400 mb-4" />
+        <p className="text-gray-600 mb-2">Arraste PDFs aqui ou clique para selecionar</p>
+        <p className="text-sm text-gray-500">Anexar resultados de exames externos (máx. 25MB por arquivo)</p>
+      </div>
+      
+      {editorLaudo.pdfAnexos.length > 0 && (
+        <div className="space-y-3">
+          {editorLaudo.pdfAnexos.map((pdf, index) => (
+            <div key={index} className="flex items-center justify-between p-3 border rounded-lg">
+              <div className="flex items-center gap-3">
+                <FileText className="h-8 w-8 text-red-500" />
+                <div>
+                  <p className="font-medium">Documento_{index + 1}.pdf</p>
+                  <p className="text-sm text-gray-500">2.4 MB</p>
+                </div>
+              </div>
+              <div className="flex gap-2">
+                <Button variant="outline" size="sm" className="cursor-pointer">
+                  <Eye className="h-4 w-4" />
+                </Button>
+                <Button 
+                  variant="destructive" 
+                  size="sm"
+                  onClick={() => {
+                    setEditorLaudo(prev => ({
+                      ...prev,
+                      pdfAnexos: prev.pdfAnexos.filter((_, i) => i !== index)
+                    }));
+                  }}
+                  className="cursor-pointer"
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+
+  const renderAbaPreview = () => {
+    const pacienteSelecionado = pacientes.find(p => p.cpf === editorLaudo.pacienteId);
+    
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center justify-between">
+          <h3 className="text-lg font-semibold">Pré-visualização do Laudo</h3>
+          <Button className="cursor-pointer">
+            <Download className="h-4 w-4 mr-2" />
+            Gerar PDF
+          </Button>
+        </div>
+        
+        <div className="border rounded-lg p-8 bg-white shadow-sm max-w-4xl mx-auto">
+          {/* Cabeçalho do Laudo */}
+          <div className="text-center mb-8">
+            <h1 className="text-2xl font-bold mb-2">LAUDO MÉDICO</h1>
+            {editorLaudo.incluirData && (
+              <p className="text-gray-600">Data: {new Date().toLocaleDateString('pt-BR')}</p>
+            )}
+          </div>
+          
+          {/* Dados do Paciente */}
+          {pacienteSelecionado && (
+            <div className="grid grid-cols-2 gap-4 mb-6 p-4 bg-gray-50 rounded">
+              <div>
+                <strong>Paciente:</strong> {pacienteSelecionado.nome}
+              </div>
+              <div>
+                <strong>CPF:</strong> {pacienteSelecionado.cpf}
+              </div>
+              <div>
+                <strong>Idade:</strong> {pacienteSelecionado.idade} anos
+              </div>
+              {editorLaudo.cid && (
+                <div>
+                  <strong>CID:</strong> {editorLaudo.cid}
+                </div>
+              )}
+            </div>
+          )}
+          
+          {/* Conteúdo */}
+          <div className="mb-6">
+            {editorLaudo.conteudo ? (
+              <div 
+                className="prose max-w-none leading-relaxed"
+                dangerouslySetInnerHTML={{ 
+                  __html: formatTextToHtml(
+                    editorLaudo.conteudo
+                      .replace(/{NOME_PACIENTE}/g, pacienteSelecionado?.nome || '')
+                      .replace(/{IDADE}/g, pacienteSelecionado?.idade?.toString() || '')
+                      .replace(/{CPF}/g, pacienteSelecionado?.cpf || '')
+                      .replace(/{DATA_ATUAL}/g, new Date().toLocaleDateString('pt-BR'))
+                      .replace(/{CID}/g, editorLaudo.cid)
+                      .replace(/{MEDICO}/g, medico.nome)
+                  )
+                }} 
+              />
+            ) : (
+              <div className="text-gray-400 italic text-center py-8">
+                <FileText className="h-12 w-12 mx-auto mb-4 opacity-50" />
+                <p>Nenhum conteúdo adicionado ainda.</p>
+                <p className="text-sm">Vá para a aba "Editor" para escrever o laudo.</p>
+              </div>
+            )}
+          </div>
+          
+          {/* Diagnóstico */}
+          {editorLaudo.diagnostico && (
+            <div className="mb-6">
+              <h4 className="font-bold mb-2">DIAGNÓSTICO:</h4>
+              <p>{editorLaudo.diagnostico}</p>
+            </div>
+          )}
+          
+          {/* Conclusão */}
+          {editorLaudo.conclusao && (
+            <div className="mb-6">
+              <h4 className="font-bold mb-2">CONCLUSÃO:</h4>
+              <p>{editorLaudo.conclusao}</p>
+            </div>
+          )}
+          
+          {/* Imagens */}
+          {editorLaudo.imagens.length > 0 && (
+            <div className="mb-6">
+              <h4 className="font-bold mb-4">IMAGENS:</h4>
+              <div className="grid grid-cols-2 gap-4">
+                {editorLaudo.imagens.map((img, index) => (
+                  <img key={index} src={img} alt={`Imagem ${index + 1}`} className="w-full border rounded" />
+                ))}
+              </div>
+            </div>
+          )}
+          
+          {/* Assinatura */}
+          {editorLaudo.incluirAssinatura && assinaturaLaudo && (
+            <div className="mt-8 text-center">
+              <div className="border-t pt-4">
+                <img src={assinaturaLaudo} alt="Assinatura" className="mx-auto mb-2" style={{ maxHeight: '80px' }} />
+                <p className="font-semibold">{medico.nome}</p>
+                <p className="text-sm text-gray-600">{medico.identificacao}</p>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  };
 
   
   const renderComunicacaoSection = () => (
@@ -2704,6 +3399,76 @@ function LaudoEditor() {
           </div>
         </div>
       )}
+
+      {/* Modal de Visualização do Laudo */}
+      <Dialog open={!!laudoVisualizacao} onOpenChange={() => setLaudoVisualizacao(null)}>
+        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>
+              {laudoVisualizacao?.exameTipo || "Laudo Médico"}
+            </DialogTitle>
+          </DialogHeader>
+          
+          {laudoVisualizacao && (
+            <div className="space-y-6">
+              {/* Cabeçalho do Laudo */}
+              <div className="text-center border-b pb-4">
+                <h1 className="text-2xl font-bold mb-2">LAUDO MÉDICO</h1>
+                <p className="text-gray-600">Data: {laudoVisualizacao.data}</p>
+              </div>
+              
+              {/* Dados do Paciente */}
+              <div className="grid grid-cols-2 gap-4 p-4 bg-gray-50 rounded">
+                <div><strong>Paciente:</strong> {laudoVisualizacao.recipient}</div>
+                <div><strong>Executante:</strong> {laudoVisualizacao.execSolicitante}</div>
+                <div><strong>Exame:</strong> {laudoVisualizacao.exameTipo}</div>
+                {laudoVisualizacao.cid && (
+                  <div><strong>CID:</strong> {laudoVisualizacao.cid}</div>
+                )}
+              </div>
+
+              {/* Diagnóstico */}
+              {laudoVisualizacao.diagnostico && (
+                <div className="space-y-2">
+                  <h3 className="font-bold text-lg">DIAGNÓSTICO:</h3>
+                  <p className="text-gray-800">{laudoVisualizacao.diagnostico}</p>
+                </div>
+              )}
+
+              {/* Conteúdo do Laudo */}
+              {laudoVisualizacao.conteudo && (
+                <div className="space-y-2">
+                  <h3 className="font-bold text-lg">RELATÓRIO:</h3>
+                  <div 
+                    className="prose max-w-none leading-relaxed text-gray-800"
+                    dangerouslySetInnerHTML={{ 
+                      __html: formatTextToHtml(laudoVisualizacao.conteudo)
+                    }} 
+                  />
+                </div>
+              )}
+
+              {/* Conclusão */}
+              {laudoVisualizacao.conclusao && (
+                <div className="space-y-2">
+                  <h3 className="font-bold text-lg">CONCLUSÃO:</h3>
+                  <p className="text-gray-800">{laudoVisualizacao.conclusao}</p>
+                </div>
+              )}
+
+              {/* Rodapé */}
+              <div className="border-t pt-4 text-center text-sm text-gray-600">
+                <p><strong>Status:</strong> {laudoVisualizacao.status}</p>
+                <p className="mt-2">
+                  <strong>{medico.nome}</strong><br/>
+                  {medico.identificacao}
+                </p>
+              </div>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+
       </div>
     </ProtectedRoute>
   );
diff --git a/susconecta/components/dashboard/sidebar.tsx b/susconecta/components/dashboard/sidebar.tsx
index e7feeec..af90fff 100644
--- a/susconecta/components/dashboard/sidebar.tsx
+++ b/susconecta/components/dashboard/sidebar.tsx
@@ -24,7 +24,6 @@ import {
   UserCheck,
   FileText,
   BarChart3,
-  Settings,
   Stethoscope,
   User,
 } from "lucide-react"
@@ -36,7 +35,6 @@ const navigation = [
   { name: "Médicos", href: "/doutores", icon: User },
   { name: "Consultas", href: "/consultas", icon: UserCheck },
   { name: "Relatórios", href: "/dashboard/relatorios", icon: BarChart3 },
-  { name: "Configurações", href: "/configuracao", icon: Settings }, 
 ]
 
 export function Sidebar() {
diff --git a/susconecta/next-env.d.ts b/susconecta/next-env.d.ts
index 40c3d68..830fb59 100644
--- a/susconecta/next-env.d.ts
+++ b/susconecta/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

From 47967eb37f102548d4efb88b6418ba8845d16e39 Mon Sep 17 00:00:00 2001
From: Jonas Francisco <jonastom478@gmail.com>
Date: Fri, 3 Oct 2025 02:22:40 -0300
Subject: [PATCH 02/19] feat: Implementa sistema completo de modo escuro
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Adiciona ThemeProvider com next-themes para controle de tema
- Implementa componente SimpleThemeToggle com ícones sol/lua
- Configura CSS variables completas para light/dark modes no globals.css
- Padroniza todas as páginas de autenticação (login, login-admin, login-paciente)
- Padroniza todos os módulos principais (dashboard, pacientes, doutores, consultas, calendar, configuração)
- Padroniza completamente área profissional com todas as seções:
  * Calendário e agendamentos
  * Busca e gestão de pacientes
  * Prontuários médicos completos
  * Comunicação e relatórios
  * Seções de exames (solicitados, resultados, diagnósticos, prescrições, evolução, anexos)
- Atualiza componentes UI (input, select, textarea) com bordas visíveis
- Implementa suporte dark mode em tooltips, badges de status e mensagens
- Garante acessibilidade e consistência visual em ambos os modos
- Mantém funcionalidades existentes sem breaking changes

Todos os elementos agora respondem adequadamente ao toggle de tema,
proporcionando experiência de usuário consistente e acessível.
---
 .../app/(main-routes)/calendar/page.tsx       |   6 +-
 .../app/(main-routes)/configuracao/page.tsx   |   8 +-
 .../app/(main-routes)/consultas/page.tsx      |   4 +-
 .../app/(main-routes)/dashboard/page.tsx      |   2 +-
 .../app/(main-routes)/doutores/page.tsx       |   4 +-
 .../app/(main-routes)/pacientes/page.tsx      |   4 +-
 susconecta/app/globals.css                    |  35 ++
 susconecta/app/layout.tsx                     |  11 +-
 susconecta/app/login-admin/page.tsx           |  10 +-
 susconecta/app/login-paciente/page.tsx        |  10 +-
 susconecta/app/login/page.tsx                 |  10 +-
 susconecta/app/profissional/page.tsx          | 362 +++++++++---------
 susconecta/components/header.tsx              |   3 +
 susconecta/components/simple-theme-toggle.tsx |  22 ++
 susconecta/components/theme-toggle.tsx        |  37 ++
 susconecta/components/ui/input.tsx            |   8 +-
 susconecta/components/ui/select.tsx           |   6 +-
 susconecta/components/ui/textarea.tsx         |   6 +-
 18 files changed, 332 insertions(+), 216 deletions(-)
 create mode 100644 susconecta/components/simple-theme-toggle.tsx
 create mode 100644 susconecta/components/theme-toggle.tsx

diff --git a/susconecta/app/(main-routes)/calendar/page.tsx b/susconecta/app/(main-routes)/calendar/page.tsx
index dabcec7..e6e97ad 100644
--- a/susconecta/app/(main-routes)/calendar/page.tsx
+++ b/susconecta/app/(main-routes)/calendar/page.tsx
@@ -85,7 +85,7 @@ export default function AgendamentoPage() {
   };
 
   return (
-    <div className="flex flex-row">
+    <div className="flex flex-row bg-background">
       <div className="flex w-full flex-col">
         <div className="flex w-full flex-col gap-10 p-6">
           <div className="flex flex-row justify-between items-center">
@@ -122,7 +122,7 @@ export default function AgendamentoPage() {
               <div className="flex flex-row">
                 <Button
                   variant={"outline"}
-                  className="bg-gray-100 hover:bg-gray-200 hover:text-foreground rounded-l-[100px] rounded-r-[0px]"
+                  className="bg-muted hover:bg-muted/80 hover:text-foreground rounded-l-[100px] rounded-r-[0px]"
                   onClick={() => setActiveTab("calendar")}
                 >
                   Calendário
@@ -130,7 +130,7 @@ export default function AgendamentoPage() {
 
                 <Button
                   variant={"outline"}
-                  className="bg-gray-100 hover:bg-gray-200 hover:text-foreground rounded-r-[100px] rounded-l-[0px]"
+                  className="bg-muted hover:bg-muted/80 hover:text-foreground rounded-r-[100px] rounded-l-[0px]"
                   onClick={() => setActiveTab("espera")}
                 >
                   Lista de espera
diff --git a/susconecta/app/(main-routes)/configuracao/page.tsx b/susconecta/app/(main-routes)/configuracao/page.tsx
index c88f8b6..3ab0e95 100644
--- a/susconecta/app/(main-routes)/configuracao/page.tsx
+++ b/susconecta/app/(main-routes)/configuracao/page.tsx
@@ -45,12 +45,12 @@ export default function ConfiguracaoPage() {
   ]
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-6 space-y-6 bg-background">
       {/* título */}
-      <h1 className="text-2xl font-bold">Configurações</h1>
+      <h1 className="text-2xl font-bold text-foreground">Configurações</h1>
 
       {/* introdução */}
-      <p className="text-gray-600">
+      <p className="text-muted-foreground">
         Ajuste os principais parâmetros do sistema. Escolha uma das seções abaixo
         para configurar horários, mensagens, notificações internas, permissões de usuários
         e regras de segurança da clínica.
@@ -66,7 +66,7 @@ export default function ConfiguracaoPage() {
                 <CardTitle>{item.title}</CardTitle>
               </CardHeader>
               <CardContent>
-                <p className="text-sm text-gray-600">{item.desc}</p>
+                <p className="text-sm text-muted-foreground">{item.desc}</p>
               </CardContent>
             </Card>
           </Link>
diff --git a/susconecta/app/(main-routes)/consultas/page.tsx b/susconecta/app/(main-routes)/consultas/page.tsx
index c55cdac..47365d8 100644
--- a/susconecta/app/(main-routes)/consultas/page.tsx
+++ b/susconecta/app/(main-routes)/consultas/page.tsx
@@ -145,7 +145,7 @@ export default function ConsultasPage() {
 
   if (showForm && editingAppointment) {
     return (
-        <div className="space-y-6 p-6">
+        <div className="space-y-6 p-6 bg-background">
             <div className="flex items-center gap-4">
                 <Button type="button" variant="ghost" size="icon" onClick={handleCancel}> 
                     <ArrowLeft className="h-4 w-4" />
@@ -162,7 +162,7 @@ export default function ConsultasPage() {
   }
 
   return (
-    <div className="space-y-6 p-6">
+    <div className="space-y-6 p-6 bg-background">
       <div className="flex items-center justify-between gap-4 flex-wrap">
         <div>
           <h1 className="text-2xl font-bold">Gerenciamento de Consultas</h1>
diff --git a/susconecta/app/(main-routes)/dashboard/page.tsx b/susconecta/app/(main-routes)/dashboard/page.tsx
index d4f8449..ffd17fe 100644
--- a/susconecta/app/(main-routes)/dashboard/page.tsx
+++ b/susconecta/app/(main-routes)/dashboard/page.tsx
@@ -1,7 +1,7 @@
 export default function DashboardPage() {
   return (
     <>
-      <div className="space-y-6 p-6">
+      <div className="space-y-6 p-6 bg-background">
         <div>
           <h1 className="text-2xl font-bold text-foreground">Dashboard</h1>
           <p className="text-muted-foreground">
diff --git a/susconecta/app/(main-routes)/doutores/page.tsx b/susconecta/app/(main-routes)/doutores/page.tsx
index 8fae66c..c034860 100644
--- a/susconecta/app/(main-routes)/doutores/page.tsx
+++ b/susconecta/app/(main-routes)/doutores/page.tsx
@@ -287,7 +287,7 @@ export default function DoutoresPage() {
 
   if (showForm) {
     return (
-      <div className="space-y-6 p-6">
+      <div className="space-y-6 p-6 bg-background">
         <div className="flex items-center gap-4">
           <Button variant="ghost" size="icon" onClick={() => setShowForm(false)}>
             <ArrowLeft className="h-4 w-4" />
@@ -307,7 +307,7 @@ export default function DoutoresPage() {
   }
 
   return (
-    <div className="space-y-6 p-6">
+    <div className="space-y-6 p-6 bg-background">
       <div className="flex items-center justify-between gap-4 flex-wrap">
         <div>
           <h1 className="text-2xl font-bold">Médicos</h1>
diff --git a/susconecta/app/(main-routes)/pacientes/page.tsx b/susconecta/app/(main-routes)/pacientes/page.tsx
index c9bffb7..9310a62 100644
--- a/susconecta/app/(main-routes)/pacientes/page.tsx
+++ b/susconecta/app/(main-routes)/pacientes/page.tsx
@@ -166,7 +166,7 @@ export default function PacientesPage() {
 
   if (showForm) {
     return (
-      <div className="space-y-6 p-6">
+      <div className="space-y-6 p-6 bg-background">
         <div className="flex items-center gap-4">
           <Button variant="ghost" onClick={() => setShowForm(false)}>
             <ArrowLeft className="h-4 w-4" />
@@ -186,7 +186,7 @@ export default function PacientesPage() {
   }
 
   return (
-    <div className="space-y-6 p-6">
+    <div className="space-y-6 p-6 bg-background">
       <div className="flex items-center justify-between gap-4 flex-wrap">
         <div>
           <h1 className="text-2xl font-bold">Pacientes</h1>
diff --git a/susconecta/app/globals.css b/susconecta/app/globals.css
index 817775e..5234f59 100644
--- a/susconecta/app/globals.css
+++ b/susconecta/app/globals.css
@@ -39,6 +39,41 @@
   --sidebar-ring: var(--color-blue-500);
 }
 
+.dark {
+  --background: #0f172a;
+  --foreground: #cbd5e1;
+  --card: #1e293b;
+  --card-foreground: #e2e8f0;
+  --popover: #1e293b;
+  --popover-foreground: #cbd5e1;
+  --primary: var(--color-blue-500);
+  --primary-foreground: #ffffff;
+  --secondary: #334155;
+  --secondary-foreground: #cbd5e1;
+  --muted: #334155;
+  --muted-foreground: #94a3b8;
+  --accent: #0891b2;
+  --accent-foreground: #ffffff;
+  --destructive: #dc2626;
+  --destructive-foreground: #ffffff;
+  --border: #334155;
+  --input: #334155;
+  --ring: var(--color-blue-500);
+  --chart-1: #0891b2;
+  --chart-2: #0f766e;
+  --chart-3: #f59e0b;
+  --chart-4: #dc2626;
+  --chart-5: #94a3b8;
+  --sidebar: #1e293b;
+  --sidebar-foreground: #cbd5e1;
+  --sidebar-primary: var(--color-blue-500);
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: var(--color-blue-500);
+  --sidebar-accent-foreground: #ffffff;
+  --sidebar-border: #334155;
+  --sidebar-ring: var(--color-blue-500);
+}
+
 @theme inline {
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
diff --git a/susconecta/app/layout.tsx b/susconecta/app/layout.tsx
index f5b69fe..b7b71f1 100644
--- a/susconecta/app/layout.tsx
+++ b/susconecta/app/layout.tsx
@@ -1,6 +1,7 @@
 import type React from "react"
 import type { Metadata } from "next"
 import { AuthProvider } from "@/hooks/useAuth"
+import { ThemeProvider } from "@/components/theme-provider"
 import "./globals.css"
 
 export const metadata: Metadata = {
@@ -17,11 +18,13 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <html lang="pt-BR" className="antialiased">
+    <html lang="pt-BR" className="antialiased" suppressHydrationWarning>
       <body style={{ fontFamily: "var(--font-geist-sans)" }}>
-        <AuthProvider>
-          {children}
-        </AuthProvider>
+        <ThemeProvider attribute="class" defaultTheme="light" enableSystem={false}>
+          <AuthProvider>
+            {children}
+          </AuthProvider>
+        </ThemeProvider>
       </body>
     </html>
   )
diff --git a/susconecta/app/login-admin/page.tsx b/susconecta/app/login-admin/page.tsx
index fe3e41f..c4efa3c 100644
--- a/susconecta/app/login-admin/page.tsx
+++ b/susconecta/app/login-admin/page.tsx
@@ -45,13 +45,13 @@ export default function LoginAdminPage() {
   }
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+    <div className="min-h-screen flex items-center justify-center bg-background py-12 px-4 sm:px-6 lg:px-8">
       <div className="max-w-md w-full space-y-8">
         <div className="text-center">
-          <h2 className="mt-6 text-3xl font-extrabold text-gray-900">
+          <h2 className="mt-6 text-3xl font-extrabold text-foreground">
             Login Administrador de Clínica
           </h2>
-          <p className="mt-2 text-sm text-gray-600">
+          <p className="mt-2 text-sm text-muted-foreground">
             Entre com suas credenciais para acessar o sistema administrativo
           </p>
         </div>
@@ -63,7 +63,7 @@ export default function LoginAdminPage() {
           <CardContent>
             <form onSubmit={handleLogin} className="space-y-6">
               <div>
-                <label htmlFor="email" className="block text-sm font-medium text-gray-700">
+                <label htmlFor="email" className="block text-sm font-medium text-foreground">
                   Email
                 </label>
                 <Input
@@ -79,7 +79,7 @@ export default function LoginAdminPage() {
               </div>
               
               <div>
-                <label htmlFor="password" className="block text-sm font-medium text-gray-700">
+                <label htmlFor="password" className="block text-sm font-medium text-foreground">
                   Senha
                 </label>
                 <Input
diff --git a/susconecta/app/login-paciente/page.tsx b/susconecta/app/login-paciente/page.tsx
index 6468241..1e1597a 100644
--- a/susconecta/app/login-paciente/page.tsx
+++ b/susconecta/app/login-paciente/page.tsx
@@ -43,13 +43,13 @@ export default function LoginPacientePage() {
   }
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+    <div className="min-h-screen flex items-center justify-center bg-background py-12 px-4 sm:px-6 lg:px-8">
       <div className="max-w-md w-full space-y-8">
         <div className="text-center">
-          <h2 className="mt-6 text-3xl font-extrabold text-gray-900">
+          <h2 className="mt-6 text-3xl font-extrabold text-foreground">
             Portal do Paciente
           </h2>
-          <p className="mt-2 text-sm text-gray-600">
+          <p className="mt-2 text-sm text-muted-foreground">
             Acesse sua área pessoal e gerencie suas consultas
           </p>
         </div>
@@ -61,7 +61,7 @@ export default function LoginPacientePage() {
           <CardContent>
             <form onSubmit={handleLogin} className="space-y-6">
               <div>
-                <label htmlFor="email" className="block text-sm font-medium text-gray-700">
+                <label htmlFor="email" className="block text-sm font-medium text-foreground">
                   Email
                 </label>
                 <Input
@@ -77,7 +77,7 @@ export default function LoginPacientePage() {
               </div>
               
               <div>
-                <label htmlFor="password" className="block text-sm font-medium text-gray-700">
+                <label htmlFor="password" className="block text-sm font-medium text-foreground">
                   Senha
                 </label>
                 <Input
diff --git a/susconecta/app/login/page.tsx b/susconecta/app/login/page.tsx
index bbf1826..7610dd8 100644
--- a/susconecta/app/login/page.tsx
+++ b/susconecta/app/login/page.tsx
@@ -45,13 +45,13 @@ export default function LoginPage() {
   }
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+    <div className="min-h-screen flex items-center justify-center bg-background py-12 px-4 sm:px-6 lg:px-8">
       <div className="max-w-md w-full space-y-8">
         <div className="text-center">
-          <h2 className="mt-6 text-3xl font-extrabold text-gray-900">
+          <h2 className="mt-6 text-3xl font-extrabold text-foreground">
             Login Profissional de Saúde
           </h2>
-          <p className="mt-2 text-sm text-gray-600">
+          <p className="mt-2 text-sm text-muted-foreground">
             Entre com suas credenciais para acessar o sistema
           </p>
         </div>
@@ -63,7 +63,7 @@ export default function LoginPage() {
           <CardContent>
             <form onSubmit={handleLogin} className="space-y-6">
               <div>
-                <label htmlFor="email" className="block text-sm font-medium text-gray-700">
+                <label htmlFor="email" className="block text-sm font-medium text-foreground">
                   Email
                 </label>
                 <Input
@@ -79,7 +79,7 @@ export default function LoginPage() {
               </div>
               
               <div>
-                <label htmlFor="password" className="block text-sm font-medium text-gray-700">
+                <label htmlFor="password" className="block text-sm font-medium text-foreground">
                   Senha
                 </label>
                 <Input
diff --git a/susconecta/app/profissional/page.tsx b/susconecta/app/profissional/page.tsx
index d2c6ab0..789b9a5 100644
--- a/susconecta/app/profissional/page.tsx
+++ b/susconecta/app/profissional/page.tsx
@@ -446,13 +446,13 @@ const ProfissionalPage = () => {
     const todayEvents = getTodayEvents();
     
     return (
-      <section className="bg-white shadow-md rounded-lg p-6">
+      <section className="bg-card shadow-md rounded-lg p-6">
         <div className="flex justify-between items-center mb-4">
           <h2 className="text-2xl font-bold">Agenda do Dia</h2>
         </div>
         
         {/* Navegação de Data */}
-        <div className="flex items-center justify-between mb-6 p-4 bg-gray-50 rounded-lg">
+        <div className="flex items-center justify-between mb-6 p-4 bg-muted rounded-lg">
           <div className="flex items-center space-x-4">
             <Button 
               variant="outline"
@@ -462,7 +462,7 @@ const ProfissionalPage = () => {
             >
               <ChevronLeft className="h-4 w-4" />
             </Button>
-            <h3 className="text-lg font-medium text-gray-900">
+            <h3 className="text-lg font-medium text-foreground">
               {formatDate(currentCalendarDate)}
             </h3>
             <Button 
@@ -482,7 +482,7 @@ const ProfissionalPage = () => {
               Hoje
             </Button>
           </div>
-          <div className="text-sm text-gray-500">
+          <div className="text-sm text-muted-foreground">
             {todayEvents.length} consulta{todayEvents.length !== 1 ? 's' : ''} agendada{todayEvents.length !== 1 ? 's' : ''}
           </div>
         </div>
@@ -490,8 +490,8 @@ const ProfissionalPage = () => {
         {/* Lista de Pacientes do Dia */}
         <div className="space-y-4">
           {todayEvents.length === 0 ? (
-            <div className="text-center py-8 text-gray-500">
-              <CalendarIcon className="h-12 w-12 mx-auto mb-4 text-gray-300" />
+            <div className="text-center py-8 text-muted-foreground">
+              <CalendarIcon className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
               <p className="text-lg mb-2">Nenhuma consulta agendada para este dia</p>
               <p className="text-sm">Agenda livre para este dia</p>
             </div>
@@ -501,7 +501,7 @@ const ProfissionalPage = () => {
               return (
                 <div
                   key={appointment.id}
-                  className="border-l-4 p-4 rounded-lg shadow-sm bg-white border-gray-200"
+                  className="border-l-4 p-4 rounded-lg shadow-sm bg-card border-border"
                   style={{ borderLeftColor: getStatusColor(appointment.type) }}
                 >
                   <div className="grid grid-cols-1 md:grid-cols-4 gap-4 items-center">
@@ -512,18 +512,18 @@ const ProfissionalPage = () => {
                       ></div>
                       <div>
                         <div className="font-medium flex items-center">
-                          <User className="h-4 w-4 mr-2 text-gray-500" />
+                          <User className="h-4 w-4 mr-2 text-muted-foreground" />
                           {appointment.title}
                         </div>
                         {paciente && (
-                          <div className="text-sm text-gray-500">
+                          <div className="text-sm text-muted-foreground">
                             CPF: {paciente.cpf} • {paciente.idade} anos
                           </div>
                         )}
                       </div>
                     </div>
                     <div className="flex items-center">
-                      <Clock className="h-4 w-4 mr-2 text-gray-500" />
+                      <Clock className="h-4 w-4 mr-2 text-muted-foreground" />
                       <span className="font-medium">{appointment.time}</span>
                     </div>
                     <div className="flex items-center">
@@ -550,9 +550,9 @@ const ProfissionalPage = () => {
                         >
                           <FolderOpen className="h-4 w-4" />
                         </Button>
-                        <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-1 bg-gray-900 text-white text-xs rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-50">
+                        <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-1 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-xs rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-50">
                           Ver informações do paciente
-                          <div className="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900"></div>
+                          <div className="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900 dark:border-t-gray-100"></div>
                         </div>
                       </div>
                     </div>
@@ -567,7 +567,13 @@ const ProfissionalPage = () => {
   };
 
   
-  function PacientesSection({ handleAbrirProntuario, setActiveSection }) {
+  function PacientesSection({
+    handleAbrirProntuario,
+    setActiveSection,
+  }: {
+    handleAbrirProntuario: (paciente: any) => void;
+    setActiveSection: (section: string) => void;
+  }) {
     // Estados para busca de pacientes
      const [buscaPaciente, setBuscaPaciente] = useState("");
   const [pacientesBusca, setPacientesBusca] = useState<any[]>([]);
@@ -622,11 +628,11 @@ const ProfissionalPage = () => {
     };
 
     return (
-      <div className="bg-white shadow-md rounded-lg p-6">
+      <div className="bg-card shadow-md rounded-lg p-6">
         <h2 className="text-2xl font-bold mb-4">Gerenciamento de Pacientes</h2>
         
         {/* Campo de busca */}
-        <div className="mb-6 p-4 bg-gray-50 rounded-lg">
+        <div className="mb-6 p-4 bg-muted rounded-lg">
           <h3 className="text-lg font-semibold mb-3">Buscar Paciente</h3>
           <div className="flex gap-2">
             <div className="flex-1">
@@ -669,8 +675,8 @@ const ProfissionalPage = () => {
           
           {/* Resultados da busca */}
           {erroBusca && (
-            <div className="mt-3 p-3 bg-red-50 border border-red-200 rounded-md">
-              <p className="text-red-700 text-sm">{erroBusca}</p>
+            <div className="mt-3 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md">
+              <p className="text-red-700 dark:text-red-300 text-sm">{erroBusca}</p>
             </div>
           )}
           
@@ -679,10 +685,10 @@ const ProfissionalPage = () => {
               <h4 className="text-md font-medium mb-2">Resultados da busca ({pacientesBusca.length}):</h4>
               <div className="space-y-2">
                 {pacientesBusca.map((paciente, index) => (
-                  <div key={index} className="flex items-center justify-between p-3 bg-white border rounded-lg hover:shadow-sm">
+                  <div key={index} className="flex items-center justify-between p-3 bg-card border rounded-lg hover:shadow-sm">
                     <div>
                       <p className="font-medium">{paciente.nome}</p>
-                      <p className="text-sm text-gray-600">CPF: {paciente.cpf} • Idade: {paciente.idade} anos</p>
+                      <p className="text-sm text-muted-foreground">CPF: {paciente.cpf} • Idade: {paciente.idade} anos</p>
                     </div>
                     <Button
                       size="sm"
@@ -736,9 +742,9 @@ const ProfissionalPage = () => {
                         >
                           <FolderOpen className="h-4 w-4" />
                         </Button>
-                        <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-1 bg-gray-900 text-white text-xs rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-50">
+                        <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-1 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-xs rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-50">
                           Ver informações do paciente
-                          <div className="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900"></div>
+                          <div className="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900 dark:border-t-gray-100"></div>
                         </div>
                       </div>
                     </div>
@@ -755,7 +761,7 @@ const ProfissionalPage = () => {
   
   const renderProntuarioSection = () => (
     <div className="space-y-6">
-      <div className="bg-white shadow-md rounded-lg p-6">
+      <div className="bg-card shadow-md rounded-lg p-6">
         <h2 className="text-2xl font-bold mb-4">Prontuário do Paciente</h2>
         
         {/* Informações do Paciente Selecionado */}
@@ -773,7 +779,7 @@ const ProfissionalPage = () => {
                     }
                   }}
                 >
-                  <SelectTrigger className="w-48 h-8 text-xs bg-white border-primary/30 cursor-pointer">
+                  <SelectTrigger className="w-48 h-8 text-xs bg-card border-primary/30 cursor-pointer">
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
@@ -817,15 +823,15 @@ const ProfissionalPage = () => {
         {/* Seletor de Paciente */}
         {!pacienteSelecionado && (
           <div className="space-y-6">
-            <div className="bg-gray-50 border border-gray-200 rounded-lg p-6">
+            <div className="bg-muted border rounded-lg p-6">
               <div className="text-center mb-6">
-                <User className="h-12 w-12 mx-auto mb-4 text-gray-400" />
-                <h3 className="text-lg font-medium text-gray-900 mb-2">Selecionar Paciente</h3>
-                <p className="text-sm text-gray-600">Escolha um paciente para visualizar o prontuário completo</p>
+                <User className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
+                <h3 className="text-lg font-medium text-foreground mb-2">Selecionar Paciente</h3>
+                <p className="text-sm text-muted-foreground">Escolha um paciente para visualizar o prontuário completo</p>
               </div>
               
               <div className="max-w-md mx-auto">
-                <Label htmlFor="seletorPaciente" className="block text-sm font-medium text-gray-700 mb-2">
+                <Label htmlFor="seletorPaciente" className="block text-sm font-medium text-foreground mb-2">
                   Escolha o paciente:
                 </Label>
                 <Select
@@ -857,31 +863,31 @@ const ProfissionalPage = () => {
             
             {/* Cards de pacientes para seleção rápida */}
             <div>
-              <h3 className="text-lg font-medium text-gray-900 mb-4">Ou selecione rapidamente:</h3>
+              <h3 className="text-lg font-medium text-foreground mb-4">Ou selecione rapidamente:</h3>
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                 {pacientes.map((paciente) => (
                   <div
                     key={paciente.cpf}
                     onClick={() => setPacienteSelecionado(paciente)}
-                    className="border border-gray-200 rounded-lg p-4 hover:shadow-md hover:border-primary transition-all cursor-pointer group"
+                    className="border rounded-lg p-4 hover:shadow-md hover:border-primary transition-all cursor-pointer group"
                   >
                     <div className="flex items-center gap-3">
                       <div className="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center group-hover:bg-primary/20 transition-colors">
                         <User className="h-5 w-5 text-primary" />
                       </div>
                       <div className="flex-1 min-w-0">
-                        <p className="font-medium text-gray-900 truncate">{paciente.nome}</p>
-                        <p className="text-sm text-gray-500">CPF: {paciente.cpf}</p>
-                        <p className="text-sm text-gray-500">{paciente.idade} anos</p>
+                        <p className="font-medium text-foreground truncate">{paciente.nome}</p>
+                        <p className="text-sm text-muted-foreground">CPF: {paciente.cpf}</p>
+                        <p className="text-sm text-muted-foreground">{paciente.idade} anos</p>
                       </div>
                     </div>
                     <div className="mt-3 flex items-center justify-between">
                       <span className={`px-2 py-1 text-xs rounded-full ${
                         paciente.statusLaudo === 'Finalizado' 
-                          ? 'bg-green-100 text-green-800' 
+                          ? 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300' 
                           : paciente.statusLaudo === 'Pendente'
-                          ? 'bg-yellow-100 text-yellow-800'
-                          : 'bg-gray-100 text-gray-800'
+                          ? 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300'
+                          : 'bg-muted text-muted-foreground'
                       }`}>
                         {paciente.statusLaudo}
                       </span>
@@ -902,7 +908,7 @@ const ProfissionalPage = () => {
 
         {/* Tabs de Navegação do Prontuário */}
         {pacienteSelecionado && (
-          <div className="border-b border-gray-200 mb-6">
+          <div className="border-b border-border mb-6">
             <nav className="flex space-x-8">
               {[
                 { id: 'nova-consulta',nome: 'Nova Consulta', icone: Plus },
@@ -922,7 +928,7 @@ const ProfissionalPage = () => {
                     className={`py-2 px-1 border-b-2 font-medium text-sm flex items-center gap-2 transition-colors cursor-pointer ${
                       abaProntuarioAtiva === aba.id
                         ? 'border-primary text-primary'
-                        : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                        : 'border-transparent text-muted-foreground hover:text-foreground hover:border-border'
                     }`}
                   >
                     <Icone className="h-4 w-4" />
@@ -1017,11 +1023,11 @@ const ProfissionalPage = () => {
         </div>
       </div>
 
-      <div className="bg-white border rounded-lg p-6 space-y-6">
+      <div className="bg-card border rounded-lg p-6 space-y-6">
         {/* Data da Consulta */}
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
           <div className="space-y-2">
-            <Label htmlFor="dataConsulta" className="text-sm font-medium text-gray-700">
+            <Label htmlFor="dataConsulta" className="text-sm font-medium text-foreground">
               Data da Consulta *
             </Label>
             <Input
@@ -1034,7 +1040,7 @@ const ProfissionalPage = () => {
           </div>
           
           <div className="space-y-2">
-            <Label htmlFor="cid10" className="text-sm font-medium text-gray-700">
+            <Label htmlFor="cid10" className="text-sm font-medium text-foreground">
               CID-10
             </Label>
             <Input
@@ -1049,7 +1055,7 @@ const ProfissionalPage = () => {
 
         {/* Anamnese */}
         <div className="space-y-2">
-          <Label htmlFor="anamnese" className="text-sm font-medium text-gray-700">
+          <Label htmlFor="anamnese" className="text-sm font-medium text-foreground">
             Anamnese *
           </Label>
           <Textarea
@@ -1064,7 +1070,7 @@ const ProfissionalPage = () => {
 
         {/* Exame Físico */}
         <div className="space-y-2">
-          <Label htmlFor="exameFisico" className="text-sm font-medium text-gray-700">
+          <Label htmlFor="exameFisico" className="text-sm font-medium text-foreground">
             Exame Físico *
           </Label>
           <Textarea
@@ -1079,7 +1085,7 @@ const ProfissionalPage = () => {
 
         {/* Hipóteses Diagnósticas */}
         <div className="space-y-2">
-          <Label htmlFor="hipotesesDiagnosticas" className="text-sm font-medium text-gray-700">
+          <Label htmlFor="hipotesesDiagnosticas" className="text-sm font-medium text-foreground">
             Hipóteses Diagnósticas
           </Label>
           <Textarea
@@ -1094,7 +1100,7 @@ const ProfissionalPage = () => {
 
         {/* Conduta Médica */}
         <div className="space-y-2">
-          <Label htmlFor="condutaMedica" className="text-sm font-medium text-gray-700">
+          <Label htmlFor="condutaMedica" className="text-sm font-medium text-foreground">
             Conduta Médica
           </Label>
           <Textarea
@@ -1109,7 +1115,7 @@ const ProfissionalPage = () => {
 
         {/* Prescrições */}
         <div className="space-y-2">
-          <Label htmlFor="prescricoes" className="text-sm font-medium text-gray-700">
+          <Label htmlFor="prescricoes" className="text-sm font-medium text-foreground">
             Prescrições
           </Label>
           <Textarea
@@ -1124,7 +1130,7 @@ const ProfissionalPage = () => {
 
         {/* Retorno Agendado */}
         <div className="space-y-2">
-          <Label htmlFor="retornoAgendado" className="text-sm font-medium text-gray-700">
+          <Label htmlFor="retornoAgendado" className="text-sm font-medium text-foreground">
             Retorno Agendado
           </Label>
           <Input
@@ -1138,7 +1144,7 @@ const ProfissionalPage = () => {
 
         {/* Informações do Registro */}
         <div className="border-t pt-4">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm text-gray-600">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm text-muted-foreground">
             <div>
               <span className="font-medium">Paciente:</span>
               <p>{pacienteSelecionado?.nome}</p>
@@ -1157,7 +1163,7 @@ const ProfissionalPage = () => {
 
       {/* Consultas Anteriores do Paciente */}
       {consultasRegistradas.length > 0 && (
-        <div className="bg-white border rounded-lg p-6">
+        <div className="bg-card border rounded-lg p-6">
           <h4 className="text-lg font-medium mb-4">Consultas Anteriores</h4>
           <div className="space-y-3">
             {consultasRegistradas
@@ -1170,17 +1176,17 @@ const ProfissionalPage = () => {
                       <p className="font-medium text-sm">
                         Consulta de {new Date(consulta.dataConsulta).toLocaleDateString('pt-BR')}
                       </p>
-                      <p className="text-xs text-gray-500">
+                      <p className="text-xs text-muted-foreground">
                         Registrada em: {consulta.dataCriacao}
                       </p>
                     </div>
                     {consulta.cid10 && (
-                      <span className="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">
+                      <span className="px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 text-xs rounded-full">
                         {consulta.cid10}
                       </span>
                     )}
                   </div>
-                  <div className="text-sm text-gray-700">
+                  <div className="text-sm text-foreground">
                     <p><strong>Anamnese:</strong> {consulta.anamnese.substring(0, 100)}...</p>
                     {consulta.hipotesesDiagnosticas && (
                       <p><strong>Diagnóstico:</strong> {consulta.hipotesesDiagnosticas.substring(0, 80)}...</p>
@@ -1205,9 +1211,9 @@ const ProfissionalPage = () => {
           <div className="flex justify-between items-start mb-3">
             <div>
               <h4 className="font-medium">Consulta Cardiológica</h4>
-              <p className="text-sm text-gray-600">27/09/2025 - 09:00</p>
+              <p className="text-sm text-muted-foreground">27/09/2025 - 09:00</p>
             </div>
-            <span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Finalizada</span>
+            <span className="px-2 py-1 bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 text-xs rounded-full">Finalizada</span>
           </div>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
             <div>
@@ -1229,9 +1235,9 @@ const ProfissionalPage = () => {
           <div className="flex justify-between items-start mb-3">
             <div>
               <h4 className="font-medium">Consulta Dermatológica</h4>
-              <p className="text-sm text-gray-600">15/09/2025 - 14:30</p>
+              <p className="text-sm text-muted-foreground">15/09/2025 - 14:30</p>
             </div>
-            <span className="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">Retorno Agendado</span>
+            <span className="px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 text-xs rounded-full">Retorno Agendado</span>
           </div>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
             <div>
@@ -1273,11 +1279,11 @@ const ProfissionalPage = () => {
           <div className="space-y-2 text-sm">
             <div className="flex justify-between">
               <span>Apendicectomia</span>
-              <span className="text-gray-600">15/03/2010</span>
+              <span className="text-muted-foreground">15/03/2010</span>
             </div>
             <div className="flex justify-between">
               <span>Colecistectomia laparoscópica</span>
-              <span className="text-gray-600">22/08/2019</span>
+              <span className="text-muted-foreground">22/08/2019</span>
             </div>
           </div>
         </div>
@@ -1286,11 +1292,11 @@ const ProfissionalPage = () => {
           <h4 className="font-medium mb-2">Alergias e Reações Adversas</h4>
           <div className="space-y-2 text-sm">
             <div className="flex items-center gap-2">
-              <span className="px-2 py-1 bg-red-100 text-red-800 text-xs rounded">Alergia</span>
+              <span className="px-2 py-1 bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300 text-xs rounded">Alergia</span>
               <span>Penicilina - reação cutânea</span>
             </div>
             <div className="flex items-center gap-2">
-              <span className="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded">Intolerância</span>
+              <span className="px-2 py-1 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 text-xs rounded">Intolerância</span>
               <span>Lactose - sintomas gastrintestinais</span>
             </div>
           </div>
@@ -1302,7 +1308,7 @@ const ProfissionalPage = () => {
   const renderPrescricoesTab = () => (
     <div className="space-y-6">
       <div className="flex justify-between items-center">
-        <h3 className="text-lg font-semibold">Prescrições Médicas</h3>
+        <h3 className="text-lg font-semibold text-foreground">Prescrições Médicas</h3>
         <Button className="flex items-center gap-2 cursor-pointer">
           <Plus className="h-4 w-4" />
           Nova Prescrição
@@ -1313,18 +1319,18 @@ const ProfissionalPage = () => {
         <div className="border rounded-lg p-4">
           <div className="flex justify-between items-start mb-3">
             <div>
-              <h4 className="font-medium">Prescrição Atual</h4>
-              <p className="text-sm text-gray-600">Prescrita em 27/09/2025</p>
+              <h4 className="font-medium text-foreground">Prescrição Atual</h4>
+              <p className="text-sm text-muted-foreground">Prescrita em 27/09/2025</p>
             </div>
-            <span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Ativa</span>
+            <span className="px-2 py-1 bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 text-xs rounded-full">Ativa</span>
           </div>
           <div className="space-y-3">
             <div className="border-l-4 border-blue-500 pl-4">
               <div className="flex justify-between items-start">
                 <div>
-                  <p className="font-medium">Losartana 50mg</p>
-                  <p className="text-sm text-gray-600">1 comprimido pela manhã</p>
-                  <p className="text-sm text-gray-500">Duração: 30 dias</p>
+                  <p className="font-medium text-foreground">Losartana 50mg</p>
+                  <p className="text-sm text-muted-foreground">1 comprimido pela manhã</p>
+                  <p className="text-sm text-muted-foreground">Duração: 30 dias</p>
                 </div>
                 <Button variant="outline" size="sm" className="cursor-pointer">
                   <Eye className="h-4 w-4" />
@@ -1334,9 +1340,9 @@ const ProfissionalPage = () => {
             <div className="border-l-4 border-green-500 pl-4">
               <div className="flex justify-between items-start">
                 <div>
-                  <p className="font-medium">Metformina 850mg</p>
-                  <p className="text-sm text-gray-600">1 comprimido após café e jantar</p>
-                  <p className="text-sm text-gray-500">Duração: 60 dias</p>
+                  <p className="font-medium text-foreground">Metformina 850mg</p>
+                  <p className="text-sm text-muted-foreground">1 comprimido após café e jantar</p>
+                  <p className="text-sm text-muted-foreground">Duração: 60 dias</p>
                 </div>
                 <Button variant="outline" size="sm" className="cursor-pointer">
                   <Eye className="h-4 w-4" />
@@ -1349,15 +1355,15 @@ const ProfissionalPage = () => {
         <div className="border rounded-lg p-4">
           <div className="flex justify-between items-start mb-3">
             <div>
-              <h4 className="font-medium">Prescrições Anteriores</h4>
-              <p className="text-sm text-gray-600">Histórico de medicamentos</p>
+              <h4 className="font-medium text-foreground">Prescrições Anteriores</h4>
+              <p className="text-sm text-muted-foreground">Histórico de medicamentos</p>
             </div>
           </div>
           <div className="space-y-2 text-sm">
-            <div className="flex justify-between items-center py-2 border-b">
+            <div className="flex justify-between items-center py-2 border-b border-border">
               <div>
-                <p className="font-medium">Sinvastatina 20mg</p>
-                <p className="text-gray-600">Prescrita em 15/08/2025 - Finalizada</p>
+                <p className="font-medium text-foreground">Sinvastatina 20mg</p>
+                <p className="text-muted-foreground">Prescrita em 15/08/2025 - Finalizada</p>
               </div>
               <Button variant="ghost" size="sm" className="cursor-pointer">
                 <History className="h-4 w-4" />
@@ -1372,7 +1378,7 @@ const ProfissionalPage = () => {
   const renderExamesTab = () => (
     <div className="space-y-6">
       <div className="flex justify-between items-center">
-        <h3 className="text-lg font-semibold">Exames Solicitados</h3>
+        <h3 className="text-lg font-semibold text-foreground">Exames Solicitados</h3>
         <Button className="flex items-center gap-2 cursor-pointer">
           <Plus className="h-4 w-4" />
           Solicitar Exame
@@ -1383,26 +1389,26 @@ const ProfissionalPage = () => {
         <div className="border rounded-lg p-4">
           <div className="flex justify-between items-start mb-3">
             <div>
-              <h4 className="font-medium">Exames Pendentes</h4>
+              <h4 className="font-medium text-foreground">Exames Pendentes</h4>
             </div>
           </div>
           <div className="space-y-3">
-            <div className="flex justify-between items-center p-3 bg-yellow-50 border border-yellow-200 rounded">
+            <div className="flex justify-between items-center p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded">
               <div>
-                <p className="font-medium">Ecocardiograma</p>
-                <p className="text-sm text-gray-600">Solicitado em 25/09/2025</p>
-                <p className="text-sm text-gray-500">Urgência: Normal</p>
+                <p className="font-medium text-foreground">Ecocardiograma</p>
+                <p className="text-sm text-muted-foreground">Solicitado em 25/09/2025</p>
+                <p className="text-sm text-muted-foreground">Urgência: Normal</p>
               </div>
-              <span className="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">Pendente</span>
+              <span className="px-2 py-1 bg-yellow-100 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-100 text-xs rounded-full">Pendente</span>
             </div>
             
-            <div className="flex justify-between items-center p-3 bg-blue-50 border border-blue-200 rounded">
+            <div className="flex justify-between items-center p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 rounded">
               <div>
-                <p className="font-medium">Hemograma Completo</p>
-                <p className="text-sm text-gray-600">Solicitado em 27/09/2025</p>
-                <p className="text-sm text-gray-500">Urgência: Normal</p>
+                <p className="font-medium text-foreground">Hemograma Completo</p>
+                <p className="text-sm text-muted-foreground">Solicitado em 27/09/2025</p>
+                <p className="text-sm text-muted-foreground">Urgência: Normal</p>
               </div>
-              <span className="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">Agendado</span>
+              <span className="px-2 py-1 bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-100 text-xs rounded-full">Agendado</span>
             </div>
           </div>
         </div>
@@ -1410,15 +1416,15 @@ const ProfissionalPage = () => {
         <div className="border rounded-lg p-4">
           <div className="flex justify-between items-start mb-3">
             <div>
-              <h4 className="font-medium">Resultados Disponíveis</h4>
+              <h4 className="font-medium text-foreground">Resultados Disponíveis</h4>
             </div>
           </div>
           <div className="space-y-3">
-            <div className="flex justify-between items-center p-3 bg-green-50 border border-green-200 rounded">
+            <div className="flex justify-between items-center p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-700 rounded">
               <div>
-                <p className="font-medium">Glicemia de Jejum</p>
-                <p className="text-sm text-gray-600">Realizado em 20/09/2025</p>
-                <p className="text-sm font-medium text-green-700">Resultado: 95 mg/dL (Normal)</p>
+                <p className="font-medium text-foreground">Glicemia de Jejum</p>
+                <p className="text-sm text-muted-foreground">Realizado em 20/09/2025</p>
+                <p className="text-sm font-medium text-green-700 dark:text-green-400">Resultado: 95 mg/dL (Normal)</p>
               </div>
               <div className="flex gap-2">
                 <Button variant="outline" size="sm" className="cursor-pointer">
@@ -1438,7 +1444,7 @@ const ProfissionalPage = () => {
   const renderDiagnosticosTab = () => (
     <div className="space-y-6">
       <div className="flex justify-between items-center">
-        <h3 className="text-lg font-semibold">Diagnósticos</h3>
+        <h3 className="text-lg font-semibold text-foreground">Diagnósticos</h3>
         <Button className="flex items-center gap-2 cursor-pointer">
           <Plus className="h-4 w-4" />
           Novo Diagnóstico
@@ -1447,43 +1453,43 @@ const ProfissionalPage = () => {
       
       <div className="space-y-4">
         <div className="border rounded-lg p-4">
-          <h4 className="font-medium mb-3">Diagnósticos Ativos</h4>
+          <h4 className="font-medium mb-3 text-foreground">Diagnósticos Ativos</h4>
           <div className="space-y-3">
             <div className="border-l-4 border-red-500 pl-4">
               <div className="flex justify-between items-start">
                 <div>
-                  <p className="font-medium">Hipertensão Arterial Sistêmica</p>
-                  <p className="text-sm text-gray-600">CID-10: I10</p>
-                  <p className="text-sm text-gray-500">Diagnosticado em: 15/03/2020</p>
-                  <p className="text-sm mt-1">Status: Controlada com medicação</p>
+                  <p className="font-medium text-foreground">Hipertensão Arterial Sistêmica</p>
+                  <p className="text-sm text-muted-foreground">CID-10: I10</p>
+                  <p className="text-sm text-muted-foreground">Diagnosticado em: 15/03/2020</p>
+                  <p className="text-sm mt-1 text-foreground">Status: Controlada com medicação</p>
                 </div>
-                <span className="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">Ativo</span>
+                <span className="px-2 py-1 bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300 text-xs rounded-full">Ativo</span>
               </div>
             </div>
             
             <div className="border-l-4 border-orange-500 pl-4">
               <div className="flex justify-between items-start">
                 <div>
-                  <p className="font-medium">Diabetes Mellitus Tipo 2</p>
-                  <p className="text-sm text-gray-600">CID-10: E11</p>
-                  <p className="text-sm text-gray-500">Diagnosticado em: 10/08/2018</p>
-                  <p className="text-sm mt-1">Status: Controlada com dieta e medicação</p>
+                  <p className="font-medium text-foreground">Diabetes Mellitus Tipo 2</p>
+                  <p className="text-sm text-muted-foreground">CID-10: E11</p>
+                  <p className="text-sm text-muted-foreground">Diagnosticado em: 10/08/2018</p>
+                  <p className="text-sm mt-1 text-foreground">Status: Controlada com dieta e medicação</p>
                 </div>
-                <span className="px-2 py-1 bg-orange-100 text-orange-800 text-xs rounded-full">Ativo</span>
+                <span className="px-2 py-1 bg-orange-100 dark:bg-orange-900/30 text-orange-800 dark:text-orange-300 text-xs rounded-full">Ativo</span>
               </div>
             </div>
           </div>
         </div>
 
         <div className="border rounded-lg p-4">
-          <h4 className="font-medium mb-3">Histórico de Diagnósticos</h4>
+          <h4 className="font-medium mb-3 text-foreground">Histórico de Diagnósticos</h4>
           <div className="space-y-2 text-sm">
             <div className="flex justify-between items-center py-2 border-b">
               <div>
-                <p className="font-medium">Gastrite Aguda</p>
-                <p className="text-gray-600">CID-10: K29.0 - Resolvido em 2023</p>
+                <p className="font-medium text-foreground">Gastrite Aguda</p>
+                <p className="text-muted-foreground">CID-10: K29.0 - Resolvido em 2023</p>
               </div>
-              <span className="px-2 py-1 bg-gray-100 text-gray-800 text-xs rounded-full">Resolvido</span>
+              <span className="px-2 py-1 bg-muted text-muted-foreground text-xs rounded-full">Resolvido</span>
             </div>
           </div>
         </div>
@@ -1494,7 +1500,7 @@ const ProfissionalPage = () => {
   const renderEvolucaoTab = () => (
     <div className="space-y-6">
       <div className="flex justify-between items-center">
-        <h3 className="text-lg font-semibold">Evolução do Quadro</h3>
+        <h3 className="text-lg font-semibold text-foreground">Evolução do Quadro</h3>
         <Button className="flex items-center gap-2 cursor-pointer">
           <Plus className="h-4 w-4" />
           Nova Evolução
@@ -1505,26 +1511,26 @@ const ProfissionalPage = () => {
         <div className="border rounded-lg p-4">
           <div className="flex justify-between items-start mb-3">
             <div>
-              <h4 className="font-medium">Evolução Recente</h4>
-              <p className="text-sm text-gray-600">27/09/2025 - 09:15</p>
+              <h4 className="font-medium text-foreground">Evolução Recente</h4>
+              <p className="text-sm text-muted-foreground">27/09/2025 - 09:15</p>
             </div>
-            <span className="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">Melhora</span>
+            <span className="px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 text-xs rounded-full">Melhora</span>
           </div>
           <div className="space-y-2">
-            <p className="text-sm"><strong>Subjetivo:</strong> Paciente relatou diminuição significativa da dor no peito e melhora da capacidade respiratória.</p>
-            <p className="text-sm"><strong>Objetivo:</strong> PA: 130/80 mmHg, FC: 72 bpm, ausculta cardíaca sem alterações.</p>
-            <p className="text-sm"><strong>Avaliação:</strong> Resposta positiva ao tratamento iniciado, pressão arterial em níveis aceitáveis.</p>
-            <p className="text-sm"><strong>Plano:</strong> Manter medicação atual, retorno em 30 dias.</p>
+            <p className="text-sm text-foreground"><strong>Subjetivo:</strong> Paciente relatou diminuição significativa da dor no peito e melhora da capacidade respiratória.</p>
+            <p className="text-sm text-foreground"><strong>Objetivo:</strong> PA: 130/80 mmHg, FC: 72 bpm, ausculta cardíaca sem alterações.</p>
+            <p className="text-sm text-foreground"><strong>Avaliação:</strong> Resposta positiva ao tratamento iniciado, pressão arterial em níveis aceitáveis.</p>
+            <p className="text-sm text-foreground"><strong>Plano:</strong> Manter medicação atual, retorno em 30 dias.</p>
           </div>
         </div>
 
         <div className="border rounded-lg p-4">
           <div className="flex justify-between items-start mb-3">
             <div>
-              <h4 className="font-medium">Evolução Anterior</h4>
-              <p className="text-sm text-gray-600">15/09/2025 - 14:45</p>
+              <h4 className="font-medium text-foreground">Evolução Anterior</h4>
+              <p className="text-sm text-muted-foreground">15/09/2025 - 14:45</p>
             </div>
-            <span className="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">Estável</span>
+            <span className="px-2 py-1 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 text-xs rounded-full">Estável</span>
           </div>
           <div className="space-y-2">
             <p className="text-sm"><strong>Subjetivo:</strong> Paciente apresentou episódios esporádicos de dor torácica leve.</p>
@@ -1539,7 +1545,7 @@ const ProfissionalPage = () => {
   const renderAnexosTab = () => (
     <div className="space-y-6">
       <div className="flex justify-between items-center">
-        <h3 className="text-lg font-semibold">Anexos (Exames, Imagens)</h3>
+        <h3 className="text-lg font-semibold text-foreground">Anexos (Exames, Imagens)</h3>
         <Button className="flex items-center gap-2 cursor-pointer">
           <Upload className="h-4 w-4" />
           Adicionar Anexo
@@ -1557,7 +1563,7 @@ const ProfissionalPage = () => {
                 </div>
                 <div>
                   <p className="font-medium text-sm">Radiografia de Tórax</p>
-                  <p className="text-xs text-gray-600">20/09/2025</p>
+                  <p className="text-xs text-muted-foreground">20/09/2025</p>
                 </div>
               </div>
               <div className="flex gap-2">
@@ -1579,7 +1585,7 @@ const ProfissionalPage = () => {
                 </div>
                 <div>
                   <p className="font-medium text-sm">ECG</p>
-                  <p className="text-xs text-gray-600">15/09/2025</p>
+                  <p className="text-xs text-muted-foreground">15/09/2025</p>
                 </div>
               </div>
               <div className="flex gap-2">
@@ -1599,14 +1605,14 @@ const ProfissionalPage = () => {
         <div className="border rounded-lg p-4">
           <h4 className="font-medium mb-3">Laudos e Documentos</h4>
           <div className="space-y-3">
-            <div className="flex items-center justify-between p-3 border rounded-lg hover:bg-gray-50">
+            <div className="flex items-center justify-between p-3 border rounded-lg hover:bg-muted/50">
               <div className="flex items-center gap-3">
                 <div className="w-8 h-8 bg-purple-100 rounded flex items-center justify-center">
                   <FileText className="h-4 w-4 text-purple-600" />
                 </div>
                 <div>
                   <p className="font-medium text-sm">Laudo de Ecocardiograma</p>
-                  <p className="text-xs text-gray-600">10/08/2025 - Dr. Carlos Andrade</p>
+                  <p className="text-xs text-muted-foreground">10/08/2025 - Dr. Carlos Andrade</p>
                 </div>
               </div>
               <div className="flex gap-2">
@@ -1619,7 +1625,7 @@ const ProfissionalPage = () => {
               </div>
             </div>
 
-            <div className="flex items-center justify-between p-3 border rounded-lg hover:bg-gray-50">
+            <div className="flex items-center justify-between p-3 border rounded-lg hover:bg-muted/50">
               <div className="flex items-center gap-3">
                 <div className="w-8 h-8 bg-orange-100 rounded flex items-center justify-center">
                   <FileText className="h-4 w-4 text-orange-600" />
@@ -1700,11 +1706,11 @@ function LaudoEditor() {
   return (
     <div className="min-h-screen bg-gradient-to-br from-primary/5 to-white p-2 md:p-4">
       <div className="max-w-2xl mx-auto">
-        <div className="bg-white border border-primary/10 shadow-lg rounded-xl p-4 md:p-6 mb-6">
+        <div className="bg-card border border-primary/10 shadow-lg rounded-xl p-4 md:p-6 mb-6">
           <h2 className="text-2xl font-bold text-primary mb-4 text-center tracking-tight">Laudo Médico</h2>
           
           {!pacienteSelecionado ? (
-            <div className="flex flex-col items-center justify-center py-8 px-1 bg-white rounded-xl shadow-sm">
+            <div className="flex flex-col items-center justify-center py-8 px-1 bg-card rounded-xl shadow-sm">
               <div className="mb-2">
                 <svg width="40" height="40" fill="none" viewBox="0 0 24 24" className="mx-auto text-gray-400">
                   <circle cx="12" cy="8" r="4" stroke="currentColor" strokeWidth="2"/>
@@ -1714,11 +1720,11 @@ function LaudoEditor() {
               <h2 className="text-lg font-bold text-center text-gray-800 mb-1">Selecionar Paciente</h2>
               <p className="text-gray-500 text-center mb-4 max-w-xs text-sm">Escolha um paciente para visualizar o prontuário completo</p>
               <div className="w-full max-w-xs">
-                <label htmlFor="select-paciente" className="block text-sm font-medium text-gray-700 mb-1">Escolha o paciente:</label>
+                <label htmlFor="select-paciente" className="block text-sm font-medium text-foreground mb-1">Escolha o paciente:</label>
                 <div className="relative">
                   <select
                     id="select-paciente"
-                    className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-200 focus:border-blue-300 focus:outline-none bg-white text-sm text-gray-900 shadow-sm transition-all appearance-none"
+                    className="w-full p-2 border border-border rounded-lg focus:ring-2 focus:ring-ring focus:border-ring focus:outline-none bg-background text-sm text-foreground shadow-sm transition-all appearance-none"
                     onChange={e => {
                       const p = pacientes.find(p => p.cpf === e.target.value);
                       if (p) handleSelectPaciente(p);
@@ -1740,9 +1746,9 @@ function LaudoEditor() {
             <div className="bg-primary/10 border border-primary/20 rounded-lg p-3 mb-4 flex flex-col md:flex-row md:items-center md:justify-between gap-2">
               <div>
                 <div className="font-bold text-primary text-base mb-0.5">{pacienteSelecionado.nome}</div>
-                <div className="text-xs text-gray-700">CPF: {pacienteSelecionado.cpf}</div>
-                <div className="text-xs text-gray-700">Idade: {pacienteSelecionado.idade}</div>
-                <div className="text-xs text-gray-700">Sexo: {pacienteSelecionado.sexo}</div>
+                <div className="text-xs text-muted-foreground">CPF: {pacienteSelecionado.cpf}</div>
+                <div className="text-xs text-muted-foreground">Idade: {pacienteSelecionado.idade}</div>
+                <div className="text-xs text-muted-foreground">Sexo: {pacienteSelecionado.sexo}</div>
               </div>
               <button type="button" onClick={limparPaciente} className="px-3 py-1 rounded bg-red-100 text-red-700 hover:bg-red-200 font-semibold shadow text-xs">Trocar paciente</button>
             </div>
@@ -1812,14 +1818,14 @@ function LaudoEditor() {
                   ref={sigCanvasRef}
                   penColor="#0f172a"
                   backgroundColor="#fff"
-                  canvasProps={{ width: 220, height: 60, className: "rounded-md border bg-white shadow" }}
+                  canvasProps={{ width: 220, height: 60, className: "rounded-md border bg-card shadow" }}
                   onEnd={() => setAssinatura(sigCanvasRef.current?.isEmpty() ? null : sigCanvasRef.current?.toDataURL())}
                 />
                 <div className="flex gap-2 mt-2">
                   <button type="button" onClick={() => { sigCanvasRef.current?.clear(); setAssinatura(null); }} className="px-2 py-1 text-xs rounded-md bg-muted-foreground text-white hover:bg-muted font-semibold shadow">Limpar</button>
                 </div>
                 {assinatura && (
-                  <img src={assinatura} alt="Assinatura" className="mt-2 max-h-10 border rounded-md bg-white shadow" />
+                  <img src={assinatura} alt="Assinatura" className="mt-2 max-h-10 border rounded-md bg-card shadow" />
                 )}
               </div>
             </div>
@@ -1827,7 +1833,7 @@ function LaudoEditor() {
               <button
                 type="button"
                 onClick={() => salvarLaudo("Rascunho")}
-                className="w-full md:w-1/3 flex items-center justify-center gap-1 bg-gray-100 text-gray-700 py-2 rounded-lg font-semibold text-base shadow-sm hover:bg-gray-200 transition-all border border-gray-200"
+                className="w-full md:w-1/3 flex items-center justify-center gap-1 bg-muted text-muted-foreground py-2 rounded-lg font-semibold text-base shadow-sm hover:bg-muted/80 transition-all border"
               >
                 <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" strokeLinecap="round" strokeLinejoin="round"/></svg>
                 Salvar Rascunho
@@ -1843,7 +1849,7 @@ function LaudoEditor() {
               <button
                 type="button"
                 onClick={() => setPreview(!preview)}
-                className="w-full md:w-1/3 flex items-center justify-center gap-1 bg-white text-primary py-2 rounded-lg font-semibold text-base shadow-sm hover:bg-primary/10 transition-all border border-primary/20"
+                className="w-full md:w-1/3 flex items-center justify-center gap-1 bg-card text-primary py-2 rounded-lg font-semibold text-base shadow-sm hover:bg-primary/10 transition-all border border-primary/20"
               >
                 <svg className="w-4 h-4 text-primary" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path d="M15 10l4.553 2.276A2 2 0 0121 14.09V17a2 2 0 01-2 2H5a2 2 0 01-2-2v-2.91a2 2 0 01.447-1.814L8 10m7-4v4m0 0l-4 4m4-4l4 4" strokeLinecap="round" strokeLinejoin="round"/></svg>
                 Pré-visualizar Laudo
@@ -1852,7 +1858,7 @@ function LaudoEditor() {
           </form>
         </div>
         
-        <div className="bg-white border border-primary/10 shadow-lg rounded-xl p-4 md:p-6">
+        <div className="bg-card border border-primary/10 shadow-lg rounded-xl p-4 md:p-6">
           <h3 className="text-xl font-bold text-primary mb-3 text-center">Histórico de Laudos</h3>
           {laudos.length === 0 ? (
             <p className="text-muted-foreground text-center text-sm">Nenhum laudo registrado.</p>
@@ -1876,7 +1882,7 @@ function LaudoEditor() {
                 {laudo.assinatura && (
                   <div className="mb-2">
                     <p className="font-semibold text-primary text-sm mb-1">Assinatura Digital:</p>
-                    <img src={laudo.assinatura} alt="Assinatura digital" className="rounded-lg max-h-16 border bg-white shadow" />
+                    <img src={laudo.assinatura} alt="Assinatura digital" className="rounded-lg max-h-16 border bg-card shadow" />
                   </div>
                 )}
                 {laudo.imagem && (
@@ -1900,8 +1906,8 @@ function LaudoEditor() {
 
   
   const renderComunicacaoSection = () => (
-    <div className="bg-white shadow-md rounded-lg p-6">
-      <h2 className="text-2xl font-bold mb-4">Comunicação com o Paciente</h2>
+    <div className="bg-card shadow-md rounded-lg p-6">
+      <h2 className="text-2xl font-bold mb-4 text-foreground">Comunicação com o Paciente</h2>
       <div className="space-y-6">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
           <div className="space-y-2">
@@ -1910,7 +1916,7 @@ function LaudoEditor() {
               id="destinatario" 
               placeholder="Nome do Paciente ou CPF" 
               disabled 
-              className="bg-muted cursor-not-allowed text-gray-700 disabled:text-gray-900"
+              className="bg-muted cursor-not-allowed text-muted-foreground disabled:text-foreground"
             />
           </div>
           <div className="space-y-2">
@@ -1919,7 +1925,7 @@ function LaudoEditor() {
               <SelectTrigger id="tipoMensagem" className="hover:border-primary focus:border-primary cursor-pointer">
                 <SelectValue placeholder="Selecione o tipo" />
               </SelectTrigger>
-              <SelectContent className="bg-white border border-gray-200">
+              <SelectContent className="bg-popover border">
                 <SelectItem value="lembrete" className="hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground cursor-pointer">Lembrete de Consulta</SelectItem>
                 <SelectItem value="resultado" className="hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground cursor-pointer">Resultado de Exame</SelectItem>
                 <SelectItem value="instrucao" className="hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground cursor-pointer">Instruções Pós-Consulta</SelectItem>
@@ -1956,7 +1962,7 @@ function LaudoEditor() {
   const renderRelatoriosMedicosSection = () => (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
-        <h2 className="text-2xl font-bold">Relatórios Médicos</h2>
+        <h2 className="text-2xl font-bold text-foreground">Relatórios Médicos</h2>
         {editandoRelatorio && (
           <Button variant="outline" onClick={handleCancelarEdicaoRelatorio}>
             Cancelar Edição
@@ -1965,8 +1971,8 @@ function LaudoEditor() {
       </div>
 
       {/* Formulário de Relatório Médico */}
-      <div className="bg-white shadow-md rounded-lg p-6">
-        <h3 className="text-lg font-semibold mb-4">
+      <div className="bg-card shadow-md rounded-lg p-6">
+        <h3 className="text-lg font-semibold mb-4 text-foreground">
           {editandoRelatorio ? 'Editar Relatório Médico' : 'Novo Relatório Médico'}
         </h3>
         
@@ -1981,7 +1987,7 @@ function LaudoEditor() {
                   id="profissionalNome"
                   value={relatorioMedico.profissionalNome}
                   disabled
-                  className="bg-gray-100"
+                  className="bg-muted"
                 />
               </div>
               <div className="space-y-2">
@@ -1990,7 +1996,7 @@ function LaudoEditor() {
                   id="profissionalCrm"
                   value={relatorioMedico.profissionalCrm}
                   disabled
-                  className="bg-gray-100"
+                  className="bg-muted"
                 />
               </div>
             </div>
@@ -2190,12 +2196,12 @@ function LaudoEditor() {
       </div>
 
       {/* Lista de Relatórios Existentes */}
-      <div className="bg-white shadow-md rounded-lg p-6">
-        <h3 className="text-lg font-semibold mb-4">Relatórios Médicos Salvos</h3>
+      <div className="bg-card shadow-md rounded-lg p-6">
+        <h3 className="text-lg font-semibold mb-4 text-foreground">Relatórios Médicos Salvos</h3>
         
         {relatoriosMedicos.length === 0 ? (
-          <div className="text-center py-8 text-gray-500">
-            <FileCheck className="h-12 w-12 mx-auto mb-4 text-gray-300" />
+          <div className="text-center py-8 text-muted-foreground">
+            <FileCheck className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
             <p className="text-lg mb-2">Nenhum relatório médico encontrado</p>
             <p className="text-sm">Os relatórios salvos aparecerão aqui</p>
           </div>
@@ -2206,9 +2212,9 @@ function LaudoEditor() {
                 <div className="flex justify-between items-start mb-3">
                   <div>
                     <h4 className="font-semibold text-lg">{relatorio.pacienteNome}</h4>
-                    <p className="text-sm text-gray-600">CPF: {relatorio.pacienteCpf} • Idade: {relatorio.pacienteIdade} anos</p>
-                    <p className="text-sm text-gray-500">Data do relatório: {new Date(relatorio.dataRelatorio).toLocaleDateString('pt-BR')}</p>
-                    <p className="text-xs text-gray-400">Gerado em: {relatorio.dataGeracao}</p>
+                    <p className="text-sm text-muted-foreground">CPF: {relatorio.pacienteCpf} • Idade: {relatorio.pacienteIdade} anos</p>
+                    <p className="text-sm text-muted-foreground">Data do relatório: {new Date(relatorio.dataRelatorio).toLocaleDateString('pt-BR')}</p>
+                    <p className="text-xs text-muted-foreground/70">Gerado em: {relatorio.dataGeracao}</p>
                   </div>
                   <div className="flex gap-2">
                     <Button
@@ -2235,20 +2241,20 @@ function LaudoEditor() {
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                   <div>
                     <span className="font-medium text-primary">Motivo:</span>
-                    <p className="text-gray-700 mt-1">{relatorio.motivoRelatorio}</p>
+                    <p className="text-foreground mt-1">{relatorio.motivoRelatorio}</p>
                   </div>
                   
                   {relatorio.diagnosticos && (
                     <div>
                       <span className="font-medium text-primary">Diagnóstico(s):</span>
-                      <p className="text-gray-700 mt-1">{relatorio.diagnosticos}</p>
+                      <p className="text-foreground mt-1">{relatorio.diagnosticos}</p>
                     </div>
                   )}
                   
                   {relatorio.recomendacoes && (
                     <div className="md:col-span-2">
                       <span className="font-medium text-primary">Recomendações:</span>
-                      <p className="text-gray-700 mt-1">{relatorio.recomendacoes}</p>
+                      <p className="text-foreground mt-1">{relatorio.recomendacoes}</p>
                     </div>
                   )}
                 </div>
@@ -2263,7 +2269,7 @@ function LaudoEditor() {
   const renderPerfilSection = () => (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
-        <h2 className="text-2xl font-bold">Meu Perfil</h2>
+        <h2 className="text-2xl font-bold text-foreground">Meu Perfil</h2>
         {!isEditingProfile ? (
           <Button onClick={() => setIsEditingProfile(true)} className="flex items-center gap-2">
             <Edit className="h-4 w-4" />
@@ -2284,12 +2290,12 @@ function LaudoEditor() {
       <div className="grid gap-6 md:grid-cols-2">
         {/* Informações Pessoais */}
         <div className="space-y-4">
-          <h3 className="text-lg font-semibold border-b pb-2">Informações Pessoais</h3>
+          <h3 className="text-lg font-semibold border-b border-border text-foreground pb-2">Informações Pessoais</h3>
           
           <div className="space-y-2">
             <Label htmlFor="nome">Nome Completo</Label>
-            <p className="p-2 bg-gray-100 rounded text-gray-600">{profileData.nome}</p>
-            <span className="text-xs text-gray-500">Este campo não pode ser alterado</span>
+            <p className="p-2 bg-muted rounded text-muted-foreground">{profileData.nome}</p>
+            <span className="text-xs text-muted-foreground">Este campo não pode ser alterado</span>
           </div>
 
           <div className="space-y-2">
@@ -2302,7 +2308,7 @@ function LaudoEditor() {
                 onChange={(e) => handleProfileChange('email', e.target.value)}
               />
             ) : (
-              <p className="p-2 bg-gray-50 rounded">{profileData.email}</p>
+              <p className="p-2 bg-muted/50 rounded text-foreground">{profileData.email}</p>
             )}
           </div>
 
@@ -2315,14 +2321,14 @@ function LaudoEditor() {
                 onChange={(e) => handleProfileChange('telefone', e.target.value)}
               />
             ) : (
-              <p className="p-2 bg-gray-50 rounded">{profileData.telefone}</p>
+              <p className="p-2 bg-muted/50 rounded text-foreground">{profileData.telefone}</p>
             )}
           </div>
 
           <div className="space-y-2">
             <Label htmlFor="crm">CRM</Label>
-            <p className="p-2 bg-gray-100 rounded text-gray-600">{profileData.crm}</p>
-            <span className="text-xs text-gray-500">Este campo não pode ser alterado</span>
+            <p className="p-2 bg-muted rounded text-muted-foreground">{profileData.crm}</p>
+            <span className="text-xs text-muted-foreground">Este campo não pode ser alterado</span>
           </div>
 
           <div className="space-y-2">
@@ -2334,14 +2340,14 @@ function LaudoEditor() {
                 onChange={(e) => handleProfileChange('especialidade', e.target.value)}
               />
             ) : (
-              <p className="p-2 bg-gray-50 rounded">{profileData.especialidade}</p>
+              <p className="p-2 bg-muted/50 rounded text-foreground">{profileData.especialidade}</p>
             )}
           </div>
         </div>
 
         {/* Endereço e Contato */}
         <div className="space-y-4">
-          <h3 className="text-lg font-semibold border-b pb-2">Endereço e Contato</h3>
+          <h3 className="text-lg font-semibold border-b border-border text-foreground pb-2">Endereço e Contato</h3>
           
           <div className="space-y-2">
             <Label htmlFor="endereco">Endereço</Label>
@@ -2352,7 +2358,7 @@ function LaudoEditor() {
                 onChange={(e) => handleProfileChange('endereco', e.target.value)}
               />
             ) : (
-              <p className="p-2 bg-gray-50 rounded">{profileData.endereco}</p>
+              <p className="p-2 bg-muted/50 rounded text-foreground">{profileData.endereco}</p>
             )}
           </div>
 
@@ -2365,7 +2371,7 @@ function LaudoEditor() {
                 onChange={(e) => handleProfileChange('cidade', e.target.value)}
               />
             ) : (
-              <p className="p-2 bg-gray-50 rounded">{profileData.cidade}</p>
+              <p className="p-2 bg-muted/50 rounded text-foreground">{profileData.cidade}</p>
             )}
           </div>
 
@@ -2378,7 +2384,7 @@ function LaudoEditor() {
                 onChange={(e) => handleProfileChange('cep', e.target.value)}
               />
             ) : (
-              <p className="p-2 bg-gray-50 rounded">{profileData.cep}</p>
+              <p className="p-2 bg-muted/50 rounded text-foreground">{profileData.cep}</p>
             )}
           </div>
 
@@ -2393,15 +2399,15 @@ function LaudoEditor() {
                 placeholder="Descreva sua experiência profissional..."
               />
             ) : (
-              <p className="p-2 bg-gray-50 rounded min-h-[100px]">{profileData.biografia}</p>
+              <p className="p-2 bg-muted/50 rounded min-h-[100px] text-foreground">{profileData.biografia}</p>
             )}
           </div>
         </div>
       </div>
 
       {/* Foto do Perfil */}
-      <div className="border-t pt-6">
-        <h3 className="text-lg font-semibold mb-4">Foto do Perfil</h3>
+      <div className="border-t border-border pt-6">
+        <h3 className="text-lg font-semibold mb-4 text-foreground">Foto do Perfil</h3>
         <div className="flex items-center gap-4">
           <Avatar className="h-20 w-20">
             <AvatarFallback className="text-lg">
@@ -2413,7 +2419,7 @@ function LaudoEditor() {
               <Button variant="outline" size="sm">
                 Alterar Foto
               </Button>
-              <p className="text-xs text-gray-500">
+              <p className="text-xs text-muted-foreground">
                 Formatos aceitos: JPG, PNG (máx. 2MB)
               </p>
             </div>
@@ -2448,7 +2454,7 @@ function LaudoEditor() {
   return (
     <ProtectedRoute requiredUserType={["profissional"]}>
       <div className="container mx-auto px-4 py-8">
-        <header className="bg-white shadow-md rounded-lg p-4 mb-6 flex items-center justify-between">
+        <header className="bg-card shadow-md rounded-lg p-4 mb-6 flex items-center justify-between">
           <div className="flex items-center gap-4">
             <Avatar className="h-12 w-12">
               <AvatarImage src={medico.fotoUrl} alt={medico.nome} />
@@ -2477,7 +2483,7 @@ function LaudoEditor() {
       <div className="grid grid-cols-1 md:grid-cols-[220px_1fr] gap-6">
         {}
         <aside className="md:sticky md:top-8 h-fit">
-          <nav className="bg-white shadow-md rounded-lg p-3 space-y-1">
+          <nav className="bg-card shadow-md rounded-lg p-3 space-y-1">
             <Button 
               variant={activeSection === 'calendario' ? 'default' : 'ghost'} 
               className="w-full justify-start hover:bg-primary hover:text-primary-foreground cursor-pointer"
@@ -2555,7 +2561,7 @@ function LaudoEditor() {
       {showPopup && (
         <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex justify-center items-center z-50">
 
-          <div className="bg-white p-6 rounded-lg w-96 border border-black">
+          <div className="bg-card p-6 rounded-lg w-96 border">
 
             {step === 1 && (
               <>
@@ -2668,7 +2674,7 @@ function LaudoEditor() {
       {}
       {showActionModal && selectedEvent && (
         <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
-          <div className="bg-white p-6 rounded-lg w-96">
+          <div className="bg-card p-6 rounded-lg w-96">
             <h3 className="text-lg font-semibold mb-2">
               Consulta de {selectedEvent.title}
             </h3>
diff --git a/susconecta/components/header.tsx b/susconecta/components/header.tsx
index 139d204..9d87ad5 100644
--- a/susconecta/components/header.tsx
+++ b/susconecta/components/header.tsx
@@ -5,6 +5,7 @@ import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { Menu, X } from "lucide-react";
 import { usePathname } from "next/navigation";
+import { SimpleThemeToggle } from "@/components/simple-theme-toggle";
 
 export function Header() {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -43,6 +44,7 @@ export function Header() {
 
           {}
           <div className="hidden md:flex items-center space-x-3">
+            <SimpleThemeToggle />
             <Button
               variant="outline"
               className="text-primary border-primary hover:bg-primary hover:text-primary-foreground bg-transparent"
@@ -92,6 +94,7 @@ export function Header() {
                 Sobre
               </Link>
               <div className="flex flex-col space-y-2 pt-4">
+                <SimpleThemeToggle />
                 <Button
                   variant="outline"
                   className="text-primary border-primary hover:bg-primary hover:text-primary-foreground bg-transparent"
diff --git a/susconecta/components/simple-theme-toggle.tsx b/susconecta/components/simple-theme-toggle.tsx
new file mode 100644
index 0000000..033d129
--- /dev/null
+++ b/susconecta/components/simple-theme-toggle.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+import { Button } from "@/components/ui/button"
+
+export function SimpleThemeToggle() {
+  const { theme, setTheme } = useTheme()
+  
+  const toggleTheme = () => {
+    setTheme(theme === "dark" ? "light" : "dark")
+  }
+
+  return (
+    <Button variant="outline" size="icon" onClick={toggleTheme}>
+      <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>
+  )
+}
\ No newline at end of file
diff --git a/susconecta/components/theme-toggle.tsx b/susconecta/components/theme-toggle.tsx
new file mode 100644
index 0000000..3a89f0c
--- /dev/null
+++ b/susconecta/components/theme-toggle.tsx
@@ -0,0 +1,37 @@
+"use client"
+
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function ThemeToggle() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <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>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Claro
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Escuro
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
\ No newline at end of file
diff --git a/susconecta/components/ui/input.tsx b/susconecta/components/ui/input.tsx
index 03295ca..2437868 100644
--- a/susconecta/components/ui/input.tsx
+++ b/susconecta/components/ui/input.tsx
@@ -8,9 +8,11 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 flex h-9 w-full min-w-0 rounded-md bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "border-2 border-gray-300 dark:border-gray-600",
+        "focus-visible:border-primary focus-visible:ring-primary/20 focus-visible:ring-2",
+        "hover:border-gray-400 dark:hover:border-gray-500",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aria-invalid:border-2",
         className
       )}
       {...props}
diff --git a/susconecta/components/ui/select.tsx b/susconecta/components/ui/select.tsx
index dcbbc0c..ddfc1ec 100644
--- a/susconecta/components/ui/select.tsx
+++ b/susconecta/components/ui/select.tsx
@@ -37,7 +37,11 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-2 border-gray-300 dark:border-gray-600",
+        "focus-visible:border-primary focus-visible:ring-primary/20 focus-visible:ring-2",
+        "hover:border-gray-400 dark:hover:border-gray-500",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aria-invalid:border-2",
         className
       )}
       {...props}
diff --git a/susconecta/components/ui/textarea.tsx b/susconecta/components/ui/textarea.tsx
index 7f21b5e..d28b3ce 100644
--- a/susconecta/components/ui/textarea.tsx
+++ b/susconecta/components/ui/textarea.tsx
@@ -7,7 +7,11 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "placeholder:text-muted-foreground dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "border-2 border-gray-300 dark:border-gray-600",
+        "focus-visible:border-primary focus-visible:ring-primary/20 focus-visible:ring-2",
+        "hover:border-gray-400 dark:hover:border-gray-500",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aria-invalid:border-2",
         className
       )}
       {...props}

From 8536a8dd2084197cca8aa6720923314c2d1a5acb Mon Sep 17 00:00:00 2001
From: Jonas Francisco <jonastom478@gmail.com>
Date: Fri, 3 Oct 2025 02:42:32 -0300
Subject: [PATCH 03/19] =?UTF-8?q?fix:=20Corrige=20navega=C3=A7=C3=A3o=20do?=
 =?UTF-8?q?=20menu=20lateral=20e=20melhora=20alinhamento=20de=20formul?=
 =?UTF-8?q?=C3=A1rios?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🔧 Correções no Menu Lateral:
- Fix: Resolve problema onde clicar em "Relatórios" também ativava "Dashboard"
- Ajusta lógica de detecção do item ativo na sidebar
- Evita conflito entre rotas /dashboard e /dashboard/relatorios
- Funciona corretamente em ambos os modos (claro e escuro)

🎨 Padronização das Páginas de Agendamento:
- Padroniza sistema completo de agendamento (agenda, procedimento, financeiro)
- Adiciona página /financeiro com informações financeiras e formas de pagamento
- Padroniza componentes HeaderAgenda e FooterAgenda para modo escuro
- Padroniza ListaEspera com cores responsivas e tabela temática
- Padroniza página de calendário principal com dropdown melhorado
- Padroniza página de relatórios com cards e gráficos adaptativos

📐 Melhorias no Alinhamento dos Formulários:
- Fix: Corrige alinhamento dos campos no formulário de agendamento
- Reorganiza layout de "Data de nascimento" e "Telefone" em colunas separadas
- Alinha perfeitamente campos "Início" e "Término" em grid 2 colunas
- Melhora layout geral da seção "Informações do atendimento"
- Ajusta proporções do textarea de observações
- Layout mais limpo e profissional em todas as telas

✨ Benefícios:
- Navegação precisa no menu lateral
- Sistema de agendamento completamente padronizado
- Formulários com campos perfeitamente alinhados
- Experiência visual consistente em modo claro e escuro
- Interface mais profissional e intuitiva
---
 .../app/(main-routes)/calendar/page.tsx       |   2 +-
 .../dashboard/relatorios/page.tsx             |  20 +--
 susconecta/app/agenda/page.tsx                |   2 +-
 susconecta/app/financeiro/page.tsx            | 148 ++++++++++++++++++
 susconecta/app/procedimento/page.tsx          |  20 +--
 susconecta/components/agenda/FooterAgenda.tsx |   6 +-
 susconecta/components/agenda/HeaderAgenda.tsx |  10 +-
 .../components/agendamento/ListaEspera.tsx    |  38 ++---
 susconecta/components/dashboard/sidebar.tsx   |   4 +-
 .../forms/calendar-registration-form.tsx      |  58 ++++---
 10 files changed, 226 insertions(+), 82 deletions(-)
 create mode 100644 susconecta/app/financeiro/page.tsx

diff --git a/susconecta/app/(main-routes)/calendar/page.tsx b/susconecta/app/(main-routes)/calendar/page.tsx
index e6e97ad..b5a7947 100644
--- a/susconecta/app/(main-routes)/calendar/page.tsx
+++ b/susconecta/app/(main-routes)/calendar/page.tsx
@@ -103,7 +103,7 @@ export default function AgendamentoPage() {
                 </Button>
               </Link> */}
               <DropdownMenu>
-                <DropdownMenuTrigger className="bg-blue-600 hover:bg-blue-700 px-5 py-1 text-white rounded-sm">
+                <DropdownMenuTrigger className="bg-primary hover:bg-primary/90 px-5 py-1 text-primary-foreground rounded-sm">
                   Opções &#187;
                 </DropdownMenuTrigger>
                 <DropdownMenuContent>
diff --git a/susconecta/app/(main-routes)/dashboard/relatorios/page.tsx b/susconecta/app/(main-routes)/dashboard/relatorios/page.tsx
index 8147c76..808ca1f 100644
--- a/susconecta/app/(main-routes)/dashboard/relatorios/page.tsx
+++ b/susconecta/app/(main-routes)/dashboard/relatorios/page.tsx
@@ -41,14 +41,14 @@ export default function RelatoriosPage() {
   };
 
   return (
-    <div className="p-6">
-      <h1 className="text-2xl font-bold mb-6">Relatórios</h1>
+    <div className="p-6 bg-background min-h-screen">
+      <h1 className="text-2xl font-bold mb-6 text-foreground">Relatórios</h1>
 
       <div className="grid grid-cols-3 gap-6">
         {/* Card Consultas */}
-        <div className="p-4 border rounded-lg shadow">
-          <h2 className="font-semibold text-lg">Relatório de Consultas</h2>
-          <p className="text-sm text-gray-500">Resumo das consultas realizadas.</p>
+        <div className="p-4 border border-border rounded-lg shadow bg-card">
+          <h2 className="font-semibold text-lg text-foreground">Relatório de Consultas</h2>
+          <p className="text-sm text-muted-foreground">Resumo das consultas realizadas.</p>
           {/* PASSO 4 - Botão chama a função */}
           <Button onClick={exportConsultasPDF} className="mt-4">
             <FileDown className="mr-2 h-4 w-4" /> Exportar PDF
@@ -56,17 +56,17 @@ export default function RelatoriosPage() {
         </div>
 
         {/* Card Pacientes */}
-        <div className="p-4 border rounded-lg shadow">
-          <h2 className="font-semibold text-lg">Relatório de Pacientes</h2>
-          <p className="text-sm text-gray-500">Informações gerais dos pacientes cadastrados.</p>
+        <div className="p-4 border border-border rounded-lg shadow bg-card">
+          <h2 className="font-semibold text-lg text-foreground">Relatório de Pacientes</h2>
+          <p className="text-sm text-muted-foreground">Informações gerais dos pacientes cadastrados.</p>
           <Button onClick={exportPacientesPDF} className="mt-4">
             <FileDown className="mr-2 h-4 w-4" /> Exportar PDF
           </Button>
         </div>
 
         {/* Card Financeiro com gráfico */}
-        <div className="p-4 border rounded-lg shadow col-span-3 md:col-span-3">
-          <h2 className="font-semibold text-lg mb-2">Relatório Financeiro</h2>
+        <div className="p-4 border border-border rounded-lg shadow col-span-3 md:col-span-3 bg-card">
+          <h2 className="font-semibold text-lg mb-2 text-foreground">Relatório Financeiro</h2>
           <ResponsiveContainer width="100%" height={300}>
             <BarChart data={financeiro} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
               <CartesianGrid strokeDasharray="3 3" />
diff --git a/susconecta/app/agenda/page.tsx b/susconecta/app/agenda/page.tsx
index e639578..36cc1cc 100644
--- a/susconecta/app/agenda/page.tsx
+++ b/susconecta/app/agenda/page.tsx
@@ -19,7 +19,7 @@ export default function NovoAgendamentoPage() {
   };
 
   return (
-    <div className="min-h-screen flex flex-col bg-white">
+    <div className="min-h-screen flex flex-col bg-background">
       <HeaderAgenda />
       <main className="flex-1 mx-auto w-full max-w-7xl px-8 py-8">
         <CalendarRegistrationForm 
diff --git a/susconecta/app/financeiro/page.tsx b/susconecta/app/financeiro/page.tsx
new file mode 100644
index 0000000..bb14865
--- /dev/null
+++ b/susconecta/app/financeiro/page.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Search, ChevronDown, Calculator, DollarSign } from "lucide-react";
+import { Plus } from "lucide-react";
+import HeaderAgenda from "@/components/agenda/HeaderAgenda";
+import FooterAgenda from "@/components/agenda/FooterAgenda";
+
+export default function FinanceiroPage() {
+  const pathname = usePathname();
+  const router = useRouter();
+  const [bloqueio, setBloqueio] = useState(false);
+
+  const isAg = pathname?.startsWith("/agendamento");
+  const isPr = pathname?.startsWith("/procedimento");
+  const isFi = pathname?.startsWith("/financeiro");
+
+  return (
+    <div className="w-full min-h-screen flex flex-col bg-background">
+      {/* HEADER */}
+      <HeaderAgenda />
+
+      {/* CORPO */}
+      <main className="mx-auto w-full max-w-7xl px-8 py-6 space-y-6 flex-grow">
+        {/* INFORMAÇÕES FINANCEIRAS */}
+        <section className="space-y-6">
+          {/* Selo Financeiro */}
+          <div className="inline-flex items-center gap-2 border border-border px-3 py-1.5 bg-card text-[12px] rounded-md cursor-pointer hover:bg-muted">
+            <span className="flex h-5 w-5 items-center justify-center rounded-full border border-border bg-muted text-muted-foreground">
+              <DollarSign className="h-3 w-3" strokeWidth={2} />
+            </span>
+            <span className="text-foreground">Informações Financeiras</span>
+          </div>
+
+          {/* Traço separador */}
+          <div className="border-b border-border" />
+
+          {/* VALOR DO ATENDIMENTO */}
+          <div className="space-y-4">
+            <Label className="text-[13px] text-foreground/80">
+              Valor do Atendimento
+            </Label>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label className="text-xs text-muted-foreground">Valor Particular</Label>
+                <div className="relative">
+                  <DollarSign className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    placeholder="R$ 0,00"
+                    className="h-10 w-full rounded-md pl-8 pr-4 border-input focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
+                  />
+                </div>
+              </div>
+              <div className="space-y-2">
+                <Label className="text-xs text-muted-foreground">Valor Convênio</Label>
+                <div className="relative">
+                  <DollarSign className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    placeholder="R$ 0,00"
+                    className="h-10 w-full rounded-md pl-8 pr-4 border-input focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Traço separador */}
+          <div className="border-b border-border" />
+
+          {/* FORMA DE PAGAMENTO */}
+          <div className="space-y-4">
+            <Label className="text-[13px] text-foreground/80">
+              Forma de Pagamento
+            </Label>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="space-y-2">
+                <Label className="text-xs text-muted-foreground">Tipo</Label>
+                <select className="h-10 w-full rounded-md border border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none">
+                  <option value="">Selecionar</option>
+                  <option value="dinheiro">Dinheiro</option>
+                  <option value="cartao">Cartão</option>
+                  <option value="pix">PIX</option>
+                  <option value="convenio">Convênio</option>
+                </select>
+              </div>
+              <div className="space-y-2">
+                <Label className="text-xs text-muted-foreground">Parcelas</Label>
+                <select className="h-10 w-full rounded-md border border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none">
+                  <option value="1">1x</option>
+                  <option value="2">2x</option>
+                  <option value="3">3x</option>
+                  <option value="4">4x</option>
+                  <option value="5">5x</option>
+                  <option value="6">6x</option>
+                </select>
+              </div>
+              <div className="space-y-2">
+                <Label className="text-xs text-muted-foreground">Desconto</Label>
+                <div className="relative">
+                  <Calculator className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    placeholder="0%"
+                    className="h-10 w-full rounded-md pl-8 pr-4 border-input focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Traço separador */}
+          <div className="border-b border-border" />
+
+          {/* RESUMO FINANCEIRO */}
+          <div className="space-y-4">
+            <Label className="text-[13px] text-foreground/80">
+              Resumo Financeiro
+            </Label>
+            <div className="bg-muted/30 rounded-lg p-4 space-y-3">
+              <div className="flex justify-between items-center">
+                <span className="text-sm text-muted-foreground">Subtotal:</span>
+                <span className="text-sm font-medium text-foreground">R$ 0,00</span>
+              </div>
+              <div className="flex justify-between items-center">
+                <span className="text-sm text-muted-foreground">Desconto:</span>
+                <span className="text-sm font-medium text-foreground">- R$ 0,00</span>
+              </div>
+              <div className="border-t border-border pt-2">
+                <div className="flex justify-between items-center">
+                  <span className="text-base font-medium text-foreground">Total:</span>
+                  <span className="text-lg font-bold text-primary">R$ 0,00</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+
+      {/* RODAPÉ FIXO */}
+      <FooterAgenda />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/susconecta/app/procedimento/page.tsx b/susconecta/app/procedimento/page.tsx
index 535a02b..e23320e 100644
--- a/susconecta/app/procedimento/page.tsx
+++ b/susconecta/app/procedimento/page.tsx
@@ -23,12 +23,12 @@ export default function ProcedimentoPage() {
   const tab = (active: boolean, extra = "") =>
     `px-4 py-1.5 text-[13px] border ${
       active
-        ? "border-sky-500 bg-sky-50 text-sky-700 font-medium"
-        : "text-gray-700 hover:bg-gray-100"
+        ? "border-sky-500 bg-sky-50 dark:bg-sky-900/30 text-sky-700 dark:text-sky-300 font-medium"
+        : "text-muted-foreground hover:bg-muted border-border"
     } ${extra}`;
 
   return (
-    <div className="w-full min-h-screen flex flex-col bg-white">
+    <div className="w-full min-h-screen flex flex-col bg-background">
       {/* HEADER */}
       <HeaderAgenda />
 
@@ -37,15 +37,15 @@ export default function ProcedimentoPage() {
         {/* ATENDIMENTOS */}
         <section className="space-y-6">
           {/* Selo Atendimento com + dentro da bolinha */}
-          <div className="inline-flex items-center gap-2 border px-3 py-1.5 bg-white text-[12px] rounded-md cursor-pointer hover:bg-gray-50">
-            <span className="flex h-5 w-5 items-center justify-center rounded-full border border-gray-400 bg-gray-100 text-gray-700">
+          <div className="inline-flex items-center gap-2 border border-border px-3 py-1.5 bg-card text-[12px] rounded-md cursor-pointer hover:bg-muted">
+            <span className="flex h-5 w-5 items-center justify-center rounded-full border border-border bg-muted text-muted-foreground">
               <Plus className="h-3 w-3" strokeWidth={2} />
             </span>
-            Atendimento
+            <span className="text-foreground">Atendimento</span>
           </div>
 
           {/* Traço separador */}
-          <div className="border-b border-gray-200" />
+          <div className="border-b border-border" />
 
           {/* PROCEDIMENTOS */}
           <div className="space-y-1">
@@ -56,14 +56,14 @@ export default function ProcedimentoPage() {
               <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
               <Input
                 placeholder="Buscar"
-                className="h-10 w-full rounded-md pl-8 pr-8 border border-gray-300 focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
+                className="h-10 w-full rounded-md pl-8 pr-8 border-input focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
               />
               <ChevronDown className="pointer-events-none absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
             </div>
           </div>
 
           {/* Traço separador */}
-          <div className="border-b border-gray-200" />
+          <div className="border-b border-border" />
 
           {/* OUTRAS DESPESAS */}
           <div className="space-y-1">
@@ -74,7 +74,7 @@ export default function ProcedimentoPage() {
               <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
               <Input
                 placeholder="Buscar"
-                className="h-10 w-full rounded-md pl-8 pr-8 border border-gray-300 focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
+                className="h-10 w-full rounded-md pl-8 pr-8 border-input focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
               />
               <ChevronDown className="pointer-events-none absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
             </div>
diff --git a/susconecta/components/agenda/FooterAgenda.tsx b/susconecta/components/agenda/FooterAgenda.tsx
index 79b4918..91f73f9 100644
--- a/susconecta/components/agenda/FooterAgenda.tsx
+++ b/susconecta/components/agenda/FooterAgenda.tsx
@@ -11,15 +11,15 @@ export default function FooterAgenda() {
   const [bloqueio, setBloqueio] = useState(false);
   
   return (
-    <div className="sticky bottom-0 left-0 right-0 border-t bg-white">
+    <div className="sticky bottom-0 left-0 right-0 border-t border-border bg-background">
       <div className="mx-auto w-full max-w-7xl px-8 py-3 flex items-center justify-between">
         <div className="flex items-center gap-2">
           <Switch checked={bloqueio} onCheckedChange={setBloqueio} />
-          <Label className="text-sm">Bloqueio de Agenda</Label>
+          <Label className="text-sm text-foreground">Bloqueio de Agenda</Label>
         </div>
         <div className="flex gap-2">
           <Link href={"/calendar"}>
-            <Button variant="ghost" className="hover:bg-blue-100 hover:text-foreground">Cancelar</Button>
+            <Button variant="ghost" className="hover:bg-muted hover:text-foreground">Cancelar</Button>
           </Link>
           <Link href={"/calendar"}>
             <Button>
diff --git a/susconecta/components/agenda/HeaderAgenda.tsx b/susconecta/components/agenda/HeaderAgenda.tsx
index 51594ce..829dfc9 100644
--- a/susconecta/components/agenda/HeaderAgenda.tsx
+++ b/susconecta/components/agenda/HeaderAgenda.tsx
@@ -15,14 +15,14 @@ export default function HeaderAgenda() {
   const tabCls = (active: boolean, extra = "") =>
     `px-4 py-1.5 text-[13px] border ${
       active
-        ? "border-blue-500 bg-blue-50 text-blue-700 font-medium"
-        : "text-gray-700 hover:bg-gray-100"
+        ? "border-blue-500 bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 font-medium"
+        : "text-muted-foreground hover:bg-muted border-border"
     } ${extra}`;
 
   return (
-    <header className="border-b bg-white">
+    <header className="border-b bg-background border-border">
       <div className="mx-auto w-full max-w-7xl px-8 py-3 flex items-center justify-between">
-        <h1 className="text-[18px] font-semibold">Novo Agendamento</h1>
+        <h1 className="text-[18px] font-semibold text-foreground">Novo Agendamento</h1>
 
         <div className="flex items-center gap-2">
           <nav
@@ -60,7 +60,7 @@ export default function HeaderAgenda() {
             type="button"
             aria-label="Histórico"
             onClick={() => router.back()}
-            className="inline-flex h-8 w-8 items-center justify-center rounded-md border bg-white text-gray-700 hover:bg-gray-100"
+            className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-border bg-background text-muted-foreground hover:bg-muted"
           >
             <RotateCcw className="h-4 w-4" />
           </button>
diff --git a/susconecta/components/agendamento/ListaEspera.tsx b/susconecta/components/agendamento/ListaEspera.tsx
index bc9da0c..eaa7863 100644
--- a/susconecta/components/agendamento/ListaEspera.tsx
+++ b/susconecta/components/agendamento/ListaEspera.tsx
@@ -38,21 +38,21 @@ export default function ListaEspera({ patients, onNotify, onAddToWaitlist }: Lis
 
   const getPriorityColor = (priority: string) => {
     switch (priority) {
-      case 'high': return 'bg-red-100 text-red-800';
-      case 'medium': return 'bg-yellow-100 text-yellow-800';
-      case 'low': return 'bg-green-100 text-green-800';
-      default: return 'bg-gray-100 text-gray-800';
+      case 'high': return 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300';
+      case 'medium': return 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300';
+      case 'low': return 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300';
+      default: return 'bg-muted text-muted-foreground';
     }
   };
 
   return (
-    <div className="bg-white rounded-lg shadow">
-      <div className="p-4 border-b border-gray-200">
+    <div className="bg-card border border-border rounded-lg shadow">
+      <div className="p-4 border-b border-border">
         <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
-          <h2 className="text-xl font-semibold text-gray-900 mb-4 sm:mb-0">Lista de Espera Inteligente</h2>
+          <h2 className="text-xl font-semibold text-foreground mb-4 sm:mb-0">Lista de Espera Inteligente</h2>
           <button
             onClick={onAddToWaitlist}
-            className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-primary-foreground bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
           >
             <Plus className="h-4 w-4 mr-2" />
             Adicionar à Lista
@@ -60,7 +60,7 @@ export default function ListaEspera({ patients, onNotify, onAddToWaitlist }: Lis
         </div>
       </div>
 
-      <div className="p-4 border-b border-gray-200">
+      <div className="p-4 border-b border-border">
         <div className="relative">
           <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
             <span className="text-gray-500">🔍</span>
@@ -70,14 +70,14 @@ export default function ListaEspera({ patients, onNotify, onAddToWaitlist }: Lis
             placeholder="Buscar paciente..."
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
-            className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+            className="block w-full pl-10 pr-3 py-2 border border-input rounded-md leading-5 bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary"
           />
         </div>
       </div>
 
       <div className="overflow-x-auto">
-        <table className="min-w-full divide-y divide-gray-200">
-          <thead className="bg-gray-50">
+        <table className="min-w-full divide-y divide-border">
+          <thead className="bg-muted/50">
             <tr>
               <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                 Paciente
@@ -99,16 +99,16 @@ export default function ListaEspera({ patients, onNotify, onAddToWaitlist }: Lis
               </th>
             </tr>
           </thead>
-          <tbody className="bg-white divide-y divide-gray-200">
+          <tbody className="bg-card divide-y divide-border">
             {filteredPatients.map((patient) => (
               <tr key={patient.id}>
-                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">
                   {patient.name}
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
                   {patient.specialty}
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
                   {new Date(patient.preferredDate).toLocaleDateString('pt-BR')}
                 </td>
                 <td className="px-6 py-4 whitespace-nowrap">
@@ -116,13 +116,13 @@ export default function ListaEspera({ patients, onNotify, onAddToWaitlist }: Lis
                     {getPriorityLabel(patient.priority)}
                   </span>
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
                   {patient.contact}
                 </td>
                 <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                   <button
                     onClick={() => onNotify(patient.id)}
-                    className="text-blue-600 hover:text-blue-900 mr-3"
+                    className="text-primary hover:text-primary/80 mr-3"
                     title="Notificar paciente"
                   >
                     <Bell className="h-4 w-4" />
@@ -135,7 +135,7 @@ export default function ListaEspera({ patients, onNotify, onAddToWaitlist }: Lis
       </div>
 
       {filteredPatients.length === 0 && (
-        <div className="text-center py-8 text-gray-500">
+        <div className="text-center py-8 text-muted-foreground">
           Nenhum paciente encontrado na lista de espera
         </div>
       )}
diff --git a/susconecta/components/dashboard/sidebar.tsx b/susconecta/components/dashboard/sidebar.tsx
index e7feeec..e05c499 100644
--- a/susconecta/components/dashboard/sidebar.tsx
+++ b/susconecta/components/dashboard/sidebar.tsx
@@ -74,8 +74,8 @@ export function Sidebar() {
           <SidebarGroupContent>
             <SidebarMenu>
               {navigation.map((item) => {
-  const isActive =
-    pathname === item.href || pathname.startsWith(item.href + "/")
+  const isActive = pathname === item.href || 
+    (pathname.startsWith(item.href + "/") && item.href !== "/dashboard")
 
   return (
     <SidebarMenuItem key={item.name}>
diff --git a/susconecta/components/forms/calendar-registration-form.tsx b/susconecta/components/forms/calendar-registration-form.tsx
index 6974df0..c06185f 100644
--- a/susconecta/components/forms/calendar-registration-form.tsx
+++ b/susconecta/components/forms/calendar-registration-form.tsx
@@ -26,13 +26,13 @@ export function CalendarRegistrationForm({ initialData, onSave, onCancel }: any)
 
   return (
     <form onSubmit={handleSubmit} className="space-y-8">
-      <div className="border rounded-md p-6 space-y-4 bg-white">
-        <h2 className="font-medium">Informações do paciente</h2>
+      <div className="border border-border rounded-md p-6 space-y-4 bg-card">
+        <h2 className="font-medium text-foreground">Informações do paciente</h2>
         <div className="grid grid-cols-1 md:grid-cols-12 gap-4">
             <div className="md:col-span-6">
               <Label>Nome *</Label>
               <div className="relative">
-                <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
+                <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                 <Input
                   name="patientName" 
                   placeholder="Digite o nome do paciente"
@@ -50,23 +50,19 @@ export function CalendarRegistrationForm({ initialData, onSave, onCancel }: any)
               <Label>RG</Label>
               <Input name="rg" placeholder="Número do RG" className="h-10" value={formData.rg || ''} onChange={handleChange} />
             </div>
-            <div className="md:col-span-6">
-              <div className="grid grid-cols-12 gap-3">
-                <div className="col-span-5">
-                  <Label>Data de nascimento *</Label>
-                  <Input name="birthDate" type="date" className="h-10" value={formData.birthDate || ''} onChange={handleChange} />
-                </div>
-                <div className="col-span-7">
-                  <Label>Telefone</Label>
-                  <div className="grid grid-cols-[86px_1fr] gap-2">
-                    <select name="phoneCode" className="h-10 rounded-md border border-input bg-background px-2 text-[13px]" value={formData.phoneCode || '+55'} onChange={handleChange}>
-                      <option value="+55">+55</option>
-                      <option value="+351">+351</option>
-                      <option value="+1">+1</option>
-                    </select>
-                    <Input name="phoneNumber" placeholder="(99) 99999-9999" className="h-10" value={formData.phoneNumber || ''} onChange={handleChange} />
-                  </div>
-                </div>
+            <div className="md:col-span-3">
+              <Label>Data de nascimento *</Label>
+              <Input name="birthDate" type="date" className="h-10" value={formData.birthDate || ''} onChange={handleChange} />
+            </div>
+            <div className="md:col-span-3">
+              <Label>Telefone</Label>
+              <div className="flex gap-2">
+                <select name="phoneCode" className="h-10 w-20 rounded-md border border-input bg-background text-foreground px-2 text-[13px]" value={formData.phoneCode || '+55'} onChange={handleChange}>
+                  <option value="+55">+55</option>
+                  <option value="+351">+351</option>
+                  <option value="+1">+1</option>
+                </select>
+                <Input name="phoneNumber" placeholder="(99) 99999-9999" className="h-10 flex-1" value={formData.phoneNumber || ''} onChange={handleChange} />
               </div>
             </div>
             <div className="md:col-span-6">
@@ -77,10 +73,10 @@ export function CalendarRegistrationForm({ initialData, onSave, onCancel }: any)
       </div>
 
       {}
-      <div className="border rounded-md p-6 space-y-4 bg-white">
-        <h2 className="font-medium">Informações do atendimento</h2>
-        <div className="grid grid-cols-1 md:grid-cols-12 gap-6">
-            <div className="md:col-span-6 space-y-3">
+      <div className="border border-border rounded-md p-6 space-y-4 bg-card">
+        <h2 className="font-medium text-foreground">Informações do atendimento</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="space-y-4">
                 <div>
                     <Label className="text-[13px]">Nome do profissional *</Label>
                     <div className="relative">
@@ -91,7 +87,7 @@ export function CalendarRegistrationForm({ initialData, onSave, onCancel }: any)
                 <div className="grid grid-cols-2 gap-3">
                     <div>
                         <Label className="text-[13px]">Unidade *</Label>
-                        <select name="unit" className="h-10 w-full rounded-md border border-input bg-background pr-8 pl-3 text-[13px] appearance-none" value={formData.unit || 'nei'} onChange={handleChange}>
+                        <select name="unit" className="h-10 w-full rounded-md border border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none" value={formData.unit || 'nei'} onChange={handleChange}>
                             <option value="nei">Núcleo de Especialidades Integradas</option>
                             <option value="cc">Clínica Central</option>
                         </select>
@@ -104,19 +100,19 @@ export function CalendarRegistrationForm({ initialData, onSave, onCancel }: any)
                         </div>
                     </div>
                 </div>
-                <div className="grid grid-cols-12 gap-3 items-end">
-                    <div className="col-span-12 md:col-span-3">
+                <div className="grid grid-cols-2 gap-3">
+                    <div>
                         <Label className="text-[13px]">Início *</Label>
                         <Input name="startTime" type="time" className="h-10 w-full rounded-md border border-input px-3 text-[13px]" value={formData.startTime || ''} onChange={handleChange} />
                     </div>
-                    <div className="col-span-12 md:col-span-3">
+                    <div>
                         <Label className="text-[13px]">Término *</Label>
                         <Input name="endTime" type="time" className="h-10 w-full rounded-md border border-input px-3 text-[13px]" value={formData.endTime || ''} onChange={handleChange} />
                     </div>
                 </div>
             </div>
-            <div className="md:col-span-6">
-                <div className="mb-2">
+            <div className="space-y-4">
+                <div>
                     <Label className="text-[13px]">Tipo de atendimento *</Label>
                     <div className="relative mt-1">
                         <Search className="pointer-events-none absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
@@ -125,7 +121,7 @@ export function CalendarRegistrationForm({ initialData, onSave, onCancel }: any)
                 </div>
                 <div>
                     <Label className="text-[13px]">Observações</Label>
-                    <Textarea name="notes" rows={4} className="text-[13px] h-[110px] min-h-0 resize-none" value={formData.notes || ''} onChange={handleChange} />
+                    <Textarea name="notes" rows={6} className="text-[13px] min-h-[120px] resize-none" value={formData.notes || ''} onChange={handleChange} />
                 </div>
             </div>
         </div>

From f0a90afe55a6c9839381ccbf098a397d4fa6e2df Mon Sep 17 00:00:00 2001
From: Jonas Francisco <jonastom478@gmail.com>
Date: Fri, 3 Oct 2025 03:10:49 -0300
Subject: [PATCH 04/19] refactor: Ajustes manuais em componentes do header e
 sidebar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Atualiza componentes de header com melhorias visuais
- Refina sidebar com ajustes de navegação
- Aprimora footer com correções de estilo
- Mantém funcionalidades existentes intactas

Alterações realizadas manualmente para otimização da interface.
---
 susconecta/components/dashboard/sidebar.tsx | 2 +-
 susconecta/components/footer.tsx            | 2 +-
 susconecta/components/header.tsx            | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/susconecta/components/dashboard/sidebar.tsx b/susconecta/components/dashboard/sidebar.tsx
index e05c499..083f21c 100644
--- a/susconecta/components/dashboard/sidebar.tsx
+++ b/susconecta/components/dashboard/sidebar.tsx
@@ -61,7 +61,7 @@ export function Sidebar() {
 
           {/* este span some no modo ícone */}
           <span className="text-lg font-semibold text-sidebar-foreground group-data-[collapsible=icon]:hidden">
-            MediConnect
+            MEDIConnect
           </span>
         </Link>
       </SidebarHeader>
diff --git a/susconecta/components/footer.tsx b/susconecta/components/footer.tsx
index 5bf78f7..143206b 100644
--- a/susconecta/components/footer.tsx
+++ b/susconecta/components/footer.tsx
@@ -13,7 +13,7 @@ export function Footer() {
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <div className="flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0">
           {}
-          <div className="text-muted-foreground text-sm">© 2025 Medi Conecta</div>
+          <div className="text-muted-foreground text-sm">© 2025 MEDI Connect</div>
 
           {}
           <nav className="flex items-center space-x-8">
diff --git a/susconecta/components/header.tsx b/susconecta/components/header.tsx
index 9d87ad5..71ee7b0 100644
--- a/susconecta/components/header.tsx
+++ b/susconecta/components/header.tsx
@@ -18,7 +18,7 @@ export function Header() {
           {/* Logo */}
           <Link href="/" className="flex items-center space-x-2">
             <span className="text-xl font-bold text-foreground">
-              <span className="text-primary">MEDI</span>Conecta
+              <span className="text-primary">MEDI</span>Connect
             </span>
           </Link>
 

From f4abd44efe9c87a4875b3e434092c61e03f36d18 Mon Sep 17 00:00:00 2001
From: Jonas Francisco <jonastom478@gmail.com>
Date: Fri, 3 Oct 2025 03:35:25 -0300
Subject: [PATCH 05/19] =?UTF-8?q?feat:=20implementa=20melhorias=20no=20sis?=
 =?UTF-8?q?tema=20de=20tema=20claro=20padr=C3=A3o?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Adiciona hook customizado para forçar tema claro como padrão
- Melhora CSS para prevenir flash de tema escuro
- Otimiza transições entre temas
---
 susconecta/app/globals.css                  |  2 +-
 susconecta/hooks/use-force-default-theme.ts | 15 +++++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 susconecta/hooks/use-force-default-theme.ts

diff --git a/susconecta/app/globals.css b/susconecta/app/globals.css
index 5234f59..df339bd 100644
--- a/susconecta/app/globals.css
+++ b/susconecta/app/globals.css
@@ -1,7 +1,7 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 
-@custom-variant dark (&:is(.dark *));
+/* Removed unsupported @custom-variant dark (&:is(.dark *)); */
 
 :root {
   --background: #ffffff;
diff --git a/susconecta/hooks/use-force-default-theme.ts b/susconecta/hooks/use-force-default-theme.ts
new file mode 100644
index 0000000..460c55a
--- /dev/null
+++ b/susconecta/hooks/use-force-default-theme.ts
@@ -0,0 +1,15 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useTheme } from 'next-themes'
+
+export function useForceDefaultTheme() {
+  const { setTheme } = useTheme()
+
+  useEffect(() => {
+    // Força tema claro sempre que o componente montar
+    document.documentElement.classList.remove('dark')
+    localStorage.setItem('theme', 'light')
+    setTheme('light')
+  }, [setTheme])
+}
\ No newline at end of file

From dcc4a8ff8637d8073664060ae8d58de5acb4c403 Mon Sep 17 00:00:00 2001
From: Jonas Francisco <jonastom478@gmail.com>
Date: Fri, 3 Oct 2025 03:52:18 -0300
Subject: [PATCH 06/19] =?UTF-8?q?feat:=20atualiza=20p=C3=A1gina=20de=20log?=
 =?UTF-8?q?in=20do=20paciente?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Melhora layout e funcionalidades da página de login do paciente
- Ajustes na interface e experiência do usuário
---
 susconecta/app/login-paciente/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/susconecta/app/login-paciente/page.tsx b/susconecta/app/login-paciente/page.tsx
index 1e1597a..072d982 100644
--- a/susconecta/app/login-paciente/page.tsx
+++ b/susconecta/app/login-paciente/page.tsx
@@ -47,7 +47,7 @@ export default function LoginPacientePage() {
       <div className="max-w-md w-full space-y-8">
         <div className="text-center">
           <h2 className="mt-6 text-3xl font-extrabold text-foreground">
-            Portal do Paciente
+            Sou Paciente
           </h2>
           <p className="mt-2 text-sm text-muted-foreground">
             Acesse sua área pessoal e gerencie suas consultas

From 63a8fea9ee9d54a816a67c47ab7106f5f979e6f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Gustavo?=
 <166467972+JoaoGustavo-dev@users.noreply.github.com>
Date: Fri, 3 Oct 2025 05:50:03 -0300
Subject: [PATCH 07/19] add-black-laudo

---
 susconecta/app/profissional/page.tsx | 1309 +++++++++++++++++++++-----
 susconecta/next-env.d.ts             |    3 +-
 susconecta/package-lock.json         |  464 ++++-----
 3 files changed, 1218 insertions(+), 558 deletions(-)

diff --git a/susconecta/app/profissional/page.tsx b/susconecta/app/profissional/page.tsx
index 789b9a5..5f1ffce 100644
--- a/susconecta/app/profissional/page.tsx
+++ b/susconecta/app/profissional/page.tsx
@@ -2,8 +2,6 @@
 
 import React, { useState, useRef } from "react";
 import SignatureCanvas from "react-signature-canvas";
-import ReactQuill from "react-quill";
-import "react-quill/dist/quill.snow.css";
 import Link from "next/link";
 import ProtectedRoute from "@/components/ProtectedRoute";
 import { useAuth } from "@/hooks/useAuth";
@@ -28,7 +26,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
-import { User, FolderOpen, X, Users, MessageSquare, ClipboardList, Plus, Edit, Trash2, ChevronLeft, ChevronRight, Clock, FileCheck, Upload, Download, Eye, History, Stethoscope, Pill, Activity } from "lucide-react"
+import { User, FolderOpen, X, Users, MessageSquare, ClipboardList, Plus, Edit, Trash2, ChevronLeft, ChevronRight, Clock, FileCheck, Upload, Download, Eye, History, Stethoscope, Pill, Activity, Search } from "lucide-react"
 import { Calendar as CalendarIcon, FileText, Settings } from "lucide-react";
 import {
   Tooltip,
@@ -1652,257 +1650,1064 @@ const ProfissionalPage = () => {
 
   
   const renderLaudosSection = () => (
-    <section>
-      <LaudoEditor />
-    </section>
-  );
-// --- LaudoEditor COMPONENT ---
-function LaudoEditor() {
-  
-  const pacientes = [
-    { nome: "Ana Souza", cpf: "123.456.789-00", idade: 32, sexo: "Feminino" },
-    { nome: "Bruno Lima", cpf: "987.654.321-00", idade: 45, sexo: "Masculino" },
-    { nome: "Carla Menezes", cpf: "111.222.333-44", idade: 28, sexo: "Feminino" },
-  ];
-
-  const [conteudo, setConteudo] = useState("");
-  const [pacienteSelecionado, setPacienteSelecionado] = useState<any>(null);
-  const [cid, setCid] = useState("");
-  const [imagem, setImagem] = useState<string | null>(null);
-  const [assinatura, setAssinatura] = useState<string | null>(null);
-  const sigCanvasRef = useRef<any>(null);
-  const [laudos, setLaudos] = useState<any[]>([]);
-  const [preview, setPreview] = useState(false);
-
-  
-  const handleSelectPaciente = (paciente: any) => {
-    setPacienteSelecionado(paciente);
-  };
-
-  const limparPaciente = () => setPacienteSelecionado(null);
-
-  const salvarLaudo = (status: string) => {
-    if (!pacienteSelecionado) {
-      alert('Selecione um paciente.');
-      return;
-    }
-    const novoLaudo = {
-      paciente: pacienteSelecionado.nome,
-      cpf: pacienteSelecionado.cpf,
-      idade: pacienteSelecionado.idade,
-      sexo: pacienteSelecionado.sexo,
-      cid,
-      conteudo,
-      imagem,
-      assinatura,
-      data: new Date().toLocaleString(),
-      status
-    };
-    setLaudos(prev => [novoLaudo, ...prev]);
-    setPacienteSelecionado(null); setCid(""); setConteudo(""); setImagem(null); setAssinatura(null);
-    if (sigCanvasRef.current) sigCanvasRef.current.clear();
-  };
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-primary/5 to-white p-2 md:p-4">
-      <div className="max-w-2xl mx-auto">
-        <div className="bg-card border border-primary/10 shadow-lg rounded-xl p-4 md:p-6 mb-6">
-          <h2 className="text-2xl font-bold text-primary mb-4 text-center tracking-tight">Laudo Médico</h2>
-          
-          {!pacienteSelecionado ? (
-            <div className="flex flex-col items-center justify-center py-8 px-1 bg-card rounded-xl shadow-sm">
-              <div className="mb-2">
-                <svg width="40" height="40" fill="none" viewBox="0 0 24 24" className="mx-auto text-gray-400">
-                  <circle cx="12" cy="8" r="4" stroke="currentColor" strokeWidth="2"/>
-                  <path d="M4 20c0-2.5 3.5-4.5 8-4.5s8 2 8 4.5" stroke="currentColor" strokeWidth="2"/>
-                </svg>
-              </div>
-              <h2 className="text-lg font-bold text-center text-gray-800 mb-1">Selecionar Paciente</h2>
-              <p className="text-gray-500 text-center mb-4 max-w-xs text-sm">Escolha um paciente para visualizar o prontuário completo</p>
-              <div className="w-full max-w-xs">
-                <label htmlFor="select-paciente" className="block text-sm font-medium text-foreground mb-1">Escolha o paciente:</label>
-                <div className="relative">
-                  <select
-                    id="select-paciente"
-                    className="w-full p-2 border border-border rounded-lg focus:ring-2 focus:ring-ring focus:border-ring focus:outline-none bg-background text-sm text-foreground shadow-sm transition-all appearance-none"
-                    onChange={e => {
-                      const p = pacientes.find(p => p.cpf === e.target.value);
-                      if (p) handleSelectPaciente(p);
-                    }}
-                    defaultValue=""
-                  >
-                    <option value="" className="text-gray-400">Selecione um paciente...</option>
-                    {pacientes.map(p => (
-                      <option key={p.cpf} value={p.cpf}>{p.nome} - {p.cpf}</option>
-                    ))}
-                  </select>
-                  <span className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">
-                    <svg width="16" height="16" fill="none" viewBox="0 0 24 24"><path d="M12 14l-4-4h8l-4 4z" fill="currentColor"/></svg>
-                  </span>
-                </div>
-              </div>
-            </div>
-          ) : (
-            <div className="bg-primary/10 border border-primary/20 rounded-lg p-3 mb-4 flex flex-col md:flex-row md:items-center md:justify-between gap-2">
-              <div>
-                <div className="font-bold text-primary text-base mb-0.5">{pacienteSelecionado.nome}</div>
-                <div className="text-xs text-muted-foreground">CPF: {pacienteSelecionado.cpf}</div>
-                <div className="text-xs text-muted-foreground">Idade: {pacienteSelecionado.idade}</div>
-                <div className="text-xs text-muted-foreground">Sexo: {pacienteSelecionado.sexo}</div>
-              </div>
-              <button type="button" onClick={limparPaciente} className="px-3 py-1 rounded bg-red-100 text-red-700 hover:bg-red-200 font-semibold shadow text-xs">Trocar paciente</button>
-            </div>
-          )}
-          
-          <form className="space-y-4">
-            <div className="space-y-1">
-              <label className="block text-sm font-semibold text-primary">CID</label>
-              <input
-                type="text"
-                value={cid}
-                onChange={e => setCid(e.target.value)}
-                placeholder="Ex: I10, E11, etc."
-                className="w-full p-2 border border-primary/20 rounded-md focus:ring-2 focus:ring-primary/30 focus:outline-none text-sm"
-              />
-            </div>
-            <div className="space-y-1">
-              <label className="block text-sm font-semibold text-primary">Conteúdo do Laudo *</label>
-              {!preview ? (
-                <ReactQuill
-                  value={conteudo}
-                  onChange={setConteudo}
-                  modules={{
-                    toolbar: [
-                      ['bold', 'italic', 'underline'],
-                      [{ 'list': 'ordered' }, { 'list': 'bullet' }],
-                      [{ 'align': [] }],
-                      [{ 'size': ['small', false, 'large', 'huge'] }],
-                      ['clean']
-                    ]
-                  }}
-                  className="h-40 border border-primary/20 rounded-md text-sm"
-                />
-              ) : (
-                <div className="border border-primary/20 p-2 rounded-md bg-muted overflow-auto">
-                  <h3 className="text-base font-semibold mb-1 text-primary">Pré-visualização:</h3>
-                  <div dangerouslySetInnerHTML={{ __html: conteudo }} />
-                </div>
-              )}
-            </div>
-            <div className="space-y-1">
-              <label className="block text-sm font-semibold text-primary mb-2">Imagem (opcional)</label>
-              <div className="mb-2"></div>
-              <input
-                type="file"
-                accept="image/*"
-                onChange={e => {
-                  const file = e.target.files?.[0];
-                  if (file) {
-                    const reader = new FileReader();
-                    reader.onloadend = () => setImagem(reader.result as string);
-                    reader.readAsDataURL(file);
-                  } else {
-                    setImagem(null);
-                  }
-                }}
-                className="block w-full text-xs text-muted-foreground file:mr-2 file:py-1 file:px-2 file:rounded-md file:border-0 file:text-xs file:font-semibold file:bg-primary/10 file:text-primary hover:file:bg-primary/20"
-              />
-              {imagem && (
-                <img src={imagem} alt="Pré-visualização" className="mt-1 rounded-md max-h-20 border border-primary/20" />
-              )}
-            </div>
-            <div className="space-y-1">
-              <label className="block text-sm font-semibold text-primary">Assinatura Digital</label>
-              <div className="bg-muted rounded-md border border-primary/20 p-2 flex flex-col items-center">
-                <SignatureCanvas
-                  ref={sigCanvasRef}
-                  penColor="#0f172a"
-                  backgroundColor="#fff"
-                  canvasProps={{ width: 220, height: 60, className: "rounded-md border bg-card shadow" }}
-                  onEnd={() => setAssinatura(sigCanvasRef.current?.isEmpty() ? null : sigCanvasRef.current?.toDataURL())}
-                />
-                <div className="flex gap-2 mt-2">
-                  <button type="button" onClick={() => { sigCanvasRef.current?.clear(); setAssinatura(null); }} className="px-2 py-1 text-xs rounded-md bg-muted-foreground text-white hover:bg-muted font-semibold shadow">Limpar</button>
-                </div>
-                {assinatura && (
-                  <img src={assinatura} alt="Assinatura" className="mt-2 max-h-10 border rounded-md bg-card shadow" />
-                )}
-              </div>
-            </div>
-            <div className="flex flex-col md:flex-row gap-2 mt-4">
-              <button
-                type="button"
-                onClick={() => salvarLaudo("Rascunho")}
-                className="w-full md:w-1/3 flex items-center justify-center gap-1 bg-muted text-muted-foreground py-2 rounded-lg font-semibold text-base shadow-sm hover:bg-muted/80 transition-all border"
-              >
-                <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" strokeLinecap="round" strokeLinejoin="round"/></svg>
-                Salvar Rascunho
-              </button>
-              <button
-                type="button"
-                onClick={() => salvarLaudo("Entregue")}
-                className="w-full md:w-1/3 flex items-center justify-center gap-1 bg-primary text-white py-2 rounded-lg font-semibold text-base shadow-sm hover:bg-primary/90 transition-all border border-primary/20"
-              >
-                <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path d="M9 12l2 2l4-4" strokeLinecap="round" strokeLinejoin="round"/></svg>
-                Liberar Laudo
-              </button>
-              <button
-                type="button"
-                onClick={() => setPreview(!preview)}
-                className="w-full md:w-1/3 flex items-center justify-center gap-1 bg-card text-primary py-2 rounded-lg font-semibold text-base shadow-sm hover:bg-primary/10 transition-all border border-primary/20"
-              >
-                <svg className="w-4 h-4 text-primary" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path d="M15 10l4.553 2.276A2 2 0 0121 14.09V17a2 2 0 01-2 2H5a2 2 0 01-2-2v-2.91a2 2 0 01.447-1.814L8 10m7-4v4m0 0l-4 4m4-4l4 4" strokeLinecap="round" strokeLinejoin="round"/></svg>
-                Pré-visualizar Laudo
-              </button>
-            </div>
-          </form>
-        </div>
-        
-        <div className="bg-card border border-primary/10 shadow-lg rounded-xl p-4 md:p-6">
-          <h3 className="text-xl font-bold text-primary mb-3 text-center">Histórico de Laudos</h3>
-          {laudos.length === 0 ? (
-            <p className="text-muted-foreground text-center text-sm">Nenhum laudo registrado.</p>
-          ) : (
-            laudos.map((laudo: any, idx: number) => (
-              <div key={idx} className="border border-primary/20 rounded-2xl p-4 mb-6 bg-primary/5 shadow-sm">
-                <div className="flex flex-col md:flex-row md:justify-between md:items-center mb-3 gap-2">
-                  <div className="flex items-center gap-2">
-                    <svg className="w-7 h-7 text-primary" fill="none" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" stroke="currentColor" strokeWidth="2"/><path d="M4 20c0-2.5 3.5-4.5 8-4.5s8 2 8 4.5" stroke="currentColor" strokeWidth="2"/></svg>
-                    <span className="font-bold text-lg md:text-xl text-primary drop-shadow-sm">{laudo.paciente}</span>
-                  </div>
-                  <span className="text-base text-gray-500 font-medium">CPF: {laudo.cpf}</span>
-                </div>
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-2 mb-2 text-sm text-gray-700">
-                  <div>Idade: <span className="font-medium">{laudo.idade}</span></div>
-                  <div>Sexo: <span className="font-medium">{laudo.sexo}</span></div>
-                  <div>Status: <span className="font-medium">{laudo.status}</span></div>
-                  <div>CID: <span className="font-medium">{laudo.cid}</span></div>
-                  <div>Data: <span className="font-medium">{laudo.data}</span></div>
-                </div>
-                {laudo.assinatura && (
-                  <div className="mb-2">
-                    <p className="font-semibold text-primary text-sm mb-1">Assinatura Digital:</p>
-                    <img src={laudo.assinatura} alt="Assinatura digital" className="rounded-lg max-h-16 border bg-card shadow" />
-                  </div>
-                )}
-                {laudo.imagem && (
-                  <div className="mb-2">
-                    <p className="font-semibold text-primary text-sm mb-1">Imagem:</p>
-                    <img src={laudo.imagem} alt="Imagem do laudo" className="rounded-lg max-h-20 border border-primary/20 mb-1" />
-                  </div>
-                )}
-                <div className="mb-1">
-                  <p className="font-semibold text-primary text-sm mb-1">Conteúdo:</p>
-                  <div className="text-sm text-gray-800" dangerouslySetInnerHTML={{ __html: laudo.conteudo }} />
-                </div>
-              </div>
-            ))
-          )}
-        </div>
-      </div>
+    <div className="space-y-6">
+      <LaudoManager />
     </div>
   );
-}
+
+  // --- NOVO SISTEMA DE LAUDOS COMPLETO ---
+  function LaudoManager() {
+    const [pacientesDisponiveis] = useState([
+      { id: "95170038", nome: "Ana Souza", cpf: "123.456.789-00", idade: 42, sexo: "Feminino" },
+      { id: "93203056", nome: "Bruno Lima", cpf: "987.654.321-00", idade: 33, sexo: "Masculino" },
+      { id: "92953542", nome: "Carla Menezes", cpf: "111.222.333-44", idade: 67, sexo: "Feminino" },
+    ]);
+
+    const [laudos] = useState([
+      { 
+        id: "306494942", 
+        data: "29/07/2025", 
+        prazo: "29/07/2025", 
+        paciente: { id: "95170038", nome: "Ana Souza", cpf: "123.456.789-00", idade: 42, sexo: "Feminino" },
+        executante: "Carlos Andrade",
+        exame: "Ecocardiograma",
+        status: "Entregue",
+        urgente: true,
+        especialidade: "Cardiologia",
+        conteudo: `**ECOCARDIOGRAMA TRANSTORÁCICO**
+
+**Dados do Paciente:**
+Nome: Ana Souza
+Idade: 42 anos
+Sexo: Feminino
+
+**Indicação Clínica:**
+Investigação de sopro cardíaco
+
+**Técnica:**
+Ecocardiograma transtorácico bidimensional com Doppler colorido e espectral.
+
+**Resultados:**
+- Átrio esquerdo: dimensões normais
+- Ventrículo esquerdo: função sistólica preservada, FEVE = 65%
+- Valvas cardíacas: sem alterações significativas
+- Pericárdio: sem derrame
+
+**Conclusão:**
+Exame ecocardiográfico dentro dos limites da normalidade.
+
+**CID:** I25.9`,
+        cid: "I25.9",
+        diagnostico: "Exame ecocardiográfico normal",
+        conclusao: "Função cardíaca preservada, sem alterações estruturais significativas."
+      },
+      { 
+        id: "306463987", 
+        data: "29/07/2025", 
+        prazo: "29/07/2025", 
+        paciente: { id: "93203056", nome: "Bruno Lima", cpf: "987.654.321-00", idade: 33, sexo: "Masculino" },
+        executante: "Carlos Andrade",
+        exame: "Eletrocardiograma",
+        status: "Entregue",
+        urgente: true,
+        especialidade: "Cardiologia",
+        conteudo: `**ELETROCARDIOGRAMA DE REPOUSO**
+
+**Dados do Paciente:**
+Nome: Bruno Lima
+Idade: 33 anos
+Sexo: Masculino
+
+**Indicação Clínica:**
+Dor precordial atípica
+
+**Técnica:**
+Eletrocardiograma de 12 derivações em repouso.
+
+**Resultados:**
+- Ritmo: sinusal regular
+- Frequência cardíaca: 72 bpm
+- Eixo elétrico: normal
+- Intervalos PR, QRS e QT: dentro dos limites normais
+- Ondas Q patológicas: ausentes
+- Alterações de ST-T: não observadas
+
+**Conclusão:**
+Eletrocardiograma normal.
+
+**CID:** Z01.8`,
+        cid: "Z01.8",
+        diagnostico: "ECG normal",
+        conclusao: "Traçado eletrocardiográfico dentro dos parâmetros de normalidade."
+      },
+      { 
+        id: "306452545", 
+        data: "29/07/2025", 
+        prazo: "29/07/2025", 
+        paciente: { id: "92953542", nome: "Carla Menezes", cpf: "111.222.333-44", idade: 67, sexo: "Feminino" },
+        executante: "Carlos Andrade",
+        exame: "Dermatoscopia",
+        status: "Entregue",
+        urgente: true,
+        especialidade: "Dermatologia",
+        conteudo: `**DERMATOSCOPIA DIGITAL**
+
+**Dados do Paciente:**
+Nome: Carla Menezes
+Idade: 67 anos
+Sexo: Feminino
+
+**Indicação Clínica:**
+Avaliação de lesão pigmentada em dorso
+
+**Técnica:**
+Dermatoscopia digital com magnificação de 10x e 20x.
+
+**Localização:**
+Região dorsal, região escapular direita
+
+**Achados Dermatoscópicos:**
+- Lesão melanocítica benigna
+- Padrão reticular típico
+- Bordas regulares e simétricas
+- Pigmentação homogênea
+- Ausência de estruturas atípicas
+
+**Conclusão:**
+Nevo melanocítico benigno. Seguimento clínico recomendado.
+
+**CID:** D22.5`,
+        cid: "D22.5",
+        diagnostico: "Nevo melanocítico benigno",
+        conclusao: "Lesão benigna, recomenda-se acompanhamento dermatológico de rotina."
+      },
+    ]);
+
+    const [activeTab, setActiveTab] = useState("entregue");
+    const [laudoSelecionado, setLaudoSelecionado] = useState<any>(null);
+    const [isViewing, setIsViewing] = useState(false);
+    const [isCreatingNew, setIsCreatingNew] = useState(false);
+
+    return (
+      <div className="space-y-6">
+        {/* Header */}
+        <div className="bg-card rounded-lg p-6 shadow-md">
+          <div className="flex items-center justify-between">
+            <div>
+              <h1 className="text-2xl font-bold text-foreground mb-2">Gerenciamento de Laudo</h1>
+              <p className="text-muted-foreground">Nesta seção você pode gerenciar todos os laudos gerados através da integração.</p>
+            </div>
+            <Button 
+              onClick={() => setIsCreatingNew(true)}
+              className="flex items-center gap-2"
+            >
+              <Plus className="w-4 h-4" />
+              Novo Laudo
+            </Button>
+          </div>
+        </div>
+
+        {/* Tabs */}
+        <div className="bg-card rounded-lg shadow-md">
+          <div className="flex border-b border-border">
+            <button
+              onClick={() => setActiveTab("descobrir")}
+              className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
+                activeTab === "descobrir"
+                  ? "border-blue-500 text-blue-600"
+                  : "border-transparent text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              A descobrir
+            </button>
+            <button
+              onClick={() => setActiveTab("liberado")}
+              className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
+                activeTab === "liberado"
+                  ? "border-blue-500 text-blue-600"
+                  : "border-transparent text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              Liberado
+            </button>
+            <button
+              onClick={() => setActiveTab("entregue")}
+              className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
+                activeTab === "entregue"
+                  ? "border-blue-500 text-blue-600"
+                  : "border-transparent text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              Entregue
+            </button>
+          </div>
+
+          {/* Filtros */}
+          <div className="p-4 border-b border-border">
+            <div className="flex flex-wrap items-center gap-4">
+              <div className="relative flex-1 min-w-[200px]">
+                <Input 
+                  placeholder="Buscar paciente/pedido"
+                  className="pl-10"
+                />
+                <svg className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                </svg>
+              </div>
+              
+              <div className="flex items-center gap-2">
+                <div className="flex items-center gap-1 text-sm">
+                  <CalendarIcon className="w-4 h-4" />
+                  <span>01/07/2025</span>
+                  <span>-</span>
+                  <span>31/07/2025</span>
+                </div>
+              </div>
+
+              <div className="flex gap-2">
+                <Button variant="outline" size="sm">Hoje</Button>
+                <Button variant="outline" size="sm">Semana</Button>
+                <Button variant="default" size="sm">Mês</Button>
+              </div>
+
+              <Button variant="outline" size="sm">
+                <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.207A1 1 0 013 6.5V4z" />
+                </svg>
+                Filtros
+              </Button>
+
+              <Button variant="outline" size="sm">
+                <Search className="w-4 h-4 mr-1" />
+                Pesquisar
+              </Button>
+
+              <Button variant="default" size="sm">
+                <Download className="w-4 h-4 mr-1" />
+                Exportar
+              </Button>
+            </div>
+          </div>
+
+          {/* Tabela */}
+          <div className="overflow-x-auto">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Pedido</TableHead>
+                  <TableHead>Data</TableHead>
+                  <TableHead>Prazo</TableHead>
+                  <TableHead>Paciente</TableHead>
+                  <TableHead>Executante/Solicitante</TableHead>
+                  <TableHead>Exame/Classificação</TableHead>
+                  <TableHead>Ação</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {laudos.map((laudo) => (
+                  <TableRow key={laudo.id}>
+                    <TableCell>
+                      <div className="flex items-center gap-2">
+                        {laudo.urgente && (
+                          <div className="w-2 h-2 rounded-full bg-red-500"></div>
+                        )}
+                        <span className="font-mono text-sm">{laudo.id}</span>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <div className="text-sm">
+                        <div>{laudo.data}</div>
+                        <div className="text-xs text-muted-foreground">11:48</div>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <div className="text-sm">
+                        <div>{laudo.prazo}</div>
+                        <div className="text-xs text-muted-foreground">11:48</div>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <div className="text-sm">
+                        <div className="flex items-center gap-1">
+                          <User className="w-3 h-3" />
+                          <span className="font-mono text-xs">{laudo.paciente.id}</span>
+                        </div>
+                        <div className="font-medium">{laudo.paciente.nome}</div>
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-sm">{laudo.executante}</TableCell>
+                    <TableCell className="text-sm">{laudo.exame || "-"}</TableCell>
+                    <TableCell>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => {
+                          setLaudoSelecionado(laudo);
+                          setIsViewing(true);
+                        }}
+                        className="flex items-center gap-1"
+                      >
+                        <Eye className="w-4 h-4" />
+                        Ver Laudo
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
+
+        {/* Visualizador de Laudo */}
+        {isViewing && laudoSelecionado && (
+          <LaudoViewer laudo={laudoSelecionado} onClose={() => setIsViewing(false)} />
+        )}
+
+        {/* Editor para Novo Laudo */}
+        {isCreatingNew && (
+          <LaudoEditor 
+            pacientes={pacientesDisponiveis} 
+            onClose={() => setIsCreatingNew(false)} 
+            isNewLaudo={true}
+          />
+        )}
+      </div>
+    );
+  }
+
+  // Visualizador de Laudo (somente leitura)
+  function LaudoViewer({ laudo, onClose }: { laudo: any; onClose: () => void }) {
+    return (
+      <div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4">
+        <div className="bg-background rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] overflow-hidden flex flex-col">
+          {/* Header */}
+          <div className="flex items-center justify-between p-4 border-b border-border">
+            <div>
+              <h2 className="text-xl font-bold text-foreground">Visualizar Laudo</h2>
+              <p className="text-sm text-muted-foreground">
+                Paciente: {laudo.paciente.nome} | Pedido: {laudo.id} | {laudo.especialidade}
+              </p>
+            </div>
+            <Button variant="ghost" size="sm" onClick={onClose}>
+              <X className="w-4 h-4" />
+            </Button>
+          </div>
+
+          {/* Content */}
+          <div className="flex-1 overflow-y-auto p-6">
+            <div className="max-w-2xl mx-auto bg-background border border-border rounded-lg p-6 shadow-sm">
+              {/* Header do Laudo */}
+              <div className="text-center mb-6">
+                <h2 className="text-lg font-bold">LAUDO MÉDICO - {laudo.especialidade.toUpperCase()}</h2>
+                <p className="text-sm text-muted-foreground mt-1">
+                  Data: {laudo.data}
+                </p>
+              </div>
+
+              {/* Dados do Paciente */}
+              <div className="mb-6 p-4 bg-muted rounded">
+                <h3 className="font-semibold mb-2">Dados do Paciente:</h3>
+                <div className="grid grid-cols-2 gap-4 text-sm">
+                  <p><strong>Nome:</strong> {laudo.paciente.nome}</p>
+                  <p><strong>ID:</strong> {laudo.paciente.id}</p>
+                  <p><strong>CPF:</strong> {laudo.paciente.cpf}</p>
+                  <p><strong>Idade:</strong> {laudo.paciente.idade} anos</p>
+                  <p><strong>Sexo:</strong> {laudo.paciente.sexo}</p>
+                  <p><strong>CID:</strong> {laudo.cid}</p>
+                </div>
+              </div>
+
+              {/* Conteúdo do Laudo */}
+              <div className="mb-6">
+                <div 
+                  className="prose prose-sm max-w-none"
+                  dangerouslySetInnerHTML={{ 
+                    __html: laudo.conteudo.replace(/\n/g, '<br>') 
+                  }}
+                />
+              </div>
+
+              {/* Diagnóstico e Conclusão */}
+              {laudo.diagnostico && (
+                <div className="mb-4 p-3 bg-blue-50 dark:bg-blue-950/20 rounded">
+                  <h4 className="font-semibold text-blue-800 dark:text-blue-200 mb-1">Diagnóstico:</h4>
+                  <p className="text-sm">{laudo.diagnostico}</p>
+                </div>
+              )}
+
+              {laudo.conclusao && (
+                <div className="mb-6 p-3 bg-green-50 dark:bg-green-950/20 rounded">
+                  <h4 className="font-semibold text-green-800 dark:text-green-200 mb-1">Conclusão:</h4>
+                  <p className="text-sm">{laudo.conclusao}</p>
+                </div>
+              )}
+
+              {/* Assinatura */}
+              <div className="mt-8 text-center border-t pt-4">
+                <div className="h-16 mb-2"></div>
+                <p className="text-sm font-semibold">Dr. Carlos Andrade</p>
+                <p className="text-xs text-muted-foreground">CRM 000000 - {laudo.especialidade}</p>
+                <p className="text-xs text-muted-foreground mt-1">Data: {laudo.data}</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Footer */}
+          <div className="p-4 border-t border-border bg-muted/20">
+            <div className="flex items-center justify-between">
+              <div className="text-xs text-muted-foreground">
+                Status: {laudo.status} | Executante: {laudo.executante}
+              </div>
+              <Button onClick={onClose}>
+                Fechar
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Editor de Laudo Avançado (para novos laudos)
+  function LaudoEditor({ pacientes, laudo, onClose, isNewLaudo }: { pacientes?: any[]; laudo?: any; onClose: () => void; isNewLaudo?: boolean }) {
+    const [activeTab, setActiveTab] = useState("editor");
+    const [content, setContent] = useState("");
+    const [showPreview, setShowPreview] = useState(false);
+    const [pacienteSelecionado, setPacienteSelecionado] = useState<any>(null);
+    const [campos, setCampos] = useState({
+      cid: "",
+      diagnostico: "",
+      conclusao: "",
+      exame: "",
+      especialidade: "",
+      mostrarData: true,
+      mostrarAssinatura: true
+    });
+    const [imagens, setImagens] = useState<any[]>([]);
+    const [templates] = useState([
+      "Exame normal, sem alterações significativas",
+      "Paciente em acompanhamento ambulatorial",
+      "Recomenda-se retorno em 30 dias",
+      "Alterações compatíveis com processo inflamatório",
+      "Resultado dentro dos parâmetros de normalidade",
+      "Recomendo seguimento com especialista"
+    ]);
+
+    const sigCanvasRef = useRef<any>(null);
+
+    const formatText = (type: string) => {
+      const textarea = document.querySelector('textarea') as HTMLTextAreaElement;
+      if (!textarea) return;
+
+      const start = textarea.selectionStart;
+      const end = textarea.selectionEnd;
+      const selectedText = textarea.value.substring(start, end);
+      
+      let formattedText = "";
+      switch(type) {
+        case "bold":
+          formattedText = selectedText ? `**${selectedText}**` : "**texto em negrito**";
+          break;
+        case "italic":
+          formattedText = selectedText ? `*${selectedText}*` : "*texto em itálico*";
+          break;
+        case "underline":
+          formattedText = selectedText ? `<u>${selectedText}</u>` : "<u>texto sublinhado</u>";
+          break;
+        case "list":
+          formattedText = selectedText ? `• ${selectedText}` : "• item da lista";
+          break;
+      }
+
+      const newText = textarea.value.substring(0, start) + formattedText + textarea.value.substring(end);
+      setContent(newText);
+    };
+
+    const insertTemplate = (template: string) => {
+      setContent(prev => prev ? `${prev}\n\n${template}` : template);
+    };
+
+    const insertCampo = (campo: string) => {
+      const placeholder = `{{${campo}}}`;
+      setContent(prev => prev ? `${prev} ${placeholder}` : placeholder);
+    };
+
+    const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const files = Array.from(e.target.files || []);
+      files.forEach(file => {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          setImagens(prev => [...prev, {
+            id: Date.now() + Math.random(),
+            name: file.name,
+            url: e.target?.result,
+            type: file.type
+          }]);
+        };
+        reader.readAsDataURL(file);
+      });
+    };
+
+    const processContent = (content: string) => {
+      const paciente = isNewLaudo ? pacienteSelecionado : laudo?.paciente;
+      return content
+        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+        .replace(/\*(.*?)\*/g, '<em>$1</em>')
+        .replace(/<u>(.*?)<\/u>/g, '<u>$1</u>')
+        .replace(/{{nome_paciente}}/g, paciente?.nome || '[NOME_PACIENTE]')
+        .replace(/{{idade_paciente}}/g, paciente?.idade?.toString() || '[IDADE]')
+        .replace(/{{sexo_paciente}}/g, paciente?.sexo || '[SEXO]')
+        .replace(/{{cid}}/g, campos.cid || '[CID]')
+        .replace(/{{diagnostico}}/g, campos.diagnostico || '[DIAGNÓSTICO]')
+        .replace(/{{conclusao}}/g, campos.conclusao || '[CONCLUSÃO]')
+        .replace(/\n/g, '<br>');
+    };
+
+    return (
+      <div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4">
+        <div className="bg-background rounded-lg shadow-xl w-full max-w-6xl max-h-[90vh] overflow-hidden flex flex-col">
+          {/* Header */}
+          <div className="border-b border-border">
+            <div className="flex items-center justify-between p-4">
+              <div>
+                <h2 className="text-xl font-bold text-foreground">
+                  {isNewLaudo ? "Novo Laudo Médico" : "Editor de Laudo"}
+                </h2>
+                {isNewLaudo ? (
+                  <p className="text-sm text-muted-foreground">
+                    Crie um novo laudo selecionando um paciente
+                  </p>
+                ) : (
+                  <p className="text-sm text-muted-foreground">
+                    Paciente: {laudo?.paciente?.nome} | Pedido: {laudo?.id}
+                  </p>
+                )}
+              </div>
+              <Button variant="ghost" size="sm" onClick={onClose}>
+                <X className="w-4 h-4" />
+              </Button>
+            </div>
+
+            {/* Seleção de Paciente (apenas para novos laudos) */}
+            {isNewLaudo && (
+              <div className="px-4 pb-4">
+                {!pacienteSelecionado ? (
+                  <div className="bg-muted rounded-lg p-4">
+                    <Label htmlFor="select-paciente" className="text-sm font-medium mb-2 block">
+                      Selecionar Paciente *
+                    </Label>
+                    <Select onValueChange={(value) => {
+                      const paciente = pacientes?.find(p => p.id === value);
+                      if (paciente) setPacienteSelecionado(paciente);
+                    }}>
+                      <SelectTrigger className="w-full">
+                        <SelectValue placeholder="Escolha um paciente para criar o laudo" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {pacientes?.map((paciente) => (
+                          <SelectItem key={paciente.id} value={paciente.id}>
+                            {paciente.nome} - CPF: {paciente.cpf}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                ) : (
+                  <div className="bg-primary/10 border border-primary/20 rounded-lg p-3 flex items-center justify-between">
+                    <div>
+                      <div className="font-semibold text-primary">{pacienteSelecionado.nome}</div>
+                      <div className="text-xs text-muted-foreground">
+                        CPF: {pacienteSelecionado.cpf} | Idade: {pacienteSelecionado.idade} anos | Sexo: {pacienteSelecionado.sexo}
+                      </div>
+                    </div>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => setPacienteSelecionado(null)}
+                    >
+                      Trocar Paciente
+                    </Button>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+
+          {/* Tabs */}
+          <div className="flex border-b border-border">
+            {isNewLaudo && (
+              <button
+                onClick={() => setActiveTab("info")}
+                className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+                  activeTab === "info"
+                    ? "border-blue-500 text-blue-600"
+                    : "border-transparent text-muted-foreground hover:text-foreground"
+                }`}
+              >
+                <User className="w-4 h-4 inline mr-1" />
+                Informações
+              </button>
+            )}
+            <button
+              onClick={() => setActiveTab("editor")}
+              className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+                activeTab === "editor"
+                  ? "border-blue-500 text-blue-600"
+                  : "border-transparent text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              <FileText className="w-4 h-4 inline mr-1" />
+              Editor
+            </button>
+            <button
+              onClick={() => setActiveTab("imagens")}
+              className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+                activeTab === "imagens"
+                  ? "border-blue-500 text-blue-600"
+                  : "border-transparent text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              <Upload className="w-4 h-4 inline mr-1" />
+              Imagens ({imagens.length})
+            </button>
+            <button
+              onClick={() => setActiveTab("campos")}
+              className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+                activeTab === "campos"
+                  ? "border-blue-500 text-blue-600"
+                  : "border-transparent text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              <Settings className="w-4 h-4 inline mr-1" />
+              Campos
+            </button>
+            <button
+              onClick={() => setShowPreview(!showPreview)}
+              className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+                showPreview
+                  ? "border-green-500 text-green-600"
+                  : "border-transparent text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              <Eye className="w-4 h-4 inline mr-1" />
+              {showPreview ? "Ocultar" : "Pré-visualização"}
+            </button>
+          </div>
+
+          {/* Content */}
+          <div className="flex-1 overflow-hidden flex">
+            {/* Left Panel */}
+            <div className="flex-1 flex flex-col">
+              {activeTab === "info" && isNewLaudo && (
+                <div className="flex-1 p-4 space-y-4">
+                  {!pacienteSelecionado ? (
+                    <div className="flex items-center justify-center h-full">
+                      <div className="text-center">
+                        <User className="w-12 h-12 mx-auto text-muted-foreground mb-4" />
+                        <p className="text-muted-foreground">Selecione um paciente primeiro</p>
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="space-y-6">
+                      <div>
+                        <h3 className="text-lg font-semibold mb-4">Informações do Exame</h3>
+                        
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                          <div>
+                            <Label htmlFor="especialidade">Especialidade *</Label>
+                            <Select onValueChange={(value) => setCampos(prev => ({ ...prev, especialidade: value }))}>
+                              <SelectTrigger>
+                                <SelectValue placeholder="Selecione a especialidade" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                <SelectItem value="Cardiologia">Cardiologia</SelectItem>
+                                <SelectItem value="Dermatologia">Dermatologia</SelectItem>
+                              </SelectContent>
+                            </Select>
+                          </div>
+
+                          <div>
+                            <Label htmlFor="tipo-exame">Tipo de Exame *</Label>
+                            <Input
+                              id="tipo-exame"
+                              value={campos.exame}
+                              onChange={(e) => setCampos(prev => ({ ...prev, exame: e.target.value }))}
+                              placeholder="Ex: Ecocardiograma, Dermatoscopia, etc."
+                            />
+                          </div>
+                        </div>
+                      </div>
+
+                      <div>
+                        <h3 className="text-lg font-semibold mb-4">Dados do Paciente</h3>
+                        <div className="bg-muted rounded-lg p-4">
+                          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
+                            <div>
+                              <span className="font-medium">Nome:</span> {pacienteSelecionado.nome}
+                            </div>
+                            <div>
+                              <span className="font-medium">ID:</span> {pacienteSelecionado.id}
+                            </div>
+                            <div>
+                              <span className="font-medium">CPF:</span> {pacienteSelecionado.cpf}
+                            </div>
+                            <div>
+                              <span className="font-medium">Idade:</span> {pacienteSelecionado.idade} anos
+                            </div>
+                            <div>
+                              <span className="font-medium">Sexo:</span> {pacienteSelecionado.sexo}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className="flex justify-end">
+                        <Button 
+                          onClick={() => setActiveTab("editor")}
+                          disabled={!campos.especialidade || !campos.exame}
+                        >
+                          Continuar para Editor
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
+
+              {activeTab === "editor" && (
+                <div className="flex-1 flex flex-col">
+                  {/* Toolbar */}
+                  <div className="p-3 border-b border-border">
+                    <div className="flex flex-wrap gap-2">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => formatText("bold")}
+                        title="Negrito"
+                      >
+                        <strong>B</strong>
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => formatText("italic")}
+                        title="Itálico"
+                      >
+                        <em>I</em>
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => formatText("underline")}
+                        title="Sublinhado"
+                      >
+                        <u>U</u>
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => formatText("list")}
+                        title="Lista"
+                      >
+                        •
+                      </Button>
+                      
+                      <div className="h-6 w-px bg-border mx-1"></div>
+                      
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => insertCampo("nome_paciente")}
+                        title="Nome do Paciente"
+                      >
+                        Nome
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => insertCampo("idade_paciente")}
+                        title="Idade do Paciente"
+                      >
+                        Idade
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => insertCampo("cid")}
+                        title="CID"
+                      >
+                        CID
+                      </Button>
+                    </div>
+
+                    {/* Templates */}
+                    <div className="mt-3">
+                      <p className="text-xs text-muted-foreground mb-2">Frases rápidas:</p>
+                      <div className="flex flex-wrap gap-1">
+                        {templates.map((template, idx) => (
+                          <Button
+                            key={idx}
+                            variant="ghost"
+                            size="sm"
+                            className="text-xs h-auto p-1 px-2"
+                            onClick={() => insertTemplate(template)}
+                          >
+                            {template.substring(0, 30)}...
+                          </Button>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Editor */}
+                  <div className="flex-1 p-4">
+                    <Textarea
+                      value={content}
+                      onChange={(e) => setContent(e.target.value)}
+                      placeholder="Digite o conteúdo do laudo aqui. Use ** para negrito, * para itálico, <u></u> para sublinhado."
+                      className="h-full min-h-[400px] resize-none"
+                    />
+                  </div>
+                </div>
+              )}
+
+              {activeTab === "imagens" && (
+                <div className="flex-1 p-4">
+                  <div className="mb-4">
+                    <Label htmlFor="upload-images">Upload de Imagens</Label>
+                    <Input
+                      id="upload-images"
+                      type="file"
+                      multiple
+                      accept="image/*,.pdf"
+                      onChange={handleImageUpload}
+                      className="mt-1"
+                    />
+                  </div>
+                  
+                  <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+                    {imagens.map((img) => (
+                      <div key={img.id} className="border border-border rounded-lg p-2">
+                        {img.type.startsWith('image/') ? (
+                          <img 
+                            src={img.url} 
+                            alt={img.name}
+                            className="w-full h-32 object-cover rounded"
+                          />
+                        ) : (
+                          <div className="w-full h-32 bg-muted rounded flex items-center justify-center">
+                            <FileText className="w-8 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"
+                          onClick={() => setImagens(prev => prev.filter(i => i.id !== img.id))}
+                        >
+                          Remover
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {activeTab === "campos" && (
+                <div className="flex-1 p-4 space-y-4">
+                  <div>
+                    <Label htmlFor="cid">CID</Label>
+                    <Input
+                      id="cid"
+                      value={campos.cid}
+                      onChange={(e) => setCampos(prev => ({ ...prev, cid: e.target.value }))}
+                      placeholder="Ex: M25.5, I10, etc."
+                    />
+                  </div>
+
+                  <div>
+                    <Label htmlFor="diagnostico">Diagnóstico</Label>
+                    <Textarea
+                      id="diagnostico"
+                      value={campos.diagnostico}
+                      onChange={(e) => setCampos(prev => ({ ...prev, diagnostico: e.target.value }))}
+                      placeholder="Diagnóstico principal"
+                      rows={3}
+                    />
+                  </div>
+
+                  <div>
+                    <Label htmlFor="conclusao">Conclusão</Label>
+                    <Textarea
+                      id="conclusao"
+                      value={campos.conclusao}
+                      onChange={(e) => setCampos(prev => ({ ...prev, conclusao: e.target.value }))}
+                      placeholder="Conclusão do laudo"
+                      rows={3}
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <div className="flex items-center space-x-2">
+                      <input
+                        type="checkbox"
+                        id="mostrar-data"
+                        checked={campos.mostrarData}
+                        onChange={(e) => setCampos(prev => ({ ...prev, mostrarData: e.target.checked }))}
+                      />
+                      <Label htmlFor="mostrar-data">Mostrar data no laudo</Label>
+                    </div>
+
+                    <div className="flex items-center space-x-2">
+                      <input
+                        type="checkbox"
+                        id="mostrar-assinatura"
+                        checked={campos.mostrarAssinatura}
+                        onChange={(e) => setCampos(prev => ({ ...prev, mostrarAssinatura: e.target.checked }))}
+                      />
+                      <Label htmlFor="mostrar-assinatura">Mostrar assinatura no laudo</Label>
+                    </div>
+                  </div>
+
+                  {/* Assinatura Digital */}
+                  <div>
+                    <Label>Assinatura Digital</Label>
+                    <div className="mt-2 p-4 border border-border rounded-lg bg-muted">
+                      <SignatureCanvas
+                        ref={sigCanvasRef}
+                        penColor="#000"
+                        backgroundColor="#fff"
+                        canvasProps={{ 
+                          width: 400, 
+                          height: 150, 
+                          className: "border rounded bg-background"
+                        }}
+                      />
+                      <div className="flex gap-2 mt-2">
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => sigCanvasRef.current?.clear()}
+                        >
+                          Limpar
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* Preview Panel */}
+            {showPreview && (
+              <div className="w-1/2 border-l border-border bg-muted/20">
+                <div className="p-4 border-b border-border">
+                  <h3 className="font-semibold text-foreground">Pré-visualização do Laudo</h3>
+                </div>
+                <div className="p-4 max-h-[600px] overflow-y-auto">
+                  <div className="bg-background border border-border rounded-lg p-6 shadow-sm">
+                    {/* Header do Laudo */}
+                    <div className="text-center mb-6">
+                      <h2 className="text-lg font-bold">
+                        LAUDO MÉDICO {campos.especialidade ? `- ${campos.especialidade.toUpperCase()}` : ''}
+                      </h2>
+                      {campos.exame && (
+                        <h3 className="text-md font-semibold mt-2">{campos.exame}</h3>
+                      )}
+                      {campos.mostrarData && (
+                        <p className="text-sm text-muted-foreground mt-1">
+                          Data: {new Date().toLocaleDateString('pt-BR')}
+                        </p>
+                      )}
+                    </div>
+
+                    {/* Dados do Paciente */}
+                    {(isNewLaudo ? pacienteSelecionado : laudo?.paciente) && (
+                      <div className="mb-4 p-3 bg-muted rounded">
+                        <h3 className="font-semibold mb-2">Dados do Paciente:</h3>
+                        {isNewLaudo && pacienteSelecionado ? (
+                          <>
+                            <p><strong>Nome:</strong> {pacienteSelecionado.nome}</p>
+                            <p><strong>ID:</strong> {pacienteSelecionado.id}</p>
+                            <p><strong>CPF:</strong> {pacienteSelecionado.cpf}</p>
+                            <p><strong>Idade:</strong> {pacienteSelecionado.idade} anos</p>
+                            <p><strong>Sexo:</strong> {pacienteSelecionado.sexo}</p>
+                            {campos.cid && <p><strong>CID:</strong> {campos.cid}</p>}
+                          </>
+                        ) : (
+                          <>
+                            <p><strong>Nome:</strong> {laudo?.paciente?.nome}</p>
+                            <p><strong>ID:</strong> {laudo?.paciente?.id}</p>
+                            {campos.cid && <p><strong>CID:</strong> {campos.cid}</p>}
+                          </>
+                        )}
+                      </div>
+                    )}
+
+                    {/* Conteúdo */}
+                    <div className="mb-4">
+                      <div 
+                        dangerouslySetInnerHTML={{ 
+                          __html: processContent(content) 
+                        }}
+                      />
+                    </div>
+
+                    {/* Imagens */}
+                    {imagens.length > 0 && (
+                      <div className="mb-4">
+                        <h3 className="font-semibold mb-2">Imagens:</h3>
+                        <div className="grid grid-cols-2 gap-2">
+                          {imagens.map((img) => (
+                            <img 
+                              key={img.id}
+                              src={img.url} 
+                              alt={img.name}
+                              className="w-full h-32 object-cover rounded border"
+                            />
+                          ))}
+                        </div>
+                      </div>
+                    )}
+
+                    {/* Assinatura */}
+                    {campos.mostrarAssinatura && (
+                      <div className="mt-8 text-center">
+                        <div className="h-16 border-b border-border mb-2"></div>
+                        <p className="text-sm">Dr. Carlos Andrade</p>
+                        <p className="text-xs text-muted-foreground">CRM 000000</p>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Footer */}
+          <div className="p-4 border-t border-border bg-muted/20">
+            <div className="flex items-center justify-between">
+              <div className="text-xs text-muted-foreground">
+                Este editor permite escrever relatórios de forma livre, com formatação de texto rica.
+              </div>
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={onClose}>
+                  Cancelar
+                </Button>
+                <Button variant="outline">
+                  Salvar Rascunho
+                </Button>
+                <Button variant="default">
+                  Liberar Laudo
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
 
   
   const renderComunicacaoSection = () => (
diff --git a/susconecta/next-env.d.ts b/susconecta/next-env.d.ts
index 40c3d68..830fb59 100644
--- a/susconecta/next-env.d.ts
+++ b/susconecta/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/susconecta/package-lock.json b/susconecta/package-lock.json
index 28b8049..268ab68 100644
--- a/susconecta/package-lock.json
+++ b/susconecta/package-lock.json
@@ -974,9 +974,9 @@
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.30",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.30.tgz",
-      "integrity": "sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==",
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2635,54 +2635,54 @@
       }
     },
     "node_modules/@tailwindcss/node": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.12.tgz",
-      "integrity": "sha512-3hm9brwvQkZFe++SBt+oLjo4OLDtkvlE8q2WalaD/7QWaeM7KEJbAiY/LJZUaCs7Xa8aUu4xy3uoyX4q54UVdQ==",
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.14.tgz",
+      "integrity": "sha512-hpz+8vFk3Ic2xssIA3e01R6jkmsAhvkQdXlEbRTk6S10xDAtiQiM3FyvZVGsucefq764euO/b8WUW9ysLdThHw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/remapping": "^2.3.4",
         "enhanced-resolve": "^5.18.3",
-        "jiti": "^2.5.1",
+        "jiti": "^2.6.0",
         "lightningcss": "1.30.1",
-        "magic-string": "^0.30.17",
+        "magic-string": "^0.30.19",
         "source-map-js": "^1.2.1",
-        "tailwindcss": "4.1.12"
+        "tailwindcss": "4.1.14"
       }
     },
     "node_modules/@tailwindcss/oxide": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.12.tgz",
-      "integrity": "sha512-gM5EoKHW/ukmlEtphNwaGx45fGoEmP10v51t9unv55voWh6WrOL19hfuIdo2FjxIaZzw776/BUQg7Pck++cIVw==",
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.14.tgz",
+      "integrity": "sha512-23yx+VUbBwCg2x5XWdB8+1lkPajzLmALEfMb51zZUBYaYVPDQvBSD/WYDqiVyBIo2BZFa3yw1Rpy3G2Jp+K0dw==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
         "detect-libc": "^2.0.4",
-        "tar": "^7.4.3"
+        "tar": "^7.5.1"
       },
       "engines": {
         "node": ">= 10"
       },
       "optionalDependencies": {
-        "@tailwindcss/oxide-android-arm64": "4.1.12",
-        "@tailwindcss/oxide-darwin-arm64": "4.1.12",
-        "@tailwindcss/oxide-darwin-x64": "4.1.12",
-        "@tailwindcss/oxide-freebsd-x64": "4.1.12",
-        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.12",
-        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.12",
-        "@tailwindcss/oxide-linux-arm64-musl": "4.1.12",
-        "@tailwindcss/oxide-linux-x64-gnu": "4.1.12",
-        "@tailwindcss/oxide-linux-x64-musl": "4.1.12",
-        "@tailwindcss/oxide-wasm32-wasi": "4.1.12",
-        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.12",
-        "@tailwindcss/oxide-win32-x64-msvc": "4.1.12"
+        "@tailwindcss/oxide-android-arm64": "4.1.14",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.14",
+        "@tailwindcss/oxide-darwin-x64": "4.1.14",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.14",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.14",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.14",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.14",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.14",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.14",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.14",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.14",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.14"
       }
     },
     "node_modules/@tailwindcss/oxide-android-arm64": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.12.tgz",
-      "integrity": "sha512-oNY5pq+1gc4T6QVTsZKwZaGpBb2N1H1fsc1GD4o7yinFySqIuRZ2E4NvGasWc6PhYJwGK2+5YT1f9Tp80zUQZQ==",
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.14.tgz",
+      "integrity": "sha512-a94ifZrGwMvbdeAxWoSuGcIl6/DOP5cdxagid7xJv6bwFp3oebp7y2ImYsnZBMTwjn5Ev5xESvS3FFYUGgPODQ==",
       "cpu": [
         "arm64"
       ],
@@ -2697,9 +2697,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-darwin-arm64": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.12.tgz",
-      "integrity": "sha512-cq1qmq2HEtDV9HvZlTtrj671mCdGB93bVY6J29mwCyaMYCP/JaUBXxrQQQm7Qn33AXXASPUb2HFZlWiiHWFytw==",
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.14.tgz",
+      "integrity": "sha512-HkFP/CqfSh09xCnrPJA7jud7hij5ahKyWomrC3oiO2U9i0UjP17o9pJbxUN0IJ471GTQQmzwhp0DEcpbp4MZTA==",
       "cpu": [
         "arm64"
       ],
@@ -2714,9 +2714,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-darwin-x64": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.12.tgz",
-      "integrity": "sha512-6UCsIeFUcBfpangqlXay9Ffty9XhFH1QuUFn0WV83W8lGdX8cD5/+2ONLluALJD5+yJ7k8mVtwy3zMZmzEfbLg==",
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.14.tgz",
+      "integrity": "sha512-eVNaWmCgdLf5iv6Qd3s7JI5SEFBFRtfm6W0mphJYXgvnDEAZ5sZzqmI06bK6xo0IErDHdTA5/t7d4eTfWbWOFw==",
       "cpu": [
         "x64"
       ],
@@ -2731,9 +2731,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-freebsd-x64": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.12.tgz",
-      "integrity": "sha512-JOH/f7j6+nYXIrHobRYCtoArJdMJh5zy5lr0FV0Qu47MID/vqJAY3r/OElPzx1C/wdT1uS7cPq+xdYYelny1ww==",
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.14.tgz",
+      "integrity": "sha512-QWLoRXNikEuqtNb0dhQN6wsSVVjX6dmUFzuuiL09ZeXju25dsei2uIPl71y2Ic6QbNBsB4scwBoFnlBfabHkEw==",
       "cpu": [
         "x64"
       ],
@@ -2748,9 +2748,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.12.tgz",
-      "integrity": "sha512-v4Ghvi9AU1SYgGr3/j38PD8PEe6bRfTnNSUE3YCMIRrrNigCFtHZ2TCm8142X8fcSqHBZBceDx+JlFJEfNg5zQ==",
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.14.tgz",
+      "integrity": "sha512-VB4gjQni9+F0VCASU+L8zSIyjrLLsy03sjcR3bM0V2g4SNamo0FakZFKyUQ96ZVwGK4CaJsc9zd/obQy74o0Fw==",
       "cpu": [
         "arm"
       ],
@@ -2765,9 +2765,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.12.tgz",
-      "integrity": "sha512-YP5s1LmetL9UsvVAKusHSyPlzSRqYyRB0f+Kl/xcYQSPLEw/BvGfxzbH+ihUciePDjiXwHh+p+qbSP3SlJw+6g==",
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.14.tgz",
+      "integrity": "sha512-qaEy0dIZ6d9vyLnmeg24yzA8XuEAD9WjpM5nIM1sUgQ/Zv7cVkharPDQcmm/t/TvXoKo/0knI3me3AGfdx6w1w==",
       "cpu": [
         "arm64"
       ],
@@ -2782,9 +2782,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.12.tgz",
-      "integrity": "sha512-V8pAM3s8gsrXcCv6kCHSuwyb/gPsd863iT+v1PGXC4fSL/OJqsKhfK//v8P+w9ThKIoqNbEnsZqNy+WDnwQqCA==",
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.14.tgz",
+      "integrity": "sha512-ISZjT44s59O8xKsPEIesiIydMG/sCXoMBCqsphDm/WcbnuWLxxb+GcvSIIA5NjUw6F8Tex7s5/LM2yDy8RqYBQ==",
       "cpu": [
         "arm64"
       ],
@@ -2799,9 +2799,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.12.tgz",
-      "integrity": "sha512-xYfqYLjvm2UQ3TZggTGrwxjYaLB62b1Wiysw/YE3Yqbh86sOMoTn0feF98PonP7LtjsWOWcXEbGqDL7zv0uW8Q==",
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.14.tgz",
+      "integrity": "sha512-02c6JhLPJj10L2caH4U0zF8Hji4dOeahmuMl23stk0MU1wfd1OraE7rOloidSF8W5JTHkFdVo/O7uRUJJnUAJg==",
       "cpu": [
         "x64"
       ],
@@ -2816,9 +2816,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-x64-musl": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.12.tgz",
-      "integrity": "sha512-ha0pHPamN+fWZY7GCzz5rKunlv9L5R8kdh+YNvP5awe3LtuXb5nRi/H27GeL2U+TdhDOptU7T6Is7mdwh5Ar3A==",
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.14.tgz",
+      "integrity": "sha512-TNGeLiN1XS66kQhxHG/7wMeQDOoL0S33x9BgmydbrWAb9Qw0KYdd8o1ifx4HOGDWhVmJ+Ul+JQ7lyknQFilO3Q==",
       "cpu": [
         "x64"
       ],
@@ -2833,9 +2833,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-wasm32-wasi": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.12.tgz",
-      "integrity": "sha512-4tSyu3dW+ktzdEpuk6g49KdEangu3eCYoqPhWNsZgUhyegEda3M9rG0/j1GV/JjVVsj+lG7jWAyrTlLzd/WEBg==",
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.14.tgz",
+      "integrity": "sha512-uZYAsaW/jS/IYkd6EWPJKW/NlPNSkWkBlaeVBi/WsFQNP05/bzkebUL8FH1pdsqx4f2fH/bWFcUABOM9nfiJkQ==",
       "bundleDependencies": [
         "@napi-rs/wasm-runtime",
         "@emnapi/core",
@@ -2851,21 +2851,21 @@
       "license": "MIT",
       "optional": true,
       "dependencies": {
-        "@emnapi/core": "^1.4.5",
-        "@emnapi/runtime": "^1.4.5",
-        "@emnapi/wasi-threads": "^1.0.4",
-        "@napi-rs/wasm-runtime": "^0.2.12",
-        "@tybys/wasm-util": "^0.10.0",
-        "tslib": "^2.8.0"
+        "@emnapi/core": "^1.5.0",
+        "@emnapi/runtime": "^1.5.0",
+        "@emnapi/wasi-threads": "^1.1.0",
+        "@napi-rs/wasm-runtime": "^1.0.5",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.4.0"
       },
       "engines": {
         "node": ">=14.0.0"
       }
     },
     "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.12.tgz",
-      "integrity": "sha512-iGLyD/cVP724+FGtMWslhcFyg4xyYyM+5F4hGvKA7eifPkXHRAUDFaimu53fpNg9X8dfP75pXx/zFt/jlNF+lg==",
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.14.tgz",
+      "integrity": "sha512-Az0RnnkcvRqsuoLH2Z4n3JfAef0wElgzHD5Aky/e+0tBUxUhIeIqFBTMNQvmMRSP15fWwmvjBxZ3Q8RhsDnxAA==",
       "cpu": [
         "arm64"
       ],
@@ -2880,9 +2880,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.12.tgz",
-      "integrity": "sha512-NKIh5rzw6CpEodv/++r0hGLlfgT/gFN+5WNdZtvh6wpU2BpGNgdjvj6H2oFc8nCM839QM1YOhjpgbAONUb4IxA==",
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.14.tgz",
+      "integrity": "sha512-ttblVGHgf68kEE4om1n/n44I0yGPkCPbLsqzjvybhpwa6mKKtgFfAzy6btc3HRmuW7nHe0OOrSeNP9sQmmH9XA==",
       "cpu": [
         "x64"
       ],
@@ -2897,17 +2897,17 @@
       }
     },
     "node_modules/@tailwindcss/postcss": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.12.tgz",
-      "integrity": "sha512-5PpLYhCAwf9SJEeIsSmCDLgyVfdBhdBpzX1OJ87anT9IVR0Z9pjM0FNixCAUAHGnMBGB8K99SwAheXrT0Kh6QQ==",
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.14.tgz",
+      "integrity": "sha512-BdMjIxy7HUNThK87C7BC8I1rE8BVUsfNQSI5siQ4JK3iIa3w0XyVvVL9SXLWO//CtYTcp1v7zci0fYwJOjB+Zg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
-        "@tailwindcss/node": "4.1.12",
-        "@tailwindcss/oxide": "4.1.12",
+        "@tailwindcss/node": "4.1.14",
+        "@tailwindcss/oxide": "4.1.14",
         "postcss": "^8.4.41",
-        "tailwindcss": "4.1.12"
+        "tailwindcss": "4.1.14"
       }
     },
     "node_modules/@tybys/wasm-util": {
@@ -2922,9 +2922,9 @@
       }
     },
     "node_modules/@types/d3-array": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
-      "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
       "license": "MIT"
     },
     "node_modules/@types/d3-color": {
@@ -3006,9 +3006,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "22.18.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.18.0.tgz",
-      "integrity": "sha512-m5ObIqwsUp6BZzyiy4RdZpzWGub9bqLJMvZDD0QMXhxjqMHMENlj+SqF5QxoUwaQNFe+8kz8XM8ZQhqkQPTgMQ==",
+      "version": "22.18.8",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.18.8.tgz",
+      "integrity": "sha512-pAZSHMiagDR7cARo/cch1f3rXy0AEXwsVsVH09FcyeJVAzCnGgmYis7P3JidtTUjyadhTeSo8TgRPswstghDaw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3045,9 +3045,9 @@
       "optional": true
     },
     "node_modules/@types/react": {
-      "version": "18.3.24",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.24.tgz",
-      "integrity": "sha512-0dLEBsA1kI3OezMBF8nSsb7Nk19ZnsyE1LLhB8r27KbgU5H4pvuqZLdtE+aUkJVoXgTVuA+iLIwmZ0TuK4tx6A==",
+      "version": "18.3.25",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.25.tgz",
+      "integrity": "sha512-oSVZmGtDPmRZtVDqvdKUi/qgCsWp5IDY29wp8na8Bj4B3cc99hfNzvNhlMkVVxctkAOGUA3Km7MMpBHAnWfcIA==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
@@ -3961,6 +3961,15 @@
         "node": ">= 0.6.0"
       }
     },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.8.10",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.10.tgz",
+      "integrity": "sha512-uLfgBi+7IBNay8ECBO2mVMGZAc1VgZWEChxm4lv+TobGdG82LnXMjuNGo/BSSZZL4UmkWhxEHP2f5ziLNwGWMA==",
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.js"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
@@ -3985,9 +3994,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.25.4",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.4.tgz",
-      "integrity": "sha512-4jYpcjabC606xJ3kw2QwGEZKX0Aw7sgQdZCvIK9dhVSPh76BKo+C+btT1RRofH7B+8iNpEbgGNVWiLki5q93yg==",
+      "version": "4.26.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.26.3.tgz",
+      "integrity": "sha512-lAUU+02RFBuCKQPj/P6NgjlbCnLBMp4UtgTx7vNHd3XSIJF87s9a5rA3aH2yw3GS9DqZAUbOtZdCCiZeVRqt0w==",
       "funding": [
         {
           "type": "opencollective",
@@ -4004,9 +4013,10 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "caniuse-lite": "^1.0.30001737",
-        "electron-to-chromium": "^1.5.211",
-        "node-releases": "^2.0.19",
+        "baseline-browser-mapping": "^2.8.9",
+        "caniuse-lite": "^1.0.30001746",
+        "electron-to-chromium": "^1.5.227",
+        "node-releases": "^2.0.21",
         "update-browserslist-db": "^1.1.3"
       },
       "bin": {
@@ -4086,57 +4096,10 @@
         "node": ">=6"
       }
     },
-    "node_modules/call-bind": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
-      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.0",
-        "es-define-property": "^1.0.0",
-        "get-intrinsic": "^1.2.4",
-        "set-function-length": "^1.2.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/call-bind-apply-helpers": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
-      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/call-bound": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
-      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.2",
-        "get-intrinsic": "^1.3.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001739",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001739.tgz",
-      "integrity": "sha512-y+j60d6ulelrNSwpPyrHdl+9mJnQzHBr08xm48Qno0nSk4h3Qojh+ziv2qE6rXf4k3tadF4o1J/1tAbVm1NtnA==",
+      "version": "1.0.30001747",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001747.tgz",
+      "integrity": "sha512-mzFa2DGIhuc5490Nd/G31xN1pnBnYMadtkyTjefPI7wzypqgCEpeWu9bJr0OnDsyKrW75zA9ZAt7pbQFmwLsQg==",
       "funding": [
         {
           "type": "opencollective",
@@ -4625,51 +4588,10 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-<<<<<<< HEAD
-    "node_modules/define-data-property": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
-      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
-      "license": "MIT",
-      "dependencies": {
-        "es-define-property": "^1.0.0",
-        "es-errors": "^1.3.0",
-        "gopd": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/define-properties": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
-      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
-      "license": "MIT",
-      "dependencies": {
-        "define-data-property": "^1.0.1",
-        "has-property-descriptors": "^1.0.0",
-        "object-keys": "^1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/detect-libc": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
-      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
-=======
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
->>>>>>> origin/develop
       "dev": true,
       "license": "MIT"
     },
@@ -4761,9 +4683,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.213",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.213.tgz",
-      "integrity": "sha512-xr9eRzSLNa4neDO0xVFrkXu3vyIzG4Ay08dApecw42Z1NbmCt+keEpXdvlYGVe0wtvY5dhW0Ay0lY0IOfsCg0Q==",
+      "version": "1.5.229",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.229.tgz",
+      "integrity": "sha512-cwhDcZKGcT/rEthLRJ9eBlMDkh1sorgsuk+6dpsehV0g9CABsIqBxU4rLRjG+d/U6pYU1s37A4lSKrVc5lSQYg==",
       "license": "ISC"
     },
     "node_modules/embla-carousel": {
@@ -4815,8 +4737,6 @@
         "node": ">=10.13.0"
       }
     },
-<<<<<<< HEAD
-=======
     "node_modules/es-abstract": {
       "version": "1.24.0",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.0.tgz",
@@ -4886,7 +4806,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
->>>>>>> origin/develop
     "node_modules/es-define-property": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -4905,8 +4824,6 @@
         "node": ">= 0.4"
       }
     },
-<<<<<<< HEAD
-=======
     "node_modules/es-iterator-helpers": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.2.1.tgz",
@@ -4935,7 +4852,6 @@
         "node": ">= 0.4"
       }
     },
->>>>>>> origin/develop
     "node_modules/es-object-atoms": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
@@ -4948,8 +4864,6 @@
         "node": ">= 0.4"
       }
     },
-<<<<<<< HEAD
-=======
     "node_modules/es-set-tostringtag": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
@@ -4997,7 +4911,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
->>>>>>> origin/develop
     "node_modules/es-toolkit": {
       "version": "1.39.10",
       "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.39.10.tgz",
@@ -5654,9 +5567,9 @@
       }
     },
     "node_modules/eventemitter3": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
-      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
+      "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg==",
       "license": "MIT"
     },
     "node_modules/extend": {
@@ -5864,8 +5777,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-<<<<<<< HEAD
-=======
     "node_modules/function.prototype.name": {
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.8.tgz",
@@ -5887,7 +5798,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
->>>>>>> origin/develop
     "node_modules/functions-have-names": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
@@ -5898,16 +5808,14 @@
       }
     },
     "node_modules/geist": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/geist/-/geist-1.4.2.tgz",
-      "integrity": "sha512-OQUga/KUc8ueijck6EbtT07L4tZ5+TZgjw8PyWfxo16sL5FWk7gNViPNU8hgCFjy6bJi9yuTP+CRpywzaGN8zw==",
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/geist/-/geist-1.5.1.tgz",
+      "integrity": "sha512-mAHZxIsL2o3ZITFaBVFBnwyDOw+zNLYum6A6nIjpzCGIO8QtC3V76XF2RnZTyLx1wlDTmMDy8jg3Ib52MIjGvQ==",
       "license": "SIL OPEN FONT LICENSE",
       "peerDependencies": {
         "next": ">=13.2.0"
       }
     },
-<<<<<<< HEAD
-=======
     "node_modules/generator-function": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/generator-function/-/generator-function-2.0.1.tgz",
@@ -5918,7 +5826,6 @@
         "node": ">= 0.4"
       }
     },
->>>>>>> origin/develop
     "node_modules/get-intrinsic": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
@@ -5965,8 +5872,6 @@
         "node": ">= 0.4"
       }
     },
-<<<<<<< HEAD
-=======
     "node_modules/get-symbol-description": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
@@ -6041,7 +5946,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
->>>>>>> origin/develop
     "node_modules/gopd": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -6061,8 +5965,6 @@
       "dev": true,
       "license": "ISC"
     },
-<<<<<<< HEAD
-=======
     "node_modules/graphemer": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@@ -6093,7 +5995,6 @@
         "node": ">=8"
       }
     },
->>>>>>> origin/develop
     "node_modules/has-property-descriptors": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
@@ -6106,8 +6007,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-<<<<<<< HEAD
-=======
     "node_modules/has-proto": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
@@ -6124,7 +6023,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
->>>>>>> origin/develop
     "node_modules/has-symbols": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
@@ -6294,8 +6192,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-<<<<<<< HEAD
-=======
     "node_modules/is-array-buffer": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -6440,7 +6336,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
->>>>>>> origin/develop
     "node_modules/is-date-object": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
@@ -6457,8 +6352,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-<<<<<<< HEAD
-=======
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -6571,7 +6464,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
->>>>>>> origin/develop
     "node_modules/is-regex": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
@@ -6590,8 +6482,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-<<<<<<< HEAD
-=======
     "node_modules/is-set": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
@@ -6750,11 +6640,10 @@
         "node": ">= 0.4"
       }
     },
->>>>>>> origin/develop
     "node_modules/jiti": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.5.1.tgz",
-      "integrity": "sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w==",
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -7194,9 +7083,9 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.18",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.18.tgz",
-      "integrity": "sha512-yi8swmWbO17qHhwIBNeeZxTceJMeBvWJaId6dyvTSOwTipqeHhMhOrz6513r1sOKnpvQ7zkhlG8tPrpilwTxHQ==",
+      "version": "0.30.19",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.19.tgz",
+      "integrity": "sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -7212,8 +7101,6 @@
         "node": ">= 0.4"
       }
     },
-<<<<<<< HEAD
-=======
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -7264,7 +7151,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
->>>>>>> origin/develop
     "node_modules/minipass": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
@@ -7276,9 +7162,9 @@
       }
     },
     "node_modules/minizlib": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.0.2.tgz",
-      "integrity": "sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.1.0.tgz",
+      "integrity": "sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -7288,22 +7174,6 @@
         "node": ">= 18"
       }
     },
-    "node_modules/mkdirp": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
-      "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "mkdirp": "dist/cjs/src/bin.js"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -7443,9 +7313,9 @@
       }
     },
     "node_modules/node-releases": {
-      "version": "2.0.19",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
-      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
+      "version": "2.0.21",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.21.tgz",
+      "integrity": "sha512-5b0pgg78U3hwXkCM8Z9b2FJdPZlr9Psr9V2gQPESdGHqbntyFJKFW4r5TeWGFzafGY3hzs1JC62VEQMbl1JFkw==",
       "license": "MIT"
     },
     "node_modules/normalize-range": {
@@ -7466,8 +7336,6 @@
         "node": ">=0.10.0"
       }
     },
-<<<<<<< HEAD
-=======
     "node_modules/object-inspect": {
       "version": "1.13.4",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
@@ -7481,7 +7349,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
->>>>>>> origin/develop
     "node_modules/object-is": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz",
@@ -7507,8 +7374,6 @@
         "node": ">= 0.4"
       }
     },
-<<<<<<< HEAD
-=======
     "node_modules/object.assign": {
       "version": "4.1.7",
       "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz",
@@ -7667,7 +7532,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
->>>>>>> origin/develop
     "node_modules/pako": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
@@ -7896,12 +7760,6 @@
         "node": ">=0.10"
       }
     },
-    "node_modules/quill/node_modules/eventemitter3": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
-      "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg==",
-      "license": "MIT"
-    },
     "node_modules/raf": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
@@ -7925,9 +7783,9 @@
       }
     },
     "node_modules/react-day-picker": {
-      "version": "9.9.0",
-      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-9.9.0.tgz",
-      "integrity": "sha512-NtkJbuX6cl/VaGNb3sVVhmMA6LSMnL5G3xNL+61IyoZj0mUZFWTg4hmj7PHjIQ8MXN9dHWhUHFoJWG6y60DKSg==",
+      "version": "9.11.0",
+      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-9.11.0.tgz",
+      "integrity": "sha512-L4FYOaPrr3+AEROeP6IG2mCORZZfxJDkJI2df8mv1jyPrNYeccgmFPZDaHyAuPCBCddQFozkxbikj2NhMEYfDQ==",
       "license": "MIT",
       "dependencies": {
         "@date-fns/tz": "^1.4.1",
@@ -7959,9 +7817,9 @@
       }
     },
     "node_modules/react-hook-form": {
-      "version": "7.62.0",
-      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.62.0.tgz",
-      "integrity": "sha512-7KWFejc98xqG/F4bAxpL41NB3o1nnvQO1RWZT3TqRZYL8RryQETGfEdVnJN2fy1crCiBLLjkRBVK05j24FxJGA==",
+      "version": "7.63.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.63.0.tgz",
+      "integrity": "sha512-ZwueDMvUeucovM2VjkCf7zIHcs1aAlDimZu2Hvel5C5907gUzMpm4xCrQXtRzCvsBqFjonB4m3x4LzCFI1ZKWA==",
       "license": "MIT",
       "engines": {
         "node": ">=18.0.0"
@@ -7975,9 +7833,9 @@
       }
     },
     "node_modules/react-is": {
-      "version": "19.1.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.1.tgz",
-      "integrity": "sha512-tr41fA15Vn8p4X9ntI+yCyeGSf1TlYaY5vlTZfQmeLBrFo3psOPX6HhTDnFNL9uj3EhP0KAQ80cugCl4b4BERA==",
+      "version": "19.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.0.tgz",
+      "integrity": "sha512-x3Ax3kNSMIIkyVYhWPyO09bu0uttcAIoecO/um/rKGQ4EltYWVYtyiGkS/3xMynrbVQdS69Jhlv8FXUEZehlzA==",
       "license": "MIT",
       "peer": true
     },
@@ -8067,9 +7925,9 @@
       }
     },
     "node_modules/react-resizable-panels": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-3.0.5.tgz",
-      "integrity": "sha512-3z1yN25DMTXLg2wfyFrW32r5k4WEcUa3F7cJ2EgtNK07lnOs4mpM8yWLGunCpkhcQRwJX4fqoLcIh/pHPxzlmQ==",
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-3.0.6.tgz",
+      "integrity": "sha512-b3qKHQ3MLqOgSS+FRYKapNkJZf5EQzuf6+RLiq1/IlTHw99YrZ2NJZLk4hQIzTnnIkRg2LUqyVinu6YWWpUYew==",
       "license": "MIT",
       "peerDependencies": {
         "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
@@ -8129,9 +7987,9 @@
       }
     },
     "node_modules/recharts": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.1.2.tgz",
-      "integrity": "sha512-vhNbYwaxNbk/IATK0Ki29k3qvTkGqwvCgyQAQ9MavvvBwjvKnMTswdbklJpcOAoMPN/qxF3Lyqob0zO+ZXkZ4g==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.2.1.tgz",
+      "integrity": "sha512-0JKwHRiFZdmLq/6nmilxEZl3pqb4T+aKkOkOi/ZISRZwfBhVMgInxzlYU9D4KnCH3KINScLy68m/OvMXoYGZUw==",
       "license": "MIT",
       "dependencies": {
         "@reduxjs/toolkit": "1.x.x || 2.x.x",
@@ -8155,6 +8013,12 @@
         "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/recharts/node_modules/eventemitter3": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
+      "license": "MIT"
+    },
     "node_modules/redux": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
@@ -8200,8 +8064,6 @@
       "license": "MIT",
       "optional": true
     },
-<<<<<<< HEAD
-=======
     "node_modules/regexp-tree": {
       "version": "0.1.27",
       "resolved": "https://registry.npmjs.org/regexp-tree/-/regexp-tree-0.1.27.tgz",
@@ -8212,7 +8074,6 @@
         "regexp-tree": "bin/regexp-tree"
       }
     },
->>>>>>> origin/develop
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
@@ -8233,8 +8094,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-<<<<<<< HEAD
-=======
     "node_modules/regjsparser": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.12.0.tgz",
@@ -8261,7 +8120,6 @@
         "node": ">=6"
       }
     },
->>>>>>> origin/develop
     "node_modules/reselect": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
@@ -8469,8 +8327,6 @@
         "node": ">= 0.4"
       }
     },
-<<<<<<< HEAD
-=======
     "node_modules/set-proto": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz",
@@ -8628,7 +8484,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
->>>>>>> origin/develop
     "node_modules/signature_pad": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/signature_pad/-/signature_pad-2.3.2.tgz",
@@ -8904,9 +8759,9 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.12.tgz",
-      "integrity": "sha512-DzFtxOi+7NsFf7DBtI3BJsynR+0Yp6etH+nRPTbpWnS2pZBaSksv/JGctNwSWzbFjp0vxSqknaUylseZqMDGrA==",
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.14.tgz",
+      "integrity": "sha512-b7pCxjGO98LnxVkKjaZSDeNuljC4ueKUddjENJOADtubtdo8llTaJy7HwBMeLNSSo2N5QIAgklslK1+Ir8r6CA==",
       "license": "MIT"
     },
     "node_modules/tailwindcss-animate": {
@@ -8919,9 +8774,9 @@
       }
     },
     "node_modules/tapable": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.3.tgz",
-      "integrity": "sha512-ZL6DDuAlRlLGghwcfmSn9sK3Hr6ArtyudlSAiCqQ6IfE+b+HHbydbYDIG15IfS5do+7XQQBdBiubF/cV2dnDzg==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -8933,17 +8788,16 @@
       }
     },
     "node_modules/tar": {
-      "version": "7.4.3",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-7.4.3.tgz",
-      "integrity": "sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==",
+      "version": "7.5.1",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.1.tgz",
+      "integrity": "sha512-nlGpxf+hv0v7GkWBK2V9spgactGOp0qvfWRxUMjqHyzrt3SgwE48DIv/FhqPHJYLHpgW1opq3nERbz5Anq7n1g==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
         "@isaacs/fs-minipass": "^4.0.0",
         "chownr": "^3.0.0",
         "minipass": "^7.1.2",
-        "minizlib": "^3.0.1",
-        "mkdirp": "^3.0.1",
+        "minizlib": "^3.1.0",
         "yallist": "^5.0.0"
       },
       "engines": {
@@ -9167,9 +9021,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.9.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz",
-      "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -9349,9 +9203,9 @@
       }
     },
     "node_modules/use-sync-external-store": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
-      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
       "license": "MIT",
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"

From f7e90814268125d236d008f4c1dfa3b2ad0874ef Mon Sep 17 00:00:00 2001
From: JoaoGustavo-dev <jgcmendonca@gmail.com>
Date: Fri, 3 Oct 2025 09:18:30 +0000
Subject: [PATCH 08/19] revert 97acdf79cf850fcf5985ec6c2d844e22b4fd5e60

revert Resolve merge conflicts - keep current branch version
---
 .../configuracao/agenda/page.tsx              |   34 +
 .../configuracao/comunicacao/page.tsx         |   36 +
 .../configuracao/notificacoes/page.tsx        |   25 +
 .../configuracao/seguranca/page.tsx           |   33 +
 .../configuracao/usuarios/page.tsx            |   37 +
 susconecta/app/profissional/page.tsx          | 1582 +++++++++++------
 susconecta/components/dashboard/sidebar.tsx   |    2 +
 7 files changed, 1237 insertions(+), 512 deletions(-)
 create mode 100644 susconecta/app/(main-routes)/configuracao/agenda/page.tsx
 create mode 100644 susconecta/app/(main-routes)/configuracao/comunicacao/page.tsx
 create mode 100644 susconecta/app/(main-routes)/configuracao/notificacoes/page.tsx
 create mode 100644 susconecta/app/(main-routes)/configuracao/seguranca/page.tsx
 create mode 100644 susconecta/app/(main-routes)/configuracao/usuarios/page.tsx

diff --git a/susconecta/app/(main-routes)/configuracao/agenda/page.tsx b/susconecta/app/(main-routes)/configuracao/agenda/page.tsx
new file mode 100644
index 0000000..0b55e39
--- /dev/null
+++ b/susconecta/app/(main-routes)/configuracao/agenda/page.tsx
@@ -0,0 +1,34 @@
+"use client"
+
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
+
+export default function AgendaConfigPage() {
+  return (
+    <div className="p-6 space-y-6">
+      <h1 className="text-2xl font-bold">Configurações da Agenda</h1>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Tempo padrão de consulta</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <select className="border rounded p-2">
+            <option>15 minutos</option>
+            <option>30 minutos</option>
+            <option>1 hora</option>
+          </select>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Horário de funcionamento</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <input type="time" className="border rounded p-2 mr-2" /> até
+          <input type="time" className="border rounded p-2 ml-2" />
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/susconecta/app/(main-routes)/configuracao/comunicacao/page.tsx b/susconecta/app/(main-routes)/configuracao/comunicacao/page.tsx
new file mode 100644
index 0000000..9da30df
--- /dev/null
+++ b/susconecta/app/(main-routes)/configuracao/comunicacao/page.tsx
@@ -0,0 +1,36 @@
+"use client"
+
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
+
+export default function ComunicacaoConfigPage() {
+  return (
+    <div className="p-6 space-y-6">
+      <h1 className="text-2xl font-bold">Configurações de Comunicação</h1>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Modelo de Lembrete</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <textarea
+            className="w-full border rounded p-2"
+            placeholder="Exemplo: Olá {nome}, sua consulta está marcada para {data} às {hora}."
+          />
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Frequência de Lembretes</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <select className="border rounded p-2">
+            <option>24 horas antes</option>
+            <option>4 horas antes</option>
+            <option>1 hora antes</option>
+          </select>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/susconecta/app/(main-routes)/configuracao/notificacoes/page.tsx b/susconecta/app/(main-routes)/configuracao/notificacoes/page.tsx
new file mode 100644
index 0000000..cf050a5
--- /dev/null
+++ b/susconecta/app/(main-routes)/configuracao/notificacoes/page.tsx
@@ -0,0 +1,25 @@
+    "use client"
+
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
+
+export default function NotificacoesConfigPage() {
+  return (
+    <div className="p-6 space-y-6">
+      <h1 className="text-2xl font-bold">Configurações de Notificações</h1>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Alertas Internos</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <label className="flex items-center space-x-2">
+            <input type="checkbox" className="h-4 w-4" /> <span>Notificar quando consulta for cancelada</span>
+          </label>
+          <label className="flex items-center space-x-2 mt-2">
+            <input type="checkbox" className="h-4 w-4" /> <span>Notificar quando novo paciente for cadastrado</span>
+          </label>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/susconecta/app/(main-routes)/configuracao/seguranca/page.tsx b/susconecta/app/(main-routes)/configuracao/seguranca/page.tsx
new file mode 100644
index 0000000..d43de85
--- /dev/null
+++ b/susconecta/app/(main-routes)/configuracao/seguranca/page.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
+
+export default function SegurancaConfigPage() {
+  return (
+    <div className="p-6 space-y-6">
+      <h1 className="text-2xl font-bold">Configurações de Segurança</h1>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Alterar Senha</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <input type="password" placeholder="Senha atual" className="w-full border rounded p-2 mb-2" />
+          <input type="password" placeholder="Nova senha" className="w-full border rounded p-2 mb-2" />
+          <input type="password" placeholder="Confirmar nova senha" className="w-full border rounded p-2" />
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Política de Dados (LGPD)</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <label className="flex items-center space-x-2">
+            <input type="checkbox" className="h-4 w-4" /> <span>Solicitar consentimento do paciente no cadastro</span>
+          </label>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/susconecta/app/(main-routes)/configuracao/usuarios/page.tsx b/susconecta/app/(main-routes)/configuracao/usuarios/page.tsx
new file mode 100644
index 0000000..21db097
--- /dev/null
+++ b/susconecta/app/(main-routes)/configuracao/usuarios/page.tsx
@@ -0,0 +1,37 @@
+"use client"
+
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
+
+export default function UsuariosConfigPage() {
+  return (
+    <div className="p-6 space-y-6">
+      <h1 className="text-2xl font-bold">Gerenciamento de Usuários</h1>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Usuários da Clínica</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <table className="w-full border">
+            <thead>
+              <tr className="bg-gray-100">
+                <th className="p-2 text-left">Nome</th>
+                <th className="p-2 text-left">Email</th>
+                <th className="p-2 text-left">Permissão</th>
+                <th className="p-2">Ações</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td className="p-2">Maria Silva</td>
+                <td className="p-2">maria@clinica.com</td>
+                <td className="p-2">Secretária</td>
+                <td className="p-2">[Editar] [Remover]</td>
+              </tr>
+            </tbody>
+          </table>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/susconecta/app/profissional/page.tsx b/susconecta/app/profissional/page.tsx
index eb697c3..5f1ffce 100644
--- a/susconecta/app/profissional/page.tsx
+++ b/susconecta/app/profissional/page.tsx
@@ -2,8 +2,6 @@
 
 import React, { useState, useRef } from "react";
 import SignatureCanvas from "react-signature-canvas";
-import ReactQuill from "react-quill";
-import "react-quill/dist/quill.snow.css";
 import Link from "next/link";
 import ProtectedRoute from "@/components/ProtectedRoute";
 import { useAuth } from "@/hooks/useAuth";
@@ -30,12 +28,6 @@ import {
 import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
 import { User, FolderOpen, X, Users, MessageSquare, ClipboardList, Plus, Edit, Trash2, ChevronLeft, ChevronRight, Clock, FileCheck, Upload, Download, Eye, History, Stethoscope, Pill, Activity, Search } from "lucide-react"
 import { Calendar as CalendarIcon, FileText, Settings } from "lucide-react";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
 import {
   Tooltip,
   TooltipContent,
@@ -43,6 +35,8 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 
+
+import dynamic from "next/dynamic";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin from "@fullcalendar/interaction";
@@ -180,185 +174,6 @@ const ProfissionalPage = () => {
   const [selectedEvent, setSelectedEvent] = useState<any>(null);
   const [currentCalendarDate, setCurrentCalendarDate] = useState(new Date());
 
-  // Estados para o gerenciamento de laudos
-  const [laudosData, setLaudosData] = useState<any[]>([
-    {
-      id: "30648642",
-      data: "23/07/2025",
-      preco: "25/07/2025",
-      recipient: "Ana Souza",
-      execSolicitante: "Dr. Carlos Andrade",
-      exameTipo: "Avaliação Cardiológica Completa",
-      status: "Entregue",
-      cid: "I25.1",
-      diagnostico: "Doença aterosclerótica do coração com angina de peito",
-      conclusao: "Paciente apresenta quadro de doença arterial coronariana estável. Recomendado tratamento medicamentoso e acompanhamento regular.",
-      conteudo: `**HISTÓRIA CLÍNICA:**
-Paciente do sexo feminino, 42 anos, procurou atendimento devido a episódios de dor torácica aos esforços, com duração de aproximadamente 5 minutos, que melhora com repouso. Relata também dispneia aos médios esforços e palpitações ocasionais.
-
-**ANTECEDENTES:**
-- Hipertensão arterial sistêmica há 8 anos
-- Dislipidemia
-- Histórico familiar de doença arterial coronariana (pai)
-- Sedentarismo
-
-**EXAME FÍSICO:**
-- PA: 145/90 mmHg
-- FC: 76 bpm
-- Peso: 68 kg, Altura: 1,62 m, IMC: 25,9 kg/m²
-- Ausculta cardíaca: bulhas normofonéticas, sem sopros
-- Ausculta pulmonar: murmúrio vesicular presente bilateralmente
-
-**EXAMES COMPLEMENTARES:**
-- ECG: ritmo sinusal, sem alterações isquêmicas
-- Ecocardiograma: função sistólica preservada (FEVE: 65%), sem alterações segmentares
-- Teste ergométrico: positivo para isquemia miocárdica
-
-**CONDUTA:**
-- Otimização do tratamento anti-hipertensivo
-- Estatina para controle da dislipidemia  
-- Antiagregante plaquetário
-- Orientações sobre estilo de vida
-- Retorno em 30 dias`
-    },
-    {
-      id: "30645947",
-      data: "24/07/2025", 
-      preco: "25/07/2025",
-      recipient: "Bruno Lima",
-      execSolicitante: "Dr. Carlos Andrade",
-      exameTipo: "Avaliação Dermatológica - Lesões Pigmentadas",
-      status: "Entregue",
-      cid: "D22.9",
-      diagnostico: "Nevo melanocítico benigno",
-      conclusao: "Lesões pigmentadas benignas. Recomendado acompanhamento dermatológico anual e uso de protetor solar.",
-      conteudo: `**HISTÓRIA CLÍNICA:**
-Paciente masculino, 33 anos, comparece para avaliação de múltiplas lesões pigmentadas pelo corpo, algumas com crescimento recente. Nega sintomas como prurido, sangramento ou mudanças de coloração. Histórico de exposição solar intensa durante a infância e adolescência.
-
-**ANTECEDENTES:**
-- Fototipo II (pele clara, queima facilmente)
-- Múltiplas queimaduras solares na infância
-- Histórico familiar negativo para melanoma
-- Uso irregular de protetor solar
-
-**EXAME FÍSICO:**
-**Dermatoscopia realizada em 12 lesões:**
-
-*Lesão dorso (2cm superior ao ombro direito):*
-- Mácula acastanhada, 4mm, bordas regulares
-- Padrão dermatoscópico: rede pigmentar homogênea
-- Score ABCD: 2,5 (baixo risco)
-
-*Lesão região escapular esquerda:*
-- Pápula pigmentada, 3mm, simétrica
-- Padrão globular homogêneo
-- Sem sinais de malignidade
-
-*Demais lesões:*
-- Características benignas similares
-- Ausência de critérios de malignidade
-- Padrões dermatoscópicos típicos de nevos
-
-**CONDUTA:**
-- Mapeamento corporal documentado
-- Fotoproteção rigorosa (FPS 60+)
-- Autoexame mensal orientado
-- Reavaliação dermatoscópica em 12 meses
-- Biópsia desnecessária no momento atual`
-    },
-    {
-      id: "30649123",
-      data: "25/07/2025",
-      preco: "26/07/2025", 
-      recipient: "Carla Menezes",
-      execSolicitante: "Dr. Carlos Andrade",
-      exameTipo: "Avaliação Cardiológica - Insuficiência Cardíaca",
-      status: "Rascunho",
-      cid: "I50.9",
-      diagnostico: "Insuficiência cardíaca não especificada",
-      conclusao: "Insuficiência cardíaca classe funcional II. Necessário ajuste da medicação e monitorização rigorosa.",
-      conteudo: `**HISTÓRIA CLÍNICA:**
-Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há 6 meses, associada a edema de membros inferiores e fadiga. Nega dor torácica, palpitações ou síncope.
-
-**ANTECEDENTES:**
-- Hipertensão arterial há 15 anos
-- Diabetes mellitus tipo 2 há 10 anos
-- Infarto agudo do miocárdio há 3 anos
-- Tabagismo pregresso (parou há 5 anos)
-
-**EXAME FÍSICO:**
-- PA: 130/80 mmHg
-- FC: 88 bpm (irregular)
-- Edema ++/4+ em MMII
-- Estase jugular a 45°
-- Ausculta cardíaca: B3 audível, sopro sistólico 2+/6+
-- Crepitações bibasais
-
-**EXAMES:**
-- BNP: 850 pg/ml (elevado)
-- Ecocardiograma: FEVE 35%, dilatação de VE
-- RX tórax: cardiomegalia, congestão pulmonar
-
-**MEDICAÇÕES EM USO:**
-- Enalapril 10mg 2x/dia
-- Carvedilol 6,25mg 2x/dia  
-- Furosemida 40mg/dia
-- Metformina 850mg 2x/dia
-
-**CONDUTA PROPOSTA:**
-- Ajuste das medicações para IC
-- Restrição de sódio (<2g/dia)
-- Controle rigoroso de peso diário
-- Retorno em 15 dias`
-    }
-  ]);
-  
-  const [filtroStatus, setFiltroStatus] = useState("todos");
-  const [buscarTexto, setBuscarTexto] = useState("");
-  const [dataInicio, setDataInicio] = useState("");
-  const [dataFim, setDataFim] = useState("");
-  const [laudoAtivo, setLaudoAtivo] = useState<any>(null);
-  const [modoEdicao, setModoEdicao] = useState<'novo' | 'editar' | null>(null);
-
-  // Estados para o editor de laudo
-  const [editorLaudo, setEditorLaudo] = useState({
-    pacienteId: "",
-    pacienteNome: "",
-    pacienteCpf: "",
-    pacienteIdade: "",
-    cid: "",
-    diagnostico: "",
-    conclusao: "",
-    conteudo: "",
-    imagens: [] as string[],
-    pdfAnexos: [] as string[],
-    incluirData: true,
-    incluirAssinatura: true,
-    status: "Rascunho"
-  });
-  const [assinaturaLaudo, setAssinaturaLaudo] = useState<string | null>(null);
-  const [previewLaudo, setPreviewLaudo] = useState(false);
-  const [abaAtiva, setAbaAtiva] = useState<'editor' | 'imagens' | 'anexos' | 'preview'>('editor');
-  const [laudoVisualizacao, setLaudoVisualizacao] = useState<any>(null);
-  const sigCanvasLaudoRef = useRef<any>(null);
-
-  // Modelos e frases prontas
-  const modelosTexto = {
-    "Exame Normal": "O exame realizado apresentou parâmetros dentro da normalidade, sem alterações significativas detectadas.",
-    "Acompanhamento": "Recomenda-se acompanhamento médico regular para monitoramento da evolução do quadro clínico.",
-    "Alterações Leves": "Foram observadas alterações leves que requerem acompanhamento, sem indicação de intervenção imediata.",
-    "Urgente": "Os achados indicam necessidade de avaliação médica urgente e início de tratamento adequado."
-  };
-
-  const camposDinamicos = [
-    { label: "Nome do Paciente", value: "{NOME_PACIENTE}" },
-    { label: "Idade", value: "{IDADE}" },
-    { label: "CPF", value: "{CPF}" },
-    { label: "Data Atual", value: "{DATA_ATUAL}" },
-    { label: "CID", value: "{CID}" },
-    { label: "Médico", value: "{MEDICO}" }
-  ];
-
   const handleSave = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
     console.log("Laudo salvo!");
@@ -750,7 +565,13 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
   };
 
   
-  function PacientesSection({ handleAbrirProntuario, setActiveSection }) {
+  function PacientesSection({
+    handleAbrirProntuario,
+    setActiveSection,
+  }: {
+    handleAbrirProntuario: (paciente: any) => void;
+    setActiveSection: (section: string) => void;
+  }) {
     // Estados para busca de pacientes
      const [buscaPaciente, setBuscaPaciente] = useState("");
   const [pacientesBusca, setPacientesBusca] = useState<any[]>([]);
@@ -809,7 +630,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
         <h2 className="text-2xl font-bold mb-4">Gerenciamento de Pacientes</h2>
         
         {/* Campo de busca */}
-        <div className="mb-6 p-4 bg-gray-50 rounded-lg">
+        <div className="mb-6 p-4 bg-muted rounded-lg">
           <h3 className="text-lg font-semibold mb-3">Buscar Paciente</h3>
           <div className="flex gap-2">
             <div className="flex-1">
@@ -852,8 +673,8 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
           
           {/* Resultados da busca */}
           {erroBusca && (
-            <div className="mt-3 p-3 bg-red-50 border border-red-200 rounded-md">
-              <p className="text-red-700 text-sm">{erroBusca}</p>
+            <div className="mt-3 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md">
+              <p className="text-red-700 dark:text-red-300 text-sm">{erroBusca}</p>
             </div>
           )}
           
@@ -862,10 +683,10 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
               <h4 className="text-md font-medium mb-2">Resultados da busca ({pacientesBusca.length}):</h4>
               <div className="space-y-2">
                 {pacientesBusca.map((paciente, index) => (
-                  <div key={index} className="flex items-center justify-between p-3 bg-white border rounded-lg hover:shadow-sm">
+                  <div key={index} className="flex items-center justify-between p-3 bg-card border rounded-lg hover:shadow-sm">
                     <div>
                       <p className="font-medium">{paciente.nome}</p>
-                      <p className="text-sm text-gray-600">CPF: {paciente.cpf} • Idade: {paciente.idade} anos</p>
+                      <p className="text-sm text-muted-foreground">CPF: {paciente.cpf} • Idade: {paciente.idade} anos</p>
                     </div>
                     <Button
                       size="sm"
@@ -1829,257 +1650,1064 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
 
   
   const renderLaudosSection = () => (
-    <section>
-      <LaudoEditor />
-    </section>
-  );
-// --- LaudoEditor COMPONENT ---
-function LaudoEditor() {
-  
-  const pacientes = [
-    { nome: "Ana Souza", cpf: "123.456.789-00", idade: 32, sexo: "Feminino" },
-    { nome: "Bruno Lima", cpf: "987.654.321-00", idade: 45, sexo: "Masculino" },
-    { nome: "Carla Menezes", cpf: "111.222.333-44", idade: 28, sexo: "Feminino" },
-  ];
-
-  const [conteudo, setConteudo] = useState("");
-  const [pacienteSelecionado, setPacienteSelecionado] = useState<any>(null);
-  const [cid, setCid] = useState("");
-  const [imagem, setImagem] = useState<string | null>(null);
-  const [assinatura, setAssinatura] = useState<string | null>(null);
-  const sigCanvasRef = useRef<any>(null);
-  const [laudos, setLaudos] = useState<any[]>([]);
-  const [preview, setPreview] = useState(false);
-
-  
-  const handleSelectPaciente = (paciente: any) => {
-    setPacienteSelecionado(paciente);
-  };
-
-  const limparPaciente = () => setPacienteSelecionado(null);
-
-  const salvarLaudo = (status: string) => {
-    if (!pacienteSelecionado) {
-      alert('Selecione um paciente.');
-      return;
-    }
-    const novoLaudo = {
-      paciente: pacienteSelecionado.nome,
-      cpf: pacienteSelecionado.cpf,
-      idade: pacienteSelecionado.idade,
-      sexo: pacienteSelecionado.sexo,
-      cid,
-      conteudo,
-      imagem,
-      assinatura,
-      data: new Date().toLocaleString(),
-      status
-    };
-    setLaudos(prev => [novoLaudo, ...prev]);
-    setPacienteSelecionado(null); setCid(""); setConteudo(""); setImagem(null); setAssinatura(null);
-    if (sigCanvasRef.current) sigCanvasRef.current.clear();
-  };
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-primary/5 to-white p-2 md:p-4">
-      <div className="max-w-2xl mx-auto">
-        <div className="bg-white border border-primary/10 shadow-lg rounded-xl p-4 md:p-6 mb-6">
-          <h2 className="text-2xl font-bold text-primary mb-4 text-center tracking-tight">Laudo Médico</h2>
-          
-          {!pacienteSelecionado ? (
-            <div className="flex flex-col items-center justify-center py-8 px-1 bg-white rounded-xl shadow-sm">
-              <div className="mb-2">
-                <svg width="40" height="40" fill="none" viewBox="0 0 24 24" className="mx-auto text-gray-400">
-                  <circle cx="12" cy="8" r="4" stroke="currentColor" strokeWidth="2"/>
-                  <path d="M4 20c0-2.5 3.5-4.5 8-4.5s8 2 8 4.5" stroke="currentColor" strokeWidth="2"/>
-                </svg>
-              </div>
-              <h2 className="text-lg font-bold text-center text-gray-800 mb-1">Selecionar Paciente</h2>
-              <p className="text-gray-500 text-center mb-4 max-w-xs text-sm">Escolha um paciente para visualizar o prontuário completo</p>
-              <div className="w-full max-w-xs">
-                <label htmlFor="select-paciente" className="block text-sm font-medium text-gray-700 mb-1">Escolha o paciente:</label>
-                <div className="relative">
-                  <select
-                    id="select-paciente"
-                    className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-200 focus:border-blue-300 focus:outline-none bg-white text-sm text-gray-900 shadow-sm transition-all appearance-none"
-                    onChange={e => {
-                      const p = pacientes.find(p => p.cpf === e.target.value);
-                      if (p) handleSelectPaciente(p);
-                    }}
-                    defaultValue=""
-                  >
-                    <option value="" className="text-gray-400">Selecione um paciente...</option>
-                    {pacientes.map(p => (
-                      <option key={p.cpf} value={p.cpf}>{p.nome} - {p.cpf}</option>
-                    ))}
-                  </select>
-                  <span className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">
-                    <svg width="16" height="16" fill="none" viewBox="0 0 24 24"><path d="M12 14l-4-4h8l-4 4z" fill="currentColor"/></svg>
-                  </span>
-                </div>
-              </div>
-            </div>
-          ) : (
-            <div className="bg-primary/10 border border-primary/20 rounded-lg p-3 mb-4 flex flex-col md:flex-row md:items-center md:justify-between gap-2">
-              <div>
-                <div className="font-bold text-primary text-base mb-0.5">{pacienteSelecionado.nome}</div>
-                <div className="text-xs text-gray-700">CPF: {pacienteSelecionado.cpf}</div>
-                <div className="text-xs text-gray-700">Idade: {pacienteSelecionado.idade}</div>
-                <div className="text-xs text-gray-700">Sexo: {pacienteSelecionado.sexo}</div>
-              </div>
-              <button type="button" onClick={limparPaciente} className="px-3 py-1 rounded bg-red-100 text-red-700 hover:bg-red-200 font-semibold shadow text-xs">Trocar paciente</button>
-            </div>
-          )}
-          
-          <form className="space-y-4">
-            <div className="space-y-1">
-              <label className="block text-sm font-semibold text-primary">CID</label>
-              <input
-                type="text"
-                value={cid}
-                onChange={e => setCid(e.target.value)}
-                placeholder="Ex: I10, E11, etc."
-                className="w-full p-2 border border-primary/20 rounded-md focus:ring-2 focus:ring-primary/30 focus:outline-none text-sm"
-              />
-            </div>
-            <div className="space-y-1">
-              <label className="block text-sm font-semibold text-primary">Conteúdo do Laudo *</label>
-              {!preview ? (
-                <ReactQuill
-                  value={conteudo}
-                  onChange={setConteudo}
-                  modules={{
-                    toolbar: [
-                      ['bold', 'italic', 'underline'],
-                      [{ 'list': 'ordered' }, { 'list': 'bullet' }],
-                      [{ 'align': [] }],
-                      [{ 'size': ['small', false, 'large', 'huge'] }],
-                      ['clean']
-                    ]
-                  }}
-                  className="h-40 border border-primary/20 rounded-md text-sm"
-                />
-              ) : (
-                <div className="border border-primary/20 p-2 rounded-md bg-muted overflow-auto">
-                  <h3 className="text-base font-semibold mb-1 text-primary">Pré-visualização:</h3>
-                  <div dangerouslySetInnerHTML={{ __html: conteudo }} />
-                </div>
-              )}
-            </div>
-            <div className="space-y-1">
-              <label className="block text-sm font-semibold text-primary mb-2">Imagem (opcional)</label>
-              <div className="mb-2"></div>
-              <input
-                type="file"
-                accept="image/*"
-                onChange={e => {
-                  const file = e.target.files?.[0];
-                  if (file) {
-                    const reader = new FileReader();
-                    reader.onloadend = () => setImagem(reader.result as string);
-                    reader.readAsDataURL(file);
-                  } else {
-                    setImagem(null);
-                  }
-                }}
-                className="block w-full text-xs text-muted-foreground file:mr-2 file:py-1 file:px-2 file:rounded-md file:border-0 file:text-xs file:font-semibold file:bg-primary/10 file:text-primary hover:file:bg-primary/20"
-              />
-              {imagem && (
-                <img src={imagem} alt="Pré-visualização" className="mt-1 rounded-md max-h-20 border border-primary/20" />
-              )}
-            </div>
-            <div className="space-y-1">
-              <label className="block text-sm font-semibold text-primary">Assinatura Digital</label>
-              <div className="bg-muted rounded-md border border-primary/20 p-2 flex flex-col items-center">
-                <SignatureCanvas
-                  ref={sigCanvasRef}
-                  penColor="#0f172a"
-                  backgroundColor="#fff"
-                  canvasProps={{ width: 220, height: 60, className: "rounded-md border bg-white shadow" }}
-                  onEnd={() => setAssinatura(sigCanvasRef.current?.isEmpty() ? null : sigCanvasRef.current?.toDataURL())}
-                />
-                <div className="flex gap-2 mt-2">
-                  <button type="button" onClick={() => { sigCanvasRef.current?.clear(); setAssinatura(null); }} className="px-2 py-1 text-xs rounded-md bg-muted-foreground text-white hover:bg-muted font-semibold shadow">Limpar</button>
-                </div>
-                {assinatura && (
-                  <img src={assinatura} alt="Assinatura" className="mt-2 max-h-10 border rounded-md bg-white shadow" />
-                )}
-              </div>
-            </div>
-            <div className="flex flex-col md:flex-row gap-2 mt-4">
-              <button
-                type="button"
-                onClick={() => salvarLaudo("Rascunho")}
-                className="w-full md:w-1/3 flex items-center justify-center gap-1 bg-gray-100 text-gray-700 py-2 rounded-lg font-semibold text-base shadow-sm hover:bg-gray-200 transition-all border border-gray-200"
-              >
-                <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" strokeLinecap="round" strokeLinejoin="round"/></svg>
-                Salvar Rascunho
-              </button>
-              <button
-                type="button"
-                onClick={() => salvarLaudo("Entregue")}
-                className="w-full md:w-1/3 flex items-center justify-center gap-1 bg-primary text-white py-2 rounded-lg font-semibold text-base shadow-sm hover:bg-primary/90 transition-all border border-primary/20"
-              >
-                <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path d="M9 12l2 2l4-4" strokeLinecap="round" strokeLinejoin="round"/></svg>
-                Liberar Laudo
-              </button>
-              <button
-                type="button"
-                onClick={() => setPreview(!preview)}
-                className="w-full md:w-1/3 flex items-center justify-center gap-1 bg-white text-primary py-2 rounded-lg font-semibold text-base shadow-sm hover:bg-primary/10 transition-all border border-primary/20"
-              >
-                <svg className="w-4 h-4 text-primary" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path d="M15 10l4.553 2.276A2 2 0 0121 14.09V17a2 2 0 01-2 2H5a2 2 0 01-2-2v-2.91a2 2 0 01.447-1.814L8 10m7-4v4m0 0l-4 4m4-4l4 4" strokeLinecap="round" strokeLinejoin="round"/></svg>
-                Pré-visualizar Laudo
-              </button>
-            </div>
-          </form>
-        </div>
-        
-        <div className="bg-white border border-primary/10 shadow-lg rounded-xl p-4 md:p-6">
-          <h3 className="text-xl font-bold text-primary mb-3 text-center">Histórico de Laudos</h3>
-          {laudos.length === 0 ? (
-            <p className="text-muted-foreground text-center text-sm">Nenhum laudo registrado.</p>
-          ) : (
-            laudos.map((laudo: any, idx: number) => (
-              <div key={idx} className="border border-primary/20 rounded-2xl p-4 mb-6 bg-primary/5 shadow-sm">
-                <div className="flex flex-col md:flex-row md:justify-between md:items-center mb-3 gap-2">
-                  <div className="flex items-center gap-2">
-                    <svg className="w-7 h-7 text-primary" fill="none" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" stroke="currentColor" strokeWidth="2"/><path d="M4 20c0-2.5 3.5-4.5 8-4.5s8 2 8 4.5" stroke="currentColor" strokeWidth="2"/></svg>
-                    <span className="font-bold text-lg md:text-xl text-primary drop-shadow-sm">{laudo.paciente}</span>
-                  </div>
-                  <span className="text-base text-gray-500 font-medium">CPF: {laudo.cpf}</span>
-                </div>
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-2 mb-2 text-sm text-gray-700">
-                  <div>Idade: <span className="font-medium">{laudo.idade}</span></div>
-                  <div>Sexo: <span className="font-medium">{laudo.sexo}</span></div>
-                  <div>Status: <span className="font-medium">{laudo.status}</span></div>
-                  <div>CID: <span className="font-medium">{laudo.cid}</span></div>
-                  <div>Data: <span className="font-medium">{laudo.data}</span></div>
-                </div>
-                {laudo.assinatura && (
-                  <div className="mb-2">
-                    <p className="font-semibold text-primary text-sm mb-1">Assinatura Digital:</p>
-                    <img src={laudo.assinatura} alt="Assinatura digital" className="rounded-lg max-h-16 border bg-white shadow" />
-                  </div>
-                )}
-                {laudo.imagem && (
-                  <div className="mb-2">
-                    <p className="font-semibold text-primary text-sm mb-1">Imagem:</p>
-                    <img src={laudo.imagem} alt="Imagem do laudo" className="rounded-lg max-h-20 border border-primary/20 mb-1" />
-                  </div>
-                )}
-                <div className="mb-1">
-                  <p className="font-semibold text-primary text-sm mb-1">Conteúdo:</p>
-                  <div className="text-sm text-gray-800" dangerouslySetInnerHTML={{ __html: laudo.conteudo }} />
-                </div>
-              </div>
-            ))
-          )}
-        </div>
-      </div>
+    <div className="space-y-6">
+      <LaudoManager />
     </div>
   );
-}
+
+  // --- NOVO SISTEMA DE LAUDOS COMPLETO ---
+  function LaudoManager() {
+    const [pacientesDisponiveis] = useState([
+      { id: "95170038", nome: "Ana Souza", cpf: "123.456.789-00", idade: 42, sexo: "Feminino" },
+      { id: "93203056", nome: "Bruno Lima", cpf: "987.654.321-00", idade: 33, sexo: "Masculino" },
+      { id: "92953542", nome: "Carla Menezes", cpf: "111.222.333-44", idade: 67, sexo: "Feminino" },
+    ]);
+
+    const [laudos] = useState([
+      { 
+        id: "306494942", 
+        data: "29/07/2025", 
+        prazo: "29/07/2025", 
+        paciente: { id: "95170038", nome: "Ana Souza", cpf: "123.456.789-00", idade: 42, sexo: "Feminino" },
+        executante: "Carlos Andrade",
+        exame: "Ecocardiograma",
+        status: "Entregue",
+        urgente: true,
+        especialidade: "Cardiologia",
+        conteudo: `**ECOCARDIOGRAMA TRANSTORÁCICO**
+
+**Dados do Paciente:**
+Nome: Ana Souza
+Idade: 42 anos
+Sexo: Feminino
+
+**Indicação Clínica:**
+Investigação de sopro cardíaco
+
+**Técnica:**
+Ecocardiograma transtorácico bidimensional com Doppler colorido e espectral.
+
+**Resultados:**
+- Átrio esquerdo: dimensões normais
+- Ventrículo esquerdo: função sistólica preservada, FEVE = 65%
+- Valvas cardíacas: sem alterações significativas
+- Pericárdio: sem derrame
+
+**Conclusão:**
+Exame ecocardiográfico dentro dos limites da normalidade.
+
+**CID:** I25.9`,
+        cid: "I25.9",
+        diagnostico: "Exame ecocardiográfico normal",
+        conclusao: "Função cardíaca preservada, sem alterações estruturais significativas."
+      },
+      { 
+        id: "306463987", 
+        data: "29/07/2025", 
+        prazo: "29/07/2025", 
+        paciente: { id: "93203056", nome: "Bruno Lima", cpf: "987.654.321-00", idade: 33, sexo: "Masculino" },
+        executante: "Carlos Andrade",
+        exame: "Eletrocardiograma",
+        status: "Entregue",
+        urgente: true,
+        especialidade: "Cardiologia",
+        conteudo: `**ELETROCARDIOGRAMA DE REPOUSO**
+
+**Dados do Paciente:**
+Nome: Bruno Lima
+Idade: 33 anos
+Sexo: Masculino
+
+**Indicação Clínica:**
+Dor precordial atípica
+
+**Técnica:**
+Eletrocardiograma de 12 derivações em repouso.
+
+**Resultados:**
+- Ritmo: sinusal regular
+- Frequência cardíaca: 72 bpm
+- Eixo elétrico: normal
+- Intervalos PR, QRS e QT: dentro dos limites normais
+- Ondas Q patológicas: ausentes
+- Alterações de ST-T: não observadas
+
+**Conclusão:**
+Eletrocardiograma normal.
+
+**CID:** Z01.8`,
+        cid: "Z01.8",
+        diagnostico: "ECG normal",
+        conclusao: "Traçado eletrocardiográfico dentro dos parâmetros de normalidade."
+      },
+      { 
+        id: "306452545", 
+        data: "29/07/2025", 
+        prazo: "29/07/2025", 
+        paciente: { id: "92953542", nome: "Carla Menezes", cpf: "111.222.333-44", idade: 67, sexo: "Feminino" },
+        executante: "Carlos Andrade",
+        exame: "Dermatoscopia",
+        status: "Entregue",
+        urgente: true,
+        especialidade: "Dermatologia",
+        conteudo: `**DERMATOSCOPIA DIGITAL**
+
+**Dados do Paciente:**
+Nome: Carla Menezes
+Idade: 67 anos
+Sexo: Feminino
+
+**Indicação Clínica:**
+Avaliação de lesão pigmentada em dorso
+
+**Técnica:**
+Dermatoscopia digital com magnificação de 10x e 20x.
+
+**Localização:**
+Região dorsal, região escapular direita
+
+**Achados Dermatoscópicos:**
+- Lesão melanocítica benigna
+- Padrão reticular típico
+- Bordas regulares e simétricas
+- Pigmentação homogênea
+- Ausência de estruturas atípicas
+
+**Conclusão:**
+Nevo melanocítico benigno. Seguimento clínico recomendado.
+
+**CID:** D22.5`,
+        cid: "D22.5",
+        diagnostico: "Nevo melanocítico benigno",
+        conclusao: "Lesão benigna, recomenda-se acompanhamento dermatológico de rotina."
+      },
+    ]);
+
+    const [activeTab, setActiveTab] = useState("entregue");
+    const [laudoSelecionado, setLaudoSelecionado] = useState<any>(null);
+    const [isViewing, setIsViewing] = useState(false);
+    const [isCreatingNew, setIsCreatingNew] = useState(false);
+
+    return (
+      <div className="space-y-6">
+        {/* Header */}
+        <div className="bg-card rounded-lg p-6 shadow-md">
+          <div className="flex items-center justify-between">
+            <div>
+              <h1 className="text-2xl font-bold text-foreground mb-2">Gerenciamento de Laudo</h1>
+              <p className="text-muted-foreground">Nesta seção você pode gerenciar todos os laudos gerados através da integração.</p>
+            </div>
+            <Button 
+              onClick={() => setIsCreatingNew(true)}
+              className="flex items-center gap-2"
+            >
+              <Plus className="w-4 h-4" />
+              Novo Laudo
+            </Button>
+          </div>
+        </div>
+
+        {/* Tabs */}
+        <div className="bg-card rounded-lg shadow-md">
+          <div className="flex border-b border-border">
+            <button
+              onClick={() => setActiveTab("descobrir")}
+              className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
+                activeTab === "descobrir"
+                  ? "border-blue-500 text-blue-600"
+                  : "border-transparent text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              A descobrir
+            </button>
+            <button
+              onClick={() => setActiveTab("liberado")}
+              className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
+                activeTab === "liberado"
+                  ? "border-blue-500 text-blue-600"
+                  : "border-transparent text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              Liberado
+            </button>
+            <button
+              onClick={() => setActiveTab("entregue")}
+              className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
+                activeTab === "entregue"
+                  ? "border-blue-500 text-blue-600"
+                  : "border-transparent text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              Entregue
+            </button>
+          </div>
+
+          {/* Filtros */}
+          <div className="p-4 border-b border-border">
+            <div className="flex flex-wrap items-center gap-4">
+              <div className="relative flex-1 min-w-[200px]">
+                <Input 
+                  placeholder="Buscar paciente/pedido"
+                  className="pl-10"
+                />
+                <svg className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                </svg>
+              </div>
+              
+              <div className="flex items-center gap-2">
+                <div className="flex items-center gap-1 text-sm">
+                  <CalendarIcon className="w-4 h-4" />
+                  <span>01/07/2025</span>
+                  <span>-</span>
+                  <span>31/07/2025</span>
+                </div>
+              </div>
+
+              <div className="flex gap-2">
+                <Button variant="outline" size="sm">Hoje</Button>
+                <Button variant="outline" size="sm">Semana</Button>
+                <Button variant="default" size="sm">Mês</Button>
+              </div>
+
+              <Button variant="outline" size="sm">
+                <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.207A1 1 0 013 6.5V4z" />
+                </svg>
+                Filtros
+              </Button>
+
+              <Button variant="outline" size="sm">
+                <Search className="w-4 h-4 mr-1" />
+                Pesquisar
+              </Button>
+
+              <Button variant="default" size="sm">
+                <Download className="w-4 h-4 mr-1" />
+                Exportar
+              </Button>
+            </div>
+          </div>
+
+          {/* Tabela */}
+          <div className="overflow-x-auto">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Pedido</TableHead>
+                  <TableHead>Data</TableHead>
+                  <TableHead>Prazo</TableHead>
+                  <TableHead>Paciente</TableHead>
+                  <TableHead>Executante/Solicitante</TableHead>
+                  <TableHead>Exame/Classificação</TableHead>
+                  <TableHead>Ação</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {laudos.map((laudo) => (
+                  <TableRow key={laudo.id}>
+                    <TableCell>
+                      <div className="flex items-center gap-2">
+                        {laudo.urgente && (
+                          <div className="w-2 h-2 rounded-full bg-red-500"></div>
+                        )}
+                        <span className="font-mono text-sm">{laudo.id}</span>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <div className="text-sm">
+                        <div>{laudo.data}</div>
+                        <div className="text-xs text-muted-foreground">11:48</div>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <div className="text-sm">
+                        <div>{laudo.prazo}</div>
+                        <div className="text-xs text-muted-foreground">11:48</div>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <div className="text-sm">
+                        <div className="flex items-center gap-1">
+                          <User className="w-3 h-3" />
+                          <span className="font-mono text-xs">{laudo.paciente.id}</span>
+                        </div>
+                        <div className="font-medium">{laudo.paciente.nome}</div>
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-sm">{laudo.executante}</TableCell>
+                    <TableCell className="text-sm">{laudo.exame || "-"}</TableCell>
+                    <TableCell>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => {
+                          setLaudoSelecionado(laudo);
+                          setIsViewing(true);
+                        }}
+                        className="flex items-center gap-1"
+                      >
+                        <Eye className="w-4 h-4" />
+                        Ver Laudo
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
+
+        {/* Visualizador de Laudo */}
+        {isViewing && laudoSelecionado && (
+          <LaudoViewer laudo={laudoSelecionado} onClose={() => setIsViewing(false)} />
+        )}
+
+        {/* Editor para Novo Laudo */}
+        {isCreatingNew && (
+          <LaudoEditor 
+            pacientes={pacientesDisponiveis} 
+            onClose={() => setIsCreatingNew(false)} 
+            isNewLaudo={true}
+          />
+        )}
+      </div>
+    );
+  }
+
+  // Visualizador de Laudo (somente leitura)
+  function LaudoViewer({ laudo, onClose }: { laudo: any; onClose: () => void }) {
+    return (
+      <div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4">
+        <div className="bg-background rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] overflow-hidden flex flex-col">
+          {/* Header */}
+          <div className="flex items-center justify-between p-4 border-b border-border">
+            <div>
+              <h2 className="text-xl font-bold text-foreground">Visualizar Laudo</h2>
+              <p className="text-sm text-muted-foreground">
+                Paciente: {laudo.paciente.nome} | Pedido: {laudo.id} | {laudo.especialidade}
+              </p>
+            </div>
+            <Button variant="ghost" size="sm" onClick={onClose}>
+              <X className="w-4 h-4" />
+            </Button>
+          </div>
+
+          {/* Content */}
+          <div className="flex-1 overflow-y-auto p-6">
+            <div className="max-w-2xl mx-auto bg-background border border-border rounded-lg p-6 shadow-sm">
+              {/* Header do Laudo */}
+              <div className="text-center mb-6">
+                <h2 className="text-lg font-bold">LAUDO MÉDICO - {laudo.especialidade.toUpperCase()}</h2>
+                <p className="text-sm text-muted-foreground mt-1">
+                  Data: {laudo.data}
+                </p>
+              </div>
+
+              {/* Dados do Paciente */}
+              <div className="mb-6 p-4 bg-muted rounded">
+                <h3 className="font-semibold mb-2">Dados do Paciente:</h3>
+                <div className="grid grid-cols-2 gap-4 text-sm">
+                  <p><strong>Nome:</strong> {laudo.paciente.nome}</p>
+                  <p><strong>ID:</strong> {laudo.paciente.id}</p>
+                  <p><strong>CPF:</strong> {laudo.paciente.cpf}</p>
+                  <p><strong>Idade:</strong> {laudo.paciente.idade} anos</p>
+                  <p><strong>Sexo:</strong> {laudo.paciente.sexo}</p>
+                  <p><strong>CID:</strong> {laudo.cid}</p>
+                </div>
+              </div>
+
+              {/* Conteúdo do Laudo */}
+              <div className="mb-6">
+                <div 
+                  className="prose prose-sm max-w-none"
+                  dangerouslySetInnerHTML={{ 
+                    __html: laudo.conteudo.replace(/\n/g, '<br>') 
+                  }}
+                />
+              </div>
+
+              {/* Diagnóstico e Conclusão */}
+              {laudo.diagnostico && (
+                <div className="mb-4 p-3 bg-blue-50 dark:bg-blue-950/20 rounded">
+                  <h4 className="font-semibold text-blue-800 dark:text-blue-200 mb-1">Diagnóstico:</h4>
+                  <p className="text-sm">{laudo.diagnostico}</p>
+                </div>
+              )}
+
+              {laudo.conclusao && (
+                <div className="mb-6 p-3 bg-green-50 dark:bg-green-950/20 rounded">
+                  <h4 className="font-semibold text-green-800 dark:text-green-200 mb-1">Conclusão:</h4>
+                  <p className="text-sm">{laudo.conclusao}</p>
+                </div>
+              )}
+
+              {/* Assinatura */}
+              <div className="mt-8 text-center border-t pt-4">
+                <div className="h-16 mb-2"></div>
+                <p className="text-sm font-semibold">Dr. Carlos Andrade</p>
+                <p className="text-xs text-muted-foreground">CRM 000000 - {laudo.especialidade}</p>
+                <p className="text-xs text-muted-foreground mt-1">Data: {laudo.data}</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Footer */}
+          <div className="p-4 border-t border-border bg-muted/20">
+            <div className="flex items-center justify-between">
+              <div className="text-xs text-muted-foreground">
+                Status: {laudo.status} | Executante: {laudo.executante}
+              </div>
+              <Button onClick={onClose}>
+                Fechar
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Editor de Laudo Avançado (para novos laudos)
+  function LaudoEditor({ pacientes, laudo, onClose, isNewLaudo }: { pacientes?: any[]; laudo?: any; onClose: () => void; isNewLaudo?: boolean }) {
+    const [activeTab, setActiveTab] = useState("editor");
+    const [content, setContent] = useState("");
+    const [showPreview, setShowPreview] = useState(false);
+    const [pacienteSelecionado, setPacienteSelecionado] = useState<any>(null);
+    const [campos, setCampos] = useState({
+      cid: "",
+      diagnostico: "",
+      conclusao: "",
+      exame: "",
+      especialidade: "",
+      mostrarData: true,
+      mostrarAssinatura: true
+    });
+    const [imagens, setImagens] = useState<any[]>([]);
+    const [templates] = useState([
+      "Exame normal, sem alterações significativas",
+      "Paciente em acompanhamento ambulatorial",
+      "Recomenda-se retorno em 30 dias",
+      "Alterações compatíveis com processo inflamatório",
+      "Resultado dentro dos parâmetros de normalidade",
+      "Recomendo seguimento com especialista"
+    ]);
+
+    const sigCanvasRef = useRef<any>(null);
+
+    const formatText = (type: string) => {
+      const textarea = document.querySelector('textarea') as HTMLTextAreaElement;
+      if (!textarea) return;
+
+      const start = textarea.selectionStart;
+      const end = textarea.selectionEnd;
+      const selectedText = textarea.value.substring(start, end);
+      
+      let formattedText = "";
+      switch(type) {
+        case "bold":
+          formattedText = selectedText ? `**${selectedText}**` : "**texto em negrito**";
+          break;
+        case "italic":
+          formattedText = selectedText ? `*${selectedText}*` : "*texto em itálico*";
+          break;
+        case "underline":
+          formattedText = selectedText ? `<u>${selectedText}</u>` : "<u>texto sublinhado</u>";
+          break;
+        case "list":
+          formattedText = selectedText ? `• ${selectedText}` : "• item da lista";
+          break;
+      }
+
+      const newText = textarea.value.substring(0, start) + formattedText + textarea.value.substring(end);
+      setContent(newText);
+    };
+
+    const insertTemplate = (template: string) => {
+      setContent(prev => prev ? `${prev}\n\n${template}` : template);
+    };
+
+    const insertCampo = (campo: string) => {
+      const placeholder = `{{${campo}}}`;
+      setContent(prev => prev ? `${prev} ${placeholder}` : placeholder);
+    };
+
+    const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const files = Array.from(e.target.files || []);
+      files.forEach(file => {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          setImagens(prev => [...prev, {
+            id: Date.now() + Math.random(),
+            name: file.name,
+            url: e.target?.result,
+            type: file.type
+          }]);
+        };
+        reader.readAsDataURL(file);
+      });
+    };
+
+    const processContent = (content: string) => {
+      const paciente = isNewLaudo ? pacienteSelecionado : laudo?.paciente;
+      return content
+        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+        .replace(/\*(.*?)\*/g, '<em>$1</em>')
+        .replace(/<u>(.*?)<\/u>/g, '<u>$1</u>')
+        .replace(/{{nome_paciente}}/g, paciente?.nome || '[NOME_PACIENTE]')
+        .replace(/{{idade_paciente}}/g, paciente?.idade?.toString() || '[IDADE]')
+        .replace(/{{sexo_paciente}}/g, paciente?.sexo || '[SEXO]')
+        .replace(/{{cid}}/g, campos.cid || '[CID]')
+        .replace(/{{diagnostico}}/g, campos.diagnostico || '[DIAGNÓSTICO]')
+        .replace(/{{conclusao}}/g, campos.conclusao || '[CONCLUSÃO]')
+        .replace(/\n/g, '<br>');
+    };
+
+    return (
+      <div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4">
+        <div className="bg-background rounded-lg shadow-xl w-full max-w-6xl max-h-[90vh] overflow-hidden flex flex-col">
+          {/* Header */}
+          <div className="border-b border-border">
+            <div className="flex items-center justify-between p-4">
+              <div>
+                <h2 className="text-xl font-bold text-foreground">
+                  {isNewLaudo ? "Novo Laudo Médico" : "Editor de Laudo"}
+                </h2>
+                {isNewLaudo ? (
+                  <p className="text-sm text-muted-foreground">
+                    Crie um novo laudo selecionando um paciente
+                  </p>
+                ) : (
+                  <p className="text-sm text-muted-foreground">
+                    Paciente: {laudo?.paciente?.nome} | Pedido: {laudo?.id}
+                  </p>
+                )}
+              </div>
+              <Button variant="ghost" size="sm" onClick={onClose}>
+                <X className="w-4 h-4" />
+              </Button>
+            </div>
+
+            {/* Seleção de Paciente (apenas para novos laudos) */}
+            {isNewLaudo && (
+              <div className="px-4 pb-4">
+                {!pacienteSelecionado ? (
+                  <div className="bg-muted rounded-lg p-4">
+                    <Label htmlFor="select-paciente" className="text-sm font-medium mb-2 block">
+                      Selecionar Paciente *
+                    </Label>
+                    <Select onValueChange={(value) => {
+                      const paciente = pacientes?.find(p => p.id === value);
+                      if (paciente) setPacienteSelecionado(paciente);
+                    }}>
+                      <SelectTrigger className="w-full">
+                        <SelectValue placeholder="Escolha um paciente para criar o laudo" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {pacientes?.map((paciente) => (
+                          <SelectItem key={paciente.id} value={paciente.id}>
+                            {paciente.nome} - CPF: {paciente.cpf}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                ) : (
+                  <div className="bg-primary/10 border border-primary/20 rounded-lg p-3 flex items-center justify-between">
+                    <div>
+                      <div className="font-semibold text-primary">{pacienteSelecionado.nome}</div>
+                      <div className="text-xs text-muted-foreground">
+                        CPF: {pacienteSelecionado.cpf} | Idade: {pacienteSelecionado.idade} anos | Sexo: {pacienteSelecionado.sexo}
+                      </div>
+                    </div>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => setPacienteSelecionado(null)}
+                    >
+                      Trocar Paciente
+                    </Button>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+
+          {/* Tabs */}
+          <div className="flex border-b border-border">
+            {isNewLaudo && (
+              <button
+                onClick={() => setActiveTab("info")}
+                className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+                  activeTab === "info"
+                    ? "border-blue-500 text-blue-600"
+                    : "border-transparent text-muted-foreground hover:text-foreground"
+                }`}
+              >
+                <User className="w-4 h-4 inline mr-1" />
+                Informações
+              </button>
+            )}
+            <button
+              onClick={() => setActiveTab("editor")}
+              className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+                activeTab === "editor"
+                  ? "border-blue-500 text-blue-600"
+                  : "border-transparent text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              <FileText className="w-4 h-4 inline mr-1" />
+              Editor
+            </button>
+            <button
+              onClick={() => setActiveTab("imagens")}
+              className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+                activeTab === "imagens"
+                  ? "border-blue-500 text-blue-600"
+                  : "border-transparent text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              <Upload className="w-4 h-4 inline mr-1" />
+              Imagens ({imagens.length})
+            </button>
+            <button
+              onClick={() => setActiveTab("campos")}
+              className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+                activeTab === "campos"
+                  ? "border-blue-500 text-blue-600"
+                  : "border-transparent text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              <Settings className="w-4 h-4 inline mr-1" />
+              Campos
+            </button>
+            <button
+              onClick={() => setShowPreview(!showPreview)}
+              className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+                showPreview
+                  ? "border-green-500 text-green-600"
+                  : "border-transparent text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              <Eye className="w-4 h-4 inline mr-1" />
+              {showPreview ? "Ocultar" : "Pré-visualização"}
+            </button>
+          </div>
+
+          {/* Content */}
+          <div className="flex-1 overflow-hidden flex">
+            {/* Left Panel */}
+            <div className="flex-1 flex flex-col">
+              {activeTab === "info" && isNewLaudo && (
+                <div className="flex-1 p-4 space-y-4">
+                  {!pacienteSelecionado ? (
+                    <div className="flex items-center justify-center h-full">
+                      <div className="text-center">
+                        <User className="w-12 h-12 mx-auto text-muted-foreground mb-4" />
+                        <p className="text-muted-foreground">Selecione um paciente primeiro</p>
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="space-y-6">
+                      <div>
+                        <h3 className="text-lg font-semibold mb-4">Informações do Exame</h3>
+                        
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                          <div>
+                            <Label htmlFor="especialidade">Especialidade *</Label>
+                            <Select onValueChange={(value) => setCampos(prev => ({ ...prev, especialidade: value }))}>
+                              <SelectTrigger>
+                                <SelectValue placeholder="Selecione a especialidade" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                <SelectItem value="Cardiologia">Cardiologia</SelectItem>
+                                <SelectItem value="Dermatologia">Dermatologia</SelectItem>
+                              </SelectContent>
+                            </Select>
+                          </div>
+
+                          <div>
+                            <Label htmlFor="tipo-exame">Tipo de Exame *</Label>
+                            <Input
+                              id="tipo-exame"
+                              value={campos.exame}
+                              onChange={(e) => setCampos(prev => ({ ...prev, exame: e.target.value }))}
+                              placeholder="Ex: Ecocardiograma, Dermatoscopia, etc."
+                            />
+                          </div>
+                        </div>
+                      </div>
+
+                      <div>
+                        <h3 className="text-lg font-semibold mb-4">Dados do Paciente</h3>
+                        <div className="bg-muted rounded-lg p-4">
+                          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
+                            <div>
+                              <span className="font-medium">Nome:</span> {pacienteSelecionado.nome}
+                            </div>
+                            <div>
+                              <span className="font-medium">ID:</span> {pacienteSelecionado.id}
+                            </div>
+                            <div>
+                              <span className="font-medium">CPF:</span> {pacienteSelecionado.cpf}
+                            </div>
+                            <div>
+                              <span className="font-medium">Idade:</span> {pacienteSelecionado.idade} anos
+                            </div>
+                            <div>
+                              <span className="font-medium">Sexo:</span> {pacienteSelecionado.sexo}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className="flex justify-end">
+                        <Button 
+                          onClick={() => setActiveTab("editor")}
+                          disabled={!campos.especialidade || !campos.exame}
+                        >
+                          Continuar para Editor
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
+
+              {activeTab === "editor" && (
+                <div className="flex-1 flex flex-col">
+                  {/* Toolbar */}
+                  <div className="p-3 border-b border-border">
+                    <div className="flex flex-wrap gap-2">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => formatText("bold")}
+                        title="Negrito"
+                      >
+                        <strong>B</strong>
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => formatText("italic")}
+                        title="Itálico"
+                      >
+                        <em>I</em>
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => formatText("underline")}
+                        title="Sublinhado"
+                      >
+                        <u>U</u>
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => formatText("list")}
+                        title="Lista"
+                      >
+                        •
+                      </Button>
+                      
+                      <div className="h-6 w-px bg-border mx-1"></div>
+                      
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => insertCampo("nome_paciente")}
+                        title="Nome do Paciente"
+                      >
+                        Nome
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => insertCampo("idade_paciente")}
+                        title="Idade do Paciente"
+                      >
+                        Idade
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => insertCampo("cid")}
+                        title="CID"
+                      >
+                        CID
+                      </Button>
+                    </div>
+
+                    {/* Templates */}
+                    <div className="mt-3">
+                      <p className="text-xs text-muted-foreground mb-2">Frases rápidas:</p>
+                      <div className="flex flex-wrap gap-1">
+                        {templates.map((template, idx) => (
+                          <Button
+                            key={idx}
+                            variant="ghost"
+                            size="sm"
+                            className="text-xs h-auto p-1 px-2"
+                            onClick={() => insertTemplate(template)}
+                          >
+                            {template.substring(0, 30)}...
+                          </Button>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Editor */}
+                  <div className="flex-1 p-4">
+                    <Textarea
+                      value={content}
+                      onChange={(e) => setContent(e.target.value)}
+                      placeholder="Digite o conteúdo do laudo aqui. Use ** para negrito, * para itálico, <u></u> para sublinhado."
+                      className="h-full min-h-[400px] resize-none"
+                    />
+                  </div>
+                </div>
+              )}
+
+              {activeTab === "imagens" && (
+                <div className="flex-1 p-4">
+                  <div className="mb-4">
+                    <Label htmlFor="upload-images">Upload de Imagens</Label>
+                    <Input
+                      id="upload-images"
+                      type="file"
+                      multiple
+                      accept="image/*,.pdf"
+                      onChange={handleImageUpload}
+                      className="mt-1"
+                    />
+                  </div>
+                  
+                  <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+                    {imagens.map((img) => (
+                      <div key={img.id} className="border border-border rounded-lg p-2">
+                        {img.type.startsWith('image/') ? (
+                          <img 
+                            src={img.url} 
+                            alt={img.name}
+                            className="w-full h-32 object-cover rounded"
+                          />
+                        ) : (
+                          <div className="w-full h-32 bg-muted rounded flex items-center justify-center">
+                            <FileText className="w-8 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"
+                          onClick={() => setImagens(prev => prev.filter(i => i.id !== img.id))}
+                        >
+                          Remover
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {activeTab === "campos" && (
+                <div className="flex-1 p-4 space-y-4">
+                  <div>
+                    <Label htmlFor="cid">CID</Label>
+                    <Input
+                      id="cid"
+                      value={campos.cid}
+                      onChange={(e) => setCampos(prev => ({ ...prev, cid: e.target.value }))}
+                      placeholder="Ex: M25.5, I10, etc."
+                    />
+                  </div>
+
+                  <div>
+                    <Label htmlFor="diagnostico">Diagnóstico</Label>
+                    <Textarea
+                      id="diagnostico"
+                      value={campos.diagnostico}
+                      onChange={(e) => setCampos(prev => ({ ...prev, diagnostico: e.target.value }))}
+                      placeholder="Diagnóstico principal"
+                      rows={3}
+                    />
+                  </div>
+
+                  <div>
+                    <Label htmlFor="conclusao">Conclusão</Label>
+                    <Textarea
+                      id="conclusao"
+                      value={campos.conclusao}
+                      onChange={(e) => setCampos(prev => ({ ...prev, conclusao: e.target.value }))}
+                      placeholder="Conclusão do laudo"
+                      rows={3}
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <div className="flex items-center space-x-2">
+                      <input
+                        type="checkbox"
+                        id="mostrar-data"
+                        checked={campos.mostrarData}
+                        onChange={(e) => setCampos(prev => ({ ...prev, mostrarData: e.target.checked }))}
+                      />
+                      <Label htmlFor="mostrar-data">Mostrar data no laudo</Label>
+                    </div>
+
+                    <div className="flex items-center space-x-2">
+                      <input
+                        type="checkbox"
+                        id="mostrar-assinatura"
+                        checked={campos.mostrarAssinatura}
+                        onChange={(e) => setCampos(prev => ({ ...prev, mostrarAssinatura: e.target.checked }))}
+                      />
+                      <Label htmlFor="mostrar-assinatura">Mostrar assinatura no laudo</Label>
+                    </div>
+                  </div>
+
+                  {/* Assinatura Digital */}
+                  <div>
+                    <Label>Assinatura Digital</Label>
+                    <div className="mt-2 p-4 border border-border rounded-lg bg-muted">
+                      <SignatureCanvas
+                        ref={sigCanvasRef}
+                        penColor="#000"
+                        backgroundColor="#fff"
+                        canvasProps={{ 
+                          width: 400, 
+                          height: 150, 
+                          className: "border rounded bg-background"
+                        }}
+                      />
+                      <div className="flex gap-2 mt-2">
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => sigCanvasRef.current?.clear()}
+                        >
+                          Limpar
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* Preview Panel */}
+            {showPreview && (
+              <div className="w-1/2 border-l border-border bg-muted/20">
+                <div className="p-4 border-b border-border">
+                  <h3 className="font-semibold text-foreground">Pré-visualização do Laudo</h3>
+                </div>
+                <div className="p-4 max-h-[600px] overflow-y-auto">
+                  <div className="bg-background border border-border rounded-lg p-6 shadow-sm">
+                    {/* Header do Laudo */}
+                    <div className="text-center mb-6">
+                      <h2 className="text-lg font-bold">
+                        LAUDO MÉDICO {campos.especialidade ? `- ${campos.especialidade.toUpperCase()}` : ''}
+                      </h2>
+                      {campos.exame && (
+                        <h3 className="text-md font-semibold mt-2">{campos.exame}</h3>
+                      )}
+                      {campos.mostrarData && (
+                        <p className="text-sm text-muted-foreground mt-1">
+                          Data: {new Date().toLocaleDateString('pt-BR')}
+                        </p>
+                      )}
+                    </div>
+
+                    {/* Dados do Paciente */}
+                    {(isNewLaudo ? pacienteSelecionado : laudo?.paciente) && (
+                      <div className="mb-4 p-3 bg-muted rounded">
+                        <h3 className="font-semibold mb-2">Dados do Paciente:</h3>
+                        {isNewLaudo && pacienteSelecionado ? (
+                          <>
+                            <p><strong>Nome:</strong> {pacienteSelecionado.nome}</p>
+                            <p><strong>ID:</strong> {pacienteSelecionado.id}</p>
+                            <p><strong>CPF:</strong> {pacienteSelecionado.cpf}</p>
+                            <p><strong>Idade:</strong> {pacienteSelecionado.idade} anos</p>
+                            <p><strong>Sexo:</strong> {pacienteSelecionado.sexo}</p>
+                            {campos.cid && <p><strong>CID:</strong> {campos.cid}</p>}
+                          </>
+                        ) : (
+                          <>
+                            <p><strong>Nome:</strong> {laudo?.paciente?.nome}</p>
+                            <p><strong>ID:</strong> {laudo?.paciente?.id}</p>
+                            {campos.cid && <p><strong>CID:</strong> {campos.cid}</p>}
+                          </>
+                        )}
+                      </div>
+                    )}
+
+                    {/* Conteúdo */}
+                    <div className="mb-4">
+                      <div 
+                        dangerouslySetInnerHTML={{ 
+                          __html: processContent(content) 
+                        }}
+                      />
+                    </div>
+
+                    {/* Imagens */}
+                    {imagens.length > 0 && (
+                      <div className="mb-4">
+                        <h3 className="font-semibold mb-2">Imagens:</h3>
+                        <div className="grid grid-cols-2 gap-2">
+                          {imagens.map((img) => (
+                            <img 
+                              key={img.id}
+                              src={img.url} 
+                              alt={img.name}
+                              className="w-full h-32 object-cover rounded border"
+                            />
+                          ))}
+                        </div>
+                      </div>
+                    )}
+
+                    {/* Assinatura */}
+                    {campos.mostrarAssinatura && (
+                      <div className="mt-8 text-center">
+                        <div className="h-16 border-b border-border mb-2"></div>
+                        <p className="text-sm">Dr. Carlos Andrade</p>
+                        <p className="text-xs text-muted-foreground">CRM 000000</p>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Footer */}
+          <div className="p-4 border-t border-border bg-muted/20">
+            <div className="flex items-center justify-between">
+              <div className="text-xs text-muted-foreground">
+                Este editor permite escrever relatórios de forma livre, com formatação de texto rica.
+              </div>
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={onClose}>
+                  Cancelar
+                </Button>
+                <Button variant="outline">
+                  Salvar Rascunho
+                </Button>
+                <Button variant="default">
+                  Liberar Laudo
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
 
   
   const renderComunicacaoSection = () => (
@@ -2887,76 +3515,6 @@ function LaudoEditor() {
           </div>
         </div>
       )}
-
-      {/* Modal de Visualização do Laudo */}
-      <Dialog open={!!laudoVisualizacao} onOpenChange={() => setLaudoVisualizacao(null)}>
-        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
-          <DialogHeader>
-            <DialogTitle>
-              {laudoVisualizacao?.exameTipo || "Laudo Médico"}
-            </DialogTitle>
-          </DialogHeader>
-          
-          {laudoVisualizacao && (
-            <div className="space-y-6">
-              {/* Cabeçalho do Laudo */}
-              <div className="text-center border-b pb-4">
-                <h1 className="text-2xl font-bold mb-2">LAUDO MÉDICO</h1>
-                <p className="text-gray-600">Data: {laudoVisualizacao.data}</p>
-              </div>
-              
-              {/* Dados do Paciente */}
-              <div className="grid grid-cols-2 gap-4 p-4 bg-gray-50 rounded">
-                <div><strong>Paciente:</strong> {laudoVisualizacao.recipient}</div>
-                <div><strong>Executante:</strong> {laudoVisualizacao.execSolicitante}</div>
-                <div><strong>Exame:</strong> {laudoVisualizacao.exameTipo}</div>
-                {laudoVisualizacao.cid && (
-                  <div><strong>CID:</strong> {laudoVisualizacao.cid}</div>
-                )}
-              </div>
-
-              {/* Diagnóstico */}
-              {laudoVisualizacao.diagnostico && (
-                <div className="space-y-2">
-                  <h3 className="font-bold text-lg">DIAGNÓSTICO:</h3>
-                  <p className="text-gray-800">{laudoVisualizacao.diagnostico}</p>
-                </div>
-              )}
-
-              {/* Conteúdo do Laudo */}
-              {laudoVisualizacao.conteudo && (
-                <div className="space-y-2">
-                  <h3 className="font-bold text-lg">RELATÓRIO:</h3>
-                  <div 
-                    className="prose max-w-none leading-relaxed text-gray-800"
-                    dangerouslySetInnerHTML={{ 
-                      __html: formatTextToHtml(laudoVisualizacao.conteudo)
-                    }} 
-                  />
-                </div>
-              )}
-
-              {/* Conclusão */}
-              {laudoVisualizacao.conclusao && (
-                <div className="space-y-2">
-                  <h3 className="font-bold text-lg">CONCLUSÃO:</h3>
-                  <p className="text-gray-800">{laudoVisualizacao.conclusao}</p>
-                </div>
-              )}
-
-              {/* Rodapé */}
-              <div className="border-t pt-4 text-center text-sm text-gray-600">
-                <p><strong>Status:</strong> {laudoVisualizacao.status}</p>
-                <p className="mt-2">
-                  <strong>{medico.nome}</strong><br/>
-                  {medico.identificacao}
-                </p>
-              </div>
-            </div>
-          )}
-        </DialogContent>
-      </Dialog>
-
       </div>
     </ProtectedRoute>
   );
diff --git a/susconecta/components/dashboard/sidebar.tsx b/susconecta/components/dashboard/sidebar.tsx
index b1ef7a9..083f21c 100644
--- a/susconecta/components/dashboard/sidebar.tsx
+++ b/susconecta/components/dashboard/sidebar.tsx
@@ -24,6 +24,7 @@ import {
   UserCheck,
   FileText,
   BarChart3,
+  Settings,
   Stethoscope,
   User,
 } from "lucide-react"
@@ -35,6 +36,7 @@ const navigation = [
   { name: "Médicos", href: "/doutores", icon: User },
   { name: "Consultas", href: "/consultas", icon: UserCheck },
   { name: "Relatórios", href: "/dashboard/relatorios", icon: BarChart3 },
+  { name: "Configurações", href: "/configuracao", icon: Settings }, 
 ]
 
 export function Sidebar() {

From d975e0f5545b5e728ee00cbb9f0a2920982d5e91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Gustavo?=
 <166467972+JoaoGustavo-dev@users.noreply.github.com>
Date: Fri, 3 Oct 2025 06:50:17 -0300
Subject: [PATCH 09/19] fix-laudo-editor

---
 susconecta/app/profissional/page.tsx | 220 +++++++++++++++++----------
 1 file changed, 138 insertions(+), 82 deletions(-)

diff --git a/susconecta/app/profissional/page.tsx b/susconecta/app/profissional/page.tsx
index 5f1ffce..07016a1 100644
--- a/susconecta/app/profissional/page.tsx
+++ b/susconecta/app/profissional/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import SignatureCanvas from "react-signature-canvas";
 import Link from "next/link";
 import ProtectedRoute from "@/components/ProtectedRoute";
@@ -73,6 +73,10 @@ const ProfissionalPage = () => {
   const [activeSection, setActiveSection] = useState('calendario');
   const [pacienteSelecionado, setPacienteSelecionado] = useState<any>(null);
   
+  // Estados para edição de laudo
+  const [isEditingLaudoForPatient, setIsEditingLaudoForPatient] = useState(false);
+  const [patientForLaudo, setPatientForLaudo] = useState<any>(null);
+  
   // Estados para o perfil do médico
   const [isEditingProfile, setIsEditingProfile] = useState(false);
   const [profileData, setProfileData] = useState({
@@ -199,6 +203,12 @@ const ProfissionalPage = () => {
     setPacienteSelecionado(null);
   };
 
+  const handleEditarLaudo = (paciente: any) => {
+    setPatientForLaudo(paciente);
+    setIsEditingLaudoForPatient(true);
+    setActiveSection('laudos');
+  };
+
   
   const navigateDate = (direction: 'prev' | 'next') => {
     const newDate = new Date(currentCalendarDate);
@@ -553,6 +563,7 @@ const ProfissionalPage = () => {
                           <div className="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900 dark:border-t-gray-100"></div>
                         </div>
                       </div>
+
                     </div>
                   </div>
                 </div>
@@ -688,17 +699,28 @@ const ProfissionalPage = () => {
                       <p className="font-medium">{paciente.nome}</p>
                       <p className="text-sm text-muted-foreground">CPF: {paciente.cpf} • Idade: {paciente.idade} anos</p>
                     </div>
-                    <Button
-                      size="sm"
-                      onClick={() => {
-                        handleAbrirProntuario(paciente);
-                        setActiveSection('prontuario');
-                      }}
-                      className="flex items-center gap-2"
-                    >
-                      <FolderOpen className="h-4 w-4" />
-                      Abrir Prontuário
-                    </Button>
+                    <div className="flex items-center gap-2">
+                      <Button
+                        size="sm"
+                        onClick={() => {
+                          handleAbrirProntuario(paciente);
+                          setActiveSection('prontuario');
+                        }}
+                        className="flex items-center gap-2"
+                      >
+                        <FolderOpen className="h-4 w-4" />
+                        Prontuário
+                      </Button>
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => handleEditarLaudo(paciente)}
+                        className="flex items-center gap-2 border-green-600 text-green-600 hover:bg-green-600 hover:text-white"
+                      >
+                        <FileText className="h-4 w-4" />
+                        Editar Laudo
+                      </Button>
+                    </div>
                   </div>
                 ))}
               </div>
@@ -732,7 +754,7 @@ const ProfissionalPage = () => {
                         <Button 
                           variant="outline" 
                           size="sm" 
-                          className="border-primary text-primary hover:bg-primary hover:text-white cursor-pointer"
+                          className="border-primary text-primary hover:bg-primary hover:text-white cursor-pointer mr-2"
                           onClick={() => {
                             handleAbrirProntuario(paciente);
                             setActiveSection('prontuario');
@@ -745,6 +767,20 @@ const ProfissionalPage = () => {
                           <div className="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900 dark:border-t-gray-100"></div>
                         </div>
                       </div>
+                      <div className="relative group">
+                        <Button 
+                          variant="outline" 
+                          size="sm" 
+                          className="border-green-600 text-green-600 hover:bg-green-600 hover:text-white cursor-pointer"
+                          onClick={() => handleEditarLaudo(paciente)}
+                        >
+                          <FileText className="h-4 w-4" />
+                        </Button>
+                        <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-1 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-xs rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-50">
+                          Editar laudo do paciente
+                          <div className="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900 dark:border-t-gray-100"></div>
+                        </div>
+                      </div>
                     </div>
                   </TableCell>
                 </TableRow>
@@ -1651,12 +1687,19 @@ const ProfissionalPage = () => {
   
   const renderLaudosSection = () => (
     <div className="space-y-6">
-      <LaudoManager />
+      <LaudoManager 
+        isEditingForPatient={isEditingLaudoForPatient}
+        selectedPatientForLaudo={patientForLaudo}
+        onClosePatientEditor={() => {
+          setIsEditingLaudoForPatient(false);
+          setPatientForLaudo(null);
+        }}
+      />
     </div>
   );
 
   // --- NOVO SISTEMA DE LAUDOS COMPLETO ---
-  function LaudoManager() {
+  function LaudoManager({ isEditingForPatient, selectedPatientForLaudo, onClosePatientEditor }: { isEditingForPatient?: boolean; selectedPatientForLaudo?: any; onClosePatientEditor?: () => void }) {
     const [pacientesDisponiveis] = useState([
       { id: "95170038", nome: "Ana Souza", cpf: "123.456.789-00", idade: 42, sexo: "Feminino" },
       { id: "93203056", nome: "Bruno Lima", cpf: "987.654.321-00", idade: 33, sexo: "Masculino" },
@@ -1788,6 +1831,9 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
     const [isViewing, setIsViewing] = useState(false);
     const [isCreatingNew, setIsCreatingNew] = useState(false);
 
+
+
+
     return (
       <div className="space-y-6">
         {/* Header */}
@@ -1938,18 +1984,33 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
                     <TableCell className="text-sm">{laudo.executante}</TableCell>
                     <TableCell className="text-sm">{laudo.exame || "-"}</TableCell>
                     <TableCell>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => {
-                          setLaudoSelecionado(laudo);
-                          setIsViewing(true);
-                        }}
-                        className="flex items-center gap-1"
-                      >
-                        <Eye className="w-4 h-4" />
-                        Ver Laudo
-                      </Button>
+                      <div className="flex items-center gap-2">
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => {
+                            setLaudoSelecionado(laudo);
+                            setIsViewing(true);
+                          }}
+                          className="flex items-center gap-1"
+                        >
+                          <Eye className="w-4 h-4" />
+                          Ver Laudo
+                        </Button>
+                        <Button
+                          variant="default"
+                          size="sm"
+                          onClick={() => {
+                            setPatientForLaudo(laudo);
+                            setIsEditingLaudoForPatient(true);
+                          }}
+                          className="flex items-center gap-1 bg-green-600 hover:bg-green-700 text-white"
+                          title="Editar laudo para este paciente"
+                        >
+                          <Edit className="w-4 h-4" />
+                          Editar Laudo
+                        </Button>
+                      </div>
                     </TableCell>
                   </TableRow>
                 ))}
@@ -1971,6 +2032,17 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
             isNewLaudo={true}
           />
         )}
+
+        {/* Editor para Paciente Específico */}
+        {isEditingForPatient && selectedPatientForLaudo && (
+          <LaudoEditor 
+            pacientes={[selectedPatientForLaudo.paciente || selectedPatientForLaudo]} 
+            laudo={selectedPatientForLaudo.conteudo ? selectedPatientForLaudo : null}
+            onClose={onClosePatientEditor || (() => {})} 
+            isNewLaudo={!selectedPatientForLaudo.conteudo}
+            preSelectedPatient={selectedPatientForLaudo.paciente || selectedPatientForLaudo}
+          />
+        )}
       </div>
     );
   }
@@ -2069,17 +2141,17 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
   }
 
   // Editor de Laudo Avançado (para novos laudos)
-  function LaudoEditor({ pacientes, laudo, onClose, isNewLaudo }: { pacientes?: any[]; laudo?: any; onClose: () => void; isNewLaudo?: boolean }) {
+  function LaudoEditor({ pacientes, laudo, onClose, isNewLaudo, preSelectedPatient }: { pacientes?: any[]; laudo?: any; onClose: () => void; isNewLaudo?: boolean; preSelectedPatient?: any }) {
     const [activeTab, setActiveTab] = useState("editor");
-    const [content, setContent] = useState("");
+    const [content, setContent] = useState(laudo?.conteudo || "");
     const [showPreview, setShowPreview] = useState(false);
-    const [pacienteSelecionado, setPacienteSelecionado] = useState<any>(null);
+    const [pacienteSelecionado, setPacienteSelecionado] = useState<any>(preSelectedPatient || null);
     const [campos, setCampos] = useState({
-      cid: "",
-      diagnostico: "",
-      conclusao: "",
-      exame: "",
-      especialidade: "",
+      cid: laudo?.cid || "",
+      diagnostico: laudo?.diagnostico || "",
+      conclusao: laudo?.conclusao || "",
+      exame: laudo?.exame || "",
+      especialidade: laudo?.especialidade || "",
       mostrarData: true,
       mostrarAssinatura: true
     });
@@ -2095,6 +2167,23 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
 
     const sigCanvasRef = useRef<any>(null);
 
+    // Carregar dados do laudo existente quando disponível
+    useEffect(() => {
+      if (laudo && !isNewLaudo) {
+        setContent(laudo.conteudo || "");
+        setCampos({
+          cid: laudo.cid || "",
+          diagnostico: laudo.diagnostico || "",
+          conclusao: laudo.conclusao || "",
+          exame: laudo.exame || "",
+          especialidade: laudo.especialidade || "",
+          mostrarData: true,
+          mostrarAssinatura: true
+        });
+        setPacienteSelecionado(laudo.paciente);
+      }
+    }, [laudo, isNewLaudo]);
+
     const formatText = (type: string) => {
       const textarea = document.querySelector('textarea') as HTMLTextAreaElement;
       if (!textarea) return;
@@ -2124,12 +2213,7 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
     };
 
     const insertTemplate = (template: string) => {
-      setContent(prev => prev ? `${prev}\n\n${template}` : template);
-    };
-
-    const insertCampo = (campo: string) => {
-      const placeholder = `{{${campo}}}`;
-      setContent(prev => prev ? `${prev} ${placeholder}` : placeholder);
+      setContent((prev: string) => prev ? `${prev}\n\n${template}` : template);
     };
 
     const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -2149,15 +2233,11 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
     };
 
     const processContent = (content: string) => {
-      const paciente = isNewLaudo ? pacienteSelecionado : laudo?.paciente;
       return content
         .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
         .replace(/\*(.*?)\*/g, '<em>$1</em>')
         .replace(/<u>(.*?)<\/u>/g, '<u>$1</u>')
-        .replace(/{{nome_paciente}}/g, paciente?.nome || '[NOME_PACIENTE]')
-        .replace(/{{idade_paciente}}/g, paciente?.idade?.toString() || '[IDADE]')
-        .replace(/{{sexo_paciente}}/g, paciente?.sexo || '[SEXO]')
-        .replace(/{{cid}}/g, campos.cid || '[CID]')
+        .replace(/{{sexo_paciente}}/g, pacienteSelecionado?.sexo || laudo?.paciente?.sexo || '[SEXO]')
         .replace(/{{diagnostico}}/g, campos.diagnostico || '[DIAGNÓSTICO]')
         .replace(/{{conclusao}}/g, campos.conclusao || '[CONCLUSÃO]')
         .replace(/\n/g, '<br>');
@@ -2171,7 +2251,7 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
             <div className="flex items-center justify-between p-4">
               <div>
                 <h2 className="text-xl font-bold text-foreground">
-                  {isNewLaudo ? "Novo Laudo Médico" : "Editor de Laudo"}
+                  {isNewLaudo ? "Novo Laudo Médico" : "Editar Laudo Existente"}
                 </h2>
                 {isNewLaudo ? (
                   <p className="text-sm text-muted-foreground">
@@ -2179,7 +2259,7 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
                   </p>
                 ) : (
                   <p className="text-sm text-muted-foreground">
-                    Paciente: {laudo?.paciente?.nome} | Pedido: {laudo?.id}
+                    Paciente: {laudo?.paciente?.nome} | Pedido: {laudo?.id} | {laudo?.especialidade}
                   </p>
                 )}
               </div>
@@ -2220,13 +2300,15 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
                         CPF: {pacienteSelecionado.cpf} | Idade: {pacienteSelecionado.idade} anos | Sexo: {pacienteSelecionado.sexo}
                       </div>
                     </div>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={() => setPacienteSelecionado(null)}
-                    >
-                      Trocar Paciente
-                    </Button>
+                    {!preSelectedPatient && (
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setPacienteSelecionado(null)}
+                      >
+                        Trocar Paciente
+                      </Button>
+                    )}
                   </div>
                 )}
               </div>
@@ -2412,32 +2494,6 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
                         •
                       </Button>
                       
-                      <div className="h-6 w-px bg-border mx-1"></div>
-                      
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => insertCampo("nome_paciente")}
-                        title="Nome do Paciente"
-                      >
-                        Nome
-                      </Button>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => insertCampo("idade_paciente")}
-                        title="Idade do Paciente"
-                      >
-                        Idade
-                      </Button>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => insertCampo("cid")}
-                        title="CID"
-                      >
-                        CID
-                      </Button>
                     </div>
 
                     {/* Templates */}
@@ -2699,7 +2755,7 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
                   Salvar Rascunho
                 </Button>
                 <Button variant="default">
-                  Liberar Laudo
+                  {isNewLaudo ? "Liberar Laudo" : "Atualizar Laudo"}
                 </Button>
               </div>
             </div>

From ca3ec16c27d56fa63be50df31d87d472829b8195 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Gustavo?=
 <166467972+JoaoGustavo-dev@users.noreply.github.com>
Date: Fri, 3 Oct 2025 11:59:10 -0300
Subject: [PATCH 10/19] removing-config-pages

---
 .../configuracao/agenda/page.tsx              |  34 ----
 .../configuracao/comunicacao/page.tsx         |  36 ----
 .../configuracao/notificacoes/page.tsx        |  25 ---
 .../app/(main-routes)/configuracao/page.tsx   |  77 ---------
 .../configuracao/seguranca/page.tsx           |  33 ----
 .../configuracao/usuarios/page.tsx            |  37 -----
 susconecta/app/profissional/page.tsx          | 156 +-----------------
 susconecta/components/dashboard/sidebar.tsx   |   2 -
 8 files changed, 2 insertions(+), 398 deletions(-)
 delete mode 100644 susconecta/app/(main-routes)/configuracao/agenda/page.tsx
 delete mode 100644 susconecta/app/(main-routes)/configuracao/comunicacao/page.tsx
 delete mode 100644 susconecta/app/(main-routes)/configuracao/notificacoes/page.tsx
 delete mode 100644 susconecta/app/(main-routes)/configuracao/page.tsx
 delete mode 100644 susconecta/app/(main-routes)/configuracao/seguranca/page.tsx
 delete mode 100644 susconecta/app/(main-routes)/configuracao/usuarios/page.tsx

diff --git a/susconecta/app/(main-routes)/configuracao/agenda/page.tsx b/susconecta/app/(main-routes)/configuracao/agenda/page.tsx
deleted file mode 100644
index 0b55e39..0000000
--- a/susconecta/app/(main-routes)/configuracao/agenda/page.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-"use client"
-
-import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
-
-export default function AgendaConfigPage() {
-  return (
-    <div className="p-6 space-y-6">
-      <h1 className="text-2xl font-bold">Configurações da Agenda</h1>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Tempo padrão de consulta</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <select className="border rounded p-2">
-            <option>15 minutos</option>
-            <option>30 minutos</option>
-            <option>1 hora</option>
-          </select>
-        </CardContent>
-      </Card>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Horário de funcionamento</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <input type="time" className="border rounded p-2 mr-2" /> até
-          <input type="time" className="border rounded p-2 ml-2" />
-        </CardContent>
-      </Card>
-    </div>
-  )
-}
diff --git a/susconecta/app/(main-routes)/configuracao/comunicacao/page.tsx b/susconecta/app/(main-routes)/configuracao/comunicacao/page.tsx
deleted file mode 100644
index 9da30df..0000000
--- a/susconecta/app/(main-routes)/configuracao/comunicacao/page.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-"use client"
-
-import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
-
-export default function ComunicacaoConfigPage() {
-  return (
-    <div className="p-6 space-y-6">
-      <h1 className="text-2xl font-bold">Configurações de Comunicação</h1>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Modelo de Lembrete</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <textarea
-            className="w-full border rounded p-2"
-            placeholder="Exemplo: Olá {nome}, sua consulta está marcada para {data} às {hora}."
-          />
-        </CardContent>
-      </Card>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Frequência de Lembretes</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <select className="border rounded p-2">
-            <option>24 horas antes</option>
-            <option>4 horas antes</option>
-            <option>1 hora antes</option>
-          </select>
-        </CardContent>
-      </Card>
-    </div>
-  )
-}
diff --git a/susconecta/app/(main-routes)/configuracao/notificacoes/page.tsx b/susconecta/app/(main-routes)/configuracao/notificacoes/page.tsx
deleted file mode 100644
index cf050a5..0000000
--- a/susconecta/app/(main-routes)/configuracao/notificacoes/page.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-    "use client"
-
-import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
-
-export default function NotificacoesConfigPage() {
-  return (
-    <div className="p-6 space-y-6">
-      <h1 className="text-2xl font-bold">Configurações de Notificações</h1>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Alertas Internos</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <label className="flex items-center space-x-2">
-            <input type="checkbox" className="h-4 w-4" /> <span>Notificar quando consulta for cancelada</span>
-          </label>
-          <label className="flex items-center space-x-2 mt-2">
-            <input type="checkbox" className="h-4 w-4" /> <span>Notificar quando novo paciente for cadastrado</span>
-          </label>
-        </CardContent>
-      </Card>
-    </div>
-  )
-}
diff --git a/susconecta/app/(main-routes)/configuracao/page.tsx b/susconecta/app/(main-routes)/configuracao/page.tsx
deleted file mode 100644
index 3ab0e95..0000000
--- a/susconecta/app/(main-routes)/configuracao/page.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-"use client"
-
-import Link from "next/link"
-import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
-import {
-  Calendar,
-  MessageSquare,
-  Bell,
-  Users,
-  ShieldCheck,
-} from "lucide-react"
-
-export default function ConfiguracaoPage() {
-  const items = [
-    {
-      title: "Agenda",
-      desc: "Defina horários e bloqueios",
-      href: "/dashboard/configuracao/agenda",
-      icon: Calendar,
-    },
-    {
-      title: "Comunicação",
-      desc: "Gerencie mensagens automáticas",
-      href: "/dashboard/configuracao/comunicacao",
-      icon: MessageSquare,
-    },
-    {
-      title: "Notificações",
-      desc: "Configure alertas internos",
-      href: "/dashboard/configuracao/notificacoes",
-      icon: Bell,
-    },
-    {
-      title: "Usuários",
-      desc: "Controle acessos e permissões",
-      href: "/dashboard/configuracao/usuarios",
-      icon: Users,
-    },
-    {
-      title: "Segurança",
-      desc: "Senhas, privacidade e LGPD",
-      href: "/dashboard/configuracao/seguranca",
-      icon: ShieldCheck,
-    },
-  ]
-
-  return (
-    <div className="p-6 space-y-6 bg-background">
-      {/* título */}
-      <h1 className="text-2xl font-bold text-foreground">Configurações</h1>
-
-      {/* introdução */}
-      <p className="text-muted-foreground">
-        Ajuste os principais parâmetros do sistema. Escolha uma das seções abaixo
-        para configurar horários, mensagens, notificações internas, permissões de usuários
-        e regras de segurança da clínica.
-      </p>
-
-      {/* grid de cards */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-        {items.map((item) => (
-          <Link key={item.title} href={item.href}>
-            <Card className="cursor-pointer hover:shadow-md transition">
-              <CardHeader className="flex flex-row items-center gap-2">
-                <item.icon className="w-5 h-5 text-primary" />
-                <CardTitle>{item.title}</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <p className="text-sm text-muted-foreground">{item.desc}</p>
-              </CardContent>
-            </Card>
-          </Link>
-        ))}
-      </div>
-    </div>
-  )
-}
diff --git a/susconecta/app/(main-routes)/configuracao/seguranca/page.tsx b/susconecta/app/(main-routes)/configuracao/seguranca/page.tsx
deleted file mode 100644
index d43de85..0000000
--- a/susconecta/app/(main-routes)/configuracao/seguranca/page.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-"use client"
-
-import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
-
-export default function SegurancaConfigPage() {
-  return (
-    <div className="p-6 space-y-6">
-      <h1 className="text-2xl font-bold">Configurações de Segurança</h1>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Alterar Senha</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <input type="password" placeholder="Senha atual" className="w-full border rounded p-2 mb-2" />
-          <input type="password" placeholder="Nova senha" className="w-full border rounded p-2 mb-2" />
-          <input type="password" placeholder="Confirmar nova senha" className="w-full border rounded p-2" />
-        </CardContent>
-      </Card>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Política de Dados (LGPD)</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <label className="flex items-center space-x-2">
-            <input type="checkbox" className="h-4 w-4" /> <span>Solicitar consentimento do paciente no cadastro</span>
-          </label>
-        </CardContent>
-      </Card>
-    </div>
-  )
-}
diff --git a/susconecta/app/(main-routes)/configuracao/usuarios/page.tsx b/susconecta/app/(main-routes)/configuracao/usuarios/page.tsx
deleted file mode 100644
index 21db097..0000000
--- a/susconecta/app/(main-routes)/configuracao/usuarios/page.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-"use client"
-
-import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
-
-export default function UsuariosConfigPage() {
-  return (
-    <div className="p-6 space-y-6">
-      <h1 className="text-2xl font-bold">Gerenciamento de Usuários</h1>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Usuários da Clínica</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <table className="w-full border">
-            <thead>
-              <tr className="bg-gray-100">
-                <th className="p-2 text-left">Nome</th>
-                <th className="p-2 text-left">Email</th>
-                <th className="p-2 text-left">Permissão</th>
-                <th className="p-2">Ações</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td className="p-2">Maria Silva</td>
-                <td className="p-2">maria@clinica.com</td>
-                <td className="p-2">Secretária</td>
-                <td className="p-2">[Editar] [Remover]</td>
-              </tr>
-            </tbody>
-          </table>
-        </CardContent>
-      </Card>
-    </div>
-  )
-}
diff --git a/susconecta/app/profissional/page.tsx b/susconecta/app/profissional/page.tsx
index 07016a1..b599d3e 100644
--- a/susconecta/app/profissional/page.tsx
+++ b/susconecta/app/profissional/page.tsx
@@ -583,150 +583,11 @@ const ProfissionalPage = () => {
     handleAbrirProntuario: (paciente: any) => void;
     setActiveSection: (section: string) => void;
   }) {
-    // Estados para busca de pacientes
-     const [buscaPaciente, setBuscaPaciente] = useState("");
-  const [pacientesBusca, setPacientesBusca] = useState<any[]>([]);
-  const [carregandoBusca, setCarregandoBusca] = useState(false);
-  const [erroBusca, setErroBusca] = useState<string | null>(null);
-
-
-    // Função para buscar pacientes
-    const handleBuscarPaciente = async () => {
-      if (!buscaPaciente.trim()) {
-        setPacientesBusca([]);
-        setErroBusca(null);
-        return;
-      }
-
-      setCarregandoBusca(true);
-      setErroBusca(null);
-
-      try {
-        // Importa a função de busca
-        const { buscarPacientes } = await import("@/lib/api");
-        const resultados = await buscarPacientes(buscaPaciente.trim());
-        
-        if (resultados.length === 0) {
-          setErroBusca("Nenhum paciente encontrado com os critérios informados.");
-          setPacientesBusca([]);
-        } else {
-          // Transforma os dados da API para o formato usado no componente
-          const pacientesFormatados = resultados.map(p => ({
-            nome: p.full_name || "Nome não informado",
-            cpf: p.cpf || "CPF não informado",
-            idade: p.birth_date ? new Date().getFullYear() - new Date(p.birth_date).getFullYear() : "N/A",
-            statusLaudo: "Pendente", // Status padrão
-            id: p.id
-          }));
-          setPacientesBusca(pacientesFormatados);
-          setErroBusca(null);
-        }
-      } catch (error: any) {
-        console.error("Erro ao buscar pacientes:", error);
-        setErroBusca(error.message || "Erro ao buscar pacientes. Tente novamente.");
-        setPacientesBusca([]);
-      } finally {
-        setCarregandoBusca(false);
-      }
-    };
-
-    const handleLimparBusca = () => {
-      setBuscaPaciente("");
-      setPacientesBusca([]);
-      setErroBusca(null);
-    };
-
     return (
       <div className="bg-card shadow-md rounded-lg p-6">
         <h2 className="text-2xl font-bold mb-4">Gerenciamento de Pacientes</h2>
         
-        {/* Campo de busca */}
-        <div className="mb-6 p-4 bg-muted rounded-lg">
-          <h3 className="text-lg font-semibold mb-3">Buscar Paciente</h3>
-          <div className="flex gap-2">
-            <div className="flex-1">
-              <Input
-                placeholder="Digite ID, CPF, nome ou email do paciente..."
-                value={buscaPaciente}
-                onChange={(e) => setBuscaPaciente(e.target.value)}
-                onKeyDown={(e) => e.key === "Enter" && handleBuscarPaciente()}
-                className="w-full"
-              />
-            </div>
-            <Button 
-              onClick={handleBuscarPaciente} 
-              disabled={carregandoBusca}
-              className="flex items-center gap-2"
-            >
-              {carregandoBusca ? (
-                <>
-                  <div className="animate-spin h-4 w-4 border-2 border-white border-t-transparent rounded-full"></div>
-                  Buscando...
-                </>
-              ) : (
-                <>
-                  <User className="h-4 w-4" />
-                  Buscar
-                </>
-              )}
-            </Button>
-            {(buscaPaciente || pacientesBusca.length > 0 || erroBusca) && (
-              <Button 
-                variant="outline" 
-                onClick={handleLimparBusca}
-                className="flex items-center gap-2"
-              >
-                <X className="h-4 w-4" />
-                Limpar
-              </Button>
-            )}
-          </div>
-          
-          {/* Resultados da busca */}
-          {erroBusca && (
-            <div className="mt-3 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md">
-              <p className="text-red-700 dark:text-red-300 text-sm">{erroBusca}</p>
-            </div>
-          )}
-          
-          {pacientesBusca.length > 0 && (
-            <div className="mt-4">
-              <h4 className="text-md font-medium mb-2">Resultados da busca ({pacientesBusca.length}):</h4>
-              <div className="space-y-2">
-                {pacientesBusca.map((paciente, index) => (
-                  <div key={index} className="flex items-center justify-between p-3 bg-card border rounded-lg hover:shadow-sm">
-                    <div>
-                      <p className="font-medium">{paciente.nome}</p>
-                      <p className="text-sm text-muted-foreground">CPF: {paciente.cpf} • Idade: {paciente.idade} anos</p>
-                    </div>
-                    <div className="flex items-center gap-2">
-                      <Button
-                        size="sm"
-                        onClick={() => {
-                          handleAbrirProntuario(paciente);
-                          setActiveSection('prontuario');
-                        }}
-                        className="flex items-center gap-2"
-                      >
-                        <FolderOpen className="h-4 w-4" />
-                        Prontuário
-                      </Button>
-                      <Button
-                        size="sm"
-                        variant="outline"
-                        onClick={() => handleEditarLaudo(paciente)}
-                        className="flex items-center gap-2 border-green-600 text-green-600 hover:bg-green-600 hover:text-white"
-                      >
-                        <FileText className="h-4 w-4" />
-                        Editar Laudo
-                      </Button>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-        </div>
+
 
         {/* Tabela de pacientes padrão */}
         <div>
@@ -767,20 +628,7 @@ const ProfissionalPage = () => {
                           <div className="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900 dark:border-t-gray-100"></div>
                         </div>
                       </div>
-                      <div className="relative group">
-                        <Button 
-                          variant="outline" 
-                          size="sm" 
-                          className="border-green-600 text-green-600 hover:bg-green-600 hover:text-white cursor-pointer"
-                          onClick={() => handleEditarLaudo(paciente)}
-                        >
-                          <FileText className="h-4 w-4" />
-                        </Button>
-                        <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-1 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-xs rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-50">
-                          Editar laudo do paciente
-                          <div className="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900 dark:border-t-gray-100"></div>
-                        </div>
-                      </div>
+
                     </div>
                   </TableCell>
                 </TableRow>
diff --git a/susconecta/components/dashboard/sidebar.tsx b/susconecta/components/dashboard/sidebar.tsx
index 083f21c..b1ef7a9 100644
--- a/susconecta/components/dashboard/sidebar.tsx
+++ b/susconecta/components/dashboard/sidebar.tsx
@@ -24,7 +24,6 @@ import {
   UserCheck,
   FileText,
   BarChart3,
-  Settings,
   Stethoscope,
   User,
 } from "lucide-react"
@@ -36,7 +35,6 @@ const navigation = [
   { name: "Médicos", href: "/doutores", icon: User },
   { name: "Consultas", href: "/consultas", icon: UserCheck },
   { name: "Relatórios", href: "/dashboard/relatorios", icon: BarChart3 },
-  { name: "Configurações", href: "/configuracao", icon: Settings }, 
 ]
 
 export function Sidebar() {

From 584306377c46e02baa3bf80d972828d418e5ab87 Mon Sep 17 00:00:00 2001
From: Jonas Francisco <jonastom478@gmail.com>
Date: Fri, 3 Oct 2025 17:17:52 -0300
Subject: [PATCH 11/19] =?UTF-8?q?feat:=20ajustes=20visuais=20nas=20p=C3=A1?=
 =?UTF-8?q?ginas=20de=20login=20e=20componentes=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Atualização das páginas de login (admin, paciente e geral)
- Melhorias nos componentes input e textarea
- Atualizações nas páginas do profissional
- Atualização de dependências
---
 susconecta/app/login-admin/page.tsx    |  2 +-
 susconecta/app/login-paciente/page.tsx |  2 +-
 susconecta/app/login/page.tsx          |  2 +-
 susconecta/app/profissional/page.tsx   | 82 +++++++++++++-------------
 susconecta/components/ui/input.tsx     |  6 +-
 susconecta/components/ui/textarea.tsx  |  6 +-
 susconecta/next-env.d.ts               |  3 +-
 susconecta/package-lock.json           | 15 +++++
 8 files changed, 66 insertions(+), 52 deletions(-)

diff --git a/susconecta/app/login-admin/page.tsx b/susconecta/app/login-admin/page.tsx
index c4efa3c..958c714 100644
--- a/susconecta/app/login-admin/page.tsx
+++ b/susconecta/app/login-admin/page.tsx
@@ -110,7 +110,7 @@ export default function LoginAdminPage() {
             </form>
             
             <div className="mt-4 text-center">
-              <Button variant="outline" asChild className="w-full">
+              <Button variant="outline" asChild className="w-full hover:!bg-primary hover:!text-white hover:!border-primary transition-all duration-200">
                 <Link href="/">
                   Voltar ao Início
                 </Link>
diff --git a/susconecta/app/login-paciente/page.tsx b/susconecta/app/login-paciente/page.tsx
index 072d982..04f83b3 100644
--- a/susconecta/app/login-paciente/page.tsx
+++ b/susconecta/app/login-paciente/page.tsx
@@ -108,7 +108,7 @@ export default function LoginPacientePage() {
             </form>
             
             <div className="mt-4 text-center">
-              <Button variant="outline" asChild className="w-full">
+              <Button variant="outline" asChild className="w-full hover:!bg-primary hover:!text-white hover:!border-primary transition-all duration-200">
                 <Link href="/">
                   Voltar ao Início
                 </Link>
diff --git a/susconecta/app/login/page.tsx b/susconecta/app/login/page.tsx
index 7610dd8..dba68b1 100644
--- a/susconecta/app/login/page.tsx
+++ b/susconecta/app/login/page.tsx
@@ -110,7 +110,7 @@ export default function LoginPage() {
             </form>
             
             <div className="mt-4 text-center">
-              <Button variant="outline" asChild className="w-full">
+              <Button variant="outline" asChild className="w-full hover:!bg-primary hover:!text-white hover:!border-primary transition-all duration-200">
                 <Link href="/">
                   Voltar ao Início
                 </Link>
diff --git a/susconecta/app/profissional/page.tsx b/susconecta/app/profissional/page.tsx
index b599d3e..e6f130f 100644
--- a/susconecta/app/profissional/page.tsx
+++ b/susconecta/app/profissional/page.tsx
@@ -454,21 +454,21 @@ const ProfissionalPage = () => {
     const todayEvents = getTodayEvents();
     
     return (
-      <section className="bg-card shadow-md rounded-lg p-6">
+      <section className="bg-card shadow-md rounded-lg border border-border p-6">
         <div className="flex justify-between items-center mb-4">
           <h2 className="text-2xl font-bold">Agenda do Dia</h2>
         </div>
         
         {/* Navegação de Data */}
-        <div className="flex items-center justify-between mb-6 p-4 bg-muted rounded-lg">
+        <div className="flex items-center justify-between mb-6 p-4 bg-muted border border-border rounded-lg">
           <div className="flex items-center space-x-4">
             <Button 
               variant="outline"
               size="sm"
               onClick={() => navigateDate('prev')}
-              className="p-2 hover:bg-primary hover:text-primary-foreground cursor-pointer"
+              className="p-2 transition-colors hover:!bg-primary hover:!text-white cursor-pointer"
             >
-              <ChevronLeft className="h-4 w-4" />
+              <ChevronLeft className="h-4 w-4 hover:!text-white" />
             </Button>
             <h3 className="text-lg font-medium text-foreground">
               {formatDate(currentCalendarDate)}
@@ -477,15 +477,15 @@ const ProfissionalPage = () => {
               variant="outline"
               size="sm"
               onClick={() => navigateDate('next')}
-              className="p-2 hover:bg-primary hover:text-primary-foreground cursor-pointer"
+              className="p-2 transition-colors hover:!bg-primary hover:!text-white cursor-pointer"
             >
-              <ChevronRight className="h-4 w-4" />
+              <ChevronRight className="h-4 w-4 hover:!text-white" />
             </Button>
             <Button 
               variant="outline"
               size="sm"
               onClick={goToToday}
-              className="ml-4 px-3 py-1 text-sm hover:bg-primary hover:text-primary-foreground cursor-pointer"
+              className="ml-4 px-3 py-1 text-sm transition-colors hover:bg-primary hover:text-white cursor-pointer"
             >
               Hoje
             </Button>
@@ -509,7 +509,7 @@ const ProfissionalPage = () => {
               return (
                 <div
                   key={appointment.id}
-                  className="border-l-4 p-4 rounded-lg shadow-sm bg-card border-border"
+                  className="border-l-4 border-t border-r border-b p-4 rounded-lg shadow-sm bg-card border-border"
                   style={{ borderLeftColor: getStatusColor(appointment.type) }}
                 >
                   <div className="grid grid-cols-1 md:grid-cols-4 gap-4 items-center">
@@ -547,7 +547,7 @@ const ProfissionalPage = () => {
                         <Button 
                           variant="outline" 
                           size="sm" 
-                          className="border-primary text-primary hover:bg-primary hover:text-white cursor-pointer"
+                          className="border-primary text-primary transition-colors hover:!bg-primary hover:!text-white cursor-pointer"
                           onClick={(e) => {
                             e.stopPropagation();
                             if (paciente) {
@@ -556,7 +556,7 @@ const ProfissionalPage = () => {
                             }
                           }}
                         >
-                          <FolderOpen className="h-4 w-4" />
+                          <FolderOpen className="h-4 w-4 hover:!text-white" />
                         </Button>
                         <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-1 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-xs rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-50">
                           Ver informações do paciente
@@ -615,13 +615,13 @@ const ProfissionalPage = () => {
                         <Button 
                           variant="outline" 
                           size="sm" 
-                          className="border-primary text-primary hover:bg-primary hover:text-white cursor-pointer mr-2"
+                          className="border-primary text-primary transition-colors hover:!bg-primary hover:!text-white cursor-pointer mr-2"
                           onClick={() => {
                             handleAbrirProntuario(paciente);
                             setActiveSection('prontuario');
                           }}
                         >
-                          <FolderOpen className="h-4 w-4" />
+                          <FolderOpen className="h-4 w-4 hover:!text-white" />
                         </Button>
                         <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-1 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-xs rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-50">
                           Ver informações do paciente
@@ -766,10 +766,10 @@ const ProfissionalPage = () => {
                     <div className="mt-3 flex items-center justify-between">
                       <span className={`px-2 py-1 text-xs rounded-full ${
                         paciente.statusLaudo === 'Finalizado' 
-                          ? 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300' 
+                          ? 'bg-green-200/80 dark:bg-green-900/50 text-green-900 dark:text-green-200 border border-green-300 dark:border-green-800' 
                           : paciente.statusLaudo === 'Pendente'
-                          ? 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300'
-                          : 'bg-muted text-muted-foreground'
+                          ? 'bg-yellow-200/80 dark:bg-yellow-900/50 text-yellow-900 dark:text-yellow-200 border border-yellow-300 dark:border-yellow-800'
+                          : 'bg-muted text-muted-foreground border border-border'
                       }`}>
                         {paciente.statusLaudo}
                       </span>
@@ -1063,7 +1063,7 @@ const ProfissionalPage = () => {
                       </p>
                     </div>
                     {consulta.cid10 && (
-                      <span className="px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 text-xs rounded-full">
+                      <span className="px-2 py-1 bg-blue-200/80 dark:bg-blue-900/50 text-blue-900 dark:text-blue-200 text-xs rounded-full border border-blue-300 dark:border-blue-800">
                         {consulta.cid10}
                       </span>
                     )}
@@ -1095,7 +1095,7 @@ const ProfissionalPage = () => {
               <h4 className="font-medium">Consulta Cardiológica</h4>
               <p className="text-sm text-muted-foreground">27/09/2025 - 09:00</p>
             </div>
-            <span className="px-2 py-1 bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 text-xs rounded-full">Finalizada</span>
+            <span className="px-2 py-1 bg-green-200/80 dark:bg-green-900/50 text-green-900 dark:text-green-200 text-xs rounded-full border border-green-300 dark:border-green-800">Finalizada</span>
           </div>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
             <div>
@@ -1119,7 +1119,7 @@ const ProfissionalPage = () => {
               <h4 className="font-medium">Consulta Dermatológica</h4>
               <p className="text-sm text-muted-foreground">15/09/2025 - 14:30</p>
             </div>
-            <span className="px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 text-xs rounded-full">Retorno Agendado</span>
+            <span className="px-2 py-1 bg-blue-200/80 dark:bg-blue-900/50 text-blue-900 dark:text-blue-200 text-xs rounded-full border border-blue-300 dark:border-blue-800">Retorno Agendado</span>
           </div>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
             <div>
@@ -1174,11 +1174,11 @@ const ProfissionalPage = () => {
           <h4 className="font-medium mb-2">Alergias e Reações Adversas</h4>
           <div className="space-y-2 text-sm">
             <div className="flex items-center gap-2">
-              <span className="px-2 py-1 bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300 text-xs rounded">Alergia</span>
+              <span className="px-2 py-1 bg-red-200/80 dark:bg-red-900/50 text-red-900 dark:text-red-200 text-xs rounded border border-red-300 dark:border-red-800">Alergia</span>
               <span>Penicilina - reação cutânea</span>
             </div>
             <div className="flex items-center gap-2">
-              <span className="px-2 py-1 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 text-xs rounded">Intolerância</span>
+              <span className="px-2 py-1 bg-yellow-200/80 dark:bg-yellow-900/50 text-yellow-900 dark:text-yellow-200 text-xs rounded border border-yellow-300 dark:border-yellow-800">Intolerância</span>
               <span>Lactose - sintomas gastrintestinais</span>
             </div>
           </div>
@@ -1204,7 +1204,7 @@ const ProfissionalPage = () => {
               <h4 className="font-medium text-foreground">Prescrição Atual</h4>
               <p className="text-sm text-muted-foreground">Prescrita em 27/09/2025</p>
             </div>
-            <span className="px-2 py-1 bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 text-xs rounded-full">Ativa</span>
+            <span className="px-2 py-1 bg-green-200/80 dark:bg-green-900/50 text-green-900 dark:text-green-200 text-xs rounded-full border border-green-300 dark:border-green-800">Ativa</span>
           </div>
           <div className="space-y-3">
             <div className="border-l-4 border-blue-500 pl-4">
@@ -1281,7 +1281,7 @@ const ProfissionalPage = () => {
                 <p className="text-sm text-muted-foreground">Solicitado em 25/09/2025</p>
                 <p className="text-sm text-muted-foreground">Urgência: Normal</p>
               </div>
-              <span className="px-2 py-1 bg-yellow-100 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-100 text-xs rounded-full">Pendente</span>
+              <span className="px-2 py-1 bg-yellow-200/80 dark:bg-yellow-900/50 text-yellow-900 dark:text-yellow-200 text-xs rounded-full border border-yellow-300 dark:border-yellow-800">Pendente</span>
             </div>
             
             <div className="flex justify-between items-center p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 rounded">
@@ -1290,7 +1290,7 @@ const ProfissionalPage = () => {
                 <p className="text-sm text-muted-foreground">Solicitado em 27/09/2025</p>
                 <p className="text-sm text-muted-foreground">Urgência: Normal</p>
               </div>
-              <span className="px-2 py-1 bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-100 text-xs rounded-full">Agendado</span>
+              <span className="px-2 py-1 bg-blue-200/80 dark:bg-blue-900/50 text-blue-900 dark:text-blue-200 text-xs rounded-full border border-blue-300 dark:border-blue-800">Agendado</span>
             </div>
           </div>
         </div>
@@ -1345,7 +1345,7 @@ const ProfissionalPage = () => {
                   <p className="text-sm text-muted-foreground">Diagnosticado em: 15/03/2020</p>
                   <p className="text-sm mt-1 text-foreground">Status: Controlada com medicação</p>
                 </div>
-                <span className="px-2 py-1 bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300 text-xs rounded-full">Ativo</span>
+                <span className="px-2 py-1 bg-red-200/80 dark:bg-red-900/50 text-red-900 dark:text-red-200 text-xs rounded-full border border-red-300 dark:border-red-800">Ativo</span>
               </div>
             </div>
             
@@ -1357,7 +1357,7 @@ const ProfissionalPage = () => {
                   <p className="text-sm text-muted-foreground">Diagnosticado em: 10/08/2018</p>
                   <p className="text-sm mt-1 text-foreground">Status: Controlada com dieta e medicação</p>
                 </div>
-                <span className="px-2 py-1 bg-orange-100 dark:bg-orange-900/30 text-orange-800 dark:text-orange-300 text-xs rounded-full">Ativo</span>
+                <span className="px-2 py-1 bg-orange-200/80 dark:bg-orange-900/50 text-orange-900 dark:text-orange-200 text-xs rounded-full border border-orange-300 dark:border-orange-800">Ativo</span>
               </div>
             </div>
           </div>
@@ -1371,7 +1371,7 @@ const ProfissionalPage = () => {
                 <p className="font-medium text-foreground">Gastrite Aguda</p>
                 <p className="text-muted-foreground">CID-10: K29.0 - Resolvido em 2023</p>
               </div>
-              <span className="px-2 py-1 bg-muted text-muted-foreground text-xs rounded-full">Resolvido</span>
+              <span className="px-2 py-1 bg-gray-200/80 dark:bg-gray-900/50 text-gray-900 dark:text-gray-200 text-xs rounded-full border border-gray-300 dark:border-gray-800">Resolvido</span>
             </div>
           </div>
         </div>
@@ -1396,7 +1396,7 @@ const ProfissionalPage = () => {
               <h4 className="font-medium text-foreground">Evolução Recente</h4>
               <p className="text-sm text-muted-foreground">27/09/2025 - 09:15</p>
             </div>
-            <span className="px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 text-xs rounded-full">Melhora</span>
+            <span className="px-2 py-1 bg-blue-200/80 dark:bg-blue-900/50 text-blue-900 dark:text-blue-200 text-xs rounded-full border border-blue-300 dark:border-blue-800">Melhora</span>
           </div>
           <div className="space-y-2">
             <p className="text-sm text-foreground"><strong>Subjetivo:</strong> Paciente relatou diminuição significativa da dor no peito e melhora da capacidade respiratória.</p>
@@ -1412,7 +1412,7 @@ const ProfissionalPage = () => {
               <h4 className="font-medium text-foreground">Evolução Anterior</h4>
               <p className="text-sm text-muted-foreground">15/09/2025 - 14:45</p>
             </div>
-            <span className="px-2 py-1 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 text-xs rounded-full">Estável</span>
+            <span className="px-2 py-1 bg-yellow-200/80 dark:bg-yellow-900/50 text-yellow-900 dark:text-yellow-200 text-xs rounded-full border border-yellow-300 dark:border-yellow-800">Estável</span>
           </div>
           <div className="space-y-2">
             <p className="text-sm"><strong>Subjetivo:</strong> Paciente apresentou episódios esporádicos de dor torácica leve.</p>
@@ -2120,7 +2120,7 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
             {isNewLaudo && (
               <div className="px-4 pb-4">
                 {!pacienteSelecionado ? (
-                  <div className="bg-muted rounded-lg p-4">
+                  <div className="bg-muted border border-border rounded-lg p-4">
                     <Label htmlFor="select-paciente" className="text-sm font-medium mb-2 block">
                       Selecionar Paciente *
                     </Label>
@@ -2270,7 +2270,7 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
 
                       <div>
                         <h3 className="text-lg font-semibold mb-4">Dados do Paciente</h3>
-                        <div className="bg-muted rounded-lg p-4">
+                        <div className="bg-muted border border-border rounded-lg p-4">
                           <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                             <div>
                               <span className="font-medium">Nome:</span> {pacienteSelecionado.nome}
@@ -3163,7 +3163,7 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
   return (
     <ProtectedRoute requiredUserType={["profissional"]}>
       <div className="container mx-auto px-4 py-8">
-        <header className="bg-card shadow-md rounded-lg p-4 mb-6 flex items-center justify-between">
+        <header className="bg-card shadow-md rounded-lg border border-border p-4 mb-6 flex items-center justify-between">
           <div className="flex items-center gap-4">
             <Avatar className="h-12 w-12">
               <AvatarImage src={medico.fotoUrl} alt={medico.nome} />
@@ -3192,10 +3192,10 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
       <div className="grid grid-cols-1 md:grid-cols-[220px_1fr] gap-6">
         {}
         <aside className="md:sticky md:top-8 h-fit">
-          <nav className="bg-card shadow-md rounded-lg p-3 space-y-1">
+          <nav className="bg-card shadow-md rounded-lg border border-border p-3 space-y-1">
             <Button 
               variant={activeSection === 'calendario' ? 'default' : 'ghost'} 
-              className="w-full justify-start hover:bg-primary hover:text-primary-foreground cursor-pointer"
+              className="w-full justify-start transition-colors hover:bg-primary hover:text-white cursor-pointer"
               onClick={() => setActiveSection('calendario')}
             >
               <CalendarIcon className="mr-2 h-4 w-4" />
@@ -3203,7 +3203,7 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
             </Button>
             <Button 
               variant={activeSection === 'pacientes' ? 'default' : 'ghost'} 
-              className="w-full justify-start hover:bg-primary hover:text-primary-foreground cursor-pointer"
+              className="w-full justify-start transition-colors hover:bg-primary hover:text-white cursor-pointer"
               onClick={() => setActiveSection('pacientes')}
             >
               <Users className="mr-2 h-4 w-4" />
@@ -3211,7 +3211,7 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
             </Button>
             <Button 
               variant={activeSection === 'prontuario' ? 'default' : 'ghost'} 
-              className="w-full justify-start hover:bg-primary hover:text-primary-foreground cursor-pointer"
+              className="w-full justify-start transition-colors hover:bg-primary hover:text-white cursor-pointer"
               onClick={() => setActiveSection('prontuario')}
             >
               <ClipboardList className="mr-2 h-4 w-4" />
@@ -3219,7 +3219,7 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
             </Button>
             <Button 
               variant={activeSection === 'laudos' ? 'default' : 'ghost'} 
-              className="w-full justify-start hover:bg-primary hover:text-primary-foreground cursor-pointer"
+              className="w-full justify-start transition-colors hover:bg-primary hover:text-white cursor-pointer"
               onClick={() => setActiveSection('laudos')}
             >
               <FileText className="mr-2 h-4 w-4" />
@@ -3227,7 +3227,7 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
             </Button>
             <Button 
               variant={activeSection === 'comunicacao' ? 'default' : 'ghost'} 
-              className="w-full justify-start hover:bg-primary hover:text-primary-foreground cursor-pointer"
+              className="w-full justify-start transition-colors hover:bg-primary hover:text-white cursor-pointer"
               onClick={() => setActiveSection('comunicacao')}
             >
               <MessageSquare className="mr-2 h-4 w-4" />
@@ -3235,7 +3235,7 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
             </Button>
             <Button 
               variant={activeSection === 'relatorios-medicos' ? 'default' : 'ghost'} 
-              className="w-full justify-start hover:bg-primary hover:text-primary-foreground cursor-pointer"
+              className="w-full justify-start transition-colors hover:bg-primary hover:text-white cursor-pointer"
               onClick={() => setActiveSection('relatorios-medicos')}
             >
               <FileCheck className="mr-2 h-4 w-4" />
@@ -3243,7 +3243,7 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
             </Button>
             <Button 
               variant={activeSection === 'perfil' ? 'default' : 'ghost'} 
-              className="w-full justify-start cursor-pointer hover:bg-primary hover:text-primary-foreground cursor-pointer"
+              className="w-full justify-start transition-colors hover:bg-primary hover:text-white cursor-pointer"
               onClick={() => setActiveSection('perfil')}
             >
               <Settings className="mr-2 h-4 w-4" />
@@ -3270,7 +3270,7 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
       {showPopup && (
         <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex justify-center items-center z-50">
 
-          <div className="bg-card p-6 rounded-lg w-96 border">
+          <div className="bg-card border border-border p-6 rounded-lg w-96">
 
             {step === 1 && (
               <>
@@ -3383,7 +3383,7 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
       {}
       {showActionModal && selectedEvent && (
         <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
-          <div className="bg-card p-6 rounded-lg w-96">
+          <div className="bg-card border border-border p-6 rounded-lg w-96">
             <h3 className="text-lg font-semibold mb-2">
               Consulta de {selectedEvent.title}
             </h3>
diff --git a/susconecta/components/ui/input.tsx b/susconecta/components/ui/input.tsx
index 2437868..5c10f18 100644
--- a/susconecta/components/ui/input.tsx
+++ b/susconecta/components/ui/input.tsx
@@ -9,9 +9,9 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       data-slot="input"
       className={cn(
         "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 flex h-9 w-full min-w-0 rounded-md bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "border-2 border-gray-300 dark:border-gray-600",
-        "focus-visible:border-primary focus-visible:ring-primary/20 focus-visible:ring-2",
-        "hover:border-gray-400 dark:hover:border-gray-500",
+        "border border-gray-200/60 dark:border-gray-600/40",
+        "focus-visible:border-primary focus-visible:ring-primary/15 focus-visible:ring-1",
+        "hover:border-gray-300/70 dark:hover:border-gray-500/50",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aria-invalid:border-2",
         className
       )}
diff --git a/susconecta/components/ui/textarea.tsx b/susconecta/components/ui/textarea.tsx
index d28b3ce..e37dc04 100644
--- a/susconecta/components/ui/textarea.tsx
+++ b/susconecta/components/ui/textarea.tsx
@@ -8,9 +8,9 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
       data-slot="textarea"
       className={cn(
         "placeholder:text-muted-foreground dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "border-2 border-gray-300 dark:border-gray-600",
-        "focus-visible:border-primary focus-visible:ring-primary/20 focus-visible:ring-2",
-        "hover:border-gray-400 dark:hover:border-gray-500",
+        "border border-gray-200/60 dark:border-gray-600/40",
+        "focus-visible:border-primary focus-visible:ring-primary/15 focus-visible:ring-1",
+        "hover:border-gray-300/70 dark:hover:border-gray-500/50",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aria-invalid:border-2",
         className
       )}
diff --git a/susconecta/next-env.d.ts b/susconecta/next-env.d.ts
index 830fb59..40c3d68 100644
--- a/susconecta/next-env.d.ts
+++ b/susconecta/next-env.d.ts
@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/susconecta/package-lock.json b/susconecta/package-lock.json
index 268ab68..bb4783c 100644
--- a/susconecta/package-lock.json
+++ b/susconecta/package-lock.json
@@ -9402,6 +9402,21 @@
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.2.16",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.16.tgz",
+      "integrity": "sha512-jhPl3nN0oKEshJBNDAo0etGMzv0j3q3VYorTSFqH1o3rwv1MQRdor27u1zhkgsHPNeY1jxcgyx1ZsCkDD1IHgg==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
     }
   }
 }

From 6585187efdc76a476c222df4d5f952b1d1c5ed18 Mon Sep 17 00:00:00 2001
From: M-Gabrielly <maria.gabrielly221106@gmail.com>
Date: Fri, 3 Oct 2025 17:53:54 -0300
Subject: [PATCH 12/19] =?UTF-8?q?=20=20feat:=20Melhorias=20na=20UI=20e=20c?=
 =?UTF-8?q?onsolida=C3=A7=C3=A3o=20de=20=20=20a=C3=A7=C3=B5es=20para=20for?=
 =?UTF-8?q?mul=C3=A1rios=20de=20agendamento?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

  - calendar-registration-form.tsx:
      - Otimizadas importações de ícones e
  adicionadas novas caixas de seleção para
  reembolso e impressão de etiquetas.
      - Introduzido campo 'Profissional
  solicitante' com funcionalidade de busca.
      - Removido botão 'Cancelar' interno.
  - FooterAgenda.tsx:
      - Consolidado botões de ação,
  removendo 'Cancelar' e 'Salvar as
  alterações' redundantes.
---
 susconecta/app/agenda/appointment-form.tsx    |  22 ---
 susconecta/components/agenda/FooterAgenda.tsx |   9 -
 susconecta/components/dashboard/header.tsx    |  24 +--
 .../components/forms/appointment-form.tsx     |   1 -
 .../forms/calendar-registration-form.tsx      | 166 +++++++++++++++---
 5 files changed, 151 insertions(+), 71 deletions(-)
 delete mode 100644 susconecta/app/agenda/appointment-form.tsx
 delete mode 100644 susconecta/components/forms/appointment-form.tsx

diff --git a/susconecta/app/agenda/appointment-form.tsx b/susconecta/app/agenda/appointment-form.tsx
deleted file mode 100644
index d0d96ff..0000000
--- a/susconecta/app/agenda/appointment-form.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-"use client"
-
-export default function AppointmentForm() {
-  return (
-    <form className="p-4 border rounded space-y-4">
-      <div>
-        <label className="block text-sm font-medium">Paciente</label>
-        <input type="text" className="mt-1 w-full border p-2 rounded" />
-      </div>
-      <div>
-        <label className="block text-sm font-medium">Data</label>
-        <input type="date" className="mt-1 w-full border p-2 rounded" />
-      </div>
-      <button
-        type="submit"
-        className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
-      >
-        Salvar
-      </button>
-    </form>
-  )
-}
diff --git a/susconecta/components/agenda/FooterAgenda.tsx b/susconecta/components/agenda/FooterAgenda.tsx
index 91f73f9..54aa9c4 100644
--- a/susconecta/components/agenda/FooterAgenda.tsx
+++ b/susconecta/components/agenda/FooterAgenda.tsx
@@ -18,15 +18,6 @@ export default function FooterAgenda() {
           <Label className="text-sm text-foreground">Bloqueio de Agenda</Label>
         </div>
         <div className="flex gap-2">
-          <Link href={"/calendar"}>
-            <Button variant="ghost" className="hover:bg-muted hover:text-foreground">Cancelar</Button>
-          </Link>
-          <Link href={"/calendar"}>
-            <Button>
-              <Save className="mr-2 h-4 w-4" />
-              Salvar as alterações
-            </Button>
-          </Link>
         </div>
       </div>
     </div>
diff --git a/susconecta/components/dashboard/header.tsx b/susconecta/components/dashboard/header.tsx
index 9942a60..5e23a67 100644
--- a/susconecta/components/dashboard/header.tsx
+++ b/susconecta/components/dashboard/header.tsx
@@ -35,7 +35,7 @@ export function PagesHeader({ title = "", subtitle = "" }: { title?: string, sub
         <SidebarTrigger />
         <div className="flex items-start flex-col justify-center py-2">
           <h1 className="text-lg font-semibold text-foreground">{title}</h1>
-          <p className="text-gray-600">{subtitle}</p>
+          <p className="text-muted-foreground">{subtitle}</p>
         </div>
       </div>
 
@@ -49,42 +49,42 @@ export function PagesHeader({ title = "", subtitle = "" }: { title?: string, sub
         <div className="relative" ref={dropdownRef}>
           <Button 
             variant="ghost" 
-            className="relative h-8 w-8 rounded-full border-2 border-gray-300 hover:border-blue-500"
+            className="relative h-8 w-8 rounded-full border-2 border-border hover:border-primary"
             onClick={() => setDropdownOpen(!dropdownOpen)}
           >
             <Avatar className="h-8 w-8">
               <AvatarImage src="/avatars/01.png" alt="@usuario" />
-              <AvatarFallback className="bg-blue-500 text-white font-semibold">RA</AvatarFallback>
+              <AvatarFallback className="bg-primary text-primary-foreground font-semibold">RA</AvatarFallback>
             </Avatar>
           </Button>
 
           {/* Dropdown Content */}
           {dropdownOpen && (
-            <div className="absolute right-0 mt-2 w-80 bg-white border border-gray-200 rounded-md shadow-lg z-50">
-              <div className="p-4 border-b border-gray-100">
+            <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-4 border-b border-border">
                 <div className="flex flex-col space-y-1">
                   <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-xs leading-none text-gray-600">{user.email}</p>
+                    <p className="text-xs leading-none text-muted-foreground">{user.email}</p>
                   ) : (
-                    <p className="text-xs leading-none text-gray-600">Email não disponível</p>
+                    <p className="text-xs leading-none text-muted-foreground">Email não disponível</p>
                   )}
-                  <p className="text-xs leading-none text-blue-600 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 className="w-full text-left px-4 py-2 text-sm hover:bg-gray-100 cursor-pointer">
+                <button className="w-full text-left px-4 py-2 text-sm hover:bg-accent cursor-pointer">
                   👤 Perfil
                 </button>
-                <button className="w-full text-left px-4 py-2 text-sm hover:bg-gray-100 cursor-pointer">
+                <button className="w-full text-left px-4 py-2 text-sm hover:bg-accent cursor-pointer">
                   ⚙️ Configurações
                 </button>
-                <div className="border-t border-gray-100 my-1"></div>
+                <div className="border-t border-border my-1"></div>
                 <button 
                   onClick={(e) => {
                     e.preventDefault();
@@ -93,7 +93,7 @@ export function PagesHeader({ title = "", subtitle = "" }: { title?: string, sub
                     // Usar sempre o logout do hook useAuth (ele já redireciona corretamente)
                     logout();
                   }}
-                  className="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50 cursor-pointer"
+                  className="w-full text-left px-4 py-2 text-sm text-destructive hover:bg-destructive/10 cursor-pointer"
                 >
                   🚪 Sair
                 </button>
diff --git a/susconecta/components/forms/appointment-form.tsx b/susconecta/components/forms/appointment-form.tsx
deleted file mode 100644
index 7898151..0000000
--- a/susconecta/components/forms/appointment-form.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from '@/app/agenda/appointment-form';
diff --git a/susconecta/components/forms/calendar-registration-form.tsx b/susconecta/components/forms/calendar-registration-form.tsx
index c06185f..8091f3c 100644
--- a/susconecta/components/forms/calendar-registration-form.tsx
+++ b/susconecta/components/forms/calendar-registration-form.tsx
@@ -1,26 +1,74 @@
+
 "use client";
 
 import { useState, useEffect } from "react";
+import dynamic from 'next/dynamic';
 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 { Calendar, Search, ChevronDown, Upload, FileDown, Tag } from "lucide-react";
+import { Calendar, Search, ChevronDown } from "lucide-react";
 
-export function CalendarRegistrationForm({ initialData, onSave, onCancel }: any) {
-  const [formData, setFormData] = useState(initialData || {});
+interface FormData {
+  patientName?: string;
+  cpf?: string;
+  rg?: string;
+  birthDate?: string;
+  phoneCode?: string;
+  phoneNumber?: string;
+  email?: string;
+  convenio?: string;
+  matricula?: string;
+  validade?: string;
+  documentos?: string;
+  professionalName?: string;
+  unit?: string;
+  appointmentDate?: string;
+  startTime?: string;
+  endTime?: string;
+  requestingProfessional?: string;
+  appointmentType?: string;
+  notes?: string;
+}
+
+interface CalendarRegistrationFormProperties {
+  initialData?: FormData;
+  onSave: (data: FormData) => void;
+  onCancel: () => void;
+}
+
+const formatValidityDate = (value: string) => {
+  const cleaned = value.replaceAll(/\D/g, "");
+  if (cleaned.length > 4) {
+    return `${cleaned.slice(0, 2)}/${cleaned.slice(2, 4)}/${cleaned.slice(4, 8)}`;
+  }
+  if (cleaned.length > 2) {
+    return `${cleaned.slice(0, 2)}/${cleaned.slice(2, 4)}`;
+  }
+  return cleaned;
+};
+
+export function CalendarRegistrationForm({ initialData, onSave, onCancel }: CalendarRegistrationFormProperties) {
+  const [formData, setFormData] = useState<FormData>(initialData || {});
+  const [isAdditionalInfoOpen, setIsAdditionalInfoOpen] = useState(false);
 
   useEffect(() => {
     setFormData(initialData || {});
   }, [initialData]);
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
-    const { name, value } = e.target;
-    setFormData((prev: any) => ({ ...prev, [name]: value }));
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+    const { name, value } = event.target;
+
+    if (name === 'validade') {
+        const formattedValue = formatValidityDate(value);
+        setFormData((previousState) => ({ ...previousState, [name]: formattedValue }));
+    } else {
+        setFormData((previousState) => ({ ...previousState, [name]: value }));
+    }
   };
 
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
     onSave(formData);
   };
 
@@ -29,7 +77,7 @@ export function CalendarRegistrationForm({ initialData, onSave, onCancel }: any)
       <div className="border border-border rounded-md p-6 space-y-4 bg-card">
         <h2 className="font-medium text-foreground">Informações do paciente</h2>
         <div className="grid grid-cols-1 md:grid-cols-12 gap-4">
-            <div className="md:col-span-6">
+            <div className="md:col-span-6 space-y-2">
               <Label>Nome *</Label>
               <div className="relative">
                 <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
@@ -42,19 +90,19 @@ export function CalendarRegistrationForm({ initialData, onSave, onCancel }: any)
                 />
               </div>
             </div>
-            <div className="md:col-span-3">
+            <div className="md:col-span-3 space-y-2">
               <Label>CPF do paciente</Label>
               <Input name="cpf" placeholder="Número do CPF" className="h-10" value={formData.cpf || ''} onChange={handleChange} />
             </div>
-            <div className="md:col-span-3">
+            <div className="md:col-span-3 space-y-2">
               <Label>RG</Label>
               <Input name="rg" placeholder="Número do RG" className="h-10" value={formData.rg || ''} onChange={handleChange} />
             </div>
-            <div className="md:col-span-3">
+            <div className="md:col-span-3 space-y-2">
               <Label>Data de nascimento *</Label>
               <Input name="birthDate" type="date" className="h-10" value={formData.birthDate || ''} onChange={handleChange} />
             </div>
-            <div className="md:col-span-3">
+            <div className="md:col-span-3 space-y-2">
               <Label>Telefone</Label>
               <div className="flex gap-2">
                 <select name="phoneCode" className="h-10 w-20 rounded-md border border-input bg-background text-foreground px-2 text-[13px]" value={formData.phoneCode || '+55'} onChange={handleChange}>
@@ -65,19 +113,60 @@ export function CalendarRegistrationForm({ initialData, onSave, onCancel }: any)
                 <Input name="phoneNumber" placeholder="(99) 99999-9999" className="h-10 flex-1" value={formData.phoneNumber || ''} onChange={handleChange} />
               </div>
             </div>
-            <div className="md:col-span-6">
+            <div className="md:col-span-6 space-y-2">
               <Label>E-mail</Label>
               <Input name="email" type="email" placeholder="email@exemplo.com" className="h-10" value={formData.email || ''} onChange={handleChange} />
             </div>
+            <div className="md:col-span-6 space-y-2">
+              <Label>Convênio</Label>
+              <div className="relative">
+                <select name="convenio" className="h-10 w-full rounded-md border border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none" value={formData.convenio || ''} onChange={handleChange}>
+                    <option value="" disabled>Selecione um convênio</option>
+                    <option value="sulamerica">Sulamérica</option>
+                    <option value="bradesco">Bradesco Saúde</option>
+                    <option value="amil">Amil</option>
+                    <option value="unimed">Unimed</option>
+                </select>
+                <ChevronDown className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              </div>
+            </div>
+            <div className="md:col-span-6 space-y-2">
+                <div className="grid grid-cols-2 gap-3">
+                    <div className="space-y-2">
+                        <Label>Matrícula</Label>
+                        <Input name="matricula" placeholder="000000000" maxLength={9} className="h-10" value={formData.matricula || ''} onChange={handleChange} />
+                    </div>
+                    <div className="space-y-2">
+                        <Label>Validade</Label>
+                        <Input name="validade" placeholder="00/00/0000" className="h-10" value={formData.validade || ''} onChange={handleChange} />
+                    </div>
+                </div>
+            </div>
+            <div className="md:col-span-12 pt-2">
+                <div 
+                    className="flex items-center justify-between cursor-pointer"
+                    onClick={() => setIsAdditionalInfoOpen(!isAdditionalInfoOpen)}
+                >
+                    <h3 className="text-base font-medium text-foreground">Informações adicionais</h3>
+                    <ChevronDown className={`h-5 w-5 text-muted-foreground transition-transform duration-200 ${isAdditionalInfoOpen ? 'rotate-180' : ''}`} />
+                </div>
+                {isAdditionalInfoOpen && (
+                    <div className="mt-4 space-y-2">
+                        <Label>Documentos e anexos</Label>
+                        <Textarea name="documentos" rows={5} className="text-[13px] resize-none" value={formData.documentos || ''} onChange={handleChange} />
+                    </div>
+                )}
+            </div>
         </div>
       </div>
 
-      {}
       <div className="border border-border rounded-md p-6 space-y-4 bg-card">
-        <h2 className="font-medium text-foreground">Informações do atendimento</h2>
+        <div className="flex justify-between items-center">
+            <h2 className="font-medium text-foreground">Informações do atendimento</h2>
+        </div>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div className="space-y-4">
-                <div>
+                <div className="space-y-2">
                     <Label className="text-[13px]">Nome do profissional *</Label>
                     <div className="relative">
                         <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
@@ -85,14 +174,14 @@ export function CalendarRegistrationForm({ initialData, onSave, onCancel }: any)
                     </div>
                 </div>
                 <div className="grid grid-cols-2 gap-3">
-                    <div>
+                    <div className="space-y-2">
                         <Label className="text-[13px]">Unidade *</Label>
                         <select name="unit" className="h-10 w-full rounded-md border border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none" value={formData.unit || 'nei'} onChange={handleChange}>
                             <option value="nei">Núcleo de Especialidades Integradas</option>
                             <option value="cc">Clínica Central</option>
                         </select>
                     </div>
-                    <div>
+                    <div className="space-y-2">
                         <Label className="text-[13px]">Data *</Label>
                         <div className="relative">
                             <Calendar className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
@@ -100,27 +189,51 @@ export function CalendarRegistrationForm({ initialData, onSave, onCancel }: any)
                         </div>
                     </div>
                 </div>
-                <div className="grid grid-cols-2 gap-3">
-                    <div>
+                <div className="grid grid-cols-3 gap-3">
+                    <div className="space-y-2">
                         <Label className="text-[13px]">Início *</Label>
                         <Input name="startTime" type="time" className="h-10 w-full rounded-md border border-input px-3 text-[13px]" value={formData.startTime || ''} onChange={handleChange} />
                     </div>
-                    <div>
+                    <div className="space-y-2">
                         <Label className="text-[13px]">Término *</Label>
                         <Input name="endTime" type="time" className="h-10 w-full rounded-md border border-input px-3 text-[13px]" value={formData.endTime || ''} onChange={handleChange} />
                     </div>
+                    <div className="space-y-2">
+                        <Label className="text-[13px]">Profissional solicitante</Label>
+                        <div className="relative">
+                            <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                            <select name="requestingProfessional" className="h-10 w-full rounded-md border border-input bg-background text-foreground pr-8 pl-8 text-[13px] appearance-none" value={formData.requestingProfessional || ''} onChange={handleChange}>
+                                <option value="" disabled>Selecione solicitante</option>
+                                <option value="dr-a">Dr. A</option>
+                                <option value="dr-b">Dr. B</option>
+                            </select>
+                            <ChevronDown className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                        </div>
+                    </div>
                 </div>
             </div>
             <div className="space-y-4">
-                <div>
-                    <Label className="text-[13px]">Tipo de atendimento *</Label>
+                <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                        <Label className="text-[13px]">Tipo de atendimento *</Label>
+                        <div className="flex items-center space-x-2">
+                            <Input type="checkbox" id="reembolso" className="h-4 w-4" />
+                            <Label htmlFor="reembolso" className="text-[13px] font-medium">Pagamento via Reembolso</Label>
+                        </div>
+                    </div>
                     <div className="relative mt-1">
                         <Search className="pointer-events-none absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                         <Input name="appointmentType" placeholder="Pesquisar" className="h-10 w-full rounded-md border border-input pl-8 pr-8 text-[13px]" value={formData.appointmentType || ''} onChange={handleChange} />
                     </div>
                 </div>
-                <div>
-                    <Label className="text-[13px]">Observações</Label>
+                <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                        <Label className="text-[13px]">Observações</Label>
+                        <div className="flex items-center space-x-2">
+                            <Input type="checkbox" id="imprimir" className="h-4 w-4" />
+                            <Label htmlFor="imprimir" className="text-[13px] font-medium">Imprimir na Etiqueta / Pulseira</Label>
+                        </div>
+                    </div>
                     <Textarea name="notes" rows={6} className="text-[13px] min-h-[120px] resize-none" value={formData.notes || ''} onChange={handleChange} />
                 </div>
             </div>
@@ -128,7 +241,6 @@ export function CalendarRegistrationForm({ initialData, onSave, onCancel }: any)
       </div>
 
       <div className="flex justify-end gap-2">
-        <Button type="button" variant="outline" onClick={onCancel}>Cancelar</Button>
         <Button type="submit">Salvar</Button>
       </div>
     </form>

From 4ac663f9e776caed2d505a27343cd321b40ddd01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Gustavo?=
 <166467972+JoaoGustavo-dev@users.noreply.github.com>
Date: Fri, 3 Oct 2025 19:22:46 -0300
Subject: [PATCH 13/19] fix-dark-mode-page

---
 susconecta/components/header.tsx              | 12 ++++++------
 susconecta/components/hero-section.tsx        |  4 ++--
 susconecta/components/simple-theme-toggle.tsx |  7 ++++++-
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/susconecta/components/header.tsx b/susconecta/components/header.tsx
index 71ee7b0..b1e9117 100644
--- a/susconecta/components/header.tsx
+++ b/susconecta/components/header.tsx
@@ -47,18 +47,18 @@ export function Header() {
             <SimpleThemeToggle />
             <Button
               variant="outline"
-              className="text-primary border-primary hover:bg-primary hover:text-primary-foreground bg-transparent"
+              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
             >
               <Link href="/login-paciente">Sou Paciente</Link>
             </Button>
-            <Button className="bg-primary hover:bg-primary/90 text-primary-foreground">
+            <Button className="bg-primary hover:bg-primary/90 text-primary-foreground shadow-sm shadow-blue-500/10 border border-blue-200 dark:shadow-none dark:border-transparent">
               <Link href="/login">Sou Profissional de Saúde</Link>
             </Button>
             <Link href="/login-admin">
               <Button
                 variant="outline"
-                className="text-slate-700 border-slate-600 hover:bg-slate-700 hover:text-white bg-transparent"
+                className="text-foreground border-slate-600 bg-transparent shadow-sm shadow-gray-500/10 border border-gray-300 hover:bg-gray-50 dark:shadow-none dark:border-slate-600 dark:hover:bg-slate-700 dark:hover:text-white cursor-pointer"
               >
                 Sou Administrador de uma Clínica
               </Button>
@@ -97,18 +97,18 @@ export function Header() {
                 <SimpleThemeToggle />
                 <Button
                   variant="outline"
-                  className="text-primary border-primary hover:bg-primary hover:text-primary-foreground bg-transparent"
+                  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
                 >
                   <Link href="/login-paciente">Sou Paciente</Link>
                 </Button>
-                <Button className="bg-primary hover:bg-primary/90 text-primary-foreground w-full">
+                <Button className="bg-primary hover:bg-primary/90 text-primary-foreground w-full shadow-sm shadow-blue-500/10 border border-blue-200 dark:shadow-none dark:border-transparent">
                   <Link href="/login">Sou Profissional de Saúde</Link>
                 </Button>
                 <Link href="/login-admin">
                   <Button
                     variant="outline"
-                    className="text-slate-700 border-slate-600 hover:bg-slate-700 hover:text-white bg-transparent w-full"
+                    className="text-foreground border-slate-600 bg-transparent w-full shadow-sm shadow-gray-500/10 border border-gray-300 hover:bg-gray-50 dark:shadow-none dark:border-slate-600 dark:hover:bg-slate-700 dark:hover:text-white cursor-pointer"
                   >
                     Sou Administrador de uma Clínica
                   </Button>
diff --git a/susconecta/components/hero-section.tsx b/susconecta/components/hero-section.tsx
index f73cc84..3fb27cc 100644
--- a/susconecta/components/hero-section.tsx
+++ b/susconecta/components/hero-section.tsx
@@ -27,7 +27,7 @@ export function HeroSection() {
             <div className="flex flex-col sm:flex-row gap-4">
               <Button 
                 size="lg" 
-                className="bg-primary hover:bg-primary/90 text-primary-foreground cursor-pointer"
+                className="bg-primary hover:bg-primary/90 text-primary-foreground cursor-pointer shadow-sm shadow-blue-500/10 border border-blue-200 dark:shadow-none dark:border-transparent"
                 asChild
               >
                 <Link href="/login-paciente">Portal do Paciente</Link>
@@ -35,7 +35,7 @@ export function HeroSection() {
               <Button
                 size="lg"
                 variant="outline"
-                className="text-primary border-primary hover:bg-primary hover:text-primary-foreground bg-transparent cursor-pointer"
+                className="text-primary border-primary bg-transparent cursor-pointer 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
               >
                 <Link href="/login">Sou Profissional de Saúde</Link>
diff --git a/susconecta/components/simple-theme-toggle.tsx b/susconecta/components/simple-theme-toggle.tsx
index 033d129..c322131 100644
--- a/susconecta/components/simple-theme-toggle.tsx
+++ b/susconecta/components/simple-theme-toggle.tsx
@@ -13,7 +13,12 @@ export function SimpleThemeToggle() {
   }
 
   return (
-    <Button variant="outline" size="icon" onClick={toggleTheme}>
+    <Button 
+      variant="outline" 
+      size="icon" 
+      onClick={toggleTheme}
+      className="hover:text-muted-foreground cursor-pointer !shadow-sm !shadow-black/10 !border-2 !border-black dark:!shadow-none dark:!border-border"
+    >
       <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>

From 7061909480f5ff41c9a64f5b47bbeee981cfda3b Mon Sep 17 00:00:00 2001
From: Jonas Francisco <jonastom478@gmail.com>
Date: Fri, 3 Oct 2025 20:15:51 -0300
Subject: [PATCH 14/19] =?UTF-8?q?fix:=20corrigir=20hover=20dos=20bot=C3=B5?=
 =?UTF-8?q?es=20para=20azul=20padronizado?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Corrigir botão "Hoje" para ter hover azul ao invés de branco
- Adicionar CSS para padronizar todos os hovers para azul
- Corrigir ícones que ficavam invisíveis no hover
- Melhorar consistência visual entre modo claro e escuro
---
 susconecta/app/profissional/page.tsx | 2 +-
 susconecta/components/header.tsx     | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/susconecta/app/profissional/page.tsx b/susconecta/app/profissional/page.tsx
index e6f130f..559dd8c 100644
--- a/susconecta/app/profissional/page.tsx
+++ b/susconecta/app/profissional/page.tsx
@@ -485,7 +485,7 @@ const ProfissionalPage = () => {
               variant="outline"
               size="sm"
               onClick={goToToday}
-              className="ml-4 px-3 py-1 text-sm transition-colors hover:bg-primary hover:text-white cursor-pointer"
+              className="w-full justify-start transition-colors hover:bg-primary hover:text-white cursor-pointer"
             >
               Hoje
             </Button>
diff --git a/susconecta/components/header.tsx b/susconecta/components/header.tsx
index 71ee7b0..9821b94 100644
--- a/susconecta/components/header.tsx
+++ b/susconecta/components/header.tsx
@@ -47,18 +47,19 @@ export function Header() {
             <SimpleThemeToggle />
             <Button
               variant="outline"
-              className="text-primary border-primary hover:bg-primary hover:text-primary-foreground bg-transparent"
+              className="text-primary border-primary hover:bg-transparent hover:text-primary bg-transparent transition-all duration-200"
               asChild
             >
+
               <Link href="/login-paciente">Sou Paciente</Link>
             </Button>
             <Button className="bg-primary hover:bg-primary/90 text-primary-foreground">
               <Link href="/login">Sou Profissional de Saúde</Link>
             </Button>
             <Link href="/login-admin">
-              <Button
+             <Button
                 variant="outline"
-                className="text-slate-700 border-slate-600 hover:bg-slate-700 hover:text-white bg-transparent"
+                className="text-slate-700 border-slate-600 hover:bg-transparent hover:text-slate-700 bg-transparent transition-all duration-200"
               >
                 Sou Administrador de uma Clínica
               </Button>

From 5d00ffb508be51255ee3566b5347d42932506157 Mon Sep 17 00:00:00 2001
From: M-Gabrielly <maria.gabrielly221106@gmail.com>
Date: Fri, 3 Oct 2025 20:17:28 -0300
Subject: [PATCH 15/19] feat(ui): standardize form and navigation styles

- Standardize borders for all fields (inputs, selects, textareas) with gray-300
- Add consistent hover effect (gray-400) across all fields
- Implement active highlight (blue) on navigation buttons
- Adjust field height from h-10 to h-11 for better proportion
- Add blue hover effect on back button
- Remove unnecessary icons from information card
- Ensure visual consistency only in light mode
- Apply changes to: Input, Textarea, HeaderAgenda, FooterAgenda,
  calendar-registration-form and financeiro page

BREAKING CHANGE: Input and Textarea components now use border-gray-300
by default in light mode instead of border-input
---
 susconecta/app/agenda/page.tsx                |  39 +++++--
 susconecta/app/financeiro/page.tsx            |  10 +-
 susconecta/components/agenda/FooterAgenda.tsx |  10 +-
 susconecta/components/agenda/HeaderAgenda.tsx |  32 +++---
 .../forms/calendar-registration-form.tsx      | 100 +++++++-----------
 susconecta/components/ui/input.tsx            |   4 +-
 susconecta/components/ui/textarea.tsx         |   4 +-
 7 files changed, 108 insertions(+), 91 deletions(-)

diff --git a/susconecta/app/agenda/page.tsx b/susconecta/app/agenda/page.tsx
index 36cc1cc..f4212da 100644
--- a/susconecta/app/agenda/page.tsx
+++ b/susconecta/app/agenda/page.tsx
@@ -4,12 +4,40 @@ import { useRouter } from "next/navigation";
 import { CalendarRegistrationForm } from "@/components/forms/calendar-registration-form";
 import HeaderAgenda from "@/components/agenda/HeaderAgenda";
 import FooterAgenda from "@/components/agenda/FooterAgenda";
+import { useState } from "react";
+
+interface FormData {
+  patientName?: string;
+  cpf?: string;
+  rg?: string;
+  birthDate?: string;
+  phoneCode?: string;
+  phoneNumber?: string;
+  email?: string;
+  convenio?: string;
+  matricula?: string;
+  validade?: string;
+  documentos?: string;
+  professionalName?: string;
+  unit?: string;
+  appointmentDate?: string;
+  startTime?: string;
+  endTime?: string;
+  requestingProfessional?: string;
+  appointmentType?: string;
+  notes?: string;
+}
 
 export default function NovoAgendamentoPage() {
   const router = useRouter();
+  const [formData, setFormData] = useState<FormData>({});
 
-  const handleSave = (data: any) => {
-    console.log("Salvando novo agendamento...", data);
+  const handleFormChange = (data: FormData) => {
+    setFormData(data);
+  };
+
+  const handleSave = () => {
+    console.log("Salvando novo agendamento...", formData);
     alert("Novo agendamento salvo (simulado)!");
     router.push("/consultas"); 
   };
@@ -23,12 +51,11 @@ export default function NovoAgendamentoPage() {
       <HeaderAgenda />
       <main className="flex-1 mx-auto w-full max-w-7xl px-8 py-8">
         <CalendarRegistrationForm 
-            onSave={handleSave} 
-            onCancel={handleCancel} 
-            initialData={{}} 
+            formData={formData} 
+            onFormChange={handleFormChange} 
         />
       </main>
-      <FooterAgenda />
+      <FooterAgenda onSave={handleSave} onCancel={handleCancel} />
     </div>
   );
 }
\ No newline at end of file
diff --git a/susconecta/app/financeiro/page.tsx b/susconecta/app/financeiro/page.tsx
index bb14865..07c8cc7 100644
--- a/susconecta/app/financeiro/page.tsx
+++ b/susconecta/app/financeiro/page.tsx
@@ -53,7 +53,7 @@ export default function FinanceiroPage() {
                   <DollarSign className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                   <Input
                     placeholder="R$ 0,00"
-                    className="h-10 w-full rounded-md pl-8 pr-4 border-input focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
+                    className="h-10 w-full rounded-md pl-8 pr-4 focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
                   />
                 </div>
               </div>
@@ -63,7 +63,7 @@ export default function FinanceiroPage() {
                   <DollarSign className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                   <Input
                     placeholder="R$ 0,00"
-                    className="h-10 w-full rounded-md pl-8 pr-4 border-input focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
+                    className="h-10 w-full rounded-md pl-8 pr-4 focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
                   />
                 </div>
               </div>
@@ -81,7 +81,7 @@ export default function FinanceiroPage() {
             <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
               <div className="space-y-2">
                 <Label className="text-xs text-muted-foreground">Tipo</Label>
-                <select className="h-10 w-full rounded-md border border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none">
+                <select className="h-10 w-full rounded-md border border-gray-300 dark:border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none transition-colors hover:bg-muted/30 hover:border-gray-400">
                   <option value="">Selecionar</option>
                   <option value="dinheiro">Dinheiro</option>
                   <option value="cartao">Cartão</option>
@@ -91,7 +91,7 @@ export default function FinanceiroPage() {
               </div>
               <div className="space-y-2">
                 <Label className="text-xs text-muted-foreground">Parcelas</Label>
-                <select className="h-10 w-full rounded-md border border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none">
+                <select className="h-10 w-full rounded-md border border-gray-300 dark:border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none transition-colors hover:bg-muted/30 hover:border-gray-400">
                   <option value="1">1x</option>
                   <option value="2">2x</option>
                   <option value="3">3x</option>
@@ -106,7 +106,7 @@ export default function FinanceiroPage() {
                   <Calculator className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                   <Input
                     placeholder="0%"
-                    className="h-10 w-full rounded-md pl-8 pr-4 border-input focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
+                    className="h-10 w-full rounded-md pl-8 pr-4 focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
                   />
                 </div>
               </div>
diff --git a/susconecta/components/agenda/FooterAgenda.tsx b/susconecta/components/agenda/FooterAgenda.tsx
index 54aa9c4..37a6fa6 100644
--- a/susconecta/components/agenda/FooterAgenda.tsx
+++ b/susconecta/components/agenda/FooterAgenda.tsx
@@ -5,9 +5,13 @@ import { Button } from "../ui/button";
 import { Label } from "../ui/label";
 import { Switch } from "../ui/switch";
 import { useState } from "react";
-import Link from "next/link";
 
-export default function FooterAgenda() {
+interface FooterAgendaProps {
+  onSave: () => void;
+  onCancel: () => void;
+}
+
+export default function FooterAgenda({ onSave, onCancel }: FooterAgendaProps) {
   const [bloqueio, setBloqueio] = useState(false);
   
   return (
@@ -18,6 +22,8 @@ export default function FooterAgenda() {
           <Label className="text-sm text-foreground">Bloqueio de Agenda</Label>
         </div>
         <div className="flex gap-2">
+          <Button variant="ghost" onClick={onCancel}>Cancelar</Button>
+          <Button onClick={onSave}>Salvar</Button>
         </div>
       </div>
     </div>
diff --git a/susconecta/components/agenda/HeaderAgenda.tsx b/susconecta/components/agenda/HeaderAgenda.tsx
index 829dfc9..64b229f 100644
--- a/susconecta/components/agenda/HeaderAgenda.tsx
+++ b/susconecta/components/agenda/HeaderAgenda.tsx
@@ -8,17 +8,10 @@ export default function HeaderAgenda() {
   const pathname = usePathname();
   const router = useRouter();
 
-  const isAg = pathname?.startsWith("/agendamento");
+  const isAg = pathname?.startsWith("/agenda");
   const isPr = pathname?.startsWith("/procedimento");
   const isFi = pathname?.startsWith("/financeiro");
 
-  const tabCls = (active: boolean, extra = "") =>
-    `px-4 py-1.5 text-[13px] border ${
-      active
-        ? "border-blue-500 bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 font-medium"
-        : "text-muted-foreground hover:bg-muted border-border"
-    } ${extra}`;
-
   return (
     <header className="border-b bg-background border-border">
       <div className="mx-auto w-full max-w-7xl px-8 py-3 flex items-center justify-between">
@@ -33,24 +26,33 @@ export default function HeaderAgenda() {
             <Link
               href="/agenda"
               role="tab"
-              aria-selected={isAg}
-              className={tabCls(Boolean(isAg)) + " rounded-md"}
+              className={`px-4 py-1.5 text-[13px] font-medium border rounded-md ${
+                isAg 
+                  ? "bg-primary text-white border-primary dark:bg-primary dark:text-white" 
+                  : "text-foreground hover:bg-muted border-input"
+              }`}
             >
               Agendamento
             </Link>
             <Link
               href="/procedimento"
               role="tab"
-              aria-selected={isPr}
-              className={tabCls(Boolean(isPr)) + " rounded-md"}
+              className={`px-4 py-1.5 text-[13px] font-medium border rounded-md ${
+                isPr 
+                  ? "bg-primary text-white border-primary dark:bg-primary dark:text-white" 
+                  : "text-foreground hover:bg-muted border-input"
+              }`}
             >
               Procedimento
             </Link>
             <Link
               href="/financeiro"
               role="tab"
-              aria-selected={isFi}
-              className={tabCls(Boolean(isFi)) + " rounded-md"}
+              className={`px-4 py-1.5 text-[13px] font-medium border rounded-md ${
+                isFi 
+                  ? "bg-primary text-white border-primary dark:bg-primary dark:text-white" 
+                  : "text-foreground hover:bg-muted border-input"
+              }`}
             >
               Financeiro
             </Link>
@@ -60,7 +62,7 @@ export default function HeaderAgenda() {
             type="button"
             aria-label="Histórico"
             onClick={() => router.back()}
-            className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-border bg-background text-muted-foreground hover:bg-muted"
+            className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-border bg-background text-muted-foreground hover:bg-primary hover:text-white hover:border-primary transition-colors"
           >
             <RotateCcw className="h-4 w-4" />
           </button>
diff --git a/susconecta/components/forms/calendar-registration-form.tsx b/susconecta/components/forms/calendar-registration-form.tsx
index 8091f3c..667eb13 100644
--- a/susconecta/components/forms/calendar-registration-form.tsx
+++ b/susconecta/components/forms/calendar-registration-form.tsx
@@ -1,9 +1,7 @@
 
 "use client";
 
-import { useState, useEffect } from "react";
-import dynamic from 'next/dynamic';
-import { Button } from "@/components/ui/button";
+import { useState } from "react";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
@@ -32,9 +30,8 @@ interface FormData {
 }
 
 interface CalendarRegistrationFormProperties {
-  initialData?: FormData;
-  onSave: (data: FormData) => void;
-  onCancel: () => void;
+  formData: FormData;
+  onFormChange: (data: FormData) => void;
 }
 
 const formatValidityDate = (value: string) => {
@@ -48,79 +45,69 @@ const formatValidityDate = (value: string) => {
   return cleaned;
 };
 
-export function CalendarRegistrationForm({ initialData, onSave, onCancel }: CalendarRegistrationFormProperties) {
-  const [formData, setFormData] = useState<FormData>(initialData || {});
+export function CalendarRegistrationForm({ formData, onFormChange }: CalendarRegistrationFormProperties) {
   const [isAdditionalInfoOpen, setIsAdditionalInfoOpen] = useState(false);
 
-  useEffect(() => {
-    setFormData(initialData || {});
-  }, [initialData]);
-
   const handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
     const { name, value } = event.target;
 
     if (name === 'validade') {
         const formattedValue = formatValidityDate(value);
-        setFormData((previousState) => ({ ...previousState, [name]: formattedValue }));
+        onFormChange({ ...formData, [name]: formattedValue });
     } else {
-        setFormData((previousState) => ({ ...previousState, [name]: value }));
+        onFormChange({ ...formData, [name]: value });
     }
   };
 
-  const handleSubmit = (event: React.FormEvent) => {
-    event.preventDefault();
-    onSave(formData);
-  };
-
   return (
-    <form onSubmit={handleSubmit} className="space-y-8">
+    <form className="space-y-8">
       <div className="border border-border rounded-md p-6 space-y-4 bg-card">
         <h2 className="font-medium text-foreground">Informações do paciente</h2>
         <div className="grid grid-cols-1 md:grid-cols-12 gap-4">
             <div className="md:col-span-6 space-y-2">
-              <Label>Nome *</Label>
+              <Label className="text-[13px]">Nome *</Label>
               <div className="relative">
                 <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                 <Input
                   name="patientName" 
                   placeholder="Digite o nome do paciente"
-                  className="h-10 pl-8"
+                  className="h-11 pl-8 rounded-md transition-colors hover:bg-muted/30"
                   value={formData.patientName || ''}
                   onChange={handleChange}
                 />
               </div>
             </div>
             <div className="md:col-span-3 space-y-2">
-              <Label>CPF do paciente</Label>
-              <Input name="cpf" placeholder="Número do CPF" className="h-10" value={formData.cpf || ''} onChange={handleChange} />
+              <Label className="text-[13px]">CPF do paciente</Label>
+              <Input name="cpf" placeholder="Número do CPF" className="h-11 rounded-md transition-colors hover:bg-muted/30" value={formData.cpf || ''} onChange={handleChange} />
             </div>
             <div className="md:col-span-3 space-y-2">
-              <Label>RG</Label>
-              <Input name="rg" placeholder="Número do RG" className="h-10" value={formData.rg || ''} onChange={handleChange} />
+              <Label className="text-[13px]">RG</Label>
+              <Input name="rg" placeholder="Número do RG" className="h-11 rounded-md transition-colors hover:bg-muted/30" value={formData.rg || ''} onChange={handleChange} />
             </div>
             <div className="md:col-span-3 space-y-2">
-              <Label>Data de nascimento *</Label>
-              <Input name="birthDate" type="date" className="h-10" value={formData.birthDate || ''} onChange={handleChange} />
+              <Label className="text-[13px]">Data de nascimento *</Label>
+              <Input name="birthDate" type="date" className="h-11 rounded-md transition-colors hover:bg-muted/30" value={formData.birthDate || ''} onChange={handleChange} />
             </div>
             <div className="md:col-span-3 space-y-2">
-              <Label>Telefone</Label>
+              <Label className="text-[13px]">Telefone</Label>
               <div className="flex gap-2">
-                <select name="phoneCode" className="h-10 w-20 rounded-md border border-input bg-background text-foreground px-2 text-[13px]" value={formData.phoneCode || '+55'} onChange={handleChange}>
+                <select name="phoneCode" className="h-11 w-20 rounded-md border border-gray-300 dark:border-input bg-background text-foreground px-2 text-[13px] transition-colors hover:bg-muted/30 hover:border-gray-400" value={formData.phoneCode || '+55'} onChange={handleChange}>
                   <option value="+55">+55</option>
                   <option value="+351">+351</option>
                   <option value="+1">+1</option>
                 </select>
-                <Input name="phoneNumber" placeholder="(99) 99999-9999" className="h-10 flex-1" value={formData.phoneNumber || ''} onChange={handleChange} />
+                <Input name="phoneNumber" placeholder="(99) 99999-9999" className="h-11 flex-1 rounded-md transition-colors hover:bg-muted/30" value={formData.phoneNumber || ''} onChange={handleChange} />
               </div>
             </div>
             <div className="md:col-span-6 space-y-2">
-              <Label>E-mail</Label>
-              <Input name="email" type="email" placeholder="email@exemplo.com" className="h-10" value={formData.email || ''} onChange={handleChange} />
+              <Label className="text-[13px]">E-mail</Label>
+              <Input name="email" type="email" placeholder="email@exemplo.com" className="h-11 rounded-md transition-colors hover:bg-muted/30" value={formData.email || ''} onChange={handleChange} />
             </div>
             <div className="md:col-span-6 space-y-2">
-              <Label>Convênio</Label>
+              <Label className="text-[13px]">Convênio</Label>
               <div className="relative">
-                <select name="convenio" className="h-10 w-full rounded-md border border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none" value={formData.convenio || ''} onChange={handleChange}>
+                <select name="convenio" className="h-11 w-full rounded-md border border-gray-300 dark:border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none transition-colors hover:bg-muted/30 hover:border-gray-400" value={formData.convenio || ''} onChange={handleChange}>
                     <option value="" disabled>Selecione um convênio</option>
                     <option value="sulamerica">Sulamérica</option>
                     <option value="bradesco">Bradesco Saúde</option>
@@ -133,27 +120,27 @@ export function CalendarRegistrationForm({ initialData, onSave, onCancel }: Cale
             <div className="md:col-span-6 space-y-2">
                 <div className="grid grid-cols-2 gap-3">
                     <div className="space-y-2">
-                        <Label>Matrícula</Label>
-                        <Input name="matricula" placeholder="000000000" maxLength={9} className="h-10" value={formData.matricula || ''} onChange={handleChange} />
+                        <Label className="text-[13px]">Matrícula</Label>
+                        <Input name="matricula" placeholder="000000000" maxLength={9} className="h-11 rounded-md transition-colors hover:bg-muted/30" value={formData.matricula || ''} onChange={handleChange} />
                     </div>
                     <div className="space-y-2">
-                        <Label>Validade</Label>
-                        <Input name="validade" placeholder="00/00/0000" className="h-10" value={formData.validade || ''} onChange={handleChange} />
+                        <Label className="text-[13px]">Validade</Label>
+                        <Input name="validade" placeholder="00/00/0000" className="h-11 rounded-md transition-colors hover:bg-muted/30" value={formData.validade || ''} onChange={handleChange} />
                     </div>
                 </div>
             </div>
-            <div className="md:col-span-12 pt-2">
+            <div className="md:col-span-12 space-y-2">
                 <div 
                     className="flex items-center justify-between cursor-pointer"
                     onClick={() => setIsAdditionalInfoOpen(!isAdditionalInfoOpen)}
                 >
-                    <h3 className="text-base font-medium text-foreground">Informações adicionais</h3>
-                    <ChevronDown className={`h-5 w-5 text-muted-foreground transition-transform duration-200 ${isAdditionalInfoOpen ? 'rotate-180' : ''}`} />
+                    <Label className="text-sm font-medium cursor-pointer">Informações adicionais</Label>
+                    <ChevronDown className={`h-4 w-4 text-muted-foreground transition-transform duration-200 ${isAdditionalInfoOpen ? 'rotate-180' : ''}`} />
                 </div>
                 {isAdditionalInfoOpen && (
-                    <div className="mt-4 space-y-2">
-                        <Label>Documentos e anexos</Label>
-                        <Textarea name="documentos" rows={5} className="text-[13px] resize-none" value={formData.documentos || ''} onChange={handleChange} />
+                    <div className="space-y-2">
+                        <Label className="text-[13px]">Documentos e anexos</Label>
+                        <Textarea name="documentos" rows={5} className="text-[13px] resize-none rounded-md transition-colors hover:bg-muted/30" value={formData.documentos || ''} onChange={handleChange} />
                     </div>
                 )}
             </div>
@@ -161,22 +148,20 @@ export function CalendarRegistrationForm({ initialData, onSave, onCancel }: Cale
       </div>
 
       <div className="border border-border rounded-md p-6 space-y-4 bg-card">
-        <div className="flex justify-between items-center">
-            <h2 className="font-medium text-foreground">Informações do atendimento</h2>
-        </div>
+        <h2 className="font-medium text-foreground">Informações do atendimento</h2>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div className="space-y-4">
                 <div className="space-y-2">
                     <Label className="text-[13px]">Nome do profissional *</Label>
                     <div className="relative">
                         <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                        <Input name="professionalName" className="h-10 w-full rounded-full border border-input pl-8 pr-12 text-[13px]" value={formData.professionalName || ''} onChange={handleChange} />
+                        <Input name="professionalName" className="h-11 w-full rounded-md pl-8 pr-12 text-[13px] transition-colors hover:bg-muted/30" value={formData.professionalName || ''} onChange={handleChange} />
                     </div>
                 </div>
                 <div className="grid grid-cols-2 gap-3">
                     <div className="space-y-2">
                         <Label className="text-[13px]">Unidade *</Label>
-                        <select name="unit" className="h-10 w-full rounded-md border border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none" value={formData.unit || 'nei'} onChange={handleChange}>
+                        <select name="unit" className="h-11 w-full rounded-md border border-gray-300 dark:border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none transition-colors hover:bg-muted/30 hover:border-gray-400" value={formData.unit || 'nei'} onChange={handleChange}>
                             <option value="nei">Núcleo de Especialidades Integradas</option>
                             <option value="cc">Clínica Central</option>
                         </select>
@@ -185,24 +170,24 @@ export function CalendarRegistrationForm({ initialData, onSave, onCancel }: Cale
                         <Label className="text-[13px]">Data *</Label>
                         <div className="relative">
                             <Calendar className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                            <Input name="appointmentDate" type="date" className="h-10 w-full rounded-md border border-input pl-8 pr-3 text-[13px]" value={formData.appointmentDate || ''} onChange={handleChange} />
+                            <Input name="appointmentDate" type="date" className="h-11 w-full rounded-md pl-8 pr-3 text-[13px] transition-colors hover:bg-muted/30" value={formData.appointmentDate || ''} onChange={handleChange} />
                         </div>
                     </div>
                 </div>
                 <div className="grid grid-cols-3 gap-3">
                     <div className="space-y-2">
                         <Label className="text-[13px]">Início *</Label>
-                        <Input name="startTime" type="time" className="h-10 w-full rounded-md border border-input px-3 text-[13px]" value={formData.startTime || ''} onChange={handleChange} />
+                        <Input name="startTime" type="time" className="h-11 w-full rounded-md px-3 text-[13px] transition-colors hover:bg-muted/30" value={formData.startTime || ''} onChange={handleChange} />
                     </div>
                     <div className="space-y-2">
                         <Label className="text-[13px]">Término *</Label>
-                        <Input name="endTime" type="time" className="h-10 w-full rounded-md border border-input px-3 text-[13px]" value={formData.endTime || ''} onChange={handleChange} />
+                        <Input name="endTime" type="time" className="h-11 w-full rounded-md px-3 text-[13px] transition-colors hover:bg-muted/30" value={formData.endTime || ''} onChange={handleChange} />
                     </div>
                     <div className="space-y-2">
                         <Label className="text-[13px]">Profissional solicitante</Label>
                         <div className="relative">
                             <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                            <select name="requestingProfessional" className="h-10 w-full rounded-md border border-input bg-background text-foreground pr-8 pl-8 text-[13px] appearance-none" value={formData.requestingProfessional || ''} onChange={handleChange}>
+                            <select name="requestingProfessional" className="h-11 w-full rounded-md border border-gray-300 dark:border-input bg-background text-foreground pr-8 pl-8 text-[13px] appearance-none transition-colors hover:bg-muted/30 hover:border-gray-400" value={formData.requestingProfessional || ''} onChange={handleChange}>
                                 <option value="" disabled>Selecione solicitante</option>
                                 <option value="dr-a">Dr. A</option>
                                 <option value="dr-b">Dr. B</option>
@@ -223,7 +208,7 @@ export function CalendarRegistrationForm({ initialData, onSave, onCancel }: Cale
                     </div>
                     <div className="relative mt-1">
                         <Search className="pointer-events-none absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-                        <Input name="appointmentType" placeholder="Pesquisar" className="h-10 w-full rounded-md border border-input pl-8 pr-8 text-[13px]" value={formData.appointmentType || ''} onChange={handleChange} />
+                        <Input name="appointmentType" placeholder="Pesquisar" className="h-11 w-full rounded-md pl-8 pr-8 text-[13px] transition-colors hover:bg-muted/30" value={formData.appointmentType || ''} onChange={handleChange} />
                     </div>
                 </div>
                 <div className="space-y-2">
@@ -234,15 +219,12 @@ export function CalendarRegistrationForm({ initialData, onSave, onCancel }: Cale
                             <Label htmlFor="imprimir" className="text-[13px] font-medium">Imprimir na Etiqueta / Pulseira</Label>
                         </div>
                     </div>
-                    <Textarea name="notes" rows={6} className="text-[13px] min-h-[120px] resize-none" value={formData.notes || ''} onChange={handleChange} />
+                    <Textarea name="notes" rows={6} className="text-[13px] min-h-[120px] resize-none rounded-md transition-colors hover:bg-muted/30" value={formData.notes || ''} onChange={handleChange} />
                 </div>
             </div>
         </div>
       </div>
 
-      <div className="flex justify-end gap-2">
-        <Button type="submit">Salvar</Button>
-      </div>
     </form>
   );
 }
diff --git a/susconecta/components/ui/input.tsx b/susconecta/components/ui/input.tsx
index 2437868..9f94f94 100644
--- a/susconecta/components/ui/input.tsx
+++ b/susconecta/components/ui/input.tsx
@@ -9,10 +9,10 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       data-slot="input"
       className={cn(
         "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 flex h-9 w-full min-w-0 rounded-md bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "border-2 border-gray-300 dark:border-gray-600",
+        "border border-gray-300 dark:border-input",
         "focus-visible:border-primary focus-visible:ring-primary/20 focus-visible:ring-2",
         "hover:border-gray-400 dark:hover:border-gray-500",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aria-invalid:border-2",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className
       )}
       {...props}
diff --git a/susconecta/components/ui/textarea.tsx b/susconecta/components/ui/textarea.tsx
index d28b3ce..8f6ce75 100644
--- a/susconecta/components/ui/textarea.tsx
+++ b/susconecta/components/ui/textarea.tsx
@@ -8,10 +8,10 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
       data-slot="textarea"
       className={cn(
         "placeholder:text-muted-foreground dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "border-2 border-gray-300 dark:border-gray-600",
+        "border border-gray-300 dark:border-input",
         "focus-visible:border-primary focus-visible:ring-primary/20 focus-visible:ring-2",
         "hover:border-gray-400 dark:hover:border-gray-500",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aria-invalid:border-2",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className
       )}
       {...props}

From 33e82f94624782b06d073e33be6fd75cbc42c17b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Gustavo?=
 <166467972+JoaoGustavo-dev@users.noreply.github.com>
Date: Fri, 3 Oct 2025 20:18:48 -0300
Subject: [PATCH 16/19] fix-hover-errors

---
 susconecta/app/profissional/page.tsx | 130 ++++++++++++++++-----------
 1 file changed, 79 insertions(+), 51 deletions(-)

diff --git a/susconecta/app/profissional/page.tsx b/susconecta/app/profissional/page.tsx
index b599d3e..85b07f7 100644
--- a/susconecta/app/profissional/page.tsx
+++ b/susconecta/app/profissional/page.tsx
@@ -460,13 +460,13 @@ const ProfissionalPage = () => {
         </div>
         
         {/* Navegação de Data */}
-        <div className="flex items-center justify-between mb-6 p-4 bg-muted rounded-lg">
+        <div className="flex items-center justify-between mb-6 p-4 bg-blue-50 rounded-lg dark:bg-muted">
           <div className="flex items-center space-x-4">
             <Button 
               variant="outline"
               size="sm"
               onClick={() => navigateDate('prev')}
-              className="p-2 hover:bg-primary hover:text-primary-foreground cursor-pointer"
+              className="p-2 hover:bg-blue-50 cursor-pointer dark:hover:bg-primary dark:hover:text-primary-foreground"
             >
               <ChevronLeft className="h-4 w-4" />
             </Button>
@@ -477,7 +477,7 @@ const ProfissionalPage = () => {
               variant="outline"
               size="sm"
               onClick={() => navigateDate('next')}
-              className="p-2 hover:bg-primary hover:text-primary-foreground cursor-pointer"
+              className="p-2 hover:bg-blue-50 cursor-pointer dark:hover:bg-primary dark:hover:text-primary-foreground"
             >
               <ChevronRight className="h-4 w-4" />
             </Button>
@@ -485,12 +485,12 @@ const ProfissionalPage = () => {
               variant="outline"
               size="sm"
               onClick={goToToday}
-              className="ml-4 px-3 py-1 text-sm hover:bg-primary hover:text-primary-foreground cursor-pointer"
+              className="ml-4 px-3 py-1 text-sm hover:bg-blue-50 cursor-pointer dark:hover:bg-primary dark:hover:text-primary-foreground"
             >
               Hoje
             </Button>
           </div>
-          <div className="text-sm text-muted-foreground">
+          <div className="text-sm text-gray-600 dark:text-muted-foreground">
             {todayEvents.length} consulta{todayEvents.length !== 1 ? 's' : ''} agendada{todayEvents.length !== 1 ? 's' : ''}
           </div>
         </div>
@@ -498,8 +498,8 @@ const ProfissionalPage = () => {
         {/* Lista de Pacientes do Dia */}
         <div className="space-y-4">
           {todayEvents.length === 0 ? (
-            <div className="text-center py-8 text-muted-foreground">
-              <CalendarIcon className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
+            <div className="text-center py-8 text-gray-600 dark:text-muted-foreground">
+              <CalendarIcon className="h-12 w-12 mx-auto mb-4 text-gray-400 dark:text-muted-foreground/50" />
               <p className="text-lg mb-2">Nenhuma consulta agendada para este dia</p>
               <p className="text-sm">Agenda livre para este dia</p>
             </div>
@@ -520,18 +520,18 @@ const ProfissionalPage = () => {
                       ></div>
                       <div>
                         <div className="font-medium flex items-center">
-                          <User className="h-4 w-4 mr-2 text-muted-foreground" />
+                          <User className="h-4 w-4 mr-2 text-gray-500 dark:text-muted-foreground" />
                           {appointment.title}
                         </div>
                         {paciente && (
-                          <div className="text-sm text-muted-foreground">
+                          <div className="text-sm text-gray-600 dark:text-muted-foreground">
                             CPF: {paciente.cpf} • {paciente.idade} anos
                           </div>
                         )}
                       </div>
                     </div>
                     <div className="flex items-center">
-                      <Clock className="h-4 w-4 mr-2 text-muted-foreground" />
+                      <Clock className="h-4 w-4 mr-2 text-gray-500 dark:text-muted-foreground" />
                       <span className="font-medium">{appointment.time}</span>
                     </div>
                     <div className="flex items-center">
@@ -547,7 +547,7 @@ const ProfissionalPage = () => {
                         <Button 
                           variant="outline" 
                           size="sm" 
-                          className="border-primary text-primary hover:bg-primary hover:text-white cursor-pointer"
+                          className="border-primary text-primary hover:bg-blue-50 cursor-pointer dark:hover:bg-primary dark:hover:text-white"
                           onClick={(e) => {
                             e.stopPropagation();
                             if (paciente) {
@@ -615,7 +615,7 @@ const ProfissionalPage = () => {
                         <Button 
                           variant="outline" 
                           size="sm" 
-                          className="border-primary text-primary hover:bg-primary hover:text-white cursor-pointer mr-2"
+                          className="border-primary text-primary hover:bg-blue-50 cursor-pointer mr-2 dark:hover:bg-primary dark:hover:text-white"
                           onClick={() => {
                             handleAbrirProntuario(paciente);
                             setActiveSection('prontuario');
@@ -666,7 +666,7 @@ const ProfissionalPage = () => {
                   </SelectTrigger>
                   <SelectContent>
                     {pacientes.map((paciente) => (
-                      <SelectItem key={paciente.cpf} value={paciente.nome} className="hover:bg-primary hover:text-primary-foreground">
+                      <SelectItem key={paciente.cpf} value={paciente.nome} className="hover:bg-blue-50 dark:hover:bg-primary dark:hover:text-primary-foreground">
                         <div className="flex items-center gap-2">
                           <span className="font-medium">{paciente.nome}</span>
                           <span className="text-xs opacity-70">({paciente.idade} anos)</span>
@@ -705,11 +705,11 @@ const ProfissionalPage = () => {
         {/* Seletor de Paciente */}
         {!pacienteSelecionado && (
           <div className="space-y-6">
-            <div className="bg-muted border rounded-lg p-6">
+            <div className="bg-gray-50 border rounded-lg p-6 dark:bg-muted">
               <div className="text-center mb-6">
-                <User className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
+                <User className="h-12 w-12 mx-auto mb-4 text-gray-400 dark:text-muted-foreground/50" />
                 <h3 className="text-lg font-medium text-foreground mb-2">Selecionar Paciente</h3>
-                <p className="text-sm text-muted-foreground">Escolha um paciente para visualizar o prontuário completo</p>
+                <p className="text-sm text-gray-600 dark:text-muted-foreground">Escolha um paciente para visualizar o prontuário completo</p>
               </div>
               
               <div className="max-w-md mx-auto">
@@ -729,7 +729,7 @@ const ProfissionalPage = () => {
                   </SelectTrigger>
                   <SelectContent>
                     {pacientes.map((paciente) => (
-                      <SelectItem key={paciente.cpf} value={paciente.nome} className="hover:bg-primary hover:text-primary-foreground cursor-pointer">
+                      <SelectItem key={paciente.cpf} value={paciente.nome} className="hover:bg-blue-50 cursor-pointer dark:hover:bg-primary dark:hover:text-primary-foreground">
                         <div className="flex items-center gap-3 w-full">
                           <div className="flex-1">
                             <p className="font-medium">{paciente.nome}</p>
@@ -759,17 +759,17 @@ const ProfissionalPage = () => {
                       </div>
                       <div className="flex-1 min-w-0">
                         <p className="font-medium text-foreground truncate">{paciente.nome}</p>
-                        <p className="text-sm text-muted-foreground">CPF: {paciente.cpf}</p>
-                        <p className="text-sm text-muted-foreground">{paciente.idade} anos</p>
+                        <p className="text-sm text-gray-600 dark:text-muted-foreground">CPF: {paciente.cpf}</p>
+                        <p className="text-sm text-gray-600 dark:text-muted-foreground">{paciente.idade} anos</p>
                       </div>
                     </div>
                     <div className="mt-3 flex items-center justify-between">
-                      <span className={`px-2 py-1 text-xs rounded-full ${
+                      <span className={`px-2 py-1 text-xs rounded-full font-medium ${
                         paciente.statusLaudo === 'Finalizado' 
-                          ? 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300' 
+                          ? 'bg-green-700 text-white dark:bg-green-900/30 dark:text-green-300' 
                           : paciente.statusLaudo === 'Pendente'
-                          ? 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300'
-                          : 'bg-muted text-muted-foreground'
+                          ? 'bg-amber-600 text-white dark:bg-yellow-900/30 dark:text-yellow-300'
+                          : 'bg-gray-200 text-gray-800 font-medium dark:bg-muted dark:text-muted-foreground'
                       }`}>
                         {paciente.statusLaudo}
                       </span>
@@ -810,7 +810,7 @@ const ProfissionalPage = () => {
                     className={`py-2 px-1 border-b-2 font-medium text-sm flex items-center gap-2 transition-colors cursor-pointer ${
                       abaProntuarioAtiva === aba.id
                         ? 'border-primary text-primary'
-                        : 'border-transparent text-muted-foreground hover:text-foreground hover:border-border'
+                        : 'border-transparent text-gray-600 hover:text-foreground hover:border-border dark:text-muted-foreground'
                     }`}
                   >
                     <Icone className="h-4 w-4" />
@@ -1093,9 +1093,9 @@ const ProfissionalPage = () => {
           <div className="flex justify-between items-start mb-3">
             <div>
               <h4 className="font-medium">Consulta Cardiológica</h4>
-              <p className="text-sm text-muted-foreground">27/09/2025 - 09:00</p>
+              <p className="text-sm text-gray-600 dark:text-muted-foreground">27/09/2025 - 09:00</p>
             </div>
-            <span className="px-2 py-1 bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 text-xs rounded-full">Finalizada</span>
+            <span className="px-2 py-1 bg-green-700 text-white font-medium dark:bg-green-900/30 dark:text-green-300 text-xs rounded-full">Finalizada</span>
           </div>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
             <div>
@@ -1214,7 +1214,7 @@ const ProfissionalPage = () => {
                   <p className="text-sm text-muted-foreground">1 comprimido pela manhã</p>
                   <p className="text-sm text-muted-foreground">Duração: 30 dias</p>
                 </div>
-                <Button variant="outline" size="sm" className="cursor-pointer">
+                <Button variant="outline" size="sm" className="cursor-pointer hover:bg-blue-50 dark:hover:bg-accent dark:hover:text-accent-foreground">
                   <Eye className="h-4 w-4" />
                 </Button>
               </div>
@@ -1226,7 +1226,7 @@ const ProfissionalPage = () => {
                   <p className="text-sm text-muted-foreground">1 comprimido após café e jantar</p>
                   <p className="text-sm text-muted-foreground">Duração: 60 dias</p>
                 </div>
-                <Button variant="outline" size="sm" className="cursor-pointer">
+                <Button variant="outline" size="sm" className="cursor-pointer hover:bg-blue-50 dark:hover:bg-accent dark:hover:text-accent-foreground">
                   <Eye className="h-4 w-4" />
                 </Button>
               </div>
@@ -1309,10 +1309,10 @@ const ProfissionalPage = () => {
                 <p className="text-sm font-medium text-green-700 dark:text-green-400">Resultado: 95 mg/dL (Normal)</p>
               </div>
               <div className="flex gap-2">
-                <Button variant="outline" size="sm" className="cursor-pointer">
+                <Button variant="outline" size="sm" className="cursor-pointer hover:bg-blue-50 dark:hover:bg-accent dark:hover:text-accent-foreground">
                   <Eye className="h-4 w-4" />
                 </Button>
-                <Button variant="outline" size="sm" className="cursor-pointer">
+                <Button variant="outline" size="sm" className="cursor-pointer hover:bg-blue-50 dark:hover:bg-accent dark:hover:text-accent-foreground">
                   <Download className="h-4 w-4" />
                 </Button>
               </div>
@@ -1445,7 +1445,7 @@ const ProfissionalPage = () => {
                 </div>
                 <div>
                   <p className="font-medium text-sm">Radiografia de Tórax</p>
-                  <p className="text-xs text-muted-foreground">20/09/2025</p>
+                  <p className="text-xs text-gray-600 dark:text-muted-foreground">20/09/2025</p>
                 </div>
               </div>
               <div className="flex gap-2">
@@ -1467,7 +1467,7 @@ const ProfissionalPage = () => {
                 </div>
                 <div>
                   <p className="font-medium text-sm">ECG</p>
-                  <p className="text-xs text-muted-foreground">15/09/2025</p>
+                  <p className="text-xs text-gray-600 dark:text-muted-foreground">15/09/2025</p>
                 </div>
               </div>
               <div className="flex gap-2">
@@ -1494,14 +1494,14 @@ const ProfissionalPage = () => {
                 </div>
                 <div>
                   <p className="font-medium text-sm">Laudo de Ecocardiograma</p>
-                  <p className="text-xs text-muted-foreground">10/08/2025 - Dr. Carlos Andrade</p>
+                  <p className="text-xs text-gray-600 dark:text-muted-foreground">10/08/2025 - Dr. Carlos Andrade</p>
                 </div>
               </div>
               <div className="flex gap-2">
-                <Button variant="outline" size="sm" className="cursor-pointer">
+                <Button variant="outline" size="sm" className="cursor-pointer hover:bg-blue-50 dark:hover:bg-accent dark:hover:text-accent-foreground">
                   <Eye className="h-3 w-3" />
                 </Button>
-                <Button variant="outline" size="sm" className="cursor-pointer">
+                <Button variant="outline" size="sm" className="cursor-pointer hover:bg-blue-50 dark:hover:bg-accent dark:hover:text-accent-foreground">
                   <Download className="h-3 w-3" />
                 </Button>
               </div>
@@ -1518,10 +1518,10 @@ const ProfissionalPage = () => {
                 </div>
               </div>
               <div className="flex gap-2">
-                <Button variant="outline" size="sm" className="cursor-pointer">
+                <Button variant="outline" size="sm" className="cursor-pointer hover:bg-blue-50 dark:hover:bg-accent dark:hover:text-accent-foreground">
                   <Eye className="h-3 w-3" />
                 </Button>
-                <Button variant="outline" size="sm" className="cursor-pointer">
+                <Button variant="outline" size="sm" className="cursor-pointer hover:bg-blue-50 dark:hover:bg-accent dark:hover:text-accent-foreground">
                   <Download className="h-3 w-3" />
                 </Button>
               </div>
@@ -1840,7 +1840,7 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
                             setLaudoSelecionado(laudo);
                             setIsViewing(true);
                           }}
-                          className="flex items-center gap-1"
+                          className="flex items-center gap-1 hover:bg-blue-50 dark:hover:bg-accent dark:hover:text-accent-foreground"
                         >
                           <Eye className="w-4 h-4" />
                           Ver Laudo
@@ -2216,7 +2216,7 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
               className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
                 showPreview
                   ? "border-green-500 text-green-600"
-                  : "border-transparent text-muted-foreground hover:text-foreground"
+                  : "border-transparent text-muted-foreground hover:text-foreground hover:bg-blue-50 dark:hover:bg-gray-700"
               }`}
             >
               <Eye className="w-4 h-4 inline mr-1" />
@@ -2635,10 +2635,10 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
                 <SelectValue placeholder="Selecione o tipo" />
               </SelectTrigger>
               <SelectContent className="bg-popover border">
-                <SelectItem value="lembrete" className="hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground cursor-pointer">Lembrete de Consulta</SelectItem>
-                <SelectItem value="resultado" className="hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground cursor-pointer">Resultado de Exame</SelectItem>
-                <SelectItem value="instrucao" className="hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground cursor-pointer">Instruções Pós-Consulta</SelectItem>
-                <SelectItem value="outro" className="hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground cursor-pointer">Outro</SelectItem>
+                <SelectItem value="lembrete" className="hover:bg-blue-50 focus:bg-blue-50 cursor-pointer dark:hover:bg-primary dark:hover:text-primary-foreground dark:focus:bg-primary dark:focus:text-primary-foreground">Lembrete de Consulta</SelectItem>
+                <SelectItem value="resultado" className="hover:bg-blue-50 focus:bg-blue-50 cursor-pointer dark:hover:bg-primary dark:hover:text-primary-foreground dark:focus:bg-primary dark:focus:text-primary-foreground">Resultado de Exame</SelectItem>
+                <SelectItem value="instrucao" className="hover:bg-blue-50 focus:bg-blue-50 cursor-pointer dark:hover:bg-primary dark:hover:text-primary-foreground dark:focus:bg-primary dark:focus:text-primary-foreground">Instruções Pós-Consulta</SelectItem>
+                <SelectItem value="outro" className="hover:bg-blue-50 focus:bg-blue-50 cursor-pointer dark:hover:bg-primary dark:hover:text-primary-foreground dark:focus:bg-primary dark:focus:text-primary-foreground">Outro</SelectItem>
               </SelectContent>
             </Select>
           </div>
@@ -3183,7 +3183,7 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
           <Button 
             variant="outline" 
             onClick={logout}
-            className="text-red-600 border-red-600 hover:bg-red-600 hover:text-white cursor-pointer"
+            className="text-red-600 border-red-600 hover:bg-red-50 cursor-pointer dark:hover:bg-red-600 dark:hover:text-white"
           >
             Sair
           </Button>
@@ -3195,7 +3195,11 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
           <nav className="bg-card shadow-md rounded-lg p-3 space-y-1">
             <Button 
               variant={activeSection === 'calendario' ? 'default' : 'ghost'} 
-              className="w-full justify-start hover:bg-primary hover:text-primary-foreground cursor-pointer"
+              className={`w-full justify-start cursor-pointer ${
+                activeSection === 'calendario' 
+                  ? 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-primary dark:text-primary-foreground dark:hover:bg-primary/90' 
+                  : 'hover:bg-blue-50 dark:hover:bg-primary dark:hover:text-primary-foreground'
+              }`}
               onClick={() => setActiveSection('calendario')}
             >
               <CalendarIcon className="mr-2 h-4 w-4" />
@@ -3203,7 +3207,11 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
             </Button>
             <Button 
               variant={activeSection === 'pacientes' ? 'default' : 'ghost'} 
-              className="w-full justify-start hover:bg-primary hover:text-primary-foreground cursor-pointer"
+              className={`w-full justify-start cursor-pointer ${
+                activeSection === 'pacientes' 
+                  ? 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-primary dark:text-primary-foreground dark:hover:bg-primary/90' 
+                  : 'hover:bg-blue-50 dark:hover:bg-primary dark:hover:text-primary-foreground'
+              }`}
               onClick={() => setActiveSection('pacientes')}
             >
               <Users className="mr-2 h-4 w-4" />
@@ -3211,7 +3219,11 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
             </Button>
             <Button 
               variant={activeSection === 'prontuario' ? 'default' : 'ghost'} 
-              className="w-full justify-start hover:bg-primary hover:text-primary-foreground cursor-pointer"
+              className={`w-full justify-start cursor-pointer ${
+                activeSection === 'prontuario' 
+                  ? 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-primary dark:text-primary-foreground dark:hover:bg-primary/90' 
+                  : 'hover:bg-blue-50 dark:hover:bg-primary dark:hover:text-primary-foreground'
+              }`}
               onClick={() => setActiveSection('prontuario')}
             >
               <ClipboardList className="mr-2 h-4 w-4" />
@@ -3219,7 +3231,11 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
             </Button>
             <Button 
               variant={activeSection === 'laudos' ? 'default' : 'ghost'} 
-              className="w-full justify-start hover:bg-primary hover:text-primary-foreground cursor-pointer"
+              className={`w-full justify-start cursor-pointer ${
+                activeSection === 'laudos' 
+                  ? 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-primary dark:text-primary-foreground dark:hover:bg-primary/90' 
+                  : 'hover:bg-blue-50 dark:hover:bg-primary dark:hover:text-primary-foreground'
+              }`}
               onClick={() => setActiveSection('laudos')}
             >
               <FileText className="mr-2 h-4 w-4" />
@@ -3227,7 +3243,11 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
             </Button>
             <Button 
               variant={activeSection === 'comunicacao' ? 'default' : 'ghost'} 
-              className="w-full justify-start hover:bg-primary hover:text-primary-foreground cursor-pointer"
+              className={`w-full justify-start cursor-pointer ${
+                activeSection === 'comunicacao' 
+                  ? 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-primary dark:text-primary-foreground dark:hover:bg-primary/90' 
+                  : 'hover:bg-blue-50 dark:hover:bg-primary dark:hover:text-primary-foreground'
+              }`}
               onClick={() => setActiveSection('comunicacao')}
             >
               <MessageSquare className="mr-2 h-4 w-4" />
@@ -3235,7 +3255,11 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
             </Button>
             <Button 
               variant={activeSection === 'relatorios-medicos' ? 'default' : 'ghost'} 
-              className="w-full justify-start hover:bg-primary hover:text-primary-foreground cursor-pointer"
+              className={`w-full justify-start cursor-pointer ${
+                activeSection === 'relatorios-medicos' 
+                  ? 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-primary dark:text-primary-foreground dark:hover:bg-primary/90' 
+                  : 'hover:bg-blue-50 dark:hover:bg-primary dark:hover:text-primary-foreground'
+              }`}
               onClick={() => setActiveSection('relatorios-medicos')}
             >
               <FileCheck className="mr-2 h-4 w-4" />
@@ -3243,7 +3267,11 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
             </Button>
             <Button 
               variant={activeSection === 'perfil' ? 'default' : 'ghost'} 
-              className="w-full justify-start cursor-pointer hover:bg-primary hover:text-primary-foreground cursor-pointer"
+              className={`w-full justify-start cursor-pointer ${
+                activeSection === 'perfil' 
+                  ? 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-primary dark:text-primary-foreground dark:hover:bg-primary/90' 
+                  : 'hover:bg-blue-50 dark:hover:bg-primary dark:hover:text-primary-foreground'
+              }`}
               onClick={() => setActiveSection('perfil')}
             >
               <Settings className="mr-2 h-4 w-4" />

From 8ddb02ef43e7ee9d986e00e28ced51d0bda65ddf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Gustavo?=
 <166467972+JoaoGustavo-dev@users.noreply.github.com>
Date: Fri, 3 Oct 2025 20:46:35 -0300
Subject: [PATCH 17/19] fixing-visual

---
 susconecta/next-env.d.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/susconecta/next-env.d.ts b/susconecta/next-env.d.ts
index 40c3d68..830fb59 100644
--- a/susconecta/next-env.d.ts
+++ b/susconecta/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

From 7b0406f8156193ee89c42ffd1de504b9f65cb6c6 Mon Sep 17 00:00:00 2001
From: M-Gabrielly <maria.gabrielly221106@gmail.com>
Date: Fri, 3 Oct 2025 22:04:47 -0300
Subject: [PATCH 18/19] feat(agenda): Replace textarea with select in Documents
 and attachments

---
 .../app/(main-routes)/doutores/page.tsx       |  9 +--
 .../app/(main-routes)/pacientes/page.tsx      |  2 +-
 susconecta/app/agenda/page.tsx                |  2 +-
 susconecta/app/financeiro/page.tsx            | 11 ++-
 susconecta/app/procedimento/page.tsx          | 12 +++-
 susconecta/components/agenda/HeaderAgenda.tsx |  4 +-
 .../forms/calendar-registration-form.tsx      | 43 ++++++++----
 .../forms/doctor-registration-form.tsx        | 70 ++++++++-----------
 .../forms/patient-registration-form.tsx       | 12 ++--
 9 files changed, 97 insertions(+), 68 deletions(-)

diff --git a/susconecta/app/(main-routes)/doutores/page.tsx b/susconecta/app/(main-routes)/doutores/page.tsx
index c034860..64fcf5e 100644
--- a/susconecta/app/(main-routes)/doutores/page.tsx
+++ b/susconecta/app/(main-routes)/doutores/page.tsx
@@ -326,10 +326,11 @@ export default function DoutoresPage() {
                 onKeyDown={handleSearchKeyDown}
               />
             </div>
-            <Button 
-              variant="outline" 
-              onClick={handleClickBuscar}
-              disabled={loading || !search.trim()}
+            <Button
+              variant="secondary"
+              onClick={handleBuscarServidor}
+              disabled={loading}
+              className="hover:bg-primary hover:text-white"
             >
               Buscar
             </Button>
diff --git a/susconecta/app/(main-routes)/pacientes/page.tsx b/susconecta/app/(main-routes)/pacientes/page.tsx
index 9310a62..6b8193a 100644
--- a/susconecta/app/(main-routes)/pacientes/page.tsx
+++ b/susconecta/app/(main-routes)/pacientes/page.tsx
@@ -204,7 +204,7 @@ export default function PacientesPage() {
               onKeyDown={(e) => e.key === "Enter" && handleBuscarServidor()}
             />
           </div>
-          <Button variant="secondary" onClick={handleBuscarServidor}>Buscar</Button>
+          <Button variant="secondary" onClick={handleBuscarServidor} className="hover:bg-primary hover:text-white">Buscar</Button>
           <Button onClick={handleAdd}>
             <Plus className="mr-2 h-4 w-4" />
             Novo paciente
diff --git a/susconecta/app/agenda/page.tsx b/susconecta/app/agenda/page.tsx
index f4212da..fff1a81 100644
--- a/susconecta/app/agenda/page.tsx
+++ b/susconecta/app/agenda/page.tsx
@@ -43,7 +43,7 @@ export default function NovoAgendamentoPage() {
   };
 
   const handleCancel = () => {
-    router.back(); 
+    router.push("/calendar");
   };
 
   return (
diff --git a/susconecta/app/financeiro/page.tsx b/susconecta/app/financeiro/page.tsx
index 07c8cc7..7981f4b 100644
--- a/susconecta/app/financeiro/page.tsx
+++ b/susconecta/app/financeiro/page.tsx
@@ -21,6 +21,15 @@ export default function FinanceiroPage() {
   const isPr = pathname?.startsWith("/procedimento");
   const isFi = pathname?.startsWith("/financeiro");
 
+  const handleSave = () => {
+    // Lógica de salvar será implementada
+    console.log("Salvando informações financeiras...");
+  };
+
+  const handleCancel = () => {
+    router.push("/calendar");
+  };
+
   return (
     <div className="w-full min-h-screen flex flex-col bg-background">
       {/* HEADER */}
@@ -142,7 +151,7 @@ export default function FinanceiroPage() {
       </main>
 
       {/* RODAPÉ FIXO */}
-      <FooterAgenda />
+      <FooterAgenda onSave={handleSave} onCancel={handleCancel} />
     </div>
   );
 }
\ No newline at end of file
diff --git a/susconecta/app/procedimento/page.tsx b/susconecta/app/procedimento/page.tsx
index e23320e..113853a 100644
--- a/susconecta/app/procedimento/page.tsx
+++ b/susconecta/app/procedimento/page.tsx
@@ -20,6 +20,16 @@ export default function ProcedimentoPage() {
   const isAg = pathname?.startsWith("/agendamento");
   const isPr = pathname?.startsWith("/procedimento");
   const isFi = pathname?.startsWith("/financeiro");
+  
+  const handleSave = () => {
+    // Lógica de salvar será implementada
+    console.log("Salvando procedimentos...");
+  };
+
+  const handleCancel = () => {
+    router.push("/calendar");
+  };
+
   const tab = (active: boolean, extra = "") =>
     `px-4 py-1.5 text-[13px] border ${
       active
@@ -83,7 +93,7 @@ export default function ProcedimentoPage() {
       </main>
 
       {/* RODAPÉ FIXO */}
-      <FooterAgenda />
+      <FooterAgenda onSave={handleSave} onCancel={handleCancel} />
     </div>
   );
 }
diff --git a/susconecta/components/agenda/HeaderAgenda.tsx b/susconecta/components/agenda/HeaderAgenda.tsx
index 64b229f..928976d 100644
--- a/susconecta/components/agenda/HeaderAgenda.tsx
+++ b/susconecta/components/agenda/HeaderAgenda.tsx
@@ -60,8 +60,8 @@ export default function HeaderAgenda() {
 
           <button
             type="button"
-            aria-label="Histórico"
-            onClick={() => router.back()}
+            aria-label="Voltar para Calendário"
+            onClick={() => router.push("/calendar")}
             className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-border bg-background text-muted-foreground hover:bg-primary hover:text-white hover:border-primary transition-colors"
           >
             <RotateCcw className="h-4 w-4" />
diff --git a/susconecta/components/forms/calendar-registration-form.tsx b/susconecta/components/forms/calendar-registration-form.tsx
index 667eb13..5a6c21c 100644
--- a/susconecta/components/forms/calendar-registration-form.tsx
+++ b/susconecta/components/forms/calendar-registration-form.tsx
@@ -130,19 +130,36 @@ export function CalendarRegistrationForm({ formData, onFormChange }: CalendarReg
                 </div>
             </div>
             <div className="md:col-span-12 space-y-2">
-                <div 
-                    className="flex items-center justify-between cursor-pointer"
-                    onClick={() => setIsAdditionalInfoOpen(!isAdditionalInfoOpen)}
-                >
-                    <Label className="text-sm font-medium cursor-pointer">Informações adicionais</Label>
-                    <ChevronDown className={`h-4 w-4 text-muted-foreground transition-transform duration-200 ${isAdditionalInfoOpen ? 'rotate-180' : ''}`} />
-                </div>
-                {isAdditionalInfoOpen && (
-                    <div className="space-y-2">
-                        <Label className="text-[13px]">Documentos e anexos</Label>
-                        <Textarea name="documentos" rows={5} className="text-[13px] resize-none rounded-md transition-colors hover:bg-muted/30" value={formData.documentos || ''} onChange={handleChange} />
-                    </div>
-                )}
+        <div 
+          className="flex items-center justify-between cursor-pointer"
+          onClick={() => setIsAdditionalInfoOpen(!isAdditionalInfoOpen)}
+        >
+          <div className="flex items-center gap-2">
+            <Label className="text-sm font-medium cursor-pointer text-primary m-0">Informações adicionais</Label>
+            <ChevronDown className={`h-4 w-4 text-primary transition-transform duration-200 ${isAdditionalInfoOpen ? 'rotate-180' : ''}`} />
+          </div>
+        </div>
+        {isAdditionalInfoOpen && (
+          <div className="space-y-2">
+            <div className="relative">
+              <select
+                name="documentos"
+                className="h-11 w-full rounded-md border border-gray-300 dark:border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none transition-colors hover:bg-muted/30 hover:border-gray-400"
+                value={formData.documentos || ''}
+                onChange={handleChange}
+              >
+                <option value="" disabled>
+                  Documentos e anexos
+                </option>
+                <option value="identidade">Identidade / CPF</option>
+                <option value="comprovante_residencia">Comprovante de residência</option>
+                <option value="guias">Guias / Encaminhamentos</option>
+                <option value="outros">Outros</option>
+              </select>
+              <ChevronDown className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-primary" />
+            </div>
+          </div>
+        )}
             </div>
         </div>
       </div>
diff --git a/susconecta/components/forms/doctor-registration-form.tsx b/susconecta/components/forms/doctor-registration-form.tsx
index b50ef60..ab80830 100644
--- a/susconecta/components/forms/doctor-registration-form.tsx
+++ b/susconecta/components/forms/doctor-registration-form.tsx
@@ -132,6 +132,8 @@ const initial: FormData = {
 
 
 
+// AgendaEditor removido - restaurando o textarea original abaixo
+
 export function DoctorRegistrationForm({
   open = true,
   onOpenChange,
@@ -466,10 +468,10 @@ if (missingFields.length > 0) {
                     )}
                   </div>
                   <div className="space-y-2">
-                    <Label htmlFor="photo" className="cursor-pointer">
-                      <Button type="button" variant="outline" asChild>
+                    <Label htmlFor="photo" className="cursor-pointer rounded-md transition-colors">
+                      <Button type="button" variant="ghost" asChild className="bg-primary text-primary-foreground border-transparent hover:bg-primary">
                         <span>
-                          <Upload className="mr-2 h-4 w-4" /> Carregar Foto
+                          <Upload className="mr-2 h-4 w-4 text-primary-foreground" /> Carregar Foto
                         </span>
                       </Button>
                     </Label>
@@ -522,27 +524,27 @@ if (missingFields.length > 0) {
 </div>
 
 
-                <div className="space-y-2">
-                    <Label>Currículo</Label>
-                    <div className="flex items-center gap-2">
-                        <Label htmlFor="curriculo-input" className="cursor-pointer">
-                            <Button type="button" variant="outline" asChild>
-                                <span>
-                                    <Upload className="mr-2 h-4 w-4" />
-                                    Anexar PDF ou DOC
-                                </span>
-                            </Button>
-                        </Label>
-                        <Input
-                            id="curriculo-input"
-                            type="file"
-                            className="hidden"
-                            onChange={(e) => setField("curriculo", e.target.files?.[0] || null)}
-                            accept=".pdf,.doc,.docx"
-                        />
-                        {form.curriculo && <span className="text-sm text-muted-foreground">{form.curriculo.name}</span>}
-                    </div>
-                </div>
+        <div className="space-y-2">
+          <Label>Currículo</Label>
+          <div className="flex items-center gap-2">
+            <Label htmlFor="curriculo-input" className="cursor-pointer">
+              <Button type="button" variant="ghost" asChild className="bg-primary text-primary-foreground border-transparent hover:bg-primary">
+                <span>
+                  <Upload className="mr-2 h-4 w-4 text-primary-foreground" />
+                  Anexar PDF ou DOC
+                </span>
+              </Button>
+            </Label>
+            <Input
+              id="curriculo-input"
+              type="file"
+              className="hidden"
+              onChange={(e) => setField("curriculo", e.target.files?.[0] || null)}
+              accept=".pdf,.doc,.docx"
+            />
+            {form.curriculo && <span className="text-sm text-primary-foreground">{form.curriculo.name}</span>}
+          </div>
+        </div>
 
                 <div className="grid grid-cols-2 gap-4">
                   <div className="space-y-2">
@@ -644,7 +646,7 @@ if (missingFields.length > 0) {
                     </Button>
                   </div>
                 ))}
-                <Button type="button" variant="outline" onClick={addFormacao}>
+                <Button type="button" onClick={addFormacao}>
                   Adicionar Formação
                 </Button>
               </CardContent>
@@ -752,17 +754,7 @@ if (missingFields.length > 0) {
                   </div>
                 </div>
 
-                <div className="space-y-2">
-                  <Label>Agenda/Horário</Label>
-                  // Dentro do form, apenas exiba o campo se precisar dele visualmente, mas não envie
-<textarea
-  value={form.agenda_horario}
-  onChange={(e) => setField("agenda_horario", e.target.value)}
-  placeholder="Descreva os dias e horários de atendimento"
-  disabled={true}  // Torne o campo apenas visual, sem enviar
-/>
-
-                </div>
+                {/* Agenda/Horário removido conforme solicitado */}
 
                 <div className="space-y-4">
                   <Label>Dados Bancários</Label>
@@ -902,10 +894,10 @@ if (missingFields.length > 0) {
                 <div className="space-y-2">
                   <Label>Adicionar anexos</Label>
                   <div className="border-2 border-dashed rounded-lg p-4">
-                    <Label htmlFor="anexos" className="cursor-pointer block w-full">
+                    <Label htmlFor="anexos" className="cursor-pointer block w-full rounded-md p-4 bg-primary text-primary-foreground">
                       <div className="flex flex-col items-center justify-center text-center">
-                        <Upload className="h-7 w-7 mb-2" />
-                        <p className="text-sm text-muted-foreground">Clique para adicionar documentos (PDF, imagens, etc.)</p>
+                        <Upload className="h-7 w-7 mb-2 text-primary-foreground" />
+                        <p className="text-sm text-primary-foreground">Clique para adicionar documentos (PDF, imagens, etc.)</p>
                       </div>
                     </Label>
                     <Input id="anexos" type="file" multiple className="hidden" onChange={addLocalAnexos} />
diff --git a/susconecta/components/forms/patient-registration-form.tsx b/susconecta/components/forms/patient-registration-form.tsx
index f2a68b1..7c16def 100644
--- a/susconecta/components/forms/patient-registration-form.tsx
+++ b/susconecta/components/forms/patient-registration-form.tsx
@@ -359,10 +359,10 @@ export function PatientRegistrationForm({
                     )}
                   </div>
                   <div className="space-y-2">
-                    <Label htmlFor="photo" className="cursor-pointer">
-                      <Button type="button" variant="outline" asChild>
+                    <Label htmlFor="photo" className="cursor-pointer rounded-md transition-colors">
+                      <Button type="button" variant="ghost" asChild className="bg-primary text-primary-foreground border-transparent hover:bg-primary">
                         <span>
-                          <Upload className="mr-2 h-4 w-4" /> Carregar Foto
+                          <Upload className="mr-2 h-4 w-4 text-primary-foreground" /> Carregar Foto
                         </span>
                       </Button>
                     </Label>
@@ -550,10 +550,10 @@ export function PatientRegistrationForm({
                 <div className="space-y-2">
                   <Label>Adicionar anexos</Label>
                   <div className="border-2 border-dashed rounded-lg p-4">
-                    <Label htmlFor="anexos" className="cursor-pointer block w-full">
+                    <Label htmlFor="anexos" className="cursor-pointer block w-full rounded-md p-4 bg-primary text-primary-foreground">
                       <div className="flex flex-col items-center justify-center text-center">
-                        <Upload className="h-7 w-7 mb-2" />
-                        <p className="text-sm text-muted-foreground">Clique para adicionar documentos (PDF, imagens, etc.)</p>
+                        <Upload className="h-7 w-7 mb-2 text-primary-foreground" />
+                        <p className="text-sm text-primary-foreground">Clique para adicionar documentos (PDF, imagens, etc.)</p>
                       </div>
                     </Label>
                     <Input id="anexos" type="file" multiple className="hidden" onChange={addLocalAnexos} />

From 37f406995d357817a708bbea4d2ea382cb77b74f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Gustavo?=
 <166467972+JoaoGustavo-dev@users.noreply.github.com>
Date: Fri, 3 Oct 2025 22:19:41 -0300
Subject: [PATCH 19/19] fix-profissional-page-dark-mode

---
 susconecta/app/profissional/page.tsx | 159 +++++++++++++++++++++------
 susconecta/components/header.tsx     |   4 +-
 2 files changed, 126 insertions(+), 37 deletions(-)

diff --git a/susconecta/app/profissional/page.tsx b/susconecta/app/profissional/page.tsx
index 803e4d7..e91ae92 100644
--- a/susconecta/app/profissional/page.tsx
+++ b/susconecta/app/profissional/page.tsx
@@ -884,7 +884,7 @@ const ProfissionalPage = () => {
       <div className="flex justify-between items-center">
         <h3 className="text-lg font-semibold">Registrar Nova Consulta</h3>
         <div className="flex gap-2">
-          <Button className="cursor-pointer" variant="outline" onClick={() => {
+          <Button className="cursor-pointer hover:bg-blue-50 dark:hover:bg-accent dark:hover:text-accent-foreground" variant="outline" onClick={() => {
             setConsultaAtual({
               dataConsulta: new Date().toISOString().split('T')[0],
               anamnese: "",
@@ -1305,8 +1305,8 @@ const ProfissionalPage = () => {
             <div className="flex justify-between items-center p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-700 rounded">
               <div>
                 <p className="font-medium text-foreground">Glicemia de Jejum</p>
-                <p className="text-sm text-muted-foreground">Realizado em 20/09/2025</p>
-                <p className="text-sm font-medium text-green-700 dark:text-green-400">Resultado: 95 mg/dL (Normal)</p>
+                <p className="text-sm text-gray-600 dark:text-muted-foreground">Realizado em 20/09/2025</p>
+                <p className="text-sm font-bold" style={{ color: '#000000' }}>Resultado: 95 mg/dL (Normal)</p>
               </div>
               <div className="flex gap-2">
                 <Button variant="outline" size="sm" className="cursor-pointer hover:bg-blue-50 dark:hover:bg-accent dark:hover:text-accent-foreground">
@@ -1449,11 +1449,11 @@ const ProfissionalPage = () => {
                 </div>
               </div>
               <div className="flex gap-2">
-                <Button variant="outline" size="sm" className="flex-1 cursor-pointer">
+                <Button variant="outline" size="sm" className="flex-1 cursor-pointer hover:bg-blue-50 dark:hover:bg-accent dark:hover:text-accent-foreground">
                   <Eye className="h-3 w-3 mr-1" />
                   Visualizar
                 </Button>
-                <Button variant="outline" size="sm" className="flex-1 cursor-pointer">
+                <Button variant="outline" size="sm" className="flex-1 cursor-pointer hover:bg-blue-50 dark:hover:bg-accent dark:hover:text-accent-foreground">
                   <Download className="h-3 w-3 mr-1" />
                   Download
                 </Button>
@@ -1471,11 +1471,11 @@ const ProfissionalPage = () => {
                 </div>
               </div>
               <div className="flex gap-2">
-                <Button variant="outline" size="sm" className="flex-1 cursor-pointer">
+                <Button variant="outline" size="sm" className="flex-1 cursor-pointer hover:bg-blue-50 dark:hover:bg-accent dark:hover:text-accent-foreground">
                   <Eye className="h-3 w-3 mr-1" />
                   Visualizar
                 </Button>
-                <Button variant="outline" size="sm" className="flex-1 cursor-pointer">
+                <Button variant="outline" size="sm" className="flex-1 cursor-pointer hover:bg-blue-50 dark:hover:bg-accent dark:hover:text-accent-foreground">
                   <Download className="h-3 w-3 mr-1" />
                   Download
                 </Button>
@@ -1759,24 +1759,24 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
               </div>
 
               <div className="flex gap-2">
-                <Button variant="outline" size="sm">Hoje</Button>
-                <Button variant="outline" size="sm">Semana</Button>
-                <Button variant="default" size="sm">Mês</Button>
+                <Button variant="outline" size="sm" className="hover:bg-blue-50 dark:hover:bg-accent dark:hover:text-accent-foreground">Hoje</Button>
+                <Button variant="outline" size="sm" className="hover:bg-blue-50 dark:hover:bg-accent dark:hover:text-accent-foreground">Semana</Button>
+                <Button variant="default" size="sm" className="hover:bg-blue-600 dark:hover:bg-primary/90">Mês</Button>
               </div>
 
-              <Button variant="outline" size="sm">
+              <Button variant="outline" size="sm" className="hover:bg-blue-50 dark:hover:bg-accent dark:hover:text-accent-foreground">
                 <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.207A1 1 0 013 6.5V4z" />
                 </svg>
                 Filtros
               </Button>
 
-              <Button variant="outline" size="sm">
+              <Button variant="outline" size="sm" className="hover:bg-blue-50 dark:hover:bg-accent dark:hover:text-accent-foreground">
                 <Search className="w-4 h-4 mr-1" />
                 Pesquisar
               </Button>
 
-              <Button variant="default" size="sm">
+              <Button variant="default" size="sm" className="hover:bg-blue-600 dark:hover:bg-primary/90">
                 <Download className="w-4 h-4 mr-1" />
                 Exportar
               </Button>
@@ -1950,15 +1950,15 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
               {/* Diagnóstico e Conclusão */}
               {laudo.diagnostico && (
                 <div className="mb-4 p-3 bg-blue-50 dark:bg-blue-950/20 rounded">
-                  <h4 className="font-semibold text-blue-800 dark:text-blue-200 mb-1">Diagnóstico:</h4>
-                  <p className="text-sm">{laudo.diagnostico}</p>
+                  <h4 className="font-semibold mb-1" style={{ color: '#EF4444' }}>Diagnóstico:</h4>
+                  <p className="text-sm font-bold" style={{ color: '#EF4444' }}>{laudo.diagnostico}</p>
                 </div>
               )}
 
               {laudo.conclusao && (
                 <div className="mb-6 p-3 bg-green-50 dark:bg-green-950/20 rounded">
-                  <h4 className="font-semibold text-green-800 dark:text-green-200 mb-1">Conclusão:</h4>
-                  <p className="text-sm">{laudo.conclusao}</p>
+                  <h4 className="font-semibold mb-1" style={{ color: '#EF4444' }}>Conclusão:</h4>
+                  <p className="text-sm font-bold" style={{ color: '#EF4444' }}>{laudo.conclusao}</p>
                 </div>
               )}
 
@@ -2171,8 +2171,23 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
                 className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
                   activeTab === "info"
                     ? "border-blue-500 text-blue-600"
-                    : "border-transparent text-muted-foreground hover:text-foreground"
+                    : "border-transparent text-gray-600 dark:text-muted-foreground dark:hover:text-foreground dark:hover:bg-blue-900"
                 }`}
+                style={{
+                  backgroundColor: activeTab === "info" ? undefined : "transparent"
+                }}
+                onMouseEnter={(e) => {
+                  if (activeTab !== "info") {
+                    e.currentTarget.style.backgroundColor = "transparent";
+                    e.currentTarget.style.color = "#4B5563";
+                  }
+                }}
+                onMouseLeave={(e) => {
+                  if (activeTab !== "info") {
+                    e.currentTarget.style.backgroundColor = "transparent";
+                    e.currentTarget.style.color = "#4B5563";
+                  }
+                }}
               >
                 <User className="w-4 h-4 inline mr-1" />
                 Informações
@@ -2183,8 +2198,23 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
               className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
                 activeTab === "editor"
                   ? "border-blue-500 text-blue-600"
-                  : "border-transparent text-muted-foreground hover:text-foreground"
+                  : "border-transparent text-gray-600 dark:text-muted-foreground dark:hover:text-foreground dark:hover:bg-blue-900"
               }`}
+              style={{
+                backgroundColor: activeTab === "editor" ? undefined : "transparent"
+              }}
+              onMouseEnter={(e) => {
+                if (activeTab !== "editor") {
+                  e.currentTarget.style.backgroundColor = "transparent";
+                  e.currentTarget.style.color = "#4B5563";
+                }
+              }}
+              onMouseLeave={(e) => {
+                if (activeTab !== "editor") {
+                  e.currentTarget.style.backgroundColor = "transparent";
+                  e.currentTarget.style.color = "#4B5563";
+                }
+              }}
             >
               <FileText className="w-4 h-4 inline mr-1" />
               Editor
@@ -2194,8 +2224,23 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
               className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
                 activeTab === "imagens"
                   ? "border-blue-500 text-blue-600"
-                  : "border-transparent text-muted-foreground hover:text-foreground"
+                  : "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})
@@ -2205,8 +2250,23 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
               className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
                 activeTab === "campos"
                   ? "border-blue-500 text-blue-600"
-                  : "border-transparent text-muted-foreground hover:text-foreground"
+                  : "border-transparent text-gray-600 dark:text-muted-foreground dark:hover:text-foreground dark:hover:bg-blue-900"
               }`}
+              style={{
+                backgroundColor: activeTab === "campos" ? undefined : "transparent"
+              }}
+              onMouseEnter={(e) => {
+                if (activeTab !== "campos") {
+                  e.currentTarget.style.backgroundColor = "transparent";
+                  e.currentTarget.style.color = "#4B5563";
+                }
+              }}
+              onMouseLeave={(e) => {
+                if (activeTab !== "campos") {
+                  e.currentTarget.style.backgroundColor = "transparent";
+                  e.currentTarget.style.color = "#4B5563";
+                }
+              }}
             >
               <Settings className="w-4 h-4 inline mr-1" />
               Campos
@@ -2216,8 +2276,23 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
               className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
                 showPreview
                   ? "border-green-500 text-green-600"
-                  : "border-transparent text-muted-foreground hover:text-foreground hover:bg-blue-50 dark:hover:bg-gray-700"
+                  : "border-transparent text-gray-600 dark:text-muted-foreground dark:hover:text-foreground dark:hover:bg-blue-900"
               }`}
+              style={{
+                backgroundColor: !showPreview ? "transparent" : undefined
+              }}
+              onMouseEnter={(e) => {
+                if (!showPreview) {
+                  e.currentTarget.style.backgroundColor = "transparent";
+                  e.currentTarget.style.color = "#4B5563";
+                }
+              }}
+              onMouseLeave={(e) => {
+                if (!showPreview) {
+                  e.currentTarget.style.backgroundColor = "transparent";
+                  e.currentTarget.style.color = "#4B5563";
+                }
+              }}
             >
               <Eye className="w-4 h-4 inline mr-1" />
               {showPreview ? "Ocultar" : "Pré-visualização"}
@@ -2314,6 +2389,7 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
                         size="sm"
                         onClick={() => formatText("bold")}
                         title="Negrito"
+                        className="hover:bg-blue-50 dark:hover:bg-accent"
                       >
                         <strong>B</strong>
                       </Button>
@@ -2322,6 +2398,7 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
                         size="sm"
                         onClick={() => formatText("italic")}
                         title="Itálico"
+                        className="hover:bg-blue-50 dark:hover:bg-accent"
                       >
                         <em>I</em>
                       </Button>
@@ -2330,6 +2407,7 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
                         size="sm"
                         onClick={() => formatText("underline")}
                         title="Sublinhado"
+                        className="hover:bg-blue-50 dark:hover:bg-accent"
                       >
                         <u>U</u>
                       </Button>
@@ -2338,6 +2416,7 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
                         size="sm"
                         onClick={() => formatText("list")}
                         title="Lista"
+                        className="hover:bg-blue-50 dark:hover:bg-accent"
                       >
                         •
                       </Button>
@@ -2596,10 +2675,10 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
                 Este editor permite escrever relatórios de forma livre, com formatação de texto rica.
               </div>
               <div className="flex gap-2">
-                <Button variant="outline" onClick={onClose}>
+                <Button variant="outline" onClick={onClose} className="hover:bg-blue-50 dark:hover:bg-accent dark:hover:text-accent-foreground">
                   Cancelar
                 </Button>
-                <Button variant="outline">
+                <Button variant="outline" className="hover:bg-blue-50 dark:hover:bg-accent dark:hover:text-accent-foreground">
                   Salvar Rascunho
                 </Button>
                 <Button variant="default">
@@ -2621,12 +2700,22 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
           <div className="space-y-2">
             <Label htmlFor="destinatario">Destinatário</Label>
-            <Input 
-              id="destinatario" 
-              placeholder="Nome do Paciente ou CPF" 
-              disabled 
-              className="bg-muted cursor-not-allowed text-muted-foreground disabled:text-foreground"
-            />
+            <Select>
+              <SelectTrigger id="destinatario" className="hover:border-primary focus:border-primary cursor-pointer">
+                <SelectValue placeholder="Selecione o paciente" />
+              </SelectTrigger>
+              <SelectContent className="bg-popover border">
+                {pacientes.map((paciente) => (
+                  <SelectItem 
+                    key={paciente.cpf} 
+                    value={paciente.nome} 
+                    className="hover:bg-blue-50 focus:bg-blue-50 cursor-pointer dark:hover:bg-primary dark:hover:text-primary-foreground dark:focus:bg-primary dark:focus:text-primary-foreground"
+                  >
+                    {paciente.nome} - {paciente.cpf}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
           <div className="space-y-2">
             <Label htmlFor="tipoMensagem">Tipo de mensagem</Label>
@@ -2673,7 +2762,7 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
       <div className="flex items-center justify-between">
         <h2 className="text-2xl font-bold text-foreground">Relatórios Médicos</h2>
         {editandoRelatorio && (
-          <Button variant="outline" onClick={handleCancelarEdicaoRelatorio}>
+          <Button variant="outline" onClick={handleCancelarEdicaoRelatorio} className="hover:bg-blue-50 dark:hover:bg-accent dark:hover:text-accent-foreground">
             Cancelar Edição
           </Button>
         )}
@@ -2893,7 +2982,7 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
 
           {/* Botões de Ação */}
           <div className="flex justify-end gap-4">
-            <Button variant="outline" onClick={handleCancelarEdicaoRelatorio}>
+            <Button variant="outline" onClick={handleCancelarEdicaoRelatorio} className="hover:bg-blue-50 dark:hover:bg-accent dark:hover:text-accent-foreground">
               Cancelar
             </Button>
             <Button onClick={handleSalvarRelatorio} className="flex items-center gap-2">
@@ -2989,7 +3078,7 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
             <Button onClick={handleSaveProfile} className="flex items-center gap-2">
               Salvar
             </Button>
-            <Button variant="outline" onClick={handleCancelEdit}>
+            <Button variant="outline" onClick={handleCancelEdit} className="hover:bg-blue-50 dark:hover:bg-accent dark:hover:text-accent-foreground">
               Cancelar
             </Button>
           </div>
@@ -3297,7 +3386,7 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
                   <Button
                     onClick={() => setShowPopup(false)}
                     variant="outline"
-                    className="flex-1"
+                    className="flex-1 hover:bg-blue-50 dark:hover:bg-accent dark:hover:text-accent-foreground"
                   >
                     Cancelar
                   </Button>
@@ -3412,7 +3501,7 @@ Nevo melanocítico benigno. Seguimento clínico recomendado.
             <Button
               onClick={() => setShowActionModal(false)}
               variant="outline"
-              className="w-full mt-2"
+              className="w-full mt-2 hover:bg-blue-50 dark:hover:bg-accent dark:hover:text-accent-foreground"
             >
               Cancelar
             </Button>
diff --git a/susconecta/components/header.tsx b/susconecta/components/header.tsx
index b71c149..799eb78 100644
--- a/susconecta/components/header.tsx
+++ b/susconecta/components/header.tsx
@@ -59,7 +59,7 @@ export function Header() {
             <Link href="/login-admin">
              <Button
                 variant="outline"
-                className="text-foreground border-slate-600 bg-transparent shadow-sm shadow-gray-500/10 border border-gray-300 hover:bg-gray-50 dark:shadow-none dark:border-slate-600 dark:hover:bg-slate-700 dark:hover:text-white cursor-pointer"
+                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 cursor-pointer"
               >
                 Sou Administrador de uma Clínica
               </Button>
@@ -109,7 +109,7 @@ export function Header() {
                 <Link href="/login-admin">
                   <Button
                     variant="outline"
-                    className="text-foreground border-slate-600 bg-transparent w-full shadow-sm shadow-gray-500/10 border border-gray-300 hover:bg-gray-50 dark:shadow-none dark:border-slate-600 dark:hover:bg-slate-700 dark:hover:text-white cursor-pointer"
+                    className="text-primary border-primary bg-transparent w-full 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 cursor-pointer"
                   >
                     Sou Administrador de uma Clínica
                   </Button>