modernize reports page

src/components/records/RecordsCard.tsx

@@ -50,65 +50,60 @@ export default function RecordsCard({
   }
 
   return (
-    <Card className="group hover:shadow-xl transition-all duration-300 border-0 bg-gradient-to-br from-card to-muted/50 overflow-hidden relative">
-      {/* Gradient border */}
-      <div className="absolute inset-0 bg-gradient-to-r from-primary via-secondary to-primary opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-      <div className="absolute inset-[1px] bg-card rounded-lg"></div>
-      
-      <div className="relative">
-        <CardHeader className="pb-4">
-          <div className="flex items-center justify-between mb-3">
-            <div className="flex items-center space-x-3">
-              <div className="w-12 h-12 bg-gradient-to-br from-primary to-secondary rounded-xl flex items-center justify-center shadow-lg">
-                <FileText className="w-6 h-6 text-white" />
-              </div>
-              <div>
-                <CardTitle className="text-xl font-bold text-foreground">
-                  Reporte #{record.id.slice(-8)}
-                </CardTitle>
-                <div className="flex items-center text-xs text-muted-foreground mt-1">
-                  <Tag className="w-3 h-3 mr-1" />
-                  {record.id.slice(0, 8)}...
-                </div>
-              </div>
+    <Card className="group hover:shadow-lg transition-all duration-300 border overflow-hidden">
+      <CardHeader className="pb-4">
+        <div className="flex items-center justify-between mb-3">
+          <div className="flex items-center space-x-3">
+            <div className="w-12 h-12 bg-primary rounded-xl flex items-center justify-center shadow-sm">
+              <FileText className="w-6 h-6 text-primary-foreground" />
             </div>
-            <div className="flex space-x-1">
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => onViewRecord(record)}
-                className="h-9 w-9 p-0 hover:bg-primary/5"
-              >
-                <Eye className="w-4 h-4 text-muted-foreground" />
-              </Button>
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => onCopyContent(record.content)}
-                className="h-9 w-9 p-0 hover:bg-primary/5"
-              >
-                <Copy className="w-4 h-4 text-muted-foreground" />
-              </Button>
+            <div>
+              <CardTitle className="text-xl font-bold text-foreground">
+                Reporte #{record.id.slice(-8)}
+              </CardTitle>
+              <div className="flex items-center text-xs text-muted-foreground mt-1">
+                <Tag className="w-3 h-3 mr-1" />
+                {record.id.slice(0, 8)}...
+              </div>
             </div>
           </div>
-          
-          <div className="grid grid-cols-1 gap-2 text-sm">
-            <div className="flex items-center text-muted-foreground bg-primary/5 px-3 py-2 rounded-lg">
-              <Calendar className="w-4 h-4 mr-2 text-primary" />
-              <span className="font-medium">{formatRelativeDate(record.createdAt)}</span>
-            </div>
-            {userRole === "DOCTOR" && (
-              <div className="flex items-center text-muted-foreground bg-success/5 px-3 py-2 rounded-lg">
-                <User className="w-4 h-4 mr-2 text-success" />
-                <span className="font-medium truncate">{record.user.name} {record.user.lastname}</span>
-              </div>
-            )}
+          <div className="flex space-x-1">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => onViewRecord(record)}
+              className="h-9 w-9 p-0"
+            >
+              <Eye className="w-4 h-4 text-muted-foreground" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => onCopyContent(record.content)}
+              className="h-9 w-9 p-0"
+            >
+              <Copy className="w-4 h-4 text-muted-foreground" />
+            </Button>
+          </div>
+        </div>
+        
+        <div className="grid grid-cols-1 gap-2 text-sm">
+          <div className="flex items-center text-muted-foreground bg-muted px-3 py-2 rounded-lg">
+            <Calendar className="w-4 h-4 mr-2 text-primary" />
+            <span className="font-medium">{formatRelativeDate(record.createdAt)}</span>
+          </div>
+          {userRole === "DOCTOR" && (
             <div className="flex items-center text-muted-foreground bg-muted px-3 py-2 rounded-lg">
-              <Clock className="w-4 h-4 mr-2 text-muted-foreground" />
-              <span className="font-medium">{formatDate(record.createdAt)}</span>
+              <User className="w-4 h-4 mr-2 text-primary" />
+              <span className="font-medium truncate">{record.user.name} {record.user.lastname}</span>
             </div>
+          )}
+          <div className="flex items-center text-muted-foreground bg-muted px-3 py-2 rounded-lg">
+            <Clock className="w-4 h-4 mr-2 text-muted-foreground" />
+            <span className="font-medium">{formatDate(record.createdAt)}</span>
           </div>
