modernize chat page

src/components/chatbot/ChatHeader.tsx

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

src/components/chatbot/ChatInterface.tsx

@@ -109,77 +109,79 @@ export const ChatInterface = () => {
   }
 
   return (
-    <div className="max-w-5xl mx-auto p-6">
-      <div className="bg-card rounded-xl shadow-lg border border-border">
-        {/* Header */}
-        <ChatHeader
-          remainingMessages={remainingMessages}
-          isLastMessage={isLastMessage}
-          isGeneratingReport={isGeneratingReport}
-          messages={messages}
-          isLimitReached={isLimitReached}
-          isLoading={isLoading}
-          onResetClick={handleResetClick}
-        />
-
-        <div className="flex flex-col h-[600px]">
-          {/* Chat Content */}
-          <div className="flex-1 overflow-hidden">
-            <div className="h-full overflow-y-auto p-6 space-y-6">
-              {/* Completed Banner */}
-              {showCompletedBanner && (
-                <CompletedBanner
-                  isGeneratingReport={isGeneratingReport}
-                  onDismiss={dismissCompletedBanner}
+    <div className="min-h-screen flex items-center justify-center p-6">
+      <div className="w-full max-w-6xl mx-auto">
+        <div className="bg-card rounded-xl shadow-lg border border-border">
+          {/* Header */}
+          <ChatHeader
+            remainingMessages={remainingMessages}
+            isLastMessage={isLastMessage}
+            isGeneratingReport={isGeneratingReport}
+            messages={messages}
+            isLimitReached={isLimitReached}
+            isLoading={isLoading}
+            onResetClick={handleResetClick}
+          />
+
+          <div className="flex flex-col min-h-[70vh]">
+            {/* Chat Content */}
+            <div className="flex-1 overflow-hidden">
+              <div className="h-full overflow-y-auto p-6 space-y-6">
+                {/* Completed Banner */}
+                {showCompletedBanner && (
+                  <CompletedBanner
+                    isGeneratingReport={isGeneratingReport}
+                    onDismiss={dismissCompletedBanner}
+                  />
+                )}
+
+                {/* Welcome Message */}
+                {messages.length === 0 && (
+                  <WelcomeMessage maxMessages={MAX_MESSAGES} />
+                )}
+
+                {/* Suggested Prompts */}
+                {showSuggestions && messages.length === 0 && (
+                  <SuggestedPrompts
+                    onSuggestionClick={handleSuggestionClick}
+                    isLoading={isLoading}
+                  />
+                )}
+
+                {/* Messages */}
+                <ChatMessages 
+                  messages={messages} 
+                  isLoading={isLoading} 
+                  showDynamicSuggestions={showDynamicSuggestions}
                 />
-              )}
-
-              {/* Welcome Message */}
-              {messages.length === 0 && (
-                <WelcomeMessage maxMessages={MAX_MESSAGES} />
-              )}
-
-              {/* Suggested Prompts */}
-              {showSuggestions && messages.length === 0 && (
-                <SuggestedPrompts
-                  onSuggestionClick={handleSuggestionClick}
-                  isLoading={isLoading}
-                />
-              )}
+                
+                {/* Dynamic Suggestions */}
+                {showDynamicSuggestions && currentSuggestions.length > 0 && !isLoading && (
+                  <DynamicSuggestions
+                    suggestions={currentSuggestions}
+                    onSuggestionClick={handleSuggestionClick}
+                    isLoading={isLoading}
+                  />
+                )}
+              </div>
+            </div>
 
-              {/* Messages */}
-              <ChatMessages 
-                messages={messages} 
-                isLoading={isLoading} 
-                showDynamicSuggestions={showDynamicSuggestions}
+            {/* Input Area */}
+            {messageCount < MAX_MESSAGES && (
+              <ChatInput
+                inputMessage={inputMessage}
+                setInputMessage={setInputMessage}
+                onSendMessage={handleSendMessage}
+                isLimitReached={messageCount >= MAX_MESSAGES}
+                isLoading={isLoading || inputDisabledForSuggestions}
               />
-              
-              {/* Dynamic Suggestions */}
-              {showDynamicSuggestions && currentSuggestions.length > 0 && !isLoading && (
-                <DynamicSuggestions
-                  suggestions={currentSuggestions}
-                  onSuggestionClick={handleSuggestionClick}
-                  isLoading={isLoading}
-                />
-              )}
-            </div>
-          </div>
+            )}
 
-          {/* Input Area */}
-          {messageCount < MAX_MESSAGES && (
-            <ChatInput
-              inputMessage={inputMessage}
-              setInputMessage={setInputMessage}
-              onSendMessage={handleSendMessage}
-              isLimitReached={messageCount >= MAX_MESSAGES}
-              isLoading={isLoading || inputDisabledForSuggestions}
-            />
-          )}
-
-          {/* Reset Button */}
-          {messageCount >= MAX_MESSAGES && (
-            <ResetButton onReset={handleResetWithReportAndModal} />
-          )}
+            {/* Reset Button */}
+            {messageCount >= MAX_MESSAGES && (
+              <ResetButton onReset={handleResetWithReportAndModal} />
+            )}
+          </div>
         </div>
       </div>
 

src/components/chatbot/CompletedBanner.tsx

@@ -8,7 +8,7 @@ interface CompletedBannerProps {
 
 export const CompletedBanner = ({ isGeneratingReport, onDismiss }: CompletedBannerProps) => {
   return (
-    <div className="bg-gradient-to-r from-success/10 to-primary/10 border border-success/20 rounded-lg p-4 mb-4 relative">
+    <div className="bg-success/10 border border-success/20 rounded-lg p-4 mb-4 relative">
       <Button
         variant="ghost"
         size="sm"

src/components/chatbot/DynamicLoader.tsx

@@ -82,13 +82,13 @@ export const DynamicLoader = () => {
 
   return (
     <div className="flex justify-start">
-      <div className="bg-gray-100 text-gray-900 px-4 py-3 rounded-2xl max-w-xs">
+      <div className="bg-muted text-foreground px-4 py-3 rounded-2xl max-w-xs">
         <div className="flex items-center space-x-2">
           {currentState.icon}
           <span className="text-sm">{currentState.message}</span>
         </div>
         {elapsedTime > 10 && (
-          <div className="text-xs text-gray-500 mt-1">
+          <div className="text-xs text-muted-foreground mt-1">
             Tiempo transcurrido: {elapsedTime}s
           </div>
         )}

src/components/chatbot/MedicalAlert.tsx

@@ -12,22 +12,22 @@ const alertConfig = {
     icon: Info,
     text: "Información general",
     description: "No requiere cita médica inmediata",
-    className: "bg-blue-50 border-blue-200 text-blue-800",
-    iconClassName: "text-blue-600"
+    className: "bg-muted border-muted-foreground/20 text-muted-foreground",
+    iconClassName: "text-muted-foreground"
   },
   RECOMENDADO: {
     icon: Clock,
     text: "Consulta recomendada",
     description: "Se recomienda agendar una cita médica",
-    className: "bg-yellow-50 border-yellow-200 text-yellow-800",
-    iconClassName: "text-yellow-600"
+    className: "bg-warning border-warning/20 text-warning",
+    iconClassName: "text-warning"
   },
   URGENTE: {
     icon: AlertTriangle,
     text: "Atención urgente",
     description: "Requiere atención médica inmediata",
-    className: "bg-red-50 border-red-200 text-red-800",
-    iconClassName: "text-red-600"
+    className: "bg-destructive border-destructive/20 text-destructive",
+    iconClassName: "text-destructive"
   }
 };
 

src/components/chatbot/SuggestedPrompts.tsx

@@ -48,7 +48,7 @@ export const SuggestedPrompts = ({
   isLoading,
 }: SuggestedPromptsProps) => {
   return (
-    <div className="bg-gradient-to-r from-primary/5 to-primary/10 rounded-lg p-4 border border-border">
+    <div className="bg-primary/5 rounded-lg p-4 border border-border">
       <div className="flex items-center space-x-2 mb-3">
         <Sparkles className="w-4 h-4 text-primary" />
         <h3 className="font-medium text-sm text-foreground">