diff --git a/susconecta/app/(main-routes)/calendar/page.tsx b/susconecta/app/(main-routes)/calendar/page.tsx
index dabcec7..b5a7947 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">
@@ -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>
@@ -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/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/(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)/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/(main-routes)/doutores/page.tsx b/susconecta/app/(main-routes)/doutores/page.tsx
index 8fae66c..64fcf5e 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>
@@ -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 c9bffb7..6b8193a 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>
@@ -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/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/app/agenda/page.tsx b/susconecta/app/agenda/page.tsx
index e639578..fff1a81 100644
--- a/susconecta/app/agenda/page.tsx
+++ b/susconecta/app/agenda/page.tsx
@@ -4,31 +4,58 @@ 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"); 
   };
 
   const handleCancel = () => {
-    router.back(); 
+    router.push("/calendar");
   };
 
   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 
-            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
new file mode 100644
index 0000000..7981f4b
--- /dev/null
+++ b/susconecta/app/financeiro/page.tsx
@@ -0,0 +1,157 @@
+"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");
+
+  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 */}
+      <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 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 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-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>
+                  <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-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>
+                  <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 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 onSave={handleSave} onCancel={handleCancel} />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/susconecta/app/globals.css b/susconecta/app/globals.css
index 817775e..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;
@@ -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..958c714 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
@@ -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 7ae6e81..75e4b2e 100644
--- a/susconecta/app/login-paciente/page.tsx
+++ b/susconecta/app/login-paciente/page.tsx
@@ -52,13 +52,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">
-            Portal do Paciente
+          <h2 className="mt-6 text-3xl font-extrabold text-foreground">
+            Sou 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>
@@ -70,7 +70,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
@@ -86,7 +86,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
@@ -117,7 +117,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 88755ff..f39edb6 100644
--- a/susconecta/app/login/page.tsx
+++ b/susconecta/app/login/page.tsx
@@ -54,13 +54,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>
@@ -72,7 +72,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
@@ -88,7 +88,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
@@ -119,7 +119,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/procedimento/page.tsx b/susconecta/app/procedimento/page.tsx
index 535a02b..113853a 100644
--- a/susconecta/app/procedimento/page.tsx
+++ b/susconecta/app/procedimento/page.tsx
@@ -20,15 +20,25 @@ 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
-        ? "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 +47,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 +66,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 +84,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>
@@ -83,7 +93,7 @@ export default function ProcedimentoPage() {
       </main>
 
       {/* RODAPÉ FIXO */}
-      <FooterAgenda />
+      <FooterAgenda onSave={handleSave} onCancel={handleCancel} />
     </div>
   );
 }
