From db1774beda965e1ce08f0e1772200a3add4ac07a Mon Sep 17 00:00:00 2001
From: M-Gabrielly <maria.gabrielly221106@gmail.com>
Date: Thu, 13 Nov 2025 20:06:18 -0300
Subject: [PATCH] feat: add standardized select hover styles with blue-500

---
 .../app/(main-routes)/consultas/page.tsx      |  4 +--
 .../app/(main-routes)/doutores/page.tsx       | 10 +++---
 .../app/(main-routes)/pacientes/page.tsx      |  8 ++---
 susconecta/app/globals.css                    | 15 +++++++++
 susconecta/app/paciente/page.tsx              |  8 ++---
 susconecta/app/profissional/page.tsx          | 32 +++++++++----------
 .../components/features/dashboard/header.tsx  |  4 +--
 7 files changed, 48 insertions(+), 33 deletions(-)

diff --git a/susconecta/app/(main-routes)/consultas/page.tsx b/susconecta/app/(main-routes)/consultas/page.tsx
index fe97473..0b99c88 100644
--- a/susconecta/app/(main-routes)/consultas/page.tsx
+++ b/susconecta/app/(main-routes)/consultas/page.tsx
@@ -519,7 +519,7 @@ export default function ConsultasPage() {
         {/* Linha 2: Selects responsivos */}
         <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
           <Select onValueChange={(v) => { setSelectedStatus(String(v)); }}>
-            <SelectTrigger className="h-8 sm:h-9 text-xs sm:text-sm">
+            <SelectTrigger className="h-8 sm:h-9 text-xs sm:text-sm select-hover-blue">
               <SelectValue placeholder="Status" />
             </SelectTrigger>
             <SelectContent>
@@ -693,7 +693,7 @@ export default function ConsultasPage() {
           <select
             value={itemsPerPage}
             onChange={(e) => setItemsPerPage(Number(e.target.value))}
-            className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary hover:border-primary transition-colors cursor-pointer"
+            className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary select-hover-blue cursor-pointer"
           >
             <option value={10}>10</option>
             <option value={15}>15</option>
diff --git a/susconecta/app/(main-routes)/doutores/page.tsx b/susconecta/app/(main-routes)/doutores/page.tsx
index 2a52829..c0a1517 100644
--- a/susconecta/app/(main-routes)/doutores/page.tsx
+++ b/susconecta/app/(main-routes)/doutores/page.tsx
@@ -534,7 +534,7 @@ export default function DoutoresPage() {
             aria-label="Ordenar por"
             value={sortBy}
             onChange={(e) => setSortBy(e.target.value as any)}
-            className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary hover:border-primary transition-colors cursor-pointer"
+            className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary select-hover-blue cursor-pointer"
           >
             <option value="name_asc">Nome A–Z</option>
             <option value="name_desc">Nome Z–A</option>
@@ -546,7 +546,7 @@ export default function DoutoresPage() {
             aria-label="Filtrar por especialidade"
             value={specialtyFilter}
             onChange={(e) => setSpecialtyFilter(e.target.value)}
-            className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary hover:border-primary transition-colors cursor-pointer"
+            className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary select-hover-blue cursor-pointer"
           >
             <option value="">Todas espec.</option>
             {specialtyOptions.map((sp) => (
@@ -558,7 +558,7 @@ export default function DoutoresPage() {
             aria-label="Filtrar por estado"
             value={stateFilter}
             onChange={(e) => { setStateFilter(e.target.value); setCityFilter(""); }}
-            className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary hover:border-primary transition-colors cursor-pointer"
+            className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary select-hover-blue cursor-pointer"
           >
             <option value="">Todos UF</option>
             {stateOptions.map((uf) => (
@@ -570,7 +570,7 @@ export default function DoutoresPage() {
             aria-label="Filtrar por cidade"
             value={cityFilter}
             onChange={(e) => setCityFilter(e.target.value)}
-            className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary hover:border-primary transition-colors cursor-pointer"
+            className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary select-hover-blue cursor-pointer"
           >
             <option value="">Todas cidades</option>
             {cityOptions.map((c) => (
@@ -764,7 +764,7 @@ export default function DoutoresPage() {
           <select
             value={itemsPerPage}
             onChange={(e) => setItemsPerPage(Number(e.target.value))}
-            className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary hover:border-primary transition-colors cursor-pointer"
+            className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary select-hover-blue cursor-pointer"
           >
             <option value={10}>10</option>
             <option value={15}>15</option>
diff --git a/susconecta/app/(main-routes)/pacientes/page.tsx b/susconecta/app/(main-routes)/pacientes/page.tsx
index f983e68..bedc58d 100644
--- a/susconecta/app/(main-routes)/pacientes/page.tsx
+++ b/susconecta/app/(main-routes)/pacientes/page.tsx
@@ -297,7 +297,7 @@ export default function PacientesPage() {
             aria-label="Ordenar por"
             value={sortBy}
             onChange={(e) => setSortBy(e.target.value as any)}
-            className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary hover:border-primary transition-colors cursor-pointer"
+            className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary select-hover-blue cursor-pointer"
           >
             <option value="name_asc">A–Z</option>
             <option value="name_desc">Z–A</option>
@@ -313,7 +313,7 @@ export default function PacientesPage() {
               setStateFilter(e.target.value);
               setCityFilter("");
             }}
-            className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary hover:border-primary transition-colors cursor-pointer"
+            className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary select-hover-blue cursor-pointer"
           >
             <option value="">Estado</option>
             {stateOptions.map((uf) => (
@@ -326,7 +326,7 @@ export default function PacientesPage() {
             aria-label="Filtrar por cidade"
             value={cityFilter}
             onChange={(e) => setCityFilter(e.target.value)}
-            className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary hover:border-primary transition-colors cursor-pointer"
+            className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary select-hover-blue cursor-pointer"
           >
             <option value="">Cidade</option>
             {cityOptions.map((c) => (
@@ -470,7 +470,7 @@ export default function PacientesPage() {
           <select
             value={itemsPerPage}
             onChange={(e) => setItemsPerPage(Number(e.target.value))}
-            className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary hover:border-primary transition-colors cursor-pointer"
+            className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary select-hover-blue cursor-pointer"
           >
             <option value={10}>10</option>
             <option value={15}>15</option>
diff --git a/susconecta/app/globals.css b/susconecta/app/globals.css
index d41795d..ada3c18 100644
--- a/susconecta/app/globals.css
+++ b/susconecta/app/globals.css
@@ -167,3 +167,18 @@ button[aria-label="Close"],
   display: none !important;
 }
 
+/* Classe padronizada de hover azul - consistente em todos os modos (claro/escuro SO e app) */
+.hover-primary-blue {
+  @apply hover:bg-blue-500 hover:text-white hover:border-blue-500 transition-all duration-200;
+}
+
+/* Hover simples para ícones e botões menores */
+.hover-primary-blue-soft {
+  @apply hover:bg-blue-500/10 hover:text-blue-500 transition-colors duration-200;
+}
+
+/* Hover padronizado para selects de filtro */
+.select-hover-blue {
+  @apply hover:bg-blue-500 hover:text-white hover:border-blue-500 transition-colors duration-200;
+}
+
diff --git a/susconecta/app/paciente/page.tsx b/susconecta/app/paciente/page.tsx
index 54f0317..dd9792b 100644
--- a/susconecta/app/paciente/page.tsx
+++ b/susconecta/app/paciente/page.tsx
@@ -693,10 +693,10 @@ export default function PacientePage() {
     const [tipoConsulta, setTipoConsulta] = useState<'teleconsulta' | 'presencial'>('teleconsulta')
     const [especialidade, setEspecialidade] = useState('cardiologia')
     const [localizacao, setLocalizacao] = useState('')
-    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 hoverPrimaryClass = "hover-primary-blue focus-visible:ring-2 focus-visible:ring-blue-500/60 active:scale-[0.97]"
+    const activeToggleClass = "w-full transition duration-200 focus-visible:ring-2 focus-visible:ring-blue-500/60 active:scale-[0.97] bg-blue-500 text-white hover:bg-blue-500 hover:text-white"
+    const inactiveToggleClass = "w-full transition duration-200 bg-slate-50 text-blue-500 border border-blue-500/30 hover:bg-blue-50 hover:text-blue-500 dark:bg-white/5 dark:text-white dark:hover:bg-blue-500/20 dark:border-white/20"
+    const hoverPrimaryIconClass = "rounded-xl bg-white text-slate-900 border border-black/10 shadow-[0_2px_8px_rgba(0,0,0,0.03)] hover-primary-blue focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:bg-slate-800 dark:text-slate-100 dark:border-white/10 dark:shadow-none"
     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()
diff --git a/susconecta/app/profissional/page.tsx b/susconecta/app/profissional/page.tsx
index 84e791f..e800161 100644
--- a/susconecta/app/profissional/page.tsx
+++ b/susconecta/app/profissional/page.tsx
@@ -809,13 +809,13 @@ const ProfissionalPage = () => {
         </div>
         
         {/* Navegação de Data - Responsiva */}
-        <div className="flex flex-col gap-2 sm:gap-3 mb-4 sm:mb-6 p-2 sm:p-3 md:p-4 bg-blue-50 rounded-lg dark:bg-muted">
+        <div className="flex flex-col gap-2 sm:gap-3 mb-4 sm:mb-6 p-2 sm:p-3 md:p-4 bg-muted rounded-lg">
           <div className="flex items-center gap-1.5 sm:gap-2 md:gap-4 flex-wrap">
             <Button 
               variant="outline"
               size="sm"
               onClick={() => navigateDate('prev')}
-              className="p-1.5 sm:p-2 hover:bg-primary! hover:text-white! cursor-pointer transition-colors h-auto"
+              className="p-1.5 sm:p-2 hover-primary-blue cursor-pointer h-auto"
             >
               <ChevronLeft className="h-4 w-4" />
             </Button>
@@ -826,7 +826,7 @@ const ProfissionalPage = () => {
               variant="outline"
               size="sm"
               onClick={() => navigateDate('next')}
-              className="p-1.5 sm:p-2 hover:bg-primary! hover:text-white! cursor-pointer transition-colors h-auto"
+              className="p-1.5 sm:p-2 hover-primary-blue cursor-pointer h-auto"
             >
               <ChevronRight className="h-4 w-4" />
             </Button>
@@ -1027,7 +1027,7 @@ const ProfissionalPage = () => {
             variant={selectedRange === 'todos' ? 'default' : 'outline'}
             size="sm"
             onClick={() => setSelectedRange('todos')}
-            className="hover:bg-primary! hover:text-white! transition-colors"
+            className="hover-primary-blue"
           >
             Todos
           </Button>
@@ -1035,7 +1035,7 @@ const ProfissionalPage = () => {
             variant={selectedRange === 'semana' ? 'default' : 'outline'}
             size="sm"
             onClick={() => setSelectedRange('semana')}
-            className="hover:bg-primary! hover:text-white! transition-colors"
+            className="hover-primary-blue"
           >
             Semana
           </Button>
@@ -1043,7 +1043,7 @@ const ProfissionalPage = () => {
             variant={selectedRange === 'mes' ? 'default' : 'outline'}
             size="sm"
             onClick={() => setSelectedRange('mes')}
-            className="hover:bg-primary! hover:text-white! transition-colors"
+            className="hover-primary-blue"
           >
             Mês
           </Button>
@@ -1204,7 +1204,7 @@ const ProfissionalPage = () => {
             <Button size="sm" onClick={doSearch} disabled={searching}>
               Buscar
             </Button>
-            <Button size="sm" variant="ghost" onClick={handleClear} className="hover:bg-primary! hover:text-white! transition-colors">
+            <Button size="sm" variant="ghost" onClick={handleClear} className="hover-primary-blue">
               Limpar
             </Button>
           </div>
@@ -1503,7 +1503,7 @@ const ProfissionalPage = () => {
                             onClick={() => {
                               router.push(`/laudos/${laudo.id}`);
                             }}
-                            className="flex items-center gap-1 hover:bg-primary! hover:text-white! transition-colors"
+                            className="flex items-center gap-1 hover-primary-blue"
                           >
                             <Eye className="w-4 h-4" />
                             Ver Laudo
@@ -2308,16 +2308,16 @@ const ProfissionalPage = () => {
                         title="Cor da fonte"
                       />
                       {/* Alinhamento */}
-                      <Button variant="outline" size="sm" onClick={() => formatText('align-left')} title="Alinhar à esquerda" className="px-1 hover:bg-primary/10 hover:text-primary"><svg width="16" height="16" fill="none"><rect x="2" y="4" width="12" height="2" rx="1" fill="currentColor"/><rect x="2" y="7" width="8" height="2" rx="1" fill="currentColor"/><rect x="2" y="10" width="10" height="2" rx="1" fill="currentColor"/></svg></Button>
-                      <Button variant="outline" size="sm" onClick={() => formatText('align-center')} title="Centralizar" className="px-1 hover:bg-primary/10 hover:text-primary"><svg width="16" height="16" fill="none"><rect x="4" y="4" width="8" height="2" rx="1" fill="currentColor"/><rect x="2" y="7" width="12" height="2" rx="1" fill="currentColor"/><rect x="3" y="10" width="10" height="2" rx="1" fill="currentColor"/></svg></Button>
-                      <Button variant="outline" size="sm" onClick={() => formatText('align-right')} title="Alinhar à direita" className="px-1 hover:bg-primary/10 hover:text-primary"><svg width="16" height="16" fill="none"><rect x="6" y="4" width="8" height="2" rx="1" fill="currentColor"/><rect x="2" y="7" width="12" height="2" rx="1" fill="currentColor"/><rect x="4" y="10" width="10" height="2" rx="1" fill="currentColor"/></svg></Button>
-                      <Button variant="outline" size="sm" onClick={() => formatText('align-justify')} title="Justificar" className="px-1 hover:bg-primary/10 hover:text-primary"><svg width="16" height="16" fill="none"><rect x="2" y="4" width="12" height="2" rx="1" fill="currentColor"/><rect x="2" y="7" width="12" height="2" rx="1" fill="currentColor"/><rect x="2" y="10" width="12" height="2" rx="1" fill="currentColor"/></svg></Button>
+                      <Button variant="outline" size="sm" onClick={() => formatText('align-left')} title="Alinhar à esquerda" className="px-1 hover-primary-blue-soft"><svg width="16" height="16" fill="none"><rect x="2" y="4" width="12" height="2" rx="1" fill="currentColor"/><rect x="2" y="7" width="8" height="2" rx="1" fill="currentColor"/><rect x="2" y="10" width="10" height="2" rx="1" fill="currentColor"/></svg></Button>
+                      <Button variant="outline" size="sm" onClick={() => formatText('align-center')} title="Centralizar" className="px-1 hover-primary-blue-soft"><svg width="16" height="16" fill="none"><rect x="4" y="4" width="8" height="2" rx="1" fill="currentColor"/><rect x="2" y="7" width="12" height="2" rx="1" fill="currentColor"/><rect x="3" y="10" width="10" height="2" rx="1" fill="currentColor"/></svg></Button>
+                      <Button variant="outline" size="sm" onClick={() => formatText('align-right')} title="Alinhar à direita" className="px-1 hover-primary-blue-soft"><svg width="16" height="16" fill="none"><rect x="6" y="4" width="8" height="2" rx="1" fill="currentColor"/><rect x="2" y="7" width="12" height="2" rx="1" fill="currentColor"/><rect x="4" y="10" width="10" height="2" rx="1" fill="currentColor"/></svg></Button>
+                      <Button variant="outline" size="sm" onClick={() => formatText('align-justify')} title="Justificar" className="px-1 hover-primary-blue-soft"><svg width="16" height="16" fill="none"><rect x="2" y="4" width="12" height="2" rx="1" fill="currentColor"/><rect x="2" y="7" width="12" height="2" rx="1" fill="currentColor"/><rect x="2" y="10" width="12" height="2" rx="1" fill="currentColor"/></svg></Button>
                       {/* Listas */}
-                      <Button variant="outline" size="sm" onClick={() => formatText('list-ol')} title="Lista numerada" className="px-1 hover:bg-primary/10 hover:text-primary">1.</Button>
-                      <Button variant="outline" size="sm" onClick={() => formatText('list-ul')} title="Lista com marcadores" className="px-1 hover:bg-primary/10 hover:text-primary">•</Button>
+                      <Button variant="outline" size="sm" onClick={() => formatText('list-ol')} title="Lista numerada" className="px-1 hover-primary-blue-soft">1.</Button>
+                      <Button variant="outline" size="sm" onClick={() => formatText('list-ul')} title="Lista com marcadores" className="px-1 hover-primary-blue-soft">•</Button>
                       {/* Recuo */}
-                      <Button variant="outline" size="sm" onClick={() => formatText('indent')} title="Aumentar recuo" className="px-1 hover:bg-primary/10 hover:text-primary">→</Button>
-                      <Button variant="outline" size="sm" onClick={() => formatText('outdent')} title="Diminuir recuo" className="px-1 hover:bg-primary/10 hover:text-primary">←</Button>
+                      <Button variant="outline" size="sm" onClick={() => formatText('indent')} title="Aumentar recuo" className="px-1 hover-primary-blue-soft">→</Button>
+                      <Button variant="outline" size="sm" onClick={() => formatText('outdent')} title="Diminuir recuo" className="px-1 hover-primary-blue-soft">←</Button>
                       {/* Desfazer/Refazer */}
                       <Button variant="outline" size="sm" onClick={handleUndo} title="Desfazer" className="px-1 hover:bg-primary/10 hover:text-primary">↺</Button>
                       <div className="flex flex-wrap gap-1">
diff --git a/susconecta/components/features/dashboard/header.tsx b/susconecta/components/features/dashboard/header.tsx
index 5b78f26..160de92 100644
--- a/susconecta/components/features/dashboard/header.tsx
+++ b/susconecta/components/features/dashboard/header.tsx
@@ -43,14 +43,14 @@ export function PagesHeader({ title = "", subtitle = "" }: { title?: string, sub
       </div>
 
       <div className="flex items-center space-x-4">
-  <Button variant="ghost" size="icon" className="hover:bg-primary! hover:text-white! transition-colors">
+  <Button variant="ghost" size="icon" className="hover-primary-blue">
           <Bell className="h-4 w-4" />
         </Button>
 
         <SimpleThemeToggle />
                     <Button
                       variant="outline"
-                      className="text-primary border-primary bg-transparent shadow-sm shadow-blue-500/10 border border-blue-200 hover:bg-blue-50 dark:shadow-none dark:border-primary dark:hover:bg-primary dark:hover:text-primary-foreground"
+                      className="text-blue-500 border-blue-500 bg-transparent shadow-sm shadow-blue-500/10 border hover-primary-blue"
                       asChild
                     ></Button>
         {/* Avatar Dropdown Simples */}