-        </CardHeader>
+        </div>
+      </CardHeader>
         
         <CardContent className="pt-0">
           <div className="mb-6">
@@ -146,14 +141,13 @@ export default function RecordsCard({
               variant="default"
               size="sm"
               onClick={() => onViewRecord(record)}
-              className="flex-1 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 shadow-md"
+              className="flex-1"
             >
               <Eye className="w-4 h-4 mr-2" />
               Ver
             </Button>
           </div>
         </CardContent>
-      </div>
-    </Card>
-  )
-}
+      </Card>
+    )
+  }

src/components/records/RecordsFilters.tsx

@@ -63,23 +63,23 @@ export default function RecordsFilters({
   onClearFilters
 }: RecordsFiltersProps) {
   return (
-    <Card className="mb-6 border-0 shadow-lg bg-gradient-to-r from-white to-gray-50/50">
-      <CardHeader className="pb-4">
+    <Card className="mb-6 border shadow-sm rounded-xl">
+      <CardHeader className="pb-4 px-6 pt-6">
         <div className="flex items-center justify-between">
           <div className="flex items-center space-x-3">
-            <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
-              <Filter className="w-5 h-5 text-white" />
+            <div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center shadow-sm">
+              <Filter className="w-5 h-5 text-primary-foreground" />
             </div>
             <div>
-              <CardTitle className="text-xl font-bold text-gray-900">Filtros y Búsqueda</CardTitle>
-              <p className="text-sm text-gray-500">Personaliza tu búsqueda de reportes</p>
+              <CardTitle className="text-xl font-bold text-foreground">Filtros y Búsqueda</CardTitle>
+              <p className="text-sm text-muted-foreground">Personaliza tu búsqueda de reportes</p>
             </div>
           </div>
           <Button
             variant="outline"
             size="sm"
             onClick={onShowFiltersToggle}
-            className="flex items-center space-x-2 border-gray-300 hover:border-blue-500 hover:bg-blue-50"
+            className="flex items-center space-x-2"
           >
             <span className="font-medium">{showFilters ? "Ocultar" : "Mostrar"} filtros</span>
             <ChevronDown className={`w-4 h-4 transition-transform duration-200 ${showFilters ? 'rotate-180' : ''}`} />
@@ -88,11 +88,11 @@ export default function RecordsFilters({
       </CardHeader>
       
       {showFilters && (
-        <CardContent className="pt-0">
+        <CardContent className="pt-0 px-6 pb-6">
           <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
             {/* Búsqueda por paciente - Solo para doctores */}
             {userRole === "DOCTOR" && (
-              <div className="bg-blue-50 rounded-xl p-4 border border-blue-100">
+              <div className="bg-muted rounded-xl p-4 border">
                 <PatientSearchInput
                   value={searchTerm}
                   onChange={onSearchChange}
@@ -104,25 +104,25 @@ export default function RecordsFilters({
             )}
 
             {/* Filtro por fecha */}
-            <div className="bg-green-50 rounded-xl p-4 border border-green-100">
-              <Label htmlFor="dateFilter" className="text-green-800 font-medium">Filtrar por fecha</Label>
+            <div className="bg-muted rounded-xl p-4 border">
+              <Label htmlFor="dateFilter" className="text-foreground font-medium">Filtrar por fecha</Label>
               <Input
                 id="dateFilter"
                 type="date"
                 value={dateFilter}
                 onChange={(e) => onDateFilterChange(e.target.value)}
-                className="mt-2 border-green-200 focus:border-green-500 focus:ring-green-500"
+                className="mt-2"
               />
             </div>
 
             {/* Items por página */}
-            <div className="bg-purple-50 rounded-xl p-4 border border-purple-100">
-              <Label htmlFor="itemsPerPage" className="text-purple-800 font-medium">Items por página</Label>
+            <div className="bg-muted rounded-xl p-4 border">
+              <Label htmlFor="itemsPerPage" className="text-foreground font-medium">Items por página</Label>
               <select
                 id="itemsPerPage"
                 value={itemsPerPage}
                 onChange={(e) => onItemsPerPageChange(Number(e.target.value))}
-                className="w-full mt-2 px-3 py-2 border border-purple-200 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
+                className="w-full mt-2 px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent"
               >
                 {ITEMS_PER_PAGE_OPTIONS.map(option => (
                   <option key={option} value={option}>
@@ -140,7 +140,7 @@ export default function RecordsFilters({
                 variant="outline"
                 size="sm"
                 onClick={onClearFilters}
-                className="text-red-600 border-red-300 hover:bg-red-50 hover:border-red-400 px-6"
+                className="text-destructive border-destructive hover:bg-destructive hover:text-destructive-foreground px-6"
               >
                 Limpiar todos los filtros
               </Button>

src/components/records/RecordsHeader.tsx

@@ -7,33 +7,31 @@ interface RecordsHeaderProps {
 
 export default function RecordsHeader({ userRole, recordsCount }: RecordsHeaderProps) {
   return (
-    <div className="mb-8">
-      <div className="bg-gradient-to-r from-primary/5 to-secondary/5 rounded-2xl p-8 border border-primary/10">
+    <div className="mb-6">
+      <div className="bg-card rounded-xl p-6 border shadow-sm">
         <div className="flex items-center justify-between">
-          <div className="flex-1">
-            <div className="flex items-center space-x-3 mb-3">
-              <div className="w-12 h-12 bg-gradient-to-br from-primary to-secondary rounded-xl flex items-center justify-center shadow-lg">
-                <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                </svg>
-              </div>
-              <div>
-                <h1 className="text-3xl font-bold text-foreground">
-                  {userRole === "DOCTOR" ? "Todos los Reportes Médicos" : "Mis Reportes Médicos"}
-                </h1>
-                <p className="text-muted-foreground mt-1">
-                  {userRole === "DOCTOR" 
-                    ? "Historial completo de reportes médicos de todos los pacientes"
-                    : "Tu historial personal de reportes médicos generados"
-                  }
-                </p>
-              </div>
+          <div className="flex items-center space-x-3">
+            <div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center shadow-sm">
+              <svg className="w-5 h-5 text-primary-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+              </svg>
+            </div>
+            <div>
+              <h1 className="text-xl font-bold text-foreground">
+                {userRole === "DOCTOR" ? "Todos los Reportes Médicos" : "Mis Reportes Médicos"}
+              </h1>
+              <p className="text-sm text-muted-foreground">
+                {userRole === "DOCTOR" 
+                  ? "Historial completo de reportes médicos de todos los pacientes"
+                  : "Tu historial personal de reportes médicos generados"
+                }
+              </p>
             </div>
           </div>
           <div className="text-right">
-            <div className="bg-card rounded-xl p-4 shadow-sm border border-primary/10">
-              <div className="text-3xl font-bold text-primary">{recordsCount}</div>
-              <div className="text-sm text-muted-foreground font-medium">Reportes encontrados</div>
+            <div className="bg-muted rounded-lg p-3 shadow-sm border">
+              <div className="text-2xl font-bold text-primary">{recordsCount}</div>
+              <div className="text-xs text-muted-foreground font-medium">Reportes encontrados</div>
             </div>
           </div>
         </div>

src/components/records/RecordsModal.tsx

@@ -82,7 +82,7 @@ function RecordsModal({
             className={`${styles.contentArea} flex-1 overflow-y-auto p-6 space-y-6 min-h-0 max-h-full`}
           >
             {/* Información del Paciente Mejorada */}
-            <div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg border border-blue-200 p-6">
+            <div className="bg-muted rounded-lg border p-6">
               <div className="flex items-start space-x-4 mb-4">
                 {/* Foto de perfil */}
                 <div className="flex-shrink-0">