diff --git a/index2.html b/index2.html
index 079fe45..46a3b64 100644
--- a/index2.html
+++ b/index2.html
@@ -30,6 +30,16 @@
         .nav-btn { color: #94a3b8; transition: all 0.2s; }
         .nav-btn.active { color: #2563eb; }
         .nav-btn.active i { transform: translateY(-2px); }
+
+        /* Estilo para los botones de filtro activos */
+        .stat-card { transition: all 0.2s ease; cursor: pointer; border: 1px solid transparent; }
+        .stat-card:active { transform: scale(0.95); }
+        .stat-card.active-filter { 
+            border-color: currentColor; 
+            background-color: white !important; 
+            box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1);
+            ring: 2px;
+        }
     </style>
 </head>
 <body class="text-slate-800 font-sans antialiased min-h-screen flex flex-col relative overflow-x-hidden pb-24">
@@ -52,70 +62,72 @@
 
     <main id="mainContent" class="hidden w-full max-w-lg mx-auto flex flex-col relative z-10">
         
-        <header class="pt-10 pb-8 px-6 bg-white rounded-b-[2.5rem] shadow-[0_10px_40px_rgba(0,0,0,0.03)] border-b border-slate-100 fade-in relative z-20">
-            <div class="flex justify-between items-center mb-6 gap-4">
-                <div class="flex-1 min-w-0">
-                    <p class="text-[10px] font-black text-blue-600 uppercase tracking-widest mb-1">Bienvenido/a</p>
-                    <h1 id="clientName" class="text-3xl font-black tracking-tight text-slate-900 leading-none truncate">Cliente</h1>
-                </div>
-                <div id="companyLogoContainer" class="hidden shrink-0 w-20 h-20 bg-white rounded-[1.5rem] shadow-sm border border-slate-100 p-2 overflow-hidden">
+        <header class="pt-10 pb-8 px-6 bg-white rounded-b-[3rem] shadow-xl shadow-slate-200/50 border-b border-slate-100 relative z-20">
+            <div class="flex flex-col items-center text-center mb-8">
+                <div id="companyLogoContainer" class="hidden w-32 h-32 bg-white rounded-[2rem] shadow-md border border-slate-50 p-3 mb-4 flex items-center justify-center overflow-hidden">
                     <img id="companyLogo" src="" class="w-full h-full object-contain">
                 </div>
+                <h1 id="companyNameHeader" class="text-xs font-black tracking-widest text-slate-400 uppercase">Portal del Cliente</h1>
+            </div>
+
+            <div class="mb-6 text-left">
+                <h2 class="text-3xl font-black text-slate-800 tracking-tight leading-none">Hola, <span id="clientFirstName" class="text-blue-600">---</span></h2>
             </div>
 
             <div class="grid grid-cols-2 gap-3">
-                <div class="bg-amber-50 rounded-[1.5rem] p-4 border border-amber-100 flex flex-col items-start justify-center shadow-sm">
-                    <h3 class="text-3xl font-black text-amber-600 leading-none" id="countPendientes">0</h3>
-                    <p class="text-[9px] font-black text-amber-600 uppercase tracking-widest mt-1.5 flex items-center gap-1"><i data-lucide="calendar-plus" class="w-3 h-3"></i> Pte. Citar</p>
+                <div onclick="setFilter('pendientes')" id="f-pendientes" class="stat-card bg-amber-50 rounded-3xl p-4 text-left text-amber-600">
+                    <div class="flex justify-between items-start">
+                        <h3 class="text-3xl font-black leading-none" id="countPendientes">0</h3>
+                        <i data-lucide="calendar-clock" class="w-5 h-5 opacity-50"></i>
+                    </div>
+                    <p class="text-[9px] font-black uppercase tracking-widest mt-2">Pte. Citar</p>
                 </div>
-                <div class="bg-rose-50 rounded-[1.5rem] p-4 border border-rose-100 flex flex-col items-start justify-center shadow-sm">
-                    <h3 class="text-3xl font-black text-rose-600 leading-none" id="countIncidencias">0</h3>
-                    <p class="text-[9px] font-black text-rose-600 uppercase tracking-widest mt-1.5 flex items-center gap-1"><i data-lucide="alert-triangle" class="w-3 h-3"></i> Incidencias</p>
+                <div onclick="setFilter('incidencias')" id="f-incidencias" class="stat-card bg-rose-500 rounded-3xl p-4 text-left text-white shadow-lg shadow-rose-200">
+                    <div class="flex justify-between items-start">
+                        <h3 class="text-3xl font-black leading-none" id="countIncidencias">0</h3>
+                        <i data-lucide="alert-circle" class="w-5 h-5 opacity-80"></i>
+                    </div>
+                    <p class="text-[9px] font-black uppercase tracking-widest mt-2">Incidencias</p>
                 </div>
-                <div class="bg-slate-50 rounded-[1.5rem] p-4 border border-slate-100 flex flex-col items-start justify-center">
-                    <h3 class="text-3xl font-black text-slate-800 leading-none" id="countActive">0</h3>
-                    <p class="text-[9px] font-black text-slate-500 uppercase tracking-widest mt-1.5 flex items-center gap-1"><i data-lucide="activity" class="w-3 h-3 text-blue-500"></i> En Proceso</p>
+                <div onclick="setFilter('activos')" id="f-activos" class="stat-card bg-blue-50 rounded-3xl p-4 text-left text-blue-600 active-filter">
+                    <div class="flex justify-between items-start">
+                        <h3 class="text-3xl font-black leading-none" id="countActive">0</h3>
+                        <i data-lucide="activity" class="w-5 h-5 opacity-50"></i>
+                    </div>
+                    <p class="text-[9px] font-black uppercase tracking-widest mt-2">En Proceso</p>
                 </div>
-                <div class="bg-slate-50 rounded-[1.5rem] p-4 border border-slate-100 flex flex-col items-start justify-center">
-                    <h3 class="text-3xl font-black text-slate-800 leading-none" id="countHistory">0</h3>
-                    <p class="text-[9px] font-black text-slate-500 uppercase tracking-widest mt-1.5 flex items-center gap-1"><i data-lucide="archive" class="w-3 h-3 text-emerald-500"></i> Finalizados</p>
+                <div onclick="setFilter('todos')" id="f-todos" class="stat-card bg-slate-50 rounded-3xl p-4 text-left text-slate-400">
+                    <div class="flex justify-between items-start">
+                        <h3 class="text-3xl font-black text-slate-800 leading-none" id="countTotal">0</h3>
+                        <i data-lucide="layout-grid" class="w-5 h-5 opacity-30"></i>
+                    </div>
+                    <p class="text-[9px] font-black uppercase tracking-widest mt-2">Ver Todos</p>
                 </div>
             </div>
         </header>
 
-        <div class="w-full relative z-10">
-            
-            <div id="tabAvisos" class="tab-content active px-5 pt-6 pb-6">
-                
-                <h2 class="text-xs font-black text-slate-400 uppercase tracking-widest mb-4 ml-2 fade-in fade-in-delay-1">Tus Reparaciones</h2>
-                
-                <div id="activeServicesContainer" class="space-y-5 fade-in fade-in-delay-1"></div>
-                
-                <div id="noActiveServices" class="hidden text-center p-8 bg-white rounded-[2.5rem] shadow-sm border border-slate-100 mt-2">
-                    <div class="w-16 h-16 bg-emerald-50 text-emerald-500 rounded-full flex items-center justify-center mx-auto mb-4"><i data-lucide="check-circle-2" class="w-8 h-8"></i></div>
-                    <h3 class="text-lg font-black text-slate-800 tracking-tight">Todo perfecto</h3>
-                    <p class="text-xs text-slate-400 font-medium mt-1">No tienes reparaciones activas en este momento.</p>
-                </div>
+        <div class="px-5 pt-6 pb-20">
+            <div id="tabServicios" class="tab-content active">
+                <div id="servicesWrapper" class="space-y-6"></div>
 
-                <div id="historyContainerWrapper" class="hidden mt-8 fade-in fade-in-delay-2">
-                    <div class="flex items-center gap-3 mb-4 ml-2">
-                        <h3 class="text-xs font-black text-slate-400 uppercase tracking-widest">Historial</h3>
-                        <div class="h-px flex-1 bg-slate-200"></div>
-                    </div>
-                    <div id="historyServicesContainer" class="space-y-4"></div>
+                <div id="historyWrapper" class="hidden mt-10">
+                    <button onclick="toggleHistory()" class="w-full bg-white border border-slate-200 p-5 rounded-[2rem] flex justify-between items-center shadow-sm active:scale-95 transition-all">
+                        <div class="flex items-center gap-3">
+                            <div class="w-10 h-10 bg-slate-50 text-slate-400 rounded-xl flex items-center justify-center border border-slate-100"><i data-lucide="archive" class="w-5 h-5"></i></div>
+                            <div class="text-left">
+                                <span class="block text-xs font-black text-slate-700 uppercase tracking-widest">Historial</span>
+                                <span class="text-[10px] font-bold text-slate-400" id="labelHistoryCount">0 servicios finalizados</span>
+                            </div>
+                        </div>
+                        <i data-lucide="chevron-down" id="historyChevron" class="w-5 h-5 text-slate-300 transition-transform"></i>
+                    </button>
+                    <div id="historyContainer" class="hidden space-y-4 mt-4 pb-10"></div>
                 </div>
             </div>
 
-            <div id="tabPresupuestos" class="tab-content px-5 pt-6 pb-6">
-                <div class="flex justify-between items-center mb-4 ml-2 mr-2">
-                    <h2 class="text-xs font-black text-slate-400 uppercase tracking-widest">Tus Presupuestos</h2>
-                    <span id="badgeQuotesCount" class="text-[9px] font-black bg-blue-100 text-blue-600 px-2 py-0.5 rounded-md hidden">0 NUEVOS</span>
-                </div>
-                
-                <div id="quotesContainer" class="space-y-4">
-                    </div>
+            <div id="tabPresupuestos" class="tab-content">
+                <div id="quotesContainer" class="space-y-4"></div>
             </div>
-
         </div>
     </main>
 
