From b143606baf5d518e0b8258e0abaa2097bba0a6da Mon Sep 17 00:00:00 2001
From: marsalva <info@marsalva.es>
Date: Mon, 2 Mar 2026 22:25:09 +0000
Subject: [PATCH] Actualizar servicios.html

---
 servicios.html | 61 ++++++++++++++++++++++++++------------------------
 1 file changed, 32 insertions(+), 29 deletions(-)

diff --git a/servicios.html b/servicios.html
index 0853175..f7b1fbf 100644
--- a/servicios.html
+++ b/servicios.html
@@ -128,18 +128,18 @@
                 <button onclick="closeCreateModal()" class="text-slate-400 hover:text-red-500 bg-slate-50 p-2 rounded-full transition-colors"><i data-lucide="x" class="w-5 h-5"></i></button>
             </div>
             
-            <form onsubmit="saveNewService(event)" class="flex-1 overflow-y-auto no-scrollbar p-6 bg-slate-50/50">
+<form onsubmit="saveNewService(event)" class="flex-1 overflow-y-auto no-scrollbar p-6 bg-slate-50/50">
     <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
         
         <div class="md:col-span-7 space-y-4">
-            <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm space-y-4">
+            <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-4">
                 <h4 class="font-black text-slate-800 uppercase text-[10px] flex items-center gap-2 border-b border-slate-100 pb-2">
                     <i data-lucide="user" class="w-4 h-4 text-blue-500"></i> Datos del Cliente
                 </h4>
                 <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                     <div>
                         <label class="label-modern">Teléfono</label>
-                        <input type="tel" id="nPhone" oninput="searchClientByPhone(this.value)" placeholder="Ej: 600123456" class="input-modern" required>
+                        <input type="tel" id="nPhone" oninput="searchClientByPhone(this.value)" placeholder="600000000" class="input-modern" required>
                     </div>
                     <div>
                         <label class="label-modern">Nombre Completo</label>
@@ -148,76 +148,79 @@
                 </div>
                 <div>
                     <label class="label-modern">Dirección del Servicio</label>
-                    <input type="text" id="nAddr" placeholder="Calle, número, población..." class="input-modern" required>
+                    <input type="text" id="nAddr" placeholder="Dirección completa..." class="input-modern" required>
                     <div id="addrSuggestions" class="hidden mt-2 p-2 bg-amber-50 border border-amber-200 rounded-lg text-[10px] font-bold text-amber-700">
-                        ⚠️ Este cliente ya tiene otras direcciones registradas.
+                        ⚠️ Cliente con direcciones previas registradas.
                     </div>
                 </div>
 
-                <div class="pt-2 border-t border-slate-100">
-                    <label class="flex items-center gap-3 cursor-pointer group">
+                <div class="pt-4 border-t border-slate-100">
+                    <label class="flex items-center gap-3 cursor-pointer mb-4">
                         <input type="checkbox" id="isCompanyCheck" onchange="toggleCompanyFields(this.checked)" class="w-5 h-5 rounded border-slate-300 text-blue-600 focus:ring-blue-500">
-                        <span class="text-xs font-black text-slate-700 uppercase tracking-tight group-hover:text-blue-600 transition-colors">¿Es de Compañía de Seguros?</span>
+                        <span class="text-xs font-black text-slate-700 uppercase">¿Es de Compañía de Seguros?</span>
                     </label>
                     
-                    <div id="companyFields" class="hidden mt-4 grid grid-cols-1 sm:grid-cols-2 gap-4 p-4 bg-blue-50/50 rounded-xl border border-blue-100 fade-in">
+                    <div id="companyFields" class="hidden space-y-4 p-4 bg-blue-50/30 rounded-xl border border-blue-100 fade-in">
                         <div>
-                            <label class="label-modern">Compañía</label>
-                            <select id="nCompanySelect" class="input-modern">
-                                <option value="">Seleccionar...</option>
+                            <label class="label-modern">Compañía Aseguradora</label>
+                            <select id="nCompanySelect" class="input-modern bg-white">
+                                <option value="">Seleccionar compañía...</option>
                             </select>
                         </div>
                         <div>
                             <label class="label-modern">Nº Expediente / Referencia</label>
