diff --git a/app/manager/pacientes/[id]/editar/page.tsx b/app/manager/pacientes/[id]/editar/page.tsx
index ab6d7e0..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,25 +245,28 @@ 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-foreground">Editar Paciente</h1>
-                        <p className="text-muted-foreground">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-card rounded-lg border border-border p-6">
-                        <h2 className="text-lg font-semibold text-foreground 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>
@@ -279,7 +280,7 @@ export default function EditarPacientePage() {
                                             <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-destructive">
+                                        <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-card rounded-lg border border-border p-6">
-                        <h2 className="text-lg font-semibold text-foreground 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-muted 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-muted-foreground 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,7 +339,7 @@ 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-primary" />
                                         <Label htmlFor="Masculino">Masculino</Label>
@@ -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-card rounded-lg border border-border p-6">
-                        <h2 className="text-lg font-semibold text-foreground 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-card rounded-lg border border-border p-6">
-                        <h2 className="text-lg font-semibold text-foreground 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-card rounded-lg border border-border p-6">
-                        <h2 className="text-lg font-semibold text-foreground 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-card rounded-lg border border-border p-6">
-                        <h2 className="text-lg font-semibold text-foreground 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-primary hover:bg-primary/90">
+                        <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 3cf232e..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">
-                            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">
                     <Filter className="w-5 h-5 text-muted-foreground" />
-
-                    {/* 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 */}
+                    <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 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 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-card rounded-lg border shadow-md hidden md:block">
-                    <div className="overflow-x-auto">
-                        {error ? (
-                            <div className="p-6 text-destructive">{`Erro ao carregar pacientes: ${error}`}</div>
-                        ) : loading ? (
-                            <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]">
-                                <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">
-                                                {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 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 dark:text-purple-300 dark:bg-purple-300/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">
-                                                    <DropdownMenu>
-                                                        <DropdownMenuTrigger asChild>
-                                                            <div className="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-destructive" 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-border">
-                        <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-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"
-                            >
+
+                            {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-destructive hover:bg-destructive/90"
-                            >
-                                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-muted-foreground">
-                                        <Loader2 className="w-6 h-6 animate-spin mx-auto text-primary my-4" />
-                                        Carregando...
-                                    </div>
-                                ) : patientDetails?.error ? (
-                                    <div className="text-destructive 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>