Add responsive design

src/components/DashboardLayout.tsx

@@ -268,8 +268,8 @@ const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
       <div className="decoration blur-2"></div>
       <div className="decoration blur-3"></div>
       
-      {/* Sidebar */}
-      <nav className={`fixed top-0 left-0 z-50 h-screen bg-white border-r-4 border-white transition-all duration-300 ${sidebarCollapsed ? 'w-16' : 'w-80'}`} style={{ minWidth: sidebarCollapsed ? '64px' : '320px', maxWidth: sidebarCollapsed ? '64px' : '320px', backdropFilter: 'blur(15px)', backgroundColor: 'rgba(255, 255, 255, 0.9)' }}>
+      {/* Sidebar - Hidden on mobile, collapsible on desktop */}
+      <nav className={`fixed top-0 left-0 z-50 h-screen bg-white border-r-4 border-white transition-all duration-300 ${sidebarCollapsed ? 'w-16' : 'w-80'} md:block hidden`} style={{ minWidth: sidebarCollapsed ? '64px' : '320px', maxWidth: sidebarCollapsed ? '64px' : '320px', backdropFilter: 'blur(15px)', backgroundColor: 'rgba(255, 255, 255, 0.9)' }}>
         {/* Sidebar Header */}
         <div className="flex items-center justify-between p-6 h-20 border-b border-gray-100">
           <Link to="/dashboard" className={`flex items-center space-x-2 ${sidebarCollapsed ? 'justify-center' : ''}`}>
@@ -508,87 +508,91 @@ const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
         </div>
       </nav>
 
-      {/* Main Content Area */}
-      <div className={`transition-all duration-300 ${sidebarCollapsed ? 'ml-16' : 'ml-80'}`}>
-        {/* Top Navigation */}
-        <nav className="h-20 px-6 py-4 z-10 relative" style={{ backgroundColor: 'rgba(255, 255, 255, 0.7)', backdropFilter: 'blur(15px)' }}>
+      {/* Main Content Area - Responsive */}
+      <div className={`transition-all duration-300 ${sidebarCollapsed ? 'md:ml-16 ml-0' : 'md:ml-80 ml-0'}`}>
+        {/* Top Navigation - Responsive */}
+        <nav className="h-16 md:h-20 px-4 md:px-6 py-3 md:py-4 z-10 relative" style={{ backgroundColor: 'rgba(255, 255, 255, 0.7)', backdropFilter: 'blur(15px)' }}>
           <div className="flex items-center justify-between">
-            {/* Left Side */}
-            <div className="flex items-center space-x-4">
+            {/* Left Side - Responsive */}
+            <div className="flex items-center space-x-2 md:space-x-4">
               <button 
                 onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
-                className="p-2 rounded-full text-white transition-colors"
+                className="p-1.5 md:p-2 rounded-full text-white transition-colors"
                 style={{ backgroundColor: '#F84525' }}
               >
-                <Menu className="w-5 h-5" />
+                <Menu className="w-4 h-4 md:w-5 md:h-5" />
               </button>
               
-              {/* Search */}
-              <div className="relative">
+              {/* Search - Hidden on mobile */}
+              <div className="relative hidden md:block">
                 <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                   <Search className="h-4 w-4" style={{ color: '#69534f' }} />
                 </div>
                 <input
                   type="text"
                   placeholder={`${t('search')} (Ctrl+/)`}
-                  className="block w-80 pl-12 pr-16 py-3 border border-white rounded-xl text-sm placeholder-gray-500 focus:outline-none focus:ring-1 focus:border-red-500"
+                  className="block w-48 lg:w-80 pl-12 pr-16 py-3 border border-white rounded-xl text-sm placeholder-gray-500 focus:outline-none focus:ring-1 focus:border-red-500"
                   style={{ 
                     backgroundColor: '#fff',
                     borderColor: '#fff',
-                    height: '48px',
+                    height: '44px',
                     borderRadius: '0.8rem'
                   }}
                 />
-                <span className="absolute inset-y-0 right-0 pr-3 flex items-center text-xs font-bold px-2 py-1 rounded" style={{ backgroundColor: '#f8f4f3', borderColor: '#f8f4f3', top: '50%', transform: 'translateY(-50%)', right: '8px', fontSize: '12px' }}>
+                <span className="absolute inset-y-0 right-0 pr-3 flex items-center text-xs font-bold px-2 py-1 rounded hidden lg:flex" style={{ backgroundColor: '#f8f4f3', borderColor: '#f8f4f3', top: '50%', transform: 'translateY(-50%)', right: '8px', fontSize: '12px' }}>
                   (Ctrl+/)
                 </span>
               </div>
             </div>
 
