From c8ad0299503d6ff33a05177a3136e395888c7096 Mon Sep 17 00:00:00 2001
From: BryamE <bryam.cesar18@gmail.com>
Date: Fri, 3 Apr 2026 19:00:13 -0300
Subject: [PATCH] STYLE: - Terminada seccion de ventas para el modo claro.

---
 resources/views/productos/create.blade.php |   2 +-
 resources/views/sales/create.blade.php     | 120 ++++++++++++++-------
 2 files changed, 83 insertions(+), 39 deletions(-)

diff --git a/resources/views/productos/create.blade.php b/resources/views/productos/create.blade.php
index fd17b63..e3e742f 100644
--- a/resources/views/productos/create.blade.php
+++ b/resources/views/productos/create.blade.php
@@ -61,7 +61,7 @@
 
             <!-- Botones Acción -->
             <div class="flex items-center justify-between md:justify-end space-x-4 border-t border-neutral-400 dark:border-neutral-700 pt-6">
-                <a href="{{ route('productos.index') }}" class="text-gray-700 dark:text-gray-400 hover:text-black hover:dark:text-white font-medium text-sm transition-colors">Cancelar</a>
+                <a href="{{ route('productos.index') }}" class="px-4 py-2.5 text-red-500 border border-red-500 hover:bg-red-500 hover:text-white rounded-lg font-semibold text-sm transition-colors">Cancelar</a>
                 <button type="submit" class="px-6 py-2.5 bg-neutral-900 dark:bg-neon-lime text-neon-lime dark:text-neutral-900 font-bold rounded-lg hover:bg-neutral-800 hover:dark:bg-[#b3e600] transition-colors shadow-lg dark:shadow-neon-lime/20">
                     Guardar
                 </button>
diff --git a/resources/views/sales/create.blade.php b/resources/views/sales/create.blade.php
index bfdacea..7a16985 100644
--- a/resources/views/sales/create.blade.php
+++ b/resources/views/sales/create.blade.php
@@ -1,36 +1,85 @@
 <x-layout title="Lauck - Nueva Venta">
     @push('styles')
     <style>
-        /* Select2 adaptado al Tema 'Lauck' (Neutral + Neon Lime) */
+        /* === MODO CLARO === */
+        /* Contenedor principal del input */
         .select2-container--default .select2-selection--single {
-            background-color: #262626 !important; /* neutral-800 */
-            border-color: #404040 !important;     /* neutral-700 */
-            color: white !important;
-            height: 42px;
+            background-color: #d1d5dc !important; /* Fondo blanco */
+            border: 1px solid #a1a1a1 !important; /* Borde gray-300 */
+            color: #111827 !important;            /* Texto casi negro (gray-900) */
+            height: 32px !important;
+            padding: 0 0.5rem;
             display: flex;
             align-items: center;
             border-radius: 0.5rem; /* rounded-lg */
+            transition: all 0.3s ease;
         }
+        /* Texto seleccionado */
         .select2-container--default .select2-selection--single .select2-selection__rendered { 
-            color: white !important; 
-            line-height: 42px; 
+            color: #111827 !important; 
+            line-height: 32px !important; 
             padding-left: 12px;
         }
+        /* La caja desplegable (Dropdown) */
         .select2-dropdown { 
-            background-color: #262626 !important; /* neutral-800 */
-            border-color: #404040 !important;     /* neutral-700 */
-            color: white !important; 
+            background-color: #d1d5dc !important; 
+            border: 1px solid #d1d5db !important; 
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); /* Sombra suave para modo claro */
         }
-        /* Color de resalto al pasar el mouse u opción seleccionada */
+        /* Opciones de la lista (texto normal) */
+        .select2-results__option {
+            color: #374151 !important; /* gray-700 */
+        }
+        /* Placeholder */
+        .select2-container--default .select2-selection--single .select2-selection__placeholder {
+            color: #6b7280 !important; /* gray-500 */
+        }
+        /* Input de búsqueda interno */
+        .select2-search--dropdown .select2-search__field {
+            background-color: #f3f4f6 !important; /* gray-100 */
+            color: #111827 !important;
+            border: 1px solid #d1d5db !important;
+            border-radius: 0.375rem !important;
+            padding: 6px 12px !important;
+            outline: none;
+        }
+        /* Color de resalto (Hover o Navegación con teclado). Mantenemos tu color de marca */
         .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { 
             background-color: #ccff00 !important; /* neon-lime */
             color: #171717 !important; /* neutral-900 */
             font-weight: bold;
         }