-                            <input type="text" id="nExpRef" onblur="checkDuplicateRef(this.value)" placeholder="Ej: 88723X" class="input-modern uppercase">
-                            <p id="refAlert" class="hidden text-[9px] text-red-600 font-bold mt-1 uppercase">⚠️ ¡Referencia ya existente!</p>
+                            <input type="text" id="nExpRef" onblur="checkDuplicateRef(this.value)" placeholder="Ej: ABC-12345" class="input-modern bg-white uppercase">
+                            <p id="refAlert" class="hidden text-[10px] text-red-600 font-bold mt-1 uppercase">⚠️ Esta referencia ya existe en el sistema</p>
                         </div>
                     </div>
                 </div>
             </div>
 
-            <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm">
-                <label class="label-modern">Descripción de la Avería</label>
-                <textarea id="nDesc" placeholder="Describe el problema..." rows="3" class="input-modern resize-none"></textarea>
+            <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
+                <label class="label-modern">Descripción detallada de la avería</label>
+                <textarea id="nDesc" placeholder="Escribe aquí todos los detalles de la reparación..." rows="6" class="input-modern resize-none text-base"></textarea>
             </div>
         </div>
 
         <div class="md:col-span-5 space-y-4">
-            <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm space-y-4">
+            <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-5">
                 <h4 class="font-black text-slate-800 uppercase text-[10px] flex items-center gap-2 border-b border-slate-100 pb-2">
-                    <i data-lucide="clock" class="w-4 h-4 text-purple-500"></i> Gestión
+                    <i data-lucide="settings" class="w-4 h-4 text-purple-500"></i> Gestión y Tiempo
                 </h4>
                 
                 <div>
-                    <label class="label-modern">Gremio</label>
+                    <label class="label-modern">Gremio Especialista</label>
                     <select id="nGuild" class="input-modern" onchange="loadOps(this.value, 'nWorker')">
-                        <option value="">Seleccionar...</option>
+                        <option value="">Seleccionar gremio...</option>
                     </select>
                 </div>
 
                 <div>
-                    <label class="label-modern">Operario</label>
+                    <label class="label-modern">Operario Asignado</label>
                     <select id="nWorker" class="input-modern">
                         <option value="">(Sin asignar)</option>
                     </select>
                 </div>
 
                 <div>
-                    <label class="label-modern">Duración Estimada</label>
+                    <label class="label-modern">Duración Estimada (Nuevas opciones)</label>
                     <select id="nDuration" class="input-modern font-black text-blue-600">
-                        <option value="30">30 MIN (Rápido)</option>
-                        <option value="60" selected>1 HORA (Normal)</option>
-                        <option value="120">2 HORAS (Largo)</option>
-                        <option value="240">4 HORAS (Media Jornada)</option>
+                        <option value="15">15 MINUTOS</option>
+                        <option value="30">30 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>
                 </div>
             </div>
 
-            <div class="space-y-3">
+            <div class="grid grid-cols-1 gap-3">
                 <button type="submit" name="action" value="manual" class="w-full bg-emerald-600 hover:bg-emerald-500 text-white font-black py-4 rounded-2xl text-xs uppercase tracking-widest shadow-lg transition-all active:scale-95">
                     Crear y Guardar
                 </button>
-                <button type="submit" name="action" value="auto" class="w-full bg-slate-800 hover:bg-slate-700 text-white font-black py-4 rounded-2xl text-xs uppercase tracking-widest transition-all active:scale-95 flex items-center justify-center gap-2">
+                <button type="submit" name="action" value="auto" class="w-full bg-slate-900 hover:bg-slate-800 text-white font-black py-4 rounded-2xl text-xs uppercase tracking-widest transition-all active:scale-95 flex items-center justify-center gap-2">
                     <i data-lucide="zap" class="w-4 h-4 text-amber-400"></i> Mandar a la Bolsa
                 </button>
             </div>