-            {/* Right Side */}
-            <div className="flex items-center space-x-4">
-              {/* Language Selector */}
-              <LanguageSelector />
+            {/* Right Side - Responsive */}
+            <div className="flex items-center space-x-2 md:space-x-4">
+              {/* Language Selector - Hidden on small mobile */}
+              <div className="hidden sm:block">
+                <LanguageSelector />
+              </div>
               
-              {/* Currency Selector */}
-              <CurrencySelector />
+              {/* Currency Selector - Hidden on small mobile */}
+              <div className="hidden sm:block">
+                <CurrencySelector />
+              </div>
               
-              {/* Refresh (Admin) */}
+              {/* Refresh (Admin) - Hidden on mobile */}
               <button
                 onClick={() => window.dispatchEvent(new CustomEvent('admin:refresh'))}
-                className="p-2 rounded-xl transition-colors"
+                className="hidden md:block p-2 rounded-xl transition-colors"
                 style={{ backgroundColor: '#21272f', borderColor: '#21272f', color: '#F84525' }}
                 title="Actualizar datos"
               >
-                <RefreshCw className="w-5 h-5" />
+                <RefreshCw className="w-4 h-4 md:w-5 md:h-5" />
               </button>
 
               {/* Notifications */}
-              <button className="p-2 rounded-xl transition-colors relative" style={{ backgroundColor: '#21272f', borderColor: '#21272f', color: '#F84525' }} title="Notificaciones">
-                <Bell className="w-5 h-5" />
+              <button className="p-1.5 md:p-2 rounded-xl transition-colors relative" style={{ backgroundColor: '#21272f', borderColor: '#21272f', color: '#F84525' }} title="Notificaciones">
+                <Bell className="w-4 h-4 md:w-5 md:h-5" />
                 <span className="absolute -top-1 -right-1 bg-red-500 text-white text-[10px] px-1 py-0.5 rounded-full">!</span>
               </button>
 
-              {/* Theme Toggle */}
-              <button className="p-2 rounded-xl transition-colors" style={{ backgroundColor: '#21272f', borderColor: '#21272f', color: '#F84525' }}>
+              {/* Theme Toggle - Hidden on mobile */}
+              <button className="hidden md:block p-2 rounded-xl transition-colors" style={{ backgroundColor: '#21272f', borderColor: '#21272f', color: '#F84525' }}>
                 <Sun className="w-5 h-5" />
               </button>
               
-              {/* Fullscreen */}
-              <button className="p-2 rounded-xl transition-colors" style={{ backgroundColor: '#21272f', borderColor: '#21272f', color: '#F84525' }}>
+              {/* Fullscreen - Hidden on mobile */}
+              <button className="hidden lg:block p-2 rounded-xl transition-colors" style={{ backgroundColor: '#21272f', borderColor: '#21272f', color: '#F84525' }}>
                 <Maximize className="w-5 h-5" />
               </button>
 
-              {/* User Profile */}
-              <div className="flex items-center space-x-3 pl-4">
-                <div className="flex items-center space-x-3">
-                  <div className="w-10 h-10 bg-gradient-to-br from-orange-400 to-red-500 rounded-full flex items-center justify-center relative">
-                    <span className="text-white font-semibold text-sm">
+              {/* User Profile - Responsive */}
+              <div className="flex items-center space-x-2 md:space-x-3 pl-2 md:pl-4">
+                <div className="flex items-center space-x-2 md:space-x-3">
+                  <div className="w-8 h-8 md:w-10 md:h-10 bg-gradient-to-br from-orange-400 to-red-500 rounded-full flex items-center justify-center relative">
+                    <span className="text-white font-semibold text-xs md:text-sm">
                       {user?.name?.[0] || user?.email?.[0] || 'U'}
                     </span>
-                    <div className="absolute -bottom-1 -right-1 w-4 h-4 bg-green-500 border-2 border-white rounded-full"></div>
+                    <div className="absolute -bottom-1 -right-1 w-3 h-3 md:w-4 md:h-4 bg-green-500 border-2 border-white rounded-full"></div>
                   </div>
-                  <div className="text-left">
+                  <div className="text-left hidden md:block">
                     <div className="font-semibold text-gray-800 text-sm flex items-center space-x-2">
                       <span>{user?.name || 'Usuario'}</span>
                       {user?.role === 'super_admin' && (
@@ -605,8 +609,8 @@ const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
           </div>
         </nav>
 
-        {/* Page Content */}
-        <main className="p-6">
+        {/* Page Content - Responsive padding */}
+        <main className="p-3 md:p-6">
           {children}
         </main>
       </div>