From 3fc45ae82cbee9dfe45177e68e88c47423817b0c Mon Sep 17 00:00:00 2001
From: marsalva <info@marsalva.es>
Date: Tue, 24 Feb 2026 21:30:18 +0000
Subject: [PATCH] Actualizar asignados.html

---
 asignados.html | 83 ++++++++++++--------------------------------------
 1 file changed, 20 insertions(+), 63 deletions(-)

diff --git a/asignados.html b/asignados.html
index 7ba6513..0dbd370 100644
--- a/asignados.html
+++ b/asignados.html
@@ -28,7 +28,7 @@
         
         /* Carrusel de fechas */
         .day-chip { transition: all 0.2s; border: 2px solid transparent; }
-        .day-chip.active { background-color: var(--primary) !important; color: white !important; border-color: var(--primary) !important; transform: scale(1.05); shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
+        .day-chip.active { background-color: var(--primary) !important; color: white !important; border-color: var(--primary) !important; transform: scale(1.05); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
         .day-chip.inactive { background-color: #f8fafc; color: #64748b; border-color: #e2e8f0; }
 
         /* Chips de Horas */
@@ -61,8 +61,8 @@
             <div id="requestsSection" class="mb-6 hidden">
                 <h2 class="text-xs font-black text-slate-400 uppercase tracking-widest mb-3 flex items-center gap-2">
                     <span class="relative flex h-2.5 w-2.5">
-                      <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
-                      <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-blue-500"></span>
+                      <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
+                      <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"></span>
                     </span>
                     Citas Solicitadas
                 </h2>
@@ -182,8 +182,8 @@
                 <button onclick="closeModal('approveModal', 'approveModalContent')" class="w-8 h-8 bg-slate-100 rounded-full flex items-center justify-center text-slate-500 hover:text-red-500"><i data-lucide="x" class="w-4 h-4"></i></button>
             </div>
 
-            <div class="bg-blue-50 border border-blue-100 p-5 rounded-2xl mb-6 shadow-inner text-center">
-                <p class="text-[10px] font-black text-blue-600 uppercase tracking-widest mb-1">Fecha Solicitada por el Cliente</p>
+            <div class="bg-slate-50 border border-slate-200 p-5 rounded-2xl mb-6 shadow-inner text-center">
+                <p class="text-[10px] font-black text-emerald-600 uppercase tracking-widest mb-1">Fecha Solicitada por el Cliente</p>
                 <h4 class="text-2xl font-black text-slate-800" id="appDate">--/--/----</h4>
                 <p class="text-sm font-bold text-slate-600 mt-1" id="appTime">--:--</p>
             </div>
@@ -193,7 +193,7 @@
             <div class="mb-8">
                 <p class="text-[10px] font-black text-slate-500 uppercase tracking-widest mb-2 ml-1">¿Cuánto tiempo vas a tardar?</p>
                 <div class="relative">
-                    <select id="appDurationInput" class="w-full bg-slate-50 border border-slate-200 p-4 rounded-xl text-sm font-black text-slate-700 outline-none focus:ring-2 focus:ring-blue-500 appearance-none pr-10">
+                    <select id="appDurationInput" class="w-full bg-slate-50 border border-slate-200 p-4 rounded-xl text-sm font-black text-slate-700 outline-none focus:ring-2 focus:ring-emerald-500 appearance-none pr-10">
                         <option value="15">15 Minutos (Muy rápido)</option>
                         <option value="30">30 Minutos</option>
                         <option value="45">45 Minutos</option>
@@ -211,7 +211,7 @@
                 <button onclick="rejectRequest()" id="btnReject" class="bg-white border-2 border-rose-200 text-rose-600 font-black py-4 rounded-xl hover:bg-rose-50 flex items-center justify-center gap-2 transition-all text-xs uppercase tracking-widest">
                     <i data-lucide="x" class="w-4 h-4"></i> Rechazar
                 </button>
-                <button onclick="approveRequest()" id="btnApprove" class="bg-blue-600 text-white font-black py-4 rounded-xl shadow-lg shadow-blue-500/30 hover:bg-blue-700 flex items-center justify-center gap-2 transition-all text-xs uppercase tracking-widest">
+                <button onclick="approveRequest()" id="btnApprove" class="bg-emerald-500 text-white font-black py-4 rounded-xl shadow-lg shadow-emerald-500/30 hover:bg-emerald-600 flex items-center justify-center gap-2 transition-all text-xs uppercase tracking-widest">
                     <i data-lucide="check" class="w-4 h-4"></i> Aceptar
                 </button>
             </div>
@@ -219,52 +219,9 @@
         </div>
     </div>
 
-    <div id="approveModal" class="fixed inset-0 bg-slate-900/60 z-[110] hidden flex-col justify-end transition-opacity duration-300 opacity-0">
-        <div id="approveModalContent" class="bg-white rounded-t-[2rem] p-6 pb-12 transform translate-y-full transition-transform duration-300 shadow-2xl">
-            <div class="flex justify-between items-center mb-6">
-                <div>
-                    <span id="appRef" class="text-[10px] font-black text-slate-400 uppercase tracking-widest"></span>
-                    <h3 class="font-black text-xl text-slate-800 uppercase leading-none" id="appName"></h3>
-                </div>
-                <button onclick="closeModal('approveModal', 'approveModalContent')" class="w-8 h-8 bg-slate-100 rounded-full flex items-center justify-center text-slate-500 hover:text-red-500"><i data-lucide="x" class="w-4 h-4"></i></button>
-            </div>
-
-            <div class="bg-slate-50 border-2 border-primary-dynamic p-5 rounded-2xl mb-6 shadow-inner text-center relative overflow-hidden">
-                <div class="absolute left-0 top-0 bottom-0 w-2 bg-primary-dynamic"></div>
-                <p class="text-[10px] font-black text-primary-dynamic uppercase tracking-widest mb-1">Fecha Solicitada por el Cliente</p>
-                <h4 class="text-2xl font-black text-slate-800" id="appDate">--/--/----</h4>
-                <p class="text-sm font-bold text-slate-600 mt-1" id="appTime">--:--</p>
-            </div>
-
-            <input type="hidden" id="appId">
-
-            <div class="mb-8">
-                <p class="text-[10px] font-black text-slate-500 uppercase tracking-widest mb-2 ml-1">¿Cuánto tiempo vas a tardar?</p>
-                <div class="relative">
-                    <select id="appDurationInput" class="w-full bg-slate-50 border border-slate-200 p-4 rounded-xl text-sm font-black text-slate-700 outline-none focus:ring-2 focus:ring-primary-dynamic appearance-none pr-10">
-                        <option value="15">15 Minutos (Muy rápido)</option>
-                        <option value="30">30 Minutos</option>
-                        <option value="45">45 Minutos</option>
-                        <option value="60" selected>1 Hora (Estándar)</option>
-                        <option value="90">1 Hora y Media</option>
-                        <option value="120">2 Horas</option>
-                        <option value="180">3 Horas</option>
-                        <option value="240">4 Horas (Media jornada)</option>
-                    </select>
-                    <i data-lucide="chevron-down" class="w-5 h-5 absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none"></i>
-                </div>
-            </div>
-
-            <div class="grid grid-cols-2 gap-3">
-                <button onclick="rejectRequest()" id="btnReject" class="bg-white border-2 border-rose-200 text-rose-600 font-black py-4 rounded-xl hover:bg-rose-50 flex items-center justify-center gap-2 transition-all text-xs uppercase tracking-widest">
-                    <i data-lucide="x" class="w-4 h-4"></i> Rechazar
-                </button>
-                <button onclick="approveRequest()" id="btnApprove" class="bg-primary-dynamic text-white font-black py-4 rounded-xl shadow-lg hover:opacity-90 flex items-center justify-center gap-2 transition-all text-xs uppercase tracking-widest">
-                    <i data-lucide="check" class="w-4 h-4"></i> Aceptar
-                </button>
-            </div>
-            <p class="text-center text-[9px] font-bold text-slate-400 mt-4">Al aceptar, se enviará un WhatsApp al cliente confirmando la cita automáticamente.</p>
-        </div>
+    <div id="toast" class="fixed top-5 left-1/2 -translate-x-1/2 bg-slate-800 text-white px-5 py-3 rounded-full shadow-2xl z-[200] font-bold text-xs uppercase tracking-widest flex items-center gap-2 transition-all duration-300 opacity-0 pointer-events-none transform -translate-y-10">
+        <i data-lucide="check-circle" class="w-4 h-4 text-emerald-400"></i>
+        <span id="toastMsg">Guardado</span>
     </div>
 
     <script>
@@ -370,7 +327,7 @@
             }
         }
 
-// ==========================================
+        // ==========================================
         // RENDERIZADO DE SOLICITUDES PENDIENTES
         // ==========================================
         function renderRequests() {
@@ -391,20 +348,21 @@
                 const rDate = formatDate(raw.requested_date);
                 const rTime = addOneHour(raw.requested_time);
                 
-                // Extraer descripción limpia y teléfono
+                // Extraer descripción y teléfono
                 const desc = raw["Descripción"] || raw["DESCRIPCION"] || "Sin notas de avería.";
                 const rawPhone = raw["Teléfono"] || raw["TELEFONOS"] || raw["TELEFONO"] || "";
                 const matchPhone = rawPhone.toString().match(/[6789]\d{8}/);
                 const safePhone = matchPhone ? matchPhone[0] : "";
 
+                // DISEÑO ACTUALIZADO CON ACENTOS VERDES
                 reqList.innerHTML += `
-                    <div class="bg-white border-2 border-primary-dynamic p-5 rounded-[2rem] flex flex-col shadow-md relative overflow-hidden gap-3">
-                        <div class="absolute right-0 top-0 w-24 h-24 bg-primary-dynamic rounded-bl-full opacity-10 z-0"></div>
+                    <div class="bg-white border-2 border-emerald-400 p-5 rounded-[2rem] flex flex-col shadow-md relative overflow-hidden gap-3">
+                        <div class="absolute right-0 top-0 w-24 h-24 bg-emerald-50 rounded-bl-full opacity-60 z-0"></div>
                         
                         <div class="relative z-10">
-                            <p class="text-[9px] font-black text-primary-dynamic uppercase tracking-widest mb-0.5">Cita Solicitada</p>
+                            <p class="text-[9px] font-black text-emerald-600 uppercase tracking-widest mb-0.5">Cita Solicitada</p>
                             <h3 class="font-black text-slate-800 text-base leading-tight truncate pr-8">${name}</h3>
-                            <p class="text-[10px] font-bold text-slate-600 mt-1 flex items-center gap-1"><i data-lucide="calendar" class="w-3 h-3 text-primary-dynamic"></i> ${rDate} | ${raw.requested_time} - ${rTime}</p>
+                            <p class="text-[10px] font-bold text-slate-600 mt-1 flex items-center gap-1"><i data-lucide="calendar" class="w-3 h-3 text-emerald-500"></i> ${rDate} | ${raw.requested_time} - ${rTime}</p>
                         </div>
 
                         <div class="relative z-10 bg-slate-50 p-3 rounded-2xl border border-slate-100 mt-1">
@@ -412,10 +370,10 @@
                         </div>
 
                         <div class="flex gap-2 relative z-10 mt-1">
-                            <button onclick="quickCallInline('${safePhone}')" class="flex-1 bg-white border border-primary-dynamic text-primary-dynamic hover:bg-slate-50 font-black py-3 rounded-xl flex items-center justify-center gap-1.5 active:scale-95 transition-transform shadow-sm text-[10px] uppercase tracking-widest">
+                            <button onclick="quickCallInline('${safePhone}')" class="flex-1 bg-white border border-slate-200 text-slate-600 hover:bg-slate-50 font-black py-3 rounded-xl flex items-center justify-center gap-1.5 active:scale-95 transition-transform shadow-sm text-[10px] uppercase tracking-widest">
                                 <i data-lucide="phone" class="w-4 h-4"></i> Llamar
                             </button>
-                            <button onclick="openApproveModal(${req.id})" class="flex-1 bg-primary-dynamic text-white hover:opacity-90 font-black py-3 rounded-xl flex items-center justify-center gap-1.5 shadow-md active:scale-95 transition-transform text-[10px] uppercase tracking-widest">
+                            <button onclick="openApproveModal(${req.id})" class="flex-1 bg-emerald-500 text-white hover:bg-emerald-600 font-black py-3 rounded-xl flex items-center justify-center gap-1.5 shadow-md active:scale-95 transition-transform text-[10px] uppercase tracking-widest">
                                 Revisar <i data-lucide="chevron-right" class="w-4 h-4"></i>
                             </button>
                         </div>
@@ -535,7 +493,6 @@
                     </div>`;
                 lucide.createIcons();
                 
-                // Si tampoco hay peticiones, ocultamos el título "Pendientes de fecha"
                 if (pendingRequests.length === 0) {
                     noDateSec.querySelector('h2').classList.add('hidden');
                 } else {
@@ -615,7 +572,7 @@
                 const parts = dateStr.split('-');
                 if(parts.length !== 3) return dateStr;
                 const d = new Date(parts[0], parts[1]-1, parts[2]);
-                const opciones = { weekday: 'long', day: 'numeric', month: 'short' };
+                const opciones = { weekday: 'short', day: 'numeric', month: 'short' };
                 return d.toLocaleDateString('es-ES', opciones);
             } catch(e) { return dateStr; }
         }