From 51a454671dead8c0e6c69fc07f0e596e4710e155 Mon Sep 17 00:00:00 2001
From: marsalva <info@marsalva.es>
Date: Sun, 22 Feb 2026 22:02:14 +0000
Subject: [PATCH] Actualizar agenda.html

---
 agenda.html | 37 +++++++++++++++++--------------------
 1 file changed, 17 insertions(+), 20 deletions(-)

diff --git a/agenda.html b/agenda.html
index a0de5b8..13300ad 100644
--- a/agenda.html
+++ b/agenda.html
@@ -161,17 +161,23 @@
 
                 <div>
                     <label class="block text-xs font-black text-slate-600 uppercase tracking-widest mb-3">Duración estimada del trabajo</label>
-                    <div class="grid grid-cols-3 gap-2">
-                        <button type="button" onclick="setDuration(15, this)" class="dur-btn bg-white border-2 border-slate-200 text-slate-600 font-bold py-2 rounded-xl transition-all hover:bg-slate-50">15 min</button>
-                        <button type="button" onclick="setDuration(30, this)" class="dur-btn bg-white border-2 border-slate-200 text-slate-600 font-bold py-2 rounded-xl transition-all hover:bg-slate-50">30 min</button>
-                        <button type="button" onclick="setDuration(45, this)" class="dur-btn bg-white border-2 border-slate-200 text-slate-600 font-bold py-2 rounded-xl transition-all hover:bg-slate-50">45 min</button>
-                        <button type="button" onclick="setDuration(60, this)" class="dur-btn bg-blue-600 border-2 border-blue-600 text-white font-bold py-2 rounded-xl transition-all shadow-md selected">1 hora</button>
-                        <button type="button" onclick="setDuration(90, this)" class="dur-btn bg-white border-2 border-slate-200 text-slate-600 font-bold py-2 rounded-xl transition-all hover:bg-slate-50">1.5 horas</button>
-                        <button type="button" onclick="setDuration(120, this)" class="dur-btn bg-white border-2 border-slate-200 text-slate-600 font-bold py-2 rounded-xl transition-all hover:bg-slate-50">2 horas</button>
-                        <button type="button" onclick="setDuration(180, this)" class="dur-btn bg-white border-2 border-slate-200 text-slate-600 font-bold py-2 rounded-xl transition-all hover:bg-slate-50">3 horas</button>
-                        <button type="button" onclick="setDuration(240, this)" class="dur-btn bg-white border-2 border-slate-200 text-slate-600 font-bold py-2 rounded-xl transition-all hover:bg-slate-50">4 horas</button>
+                    <div class="relative">
+                        <select id="aprvDuration" class="w-full bg-slate-50 border border-slate-200 text-sm font-bold text-slate-700 p-3 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 appearance-none pr-8 cursor-pointer">
+                            <option value="15">15 minutos</option>
+                            <option value="30">30 minutos</option>
+                            <option value="45">45 minutos</option>
+                            <option value="60" selected>1 hora</option>
+                            <option value="75">1 hora 15 min</option>
+                            <option value="90">1 hora 30 min</option>
+                            <option value="105">1 hora 45 min</option>
+                            <option value="120">2 horas</option>
+                            <option value="150">2 horas 30 min</option>
+                            <option value="180">3 horas</option>
+                            <option value="210">3 horas 30 min</option>
+                            <option value="240">4 horas (Máx)</option>
+                        </select>
+                        <i data-lucide="clock" class="w-4 h-4 absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none"></i>
                     </div>
-                    <input type="hidden" id="aprvDuration" value="60">
                 </div>
 
                 <button onclick="submitApproval()" id="btnSubmitAprv" class="w-full bg-slate-900 text-white font-black py-4 rounded-xl shadow-lg hover:bg-blue-600 transition-all uppercase tracking-widest text-xs flex items-center justify-center gap-2">
@@ -277,6 +283,7 @@
         function openApproveModal(id, dateText) {
             document.getElementById('aprvId').value = id;
             document.getElementById('aprvDateText').innerText = dateText;
+            document.getElementById('aprvDuration').value = "60"; // Reset al valor por defecto
             document.getElementById('approveModal').classList.remove('hidden');
         }
 
@@ -284,16 +291,6 @@
             document.getElementById('approveModal').classList.add('hidden');
         }
 
-        function setDuration(mins, btnEl) {
-            document.getElementById('aprvDuration').value = mins;
-            document.querySelectorAll('.dur-btn').forEach(b => {
-                b.classList.remove('bg-blue-600', 'text-white', 'border-blue-600', 'shadow-md', 'selected');
-                b.classList.add('bg-white', 'text-slate-600', 'border-slate-200');
-            });
-            btnEl.classList.remove('bg-white', 'text-slate-600', 'border-slate-200');
-            btnEl.classList.add('bg-blue-600', 'text-white', 'border-blue-600', 'shadow-md', 'selected');
-        }
-
         async function submitApproval() {
             const id = document.getElementById('aprvId').value;
             const duration = document.getElementById('aprvDuration').value;