diff --git a/app/context/AccessibilityContext.tsx b/app/context/AccessibilityContext.tsx
index 1594f2e..ae52c99 100644
--- a/app/context/AccessibilityContext.tsx
+++ b/app/context/AccessibilityContext.tsx
@@ -19,20 +19,25 @@ interface AccessibilityContextProps {
 const AccessibilityContext = createContext<AccessibilityContextProps | undefined>(undefined);
 
 export const AccessibilityProvider = ({ children }: { children: ReactNode }) => {
-  const [theme, setThemeState] = useState<Theme>('light');
-  const [contrast, setContrastState] = useState<Contrast>('normal');
-  const [fontSize, setFontSize] = useState<number>(16);
-
-  useEffect(() => {
-    const storedTheme = (localStorage.getItem('accessibility-theme') as Theme) || 'light';
-    const storedContrast = (localStorage.getItem('accessibility-contrast') as Contrast) || 'normal';
-    const storedSize = localStorage.getItem('accessibility-font-size');
-    setThemeState(storedTheme);
-    setContrastState(storedContrast);
-    if (storedSize) {
-      setFontSize(parseFloat(storedSize));
+  const [theme, setThemeState] = useState<Theme>(() => {
+    if (typeof window !== 'undefined') {
+      return (localStorage.getItem('accessibility-theme') as Theme) || 'light';
     }
-  }, []);
+    return 'light';
+  });
+  const [contrast, setContrastState] = useState<Contrast>(() => {
+    if (typeof window !== 'undefined') {
+      return (localStorage.getItem('accessibility-contrast') as Contrast) || 'normal';
+    }
+    return 'normal';
+  });
+  const [fontSize, setFontSize] = useState<number>(() => {
+    if (typeof window !== 'undefined') {
+      const storedSize = localStorage.getItem('accessibility-font-size');
+      return storedSize ? parseFloat(storedSize) : 16;
+    }
+    return 16;
+  });
 
   useEffect(() => {
     const root = document.documentElement;
diff --git a/app/doctor/dashboard/page.tsx b/app/doctor/dashboard/page.tsx
index a018dfd..cf855dc 100644
--- a/app/doctor/dashboard/page.tsx
+++ b/app/doctor/dashboard/page.tsx
@@ -21,7 +21,7 @@ import {
 } from "@/components/ui/alert-dialog";
 
 import Link from "next/link";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useMemo } from "react"; // Adicionado useMemo
 import { toast } from "@/hooks/use-toast";
 
 import { useAuthLayout } from "@/hooks/useAuthLayout";
@@ -38,7 +38,6 @@ import Sidebar from "@/components/Sidebar";
 import WeeklyScheduleCard from "@/components/ui/WeeklyScheduleCard";
 
 
-// --- TIPOS ADICIONADOS PARA CORREÇÃO ---
 type Appointment = {
     id: string;
     doctor_id: string;
@@ -50,7 +49,6 @@ type Appointment = {
 type EnrichedAppointment = Appointment & {
     patientName: string;
 };
-// --- FIM DOS TIPOS ADICIONADOS ---
 
 type Availability = {
     id: string;
@@ -142,14 +140,17 @@ interface Exception {
     created_by: string;
 }
 
-// Minimal type for Patient, adjust if more fields are needed
 type Patient = {
     id: string;
     full_name: string;
 };
 
-export default function PatientDashboard() {
-    const { user } = useAuthLayout({ requiredRole: ['medico'] });
+export default function DoctorDashboard() {
+    // --- CORREÇÃO CRÍTICA DO LOOP ---
+    // Usamos useMemo para garantir que o array de roles seja uma referência estável
+    // e não dispare o useEffect do useAuthLayout infinitamente.
+    const requiredRoles = useMemo(() => ['medico'], []);
+    const { user } = useAuthLayout({ requiredRole: requiredRoles });
 
     const [loggedDoctor, setLoggedDoctor] = useState<Doctor | null>(null);
     const [userData, setUserData] = useState<UserData>();
@@ -218,7 +219,7 @@ export default function PatientDashboard() {
         };
 
         fetchData();
-    }, [user]);
+    }, [user?.id]); 
 
     function findDoctorById(id: string, doctors: Doctor[]) {
         return doctors.find((doctor) => doctor.user_id === id);
@@ -264,8 +265,8 @@ export default function PatientDashboard() {
         <Sidebar>
             <div className="space-y-6">
                 <div>
-                    <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
-                    <p className="text-gray-600">
+                    <h1 className="text-3xl font-bold">Dashboard</h1>
+                    <p className="text-muted-foreground">
                         Bem-vindo ao seu portal de consultas médicas
                     </p>
                 </div>
@@ -325,7 +326,7 @@ export default function PatientDashboard() {
                             <CardDescription>Acesse rapidamente as principais funcionalidades</CardDescription>
                         </CardHeader>
                         <CardContent className="space-y-4">
-                            <Link href="/doctor/medicos/consultas">
+                            <Link href="/doctor/consultas">
                                 <Button className="w-full justify-start">
                                     <Calendar className="mr-2 h-4 w-4" />
                                     Ver Minhas Consultas
@@ -367,21 +368,21 @@ export default function PatientDashboard() {
 
                                     return (
                                         <div key={ex.id} className="space-y-4">
-                                            <div className="flex flex-col items-center justify-between p-3 bg-blue-50 rounded-lg shadow-sm">
+                                            <div className="flex flex-col items-center justify-between p-3 bg-primary/10 rounded-lg shadow-sm">
                                                 <div className="text-center">
                                                     <p className="font-semibold capitalize">{date}</p>
-                                                    <p className="text-sm text-gray-600">
+                                                    <p className="text-sm text-muted-foreground">
                                                         {startTime && endTime
                                                             ? `${startTime} - ${endTime}`
                                                             : "Dia todo"}
                                                     </p>
                                                 </div>
                                                 <div className="text-center mt-2">
-                                                    <p className={`text-sm font-medium ${ex.kind === "bloqueio" ? "text-red-600" : "text-green-600"}`}>{ex.kind === "bloqueio" ? "Bloqueio" : "Liberação"}</p>
-                                                    <p className="text-xs text-gray-500 italic">{ex.reason || "Sem motivo especificado"}</p>
+                                                    <p className={`text-sm font-medium ${ex.kind === "bloqueio" ? "text-destructive" : "text-primary"}`}>{ex.kind === "bloqueio" ? "Bloqueio" : "Liberação"}</p>
+                                                    <p className="text-xs text-muted-foreground italic">{ex.reason || "Sem motivo especificado"}</p>
                                                 </div>
                                                 <div>
-                                                    <Button className="text-red-600" variant="outline" onClick={() => openDeleteDialog(String(ex.id))}>
+                                                    <Button className="text-destructive" variant="outline" onClick={() => openDeleteDialog(String(ex.id))}>
                                                         <Trash2></Trash2>
                                                     </Button>
                                                 </div>
@@ -390,7 +391,7 @@ export default function PatientDashboard() {
                                     );
                                 })
                             ) : (
-                                <p className="text-sm text-gray-400 italic col-span-7 text-center">Nenhuma exceção registrada.</p>
+                                <p className="text-sm text-muted-foreground italic col-span-7 text-center">Nenhuma exceção registrada.</p>
                             )}
                         </CardContent>
                     </Card>
@@ -403,7 +404,7 @@ export default function PatientDashboard() {
                         </AlertDialogHeader>
                         <AlertDialogFooter>
                             <AlertDialogCancel>Cancelar</AlertDialogCancel>
-                            <AlertDialogAction onClick={() => exceptionToDelete && handleDeleteException(exceptionToDelete)} className="bg-red-600 hover:bg-red-700">
+                            <AlertDialogAction onClick={() => exceptionToDelete && handleDeleteException(exceptionToDelete)} className="bg-destructive hover:bg-destructive/90">
                                 Excluir
                             </AlertDialogAction>
                         </AlertDialogFooter>
diff --git a/app/doctor/disponibilidade/excecoes/page.tsx b/app/doctor/disponibilidade/excecoes/page.tsx
index 932cb3f..212aa33 100644
--- a/app/doctor/disponibilidade/excecoes/page.tsx
+++ b/app/doctor/disponibilidade/excecoes/page.tsx
@@ -149,12 +149,12 @@ export default function ExceptionPage() {
         <Sidebar>
             <div className="space-y-6">
                 <div>
-                    <h1 className="text-3xl font-bold text-gray-900">Adicione exceções</h1>
-                    <p className="text-gray-600">Altere a disponibilidade em casos especiais para o Dr. João Silva</p>
+                    <h1 className="text-3xl font-bold text-foreground">Adicione exceções</h1>
+                    <p className="text-muted-foreground">Altere a disponibilidade em casos especiais para o Dr. João Silva</p>
                 </div>
 
                 <div className="flex justify-between items-center">
-                    <h2 className="text-xl font-semibold">Consultas para: {displayDate}</h2>
+                    <h2 className="text-xl font-semibold text-foreground">Consultas para: {displayDate}</h2>
                     <Button disabled={isLoading} variant="outline" size="sm">
                         <RefreshCw className={`mr-2 h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
                         Atualizar Agenda
@@ -171,7 +171,7 @@ export default function ExceptionPage() {
                                     <CalendarIcon className="mr-2 h-5 w-5" />
                                     Calendário
                                 </CardTitle>
-                                <p className="text-sm text-gray-500">Selecione a data desejada.</p>
+                                <p className="text-sm text-muted-foreground">Selecione a data desejada.</p>
                             </CardHeader>
                             <CardContent className="flex justify-center p-2">
                                 <Calendar
@@ -194,23 +194,23 @@ export default function ExceptionPage() {
                     {/* COLUNA 2: FORM PARA ADICIONAR EXCEÇÃO */}
                     <div className="lg:col-span-2 space-y-4">
                         {isLoading ? (
-                            <p className="text-center text-lg text-gray-500">Carregando a agenda...</p>
+                            <p className="text-center text-lg text-muted-foreground">Carregando a agenda...</p>
                         ) : !selectedCalendarDate ? (
-                            <p className="text-center text-lg text-gray-500">Selecione uma data.</p>
+                            <p className="text-center text-lg text-muted-foreground">Selecione uma data.</p>
                         ) : (
                             <form className="space-y-6" onSubmit={handleSubmit}>
-                                <div className="bg-white rounded-lg border border-gray-200 p-6">
-                                    <h2 className="text-lg font-semibold text-gray-900 mb-6">Dados </h2>
+                                <div className="bg-card rounded-lg border border-border p-6">
+                                    <h2 className="text-lg font-semibold text-foreground mb-6">Dados </h2>
                                     <div className="space-y-6">
                                         <div className="grid md:grid-cols-5 gap-6">
                                             <div>
-                                                <Label htmlFor="horarioEntrada" className="text-sm font-medium text-gray-700">
+                                                <Label htmlFor="horarioEntrada" className="text-sm font-medium text-foreground">
                                                     Horario De Entrada
                                                 </Label>
                                                 <Input type="time" id="horarioEntrada" name="horarioEntrada" className="mt-1" />
                                             </div>
                                             <div>
-                                                <Label htmlFor="horarioSaida" className="text-sm font-medium text-gray-700">
+                                                <Label htmlFor="horarioSaida" className="text-sm font-medium text-foreground">
                                                     Horario De Saida
                                                 </Label>
                                                 <Input type="time" id="horarioSaida" name="horarioSaida" className="mt-1" />
@@ -218,7 +218,7 @@ export default function ExceptionPage() {
                                         </div>
 
                                         <div>
-                                            <Label htmlFor="tipo" className="text-sm font-medium text-gray-700">
+                                            <Label htmlFor="tipo" className="text-sm font-medium text-foreground">
                                                 Tipo
                                             </Label>
                                             <Select onValueChange={(value) => setTipo(value)} value={tipo}>
@@ -232,7 +232,7 @@ export default function ExceptionPage() {
                                             </Select>
                                         </div>
                                         <div>
-                                            <Label htmlFor="reason" className="text-sm font-medium text-gray-700">
+                                            <Label htmlFor="reason" className="text-sm font-medium text-foreground">
                                                 Motivo
                                             </Label>
                                             <Input type="textarea" id="reason" name="reason" required className="mt-1" />
@@ -244,7 +244,7 @@ export default function ExceptionPage() {
                                     <Link href="/doctor/disponibilidade">
                                         <Button variant="outline">Cancelar</Button>
                                     </Link>
-                                    <Button type="submit" className="bg-green-600 hover:bg-green-700">
+                                    <Button type="submit" className="bg-green-600 hover:bg-green-700 text-white">
                                         Salvar Exceção
                                     </Button>
                                 </div>
diff --git a/app/doctor/disponibilidade/page.tsx b/app/doctor/disponibilidade/page.tsx
index 9dd35b8..a7052c2 100644
--- a/app/doctor/disponibilidade/page.tsx
+++ b/app/doctor/disponibilidade/page.tsx
@@ -379,23 +379,23 @@ export default function AvailabilityPage() {
       <div className="space-y-6 flex-1 overflow-y-auto p-6">
         <div className="flex items-center justify-between">
           <div>
-            <h1 className="text-2xl font-bold text-gray-900">
+            <h1 className="text-2xl font-bold">
               Definir Disponibilidade
             </h1>
-            <p className="text-gray-600">
+            <p className="text-muted-foreground">
               Defina sua disponibilidade para consultas{" "}
             </p>
           </div>
         </div>
 
         <form className="space-y-6" onSubmit={handleSubmit}>
-          <div className="bg-white rounded-lg border border-gray-200 p-6">
-            <h2 className="text-lg font-semibold text-gray-900 mb-6">Dados </h2>
+          <div className="bg-card rounded-lg border p-6">
+            <h2 className="text-lg font-semibold mb-6">Dados </h2>
 
             <div className="space-y-6">
               {/* **AJUSTE DE RESPONSIVIDADE: DIAS DA SEMANA** */}
               <div>
-                <Label className="text-sm font-medium text-gray-700">
+                <Label className="text-sm font-medium">
                   Dia Da Semana
                 </Label>
                 {/* O antigo 'flex gap-4 mt-2 flex-nowrap' foi substituído por um grid responsivo: */}
@@ -405,7 +405,7 @@ export default function AvailabilityPage() {
                       type="radio"
                       name="weekday"
                       value="monday"
-                      className="text-blue-600"
+                      className="text-primary"
                     />
                     <span className="whitespace-nowrap text-sm">Segunda</span>
                   </label>
@@ -414,7 +414,7 @@ export default function AvailabilityPage() {
                       type="radio"
                       name="weekday"
                       value="tuesday"
-                      className="text-blue-600"
+                      className="text-primary"
                     />
                     <span className="whitespace-nowrap text-sm">Terça</span>
                   </label>
@@ -423,7 +423,7 @@ export default function AvailabilityPage() {
                       type="radio"
                       name="weekday"
                       value="wednesday"
-                      className="text-blue-600"
+                      className="text-primary"
                     />
                     <span className="whitespace-nowrap text-sm">Quarta</span>
                   </label>
@@ -432,7 +432,7 @@ export default function AvailabilityPage() {
                       type="radio"
                       name="weekday"
                       value="thursday"
-                      className="text-blue-600"
+                      className="text-primary"
                     />
                     <span className="whitespace-nowrap text-sm">Quinta</span>
                   </label>
@@ -441,7 +441,7 @@ export default function AvailabilityPage() {
                       type="radio"
                       name="weekday"
                       value="friday"
-                      className="text-blue-600"
+                      className="text-primary"
                     />
                     <span className="whitespace-nowrap text-sm">Sexta</span>
                   </label>
@@ -450,7 +450,7 @@ export default function AvailabilityPage() {
                       type="radio"
                       name="weekday"
                       value="saturday"
-                      className="text-blue-600"
+                      className="text-primary"
                     />
                     <span className="whitespace-nowrap text-sm">Sábado</span>
                   </label>
@@ -459,7 +459,7 @@ export default function AvailabilityPage() {
                       type="radio"
                       name="weekday"
                       value="sunday"
-                      className="text-blue-600"
+                      className="text-primary"
                     />
                     <span className="whitespace-nowrap text-sm">Domingo</span>
                   </label>
@@ -472,7 +472,7 @@ export default function AvailabilityPage() {
                 <div>
                   <Label
                     htmlFor="horarioEntrada"
-                    className="text-sm font-medium text-gray-700"
+                    className="text-sm font-medium"
                   >
                     Horario De Entrada
                   </Label>
@@ -487,7 +487,7 @@ export default function AvailabilityPage() {
                 <div>
                   <Label
                     htmlFor="horarioSaida"
-                    className="text-sm font-medium text-gray-700"
+                    className="text-sm font-medium"
                   >
                     Horario De Saida
                   </Label>
@@ -502,9 +502,9 @@ export default function AvailabilityPage() {
                 <div>
                   <Label
                     htmlFor="duracaoConsulta"
-                    className="text-sm font-medium text-gray-700"
+                    className="text-sm font-medium whitespace-nowrap"
                   >
-                    Duração Da Consulta (min)
+                  Duração da Consulta(min)
                   </Label>
                   <Input
                     type="number"
@@ -520,7 +520,7 @@ export default function AvailabilityPage() {
               <div>
                 <Label
                   htmlFor="modalidadeConsulta"
-                  className="text-sm font-medium text-gray-700"
+                  className="text-sm font-medium"
                 >
                   Modalidade De Consulta
                 </Label>
@@ -551,7 +551,7 @@ export default function AvailabilityPage() {
                             <Link href="/doctor/dashboard" className="w-full sm:w-auto">
                                 <Button variant="outline" className="w-full sm:w-auto">Cancelar</Button>
                             </Link>
-                            <Button type="submit" className="bg-blue-600 hover:bg-blue-700 w-full sm:w-auto">
+                            <Button type="submit" className="bg-primary hover:bg-primary/90 w-full sm:w-auto">
                                 Salvar Disponibilidade
                             </Button>
                         </div>
@@ -571,15 +571,15 @@ export default function AvailabilityPage() {
                                 const times = schedule[day] || [];
                                 return (
                                     <div key={day} className="space-y-4">
-                                        <div className="flex flex-col items-center justify-between p-3 bg-blue-50 rounded-lg h-full">
-                                            <p className="font-medium capitalize text-center mb-2">{weekdaysPT[day]}</p>
-                                            <div className="text-center w-full">
+                                        <div className="flex flex-col items-center justify-start p-3 bg-primary/10 rounded-lg min-h-[76px] ">
+                                            <p className="font-medium capitalize text-center ">{weekdaysPT[day]}</p>
+                                            <div className="text-center w-full mt-2">
                                                 {times.length > 0 ? (
                                                     times.map((t, i) => (
                                                         <div key={i}>
                                                             <DropdownMenu>
                                                                 <DropdownMenuTrigger asChild>
-                                                                    <p  className="text-sm text-gray-600 cursor-pointer rounded hover:text-accent-foreground hover:bg-gray-200 transition-colors duration-150">
+                                                                    <p  className="text-sm text-muted-foreground cursor-pointer rounded hover:text-accent-foreground hover:bg-muted transition-colors duration-150">
                                                                         {formatTime(t.start)} - {formatTime(t.end)}
                                                                     </p>
                                                                 </DropdownMenuTrigger>
@@ -590,7 +590,7 @@ export default function AvailabilityPage() {
                                                                     </DropdownMenuItem>
                                                                     <DropdownMenuItem
                                                                     onClick={() => openDeleteDialog(t, day)}
-                                                                    className="text-red-600 focus:bg-red-50 focus:text-red-600">
+                                                                    className="text-destructive focus:bg-destructive/10 focus:text-destructive">
                                                                     <Trash2 className="w-4 h-4 mr-2" />
                                                                     Excluir
                                                                     </DropdownMenuItem>
@@ -599,7 +599,7 @@ export default function AvailabilityPage() {
                                                         </div>
                                                     ))
                                                 ) : (
-                                                    <p className="text-sm text-gray-400 italic">Sem horário</p>
+                                                    <p className="text-sm text-muted-foreground italic">Sem horário</p>
                                                 )}
                                             </div>
                                         </div>
@@ -619,7 +619,7 @@ export default function AvailabilityPage() {
                         </AlertDialogHeader>
                         <AlertDialogFooter>
                             <AlertDialogCancel>Cancelar</AlertDialogCancel>
-                                <AlertDialogAction onClick={() => selectedAvailability && handleDeleteAvailability(selectedAvailability.id)} className="bg-red-600 hover:bg-red-700">
+                                <AlertDialogAction onClick={() => selectedAvailability && handleDeleteAvailability(selectedAvailability.id)} className="bg-destructive hover:bg-destructive/90">
                                     Excluir
                                 </AlertDialogAction>
                         </AlertDialogFooter>
diff --git a/app/globals.css b/app/globals.css
index 95ff1b4..d34f124 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -16,8 +16,8 @@
   --muted-foreground: oklch(0.556 0 0);
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --destructive: oklch(0.637 0.237 25.331);
+  --destructive-foreground: oklch(0.985 0 0);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
@@ -52,8 +52,8 @@
   --muted-foreground: oklch(0.708 0 0);
   --accent: oklch(0.269 0 0);
   --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.396 0.141 25.723);
-  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --destructive: oklch(0.7 0.25 25);
+  --destructive-foreground: oklch(0.985 0 0);
   --border: oklch(0.269 0 0);
   --input: oklch(0.269 0 0);
   --ring: oklch(0.439 0 0);
@@ -87,7 +87,7 @@
   --muted-foreground: oklch(1 0.5 100);
   --accent: oklch(0 0 0);
   --accent-foreground: oklch(1 0.5 100);
-  --destructive: oklch(0.5 0.3 30);
+  --destructive: oklch(0.8 0.5 25);
   --destructive-foreground: oklch(0 0 0);
   --border: oklch(1 0.5 100);
   --input: oklch(0 0 0);
diff --git a/app/layout.tsx b/app/layout.tsx
index 797f31e..b358dcd 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -4,11 +4,7 @@ import { GeistMono } from "geist/font/mono";
 import { Analytics } from "@vercel/analytics/next";
 import "./globals.css";
 import { Toaster } from "@/components/ui/toaster";
-// [PASSO 1.2] - Importando o nosso provider
-import { AppointmentsProvider } from "./context/AppointmentsContext";
-import { AccessibilityProvider } from "./context/AccessibilityContext";
-import { AccessibilityModal } from "@/components/accessibility-modal";
-import { ThemeInitializer } from "@/components/theme-initializer";
+import { Providers } from "./providers";
 
 export default function RootLayout({
     children,
@@ -18,12 +14,7 @@ export default function RootLayout({
     return (
         <html lang="en" suppressHydrationWarning>
             <body className={`font-sans ${GeistSans.variable} ${GeistMono.variable}`}>
-                {/* [PASSO 1.2] - Envolvendo a aplicação com o provider */}
-                <ThemeInitializer />
-                <AccessibilityProvider>
-                    <AppointmentsProvider>{children}</AppointmentsProvider>
-                    <AccessibilityModal />
-                </AccessibilityProvider>
+                <Providers>{children}</Providers>
                 <Analytics />
                 <Toaster />
             </body>
diff --git a/app/login/page.tsx b/app/login/page.tsx
index 4af96d9..951e3ba 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -97,7 +97,7 @@ export default function LoginPage() {
           </div>
 
           {/* O contêiner principal que agora terá a sombra e o estilo de card */}
-          <div className="w-full max-w-md bg-card p-10 rounded-2xl shadow-xl">
+          <div className="w-full max-w-md bg-card p-10 rounded-2xl shadow-xl border-2 border-border mt-8">
             {/* NOVO: Bloco da Logo e Nome (Painel Esquerdo) */}
             <div className="flex items-center justify-center space-x-3 mb-8">
               <img
@@ -155,6 +155,7 @@ export default function LoginPage() {
             fill
             style={{ objectFit: "cover" }}
             priority
+            className="dark:opacity-80"
           />
           {/* Camada de sobreposição para escurecer a imagem e destacar o texto */}
           <div className="absolute inset-0 bg-primary/80 flex flex-col items-start justify-end p-12 text-left">
diff --git a/app/manager/dashboard/page.tsx b/app/manager/dashboard/page.tsx
index 11f5c19..1d29623 100644
--- a/app/manager/dashboard/page.tsx
+++ b/app/manager/dashboard/page.tsx
@@ -94,8 +94,8 @@ export default function ManagerDashboard() {
       <div className="space-y-6">
         {/* Cabeçalho */}
         <div>
-          <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
-          <p className="text-gray-600">
+          <h1 className="text-3xl font-bold">Dashboard</h1>
+          <p className="text-muted-foreground">
             Bem-vindo ao seu portal de consultas médicas
           </p>
         </div>
@@ -114,7 +114,7 @@ export default function ManagerDashboard() {
             </CardHeader>
             <CardContent>
               {loadingUser ? (
-                <div className="text-gray-500 text-sm">
+                <div className="text-muted-foreground text-sm">
                   Carregando usuário...
                 </div>
               ) : firstUser ? (
@@ -127,7 +127,7 @@ export default function ManagerDashboard() {
                   </p>
                 </>
               ) : (
-                <div className="text-sm text-gray-500">
+                <div className="text-sm text-muted-foreground">
                   Nenhum usuário encontrado
                 </div>
               )}
@@ -159,15 +159,15 @@ export default function ManagerDashboard() {
             </CardHeader>
             <CardContent className="space-y-4">
               <Link href="/manager/home">
-                <Button className="w-full justify-start bg-blue-600 text-white hover:bg-blue-700">
-                  <User className="mr-2 h-4 w-4 text-white" />
+                <Button className="w-full justify-start">
+                  <User className="mr-2 h-4 w-4" />
                   Gestão de Médicos
                 </Button>
               </Link>
               <Link href="/manager/usuario">
                 <Button
                   variant="outline"
-                  className="w-full justify-start bg-transparent"
+                  className="w-full justify-start"
                 >
                   <User className="mr-2 h-4 w-4" />
                   Usuários Cadastrados
@@ -176,7 +176,7 @@ export default function ManagerDashboard() {
               <Link href="/manager/home/novo">
                 <Button
                   variant="outline"
-                  className="w-full justify-start bg-transparent"
+                  className="w-full justify-start"
                 >
                   <Plus className="mr-2 h-4 w-4" />
                   Adicionar Novo Médico
@@ -185,7 +185,7 @@ export default function ManagerDashboard() {
               <Link href="/manager/usuario/novo">
                 <Button
                   variant="outline"
-                  className="w-full justify-start bg-transparent"
+                  className="w-full justify-start"
                 >
                   <Plus className="mr-2 h-4 w-4" />
                   Criar novo Usuário
@@ -204,9 +204,9 @@ export default function ManagerDashboard() {
             </CardHeader>
             <CardContent>
               {loadingDoctors ? (
-                <p className="text-sm text-gray-500">Carregando médicos...</p>
+                <p className="text-sm text-muted-foreground">Carregando médicos...</p>
               ) : doctors.length === 0 ? (
-                <p className="text-sm text-gray-500">
+                <p className="text-sm text-muted-foreground">
                   Nenhum médico cadastrado.
                 </p>
               ) : (
@@ -214,18 +214,18 @@ export default function ManagerDashboard() {
                   {doctors.map((doc, index) => (
                     <div
                       key={index}
-                      className="flex items-center justify-between p-3 bg-green-50 rounded-lg border border-green-100"
+                      className="flex items-center justify-between p-3 bg-secondary rounded-lg border"
                     >
                       <div>
                         <p className="font-medium">
                           {doc.full_name || "Sem nome"}
                         </p>
-                        <p className="text-sm text-gray-600">
+                        <p className="text-sm text-muted-foreground">
                           {doc.specialty || "Sem especialidade"}
                         </p>
                       </div>
                       <div className="text-right">
-                        <p className="font-medium text-green-700">
+                        <p className="font-medium text-primary">
                           {doc.active ? "Ativo" : "Inativo"}
                         </p>
                       </div>
diff --git a/app/manager/disponibilidade/page.tsx b/app/manager/disponibilidade/page.tsx
index adfcd80..dd44da7 100644
--- a/app/manager/disponibilidade/page.tsx
+++ b/app/manager/disponibilidade/page.tsx
@@ -84,7 +84,7 @@ export default function AllAvailabilities() {
     if (loading) {
         return (
             <Sidebar>
-                <div className="p-6 text-gray-500">Carregando dados...</div>
+                <div className="p-6 text-muted-foreground">Carregando dados...</div>
             </Sidebar>
         );
     }
@@ -92,7 +92,7 @@ export default function AllAvailabilities() {
     if (!doctors || !availabilities) {
         return (
             <Sidebar>
-                <div className="p-6 text-red-600 font-medium">Não foi possível carregar médicos ou disponibilidades.</div>
+                <div className="p-6 text-destructive font-medium">Não foi possível carregar médicos ou disponibilidades.</div>
             </Sidebar>
         );
     }
@@ -101,8 +101,8 @@ export default function AllAvailabilities() {
         <Sidebar>
             <div className="space-y-6">
                 <div>
-                    <h1 className="text-3xl font-bold text-gray-900">Disponibilidade dos Médicos</h1>
-                    <p className="text-gray-600">Visualize a agenda semanal individual de cada médico.</p>
+                    <h1 className="text-3xl font-bold">Disponibilidade dos Médicos</h1>
+                    <p className="text-muted-foreground">Visualize a agenda semanal individual de cada médico.</p>
                 </div>
                 <Card>
                     <CardContent>
@@ -170,7 +170,7 @@ export default function AllAvailabilities() {
                             Anterior
                         </Button>
 
-                        <span className="text-gray-700 font-medium">
+                        <span className="text-muted-foreground font-medium">
                             Página {page} de {totalPages}
                         </span>
 
diff --git a/app/manager/home/[id]/editar/page.tsx b/app/manager/home/[id]/editar/page.tsx
index 1cce7a8..b2a5a8f 100644
--- a/app/manager/home/[id]/editar/page.tsx
+++ b/app/manager/home/[id]/editar/page.tsx
@@ -209,8 +209,8 @@ export default function EditarMedicoPage() {
         return (
             <Sidebar>
                 <div className="flex justify-center items-center h-full w-full py-16">
-                    <Loader2 className="w-8 h-8 animate-spin text-green-600" />
-                    <p className="ml-2 text-gray-600">Carregando dados do médico...</p>
+                    <Loader2 className="w-8 h-8 animate-spin text-primary" />
+                    <p className="ml-2 text-muted-foreground">Carregando dados do médico...</p>
                 </div>
             </Sidebar>
         );
@@ -221,10 +221,10 @@ export default function EditarMedicoPage() {
             <div className="w-full space-y-6 p-4 md:p-8">
                 <div className="flex items-center justify-between">
                     <div>
-                        <h1 className="text-2xl font-bold text-gray-900">
-                            Editar Médico: <span className="text-green-600">{formData.nomeCompleto}</span>
+                        <h1 className="text-2xl font-bold text-foreground">
+                            Editar Médico: <span className="text-primary">{formData.nomeCompleto}</span>
                         </h1>
-                        <p className="text-sm text-gray-500">
+                        <p className="text-sm text-muted-foreground">
                             Atualize as informações do médico
                         </p>
                     </div>
@@ -239,14 +239,14 @@ export default function EditarMedicoPage() {
                 <form onSubmit={handleSubmit} className="space-y-6">
 
                     {error && (
-                        <div className="p-3 bg-red-100 text-red-700 rounded-lg border border-red-300">
+                        <div className="p-3 rounded-lg border bg-destructive/10 text-destructive border-destructive/30">
                             <p className="font-medium">Erro na Atualização:</p>
                             <p className="text-sm">{error}</p>
                         </div>
                     )}
 
-                    <div className="space-y-4 p-4 border rounded-xl shadow-sm bg-white">
-                        <h2 className="text-lg font-semibold text-gray-800 border-b pb-2">
+                    <div className="space-y-4 p-4 rounded-xl border border-border shadow-sm bg-card">
+                        <h2 className="text-lg font-semibold text-foreground border-b border-border pb-2">
                             Dados Principais e Pessoais
                         </h2>
                         <div className="grid md:grid-cols-4 gap-4">
@@ -348,8 +348,8 @@ export default function EditarMedicoPage() {
                         </div>
                     </div>
 
-                    <div className="space-y-4 p-4 border rounded-xl shadow-sm bg-white">
-                        <h2 className="text-lg font-semibold text-gray-800 border-b pb-2">
+                    <div className="space-y-4 p-4 rounded-xl border border-border shadow-sm bg-card">
+                        <h2 className="text-lg font-semibold text-foreground border-b border-border pb-2">
                             Contato e Endereço
                         </h2>
 
@@ -452,8 +452,8 @@ export default function EditarMedicoPage() {
                     </div>
 
 
-                    <div className="space-y-4 p-4 border rounded-xl shadow-sm bg-white">
-                        <h2 className="text-lg font-semibold text-gray-800 border-b pb-2">
+                    <div className="space-y-4 p-4 rounded-xl border border-border shadow-sm bg-card">
+                        <h2 className="text-lg font-semibold text-foreground border-b border-border pb-2">
                             Observações (Apenas internas)
                         </h2>
                         <Textarea
@@ -474,7 +474,7 @@ export default function EditarMedicoPage() {
                         </Link>
                         <Button
                             type="submit"
-                            className="bg-green-600 hover:bg-green-700"
+                            className="bg-primary hover:bg-primary/90"
                             disabled={isSaving}
                         >
                             {isSaving ? (
diff --git a/app/manager/home/page.tsx b/app/manager/home/page.tsx
index f4ed3a0..f482265 100644
--- a/app/manager/home/page.tsx
+++ b/app/manager/home/page.tsx
@@ -224,10 +224,10 @@ export default function DoctorsPage() {
         {/* Cabeçalho */}
         <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
           <div>
-            <h1 className="text-2xl font-bold text-gray-900">
+            <h1 className="text-2xl font-bold">
               Médicos Cadastrados
             </h1>
-            <p className="text-sm text-gray-500">
+            <p className="text-sm text-muted-foreground">
               Gerencie todos os profissionais de saúde.
             </p>
           </div>
@@ -270,54 +270,54 @@ export default function DoctorsPage() {
                 </FilterBar>
 
                 {/* Tabela de Médicos */}
-                <div className="bg-white rounded-lg border border-gray-200 shadow-md overflow-hidden hidden md:block">
+                <div className="bg-card rounded-lg border shadow-md overflow-hidden hidden md:block">
                     {loading ? (
-                        <div className="p-8 text-center text-gray-500">
-                            <Loader2 className="w-8 h-8 animate-spin mx-auto mb-3 text-green-600" />
+                        <div className="p-8 text-center text-muted-foreground">
+                            <Loader2 className="w-8 h-8 animate-spin mx-auto mb-3 text-primary" />
                             Carregando médicos...
                         </div>
                     ) : error ? (
-                        <div className="p-8 text-center text-red-600">{error}</div>
+                        <div className="p-8 text-center text-destructive">{error}</div>
                     ) : filteredDoctors.length === 0 ? (
-                        <div className="p-8 text-center text-gray-500">
+                        <div className="p-8 text-center text-muted-foreground">
                             {doctors.length === 0
-                                ? <>Nenhum médico cadastrado. <Link href="/manager/home/novo" className="text-green-600 hover:underline">Adicione um novo</Link>.</>
+                                ? <>Nenhum médico cadastrado. <Link href="/manager/home/novo" className="text-primary hover:underline">Adicione um novo</Link>.</>
                                 : "Nenhum médico encontrado com os filtros aplicados."
                             }
                         </div>
                     ) : (
                         <div className="overflow-x-auto">
                             <table className="w-full min-w-[600px]">
-                                <thead className="bg-gray-50 border-b border-gray-200">
+                                <thead className="bg-muted border-b">
                                     <tr>
-                                        <th className="text-left p-2 md:p-4 font-medium text-gray-700">Nome</th>
-                                        <th className="text-left p-2 md:p-4 font-medium text-gray-700">CRM</th>
-                                        <th className="text-left p-2 md:p-4 font-medium text-gray-700">Especialidade</th>
-                                        <th className="text-left p-2 md:p-4 font-medium text-gray-700 hidden lg:table-cell">Status</th>
-                                        <th className="text-left p-2 md:p-4 font-medium text-gray-700 hidden xl:table-cell">Cidade/Estado</th>
-                                        <th className="text-right p-4 font-medium text-gray-700">Ações</th>
+                                        <th className="text-left p-2 md:p-4 font-medium text-muted-foreground">Nome</th>
+                                        <th className="text-left p-2 md:p-4 font-medium text-muted-foreground">CRM</th>
+                                        <th className="text-left p-2 md:p-4 font-medium text-muted-foreground">Especialidade</th>
+                                        <th className="text-left p-2 md:p-4 font-medium text-muted-foreground hidden lg:table-cell">Status</th>
+                                        <th className="text-left p-2 md:p-4 font-medium text-muted-foreground hidden xl:table-cell">Cidade/Estado</th>
+                                        <th className="text-right p-4 font-medium text-muted-foreground">Ações</th>
                                     </tr>
                                 </thead>
-                                <tbody className="bg-white divide-y divide-gray-200">
+                                <tbody className="bg-card divide-y">
                                     {currentItems.map((doctor) => (
-                                        <tr key={doctor.id} className="hover:bg-gray-50 transition">
-                                            <td className="px-4 py-3 font-medium text-gray-900">
+                                        <tr key={doctor.id} className="hover:bg-muted transition">
+                                            <td className="px-4 py-3 font-medium">
                                                 {doctor.full_name}
                                             </td>
-                                            <td className="px-4 py-3 text-gray-500 hidden sm:table-cell">{doctor.crm}</td>
-                                            <td className="px-4 py-3 text-gray-500 hidden md:table-cell">
+                                            <td className="px-4 py-3 text-muted-foreground hidden sm:table-cell">{doctor.crm}</td>
+                                            <td className="px-4 py-3 text-muted-foreground hidden md:table-cell">
                                                 {/* Exibe Especialidade Normalizada */}
                                                 {normalizeSpecialty(doctor.specialty)}
                                             </td>
-                                            <td className="px-4 py-3 text-gray-500 hidden lg:table-cell">
+                                            <td className="px-4 py-3 text-muted-foreground hidden lg:table-cell">
                                                 <span className={`px-2 py-1 rounded-full text-xs ${
-                                                    doctor.status === 'Ativo' ? 'bg-green-100 text-green-800' : 
-                                                    doctor.status === 'Inativo' ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800'
+                                                    doctor.status === 'Ativo' ? 'bg-primary/10 text-primary' : 
+                                                    doctor.status === 'Inativo' ? 'bg-destructive/10 text-destructive' : 'bg-yellow-400/10 text-yellow-400'
                                                 }`}>
                                                     {doctor.status || "N/A"}
                                                 </span>
                                             </td>
-                                            <td className="px-4 py-3 text-gray-500 hidden xl:table-cell">
+                                            <td className="px-4 py-3 text-muted-foreground hidden xl:table-cell">
                                                 {(doctor.city || doctor.state)
                                                     ? `${doctor.city || ""}${doctor.city && doctor.state ? '/' : ''}${doctor.state || ""}`
                                                     : "N/A"}
@@ -345,7 +345,7 @@ export default function DoctorsPage() {
                                                             <Calendar className="mr-2 h-4 w-4" />
                                                             Marcar consulta
                                                         </DropdownMenuItem>
-                                                        <DropdownMenuItem className="text-red-600" onClick={() => openDeleteDialog(doctor.id)}>
+                                                        <DropdownMenuItem className="text-destructive" onClick={() => openDeleteDialog(doctor.id)}>
                                                             <Trash2 className="mr-2 h-4 w-4" />
                                                             Excluir
                                                         </DropdownMenuItem>
@@ -361,33 +361,33 @@ export default function DoctorsPage() {
                 </div>
 
                 {/* Cards de Médicos (Mobile) */}
-                <div className="bg-white rounded-lg border border-gray-200 shadow-md p-4 block md:hidden">
+                <div className="bg-card rounded-lg border shadow-md p-4 block md:hidden">
                     {loading ? (
-                        <div className="p-8 text-center text-gray-500">
-                            <Loader2 className="w-8 h-8 animate-spin mx-auto mb-3 text-green-600" />
+                        <div className="p-8 text-center text-muted-foreground">
+                            <Loader2 className="w-8 h-8 animate-spin mx-auto mb-3 text-primary" />
                             Carregando médicos...
                         </div>
                     ) : error ? (
-                        <div className="p-8 text-center text-red-600">{error}</div>
+                        <div className="p-8 text-center text-destructive">{error}</div>
                     ) : filteredDoctors.length === 0 ? (
-                        <div className="p-8 text-center text-gray-500">
+                        <div className="p-8 text-center text-muted-foreground">
                             {doctors.length === 0
-                                ? <>Nenhum médico cadastrado. <Link href="/manager/home/novo" className="text-green-600 hover:underline">Adicione um novo</Link>.</>
+                                ? <>Nenhum médico cadastrado. <Link href="/manager/home/novo" className="text-primary hover:underline">Adicione um novo</Link>.</>
                                 : "Nenhum médico encontrado com os filtros aplicados."
                             }
                         </div>
                     ) : (
                         <div className="space-y-4">
                             {currentItems.map((doctor) => (
-                                <div key={doctor.id} className="bg-gray-50 rounded-lg p-4 flex justify-between items-center border border-gray-100">
+                                <div key={doctor.id} className="bg-muted rounded-lg p-4 flex justify-between items-center border">
                                     <div>
-                                        <div className="font-semibold text-gray-900">{doctor.full_name}</div>
-                                        <div className="text-xs text-gray-500 mb-1">{doctor.phone_mobile}</div>
-                                        <div className="text-sm text-gray-600">{normalizeSpecialty(doctor.specialty)}</div>
+                                        <div className="font-semibold">{doctor.full_name}</div>
+                                        <div className="text-xs text-muted-foreground mb-1">{doctor.phone_mobile}</div>
+                                        <div className="text-sm text-muted-foreground">{normalizeSpecialty(doctor.specialty)}</div>
                                         <div className="text-xs mt-1">
                                             <span className={`px-2 py-0.5 rounded-full text-xs ${
-                                                    doctor.status === 'Ativo' ? 'bg-green-100 text-green-800' : 
-                                                    doctor.status === 'Inativo' ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800'
+                                                    doctor.status === 'Ativo' ? 'bg-primary/10 text-primary' : 
+                                                    doctor.status === 'Inativo' ? 'bg-destructive/10 text-destructive' : 'bg-yellow-400/10 text-yellow-400'
                                                 }`}>
                                                     {doctor.status || "N/A"}
                                             </span>
@@ -397,7 +397,7 @@ export default function DoctorsPage() {
                                         <DropdownMenuTrigger asChild>
                                             <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                                                 <span className="sr-only">Abrir menu</span>
-                                                <div className="font-bold text-gray-500">...</div>
+                                                <div className="font-bold text-muted-foreground">...</div>
                                             </Button>
                                         </DropdownMenuTrigger>
                                         <DropdownMenuContent align="end">
@@ -411,7 +411,7 @@ export default function DoctorsPage() {
                                                     Editar
                                                 </Link>
                                             </DropdownMenuItem>
-                                            <DropdownMenuItem className="text-red-600" onClick={() => openDeleteDialog(doctor.id)}>
+                                            <DropdownMenuItem className="text-destructive" onClick={() => openDeleteDialog(doctor.id)}>
                                                 <Trash2 className="mr-2 h-4 w-4" />
                                                 Excluir
                                             </DropdownMenuItem>
@@ -425,11 +425,11 @@ export default function DoctorsPage() {
 
         {/* Paginação */}
         {totalPages > 1 && (
-          <div className="flex flex-wrap justify-center items-center gap-2 mt-4 p-4 bg-white rounded-lg border border-gray-200 shadow-md">
+          <div className="flex flex-wrap justify-center items-center gap-2 mt-4 p-4 bg-card rounded-lg border shadow-md">
             <button
               onClick={goToPrevPage}
               disabled={currentPage === 1}
-              className="flex items-center px-4 py-2 rounded-md font-medium transition-colors text-sm bg-gray-100 text-gray-700 hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed border border-gray-300"
+              className="flex items-center px-4 py-2 rounded-md font-medium transition-colors text-sm bg-muted text-muted-foreground hover:bg-muted/90 disabled:opacity-50 disabled:cursor-not-allowed border"
             >
               {"< Anterior"}
             </button>
@@ -438,10 +438,10 @@ export default function DoctorsPage() {
               <button
                 key={number}
                 onClick={() => paginate(number)}
-                className={`px-4 py-2 rounded-md font-medium transition-colors text-sm border border-gray-300 ${
+                className={`px-4 py-2 rounded-md font-medium transition-colors text-sm border ${
                   currentPage === number
-                    ? "bg-blue-600 text-white shadow-md border-blue-600"
-                    : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+                    ? "bg-primary text-primary-foreground shadow-md border-primary"
+                    : "bg-muted text-muted-foreground hover:bg-muted/90"
                 }`}
               >
                 {number}
@@ -451,7 +451,7 @@ export default function DoctorsPage() {
             <button
               onClick={goToNextPage}
               disabled={currentPage === totalPages}
-              className="flex items-center px-4 py-2 rounded-md font-medium transition-colors text-sm bg-gray-100 text-gray-700 hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed border border-gray-300"
+              className="flex items-center px-4 py-2 rounded-md font-medium transition-colors text-sm bg-muted text-muted-foreground hover:bg-muted/90 disabled:opacity-50 disabled:cursor-not-allowed border"
             >
               {"Próximo >"}
             </button>
@@ -467,7 +467,7 @@ export default function DoctorsPage() {
                         </AlertDialogHeader>
                         <AlertDialogFooter>
                             <AlertDialogCancel disabled={loading}>Cancelar</AlertDialogCancel>
-                            <AlertDialogAction onClick={handleDelete} className="bg-red-600 hover:bg-red-700" disabled={loading}>
+                            <AlertDialogAction onClick={handleDelete} className="bg-destructive hover:bg-destructive/90" disabled={loading}>
                                 {loading ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : null}
                                 Excluir
                             </AlertDialogAction>
@@ -484,7 +484,7 @@ export default function DoctorsPage() {
               <AlertDialogTitle className="text-2xl">
                 {doctorDetails?.nome}
               </AlertDialogTitle>
-              <AlertDialogDescription className="text-left text-gray-700">
+              <AlertDialogDescription className="text-left text-muted-foreground">
                 {doctorDetails && (
                   <div className="space-y-3 text-left">
                     <h3 className="font-semibold mt-2">
@@ -537,7 +537,7 @@ export default function DoctorsPage() {
                   </div>
                 )}
                 {doctorDetails === null && !loading && (
-                  <div className="text-red-600">Detalhes não disponíveis.</div>
+                  <div className="text-destructive">Detalhes não disponíveis.</div>
                 )}
               </AlertDialogDescription>
             </AlertDialogHeader>
diff --git a/app/manager/login/page.tsx b/app/manager/login/page.tsx
index cb236d3..21b4c97 100644
--- a/app/manager/login/page.tsx
+++ b/app/manager/login/page.tsx
@@ -8,7 +8,7 @@ export default function ManagerLoginPage() {
     // O ideal no futuro é deletar esta página e redirecionar os usuários.
 
     return (
-        <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-blue-50 flex items-center justify-center p-4">
+        <div className="min-h-screen bg-background flex items-center justify-center p-4">
             <div className="w-full max-w-md text-center">
                 <h1 className="text-3xl font-bold text-foreground mb-2">Área do Gestor</h1>
                 <p className="text-muted-foreground mb-8">Acesse o sistema médico</p>
diff --git a/app/manager/pacientes/[id]/editar/page.tsx b/app/manager/pacientes/[id]/editar/page.tsx
index 51858d7..73d061a 100644
--- a/app/manager/pacientes/[id]/editar/page.tsx
+++ b/app/manager/pacientes/[id]/editar/page.tsx
@@ -31,34 +31,35 @@ export default function EditarPacientePage() {
     const [isUploadingAnexo, setIsUploadingAnexo] = useState(false);
     const anexoInputRef = useRef<HTMLInputElement | null>(null);
 
+    // Tipagem completa do formulário
     type FormData = {
-        nome: string; // full_name
+        nome: string; 
         cpf: string;
-        dataNascimento: string; // birth_date
-        sexo: string; // sex
+        dataNascimento: string;
+        sexo: string;
         id?: string;
-        nomeSocial?: string; // social_name
+        nomeSocial?: string;
         rg?: string;
-        documentType?: string; // document_type
-        documentNumber?: string; // document_number
+        documentType?: string;
+        documentNumber?: string;
         ethnicity?: string;
         race?: string;
         naturality?: string;
         nationality?: string;
         profession?: string;
-        maritalStatus?: string; // marital_status
-        motherName?: string; // mother_name
-        motherProfession?: string; // mother_profession
-        fatherName?: string; // father_name
-        fatherProfession?: string; // father_profession
-        guardianName?: string; // guardian_name
-        guardianCpf?: string; // guardian_cpf
-        spouseName?: string; // spouse_name
-        rnInInsurance?: boolean; // rn_in_insurance
-        legacyCode?: string; // legacy_code
+        maritalStatus?: string;
+        motherName?: string;
+        motherProfession?: string;
+        fatherName?: string;
+        fatherProfession?: string;
+        guardianName?: string;
+        guardianCpf?: string;
+        spouseName?: string;
+        rnInInsurance?: boolean;
+        legacyCode?: string;
         notes?: string;
         email?: string;
-        phoneMobile?: string; // phone_mobile
+        phoneMobile?: string;
         phone1?: string;
         phone2?: string;
         cep?: string;
@@ -82,7 +83,6 @@ export default function EditarPacientePage() {
         bloodType?: string;
     };
 
-
     const [formData, setFormData] = useState<FormData>({
         nome: "",
         cpf: "",
@@ -141,7 +141,6 @@ export default function EditarPacientePage() {
         async function fetchPatient() {
             try {
                 const res = await patientsService.getById(patientId); 
-                // Map API snake_case/nested to local camelCase form
                 setFormData({
                     id: res[0]?.id ?? "",
                     nome: res[0]?.full_name ?? "",
@@ -206,7 +205,6 @@ export default function EditarPacientePage() {
 
     const handleSubmit = async (e: React.FormEvent) => {
         e.preventDefault();
-        // Build API payload (snake_case)
         const payload = {
             full_name: formData.nome || null,
             cpf: formData.cpf || null,
@@ -247,39 +245,42 @@ export default function EditarPacientePage() {
 
     return (
         <Sidebar>
-            <div className="space-y-6">
-                <div className="flex items-center gap-4">
-                    <Link href="/manager/pacientes">
-                        <Button variant="ghost" size="sm">
-                            <ArrowLeft className="w-4 h-4 mr-2" />
-                            Voltar
-                        </Button>
-                    </Link>
-                    <div>
-                        <h1 className="text-2xl font-bold text-gray-900">Editar Paciente</h1>
-                        <p className="text-gray-600">Atualize as informações do paciente</p>
+            <div className="space-y-6 px-2 sm:px-4 pb-20">
+                {/* --- HEADER RESPONSIVO --- */}
+                <div className="flex flex-col xl:flex-row gap-6 xl:items-start xl:justify-between">
+                    <div className="flex flex-col sm:flex-row sm:items-center gap-4">
+                        <Link href="/manager/pacientes">
+                            <Button variant="ghost" size="sm" className="-ml-2">
+                                <ArrowLeft className="w-4 h-4 mr-2" />
+                                Voltar
+                            </Button>
+                        </Link>
+                        <div>
+                            <h1 className="text-xl sm:text-2xl font-bold text-foreground">Editar Paciente</h1>
+                            <p className="text-sm text-muted-foreground">Atualize as informações do paciente</p>
+                        </div>
                     </div>
 
                     {/* Anexos Section */}
-                    <div className="bg-white rounded-lg border border-gray-200 p-6">
-                        <h2 className="text-lg font-semibold text-gray-900 mb-6">Anexos</h2>
+                    <div className="w-full xl:w-auto xl:min-w-[400px] bg-card rounded-lg border border-border p-4 sm:p-6">
+                        <h2 className="text-lg font-semibold text-foreground mb-4 sm:mb-6">Anexos</h2>
                         <div className="flex items-center gap-3 mb-4">
                             <input ref={anexoInputRef} type="file" className="hidden" />
-                            <Button type="button" variant="outline" disabled={isUploadingAnexo}>
+                            <Button type="button" variant="outline" size="sm" disabled={isUploadingAnexo} className="w-full sm:w-auto">
                                 <Paperclip className="w-4 h-4 mr-2" /> {isUploadingAnexo ? "Enviando..." : "Adicionar anexo"}
                             </Button>
                         </div>
                         {anexos.length === 0 ? (
-                            <p className="text-sm text-gray-500">Nenhum anexo encontrado.</p>
+                            <p className="text-sm text-muted-foreground">Nenhum anexo encontrado.</p>
                         ) : (
-                            <ul className="divide-y">
+                            <ul className="divide-y divide-border">
                                 {anexos.map((a) => (
                                     <li key={a.id} className="flex items-center justify-between py-2">
                                         <div className="flex items-center gap-2 min-w-0">
-                                            <Paperclip className="w-4 h-4 text-gray-500 shrink-0" />
-                                            <span className="text-sm text-gray-800 truncate">{a.nome || a.filename || `Anexo ${a.id}`}</span>
+                                            <Paperclip className="w-4 h-4 text-muted-foreground shrink-0" />
+                                            <span className="text-sm text-foreground truncate">{a.nome || a.filename || `Anexo ${a.id}`}</span>
                                         </div>
-                                        <Button type="button" variant="ghost" className="text-red-600">
+                                        <Button type="button" variant="ghost" size="sm" className="text-destructive">
                                             <Trash2 className="w-4 h-4 mr-1" /> Remover
                                         </Button>
                                     </li>
@@ -289,36 +290,38 @@ export default function EditarPacientePage() {
                     </div>
                 </div>
 
-                <form onSubmit={handleSubmit} className="space-y-8">
-                    <div className="bg-white rounded-lg border border-gray-200 p-6">
-                        <h2 className="text-lg font-semibold text-gray-900 mb-6">Dados Pessoais</h2>
+                <form onSubmit={handleSubmit} className="space-y-6 sm:space-y-8">
+                    {/* --- DADOS PESSOAIS --- */}
+                    <div className="bg-card rounded-lg border border-border p-4 sm:p-6">
+                        <h2 className="text-lg font-semibold text-foreground mb-4 sm:mb-6">Dados Pessoais</h2>
 
-                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                            {/* Photo upload */}
-                            <div className="space-y-2">
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
+                            {/* Photo upload Responsivo */}
+                            <div className="space-y-2 col-span-1 md:col-span-2 lg:col-span-3">
                                 <Label>Foto do paciente</Label>
-                                <div className="flex items-center gap-4">
-                                    <div className="w-20 h-20 rounded-full bg-gray-100 overflow-hidden flex items-center justify-center">
+                                <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4">
+                                    <div className="w-20 h-20 rounded-full bg-muted overflow-hidden flex items-center justify-center shrink-0 border">
                                         {photoUrl ? (
                                             // eslint-disable-next-line @next/next/no-img-element
                                             <img src={photoUrl} alt="Foto do paciente" className="w-full h-full object-cover" />
                                         ) : (
-                                            <span className="text-gray-400 text-sm">Sem foto</span>
+                                            <span className="text-muted-foreground text-xs text-center px-2">Sem foto</span>
                                         )}
                                     </div>
-                                    <div className="flex gap-2">
+                                    <div className="flex flex-wrap gap-2 w-full">
                                         <input ref={fileInputRef} type="file" accept="image/*" className="hidden" />
-                                        <Button type="button" variant="outline" disabled={isUploadingPhoto}>
+                                        <Button type="button" variant="outline" size="sm" disabled={isUploadingPhoto} className="flex-1 sm:flex-none">
                                             {isUploadingPhoto ? "Enviando..." : "Enviar foto"}
                                         </Button>
                                         {photoUrl && (
-                                            <Button type="button" variant="ghost" disabled={isUploadingPhoto}>
+                                            <Button type="button" variant="ghost" size="sm" disabled={isUploadingPhoto} className="flex-1 sm:flex-none">
                                                 Remover
                                             </Button>
                                         )}
                                     </div>
                                 </div>
                             </div>
+                            
                             <div className="space-y-2">
                                 <Label htmlFor="nome">Nome *</Label>
                                 <Input id="nome" value={formData.nome} onChange={(e) => handleInputChange("nome", e.target.value)} required />
@@ -336,13 +339,13 @@ export default function EditarPacientePage() {
 
                             <div className="space-y-2">
                                 <Label>Sexo *</Label>
-                                <div className="flex gap-4">
+                                <div className="flex flex-wrap gap-4 pt-2">
                                     <div className="flex items-center space-x-2">
-                                        <input type="radio" id="Masculino" name="sexo" value="Masculino" checked={formData.sexo === "Masculino"} onChange={(e) => handleInputChange("sexo", e.target.value)} className="w-4 h-4 text-blue-600" />
+                                        <input type="radio" id="Masculino" name="sexo" value="Masculino" checked={formData.sexo === "Masculino"} onChange={(e) => handleInputChange("sexo", e.target.value)} className="w-4 h-4 text-primary" />
                                         <Label htmlFor="Masculino">Masculino</Label>
                                     </div>
                                     <div className="flex items-center space-x-2">
-                                        <input type="radio" id="Feminino" name="sexo" value="Feminino" checked={formData.sexo === "Feminino"} onChange={(e) => handleInputChange("sexo", e.target.value)} className="w-4 h-4 text-blue-600" />
+                                        <input type="radio" id="Feminino" name="sexo" value="Feminino" checked={formData.sexo === "Feminino"} onChange={(e) => handleInputChange("sexo", e.target.value)} className="w-4 h-4 text-primary" />
                                         <Label htmlFor="Feminino">Feminino</Label>
                                     </div>
                                 </div>
@@ -353,12 +356,11 @@ export default function EditarPacientePage() {
                                 <Input id="dataNascimento" type="date" value={formData.dataNascimento} onChange={(e) => handleInputChange("dataNascimento", e.target.value)} required />
                             </div>
 
+                            {/* Demais campos de select e input */}
                             <div className="space-y-2">
                                 <Label htmlFor="etnia">Etnia</Label>
                                 <Select value={formData.ethnicity} onValueChange={(value) => handleInputChange("ethnicity", value)}>
-                                    <SelectTrigger>
-                                        <SelectValue placeholder="Selecione" />
-                                    </SelectTrigger>
+                                    <SelectTrigger><SelectValue placeholder="Selecione" /></SelectTrigger>
                                     <SelectContent>
                                         <SelectItem value="branca">Branca</SelectItem>
                                         <SelectItem value="preta">Preta</SelectItem>
@@ -372,9 +374,7 @@ export default function EditarPacientePage() {
                             <div className="space-y-2">
                                 <Label htmlFor="raca">Raça</Label>
                                 <Select value={formData.race} onValueChange={(value) => handleInputChange("race", value)}>
-                                    <SelectTrigger>
-                                        <SelectValue placeholder="Selecione" />
-                                    </SelectTrigger>
+                                    <SelectTrigger><SelectValue placeholder="Selecione" /></SelectTrigger>
                                     <SelectContent>
                                         <SelectItem value="caucasiana">Caucasiana</SelectItem>
                                         <SelectItem value="negroide">Negroide</SelectItem>
@@ -391,9 +391,7 @@ export default function EditarPacientePage() {
                             <div className="space-y-2">
                                 <Label htmlFor="nacionalidade">Nacionalidade</Label>
                                 <Select value={formData.nationality} onValueChange={(value) => handleInputChange("nationality", value)}>
-                                    <SelectTrigger>
-                                        <SelectValue placeholder="Selecione" />
-                                    </SelectTrigger>
+                                    <SelectTrigger><SelectValue placeholder="Selecione" /></SelectTrigger>
                                     <SelectContent>
                                         <SelectItem value="brasileira">Brasileira</SelectItem>
                                         <SelectItem value="estrangeira">Estrangeira</SelectItem>
@@ -409,9 +407,7 @@ export default function EditarPacientePage() {
                             <div className="space-y-2">
                                 <Label htmlFor="estadoCivil">Estado civil</Label>
                                 <Select value={formData.maritalStatus} onValueChange={(value) => handleInputChange("maritalStatus", value)}>
-                                    <SelectTrigger>
-                                        <SelectValue placeholder="Selecione" />
-                                    </SelectTrigger>
+                                    <SelectTrigger><SelectValue placeholder="Selecione" /></SelectTrigger>
                                     <SelectContent>
                                         <SelectItem value="solteiro">Solteiro(a)</SelectItem>
                                         <SelectItem value="casado">Casado(a)</SelectItem>
@@ -470,26 +466,22 @@ export default function EditarPacientePage() {
                         </div>
                     </div>
 
-                    {/* Contact Section */}
-                    <div className="bg-white rounded-lg border border-gray-200 p-6">
-                        <h2 className="text-lg font-semibold text-gray-900 mb-6">Contato</h2>
-
-                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                    {/* --- CONTATO --- */}
+                    <div className="bg-card rounded-lg border border-border p-4 sm:p-6">
+                        <h2 className="text-lg font-semibold text-foreground mb-4 sm:mb-6">Contato</h2>
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
                             <div className="space-y-2">
                                 <Label htmlFor="email">E-mail *</Label>
                                 <Input id="email" type="email" value={formData.email} onChange={(e) => handleInputChange("email", e.target.value)} required/>
                             </div>
-
                             <div className="space-y-2">
                                 <Label htmlFor="celular">Celular *</Label>
                                 <Input id="celular" value={formData.phoneMobile} onChange={(e) => handleInputChange("phoneMobile", e.target.value)} placeholder="(00) 00000-0000" required/>
                             </div>
-
                             <div className="space-y-2">
                                 <Label htmlFor="telefone1">Telefone 1</Label>
                                 <Input id="telefone1" value={formData.phone1} onChange={(e) => handleInputChange("phone1", e.target.value)} placeholder="(00) 0000-0000" />
                             </div>
-
                             <div className="space-y-2">
                                 <Label htmlFor="telefone2">Telefone 2</Label>
                                 <Input id="telefone2" value={formData.phone2} onChange={(e) => handleInputChange("phone2", e.target.value)} placeholder="(00) 0000-0000" />
@@ -497,47 +489,38 @@ export default function EditarPacientePage() {
                         </div>
                     </div>
 
-                    {/* Address Section */}
-                    <div className="bg-white rounded-lg border border-gray-200 p-6">
-                        <h2 className="text-lg font-semibold text-gray-900 mb-6">Endereço</h2>
-
-                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    {/* --- ENDEREÇO --- */}
+                    <div className="bg-card rounded-lg border border-border p-4 sm:p-6">
+                        <h2 className="text-lg font-semibold text-foreground mb-4 sm:mb-6">Endereço</h2>
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
                             <div className="space-y-2">
                                 <Label htmlFor="cep">CEP</Label>
                                 <Input id="cep" value={formData.cep} onChange={(e) => handleInputChange("cep", e.target.value)} placeholder="00000-000" />
                             </div>
-
-                            <div className="space-y-2">
+                            <div className="space-y-2 md:col-span-2 lg:col-span-2">
                                 <Label htmlFor="endereco">Endereço</Label>
                                 <Input id="endereco" value={formData.street} onChange={(e) => handleInputChange("street", e.target.value)} />
                             </div>
-
                             <div className="space-y-2">
                                 <Label htmlFor="numero">Número</Label>
                                 <Input id="numero" value={formData.number} onChange={(e) => handleInputChange("number", e.target.value)} />
                             </div>
-
                             <div className="space-y-2">
                                 <Label htmlFor="complemento">Complemento</Label>
                                 <Input id="complemento" value={formData.complement} onChange={(e) => handleInputChange("complement", e.target.value)} />
                             </div>
-
                             <div className="space-y-2">
                                 <Label htmlFor="bairro">Bairro</Label>
                                 <Input id="bairro" value={formData.neighborhood} onChange={(e) => handleInputChange("neighborhood", e.target.value)} />
                             </div>
-
                             <div className="space-y-2">
                                 <Label htmlFor="cidade">Cidade</Label>
                                 <Input id="cidade" value={formData.city} onChange={(e) => handleInputChange("city", e.target.value)} />
                             </div>
-
                             <div className="space-y-2">
                                 <Label htmlFor="estado">Estado</Label>
                                 <Select value={formData.state} onValueChange={(value) => handleInputChange("state", value)}>
-                                    <SelectTrigger>
-                                        <SelectValue placeholder="Selecione" />
-                                    </SelectTrigger>
+                                    <SelectTrigger><SelectValue placeholder="Selecione" /></SelectTrigger>
                                     <SelectContent>
                                         <SelectItem value="AC">Acre</SelectItem>
                                         <SelectItem value="AL">Alagoas</SelectItem>
@@ -572,17 +555,14 @@ export default function EditarPacientePage() {
                         </div>
                     </div>
 
-                    {/* Medical Information Section */}
-                    <div className="bg-white rounded-lg border border-gray-200 p-6">
-                        <h2 className="text-lg font-semibold text-gray-900 mb-6">Informações Médicas</h2>
-
-                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                    {/* --- INFORMAÇÕES MÉDICAS --- */}
+                    <div className="bg-card rounded-lg border border-border p-4 sm:p-6">
+                        <h2 className="text-lg font-semibold text-foreground mb-4 sm:mb-6">Informações Médicas</h2>
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
                             <div className="space-y-2">
                                 <Label htmlFor="tipoSanguineo">Tipo Sanguíneo</Label>
                                 <Select value={formData.bloodType} onValueChange={(value) => handleInputChange("bloodType", value)}>
-                                    <SelectTrigger>
-                                        <SelectValue placeholder="Selecione" />
-                                    </SelectTrigger>
+                                    <SelectTrigger><SelectValue placeholder="Selecione" /></SelectTrigger>
                                     <SelectContent>
                                         <SelectItem value="A+">A+</SelectItem>
                                         <SelectItem value="A-">A-</SelectItem>
@@ -595,40 +575,33 @@ export default function EditarPacientePage() {
                                     </SelectContent>
                                 </Select>
                             </div>
-
                             <div className="space-y-2">
                                 <Label htmlFor="peso">Peso (kg)</Label>
                                 <Input id="peso" type="number" value={formData.weightKg} onChange={(e) => handleInputChange("weightKg", e.target.value)} placeholder="0.0" />
                             </div>
-
                             <div className="space-y-2">
                                 <Label htmlFor="altura">Altura (m)</Label>
                                 <Input id="altura" type="number" step="0.01" value={formData.heightM} onChange={(e) => handleInputChange("heightM", e.target.value)} placeholder="0.00" />
                             </div>
-
                             <div className="space-y-2">
                                 <Label>IMC</Label>
                                 <Input value={formData.weightKg && formData.heightM ? (Number.parseFloat(formData.weightKg) / Number.parseFloat(formData.heightM) ** 2).toFixed(2) : ""} disabled placeholder="Calculado automaticamente" />
                             </div>
                         </div>
-
                         <div className="mt-6">
                             <Label htmlFor="alergias">Alergias</Label>
                             <Textarea id="alergias" onChange={(e) => handleInputChange("alergias", e.target.value)} placeholder="Ex: AAS, Dipirona, etc." className="mt-2" />
                         </div>
                     </div>
 
-                    {/* Insurance Information Section */}
-                    <div className="bg-white rounded-lg border border-gray-200 p-6">
-                        <h2 className="text-lg font-semibold text-gray-900 mb-6">Informações de convênio</h2>
-
-                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                    {/* --- CONVÊNIO --- */}
+                    <div className="bg-card rounded-lg border border-border p-4 sm:p-6">
+                        <h2 className="text-lg font-semibold text-foreground mb-4 sm:mb-6">Informações de convênio</h2>
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
                             <div className="space-y-2">
                                 <Label htmlFor="convenio">Convênio</Label>
-                                <Select  onValueChange={(value) => handleInputChange("convenio", value)}>
-                                    <SelectTrigger>
-                                        <SelectValue placeholder="Selecione" />
-                                    </SelectTrigger>
+                                <Select onValueChange={(value) => handleInputChange("convenio", value)}>
+                                    <SelectTrigger><SelectValue placeholder="Selecione" /></SelectTrigger>
                                     <SelectContent>
                                         <SelectItem value="Particular">Particular</SelectItem>
                                         <SelectItem value="SUS">SUS</SelectItem>
@@ -638,23 +611,19 @@ export default function EditarPacientePage() {
                                     </SelectContent>
                                 </Select>
                             </div>
-
                             <div className="space-y-2">
                                 <Label htmlFor="plano">Plano</Label>
                                 <Input id="plano"  onChange={(e) => handleInputChange("plano", e.target.value)} />
                             </div>
-
                             <div className="space-y-2">
                                 <Label htmlFor="numeroMatricula">Nº de matrícula</Label>
                                 <Input id="numeroMatricula"  onChange={(e) => handleInputChange("numeroMatricula", e.target.value)} />
                             </div>
-
                             <div className="space-y-2">
                                 <Label htmlFor="validadeCarteira">Validade da Carteira</Label>
                                 <Input id="validadeCarteira" type="date" onChange={(e) => handleInputChange("validadeCarteira", e.target.value)} disabled={validadeIndeterminada} />
                             </div>
                         </div>
-
                         <div className="mt-4">
                             <div className="flex items-center space-x-2">
                                 <Checkbox id="validadeIndeterminada" checked={validadeIndeterminada} onCheckedChange={(checked) => setValidadeIndeterminada(checked === true)} />
@@ -663,13 +632,14 @@ export default function EditarPacientePage() {
                         </div>
                     </div>
 
-                    <div className="flex justify-end gap-4">
-                        <Link href="/manager/pacientes">
-                            <Button type="button" variant="outline">
+                    {/* --- BOTÕES DE AÇÃO --- */}
+                    <div className="flex flex-col-reverse sm:flex-row justify-end gap-4 pt-4">
+                        <Link href="/manager/pacientes" className="w-full sm:w-auto">
+                            <Button type="button" variant="outline" className="w-full">
                                 Cancelar
                             </Button>
                         </Link>
-                        <Button type="submit" className="bg-blue-600 hover:bg-blue-700">
+                        <Button type="submit" className="bg-primary hover:bg-primary/90 w-full sm:w-auto">
                             <Save className="w-4 h-4 mr-2" />
                             Salvar Alterações
                         </Button>
@@ -678,4 +648,4 @@ export default function EditarPacientePage() {
             </div>
         </Sidebar>
     );
-}
+}
\ No newline at end of file
diff --git a/app/manager/pacientes/page.tsx b/app/manager/pacientes/page.tsx
index 0902af3..7ad6af8 100644
--- a/app/manager/pacientes/page.tsx
+++ b/app/manager/pacientes/page.tsx
@@ -5,108 +5,104 @@ import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Edit, Trash2, Eye, Calendar, Filter, Loader2, MoreVertical } from "lucide-react";
+import { Edit, Trash2, Eye, Calendar, Filter, Loader2, MoreVertical, Phone, MapPin, Activity, ChevronLeft, ChevronRight } from "lucide-react";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
 import { patientsService } from "@/services/patientsApi.mjs";
 import Sidebar from "@/components/Sidebar";
 
 export default function PacientesPage() {
-    // --- ESTADOS DE DADOS E GERAL ---
+    // --- ESTADOS ---
     const [searchTerm, setSearchTerm] = useState("");
     const [convenioFilter, setConvenioFilter] = useState("all");
     const [vipFilter, setVipFilter] = useState("all");
 
-    // Lista completa, carregada da API uma única vez
     const [allPatients, setAllPatients] = useState<any[]>([]);
-    // Lista após a aplicação dos filtros (base para a paginação)
     const [filteredPatients, setFilteredPatients] = useState<any[]>([]);
 
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
 
-    // --- ESTADOS DE PAGINAÇÃO ---
+    // --- PAGINAÇÃO ---
     const [page, setPage] = useState(1);
-    
-    // PADRONIZAÇÃO: Iniciar com 10 itens por página
     const [pageSize, setPageSize] = useState(10);
 
-    // CÁLCULO DA PAGINAÇÃO
     const totalPages = Math.ceil(filteredPatients.length / pageSize);
     const startIndex = (page - 1) * pageSize;
     const endIndex = startIndex + pageSize;
     
-    // Pacientes a serem exibidos na tabela (aplicando a paginação)
     const currentPatients = filteredPatients.slice(startIndex, endIndex);
 
-    // --- ESTADOS DE DIALOGS ---
+    // --- DIALOGS ---
     const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
     const [patientToDelete, setPatientToDelete] = useState<string | null>(null);
     const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
     const [patientDetails, setPatientDetails] = useState<any | null>(null);
 
-    // --- FUNÇÕES DE LÓGICA ---
+    // --- LÓGICA DE NÚMEROS DA PAGINAÇÃO (LIMITADO A 3) ---
+    const getPageNumbers = () => {
+        const maxVisible = 3;
+        
+        if (totalPages <= maxVisible) {
+            return Array.from({ length: totalPages }, (_, i) => i + 1);
+        }
 
-    // 1. Função para carregar TODOS os pacientes da API
-    const fetchAllPacientes = useCallback(
-        async () => {
-            setLoading(true);
-            setError(null);
-            try {
-                const res = await patientsService.list();
+        let start = Math.max(1, page - 1);
+        let end = Math.min(totalPages, start + maxVisible - 1);
 
-                const mapped = res.map((p: any) => ({
-                    id: String(p.id ?? ""),
-                    nome: p.full_name ?? "—",
-                    telefone: p.phone_mobile ?? p.phone1 ?? "—",
-                    cidade: p.city ?? "—",
-                    estado: p.state ?? "—",
-                    ultimoAtendimento: p.last_visit_at?.split('T')[0] ?? "—",
-                    proximoAtendimento: p.next_appointment_at?.split('T')[0] ?? "—",
-                    vip: Boolean(p.vip ?? false),
-                    convenio: p.convenio ?? "Particular",
-                    status: p.status ?? undefined,
-                }));
+        if (end === totalPages) {
+            start = Math.max(1, end - maxVisible + 1);
+        }
 
-                setAllPatients(mapped);
-            } catch (e: any) {
-                console.error(e);
-                setError(e?.message || "Erro ao buscar pacientes");
-            } finally {
-                setLoading(false);
-            }
-        }, []);
+        const pages = [];
+        for (let i = start; i <= end; i++) {
+            pages.push(i);
+        }
+        return pages;
+    };
 
-    // 2. Efeito para aplicar filtros
-    useEffect(() => {
-        const filtered = allPatients.filter((patient) => {
-            const matchesSearch =
-                patient.nome?.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                patient.telefone?.includes(searchTerm);
-
-            const matchesConvenio =
-                convenioFilter === "all" ||
-                patient.convenio === convenioFilter;
-
-            const matchesVip =
-                vipFilter === "all" ||
-                (vipFilter === "vip" && patient.vip) ||
-                (vipFilter === "regular" && !patient.vip);
-
-            return matchesSearch && matchesConvenio && matchesVip;
-        });
-
-        setFilteredPatients(filtered);
-        setPage(1); // Reseta a página ao filtrar
-    }, [allPatients, searchTerm, convenioFilter, vipFilter]);
-
-    // 3. Efeito inicial
-    useEffect(() => {
-        fetchAllPacientes();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+    // --- FETCH DADOS ---
+    const fetchAllPacientes = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const res = await patientsService.list();
+            const mapped = res.map((p: any) => ({
+                id: String(p.id ?? ""),
+                nome: p.full_name ?? "—",
+                telefone: p.phone_mobile ?? p.phone1 ?? "—",
+                cidade: p.city ?? "—",
+                estado: p.state ?? "—",
+                ultimoAtendimento: p.last_visit_at?.split('T')[0] ?? "—",
+                proximoAtendimento: p.next_appointment_at?.split('T')[0] ?? "—",
+                vip: Boolean(p.vip ?? false),
+                convenio: p.convenio ?? "Particular",
+                status: p.status ?? undefined,
+            }));
+            setAllPatients(mapped);
+        } catch (e: any) {
+            console.error(e);
+            setError(e?.message || "Erro ao buscar pacientes");
+        } finally {
+            setLoading(false);
+        }
     }, []);
 
-    // --- LÓGICA DE AÇÕES ---
+    useEffect(() => {
+        const filtered = allPatients.filter((patient) => {
+            const matchesSearch = patient.nome?.toLowerCase().includes(searchTerm.toLowerCase()) || patient.telefone?.includes(searchTerm);
+            const matchesConvenio = convenioFilter === "all" || patient.convenio === convenioFilter;
+            const matchesVip = vipFilter === "all" || (vipFilter === "vip" && patient.vip) || (vipFilter === "regular" && !patient.vip);
+            return matchesSearch && matchesConvenio && matchesVip;
+        });
+        setFilteredPatients(filtered);
+        setPage(1); 
+    }, [allPatients, searchTerm, convenioFilter, vipFilter]);
 
+    useEffect(() => {
+        fetchAllPacientes();
+    }, []);
+
+    // --- AÇÕES ---
     const openDetailsDialog = async (patientId: string) => {
         setDetailsDialogOpen(true);
         setPatientDetails(null);
@@ -121,9 +117,7 @@ export default function PacientesPage() {
     const handleDeletePatient = async (patientId: string) => {
         try {
             await patientsService.delete(patientId);
-            setAllPatients((prev) =>
-                prev.filter((p) => String(p.id) !== String(patientId))
-            );
+            setAllPatients((prev) => prev.filter((p) => String(p.id) !== String(patientId)));
         } catch (e: any) {
             alert(`Erro ao deletar paciente: ${e?.message || "Erro desconhecido"}`);
         }
@@ -131,335 +125,211 @@ export default function PacientesPage() {
         setPatientToDelete(null);
     };
 
-    const openDeleteDialog = (patientId: string) => {
-        setPatientToDelete(patientId);
-        setDeleteDialogOpen(true);
-    };
+    const ActionMenu = ({ patientId }: { patientId: string }) => (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <div className="cursor-pointer p-2 hover:bg-muted rounded-full">
+                    <MoreVertical className="h-4 w-4" />
+                </div>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={() => openDetailsDialog(String(patientId))}>
+                    <Eye className="w-4 h-4 mr-2" /> Ver detalhes
+                </DropdownMenuItem>
+                <DropdownMenuItem asChild>
+                    <Link href={`/manager/pacientes/${patientId}/editar`} className="flex items-center w-full">
+                        <Edit className="w-4 h-4 mr-2" /> Editar
+                    </Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                    <Calendar className="w-4 h-4 mr-2" /> Marcar consulta
+                </DropdownMenuItem>
+                <DropdownMenuItem className="text-destructive" onClick={() => { setPatientToDelete(patientId); setDeleteDialogOpen(true); }}>
+                    <Trash2 className="w-4 h-4 mr-2" /> Excluir
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
 
     return (
         <Sidebar>
-            <div className="space-y-6 px-2 sm:px-4 md:px-8">
+            <div className="space-y-6 px-2 sm:px-4 md:px-8 pb-20">
                 {/* Header */}
                 <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                     <div>
-                        <h1 className="text-xl md:text-2xl font-bold text-foreground">
-                            Pacientes
-                        </h1>
-                        <p className="text-muted-foreground text-sm md:text-base">
-                            Gerencie as informações de seus pacientes
-                        </p>
+                        <h1 className="text-xl md:text-2xl font-bold">Pacientes</h1>
+                        <p className="text-muted-foreground text-sm md:text-base">Gerencie as informações de seus pacientes</p>
                     </div>
                 </div>
 
                 {/* Filtros */}
-                <div className="flex flex-wrap items-center gap-4 bg-card p-4 rounded-lg border border-border">
-                    <Filter className="w-5 h-5 text-gray-400" />
-
-                    {/* Busca */}
-                    <input
-                        type="text"
-                        placeholder="Buscar por nome ou telefone..."
-                        value={searchTerm}
-                        onChange={(e) => setSearchTerm(e.target.value)}
-                        className="w-full sm:flex-grow sm:max-w-[300px] p-2 border rounded-md text-sm"
-                    />
-
-                    {/* Convênio */}
+                <div className="flex flex-wrap items-center gap-4 bg-card p-4 rounded-lg border">
+                    <Filter className="w-5 h-5 text-muted-foreground" />
+                    <input type="text" placeholder="Buscar por nome ou telefone..." value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} className="w-full sm:flex-grow sm:max-w-[300px] p-2 border rounded-md text-sm" />
                     <div className="flex items-center gap-2 w-full sm:w-auto sm:flex-grow sm:max-w-[200px]">
-                        <span className="text-sm font-medium text-foreground whitespace-nowrap hidden md:block">
-                            Convênio
-                        </span>
+                        <span className="text-sm font-medium whitespace-nowrap hidden md:block">Convênio</span>
                         <Select value={convenioFilter} onValueChange={setConvenioFilter}>
-                            <SelectTrigger className="w-full sm:w-40">
-                                <SelectValue placeholder="Convênio" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value="all">Todos</SelectItem>
-                                <SelectItem value="Particular">Particular</SelectItem>
-                                <SelectItem value="SUS">SUS</SelectItem>
-                                <SelectItem value="Unimed">Unimed</SelectItem>
-                            </SelectContent>
+                            <SelectTrigger className="w-full sm:w-40"><SelectValue placeholder="Convênio" /></SelectTrigger>
+                            <SelectContent><SelectItem value="all">Todos</SelectItem><SelectItem value="Particular">Particular</SelectItem><SelectItem value="SUS">SUS</SelectItem><SelectItem value="Unimed">Unimed</SelectItem></SelectContent>
                         </Select>
                     </div>
-
-                    {/* VIP */}
                     <div className="flex items-center gap-2 w-full sm:w-auto sm:flex-grow sm:max-w-[150px]">
-                        <span className="text-sm font-medium text-foreground whitespace-nowrap hidden md:block">VIP</span>
+                        <span className="text-sm font-medium whitespace-nowrap hidden md:block">VIP</span>
                         <Select value={vipFilter} onValueChange={setVipFilter}>
-                            <SelectTrigger className="w-full sm:w-32">
-                                <SelectValue placeholder="VIP" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value="all">Todos</SelectItem>
-                                <SelectItem value="vip">VIP</SelectItem>
-                                <SelectItem value="regular">Regular</SelectItem>
-                            </SelectContent>
+                            <SelectTrigger className="w-full sm:w-32"><SelectValue placeholder="VIP" /></SelectTrigger>
+                            <SelectContent><SelectItem value="all">Todos</SelectItem><SelectItem value="vip">VIP</SelectItem><SelectItem value="regular">Regular</SelectItem></SelectContent>
                         </Select>
                     </div>
-                    
-                    {/* Seletor de Itens por Página (Inicia com 10) */}
                     <div className="flex items-center gap-2 w-full sm:w-auto ml-auto sm:ml-0">
-                        <Select 
-                            value={String(pageSize)} 
-                            onValueChange={(value) => {
-                                setPageSize(Number(value));
-                                setPage(1); // Resetar para página 1 ao mudar o tamanho
-                            }}
-                        >
-                            <SelectTrigger className="w-full sm:w-[70px]">
-                                <SelectValue placeholder="10" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value="5">5</SelectItem>
-                                <SelectItem value="10">10</SelectItem>
-                                <SelectItem value="20">20</SelectItem>
-                            </SelectContent>
+                        <Select value={String(pageSize)} onValueChange={(value) => { setPageSize(Number(value)); setPage(1); }}>
+                            <SelectTrigger className="w-full sm:w-[70px]"><SelectValue placeholder="10" /></SelectTrigger>
+                            <SelectContent><SelectItem value="5">5</SelectItem><SelectItem value="10">10</SelectItem><SelectItem value="20">20</SelectItem></SelectContent>
                         </Select>
                     </div>
                 </div>
 
-                {/* Tabela */}
-                <div className="bg-white rounded-lg border border-gray-200 shadow-md hidden md:block">
-                    <div className="overflow-x-auto">
-                        {error ? (
-                            <div className="p-6 text-red-600">{`Erro ao carregar pacientes: ${error}`}</div>
-                        ) : loading ? (
-                            <div className="p-6 text-center text-gray-500 flex items-center justify-center">
-                                <Loader2 className="w-6 h-6 mr-2 animate-spin text-green-600" />{" "}
-                                Carregando pacientes...
-                            </div>
-                        ) : (
-                            <table className="w-full min-w-[650px]">
-                                <thead className="bg-gray-50 border-b border-gray-200">
-                                    <tr>
-                                        <th className="text-left p-4 font-medium text-gray-700 w-[20%]">Nome</th>
-                                        <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden sm:table-cell">Telefone</th>
-                                        <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden md:table-cell">Cidade / Estado</th>
-                                        <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden sm:table-cell">Convênio</th>
-                                        <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden lg:table-cell">Último atendimento</th>
-                                        <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden lg:table-cell">Próximo atendimento</th>
-                                        <th className="text-left p-4 font-medium text-gray-700 w-[5%]">Ações</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    {currentPatients.length === 0 ? (
-                                        <tr>
-                                            <td colSpan={7} className="p-8 text-center text-gray-500">
-                                                {allPatients.length === 0
-                                                    ? "Nenhum paciente cadastrado"
-                                                    : "Nenhum paciente encontrado com os filtros aplicados"}
-                                            </td>
-                                        </tr>
-                                    ) : (
-                                        currentPatients.map((patient) => (
-                                            <tr key={patient.id} className="border-b border-gray-100 hover:bg-gray-50">
-                                                <td className="p-4">
-                                                    <div className="flex items-center gap-3">
-                                                        <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
-                                                            <span className="text-blue-600 font-medium text-sm">
-                                                                {patient.nome?.charAt(0) || "?"}
-                                                            </span>
-                                                        </div>
-                                                        <span className="font-medium text-gray-900">
-                                                            {patient.nome}
-                                                            {patient.vip && (
-                                                                <span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-600 bg-purple-100 rounded-full">
-                                                                    VIP
-                                                                </span>
-                                                            )}
-                                                        </span>
-                                                    </div>
-                                                </td>
-                                                <td className="p-4 text-gray-600 hidden sm:table-cell">{patient.telefone}</td>
-                                                <td className="p-4 text-gray-600 hidden md:table-cell">{`${patient.cidade} / ${patient.estado}`}</td>
-                                                <td className="p-4 text-gray-600 hidden sm:table-cell">{patient.convenio}</td>
-                                                <td className="p-4 text-gray-600 hidden lg:table-cell">{patient.ultimoAtendimento}</td>
-                                                <td className="p-4 text-gray-600 hidden lg:table-cell">{patient.proximoAtendimento}</td>
-                                                <td className="p-4">
-                                                    <DropdownMenu>
-                                                        <DropdownMenuTrigger asChild>
-                                                            <div className="text-black-600 cursor-pointer">
-                                                                <MoreVertical className="h-4 w-4" />
-                                                            </div>
-                                                        </DropdownMenuTrigger>
-                                                        <DropdownMenuContent align="end">
-                                                            <DropdownMenuItem onClick={() => openDetailsDialog(String(patient.id))}>
-                                                                <Eye className="w-4 h-4 mr-2" />
-                                                                Ver detalhes
-                                                            </DropdownMenuItem>
-                                                            <DropdownMenuItem asChild>
-                                                                <Link href={`/secretary/pacientes/${patient.id}/editar`} className="flex items-center w-full">
-                                                                    <Edit className="w-4 h-4 mr-2" />
-                                                                    Editar
-                                                                </Link>
-                                                            </DropdownMenuItem>
-                                                            <DropdownMenuItem>
-                                                                <Calendar className="w-4 h-4 mr-2" />
-                                                                Marcar consulta
-                                                            </DropdownMenuItem>
-                                                            <DropdownMenuItem className="text-red-600" onClick={() => openDeleteDialog(String(patient.id))}>
-                                                                <Trash2 className="w-4 h-4 mr-2" />
-                                                                Excluir
-                                                            </DropdownMenuItem>
-                                                        </DropdownMenuContent>
-                                                    </DropdownMenu>
-                                                </td>
-                                            </tr>
-                                        ))
-                                    )}
-                                </tbody>
-                            </table>
-                        )}
-                    </div>
-                </div>
+                {/* Loading / Erro / Conteúdo */}
+                {error ? (
+                    <div className="p-6 text-destructive bg-card border rounded-lg">{`Erro: ${error}`}</div>
+                ) : loading ? (
+                    <div className="p-6 text-center text-muted-foreground flex items-center justify-center bg-card border rounded-lg"><Loader2 className="w-6 h-6 mr-2 animate-spin text-primary" /> Carregando...</div>
+                ) : (
+                    <>
+                        {/* LISTA MOBILE */}
+                        <div className="grid grid-cols-1 gap-4 md:hidden">
+                            {currentPatients.length === 0 ? (
+                                <div className="p-8 text-center text-muted-foreground bg-card rounded-lg border">Nenhum paciente encontrado.</div>
+                            ) : (
+                                currentPatients.map((patient) => (
+                                    <div key={patient.id} className="bg-card p-4 rounded-lg border shadow-sm flex flex-col gap-3 relative">
+                                        <div className="flex justify-between items-start">
+                                            <div className="flex items-center gap-3">
+                                                <div className="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center"><span className="text-primary font-bold text-sm">{patient.nome?.charAt(0) || "?"}</span></div>
+                                                <div>
+                                                    <div className="font-semibold flex items-center gap-2">{patient.nome}{patient.vip && <span className="px-1.5 py-0.5 text-[10px] font-bold rounded-full text-purple-600 bg-purple-100 uppercase">VIP</span>}</div>
+                                                    <div className="text-xs text-muted-foreground">{patient.convenio}</div>
+                                                </div>
+                                            </div>
+                                            <ActionMenu patientId={String(patient.id)} />
+                                        </div>
+                                        <div className="grid grid-cols-2 gap-2 text-sm text-muted-foreground mt-2 pt-2 border-t">
+                                            <div className="flex items-center gap-2"><Phone className="w-3 h-3" /> {patient.telefone}</div>
+                                            <div className="flex items-center gap-2"><MapPin className="w-3 h-3" /> {patient.cidade}</div>
+                                            <div className="flex items-center gap-2 col-span-2"><Activity className="w-3 h-3" /> Última: {patient.ultimoAtendimento}</div>
+                                        </div>
+                                    </div>
+                                ))
+                            )}
+                        </div>
 
-                {/* Paginação */}
+                        {/* TABELA DESKTOP */}
+                        <div className="bg-card rounded-lg border shadow-md hidden md:block">
+                            <div className="overflow-x-auto">
+                                <table className="w-full min-w-[650px]">
+                                    <thead className="bg-muted border-b">
+                                        <tr>
+                                            <th className="text-left p-4 font-medium text-muted-foreground w-[20%]">Nome</th>
+                                            <th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden sm:table-cell">Telefone</th>
+                                            <th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden md:table-cell">Cidade / Estado</th>
+                                            <th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden sm:table-cell">Convênio</th>
+                                            <th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden lg:table-cell">Último atendimento</th>
+                                            <th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden lg:table-cell">Próximo atendimento</th>
+                                            <th className="text-left p-4 font-medium text-muted-foreground w-[5%]">Ações</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        {currentPatients.length === 0 ? (
+                                            <tr><td colSpan={7} className="p-8 text-center text-muted-foreground">Nenhum paciente encontrado</td></tr>
+                                        ) : (
+                                            currentPatients.map((patient) => (
+                                                <tr key={patient.id} className="border-b hover:bg-muted">
+                                                    <td className="p-4">
+                                                        <div className="flex items-center gap-3">
+                                                            <div className="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center"><span className="text-primary font-medium text-sm">{patient.nome?.charAt(0) || "?"}</span></div>
+                                                            <span className="font-medium">{patient.nome}{patient.vip && <span className="ml-2 px-2 py-0.5 text-xs font-semibold rounded-full text-purple-400 bg-purple-400/15">VIP</span>}</span>
+                                                        </div>
+                                                    </td>
+                                                    <td className="p-4 text-muted-foreground hidden sm:table-cell">{patient.telefone}</td>
+                                                    <td className="p-4 text-muted-foreground hidden md:table-cell">{`${patient.cidade} / ${patient.estado}`}</td>
+                                                    <td className="p-4 text-muted-foreground hidden sm:table-cell">{patient.convenio}</td>
+                                                    <td className="p-4 text-muted-foreground hidden lg:table-cell">{patient.ultimoAtendimento}</td>
+                                                    <td className="p-4 text-muted-foreground hidden lg:table-cell">{patient.proximoAtendimento}</td>
+                                                    <td className="p-4"><ActionMenu patientId={String(patient.id)} /></td>
+                                                </tr>
+                                            ))
+                                        )}
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                    </>
+                )}
+
+                {/* --- RODAPÉ DE PAGINAÇÃO --- */}
                 {totalPages > 1 && !loading && (
-                    <div className="flex flex-col sm:flex-row items-center justify-center p-4 border-t border-gray-200">
-                        <div className="flex space-x-2 flex-wrap justify-center">
-                            <Button
-                                onClick={() => setPage((prev) => Math.max(1, prev - 1))}
-                                disabled={page === 1}
-                                variant="outline"
-                                size="lg"
-                            >
+                    <div className="py-4 px-2 border-t border-border">
+                        
+                        {/* 1. PAGINAÇÃO MOBILE (Simples) */}
+                        <div className="flex items-center justify-between md:hidden gap-2">
+                            <Button onClick={() => setPage((prev) => Math.max(1, prev - 1))} disabled={page === 1} variant="outline" size="sm" className="min-w-[90px]">
+                                <ChevronLeft className="w-4 h-4 mr-1" /> Anterior
+                            </Button>
+                            <span className="text-sm font-medium text-muted-foreground">{page} de {totalPages}</span>
+                            <Button onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))} disabled={page === totalPages} variant="outline" size="sm" className="min-w-[90px]">
+                                Próximo <ChevronRight className="w-4 h-4 ml-1" />
+                            </Button>
+                        </div>
+
+                        {/* 2. PAGINAÇÃO DESKTOP (Numerada Limitada) */}
+                        <div className="hidden md:flex items-center justify-center gap-2">
+                            <Button onClick={() => setPage((prev) => Math.max(1, prev - 1))} disabled={page === 1} variant="outline" className="px-4">
                                 &lt; Anterior
                             </Button>
-                            {Array.from({ length: totalPages }, (_, index) => index + 1)
-                                .slice(Math.max(0, page - 3), Math.min(totalPages, page + 2))
-                                .map((pageNumber) => (
-                                    <Button
-                                        key={pageNumber}
-                                        onClick={() => setPage(pageNumber)}
-                                        variant={pageNumber === page ? "default" : "outline"}
-                                        size="lg"
-                                        className={
-                                            pageNumber === page
-                                                ? "bg-blue-600 hover:bg-blue-700 text-white"
-                                                : "text-gray-700"
-                                        }
-                                    >
-                                        {pageNumber}
-                                    </Button>
-                                ))}
-                            <Button
-                                onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))}
-                                disabled={page === totalPages}
-                                variant="outline"
-                                size="lg"
-                            >
+
+                            {getPageNumbers().map((pageNum) => (
+                                <Button
+                                    key={pageNum}
+                                    onClick={() => setPage(pageNum)}
+                                    /* CORREÇÃO AQUI: Removemos as classes manuais e usamos apenas o variant */
+                                    variant={pageNum === page ? "default" : "outline"}
+                                    className="w-10 h-10 p-0"
+                                >
+                                    {pageNum}
+                                </Button>
+                            ))}
+
+                            <Button onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))} disabled={page === totalPages} variant="outline" className="px-4">
                                 Próximo &gt;
                             </Button>
                         </div>
                     </div>
                 )}
 
-                {/* Dialog de Exclusão */}
+                {/* Dialogs */}
                 <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
                     <AlertDialogContent>
-                        <AlertDialogHeader>
-                            <AlertDialogTitle>Confirmar exclusão</AlertDialogTitle>
-                            <AlertDialogDescription>
-                                Tem certeza que deseja excluir este paciente? Esta ação não pode ser desfeita.
-                            </AlertDialogDescription>
-                        </AlertDialogHeader>
-                        <AlertDialogFooter>
-                            <AlertDialogCancel>Cancelar</AlertDialogCancel>
-                            <AlertDialogAction
-                                onClick={() => patientToDelete && handleDeletePatient(patientToDelete)}
-                                className="bg-red-600 hover:bg-red-700"
-                            >
-                                Excluir
-                            </AlertDialogAction>
-                        </AlertDialogFooter>
+                        <AlertDialogHeader><AlertDialogTitle>Confirmar exclusão</AlertDialogTitle><AlertDialogDescription>Tem certeza que deseja excluir este paciente?</AlertDialogDescription></AlertDialogHeader>
+                        <AlertDialogFooter><AlertDialogCancel>Cancelar</AlertDialogCancel><AlertDialogAction onClick={() => patientToDelete && handleDeletePatient(patientToDelete)} className="bg-destructive hover:bg-destructive/90">Excluir</AlertDialogAction></AlertDialogFooter>
                     </AlertDialogContent>
                 </AlertDialog>
 
-                {/* Dialog de Detalhes */}
                 <AlertDialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
-                    <AlertDialogContent>
-                        <AlertDialogHeader>
-                            <AlertDialogTitle>Detalhes do Paciente</AlertDialogTitle>
-                            <AlertDialogDescription>
-                                {patientDetails === null ? (
-                                    <div className="text-gray-500">
-                                        <Loader2 className="w-6 h-6 animate-spin mx-auto text-green-600 my-4" />
-                                        Carregando...
-                                    </div>
-                                ) : patientDetails?.error ? (
-                                    <div className="text-red-600 p-4">{patientDetails.error}</div>
-                                ) : (
-                                    <div className="grid gap-4 py-4">
+                    <AlertDialogContent className="max-h-[90vh] overflow-y-auto">
+                        <AlertDialogHeader><AlertDialogTitle>Detalhes do Paciente</AlertDialogTitle></AlertDialogHeader>
+                        <AlertDialogDescription>
+                            {patientDetails ? (!patientDetails.error ? (
+                                    <div className="grid gap-4 py-4 text-left">
                                         <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                                            <div>
-                                                <p className="font-semibold">Nome Completo</p>
-                                                <p>{patientDetails.full_name}</p>
-                                            </div>
-                                            <div>
-                                                <p className="font-semibold">Email</p>
-                                                <p>{patientDetails.email}</p>
-                                            </div>
-                                            <div>
-                                                <p className="font-semibold">Telefone</p>
-                                                <p>{patientDetails.phone_mobile}</p>
-                                            </div>
-                                            <div>
-                                                <p className="font-semibold">Data de Nascimento</p>
-                                                <p>{patientDetails.birth_date}</p>
-                                            </div>
-                                            <div>
-                                                <p className="font-semibold">CPF</p>
-                                                <p>{patientDetails.cpf}</p>
-                                            </div>
-                                            <div>
-                                                <p className="font-semibold">Tipo Sanguíneo</p>
-                                                <p>{patientDetails.blood_type}</p>
-                                            </div>
-                                            <div>
-                                                <p className="font-semibold">Peso (kg)</p>
-                                                <p>{patientDetails.weight_kg}</p>
-                                            </div>
-                                            <div>
-                                                <p className="font-semibold">Altura (m)</p>
-                                                <p>{patientDetails.height_m}</p>
-                                            </div>
-                                        </div>
-                                        <div className="border-t pt-4 mt-4">
-                                            <h3 className="font-semibold mb-2">Endereço</h3>
-                                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                                                <div>
-                                                    <p className="font-semibold">Rua</p>
-                                                    <p>{`${patientDetails.street}, ${patientDetails.number}`}</p>
-                                                </div>
-                                                <div>
-                                                    <p className="font-semibold">Complemento</p>
-                                                    <p>{patientDetails.complement}</p>
-                                                </div>
-                                                <div>
-                                                    <p className="font-semibold">Bairro</p>
-                                                    <p>{patientDetails.neighborhood}</p>
-                                                </div>
-                                                <div>
-                                                    <p className="font-semibold">Cidade</p>
-                                                    <p>{patientDetails.cidade}</p>
-                                                </div>
-                                                <div>
-                                                    <p className="font-semibold">Estado</p>
-                                                    <p>{patientDetails.estado}</p>
-                                                </div>
-                                                <div>
-                                                    <p className="font-semibold">CEP</p>
-                                                    <p>{patientDetails.cep}</p>
-                                                </div>
-                                            </div>
+                                            <div><p className="font-semibold text-xs text-muted-foreground">NOME</p><p>{patientDetails.full_name}</p></div>
+                                            <div><p className="font-semibold text-xs text-muted-foreground">EMAIL</p><p className="break-all">{patientDetails.email}</p></div>
+                                            <div><p className="font-semibold text-xs text-muted-foreground">TELEFONE</p><p>{patientDetails.phone_mobile}</p></div>
+                                            <div><p className="font-semibold text-xs text-muted-foreground">DATA NASC.</p><p>{patientDetails.birth_date}</p></div>
                                         </div>
+                                        <div className="border-t pt-4"><p className="font-semibold text-primary mb-2">Endereço</p><p>{patientDetails.street}, {patientDetails.number}</p><p>{patientDetails.cidade}/{patientDetails.estado}</p></div>
                                     </div>
-                                )}
-                            </AlertDialogDescription>
-                        </AlertDialogHeader>
-                        <AlertDialogFooter>
-                            <AlertDialogCancel>Fechar</AlertDialogCancel>
-                        </AlertDialogFooter>
+                                ) : <p className="text-destructive">{patientDetails.error}</p>) : <Loader2 className="w-6 h-6 animate-spin mx-auto text-primary" />}
+                        </AlertDialogDescription>
+                        <AlertDialogFooter><AlertDialogCancel>Fechar</AlertDialogCancel></AlertDialogFooter>
                     </AlertDialogContent>
                 </AlertDialog>
             </div>
diff --git a/app/manager/usuario/[id]/editar/page.tsx b/app/manager/usuario/[id]/editar/page.tsx
index 030891d..d5276a7 100644
--- a/app/manager/usuario/[id]/editar/page.tsx
+++ b/app/manager/usuario/[id]/editar/page.tsx
@@ -155,12 +155,12 @@ export default function EditarUsuarioPage() {
 
   if (loading) {
     return (
-        <Sidebar>
-            <div className="flex justify-center items-center h-full w-full py-16">
-                <Loader2 className="w-8 h-8 animate-spin text-green-600" />
-                <p className="ml-2 text-gray-600">Carregando dados do usuário...</p>
-            </div>
-        </Sidebar>
+      <Sidebar>
+        <div className="flex justify-center items-center h-full w-full py-16">
+          <Loader2 className="w-8 h-8 animate-spin text-primary" />
+          <p className="ml-2 text-muted-foreground">Carregando dados do usuário...</p>
+        </div>
+      </Sidebar>
     );
   }
 
@@ -169,10 +169,10 @@ export default function EditarUsuarioPage() {
     <div className="w-full max-w-2xl mx-auto space-y-6 p-4 md:p-8"> 
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-2xl font-bold text-gray-900">
-            Editar Usuário: <span className="text-green-600">{formData.nomeCompleto}</span>
+          <h1 className="text-2xl font-bold text-foreground">
+            Editar Usuário: <span className="text-primary">{formData.nomeCompleto}</span>
           </h1>
-          <p className="text-sm text-gray-500">
+          <p className="text-sm text-muted-foreground">
             Atualize as informações do usuário (ID: {id}).
           </p>
         </div>
@@ -184,9 +184,9 @@ export default function EditarUsuarioPage() {
         </Link>
       </div>
 
-      <form onSubmit={handleSubmit} className="space-y-8 bg-white p-8 border rounded-lg shadow-sm">
+      <form onSubmit={handleSubmit} className="space-y-8 bg-card p-8 border border-border rounded-lg shadow-sm">
         {error && (
-             <div className="p-3 bg-red-100 text-red-700 rounded-lg border border-red-300">
+             <div className="p-3 rounded-lg border bg-destructive/10 text-destructive border-destructive/30">
                 <p className="font-medium">Erro na Atualização:</p>
                 <p className="text-sm">{error}</p>
             </div>
@@ -261,7 +261,7 @@ export default function EditarUsuarioPage() {
           </Link>
           <Button 
             type="submit" 
-            className="bg-green-600 hover:bg-green-700"
+            className="bg-primary hover:bg-primary/90"
             disabled={isSaving}
           >
             {isSaving ? (
diff --git a/app/manager/usuario/novo/page.tsx b/app/manager/usuario/novo/page.tsx
index 4166d53..9c7eb32 100644
--- a/app/manager/usuario/novo/page.tsx
+++ b/app/manager/usuario/novo/page.tsx
@@ -140,17 +140,17 @@ export default function NovoUsuarioPage() {
                 <div className="w-full max-w-screen-lg space-y-8">
                     <div className="flex items-center justify-between border-b pb-4">
                         <div>
-                            <h1 className="text-3xl font-extrabold text-gray-900">Novo Usuário</h1>
-                            <p className="text-md text-gray-500">Preencha os dados para cadastrar um novo usuário no sistema.</p>
+                            <h1 className="text-3xl font-extrabold">Novo Usuário</h1>
+                            <p className="text-md text-muted-foreground">Preencha os dados para cadastrar um novo usuário no sistema.</p>
                         </div>
                         <Link href="/manager/usuario">
                             <Button variant="outline">Cancelar</Button>
                         </Link>
                     </div>
 
-                    <form onSubmit={handleSubmit} className="space-y-6 bg-white p-6 md:p-10 border rounded-xl shadow-lg">
+                    <form onSubmit={handleSubmit} className="space-y-6 bg-card p-6 md:p-10 border rounded-xl shadow-lg">
                         {error && (
-                            <div className="p-4 bg-red-50 text-red-700 rounded-lg border border-red-300">
+                            <div className="p-4 bg-destructive/10 text-destructive rounded-lg border border-destructive">
                                 <p className="font-semibold">Erro no Cadastro:</p>
                                 <p className="text-sm break-words">{error}</p>
                             </div>
@@ -208,7 +208,7 @@ export default function NovoUsuarioPage() {
                             <div className="space-y-2">
                                 <Label htmlFor="confirmarSenha">Confirmar Senha *</Label>
                                 <Input id="confirmarSenha" type="password" value={formData.confirmarSenha} onChange={(e) => handleInputChange("confirmarSenha", e.target.value)} placeholder="Repita a senha" required />
-                                {formData.senha && formData.confirmarSenha && formData.senha !== formData.confirmarSenha && <p className="text-xs text-red-500">As senhas não coincidem.</p>}
+                                {formData.senha && formData.confirmarSenha && formData.senha !== formData.confirmarSenha && <p className="text-xs text-destructive">As senhas não coincidem.</p>}
                             </div>
 
                             <div className="space-y-2">
@@ -228,7 +228,7 @@ export default function NovoUsuarioPage() {
                                     Cancelar
                                 </Button>
                             </Link>
-                            <Button type="submit" className="bg-green-600 hover:bg-green-700" disabled={isSaving}>
+                            <Button type="submit" className="bg-primary hover:bg-primary/90" disabled={isSaving}>
                                 {isSaving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Save className="w-4 h-4 mr-2" />}
                                 {isSaving ? "Salvando..." : "Salvar Usuário"}
                             </Button>
diff --git a/app/manager/usuario/page.tsx b/app/manager/usuario/page.tsx
index c0c478e..be36331 100644
--- a/app/manager/usuario/page.tsx
+++ b/app/manager/usuario/page.tsx
@@ -182,22 +182,22 @@ export default function UsersPage() {
         {/* Header */}
         <div className="flex flex-wrap items-center justify-between gap-3">
           <div>
-            <h1 className="text-2xl font-bold text-gray-900">Usuários</h1>
-            <p className="text-sm text-gray-500">Gerencie usuários.</p>
+            <h1 className="text-2xl font-bold">Usuários</h1>
+            <p className="text-sm text-muted-foreground">Gerencie usuários.</p>
           </div>
           <Link href="/manager/usuario/novo" className="w-full sm:w-auto">
-            <Button className="w-full sm:w-auto bg-blue-600 hover:bg-blue-700">
+            <Button className="w-full sm:w-auto">
               <Plus className="w-4 h-4 mr-2" /> Novo Usuário
             </Button>
           </Link>
         </div>
 
                 {/* --- 4. Filtro (Barra de Pesquisa + Selects) --- */}
-                <div className="flex flex-col md:flex-row items-start md:items-center gap-3 bg-white p-4 rounded-lg border border-gray-200">
+                <div className="flex flex-col md:flex-row items-start md:items-center gap-3 bg-card p-4 rounded-lg border">
 
                     {/* Barra de Pesquisa */}
                     <div className="relative w-full md:flex-1">
-                        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+                        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                         <Input 
                             placeholder="Buscar por nome, e-mail ou telefone..." 
                             value={searchTerm}
@@ -205,7 +205,7 @@ export default function UsersPage() {
                                 setSearchTerm(e.target.value);
                                 setCurrentPage(1); // Reseta a paginação ao pesquisar
                             }}
-                            className="pl-10 w-full bg-gray-50 border-gray-200 focus:bg-white transition-colors"
+                            className="pl-10 w-full bg-muted border-border focus:bg-card transition-colors"
                         />
                     </div>
 
@@ -259,54 +259,54 @@ export default function UsersPage() {
                 {/* Fim do Filtro */}
 
         {/* Tabela/Lista */}
-        <div className="bg-white rounded-lg border border-gray-200 shadow-md overflow-x-auto">
+        <div className="bg-card rounded-lg border shadow-md overflow-x-auto">
           {loading ? (
-            <div className="p-8 text-center text-gray-500">
-              <Loader2 className="w-8 h-8 animate-spin mx-auto mb-3 text-green-600" />
+            <div className="p-8 text-center text-muted-foreground">
+              <Loader2 className="w-8 h-8 animate-spin mx-auto mb-3 text-primary" />
               Carregando usuários...
             </div>
           ) : error ? (
-            <div className="p-8 text-center text-red-600">{error}</div>
+            <div className="p-8 text-center text-destructive">{error}</div>
           ) : filteredUsers.length === 0 ? (
-            <div className="p-8 text-center text-gray-500">
+            <div className="p-8 text-center text-muted-foreground">
               Nenhum usuário encontrado com os filtros aplicados.
             </div>
           ) : (
             <>
               {/* Tabela para Telas Médias e Grandes */}
-              <table className="min-w-full divide-y divide-gray-200 hidden md:table">
-                <thead className="bg-gray-50">
+              <table className="min-w-full divide-y hidden md:table">
+                <thead className="bg-muted">
                   <tr>
-                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                    <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
                       Nome
                     </th>
-                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                    <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
                       E-mail
                     </th>
-                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                    <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
                       Telefone
                     </th>
-                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                    <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
                       Cargo
                     </th>
-                    <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">
+                    <th className="px-6 py-3 text-right text-xs font-medium text-muted-foreground uppercase">
                       Ações
                     </th>
                   </tr>
                 </thead>
-                <tbody className="bg-white divide-y divide-gray-200">
+                <tbody className="bg-card divide-y">
                   {currentItems.map((u) => (
-                    <tr key={u.id} className="hover:bg-gray-50">
-                      <td className="px-6 py-4 text-sm text-gray-900">
+                    <tr key={u.id} className="hover:bg-muted">
+                      <td className="px-6 py-4 text-sm">
                         {u.full_name}
                       </td>
-                      <td className="px-6 py-4 text-sm text-gray-500 break-all">
+                      <td className="px-6 py-4 text-sm text-muted-foreground break-all">
                         {u.email}
                       </td>
-                      <td className="px-6 py-4 text-sm text-gray-500">
+                      <td className="px-6 py-4 text-sm text-muted-foreground">
                         {u.phone}
                       </td>
-                      <td className="px-6 py-4 text-sm text-gray-500 capitalize">
+                      <td className="px-6 py-4 text-sm text-muted-foreground capitalize">
                         {u.role}
                       </td>
                       <td className="px-6 py-4 text-right">
@@ -325,17 +325,17 @@ export default function UsersPage() {
               </table>
 
                             {/* Layout em Cards/Lista para Telas Pequenas */}
-                            <div className="md:hidden divide-y divide-gray-200">
+                            <div className="md:hidden divide-y">
                                 {currentItems.map((u) => (
-                                    <div key={u.id} className="flex items-center justify-between p-4 hover:bg-gray-50">
+                                    <div key={u.id} className="flex items-center justify-between p-4 hover:bg-muted">
                                         <div className="flex-1 min-w-0">
-                                            <div className="text-sm font-medium text-gray-900 truncate">
+                                            <div className="text-sm font-medium truncate">
                                                 {u.full_name || "—"}
                                             </div>
-                                            <div className="text-xs text-gray-500 truncate">
+                                            <div className="text-xs text-muted-foreground truncate">
                                                 {u.email}
                                             </div>
-                                            <div className="text-sm text-gray-500 capitalize mt-1">
+                                            <div className="text-sm text-muted-foreground capitalize mt-1">
                                                 {u.role || "—"}
                                             </div>
                                         </div>
@@ -355,12 +355,12 @@ export default function UsersPage() {
 
               {/* Paginação */}
               {totalPages > 1 && (
-                <div className="flex flex-wrap justify-center items-center gap-2 mt-4 p-4 border-t border-gray-200">
+                <div className="flex flex-wrap justify-center items-center gap-2 mt-4 p-4 border-t">
                   {/* Botão Anterior */}
                   <button
                     onClick={goToPrevPage}
                     disabled={currentPage === 1}
-                    className="flex items-center px-4 py-2 rounded-md font-medium transition-colors text-sm bg-gray-100 text-gray-700 hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed border border-gray-300"
+                    className="flex items-center px-4 py-2 rounded-md font-medium transition-colors text-sm bg-muted text-muted-foreground hover:bg-muted/90 disabled:opacity-50 disabled:cursor-not-allowed border"
                   >
                     {"< Anterior"}
                   </button>
@@ -370,10 +370,10 @@ export default function UsersPage() {
                     <button
                       key={number}
                       onClick={() => paginate(number)}
-                      className={`px-4 py-2 rounded-md font-medium transition-colors text-sm border border-gray-300 ${
+                      className={`px-4 py-2 rounded-md font-medium transition-colors text-sm border ${
                         currentPage === number
-                          ? "bg-blue-600 text-white shadow-md border-blue-600"
-                          : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+                          ? "bg-primary text-primary-foreground shadow-md border-primary"
+                          : "bg-muted text-muted-foreground hover:bg-muted/90"
                       }`}
                     >
                       {number}
@@ -384,7 +384,7 @@ export default function UsersPage() {
                   <button
                     onClick={goToNextPage}
                     disabled={currentPage === totalPages}
-                    className="flex items-center px-4 py-2 rounded-md font-medium transition-colors text-sm bg-gray-100 text-gray-700 hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed border border-gray-300"
+                    className="flex items-center px-4 py-2 rounded-md font-medium transition-colors text-sm bg-muted text-muted-foreground hover:bg-muted/90 disabled:opacity-50 disabled:cursor-not-allowed border"
                   >
                     {"Próximo >"}
                   </button>
@@ -406,12 +406,12 @@ export default function UsersPage() {
               </AlertDialogTitle>
               <AlertDialogDescription>
                 {!userDetails ? (
-                  <div className="p-4 text-center text-gray-500">
-                    <Loader2 className="w-6 h-6 animate-spin mx-auto mb-3 text-green-600" />
+                  <div className="p-4 text-center text-muted-foreground">
+                    <Loader2 className="w-6 h-6 animate-spin mx-auto mb-3 text-primary" />
                     Buscando dados completos...
                   </div>
                 ) : (
-                  <div className="space-y-3 pt-2 text-left text-gray-700">
+                  <div className="space-y-3 pt-2 text-left text-muted-foreground">
                     <div>
                       <strong>ID:</strong> {userDetails.user.id}
                     </div>
@@ -437,7 +437,7 @@ export default function UsersPage() {
                               {k}:{" "}
                               <span
                                 className={`font-semibold ${
-                                  v ? "text-green-600" : "text-red-600"
+                                  v ? "text-primary" : "text-destructive"
                                 }`}
                               >
                                 {v ? "Sim" : "Não"}
diff --git a/app/page.tsx b/app/page.tsx
index 2779431..b8a03ce 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -4,28 +4,34 @@ import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { useState } from "react";
 import { Stethoscope, Baby, Microscope } from "lucide-react";
+import { useAccessibility } from "./context/AccessibilityContext";
 
 export default function InicialPage() {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const { contrast } = useAccessibility();
+
+  const heroClass = contrast === "high"
+    ? "px-6 md:px-10 lg:px-20 py-20 bg-background text-foreground border-y-2 border-primary"
+    : "px-6 md:px-10 lg:px-20 py-20 bg-gradient-to-r from-[#1E2A78] via-[#007BFF] to-[#00BFFF] text-white";
 
   return (
-    <div className="min-h-screen flex flex-col bg-white font-sans scroll-smooth text-[#1E2A78]">
+    <div className="min-h-screen flex flex-col bg-background font-sans scroll-smooth text-foreground">
       {/* Barra superior */}
-      <div className="bg-[#1E2A78] text-white text-sm py-2 px-4 md:px-6 flex justify-between items-center">
+      <div className="bg-primary text-primary-foreground text-sm py-2 px-4 md:px-6 flex justify-between items-center">
         <span className="hidden sm:inline">Horário: 08h00 - 21h00</span>
         <span className="hover:underline cursor-pointer transition">
           Email: contato@mediconnect.com
         </span>
       </div>
       {/* Header */}
-      <header className="bg-white shadow-md py-4 px-4 md:px-6 flex justify-between items-center relative sticky top-0 z-50 backdrop-blur-md">
+      <header className="bg-muted text-foreground shadow-md py-4 px-4 md:px-6 flex justify-between items-center relative sticky top-0 z-50 backdrop-blur-md">
         <a href="#home" className="flex items-center space-x-2 cursor-pointer">
           <img
             src="/android-chrome-512x512.png"
             alt="Logo MediConnect"
             className="w-20 h-20 object-contain transition-transform hover:scale-105"
           />
-          <h1 className="text-2xl font-extrabold text-[#1E2A78] tracking-tight">
+          <h1 className="text-2xl font-extrabold text-foreground tracking-tight">
             MedConnect
           </h1>
         </a>
@@ -35,7 +41,7 @@ export default function InicialPage() {
           <Link href="/login">
             <Button
               variant="outline"
-              className="rounded-full px-4 py-2 text-sm border-2 border-[#007BFF] text-[#007BFF] hover:bg-[#007BFF] hover:text-white transition"
+              className="rounded-full px-4 py-2 text-sm border-2 border-primary text-primary hover:bg-primary hover:text-primary-foreground transition"
             >
               Login
             </Button>
@@ -76,20 +82,20 @@ export default function InicialPage() {
             isMenuOpen ? "block" : "hidden"
           } absolute top-[76px] left-0 w-full bg-white shadow-md py-4 md:relative md:top-auto md:left-auto md:w-auto md:block md:bg-transparent md:shadow-none transition-all duration-300 z-10`}
         >
-          <div className="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-8 text-gray-600 font-medium items-center">
-            <Link href="#home" className="hover:text-[#007BFF] transition">
+          <div className="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-8 text-foreground font-medium items-center">
+            <Link href="#home" className="hover:text-primary transition">
               Home
             </Link>
-            <a href="#about" className="hover:text-[#007BFF] transition">
+            <a href="#about" className="hover:text-primary transition">
               Sobre
             </a>
-            <a href="#departments" className="hover:text-[#007BFF] transition">
+            <a href="#departments" className="hover:text-primary transition">
               Departamentos
             </a>
-            <a href="#doctors" className="hover:text-[#007BFF] transition">
+            <a href="#doctors" className="hover:text-primary transition">
               Médicos
             </a>
-            <a href="#contact" className="hover:text-[#007BFF] transition">
+            <a href="#contact" className="hover:text-primary transition">
               Contato
             </a>
           </div>
@@ -100,7 +106,7 @@ export default function InicialPage() {
           <Link href="/login">
             <Button
               variant="outline"
-              className="rounded-full px-6 py-2 border-2 border-[#007BFF] text-[#007BFF] hover:bg-[#007BFF] hover:text-white transition cursor-pointer"
+              className="rounded-full px-6 py-2 border-2 border-primary text-primary hover:bg-primary hover:text-primary-foreground transition cursor-pointer"
             >
               Login
             </Button>
@@ -108,7 +114,7 @@ export default function InicialPage() {
         </div>
       </header>
       {/* Hero Section */}
-      <section className="flex flex-col md:flex-row items-center justify-between px-6 md:px-10 lg:px-20 py-20 bg-gradient-to-r from-[#1E2A78] via-[#007BFF] to-[#00BFFF] text-white">
+      <section className={`flex flex-col md:flex-row items-center justify-between ${heroClass}`}>
         <div className="max-w-lg mx-auto md:mx-0">
           <h2 className="uppercase text-sm tracking-widest opacity-80">
             Bem-vindo à Saúde Digital
@@ -116,15 +122,15 @@ export default function InicialPage() {
           <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight mt-2 drop-shadow-lg">
             Soluções Médicas <br /> & Cuidados com a Saúde
           </h1>
-          <p className="mt-4 text-base leading-relaxed opacity-90">
+          <p className="mt-4 text-base leading-relaxed opacity-90 text-foreground">
             Excelência em saúde há mais de 25 anos. Atendimento médico com
             qualidade, segurança e carinho.
           </p>
           <div className="mt-8 flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center md:justify-start">
-            <Button className="px-8 py-3 text-base font-semibold bg-white text-[#1E2A78] hover:bg-[#EAF4FF] transition-all shadow-md">
+            <Button className="px-8 py-3 text-base font-semibold bg-card text-card-foreground hover:bg-muted transition-all shadow-md">
               Nossos Serviços
             </Button>
-            <Button className="px-8 py-3 text-base font-semibold bg-white text-[#1E2A78] hover:bg-[#EAF4FF] transition-all shadow-md">
+            <Button className="px-8 py-3 text-base font-semibold bg-card text-card-foreground hover:bg-muted transition-all shadow-md">
               Saiba Mais
             </Button>
           </div>
@@ -140,12 +146,12 @@ export default function InicialPage() {
       {/* Serviços */}
       <section
         id="departments"
-        className="py-20 px-6 md:px-10 lg:px-20 bg-[#F8FBFF]"
+        className="py-20 px-6 md:px-10 lg:px-20 bg-secondary"
       >
-        <h2 className="text-center text-3xl sm:text-4xl font-extrabold text-[#1E2A78]">
+        <h2 className="text-center text-3xl sm:text-4xl font-extrabold text-foreground">
           Cuidados completos para a sua saúde
         </h2>
-        <p className="text-center text-gray-600 mt-3 text-base">
+        <p className="text-center text-muted-foreground mt-3 text-base">
           Serviços médicos que oferecemos
         </p>
 
@@ -170,16 +176,16 @@ export default function InicialPage() {
           ].map(({ title, desc, Icon }, index) => (
             <div
               key={index}
-              className="p-8 bg-white rounded-2xl shadow-md hover:shadow-xl transition-all duration-300 border border-[#E0E9FF] group"
+              className="p-8 bg-card rounded-2xl shadow-md hover:shadow-xl transition-all duration-300 border border-border group"
             >
               <div className="flex items-center space-x-3">
-                <Icon className="text-[#007BFF] w-6 h-6 group-hover:scale-110 transition-transform" />
+                <Icon className="text-primary w-6 h-6 group-hover:scale-110 transition-transform" />
                 <h3 className="text-xl font-semibold">{title}</h3>
               </div>
-              <p className="text-gray-600 mt-3 text-sm leading-relaxed">
+              <p className="text-muted-foreground mt-3 text-sm leading-relaxed">
                 {desc}
               </p>
-              <Button className="mt-6 w-full bg-[#007BFF] hover:bg-[#005FCC] text-white transition">
+              <Button className="mt-6 w-full bg-primary hover:opacity-90 text-primary-foreground transition">
                 Agendar
               </Button>
             </div>
@@ -187,17 +193,17 @@ export default function InicialPage() {
         </div>
       </section>
       {/* Footer */}
-      <footer className="bg-[#1E2A78] text-white py-8 text-center text-sm">
+      <footer className="bg-primary text-primary-foreground py-8 text-center text-sm border-t-2 border-primary-foreground/20">
         <div className="space-y-2">
           <p>© 2025 MediConnect — Todos os direitos reservados</p>
-          <div className="flex justify-center space-x-6 opacity-80">
-            <a href="#about" className="hover:text-[#00BFFF] transition">
+          <div className="flex justify-center space-x-6 opacity-90">
+            <a href="#about" className="hover:opacity-70 transition">
               Sobre
             </a>
-            <a href="#departments" className="hover:text-[#00BFFF] transition">
+            <a href="#departments" className="hover:opacity-70 transition">
               Serviços
             </a>
-            <a href="#contact" className="hover:text-[#00BFFF] transition">
+            <a href="#contact" className="hover:opacity-70 transition">
               Contato
             </a>
           </div>
diff --git a/app/patient/appointments/page.tsx b/app/patient/appointments/page.tsx
index 23f8ee6..d8ff972 100644
--- a/app/patient/appointments/page.tsx
+++ b/app/patient/appointments/page.tsx
@@ -1,93 +1,83 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
-import { Calendar, Clock, CalendarDays, X } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Calendar,
+  Clock,
+  MapPin,
+  Phone,
+  User,
+  X,
+  AlertCircle,
+} from "lucide-react";
 import { toast } from "sonner";
-
 import { appointmentsService } from "@/services/appointmentsApi.mjs";
 import { usersService } from "@/services/usersApi.mjs";
+import { doctorsService } from "@/services/doctorsApi.mjs";
 import Sidebar from "@/components/Sidebar";
 
-// Tipagem correta para o usuário
-interface UserProfile {
-  id: string;
-  full_name: string;
-  email: string;
-  phone?: string;
-  avatar_url?: string;
-}
-
-interface User {
-  user: {
-    id: string;
-    email: string;
-  };
-  profile: UserProfile;
-  roles: string[];
-  permissions?: any;
-}
-
-interface Appointment {
-  id: string;
-  doctor_id: string;
-  scheduled_at: string;
-  status: string;
-  doctorName?: string;
-}
-
 export default function PatientAppointmentsPage() {
-  const [appointments, setAppointments] = useState<Appointment[]>([]);
+  const [appointments, setAppointments] = useState<any[]>([]);
   const [isLoading, setIsLoading] = useState(true);
-  const [userData, setUserData] = useState<User | null>(null);
+  
+  // Estados para cancelamento
+  const [cancelModal, setCancelModal] = useState(false);
+  const [selectedAppointment, setSelectedAppointment] = useState<any>(null);
 
-  // --- Busca o usuário logado ---
-  const fetchUser = async () => {
-    try {
-      const user: User = await usersService.getMe();
-      if (!user.roles.includes("patient") && !user.roles.includes("user")) {
-        toast.error("Apenas pacientes podem visualizar suas consultas.");
-        setIsLoading(false);
-        return null;
-      }
-      setUserData(user);
-      return user;
-    } catch (err) {
-      console.error("Erro ao buscar usuário logado:", err);
-      toast.error("Não foi possível identificar o usuário logado.");
-      setIsLoading(false);
-      return null;
-    }
-  };
-
-  // --- Busca consultas do paciente ---
-  const fetchAppointments = async (patientId: string) => {
+  const fetchData = async () => {
     setIsLoading(true);
     try {
-      const queryParams = `patient_id=eq.${patientId}&order=scheduled_at.desc`;
-      const appointmentsList: Appointment[] = await appointmentsService.search_appointment(queryParams);
+      // 1. Obter usuário logado
+      const user = await usersService.getMe();
+      if (!user || !user.user?.id) {
+        toast.error("Usuário não identificado.");
+        return;
+      }
 
-      // Buscar nome do médico para cada consulta
-      const appointmentsWithDoctor = await Promise.all(
-        appointmentsList.map(async (apt) => {
-          let doctorName = apt.doctor_id;
-          if (apt.doctor_id) {
-            try {
-              const doctorInfo = await usersService.full_data(apt.doctor_id);
-              doctorName = doctorInfo?.profile?.full_name || apt.doctor_id;
-            } catch (err) {
-              console.error("Erro ao buscar nome do médico:", err);
-            }
-          }
-          return { ...apt, doctorName };
-        })
-      );
+      // 2. Buscar médicos e agendamentos em paralelo
+      // Filtra apenas agendamentos deste paciente
+      const queryParams = `patient_id=eq.${"user.user.id"}&order=scheduled_at.desc`;
+      console.log("id do paciente:", user.profile.id);
+      const [appointmentList, doctorList] = await Promise.all([
+        appointmentsService.search_appointment(queryParams),
+        doctorsService.list(),
+      ]);
+      console.log("Agendamentos obtidos:", appointmentList);
+      console.log("Médicos obtidos:", doctorList);
+      // 3. Mapear médicos para acesso rápido
+      const doctorMap = new Map(doctorList.map((d: any) => [d.id, d]));
 
-      setAppointments(appointmentsWithDoctor);
-    } catch (err) {
-      console.error("Erro ao carregar consultas:", err);
+      // 4. Enriquecer os agendamentos com dados do médico
+      const enrichedAppointments = appointmentList.map((apt: any) => ({
+        ...apt,
+        doctor: doctorMap.get(apt.doctor_id) || {
+          full_name: "Médico não encontrado",
+          specialty: "Clínico Geral",
+          location: "Consultório",
+          phone: "N/A"
+        },
+      }));
+      console.log("Agendamentos enriquecidos:", enrichedAppointments);
+      setAppointments(enrichedAppointments);
+    } catch (error) {
+      console.error("Erro ao buscar dados:", error);
       toast.error("Não foi possível carregar suas consultas.");
     } finally {
       setIsLoading(false);
@@ -95,96 +85,187 @@ export default function PatientAppointmentsPage() {
   };
 
   useEffect(() => {
-    (async () => {
-      const user = await fetchUser();
-      if (user?.user.id) {
-        await fetchAppointments(user.user.id);
-      }
-    })();
+    fetchData();
   }, []);
 
-  const getStatusBadge = (status: string) => {
-    switch (status) {
-      case "requested":
-        return <Badge className="bg-yellow-100 text-yellow-800">Solicitada</Badge>;
-      case "confirmed":
-        return <Badge className="bg-blue-100 text-blue-800">Confirmada</Badge>;
-      case "checked_in":
-        return <Badge className="bg-indigo-100 text-indigo-800">Check-in</Badge>;
-      case "completed":
-        return <Badge className="bg-green-100 text-green-800">Realizada</Badge>;
-      case "cancelled":
-        return <Badge className="bg-red-100 text-red-800">Cancelada</Badge>;
-      default:
-        return <Badge variant="secondary">{status}</Badge>;
+  // --- LÓGICA DE CANCELAMENTO ---
+  const handleCancelClick = (appointment: any) => {
+    setSelectedAppointment(appointment);
+    setCancelModal(true);
+  };
+
+  const confirmCancel = async () => {
+    if (!selectedAppointment) return;
+    try {
+      // Opção A: Deletar o registro (como no código da secretária)
+      await appointmentsService.delete(selectedAppointment.id);
+      
+      // Opção B: Se preferir apenas mudar o status, descomente abaixo e comente a linha acima:
+      // await appointmentsService.update(selectedAppointment.id, { status: 'cancelled' });
+
+      setAppointments((prev) =>
+        prev.filter((apt) => apt.id !== selectedAppointment.id)
+      );
+      setCancelModal(false);
+      toast.success("Consulta cancelada com sucesso.");
+    } catch (error) {
+      console.error("Erro ao cancelar consulta:", error);
+      toast.error("Não foi possível cancelar a consulta.");
     }
   };
 
-  const handleReschedule = (apt: Appointment) => {
-    toast.info(`Funcionalidade de reagendamento da consulta ${apt.id} ainda não implementada`);
-  };
-
-  const handleCancel = (apt: Appointment) => {
-    toast.info(`Funcionalidade de cancelamento da consulta ${apt.id} ainda não implementada`);
-  };
-
-    return (
-        <Sidebar>
-            <div className="space-y-6">
-                <div className="flex justify-between items-center">
-                    <div>
-                        <h1 className="text-3xl font-bold text-foreground">Minhas Consultas</h1>
-                        <p className="text-muted-foreground">Veja, reagende ou cancele suas consultas</p>
-                    </div>
-                </div>
+  return (
+    <Sidebar>
+      <div className="space-y-6">
+        <div className="flex justify-between items-center">
+          <div>
+            <h1 className="text-3xl font-bold">Minhas Consultas</h1>
+            <p className="text-muted-foreground">
+              Acompanhe seu histórico e próximos agendamentos
+            </p>
+          </div>
+        </div>
 
         <div className="grid gap-6">
           {isLoading ? (
             <p>Carregando consultas...</p>
-          ) : appointments.length === 0 ? (
-            <p className="text-gray-600">Você ainda não possui consultas agendadas.</p>
-          ) : (
-            appointments.map((apt) => (
-              <Card key={apt.id}>
-                <CardHeader className="flex justify-between items-start">
-                  <div>
-                    <CardTitle className="text-lg">{apt.doctorName}</CardTitle>
-                    <CardDescription>Especialidade: N/A</CardDescription>
+          ) : appointments.length > 0 ? (
+            appointments.map((appointment) => (
+              <Card key={appointment.id}>
+                <CardHeader>
+                  <div className="flex justify-between items-start">
+                    <div>
+                      <CardTitle className="text-lg">
+                        {appointment.doctor.full_name}
+                      </CardTitle>
+                      <CardDescription>
+                        {appointment.doctor.specialty}
+                      </CardDescription>
+                    </div>
+                    {getStatusBadge(appointment.status)}
                   </div>
-                  {getStatusBadge(apt.status)}
                 </CardHeader>
-                <CardContent className="grid md:grid-cols-2 gap-3 text-sm text-gray-700">
-                  <div className="space-y-2">
-                    <div className="flex items-center">
-                      <Calendar className="mr-2 h-4 w-4 text-gray-500" />
-                      {new Date(apt.scheduled_at).toLocaleDateString("pt-BR")}
+                <CardContent>
+                  <div className="grid md:grid-cols-2 gap-4">
+                    {/* Coluna 1: Data e Hora */}
+                    <div className="space-y-3">
+                      <div className="flex items-center text-sm text-foreground font-medium">
+                        <User className="mr-2 h-4 w-4 text-muted-foreground" />
+                        Dr(a). {appointment.doctor.full_name.split(' ')[0]}
+                      </div>
+                      <div className="flex items-center text-sm text-muted-foreground">
+                        <Calendar className="mr-2 h-4 w-4" />
+                        {new Date(appointment.scheduled_at).toLocaleDateString(
+                          "pt-BR",
+                          { timeZone: "UTC" }
+                        )}
+                      </div>
+                      <div className="flex items-center text-sm text-muted-foreground">
+                        <Clock className="mr-2 h-4 w-4" />
+                        {new Date(appointment.scheduled_at).toLocaleTimeString(
+                          "pt-BR",
+                          {
+                            hour: "2-digit",
+                            minute: "2-digit",
+                            timeZone: "UTC",
+                          }
+                        )}
+                      </div>
                     </div>
-                    <div className="flex items-center">
-                      <Clock className="mr-2 h-4 w-4 text-gray-500" />
-                      {new Date(apt.scheduled_at).toLocaleTimeString("pt-BR", {
-                        hour: "2-digit",
-                        minute: "2-digit",
-                      })}
+
+                    {/* Coluna 2: Localização e Contato */}
+                    <div className="space-y-3">
+                      <div className="flex items-center text-sm text-muted-foreground">
+                        <MapPin className="mr-2 h-4 w-4" />
+                        {appointment.doctor.location || "Local a definir"}
+                      </div>
+                      <div className="flex items-center text-sm text-muted-foreground">
+                        <Phone className="mr-2 h-4 w-4" />
+                        {appointment.doctor.phone || "Contato não disponível"}
+                      </div>
                     </div>
                   </div>
-                  <div className="flex gap-2 mt-4 pt-4 border-t">
-                    {apt.status !== "cancelled" && (
-                      <>
-                        <Button variant="outline" size="sm" onClick={() => handleReschedule(apt)}>
-                          <CalendarDays className="mr-2 h-4 w-4" /> Reagendar
-                        </Button>
-                        <Button variant="destructive" size="sm" onClick={() => handleCancel(apt)}>
-                          <X className="mr-2 h-4 w-4" /> Cancelar
-                        </Button>
-                      </>
-                    )}
-                  </div>
+
+                  {/* Ações */}
+                  {["requested", "confirmed"].includes(appointment.status) && (
+                    <div className="flex gap-2 mt-4 pt-4 border-t justify-end">
+                      <Button 
+                        variant="destructive" 
+                        size="sm" 
+                        className="bg-transparent text-destructive hover:bg-destructive/10 border border-destructive/20"
+                        onClick={() => handleCancelClick(appointment)}
+                      >
+                        <X className="mr-2 h-4 w-4" />
+                        Cancelar Consulta
+                      </Button>
+                    </div>
+                  )}
                 </CardContent>
               </Card>
             ))
+          ) : (
+            <div className="text-center py-10 border rounded-lg bg-muted/20">
+              <Calendar className="mx-auto h-10 w-10 text-muted-foreground mb-4" />
+              <p className="text-muted-foreground">Você ainda não possui consultas agendadas.</p>
+            </div>
           )}
         </div>
       </div>
+
+      {/* Modal de Confirmação de Cancelamento */}
+      <Dialog open={cancelModal} onOpenChange={setCancelModal}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <AlertCircle className="h-5 w-5 text-destructive" />
+              Cancelar Consulta
+            </DialogTitle>
+            <DialogDescription>
+              Tem certeza que deseja cancelar sua consulta com{" "}
+              <strong>{selectedAppointment?.doctor?.full_name}</strong> no dia{" "}
+              {selectedAppointment &&
+                new Date(selectedAppointment.scheduled_at).toLocaleDateString(
+                  "pt-BR", { timeZone: "UTC" }
+                )}
+              ? Esta ação não pode ser desfeita.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setCancelModal(false)}>
+              Voltar
+            </Button>
+            <Button variant="destructive" onClick={confirmCancel}>
+              Confirmar Cancelamento
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </Sidebar>
   );
 }
+
+// Helper para Badges (Mantido consistente com o código da secretária)
+const getStatusBadge = (status: string) => {
+  switch (status) {
+    case "requested":
+      return (
+        <Badge className="bg-yellow-400/10 text-yellow-600 hover:bg-yellow-400/20 border-yellow-400/20">Solicitada</Badge>
+      );
+    case "confirmed":
+      return <Badge className="bg-primary/10 text-primary hover:bg-primary/20 border-primary/20">Confirmada</Badge>;
+    case "checked_in":
+      return (
+        <Badge className="bg-indigo-400/10 text-indigo-600 hover:bg-indigo-400/20 border-indigo-400/20">Check-in</Badge>
+      );
+    case "completed":
+      return <Badge className="bg-green-400/10 text-green-600 hover:bg-green-400/20 border-green-400/20">Realizada</Badge>;
+    case "cancelled":
+      return <Badge className="bg-destructive/10 text-destructive hover:bg-destructive/20 border-destructive/20">Cancelada</Badge>;
+    case "no_show":
+      return (
+        <Badge className="bg-muted text-foreground border-muted-foreground/20">Não Compareceu</Badge>
+      );
+    default:
+      return <Badge variant="secondary">{status}</Badge>;
+  }
+};
\ No newline at end of file
diff --git a/app/patient/dashboard/page.tsx b/app/patient/dashboard/page.tsx
index 081305a..0b1520f 100644
--- a/app/patient/dashboard/page.tsx
+++ b/app/patient/dashboard/page.tsx
@@ -15,8 +15,8 @@ export default function PatientDashboard() {
     <Sidebar>
       <div className="space-y-6">
         <div>
-          <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
-          <p className="text-gray-600">
+          <h1 className="text-3xl font-bold text-foreground">Dashboard</h1>
+          <p className="text-muted-foreground">
             Bem-vindo ao seu portal de consultas médicas
           </p>
         </div>
@@ -72,15 +72,15 @@ export default function PatientDashboard() {
             </CardHeader>
             <CardContent className="space-y-4">
               <Link href="/patient/schedule">
-                <Button className="w-full justify-start bg-blue-600 text-white hover:bg-blue-700">
-                  <User className="mr-2 h-4 w-4 text-white" />
+                <Button className="w-full justify-start">
+                  <User className="mr-2 h-4 w-4" />
                   Agendar Nova Consulta
                 </Button>
               </Link>
               <Link href="/patient/appointments">
                 <Button
-                  variant="outline"
-                  className="w-full justify-start bg-transparent bg-blue-600 hover:bg-blue-700 text-white"
+                  variant="secondary"
+                  className="w-full justify-start"
                 >
                   <Calendar className="mr-2 h-4 w-4" />
                   Ver Minhas Consultas
@@ -89,7 +89,7 @@ export default function PatientDashboard() {
               <Link href="/patient/profile">
                 <Button
                   variant="outline"
-                  className="w-full justify-start bg-transparent"
+                  className="w-full justify-start"
                 >
                   <User className="mr-2 h-4 w-4" />
                   Atualizar Dados
@@ -105,24 +105,24 @@ export default function PatientDashboard() {
             </CardHeader>
             <CardContent>
               <div className="space-y-4">
-                <div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
+                <div className="flex items-center justify-between p-3 bg-muted rounded-lg">
                   <div>
                     <p className="font-medium">Dr. Silva</p>
-                    <p className="text-sm text-gray-600">Cardiologia</p>
+                    <p className="text-sm text-muted-foreground">Cardiologia</p>
                   </div>
                   <div className="text-right">
                     <p className="font-medium">15 Jan</p>
-                    <p className="text-sm text-gray-600">14:30</p>
+                    <p className="text-sm text-muted-foreground">14:30</p>
                   </div>
                 </div>
-                <div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
+                <div className="flex items-center justify-between p-3 bg-muted rounded-lg">
                   <div>
                     <p className="font-medium">Dra. Santos</p>
-                    <p className="text-sm text-gray-600">Dermatologia</p>
+                    <p className="text-sm text-muted-foreground">Dermatologia</p>
                   </div>
                   <div className="text-right">
                     <p className="font-medium">22 Jan</p>
-                    <p className="text-sm text-gray-600">10:00</p>
+                    <p className="text-sm text-muted-foreground">10:00</p>
                   </div>
                 </div>
               </div>
diff --git a/app/patient/profile/page.tsx b/app/patient/profile/page.tsx
index 46911b9..9641a1e 100644
--- a/app/patient/profile/page.tsx
+++ b/app/patient/profile/page.tsx
@@ -1,18 +1,17 @@
-// ARQUIVO COMPLETO PARA: app/patient/profile/page.tsx
-
+// Caminho: app/patient/profile/page.tsx
 "use client";
 
 import { useState, useEffect, useRef } from "react";
 import Sidebar from "@/components/Sidebar";
 import { useAuthLayout } from "@/hooks/useAuthLayout";
 import { patientsService } from "@/services/patientsApi.mjs";
+import { usersService } from "@/services/usersApi.mjs"; // Adicionado import
 import { api } from "@/services/api.mjs";
 
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
 import { User, Mail, Phone, Calendar, Upload } from "lucide-react";
 import { toast } from "@/hooks/use-toast";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
@@ -34,18 +33,45 @@ export default function PatientProfile() {
   const { user, isLoading: isAuthLoading } = useAuthLayout({
     requiredRole: ["paciente", "admin", "medico", "gestor", "secretaria"],
   });
-  const [patientData, setPatientData] = useState<PatientProfileData | null>(
-    null
-  );
+
+  const [patientData, setPatientData] = useState<PatientProfileData | null>(null);
   const [isEditing, setIsEditing] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  const getInitials = (name: string) => {
+    if (!name) return "U";
+    return name
+      .split(" ")
+      .map((n) => n[0])
+      .slice(0, 2)
+      .join("")
+      .toUpperCase();
+  };
+
+  // Função auxiliar para construir URL do avatar
+  const buildAvatarUrl = (path: string | null | undefined) => {
+    if (!path) return undefined;
+    const baseUrl = "https://yuanqfswhberkoevtmfr.supabase.co";
+    const cleanPath = path.startsWith('/') ? path.slice(1) : path;
+    const separator = cleanPath.includes('?') ? '&' : '?';
+    return `${baseUrl}/storage/v1/object/avatars/${cleanPath}${separator}t=${new Date().getTime()}`;
+  };
+
   useEffect(() => {
     if (user?.id) {
-      const fetchPatientDetails = async () => {
+      const loadData = async () => {
         try {
+          // 1. Busca dados médicos (Tabela Patients)
           const patientDetails = await patientsService.getById(user.id);
+          
+          // 2. Busca dados de sistema frescos (Tabela Profiles via getMe)
+          // Isso garante que pegamos o avatar real do banco, não do cache local
+          const userSystemData = await usersService.getMe();
+          
+          const freshAvatarPath = userSystemData?.profile?.avatar_url;
+          const freshAvatarUrl = buildAvatarUrl(freshAvatarPath);
+
           setPatientData({
             name: patientDetails.full_name || user.name,
             email: user.email,
@@ -56,10 +82,10 @@ export default function PatientProfile() {
             street: patientDetails.street || "",
             number: patientDetails.number || "",
             city: patientDetails.city || "",
-            avatarFullUrl: user.avatarFullUrl,
+            avatarFullUrl: freshAvatarUrl, // Usa a URL fresca do banco
           });
         } catch (error) {
-          console.error("Erro ao buscar detalhes do paciente:", error);
+          console.error("Erro ao buscar detalhes:", error);
           toast({
             title: "Erro",
             description: "Não foi possível carregar seus dados completos.",
@@ -67,9 +93,9 @@ export default function PatientProfile() {
           });
         }
       };
-      fetchPatientDetails();
+      loadData();
     }
-  }, [user]);
+  }, [user?.id, user?.email, user?.name]); // Removi user.avatarFullUrl para não depender do cache
 
   const handleInputChange = (
     field: keyof PatientProfileData,
@@ -78,6 +104,27 @@ export default function PatientProfile() {
     setPatientData((prev) => (prev ? { ...prev, [field]: value } : null));
   };
 
+  const updateLocalSession = (updates: { full_name?: string; avatar_url?: string }) => {
+    try {
+      const storedUserString = localStorage.getItem("user_info");
+      if (storedUserString) {
+        const storedUser = JSON.parse(storedUserString);
+        
+        if (!storedUser.user_metadata) storedUser.user_metadata = {};
+        if (updates.full_name) storedUser.user_metadata.full_name = updates.full_name;
+        if (updates.avatar_url) storedUser.user_metadata.avatar_url = updates.avatar_url;
+        
+        if (!storedUser.profile) storedUser.profile = {};
+        if (updates.full_name) storedUser.profile.full_name = updates.full_name;
+        if (updates.avatar_url) storedUser.profile.avatar_url = updates.avatar_url;
+
+        localStorage.setItem("user_info", JSON.stringify(storedUser));
+      }
+    } catch (e) {
+      console.error("Erro ao atualizar sessão local:", e);
+    }
+  };
+
   const handleSave = async () => {
     if (!patientData || !user) return;
     setIsSaving(true);
@@ -92,12 +139,22 @@ export default function PatientProfile() {
         number: patientData.number,
         city: patientData.city,
       };
+      
       await patientsService.update(user.id, patientPayload);
+      await api.patch(`/rest/v1/profiles?id=eq.${user.id}`, {
+        full_name: patientData.name,
+      });
+      
+      updateLocalSession({ full_name: patientData.name });
+
       toast({
         title: "Sucesso!",
-        description: "Seus dados foram atualizados.",
+        description: "Seus dados foram atualizados. A página será recarregada.",
       });
+      
       setIsEditing(false);
+      setTimeout(() => window.location.reload(), 1000);
+
     } catch (error) {
       console.error("Erro ao salvar dados:", error);
       toast({
@@ -121,9 +178,6 @@ export default function PatientProfile() {
     if (!file || !user) return;
 
     const fileExt = file.name.split(".").pop();
-
-    // *** A CORREÇÃO ESTÁ AQUI ***
-    // O caminho salvo no banco de dados não deve conter o nome do bucket.
     const filePath = `${user.id}/avatar.${fileExt}`;
 
     try {
@@ -132,15 +186,21 @@ export default function PatientProfile() {
         avatar_url: filePath,
       });
 
-      const newFullUrl = `https://yuanqfswhberkoevtmfr.supabase.co/storage/v1/object/public/avatars/${filePath}?t=${new Date().getTime()}`;
+      const newFullUrl = buildAvatarUrl(filePath);
+      
       setPatientData((prev) =>
         prev ? { ...prev, avatarFullUrl: newFullUrl } : null
       );
 
+      updateLocalSession({ avatar_url: filePath });
+
       toast({
         title: "Sucesso!",
         description: "Sua foto de perfil foi atualizada.",
       });
+
+      setTimeout(() => window.location.reload(), 1000);
+
     } catch (error) {
       console.error("Erro no upload do avatar:", error);
       toast({
@@ -154,7 +214,9 @@ export default function PatientProfile() {
   if (isAuthLoading || !patientData) {
     return (
       <Sidebar>
-        <div>Carregando seus dados...</div>
+        <div className="flex items-center justify-center h-full">
+          <p className="text-muted-foreground">Carregando seus dados...</p>
+        </div>
       </Sidebar>
     );
   }
@@ -164,8 +226,8 @@ export default function PatientProfile() {
       <div className="space-y-6">
         <div className="flex justify-between items-center">
           <div>
-            <h1 className="text-3xl font-bold text-gray-900">Meus Dados</h1>
-            <p className="text-gray-600">Gerencie suas informações pessoais</p>
+            <h1 className="text-3xl font-bold text-foreground">Meus Dados</h1>
+            <p className="text-muted-foreground">Gerencie suas informações pessoais</p>
           </div>
           <Button
             onClick={() => (isEditing ? handleSave() : setIsEditing(true))}
@@ -313,22 +375,20 @@ export default function PatientProfile() {
               </CardHeader>
               <CardContent className="space-y-4">
                 <div className="flex items-center space-x-3">
-                  <div className="relative">
+                  <div className="relative group">
                     <Avatar
-                      className="w-16 h-16 cursor-pointer"
+                      className="w-16 h-16 cursor-pointer border-2 border-transparent group-hover:border-blue-500 transition-all"
                       onClick={handleAvatarClick}
                     >
-                      <AvatarImage src={patientData.avatarFullUrl} />
-                      <AvatarFallback className="text-2xl">
-                        {patientData.name
-                          .split(" ")
-                          .map((n) => n[0])
-                          .join("")}
+                      <AvatarImage src={patientData.avatarFullUrl} className="object-cover" />
+                      <AvatarFallback className="text-2xl bg-gray-200 text-gray-700 font-bold">
+                        {getInitials(patientData.name)}
                       </AvatarFallback>
                     </Avatar>
                     <div
-                      className="absolute bottom-0 right-0 bg-primary text-primary-foreground rounded-full p-1 cursor-pointer hover:bg-primary/80"
+                      className="absolute bottom-0 right-0 bg-blue-600 text-white rounded-full p-1.5 cursor-pointer hover:bg-blue-700 shadow-md transition-colors"
                       onClick={handleAvatarClick}
+                      title="Alterar foto"
                     >
                       <Upload className="w-3 h-3" />
                     </div>
@@ -337,25 +397,25 @@ export default function PatientProfile() {
                       ref={fileInputRef}
                       onChange={handleAvatarUpload}
                       className="hidden"
-                      accept="image/png, image/jpeg"
+                      accept="image/png, image/jpeg, image/jpg"
                     />
                   </div>
                   <div>
-                    <p className="font-medium">{patientData.name}</p>
+                    <p className="font-medium text-lg">{patientData.name}</p>
                     <p className="text-sm text-gray-500">Paciente</p>
                   </div>
                 </div>
                 <div className="space-y-3 pt-4 border-t">
                   <div className="flex items-center text-sm">
-                    <Mail className="mr-2 h-4 w-4 text-gray-500" />
+                    <Mail className="mr-2 h-4 w-4 text-muted-foreground" />
                     <span className="truncate">{patientData.email}</span>
                   </div>
                   <div className="flex items-center text-sm">
-                    <Phone className="mr-2 h-4 w-4 text-gray-500" />
+                    <Phone className="mr-2 h-4 w-4 text-muted-foreground" />
                     <span>{patientData.phone || "Não informado"}</span>
                   </div>
                   <div className="flex items-center text-sm">
-                    <Calendar className="mr-2 h-4 w-4 text-gray-500" />
+                    <Calendar className="mr-2 h-4 w-4 text-muted-foreground" />
                     <span>
                       {patientData.birthDate
                         ? new Date(patientData.birthDate).toLocaleDateString(
@@ -373,4 +433,4 @@ export default function PatientProfile() {
       </div>
     </Sidebar>
   );
-}
+}
\ No newline at end of file
diff --git a/app/patient/register/page.tsx b/app/patient/register/page.tsx
index d521f2a..640dacf 100644
--- a/app/patient/register/page.tsx
+++ b/app/patient/register/page.tsx
@@ -85,19 +85,18 @@ export default function PatientRegister() {
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 py-8 px-4">
+    <div className="min-h-screen bg-background py-8 px-4">
       <div className="max-w-2xl mx-auto">
         <div className="mb-6">
-          <Link href="/" className="inline-flex items-center text-blue-600 hover:text-blue-800">
+          <Link href="/" className="inline-flex items-center text-primary hover:text-primary/90">
             <ArrowLeft className="w-4 h-4 mr-2" />
             Voltar ao início
           </Link>
         </div>
-
         <Card>
           <CardHeader className="text-center">
-            <CardTitle className="text-2xl">Crie sua Conta de Paciente</CardTitle>
-            <CardDescription>Preencha seus dados para acessar o portal MedConnect</CardDescription>
+            <CardTitle className="text-2xl text-foreground">Crie sua Conta de Paciente</CardTitle>
+            <CardDescription className="text-muted-foreground">Preencha seus dados para acessar o portal MedConnect</CardDescription>
           </CardHeader>
           <CardContent>
             <form onSubmit={handleRegister} className="space-y-4">
@@ -172,9 +171,9 @@ export default function PatientRegister() {
             </form>
 
             <div className="mt-6 text-center">
-              <p className="text-sm text-gray-600">
-                Já tem uma conta?{" "}
-                <Link href="/login" className="text-blue-600 hover:underline">
+              <p className="text-sm">
+                <span className="text-muted-foreground">Já tem uma conta?</span>{" "}
+                <Link href="/login" className="text-primary hover:underline font-medium">
                   Faça login aqui
                 </Link>
               </p>
diff --git a/app/patient/reports/page.tsx b/app/patient/reports/page.tsx
index 32ec3c4..c87b30f 100644
--- a/app/patient/reports/page.tsx
+++ b/app/patient/reports/page.tsx
@@ -37,8 +37,9 @@ export default function ReportsPage() {
   const [selectedReport, setSelectedReport] = useState<Report | null>(null)
   const [isViewModalOpen, setIsViewModalOpen] = useState(false)
   const [isLoading, setIsLoading] = useState(true)
-    const requiredRole = useMemo(() => ["paciente"], []);
-  const { user, isLoading: isAuthLoading } = useAuthLayout({ requiredRole });
+    const { user, isLoading: isAuthLoading } = useAuthLayout({
+    requiredRole: ["paciente", "admin", "medico", "gestor", "secretaria"],
+  });
 
 
   useEffect(() => {
@@ -131,8 +132,8 @@ export default function ReportsPage() {
     <Sidebar>
       <div className="space-y-6">
         <div>
-          <h1 className="text-3xl font-bold text-gray-900">Meus Laudos</h1>
-          <p className="text-gray-600 mt-2">Visualize e baixe seus laudos médicos e resultados de exames</p>
+          <h1 className="text-3xl font-bold text-foreground">Meus Laudos</h1>
+          <p className="text-muted-foreground mt-2">Visualize e baixe seus laudos médicos e resultados de exames</p>
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
@@ -167,7 +168,7 @@ export default function ReportsPage() {
 
         {availableReports.length > 0 && (
           <div>
-            <h2 className="text-xl font-semibold text-gray-900 mb-4">Laudos Disponíveis</h2>
+            <h2 className="text-xl font-semibold text-foreground mb-4">Laudos Disponíveis</h2>
             <div className="grid gap-4">
               {availableReports.map((report) => (
                 <Card key={report.id} className="hover:shadow-md transition-shadow">
@@ -192,7 +193,7 @@ export default function ReportsPage() {
                     </div>
                   </CardHeader>
                   <CardContent>
-                    <p className="text-gray-600 mb-4">{report.diagnosis}</p>
+                    <p className="text-muted-foreground mb-4">{report.diagnosis}</p>
                     <div className="flex gap-2">
                       <Button
                         variant="outline"
@@ -222,7 +223,7 @@ export default function ReportsPage() {
 
         {pendingReports.length > 0 && (
           <div>
-            <h2 className="text-xl font-semibold text-gray-900 mb-4">Laudos Pendentes</h2>
+            <h2 className="text-xl font-semibold text-foreground mb-4">Laudos Pendentes</h2>
             <div className="grid gap-4">
               {pendingReports.map((report) => (
                 <Card key={report.id} className="opacity-75">
@@ -247,8 +248,8 @@ export default function ReportsPage() {
                     </div>
                   </CardHeader>
                   <CardContent>
-                     <p className="text-gray-600 mb-4">{report.diagnosis}</p>
-                    <p className="text-sm text-yellow-600 font-medium">
+                     <p className="text-muted-foreground mb-4">{report.diagnosis}</p>
+                    <p className="text-sm text-yellow-600 dark:text-yellow-500 font-medium">
                       Laudo em processamento. Você será notificado quando estiver disponível.
                     </p>
                   </CardContent>
@@ -261,9 +262,9 @@ export default function ReportsPage() {
         {reports.length === 0 && !isLoading && (
           <Card className="text-center py-12">
             <CardContent>
-              <FileText className="h-12 w-12 text-gray-400 mx-auto mb-4" />
-              <h3 className="text-lg font-medium text-gray-900 mb-2">Nenhum laudo encontrado</h3>
-              <p className="text-gray-600">Seus laudos médicos aparecerão aqui após a realização de exames.</p>
+              <FileText className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
+              <h3 className="text-lg font-medium text-foreground mb-2">Nenhum laudo encontrado</h3>
+              <p className="text-muted-foreground">Seus laudos médicos aparecerão aqui após a realização de exames.</p>
             </CardContent>
           </Card>
         )}
diff --git a/app/providers.tsx b/app/providers.tsx
new file mode 100644
index 0000000..35ae611
--- /dev/null
+++ b/app/providers.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import { AccessibilityProvider } from "./context/AccessibilityContext";
+import { AppointmentsProvider } from "./context/AppointmentsContext";
+import { AccessibilityModal } from "@/components/accessibility-modal";
+import { ThemeInitializer } from "@/components/theme-initializer";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <ThemeInitializer />
+      <AccessibilityProvider>
+        <AppointmentsProvider>{children}</AppointmentsProvider>
+        <AccessibilityModal />
+      </AccessibilityProvider>
+    </>
+  );
+}
diff --git a/app/secretary/appointments/page.tsx b/app/secretary/appointments/page.tsx
index e1702e2..d3f995b 100644
--- a/app/secretary/appointments/page.tsx
+++ b/app/secretary/appointments/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import {
   Card,
   CardContent,
@@ -11,15 +11,24 @@ import {
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Dialog } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input"; // Importei o Input
+import { Calendar as CalendarShadcn } from "@/components/ui/calendar";
+import { Separator } from "@/components/ui/separator";
 import {
-  Calendar,
+  Calendar as CalendarIcon,
   Clock,
   MapPin,
   Phone,
   User,
   Trash2,
   Pencil,
+  List,
+  RefreshCw,
+  Loader2,
+  Search, // Importei o ícone de busca
 } from "lucide-react";
+import { format, parseISO, isValid, isToday, isTomorrow } from "date-fns";
+import { ptBR } from "date-fns/locale";
 import { toast } from "sonner";
 import Link from "next/link";
 import { appointmentsService } from "@/services/appointmentsApi.mjs";
@@ -36,6 +45,9 @@ export default function SecretaryAppointments() {
   const [deleteModal, setDeleteModal] = useState(false);
   const [editModal, setEditModal] = useState(false);
 
+  // Estado da Busca
+  const [searchTerm, setSearchTerm] = useState("");
+
   // Estado para o formulário de edição
   const [editFormData, setEditFormData] = useState({
     date: "",
@@ -43,15 +55,15 @@ export default function SecretaryAppointments() {
     status: "",
   });
 
+  // Estado de data selecionada
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date());
+
   const fetchData = async () => {
     setIsLoading(true);
     try {
-      // 1. DEFINIR O PARÂMETRO DE ORDENAÇÃO
-      // 'scheduled_at.desc' ordena pela data do agendamento, em ordem descendente (mais recentes primeiro).
-      const queryParams = "order=scheduled_at.desc";
+      const queryParams = "order=scheduled_at.asc";
 
       const [appointmentList, patientList, doctorList] = await Promise.all([
-        // 2. USAR A FUNÇÃO DE BUSCA COM O PARÂMETRO DE ORDENAÇÃO
         appointmentsService.search_appointment(queryParams),
         patientsService.list(),
         doctorsService.list(),
@@ -82,9 +94,66 @@ export default function SecretaryAppointments() {
 
   useEffect(() => {
     fetchData();
-  }, []); // Array vazio garante que a busca ocorra apenas uma vez, no carregamento da página.
+  }, []);
 
-  // --- LÓGICA DE EDIÇÃO ---
+  // --- Filtragem e Agrupamento ---
+  const groupedAppointments = useMemo(() => {
+    let filteredList = appointments;
+
+    // 1. Filtro de Texto (Nome do Paciente ou Médico)
+    if (searchTerm) {
+      const lowerTerm = searchTerm.toLowerCase();
+      filteredList = filteredList.filter(
+        (apt) =>
+          apt.patient.full_name.toLowerCase().includes(lowerTerm) ||
+          apt.doctor.full_name.toLowerCase().includes(lowerTerm)
+      );
+    }
+
+    // 2. Filtro de Data (se selecionada)
+    if (selectedDate) {
+      filteredList = filteredList.filter((apt) => {
+        if (!apt.scheduled_at) return false;
+        const iso = apt.scheduled_at.toString();
+        return iso.startsWith(format(selectedDate, "yyyy-MM-dd"));
+      });
+    }
+
+    // 3. Agrupamento por dia
+    return filteredList.reduce((acc: Record<string, any[]>, apt: any) => {
+      if (!apt.scheduled_at) return acc;
+      const dateObj = new Date(apt.scheduled_at);
+      if (!isValid(dateObj)) return acc;
+      const key = format(dateObj, "yyyy-MM-dd");
+      if (!acc[key]) acc[key] = [];
+      acc[key].push(apt);
+      return acc;
+    }, {});
+  }, [appointments, selectedDate, searchTerm]);
+
+  // Dias que têm consulta (para destacar no calendário)
+  const bookedDays = useMemo(
+    () =>
+      appointments
+        .map((apt) =>
+          apt.scheduled_at ? new Date(apt.scheduled_at) : null
+        )
+        .filter((d): d is Date => d !== null && isValid(d)),
+    [appointments]
+  );
+
+  const formatDisplayDate = (dateString: string) => {
+    const date = parseISO(dateString);
+    if (isToday(date)) {
+      return `Hoje, ${format(date, "dd 'de' MMMM", { locale: ptBR })}`;
+    }
+    if (isTomorrow(date)) {
+      return `Amanhã, ${format(date, "dd 'de' MMMM", { locale: ptBR })}`;
+    }
+    return format(date, "EEEE, dd 'de' MMMM", { locale: ptBR });
+  };
+
+  // --- LÓGICA DE EDIÇÃO E DELEÇÃO ---
   const handleEdit = (appointment: any) => {
     setSelectedAppointment(appointment);
     const appointmentDate = new Date(appointment.scheduled_at);
@@ -122,11 +191,7 @@ export default function SecretaryAppointments() {
       };
 
       await appointmentsService.update(selectedAppointment.id, updatePayload);
-
-      // 3. RECARREGAR OS DADOS APÓS A EDIÇÃO
-      // Isso garante que a lista permaneça ordenada corretamente se a data for alterada.
-      fetchData();
-
+      await fetchData();
       setEditModal(false);
       toast.success("Consulta atualizada com sucesso!");
     } catch (error) {
@@ -135,7 +200,6 @@ export default function SecretaryAppointments() {
     }
   };
 
-  // --- LÓGICA DE DELEÇÃO ---
   const handleDelete = (appointment: any) => {
     setSelectedAppointment(appointment);
     setDeleteModal(true);
@@ -156,161 +220,249 @@ export default function SecretaryAppointments() {
     }
   };
 
-  const getStatusBadge = (status: string) => {
-    switch (status) {
-      case "requested":
-        return (
-          <Badge className="bg-yellow-100 text-yellow-800">Solicitada</Badge>
-        );
-      case "confirmed":
-        return <Badge className="bg-blue-100 text-blue-800">Confirmada</Badge>;
-      case "checked_in":
-        return (
-          <Badge className="bg-indigo-100 text-indigo-800">Check-in</Badge>
-        );
-      case "completed":
-        return <Badge className="bg-green-100 text-green-800">Realizada</Badge>;
-      case "cancelled":
-        return <Badge className="bg-red-100 text-red-800">Cancelada</Badge>;
-      case "no_show":
-        return (
-          <Badge className="bg-gray-100 text-gray-800">Não Compareceu</Badge>
-        );
-      default:
-        return <Badge variant="secondary">{status}</Badge>;
-    }
-  };
-
-  const timeSlots = [
-    "08:00",
-    "08:30",
-    "09:00",
-    "09:30",
-    "10:00",
-    "10:30",
-    "11:00",
-    "11:30",
-    "14:00",
-    "14:30",
-    "15:00",
-    "15:30",
-    "16:00",
-    "16:30",
-    "17:00",
-    "17:30",
-  ];
-  const appointmentStatuses = [
-    "requested",
-    "confirmed",
-    "checked_in",
-    "completed",
-    "cancelled",
-    "no_show",
-  ];
-
   return (
     <Sidebar>
       <div className="space-y-6">
-        <div className="flex justify-between items-center">
+        {/* Cabeçalho principal */}
+        <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
           <div>
-            <h1 className="text-3xl font-bold text-gray-900">
-              Consultas Agendadas
+            <h1 className="text-3xl font-bold text-foreground">
+              Agenda Médica
             </h1>
-            <p className="text-gray-600">Gerencie as consultas dos pacientes</p>
+            <p className="text-muted-foreground">
+              Consultas para os pacientes
+            </p>
           </div>
           <Link href="/secretary/schedule">
-            <Button className="bg-blue-600 hover:bg-blue-700 text-white">
-              <Calendar className="mr-2 h-4 w-4 text-white" />
+            <Button className="bg-primary hover:bg-primary/90 text-primary-foreground">
+              <CalendarIcon className="mr-2 h-4 w-4" />
               Agendar Nova Consulta
             </Button>
           </Link>
         </div>
 
-        <div className="grid gap-6">
-          {isLoading ? (
-            <p>Carregando consultas...</p>
-          ) : appointments.length > 0 ? (
-            appointments.map((appointment) => (
-              <Card key={appointment.id}>
-                <CardHeader>
-                  <div className="flex justify-between items-start">
-                    <div>
-                      <CardTitle className="text-lg">
-                        {appointment.doctor.full_name}
-                      </CardTitle>
-                      <CardDescription>
-                        {appointment.doctor.specialty}
-                      </CardDescription>
-                    </div>
-                    {getStatusBadge(appointment.status)}
-                  </div>
-                </CardHeader>
-                <CardContent>
-                  <div className="grid md:grid-cols-2 gap-4">
-                    <div className="space-y-3">
-                      <div className="flex items-center text-sm text-gray-800 font-medium">
-                        <User className="mr-2 h-4 w-4 text-gray-600" />
-                        {appointment.patient.full_name}
-                      </div>
-                      <div className="flex items-center text-sm text-gray-600">
-                        <Calendar className="mr-2 h-4 w-4" />
-                        {new Date(appointment.scheduled_at).toLocaleDateString(
-                          "pt-BR",
-                          { timeZone: "UTC" }
-                        )}
-                      </div>
-                      <div className="flex items-center text-sm text-gray-600">
-                        <Clock className="mr-2 h-4 w-4" />
-                        {new Date(appointment.scheduled_at).toLocaleTimeString(
-                          "pt-BR",
-                          {
-                            hour: "2-digit",
-                            minute: "2-digit",
-                            timeZone: "UTC",
-                          }
-                        )}
-                      </div>
-                    </div>
-                    <div className="space-y-3">
-                      <div className="flex items-center text-sm text-gray-600">
-                        <MapPin className="mr-2 h-4 w-4" />
-                        {appointment.doctor.location || "Local a definir"}
-                      </div>
-                      <div className="flex items-center text-sm text-gray-600">
-                        <Phone className="mr-2 h-4 w-4" />
-                        {appointment.doctor.phone || "N/A"}
-                      </div>
-                    </div>
-                  </div>
-
-                                    <div className="flex gap-2 mt-4 pt-4 border-t">
-                                        <Button variant="outline" size="sm" onClick={() => handleEdit(appointment)}>
-                                            <Pencil className="mr-2 h-4 w-4" />
-                                            Editar
-                                        </Button>
-                                        <Button variant="outline" size="sm" className="text-red-600 hover:text-red-700 hover:bg-red-50 bg-transparent" onClick={() => handleDelete(appointment)}>
-                                            <Trash2 className="mr-2 h-4 w-4" />
-                                            Cancelar
-                                        </Button>
-                                    </div>
-                                </CardContent>
-                            </Card>
-                        ))
-                    ) : (
-                        <p>Nenhuma consulta encontrada.</p>
-                    )}
-                </div>
+        {/* Barra de Filtros e Ações */}
+        <div className="flex flex-col md:flex-row justify-between items-center gap-4">
+          <h2 className="text-xl font-semibold capitalize whitespace-nowrap">
+            {selectedDate
+              ? `Agenda de ${format(selectedDate, "dd/MM/yyyy")}`
+              : "Todas as Consultas"}
+          </h2>
+          
+          <div className="flex flex-col md:flex-row items-center gap-3 w-full md:w-auto">
+            {/* BARRA DE PESQUISA ADICIONADA AQUI */}
+            <div className="relative w-full md:w-72">
+              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+              <Input
+                type="search"
+                placeholder="Buscar paciente ou médico..."
+                className="pl-9 w-full"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+              />
             </div>
 
-      {/* MODAL DE EDIÇÃO */}
-      <Dialog open={editModal} onOpenChange={setEditModal}>
-        {/* ... (código do modal de edição) ... */}
-      </Dialog>
+            <div className="flex gap-2 w-full md:w-auto">
+              <Button
+                onClick={() => {
+                    setSelectedDate(undefined);
+                    setSearchTerm("");
+                }}
+                variant="ghost"
+                size="sm"
+                className="flex-1 md:flex-none"
+              >
+                <List className="mr-2 h-4 w-4" />
+                Mostrar Todas
+              </Button>
+              <Button
+                onClick={() => fetchData()}
+                disabled={isLoading}
+                variant="outline"
+                size="sm"
+                className="flex-1 md:flex-none"
+              >
+                <RefreshCw
+                  className={`mr-2 h-4 w-4 ${isLoading ? "animate-spin" : ""}`}
+                />
+                Atualizar
+              </Button>
+            </div>
+          </div>
+        </div>
 
-      {/* Modal de Deleção */}
-      <Dialog open={deleteModal} onOpenChange={setDeleteModal}>
-        {/* ... (código do modal de deleção) ... */}
-      </Dialog>
+        {/* Grid com calendário + lista */}
+        <div className="grid lg:grid-cols-3 gap-6">
+          {/* Coluna esquerda: calendário */}
+          <div className="lg:col-span-1">
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center">
+                  <CalendarIcon className="mr-2 h-5 w-5" />
+                  Filtrar por Data
+                </CardTitle>
+                <CardDescription>
+                  Selecione um dia para ver os detalhes.
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="flex justify-center p-2">
+                <CalendarShadcn
+                  mode="single"
+                  selected={selectedDate}
+                  onSelect={setSelectedDate}
+                  modifiers={{ booked: bookedDays }}
+                  modifiersClassNames={{ booked: "bg-primary/20" }}
+                  className="rounded-md border p-2"
+                  locale={ptBR}
+                />
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Coluna direita: lista de consultas */}
+          <div className="lg:col-span-2 space-y-6">
+            {isLoading ? (
+              <div className="flex justify-center items-center h-48">
+                <Loader2 className="h-8 w-8 animate-spin text-primary" />
+              </div>
+            ) : Object.keys(groupedAppointments).length === 0 ? (
+              <Card className="flex flex-col items-center justify-center h-48 text-center">
+                <CardHeader>
+                  <CardTitle>Nenhuma consulta encontrada</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-muted-foreground">
+                    {searchTerm 
+                        ? "Nenhum resultado para a busca." 
+                        : selectedDate
+                            ? "Não há agendamentos para esta data."
+                            : "Não há consultas agendadas."}
+                  </p>
+                </CardContent>
+              </Card>
+            ) : (
+              Object.entries(groupedAppointments).map(
+                ([date, appointmentsForDay]) => (
+                  <div key={date}>
+                    <h3 className="text-lg font-semibold text-foreground mb-3 capitalize">
+                      {formatDisplayDate(date)}
+                    </h3>
+                    <div className="space-y-4">
+                      {appointmentsForDay.map((appointment: any) => {
+                        const scheduledAtDate = new Date(
+                          appointment.scheduled_at
+                        );
+
+                        return (
+                          <Card
+                            key={appointment.id}
+                            className="shadow-sm hover:shadow-md transition-shadow"
+                          >
+                            <CardContent className="p-4 grid grid-cols-1 md:grid-cols-3 items-center gap-4">
+                              {/* Coluna 1: Paciente + hora */}
+                              <div className="col-span-1 flex flex-col gap-2">
+                                <div className="font-semibold flex items-center text-foreground">
+                                  <User className="mr-2 h-4 w-4 text-primary" />
+                                  {appointment.patient.full_name}
+                                </div>
+                                <div className="flex items-center text-sm text-muted-foreground">
+                                  <Clock className="mr-2 h-4 w-4" />
+                                  {isValid(scheduledAtDate)
+                                    ? format(scheduledAtDate, "HH:mm")
+                                    : "--:--"}
+                                </div>
+                              </div>
+
+                              {/* Coluna 2: Médico / local / telefone */}
+                              <div className="col-span-1 flex flex-col gap-2">
+                                <div className="flex items-center text-sm text-muted-foreground">
+                                  <User className="mr-2 h-4 w-4" />
+                                  {appointment.doctor.full_name}
+                                </div>
+                                <div className="flex items-center text-sm text-muted-foreground">
+                                  <MapPin className="mr-2 h-4 w-4" />
+                                  {appointment.doctor.location ||
+                                    "Local a definir"}
+                                </div>
+                                <div className="flex items-center text-sm text-muted-foreground">
+                                  <Phone className="mr-2 h-4 w-4" />
+                                  {appointment.doctor.phone || "N/A"}
+                                </div>
+                                <div>{getStatusBadge(appointment.status)}</div>
+                              </div>
+
+                              {/* Coluna 3: Ações */}
+                              <div className="col-span-1 flex justify-start md:justify-end">
+                                <div className="flex gap-2">
+                                  <Button
+                                    variant="outline"
+                                    size="sm"
+                                    onClick={() => handleEdit(appointment)}
+                                  >
+                                    <Pencil className="mr-2 h-4 w-4" />
+                                    Editar
+                                  </Button>
+                                  <Button
+                                    variant="destructive"
+                                    size="sm"
+                                    onClick={() => handleDelete(appointment)}
+                                  >
+                                    <Trash2 className="mr-2 h-4 w-4" />
+                                    Cancelar
+                                  </Button>
+                                </div>
+                              </div>
+                            </CardContent>
+                          </Card>
+                        );
+                      })}
+                    </div>
+                    <Separator className="my-6" />
+                  </div>
+                )
+              )
+            )}
+          </div>
+        </div>
+
+        {/* MODAL DE EDIÇÃO */}
+        <Dialog open={editModal} onOpenChange={setEditModal}>
+           {/* Modal de edição permanece o mesmo, adicione o DialogContent se precisar */}
+           {/* Aqui estou assumindo que você tem o conteúdo do Dialog no seu código original ou em outro lugar, pois ele não estava completo no snippet anterior */}
+        </Dialog>
+
+        {/* Modal de Deleção */}
+        <Dialog open={deleteModal} onOpenChange={setDeleteModal}>
+           {/* Modal de deleção permanece o mesmo */}
+        </Dialog>
+      </div>
     </Sidebar>
   );
 }
+
+const getStatusBadge = (status: string) => {
+  switch (status) {
+    case "requested":
+      return (
+        <Badge className="bg-yellow-400/10 text-yellow-400">Solicitada</Badge>
+      );
+    case "confirmed":
+      return <Badge className="bg-primary/10 text-primary">Confirmada</Badge>;
+    case "checked_in":
+      return (
+        <Badge className="bg-indigo-400/10 text-indigo-400">Check-in</Badge>
+      );
+    case "completed":
+      return <Badge className="bg-green-400/10 text-green-400">Realizada</Badge>;
+    case "cancelled":
+      return (
+        <Badge className="bg-destructive/10 text-destructive">Cancelada</Badge>
+      );
+    case "no_show":
+      return (
+        <Badge className="bg-muted text-foreground">Não Compareceu</Badge>
+      );
+    default:
+      return <Badge variant="secondary">{status}</Badge>;
+  }
+};
\ No newline at end of file
diff --git a/app/secretary/dashboard/page.tsx b/app/secretary/dashboard/page.tsx
index c7613b2..a66ec71 100644
--- a/app/secretary/dashboard/page.tsx
+++ b/app/secretary/dashboard/page.tsx
@@ -104,8 +104,8 @@ export default function SecretaryDashboard() {
       <div className="space-y-6">
         {/* Cabeçalho */}
         <div>
-          <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
-          <p className="text-gray-600">
+          <h1 className="text-3xl font-bold">Dashboard</h1>
+          <p className="text-muted-foreground">
             Bem-vindo ao seu portal de consultas médicas
           </p>
         </div>
@@ -122,7 +122,7 @@ export default function SecretaryDashboard() {
             </CardHeader>
             <CardContent>
               {loadingAppointments ? (
-                <div className="text-gray-500 text-sm">
+                <div className="text-muted-foreground text-sm">
                   Carregando próxima consulta...
                 </div>
               ) : firstConfirmed ? (
@@ -147,7 +147,7 @@ export default function SecretaryDashboard() {
                   </p>
                 </>
               ) : (
-                <div className="text-sm text-gray-500">
+                <div className="text-sm text-muted-foreground">
                   Nenhuma consulta confirmada encontrada
                 </div>
               )}
@@ -164,12 +164,12 @@ export default function SecretaryDashboard() {
             </CardHeader>
             <CardContent>
               {loadingAppointments ? (
-                <div className="text-gray-500 text-sm">
+                <div className="text-muted-foreground text-sm">
                   Carregando consultas...
                 </div>
               ) : nextAgendada ? (
                 <>
-                  <div className="text-lg font-bold text-gray-900">
+                  <div className="text-lg font-bold">
                     {new Date(nextAgendada.scheduled_at).toLocaleDateString(
                       "pt-BR",
                       {
@@ -199,7 +199,7 @@ export default function SecretaryDashboard() {
                   </p>
                 </>
               ) : (
-                <div className="text-sm text-gray-500">
+                <div className="text-sm text-muted-foreground">
                   Nenhuma consulta agendada neste mês
                 </div>
               )}
@@ -231,8 +231,8 @@ export default function SecretaryDashboard() {
             </CardHeader>
             <CardContent className="space-y-4">
               <Link href="/secretary/schedule">
-                <Button className="w-full justify-start bg-blue-600 text-white hover:bg-blue-700">
-                  <User className="mr-2 h-4 w-4 text-white" />
+                <Button className="w-full justify-start bg-primary text-primary-foreground hover:bg-primary/90">
+                  <User className="mr-2 h-4 w-4" />
                   Agendar Nova Consulta
                 </Button>
               </Link>
@@ -265,9 +265,9 @@ export default function SecretaryDashboard() {
             </CardHeader>
             <CardContent>
               {loadingPatients ? (
-                <p className="text-sm text-gray-500">Carregando pacientes...</p>
+                <p className="text-sm text-muted-foreground">Carregando pacientes...</p>
               ) : patients.length === 0 ? (
-                <p className="text-sm text-gray-500">
+                <p className="text-sm text-muted-foreground">
                   Nenhum paciente cadastrado.
                 </p>
               ) : (
@@ -275,20 +275,20 @@ export default function SecretaryDashboard() {
                   {patients.map((patient, index) => (
                     <div
                       key={index}
-                      className="flex items-center justify-between p-3 bg-blue-50 rounded-lg border border-blue-100"
+                      className="flex items-center justify-between p-3 bg-primary/10 rounded-lg border border-primary/20"
                     >
                       <div>
-                        <p className="font-medium text-gray-900">
+                        <p className="font-medium text-foreground">
                           {patient.full_name || "Sem nome"}
                         </p>
-                        <p className="text-sm text-gray-600">
+                        <p className="text-sm text-muted-foreground">
                           {patient.phone_mobile ||
                             patient.phone1 ||
                             "Sem telefone"}
                         </p>
                       </div>
                       <div className="text-right">
-                        <p className="font-medium text-blue-700">
+                        <p className="font-medium text-primary">
                           {patient.convenio || "Particular"}
                         </p>
                       </div>
diff --git a/app/secretary/pacientes/[id]/editar/page.tsx b/app/secretary/pacientes/[id]/editar/page.tsx
index 677ff5f..3ac6e28 100644
--- a/app/secretary/pacientes/[id]/editar/page.tsx
+++ b/app/secretary/pacientes/[id]/editar/page.tsx
@@ -265,7 +265,7 @@ export default function EditarPacientePage() {
     return (
         <Sidebar>
             {/* O espaçamento foi reduzido aqui: de `p-4 sm:p-6 lg:p-8` para `p-2 sm:p-4 lg:p-6` */}
-            <div className="space-y-6 p-2 sm:p-4 lg:p-6 max-w-10xl mx-auto"> {/* Alterado padding responsivo */}
+            <div className="space-y-6 p-2 sm:p-4 lg:p-6 max-w-10xl mx-auto">{/* Alterado padding responsivo */}
                 <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                     <div className="flex items-center gap-4">
                         <Link href="/secretary/pacientes">
@@ -275,31 +275,29 @@ export default function EditarPacientePage() {
                             </Button>
                         </Link>
                         <div>
-                            <h1 className="text-2xl font-bold text-gray-900">Editar Paciente</h1>
-                            <p className="text-gray-600">Atualize as informações do paciente</p>
+                            <h1 className="text-2xl font-bold">Editar Paciente</h1>
+                            <p className="text-muted-foreground">Atualize as informações do paciente</p>
                         </div>
                     </div>
-
-                    {/* Anexos Section - Movido para fora do cabeçalho para melhor organização e responsividade */}
-                    
+                    {/* Espaço reservado para anexos ou ações futuras */}
                 </div>
 
                 <form onSubmit={handleSubmit} className="space-y-8">
                     {/* Dados Pessoais Section */}
-                    <div className="bg-white rounded-lg border border-gray-200 p-6">
-                        <h2 className="text-lg font-semibold text-gray-900 mb-6">Dados Pessoais</h2>
+                    <div className="bg-card rounded-lg border p-6">
+                        <h2 className="text-lg font-semibold mb-6">Dados Pessoais</h2>
 
                         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                             {/* Photo upload */}
                             <div className="space-y-2 col-span-1 md:col-span-2 lg:col-span-1">
                                 <Label>Foto do paciente</Label>
                                 <div className="flex flex-col sm:flex-row items-center gap-4">
-                                    <div className="w-20 h-20 rounded-full bg-gray-100 overflow-hidden flex items-center justify-center">
+                                    <div className="w-20 h-20 rounded-full bg-muted overflow-hidden flex items-center justify-center">
                                         {photoUrl ? (
                                             // eslint-disable-next-line @next/next/no-img-element
                                             <img src={photoUrl} alt="Foto do paciente" className="w-full h-full object-cover" />
                                         ) : (
-                                            <span className="text-gray-400 text-sm text-center">Sem foto</span>
+                                            <span className="text-muted-foreground text-sm text-center">Sem foto</span>
                                         )}
                                     </div>
                                     <div className="flex flex-col sm:flex-row gap-2 mt-2 sm:mt-0">
@@ -334,11 +332,11 @@ export default function EditarPacientePage() {
                                 <Label>Sexo *</Label>
                                 <div className="flex flex-col sm:flex-row gap-4">
                                     <div className="flex items-center space-x-2">
-                                        <input type="radio" id="Masculino" name="sexo" value="Masculino" checked={formData.sexo === "Masculino"} onChange={(e) => handleInputChange("sexo", e.target.value)} className="w-4 h-4 text-blue-600" />
+                                        <input type="radio" id="Masculino" name="sexo" value="Masculino" checked={formData.sexo === "Masculino"} onChange={(e) => handleInputChange("sexo", e.target.value)} className="w-4 h-4 text-primary" />
                                         <Label htmlFor="Masculino">Masculino</Label>
                                     </div>
                                     <div className="flex items-center space-x-2">
-                                        <input type="radio" id="Feminino" name="sexo" value="Feminino" checked={formData.sexo === "Feminino"} onChange={(e) => handleInputChange("sexo", e.target.value)} className="w-4 h-4 text-blue-600" />
+                                        <input type="radio" id="Feminino" name="sexo" value="Feminino" checked={formData.sexo === "Feminino"} onChange={(e) => handleInputChange("sexo", e.target.value)} className="w-4 h-4 text-primary" />
                                         <Label htmlFor="Feminino">Feminino</Label>
                                     </div>
                                 </div>
@@ -467,8 +465,8 @@ export default function EditarPacientePage() {
                     </div>
 
                     {/* Contact Section */}
-                    <div className="bg-white rounded-lg border border-gray-200 p-6">
-                        <h2 className="text-lg font-semibold text-gray-900 mb-6">Contato</h2>
+                    <div className="bg-card rounded-lg border p-6">
+                        <h2 className="text-lg font-semibold mb-6">Contato</h2>
 
                         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                             <div className="space-y-2">
@@ -494,8 +492,8 @@ export default function EditarPacientePage() {
                     </div>
 
                     {/* Address Section */}
-                    <div className="bg-white rounded-lg border border-gray-200 p-6">
-                        <h2 className="text-lg font-semibold text-gray-900 mb-6">Endereço</h2>
+                    <div className="bg-card rounded-lg border p-6">
+                        <h2 className="text-lg font-semibold mb-6">Endereço</h2>
 
                         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                             <div className="space-y-2">
@@ -569,8 +567,8 @@ export default function EditarPacientePage() {
                     </div>
 
                     {/* Medical Information Section */}
-                    <div className="bg-white rounded-lg border border-gray-200 p-6">
-                        <h2 className="text-lg font-semibold text-gray-900 mb-6">Informações Médicas</h2>
+                    <div className="bg-card rounded-lg border p-6">
+                        <h2 className="text-lg font-semibold mb-6">Informações Médicas</h2>
 
                         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                             <div className="space-y-2">
@@ -615,8 +613,8 @@ export default function EditarPacientePage() {
                     </div>
 
                     {/* Insurance Information Section */}
-                    <div className="bg-white rounded-lg border border-gray-200 p-6">
-                        <h2 className="text-lg font-semibold text-gray-900 mb-6">Informações de convênio</h2>
+                    <div className="bg-card rounded-lg border p-6">
+                        <h2 className="text-lg font-semibold mb-6">Informações de convênio</h2>
 
                         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                             <div className="space-y-2">
@@ -665,7 +663,7 @@ export default function EditarPacientePage() {
                                 Cancelar
                             </Button>
                         </Link>
-                        <Button type="submit" className="bg-blue-600 hover:bg-blue-700 w-full sm:w-auto">
+                        <Button type="submit" className="bg-primary hover:bg-primary/90 w-full sm:w-auto">
                             <Save className="w-4 h-4 mr-2" />
                             Salvar Alterações
                         </Button>
diff --git a/app/secretary/pacientes/novo/page.tsx b/app/secretary/pacientes/novo/page.tsx
index 5ad1cfa..d241b19 100644
--- a/app/secretary/pacientes/novo/page.tsx
+++ b/app/secretary/pacientes/novo/page.tsx
@@ -85,7 +85,7 @@ export default function NovoUsuarioPage() {
             router.push("/manager/usuario");
         } catch (e: any) {
             console.error("Erro ao criar usuário:", e);
-            setError(e?.message || "Não foi possível criar o usuário. Verifique os dados e tente novamente.");
+            setError(e?.message || "Não foi possível criar o paciente. Verifique os dados e tente novamente.");
         } finally {
             setIsSaving(false);
         }
@@ -100,10 +100,10 @@ export default function NovoUsuarioPage() {
                     {/* Cabeçalho da página */}
                     <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between border-b pb-4 gap-4"> {/* Ajustado para empilhar em telas pequenas */}
                         <div>
-                            <h1 className="text-2xl sm:text-3xl font-extrabold text-gray-900">Novo Usuário</h1> {/* Tamanho de texto responsivo */}
-                            <p className="text-sm sm:text-md text-gray-500">Preencha os dados para cadastrar um novo usuário no sistema.</p> {/* Tamanho de texto responsivo */}
+                            <h1 className="text-2xl sm:text-3xl font-extrabold text-gray-900">Novo Paciente</h1> {/* Tamanho de texto responsivo */}
+                            <p className="text-sm sm:text-md text-gray-500">Preencha os dados para cadastrar um novo paciente no sistema.</p> {/* Tamanho de texto responsivo */}
                         </div>
-                        <Link href="/manager/usuario">
+                        <Link href="/secretary/pacientes">
                             <Button variant="outline" className="w-full sm:w-auto">Cancelar</Button> {/* Botão ocupa largura total em telas pequenas */}
                         </Link>
                     </div>
@@ -153,15 +153,19 @@ export default function NovoUsuarioPage() {
 
                         {/* Botões de ação */}
                         <div className="flex flex-col sm:flex-row justify-end gap-4 pt-6 border-t mt-6"> {/* Botões empilhados em telas pequenas */}
-                            <Link href="/manager/usuario">
+                            <Link href="/secretary/pacientes">
                                 <Button type="button" variant="outline" disabled={isSaving} className="w-full sm:w-auto">
                                     Cancelar
                                 </Button>
                             </Link>
-                            <Button type="submit" className="bg-green-600 hover:bg-green-700 w-full sm:w-auto" disabled={isSaving}>
-                                {isSaving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Save className="w-4 h-4 mr-2" />}
-                                {isSaving ? "Salvando..." : "Salvar Usuário"}
-                            </Button>
+                            <Link  href="/secretary/pacientes">
+                                <Button type="submit" className="bg-green-600 hover:bg-green-700 w-full sm:w-auto" disabled={isSaving}>
+                                
+                                    {isSaving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Save className="w-4 h-4 mr-2" />}
+                                    {isSaving ? "Salvando..." : "Salvar Paciente"}
+                                
+                                </Button>
+                            </Link>
                         </div>
                     </form>
                 </div>
diff --git a/app/secretary/pacientes/page.tsx b/app/secretary/pacientes/page.tsx
index 8a03041..bb531f8 100644
--- a/app/secretary/pacientes/page.tsx
+++ b/app/secretary/pacientes/page.tsx
@@ -15,95 +15,95 @@ import Sidebar from "@/components/Sidebar";
 const PAGE_SIZE = 5;
 
 export default function PacientesPage() {
-    // --- ESTADOS DE DADOS E GERAL ---
-    const [searchTerm, setSearchTerm] = useState("");
-    const [convenioFilter, setConvenioFilter] = useState("all");
-    const [vipFilter, setVipFilter] = useState("all");
+  // --- ESTADOS DE DADOS E GERAL ---
+  const [searchTerm, setSearchTerm] = useState("");
+  const [convenioFilter, setConvenioFilter] = useState("all");
+  const [vipFilter, setVipFilter] = useState("all");
 
-    // Lista completa, carregada da API uma única vez
-    const [allPatients, setAllPatients] = useState<any[]>([]);
-    // Lista após a aplicação dos filtros (base para a paginação)
-    const [filteredPatients, setFilteredPatients] = useState<any[]>([]);
+  // Lista completa, carregada da API uma única vez
+  const [allPatients, setAllPatients] = useState<any[]>([]);
+  // Lista após a aplicação dos filtros (base para a paginação)
+  const [filteredPatients, setFilteredPatients] = useState<any[]>([]);
 
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
-    // --- ESTADOS DE PAGINAÇÃO ---
-    const [page, setPage] = useState(1);
+  // --- ESTADOS DE PAGINAÇÃO ---
+  const [page, setPage] = useState(1);
 
-    // CÁLCULO DA PAGINAÇÃO
-    const totalPages = Math.ceil(filteredPatients.length / PAGE_SIZE);
-    const startIndex = (page - 1) * PAGE_SIZE;
-    const endIndex = startIndex + PAGE_SIZE;
-    // Pacientes a serem exibidos na tabela (aplicando a paginação)
-    const currentPatients = filteredPatients.slice(startIndex, endIndex);
+  // CÁLCULO DA PAGINAÇÃO
+  const totalPages = Math.ceil(filteredPatients.length / PAGE_SIZE);
+  const startIndex = (page - 1) * PAGE_SIZE;
+  const endIndex = startIndex + PAGE_SIZE;
+  // Pacientes a serem exibidos na tabela (aplicando a paginação)
+  const currentPatients = filteredPatients.slice(startIndex, endIndex);
 
-    // --- ESTADOS DE DIALOGS ---
-    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-    const [patientToDelete, setPatientToDelete] = useState<string | null>(null);
-    const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
-    const [patientDetails, setPatientDetails] = useState<any | null>(null);
+  // --- ESTADOS DE DIALOGS ---
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [patientToDelete, setPatientToDelete] = useState<string | null>(null);
+  const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
+  const [patientDetails, setPatientDetails] = useState<any | null>(null);
 
-    // --- FUNÇÕES DE LÓGICA ---
+  // --- FUNÇÕES DE LÓGICA ---
 
-    // 1. Função para carregar TODOS os pacientes da API
-    const fetchAllPacientes = useCallback(
-        async () => {
-            setLoading(true);
-            setError(null);
-            try {
-                // Como o backend retorna um array, chamamos sem paginação
-                const res = await patientsService.list();
+  // 1. Função para carregar TODOS os pacientes da API
+  const fetchAllPacientes = useCallback(
+    async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        // Como o backend retorna um array, chamamos sem paginação
+        const res = await patientsService.list();
 
-                const mapped = res.map((p: any) => ({
-                    id: String(p.id ?? ""),
-                    nome: p.full_name ?? "—",
-                    telefone: p.phone_mobile ?? p.phone1 ?? "—",
-                    cidade: p.city ?? "—",
-                    estado: p.state ?? "—",
-                    // Formate as datas se necessário, aqui usamos como string
-                    ultimoAtendimento: p.last_visit_at?.split('T')[0] ?? "—",
-                    proximoAtendimento: p.next_appointment_at?.split('T')[0] ?? "—",
-                    vip: Boolean(p.vip ?? false),
-                    convenio: p.convenio ?? "Particular", // Define um valor padrão
-                    status: p.status ?? undefined,
-                }));
+        const mapped = res.map((p: any) => ({
+          id: String(p.id ?? ""),
+          nome: p.full_name ?? "—",
+          telefone: p.phone_mobile ?? p.phone1 ?? "—",
+          cidade: p.city ?? "—",
+          estado: p.state ?? "—",
+          // Formate as datas se necessário, aqui usamos como string
+          ultimoAtendimento: p.last_visit_at?.split('T')[0] ?? "—",
+          proximoAtendimento: p.next_appointment_at?.split('T')[0] ?? "—",
+          vip: Boolean(p.vip ?? false),
+          convenio: p.convenio ?? "Particular", // Define um valor padrão
+          status: p.status ?? undefined,
+        }));
 
-      setAllPatients(mapped);
-    } catch (e: any) {
-      console.error(e);
-      setError(e?.message || "Erro ao buscar pacientes");
-    } finally {
-      setLoading(false);
-    }
-  }, []);
+        setAllPatients(mapped);
+      } catch (e: any) {
+        console.error(e);
+        setError(e?.message || "Erro ao buscar pacientes");
+      } finally {
+        setLoading(false);
+      }
+    }, []);
 
-    // 2. Efeito para aplicar filtros e calcular a lista filtrada (chama-se quando allPatients ou filtros mudam)
-    useEffect(() => {
-        const filtered = allPatients.filter((patient) => {
-            // Filtro por termo de busca (Nome ou Telefone)
-            const matchesSearch =
-                patient.nome?.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                patient.telefone?.includes(searchTerm);
+  // 2. Efeito para aplicar filtros e calcular a lista filtrada (chama-se quando allPatients ou filtros mudam)
+  useEffect(() => {
+    const filtered = allPatients.filter((patient) => {
+      // Filtro por termo de busca (Nome ou Telefone)
+      const matchesSearch =
+        patient.nome?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        patient.telefone?.includes(searchTerm);
 
-            // Filtro por Convênio
-            const matchesConvenio =
-                convenioFilter === "all" ||
-                patient.convenio === convenioFilter;
+      // Filtro por Convênio
+      const matchesConvenio =
+        convenioFilter === "all" ||
+        patient.convenio === convenioFilter;
 
-            // Filtro por VIP
-            const matchesVip =
-                vipFilter === "all" ||
-                (vipFilter === "vip" && patient.vip) ||
-                (vipFilter === "regular" && !patient.vip);
+      // Filtro por VIP
+      const matchesVip =
+        vipFilter === "all" ||
+        (vipFilter === "vip" && patient.vip) ||
+        (vipFilter === "regular" && !patient.vip);
 
-            return matchesSearch && matchesConvenio && matchesVip;
-        });
+      return matchesSearch && matchesConvenio && matchesVip;
+    });
 
-        setFilteredPatients(filtered);
-        // Garante que a página atual seja válida após a filtragem
-        setPage(1);
-    }, [allPatients, searchTerm, convenioFilter, vipFilter]);
+    setFilteredPatients(filtered);
+    // Garante que a página atual seja válida após a filtragem
+    setPage(1);
+  }, [allPatients, searchTerm, convenioFilter, vipFilter]);
 
   // 3. Efeito inicial para buscar os pacientes
   useEffect(() => {
@@ -111,18 +111,18 @@ export default function PacientesPage() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-    // --- LÓGICA DE AÇÕES (DELETAR / VER DETALHES) ---
+  // --- LÓGICA DE AÇÕES (DELETAR / VER DETALHES) ---
 
-    const openDetailsDialog = async (patientId: string) => {
-        setDetailsDialogOpen(true);
-        setPatientDetails(null);
-        try {
-            const res = await patientsService.getById(patientId);
-            setPatientDetails(Array.isArray(res) ? res[0] : res); // Supondo que retorne um array com um item
-        } catch (e: any) {
-            setPatientDetails({ error: e?.message || "Erro ao buscar detalhes" });
-        }
-    };
+  const openDetailsDialog = async (patientId: string) => {
+    setDetailsDialogOpen(true);
+    setPatientDetails(null);
+    try {
+      const res = await patientsService.getById(patientId);
+      setPatientDetails(Array.isArray(res) ? res[0] : res); // Supondo que retorne um array com um item
+    } catch (e: any) {
+      setPatientDetails({ error: e?.message || "Erro ao buscar detalhes" });
+    }
+  };
 
   const handleDeletePatient = async (patientId: string) => {
     try {
@@ -149,7 +149,7 @@ export default function PacientesPage() {
         {/* Header (Responsividade OK) */}
         <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
           <div>
-            <h1 className="text-xl md:text-2xl font-bold text-foreground">
+            <h1 className="text-xl md:text-2xl font-bold">
               Pacientes
             </h1>
             <p className="text-muted-foreground text-sm md:text-base">
@@ -158,7 +158,7 @@ export default function PacientesPage() {
           </div>
           <div className="flex gap-2">
             <Link href="/secretary/pacientes/novo" className="w-full md:w-auto">
-              <Button className="w-full bg-blue-600 hover:bg-blue-700">
+              <Button className="w-full bg-primary hover:bg-primary/90">
                 <Plus className="w-4 h-4 mr-2" />
                 Adicionar
               </Button>
@@ -166,22 +166,22 @@ export default function PacientesPage() {
           </div>
         </div>
 
-                {/* Bloco de Filtros (Responsividade APLICADA) */}
-                <div className="flex flex-wrap items-center gap-4 bg-card p-4 rounded-lg border border-border">
-                    <Filter className="w-5 h-5 text-gray-400" />
+        {/* Bloco de Filtros (Responsividade APLICADA) */}
+        <div className="flex flex-wrap items-center gap-4 bg-card p-4 rounded-lg border">
+          <Filter className="w-5 h-5 text-muted-foreground" />
 
-                    {/* Busca - Ocupa 100% no mobile, depois cresce */}
-                    <input
-                        type="text"
-                        placeholder="Buscar por nome ou telefone..."
-                        value={searchTerm}
-                        onChange={(e) => setSearchTerm(e.target.value)}
-                        className="w-full sm:flex-grow sm:min-w-[150px] p-2 border rounded-md text-sm"
-                    />
+          {/* Busca - Ocupa 100% no mobile, depois cresce */}
+          <input
+            type="text"
+            placeholder="Buscar por nome ou telefone..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="w-full sm:flex-grow sm:min-w-[150px] p-2 border rounded-md text-sm"
+          />
 
           {/* Convênio - Ocupa a largura total em telas pequenas, depois se ajusta */}
           <div className="flex items-center gap-2 w-full sm:w-auto sm:flex-grow sm:max-w-[200px]">
-            <span className="text-sm font-medium text-foreground whitespace-nowrap hidden md:block">
+            <span className="text-sm font-medium whitespace-nowrap hidden md:block">
               Convênio
             </span>
             <Select value={convenioFilter} onValueChange={setConvenioFilter}>
@@ -200,64 +200,64 @@ export default function PacientesPage() {
             </Select>
           </div>
 
-                    {/* VIP - Ocupa a largura total em telas pequenas, depois se ajusta */}
-                    <div className="flex items-center gap-2 w-full sm:w-auto sm:flex-grow sm:max-w-[150px]">
-                        <span className="text-sm font-medium text-foreground whitespace-nowrap hidden md:block">VIP</span>
-                        <Select value={vipFilter} onValueChange={setVipFilter}>
-                            <SelectTrigger className="w-full sm:w-32"> {/* w-full para mobile, w-32 para sm+ */}
-                                <SelectValue placeholder="VIP" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value="all">Todos</SelectItem>
-                                <SelectItem value="vip">VIP</SelectItem>
-                                <SelectItem value="regular">Regular</SelectItem>
-                            </SelectContent>
-                        </Select>
-                    </div>
-                    
-                
-                    
-                </div>
+          {/* VIP - Ocupa a largura total em telas pequenas, depois se ajusta */}
+          <div className="flex items-center gap-2 w-full sm:w-auto sm:flex-grow sm:max-w-[150px]">
+            <span className="text-sm font-medium whitespace-nowrap hidden md:block">VIP</span>
+            <Select value={vipFilter} onValueChange={setVipFilter}>
+              <SelectTrigger className="w-full sm:w-32"> {/* w-full para mobile, w-32 para sm+ */}
+                <SelectValue placeholder="VIP" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">Todos</SelectItem>
+                <SelectItem value="vip">VIP</SelectItem>
+                <SelectItem value="regular">Regular</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+
+
+        </div>
 
         {/* --- SEÇÃO DE TABELA (VISÍVEL EM TELAS MAIORES OU IGUAIS A MD) --- */}
         {/* Garantir que a tabela se esconda em telas menores e apareça em MD+ */}
-        <div className="bg-white rounded-lg border border-gray-200 shadow-md hidden md:block">
+        <div className="bg-card rounded-lg border shadow-md hidden md:block">
           <div className="overflow-x-auto">
             {" "}
             {/* Permite rolagem horizontal se a tabela for muito larga */}
             {error ? (
-              <div className="p-6 text-red-600">{`Erro ao carregar pacientes: ${error}`}</div>
+              <div className="p-6 text-destructive">{`Erro ao carregar pacientes: ${error}`}</div>
             ) : loading ? (
-              <div className="p-6 text-center text-gray-500 flex items-center justify-center">
-                <Loader2 className="w-6 h-6 mr-2 animate-spin text-green-600" />{" "}
+              <div className="p-6 text-center text-muted-foreground flex items-center justify-center">
+                <Loader2 className="w-6 h-6 mr-2 animate-spin text-primary" />{" "}
                 Carregando pacientes...
               </div>
             ) : (
               <table className="w-full min-w-[650px]">
                 {" "}
                 {/* min-w para evitar que a tabela se contraia demais */}
-                <thead className="bg-gray-50 border-b border-gray-200">
+                <thead className="bg-muted border-b">
                   <tr>
-                    <th className="text-left p-4 font-medium text-gray-700 w-[20%]">
+                    <th className="text-left p-4 font-medium text-muted-foreground w-[20%]">
                       Nome
                     </th>
                     {/* Ajustes de visibilidade de colunas para diferentes breakpoints */}
-                    <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden sm:table-cell">
+                    <th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden sm:table-cell">
                       Telefone
                     </th>
-                    <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden md:table-cell">
+                    <th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden md:table-cell">
                       Cidade / Estado
                     </th>
-                    <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden sm:table-cell">
+                    <th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden sm:table-cell">
                       Convênio
                     </th>
-                    <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden lg:table-cell">
+                    <th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden lg:table-cell">
                       Último atendimento
                     </th>
-                    <th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden lg:table-cell">
+                    <th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden lg:table-cell">
                       Próximo atendimento
                     </th>
-                    <th className="text-left p-4 font-medium text-gray-700 w-[5%]">
+                    <th className="text-left p-4 font-medium text-muted-foreground w-[5%]">
                       Ações
                     </th>
                   </tr>
@@ -265,7 +265,7 @@ export default function PacientesPage() {
                 <tbody>
                   {currentPatients.length === 0 ? (
                     <tr>
-                      <td colSpan={7} className="p-8 text-center text-gray-500">
+                      <td colSpan={7} className="p-8 text-center text-muted-foreground">
                         {allPatients.length === 0
                           ? "Nenhum paciente cadastrado"
                           : "Nenhum paciente encontrado com os filtros aplicados"}
@@ -275,46 +275,47 @@ export default function PacientesPage() {
                     currentPatients.map((patient) => (
                       <tr
                         key={patient.id}
-                        className="border-b border-gray-100 hover:bg-gray-50"
+                        className="border-b hover:bg-muted"
                       >
                         <td className="p-4">
                           <div className="flex items-center gap-3">
-                            <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
-                              <span className="text-blue-600 font-medium text-sm">
+                            <div className="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center">
+                              <span className="text-primary font-medium text-sm">
                                 {patient.nome?.charAt(0) || "?"}
                               </span>
                             </div>
 
-                            <span className="font-medium text-gray-900">
+                            <span className="font-medium">
                               {patient.nome}
                               {patient.vip && (
-                                <span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-600 bg-purple-100 rounded-full">
+                                <span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-500 bg-purple-500/10 rounded-full">
                                   VIP
                                 </span>
                               )}
                             </span>
                           </div>
                         </td>
-                        <td className="p-4 text-gray-600 hidden sm:table-cell">
+                        <td className="p-4 text-muted-foreground hidden sm:table-cell">
                           {patient.telefone}
                         </td>
-                        <td className="p-4 text-gray-600 hidden md:table-cell">{`${patient.cidade} / ${patient.estado}`}</td>
-                        <td className="p-4 text-gray-600 hidden sm:table-cell">
+                        <td className="p-4 text-muted-foreground hidden md:table-cell">{`${patient.cidade} / ${patient.estado}`}</td>
+                        <td className="p-4 text-muted-foreground hidden sm:table-cell">
                           {patient.convenio}
                         </td>
-                        <td className="p-4 text-gray-600 hidden lg:table-cell">
+                        <td className="p-4 text-muted-foreground hidden lg:table-cell">
                           {patient.ultimoAtendimento}
                         </td>
-                        <td className="p-4 text-gray-600 hidden lg:table-cell">
+                        <td className="p-4 text-muted-foreground hidden lg:table-cell">
                           {patient.proximoAtendimento}
                         </td>
 
                         <td className="p-4">
                           <DropdownMenu>
                             <DropdownMenuTrigger asChild>
-                              <div className="text-blue-600 cursor-pointer">
-                                Ações
-                              </div>
+                              <Button variant="ghost" className="h-8 w-8 p-0">
+                                <span className="sr-only">Abrir menu</span>
+                                <MoreVertical className="h-4 w-4" />
+                              </Button>
                             </DropdownMenuTrigger>
                             <DropdownMenuContent align="end">
                               <DropdownMenuItem
@@ -341,7 +342,7 @@ export default function PacientesPage() {
                                 Marcar consulta
                               </DropdownMenuItem>
                               <DropdownMenuItem
-                                className="text-red-600"
+                                className="text-destructive"
                                 onClick={() =>
                                   openDeleteDialog(String(patient.id))
                                 }
@@ -363,16 +364,16 @@ export default function PacientesPage() {
 
         {/* --- SEÇÃO DE CARDS (VISÍVEL APENAS EM TELAS MENORES QUE MD) --- */}
         {/* Garantir que os cards apareçam em telas menores e se escondam em MD+ */}
-        <div className="bg-white rounded-lg border border-gray-200 shadow-md p-4 block md:hidden">
+        <div className="bg-card rounded-lg border shadow-md p-4 block md:hidden">
           {error ? (
-            <div className="p-6 text-red-600">{`Erro ao carregar pacientes: ${error}`}</div>
+            <div className="p-6 text-destructive">{`Erro ao carregar pacientes: ${error}`}</div>
           ) : loading ? (
-            <div className="p-6 text-center text-gray-500 flex items-center justify-center">
-              <Loader2 className="w-6 h-6 mr-2 animate-spin text-green-600" />{" "}
+            <div className="p-6 text-center text-muted-foreground flex items-center justify-center">
+              <Loader2 className="w-6 h-6 mr-2 animate-spin text-primary" />{" "}
               Carregando pacientes...
             </div>
           ) : filteredPatients.length === 0 ? (
-            <div className="p-8 text-center text-gray-500">
+            <div className="p-8 text-center text-muted-foreground">
               {allPatients.length === 0
                 ? "Nenhum paciente cadastrado"
                 : "Nenhum paciente encontrado com os filtros aplicados"}
@@ -382,21 +383,21 @@ export default function PacientesPage() {
               {currentPatients.map((patient) => (
                 <div
                   key={patient.id}
-                  className="bg-gray-50 rounded-lg p-4 flex flex-col sm:flex-row justify-between items-start sm:items-center border border-gray-200"
+                  className="bg-muted rounded-lg p-4 flex flex-col sm:flex-row justify-between items-start sm:items-center border"
                 >
                   <div className="flex-grow mb-2 sm:mb-0">
-                    <div className="font-semibold text-lg text-gray-900 flex items-center">
+                    <div className="font-semibold text-lg flex items-center">
                       {patient.nome}
                       {patient.vip && (
-                        <span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-600 bg-purple-100 rounded-full">
+                        <span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-500 bg-purple-500/10 rounded-full">
                           VIP
                         </span>
                       )}
                     </div>
-                    <div className="text-sm text-gray-600">
+                    <div className="text-sm text-muted-foreground">
                       Telefone: {patient.telefone}
                     </div>
-                    <div className="text-sm text-gray-600">
+                    <div className="text-sm text-muted-foreground">
                       Convênio: {patient.convenio}
                     </div>
                   </div>
@@ -416,83 +417,83 @@ export default function PacientesPage() {
                         Ver detalhes
                       </DropdownMenuItem>
 
-                                            <DropdownMenuItem asChild>
-                                                <Link href={`/secretary/pacientes/${patient.id}/editar`} className="flex items-center w-full">
-                                                    <Edit className="w-4 h-4 mr-2" />
-                                                    Editar
-                                                </Link>
-                                            </DropdownMenuItem>
+                      <DropdownMenuItem asChild>
+                        <Link href={`/secretary/pacientes/${patient.id}/editar`} className="flex items-center w-full">
+                          <Edit className="w-4 h-4 mr-2" />
+                          Editar
+                        </Link>
+                      </DropdownMenuItem>
 
-                                            <DropdownMenuItem>
-                                                <Calendar className="w-4 h-4 mr-2" />
-                                                Marcar consulta
-                                            </DropdownMenuItem>
-                                            <DropdownMenuItem className="text-red-600" onClick={() => openDeleteDialog(String(patient.id))}>
-                                                <Trash2 className="w-4 h-4 mr-2" />
-                                                Excluir
-                                            </DropdownMenuItem>
-                                        </DropdownMenuContent>
-                                    </DropdownMenu>
-                                </div>
-                            ))}
-                        </div>
-                    )}
+                      <DropdownMenuItem>
+                        <Calendar className="w-4 h-4 mr-2" />
+                        Marcar consulta
+                      </DropdownMenuItem>
+                      <DropdownMenuItem className="text-destructive" onClick={() => openDeleteDialog(String(patient.id))}>
+                        <Trash2 className="w-4 h-4 mr-2" />
+                        Excluir
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
                 </div>
+              ))}
+            </div>
+          )}
+        </div>
 
-                {/* Paginação */}
-                {totalPages > 1 && !loading && (
-                    <div className="flex flex-col sm:flex-row items-center justify-center p-4 border-t border-gray-200">
-                        <div className="flex space-x-2 flex-wrap justify-center"> {/* Adicionado flex-wrap e justify-center para botões da paginação */}
-                            <Button
-                                onClick={() => setPage((prev) => Math.max(1, prev - 1))}
-                                disabled={page === 1}
-                                variant="outline"
-                                size="lg"
-                            >
-                                &lt; Anterior
-                            </Button>
+        {/* Paginação */}
+        {totalPages > 1 && !loading && (
+          <div className="flex flex-col sm:flex-row items-center justify-center p-4 border-t">
+            <div className="flex space-x-2 flex-wrap justify-center"> {/* Adicionado flex-wrap e justify-center para botões da paginação */}
+              <Button
+                onClick={() => setPage((prev) => Math.max(1, prev - 1))}
+                disabled={page === 1}
+                variant="outline"
+                size="lg"
+              >
+                &lt; Anterior
+              </Button>
 
-                            {Array.from({ length: totalPages }, (_, index) => index + 1)
-                                .slice(Math.max(0, page - 3), Math.min(totalPages, page + 2))
-                                .map((pageNumber) => (
-                                    <Button
-                                        key={pageNumber}
-                                        onClick={() => setPage(pageNumber)}
-                                        variant={pageNumber === page ? "default" : "outline"}
-                                        size="lg"
-                                        className={pageNumber === page ? "bg-blue-600 hover:bg-blue-700 text-white" : "text-gray-700"}
-                                    >
-                                        {pageNumber}
-                                    </Button>
-                                ))}
+              {Array.from({ length: totalPages }, (_, index) => index + 1)
+                .slice(Math.max(0, page - 3), Math.min(totalPages, page + 2))
+                .map((pageNumber) => (
+                  <Button
+                    key={pageNumber}
+                    onClick={() => setPage(pageNumber)}
+                    variant={pageNumber === page ? "default" : "outline"}
+                    size="lg"
+                    className={pageNumber === page ? "bg-primary hover:bg-primary/90 text-primary-foreground" : "text-muted-foreground"}
+                  >
+                    {pageNumber}
+                  </Button>
+                ))}
 
-                            <Button
-                                onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))}
-                                disabled={page === totalPages}
-                                variant="outline"
-                                size="lg"
-                            >
-                                Próximo &gt;
-                            </Button>
-                        </div>
-                    </div>
-                )}
+              <Button
+                onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))}
+                disabled={page === totalPages}
+                variant="outline"
+                size="lg"
+              >
+                Próximo &gt;
+              </Button>
+            </div>
+          </div>
+        )}
 
-                {/* AlertDialogs (Permanecem os mesmos) */}
-                <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-                    <AlertDialogContent>
-                        <AlertDialogHeader>
-                            <AlertDialogTitle>Confirmar exclusão</AlertDialogTitle>
-                            <AlertDialogDescription>Tem certeza que deseja excluir este paciente? Esta ação não pode ser desfeita.</AlertDialogDescription>
-                        </AlertDialogHeader>
-                        <AlertDialogFooter>
-                            <AlertDialogCancel>Cancelar</AlertDialogCancel>
-                            <AlertDialogAction onClick={() => patientToDelete && handleDeletePatient(patientToDelete)} className="bg-red-600 hover:bg-red-700">
-                                Excluir
-                            </AlertDialogAction>
-                        </AlertDialogFooter>
-                    </AlertDialogContent>
-                </AlertDialog>
+        {/* AlertDialogs (Permanecem os mesmos) */}
+        <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Confirmar exclusão</AlertDialogTitle>
+              <AlertDialogDescription>Tem certeza que deseja excluir este paciente? Esta ação não pode ser desfeita.</AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Cancelar</AlertDialogCancel>
+              <AlertDialogAction onClick={() => patientToDelete && handleDeletePatient(patientToDelete)} className="bg-destructive hover:bg-destructive/90">
+                Excluir
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
 
         <AlertDialog
           open={detailsDialogOpen}
@@ -503,12 +504,12 @@ export default function PacientesPage() {
               <AlertDialogTitle>Detalhes do Paciente</AlertDialogTitle>
               <AlertDialogDescription>
                 {patientDetails === null ? (
-                  <div className="text-gray-500">
-                    <Loader2 className="w-6 h-6 animate-spin mx-auto text-green-600 my-4" />
+                  <div className="text-muted-foreground">
+                    <Loader2 className="w-6 h-6 animate-spin mx-auto text-primary my-4" />
                     Carregando...
                   </div>
                 ) : patientDetails?.error ? (
-                  <div className="text-red-600 p-4">{patientDetails.error}</div>
+                  <div className="text-destructive p-4">{patientDetails.error}</div>
                 ) : (
                   <div className="grid gap-4 py-4">
                     <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index aecf916..9742de4 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -1,4 +1,3 @@
-// Caminho: [seu-caminho]/ManagerLayout.tsx
 "use client";
 
 import type React from "react";
@@ -7,6 +6,8 @@ import { useRouter, usePathname } from "next/navigation";
 import Link from "next/link";
 import Cookies from "js-cookie";
 import { api } from "@/services/api.mjs";
+import { usersService } from "@/services/usersApi.mjs"; // Importando usersService
+import { useAccessibility } from "@/app/context/AccessibilityContext";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -30,7 +31,6 @@ import {
   SquareUser,
   ClipboardList,
   Stethoscope,
-  ClipboardMinus,
 } from "lucide-react";
 
 import SidebarUserSection from "@/components/ui/userToolTip";
@@ -47,6 +47,7 @@ interface UserData {
     full_name: string;
     phone_mobile: string;
     role: string;
+    avatar_url?: string;
   };
   identities: {
     identity_id: string;
@@ -72,39 +73,101 @@ export default function Sidebar({ children }: SidebarProps) {
   const [role, setRole] = useState<string>();
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
   const [showLogoutDialog, setShowLogoutDialog] = useState(false);
+  const [avatarFullUrl, setAvatarFullUrl] = useState<string | undefined>(undefined);
   const router = useRouter();
   const pathname = usePathname();
 
+  // Função auxiliar para construir URL
+  const buildAvatarUrl = (path: string) => {
+    if (!path) return undefined;
+    const baseUrl = "https://yuanqfswhberkoevtmfr.supabase.co";
+    const cleanPath = path.startsWith('/') ? path.slice(1) : path;
+    const separator = cleanPath.includes('?') ? '&' : '?';
+    return `${baseUrl}/storage/v1/object/avatars/${cleanPath}${separator}t=${new Date().getTime()}`;
+  };
+  const { theme, contrast } = useAccessibility();
+
   useEffect(() => {
     const userInfoString = localStorage.getItem("user_info");
     const token = localStorage.getItem("token");
 
     if (userInfoString && token) {
-      const userInfo = JSON.parse(userInfoString);
+      try {
+        const userInfo = JSON.parse(userInfoString);
+
+        // 1. Tenta pegar o avatar do cache local
+        let rawAvatarPath = 
+          userInfo.profile?.avatar_url || 
+          userInfo.user_metadata?.avatar_url || 
+          userInfo.app_metadata?.avatar_url || 
+          "";
+
+        // Configura estado inicial com o que tem no cache
+        setUserData({
+          id: userInfo.id ?? "",
+          email: userInfo.email ?? "",
+          app_metadata: {
+            user_role: userInfo.app_metadata?.user_role ?? "patient",
+          },
+          user_metadata: {
+            cpf: userInfo.user_metadata?.cpf ?? "",
+            email_verified: userInfo.user_metadata?.email_verified ?? false,
+            full_name: userInfo.user_metadata?.full_name || userInfo.profile?.full_name || "Usuário",
+            phone_mobile: userInfo.user_metadata?.phone_mobile ?? "",
+            role: userInfo.user_metadata?.role ?? "",
+            avatar_url: rawAvatarPath,
+          },
+          identities: userInfo.identities ?? [],
+          is_anonymous: userInfo.is_anonymous ?? false,
+        });
+        
+        setRole(userInfo.user_metadata?.role);
+
+        if (rawAvatarPath) {
+          setAvatarFullUrl(buildAvatarUrl(rawAvatarPath));
+        }
+
+        // 2. AUTO-REPARO: Se não tiver avatar ou profile no cache, busca na API e atualiza
+        if (!rawAvatarPath || !userInfo.profile) {
+          console.log("[Sidebar] Cache incompleto. Buscando dados frescos...");
+          usersService.getMe().then((freshData) => {
+            if (freshData && freshData.profile) {
+              const freshAvatar = freshData.profile.avatar_url;
+              
+              // Atualiza o objeto local
+              const updatedUserInfo = {
+                ...userInfo,
+                profile: freshData.profile, // Injeta o profile completo
+                user_metadata: {
+                  ...userInfo.user_metadata,
+                  avatar_url: freshAvatar || userInfo.user_metadata.avatar_url
+                }
+              };
+
+              // Salva no localStorage para a próxima vez
+              localStorage.setItem("user_info", JSON.stringify(updatedUserInfo));
+              console.log("[Sidebar] LocalStorage sincronizado com sucesso.");
+
+              // Atualiza visualmente se achou um avatar novo
+              if (freshAvatar && freshAvatar !== rawAvatarPath) {
+                setAvatarFullUrl(buildAvatarUrl(freshAvatar));
+                // Atualiza o userData também para refletir no tooltip
+                setUserData(prev => prev ? ({
+                    ...prev,
+                    user_metadata: {
+                        ...prev.user_metadata,
+                        avatar_url: freshAvatar
+                    }
+                }) : undefined);
+              }
+            }
+          }).catch(err => console.error("[Sidebar] Falha no auto-reparo:", err));
+        }
+
+      } catch (e) {
+        console.error("Erro ao processar dados do usuário na Sidebar:", e);
+      }
 
-      setUserData({
-        id: userInfo.id ?? "",
-        email: userInfo.email ?? "",
-        app_metadata: {
-          user_role: userInfo.app_metadata?.user_role ?? "patient",
-        },
-        user_metadata: {
-          cpf: userInfo.user_metadata?.cpf ?? "",
-          email_verified: userInfo.user_metadata?.email_verified ?? false,
-          full_name: userInfo.user_metadata?.full_name ?? "",
-          phone_mobile: userInfo.user_metadata?.phone_mobile ?? "",
-          role: userInfo.user_metadata?.role ?? "",
-        },
-        identities:
-          userInfo.identities?.map((identity: any) => ({
-            identity_id: identity.identity_id ?? "",
-            id: identity.id ?? "",
-            user_id: identity.user_id ?? "",
-            provider: identity.provider ?? "",
-          })) ?? [],
-        is_anonymous: userInfo.is_anonymous ?? false,
-      });
-      setRole(userInfo.user_metadata?.role);
     } else {
       router.push("/login");
     }
@@ -129,6 +192,7 @@ export default function Sidebar({ children }: SidebarProps) {
     try {
       await api.logout();
     } catch (error) {
+      console.error("Erro ao fazer logout", error);
     } finally {
       localStorage.removeItem("user_info");
       localStorage.removeItem("token");
@@ -188,14 +252,14 @@ export default function Sidebar({ children }: SidebarProps) {
       },
     ];
 
-        const managerItems: MenuItem[] = [
-            { href: "/manager/dashboard", icon: Home, label: "Dashboard" },
-            { href: "/manager/usuario", icon: Users, label: "Gestão de Usuários" },
-            { href: "/manager/home", icon: Stethoscope, label: "Gestão de Médicos" },
-            { href: "/manager/pacientes", icon: Users, label: "Gestão de Pacientes" },
-            { href: "/secretary/appointments", icon: CalendarCheck2, label: "Consultas" },
-            { href: "/manager/disponibilidade", icon: ClipboardList, label: "Disponibilidade" },
-        ];
+    const managerItems: MenuItem[] = [
+      { href: "/manager/dashboard", icon: Home, label: "Dashboard" },
+      { href: "/manager/usuario", icon: Users, label: "Gestão de Usuários" },
+      { href: "/manager/home", icon: Stethoscope, label: "Gestão de Médicos" },
+      { href: "/manager/pacientes", icon: Users, label: "Gestão de Pacientes" },
+      { href: "/secretary/appointments", icon: CalendarCheck2, label: "Consultas" },
+      { href: "/manager/disponibilidade", icon: ClipboardList, label: "Disponibilidade" },
+    ];
 
     switch (role) {
       case "gestor":
@@ -212,6 +276,7 @@ export default function Sidebar({ children }: SidebarProps) {
   };
 
   const menuItems = SetMenuItems(role);
+  const isDefaultMode = theme === "light" && contrast === "normal";
 
   if (!userData) {
     return (
@@ -222,17 +287,17 @@ export default function Sidebar({ children }: SidebarProps) {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50 flex">
+    <div className="min-h-screen bg-background flex">
       <div
         className={`fixed top-0 h-screen flex flex-col z-30 transition-all duration-300
                 ${sidebarCollapsed ? "w-16" : "w-64"}
-                bg-[#123965] text-white`}
+                ${isDefaultMode ? "bg-[#123965] text-white" : "bg-sidebar text-sidebar-foreground"}`}
       >
         {/* TOPO */}
-        <div className="p-4 border-b border-white/10 flex items-center justify-between">
+        <div className={`p-4 border-b ${isDefaultMode ? "border-white/10" : "border-sidebar-border"} flex items-center justify-between`}>
           {!sidebarCollapsed && (
             <div className="flex items-center gap-2">
-              <div className="bg-white p-1 rounded-lg">
+              <div className="bg-background p-1 rounded-lg">
                 <img
                   src="/Logo MedConnect.png"
                   alt="Logo MedConnect"
@@ -240,7 +305,7 @@ export default function Sidebar({ children }: SidebarProps) {
                 />
               </div>
 
-              <span className="font-semibold text-white text-lg">
+              <span className="font-semibold text-lg">
                 MedConnect
               </span>
             </div>
@@ -250,7 +315,7 @@ export default function Sidebar({ children }: SidebarProps) {
             variant="ghost"
             size="sm"
             onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
-            className="p-1 text-white hover:bg-white/10 cursor-pointer"
+            className={`p-1 ${isDefaultMode ? "text-white hover:bg-white/10" : "hover:bg-sidebar-accent"} cursor-pointer`}
           >
             {sidebarCollapsed ? (
               <ChevronRight className="w-5 h-5" />
@@ -261,7 +326,7 @@ export default function Sidebar({ children }: SidebarProps) {
         </div>
 
         {/* MENU */}
-        <nav className="flex-1 p-3 overflow-y-auto">
+        <nav className="flex-1 px-3 py-6 overflow-y-auto flex flex-col gap-2">
           {menuItems.map((item) => {
             const Icon = item.icon;
             const isActive = pathname === item.href;
@@ -270,13 +335,13 @@ export default function Sidebar({ children }: SidebarProps) {
               <Link key={item.label} href={item.href}>
                 <div
                   className={`
-                                        flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors
-                                        ${
-                                          isActive
-                                            ? "bg-white/20 text-white font-semibold"
-                                            : "text-white/80 hover:bg-white/10 hover:text-white"
-                                        }
-                                    `}
+                        flex items-center gap-3 px-3 py-2 rounded-lg transition-colors
+                        ${
+                          isActive
+                            ? `${isDefaultMode ? "bg-white/20 text-white font-semibold" : "bg-sidebar-primary text-sidebar-primary-foreground font-semibold"}`
+                            : `${isDefaultMode ? "text-white/80 hover:bg-white/10 hover:text-white" : "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"}`
+                        }
+                    `}
                 >
                   <Icon className="w-5 h-5 flex-shrink-0" />
                   {!sidebarCollapsed && (
@@ -288,13 +353,21 @@ export default function Sidebar({ children }: SidebarProps) {
           })}
         </nav>
 
-        {/* PERFIL ORIGINAL + NOME BRANCO */}
-        <div className="mt-auto p-3 border-t border-white/10">
+        {/* PERFIL ORIGINAL + NOME BRANCO - CORREÇÃO DE ALINHAMENTO AQUI */}
+        <div 
+          className={`
+            mt-auto p-3 border-t 
+            ${isDefaultMode ? "border-white/10" : "border-sidebar-border"}
+            flex flex-col
+            ${sidebarCollapsed ? "items-center justify-center" : "items-stretch"}
+          `}
+        >
           <SidebarUserSection
             userData={userData}
             sidebarCollapsed={sidebarCollapsed}
             handleLogout={handleLogout}
             isActive={role !== "paciente"}
+            avatarUrl={avatarFullUrl}
           />
         </div>
       </div>
@@ -304,28 +377,27 @@ export default function Sidebar({ children }: SidebarProps) {
         }`}
       >
         <main className="flex-1 p-4 md:p-6">{children}</main>
+        <Dialog open={showLogoutDialog} onOpenChange={setShowLogoutDialog}>
+          <DialogContent className="sm:max-w-md">
+            <DialogHeader>
+              <DialogTitle>Confirmar Saída</DialogTitle>
+              <DialogDescription>
+                Deseja realmente sair do sistema? Você precisará fazer login
+                novamente.
+              </DialogDescription>
+            </DialogHeader>
+            <DialogFooter className="flex gap-2">
+              <Button variant="outline" onClick={cancelLogout}>
+                Cancelar
+              </Button>
+              <Button variant="destructive" onClick={confirmLogout}>
+                <LogOut className="mr-2 h-4 w-4" />
+                Sair
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
       </div>
-      <Dialog open={showLogoutDialog} onOpenChange={setShowLogoutDialog}>
-        <DialogContent className="sm:max-w-md">
-          <DialogHeader>
-            <DialogTitle>Confirmar Saída</DialogTitle>
-            <DialogDescription>
-              Deseja realmente sair do sistema? Você precisará fazer login
-              novamente.
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter className="flex gap-2">
-            <Button variant="outline" onClick={cancelLogout}>
-              Cancelar
-            </Button>
-            <Button variant="destructive" onClick={confirmLogout}>
-              <LogOut className="mr-2 h-4 w-4" />
-              Sair
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-       
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/components/schedule/schedule-form.tsx b/components/schedule/schedule-form.tsx
index d46baf1..2baf243 100644
--- a/components/schedule/schedule-form.tsx
+++ b/components/schedule/schedule-form.tsx
@@ -19,12 +19,12 @@ import {
 import { Textarea } from "@/components/ui/textarea";
 import { Calendar as CalendarShadcn } from "@/components/ui/calendar";
 import { format, addDays } from "date-fns";
-import { User, StickyNote, Check, ChevronsUpDown } from "lucide-react";
+import { User, StickyNote, CalendarDays, Stethoscope, Check, ChevronsUpDown } from "lucide-react";
 import { smsService } from "@/services/Sms.mjs";
 import { toast } from "@/hooks/use-toast";
 import { cn } from "@/lib/utils";
 
-// Componentes do Combobox (Barra de Pesquisa)
+// --- Importações do Combobox ---
 import {
   Command,
   CommandEmpty,
@@ -40,19 +40,21 @@ import {
 } from "@/components/ui/popover";
 
 export default function ScheduleForm() {
-  // Estado do usuário e role
-  const [role, setRole] = useState<string>("paciente")
-  const [userId, setUserId] = useState<string | null>(null)
+  // --- ESTADOS ---
+  const [role, setRole] = useState<string>("paciente");
+  const [userId, setUserId] = useState<string | null>(null);
 
-  // Listas e seleções
+  // Estados de Paciente
   const [patients, setPatients] = useState<any[]>([]);
   const [selectedPatient, setSelectedPatient] = useState("");
   const [openPatientCombobox, setOpenPatientCombobox] = useState(false);
 
+  // Estados de Médico
   const [doctors, setDoctors] = useState<any[]>([]);
   const [selectedDoctor, setSelectedDoctor] = useState("");
-  const [openDoctorCombobox, setOpenDoctorCombobox] = useState(false); // Novo estado para médico
+  const [openDoctorCombobox, setOpenDoctorCombobox] = useState(false);
 
+  // Estados de Agendamento
   const [selectedDate, setSelectedDate] = useState("");
   const [selectedTime, setSelectedTime] = useState("");
   const [notes, setNotes] = useState("");
@@ -60,187 +62,180 @@ export default function ScheduleForm() {
   const [loadingDoctors, setLoadingDoctors] = useState(true);
   const [loadingSlots, setLoadingSlots] = useState(false);
 
-  // Outras configs
-  const [tipoConsulta] = useState("presencial")
-  const [duracao] = useState("30")
-  const [disponibilidades, setDisponibilidades] = useState<any[]>([])
-  const [availabilityCounts, setAvailabilityCounts] = useState<Record<string, number>>({})
-  const [tooltip, setTooltip] = useState<{ x: number; y: number; text: string } | null>(null)
-  const calendarRef = useRef<HTMLDivElement | null>(null)
+  // Configurações
+  const [tipoConsulta] = useState("presencial");
+  const [duracao] = useState("30");
+  const [disponibilidades, setDisponibilidades] = useState<any[]>([]);
+  const [availabilityCounts, setAvailabilityCounts] = useState<Record<string, number>>({});
+  const [tooltip, setTooltip] = useState<{ x: number; y: number; text: string } | null>(null);
+  
+  const calendarRef = useRef<HTMLDivElement | null>(null);
 
-  // Funções auxiliares
+  // --- HELPER FUNCTIONS ---
   const getWeekdayNumber = (weekday: string) =>
-    ["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"].indexOf(weekday.toLowerCase()) + 1
+    ["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"].indexOf(weekday.toLowerCase()) + 1;
 
   const getBrazilDate = (date: Date) =>
-    new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), 12, 0, 0))
+    new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), 12, 0, 0));
 
-  // 🔹 Buscar dados do usuário e role
+  // --- EFFECTS ---
   useEffect(() => {
-    ;(async () => {
+    (async () => {
       try {
-        const me = await usersService.getMe()
-        const currentRole = me?.roles?.[0] || "paciente"
-        setRole(currentRole)
-        setUserId(me?.user?.id || null)
+        const me = await usersService.getMe();
+        const currentRole = me?.roles?.[0] || "paciente";
+        setRole(currentRole);
+        setUserId(me?.user?.id || null);
 
         if (["secretaria", "gestor", "admin"].includes(currentRole)) {
-          const pats = await patientsService.list()
-          setPatients(pats || [])
+          const pats = await patientsService.list();
+          setPatients(pats || []);
         }
       } catch (err) {
-        console.error("Erro ao carregar usuário:", err)
+        console.error("Erro ao carregar usuário:", err);
       }
-    })()
-  }, [])
+    })();
+  }, []);
 
-  // 🔹 Buscar médicos
   const fetchDoctors = useCallback(async () => {
-    setLoadingDoctors(true)
+    setLoadingDoctors(true);
     try {
-      const data = await doctorsService.list()
-      setDoctors(data || [])
+      const data = await doctorsService.list();
+      setDoctors(data || []);
     } catch (err) {
-      console.error("Erro ao buscar médicos:", err)
-      toast({ title: "Erro", description: "Não foi possível carregar médicos." })
+      console.error("Erro ao buscar médicos:", err);
+      toast({ title: "Erro", description: "Não foi possível carregar médicos." });
     } finally {
-      setLoadingDoctors(false)
+      setLoadingDoctors(false);
     }
-  }, [])
+  }, []);
 
   useEffect(() => {
-    fetchDoctors()
-  }, [fetchDoctors])
+    fetchDoctors();
+  }, [fetchDoctors]);
 
-  // 🔹 Buscar disponibilidades
   const loadDoctorDisponibilidades = useCallback(async (doctorId?: string) => {
-    if (!doctorId) return
+    if (!doctorId) return;
     try {
-      const disp = await AvailabilityService.listById(doctorId)
-      setDisponibilidades(disp || [])
-      await computeAvailabilityCountsPreview(doctorId, disp || [])
+      const disp = await AvailabilityService.listById(doctorId);
+      setDisponibilidades(disp || []);
+      await computeAvailabilityCountsPreview(doctorId, disp || []);
     } catch (err) {
-      console.error("Erro ao buscar disponibilidades:", err)
-      setDisponibilidades([])
+      console.error("Erro ao buscar disponibilidades:", err);
+      setDisponibilidades([]);
     }
-  }, [])
+  }, []);
 
-  const computeAvailabilityCountsPreview = async (
-    doctorId: string,
-    dispList: any[]
-  ) => {
+  const computeAvailabilityCountsPreview = async (doctorId: string, dispList: any[]) => {
     try {
-      const today = new Date()
-      const start = format(today, "yyyy-MM-dd")
-      const endDate = addDays(today, 90)
-      const end = format(endDate, "yyyy-MM-dd")
+      const today = new Date();
+      const start = format(today, "yyyy-MM-dd");
+      const endDate = addDays(today, 90);
+      const end = format(endDate, "yyyy-MM-dd");
 
       const appointments = await appointmentsService.search_appointment(
-        `doctor_id=eq.${doctorId}&scheduled_at=gte.${start}T00:00:00Z&scheduled_at=lt.${end}T23:59:59Z`,
-      )
+        `doctor_id=eq.${doctorId}&scheduled_at=gte.${start}T00:00:00Z&scheduled_at=lt.${end}T23:59:59Z`
+      );
 
-      const apptsByDate: Record<string, number> = {}
-      ;(appointments || []).forEach((a: any) => {
-        const d = String(a.scheduled_at).split("T")[0]
-        apptsByDate[d] = (apptsByDate[d] || 0) + 1
-      })
+      const apptsByDate: Record<string, number> = {};
+      (appointments || []).forEach((a: any) => {
+        const d = String(a.scheduled_at).split("T")[0];
+        apptsByDate[d] = (apptsByDate[d] || 0) + 1;
+      });
 
-      const counts: Record<string, number> = {}
+      const counts: Record<string, number> = {};
       for (let i = 0; i <= 90; i++) {
-        const d = addDays(today, i)
-        const key = format(d, "yyyy-MM-dd")
-        const dayOfWeek = d.getDay() === 0 ? 7 : d.getDay()
-        const dailyDisp = dispList.filter((p) => getWeekdayNumber(p.weekday) === dayOfWeek)
+        const d = addDays(today, i);
+        const key = format(d, "yyyy-MM-dd");
+        const dayOfWeek = d.getDay() === 0 ? 7 : d.getDay();
+        const dailyDisp = dispList.filter((p) => getWeekdayNumber(p.weekday) === dayOfWeek);
         if (dailyDisp.length === 0) {
-          counts[key] = 0
-          continue
+          counts[key] = 0;
+          continue;
         }
-        let possible = 0
+        let possible = 0;
         dailyDisp.forEach((p) => {
-          const [sh, sm] = p.start_time.split(":").map(Number)
-          const [eh, em] = p.end_time.split(":").map(Number)
-          const startMin = sh * 60 + sm
-          const endMin = eh * 60 + em
-          const slot = p.slot_minutes || 30
-          if (endMin >= startMin) possible += Math.floor((endMin - startMin) / slot) + 1
-        })
-        const occupied = apptsByDate[key] || 0
-        counts[key] = Math.max(0, possible - occupied)
+          const [sh, sm] = p.start_time.split(":").map(Number);
+          const [eh, em] = p.end_time.split(":").map(Number);
+          const startMin = sh * 60 + sm;
+          const endMin = eh * 60 + em;
+          const slot = p.slot_minutes || 30;
+          if (endMin >= startMin) possible += Math.floor((endMin - startMin) / slot) + 1;
+        });
+        const occupied = apptsByDate[key] || 0;
+        counts[key] = Math.max(0, possible - occupied);
       }
-      setAvailabilityCounts(counts)
+      setAvailabilityCounts(counts);
     } catch (err) {
-      console.error("Erro ao calcular contagens:", err)
-      setAvailabilityCounts({})
+      console.error("Erro ao calcular contagens:", err);
+      setAvailabilityCounts({});
     }
-  }
+  };
 
-  // 🔹 Quando médico muda
   useEffect(() => {
     if (selectedDoctor) {
-      loadDoctorDisponibilidades(selectedDoctor)
+      loadDoctorDisponibilidades(selectedDoctor);
     } else {
-      setDisponibilidades([])
-      setAvailabilityCounts({})
+      setDisponibilidades([]);
+      setAvailabilityCounts({});
     }
-    setSelectedDate("")
-    setSelectedTime("")
-    setAvailableTimes([])
-  }, [selectedDoctor, loadDoctorDisponibilidades])
+    setSelectedDate("");
+    setSelectedTime("");
+    setAvailableTimes([]);
+  }, [selectedDoctor, loadDoctorDisponibilidades]);
 
-  // 🔹 Buscar horários disponíveis
   const fetchAvailableSlots = useCallback(async (doctorId: string, date: string) => {
-    if (!doctorId || !date) return
-    setLoadingSlots(true)
-    setAvailableTimes([])
+    if (!doctorId || !date) return;
+    setLoadingSlots(true);
+    setAvailableTimes([]);
     try {
-      const disponibilidades = await AvailabilityService.listById(doctorId)
+      const disponibilidades = await AvailabilityService.listById(doctorId);
       const consultas = await appointmentsService.search_appointment(
-        `doctor_id=eq.${doctorId}&scheduled_at=gte.${date}T00:00:00Z&scheduled_at=lt.${date}T23:59:59Z`,
-      )
-      const diaJS = new Date(date).getDay()
-      const diaAPI = diaJS === 0 ? 7 : diaJS
-      const disponibilidadeDia = disponibilidades.find((d: any) => getWeekdayNumber(d.weekday) === diaAPI)
+        `doctor_id=eq.${doctorId}&scheduled_at=gte.${date}T00:00:00Z&scheduled_at=lt.${date}T23:59:59Z`
+      );
+      const diaJS = new Date(date).getDay();
+      const diaAPI = diaJS === 0 ? 7 : diaJS;
+      const disponibilidadeDia = disponibilidades.find((d: any) => getWeekdayNumber(d.weekday) === diaAPI);
       if (!disponibilidadeDia) {
-        toast({ title: "Nenhuma disponibilidade", description: "Nenhum horário para este dia." })
-        return setAvailableTimes([])
+        toast({ title: "Nenhuma disponibilidade", description: "Nenhum horário para este dia." });
+        return setAvailableTimes([]);
       }
-      const [startHour, startMin] = disponibilidadeDia.start_time.split(":").map(Number)
-      const [endHour, endMin] = disponibilidadeDia.end_time.split(":").map(Number)
-      const slot = disponibilidadeDia.slot_minutes || 30
-      const horariosGerados: string[] = []
-      let atual = new Date(date)
-      atual.setHours(startHour, startMin, 0, 0)
-      const end = new Date(date)
-      end.setHours(endHour, endMin, 0, 0)
+      const [startHour, startMin] = disponibilidadeDia.start_time.split(":").map(Number);
+      const [endHour, endMin] = disponibilidadeDia.end_time.split(":").map(Number);
+      const slot = disponibilidadeDia.slot_minutes || 30;
+      const horariosGerados: string[] = [];
+      let atual = new Date(date);
+      atual.setHours(startHour, startMin, 0, 0);
+      const end = new Date(date);
+      end.setHours(endHour, endMin, 0, 0);
       while (atual <= end) {
-        horariosGerados.push(atual.toTimeString().slice(0, 5))
-        atual = new Date(atual.getTime() + slot * 60000)
+        horariosGerados.push(atual.toTimeString().slice(0, 5));
+        atual = new Date(atual.getTime() + slot * 60000);
       }
-      const ocupados = (consultas || []).map((c: any) => String(c.scheduled_at).split("T")[1]?.slice(0, 5))
-      const livres = horariosGerados.filter((h) => !ocupados.includes(h))
-      setAvailableTimes(livres)
+      const ocupados = (consultas || []).map((c: any) => String(c.scheduled_at).split("T")[1]?.slice(0, 5));
+      const livres = horariosGerados.filter((h) => !ocupados.includes(h));
+      setAvailableTimes(livres);
     } catch (err) {
-      console.error(err)
-      toast({ title: "Erro", description: "Falha ao carregar horários." })
+      console.error(err);
+      toast({ title: "Erro", description: "Falha ao carregar horários." });
     } finally {
-      setLoadingSlots(false)
+      setLoadingSlots(false);
     }
-  }, [])
+  }, []);
 
   useEffect(() => {
-    if (selectedDoctor && selectedDate) fetchAvailableSlots(selectedDoctor, selectedDate)
-  }, [selectedDoctor, selectedDate, fetchAvailableSlots])
+    if (selectedDoctor && selectedDate) fetchAvailableSlots(selectedDoctor, selectedDate);
+  }, [selectedDoctor, selectedDate, fetchAvailableSlots]);
 
-  // 🔹 Submeter agendamento
+  // --- SUBMIT ---
   const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-
-    const isSecretaryLike = ["secretaria", "admin", "gestor"].includes(role)
-    const patientId = isSecretaryLike ? selectedPatient : userId
+    e.preventDefault();
+    const isSecretaryLike = ["secretaria", "admin", "gestor"].includes(role);
+    const patientId = isSecretaryLike ? selectedPatient : userId;
 
     if (!patientId || !selectedDoctor || !selectedDate || !selectedTime) {
-      toast({ title: "Campos obrigatórios", description: "Preencha todos os campos." })
-      return
+      toast({ title: "Campos obrigatórios", description: "Preencha todos os campos." });
+      return;
     }
 
     try {
@@ -251,66 +246,16 @@ export default function ScheduleForm() {
         duration_minutes: Number(duracao),
         notes,
         appointment_type: tipoConsulta,
-      }
+      };
 
       await appointmentsService.create(body);
-
       const dateFormatted = selectedDate.split("-").reverse().join("/");
 
       toast({
         title: "Consulta agendada!",
-        description: `Consulta marcada para ${dateFormatted} às ${selectedTime} com o(a) médico(a) ${
-          doctors.find((d) => d.id === selectedDoctor)?.full_name || ""
-        }.`,
+        description: `Consulta marcada para ${dateFormatted} às ${selectedTime}.`,
       });
 
-      let phoneNumber = "+5511999999999";
-
-      try {
-        if (isSecretaryLike) {
-          const patient = patients.find((p: any) => p.id === patientId)
-          const rawPhone = patient?.phone || patient?.phone_mobile || null
-          if (rawPhone) phoneNumber = rawPhone
-        } else {
-          const me = await usersService.getMe()
-          const rawPhone =
-            me?.profile?.phone ||
-            (typeof me?.profile === "object" && "phone_mobile" in me.profile
-              ? (me.profile as any).phone_mobile
-              : null) ||
-            (typeof me === "object" && "user_metadata" in me ? (me as any).user_metadata?.phone : null) ||
-            null
-          if (rawPhone) phoneNumber = rawPhone
-        }
-
-        if (phoneNumber) {
-          phoneNumber = phoneNumber.replace(/\D/g, "")
-          if (!phoneNumber.startsWith("55")) phoneNumber = `55${phoneNumber}`
-          phoneNumber = `+${phoneNumber}`
-        }
-
-        console.log("📞 Telefone usado:", phoneNumber)
-      } catch (err) {
-        console.warn("⚠️ Não foi possível obter telefone do paciente:", err)
-      }
-
-      try {
-        const smsRes = await smsService.sendSms({
-          phone_number: phoneNumber,
-          message: `Lembrete: sua consulta é em ${dateFormatted} às ${selectedTime} na Clínica MediConnect.`,
-          patient_id: patientId,
-        })
-
-        if (smsRes?.success) {
-          console.log("✅ SMS enviado com sucesso:", smsRes.message_sid);
-        } else {
-          console.warn("⚠️ Falha no envio do SMS:", smsRes);
-        }
-      } catch (smsErr) {
-        console.error("❌ Erro ao enviar SMS:", smsErr);
-      }
-
-      // 🧹 limpa os campos
       setSelectedDoctor("");
       setSelectedDate("");
       setSelectedTime("");
@@ -322,241 +267,330 @@ export default function ScheduleForm() {
     }
   };
 
-  // 🔹 Tooltip no calendário
+  // --- TOOLTIP ---
   useEffect(() => {
-    const cont = calendarRef.current
-    if (!cont) return
+    const cont = calendarRef.current;
+    if (!cont) return;
     const onMove = (ev: MouseEvent) => {
-      const target = ev.target as HTMLElement | null
-      const btn = target?.closest("button")
-      if (!btn) return setTooltip(null)
-      const aria = btn.getAttribute("aria-label") || btn.textContent || ""
-      const parsed = new Date(aria)
-      if (isNaN(parsed.getTime())) return setTooltip(null)
-      const key = format(getBrazilDate(parsed), "yyyy-MM-dd")
-      const count = availabilityCounts[key] ?? 0
+      const target = ev.target as HTMLElement | null;
+      const btn = target?.closest("button");
+      if (!btn) return setTooltip(null);
+      const aria = btn.getAttribute("aria-label") || btn.textContent || "";
+      const parsed = new Date(aria);
+      if (isNaN(parsed.getTime())) return setTooltip(null);
+      const key = format(getBrazilDate(parsed), "yyyy-MM-dd");
+      const count = availabilityCounts[key] ?? 0;
       setTooltip({
         x: ev.pageX + 10,
         y: ev.pageY + 10,
         text: `${count} horário${count !== 1 ? "s" : ""} disponíveis`,
-      })
-    }
-    const onLeave = () => setTooltip(null)
-    cont.addEventListener("mousemove", onMove)
-    cont.addEventListener("mouseleave", onLeave)
+      });
+    };
+    const onLeave = () => setTooltip(null);
+    cont.addEventListener("mousemove", onMove);
+    cont.addEventListener("mouseleave", onLeave);
     return () => {
-      cont.removeEventListener("mousemove", onMove)
-      cont.removeEventListener("mouseleave", onLeave)
-    }
-  }, [availabilityCounts])
+      cont.removeEventListener("mousemove", onMove);
+      cont.removeEventListener("mouseleave", onLeave);
+    };
+  }, [availabilityCounts]);
 
   return (
-    <div className="py-3 px-2">
-      <div className="max-w-7xl mx-auto space-y-3">
+    <div className="w-full min-h-screen p-4 md:p-6 lg:p-8">
+      <div className="max-w-7xl mx-auto space-y-6">
         <div className="space-y-1">
-          <h1 className="text-3xl font-bold text-slate-900">Agendar Consulta</h1>
-          <p className="text-slate-600">Selecione o médico, data e horário para sua consulta</p>
+          <h1 className="text-2xl md:text-3xl font-bold text-foreground">
+            Agendar Consulta
+          </h1>
+          <p className="text-muted-foreground text-sm md:text-base">
+            Preencha os dados abaixo para marcar seu horário.
+          </p>
         </div>
 
-        <div className="grid lg:grid-cols-[1fr,380px] gap-4">
-          {/* Coluna do Formulário */}
-          <form onSubmit={handleSubmit} className="space-y-3">
-            <Card className="border shadow-sm">
-              <CardHeader className="pb-2">
-                <CardTitle className="text-lg">Informações Básicas</CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-3">
-                {["secretaria", "gestor", "admin"].includes(role) && (
+        <div className="grid grid-cols-1 xl:grid-cols-[1fr_350px] gap-6">
+          
+          {/* == ESQUERDA == */}
+          <div className="space-y-6">
+            
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-start">
+              
+              {/* BLOCO 1: SELEÇÃO */}
+              <Card className="h-full border shadow-sm">
+                <CardHeader className="pb-3 border-b bg-muted/20">
+                    <CardTitle className="text-base flex items-center gap-2">
+                        <Stethoscope className="w-4 h-4 text-primary" />
+                        Dados da Consulta
+                    </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-5 pt-5">
+                  
+                  {/* COMBOBOX DE PACIENTE */}
+                  {["secretaria", "gestor", "admin"].includes(role) && (
+                    <div className="space-y-2">
+                      <Label className="text-sm font-medium">Selecione o Paciente</Label>
+                      
+                      <Popover open={openPatientCombobox} onOpenChange={setOpenPatientCombobox}>
+                        <PopoverTrigger asChild>
+                          <Button
+                            variant="outline"
+                            role="combobox"
+                            aria-expanded={openPatientCombobox}
+                            className="w-full justify-between"
+                          >
+                            {selectedPatient
+                              ? patients.find((p) => p.id === selectedPatient)?.full_name
+                              : "Buscar paciente..."}
+                            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                          </Button>
+                        </PopoverTrigger>
+                        
+                        {/* AQUI: align="start" e w igual ao trigger garantem que não invada a lateral */}
+                        <PopoverContent 
+                          className="w-[--radix-popover-trigger-width] min-w-0 p-0" 
+                          align="start"
+                          side="bottom"
+                        >
+                          <Command>
+                            <CommandInput placeholder="Procurar paciente..." />
+                            
+                            {/* AQUI: max-h-[130px] no mobile deixa a lista bem compacta */}
+                            <CommandList className="max-h-[130px] md:max-h-[300px] overflow-y-auto">
+                              <CommandEmpty>Nenhum paciente encontrado.</CommandEmpty>
+                              <CommandGroup>
+                                {patients.map((p) => (
+                                  <CommandItem
+                                    key={p.id}
+                                    value={p.full_name}
+                                    onSelect={() => {
+                                      setSelectedPatient(p.id === selectedPatient ? "" : p.id);
+                                      setOpenPatientCombobox(false);
+                                    }}
+                                    className="text-xs md:text-sm py-1.5 md:py-2"
+                                  >
+                                    <Check
+                                      className={cn(
+                                        "mr-2 h-3 w-3 md:h-4 md:w-4",
+                                        selectedPatient === p.id ? "opacity-100" : "opacity-0"
+                                      )}
+                                    />
+                                    <span className="truncate">{p.full_name}</span>
+                                  </CommandItem>
+                                ))}
+                              </CommandGroup>
+                            </CommandList>
+                          </Command>
+                        </PopoverContent>
+                      </Popover>
+                    </div>
+                  )}
+
+                  {/* COMBOBOX DE MÉDICO */}
                   <div className="space-y-2">
-                    <Label htmlFor="patient-select" className="text-sm font-medium">
-                      Paciente
-                    </Label>
-                    <Select value={selectedPatient} onValueChange={setSelectedPatient}>
-                      <SelectTrigger id="patient-select">
-                        <SelectValue placeholder="Selecione o paciente" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {patients.map((p) => (
-                          <SelectItem key={p.id} value={p.id}>
-                            {p.full_name}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
+                    <Label className="text-sm font-medium">Selecione o Médico</Label>
+                    
+                    <Popover open={openDoctorCombobox} onOpenChange={setOpenDoctorCombobox}>
+                      <PopoverTrigger asChild>
+                        <Button
+                          variant="outline"
+                          role="combobox"
+                          aria-expanded={openDoctorCombobox}
+                          className="w-full justify-between"
+                          disabled={loadingDoctors}
+                        >
+                          {loadingDoctors ? "Carregando..." : (
+                            selectedDoctor
+                            ? doctors.find((doctor) => doctor.id === selectedDoctor)?.full_name
+                            : "Buscar médico..."
+                          )}
+                          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                        </Button>
+                      </PopoverTrigger>
+
+                      {/* AQUI: Configurações de largura e posicionamento corrigidos */}
+                      <PopoverContent 
+                        className="w-[--radix-popover-trigger-width] min-w-0 p-0" 
+                        align="start"
+                        side="bottom"
+                      >
+                        <Command>
+                          <CommandInput placeholder="Procurar médico..." />
+                          
+                          {/* AQUI: Altura reduzida no mobile */}
+                          <CommandList className="max-h-[130px] md:max-h-[300px] overflow-y-auto">
+                            <CommandEmpty>Nenhum médico encontrado.</CommandEmpty>
+                            <CommandGroup>
+                              {doctors.map((doctor) => (
+                                <CommandItem
+                                  key={doctor.id}
+                                  value={doctor.full_name}
+                                  onSelect={() => {
+                                    setSelectedDoctor(doctor.id === selectedDoctor ? "" : doctor.id);
+                                    setOpenDoctorCombobox(false);
+                                  }}
+                                  className="text-xs md:text-sm py-1.5 md:py-2"
+                                >
+                                  <Check
+                                    className={cn(
+                                      "mr-2 h-3 w-3 md:h-4 md:w-4",
+                                      selectedDoctor === doctor.id ? "opacity-100" : "opacity-0"
+                                    )}
+                                  />
+                                  <div className="flex flex-col truncate">
+                                    <span className="truncate font-medium">{doctor.full_name}</span>
+                                    <span className="text-[10px] md:text-xs text-muted-foreground truncate">{doctor.specialty}</span>
+                                  </div>
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </CommandList>
+                        </Command>
+                      </PopoverContent>
+                    </Popover>
+
+                    <p className="text-xs text-muted-foreground mt-1">
+                        Digite para filtrar por nome.
+                    </p>
                   </div>
-                )}
+                </CardContent>
+              </Card>
 
-                <div className="space-y-2">
-                  <Label htmlFor="doctor-select" className="text-sm font-medium">
-                    Médico
-                  </Label>
-                  <Select value={selectedDoctor} onValueChange={setSelectedDoctor}>
-                    <SelectTrigger id="doctor-select">
-                      <SelectValue placeholder="Selecione o médico" />
-                    </SelectTrigger>
-                    <SelectContent>
-  {loadingDoctors ? (
-    <SelectItem value="loading" disabled>
-      Carregando...
-    </SelectItem>
-  ) : (
-    doctors
-      .slice() // evita mutar o state original
-      .sort((a, b) => a.full_name.localeCompare(b.full_name, "pt-BR"))
-      .map((d) => (
-        <SelectItem key={d.id} value={d.id}>
-          {d.full_name} — {d.specialty}
-        </SelectItem>
-      ))
-  )}
-</SelectContent>
-
-                  </Select>
-                </div>
-              </CardContent>
-            </Card>
+              {/* BLOCO 2: CALENDÁRIO */}
+              <Card className="h-full border shadow-sm flex flex-col">
+                <CardHeader className="pb-3 border-b bg-muted/20">
+                    <CardTitle className="text-base flex items-center gap-2">
+                        <CalendarDays className="w-4 h-4 text-primary" />
+                        Data Disponível
+                    </CardTitle>
+                </CardHeader>
+                <CardContent className="flex-1 flex items-center justify-center pt-4 pb-4">
+                  <div ref={calendarRef} className="flex justify-center w-full overflow-x-auto">
+                    <CalendarShadcn
+                      mode="single"
+                      disabled={!selectedDoctor}
+                      selected={selectedDate ? new Date(selectedDate + "T12:00:00") : undefined}
+                      onSelect={(date) => {
+                        if (!date) return;
+                        const formatted = format(new Date(date.getTime() + 12 * 60 * 60 * 1000), "yyyy-MM-dd");
+                        setSelectedDate(formatted);
+                      }}
+                      className="rounded-md border p-3 w-fit"
+                    />
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
 
+            {/* BLOCO 3: OBSERVAÇÕES */}
             <Card className="border shadow-sm">
-              <CardHeader className="pb-2">
-                <CardTitle className="text-lg">Selecione a Data</CardTitle>
+              <CardHeader className="pb-3 border-b bg-muted/20">
+                <CardTitle className="text-base flex items-center gap-2">
+                    <StickyNote className="w-4 h-4 text-primary" />
+                    Observações (Opcional)
+                </CardTitle>
               </CardHeader>
-              <CardContent>
-                <div ref={calendarRef} className="flex justify-center">
-                  <CalendarShadcn
-                    mode="single"
-                    disabled={!selectedDoctor}
-                    selected={
-                      selectedDate
-                        ? new Date(selectedDate + "T12:00:00")
-                        : undefined
-                    }
-                    onSelect={(date) => {
-                      if (!date) return
-                      const formatted = format(new Date(date.getTime() + 12 * 60 * 60 * 1000), "yyyy-MM-dd")
-                      setSelectedDate(formatted)
-                    }}
-                    className="rounded-md"
-                  />
-                </div>
-              </CardContent>
-            </Card>
-
-            <Card className="border shadow-sm">
-              <CardHeader className="pb-2">
-                <CardTitle className="text-lg">Observações (Opcional)</CardTitle>
-              </CardHeader>
-              <CardContent>
+              <CardContent className="pt-4">
                 <Textarea
-                  placeholder="Adicione instruções ou informações importantes para o médico..."
+                  placeholder="Instruções especiais, sintomas ou motivos da consulta..."
                   value={notes}
                   onChange={(e) => setNotes(e.target.value)}
-                  rows={4}
-                  className="resize-none"
+                  rows={3}
+                  className="resize-none w-full"
                 />
               </CardContent>
             </Card>
-          </form>
-
-          <div className="space-y-3">
-            <Card className="border-2 border-blue-200 shadow-lg bg-gradient-to-br from-blue-50 to-white sticky top-6">
-              <CardHeader className="pb-3 border-b border-blue-100">
-                <CardTitle className="text-blue-900 flex items-center gap-2">
-                  <User className="h-5 w-5" />
-                  Resumo da Consulta
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="pt-3 space-y-3">
-                <div className="space-y-1">
-                  <p className="text-xs font-medium text-slate-600">Médico</p>
-                  <p className="text-sm font-semibold text-slate-900">
-                    {selectedDoctor ? doctors.find((d) => d.id === selectedDoctor)?.full_name : "Não selecionado"}
-                  </p>
-                </div>
-
-                <div className="space-y-1">
-                  <p className="text-xs font-medium text-slate-600">Data</p>
-                  <p className="text-sm font-semibold text-slate-900">
-                    {selectedDate ? format(new Date(selectedDate + "T12:00:00"), "dd/MM/yyyy") : "Não selecionada"}
-                  </p>
-                </div>
-
-                <div className="space-y-2">
-                  <Label htmlFor="time-select" className="text-xs font-medium text-slate-600">
-                    Horário
-                  </Label>
-                  <Select
-                    value={selectedTime}
-                    onValueChange={setSelectedTime}
-                    disabled={loadingSlots || availableTimes.length === 0}
-                  >
-                    <SelectTrigger id="time-select" className="bg-white">
-                      <SelectValue
-                        placeholder={
-                          loadingSlots
-                            ? "Carregando..."
-                            : availableTimes.length === 0
-                              ? "Nenhum horário"
-                              : "Escolha o horário"
-                        }
-                      />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {availableTimes.map((h) => (
-                        <SelectItem key={h} value={h}>
-                          {h}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-
-                <div className="pt-3 border-t border-blue-100 space-y-2">
-                  <div className="flex justify-between text-xs">
-                    <span className="text-slate-600">Tipo:</span>
-                    <span className="font-medium text-slate-900 capitalize">{tipoConsulta}</span>
-                  </div>
-                  <div className="flex justify-between text-xs">
-                    <span className="text-slate-600">Duração:</span>
-                    <span className="font-medium text-slate-900">{duracao} minutos</span>
-                  </div>
-                </div>
-
-                {notes && (
-                  <div className="pt-3 border-t border-blue-100">
-                    <div className="flex items-start gap-2">
-                      <StickyNote className="h-4 w-4 text-blue-600 mt-0.5 flex-shrink-0" />
-                      <p className="text-xs italic text-slate-700 line-clamp-3">{notes}</p>
-                    </div>
-                  </div>
-                )}
-
-                <div className="pt-2 space-y-2">
-                  <Button
-                    type="submit"
-                    onClick={handleSubmit}
-                    className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium shadow-md"
-                    disabled={!selectedDoctor || !selectedDate || !selectedTime}
-                  >
-                    Confirmar Agendamento
-                  </Button>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    onClick={() => {
-                      setSelectedDoctor("")
-                      setSelectedDate("")
-                      setSelectedTime("")
-                      setNotes("")
-                      setSelectedPatient("")
-                    }}
-                    className="w-full"
-                  >
-                    Limpar Formulário
-                  </Button>
-                </div>
-              </CardContent>
-            </Card>
           </div>
+
+          {/* == DIREITA == */}
+          <div className="w-full">
+            <div className="xl:sticky xl:top-6">
+                <Card className="border-2 border-primary shadow-lg h-full flex flex-col">
+                <CardHeader className="pb-4 border-b border-primary/20 bg-primary/5">
+                    <CardTitle className="text-primary flex items-center gap-2 text-lg">
+                    <User className="h-5 w-5" />
+                    Resumo da Consulta
+                    </CardTitle>
+                </CardHeader>
+                <CardContent className="pt-6 space-y-5 flex-1">
+                    
+                    <div className="grid grid-cols-2 gap-4 xl:grid-cols-1">
+                        <div className="space-y-1">
+                        <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Médico</p>
+                        <p className="text-sm font-semibold text-foreground break-words">
+                            {selectedDoctor ? doctors.find((d) => d.id === selectedDoctor)?.full_name : "—"}
+                        </p>
+                        </div>
+                        <div className="space-y-1">
+                        <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Data</p>
+                        <p className="text-sm font-semibold text-foreground">
+                            {selectedDate ? format(new Date(selectedDate + "T12:00:00"), "dd/MM/yyyy") : "—"}
+                        </p>
+                        </div>
+                    </div>
+
+                    <div className="space-y-2 pt-2">
+                    <Label htmlFor="time-select" className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                        Horário da Sessão
+                    </Label>
+                    <Select
+                        value={selectedTime}
+                        onValueChange={setSelectedTime}
+                        disabled={loadingSlots || availableTimes.length === 0}
+                    >
+                        <SelectTrigger id="time-select" className="bg-white w-full border-primary/30 focus:ring-primary">
+                        <SelectValue
+                            placeholder={
+                            loadingSlots ? "Carregando..." : availableTimes.length === 0 ? "Selecione uma data" : "Escolha o horário"
+                            }
+                        />
+                        </SelectTrigger>
+                        <SelectContent>
+                        {availableTimes.map((h) => (
+                            <SelectItem key={h} value={h}>{h}</SelectItem>
+                        ))}
+                        </SelectContent>
+                    </Select>
+                    </div>
+
+                    <div className="pt-4 border-t border-dashed space-y-2">
+                    <div className="flex justify-between text-sm">
+                        <span className="text-muted-foreground">Tipo:</span>
+                        <span className="font-medium capitalize">{tipoConsulta}</span>
+                    </div>
+                    <div className="flex justify-between text-sm">
+                        <span className="text-muted-foreground">Duração estimada:</span>
+                        <span className="font-medium">{duracao} min</span>
+                    </div>
+                    </div>
+
+                    <div className="pt-4 space-y-3 mt-auto">
+                    <Button
+                        type="submit"
+                        onClick={handleSubmit}
+                        className="w-full bg-primary hover:bg-primary/90 text-primary-foreground font-semibold shadow-md py-6 h-auto text-base transition-all"
+                        disabled={!selectedDoctor || !selectedDate || !selectedTime}
+                    >
+                        Confirmar Agendamento
+                    </Button>
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        onClick={() => {
+                        setSelectedDoctor("");
+                        setSelectedDate("");
+                        setSelectedTime("");
+                        setNotes("");
+                        setSelectedPatient("");
+                        }}
+                        className="w-full text-muted-foreground hover:text-destructive"
+                    >
+                        Limpar Formulário
+                    </Button>
+                    </div>
+                </CardContent>
+                </Card>
+            </div>
+          </div>
+
         </div>
       </div>
 
@@ -580,5 +614,5 @@ export default function ScheduleForm() {
         </div>
       )}
     </div>
-  )
-}
+  );
+}
\ No newline at end of file
diff --git a/components/ui/WeeklyScheduleCard.tsx b/components/ui/WeeklyScheduleCard.tsx
index 2b33ba0..f5c2eab 100644
--- a/components/ui/WeeklyScheduleCard.tsx
+++ b/components/ui/WeeklyScheduleCard.tsx
@@ -76,23 +76,23 @@ export default function WeeklyScheduleCard({ doctorId }: WeeklyScheduleProps) {
     return (
         <div className="space-y-4 grid md:grid-cols-7 gap-2">
             {loading ? (
-                <p className="text-sm text-gray-500 col-span-7 text-center">Carregando...</p>
+                <p className="text-sm text-muted-foreground col-span-7 text-center">Carregando...</p>
             ) : (
-                ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "Saturday"].map((day) => {
+                ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"].map((day) => {
                     const times = schedule[day] || [];
                     return (
                         <div key={day} className="space-y-4">
-                            <div className="flex flex-col items-center justify-between p-3 bg-blue-50 rounded-lg">
-                                <p className="font-medium capitalize">{weekdaysPT[day]}</p>
+                            <div className="flex flex-col items-center justify-between p-3 bg-primary/10 rounded-lg">
+                                <p className="font-medium capitalize text-foreground">{weekdaysPT[day]}</p>
                                 <div className="text-center">
                                     {times.length > 0 ? (
                                         times.map((t, i) => (
-                                            <p key={i} className="text-sm text-gray-600">
+                                            <p key={i} className="text-sm text-muted-foreground">
                                                 {formatTime(t.start)} <br /> {formatTime(t.end)}
                                             </p>
                                         ))
                                     ) : (
-                                        <p className="text-sm text-gray-400 italic">Sem horário</p>
+                                        <p className="text-sm text-muted-foreground italic">Sem horário</p>
                                     )}
                                 </div>
                             </div>
diff --git a/components/ui/filter-bar.tsx b/components/ui/filter-bar.tsx
index d7064b0..92e5bd8 100644
--- a/components/ui/filter-bar.tsx
+++ b/components/ui/filter-bar.tsx
@@ -53,16 +53,16 @@ export function FilterBar({
     Object.values(activeFilters).some(val => val !== "all" && val !== "");
 
   return (
-    <div className={`flex flex-col md:flex-row items-start md:items-center gap-3 bg-white p-4 rounded-lg border border-gray-200 ${className}`}>
+    <div className={`flex flex-col md:flex-row items-start md:items-center gap-3 bg-card p-4 rounded-lg border ${className}`}>
       
       {/* Barra de Pesquisa */}
       <div className="relative w-full md:flex-1">
-        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
         <Input
           placeholder={searchPlaceholder}
           value={searchTerm}
           onChange={(e) => onSearch(e.target.value)}
-          className="pl-10 w-full bg-gray-50 border-gray-200 focus:bg-white transition-colors"
+          className="pl-10 w-full bg-muted border-border focus:bg-card transition-colors"
         />
       </div>
 
@@ -100,7 +100,7 @@ export function FilterBar({
             variant="ghost" 
             size="icon" 
             onClick={onClearFilters}
-            className="text-gray-500 hover:text-red-600"
+            className="text-muted-foreground hover:text-destructive"
             title="Limpar filtros"
           >
             <X className="h-4 w-4" />
diff --git a/components/ui/patient-details-modal.tsx b/components/ui/patient-details-modal.tsx
index 8a37050..6fdb7f4 100644
--- a/components/ui/patient-details-modal.tsx
+++ b/components/ui/patient-details-modal.tsx
@@ -45,10 +45,10 @@ export function PatientDetailsModal({
 
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="max-w-[95%] sm:max-w-lg max-h-[90vh] overflow-y-auto">
+      <DialogContent className="max-w-[95%] sm:max-w-lg max-h-[90vh] overflow-y-auto bg-card text-card-foreground border border-border">
         <DialogHeader>
-          <DialogTitle className="text-xl font-bold">Detalhes do Paciente</DialogTitle>
-          <DialogDescription>
+          <DialogTitle className="text-xl font-bold text-foreground">Detalhes do Paciente</DialogTitle>
+          <DialogDescription className="text-muted-foreground">
             Informações detalhadas sobre o paciente.
           </DialogDescription>
         </DialogHeader>
@@ -57,80 +57,80 @@ export function PatientDetailsModal({
           {/* Grid Principal */}
           <div className="grid grid-cols-2 gap-4 text-sm">
             <div>
-              <p className="font-semibold text-gray-900">Nome Completo</p>
-              <p className="text-gray-700">{patient.nome}</p>
+              <p className="font-semibold text-foreground">Nome Completo</p>
+              <p className="text-muted-foreground">{patient.nome}</p>
             </div>
             
             {/* CORREÇÃO AQUI: Adicionado 'break-all' para quebrar o email */}
             <div>
-              <p className="font-semibold text-gray-900">Email</p>
-              <p className="text-gray-700 break-all">{patient.email || "N/A"}</p>
+              <p className="font-semibold text-foreground">Email</p>
+              <p className="text-muted-foreground break-all">{patient.email || "N/A"}</p>
             </div>
 
             <div>
-              <p className="font-semibold text-gray-900">Telefone</p>
-              <p className="text-gray-700">{patient.telefone}</p>
+              <p className="font-semibold text-foreground">Telefone</p>
+              <p className="text-muted-foreground">{patient.telefone}</p>
             </div>
 
             <div>
-              <p className="font-semibold text-gray-900">Data de Nascimento</p>
-              <p className="text-gray-700">{patient.birth_date || "N/A"}</p>
+              <p className="font-semibold text-foreground">Data de Nascimento</p>
+              <p className="text-muted-foreground">{patient.birth_date || "N/A"}</p>
             </div>
 
             <div>
-              <p className="font-semibold text-gray-900">CPF</p>
-              <p className="text-gray-700">{patient.cpf || "N/A"}</p>
+              <p className="font-semibold text-foreground">CPF</p>
+              <p className="text-muted-foreground">{patient.cpf || "N/A"}</p>
             </div>
 
             <div>
-              <p className="font-semibold text-gray-900">Tipo Sanguíneo</p>
-              <p className="text-gray-700">{patient.blood_type || "N/A"}</p>
+              <p className="font-semibold text-foreground">Tipo Sanguíneo</p>
+              <p className="text-muted-foreground">{patient.blood_type || "N/A"}</p>
             </div>
 
             <div>
-              <p className="font-semibold text-gray-900">Peso (kg)</p>
-              <p className="text-gray-700">{patient.weight_kg || "0"}</p>
+              <p className="font-semibold text-foreground">Peso (kg)</p>
+              <p className="text-muted-foreground">{patient.weight_kg || "0"}</p>
             </div>
 
             <div>
-              <p className="font-semibold text-gray-900">Altura (m)</p>
-              <p className="text-gray-700">{patient.height_m || "0"}</p>
+              <p className="font-semibold text-foreground">Altura (m)</p>
+              <p className="text-muted-foreground">{patient.height_m || "0"}</p>
             </div>
           </div>
 
-          <hr className="border-gray-200" />
+          <hr className="border-border" />
 
           {/* Seção de Endereço */}
           <div>
-            <h4 className="font-semibold mb-3 text-gray-900">Endereço</h4>
+            <h4 className="font-semibold mb-3 text-foreground">Endereço</h4>
             <div className="grid grid-cols-2 gap-4 text-sm">
               <div>
-                <p className="font-semibold text-gray-900">Rua</p>
-                <p className="text-gray-700">
+                <p className="font-semibold text-foreground">Rua</p>
+                <p className="text-muted-foreground">
                   {patient.street && patient.street !== "N/A" 
                     ? `${patient.street}, ${patient.number || ""}` 
                     : "N/A"}
                 </p>
               </div>
               <div>
-                <p className="font-semibold text-gray-900">Complemento</p>
-                <p className="text-gray-700">{patient.complement || "N/A"}</p>
+                <p className="font-semibold text-foreground">Complemento</p>
+                <p className="text-muted-foreground">{patient.complement || "N/A"}</p>
               </div>
               <div>
-                <p className="font-semibold text-gray-900">Bairro</p>
-                <p className="text-gray-700">{patient.neighborhood || "N/A"}</p>
+                <p className="font-semibold text-foreground">Bairro</p>
+                <p className="text-muted-foreground">{patient.neighborhood || "N/A"}</p>
               </div>
               <div>
-                <p className="font-semibold text-gray-900">Cidade</p>
-                <p className="text-gray-700">{patient.cidade || "N/A"}</p>
+                <p className="font-semibold text-foreground">Cidade</p>
+                <p className="text-muted-foreground">{patient.cidade || "N/A"}</p>
               </div>
               <div>
-                <p className="font-semibold text-gray-900">Estado</p>
-                <p className="text-gray-700">{patient.estado || "N/A"}</p>
+                <p className="font-semibold text-foreground">Estado</p>
+                <p className="text-muted-foreground">{patient.estado || "N/A"}</p>
               </div>
               <div>
-                <p className="font-semibold text-gray-900">CEP</p>
-                <p className="text-gray-700">{patient.cep || "N/A"}</p>
+                <p className="font-semibold text-foreground">CEP</p>
+                <p className="text-muted-foreground">{patient.cep || "N/A"}</p>
               </div>
             </div>
           </div>
diff --git a/components/ui/userToolTip.tsx b/components/ui/userToolTip.tsx
index f579653..9b6fde7 100644
--- a/components/ui/userToolTip.tsx
+++ b/components/ui/userToolTip.tsx
@@ -33,6 +33,7 @@ interface Props {
   sidebarCollapsed: boolean;
   handleLogout: () => void;
   isActive: boolean;
+  avatarUrl?: string;
 }
 
 export default function SidebarUserSection({
@@ -40,6 +41,7 @@ export default function SidebarUserSection({
   sidebarCollapsed,
   handleLogout,
   isActive,
+  avatarUrl,
 }: Props) {
   const pathname = usePathname();
   const menuItems: any[] = [
@@ -56,6 +58,18 @@ export default function SidebarUserSection({
     { href: "/patient/reports", icon: ClipboardPlus, label: "Meus Laudos" },
     { href: "/patient/profile", icon: SquareUser, label: "Meus Dados" },
   ];
+
+  // Função auxiliar para obter iniciais
+  const getInitials = (name: string) => {
+    if (!name) return "U";
+    return name
+      .split(" ")
+      .map((n) => n[0])
+      .slice(0, 2)
+      .join("")
+      .toUpperCase();
+  };
+
   return (
     <div className="border-t p-4 mt-auto">
       {/* POPUP DE INFORMAÇÕES DO USUÁRIO */}
@@ -67,12 +81,13 @@ export default function SidebarUserSection({
             }`}
           >
             <Avatar>
-              <AvatarImage src="/placeholder.svg?height=40&width=40" />
-              <AvatarFallback>
-                {userData.user_metadata.full_name
-                  .split(" ")
-                  .map((n) => n[0])
-                  .join("")}
+              <AvatarImage 
+                src={avatarUrl} 
+                alt={userData.user_metadata.full_name} 
+                className="object-cover"
+              />
+              <AvatarFallback className="text-black bg-gray-200 font-semibold">
+                {getInitials(userData.user_metadata.full_name)}
               </AvatarFallback>
             </Avatar>
 
@@ -93,7 +108,7 @@ export default function SidebarUserSection({
         <PopoverContent
           align="center"
           side="top"
-          className="w-64 p-4 shadow-lg border bg-white"
+          className="w-64 p-4 shadow-2xl border-2 border-primary/20 bg-card text-card-foreground ring-1 ring-primary/10"
         >
           <nav>
             {menuItems.map((item) => {
@@ -104,8 +119,8 @@ export default function SidebarUserSection({
                   <div
                     className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
                       isActive
-                        ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600"
-                        : "text-gray-600 hover:bg-gray-50"
+                        ? "bg-primary/10 text-primary border-r-2 border-primary"
+                        : "text-foreground hover:bg-muted"
                     }`}
                   >
                     <Icon className="w-5 h-5 flex-shrink-0" />
@@ -125,19 +140,19 @@ export default function SidebarUserSection({
         size="sm"
         className={
           sidebarCollapsed
-            ? "w-full bg-white text-black flex justify-center items-center p-2 hover:bg-gray-200"
-            : "w-full bg-white text-black hover:bg-gray-200 cursor-pointer"
+            ? "w-full bg-card text-foreground border-2 border-border flex justify-center items-center p-2 hover:bg-muted"
+            : "w-full bg-card text-foreground border-2 border-border hover:bg-muted cursor-pointer"
         }
         onClick={handleLogout}
       >
         <LogOut
           className={
-            sidebarCollapsed ? "h-5 w-5 text-black" : "mr-2 h-4 w-4 text-black"
+            sidebarCollapsed ? "h-5 w-5" : "mr-2 h-4 w-4"
           }
         />
         {!sidebarCollapsed && "Sair"}
       </Button>
-         
+         
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/hooks/useAuthLayout.ts b/hooks/useAuthLayout.ts
index ad0d4ed..a20a6a9 100644
--- a/hooks/useAuthLayout.ts
+++ b/hooks/useAuthLayout.ts
@@ -6,63 +6,72 @@ import { usersService } from "@/services/usersApi.mjs";
 import { toast } from "@/hooks/use-toast";
 
 interface UserLayoutData {
-    id: string;
-    name: string;
-    email: string;
-    roles: string[];
-    avatar_url?: string;
-    avatarFullUrl?: string;
+  id: string;
+  name: string;
+  email: string;
+  roles: string[];
+  avatar_url?: string;
+  avatarFullUrl?: string;
 }
 
 interface UseAuthLayoutOptions {
-    requiredRole?: string[];
+  requiredRole?: string[];
 }
 
-export function useAuthLayout({ requiredRole }: UseAuthLayoutOptions = {}) {
-    const [user, setUser] = useState<UserLayoutData | null>(null);
-    const [isLoading, setIsLoading] = useState(true);
-    const router = useRouter();
+export function useAuthLayout(
+  { requiredRole }: UseAuthLayoutOptions = {}
+) {
+  const [user, setUser] = useState<UserLayoutData | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const router = useRouter();
 
-    useEffect(() => {
-        const fetchUserData = async () => {
-            try {
-                const fullUserData = await usersService.getMe();
+  useEffect(() => {
+    const fetchUserData = async () => {
+      try {
+        const fullUserData = await usersService.getMe();
 
-                if (!fullUserData.roles.some((role) => requiredRole?.includes(role))) {
-                    console.error(`Acesso negado. Requer perfil '${requiredRole}', mas o usuário tem '${fullUserData.roles.join(", ")}'.`);
-                    toast({
-                        title: "Acesso Negado",
-                        description: "Você não tem permissão para acessar esta página.",
-                        variant: "destructive",
-                    });
-                    router.push("/");
-                    return;
-                }
+        // só verifica papel se requiredRole existir
+        if (
+          requiredRole &&
+          !fullUserData.roles.some((role: string) =>
+            requiredRole.includes(role)
+          )
+        ) {
+          console.error(
+            `Acesso negado. Requer perfil '${requiredRole}', mas o usuário tem '${fullUserData.roles.join(", ")}'.`
+          );
+          toast({
+            title: "Acesso Negado",
+            description: "Você não tem permissão para acessar esta página.",
+            variant: "destructive",
+          });
+          router.push("/");
+          return;
+        }
 
-                const avatarPath = fullUserData.profile.avatar_url;
+        const avatarPath = fullUserData.profile.avatar_url;
+        const avatarFullUrl = avatarPath
+          ? `https://yuanqfswhberkoevtmfr.supabase.co/storage/v1/object/public/avatars/${avatarPath}`
+          : undefined;
 
-                // *** A CORREÇÃO ESTÁ AQUI ***
-                // Adicionamos o nome do bucket 'avatars' na URL final.
-                const avatarFullUrl = avatarPath ? `https://yuanqfswhberkoevtmfr.supabase.co/storage/v1/object/public/avatars/${avatarPath}` : undefined;
+        setUser({
+          id: fullUserData.user.id,
+          name: fullUserData.profile.full_name || "Usuário",
+          email: fullUserData.user.email,
+          roles: fullUserData.roles,
+          avatar_url: avatarPath,
+          avatarFullUrl,
+        });
+      } catch (error) {
+        console.error("Falha na autenticação do layout:", error);
+        router.push("/login");
+      } finally {
+        setIsLoading(false);
+      }
+    };
 
-                setUser({
-                    id: fullUserData.user.id,
-                    name: fullUserData.profile.full_name || "Usuário",
-                    email: fullUserData.user.email,
-                    roles: fullUserData.roles,
-                    avatar_url: avatarPath,
-                    avatarFullUrl: avatarFullUrl,
-                });
-            } catch (error) {
-                console.error("Falha na autenticação do layout:", error);
-                router.push("/login");
-            } finally {
-                setIsLoading(false);
-            }
-        };
+    fetchUserData();
+  }, [router]); // não depende mais de requiredRole
 
-        fetchUserData();
-    }, [router, requiredRole]);
-
-    return { user, isLoading };
+  return { user, isLoading };
 }
diff --git a/services/patientsApi.mjs b/services/patientsApi.mjs
index 5eb1e7c..05f2e5f 100644
--- a/services/patientsApi.mjs
+++ b/services/patientsApi.mjs
@@ -2,7 +2,11 @@ import { api } from "./api.mjs";
 
 export const patientsService = {
     list: () => api.get("/rest/v1/patients"),
-    getById: (id) => api.get(`/rest/v1/patients?id=eq.${id}`),
+    getById: (id) => {
+  console.log("getById chamado", id);
+  return api.get(`/rest/v1/patients?id=eq.${id}`);
+},
+
     create: (data) => api.post("/rest/v1/patients", data),
     update: (id, data) => api.patch(`/rest/v1/patients?id=eq.${id}`, data),
     delete: (id) => api.delete(`/rest/v1/patients?id=eq.${id}`),
diff --git a/services/usersApi.mjs b/services/usersApi.mjs
index b041336..70a5963 100644
--- a/services/usersApi.mjs
+++ b/services/usersApi.mjs
@@ -3,6 +3,7 @@ import { api } from "./api.mjs";
 export const usersService = {
     // Função getMe corrigida para chamar a si mesma pelo nome
     async getMe() {
+        console.log("getMe chamado");
         const sessionData = await api.getSession();
         if (!sessionData?.id) {
             console.error("Sessão não encontrada ou usuário sem ID.", sessionData);