diff --git a/cita.html b/cita.html
index 73f6ee6..de2000f 100644
--- a/cita.html
+++ b/cita.html
@@ -10,8 +10,17 @@
         body { background-color: #f8fafc; }
         .fade-in { animation: fadeIn 0.4s ease-out forwards; }
         @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
+        
+        .no-scrollbar::-webkit-scrollbar { display: none; }
+        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
+
         .slot-btn { transition: all 0.2s; }
         .slot-btn.selected { background-color: #2563eb; color: white; border-color: #2563eb; transform: scale(1.02); box-shadow: 0 4px 12px rgba(37,99,235,0.2); }
+        
+        /* Estilos para los días del carrusel */
+        .day-chip { transition: all 0.2s; border: 2px solid transparent; }
+        .day-chip.active { background-color: #2563eb !important; color: white !important; border-color: #2563eb !important; transform: scale(1.05); box-shadow: 0 4px 10px rgba(37,99,235,0.2); }
+        .day-chip.inactive { background-color: white; color: #475569; border-color: #e2e8f0; }
     </style>
 </head>
 <body class="text-slate-800 font-sans antialiased min-h-screen flex flex-col items-center">
@@ -48,10 +57,9 @@
 
             <div id="step2" class="hidden space-y-6 fade-in">
                 <div>
-                    <h3 class="font-black text-slate-800 uppercase tracking-widest text-xs mb-2">1. Elige un día disponible</h3>
-                    <select id="daySelect" onchange="renderSlots()" class="w-full bg-white border-2 border-slate-200 p-4 rounded-2xl font-bold text-slate-700 outline-none focus:border-blue-500 shadow-sm cursor-pointer">
-                        <option value="">Selecciona un día...</option>
-                    </select>
+                    <h3 class="font-black text-slate-800 uppercase tracking-widest text-xs mb-3">1. Elige un día disponible</h3>
+                    <div id="dayCarousel" class="flex overflow-x-auto gap-3 pb-2 no-scrollbar">
+                        </div>
                 </div>
 
                 <div id="hoursContainer" class="hidden space-y-4 fade-in">
@@ -90,6 +98,7 @@
         let currentPreference = null;
         let selectedDate = null;
         let selectedTime = null;
+        let filteredDays = [];
 
         document.addEventListener("DOMContentLoaded", async () => {
             lucide.createIcons();
@@ -118,10 +127,11 @@
 
         function selectPreference(pref) {
             currentPreference = pref;
+            selectedDate = null;
             selectedTime = null;
             updateConfirmButton();
 
-            // UI feedback
+            // UI feedback botones principales
             document.getElementById('btnMorning').classList.remove('border-blue-500', 'bg-blue-50');
             document.getElementById('btnAfternoon').classList.remove('border-blue-500', 'bg-blue-50');
             
@@ -130,20 +140,49 @@
 
             document.getElementById('step2').classList.remove('hidden');
             
-            // Llenar el selector de días solo con los días que tengan huecos en esa preferencia
-            const select = document.getElementById('daySelect');
-            select.innerHTML = '<option value="">Selecciona un día...</option>';
-            
-            agendaData.forEach(day => {
-                const hasSlots = pref === 'morning' ? day.morning.length > 0 : day.afternoon.length > 0;
-                if (hasSlots) {
-                    select.innerHTML += `<option value="${day.date}" class="uppercase">${day.displayDate}</option>`;
-                }
+            // Filtrar los días que sí tienen huecos para esta preferencia (mañana o tarde)
+            filteredDays = agendaData.filter(day => {
+                return pref === 'morning' ? day.morning.length > 0 : day.afternoon.length > 0;
             });
 
+            renderDayCarousel();
             document.getElementById('hoursContainer').classList.add('hidden');
         }
 
+        // --- RENDERIZAR CARRUSEL DE DÍAS ---
+        function renderDayCarousel() {
+            const carousel = document.getElementById('dayCarousel');
+            carousel.innerHTML = "";
+
+            if (filteredDays.length === 0) {
+                carousel.innerHTML = '<p class="text-sm text-slate-500 italic p-2">No hay rutas disponibles en este turno para los próximos días.</p>';
+                return;
+            }
+
+            filteredDays.forEach(day => {
+                // Extraer un formato corto para el chip (ej: "Lun 15")
+                const dObj = new Date(day.date);
+                const dayNameShort = dObj.toLocaleDateString('es-ES', { weekday: 'short' }).replace('.', '');
+                const dayNum = dObj.getDate();
+
+                const isSelected = day.date === selectedDate;
+                
+                carousel.innerHTML += `
+                    <button onclick="selectDay('${day.date}')" class="day-chip flex flex-col items-center justify-center min-w-[4.5rem] p-3 rounded-2xl shrink-0 ${isSelected ? 'active' : 'inactive'}">
+                        <span class="text-[10px] font-black uppercase opacity-80">${dayNameShort}</span>
+                        <span class="text-xl font-black leading-none mt-1">${dayNum}</span>
+                    </button>
+                `;
+            });
+        }
+
+        function selectDay(dateStr) {
+            selectedDate = dateStr;
+            selectedTime = null;
+            renderDayCarousel(); // Repintar para marcar como activo
+            renderSlots();
+        }
+
         // --- FUNCIÓN HELPER PARA SUMAR 1 HORA ---
         function addOneHour(timeStr) {
             let [h, m] = timeStr.split(':').map(Number);
@@ -154,8 +193,6 @@
         }
 
         function renderSlots() {
-            selectedDate = document.getElementById('daySelect').value;
-            selectedTime = null;
             updateConfirmButton();
 
             if (!selectedDate) {
