make reports modal more compact

src/components/chatbot/ChatHeader.tsx

@@ -22,7 +22,7 @@ export const ChatHeader = ({
   onResetClick,
 }: ChatHeaderProps) => {
   return (
-    <div className="p-6 border-b border-border bg-primary/5">
+    <div className="p-6 border-b border-border">
       <div className="flex items-center justify-between">
         <div>
           <h2 className="text-2xl font-bold text-foreground">

src/components/chatbot/ChatInput.tsx

@@ -25,7 +25,7 @@ export const ChatInput = ({
   };
 
   return (
-    <div className="p-6 border-t border-border bg-muted">
+    <div className="p-6 border-t border-border">
       <div className="flex space-x-3">
         <Input
           value={inputMessage}

src/components/records/RecordsModal.tsx

@@ -58,20 +58,20 @@ function RecordsModal({
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
       <DialogContent
-        className={`${styles.modalContent} w-[95vw] max-w-[1400px] h-[95vh] max-h-[95vh] p-0 overflow-hidden flex flex-col`}
+        className={`${styles.modalContent} max-w-4xl max-h-[80vh] p-0 overflow-hidden flex flex-col`}
       >
         <div className="flex flex-col h-full min-h-0">
           {/* Header con botón de cerrar */}
-          <div className="px-6 py-4 border-b border-gray-200 bg-white sticky top-0 z-10 flex items-center justify-between">
-            <DialogTitle className="flex items-center text-xl">
-              <FileText className="w-6 h-6 mr-3 text-blue-600 flex-shrink-0" />
+          <div className="px-4 py-3 border-b border-border bg-card sticky top-0 z-10 flex items-center justify-between">
+            <DialogTitle className="flex items-center text-lg font-semibold">
+              <FileText className="w-5 h-5 mr-2 text-primary flex-shrink-0" />
               Reporte Médico - {record.id.slice(-8)}
             </DialogTitle>
             <Button
               variant="ghost"
               size="sm"
               onClick={onClose}
-              className="h-8 w-8 p-0 hover:bg-gray-100"
+              className="h-8 w-8 p-0"
             >
               <X className="w-4 h-4" />
             </Button>
@@ -79,20 +79,20 @@ function RecordsModal({
 
           {/* Content */}
           <div
-            className={`${styles.contentArea} flex-1 overflow-y-auto p-6 space-y-6 min-h-0 max-h-full`}
+            className={`${styles.contentArea} flex-1 overflow-y-auto p-4 space-y-4 min-h-0 max-h-full`}
           >
             {/* Información del Paciente Mejorada */}
-            <div className="bg-muted rounded-lg border p-6">
+            <div className="bg-card rounded-lg border p-4">
               <div className="flex items-start space-x-4 mb-4">
                 {/* Foto de perfil */}
                 <div className="flex-shrink-0">
-                  <div className="w-16 h-16 rounded-full bg-gray-200 flex items-center justify-center overflow-hidden border-2 border-blue-200">
+                  <div className="w-12 h-12 rounded-full bg-muted flex items-center justify-center overflow-hidden border-2 border-border">
                     {record.user.profileImage ? (
                       <Image
                         src={record.user.profileImage}
                         alt="Foto de perfil"
-                        width={64}
-                        height={64}
+                        width={48}
+                        height={48}
                         className="w-full h-full object-cover"
                         onError={(e) => {
                           e.currentTarget.style.display = "none";
@@ -103,7 +103,7 @@ function RecordsModal({
                       />
                     ) : null}
                     <User
-                      className={`w-8 h-8 text-gray-400 ${
+                      className={`w-6 h-6 text-muted-foreground ${
                         record.user.profileImage ? "hidden" : ""
                       }`}
                     />
@@ -113,35 +113,35 @@ function RecordsModal({
                 {/* Información del paciente */}
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center space-x-2 mb-2">
-                    <h3 className="text-lg font-semibold text-gray-900">
+                    <h3 className="text-base font-semibold text-foreground">
                       {record.user.name} {record.user.lastname || ""}
                     </h3>
                     <div className="flex items-center space-x-1">
-                      <UserCheck className="w-4 h-4 text-blue-600" />
-                      <span className="text-xs font-medium text-blue-600 bg-blue-100 px-2 py-1 rounded-full">
+                      <UserCheck className="w-4 h-4 text-primary" />
+                      <span className="text-xs font-medium text-primary bg-primary/10 px-2 py-1 rounded-full">
                         {record.user.role === "ADMIN" ? "Administrador" : record.user.role === "DOCTOR" ? "Doctor" : "Paciente"}
                       </span>
                     </div>
                   </div>
                   {record.user.username && (
-                    <p className="text-sm text-gray-600 mb-1">
+                    <p className="text-sm text-muted-foreground mb-1">
                       @{record.user.username}
                     </p>
                   )}
-                  <p className="text-sm text-gray-600">{record.user.email}</p>
+                  <p className="text-sm text-muted-foreground">{record.user.email}</p>
                 </div>
               </div>
 
               {/* Información adicional */}
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 pt-4 border-t border-blue-200">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 pt-4 border-t border-border">
                 {/* ID del Reporte */}
                 <div className="flex items-center">
-                  <Tag className="w-4 h-4 mr-2 text-blue-600 flex-shrink-0" />
+                  <Tag className="w-4 h-4 mr-2 text-primary flex-shrink-0" />
                   <div className="min-w-0">
-                    <span className="font-medium text-xs text-gray-600">
+                    <span className="font-medium text-xs text-muted-foreground">
                       ID del Reporte
                     </span>
-                    <div className="font-mono text-xs break-all text-gray-700">
+                    <div className="font-mono text-xs break-all text-foreground">
                       {record.id}
                     </div>
                   </div>
@@ -149,12 +149,12 @@ function RecordsModal({
 
                 {/* Fecha de creación */}
                 <div className="flex items-center">
-                  <Calendar className="w-4 h-4 mr-2 text-blue-600 flex-shrink-0" />
+                  <Calendar className="w-4 h-4 mr-2 text-primary flex-shrink-0" />
                   <div>
-                    <span className="font-medium text-xs text-gray-600">
+                    <span className="font-medium text-xs text-muted-foreground">
                       Fecha de Creación
                     </span>
-                    <div className="text-sm text-gray-700">
+                    <div className="text-sm text-foreground">
                       {formatDate(record.createdAt)}
                     </div>
                   </div>
@@ -162,12 +162,12 @@ function RecordsModal({
 
                 {/* Fecha de registro */}
                 <div className="flex items-center">
-                  <Clock className="w-4 h-4 mr-2 text-blue-600 flex-shrink-0" />
+                  <Clock className="w-4 h-4 mr-2 text-primary flex-shrink-0" />
                   <div>
-                    <span className="font-medium text-xs text-gray-600">
+                    <span className="font-medium text-xs text-muted-foreground">
                       Registrado desde
                     </span>
-                    <div className="text-sm text-gray-700">
+                    <div className="text-sm text-foreground">
                       {record.user.createdAt
                         ? new Date(record.user.createdAt).toLocaleDateString(
                             "es-ES",
@@ -185,26 +185,26 @@ function RecordsModal({
             </div>
 
             {/* Contenido del Reporte Mejorado */}
-            <div className="bg-gray-50 rounded-lg p-6">
-              <div className="flex items-center justify-between mb-4 border-b border-gray-200 pb-2">
-                <h3 className="text-lg font-semibold text-gray-900">
+            <div className="bg-muted/50 rounded-lg p-4">
+              <div className="flex items-center justify-between mb-4 border-b border-border pb-2">
+                <h3 className="text-base font-semibold text-foreground">
                   Contenido del Reporte
                 </h3>
                 <div className="flex items-center space-x-2">
-                  <div className="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded">
+                  <div className="text-xs text-muted-foreground bg-muted px-2 py-1 rounded">
                     {record.content.length} caracteres
                   </div>
-                  <div className="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded">
+                  <div className="text-xs text-muted-foreground bg-muted px-2 py-1 rounded">
                     {record.content.split("\n").length} líneas
                   </div>
                 </div>
               </div>
 
-              <div className="bg-white rounded-lg border shadow-sm overflow-hidden">
-                <div className="p-6">
-                  <div className="prose prose-sm max-w-none">
+              <div className="bg-card rounded-lg border shadow-sm overflow-hidden">
+                <div className="p-4">
+                  <div className="prose prose-xs max-w-none text-sm">
                     <div
-                      className={`${styles.reportContent} text-gray-700 leading-relaxed`}
+                      className={`${styles.reportContent} text-foreground leading-relaxed`}
                     >
                       <ReactMarkdownRenderer 
                         content={record.content}
@@ -218,7 +218,7 @@ function RecordsModal({
           </div>
 
           {/* Footer con botones */}
-          <div className="px-6 py-4 border-t border-gray-200 bg-white sticky bottom-0 z-10">
+          <div className="px-4 py-3 border-t border-border bg-card sticky bottom-0 z-10">
             <div className="flex flex-wrap gap-3 justify-end">
               <Button
                 variant="outline"