diff --git a/susconecta/app/profissional/page.tsx b/susconecta/app/profissional/page.tsx
index d2c6ab0..e91ae92 100644
--- a/susconecta/app/profissional/page.tsx
+++ b/susconecta/app/profissional/page.tsx
@@ -1,9 +1,7 @@
 "use client";
 
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useEffect } 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,
@@ -75,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({
@@ -201,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);
@@ -446,43 +454,43 @@ const ProfissionalPage = () => {
     const todayEvents = getTodayEvents();
     
     return (
-      <section className="bg-white 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-gray-50 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" />
+              <ChevronLeft className="h-4 w-4 hover:!text-white" />
             </Button>
-            <h3 className="text-lg font-medium text-gray-900">
+            <h3 className="text-lg font-medium text-foreground">
               {formatDate(currentCalendarDate)}
             </h3>
             <Button 
               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" />
+              <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 hover:bg-blue-50 cursor-pointer dark:hover:bg-primary dark:hover:text-primary-foreground"
             >
               Hoje
             </Button>
           </div>
-          <div className="text-sm text-gray-500">
+          <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>
@@ -490,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-gray-500">
-              <CalendarIcon className="h-12 w-12 mx-auto mb-4 text-gray-300" />
+            <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>
@@ -501,7 +509,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 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">
@@ -512,18 +520,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-gray-500 dark:text-muted-foreground" />
                           {appointment.title}
                         </div>
                         {paciente && (
-                          <div className="text-sm text-gray-500">
+                          <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-gray-500" />
+                      <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">
@@ -539,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) {
@@ -548,13 +556,14 @@ 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 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>
                   </div>
                 </div>
@@ -567,140 +576,18 @@ 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);
-    };
-
+  function PacientesSection({
+    handleAbrirProntuario,
+    setActiveSection,
+  }: {
+    handleAbrirProntuario: (paciente: any) => void;
+    setActiveSection: (section: string) => void;
+  }) {
     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">
-          <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 */}
         <div>
@@ -728,19 +615,20 @@ 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 mr-2 dark:hover:bg-primary dark:hover:text-white"
                           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 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>
                   </TableCell>
                 </TableRow>
@@ -755,7 +643,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,12 +661,12 @@ 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>
                     {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>
@@ -817,15 +705,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-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-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-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-gray-600 dark: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
@@ -841,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>
@@ -857,31 +745,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-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 text-green-800' 
+                          ? '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 text-yellow-800'
-                          : 'bg-gray-100 text-gray-800'
+                          ? '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>
@@ -902,7 +790,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 +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-gray-500 hover:text-gray-700 hover:border-gray-300'
+                        : 'border-transparent text-gray-600 hover:text-foreground hover:border-border dark:text-muted-foreground'
                     }`}
                   >
                     <Icone className="h-4 w-4" />
@@ -996,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: "",
@@ -1017,11 +905,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 +922,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 +937,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 +952,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 +967,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 +982,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 +997,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 +1012,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 +1026,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 +1045,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 +1058,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-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>
                     )}
                   </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 +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-gray-600">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 text-green-800 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>
@@ -1229,9 +1117,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-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>
@@ -1273,11 +1161,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 +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 text-red-800 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 text-yellow-800 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>
@@ -1302,7 +1190,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,20 +1201,20 @@ 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-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">
               <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">
+                <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>
@@ -1334,11 +1222,11 @@ 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">
+                <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>
@@ -1349,15 +1237,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 +1260,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 +1271,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-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 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-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>
@@ -1410,21 +1298,21 @@ 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-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">
+                <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>
@@ -1438,7 +1326,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 +1335,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-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>
             
             <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-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>
         </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-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>
@@ -1494,7 +1382,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 +1393,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-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"><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-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>
@@ -1539,7 +1427,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,15 +1445,15 @@ 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-gray-600 dark:text-muted-foreground">20/09/2025</p>
                 </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>
@@ -1579,15 +1467,15 @@ 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-gray-600 dark:text-muted-foreground">15/09/2025</p>
                 </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>
@@ -1599,27 +1487,27 @@ 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-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>
             </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" />
@@ -1630,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>
@@ -1646,272 +1534,1188 @@ 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-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 
+        isEditingForPatient={isEditingLaudoForPatient}
+        selectedPatientForLaudo={patientForLaudo}
+        onClosePatientEditor={() => {
+          setIsEditingLaudoForPatient(false);
+          setPatientForLaudo(null);
+        }}
+      />
     </div>
   );
-}
+
+  // --- NOVO SISTEMA DE LAUDOS COMPLETO ---
+  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" },
+      { 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" 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" 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" 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" className="hover:bg-blue-600 dark:hover:bg-primary/90">
+                <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>
+                      <div className="flex items-center gap-2">
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => {
+                            setLaudoSelecionado(laudo);
+                            setIsViewing(true);
+                          }}
+                          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
+                        </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>
+                ))}
+              </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}
+          />
+        )}
+
+        {/* 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>
+    );
+  }
+
+  // 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 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 mb-1" style={{ color: '#EF4444' }}>Conclusão:</h4>
+                  <p className="text-sm font-bold" style={{ color: '#EF4444' }}>{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, preSelectedPatient }: { pacientes?: any[]; laudo?: any; onClose: () => void; isNewLaudo?: boolean; preSelectedPatient?: any }) {
+    const [activeTab, setActiveTab] = useState("editor");
+    const [content, setContent] = useState(laudo?.conteudo || "");
+    const [showPreview, setShowPreview] = useState(false);
+    const [pacienteSelecionado, setPacienteSelecionado] = useState<any>(preSelectedPatient || null);
+    const [campos, setCampos] = useState({
+      cid: laudo?.cid || "",
+      diagnostico: laudo?.diagnostico || "",
+      conclusao: laudo?.conclusao || "",
+      exame: laudo?.exame || "",
+      especialidade: laudo?.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);
+
+    // 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;
+
+      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: string) => prev ? `${prev}\n\n${template}` : template);
+    };
+
+    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) => {
+      return content
+        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+        .replace(/\*(.*?)\*/g, '<em>$1</em>')
+        .replace(/<u>(.*?)<\/u>/g, '<u>$1</u>')
+        .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>');
+    };
+
+    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" : "Editar Laudo Existente"}
+                </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} | {laudo?.especialidade}
+                  </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 border border-border 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>
+                    {!preSelectedPatient && (
+                      <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-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
+              </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-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
+            </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-gray-600 dark:text-muted-foreground dark:hover:text-foreground dark:hover:bg-blue-900"
+              }`}
+              style={{
+                backgroundColor: activeTab === "imagens" ? undefined : "transparent"
+              }}
+              onMouseEnter={(e) => {
+                if (activeTab !== "imagens") {
+                  e.currentTarget.style.backgroundColor = "transparent";
+                  e.currentTarget.style.color = "#4B5563";
+                }
+              }}
+              onMouseLeave={(e) => {
+                if (activeTab !== "imagens") {
+                  e.currentTarget.style.backgroundColor = "transparent";
+                  e.currentTarget.style.color = "#4B5563";
+                }
+              }}
+            >
+              <Upload className="w-4 h-4 inline mr-1" />
+              Imagens ({imagens.length})
+            </button>
+            <button
+              onClick={() => setActiveTab("campos")}
+              className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+                activeTab === "campos"
+                  ? "border-blue-500 text-blue-600"
+                  : "border-transparent text-gray-600 dark:text-muted-foreground dark:hover:text-foreground dark:hover:bg-blue-900"
+              }`}
+              style={{
+                backgroundColor: activeTab === "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
+            </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-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"}
+            </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 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}
+                            </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"
+                        className="hover:bg-blue-50 dark:hover:bg-accent"
+                      >
+                        <strong>B</strong>
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => formatText("italic")}
+                        title="Itálico"
+                        className="hover:bg-blue-50 dark:hover:bg-accent"
+                      >
+                        <em>I</em>
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => formatText("underline")}
+                        title="Sublinhado"
+                        className="hover:bg-blue-50 dark:hover:bg-accent"
+                      >
+                        <u>U</u>
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => formatText("list")}
+                        title="Lista"
+                        className="hover:bg-blue-50 dark:hover:bg-accent"
+                      >
+                        •
+                      </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} className="hover:bg-blue-50 dark:hover:bg-accent dark:hover:text-accent-foreground">
+                  Cancelar
+                </Button>
+                <Button variant="outline" className="hover:bg-blue-50 dark:hover:bg-accent dark:hover:text-accent-foreground">
+                  Salvar Rascunho
+                </Button>
+                <Button variant="default">
+                  {isNewLaudo ? "Liberar Laudo" : "Atualizar Laudo"}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
 
   
   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">
             <Label htmlFor="destinatario">Destinatário</Label>
-            <Input 
-              id="destinatario" 
-              placeholder="Nome do Paciente ou CPF" 
-              disabled 
-              className="bg-muted cursor-not-allowed text-gray-700 disabled:text-gray-900"
-            />
+            <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>
@@ -1919,11 +2723,11 @@ 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">
-                <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>
+              <SelectContent className="bg-popover border">
+                <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>
@@ -1956,17 +2760,17 @@ 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}>
+          <Button variant="outline" onClick={handleCancelarEdicaoRelatorio} className="hover:bg-blue-50 dark:hover:bg-accent dark:hover:text-accent-foreground">
             Cancelar Edição
           </Button>
         )}
       </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 +2785,7 @@ function LaudoEditor() {
                   id="profissionalNome"
                   value={relatorioMedico.profissionalNome}
                   disabled
-                  className="bg-gray-100"
+                  className="bg-muted"
                 />
               </div>
               <div className="space-y-2">
@@ -1990,7 +2794,7 @@ function LaudoEditor() {
                   id="profissionalCrm"
                   value={relatorioMedico.profissionalCrm}
                   disabled
-                  className="bg-gray-100"
+                  className="bg-muted"
                 />
               </div>
             </div>
@@ -2178,7 +2982,7 @@ function LaudoEditor() {
 
           {/* 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">
@@ -2190,12 +2994,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 +3010,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 +3039,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 +3067,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" />
@@ -2274,7 +3078,7 @@ function LaudoEditor() {
             <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>
@@ -2284,12 +3088,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 +3106,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 +3119,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 +3138,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 +3156,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 +3169,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 +3182,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 +3197,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 +3217,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 +3252,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 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} />
@@ -2468,7 +3272,7 @@ function LaudoEditor() {
           <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>
@@ -2477,10 +3281,10 @@ 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 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" />
@@ -2488,7 +3292,7 @@ function LaudoEditor() {
             </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" />
@@ -2496,7 +3300,7 @@ function LaudoEditor() {
             </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" />
@@ -2504,7 +3308,7 @@ function LaudoEditor() {
             </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" />
@@ -2512,7 +3316,7 @@ function LaudoEditor() {
             </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" />
@@ -2520,7 +3324,7 @@ function LaudoEditor() {
             </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" />
@@ -2528,7 +3332,7 @@ function LaudoEditor() {
             </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" />
@@ -2555,7 +3359,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 border border-border p-6 rounded-lg w-96">
 
             {step === 1 && (
               <>
@@ -2582,7 +3386,7 @@ function LaudoEditor() {
                   <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>
@@ -2668,7 +3472,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 border border-border p-6 rounded-lg w-96">
             <h3 className="text-lg font-semibold mb-2">
               Consulta de {selectedEvent.title}
             </h3>
@@ -2697,7 +3501,7 @@ function LaudoEditor() {
             <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/agenda/FooterAgenda.tsx b/susconecta/components/agenda/FooterAgenda.tsx
index 79b4918..37a6fa6 100644
--- a/susconecta/components/agenda/FooterAgenda.tsx
+++ b/susconecta/components/agenda/FooterAgenda.tsx
@@ -5,28 +5,25 @@ 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 (
-    <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>
-          </Link>
-          <Link href={"/calendar"}>
-            <Button>
-              <Save className="mr-2 h-4 w-4" />
-              Salvar as alterações
-            </Button>
-          </Link>
+          <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 51594ce..928976d 100644
--- a/susconecta/components/agenda/HeaderAgenda.tsx
+++ b/susconecta/components/agenda/HeaderAgenda.tsx
@@ -8,21 +8,14 @@ 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 text-blue-700 font-medium"
-        : "text-gray-700 hover:bg-gray-100"
-    } ${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
@@ -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>
@@ -58,9 +60,9 @@ export default function HeaderAgenda() {
 
           <button
             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"
+            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" />
           </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/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/dashboard/sidebar.tsx b/susconecta/components/dashboard/sidebar.tsx
index e7feeec..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() {
@@ -61,7 +59,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>
@@ -74,8 +72,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/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/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 6974df0..5a6c21c 100644
--- a/susconecta/components/forms/calendar-registration-form.tsx
+++ b/susconecta/components/forms/calendar-registration-form.tsx
@@ -1,140 +1,247 @@
+
 "use client";
 
-import { useState, useEffect } from "react";
-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";
-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;
+}
 
-  useEffect(() => {
-    setFormData(initialData || {});
-  }, [initialData]);
+interface CalendarRegistrationFormProperties {
+  formData: FormData;
+  onFormChange: (data: FormData) => void;
+}
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
-    const { name, value } = e.target;
-    setFormData((prev: any) => ({ ...prev, [name]: value }));
-  };
+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;
+};
 
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    onSave(formData);
+export function CalendarRegistrationForm({ formData, onFormChange }: CalendarRegistrationFormProperties) {
+  const [isAdditionalInfoOpen, setIsAdditionalInfoOpen] = useState(false);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+    const { name, value } = event.target;
+
+    if (name === 'validade') {
+        const formattedValue = formatValidityDate(value);
+        onFormChange({ ...formData, [name]: formattedValue });
+    } else {
+        onFormChange({ ...formData, [name]: value });
+    }
   };
 
   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>
+    <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">
-              <Label>Nome *</Label>
+            <div className="md:col-span-6 space-y-2">
+              <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-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"
-                  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">
-              <Label>CPF do paciente</Label>
-              <Input name="cpf" placeholder="Número do CPF" className="h-10" value={formData.cpf || ''} onChange={handleChange} />
+            <div className="md:col-span-3 space-y-2">
+              <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">
-              <Label>RG</Label>
-              <Input name="rg" placeholder="Número do RG" className="h-10" value={formData.rg || ''} onChange={handleChange} />
+            <div className="md:col-span-3 space-y-2">
+              <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-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 space-y-2">
+              <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 className="text-[13px]">Telefone</Label>
+              <div className="flex gap-2">
+                <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-11 flex-1 rounded-md transition-colors hover:bg-muted/30" value={formData.phoneNumber || ''} onChange={handleChange} />
               </div>
             </div>
-            <div className="md:col-span-6">
-              <Label>E-mail</Label>
-              <Input name="email" type="email" placeholder="email@exemplo.com" className="h-10" value={formData.email || ''} onChange={handleChange} />
+            <div className="md:col-span-6 space-y-2">
+              <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 className="text-[13px]">Convênio</Label>
+              <div className="relative">
+                <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>
+                    <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 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 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 space-y-2">
+        <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>
 
-      {}
-      <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>
+      <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 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>
+                    <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 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>
                     </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" />
-                            <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-12 gap-3 items-end">
-                    <div className="col-span-12 md:col-span-3">
+                <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="col-span-12 md:col-span-3">
+                    <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-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>
+                            </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="md:col-span-6">
-                <div className="mb-2">
-                    <Label className="text-[13px]">Tipo de atendimento *</Label>
+            <div className="space-y-4">
+                <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} />
+                        <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>
-                    <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} />
+                <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 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="button" variant="outline" onClick={onCancel}>Cancelar</Button>
-        <Button type="submit">Salvar</Button>
-      </div>
     </form>
   );
 }
diff --git a/susconecta/components/forms/doctor-registration-form.tsx b/susconecta/components/forms/doctor-registration-form.tsx
index 1db55f8..13251e7 100644
--- a/susconecta/components/forms/doctor-registration-form.tsx
+++ b/susconecta/components/forms/doctor-registration-form.tsx
@@ -135,6 +135,8 @@ const initial: FormData = {
 
 
 
+// AgendaEditor removido - restaurando o textarea original abaixo
+
 export function DoctorRegistrationForm({
   open = true,
   onOpenChange,
@@ -535,10 +537,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>
@@ -591,27 +593,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">
@@ -713,7 +715,7 @@ if (missingFields.length > 0) {
                     </Button>
                   </div>
                 ))}
-                <Button type="button" variant="outline" onClick={addFormacao}>
+                <Button type="button" onClick={addFormacao}>
                   Adicionar Formação
                 </Button>
               </CardContent>
@@ -821,17 +823,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>
@@ -971,10 +963,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 b25ea24..1abade4 100644
--- a/susconecta/components/forms/patient-registration-form.tsx
+++ b/susconecta/components/forms/patient-registration-form.tsx
@@ -440,10 +440,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>
@@ -631,10 +631,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} />
diff --git a/susconecta/components/header.tsx b/susconecta/components/header.tsx
index 139d204..799eb78 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);
@@ -17,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>
 
@@ -43,20 +44,22 @@ 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"
+              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
+             <Button
                 variant="outline"
-                className="text-slate-700 border-slate-600 hover:bg-slate-700 hover:text-white 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 cursor-pointer"
               >
                 Sou Administrador de uma Clínica
               </Button>
@@ -92,20 +95,21 @@ 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"
+                  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-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>
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
new file mode 100644
index 0000000..c322131
--- /dev/null
+++ b/susconecta/components/simple-theme-toggle.tsx
@@ -0,0 +1,27 @@
+"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}
+      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>
+    </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..9f94f94 100644
--- a/susconecta/components/ui/input.tsx
+++ b/susconecta/components/ui/input.tsx
@@ -8,8 +8,10 @@ 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]",
+        "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 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",
         className
       )}
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..8f6ce75 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 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",
         className
       )}
       {...props}
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
diff --git a/susconecta/package-lock.json b/susconecta/package-lock.json
index 28b8049..bb4783c 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"
@@ -9548,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"
+      }
     }
   }
 }