From 07bac39d311aefb0708bdedd16c5a8836a614b30 Mon Sep 17 00:00:00 2001
From: Rogelio <A8071509@banorte.com>
Date: Thu, 23 Oct 2025 19:53:32 +0000
Subject: [PATCH] styles-update

---
 src/components/Card/Card.tsx                  | 50 +++++++++----
 .../ChatInterface/ChatInterface.tsx           | 70 +++++++++++++++++++
 src/components/ChatInterface/index.ts         |  2 +
 src/components/Input/Input.tsx                | 39 +++++++++++
 src/components/Input/index.ts                 |  2 +
 src/components/Message/Message.tsx            | 39 +++++++++++
 src/components/Message/index.ts               |  2 +
 src/components/index.ts                       |  6 +-
 tailwind.config.js                            | 16 ++---
 9 files changed, 203 insertions(+), 23 deletions(-)
 create mode 100644 src/components/ChatInterface/ChatInterface.tsx
 create mode 100644 src/components/ChatInterface/index.ts
 create mode 100644 src/components/Input/Input.tsx
 create mode 100644 src/components/Input/index.ts
 create mode 100644 src/components/Message/Message.tsx
 create mode 100644 src/components/Message/index.ts

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index be6c16f..3299e07 100644
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -3,26 +3,50 @@ import React from 'react';
 export interface CardProps {
   children: React.ReactNode;
   className?: string;
-  padding?: 'none' | 'sm' | 'md' | 'lg';
+  hover?: boolean;
 }
 