-        /* Ajuste del placeholder */
-        .select2-container--default .select2-selection--single .select2-selection__placeholder {
+
+        /* === MODO OSCURO === */
+        /* Contenedor principal */
+        :is(.dark) .select2-container--default .select2-selection--single {
+            background-color: #262626 !important; /* neutral-800 */
+            border-color: #404040 !important;     /* neutral-700 */
+        }
+        /* Texto seleccionado oscuro */
+        :is(.dark) .select2-container--default .select2-selection--single .select2-selection__rendered { 
+            color: white !important; 
+        }
+        /* Caja desplegable oscura */
+        :is(.dark) .select2-dropdown { 
+            background-color: #262626 !important; 
+            border-color: #404040 !important; 
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5); /* Sombra más fuerte */
+        }
+        /* Opciones de la lista oscura */
+        :is(.dark) .select2-results__option {
+            color: #d4d4d4 !important; /* gray-300 */
+        }
+        /* Placeholder oscuro */
+        :is(.dark) .select2-container--default .select2-selection--single .select2-selection__placeholder {
             color: #9ca3af !important; /* gray-400 */
         }
+        /* Input de búsqueda interno oscuro */
+        :is(.dark) .select2-search--dropdown .select2-search__field {
+            background-color: #171717 !important; /* neutral-900 */
+            color: white !important;
+            border-color: #404040 !important;
+        }
     </style>
     @endpush
 
@@ -48,11 +97,11 @@
         </div>
     @endif
 
-    <div class="w-full max-w-5xl mx-auto bg-panel-bg border border-neutral-800 rounded-xl p-8 shadow-lg">
+    <div class="w-full max-w-5xl mx-auto bg-gray-200 dark:bg-panel-bg border border-neutral-400 dark:border-neutral-800 rounded-xl p-8 shadow-lg">
         <form action="{{ route('sales.store') }}" method="POST">
             @csrf
 
-            <div class="grid grid-cols-1 md:grid-cols-12 gap-6 mb-4 border-b border-neutral-700 pb-8">
+            <div class="grid grid-cols-1 md:grid-cols-12 gap-6 mb-4 border-b border-neutral-400 dark:border-neutral-700 pb-8">
                 <div class="md:col-span-10">
                     <x-forms.label for="client_id" value="Cliente" />
                     <div class="relative">
@@ -65,26 +114,24 @@
                     </div>
                 </div>
                 <div class="md:col-span-2 flex items-end mb-1">
-                    <a href="{{ route('clients.create', ['origin' => 'sales']) }}" target="_blank" 
-                        class="inline-flex items-center text-neon-lime hover:text-[#b3e600] font-bold text-sm transition-colors"
-                        title="Crear nuevo cliente">+ Nuevo Cliente</a>
+                    <a href="{{ route('clients.create', ['origin' => 'sales']) }}" target="_blank" class="inline-flex items-center dark:text-neon-lime text-lime-700/80 hover:text-lime-500 dark:hover:text-[#b3e600] font-bold text-sm transition-colors" title="Crear nuevo cliente">+ Nuevo Cliente</a>
                 </div>
             </div>
 
             <div class="mb-4">
                 <div class="flex justify-between items-end mb-4">
                     <x-forms.label value="Detalle de Productos" />
-                    <div class="text-sm text-gray-400">
-                        Total Items: <span class="text-white font-mono" id="item-count">1</span>
+                    <div class="text-sm dark:text-gray-400 text-neutral-800">
+                        Total Items: <span class="dark:text-white font-mono font-bold" id="item-count">1</span>
                     </div>
                 </div>
                 
                 <div id="items-container" class="space-y-3">
                     
-                    <div class="item-row grid grid-cols-1 md:grid-cols-12 gap-4 items-start bg-neutral-800/50 p-4 rounded-xl border border-neutral-800">
+                    <div class="item-row grid grid-cols-1 md:grid-cols-12 gap-4 items-start bg-neutral-300/50 dark:bg-neutral-700/50 p-4 rounded-xl border dark:border-neutral-800 border-gray-400">
                         
                         <div class="md:col-span-6">
-                            <label class="block text-gray-400 text-xs mb-1.5 uppercase tracking-wider font-semibold">Producto</label>
+                            <x-forms.label value="Producto" />
                             <select name="items[0][product_id]" class="w-full select2-product product-select">
                                 <option value="" data-price="0" selected disabled>Buscar producto...</option>
                                 @foreach($products as $product)
@@ -96,18 +143,17 @@
                         </div>
 
                         <div class="md:col-span-2">
