diff --git a/servicios.html b/servicios.html index 84319dd..fcc5bbe 100644 --- a/servicios.html +++ b/servicios.html @@ -11,8 +11,9 @@ @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; } - .card-hover:hover { transform: translateY(-3px); transition: all 0.2s; box-shadow: 0 12px 25px -5px rgba(0, 0, 0, 0.1); border-color: #93c5fd; } + .card-hover:hover { transform: translateY(-3px); transition: all 0.2s; box-shadow: 0 12px 25px -5px rgba(0, 0, 0, 0.1); border-color: #3b82f6; } + /* ANIMACIÓN DE TEMBLOR (SHAKE) PARA TARJETAS BLOQUEADAS */ .shake { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; } @keyframes shake { 10%, 90% { transform: translate3d(-2px, 0, 0); } @@ -23,11 +24,11 @@ .pulse-slow { animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } - .input-modern { width: 100%; background-color: #f8fafc; border: 1px solid #e2e8f0; padding: 0.75rem 1rem; border-radius: 0.75rem; font-size: 0.875rem; font-weight: 600; color: #334155; outline: none; transition: all 0.2s; } - .input-modern:focus { border-color: #3b82f6; background-color: #ffffff; box-shadow: 0 0 0 4px #dbeafe; } - .label-modern { display: block; text-transform: uppercase; font-size: 10px; font-weight: 900; color: #64748b; letter-spacing: 0.05em; margin-bottom: 0.375rem; margin-left: 0.25rem; } - - /* Clases para el modo edición */ + /* Estilos base para formularios mejorados */ + .input-modern { @apply w-full bg-slate-50 border border-slate-200 px-4 py-3 rounded-xl text-sm font-semibold text-slate-700 outline-none transition-all focus:border-blue-500 focus:bg-white focus:ring-2 focus:ring-blue-100; } + .label-modern { @apply block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-1.5 ml-1; } + + /* Estilos para el Modo Edición del Modal */ .input-editable { border-bottom: 2px solid #3b82f6 !important; background: #eff6ff !important; border-radius: 0.5rem !important; padding: 4px 8px !important; pointer-events: auto !important; } .input-readonly { border: none !important; background: transparent !important; pointer-events: none; outline: none; } @@ -111,7 +112,7 @@
-
+ @@ -132,11 +133,11 @@
-
+
-
+
-

+

Datos del Cliente

@@ -153,7 +154,7 @@
- +
- +

+ Detalles de la Avería +

+
-
+
-

- Asignación y Tiempo +

+ Asignación y Tiempo

@@ -190,24 +194,31 @@
-
- -
- - +
+
+ +
+ + +
-
- -
- -
- - +
+ +
+ + +
@@ -216,8 +227,18 @@ -
@@ -228,7 +249,8 @@