From 2ead395820cacceaff0cc8f14048113d194076c2 Mon Sep 17 00:00:00 2001
From: marsalva <info@marsalva.es>
Date: Sun, 22 Feb 2026 22:09:18 +0000
Subject: [PATCH] Actualizar asignados.html

---
 asignados.html | 82 ++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 69 insertions(+), 13 deletions(-)
diff --git a/asignados.html b/asignados.html
index dcea4d2..28aa176 100644
--- a/asignados.html
+++ b/asignados.html
@@ -7,19 +7,31 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/lucide@latest"></script>
     <style>
-        body { background-color: #f4f7f9; -webkit-tap-highlight-color: transparent; }
+        /* VARIABLES CORPORATIVAS DINÁMICAS */
+        :root {
+            --primary: #f59e0b; /* En asignados.html predomina el ambar por defecto */
+            --secondary: #2563eb;
+            --app-bg: #f4f7f9;
+        }
+
+        body { background-color: var(--app-bg); -webkit-tap-highlight-color: transparent; }
         .fade-in { animation: fadeIn 0.3s ease-out forwards; }
         @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
         .no-scrollbar::-webkit-scrollbar { display: none; }
         .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
         .bottom-nav-safe { padding-bottom: env(safe-area-inset-bottom); }
+
+        /* Clases dinámicas */
+        .text-primary-dynamic { color: var(--primary) !important; }
+        .bg-primary-dynamic { background-color: var(--primary) !important; }
+        .border-primary-dynamic { border-color: var(--primary) !important; }
     </style>
 </head>
 <body class="text-slate-800 font-sans antialiased h-screen flex flex-col overflow-hidden relative">
 
     <header class="bg-white px-5 pt-8 pb-4 shadow-sm z-20 shrink-0 border-b border-slate-100 flex justify-between items-center">
         <div>
-            <p class="text-[10px] font-black text-amber-500 uppercase tracking-widest mb-0.5">Por Agendar</p>
+            <p class="text-[10px] font-black text-primary-dynamic uppercase tracking-widest mb-0.5">Por Agendar</p>
             <h1 class="text-2xl font-black tracking-tight text-slate-800 leading-none">Sin Cita</h1>
         </div>
         <a href="menu.html" class="w-10 h-10 bg-slate-50 rounded-full flex items-center justify-center text-slate-600 border border-slate-200 active:bg-slate-100 transition-colors">
@@ -29,7 +41,7 @@
 
     <main class="flex-1 overflow-y-auto no-scrollbar p-5 relative z-10" id="mainArea">
         <div id="loader" class="text-center py-10 opacity-50">
-            <i data-lucide="loader-2" class="w-8 h-8 animate-spin mx-auto text-amber-500 mb-2"></i>
+            <i data-lucide="loader-2" class="w-8 h-8 animate-spin mx-auto text-primary-dynamic mb-2"></i>
             <p class="text-xs font-bold uppercase tracking-widest">Buscando pendientes...</p>
         </div>
         
@@ -39,15 +51,15 @@
 
     <nav class="bg-white border-t border-slate-200 shrink-0 pb-safe z-20 absolute bottom-0 w-full shadow-[0_-10px_30px_rgba(0,0,0,0.05)] rounded-t-3xl">
         <div class="flex justify-around items-center p-3 bottom-nav-safe">
-            <a href="menu.html" class="flex flex-col items-center p-2 text-slate-400 hover:text-amber-600 transition-transform active:scale-95">
+            <a href="menu.html" class="flex flex-col items-center p-2 text-slate-400 hover:text-primary-dynamic transition-transform active:scale-95">
                 <i data-lucide="layout-grid" class="w-6 h-6 mb-1"></i>
                 <span class="text-[9px] font-black uppercase tracking-widest">Inicio</span>
             </a>
-            <a href="calendario.html" class="flex flex-col items-center p-2 text-slate-400 hover:text-amber-600 transition-transform active:scale-95">
+            <a href="calendario.html" class="flex flex-col items-center p-2 text-slate-400 hover:text-primary-dynamic transition-transform active:scale-95">
                 <i data-lucide="calendar-days" class="w-6 h-6 mb-1"></i>
                 <span class="text-[9px] font-black uppercase tracking-widest">Agenda</span>
             </a>
-            <button onclick="refreshData()" class="flex flex-col items-center p-2 text-amber-600 transition-transform active:scale-95">
+            <button onclick="refreshData()" class="flex flex-col items-center p-2 text-primary-dynamic transition-transform active:scale-95">
                 <i data-lucide="refresh-cw" class="w-6 h-6 mb-1"></i>
                 <span class="text-[9px] font-black uppercase tracking-widest">Recargar</span>
             </button>
@@ -86,13 +98,32 @@
 
             <hr class="border-slate-100 mb-6">
 
-            <p class="text-[10px] font-black text-amber-500 uppercase tracking-widest mb-3">Establecer Cita</p>
-            <div class="grid grid-cols-2 gap-3 mb-4">
+            <p class="text-[10px] font-black text-primary-dynamic uppercase tracking-widest mb-3 flex items-center gap-1.5"><i data-lucide="calendar-clock" class="w-4 h-4"></i> Establecer Cita</p>
+            
+            <div class="grid grid-cols-2 gap-3 mb-3">
                 <input type="date" id="dateInput" class="w-full bg-white border border-slate-200 p-4 rounded-2xl text-sm font-bold text-slate-700 shadow-inner outline-none focus:ring-2 focus:ring-amber-500 transition-all">
                 <input type="time" id="timeInput" class="w-full bg-white border border-slate-200 p-4 rounded-2xl text-sm font-bold text-slate-700 shadow-inner outline-none focus:ring-2 focus:ring-amber-500 transition-all">
             </div>
 
-            <button onclick="saveAppointment()" id="btnSaveAppt" class="w-full bg-amber-500 text-white font-black py-4 rounded-2xl shadow-lg shadow-amber-200 active:scale-95 transition-transform flex items-center justify-center gap-2 uppercase tracking-widest text-xs">
+            <div class="mb-6 relative">
+                <select id="durationInput" class="w-full bg-white border border-slate-200 p-4 rounded-2xl text-sm font-bold text-slate-700 shadow-inner outline-none focus:ring-2 focus:ring-amber-500 transition-all appearance-none pr-10 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-5 h-5 absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none"></i>
+            </div>
+
+            <button onclick="saveAppointment()" id="btnSaveAppt" class="w-full bg-primary-dynamic text-white font-black py-4 rounded-2xl shadow-lg active:scale-95 transition-transform flex items-center justify-center gap-2 uppercase tracking-widest text-xs">
                 <i data-lucide="check-circle" class="w-5 h-5"></i> Confirmar Cita
             </button>
             
@@ -112,10 +143,33 @@
         let localServices = [];
         let systemStatuses = [];
 
-        document.addEventListener("DOMContentLoaded", () => {
+        // --- SISTEMA DE TEMA DINÁMICO ---
+        async function applyTheme() {
+            try {
+                let theme = JSON.parse(localStorage.getItem('app_theme'));
+                const res = await fetch(`${API_URL}/config/company`, { 
+                    headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } 
+                });
+                const data = await res.json();
+                if(data.ok && data.config && data.config.portal_settings && data.config.portal_settings.app_settings) {
+                    theme = data.config.portal_settings.app_settings;
+                    localStorage.setItem('app_theme', JSON.stringify(theme));
+                }
+                if(theme) {
+                    // En asignados solemos destacar el secundario o primary, lo adaptamos:
+                    document.documentElement.style.setProperty('--primary', theme.primary);
+                    document.documentElement.style.setProperty('--secondary', theme.secondary);
+                    document.documentElement.style.setProperty('--app-bg', theme.bg);
+                }
+            } catch (e) { console.warn("Usando tema por defecto"); }
+        }
+
+        document.addEventListener("DOMContentLoaded", async () => {
             if (!localStorage.getItem("token") || localStorage.getItem("role") !== 'operario') {
                 window.location.href = "index.html"; return;
             }
+            
+            await applyTheme();
             lucide.createIcons();
             loadStatuses();
             refreshData();
@@ -234,9 +288,10 @@
             const matchPhone = rawPhone.toString().match(/[6789]\d{8}/);
             document.getElementById('detPhoneRaw').value = matchPhone ? matchPhone[0] : "";
 
-            // Limpiar inputs de fecha
+            // Limpiar inputs de fecha y poner duración por defecto
             document.getElementById('dateInput').value = "";
             document.getElementById('timeInput').value = "";
+            document.getElementById('durationInput').value = "60"; 
 
             // Mostrar modal con animación
             const modal = document.getElementById('actionModal');
@@ -278,6 +333,7 @@
             const id = document.getElementById('detId').value;
             const date = document.getElementById('dateInput').value;
             const time = document.getElementById('timeInput').value;
+            const duration = document.getElementById('durationInput').value;
 
             if (!date || !time) return alert("Selecciona fecha y hora para agendar.");
 
@@ -295,13 +351,13 @@
                 const res = await fetch(`${API_URL}/services/set-appointment/${id}`, {
                     method: 'PUT',
                     headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
-                    body: JSON.stringify({ date: date, time: time, status_operativo: statusToSave })
+                    body: JSON.stringify({ date: date, time: time, duration_minutes: duration, status_operativo: statusToSave })
                 });
                 
                 if (res.ok) {
                     showToast("Cita guardada correctamente");
                     closeModal();
-                    // Como ahora tiene fecha, desaparecerá de esta lista
+                    // Como ahora tiene fecha, desaparecerá de esta lista y se irá al calendario
                     refreshData(); 
                 } else {
                     alert("Error al guardar la cita.");