-                            <label class="block text-gray-400 text-xs mb-1.5 uppercase tracking-wider font-semibold">Cant.</label>
-                            <input type="number" name="items[0][quantity]" value="1" min="1" 
-                                   class="quantity-input bg-neutral-800 border-neutral-700 border rounded-lg text-white text-sm focus:ring-neon-lime focus:border-neon-lime block w-full p-1 px-2 h-7">
+                            <x-forms.label value="Cant."/>
+                            <x-forms.input type="number" name="items[0][quantity]" value="1" min="1" class="quantity-input border rounded-lg block w-full py-1! px-2"/>
                         </div>
 
                         <div class="md:col-span-3 text-right flex flex-col justify-center h-[42px] mt-6">
-                            <span class="text-xs text-gray-500">Subtotal</span>
-                            <span class="row-total text-lg font-bold text-neon-lime">$0.00</span>
+                            <span class="text-xs dark:text-gray-400 text-gray-700">Subtotal</span>
+                            <span class="row-total text-lg font-bold text-lime-700 dark:text-neon-lime">$0.00</span>
                         </div>
 
                         <div class="md:col-span-1 flex items-end justify-end h-[42px] mt-6">
-                            <button type="button" class="btn-remove text-neutral-500 hover:text-red-500 transition-colors p-2" title="Quitar item">
+                            <button type="button" class="btn-remove dark:text-neutral-400 text-neutral-600 hover:text-red-500 hover:dark:text-red-400 transition-colors p-2" title="Quitar item">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                 </svg>
@@ -117,7 +163,7 @@
                 </div>
 
                 <div class="mt-4">
-                    <button type="button" id="btn-add-row" class="inline-flex items-center text-neon-lime hover:text-[#b3e600] font-bold text-sm transition-colors">
+                    <button type="button" id="btn-add-row" class="inline-flex items-center dark:text-neon-lime text-lime-600 dark:hover:text-[#b3e600] hover:text-lime-500 font-bold text-sm transition-colors">
                         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
                             <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
                         </svg>
@@ -125,19 +171,19 @@
                     </button>
                 </div>
 
-                <div class="mt-5 flex justify-end items-center border-t border-neutral-700 pt-6">
+                <div class="mt-5 flex justify-end items-center border-t border-neutral-400 dark:border-neutral-700 pt-6">
                     <div class="text-right">
-                        <span class="block text-gray-400 text-sm mb-1">Monto Total a Pagar</span>
-                        <span id="grand-total" class="text-3xl font-bold text-white">$0.00</span>
+                        <span class="block text-gray-600 dark:text-gray-400 text-sm mb-1">Monto Total a Pagar</span>
+                        <span id="grand-total" class="text-3xl font-bold">$0.00</span>
                     </div>
                 </div>
             </div>
 
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-end border-t border-neutral-800 pt-6">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-end border-t border-neutral-400 dark:border-neutral-700 pt-6">
                 
                 <div>
                     <x-forms.label for="payment_method" value="Método de Pago" />
-                    <select name="payment_method" class="bg-neutral-800 border-neutral-700 text-white text-sm rounded-lg focus:ring-neon-lime focus:border-neon-lime block w-full p-2.5">
+                    <select name="payment_method" class="bg-gray-300 dark:bg-neutral-800 border border-neutral-400 dark:border-neutral-700 text-sm rounded-lg focus:ring-neon-lime focus:border-neon-lime block w-full p-2.5">
                         <option value="Efectivo">Efectivo</option>
                         <option value="Tarjeta de Débito">Tarjeta de Débito</option>
                         <option value="Tarjeta de Crédito">Tarjeta de Crédito</option>
@@ -146,10 +192,8 @@
                 </div>
 
                 <div class="flex justify-end gap-4">
-                    <a href="{{ route('sales.index') }}" class="px-6 py-2.5 text-gray-400 hover:text-white font-medium text-sm transition-colors flex items-center">
-                        Cancelar
-                    </a>
-                    <button type="submit" class="px-8 py-2.5 bg-neon-lime text-neutral-900 font-bold rounded-lg hover:bg-[#b3e600] transition-colors shadow-lg shadow-neon-lime/20 transform hover:scale-105">
+                    <a href="{{ route('sales.index') }}" class="px-4 py-2.5 text-red-500 border border-red-500 hover:bg-red-500 hover:text-white rounded-lg font-semibold text-sm transition-colors flex items-center">Cancelar</a>
+                    <button type="submit" class="px-8 py-2.5 bg-neutral-900 dark:bg-neon-lime text-neon-lime dark:text-neutral-900 font-bold rounded-lg hover:bg-neutral-800 hover:dark:bg-[#b3e600] transition-colors shadow-lg dark:shadow-neon-lime/20">
                         Confirmar Venta
                     </button>
                 </div>