From c1471ea4faa899645f1aaa543d62161cbb7e5510 Mon Sep 17 00:00:00 2001
From: M-Gabrielly <maria.gabrielly221106@gmail.com>
Date: Thu, 30 Oct 2025 18:26:01 -0300
Subject: [PATCH 1/2] fix: fix of hovers

---
 .../app/(main-routes)/dashboard/page.tsx      |  6 +--
 susconecta/app/paciente/page.tsx              | 20 +++++++---
 susconecta/app/profissional/page.tsx          | 38 +++++++++----------
 susconecta/components/dashboard/header.tsx    |  2 +-
 susconecta/components/simple-theme-toggle.tsx |  2 +-
 susconecta/components/ui/sidebar.tsx          |  2 +-
 6 files changed, 39 insertions(+), 31 deletions(-)

diff --git a/susconecta/app/(main-routes)/dashboard/page.tsx b/susconecta/app/(main-routes)/dashboard/page.tsx
index 1ec2c13..5d6bf2d 100644
--- a/susconecta/app/(main-routes)/dashboard/page.tsx
+++ b/susconecta/app/(main-routes)/dashboard/page.tsx
@@ -283,15 +283,15 @@ export default function DashboardPage() {
             <Plus className="h-4 w-4" />
             Novo Paciente
           </Button>
-          <Button onClick={() => router.push('/agenda')} variant="outline" className="gap-2 hover:bg-primary/10 hover:text-primary dark:hover:bg-accent dark:hover:text-accent-foreground">
+          <Button onClick={() => router.push('/agenda')} variant="outline" className="gap-2 hover:!bg-primary hover:!text-white transition-colors">
             <Calendar className="h-4 w-4" />
             Novo Agendamento
           </Button>
-          <Button onClick={() => setShowDoctorForm(true)} variant="outline" className="gap-2 hover:bg-primary/10 hover:text-primary dark:hover:bg-accent dark:hover:text-accent-foreground">
+          <Button onClick={() => setShowDoctorForm(true)} variant="outline" className="gap-2 hover:!bg-primary hover:!text-white transition-colors">
             <Stethoscope className="h-4 w-4" />
             Novo Médico
           </Button>
-          <Button onClick={() => router.push('/dashboard/relatorios')} variant="outline" className="gap-2 hover:bg-primary/10 hover:text-primary dark:hover:bg-accent dark:hover:text-accent-foreground">
+          <Button onClick={() => router.push('/dashboard/relatorios')} variant="outline" className="gap-2 hover:!bg-primary hover:!text-white transition-colors">
             <FileText className="h-4 w-4" />
             Ver Relatórios
           </Button>
diff --git a/susconecta/app/paciente/page.tsx b/susconecta/app/paciente/page.tsx
index eb631df..18ca84e 100644
--- a/susconecta/app/paciente/page.tsx
+++ b/susconecta/app/paciente/page.tsx
@@ -982,7 +982,7 @@ export default function PacientePage() {
           <div className="flex items-center gap-2">
             <User className="h-6 w-6 text-primary" aria-hidden />
             <span className="font-bold">Portal do Paciente</span>
-            <Button asChild variant="outline" className="ml-4">
+            <Button asChild variant="outline" className="ml-4 hover:!bg-primary hover:!text-white hover:!border-primary transition-colors">
               <Link href="/">
                 <Home className="h-4 w-4 mr-1" /> Início
               </Link>
@@ -990,7 +990,15 @@ export default function PacientePage() {
           </div>
           <div className="flex items-center gap-2">
             <SimpleThemeToggle />
-            <Button onClick={handleLogout} variant="destructive" aria-label={strings.sair} disabled={loading} className="ml-2"><LogOut className="h-4 w-4" /> {strings.sair}</Button>
+            <Button 
+              onClick={handleLogout} 
+              variant="outline" 
+              aria-label={strings.sair} 
+              disabled={loading} 
+              className="ml-2 bg-background hover:!bg-destructive hover:!text-white hover:!border-destructive transition-colors"
+            >
+              <LogOut className="h-4 w-4" /> {strings.sair}
+            </Button>
           </div>
         </header>
 
@@ -1001,7 +1009,7 @@ export default function PacientePage() {
               variant={tab==='dashboard'?'secondary':'ghost'}
               aria-current={tab==='dashboard'}
               onClick={()=>setTab('dashboard')}
-              className={`justify-start ${tab==='dashboard' ? 'bg-primary/10 text-primary' : ''}`}
+              className={`justify-start hover:!bg-primary hover:!text-white transition-colors ${tab==='dashboard' ? 'bg-primary/10 text-primary' : ''}`}
             >
               <Calendar className="mr-2 h-5 w-5" />{strings.dashboard}
             </Button>
@@ -1009,7 +1017,7 @@ export default function PacientePage() {
               variant={tab==='consultas'?'secondary':'ghost'}
               aria-current={tab==='consultas'}
               onClick={()=>setTab('consultas')}
-              className={`justify-start ${tab==='consultas' ? 'bg-primary/10 text-primary' : ''}`}
+              className={`justify-start hover:!bg-primary hover:!text-white transition-colors ${tab==='consultas' ? 'bg-primary/10 text-primary' : ''}`}
             >
               <Calendar className="mr-2 h-5 w-5" />{strings.consultas}
             </Button>
@@ -1017,7 +1025,7 @@ export default function PacientePage() {
               variant={tab==='exames'?'secondary':'ghost'}
               aria-current={tab==='exames'}
               onClick={()=>setTab('exames')}
-              className={`justify-start ${tab==='exames' ? 'bg-primary/10 text-primary' : ''}`}
+              className={`justify-start hover:!bg-primary hover:!text-white transition-colors ${tab==='exames' ? 'bg-primary/10 text-primary' : ''}`}
             >
               <FileText className="mr-2 h-5 w-5" />{strings.exames}
             </Button>
@@ -1026,7 +1034,7 @@ export default function PacientePage() {
               variant={tab==='perfil'?'secondary':'ghost'}
               aria-current={tab==='perfil'}
               onClick={()=>setTab('perfil')}
-              className={`justify-start ${tab==='perfil' ? 'bg-primary/10 text-primary' : ''}`}
+              className={`justify-start hover:!bg-primary hover:!text-white transition-colors ${tab==='perfil' ? 'bg-primary/10 text-primary' : ''}`}
             >
               <UserCog className="mr-2 h-5 w-5" />{strings.perfil}
             </Button>
diff --git a/susconecta/app/profissional/page.tsx b/susconecta/app/profissional/page.tsx
index 5efa5be..74794b5 100644
--- a/susconecta/app/profissional/page.tsx
+++ b/susconecta/app/profissional/page.tsx
@@ -690,9 +690,9 @@ const ProfissionalPage = () => {
               variant="outline"
               size="sm"
               onClick={() => navigateDate('prev')}
-              className="p-2 hover:bg-blue-50 cursor-pointer dark:hover:bg-primary dark:hover:text-primary-foreground"
+              className="p-2 hover:!bg-primary hover:!text-white cursor-pointer transition-colors"
             >
-              <ChevronLeft className="h-4 w-4 hover:!text-white" />
+              <ChevronLeft className="h-4 w-4" />
             </Button>
             <h3 className="text-lg font-medium text-foreground">
               {formatDate(currentCalendarDate)}
@@ -701,9 +701,9 @@ const ProfissionalPage = () => {
               variant="outline"
               size="sm"
               onClick={() => navigateDate('next')}
-              className="p-2 hover:bg-blue-50 cursor-pointer dark:hover:bg-primary dark:hover:text-primary-foreground"
+              className="p-2 hover:!bg-primary hover:!text-white cursor-pointer transition-colors"
             >
-              <ChevronRight className="h-4 w-4 hover:!text-white" />
+              <ChevronRight className="h-4 w-4" />
             </Button>
             
           </div>
@@ -900,7 +900,7 @@ const ProfissionalPage = () => {
             variant={selectedRange === 'todos' ? 'default' : 'outline'}
             size="sm"
             onClick={() => setSelectedRange('todos')}
-            className="hover:bg-primary/10 hover:text-primary"
+            className="hover:!bg-primary hover:!text-white transition-colors"
           >
             Todos
           </Button>
@@ -908,7 +908,7 @@ const ProfissionalPage = () => {
             variant={selectedRange === 'semana' ? 'default' : 'outline'}
             size="sm"
             onClick={() => setSelectedRange('semana')}
-            className="hover:bg-primary/10 hover:text-primary"
+            className="hover:!bg-primary hover:!text-white transition-colors"
           >
             Semana
           </Button>
@@ -916,7 +916,7 @@ const ProfissionalPage = () => {
             variant={selectedRange === 'mes' ? 'default' : 'outline'}
             size="sm"
             onClick={() => setSelectedRange('mes')}
-            className="hover:bg-primary/10 hover:text-primary"
+            className="hover:!bg-primary hover:!text-white transition-colors"
           >
             Mês
           </Button>
@@ -1077,7 +1077,7 @@ const ProfissionalPage = () => {
             <Button size="sm" onClick={doSearch} disabled={searching}>
               Buscar
             </Button>
-            <Button size="sm" variant="ghost" onClick={handleClear}>
+            <Button size="sm" variant="ghost" onClick={handleClear} className="hover:!bg-primary hover:!text-white transition-colors">
               Limpar
             </Button>
           </div>
@@ -1383,7 +1383,7 @@ const ProfissionalPage = () => {
                                 setIsViewing(true);
                               }
                             }}
-                            className="flex items-center gap-1 hover:bg-blue-50 dark:hover:bg-accent dark:hover:text-accent-foreground"
+                            className="flex items-center gap-1 hover:!bg-primary hover:!text-white transition-colors"
                           >
                             <Eye className="w-4 h-4" />
                             Ver Laudo
@@ -2457,7 +2457,7 @@ const ProfissionalPage = () => {
                 Este editor permite escrever relatórios de forma livre, com formatação de texto rica.
               </div>
               <div className="flex gap-2">
-                <Button variant="outline" onClick={onClose} className="hover:bg-blue-50 dark:hover:bg-accent dark:hover:text-accent-foreground">
+                <Button variant="outline" onClick={onClose} className="hover:!bg-primary hover:!text-white transition-colors">
                   Cancelar
                 </Button>
                 {/* botão 'Salvar Rascunho' removido por não ser utilizado */}
@@ -2656,7 +2656,7 @@ const ProfissionalPage = () => {
             <Button onClick={handleSaveProfile} className="flex items-center gap-2">
               Salvar
             </Button>
-            <Button variant="outline" onClick={handleCancelEdit} className="hover:bg-blue-50 dark:hover:bg-accent dark:hover:text-accent-foreground">
+            <Button variant="outline" onClick={handleCancelEdit} className="hover:!bg-primary hover:!text-white transition-colors">
               Cancelar
             </Button>
           </div>
@@ -2779,7 +2779,7 @@ const ProfissionalPage = () => {
           </Avatar>
           {isEditingProfile && (
             <div className="space-y-2">
-              <Button variant="outline" size="sm" className="hover:bg-primary/10 hover:text-primary dark:hover:bg-accent dark:hover:text-accent-foreground">
+              <Button variant="outline" size="sm" className="hover:!bg-primary hover:!text-white transition-colors">
                 Alterar Foto
               </Button>
               <p className="text-xs text-muted-foreground">
@@ -2875,7 +2875,7 @@ const ProfissionalPage = () => {
           <nav className="bg-card shadow-md rounded-lg border border-border p-3 space-y-1">
             <Button 
               variant={activeSection === 'calendario' ? 'default' : 'ghost'} 
-              className="w-full justify-start transition-colors hover:bg-primary hover:text-white cursor-pointer"
+              className="w-full justify-start transition-colors hover:!bg-primary hover:!text-white cursor-pointer"
               onClick={() => setActiveSection('calendario')}
             >
               <CalendarIcon className="mr-2 h-4 w-4" />
@@ -2883,7 +2883,7 @@ const ProfissionalPage = () => {
             </Button>
             <Button 
               variant={activeSection === 'pacientes' ? 'default' : 'ghost'} 
-              className="w-full justify-start transition-colors hover:bg-primary hover:text-white cursor-pointer"
+              className="w-full justify-start transition-colors hover:!bg-primary hover:!text-white cursor-pointer"
               onClick={() => setActiveSection('pacientes')}
             >
               <Users className="mr-2 h-4 w-4" />
@@ -2891,7 +2891,7 @@ const ProfissionalPage = () => {
             </Button>
             <Button 
               variant={activeSection === 'laudos' ? 'default' : 'ghost'} 
-              className="w-full justify-start transition-colors hover:bg-primary hover:text-white cursor-pointer"
+              className="w-full justify-start transition-colors hover:!bg-primary hover:!text-white cursor-pointer"
               onClick={() => setActiveSection('laudos')}
             >
               <FileText className="mr-2 h-4 w-4" />
@@ -2899,7 +2899,7 @@ const ProfissionalPage = () => {
             </Button>
             <Button 
               variant={activeSection === 'comunicacao' ? 'default' : 'ghost'} 
-              className="w-full justify-start transition-colors hover:bg-primary hover:text-white cursor-pointer"
+              className="w-full justify-start transition-colors hover:!bg-primary hover:!text-white cursor-pointer"
               onClick={() => setActiveSection('comunicacao')}
             >
               <MessageSquare className="mr-2 h-4 w-4" />
@@ -2907,7 +2907,7 @@ const ProfissionalPage = () => {
             </Button>
             <Button 
               variant={activeSection === 'perfil' ? 'default' : 'ghost'} 
-              className="w-full justify-start transition-colors hover:bg-primary hover:text-white cursor-pointer"
+              className="w-full justify-start transition-colors hover:!bg-primary hover:!text-white cursor-pointer"
               onClick={() => setActiveSection('perfil')}
             >
               <Settings className="mr-2 h-4 w-4" />
@@ -2957,7 +2957,7 @@ const ProfissionalPage = () => {
                   <Button
                     onClick={() => setShowPopup(false)}
                     variant="outline"
-                    className="flex-1 hover:bg-blue-50 dark:hover:bg-accent dark:hover:text-accent-foreground"
+                    className="flex-1 hover:!bg-primary hover:!text-white transition-colors"
                   >
                     Cancelar
                   </Button>
@@ -3072,7 +3072,7 @@ const ProfissionalPage = () => {
             <Button
               onClick={() => setShowActionModal(false)}
               variant="outline"
-              className="w-full mt-2 hover:bg-blue-50 dark:hover:bg-accent dark:hover:text-accent-foreground"
+              className="w-full mt-2 hover:!bg-primary hover:!text-white transition-colors"
             >
               Cancelar
             </Button>
diff --git a/susconecta/components/dashboard/header.tsx b/susconecta/components/dashboard/header.tsx
index 002d16e..9963776 100644
--- a/susconecta/components/dashboard/header.tsx
+++ b/susconecta/components/dashboard/header.tsx
@@ -43,7 +43,7 @@ export function PagesHeader({ title = "", subtitle = "" }: { title?: string, sub
       </div>
 
       <div className="flex items-center space-x-4">
-        <Button variant="ghost" size="icon">
+        <Button variant="ghost" size="icon" className="hover:!bg-primary hover:!text-white transition-colors">
           <Bell className="h-4 w-4" />
         </Button>
 
diff --git a/susconecta/components/simple-theme-toggle.tsx b/susconecta/components/simple-theme-toggle.tsx
index c322131..3f96dcd 100644
--- a/susconecta/components/simple-theme-toggle.tsx
+++ b/susconecta/components/simple-theme-toggle.tsx
@@ -17,7 +17,7 @@ export function SimpleThemeToggle() {
       variant="outline" 
       size="icon" 
       onClick={toggleTheme}
-      className="hover:text-muted-foreground cursor-pointer !shadow-sm !shadow-black/10 !border-2 !border-black dark:!shadow-none dark:!border-border"
+      className="hover:!bg-primary hover:!text-white hover:!border-primary cursor-pointer !shadow-sm !shadow-black/10 !border-2 !border-black dark:!shadow-none dark:!border-border transition-colors"
     >
       <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
       <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
diff --git a/susconecta/components/ui/sidebar.tsx b/susconecta/components/ui/sidebar.tsx
index 116d4d3..4409ae3 100644
--- a/susconecta/components/ui/sidebar.tsx
+++ b/susconecta/components/ui/sidebar.tsx
@@ -266,7 +266,7 @@ function SidebarTrigger({
       data-slot="sidebar-trigger"
       variant="ghost"
       size="icon"
-      className={cn("size-7", className)}
+      className={cn("size-7 hover:!bg-primary hover:!text-white transition-colors", className)}
       onClick={(event) => {
         onClick?.(event)
         toggleSidebar()

From d3c897d95ad3fa802382f7aefdfaf30854db7566 Mon Sep 17 00:00:00 2001
From: M-Gabrielly <maria.gabrielly221106@gmail.com>
Date: Thu, 30 Oct 2025 22:57:26 -0300
Subject: [PATCH 2/2] fix: Redesign of the patient portal and add hovers

- placed hovers on the medical and administrator/manager/secretary pages
- Transformed "Scheduled Appointments" modal into a normal page section
- Reorganized flex layout for responsive grid [220px_1fr]
- Redesigned header with avatar, patient info, and rounded edges, now sticky
- Side menu revamped with rounded edges, sticky and responsive
- Appointment cards with gradients, smooth hovers, and responsive grid layout
- Unified visual standard with professional/doctor page
- Improvements: reduced icons, consistent spacing, smooth transitions
- Content remains centered without forced margins
- Responsiveness guaranteed for mobile, tablet, and desktop
---
 .../app/(main-routes)/calendar/page.tsx       |   4 +-
 .../app/(main-routes)/consultas/page.tsx      |  20 +-
 .../app/(main-routes)/dashboard/page.tsx      |   2 +-
 .../dashboard/relatorios/page.tsx             |  17 +-
 .../app/(main-routes)/doutores/page.tsx       |  20 +-
 .../app/(main-routes)/pacientes/page.tsx      |  22 +-
 susconecta/app/paciente/page.tsx              | 303 +++++++++---------
 .../app/resultados/ResultadosClient.tsx       |  35 +-
 susconecta/components/ui/dropdown-menu.tsx    |   2 +-
 9 files changed, 223 insertions(+), 202 deletions(-)

diff --git a/susconecta/app/(main-routes)/calendar/page.tsx b/susconecta/app/(main-routes)/calendar/page.tsx
index f1ce1b3..148bf33 100644
--- a/susconecta/app/(main-routes)/calendar/page.tsx
+++ b/susconecta/app/(main-routes)/calendar/page.tsx
@@ -147,7 +147,7 @@ export default function AgendamentoPage() {
               <div className="flex flex-row">
                 <Button
                   variant={"outline"}
-                  className="bg-muted hover:bg-muted/80 hover:text-foreground rounded-l-[100px] rounded-r-[0px]"
+                  className="bg-muted hover:!bg-primary hover:!text-white transition-colors rounded-l-[100px] rounded-r-[0px]"
                   onClick={() => setActiveTab("calendar")}
                 >
                   Calendário
@@ -155,7 +155,7 @@ export default function AgendamentoPage() {
 
                 <Button
                   variant={"outline"}
-                  className="bg-muted hover:bg-muted/80 hover:text-foreground rounded-r-[100px] rounded-l-[0px]"
+                  className="bg-muted hover:!bg-primary hover:!text-white transition-colors rounded-r-[100px] rounded-l-[0px]"
                   onClick={() => setActiveTab("espera")}
                 >
                   Lista de espera
diff --git a/susconecta/app/(main-routes)/consultas/page.tsx b/susconecta/app/(main-routes)/consultas/page.tsx
index f351ff5..889b622 100644
--- a/susconecta/app/(main-routes)/consultas/page.tsx
+++ b/susconecta/app/(main-routes)/consultas/page.tsx
@@ -526,12 +526,12 @@ export default function ConsultasPage() {
           ) : (
             <Table>
               <TableHeader>
-                <TableRow>
-                  <TableHead>Paciente</TableHead>
-                  <TableHead>Médico</TableHead>
-                  <TableHead>Status</TableHead>
-                  <TableHead>Data e Hora</TableHead>
-                  <TableHead>Ações</TableHead>
+                <TableRow className="bg-primary hover:bg-primary">
+                  <TableHead className="text-primary-foreground">Paciente</TableHead>
+                  <TableHead className="text-primary-foreground">Médico</TableHead>
+                  <TableHead className="text-primary-foreground">Status</TableHead>
+                  <TableHead className="text-primary-foreground">Data e Hora</TableHead>
+                  <TableHead className="text-primary-foreground">Ações</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
@@ -564,7 +564,7 @@ export default function ConsultasPage() {
                       <TableCell>
                         <DropdownMenu>
                           <DropdownMenuTrigger asChild>
-                            <button className="h-8 w-8 p-0 flex items-center justify-center rounded-md hover:bg-accent">
+                            <button className="h-8 w-8 p-0 flex items-center justify-center rounded-md hover:bg-primary hover:text-white transition-colors">
                               <span className="sr-only">Abrir menu</span>
                               <MoreHorizontal className="h-4 w-4" />
                             </button>
@@ -601,7 +601,7 @@ export default function ConsultasPage() {
           <select
             value={itemsPerPage}
             onChange={(e) => setItemsPerPage(Number(e.target.value))}
-            className="h-9 rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm focus:outline-none focus:ring-1 focus:ring-ring"
+            className="h-9 rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary hover:border-primary transition-colors cursor-pointer"
           >
             <option value={10}>10</option>
             <option value={15}>15</option>
@@ -619,6 +619,7 @@ export default function ConsultasPage() {
             size="sm"
             onClick={() => setCurrentPage(1)}
             disabled={currentPage === 1}
+            className="hover:!bg-primary hover:!text-white transition-colors"
           >
             Primeira
           </Button>
@@ -627,6 +628,7 @@ export default function ConsultasPage() {
             size="sm"
             onClick={() => setCurrentPage((prev) => Math.max(1, prev - 1))}
             disabled={currentPage === 1}
+            className="hover:!bg-primary hover:!text-white transition-colors"
           >
             Anterior
           </Button>
@@ -638,6 +640,7 @@ export default function ConsultasPage() {
             size="sm"
             onClick={() => setCurrentPage((prev) => Math.min(totalPages, prev + 1))}
             disabled={currentPage === totalPages || totalPages === 0}
+            className="hover:!bg-primary hover:!text-white transition-colors"
           >
             Próxima
           </Button>
@@ -646,6 +649,7 @@ export default function ConsultasPage() {
             size="sm"
             onClick={() => setCurrentPage(totalPages)}
             disabled={currentPage === totalPages || totalPages === 0}
+            className="hover:!bg-primary hover:!text-white transition-colors"
           >
             Última
           </Button>
diff --git a/susconecta/app/(main-routes)/dashboard/page.tsx b/susconecta/app/(main-routes)/dashboard/page.tsx
index 5d6bf2d..1bd16a2 100644
--- a/susconecta/app/(main-routes)/dashboard/page.tsx
+++ b/susconecta/app/(main-routes)/dashboard/page.tsx
@@ -340,7 +340,7 @@ export default function DashboardPage() {
                   <p className="text-xs text-muted-foreground">{report.exam || 'Sem descrição'}</p>
                 </div>
               ))}
-              <Button onClick={() => router.push('/dashboard/relatorios')} variant="ghost" className="w-full mt-2" size="sm">
+              <Button onClick={() => router.push('/dashboard/relatorios')} variant="ghost" className="w-full mt-2 hover:!bg-primary hover:!text-white transition-colors" size="sm">
                 Ver Todos
               </Button>
             </div>
diff --git a/susconecta/app/(main-routes)/dashboard/relatorios/page.tsx b/susconecta/app/(main-routes)/dashboard/relatorios/page.tsx
index 65bdcaf..126fc8e 100644
--- a/susconecta/app/(main-routes)/dashboard/relatorios/page.tsx
+++ b/susconecta/app/(main-routes)/dashboard/relatorios/page.tsx
@@ -102,7 +102,7 @@ export default function RelatoriosPage() {
         <div className="bg-card border border-border rounded-lg shadow p-6">
           <div className="flex items-center justify-between mb-2">
             <h2 className="font-semibold text-lg text-foreground flex items-center gap-2"><BarChart2 className="w-5 h-5" /> Consultas por Período</h2>
-            <Button size="sm" variant="outline" className="hover:bg-primary/10 hover:text-primary dark:hover:bg-accent dark:hover:text-accent-foreground" onClick={() => exportPDF("Consultas por Período", "Resumo das consultas realizadas por período.")}> <FileDown className="w-4 h-4 mr-1" /> Exportar PDF</Button>
+            <Button size="sm" variant="outline" className="hover:!bg-primary hover:!text-white transition-colors" onClick={() => exportPDF("Consultas por Período", "Resumo das consultas realizadas por período.")}> <FileDown className="w-4 h-4 mr-1" /> Exportar PDF</Button>
           </div>
           <ResponsiveContainer width="100%" height={220}>
             <BarChart data={consultasPorPeriodo}>
@@ -119,7 +119,7 @@ export default function RelatoriosPage() {
         <div className="bg-card border border-border rounded-lg shadow p-6">
           <div className="flex items-center justify-between mb-2">
             <h2 className="font-semibold text-lg text-foreground flex items-center gap-2"><DollarSign className="w-5 h-5" /> Faturamento Mensal</h2>
-            <Button size="sm" variant="outline" className="hover:bg-primary/10 hover:text-primary dark:hover:bg-accent dark:hover:text-accent-foreground" onClick={() => exportPDF("Faturamento Mensal", "Resumo do faturamento mensal.")}> <FileDown className="w-4 h-4 mr-1" /> Exportar PDF</Button>
+            <Button size="sm" variant="outline" className="hover:!bg-primary hover:!text-white transition-colors" onClick={() => exportPDF("Faturamento Mensal", "Resumo do faturamento mensal.")}> <FileDown className="w-4 h-4 mr-1" /> Exportar PDF</Button>
           </div>
           <ResponsiveContainer width="100%" height={220}>
             <LineChart data={faturamentoMensal}>
@@ -138,7 +138,7 @@ export default function RelatoriosPage() {
         <div className="bg-card border border-border rounded-lg shadow p-6">
           <div className="flex items-center justify-between mb-2">
             <h2 className="font-semibold text-lg text-foreground flex items-center gap-2"><UserCheck className="w-5 h-5" /> Taxa de No-show</h2>
-            <Button size="sm" variant="outline" className="hover:bg-primary/10 hover:text-primary dark:hover:bg-accent dark:hover:text-accent-foreground" onClick={() => exportPDF("Taxa de No-show", "Resumo da taxa de no-show.")}> <FileDown className="w-4 h-4 mr-1" /> Exportar PDF</Button>
+            <Button size="sm" variant="outline" className="hover:!bg-primary hover:!text-white transition-colors" onClick={() => exportPDF("Taxa de No-show", "Resumo da taxa de no-show.")}> <FileDown className="w-4 h-4 mr-1" /> Exportar PDF</Button>
           </div>
           <ResponsiveContainer width="100%" height={220}>
             <LineChart data={taxaNoShow}>
@@ -155,7 +155,7 @@ export default function RelatoriosPage() {
         <div className="bg-card border border-border rounded-lg shadow p-6">
           <div className="flex items-center justify-between mb-2">
             <h2 className="font-semibold text-lg text-foreground flex items-center gap-2"><ThumbsUp className="w-5 h-5" /> Satisfação dos Pacientes</h2>
-            <Button size="sm" variant="outline" className="hover:bg-primary/10 hover:text-primary dark:hover:bg-accent dark:hover:text-accent-foreground" onClick={() => exportPDF("Satisfação dos Pacientes", "Resumo dos indicadores de satisfação.")}> <FileDown className="w-4 h-4 mr-1" /> Exportar PDF</Button>
+            <Button size="sm" variant="outline" className="hover:!bg-primary hover:!text-white transition-colors" onClick={() => exportPDF("Satisfação dos Pacientes", "Resumo dos indicadores de satisfação.")}> <FileDown className="w-4 h-4 mr-1" /> Exportar PDF</Button>
           </div>
           <div className="flex flex-col items-center justify-center h-[220px]">
             <span className="text-5xl font-bold text-green-500">92%</span>
@@ -169,7 +169,7 @@ export default function RelatoriosPage() {
         <div className="bg-card border border-border rounded-lg shadow p-6">
           <div className="flex items-center justify-between mb-2">
             <h2 className="font-semibold text-lg text-foreground flex items-center gap-2"><Users className="w-5 h-5" /> Pacientes Mais Atendidos</h2>
-            <Button size="sm" variant="outline" className="hover:bg-primary/10 hover:text-primary dark:hover:bg-accent dark:hover:text-accent-foreground" onClick={() => exportPDF("Pacientes Mais Atendidos", "Lista dos pacientes mais atendidos.")}> <FileDown className="w-4 h-4 mr-1" /> Exportar PDF</Button>
+            <Button size="sm" variant="outline" className="hover:!bg-primary hover:!text-white transition-colors" onClick={() => exportPDF("Pacientes Mais Atendidos", "Lista dos pacientes mais atendidos.")}> <FileDown className="w-4 h-4 mr-1" /> Exportar PDF</Button>
           </div>
           <table className="w-full text-sm mt-4">
             <thead>
@@ -193,7 +193,7 @@ export default function RelatoriosPage() {
         <div className="bg-card border border-border rounded-lg shadow p-6">
           <div className="flex items-center justify-between mb-2">
             <h2 className="font-semibold text-lg text-foreground flex items-center gap-2"><Briefcase className="w-5 h-5" /> Médicos Mais Produtivos</h2>
-            <Button size="sm" variant="outline" className="hover:bg-primary/10 hover:text-primary dark:hover:bg-accent dark:hover:text-accent-foreground" onClick={() => exportPDF("Médicos Mais Produtivos", "Lista dos médicos mais produtivos.")}> <FileDown className="w-4 h-4 mr-1" /> Exportar PDF</Button>
+            <Button size="sm" variant="outline" className="hover:!bg-primary hover:!text-white transition-colors" onClick={() => exportPDF("Médicos Mais Produtivos", "Lista dos médicos mais produtivos.")}> <FileDown className="w-4 h-4 mr-1" /> Exportar PDF</Button>
           </div>
           <table className="w-full text-sm mt-4">
             <thead>
@@ -219,7 +219,7 @@ export default function RelatoriosPage() {
         <div className="bg-card border border-border rounded-lg shadow p-6">
           <div className="flex items-center justify-between mb-2">
             <h2 className="font-semibold text-lg text-foreground flex items-center gap-2"><DollarSign className="w-5 h-5" /> Análise de Convênios</h2>
-            <Button size="sm" variant="outline" className="hover:bg-primary/10 hover:text-primary dark:hover:bg-accent dark:hover:text-accent-foreground" onClick={() => exportPDF("Análise de Convênios", "Resumo da análise de convênios.")}> <FileDown className="w-4 h-4 mr-1" /> Exportar PDF</Button>
+            <Button size="sm" variant="outline" className="hover:!bg-primary hover:!text-white transition-colors" onClick={() => exportPDF("Análise de Convênios", "Resumo da análise de convênios.")}> <FileDown className="w-4 h-4 mr-1" /> Exportar PDF</Button>
           </div>
           <ResponsiveContainer width="100%" height={220}>
             <PieChart>
@@ -238,7 +238,7 @@ export default function RelatoriosPage() {
         <div className="bg-card border border-border rounded-lg shadow p-6">
           <div className="flex items-center justify-between mb-2">
             <h2 className="font-semibold text-lg text-foreground flex items-center gap-2"><TrendingUp className="w-5 h-5" /> Performance por Médico</h2>
-            <Button size="sm" variant="outline" className="hover:bg-primary/10 hover:text-primary dark:hover:bg-accent dark:hover:text-accent-foreground" onClick={() => exportPDF("Performance por Médico", "Resumo da performance por médico.")}> <FileDown className="w-4 h-4 mr-1" /> Exportar PDF</Button>
+            <Button size="sm" variant="outline" className="hover:!bg-primary hover:!text-white transition-colors" onClick={() => exportPDF("Performance por Médico", "Resumo da performance por médico.")}> <FileDown className="w-4 h-4 mr-1" /> Exportar PDF</Button>
           </div>
           <table className="w-full text-sm mt-4">
             <thead>
@@ -263,3 +263,4 @@ export default function RelatoriosPage() {
     </div>
   );
 }
+
diff --git a/susconecta/app/(main-routes)/doutores/page.tsx b/susconecta/app/(main-routes)/doutores/page.tsx
index 85a795e..3e958f7 100644
--- a/susconecta/app/(main-routes)/doutores/page.tsx
+++ b/susconecta/app/(main-routes)/doutores/page.tsx
@@ -483,12 +483,12 @@ export default function DoutoresPage() {
       <div className="border rounded-lg overflow-hidden">
         <Table>
           <TableHeader>
-            <TableRow>
-              <TableHead>Nome</TableHead>
-              <TableHead>Especialidade</TableHead>
-              <TableHead>CRM</TableHead>
-              <TableHead>Contato</TableHead>
-              <TableHead className="w-[100px]">Ações</TableHead>
+            <TableRow className="bg-primary hover:bg-primary">
+              <TableHead className="text-primary-foreground">Nome</TableHead>
+              <TableHead className="text-primary-foreground">Especialidade</TableHead>
+              <TableHead className="text-primary-foreground">CRM</TableHead>
+              <TableHead className="text-primary-foreground">Contato</TableHead>
+              <TableHead className="w-[100px] text-primary-foreground">Ações</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
@@ -515,7 +515,7 @@ export default function DoutoresPage() {
                   <TableCell>
                     <DropdownMenu>
                       <DropdownMenuTrigger asChild>
-                        <button className="h-8 w-8 p-0 flex items-center justify-center rounded-md hover:bg-accent">
+                        <button className="h-8 w-8 p-0 flex items-center justify-center rounded-md hover:bg-primary hover:text-white transition-colors">
                           <MoreHorizontal className="h-4 w-4" />
                           <span className="sr-only">Abrir menu</span>
                         </button>
@@ -605,7 +605,7 @@ export default function DoutoresPage() {
           <select
             value={itemsPerPage}
             onChange={(e) => setItemsPerPage(Number(e.target.value))}
-            className="h-9 rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm focus:outline-none focus:ring-1 focus:ring-ring"
+            className="h-9 rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary hover:border-primary transition-colors cursor-pointer"
           >
             <option value={10}>10</option>
             <option value={15}>15</option>
@@ -623,6 +623,7 @@ export default function DoutoresPage() {
             size="sm"
             onClick={() => setCurrentPage(1)}
             disabled={currentPage === 1}
+            className="hover:!bg-primary hover:!text-white transition-colors"
           >
             Primeira
           </Button>
@@ -631,6 +632,7 @@ export default function DoutoresPage() {
             size="sm"
             onClick={() => setCurrentPage((prev) => Math.max(1, prev - 1))}
             disabled={currentPage === 1}
+            className="hover:!bg-primary hover:!text-white transition-colors"
           >
             Anterior
           </Button>
@@ -642,6 +644,7 @@ export default function DoutoresPage() {
             size="sm"
             onClick={() => setCurrentPage((prev) => Math.min(totalPages, prev + 1))}
             disabled={currentPage === totalPages || totalPages === 0}
+            className="hover:!bg-primary hover:!text-white transition-colors"
           >
             Próxima
           </Button>
@@ -650,6 +653,7 @@ export default function DoutoresPage() {
             size="sm"
             onClick={() => setCurrentPage(totalPages)}
             disabled={currentPage === totalPages || totalPages === 0}
+            className="hover:!bg-primary hover:!text-white transition-colors"
           >
             Última
           </Button>
diff --git a/susconecta/app/(main-routes)/pacientes/page.tsx b/susconecta/app/(main-routes)/pacientes/page.tsx
index fe592e9..df77a10 100644
--- a/susconecta/app/(main-routes)/pacientes/page.tsx
+++ b/susconecta/app/(main-routes)/pacientes/page.tsx
@@ -236,13 +236,13 @@ export default function PacientesPage() {
       <div className="border rounded-lg overflow-hidden">
         <Table>
           <TableHeader>
-            <TableRow>
-              <TableHead>Nome</TableHead>
-              <TableHead>CPF</TableHead>
-              <TableHead>Telefone</TableHead>
-              <TableHead>Cidade</TableHead>
-              <TableHead>Estado</TableHead>
-              <TableHead className="w-[100px]">Ações</TableHead>
+            <TableRow className="bg-primary hover:bg-primary">
+              <TableHead className="text-primary-foreground">Nome</TableHead>
+              <TableHead className="text-primary-foreground">CPF</TableHead>
+              <TableHead className="text-primary-foreground">Telefone</TableHead>
+              <TableHead className="text-primary-foreground">Cidade</TableHead>
+              <TableHead className="text-primary-foreground">Estado</TableHead>
+              <TableHead className="w-[100px] text-primary-foreground">Ações</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
@@ -257,7 +257,7 @@ export default function PacientesPage() {
                   <TableCell>
                     <DropdownMenu>
                       <DropdownMenuTrigger asChild>
-                        <button className="h-8 w-8 p-0 flex items-center justify-center rounded-md hover:bg-accent">
+                        <button className="h-8 w-8 p-0 flex items-center justify-center rounded-md hover:bg-primary hover:text-white transition-colors">
                           <span className="sr-only">Abrir menu</span>
                           <MoreHorizontal className="h-4 w-4" />
                         </button>
@@ -302,7 +302,7 @@ export default function PacientesPage() {
           <select
             value={itemsPerPage}
             onChange={(e) => setItemsPerPage(Number(e.target.value))}
-            className="h-9 rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm focus:outline-none focus:ring-1 focus:ring-ring"
+            className="h-9 rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary hover:border-primary transition-colors cursor-pointer"
           >
             <option value={10}>10</option>
             <option value={15}>15</option>
@@ -320,6 +320,7 @@ export default function PacientesPage() {
             size="sm"
             onClick={() => setCurrentPage(1)}
             disabled={currentPage === 1}
+            className="hover:!bg-primary hover:!text-white transition-colors"
           >
             Primeira
           </Button>
@@ -328,6 +329,7 @@ export default function PacientesPage() {
             size="sm"
             onClick={() => setCurrentPage((prev) => Math.max(1, prev - 1))}
             disabled={currentPage === 1}
+            className="hover:!bg-primary hover:!text-white transition-colors"
           >
             Anterior
           </Button>
@@ -339,6 +341,7 @@ export default function PacientesPage() {
             size="sm"
             onClick={() => setCurrentPage((prev) => Math.min(totalPages, prev + 1))}
             disabled={currentPage === totalPages || totalPages === 0}
+            className="hover:!bg-primary hover:!text-white transition-colors"
           >
             Próxima
           </Button>
@@ -347,6 +350,7 @@ export default function PacientesPage() {
             size="sm"
             onClick={() => setCurrentPage(totalPages)}
             disabled={currentPage === totalPages || totalPages === 0}
+            className="hover:!bg-primary hover:!text-white transition-colors"
           >
             Última
           </Button>
diff --git a/susconecta/app/paciente/page.tsx b/susconecta/app/paciente/page.tsx
index 18ca84e..0b98fa6 100644
--- a/susconecta/app/paciente/page.tsx
+++ b/susconecta/app/paciente/page.tsx
@@ -418,25 +418,21 @@ export default function PacientePage() {
     const [tipoConsulta, setTipoConsulta] = useState<'teleconsulta' | 'presencial'>('teleconsulta')
     const [especialidade, setEspecialidade] = useState('cardiologia')
     const [localizacao, setLocalizacao] = useState('')
-    const [mostrarAgendadas, setMostrarAgendadas] = useState(false)
     const hoverPrimaryClass = "transition duration-200 hover:bg-[#2563eb] hover:text-white focus-visible:ring-2 focus-visible:ring-[#2563eb]/60 active:scale-[0.97]"
     const activeToggleClass = "w-full transition duration-200 focus-visible:ring-2 focus-visible:ring-[#2563eb]/60 active:scale-[0.97] bg-[#2563eb] text-white hover:bg-[#2563eb] hover:text-white"
     const inactiveToggleClass = "w-full transition duration-200 bg-slate-50 text-[#2563eb] border border-[#2563eb]/30 hover:bg-slate-100 hover:text-[#2563eb] dark:bg-white/5 dark:text-white dark:hover:bg-white/10 dark:border-white/20"
     const hoverPrimaryIconClass = "rounded-xl bg-white text-[#1e293b] border border-black/10 shadow-[0_2px_8px_rgba(0,0,0,0.03)] transition duration-200 hover:bg-[#2563eb] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#2563eb] dark:bg-slate-800 dark:text-slate-100 dark:border-white/10 dark:shadow-none dark:hover:bg-[#2563eb] dark:hover:text-white"
-  const today = new Date(); today.setHours(0, 0, 0, 0);
-  const selectedDate = new Date(currentDate); selectedDate.setHours(0, 0, 0, 0);
-  const isSelectedDateToday = selectedDate.getTime() === today.getTime()
+    const today = new Date(); today.setHours(0, 0, 0, 0);
+    const selectedDate = new Date(currentDate); selectedDate.setHours(0, 0, 0, 0);
+    const isSelectedDateToday = selectedDate.getTime() === today.getTime()
 
-  
-
-    // Appointments state (loaded when "Ver consultas agendadas" is opened)
+    // Appointments state (loaded when component mounts)
     const [appointments, setAppointments] = useState<any[] | null>(null)
     const [loadingAppointments, setLoadingAppointments] = useState(false)
     const [appointmentsError, setAppointmentsError] = useState<string | null>(null)
 
     useEffect(() => {
       let mounted = true
-      if (!mostrarAgendadas) return
       if (!patientId) {
         setAppointmentsError('Paciente não identificado. Faça login novamente.')
         return
@@ -532,7 +528,7 @@ export default function PacientePage() {
 
       loadAppointments()
       return () => { mounted = false }
-    }, [mostrarAgendadas, patientId])
+    }, [patientId])
 
     // Monta a URL de resultados com os filtros atuais
     const buildResultadosHref = () => {
@@ -545,70 +541,63 @@ export default function PacientePage() {
       return `/resultados?${qs.toString()}`
     }
 
-    // derived lists for the "Ver consultas agendadas" dialog (computed after appointments state is declared)
+    // derived lists for the page (computed after appointments state is declared)
     const _dialogSource = (appointments !== null ? appointments : consultasFicticias)
     const _todaysAppointments = (_dialogSource || []).filter((c: any) => c.data === todayStr)
 
     return (
-      <section className="bg-card shadow-md rounded-lg border border-border p-6">
-        <div className="max-w-3xl mx-auto space-y-8">
-          <header className="text-center space-y-2">
-            <h2 className="text-3xl font-semibold text-foreground">Agende sua próxima consulta</h2>
-            <p className="text-muted-foreground">Escolha o formato ideal, selecione a especialidade e encontre o profissional perfeito para você.</p>
-          </header>
+      <div className="space-y-6">
+        {/* Hero Section */}
+        <section className="bg-gradient-to-br from-card to-card/95 shadow-lg rounded-2xl border border-primary/10 p-8">
+          <div className="max-w-3xl mx-auto space-y-8">
+            <header className="text-center space-y-4">
+              <h2 className="text-4xl font-bold text-foreground">Agende sua próxima consulta</h2>
+              <p className="text-lg text-muted-foreground leading-relaxed">Escolha o formato ideal, selecione a especialidade e encontre o profissional perfeito para você.</p>
+            </header>
 
-          <div className="space-y-6 rounded-lg border border-border bg-muted/40 p-6">
-            {/* Remover campos de especialidade e localização, deixar só o botão centralizado */}
-            <div className="flex justify-center">
-              <Button asChild className={`w-full md:w-40 ${hoverPrimaryClass}`}>
-                <Link href={buildResultadosHref()} prefetch={false}>
-                  Pesquisar
-                </Link>
-              </Button>
+            <div className="space-y-6 rounded-2xl border border-primary/15 bg-gradient-to-r from-primary/5 to-primary/10 p-8 shadow-sm">
+              <div className="flex justify-center">
+                <Button asChild className="w-full md:w-auto px-10 py-3 bg-primary text-white hover:!bg-primary/90 hover:!text-white transition-all duration-200 font-semibold text-base rounded-lg shadow-md hover:shadow-lg active:scale-95">
+                  <Link href={buildResultadosHref()} prefetch={false}>
+                    Pesquisar Médicos
+                  </Link>
+                </Button>
+              </div>
             </div>
           </div>
+        </section>
 
-          <div className="text-center">
-            <Button
-              variant="ghost"
-              size="sm"
-              className="transition duration-200 bg-[#2563eb] text-white border border-[#2563eb]/40 rounded-md shadow-[0_2px_6px_rgba(0,0,0,0.03)] hover:bg-[#1e40af] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#2563eb]/60 dark:bg-[#2563eb] dark:text-white dark:border-[#2563eb]/50 dark:hover:bg-[#1e40af]"
-              onClick={() => setMostrarAgendadas(true)}
-            >
-              Ver consultas agendadas
-            </Button>
-          </div>
-        </div>
+        {/* Consultas Agendadas Section */}
+        <section className="bg-card shadow-md rounded-lg border border-border p-6">
+          <div className="space-y-6">
+            <header>
+              <h2 className="text-3xl font-bold text-foreground mb-2">Suas Consultas Agendadas</h2>
+              <p className="text-muted-foreground">Gerencie suas consultas confirmadas, pendentes ou canceladas.</p>
+            </header>
 
-        <Dialog open={mostrarAgendadas} onOpenChange={open => setMostrarAgendadas(open)}>
-    <DialogContent className="max-w-3xl space-y-6 sm:max-h-[85vh] overflow-hidden flex flex-col">
-            <DialogHeader>
-              <DialogTitle className="text-2xl font-semibold text-foreground">Consultas agendadas</DialogTitle>
-              <DialogDescription>Gerencie suas consultas confirmadas, pendentes ou canceladas.</DialogDescription>
-            </DialogHeader>
-
-            <div className="flex flex-col gap-4 rounded-lg border border-border bg-muted/40 p-4 sm:flex-row sm:items-center sm:justify-between">
-              <div className="flex items-center gap-3">
+            {/* Date Navigation */}
+            <div className="flex flex-col gap-4 rounded-2xl border border-primary/20 bg-gradient-to-r from-primary/5 to-primary/10 p-6 sm:flex-row sm:items-center sm:justify-between shadow-sm">
+              <div className="flex items-center gap-2 sm:gap-3">
                 <Button
                   type="button"
                   variant="outline"
                   size="icon"
                   onClick={(e: any) => { e.stopPropagation(); e.preventDefault(); navigateDate('prev') }}
                   aria-label="Dia anterior"
-                  className={`group shadow-sm ${hoverPrimaryIconClass}`}
+                  className={`group shadow-sm hover:!bg-primary hover:!text-white hover:!border-primary transition-all ${hoverPrimaryIconClass}`}
                 >
-                  <ChevronLeft className="h-4 w-4 transition group-hover:text-white" />
+                  <ChevronLeft className="h-5 w-5 transition group-hover:text-white" />
                 </Button>
-                <span className="text-lg font-medium text-foreground">{formatDatePt(currentDate)}</span>
+                <span className="text-base sm:text-lg font-semibold text-foreground min-w-fit">{formatDatePt(currentDate)}</span>
                 <Button
                   type="button"
                   variant="outline"
                   size="icon"
                   onClick={(e: any) => { e.stopPropagation(); e.preventDefault(); navigateDate('next') }}
                   aria-label="Próximo dia"
-                  className={`group shadow-sm ${hoverPrimaryIconClass}`}
+                  className={`group shadow-sm hover:!bg-primary hover:!text-white hover:!border-primary transition-all ${hoverPrimaryIconClass}`}
                 >
-                  <ChevronRight className="h-4 w-4 transition group-hover:text-white" />
+                  <ChevronRight className="h-5 w-5 transition group-hover:text-white" />
                 </Button>
                 {isSelectedDateToday && (
                   <Button
@@ -617,88 +606,105 @@ export default function PacientePage() {
                     size="sm"
                     onClick={goToToday}
                     disabled
-                    className="border border-border text-foreground focus-visible:ring-2 focus-visible:ring-[#2563eb]/60 active:scale-[0.97] hover:bg-transparent hover:text-foreground disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-foreground"
+                    className="border border-border/50 text-foreground focus-visible:ring-2 focus-visible:ring-primary/40 active:scale-[0.97] hover:bg-primary/5 hover:text-foreground transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-foreground"
                   >
                     Hoje
                   </Button>
                 )}
               </div>
-              <div className="text-sm text-muted-foreground">
-                {`${_todaysAppointments.length} consulta${_todaysAppointments.length !== 1 ? 's' : ''} agendada${_todaysAppointments.length !== 1 ? 's' : ''}`}
+              <div className="text-sm font-medium text-muted-foreground bg-background/50 px-4 py-2 rounded-lg">
+                <span className="text-primary font-semibold">{_todaysAppointments.length}</span> consulta{_todaysAppointments.length !== 1 ? 's' : ''} agendada{_todaysAppointments.length !== 1 ? 's' : ''}
               </div>
             </div>
 
-            <div className="flex-1 flex flex-col gap-4 overflow-y-auto pr-1 sm:pr-2 pb-6">
-              {loadingAppointments && mostrarAgendadas ? (
+            {/* Appointments List */}
+            <div className="flex flex-col gap-6">
+              {loadingAppointments ? (
                 <div className="text-center py-10 text-muted-foreground">Carregando consultas...</div>
               ) : appointmentsError ? (
                 <div className="text-center py-10 text-red-600">{appointmentsError}</div>
               ) : (
-                // prefer appointments (client-loaded) when present; fallback to fictitious list
                 (() => {
                   const todays = _todaysAppointments
                   if (!todays || todays.length === 0) {
                     return (
-                      <div className="text-center py-10 text-muted-foreground">
-                        <Calendar className="h-12 w-12 mx-auto mb-4 opacity-60" />
-                        <p className="text-lg font-medium">Nenhuma consulta agendada para este dia</p>
-                        <p className="text-sm">Use a busca para marcar uma nova consulta.</p>
+                      <div className="flex flex-col items-center justify-center py-16 px-4">
+                        <div className="rounded-full bg-primary/10 p-4 mb-4">
+                          <Calendar className="h-10 w-10 text-primary" />
+                        </div>
+                        <p className="text-xl font-bold text-foreground mb-2">Nenhuma consulta agendada para este dia</p>
+                        <p className="text-base text-muted-foreground text-center max-w-sm">Use a busca acima para marcar uma nova consulta ou navegue entre os dias.</p>
                       </div>
                     )
                   }
                   return todays.map((consulta: any) => (
                     <div
                       key={consulta.id}
-                      className="rounded-xl border border-black/5 dark:border-white/10 bg-card shadow-[0_4px_12px_rgba(0,0,0,0.05)] dark:shadow-none p-5"
+                      className="rounded-2xl border border-primary/15 bg-card shadow-md hover:shadow-xl transition-all duration-300 p-6 hover:border-primary/30 hover:bg-card/95"
                     >
-                      <div className="grid gap-4 md:grid-cols-[minmax(0,2fr)_minmax(0,1fr)_minmax(0,1fr)_minmax(0,1.4fr)] items-start">
-                        <div className="flex items-start gap-3">
+                      <div className="grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-[1.5fr_0.8fr_1fr_1.2fr] items-start">
+                        {/* Doctor Info */}
+                        <div className="flex items-start gap-4 min-w-0">
                           <span
-                            className="mt-1 h-3 w-3 flex-shrink-0 rounded-full"
-                            style={{ backgroundColor: consulta.status === 'Confirmada' ? '#22c55e' : consulta.status === 'Pendente' ? '#fbbf24' : '#ef4444' }}
+                            className="mt-2 h-4 w-4 flex-shrink-0 rounded-full shadow-sm"
+                            style={{ backgroundColor: consulta.status === 'Confirmada' ? '#10b981' : consulta.status === 'Pendente' ? '#f59e0b' : '#ef4444' }}
+                            aria-hidden
                           />
-                          <div className="space-y-1">
-                            <div className="font-medium flex items-center gap-2 text-foreground">
-                              <Stethoscope className="h-4 w-4 text-muted-foreground" />
-                              {consulta.medico}
+                          <div className="space-y-3 min-w-0">
+                            <div className="font-bold flex items-center gap-2.5 text-foreground text-lg leading-tight">
+                              <Stethoscope className="h-5 w-5 text-primary flex-shrink-0" />
+                              <span className="truncate">{consulta.medico}</span>
                             </div>
-                            <p className="text-sm text-muted-foreground break-words">
-                              {consulta.especialidade} • {consulta.local}
+                            <p className="text-sm text-muted-foreground break-words leading-relaxed">
+                              <span className="font-medium text-foreground/70">{consulta.especialidade}</span>
+                              <span className="mx-1.5">•</span>
+                              <span>{consulta.local}</span>
                             </p>
                           </div>
                         </div>
 
-                        <div className="flex items-center gap-2 text-foreground">
-                          <Clock className="h-4 w-4 text-muted-foreground" />
-                          <span className="font-medium">{consulta.hora}</span>
+                        {/* Time */}
+                        <div className="flex items-center justify-start gap-2.5 text-foreground">
+                          <Clock className="h-5 w-5 text-primary flex-shrink-0" />
+                          <span className="font-bold text-lg">{consulta.hora}</span>
                         </div>
 
-                        <div className="flex items-center">
-                          <span className={`px-3 py-1 rounded-full text-sm font-medium text-white ${consulta.status === 'Confirmada' ? 'bg-green-600' : consulta.status === 'Pendente' ? 'bg-yellow-500' : 'bg-red-600'}`}>
+                        {/* Status Badge */}
+                        <div className="flex items-center justify-start">
+                          <span className={`px-4 py-2.5 rounded-full text-xs font-bold text-white shadow-md transition-all ${
+                            consulta.status === 'Confirmada' 
+                              ? 'bg-gradient-to-r from-emerald-500 to-emerald-600 shadow-emerald-500/20' 
+                              : consulta.status === 'Pendente' 
+                              ? 'bg-gradient-to-r from-amber-500 to-amber-600 shadow-amber-500/20' 
+                              : 'bg-gradient-to-r from-red-500 to-red-600 shadow-red-500/20'
+                          }`}>
                             {consulta.status}
                           </span>
                         </div>
 
-                        <div className="flex flex-wrap items-center justify-end gap-2">
+                        {/* Action Buttons */}
+                        <div className="flex flex-col sm:flex-row items-stretch gap-2">
                           <Button
                             type="button"
-                            variant="outline"
                             size="sm"
-                            className="border border-[#2563eb]/40 text-[#2563eb] hover:bg-transparent hover:text-[#2563eb] focus-visible:ring-2 focus-visible:ring-[#2563eb]/40 active:scale-[0.97]"
+                            className="border border-primary/30 text-primary bg-primary/5 hover:!bg-primary hover:!text-white hover:!border-primary transition-all duration-200 focus-visible:ring-2 focus-visible:ring-primary/40 active:scale-95 text-xs font-semibold flex-1"
                           >
                             Detalhes
                           </Button>
                           {consulta.status !== 'Cancelada' && (
-                            <Button type="button" variant="secondary" size="sm" className={hoverPrimaryClass}>
+                            <Button 
+                              type="button" 
+                              size="sm" 
+                              className="bg-primary/10 text-primary border border-primary/30 hover:!bg-primary hover:!text-white hover:!border-primary transition-all duration-200 focus-visible:ring-2 focus-visible:ring-primary/40 active:scale-95 text-xs font-semibold flex-1"
+                            >
                               Reagendar
                             </Button>
                           )}
                           {consulta.status !== 'Cancelada' && (
                             <Button
                               type="button"
-                              variant="destructive"
                               size="sm"
-                              className="transition duration-200 hover:bg-[#dc2626] focus-visible:ring-2 focus-visible:ring-[#dc2626]/60 active:scale-[0.97]"
+                              className="border border-destructive/30 text-destructive bg-destructive/5 hover:!bg-destructive hover:!text-white hover:!border-destructive transition-all duration-200 focus-visible:ring-2 focus-visible:ring-destructive/40 active:scale-95 text-xs font-semibold flex-1"
                             >
                               Cancelar
                             </Button>
@@ -710,15 +716,9 @@ export default function PacientePage() {
                 })()
               )}
             </div>
-
-            <DialogFooter className="justify-center border-t border-border pt-4 mt-2">
-              <Button variant="outline" onClick={() => { setMostrarAgendadas(false) }} className="w-full sm:w-auto">
-                Fechar
-              </Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-      </section>
+          </div>
+        </section>
+      </div>
     )
   }
 
@@ -797,8 +797,8 @@ export default function PacientePage() {
                   <div className="text-sm text-muted-foreground">Data: {new Date(r.report_date || r.created_at || Date.now()).toLocaleDateString('pt-BR')}</div>
                 </div>
                 <div className="flex gap-2 mt-2 md:mt-0">
-                  <Button variant="outline" className="hover:bg-primary/10 hover:text-primary dark:hover:bg-accent dark:hover:text-accent-foreground" onClick={async () => { setSelectedReport(r); }}>{strings.visualizarLaudo}</Button>
-                  <Button variant="secondary" onClick={async () => { try { await navigator.clipboard.writeText(JSON.stringify(r)); setToast({ type: 'success', msg: 'Laudo copiado.' }) } catch { setToast({ type: 'error', msg: 'Falha ao copiar.' }) } }}>{strings.compartilhar}</Button>
+                  <Button variant="outline" className="hover:!bg-primary hover:!text-white transition-colors" onClick={async () => { setSelectedReport(r); }}>{strings.visualizarLaudo}</Button>
+                  <Button variant="secondary" className="hover:!bg-primary hover:!text-white transition-colors" onClick={async () => { try { await navigator.clipboard.writeText(JSON.stringify(r)); setToast({ type: 'success', msg: 'Laudo copiado.' }) } catch { setToast({ type: 'error', msg: 'Falha ao copiar.' }) } }}>{strings.compartilhar}</Button>
                 </div>
               </div>
             ))
@@ -976,74 +976,84 @@ export default function PacientePage() {
   // Renderização principal
   return (
     <ProtectedRoute requiredUserType={["paciente"]}>
-      <div className="min-h-screen bg-background text-foreground flex flex-col">
-        {/* Header só com título e botão de sair */}
-        <header className="flex items-center justify-between px-4 py-2 border-b bg-card">
-          <div className="flex items-center gap-2">
-            <User className="h-6 w-6 text-primary" aria-hidden />
-            <span className="font-bold">Portal do Paciente</span>
-            <Button asChild variant="outline" className="ml-4 hover:!bg-primary hover:!text-white hover:!border-primary transition-colors">
+      <div className="container mx-auto px-4 py-8">
+        {/* Header com informações do paciente */}
+        <header className="sticky top-0 z-40 bg-card shadow-md rounded-lg border border-border p-4 mb-6 flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <Avatar className="h-12 w-12">
+              <AvatarFallback className="bg-primary text-white font-bold">{profileData.nome?.charAt(0) || 'P'}</AvatarFallback>
+            </Avatar>
+            <div className="flex flex-col min-w-0">
+              <span className="text-sm text-muted-foreground">Conta do paciente</span>
+              <span className="font-bold text-lg leading-none">{profileData.nome || 'Paciente'}</span>
+              <span className="text-sm text-muted-foreground truncate">{profileData.email || 'Email não disponível'}</span>
+            </div>
+          </div>
+          <div className="flex items-center gap-3">
+            <SimpleThemeToggle />
+            <Button asChild variant="outline" className="hover:!bg-primary hover:!text-white hover:!border-primary transition-colors">
               <Link href="/">
                 <Home className="h-4 w-4 mr-1" /> Início
               </Link>
             </Button>
-          </div>
-          <div className="flex items-center gap-2">
-            <SimpleThemeToggle />
             <Button 
               onClick={handleLogout} 
               variant="outline" 
               aria-label={strings.sair} 
               disabled={loading} 
-              className="ml-2 bg-background hover:!bg-destructive hover:!text-white hover:!border-destructive transition-colors"
+              className="text-destructive border-destructive hover:!bg-destructive hover:!text-white hover:!border-destructive transition-colors"
             >
-              <LogOut className="h-4 w-4" /> {strings.sair}
+              <LogOut className="h-4 w-4 mr-1" /> {strings.sair}
             </Button>
           </div>
         </header>
 
-        <div className="flex flex-1 min-h-0">
-          {/* Sidebar vertical */}
-          <nav aria-label="Navegação do dashboard" className="w-56 bg-card border-r flex flex-col py-6 px-2 gap-2">
-            <Button
-              variant={tab==='dashboard'?'secondary':'ghost'}
-              aria-current={tab==='dashboard'}
-              onClick={()=>setTab('dashboard')}
-              className={`justify-start hover:!bg-primary hover:!text-white transition-colors ${tab==='dashboard' ? 'bg-primary/10 text-primary' : ''}`}
-            >
-              <Calendar className="mr-2 h-5 w-5" />{strings.dashboard}
-            </Button>
-            <Button
-              variant={tab==='consultas'?'secondary':'ghost'}
-              aria-current={tab==='consultas'}
-              onClick={()=>setTab('consultas')}
-              className={`justify-start hover:!bg-primary hover:!text-white transition-colors ${tab==='consultas' ? 'bg-primary/10 text-primary' : ''}`}
-            >
-              <Calendar className="mr-2 h-5 w-5" />{strings.consultas}
-            </Button>
-            <Button
-              variant={tab==='exames'?'secondary':'ghost'}
-              aria-current={tab==='exames'}
-              onClick={()=>setTab('exames')}
-              className={`justify-start hover:!bg-primary hover:!text-white transition-colors ${tab==='exames' ? 'bg-primary/10 text-primary' : ''}`}
-            >
-              <FileText className="mr-2 h-5 w-5" />{strings.exames}
-            </Button>
-            
-            <Button
-              variant={tab==='perfil'?'secondary':'ghost'}
-              aria-current={tab==='perfil'}
-              onClick={()=>setTab('perfil')}
-              className={`justify-start hover:!bg-primary hover:!text-white transition-colors ${tab==='perfil' ? 'bg-primary/10 text-primary' : ''}`}
-            >
-              <UserCog className="mr-2 h-5 w-5" />{strings.perfil}
-            </Button>
-          </nav>
+        {/* Layout com sidebar e conteúdo */}
+        <div className="grid grid-cols-1 md:grid-cols-[220px_1fr] gap-6">
+          {/* Sidebar vertical - sticky */}
+          <aside className="sticky top-24 h-fit">
+            <nav aria-label="Navegação do dashboard" className="bg-card shadow-md rounded-lg border border-border p-3 space-y-1 z-30">
+              <Button
+                variant={tab==='dashboard'?'default':'ghost'}
+                aria-current={tab==='dashboard'}
+                onClick={()=>setTab('dashboard')}
+                className={`w-full justify-start transition-colors hover:!bg-primary hover:!text-white cursor-pointer`}
+              >
+                <Calendar className="mr-2 h-4 w-4" />{strings.dashboard}
+              </Button>
+              <Button
+                variant={tab==='consultas'?'default':'ghost'}
+                aria-current={tab==='consultas'}
+                onClick={()=>setTab('consultas')}
+                className={`w-full justify-start transition-colors hover:!bg-primary hover:!text-white cursor-pointer`}
+              >
+                <Calendar className="mr-2 h-4 w-4" />{strings.consultas}
+              </Button>
+              <Button
+                variant={tab==='exames'?'default':'ghost'}
+                aria-current={tab==='exames'}
+                onClick={()=>setTab('exames')}
+                className={`w-full justify-start transition-colors hover:!bg-primary hover:!text-white cursor-pointer`}
+              >
+                <FileText className="mr-2 h-4 w-4" />{strings.exames}
+              </Button>
+              
+              <Button
+                variant={tab==='perfil'?'default':'ghost'}
+                aria-current={tab==='perfil'}
+                onClick={()=>setTab('perfil')}
+                className={`w-full justify-start transition-colors hover:!bg-primary hover:!text-white cursor-pointer`}
+              >
+                <UserCog className="mr-2 h-4 w-4" />{strings.perfil}
+              </Button>
+            </nav>
+          </aside>
+          
           {/* Conteúdo principal */}
-          <div className="flex-1 min-w-0 p-4 max-w-4xl mx-auto w-full">
+          <main className="flex-1 w-full">
             {/* Toasts de feedback */}
             {toast && (
-              <div className={`fixed top-4 right-4 z-50 px-4 py-2 rounded shadow-lg ${toast.type==='success'?'bg-green-600 text-white':'bg-red-600 text-white'}`} role="alert">{toast.msg}</div>
+              <div className={`fixed top-24 right-4 z-50 px-4 py-2 rounded shadow-lg ${toast.type==='success'?'bg-green-600 text-white':'bg-red-600 text-white'}`} role="alert">{toast.msg}</div>
             )}
 
             {/* Loader global */}
@@ -1052,15 +1062,14 @@ export default function PacientePage() {
 
             {/* Conteúdo principal */}
             {!loading && !error && (
-              <main className="flex-1">
+              <>
                 {tab==='dashboard' && <DashboardCards />}
                 {tab==='consultas' && <Consultas />}
                 {tab==='exames' && <ExamesLaudos />}
-                
                 {tab==='perfil' && <Perfil />}
-              </main>
+              </>
             )}
-          </div>
+          </main>
         </div>
       </div>
     </ProtectedRoute>
diff --git a/susconecta/app/resultados/ResultadosClient.tsx b/susconecta/app/resultados/ResultadosClient.tsx
index 485a7e1..8c6391d 100644
--- a/susconecta/app/resultados/ResultadosClient.tsx
+++ b/susconecta/app/resultados/ResultadosClient.tsx
@@ -573,7 +573,7 @@ export default function ResultadosClient() {
             </div>
             <Button
               variant="outline"
-              className="rounded-full border-primary-foreground/30 bg-primary-foreground/10 text-primary-foreground hover:bg-primary-foreground hover:text-primary"
+              className="rounded-full border-primary-foreground/30 bg-primary-foreground/10 text-primary-foreground hover:!bg-primary-foreground hover:!text-primary transition-colors"
             >
               Ajustar filtros
             </Button>
@@ -617,7 +617,7 @@ export default function ResultadosClient() {
           </Toggle>
 
           <Select value={convenio} onValueChange={setConvenio}>
-            <SelectTrigger className="h-10 min-w-[180px] rounded-full border border-primary/40 bg-primary/10 text-primary transition duration-200 hover:bg-primary/10 hover:text-primary">
+            <SelectTrigger className="h-10 min-w-[180px] rounded-full border border-primary/40 bg-primary/10 text-primary transition duration-200 hover:!border-primary focus:ring-2 focus:ring-primary cursor-pointer">
               <SelectValue placeholder="Convênio" />
             </SelectTrigger>
             <SelectContent>
@@ -631,7 +631,7 @@ export default function ResultadosClient() {
           </Select>
 
           <Select value={bairro} onValueChange={setBairro}>
-            <SelectTrigger className="h-10 min-w-[160px] rounded-full border border-primary/40 bg-primary/10 text-primary transition duration-200 hover:bg-primary/10 hover:text-primary">
+            <SelectTrigger className="h-10 min-w-[160px] rounded-full border border-primary/40 bg-primary/10 text-primary transition duration-200 hover:!border-primary focus:ring-2 focus:ring-primary cursor-pointer">
               <SelectValue placeholder="Bairro" />
             </SelectTrigger>
             <SelectContent>
@@ -644,7 +644,7 @@ export default function ResultadosClient() {
 
           <Button
             variant="outline"
-            className="rounded-full border border-primary/40 bg-primary/10 text-primary transition duration-200 hover:bg-primary/10 hover:text-primary"
+            className="rounded-full border border-primary/40 bg-primary/10 text-primary hover:!bg-primary hover:!text-white transition-colors"
           >
             <Filter className="mr-2 h-4 w-4" />
             Mais filtros
@@ -652,7 +652,7 @@ export default function ResultadosClient() {
 
           <Button
             variant="ghost"
-            className="ml-auto rounded-full text-primary hover:bg-primary/10"
+            className="ml-auto rounded-full text-primary hover:!bg-primary hover:!text-white transition-colors"
             onClick={() => router.back()}
           >
             Voltar
@@ -711,7 +711,7 @@ export default function ResultadosClient() {
                   </div>
                   <Button
                     variant="ghost"
-                    className="ml-auto h-fit rounded-full text-primary hover:bg-primary/10"
+                    className="ml-auto h-fit rounded-full text-primary hover:!bg-primary hover:!text-white transition-colors"
                     onClick={() => {
                       setMedicoSelecionado(medico)
                       setAbaDetalhe('experiencia')
@@ -782,12 +782,12 @@ export default function ResultadosClient() {
                   >
                     Agendar consulta
                   </Button>
-                  <Button variant="outline" className="h-11 rounded-full border-primary/40 bg-primary/10 text-primary transition duration-200 hover:bg-primary/10 hover:text-primary">
+                  <Button variant="outline" className="h-11 rounded-full border-primary/40 bg-primary/10 text-primary hover:!bg-primary hover:!text-white transition-colors">
                     Enviar mensagem
                   </Button>
                   <Button
                     variant="ghost"
-                    className="h-11 rounded-full text-primary hover:bg-primary/10"
+                    className="h-11 rounded-full text-primary hover:!bg-primary hover:!text-white transition-colors"
                     onClick={() => {
                       const willOpen = !agendasExpandida[id]
                       setAgendasExpandida(prev => ({ ...prev, [id]: !prev[id] }))
@@ -979,18 +979,17 @@ export default function ResultadosClient() {
         </Dialog>
         {/* Dialog: Mostrar mais horários (escolher data arbitrária) */}
         <Dialog open={!!moreTimesForDoctor} onOpenChange={(open) => { if (!open) { setMoreTimesForDoctor(null); setMoreTimesSlots([]); setMoreTimesException(null); } }}>
-          <DialogContent className="w-full max-w-2xl border border-border bg-card p-4">
-            <div className="flex items-center justify-between gap-4">
-              <DialogHeader>
-                <DialogTitle>Mais horários</DialogTitle>
-              </DialogHeader>
-              <div className="ml-auto flex items-center gap-2">
-                <input type="date" className="rounded-md border border-border px-3 py-2 text-sm" value={moreTimesDate} onChange={(e) => setMoreTimesDate(e.target.value)} />
-                <Button className="h-10" onClick={async () => { if (moreTimesForDoctor) await fetchSlotsForDate(moreTimesForDoctor, moreTimesDate) }}>Buscar horários</Button>
-              </div>
+          <DialogContent className="w-full max-w-2xl border border-border bg-card p-6">
+            <DialogHeader className="mb-4">
+              <DialogTitle>Mais horários</DialogTitle>
+            </DialogHeader>
+            
+            <div className="flex items-center gap-2 mb-4">
+              <input type="date" className="flex-1 rounded-md border border-border px-3 py-2 text-sm" value={moreTimesDate} onChange={(e) => setMoreTimesDate(e.target.value)} />
+              <Button className="h-10" onClick={async () => { if (moreTimesForDoctor) await fetchSlotsForDate(moreTimesForDoctor, moreTimesDate) }}>Buscar horários</Button>
             </div>
 
-            <div className="mt-4">
+            <div className="mt-2">
               {moreTimesLoading ? (
                 <div className="text-sm text-muted-foreground">Carregando horários...</div>
               ) : moreTimesException ? (
diff --git a/susconecta/components/ui/dropdown-menu.tsx b/susconecta/components/ui/dropdown-menu.tsx
index ec51e9c..b4aeee9 100644
--- a/susconecta/components/ui/dropdown-menu.tsx
+++ b/susconecta/components/ui/dropdown-menu.tsx
@@ -74,7 +74,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-primary focus:text-primary-foreground hover:bg-primary hover:text-primary-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 transition-colors",
         className
       )}
       {...props}