-export const Card: React.FC<CardProps> = ({
-  children,
+export const Card: React.FC<CardProps> = ({ 
+  children, 
   className = '',
-  padding = 'md'
+  hover = false 
 }) => {
-  const paddingClasses = {
-    none: '',
-    sm: 'p-3',
-    md: 'p-6',
-    lg: 'p-8'
-  };
-
   return (
-    <div className={`bg-white rounded-xl shadow-lg border border-gray-200 ${paddingClasses[padding]} ${className}`}>
+    <div className={`
+      bg-white rounded-xl border border-gray-200 shadow-sm 
+      ${hover ? 'hover:shadow-md transition-shadow duration-200' : ''}
+      ${className}
+    `}>
       {children}
     </div>
   );
 };
 
-export default Card;
\ No newline at end of file
+export const CardHeader: React.FC<{ children: React.ReactNode; className?: string }> = ({ 
+  children, 
+  className = '' 
+}) => (
+  <div className={`p-6 pb-4 ${className}`}>
+    {children}
+  </div>
+);
+
+export const CardContent: React.FC<{ children: React.ReactNode; className?: string }> = ({ 
+  children, 
+  className = '' 
+}) => (
+  <div className={`p-6 pt-0 ${className}`}>
+    {children}
+  </div>
+);
+
+export const CardFooter: React.FC<{ children: React.ReactNode; className?: string }> = ({ 
+  children, 
+  className = '' 
+}) => (
+  <div className={`p-6 pt-4 border-t border-gray-100 ${className}`}>
+    {children}
+  </div>
+);
+
+export default Card
\ No newline at end of file
diff --git a/src/components/ChatInterface/ChatInterface.tsx b/src/components/ChatInterface/ChatInterface.tsx
new file mode 100644
index 0000000..25e3ca3
--- /dev/null
+++ b/src/components/ChatInterface/ChatInterface.tsx
@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import Message from '../Message';
+import  Input  from '../Input';
+import Button  from '../Button';
+
+export const ChatInterface: React.FC = () => {
+  const [message, setMessage] = useState('');
+  const [messages, setMessages] = useState([
+    { id: 1, text: '¡Hola! ¿En qué puedo ayudarte?', isOwn: false, timestamp: '10:00' },
+    { id: 2, text: 'Me gustaría información sobre mis inversiones', isOwn: true, timestamp: '10:01' },
+  ]);
+
+  const sendMessage = () => {
+    if (message.trim()) {
+      setMessages([
+        ...messages,
+        {
+          id: messages.length + 1,
+          text: message,
+          isOwn: true,
+          timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+        }
+      ]);
+      setMessage('');
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-full bg-maya-background rounded-lg border border-gray-200">
+      {/* Chat Header */}
+      <div className="bg-white px-4 py-3 border-b border-gray-200 rounded-t-lg">
+        <div className="flex items-center space-x-3">
+          <div className="w-3 h-3 bg-maya-primary rounded-full"></div>
+          <h3 className="font-semibold text-gray-800">Soporte Banorte</h3>
+          <div className="w-2 h-2 bg-maya-success rounded-full"></div>
+        </div>
+      </div>
+
+      {/* Messages Area */}
+      <div className="flex-1 p-4 overflow-y-auto">
+        {messages.map((msg) => (
+          <Message
+            key={msg.id}
+            text={msg.text}
+            isOwn={msg.isOwn}
+            timestamp={msg.timestamp}
+          />
+        ))}
+      </div>
+
+      {/* Input Area */}
+      <div className="bg-white p-4 border-t border-gray-200 rounded-b-lg">
+        <div className="flex space-x-2">
+          <Input
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            placeholder="Escribe tu mensaje..."
+            className="flex-1"
+            onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
+          />
+          <Button onClick={sendMessage} variant="primary">
+            Enviar
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ChatInterface
\ No newline at end of file
diff --git a/src/components/ChatInterface/index.ts b/src/components/ChatInterface/index.ts
new file mode 100644
index 0000000..3bd640b
--- /dev/null
+++ b/src/components/ChatInterface/index.ts
@@ -0,0 +1,2 @@
+export { default } from './ChatInterface';
+export type { ChatInterface } from './ChatInterface';
\ No newline at end of file
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
new file mode 100644
index 0000000..cbafcf7
--- /dev/null
+++ b/src/components/Input/Input.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+  helperText?: string;
+}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ label, error, helperText, className = '', ...props }, ref) => {
+    return (
+      <div className="space-y-1">
+        {label && (
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            {label}
+          </label>
+        )}
+        <input
+          ref={ref}
+          className={`w-full px-3 py-2 border rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-maya-primary focus:border-transparent transition-all ${
+            error 
+              ? 'border-red-300 bg-red-50' 
+              : 'border-gray-300 hover:border-gray-400'
+          } ${className}`}
+          {...props}
+        />
+        {error && (
+          <p className="text-sm text-maya-danger">{error}</p>
+        )}
+        {helperText && !error && (
+          <p className="text-sm text-gray-500">{helperText}</p>
+        )}
+      </div>
+    );
+  }
+);
+
+export default Input
\ No newline at end of file
diff --git a/src/components/Input/index.ts b/src/components/Input/index.ts
new file mode 100644
index 0000000..e331364
--- /dev/null
+++ b/src/components/Input/index.ts
@@ -0,0 +1,2 @@
+export { default } from './Input';
+export type { InputProps } from './Input';
\ No newline at end of file
diff --git a/src/components/Message/Message.tsx b/src/components/Message/Message.tsx
new file mode 100644
index 0000000..e2bd025
--- /dev/null
+++ b/src/components/Message/Message.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+
+export interface MessageProps {
+  text: string;
+  isOwn?: boolean;
+  timestamp?: string;
+  status?: 'sent' | 'delivered' | 'read';
+}
+
+export const Message: React.FC<MessageProps> = ({
+  text,
+  isOwn = false,
+  timestamp,
+  status = 'sent'
+}) => {
+  return (
+    <div className={`flex ${isOwn ? 'justify-end' : 'justify-start'} mb-4`}>
+      <div className={`max-w-xs lg:max-w-md px-4 py-2 rounded-2xl ${
+        isOwn 
+          ? 'bg-maya-primary text-white rounded-br-none' 
+          : 'bg-maya-accent text-gray-800 rounded-bl-none'
+      }`}>
+        <p className="text-sm">{text}</p>
+        <div className={`flex items-center justify-end space-x-1 mt-1 ${
+          isOwn ? 'text-red-100' : 'text-gray-500'
+        }`}>
+          <span className="text-xs">{timestamp}</span>
+          {isOwn && (
+            <span className="text-xs">
+              {status === 'read' ? '✓✓' : status === 'delivered' ? '✓✓' : '✓'}
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Message
\ No newline at end of file
diff --git a/src/components/Message/index.ts b/src/components/Message/index.ts
new file mode 100644
index 0000000..7ef56c7
--- /dev/null
+++ b/src/components/Message/index.ts
@@ -0,0 +1,2 @@
+export { default } from './Message';
+export type { Message } from './Message';
\ No newline at end of file
diff --git a/src/components/index.ts b/src/components/index.ts
index bf18e4a..0a17ea9 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,5 +1,9 @@
 // src/index.ts
 export { default as Button } from './Button';
 export { default as Card } from './Card';
+export { default as Input } from './Input';
+
 export type { ButtonProps } from './Button';
-export type { CardProps } from './Card';
\ No newline at end of file
+export type { CardProps } from './Card';
+export type { InputProps } from './Input';
+
diff --git a/tailwind.config.js b/tailwind.config.js
index 649843f..9453d2d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,15 +6,13 @@ module.exports = {
     extend: {
       colors: {
         'maya': {
-           primary: '#EF2945',        // Rojo primario del logo Banorte
-        secondary: '#684D3D',      // Café secundario del logo  
-        neutral: {
-          light: '#F5F5F5',        // Fondo claro
-          medium: '#C7C9C9',       // Gris medio
-          dark: '#6A6867',         // Gris oscuro
-        },
-        success: '#10B981',
-        danger: '#EF4444',
+          primary: '#EA002A',
+          secondary: '#684D3D',
+          accent: '#C7C9C9',
+          background: '#F5F5F5',
+          dark: '#6A6867',
+          success: '#10B981',
+          danger: '#EF4444',
         }
       }
     },