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)/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..c034860 100644
--- a/susconecta/app/(main-routes)/doutores/page.tsx
+++ b/susconecta/app/(main-routes)/doutores/page.tsx
@@ -287,7 +287,7 @@ export default function DoutoresPage() {
 
   if (showForm) {
     return (
-      <div className="space-y-6 p-6">
+      <div className="space-y-6 p-6 bg-background">
         <div className="flex items-center gap-4">
           <Button variant="ghost" size="icon" onClick={() => setShowForm(false)}>
             <ArrowLeft className="h-4 w-4" />
@@ -307,7 +307,7 @@ export default function DoutoresPage() {
   }
 
   return (
-    <div className="space-y-6 p-6">
+    <div className="space-y-6 p-6 bg-background">
       <div className="flex items-center justify-between gap-4 flex-wrap">
         <div>
           <h1 className="text-2xl font-bold">Médicos</h1>
diff --git a/susconecta/app/(main-routes)/pacientes/page.tsx b/susconecta/app/(main-routes)/pacientes/page.tsx
index c9bffb7..9310a62 100644
--- a/susconecta/app/(main-routes)/pacientes/page.tsx
+++ b/susconecta/app/(main-routes)/pacientes/page.tsx
@@ -166,7 +166,7 @@ export default function PacientesPage() {
 
   if (showForm) {
     return (
-      <div className="space-y-6 p-6">
+      <div className="space-y-6 p-6 bg-background">
         <div className="flex items-center gap-4">
           <Button variant="ghost" onClick={() => setShowForm(false)}>
             <ArrowLeft className="h-4 w-4" />
@@ -186,7 +186,7 @@ export default function PacientesPage() {
   }
 
   return (
-    <div className="space-y-6 p-6">
+    <div className="space-y-6 p-6 bg-background">
       <div className="flex items-center justify-between gap-4 flex-wrap">
         <div>
           <h1 className="text-2xl font-bold">Pacientes</h1>
diff --git a/susconecta/app/agenda/page.tsx b/susconecta/app/agenda/page.tsx
index e639578..36cc1cc 100644
--- a/susconecta/app/agenda/page.tsx
+++ b/susconecta/app/agenda/page.tsx
@@ -19,7 +19,7 @@ export default function NovoAgendamentoPage() {
   };
 
   return (
-    <div className="min-h-screen flex flex-col bg-white">
+    <div className="min-h-screen flex flex-col bg-background">
       <HeaderAgenda />
       <main className="flex-1 mx-auto w-full max-w-7xl px-8 py-8">
         <CalendarRegistrationForm 
diff --git a/susconecta/app/financeiro/page.tsx b/susconecta/app/financeiro/page.tsx
new file mode 100644
index 0000000..bb14865
--- /dev/null
+++ b/susconecta/app/financeiro/page.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Search, ChevronDown, Calculator, DollarSign } from "lucide-react";
+import { Plus } from "lucide-react";
+import HeaderAgenda from "@/components/agenda/HeaderAgenda";
+import FooterAgenda from "@/components/agenda/FooterAgenda";
+
+export default function FinanceiroPage() {
+  const pathname = usePathname();
+  const router = useRouter();
+  const [bloqueio, setBloqueio] = useState(false);
+
+  const isAg = pathname?.startsWith("/agendamento");
+  const isPr = pathname?.startsWith("/procedimento");
+  const isFi = pathname?.startsWith("/financeiro");
+
+  return (
+    <div className="w-full min-h-screen flex flex-col bg-background">
+      {/* HEADER */}
+      <HeaderAgenda />
+
+      {/* CORPO */}
+      <main className="mx-auto w-full max-w-7xl px-8 py-6 space-y-6 flex-grow">
+        {/* INFORMAÇÕES FINANCEIRAS */}
+        <section className="space-y-6">
+          {/* Selo Financeiro */}
+          <div className="inline-flex items-center gap-2 border border-border px-3 py-1.5 bg-card text-[12px] rounded-md cursor-pointer hover:bg-muted">
+            <span className="flex h-5 w-5 items-center justify-center rounded-full border border-border bg-muted text-muted-foreground">
+              <DollarSign className="h-3 w-3" strokeWidth={2} />
+            </span>
+            <span className="text-foreground">Informações Financeiras</span>
+          </div>
+
+          {/* Traço separador */}
+          <div className="border-b border-border" />
+
+          {/* VALOR DO ATENDIMENTO */}
+          <div className="space-y-4">
+            <Label className="text-[13px] text-foreground/80">
+              Valor do Atendimento
+            </Label>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label className="text-xs text-muted-foreground">Valor Particular</Label>
+                <div className="relative">
+                  <DollarSign className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    placeholder="R$ 0,00"
+                    className="h-10 w-full rounded-md pl-8 pr-4 border-input focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
+                  />
+                </div>
+              </div>
+              <div className="space-y-2">
+                <Label className="text-xs text-muted-foreground">Valor Convênio</Label>
+                <div className="relative">
+                  <DollarSign className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    placeholder="R$ 0,00"
+                    className="h-10 w-full rounded-md pl-8 pr-4 border-input focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Traço separador */}
+          <div className="border-b border-border" />
+
+          {/* FORMA DE PAGAMENTO */}
+          <div className="space-y-4">
+            <Label className="text-[13px] text-foreground/80">
+              Forma de Pagamento
+            </Label>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="space-y-2">
+                <Label className="text-xs text-muted-foreground">Tipo</Label>
+                <select className="h-10 w-full rounded-md border border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none">
+                  <option value="">Selecionar</option>
+                  <option value="dinheiro">Dinheiro</option>
+                  <option value="cartao">Cartão</option>
+                  <option value="pix">PIX</option>
+                  <option value="convenio">Convênio</option>
+                </select>
+              </div>
+              <div className="space-y-2">
+                <Label className="text-xs text-muted-foreground">Parcelas</Label>
+                <select className="h-10 w-full rounded-md border border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none">
+                  <option value="1">1x</option>
+                  <option value="2">2x</option>
+                  <option value="3">3x</option>
+                  <option value="4">4x</option>
+                  <option value="5">5x</option>
+                  <option value="6">6x</option>
+                </select>
+              </div>
+              <div className="space-y-2">
+                <Label className="text-xs text-muted-foreground">Desconto</Label>
+                <div className="relative">
+                  <Calculator className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    placeholder="0%"
+                    className="h-10 w-full rounded-md pl-8 pr-4 border-input focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Traço separador */}
+          <div className="border-b border-border" />
+
+          {/* RESUMO FINANCEIRO */}
+          <div className="space-y-4">
+            <Label className="text-[13px] text-foreground/80">
+              Resumo Financeiro
+            </Label>
+            <div className="bg-muted/30 rounded-lg p-4 space-y-3">
+              <div className="flex justify-between items-center">
+                <span className="text-sm text-muted-foreground">Subtotal:</span>
+                <span className="text-sm font-medium text-foreground">R$ 0,00</span>
+              </div>
+              <div className="flex justify-between items-center">
+                <span className="text-sm text-muted-foreground">Desconto:</span>
+                <span className="text-sm font-medium text-foreground">- R$ 0,00</span>
+              </div>
+              <div className="border-t border-border pt-2">
+                <div className="flex justify-between items-center">
+                  <span className="text-base font-medium text-foreground">Total:</span>
+                  <span className="text-lg font-bold text-primary">R$ 0,00</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+
+      {/* RODAPÉ FIXO */}
+      <FooterAgenda />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/susconecta/app/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..c4efa3c 100644
--- a/susconecta/app/login-admin/page.tsx
+++ b/susconecta/app/login-admin/page.tsx
@@ -45,13 +45,13 @@ export default function LoginAdminPage() {
   }
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+    <div className="min-h-screen flex items-center justify-center bg-background py-12 px-4 sm:px-6 lg:px-8">
       <div className="max-w-md w-full space-y-8">
         <div className="text-center">
-          <h2 className="mt-6 text-3xl font-extrabold text-gray-900">
+          <h2 className="mt-6 text-3xl font-extrabold text-foreground">
             Login Administrador de Clínica
           </h2>
-          <p className="mt-2 text-sm text-gray-600">
+          <p className="mt-2 text-sm text-muted-foreground">
             Entre com suas credenciais para acessar o sistema administrativo
           </p>
         </div>
@@ -63,7 +63,7 @@ export default function LoginAdminPage() {
           <CardContent>
             <form onSubmit={handleLogin} className="space-y-6">
               <div>
-                <label htmlFor="email" className="block text-sm font-medium text-gray-700">
+                <label htmlFor="email" className="block text-sm font-medium text-foreground">
                   Email
                 </label>
                 <Input
@@ -79,7 +79,7 @@ export default function LoginAdminPage() {
               </div>
               
               <div>
-                <label htmlFor="password" className="block text-sm font-medium text-gray-700">
+                <label htmlFor="password" className="block text-sm font-medium text-foreground">
                   Senha
                 </label>
                 <Input
diff --git a/susconecta/app/login-paciente/page.tsx b/susconecta/app/login-paciente/page.tsx
index 6468241..072d982 100644
--- a/susconecta/app/login-paciente/page.tsx
+++ b/susconecta/app/login-paciente/page.tsx
@@ -43,13 +43,13 @@ export default function LoginPacientePage() {
   }
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+    <div className="min-h-screen flex items-center justify-center bg-background py-12 px-4 sm:px-6 lg:px-8">
       <div className="max-w-md w-full space-y-8">
         <div className="text-center">
-          <h2 className="mt-6 text-3xl font-extrabold text-gray-900">
-            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>
@@ -61,7 +61,7 @@ export default function LoginPacientePage() {
           <CardContent>
             <form onSubmit={handleLogin} className="space-y-6">
               <div>
-                <label htmlFor="email" className="block text-sm font-medium text-gray-700">
+                <label htmlFor="email" className="block text-sm font-medium text-foreground">
                   Email
                 </label>
                 <Input
@@ -77,7 +77,7 @@ export default function LoginPacientePage() {
               </div>
               
               <div>
-                <label htmlFor="password" className="block text-sm font-medium text-gray-700">
+                <label htmlFor="password" className="block text-sm font-medium text-foreground">
                   Senha
                 </label>
                 <Input
diff --git a/susconecta/app/login/page.tsx b/susconecta/app/login/page.tsx
index bbf1826..7610dd8 100644
--- a/susconecta/app/login/page.tsx
+++ b/susconecta/app/login/page.tsx
@@ -45,13 +45,13 @@ export default function LoginPage() {
   }
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+    <div className="min-h-screen flex items-center justify-center bg-background py-12 px-4 sm:px-6 lg:px-8">
       <div className="max-w-md w-full space-y-8">
         <div className="text-center">
-          <h2 className="mt-6 text-3xl font-extrabold text-gray-900">
+          <h2 className="mt-6 text-3xl font-extrabold text-foreground">
             Login Profissional de Saúde
           </h2>
-          <p className="mt-2 text-sm text-gray-600">
+          <p className="mt-2 text-sm text-muted-foreground">
             Entre com suas credenciais para acessar o sistema
           </p>
         </div>
@@ -63,7 +63,7 @@ export default function LoginPage() {
           <CardContent>
             <form onSubmit={handleLogin} className="space-y-6">
               <div>
-                <label htmlFor="email" className="block text-sm font-medium text-gray-700">
+                <label htmlFor="email" className="block text-sm font-medium text-foreground">
                   Email
                 </label>
                 <Input
@@ -79,7 +79,7 @@ export default function LoginPage() {
               </div>
               
               <div>
-                <label htmlFor="password" className="block text-sm font-medium text-gray-700">
+                <label htmlFor="password" className="block text-sm font-medium text-foreground">
                   Senha
                 </label>
                 <Input
diff --git a/susconecta/app/procedimento/page.tsx b/susconecta/app/procedimento/page.tsx
index 535a02b..e23320e 100644
--- a/susconecta/app/procedimento/page.tsx
+++ b/susconecta/app/procedimento/page.tsx
@@ -23,12 +23,12 @@ export default function ProcedimentoPage() {
   const tab = (active: boolean, extra = "") =>
     `px-4 py-1.5 text-[13px] border ${
       active
-        ? "border-sky-500 bg-sky-50 text-sky-700 font-medium"
-        : "text-gray-700 hover:bg-gray-100"
+        ? "border-sky-500 bg-sky-50 dark:bg-sky-900/30 text-sky-700 dark:text-sky-300 font-medium"
+        : "text-muted-foreground hover:bg-muted border-border"
     } ${extra}`;
 
   return (
-    <div className="w-full min-h-screen flex flex-col bg-white">
+    <div className="w-full min-h-screen flex flex-col bg-background">
       {/* HEADER */}
       <HeaderAgenda />
 
@@ -37,15 +37,15 @@ export default function ProcedimentoPage() {
         {/* ATENDIMENTOS */}
         <section className="space-y-6">
           {/* Selo Atendimento com + dentro da bolinha */}
-          <div className="inline-flex items-center gap-2 border px-3 py-1.5 bg-white text-[12px] rounded-md cursor-pointer hover:bg-gray-50">
-            <span className="flex h-5 w-5 items-center justify-center rounded-full border border-gray-400 bg-gray-100 text-gray-700">
+          <div className="inline-flex items-center gap-2 border border-border px-3 py-1.5 bg-card text-[12px] rounded-md cursor-pointer hover:bg-muted">
+            <span className="flex h-5 w-5 items-center justify-center rounded-full border border-border bg-muted text-muted-foreground">
               <Plus className="h-3 w-3" strokeWidth={2} />
             </span>
-            Atendimento
+            <span className="text-foreground">Atendimento</span>
           </div>
 
           {/* Traço separador */}
-          <div className="border-b border-gray-200" />
+          <div className="border-b border-border" />
 
           {/* PROCEDIMENTOS */}
           <div className="space-y-1">
@@ -56,14 +56,14 @@ export default function ProcedimentoPage() {
               <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
               <Input
                 placeholder="Buscar"
-                className="h-10 w-full rounded-md pl-8 pr-8 border border-gray-300 focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
+                className="h-10 w-full rounded-md pl-8 pr-8 border-input focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
               />
               <ChevronDown className="pointer-events-none absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
             </div>
           </div>
 
           {/* Traço separador */}
-          <div className="border-b border-gray-200" />
+          <div className="border-b border-border" />
 
           {/* OUTRAS DESPESAS */}
           <div className="space-y-1">
@@ -74,7 +74,7 @@ export default function ProcedimentoPage() {
               <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
               <Input
                 placeholder="Buscar"
-                className="h-10 w-full rounded-md pl-8 pr-8 border border-gray-300 focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
+                className="h-10 w-full rounded-md pl-8 pr-8 border-input focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
               />
               <ChevronDown className="pointer-events-none absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
             </div>
diff --git a/susconecta/app/profissional/page.tsx b/susconecta/app/profissional/page.tsx
index 1119199..b599d3e 100644
--- a/susconecta/app/profissional/page.tsx
+++ b/susconecta/app/profissional/page.tsx
@@ -1,194 +1,7 @@
 "use client";
 
 import React, { useState, useRef, useEffect } from "react";
-import dynamic from "next/dynamic";
-
-// Importações dinâmicas para evitar erros de SSR
-const SignatureCanvas = dynamic(() => import("react-signature-canvas"), {
-  ssr: false,
-});
-
-
-
-// Função para converter marcações em HTML
-const formatTextToHtml = (text: string): string => {
-  return text
-    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
-    .replace(/\*(.*?)\*/g, '<em>$1</em>')
-    .replace(/<u>(.*?)<\/u>/g, '<u>$1</u>')
-    .replace(/\n/g, '<br>');
-};
-
-// Editor simples para laudos
-const QuillEditor = ({ value, onChange }: { value: string; onChange: (content: string) => void }) => {
-  const [showPreview, setShowPreview] = useState(false);
-
-  return (
-    <div className="space-y-2">
-      <div className="flex flex-wrap gap-2 p-2 border-b justify-between">
-        <div className="flex gap-2">
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            onClick={() => {
-              const textarea = document.querySelector('textarea[data-quill-temp]') as HTMLTextAreaElement;
-              if (textarea) {
-                const start = textarea.selectionStart;
-                const end = textarea.selectionEnd;
-                const selectedText = textarea.value.substring(start, end);
-                
-                if (selectedText) {
-                  const newText = textarea.value.substring(0, start) + `**${selectedText}**` + textarea.value.substring(end);
-                  onChange(newText);
-                  setTimeout(() => {
-                    textarea.setSelectionRange(start + 2, end + 2);
-                    textarea.focus();
-                  }, 0);
-                } else {
-                  const newText = textarea.value.substring(0, start) + `**texto em negrito**` + textarea.value.substring(end);
-                  onChange(newText);
-                  setTimeout(() => {
-                    textarea.setSelectionRange(start + 2, start + 18);
-                    textarea.focus();
-                  }, 0);
-                }
-              }
-            }}
-            title="Negrito"
-          >
-            <strong>B</strong>
-          </Button>
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            onClick={() => {
-              const textarea = document.querySelector('textarea[data-quill-temp]') as HTMLTextAreaElement;
-              if (textarea) {
-                const start = textarea.selectionStart;
-                const end = textarea.selectionEnd;
-                const selectedText = textarea.value.substring(start, end);
-                
-                if (selectedText) {
-                  const newText = textarea.value.substring(0, start) + `*${selectedText}*` + textarea.value.substring(end);
-                  onChange(newText);
-                  setTimeout(() => {
-                    textarea.setSelectionRange(start + 1, end + 1);
-                    textarea.focus();
-                  }, 0);
-                } else {
-                  const newText = textarea.value.substring(0, start) + `*texto em itálico*` + textarea.value.substring(end);
-                  onChange(newText);
-                  setTimeout(() => {
-                    textarea.setSelectionRange(start + 1, start + 17);
-                    textarea.focus();
-                  }, 0);
-                }
-              }
-            }}
-            title="Itálico"
-          >
-            <em>I</em>
-          </Button>
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            onClick={() => {
-              const textarea = document.querySelector('textarea[data-quill-temp]') as HTMLTextAreaElement;
-              if (textarea) {
-                const start = textarea.selectionStart;
-                const end = textarea.selectionEnd;
-                const selectedText = textarea.value.substring(start, end);
-                
-                if (selectedText) {
-                  const newText = textarea.value.substring(0, start) + `<u>${selectedText}</u>` + textarea.value.substring(end);
-                  onChange(newText);
-                  setTimeout(() => {
-                    textarea.setSelectionRange(start + 3, end + 3);
-                    textarea.focus();
-                  }, 0);
-                } else {
-                  const newText = textarea.value.substring(0, start) + `<u>texto sublinhado</u>` + textarea.value.substring(end);
-                  onChange(newText);
-                  setTimeout(() => {
-                    textarea.setSelectionRange(start + 3, start + 19);
-                    textarea.focus();
-                  }, 0);
-                }
-              }
-            }}
-            title="Sublinhado"
-          >
-            <u>U</u>
-          </Button>
-        </div>
-        
-        <Button
-          type="button"
-          variant={showPreview ? "default" : "outline"}
-          size="sm"
-          onClick={() => setShowPreview(!showPreview)}
-        >
-          {showPreview ? "Editar" : "Prévia"}
-        </Button>
-      </div>
-
-      {showPreview ? (
-        <div className="min-h-64 p-3 border rounded-md bg-white text-sm">
-          {value ? (
-            <div dangerouslySetInnerHTML={{ __html: formatTextToHtml(value) }} />
-          ) : (
-            <p className="text-gray-400">Nenhum conteúdo para prévia</p>
-          )}
-        </div>
-      ) : (
-        <Textarea
-          data-quill-temp="true"
-          value={value}
-          onChange={(e) => onChange(e.target.value)}
-          placeholder="Digite o conteúdo do laudo aqui..."
-          className="min-h-64 text-sm"
-          rows={12}
-        />
-      )}
-      
-      <div className="text-xs text-gray-500">
-        <strong>Dica:</strong> Selecione um texto e clique nos botões B, I, U para formatar. Use o botão "Prévia" para ver como ficará formatado.
-        <br />
-        <strong>Formatação:</strong> **negrito**, *itálico*, &lt;u&gt;sublinhado&lt;/u&gt;
-      </div>
-    </div>
-  );
-};
-
-// Wrapper para o SignatureCanvas para evitar erros
-const SignaturePad = ({ canvasRef, onEnd }: { canvasRef: any; onEnd: () => void }) => {
-  const [isMounted, setIsMounted] = useState(false);
-
-  useEffect(() => {
-    setIsMounted(true);
-  }, []);
-
-  if (!isMounted) {
-    return <div className="h-32 border rounded bg-gray-50 flex items-center justify-center">Carregando área de assinatura...</div>;
-  }
-
-  return (
-    <SignatureCanvas
-      ref={canvasRef}
-      penColor="#000"
-      backgroundColor="#fff"
-      canvasProps={{ 
-        width: 400, 
-        height: 120, 
-        className: "border rounded bg-white w-full" 
-      }}
-      onEnd={onEnd}
-    />
-  );
-};
+import SignatureCanvas from "react-signature-canvas";
 import Link from "next/link";
 import ProtectedRoute from "@/components/ProtectedRoute";
 import { useAuth } from "@/hooks/useAuth";
@@ -213,14 +26,8 @@ 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 {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
 import {
   Tooltip,
   TooltipContent,
@@ -228,6 +35,8 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 
+
+import dynamic from "next/dynamic";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin from "@fullcalendar/interaction";
@@ -264,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({
@@ -365,185 +178,6 @@ const ProfissionalPage = () => {
   const [selectedEvent, setSelectedEvent] = useState<any>(null);
   const [currentCalendarDate, setCurrentCalendarDate] = useState(new Date());
 
-  // Estados para o gerenciamento de laudos
-  const [laudosData, setLaudosData] = useState<any[]>([
-    {
-      id: "30648642",
-      data: "23/07/2025",
-      preco: "25/07/2025",
-      recipient: "Ana Souza",
-      execSolicitante: "Dr. Carlos Andrade",
-      exameTipo: "Avaliação Cardiológica Completa",
-      status: "Entregue",
-      cid: "I25.1",
-      diagnostico: "Doença aterosclerótica do coração com angina de peito",
-      conclusao: "Paciente apresenta quadro de doença arterial coronariana estável. Recomendado tratamento medicamentoso e acompanhamento regular.",
-      conteudo: `**HISTÓRIA CLÍNICA:**
-Paciente do sexo feminino, 42 anos, procurou atendimento devido a episódios de dor torácica aos esforços, com duração de aproximadamente 5 minutos, que melhora com repouso. Relata também dispneia aos médios esforços e palpitações ocasionais.
-
-**ANTECEDENTES:**
-- Hipertensão arterial sistêmica há 8 anos
-- Dislipidemia
-- Histórico familiar de doença arterial coronariana (pai)
-- Sedentarismo
-
-**EXAME FÍSICO:**
-- PA: 145/90 mmHg
-- FC: 76 bpm
-- Peso: 68 kg, Altura: 1,62 m, IMC: 25,9 kg/m²
-- Ausculta cardíaca: bulhas normofonéticas, sem sopros
-- Ausculta pulmonar: murmúrio vesicular presente bilateralmente
-
-**EXAMES COMPLEMENTARES:**
-- ECG: ritmo sinusal, sem alterações isquêmicas
-- Ecocardiograma: função sistólica preservada (FEVE: 65%), sem alterações segmentares
-- Teste ergométrico: positivo para isquemia miocárdica
-
-**CONDUTA:**
-- Otimização do tratamento anti-hipertensivo
-- Estatina para controle da dislipidemia  
-- Antiagregante plaquetário
-- Orientações sobre estilo de vida
-- Retorno em 30 dias`
-    },
-    {
-      id: "30645947",
-      data: "24/07/2025", 
-      preco: "25/07/2025",
-      recipient: "Bruno Lima",
-      execSolicitante: "Dr. Carlos Andrade",
-      exameTipo: "Avaliação Dermatológica - Lesões Pigmentadas",
-      status: "Entregue",
-      cid: "D22.9",
-      diagnostico: "Nevo melanocítico benigno",
-      conclusao: "Lesões pigmentadas benignas. Recomendado acompanhamento dermatológico anual e uso de protetor solar.",
-      conteudo: `**HISTÓRIA CLÍNICA:**
-Paciente masculino, 33 anos, comparece para avaliação de múltiplas lesões pigmentadas pelo corpo, algumas com crescimento recente. Nega sintomas como prurido, sangramento ou mudanças de coloração. Histórico de exposição solar intensa durante a infância e adolescência.
-
-**ANTECEDENTES:**
-- Fototipo II (pele clara, queima facilmente)
-- Múltiplas queimaduras solares na infância
-- Histórico familiar negativo para melanoma
-- Uso irregular de protetor solar
-
-**EXAME FÍSICO:**
-**Dermatoscopia realizada em 12 lesões:**
-
-*Lesão dorso (2cm superior ao ombro direito):*
-- Mácula acastanhada, 4mm, bordas regulares
-- Padrão dermatoscópico: rede pigmentar homogênea
-- Score ABCD: 2,5 (baixo risco)
-
-*Lesão região escapular esquerda:*
-- Pápula pigmentada, 3mm, simétrica
-- Padrão globular homogêneo
-- Sem sinais de malignidade
-
-*Demais lesões:*
-- Características benignas similares
-- Ausência de critérios de malignidade
-- Padrões dermatoscópicos típicos de nevos
-
-**CONDUTA:**
-- Mapeamento corporal documentado
-- Fotoproteção rigorosa (FPS 60+)
-- Autoexame mensal orientado
-- Reavaliação dermatoscópica em 12 meses
-- Biópsia desnecessária no momento atual`
-    },
-    {
-      id: "30649123",
-      data: "25/07/2025",
-      preco: "26/07/2025", 
-      recipient: "Carla Menezes",
-      execSolicitante: "Dr. Carlos Andrade",
-      exameTipo: "Avaliação Cardiológica - Insuficiência Cardíaca",
-      status: "Rascunho",
-      cid: "I50.9",
-      diagnostico: "Insuficiência cardíaca não especificada",
-      conclusao: "Insuficiência cardíaca classe funcional II. Necessário ajuste da medicação e monitorização rigorosa.",
-      conteudo: `**HISTÓRIA CLÍNICA:**
-Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há 6 meses, associada a edema de membros inferiores e fadiga. Nega dor torácica, palpitações ou síncope.
-
-**ANTECEDENTES:**
-- Hipertensão arterial há 15 anos
-- Diabetes mellitus tipo 2 há 10 anos
-- Infarto agudo do miocárdio há 3 anos
-- Tabagismo pregresso (parou há 5 anos)
-
-**EXAME FÍSICO:**
-- PA: 130/80 mmHg
-- FC: 88 bpm (irregular)
-- Edema ++/4+ em MMII
-- Estase jugular a 45°
-- Ausculta cardíaca: B3 audível, sopro sistólico 2+/6+
-- Crepitações bibasais
-
-**EXAMES:**
-- BNP: 850 pg/ml (elevado)
-- Ecocardiograma: FEVE 35%, dilatação de VE
-- RX tórax: cardiomegalia, congestão pulmonar
-
-**MEDICAÇÕES EM USO:**
-- Enalapril 10mg 2x/dia
-- Carvedilol 6,25mg 2x/dia  
-- Furosemida 40mg/dia
-- Metformina 850mg 2x/dia
-
-**CONDUTA PROPOSTA:**
-- Ajuste das medicações para IC
-- Restrição de sódio (<2g/dia)
-- Controle rigoroso de peso diário
-- Retorno em 15 dias`
-    }
-  ]);
-  
-  const [filtroStatus, setFiltroStatus] = useState("todos");
-  const [buscarTexto, setBuscarTexto] = useState("");
-  const [dataInicio, setDataInicio] = useState("");
-  const [dataFim, setDataFim] = useState("");
-  const [laudoAtivo, setLaudoAtivo] = useState<any>(null);
-  const [modoEdicao, setModoEdicao] = useState<'novo' | 'editar' | null>(null);
-
-  // Estados para o editor de laudo
-  const [editorLaudo, setEditorLaudo] = useState({
-    pacienteId: "",
-    pacienteNome: "",
-    pacienteCpf: "",
-    pacienteIdade: "",
-    cid: "",
-    diagnostico: "",
-    conclusao: "",
-    conteudo: "",
-    imagens: [] as string[],
-    pdfAnexos: [] as string[],
-    incluirData: true,
-    incluirAssinatura: true,
-    status: "Rascunho"
-  });
-  const [assinaturaLaudo, setAssinaturaLaudo] = useState<string | null>(null);
-  const [previewLaudo, setPreviewLaudo] = useState(false);
-  const [abaAtiva, setAbaAtiva] = useState<'editor' | 'imagens' | 'anexos' | 'preview'>('editor');
-  const [laudoVisualizacao, setLaudoVisualizacao] = useState<any>(null);
-  const sigCanvasLaudoRef = useRef<any>(null);
-
-  // Modelos e frases prontas
-  const modelosTexto = {
-    "Exame Normal": "O exame realizado apresentou parâmetros dentro da normalidade, sem alterações significativas detectadas.",
-    "Acompanhamento": "Recomenda-se acompanhamento médico regular para monitoramento da evolução do quadro clínico.",
-    "Alterações Leves": "Foram observadas alterações leves que requerem acompanhamento, sem indicação de intervenção imediata.",
-    "Urgente": "Os achados indicam necessidade de avaliação médica urgente e início de tratamento adequado."
-  };
-
-  const camposDinamicos = [
-    { label: "Nome do Paciente", value: "{NOME_PACIENTE}" },
-    { label: "Idade", value: "{IDADE}" },
-    { label: "CPF", value: "{CPF}" },
-    { label: "Data Atual", value: "{DATA_ATUAL}" },
-    { label: "CID", value: "{CID}" },
-    { label: "Médico", value: "{MEDICO}" }
-  ];
-
   const handleSave = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
     console.log("Laudo salvo!");
@@ -569,6 +203,12 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
     setPacienteSelecionado(null);
   };
 
+  const handleEditarLaudo = (paciente: any) => {
+    setPatientForLaudo(paciente);
+    setIsEditingLaudoForPatient(true);
+    setActiveSection('laudos');
+  };
+
   
   const navigateDate = (direction: 'prev' | 'next') => {
     const newDate = new Date(currentCalendarDate);
@@ -814,13 +454,13 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
     const todayEvents = getTodayEvents();
     
     return (
-      <section className="bg-white shadow-md rounded-lg p-6">
+      <section className="bg-card shadow-md rounded-lg p-6">
         <div className="flex justify-between items-center mb-4">
           <h2 className="text-2xl font-bold">Agenda do Dia</h2>
         </div>
         
         {/* Navegação de Data */}
-        <div className="flex items-center justify-between mb-6 p-4 bg-gray-50 rounded-lg">
+        <div className="flex items-center justify-between mb-6 p-4 bg-muted rounded-lg">
           <div className="flex items-center space-x-4">
             <Button 
               variant="outline"
@@ -830,7 +470,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
             >
               <ChevronLeft className="h-4 w-4" />
             </Button>
-            <h3 className="text-lg font-medium text-gray-900">
+            <h3 className="text-lg font-medium text-foreground">
               {formatDate(currentCalendarDate)}
             </h3>
             <Button 
@@ -850,7 +490,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
               Hoje
             </Button>
           </div>
-          <div className="text-sm text-gray-500">
+          <div className="text-sm text-muted-foreground">
             {todayEvents.length} consulta{todayEvents.length !== 1 ? 's' : ''} agendada{todayEvents.length !== 1 ? 's' : ''}
           </div>
         </div>
@@ -858,8 +498,8 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
         {/* Lista de Pacientes do Dia */}
         <div className="space-y-4">
           {todayEvents.length === 0 ? (
-            <div className="text-center py-8 text-gray-500">
-              <CalendarIcon className="h-12 w-12 mx-auto mb-4 text-gray-300" />
+            <div className="text-center py-8 text-muted-foreground">
+              <CalendarIcon className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
               <p className="text-lg mb-2">Nenhuma consulta agendada para este dia</p>
               <p className="text-sm">Agenda livre para este dia</p>
             </div>
@@ -869,7 +509,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
               return (
                 <div
                   key={appointment.id}
-                  className="border-l-4 p-4 rounded-lg shadow-sm bg-white border-gray-200"
+                  className="border-l-4 p-4 rounded-lg shadow-sm bg-card border-border"
                   style={{ borderLeftColor: getStatusColor(appointment.type) }}
                 >
                   <div className="grid grid-cols-1 md:grid-cols-4 gap-4 items-center">
@@ -880,18 +520,18 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
                       ></div>
                       <div>
                         <div className="font-medium flex items-center">
-                          <User className="h-4 w-4 mr-2 text-gray-500" />
+                          <User className="h-4 w-4 mr-2 text-muted-foreground" />
                           {appointment.title}
                         </div>
                         {paciente && (
-                          <div className="text-sm text-gray-500">
+                          <div className="text-sm text-muted-foreground">
                             CPF: {paciente.cpf} • {paciente.idade} anos
                           </div>
                         )}
                       </div>
                     </div>
                     <div className="flex items-center">
-                      <Clock className="h-4 w-4 mr-2 text-gray-500" />
+                      <Clock className="h-4 w-4 mr-2 text-muted-foreground" />
                       <span className="font-medium">{appointment.time}</span>
                     </div>
                     <div className="flex items-center">
@@ -918,11 +558,12 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
                         >
                           <FolderOpen className="h-4 w-4" />
                         </Button>
-                        <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-1 bg-gray-900 text-white text-xs rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-50">
+                        <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-1 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-xs rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-50">
                           Ver informações do paciente
-                          <div className="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900"></div>
+                          <div className="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900 dark:border-t-gray-100"></div>
                         </div>
                       </div>
+
                     </div>
                   </div>
                 </div>
@@ -935,14 +576,22 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
   };
 
   
-  function PacientesSection({ handleAbrirProntuario, setActiveSection }) {
+  function PacientesSection({
+    handleAbrirProntuario,
+    setActiveSection,
+  }: {
+    handleAbrirProntuario: (paciente: any) => void;
+    setActiveSection: (section: string) => void;
+  }) {
     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>
         
-        {/* Tabela de pacientes */}
+
+
+        {/* Tabela de pacientes padrão */}
         <div>
-          <h3 className="text-lg font-semibold mb-3">Lista de Pacientes</h3>
+          <h3 className="text-lg font-semibold mb-3">Pacientes Recentes</h3>
           <Table>
             <TableHeader>
               <TableRow>
@@ -966,7 +615,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
                         <Button 
                           variant="outline" 
                           size="sm" 
-                          className="border-primary text-primary hover:bg-primary hover:text-white cursor-pointer"
+                          className="border-primary text-primary hover:bg-primary hover:text-white cursor-pointer mr-2"
                           onClick={() => {
                             handleAbrirProntuario(paciente);
                             setActiveSection('prontuario');
@@ -974,11 +623,12 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
                         >
                           <FolderOpen className="h-4 w-4" />
                         </Button>
-                        <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-1 bg-gray-900 text-white text-xs rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-50">
+                        <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-1 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-xs rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-50">
                           Ver informações do paciente
-                          <div className="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900"></div>
+                          <div className="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900 dark:border-t-gray-100"></div>
                         </div>
                       </div>
+
                     </div>
                   </TableCell>
                 </TableRow>
@@ -993,7 +643,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
   
   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 */}
@@ -1011,7 +661,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
                     }
                   }}
                 >
-                  <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>
@@ -1055,15 +705,15 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
         {/* Seletor de Paciente */}
         {!pacienteSelecionado && (
           <div className="space-y-6">
-            <div className="bg-gray-50 border border-gray-200 rounded-lg p-6">
+            <div className="bg-muted border rounded-lg p-6">
               <div className="text-center mb-6">
-                <User className="h-12 w-12 mx-auto mb-4 text-gray-400" />
-                <h3 className="text-lg font-medium text-gray-900 mb-2">Selecionar Paciente</h3>
-                <p className="text-sm text-gray-600">Escolha um paciente para visualizar o prontuário completo</p>
+                <User className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
+                <h3 className="text-lg font-medium text-foreground mb-2">Selecionar Paciente</h3>
+                <p className="text-sm text-muted-foreground">Escolha um paciente para visualizar o prontuário completo</p>
               </div>
               
               <div className="max-w-md mx-auto">
-                <Label htmlFor="seletorPaciente" className="block text-sm font-medium text-gray-700 mb-2">
+                <Label htmlFor="seletorPaciente" className="block text-sm font-medium text-foreground mb-2">
                   Escolha o paciente:
                 </Label>
                 <Select
@@ -1095,31 +745,31 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
             
             {/* Cards de pacientes para seleção rápida */}
             <div>
-              <h3 className="text-lg font-medium text-gray-900 mb-4">Ou selecione rapidamente:</h3>
+              <h3 className="text-lg font-medium text-foreground mb-4">Ou selecione rapidamente:</h3>
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                 {pacientes.map((paciente) => (
                   <div
                     key={paciente.cpf}
                     onClick={() => setPacienteSelecionado(paciente)}
-                    className="border border-gray-200 rounded-lg p-4 hover:shadow-md hover:border-primary transition-all cursor-pointer group"
+                    className="border rounded-lg p-4 hover:shadow-md hover:border-primary transition-all cursor-pointer group"
                   >
                     <div className="flex items-center gap-3">
                       <div className="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center group-hover:bg-primary/20 transition-colors">
                         <User className="h-5 w-5 text-primary" />
                       </div>
                       <div className="flex-1 min-w-0">
-                        <p className="font-medium text-gray-900 truncate">{paciente.nome}</p>
-                        <p className="text-sm text-gray-500">CPF: {paciente.cpf}</p>
-                        <p className="text-sm text-gray-500">{paciente.idade} anos</p>
+                        <p className="font-medium text-foreground truncate">{paciente.nome}</p>
+                        <p className="text-sm text-muted-foreground">CPF: {paciente.cpf}</p>
+                        <p className="text-sm text-muted-foreground">{paciente.idade} anos</p>
                       </div>
                     </div>
                     <div className="mt-3 flex items-center justify-between">
                       <span className={`px-2 py-1 text-xs rounded-full ${
                         paciente.statusLaudo === 'Finalizado' 
-                          ? 'bg-green-100 text-green-800' 
+                          ? 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300' 
                           : paciente.statusLaudo === 'Pendente'
-                          ? 'bg-yellow-100 text-yellow-800'
-                          : 'bg-gray-100 text-gray-800'
+                          ? 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300'
+                          : 'bg-muted text-muted-foreground'
                       }`}>
                         {paciente.statusLaudo}
                       </span>
@@ -1140,7 +790,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
 
         {/* 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 },
@@ -1160,7 +810,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
                     className={`py-2 px-1 border-b-2 font-medium text-sm flex items-center gap-2 transition-colors cursor-pointer ${
                       abaProntuarioAtiva === aba.id
                         ? 'border-primary text-primary'
-                        : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                        : 'border-transparent text-muted-foreground hover:text-foreground hover:border-border'
                     }`}
                   >
                     <Icone className="h-4 w-4" />
@@ -1255,11 +905,11 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
         </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
@@ -1272,7 +922,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
           </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
@@ -1287,7 +937,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
 
         {/* 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
@@ -1302,7 +952,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
 
         {/* 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
@@ -1317,7 +967,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
 
         {/* 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
@@ -1332,7 +982,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
 
         {/* 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
@@ -1347,7 +997,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
 
         {/* 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
@@ -1362,7 +1012,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
 
         {/* 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
@@ -1376,7 +1026,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
 
         {/* 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>
@@ -1395,7 +1045,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
 
       {/* 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
@@ -1408,17 +1058,17 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
                       <p className="font-medium text-sm">
                         Consulta de {new Date(consulta.dataConsulta).toLocaleDateString('pt-BR')}
                       </p>
-                      <p className="text-xs text-gray-500">
+                      <p className="text-xs text-muted-foreground">
                         Registrada em: {consulta.dataCriacao}
                       </p>
                     </div>
                     {consulta.cid10 && (
-                      <span className="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">
+                      <span className="px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 text-xs rounded-full">
                         {consulta.cid10}
                       </span>
                     )}
                   </div>
-                  <div className="text-sm text-gray-700">
+                  <div className="text-sm text-foreground">
                     <p><strong>Anamnese:</strong> {consulta.anamnese.substring(0, 100)}...</p>
                     {consulta.hipotesesDiagnosticas && (
                       <p><strong>Diagnóstico:</strong> {consulta.hipotesesDiagnosticas.substring(0, 80)}...</p>
@@ -1443,9 +1093,9 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
           <div className="flex justify-between items-start mb-3">
             <div>
               <h4 className="font-medium">Consulta Cardiológica</h4>
-              <p className="text-sm text-gray-600">27/09/2025 - 09:00</p>
+              <p className="text-sm text-muted-foreground">27/09/2025 - 09:00</p>
             </div>
-            <span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Finalizada</span>
+            <span className="px-2 py-1 bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 text-xs rounded-full">Finalizada</span>
           </div>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
             <div>
@@ -1467,9 +1117,9 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
           <div className="flex justify-between items-start mb-3">
             <div>
               <h4 className="font-medium">Consulta Dermatológica</h4>
-              <p className="text-sm text-gray-600">15/09/2025 - 14:30</p>
+              <p className="text-sm text-muted-foreground">15/09/2025 - 14:30</p>
             </div>
-            <span className="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">Retorno Agendado</span>
+            <span className="px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 text-xs rounded-full">Retorno Agendado</span>
           </div>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
             <div>
@@ -1511,11 +1161,11 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
           <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>
@@ -1524,11 +1174,11 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
           <h4 className="font-medium mb-2">Alergias e Reações Adversas</h4>
           <div className="space-y-2 text-sm">
             <div className="flex items-center gap-2">
-              <span className="px-2 py-1 bg-red-100 text-red-800 text-xs rounded">Alergia</span>
+              <span className="px-2 py-1 bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300 text-xs rounded">Alergia</span>
               <span>Penicilina - reação cutânea</span>
             </div>
             <div className="flex items-center gap-2">
-              <span className="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded">Intolerância</span>
+              <span className="px-2 py-1 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 text-xs rounded">Intolerância</span>
               <span>Lactose - sintomas gastrintestinais</span>
             </div>
           </div>
@@ -1540,7 +1190,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
   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
@@ -1551,18 +1201,18 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
         <div className="border rounded-lg p-4">
           <div className="flex justify-between items-start mb-3">
             <div>
-              <h4 className="font-medium">Prescrição Atual</h4>
-              <p className="text-sm text-gray-600">Prescrita em 27/09/2025</p>
+              <h4 className="font-medium text-foreground">Prescrição Atual</h4>
+              <p className="text-sm text-muted-foreground">Prescrita em 27/09/2025</p>
             </div>
-            <span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Ativa</span>
+            <span className="px-2 py-1 bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 text-xs rounded-full">Ativa</span>
           </div>
           <div className="space-y-3">
             <div className="border-l-4 border-blue-500 pl-4">
               <div className="flex justify-between items-start">
                 <div>
-                  <p className="font-medium">Losartana 50mg</p>
-                  <p className="text-sm text-gray-600">1 comprimido pela manhã</p>
-                  <p className="text-sm text-gray-500">Duração: 30 dias</p>
+                  <p className="font-medium text-foreground">Losartana 50mg</p>
+                  <p className="text-sm text-muted-foreground">1 comprimido pela manhã</p>
+                  <p className="text-sm text-muted-foreground">Duração: 30 dias</p>
                 </div>
                 <Button variant="outline" size="sm" className="cursor-pointer">
                   <Eye className="h-4 w-4" />
@@ -1572,9 +1222,9 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
             <div className="border-l-4 border-green-500 pl-4">
               <div className="flex justify-between items-start">
                 <div>
-                  <p className="font-medium">Metformina 850mg</p>
-                  <p className="text-sm text-gray-600">1 comprimido após café e jantar</p>
-                  <p className="text-sm text-gray-500">Duração: 60 dias</p>
+                  <p className="font-medium text-foreground">Metformina 850mg</p>
+                  <p className="text-sm text-muted-foreground">1 comprimido após café e jantar</p>
+                  <p className="text-sm text-muted-foreground">Duração: 60 dias</p>
                 </div>
                 <Button variant="outline" size="sm" className="cursor-pointer">
                   <Eye className="h-4 w-4" />
@@ -1587,15 +1237,15 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
         <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" />
@@ -1610,7 +1260,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
   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
@@ -1621,26 +1271,26 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
         <div className="border rounded-lg p-4">
           <div className="flex justify-between items-start mb-3">
             <div>
-              <h4 className="font-medium">Exames Pendentes</h4>
+              <h4 className="font-medium text-foreground">Exames Pendentes</h4>
             </div>
           </div>
           <div className="space-y-3">
-            <div className="flex justify-between items-center p-3 bg-yellow-50 border border-yellow-200 rounded">
+            <div className="flex justify-between items-center p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded">
               <div>
-                <p className="font-medium">Ecocardiograma</p>
-                <p className="text-sm text-gray-600">Solicitado em 25/09/2025</p>
-                <p className="text-sm text-gray-500">Urgência: Normal</p>
+                <p className="font-medium text-foreground">Ecocardiograma</p>
+                <p className="text-sm text-muted-foreground">Solicitado em 25/09/2025</p>
+                <p className="text-sm text-muted-foreground">Urgência: Normal</p>
               </div>
-              <span className="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">Pendente</span>
+              <span className="px-2 py-1 bg-yellow-100 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-100 text-xs rounded-full">Pendente</span>
             </div>
             
-            <div className="flex justify-between items-center p-3 bg-blue-50 border border-blue-200 rounded">
+            <div className="flex justify-between items-center p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 rounded">
               <div>
-                <p className="font-medium">Hemograma Completo</p>
-                <p className="text-sm text-gray-600">Solicitado em 27/09/2025</p>
-                <p className="text-sm text-gray-500">Urgência: Normal</p>
+                <p className="font-medium text-foreground">Hemograma Completo</p>
+                <p className="text-sm text-muted-foreground">Solicitado em 27/09/2025</p>
+                <p className="text-sm text-muted-foreground">Urgência: Normal</p>
               </div>
-              <span className="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">Agendado</span>
+              <span className="px-2 py-1 bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-100 text-xs rounded-full">Agendado</span>
             </div>
           </div>
         </div>
@@ -1648,15 +1298,15 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
         <div className="border rounded-lg p-4">
           <div className="flex justify-between items-start mb-3">
             <div>
-              <h4 className="font-medium">Resultados Disponíveis</h4>
+              <h4 className="font-medium text-foreground">Resultados Disponíveis</h4>
             </div>
           </div>
           <div className="space-y-3">
-            <div className="flex justify-between items-center p-3 bg-green-50 border border-green-200 rounded">
+            <div className="flex justify-between items-center p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-700 rounded">
               <div>
-                <p className="font-medium">Glicemia de Jejum</p>
-                <p className="text-sm text-gray-600">Realizado em 20/09/2025</p>
-                <p className="text-sm font-medium text-green-700">Resultado: 95 mg/dL (Normal)</p>
+                <p className="font-medium text-foreground">Glicemia de Jejum</p>
+                <p className="text-sm text-muted-foreground">Realizado em 20/09/2025</p>
+                <p className="text-sm font-medium text-green-700 dark:text-green-400">Resultado: 95 mg/dL (Normal)</p>
               </div>
               <div className="flex gap-2">
                 <Button variant="outline" size="sm" className="cursor-pointer">
@@ -1676,7 +1326,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
   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
@@ -1685,43 +1335,43 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
       
       <div className="space-y-4">
         <div className="border rounded-lg p-4">
-          <h4 className="font-medium mb-3">Diagnósticos Ativos</h4>
+          <h4 className="font-medium mb-3 text-foreground">Diagnósticos Ativos</h4>
           <div className="space-y-3">
             <div className="border-l-4 border-red-500 pl-4">
               <div className="flex justify-between items-start">
                 <div>
-                  <p className="font-medium">Hipertensão Arterial Sistêmica</p>
-                  <p className="text-sm text-gray-600">CID-10: I10</p>
-                  <p className="text-sm text-gray-500">Diagnosticado em: 15/03/2020</p>
-                  <p className="text-sm mt-1">Status: Controlada com medicação</p>
+                  <p className="font-medium text-foreground">Hipertensão Arterial Sistêmica</p>
+                  <p className="text-sm text-muted-foreground">CID-10: I10</p>
+                  <p className="text-sm text-muted-foreground">Diagnosticado em: 15/03/2020</p>
+                  <p className="text-sm mt-1 text-foreground">Status: Controlada com medicação</p>
                 </div>
-                <span className="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">Ativo</span>
+                <span className="px-2 py-1 bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300 text-xs rounded-full">Ativo</span>
               </div>
             </div>
             
             <div className="border-l-4 border-orange-500 pl-4">
               <div className="flex justify-between items-start">
                 <div>
-                  <p className="font-medium">Diabetes Mellitus Tipo 2</p>
-                  <p className="text-sm text-gray-600">CID-10: E11</p>
-                  <p className="text-sm text-gray-500">Diagnosticado em: 10/08/2018</p>
-                  <p className="text-sm mt-1">Status: Controlada com dieta e medicação</p>
+                  <p className="font-medium text-foreground">Diabetes Mellitus Tipo 2</p>
+                  <p className="text-sm text-muted-foreground">CID-10: E11</p>
+                  <p className="text-sm text-muted-foreground">Diagnosticado em: 10/08/2018</p>
+                  <p className="text-sm mt-1 text-foreground">Status: Controlada com dieta e medicação</p>
                 </div>
-                <span className="px-2 py-1 bg-orange-100 text-orange-800 text-xs rounded-full">Ativo</span>
+                <span className="px-2 py-1 bg-orange-100 dark:bg-orange-900/30 text-orange-800 dark:text-orange-300 text-xs rounded-full">Ativo</span>
               </div>
             </div>
           </div>
         </div>
 
         <div className="border rounded-lg p-4">
-          <h4 className="font-medium mb-3">Histórico de Diagnósticos</h4>
+          <h4 className="font-medium mb-3 text-foreground">Histórico de Diagnósticos</h4>
           <div className="space-y-2 text-sm">
             <div className="flex justify-between items-center py-2 border-b">
               <div>
-                <p className="font-medium">Gastrite Aguda</p>
-                <p className="text-gray-600">CID-10: K29.0 - Resolvido em 2023</p>
+                <p className="font-medium text-foreground">Gastrite Aguda</p>
+                <p className="text-muted-foreground">CID-10: K29.0 - Resolvido em 2023</p>
               </div>
-              <span className="px-2 py-1 bg-gray-100 text-gray-800 text-xs rounded-full">Resolvido</span>
+              <span className="px-2 py-1 bg-muted text-muted-foreground text-xs rounded-full">Resolvido</span>
             </div>
           </div>
         </div>
@@ -1732,7 +1382,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
   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
@@ -1743,26 +1393,26 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
         <div className="border rounded-lg p-4">
           <div className="flex justify-between items-start mb-3">
             <div>
-              <h4 className="font-medium">Evolução Recente</h4>
-              <p className="text-sm text-gray-600">27/09/2025 - 09:15</p>
+              <h4 className="font-medium text-foreground">Evolução Recente</h4>
+              <p className="text-sm text-muted-foreground">27/09/2025 - 09:15</p>
             </div>
-            <span className="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">Melhora</span>
+            <span className="px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 text-xs rounded-full">Melhora</span>
           </div>
           <div className="space-y-2">
-            <p className="text-sm"><strong>Subjetivo:</strong> Paciente relatou diminuição significativa da dor no peito e melhora da capacidade respiratória.</p>
-            <p className="text-sm"><strong>Objetivo:</strong> PA: 130/80 mmHg, FC: 72 bpm, ausculta cardíaca sem alterações.</p>
-            <p className="text-sm"><strong>Avaliação:</strong> Resposta positiva ao tratamento iniciado, pressão arterial em níveis aceitáveis.</p>
-            <p className="text-sm"><strong>Plano:</strong> Manter medicação atual, retorno em 30 dias.</p>
+            <p className="text-sm text-foreground"><strong>Subjetivo:</strong> Paciente relatou diminuição significativa da dor no peito e melhora da capacidade respiratória.</p>
+            <p className="text-sm text-foreground"><strong>Objetivo:</strong> PA: 130/80 mmHg, FC: 72 bpm, ausculta cardíaca sem alterações.</p>
+            <p className="text-sm text-foreground"><strong>Avaliação:</strong> Resposta positiva ao tratamento iniciado, pressão arterial em níveis aceitáveis.</p>
+            <p className="text-sm text-foreground"><strong>Plano:</strong> Manter medicação atual, retorno em 30 dias.</p>
           </div>
         </div>
 
         <div className="border rounded-lg p-4">
           <div className="flex justify-between items-start mb-3">
             <div>
-              <h4 className="font-medium">Evolução Anterior</h4>
-              <p className="text-sm text-gray-600">15/09/2025 - 14:45</p>
+              <h4 className="font-medium text-foreground">Evolução Anterior</h4>
+              <p className="text-sm text-muted-foreground">15/09/2025 - 14:45</p>
             </div>
-            <span className="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">Estável</span>
+            <span className="px-2 py-1 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 text-xs rounded-full">Estável</span>
           </div>
           <div className="space-y-2">
             <p className="text-sm"><strong>Subjetivo:</strong> Paciente apresentou episódios esporádicos de dor torácica leve.</p>
@@ -1777,7 +1427,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
   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
@@ -1795,7 +1445,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
                 </div>
                 <div>
                   <p className="font-medium text-sm">Radiografia de Tórax</p>
-                  <p className="text-xs text-gray-600">20/09/2025</p>
+                  <p className="text-xs text-muted-foreground">20/09/2025</p>
                 </div>
               </div>
               <div className="flex gap-2">
@@ -1817,7 +1467,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
                 </div>
                 <div>
                   <p className="font-medium text-sm">ECG</p>
-                  <p className="text-xs text-gray-600">15/09/2025</p>
+                  <p className="text-xs text-muted-foreground">15/09/2025</p>
                 </div>
               </div>
               <div className="flex gap-2">
@@ -1837,14 +1487,14 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
         <div className="border rounded-lg p-4">
           <h4 className="font-medium mb-3">Laudos e Documentos</h4>
           <div className="space-y-3">
-            <div className="flex items-center justify-between p-3 border rounded-lg hover:bg-gray-50">
+            <div className="flex items-center justify-between p-3 border rounded-lg hover:bg-muted/50">
               <div className="flex items-center gap-3">
                 <div className="w-8 h-8 bg-purple-100 rounded flex items-center justify-center">
                   <FileText className="h-4 w-4 text-purple-600" />
                 </div>
                 <div>
                   <p className="font-medium text-sm">Laudo de Ecocardiograma</p>
-                  <p className="text-xs text-gray-600">10/08/2025 - Dr. Carlos Andrade</p>
+                  <p className="text-xs text-muted-foreground">10/08/2025 - Dr. Carlos Andrade</p>
                 </div>
               </div>
               <div className="flex gap-2">
@@ -1857,7 +1507,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
               </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" />
@@ -1882,721 +1532,1091 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
     </div>
   );
 
-  const renderLaudosSection = () => {
-    if (modoEdicao) {
-      return renderEditorLaudo();
-    }
-    
+  
+  const renderLaudosSection = () => (
+    <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">
-        {/* Cabeçalho */}
-        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
-          <div>
-            <h2 className="text-2xl font-bold text-gray-900">Gerenciamento de Laudos</h2>
-            <p className="text-gray-600 text-sm mt-1">
-              Nesta seção você pode gerenciar todos os laudos gerados através da integração.
-            </p>
-          </div>
-          <Button 
-            onClick={() => {
-              // Limpar dados ao criar novo laudo
-              setEditorLaudo({
-                pacienteId: "",
-                pacienteNome: "",
-                pacienteCpf: "",
-                pacienteIdade: "",
-                cid: "",
-                diagnostico: "",
-                conclusao: "",
-                conteudo: "",
-                imagens: [] as string[],
-                pdfAnexos: [] as string[],
-                incluirData: true,
-                incluirAssinatura: true,
-                status: "Rascunho"
-              });
-              setLaudoAtivo(null);
-              setModoEdicao('novo');
-            }}
-            className="flex items-center gap-2 cursor-pointer"
-          >
-            <Plus className="h-4 w-4" />
-            Adicionar
-          </Button>
-        </div>
-
-        {/* Filtros e Busca */}
-        <div className="bg-white rounded-lg shadow-sm border p-4 space-y-4">
-          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-            <div className="space-y-2">
-              <Label htmlFor="buscar">Buscar paciente/código</Label>
-              <Input
-                id="buscar"
-                placeholder="Digite para buscar..."
-                value={buscarTexto}
-                onChange={(e) => setBuscarTexto(e.target.value)}
-                className="w-full"
-              />
-            </div>
-            
-            <div className="space-y-2">
-              <Label htmlFor="dataInicio">Data Início</Label>
-              <Input
-                id="dataInicio"
-                type="date"
-                value={dataInicio}
-                onChange={(e) => setDataInicio(e.target.value)}
-              />
-            </div>
-            
-            <div className="space-y-2">
-              <Label htmlFor="dataFim">Data Fim</Label>
-              <Input
-                id="dataFim"
-                type="date"
-                value={dataFim}
-                onChange={(e) => setDataFim(e.target.value)}
-              />
-            </div>
-            
-            <div className="space-y-2">
-              <Label>Status</Label>
-              <Select value={filtroStatus} onValueChange={setFiltroStatus}>
-                <SelectTrigger className="cursor-pointer">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="todos">Todos</SelectItem>
-                  <SelectItem value="Rascunho">Rascunho</SelectItem>
-                  <SelectItem value="Pendente">Pendente</SelectItem>
-                  <SelectItem value="Entregue">Entregue</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
-          
-          <div className="flex items-center gap-2">
-            <Button variant="outline" size="sm" className="cursor-pointer">
-              Hoje
-            </Button>
-            <Button variant="outline" size="sm" className="cursor-pointer">
-              Semana
-            </Button>
-            <Button variant="outline" size="sm" className="cursor-pointer">
-              Mês
-            </Button>
-            <Button variant="outline" size="sm" className="cursor-pointer">
-              <Download className="h-4 w-4 mr-1" />
-              Filtrar
-            </Button>
-          </div>
-        </div>
-
-        {/* Tabela de Laudos */}
-        <div className="bg-white rounded-lg shadow-sm border overflow-hidden">
-          <Table>
-            <TableHeader>
-              <TableRow className="bg-gray-50">
-                <TableHead className="font-semibold">Pedido</TableHead>
-                <TableHead className="font-semibold">Data</TableHead>
-                <TableHead className="font-semibold">Preço</TableHead>
-                <TableHead className="font-semibold">Paciente</TableHead>
-                <TableHead className="font-semibold">Executante/Solicitante</TableHead>
-                <TableHead className="font-semibold">Exame/Classificação</TableHead>
-                <TableHead className="font-semibold">Ação</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {laudosData.map((laudo) => (
-                <TableRow key={laudo.id} className="hover:bg-gray-50">
-                  <TableCell className="font-medium">{laudo.id}</TableCell>
-                  <TableCell>{laudo.data}</TableCell>
-                  <TableCell>{laudo.preco}</TableCell>
-                  <TableCell>
-                    <div className="flex items-center gap-2">
-                      <div 
-                        className={`w-2 h-2 rounded-full ${
-                          laudo.status === 'Pendente' ? 'bg-red-500' : 
-                          laudo.status === 'Rascunho' ? 'bg-yellow-500' : 'bg-green-500'
-                        }`}
-                      />
-                      <span className="truncate max-w-[200px]">{laudo.recipient}</span>
-                    </div>
-                  </TableCell>
-                  <TableCell className="truncate max-w-[200px]">{laudo.execSolicitante}</TableCell>
-                  <TableCell className="truncate max-w-[200px]">{laudo.exameTipo}</TableCell>
-                  <TableCell>
-                    <div className="flex items-center gap-1">
-                      <TooltipProvider>
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <Button 
-                              variant="ghost" 
-                              size="sm"
-                              onClick={() => {
-                                setLaudoAtivo(laudo);
-                                // Buscar dados do paciente pelo nome no laudo
-                                const pacienteEncontrado = pacientes.find(p => p.nome === laudo.recipient);
-                                if (pacienteEncontrado) {
-                                  // Carregar TODOS os dados do laudo para edição
-                                  setEditorLaudo({
-                                    pacienteId: pacienteEncontrado.cpf,
-                                    pacienteNome: pacienteEncontrado.nome,
-                                    pacienteCpf: pacienteEncontrado.cpf,
-                                    pacienteIdade: pacienteEncontrado.idade.toString(),
-                                    cid: laudo.cid || "",
-                                    diagnostico: laudo.diagnostico || "",
-                                    conclusao: laudo.conclusao || "",
-                                    conteudo: laudo.conteudo || "",
-                                    imagens: [],
-                                    pdfAnexos: [],
-                                    incluirData: true,
-                                    incluirAssinatura: true,
-                                    status: laudo.status || "Rascunho"
-                                  });
-                                }
-                                setModoEdicao('editar');
-                              }}
-                              className="cursor-pointer"
-                            >
-                              <Edit className="h-4 w-4" />
-                            </Button>
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            <p>Editar laudo</p>
-                          </TooltipContent>
-                        </Tooltip>
-                      </TooltipProvider>
-                      
-                      <TooltipProvider>
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <Button 
-                              variant="ghost" 
-                              size="sm" 
-                              className="cursor-pointer"
-                              onClick={() => setLaudoVisualizacao(laudo)}
-                            >
-                              <Eye className="h-4 w-4" />
-                            </Button>
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            <p>Visualizar laudo</p>
-                          </TooltipContent>
-                        </Tooltip>
-                      </TooltipProvider>
-                      
-                      <TooltipProvider>
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <Button variant="ghost" size="sm" className="cursor-pointer">
-                              <Download className="h-4 w-4" />
-                            </Button>
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            <p>Download PDF</p>
-                          </TooltipContent>
-                        </Tooltip>
-                      </TooltipProvider>
-                    </div>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </div>
-      </div>
-    );
-  };
-
-  const renderEditorLaudo = () => {
-    return (
-      <div className="space-y-6">
-        {/* Cabeçalho do Editor */}
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-4">
-            <Button 
-              variant="ghost" 
-              onClick={() => setModoEdicao(null)}
-              className="cursor-pointer"
-            >
-              <ChevronLeft className="h-4 w-4 mr-1" />
-              Voltar
-            </Button>
+        {/* Header */}
+        <div className="bg-card rounded-lg p-6 shadow-md">
+          <div className="flex items-center justify-between">
             <div>
-              <h2 className="text-2xl font-bold">
-                {modoEdicao === 'novo' ? 'Novo Laudo' : 'Editar Laudo'}
-              </h2>
-              <p className="text-gray-600 text-sm">
-                Este editor permite escrever relatórios de forma livre, com formatação de texto rica.
-              </p>
+              <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>
-          </div>
-          
-          <div className="flex items-center gap-2">
             <Button 
-              variant="outline" 
-              onClick={() => setModoEdicao(null)}
-              className="cursor-pointer"
+              onClick={() => setIsCreatingNew(true)}
+              className="flex items-center gap-2"
             >
-              Cancelar
-            </Button>
-            <Button 
-              variant="outline"
-              onClick={() => {
-                setEditorLaudo(prev => ({ ...prev, status: "Rascunho" }));
-                alert("Laudo salvo como rascunho!");
-              }}
-              className="cursor-pointer"
-            >
-              Salvar Rascunho
-            </Button>
-            <Button 
-              onClick={() => {
-                setEditorLaudo(prev => ({ ...prev, status: "Entregue" }));
-                alert("Laudo liberado com sucesso!");
-                setModoEdicao(null);
-              }}
-              className="cursor-pointer"
-            >
-              Liberar Laudo
+              <Plus className="w-4 h-4" />
+              Novo Laudo
             </Button>
           </div>
         </div>
 
-        {/* Tabs do Editor */}
-        <div className="bg-white rounded-lg shadow-sm border">
-          <div className="border-b">
-            <nav className="flex space-x-8 px-6">
-              {[
-                { id: 'editor', nome: 'Editor', icone: FileText },
-                { id: 'imagens', nome: 'Imagens', icone: Upload },
-                { id: 'anexos', nome: 'Anexos PDF', icone: FileText },
-                { id: 'preview', nome: 'Pré-visualização', icone: Eye }
-              ].map((aba) => {
-                const Icone = aba.icone;
-                return (
-                  <button
-                    key={aba.id}
-                    onClick={() => setAbaAtiva(aba.id as any)}
-                    className={`py-4 px-1 border-b-2 font-medium text-sm flex items-center gap-2 transition-colors cursor-pointer ${
-                      abaAtiva === aba.id
-                        ? 'border-primary text-primary'
-                        : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
-                    }`}
-                  >
-                    <Icone className="h-4 w-4" />
-                    {aba.nome}
-                  </button>
-                );
-              })}
-            </nav>
+        {/* 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>
 
-          <div className="p-6">
-            {abaAtiva === 'editor' && renderAbaEditor()}
-            {abaAtiva === 'imagens' && renderAbaImagens()}
-            {abaAtiva === 'anexos' && renderAbaAnexos()}
-            {abaAtiva === 'preview' && renderAbaPreview()}
-          </div>
-        </div>
-      </div>
-    );
-  };
-
-  const renderAbaEditor = () => (
-    <div className="space-y-6">
-      {/* Seleção de Paciente */}
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div className="space-y-2">
-          <Label htmlFor="paciente">Paciente *</Label>
-          {modoEdicao === 'editar' ? (
-            // Modo edição: mostrar dados fixos do paciente
-            <div className="flex items-center gap-2 p-3 border rounded-md bg-gray-50">
-              <User className="h-4 w-4 text-gray-500" />
-              <div>
-                <div className="font-medium">{editorLaudo.pacienteNome || laudoAtivo?.recipient}</div>
-                <div className="text-sm text-gray-500">{editorLaudo.pacienteCpf}</div>
+          {/* 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>
-          ) : (
-            // Modo novo: mostrar select de pacientes
-            <Select 
-              value={editorLaudo.pacienteId}
-              onValueChange={(value) => {
-                const pacienteSelecionado = pacientes.find(p => p.cpf === value);
-                if (pacienteSelecionado) {
-                  setEditorLaudo(prev => ({
-                    ...prev,
-                    pacienteId: value,
-                    pacienteNome: pacienteSelecionado.nome,
-                    pacienteCpf: pacienteSelecionado.cpf,
-                    pacienteIdade: pacienteSelecionado.idade.toString()
-                  }));
-                }
-              }}
-            >
-              <SelectTrigger className="cursor-pointer">
-                <SelectValue placeholder="Selecione o paciente" />
-              </SelectTrigger>
-              <SelectContent>
-                {pacientes.map((paciente) => (
-                  <SelectItem key={paciente.cpf} value={paciente.cpf}>
-                    {paciente.nome} - {paciente.cpf}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          )}
-        </div>
-        
-        <div className="space-y-2">
-          <Label htmlFor="cid">CID *</Label>
-          <Input
-            id="cid"
-            placeholder="Ex: I10, E11, etc."
-            value={editorLaudo.cid}
-            onChange={(e) => setEditorLaudo(prev => ({ ...prev, cid: e.target.value }))}
-          />
-        </div>
-      </div>
-
-      {/* Campos Principais do Laudo */}
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div className="space-y-2">
-          <Label htmlFor="diagnostico">Diagnóstico *</Label>
-          <Textarea
-            id="diagnostico"
-            placeholder="Insira o diagnóstico..."
-            value={editorLaudo.diagnostico}
-            onChange={(e) => setEditorLaudo(prev => ({ ...prev, diagnostico: e.target.value }))}
-            rows={4}
-            className="resize-none"
-          />
-        </div>
-        
-        <div className="space-y-2">
-          <Label htmlFor="conclusao">Conclusão *</Label>
-          <Textarea
-            id="conclusao"
-            placeholder="Insira a conclusão..."
-            value={editorLaudo.conclusao}
-            onChange={(e) => setEditorLaudo(prev => ({ ...prev, conclusao: e.target.value }))}
-            rows={4}
-            className="resize-none"
-          />
-        </div>
-      </div>
-
-      {/* Modelos e Frases */}
-      <div className="space-y-3">
-        <h4 className="font-semibold text-sm">Modelos e Frases</h4>
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
-          {Object.entries(modelosTexto).map(([nome, texto]) => (
-            <Button
-              key={nome}
-              variant="outline"
-              size="sm"
-              onClick={() => {
-                setEditorLaudo(prev => ({
-                  ...prev,
-                  conteudo: prev.conteudo + (prev.conteudo ? '\n\n' : '') + texto
-                }));
-              }}
-              className="text-left justify-start cursor-pointer"
-            >
-              {nome}
-            </Button>
-          ))}
-        </div>
-      </div>
-
-      {/* Editor de Texto Rico */}
-      <div className="space-y-2">
-        <Label>Conteúdo do Laudo *</Label>
-        <QuillEditor
-          value={editorLaudo.conteudo}
-          onChange={(content: string) => setEditorLaudo(prev => ({ ...prev, conteudo: content }))}
-        />
-      </div>
-
-
-
-      {/* Assinatura Digital */}
-      <div className="space-y-4">
-        <h4 className="font-semibold">Assinatura Digital</h4>
-        <div className="border rounded-lg p-4 bg-gray-50">
-          <SignaturePad
-            canvasRef={sigCanvasLaudoRef}
-            onEnd={() => {
-              if (!sigCanvasLaudoRef.current?.isEmpty()) {
-                setAssinaturaLaudo(sigCanvasLaudoRef.current?.toDataURL());
-              }
-            }}
-          />
-          <div className="flex gap-2 mt-2">
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              onClick={() => {
-                sigCanvasLaudoRef.current?.clear();
-                setAssinaturaLaudo(null);
-              }}
-              className="cursor-pointer"
-            >
-              Limpar
-            </Button>
-          </div>
-        </div>
-      </div>
-
-      {/* Opções Finais */}
-      <div className="space-y-4">
-        <h4 className="font-semibold">Opções do Laudo</h4>
-        <div className="space-y-3">
-          <div className="flex items-center space-x-2">
-            <input
-              type="checkbox"
-              id="incluirData"
-              checked={editorLaudo.incluirData}
-              onChange={(e) => setEditorLaudo(prev => ({ ...prev, incluirData: e.target.checked }))}
-            />
-            <Label htmlFor="incluirData">Incluir data no laudo</Label>
-          </div>
-          
-          <div className="flex items-center space-x-2">
-            <input
-              type="checkbox"
-              id="incluirAssinatura"
-              checked={editorLaudo.incluirAssinatura}
-              onChange={(e) => setEditorLaudo(prev => ({ ...prev, incluirAssinatura: e.target.checked }))}
-            />
-            <Label htmlFor="incluirAssinatura">Incluir assinatura no laudo</Label>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-
-  const renderAbaImagens = () => (
-    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <h3 className="text-lg font-semibold">Imagens do Laudo</h3>
-        <Button className="cursor-pointer">
-          <Upload className="h-4 w-4 mr-2" />
-          Upload Imagem
-        </Button>
-      </div>
-      
-      <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
-        <Upload className="h-12 w-12 mx-auto text-gray-400 mb-4" />
-        <p className="text-gray-600 mb-2">Arraste imagens aqui ou clique para selecionar</p>
-        <p className="text-sm text-gray-500">Formatos aceitos: JPG, PNG, DICOM (máx. 10MB por arquivo)</p>
-        <input
-          type="file"
-          multiple
-          accept="image/*"
-          className="hidden"
-          onChange={(e) => {
-            // Lógica para upload de imagens
-            console.log("Imagens selecionadas:", e.target.files);
-          }}
-        />
-      </div>
-      
-      {editorLaudo.imagens.length > 0 && (
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          {editorLaudo.imagens.map((img, index) => (
-            <div key={index} className="relative border rounded-lg p-2">
-              <img src={img} alt={`Imagem ${index + 1}`} className="w-full h-24 object-cover rounded" />
-              <Button
-                variant="destructive"
-                size="sm"
-                className="absolute -top-2 -right-2 h-8 w-8 cursor-pointer"
-                onClick={() => {
-                  setEditorLaudo(prev => ({
-                    ...prev,
-                    imagens: prev.imagens.filter((_, i) => i !== index)
-                  }));
-                }}
-              >
-                <X className="h-4 w-4" />
-              </Button>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-
-  const renderAbaAnexos = () => (
-    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <h3 className="text-lg font-semibold">Anexos PDF</h3>
-        <Button className="cursor-pointer">
-          <Upload className="h-4 w-4 mr-2" />
-          Importar PDF
-        </Button>
-      </div>
-      
-      <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
-        <FileText className="h-12 w-12 mx-auto text-gray-400 mb-4" />
-        <p className="text-gray-600 mb-2">Arraste PDFs aqui ou clique para selecionar</p>
-        <p className="text-sm text-gray-500">Anexar resultados de exames externos (máx. 25MB por arquivo)</p>
-      </div>
-      
-      {editorLaudo.pdfAnexos.length > 0 && (
-        <div className="space-y-3">
-          {editorLaudo.pdfAnexos.map((pdf, index) => (
-            <div key={index} className="flex items-center justify-between p-3 border rounded-lg">
-              <div className="flex items-center gap-3">
-                <FileText className="h-8 w-8 text-red-500" />
-                <div>
-                  <p className="font-medium">Documento_{index + 1}.pdf</p>
-                  <p className="text-sm text-gray-500">2.4 MB</p>
+              
+              <div 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="cursor-pointer">
-                  <Eye className="h-4 w-4" />
-                </Button>
-                <Button 
-                  variant="destructive" 
-                  size="sm"
-                  onClick={() => {
-                    setEditorLaudo(prev => ({
-                      ...prev,
-                      pdfAnexos: prev.pdfAnexos.filter((_, i) => i !== index)
-                    }));
+                <Button variant="outline" size="sm">Hoje</Button>
+                <Button variant="outline" size="sm">Semana</Button>
+                <Button variant="default" size="sm">Mês</Button>
+              </div>
+
+              <Button variant="outline" size="sm">
+                <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.207A1 1 0 013 6.5V4z" />
+                </svg>
+                Filtros
+              </Button>
+
+              <Button variant="outline" size="sm">
+                <Search className="w-4 h-4 mr-1" />
+                Pesquisar
+              </Button>
+
+              <Button variant="default" size="sm">
+                <Download className="w-4 h-4 mr-1" />
+                Exportar
+              </Button>
+            </div>
+          </div>
+
+          {/* Tabela */}
+          <div className="overflow-x-auto">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Pedido</TableHead>
+                  <TableHead>Data</TableHead>
+                  <TableHead>Prazo</TableHead>
+                  <TableHead>Paciente</TableHead>
+                  <TableHead>Executante/Solicitante</TableHead>
+                  <TableHead>Exame/Classificação</TableHead>
+                  <TableHead>Ação</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {laudos.map((laudo) => (
+                  <TableRow key={laudo.id}>
+                    <TableCell>
+                      <div className="flex items-center gap-2">
+                        {laudo.urgente && (
+                          <div className="w-2 h-2 rounded-full bg-red-500"></div>
+                        )}
+                        <span className="font-mono text-sm">{laudo.id}</span>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <div className="text-sm">
+                        <div>{laudo.data}</div>
+                        <div className="text-xs text-muted-foreground">11:48</div>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <div className="text-sm">
+                        <div>{laudo.prazo}</div>
+                        <div className="text-xs text-muted-foreground">11:48</div>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <div className="text-sm">
+                        <div className="flex items-center gap-1">
+                          <User className="w-3 h-3" />
+                          <span className="font-mono text-xs">{laudo.paciente.id}</span>
+                        </div>
+                        <div className="font-medium">{laudo.paciente.nome}</div>
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-sm">{laudo.executante}</TableCell>
+                    <TableCell className="text-sm">{laudo.exame || "-"}</TableCell>
+                    <TableCell>
+                      <div className="flex items-center gap-2">
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => {
+                            setLaudoSelecionado(laudo);
+                            setIsViewing(true);
+                          }}
+                          className="flex items-center gap-1"
+                        >
+                          <Eye className="w-4 h-4" />
+                          Ver Laudo
+                        </Button>
+                        <Button
+                          variant="default"
+                          size="sm"
+                          onClick={() => {
+                            setPatientForLaudo(laudo);
+                            setIsEditingLaudoForPatient(true);
+                          }}
+                          className="flex items-center gap-1 bg-green-600 hover:bg-green-700 text-white"
+                          title="Editar laudo para este paciente"
+                        >
+                          <Edit className="w-4 h-4" />
+                          Editar Laudo
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </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>') 
                   }}
-                  className="cursor-pointer"
-                >
-                  <Trash2 className="h-4 w-4" />
-                </Button>
+                />
+              </div>
+
+              {/* Diagnóstico e Conclusão */}
+              {laudo.diagnostico && (
+                <div className="mb-4 p-3 bg-blue-50 dark:bg-blue-950/20 rounded">
+                  <h4 className="font-semibold text-blue-800 dark:text-blue-200 mb-1">Diagnóstico:</h4>
+                  <p className="text-sm">{laudo.diagnostico}</p>
+                </div>
+              )}
+
+              {laudo.conclusao && (
+                <div className="mb-6 p-3 bg-green-50 dark:bg-green-950/20 rounded">
+                  <h4 className="font-semibold text-green-800 dark:text-green-200 mb-1">Conclusão:</h4>
+                  <p className="text-sm">{laudo.conclusao}</p>
+                </div>
+              )}
+
+              {/* Assinatura */}
+              <div className="mt-8 text-center border-t pt-4">
+                <div className="h-16 mb-2"></div>
+                <p className="text-sm font-semibold">Dr. Carlos Andrade</p>
+                <p className="text-xs text-muted-foreground">CRM 000000 - {laudo.especialidade}</p>
+                <p className="text-xs text-muted-foreground mt-1">Data: {laudo.data}</p>
               </div>
             </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
+          </div>
 
-  const renderAbaPreview = () => {
-    const pacienteSelecionado = pacientes.find(p => p.cpf === editorLaudo.pacienteId);
-    
-    return (
-      <div className="space-y-6">
-        <div className="flex items-center justify-between">
-          <h3 className="text-lg font-semibold">Pré-visualização do Laudo</h3>
-          <Button className="cursor-pointer">
-            <Download className="h-4 w-4 mr-2" />
-            Gerar PDF
-          </Button>
+          {/* 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 className="border rounded-lg p-8 bg-white shadow-sm max-w-4xl mx-auto">
-          {/* Cabeçalho do Laudo */}
-          <div className="text-center mb-8">
-            <h1 className="text-2xl font-bold mb-2">LAUDO MÉDICO</h1>
-            {editorLaudo.incluirData && (
-              <p className="text-gray-600">Data: {new Date().toLocaleDateString('pt-BR')}</p>
+      </div>
+    );
+  }
+
+  // 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 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>
-          
-          {/* Dados do Paciente */}
-          {pacienteSelecionado && (
-            <div className="grid grid-cols-2 gap-4 mb-6 p-4 bg-gray-50 rounded">
-              <div>
-                <strong>Paciente:</strong> {pacienteSelecionado.nome}
-              </div>
-              <div>
-                <strong>CPF:</strong> {pacienteSelecionado.cpf}
-              </div>
-              <div>
-                <strong>Idade:</strong> {pacienteSelecionado.idade} anos
-              </div>
-              {editorLaudo.cid && (
-                <div>
-                  <strong>CID:</strong> {editorLaudo.cid}
+
+          {/* Tabs */}
+          <div className="flex border-b border-border">
+            {isNewLaudo && (
+              <button
+                onClick={() => setActiveTab("info")}
+                className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+                  activeTab === "info"
+                    ? "border-blue-500 text-blue-600"
+                    : "border-transparent text-muted-foreground hover:text-foreground"
+                }`}
+              >
+                <User className="w-4 h-4 inline mr-1" />
+                Informações
+              </button>
+            )}
+            <button
+              onClick={() => setActiveTab("editor")}
+              className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+                activeTab === "editor"
+                  ? "border-blue-500 text-blue-600"
+                  : "border-transparent text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              <FileText className="w-4 h-4 inline mr-1" />
+              Editor
+            </button>
+            <button
+              onClick={() => setActiveTab("imagens")}
+              className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+                activeTab === "imagens"
+                  ? "border-blue-500 text-blue-600"
+                  : "border-transparent text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              <Upload className="w-4 h-4 inline mr-1" />
+              Imagens ({imagens.length})
+            </button>
+            <button
+              onClick={() => setActiveTab("campos")}
+              className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+                activeTab === "campos"
+                  ? "border-blue-500 text-blue-600"
+                  : "border-transparent text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              <Settings className="w-4 h-4 inline mr-1" />
+              Campos
+            </button>
+            <button
+              onClick={() => setShowPreview(!showPreview)}
+              className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+                showPreview
+                  ? "border-green-500 text-green-600"
+                  : "border-transparent text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              <Eye className="w-4 h-4 inline mr-1" />
+              {showPreview ? "Ocultar" : "Pré-visualização"}
+            </button>
+          </div>
+
+          {/* Content */}
+          <div className="flex-1 overflow-hidden flex">
+            {/* Left Panel */}
+            <div className="flex-1 flex flex-col">
+              {activeTab === "info" && isNewLaudo && (
+                <div className="flex-1 p-4 space-y-4">
+                  {!pacienteSelecionado ? (
+                    <div className="flex items-center justify-center h-full">
+                      <div className="text-center">
+                        <User className="w-12 h-12 mx-auto text-muted-foreground mb-4" />
+                        <p className="text-muted-foreground">Selecione um paciente primeiro</p>
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="space-y-6">
+                      <div>
+                        <h3 className="text-lg font-semibold mb-4">Informações do Exame</h3>
+                        
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                          <div>
+                            <Label htmlFor="especialidade">Especialidade *</Label>
+                            <Select onValueChange={(value) => setCampos(prev => ({ ...prev, especialidade: value }))}>
+                              <SelectTrigger>
+                                <SelectValue placeholder="Selecione a especialidade" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                <SelectItem value="Cardiologia">Cardiologia</SelectItem>
+                                <SelectItem value="Dermatologia">Dermatologia</SelectItem>
+                              </SelectContent>
+                            </Select>
+                          </div>
+
+                          <div>
+                            <Label htmlFor="tipo-exame">Tipo de Exame *</Label>
+                            <Input
+                              id="tipo-exame"
+                              value={campos.exame}
+                              onChange={(e) => setCampos(prev => ({ ...prev, exame: e.target.value }))}
+                              placeholder="Ex: Ecocardiograma, Dermatoscopia, etc."
+                            />
+                          </div>
+                        </div>
+                      </div>
+
+                      <div>
+                        <h3 className="text-lg font-semibold mb-4">Dados do Paciente</h3>
+                        <div className="bg-muted rounded-lg p-4">
+                          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
+                            <div>
+                              <span className="font-medium">Nome:</span> {pacienteSelecionado.nome}
+                            </div>
+                            <div>
+                              <span className="font-medium">ID:</span> {pacienteSelecionado.id}
+                            </div>
+                            <div>
+                              <span className="font-medium">CPF:</span> {pacienteSelecionado.cpf}
+                            </div>
+                            <div>
+                              <span className="font-medium">Idade:</span> {pacienteSelecionado.idade} anos
+                            </div>
+                            <div>
+                              <span className="font-medium">Sexo:</span> {pacienteSelecionado.sexo}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className="flex justify-end">
+                        <Button 
+                          onClick={() => setActiveTab("editor")}
+                          disabled={!campos.especialidade || !campos.exame}
+                        >
+                          Continuar para Editor
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
+
+              {activeTab === "editor" && (
+                <div className="flex-1 flex flex-col">
+                  {/* Toolbar */}
+                  <div className="p-3 border-b border-border">
+                    <div className="flex flex-wrap gap-2">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => formatText("bold")}
+                        title="Negrito"
+                      >
+                        <strong>B</strong>
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => formatText("italic")}
+                        title="Itálico"
+                      >
+                        <em>I</em>
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => formatText("underline")}
+                        title="Sublinhado"
+                      >
+                        <u>U</u>
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => formatText("list")}
+                        title="Lista"
+                      >
+                        •
+                      </Button>
+                      
+                    </div>
+
+                    {/* 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>
-          )}
-          
-          {/* Conteúdo */}
-          <div className="mb-6">
-            {editorLaudo.conteudo ? (
-              <div 
-                className="prose max-w-none leading-relaxed"
-                dangerouslySetInnerHTML={{ 
-                  __html: formatTextToHtml(
-                    editorLaudo.conteudo
-                      .replace(/{NOME_PACIENTE}/g, pacienteSelecionado?.nome || '')
-                      .replace(/{IDADE}/g, pacienteSelecionado?.idade?.toString() || '')
-                      .replace(/{CPF}/g, pacienteSelecionado?.cpf || '')
-                      .replace(/{DATA_ATUAL}/g, new Date().toLocaleDateString('pt-BR'))
-                      .replace(/{CID}/g, editorLaudo.cid)
-                      .replace(/{MEDICO}/g, medico.nome)
-                  )
-                }} 
-              />
-            ) : (
-              <div className="text-gray-400 italic text-center py-8">
-                <FileText className="h-12 w-12 mx-auto mb-4 opacity-50" />
-                <p>Nenhum conteúdo adicionado ainda.</p>
-                <p className="text-sm">Vá para a aba "Editor" para escrever o laudo.</p>
+
+            {/* 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>
-          
-          {/* Diagnóstico */}
-          {editorLaudo.diagnostico && (
-            <div className="mb-6">
-              <h4 className="font-bold mb-2">DIAGNÓSTICO:</h4>
-              <p>{editorLaudo.diagnostico}</p>
-            </div>
-          )}
-          
-          {/* Conclusão */}
-          {editorLaudo.conclusao && (
-            <div className="mb-6">
-              <h4 className="font-bold mb-2">CONCLUSÃO:</h4>
-              <p>{editorLaudo.conclusao}</p>
-            </div>
-          )}
-          
-          {/* Imagens */}
-          {editorLaudo.imagens.length > 0 && (
-            <div className="mb-6">
-              <h4 className="font-bold mb-4">IMAGENS:</h4>
-              <div className="grid grid-cols-2 gap-4">
-                {editorLaudo.imagens.map((img, index) => (
-                  <img key={index} src={img} alt={`Imagem ${index + 1}`} className="w-full border rounded" />
-                ))}
+
+          {/* Footer */}
+          <div className="p-4 border-t border-border bg-muted/20">
+            <div className="flex items-center justify-between">
+              <div className="text-xs text-muted-foreground">
+                Este editor permite escrever relatórios de forma livre, com formatação de texto rica.
+              </div>
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={onClose}>
+                  Cancelar
+                </Button>
+                <Button variant="outline">
+                  Salvar Rascunho
+                </Button>
+                <Button variant="default">
+                  {isNewLaudo ? "Liberar Laudo" : "Atualizar Laudo"}
+                </Button>
               </div>
             </div>
-          )}
-          
-          {/* Assinatura */}
-          {editorLaudo.incluirAssinatura && assinaturaLaudo && (
-            <div className="mt-8 text-center">
-              <div className="border-t pt-4">
-                <img src={assinaturaLaudo} alt="Assinatura" className="mx-auto mb-2" style={{ maxHeight: '80px' }} />
-                <p className="font-semibold">{medico.nome}</p>
-                <p className="text-sm text-gray-600">{medico.identificacao}</p>
-              </div>
-            </div>
-          )}
+          </div>
         </div>
       </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">
@@ -2605,7 +2625,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
               id="destinatario" 
               placeholder="Nome do Paciente ou CPF" 
               disabled 
-              className="bg-muted cursor-not-allowed text-gray-700 disabled:text-gray-900"
+              className="bg-muted cursor-not-allowed text-muted-foreground disabled:text-foreground"
             />
           </div>
           <div className="space-y-2">
@@ -2614,7 +2634,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
               <SelectTrigger id="tipoMensagem" className="hover:border-primary focus:border-primary cursor-pointer">
                 <SelectValue placeholder="Selecione o tipo" />
               </SelectTrigger>
-              <SelectContent className="bg-white border border-gray-200">
+              <SelectContent className="bg-popover border">
                 <SelectItem value="lembrete" className="hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground cursor-pointer">Lembrete de Consulta</SelectItem>
                 <SelectItem value="resultado" className="hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground cursor-pointer">Resultado de Exame</SelectItem>
                 <SelectItem value="instrucao" className="hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground cursor-pointer">Instruções Pós-Consulta</SelectItem>
@@ -2651,7 +2671,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
   const renderRelatoriosMedicosSection = () => (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
-        <h2 className="text-2xl font-bold">Relatórios Médicos</h2>
+        <h2 className="text-2xl font-bold text-foreground">Relatórios Médicos</h2>
         {editandoRelatorio && (
           <Button variant="outline" onClick={handleCancelarEdicaoRelatorio}>
             Cancelar Edição
@@ -2660,8 +2680,8 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
       </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>
         
@@ -2676,7 +2696,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
                   id="profissionalNome"
                   value={relatorioMedico.profissionalNome}
                   disabled
-                  className="bg-gray-100"
+                  className="bg-muted"
                 />
               </div>
               <div className="space-y-2">
@@ -2685,7 +2705,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
                   id="profissionalCrm"
                   value={relatorioMedico.profissionalCrm}
                   disabled
-                  className="bg-gray-100"
+                  className="bg-muted"
                 />
               </div>
             </div>
@@ -2885,12 +2905,12 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
       </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>
@@ -2901,9 +2921,9 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
                 <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
@@ -2930,20 +2950,20 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
                 <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>
@@ -2958,7 +2978,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
   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" />
@@ -2979,12 +2999,12 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
       <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">
@@ -2997,7 +3017,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
                 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>
 
@@ -3010,14 +3030,14 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
                 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">
@@ -3029,14 +3049,14 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
                 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>
@@ -3047,7 +3067,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
                 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>
 
@@ -3060,7 +3080,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
                 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>
 
@@ -3073,7 +3093,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
                 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>
 
@@ -3088,15 +3108,15 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
                 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">
@@ -3108,7 +3128,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
               <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>
@@ -3143,7 +3163,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
   return (
     <ProtectedRoute requiredUserType={["profissional"]}>
       <div className="container mx-auto px-4 py-8">
-        <header className="bg-white shadow-md rounded-lg p-4 mb-6 flex items-center justify-between">
+        <header className="bg-card shadow-md rounded-lg p-4 mb-6 flex items-center justify-between">
           <div className="flex items-center gap-4">
             <Avatar className="h-12 w-12">
               <AvatarImage src={medico.fotoUrl} alt={medico.nome} />
@@ -3172,7 +3192,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
       <div className="grid grid-cols-1 md:grid-cols-[220px_1fr] gap-6">
         {}
         <aside className="md:sticky md:top-8 h-fit">
-          <nav className="bg-white shadow-md rounded-lg p-3 space-y-1">
+          <nav className="bg-card shadow-md rounded-lg p-3 space-y-1">
             <Button 
               variant={activeSection === 'calendario' ? 'default' : 'ghost'} 
               className="w-full justify-start hover:bg-primary hover:text-primary-foreground cursor-pointer"
@@ -3250,7 +3270,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
       {showPopup && (
         <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex justify-center items-center z-50">
 
-          <div className="bg-white p-6 rounded-lg w-96 border border-black">
+          <div className="bg-card p-6 rounded-lg w-96 border">
 
             {step === 1 && (
               <>
@@ -3363,7 +3383,7 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
       {}
       {showActionModal && selectedEvent && (
         <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
-          <div className="bg-white p-6 rounded-lg w-96">
+          <div className="bg-card p-6 rounded-lg w-96">
             <h3 className="text-lg font-semibold mb-2">
               Consulta de {selectedEvent.title}
             </h3>
@@ -3399,76 +3419,6 @@ Paciente feminina, 67 anos, com queixa de dispneia progressiva aos esforços há
           </div>
         </div>
       )}
-
-      {/* Modal de Visualização do Laudo */}
-      <Dialog open={!!laudoVisualizacao} onOpenChange={() => setLaudoVisualizacao(null)}>
-        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
-          <DialogHeader>
-            <DialogTitle>
-              {laudoVisualizacao?.exameTipo || "Laudo Médico"}
-            </DialogTitle>
-          </DialogHeader>
-          
-          {laudoVisualizacao && (
-            <div className="space-y-6">
-              {/* Cabeçalho do Laudo */}
-              <div className="text-center border-b pb-4">
-                <h1 className="text-2xl font-bold mb-2">LAUDO MÉDICO</h1>
-                <p className="text-gray-600">Data: {laudoVisualizacao.data}</p>
-              </div>
-              
-              {/* Dados do Paciente */}
-              <div className="grid grid-cols-2 gap-4 p-4 bg-gray-50 rounded">
-                <div><strong>Paciente:</strong> {laudoVisualizacao.recipient}</div>
-                <div><strong>Executante:</strong> {laudoVisualizacao.execSolicitante}</div>
-                <div><strong>Exame:</strong> {laudoVisualizacao.exameTipo}</div>
-                {laudoVisualizacao.cid && (
-                  <div><strong>CID:</strong> {laudoVisualizacao.cid}</div>
-                )}
-              </div>
-
-              {/* Diagnóstico */}
-              {laudoVisualizacao.diagnostico && (
-                <div className="space-y-2">
-                  <h3 className="font-bold text-lg">DIAGNÓSTICO:</h3>
-                  <p className="text-gray-800">{laudoVisualizacao.diagnostico}</p>
-                </div>
-              )}
-
-              {/* Conteúdo do Laudo */}
-              {laudoVisualizacao.conteudo && (
-                <div className="space-y-2">
-                  <h3 className="font-bold text-lg">RELATÓRIO:</h3>
-                  <div 
-                    className="prose max-w-none leading-relaxed text-gray-800"
-                    dangerouslySetInnerHTML={{ 
-                      __html: formatTextToHtml(laudoVisualizacao.conteudo)
-                    }} 
-                  />
-                </div>
-              )}
-
-              {/* Conclusão */}
-              {laudoVisualizacao.conclusao && (
-                <div className="space-y-2">
-                  <h3 className="font-bold text-lg">CONCLUSÃO:</h3>
-                  <p className="text-gray-800">{laudoVisualizacao.conclusao}</p>
-                </div>
-              )}
-
-              {/* Rodapé */}
-              <div className="border-t pt-4 text-center text-sm text-gray-600">
-                <p><strong>Status:</strong> {laudoVisualizacao.status}</p>
-                <p className="mt-2">
-                  <strong>{medico.nome}</strong><br/>
-                  {medico.identificacao}
-                </p>
-              </div>
-            </div>
-          )}
-        </DialogContent>
-      </Dialog>
-
       </div>
     </ProtectedRoute>
   );
diff --git a/susconecta/components/agenda/FooterAgenda.tsx b/susconecta/components/agenda/FooterAgenda.tsx
index 79b4918..91f73f9 100644
--- a/susconecta/components/agenda/FooterAgenda.tsx
+++ b/susconecta/components/agenda/FooterAgenda.tsx
@@ -11,15 +11,15 @@ export default function FooterAgenda() {
   const [bloqueio, setBloqueio] = useState(false);
   
   return (
-    <div className="sticky bottom-0 left-0 right-0 border-t bg-white">
+    <div className="sticky bottom-0 left-0 right-0 border-t border-border bg-background">
       <div className="mx-auto w-full max-w-7xl px-8 py-3 flex items-center justify-between">
         <div className="flex items-center gap-2">
           <Switch checked={bloqueio} onCheckedChange={setBloqueio} />
-          <Label className="text-sm">Bloqueio de Agenda</Label>
+          <Label className="text-sm text-foreground">Bloqueio de Agenda</Label>
         </div>
         <div className="flex gap-2">
           <Link href={"/calendar"}>
-            <Button variant="ghost" className="hover:bg-blue-100 hover:text-foreground">Cancelar</Button>
+            <Button variant="ghost" className="hover:bg-muted hover:text-foreground">Cancelar</Button>
           </Link>
           <Link href={"/calendar"}>
             <Button>
diff --git a/susconecta/components/agenda/HeaderAgenda.tsx b/susconecta/components/agenda/HeaderAgenda.tsx
index 51594ce..829dfc9 100644
--- a/susconecta/components/agenda/HeaderAgenda.tsx
+++ b/susconecta/components/agenda/HeaderAgenda.tsx
@@ -15,14 +15,14 @@ export default function HeaderAgenda() {
   const tabCls = (active: boolean, extra = "") =>
     `px-4 py-1.5 text-[13px] border ${
       active
-        ? "border-blue-500 bg-blue-50 text-blue-700 font-medium"
-        : "text-gray-700 hover:bg-gray-100"
+        ? "border-blue-500 bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 font-medium"
+        : "text-muted-foreground hover:bg-muted border-border"
     } ${extra}`;
 
   return (
-    <header className="border-b bg-white">
+    <header className="border-b bg-background border-border">
       <div className="mx-auto w-full max-w-7xl px-8 py-3 flex items-center justify-between">
-        <h1 className="text-[18px] font-semibold">Novo Agendamento</h1>
+        <h1 className="text-[18px] font-semibold text-foreground">Novo Agendamento</h1>
 
         <div className="flex items-center gap-2">
           <nav
@@ -60,7 +60,7 @@ export default function HeaderAgenda() {
             type="button"
             aria-label="Histórico"
             onClick={() => router.back()}
-            className="inline-flex h-8 w-8 items-center justify-center rounded-md border bg-white text-gray-700 hover:bg-gray-100"
+            className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-border bg-background text-muted-foreground hover:bg-muted"
           >
             <RotateCcw className="h-4 w-4" />
           </button>
diff --git a/susconecta/components/agendamento/ListaEspera.tsx b/susconecta/components/agendamento/ListaEspera.tsx
index bc9da0c..eaa7863 100644
--- a/susconecta/components/agendamento/ListaEspera.tsx
+++ b/susconecta/components/agendamento/ListaEspera.tsx
@@ -38,21 +38,21 @@ export default function ListaEspera({ patients, onNotify, onAddToWaitlist }: Lis
 
   const getPriorityColor = (priority: string) => {
     switch (priority) {
-      case 'high': return 'bg-red-100 text-red-800';
-      case 'medium': return 'bg-yellow-100 text-yellow-800';
-      case 'low': return 'bg-green-100 text-green-800';
-      default: return 'bg-gray-100 text-gray-800';
+      case 'high': return 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300';
+      case 'medium': return 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300';
+      case 'low': return 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300';
+      default: return 'bg-muted text-muted-foreground';
     }
   };
 
   return (
-    <div className="bg-white rounded-lg shadow">
-      <div className="p-4 border-b border-gray-200">
+    <div className="bg-card border border-border rounded-lg shadow">
+      <div className="p-4 border-b border-border">
         <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
-          <h2 className="text-xl font-semibold text-gray-900 mb-4 sm:mb-0">Lista de Espera Inteligente</h2>
+          <h2 className="text-xl font-semibold text-foreground mb-4 sm:mb-0">Lista de Espera Inteligente</h2>
           <button
             onClick={onAddToWaitlist}
-            className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-primary-foreground bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
           >
             <Plus className="h-4 w-4 mr-2" />
             Adicionar à Lista
@@ -60,7 +60,7 @@ export default function ListaEspera({ patients, onNotify, onAddToWaitlist }: Lis
         </div>
       </div>
 
-      <div className="p-4 border-b border-gray-200">
+      <div className="p-4 border-b border-border">
         <div className="relative">
           <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
             <span className="text-gray-500">🔍</span>
@@ -70,14 +70,14 @@ export default function ListaEspera({ patients, onNotify, onAddToWaitlist }: Lis
             placeholder="Buscar paciente..."
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
-            className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+            className="block w-full pl-10 pr-3 py-2 border border-input rounded-md leading-5 bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary"
           />
         </div>
       </div>
 
       <div className="overflow-x-auto">
-        <table className="min-w-full divide-y divide-gray-200">
-          <thead className="bg-gray-50">
+        <table className="min-w-full divide-y divide-border">
+          <thead className="bg-muted/50">
             <tr>
               <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                 Paciente
@@ -99,16 +99,16 @@ export default function ListaEspera({ patients, onNotify, onAddToWaitlist }: Lis
               </th>
             </tr>
           </thead>
-          <tbody className="bg-white divide-y divide-gray-200">
+          <tbody className="bg-card divide-y divide-border">
             {filteredPatients.map((patient) => (
               <tr key={patient.id}>
-                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">
                   {patient.name}
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
                   {patient.specialty}
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
                   {new Date(patient.preferredDate).toLocaleDateString('pt-BR')}
                 </td>
                 <td className="px-6 py-4 whitespace-nowrap">
@@ -116,13 +116,13 @@ export default function ListaEspera({ patients, onNotify, onAddToWaitlist }: Lis
                     {getPriorityLabel(patient.priority)}
                   </span>
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
                   {patient.contact}
                 </td>
                 <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                   <button
                     onClick={() => onNotify(patient.id)}
-                    className="text-blue-600 hover:text-blue-900 mr-3"
+                    className="text-primary hover:text-primary/80 mr-3"
                     title="Notificar paciente"
                   >
                     <Bell className="h-4 w-4" />
@@ -135,7 +135,7 @@ export default function ListaEspera({ patients, onNotify, onAddToWaitlist }: Lis
       </div>
 
       {filteredPatients.length === 0 && (
-        <div className="text-center py-8 text-gray-500">
+        <div className="text-center py-8 text-muted-foreground">
           Nenhum paciente encontrado na lista de espera
         </div>
       )}
diff --git a/susconecta/components/dashboard/sidebar.tsx b/susconecta/components/dashboard/sidebar.tsx
index af90fff..b1ef7a9 100644
--- a/susconecta/components/dashboard/sidebar.tsx
+++ b/susconecta/components/dashboard/sidebar.tsx
@@ -59,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>
@@ -72,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/calendar-registration-form.tsx b/susconecta/components/forms/calendar-registration-form.tsx
index 6974df0..c06185f 100644
--- a/susconecta/components/forms/calendar-registration-form.tsx
+++ b/susconecta/components/forms/calendar-registration-form.tsx
@@ -26,13 +26,13 @@ export function CalendarRegistrationForm({ initialData, onSave, onCancel }: any)
 
   return (
     <form onSubmit={handleSubmit} className="space-y-8">
-      <div className="border rounded-md p-6 space-y-4 bg-white">
-        <h2 className="font-medium">Informações do paciente</h2>
+      <div className="border border-border rounded-md p-6 space-y-4 bg-card">
+        <h2 className="font-medium text-foreground">Informações do paciente</h2>
         <div className="grid grid-cols-1 md:grid-cols-12 gap-4">
             <div className="md:col-span-6">
               <Label>Nome *</Label>
               <div className="relative">
-                <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
+                <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                 <Input
                   name="patientName" 
                   placeholder="Digite o nome do paciente"
@@ -50,23 +50,19 @@ export function CalendarRegistrationForm({ initialData, onSave, onCancel }: any)
               <Label>RG</Label>
               <Input name="rg" placeholder="Número do RG" className="h-10" value={formData.rg || ''} onChange={handleChange} />
             </div>
-            <div className="md:col-span-6">
-              <div className="grid grid-cols-12 gap-3">
-                <div className="col-span-5">
-                  <Label>Data de nascimento *</Label>
-                  <Input name="birthDate" type="date" className="h-10" value={formData.birthDate || ''} onChange={handleChange} />
-                </div>
-                <div className="col-span-7">
-                  <Label>Telefone</Label>
-                  <div className="grid grid-cols-[86px_1fr] gap-2">
-                    <select name="phoneCode" className="h-10 rounded-md border border-input bg-background px-2 text-[13px]" value={formData.phoneCode || '+55'} onChange={handleChange}>
-                      <option value="+55">+55</option>
-                      <option value="+351">+351</option>
-                      <option value="+1">+1</option>
-                    </select>
-                    <Input name="phoneNumber" placeholder="(99) 99999-9999" className="h-10" value={formData.phoneNumber || ''} onChange={handleChange} />
-                  </div>
-                </div>
+            <div className="md:col-span-3">
+              <Label>Data de nascimento *</Label>
+              <Input name="birthDate" type="date" className="h-10" value={formData.birthDate || ''} onChange={handleChange} />
+            </div>
+            <div className="md:col-span-3">
+              <Label>Telefone</Label>
+              <div className="flex gap-2">
+                <select name="phoneCode" className="h-10 w-20 rounded-md border border-input bg-background text-foreground px-2 text-[13px]" value={formData.phoneCode || '+55'} onChange={handleChange}>
+                  <option value="+55">+55</option>
+                  <option value="+351">+351</option>
+                  <option value="+1">+1</option>
+                </select>
+                <Input name="phoneNumber" placeholder="(99) 99999-9999" className="h-10 flex-1" value={formData.phoneNumber || ''} onChange={handleChange} />
               </div>
             </div>
             <div className="md:col-span-6">
@@ -77,10 +73,10 @@ export function CalendarRegistrationForm({ initialData, onSave, onCancel }: any)
       </div>
 
       {}
-      <div className="border rounded-md p-6 space-y-4 bg-white">
-        <h2 className="font-medium">Informações do atendimento</h2>
-        <div className="grid grid-cols-1 md:grid-cols-12 gap-6">
-            <div className="md:col-span-6 space-y-3">
+      <div className="border border-border rounded-md p-6 space-y-4 bg-card">
+        <h2 className="font-medium text-foreground">Informações do atendimento</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="space-y-4">
                 <div>
                     <Label className="text-[13px]">Nome do profissional *</Label>
                     <div className="relative">
@@ -91,7 +87,7 @@ export function CalendarRegistrationForm({ initialData, onSave, onCancel }: any)
                 <div className="grid grid-cols-2 gap-3">
                     <div>
                         <Label className="text-[13px]">Unidade *</Label>
-                        <select name="unit" className="h-10 w-full rounded-md border border-input bg-background pr-8 pl-3 text-[13px] appearance-none" value={formData.unit || 'nei'} onChange={handleChange}>
+                        <select name="unit" className="h-10 w-full rounded-md border border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none" value={formData.unit || 'nei'} onChange={handleChange}>
                             <option value="nei">Núcleo de Especialidades Integradas</option>
                             <option value="cc">Clínica Central</option>
                         </select>
@@ -104,19 +100,19 @@ export function CalendarRegistrationForm({ initialData, onSave, onCancel }: any)
                         </div>
                     </div>
                 </div>
-                <div className="grid grid-cols-12 gap-3 items-end">
-                    <div className="col-span-12 md:col-span-3">
+                <div className="grid grid-cols-2 gap-3">
+                    <div>
                         <Label className="text-[13px]">Início *</Label>
                         <Input name="startTime" type="time" className="h-10 w-full rounded-md border border-input px-3 text-[13px]" value={formData.startTime || ''} onChange={handleChange} />
                     </div>
-                    <div className="col-span-12 md:col-span-3">
+                    <div>
                         <Label className="text-[13px]">Término *</Label>
                         <Input name="endTime" type="time" className="h-10 w-full rounded-md border border-input px-3 text-[13px]" value={formData.endTime || ''} onChange={handleChange} />
                     </div>
                 </div>
             </div>
-            <div className="md:col-span-6">
-                <div className="mb-2">
+            <div className="space-y-4">
+                <div>
                     <Label className="text-[13px]">Tipo de atendimento *</Label>
                     <div className="relative mt-1">
                         <Search className="pointer-events-none absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
@@ -125,7 +121,7 @@ export function CalendarRegistrationForm({ initialData, onSave, onCancel }: any)
                 </div>
                 <div>
                     <Label className="text-[13px]">Observações</Label>
-                    <Textarea name="notes" rows={4} className="text-[13px] h-[110px] min-h-0 resize-none" value={formData.notes || ''} onChange={handleChange} />
+                    <Textarea name="notes" rows={6} className="text-[13px] min-h-[120px] resize-none" value={formData.notes || ''} onChange={handleChange} />
                 </div>
             </div>
         </div>
diff --git a/susconecta/components/header.tsx b/susconecta/components/header.tsx
index 139d204..71ee7b0 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,6 +44,7 @@ export function Header() {
 
           {}
           <div className="hidden md:flex items-center space-x-3">
+            <SimpleThemeToggle />
             <Button
               variant="outline"
               className="text-primary border-primary hover:bg-primary hover:text-primary-foreground bg-transparent"
@@ -92,6 +94,7 @@ export function Header() {
                 Sobre
               </Link>
               <div className="flex flex-col space-y-2 pt-4">
+                <SimpleThemeToggle />
                 <Button
                   variant="outline"
                   className="text-primary border-primary hover:bg-primary hover:text-primary-foreground bg-transparent"
diff --git a/susconecta/components/simple-theme-toggle.tsx b/susconecta/components/simple-theme-toggle.tsx
new file mode 100644
index 0000000..033d129
--- /dev/null
+++ b/susconecta/components/simple-theme-toggle.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+import { Button } from "@/components/ui/button"
+
+export function SimpleThemeToggle() {
+  const { theme, setTheme } = useTheme()
+  
+  const toggleTheme = () => {
+    setTheme(theme === "dark" ? "light" : "dark")
+  }
+
+  return (
+    <Button variant="outline" size="icon" onClick={toggleTheme}>
+      <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <span className="sr-only">Alternar tema</span>
+    </Button>
+  )
+}
\ No newline at end of file
diff --git a/susconecta/components/theme-toggle.tsx b/susconecta/components/theme-toggle.tsx
new file mode 100644
index 0000000..3a89f0c
--- /dev/null
+++ b/susconecta/components/theme-toggle.tsx
@@ -0,0 +1,37 @@
+"use client"
+
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function ThemeToggle() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Alternar tema</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Claro
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Escuro
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
\ No newline at end of file
diff --git a/susconecta/components/ui/input.tsx b/susconecta/components/ui/input.tsx
index 03295ca..2437868 100644
--- a/susconecta/components/ui/input.tsx
+++ b/susconecta/components/ui/input.tsx
@@ -8,9 +8,11 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 flex h-9 w-full min-w-0 rounded-md bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "border-2 border-gray-300 dark:border-gray-600",
+        "focus-visible:border-primary focus-visible:ring-primary/20 focus-visible:ring-2",
+        "hover:border-gray-400 dark:hover:border-gray-500",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aria-invalid:border-2",
         className
       )}
       {...props}
diff --git a/susconecta/components/ui/select.tsx b/susconecta/components/ui/select.tsx
index dcbbc0c..ddfc1ec 100644
--- a/susconecta/components/ui/select.tsx
+++ b/susconecta/components/ui/select.tsx
@@ -37,7 +37,11 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-2 border-gray-300 dark:border-gray-600",
+        "focus-visible:border-primary focus-visible:ring-primary/20 focus-visible:ring-2",
+        "hover:border-gray-400 dark:hover:border-gray-500",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aria-invalid:border-2",
         className
       )}
       {...props}
diff --git a/susconecta/components/ui/textarea.tsx b/susconecta/components/ui/textarea.tsx
index 7f21b5e..d28b3ce 100644
--- a/susconecta/components/ui/textarea.tsx
+++ b/susconecta/components/ui/textarea.tsx
@@ -7,7 +7,11 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "placeholder:text-muted-foreground dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "border-2 border-gray-300 dark:border-gray-600",
+        "focus-visible:border-primary focus-visible:ring-primary/20 focus-visible:ring-2",
+        "hover:border-gray-400 dark:hover:border-gray-500",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aria-invalid:border-2",
         className
       )}
       {...props}
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..268ab68 100644
--- a/susconecta/package-lock.json
+++ b/susconecta/package-lock.json
@@ -974,9 +974,9 @@
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.30",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.30.tgz",
-      "integrity": "sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==",
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2635,54 +2635,54 @@
       }
     },
     "node_modules/@tailwindcss/node": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.12.tgz",
-      "integrity": "sha512-3hm9brwvQkZFe++SBt+oLjo4OLDtkvlE8q2WalaD/7QWaeM7KEJbAiY/LJZUaCs7Xa8aUu4xy3uoyX4q54UVdQ==",
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.14.tgz",
+      "integrity": "sha512-hpz+8vFk3Ic2xssIA3e01R6jkmsAhvkQdXlEbRTk6S10xDAtiQiM3FyvZVGsucefq764euO/b8WUW9ysLdThHw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/remapping": "^2.3.4",
         "enhanced-resolve": "^5.18.3",
-        "jiti": "^2.5.1",
+        "jiti": "^2.6.0",
         "lightningcss": "1.30.1",
-        "magic-string": "^0.30.17",
+        "magic-string": "^0.30.19",
         "source-map-js": "^1.2.1",
-        "tailwindcss": "4.1.12"
+        "tailwindcss": "4.1.14"
       }
     },
     "node_modules/@tailwindcss/oxide": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.12.tgz",
-      "integrity": "sha512-gM5EoKHW/ukmlEtphNwaGx45fGoEmP10v51t9unv55voWh6WrOL19hfuIdo2FjxIaZzw776/BUQg7Pck++cIVw==",
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.14.tgz",
+      "integrity": "sha512-23yx+VUbBwCg2x5XWdB8+1lkPajzLmALEfMb51zZUBYaYVPDQvBSD/WYDqiVyBIo2BZFa3yw1Rpy3G2Jp+K0dw==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
         "detect-libc": "^2.0.4",
-        "tar": "^7.4.3"
+        "tar": "^7.5.1"
       },
       "engines": {
         "node": ">= 10"
       },
       "optionalDependencies": {
-        "@tailwindcss/oxide-android-arm64": "4.1.12",
-        "@tailwindcss/oxide-darwin-arm64": "4.1.12",
-        "@tailwindcss/oxide-darwin-x64": "4.1.12",
-        "@tailwindcss/oxide-freebsd-x64": "4.1.12",
-        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.12",
-        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.12",
-        "@tailwindcss/oxide-linux-arm64-musl": "4.1.12",
-        "@tailwindcss/oxide-linux-x64-gnu": "4.1.12",
-        "@tailwindcss/oxide-linux-x64-musl": "4.1.12",
-        "@tailwindcss/oxide-wasm32-wasi": "4.1.12",
-        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.12",
-        "@tailwindcss/oxide-win32-x64-msvc": "4.1.12"
+        "@tailwindcss/oxide-android-arm64": "4.1.14",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.14",
+        "@tailwindcss/oxide-darwin-x64": "4.1.14",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.14",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.14",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.14",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.14",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.14",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.14",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.14",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.14",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.14"
       }
     },
     "node_modules/@tailwindcss/oxide-android-arm64": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.12.tgz",
-      "integrity": "sha512-oNY5pq+1gc4T6QVTsZKwZaGpBb2N1H1fsc1GD4o7yinFySqIuRZ2E4NvGasWc6PhYJwGK2+5YT1f9Tp80zUQZQ==",
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.14.tgz",
+      "integrity": "sha512-a94ifZrGwMvbdeAxWoSuGcIl6/DOP5cdxagid7xJv6bwFp3oebp7y2ImYsnZBMTwjn5Ev5xESvS3FFYUGgPODQ==",
       "cpu": [
         "arm64"
       ],
@@ -2697,9 +2697,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-darwin-arm64": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.12.tgz",
-      "integrity": "sha512-cq1qmq2HEtDV9HvZlTtrj671mCdGB93bVY6J29mwCyaMYCP/JaUBXxrQQQm7Qn33AXXASPUb2HFZlWiiHWFytw==",
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.14.tgz",
+      "integrity": "sha512-HkFP/CqfSh09xCnrPJA7jud7hij5ahKyWomrC3oiO2U9i0UjP17o9pJbxUN0IJ471GTQQmzwhp0DEcpbp4MZTA==",
       "cpu": [
         "arm64"
       ],
@@ -2714,9 +2714,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-darwin-x64": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.12.tgz",
-      "integrity": "sha512-6UCsIeFUcBfpangqlXay9Ffty9XhFH1QuUFn0WV83W8lGdX8cD5/+2ONLluALJD5+yJ7k8mVtwy3zMZmzEfbLg==",
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.14.tgz",
+      "integrity": "sha512-eVNaWmCgdLf5iv6Qd3s7JI5SEFBFRtfm6W0mphJYXgvnDEAZ5sZzqmI06bK6xo0IErDHdTA5/t7d4eTfWbWOFw==",
       "cpu": [
         "x64"
       ],
@@ -2731,9 +2731,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-freebsd-x64": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.12.tgz",
-      "integrity": "sha512-JOH/f7j6+nYXIrHobRYCtoArJdMJh5zy5lr0FV0Qu47MID/vqJAY3r/OElPzx1C/wdT1uS7cPq+xdYYelny1ww==",
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.14.tgz",
+      "integrity": "sha512-QWLoRXNikEuqtNb0dhQN6wsSVVjX6dmUFzuuiL09ZeXju25dsei2uIPl71y2Ic6QbNBsB4scwBoFnlBfabHkEw==",
       "cpu": [
         "x64"
       ],
@@ -2748,9 +2748,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.12.tgz",
-      "integrity": "sha512-v4Ghvi9AU1SYgGr3/j38PD8PEe6bRfTnNSUE3YCMIRrrNigCFtHZ2TCm8142X8fcSqHBZBceDx+JlFJEfNg5zQ==",
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.14.tgz",
+      "integrity": "sha512-VB4gjQni9+F0VCASU+L8zSIyjrLLsy03sjcR3bM0V2g4SNamo0FakZFKyUQ96ZVwGK4CaJsc9zd/obQy74o0Fw==",
       "cpu": [
         "arm"
       ],
@@ -2765,9 +2765,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.12.tgz",
-      "integrity": "sha512-YP5s1LmetL9UsvVAKusHSyPlzSRqYyRB0f+Kl/xcYQSPLEw/BvGfxzbH+ihUciePDjiXwHh+p+qbSP3SlJw+6g==",
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.14.tgz",
+      "integrity": "sha512-qaEy0dIZ6d9vyLnmeg24yzA8XuEAD9WjpM5nIM1sUgQ/Zv7cVkharPDQcmm/t/TvXoKo/0knI3me3AGfdx6w1w==",
       "cpu": [
         "arm64"
       ],
@@ -2782,9 +2782,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.12.tgz",
-      "integrity": "sha512-V8pAM3s8gsrXcCv6kCHSuwyb/gPsd863iT+v1PGXC4fSL/OJqsKhfK//v8P+w9ThKIoqNbEnsZqNy+WDnwQqCA==",
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.14.tgz",
+      "integrity": "sha512-ISZjT44s59O8xKsPEIesiIydMG/sCXoMBCqsphDm/WcbnuWLxxb+GcvSIIA5NjUw6F8Tex7s5/LM2yDy8RqYBQ==",
       "cpu": [
         "arm64"
       ],
@@ -2799,9 +2799,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.12.tgz",
-      "integrity": "sha512-xYfqYLjvm2UQ3TZggTGrwxjYaLB62b1Wiysw/YE3Yqbh86sOMoTn0feF98PonP7LtjsWOWcXEbGqDL7zv0uW8Q==",
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.14.tgz",
+      "integrity": "sha512-02c6JhLPJj10L2caH4U0zF8Hji4dOeahmuMl23stk0MU1wfd1OraE7rOloidSF8W5JTHkFdVo/O7uRUJJnUAJg==",
       "cpu": [
         "x64"
       ],
@@ -2816,9 +2816,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-x64-musl": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.12.tgz",
-      "integrity": "sha512-ha0pHPamN+fWZY7GCzz5rKunlv9L5R8kdh+YNvP5awe3LtuXb5nRi/H27GeL2U+TdhDOptU7T6Is7mdwh5Ar3A==",
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.14.tgz",
+      "integrity": "sha512-TNGeLiN1XS66kQhxHG/7wMeQDOoL0S33x9BgmydbrWAb9Qw0KYdd8o1ifx4HOGDWhVmJ+Ul+JQ7lyknQFilO3Q==",
       "cpu": [
         "x64"
       ],
@@ -2833,9 +2833,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-wasm32-wasi": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.12.tgz",
-      "integrity": "sha512-4tSyu3dW+ktzdEpuk6g49KdEangu3eCYoqPhWNsZgUhyegEda3M9rG0/j1GV/JjVVsj+lG7jWAyrTlLzd/WEBg==",
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.14.tgz",
+      "integrity": "sha512-uZYAsaW/jS/IYkd6EWPJKW/NlPNSkWkBlaeVBi/WsFQNP05/bzkebUL8FH1pdsqx4f2fH/bWFcUABOM9nfiJkQ==",
       "bundleDependencies": [
         "@napi-rs/wasm-runtime",
         "@emnapi/core",
@@ -2851,21 +2851,21 @@
       "license": "MIT",
       "optional": true,
       "dependencies": {
-        "@emnapi/core": "^1.4.5",
-        "@emnapi/runtime": "^1.4.5",
-        "@emnapi/wasi-threads": "^1.0.4",
-        "@napi-rs/wasm-runtime": "^0.2.12",
-        "@tybys/wasm-util": "^0.10.0",
-        "tslib": "^2.8.0"
+        "@emnapi/core": "^1.5.0",
+        "@emnapi/runtime": "^1.5.0",
+        "@emnapi/wasi-threads": "^1.1.0",
+        "@napi-rs/wasm-runtime": "^1.0.5",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.4.0"
       },
       "engines": {
         "node": ">=14.0.0"
       }
     },
     "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.12.tgz",
-      "integrity": "sha512-iGLyD/cVP724+FGtMWslhcFyg4xyYyM+5F4hGvKA7eifPkXHRAUDFaimu53fpNg9X8dfP75pXx/zFt/jlNF+lg==",
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.14.tgz",
+      "integrity": "sha512-Az0RnnkcvRqsuoLH2Z4n3JfAef0wElgzHD5Aky/e+0tBUxUhIeIqFBTMNQvmMRSP15fWwmvjBxZ3Q8RhsDnxAA==",
       "cpu": [
         "arm64"
       ],
@@ -2880,9 +2880,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.12.tgz",
-      "integrity": "sha512-NKIh5rzw6CpEodv/++r0hGLlfgT/gFN+5WNdZtvh6wpU2BpGNgdjvj6H2oFc8nCM839QM1YOhjpgbAONUb4IxA==",
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.14.tgz",
+      "integrity": "sha512-ttblVGHgf68kEE4om1n/n44I0yGPkCPbLsqzjvybhpwa6mKKtgFfAzy6btc3HRmuW7nHe0OOrSeNP9sQmmH9XA==",
       "cpu": [
         "x64"
       ],
@@ -2897,17 +2897,17 @@
       }
     },
     "node_modules/@tailwindcss/postcss": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.12.tgz",
-      "integrity": "sha512-5PpLYhCAwf9SJEeIsSmCDLgyVfdBhdBpzX1OJ87anT9IVR0Z9pjM0FNixCAUAHGnMBGB8K99SwAheXrT0Kh6QQ==",
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.14.tgz",
+      "integrity": "sha512-BdMjIxy7HUNThK87C7BC8I1rE8BVUsfNQSI5siQ4JK3iIa3w0XyVvVL9SXLWO//CtYTcp1v7zci0fYwJOjB+Zg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
-        "@tailwindcss/node": "4.1.12",
-        "@tailwindcss/oxide": "4.1.12",
+        "@tailwindcss/node": "4.1.14",
+        "@tailwindcss/oxide": "4.1.14",
         "postcss": "^8.4.41",
-        "tailwindcss": "4.1.12"
+        "tailwindcss": "4.1.14"
       }
     },
     "node_modules/@tybys/wasm-util": {
@@ -2922,9 +2922,9 @@
       }
     },
     "node_modules/@types/d3-array": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
-      "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
       "license": "MIT"
     },
     "node_modules/@types/d3-color": {
@@ -3006,9 +3006,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "22.18.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.18.0.tgz",
-      "integrity": "sha512-m5ObIqwsUp6BZzyiy4RdZpzWGub9bqLJMvZDD0QMXhxjqMHMENlj+SqF5QxoUwaQNFe+8kz8XM8ZQhqkQPTgMQ==",
+      "version": "22.18.8",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.18.8.tgz",
+      "integrity": "sha512-pAZSHMiagDR7cARo/cch1f3rXy0AEXwsVsVH09FcyeJVAzCnGgmYis7P3JidtTUjyadhTeSo8TgRPswstghDaw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3045,9 +3045,9 @@
       "optional": true
     },
     "node_modules/@types/react": {
-      "version": "18.3.24",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.24.tgz",
-      "integrity": "sha512-0dLEBsA1kI3OezMBF8nSsb7Nk19ZnsyE1LLhB8r27KbgU5H4pvuqZLdtE+aUkJVoXgTVuA+iLIwmZ0TuK4tx6A==",
+      "version": "18.3.25",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.25.tgz",
+      "integrity": "sha512-oSVZmGtDPmRZtVDqvdKUi/qgCsWp5IDY29wp8na8Bj4B3cc99hfNzvNhlMkVVxctkAOGUA3Km7MMpBHAnWfcIA==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
@@ -3961,6 +3961,15 @@
         "node": ">= 0.6.0"
       }
     },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.8.10",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.10.tgz",
+      "integrity": "sha512-uLfgBi+7IBNay8ECBO2mVMGZAc1VgZWEChxm4lv+TobGdG82LnXMjuNGo/BSSZZL4UmkWhxEHP2f5ziLNwGWMA==",
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.js"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
@@ -3985,9 +3994,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.25.4",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.4.tgz",
-      "integrity": "sha512-4jYpcjabC606xJ3kw2QwGEZKX0Aw7sgQdZCvIK9dhVSPh76BKo+C+btT1RRofH7B+8iNpEbgGNVWiLki5q93yg==",
+      "version": "4.26.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.26.3.tgz",
+      "integrity": "sha512-lAUU+02RFBuCKQPj/P6NgjlbCnLBMp4UtgTx7vNHd3XSIJF87s9a5rA3aH2yw3GS9DqZAUbOtZdCCiZeVRqt0w==",
       "funding": [
         {
           "type": "opencollective",
@@ -4004,9 +4013,10 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "caniuse-lite": "^1.0.30001737",
-        "electron-to-chromium": "^1.5.211",
-        "node-releases": "^2.0.19",
+        "baseline-browser-mapping": "^2.8.9",
+        "caniuse-lite": "^1.0.30001746",
+        "electron-to-chromium": "^1.5.227",
+        "node-releases": "^2.0.21",
         "update-browserslist-db": "^1.1.3"
       },
       "bin": {
@@ -4086,57 +4096,10 @@
         "node": ">=6"
       }
     },
-    "node_modules/call-bind": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
-      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.0",
-        "es-define-property": "^1.0.0",
-        "get-intrinsic": "^1.2.4",
-        "set-function-length": "^1.2.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/call-bind-apply-helpers": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
-      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/call-bound": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
-      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.2",
-        "get-intrinsic": "^1.3.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001739",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001739.tgz",
-      "integrity": "sha512-y+j60d6ulelrNSwpPyrHdl+9mJnQzHBr08xm48Qno0nSk4h3Qojh+ziv2qE6rXf4k3tadF4o1J/1tAbVm1NtnA==",
+      "version": "1.0.30001747",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001747.tgz",
+      "integrity": "sha512-mzFa2DGIhuc5490Nd/G31xN1pnBnYMadtkyTjefPI7wzypqgCEpeWu9bJr0OnDsyKrW75zA9ZAt7pbQFmwLsQg==",
       "funding": [
         {
           "type": "opencollective",
@@ -4625,51 +4588,10 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-<<<<<<< HEAD
-    "node_modules/define-data-property": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
-      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
-      "license": "MIT",
-      "dependencies": {
-        "es-define-property": "^1.0.0",
-        "es-errors": "^1.3.0",
-        "gopd": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/define-properties": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
-      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
-      "license": "MIT",
-      "dependencies": {
-        "define-data-property": "^1.0.1",
-        "has-property-descriptors": "^1.0.0",
-        "object-keys": "^1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/detect-libc": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
-      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
-=======
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
->>>>>>> origin/develop
       "dev": true,
       "license": "MIT"
     },
@@ -4761,9 +4683,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.213",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.213.tgz",
-      "integrity": "sha512-xr9eRzSLNa4neDO0xVFrkXu3vyIzG4Ay08dApecw42Z1NbmCt+keEpXdvlYGVe0wtvY5dhW0Ay0lY0IOfsCg0Q==",
+      "version": "1.5.229",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.229.tgz",
+      "integrity": "sha512-cwhDcZKGcT/rEthLRJ9eBlMDkh1sorgsuk+6dpsehV0g9CABsIqBxU4rLRjG+d/U6pYU1s37A4lSKrVc5lSQYg==",
       "license": "ISC"
     },
     "node_modules/embla-carousel": {
@@ -4815,8 +4737,6 @@
         "node": ">=10.13.0"
       }
     },
-<<<<<<< HEAD
-=======
     "node_modules/es-abstract": {
       "version": "1.24.0",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.0.tgz",
@@ -4886,7 +4806,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
->>>>>>> origin/develop
     "node_modules/es-define-property": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -4905,8 +4824,6 @@
         "node": ">= 0.4"
       }
     },
-<<<<<<< HEAD
-=======
     "node_modules/es-iterator-helpers": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.2.1.tgz",
@@ -4935,7 +4852,6 @@
         "node": ">= 0.4"
       }
     },
->>>>>>> origin/develop
     "node_modules/es-object-atoms": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
@@ -4948,8 +4864,6 @@
         "node": ">= 0.4"
       }
     },
-<<<<<<< HEAD
-=======
     "node_modules/es-set-tostringtag": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
@@ -4997,7 +4911,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
->>>>>>> origin/develop
     "node_modules/es-toolkit": {
       "version": "1.39.10",
       "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.39.10.tgz",
@@ -5654,9 +5567,9 @@
       }
     },
     "node_modules/eventemitter3": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
-      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
+      "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg==",
       "license": "MIT"
     },
     "node_modules/extend": {
@@ -5864,8 +5777,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-<<<<<<< HEAD
-=======
     "node_modules/function.prototype.name": {
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.8.tgz",
@@ -5887,7 +5798,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
->>>>>>> origin/develop
     "node_modules/functions-have-names": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
@@ -5898,16 +5808,14 @@
       }
     },
     "node_modules/geist": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/geist/-/geist-1.4.2.tgz",
-      "integrity": "sha512-OQUga/KUc8ueijck6EbtT07L4tZ5+TZgjw8PyWfxo16sL5FWk7gNViPNU8hgCFjy6bJi9yuTP+CRpywzaGN8zw==",
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/geist/-/geist-1.5.1.tgz",
+      "integrity": "sha512-mAHZxIsL2o3ZITFaBVFBnwyDOw+zNLYum6A6nIjpzCGIO8QtC3V76XF2RnZTyLx1wlDTmMDy8jg3Ib52MIjGvQ==",
       "license": "SIL OPEN FONT LICENSE",
       "peerDependencies": {
         "next": ">=13.2.0"
       }
     },
-<<<<<<< HEAD
-=======
     "node_modules/generator-function": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/generator-function/-/generator-function-2.0.1.tgz",
@@ -5918,7 +5826,6 @@
         "node": ">= 0.4"
       }
     },
->>>>>>> origin/develop
     "node_modules/get-intrinsic": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
@@ -5965,8 +5872,6 @@
         "node": ">= 0.4"
       }
     },
-<<<<<<< HEAD
-=======
     "node_modules/get-symbol-description": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
@@ -6041,7 +5946,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
->>>>>>> origin/develop
     "node_modules/gopd": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -6061,8 +5965,6 @@
       "dev": true,
       "license": "ISC"
     },
-<<<<<<< HEAD
-=======
     "node_modules/graphemer": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@@ -6093,7 +5995,6 @@
         "node": ">=8"
       }
     },
->>>>>>> origin/develop
     "node_modules/has-property-descriptors": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
@@ -6106,8 +6007,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-<<<<<<< HEAD
-=======
     "node_modules/has-proto": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
@@ -6124,7 +6023,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
->>>>>>> origin/develop
     "node_modules/has-symbols": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
@@ -6294,8 +6192,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-<<<<<<< HEAD
-=======
     "node_modules/is-array-buffer": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -6440,7 +6336,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
->>>>>>> origin/develop
     "node_modules/is-date-object": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
@@ -6457,8 +6352,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-<<<<<<< HEAD
-=======
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -6571,7 +6464,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
->>>>>>> origin/develop
     "node_modules/is-regex": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
@@ -6590,8 +6482,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-<<<<<<< HEAD
-=======
     "node_modules/is-set": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
@@ -6750,11 +6640,10 @@
         "node": ">= 0.4"
       }
     },
->>>>>>> origin/develop
     "node_modules/jiti": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.5.1.tgz",
-      "integrity": "sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w==",
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -7194,9 +7083,9 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.18",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.18.tgz",
-      "integrity": "sha512-yi8swmWbO17qHhwIBNeeZxTceJMeBvWJaId6dyvTSOwTipqeHhMhOrz6513r1sOKnpvQ7zkhlG8tPrpilwTxHQ==",
+      "version": "0.30.19",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.19.tgz",
+      "integrity": "sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -7212,8 +7101,6 @@
         "node": ">= 0.4"
       }
     },
-<<<<<<< HEAD
-=======
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -7264,7 +7151,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
->>>>>>> origin/develop
     "node_modules/minipass": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
@@ -7276,9 +7162,9 @@
       }
     },
     "node_modules/minizlib": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.0.2.tgz",
-      "integrity": "sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.1.0.tgz",
+      "integrity": "sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -7288,22 +7174,6 @@
         "node": ">= 18"
       }
     },
-    "node_modules/mkdirp": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
-      "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "mkdirp": "dist/cjs/src/bin.js"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -7443,9 +7313,9 @@
       }
     },
     "node_modules/node-releases": {
-      "version": "2.0.19",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
-      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
+      "version": "2.0.21",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.21.tgz",
+      "integrity": "sha512-5b0pgg78U3hwXkCM8Z9b2FJdPZlr9Psr9V2gQPESdGHqbntyFJKFW4r5TeWGFzafGY3hzs1JC62VEQMbl1JFkw==",
       "license": "MIT"
     },
     "node_modules/normalize-range": {
@@ -7466,8 +7336,6 @@
         "node": ">=0.10.0"
       }
     },
-<<<<<<< HEAD
-=======
     "node_modules/object-inspect": {
       "version": "1.13.4",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
@@ -7481,7 +7349,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
->>>>>>> origin/develop
     "node_modules/object-is": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz",
@@ -7507,8 +7374,6 @@
         "node": ">= 0.4"
       }
     },
-<<<<<<< HEAD
-=======
     "node_modules/object.assign": {
       "version": "4.1.7",
       "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz",
@@ -7667,7 +7532,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
->>>>>>> origin/develop
     "node_modules/pako": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
@@ -7896,12 +7760,6 @@
         "node": ">=0.10"
       }
     },
-    "node_modules/quill/node_modules/eventemitter3": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
-      "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg==",
-      "license": "MIT"
-    },
     "node_modules/raf": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
@@ -7925,9 +7783,9 @@
       }
     },
     "node_modules/react-day-picker": {
-      "version": "9.9.0",
-      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-9.9.0.tgz",
-      "integrity": "sha512-NtkJbuX6cl/VaGNb3sVVhmMA6LSMnL5G3xNL+61IyoZj0mUZFWTg4hmj7PHjIQ8MXN9dHWhUHFoJWG6y60DKSg==",
+      "version": "9.11.0",
+      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-9.11.0.tgz",
+      "integrity": "sha512-L4FYOaPrr3+AEROeP6IG2mCORZZfxJDkJI2df8mv1jyPrNYeccgmFPZDaHyAuPCBCddQFozkxbikj2NhMEYfDQ==",
       "license": "MIT",
       "dependencies": {
         "@date-fns/tz": "^1.4.1",
@@ -7959,9 +7817,9 @@
       }
     },
     "node_modules/react-hook-form": {
-      "version": "7.62.0",
-      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.62.0.tgz",
-      "integrity": "sha512-7KWFejc98xqG/F4bAxpL41NB3o1nnvQO1RWZT3TqRZYL8RryQETGfEdVnJN2fy1crCiBLLjkRBVK05j24FxJGA==",
+      "version": "7.63.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.63.0.tgz",
+      "integrity": "sha512-ZwueDMvUeucovM2VjkCf7zIHcs1aAlDimZu2Hvel5C5907gUzMpm4xCrQXtRzCvsBqFjonB4m3x4LzCFI1ZKWA==",
       "license": "MIT",
       "engines": {
         "node": ">=18.0.0"
@@ -7975,9 +7833,9 @@
       }
     },
     "node_modules/react-is": {
-      "version": "19.1.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.1.tgz",
-      "integrity": "sha512-tr41fA15Vn8p4X9ntI+yCyeGSf1TlYaY5vlTZfQmeLBrFo3psOPX6HhTDnFNL9uj3EhP0KAQ80cugCl4b4BERA==",
+      "version": "19.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.0.tgz",
+      "integrity": "sha512-x3Ax3kNSMIIkyVYhWPyO09bu0uttcAIoecO/um/rKGQ4EltYWVYtyiGkS/3xMynrbVQdS69Jhlv8FXUEZehlzA==",
       "license": "MIT",
       "peer": true
     },
@@ -8067,9 +7925,9 @@
       }
     },
     "node_modules/react-resizable-panels": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-3.0.5.tgz",
-      "integrity": "sha512-3z1yN25DMTXLg2wfyFrW32r5k4WEcUa3F7cJ2EgtNK07lnOs4mpM8yWLGunCpkhcQRwJX4fqoLcIh/pHPxzlmQ==",
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-3.0.6.tgz",
+      "integrity": "sha512-b3qKHQ3MLqOgSS+FRYKapNkJZf5EQzuf6+RLiq1/IlTHw99YrZ2NJZLk4hQIzTnnIkRg2LUqyVinu6YWWpUYew==",
       "license": "MIT",
       "peerDependencies": {
         "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
@@ -8129,9 +7987,9 @@
       }
     },
     "node_modules/recharts": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.1.2.tgz",
-      "integrity": "sha512-vhNbYwaxNbk/IATK0Ki29k3qvTkGqwvCgyQAQ9MavvvBwjvKnMTswdbklJpcOAoMPN/qxF3Lyqob0zO+ZXkZ4g==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.2.1.tgz",
+      "integrity": "sha512-0JKwHRiFZdmLq/6nmilxEZl3pqb4T+aKkOkOi/ZISRZwfBhVMgInxzlYU9D4KnCH3KINScLy68m/OvMXoYGZUw==",
       "license": "MIT",
       "dependencies": {
         "@reduxjs/toolkit": "1.x.x || 2.x.x",
@@ -8155,6 +8013,12 @@
         "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/recharts/node_modules/eventemitter3": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
+      "license": "MIT"
+    },
     "node_modules/redux": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
@@ -8200,8 +8064,6 @@
       "license": "MIT",
       "optional": true
     },
-<<<<<<< HEAD
-=======
     "node_modules/regexp-tree": {
       "version": "0.1.27",
       "resolved": "https://registry.npmjs.org/regexp-tree/-/regexp-tree-0.1.27.tgz",
@@ -8212,7 +8074,6 @@
         "regexp-tree": "bin/regexp-tree"
       }
     },
->>>>>>> origin/develop
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
@@ -8233,8 +8094,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-<<<<<<< HEAD
-=======
     "node_modules/regjsparser": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.12.0.tgz",
@@ -8261,7 +8120,6 @@
         "node": ">=6"
       }
     },
->>>>>>> origin/develop
     "node_modules/reselect": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
@@ -8469,8 +8327,6 @@
         "node": ">= 0.4"
       }
     },
-<<<<<<< HEAD
-=======
     "node_modules/set-proto": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz",
@@ -8628,7 +8484,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
->>>>>>> origin/develop
     "node_modules/signature_pad": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/signature_pad/-/signature_pad-2.3.2.tgz",
@@ -8904,9 +8759,9 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.12.tgz",
-      "integrity": "sha512-DzFtxOi+7NsFf7DBtI3BJsynR+0Yp6etH+nRPTbpWnS2pZBaSksv/JGctNwSWzbFjp0vxSqknaUylseZqMDGrA==",
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.14.tgz",
+      "integrity": "sha512-b7pCxjGO98LnxVkKjaZSDeNuljC4ueKUddjENJOADtubtdo8llTaJy7HwBMeLNSSo2N5QIAgklslK1+Ir8r6CA==",
       "license": "MIT"
     },
     "node_modules/tailwindcss-animate": {
@@ -8919,9 +8774,9 @@
       }
     },
     "node_modules/tapable": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.3.tgz",
-      "integrity": "sha512-ZL6DDuAlRlLGghwcfmSn9sK3Hr6ArtyudlSAiCqQ6IfE+b+HHbydbYDIG15IfS5do+7XQQBdBiubF/cV2dnDzg==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -8933,17 +8788,16 @@
       }
     },
     "node_modules/tar": {
-      "version": "7.4.3",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-7.4.3.tgz",
-      "integrity": "sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==",
+      "version": "7.5.1",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.1.tgz",
+      "integrity": "sha512-nlGpxf+hv0v7GkWBK2V9spgactGOp0qvfWRxUMjqHyzrt3SgwE48DIv/FhqPHJYLHpgW1opq3nERbz5Anq7n1g==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
         "@isaacs/fs-minipass": "^4.0.0",
         "chownr": "^3.0.0",
         "minipass": "^7.1.2",
-        "minizlib": "^3.0.1",
-        "mkdirp": "^3.0.1",
+        "minizlib": "^3.1.0",
         "yallist": "^5.0.0"
       },
       "engines": {
@@ -9167,9 +9021,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.9.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz",
-      "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -9349,9 +9203,9 @@
       }
     },
     "node_modules/use-sync-external-store": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
-      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
       "license": "MIT",
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"