{{-- 1. Modal Crear/Editar Producto (Premium) --}}
<div x-data="{ 
                                                                                                                                open: false, 
                                                                                                                                isEditing: false,
                                                                                                                                activeTab: 'Frutas',
                                                                                                                                 iconCategories: {
                                                                                                                                     'Frutas': [
                                                                                                                                         {i:'🍎', n:'Manzana Roja'}, {i:'🍏', n:'Manzana Verde'}, {i:'🍐', n:'Pera'}, {i:'🍊', n:'Mandarina'}, {i:'🍋', n:'Limón'}, 
                                                                                                                                         {i:'🍒', n:'Cereza'}, {i:'🍌', n:'Banano'}, {i:'🍉', n:'Sandía'}, {i:'🍇', n:'Uva'}, {i:'🍓', n:'Fresa'}, 
                                                                                                                                         {i:'🫐', n:'Arándano/Mora'}, {i:'🍑', n:'Durazno'}, {i:'🟣', n:'Ciruela'}, {i:'🥭', n:'Mango'}, 
                                                                                                                                         {i:'🍍', n:'Piña'}, {i:'🥥', n:'Coco'}, {i:'🥝', n:'Kiwi'}, {i:'🍈', n:'Melón/Granadilla'}, {i:'🔴', n:'Granada'}, {i:'🟢', n:'Uva Verde'}
                                                                                                                                     ],
                                                                                                                                     'Verduras': [
                                                                                                                                         {i:'🍅', n:'Tomate'}, {i:'🥑', n:'Aguacate'}, {i:'🍄', n:'Hongo/Orellana'}, {i:'🥦', n:'Brócoli'}, {i:'🥬', n:'Lechuga'}, 
                                                                                                                                         {i:'🥒', n:'Pepino'}, {i:'🌶️', n:'Chile'}, {i:'🫑', n:'Pimentón'}, {i:'🌽', n:'Maíz'}, {i:'🥕', n:'Zanahoria'}, 
                                                                                                                                         {i:'🫒', n:'Aceituna'}, {i:'🧄', n:'Ajo'}, {i:'🧅', n:'Cebolla'}, {i:'🥔', n:'Papa'}, {i:'🍠', n:'Batata'},
                                                                                                                                         {i:'🌿', n:'Hierbas/Cilantro'}
                                                                                                                                     ],
                                                                                                                                     'Frescos': [
                                                                                                                                         {i:'🧀', n:'Queso'}, {i:'🍖', n:'Carne'}, {i:'🍗', n:'Pollo/Patitas'}, {i:'🥩', n:'Filete'}, {i:'🥓', n:'Tocino'}, 
                                                                                                                                         {i:'🥚', n:'Huevo'}, {i:'🍳', n:'Cocinado'}, {i:'🧈', n:'Mantequilla/Ghee'}, {i:'🥛', n:'Leche'}, {i:'🍼', n:'Biberón'}
                                                                                                                                     ],
                                                                                                                                     'Panadería': [
                                                                                                                                         {i:'🥐', n:'Croissant'}, {i:'🥖', n:'Baguette'}, {i:'🍞', n:'Pan'}, {i:'🥨', n:'Pretzel'}, {i:'🥯', n:'Bagel'}, 
                                                                                                                                         {i:'🥞', n:'Hotcakes'}, {i:'🧇', n:'Waffle'}, {i:'🥣', n:'Granola'}, {i:'🍪', n:'Galleta'}
                                                                                                                                     ],
                                                                                                                                     'Comidas': [
                                                                                                                                         {i:'🍔', n:'Hamburguesa'}, {i:'🍟', n:'Papas Fritas'}, {i:'🍕', n:'Pizza'}, {i:'🌭', n:'Hot Dog'}, {i:'🥪', n:'Sandwich'}, 
                                                                                                                                         {i:'🌮', n:'Taco'}, {i:'🌯', n:'Burrito'}, {i:'🫔', n:'Tamal'}, {i:'🥙', n:'Kebab'}, {i:'🧆', n:'Falafel'}, 
                                                                                                                                         {i:'🥘', n:'Cazuela'}, {i:'🍲', n:'Sopa'}, {i:'🫕', n:'Fondue'}, {i:'🥣', n:'Plato'}, {i:'🥗', n:'Ensalada'}, 
                                                                                                                                         {i:'🍱', n:'Bento'}, {i:'🍘', n:'Galleta Arroz'}, {i:'🍙', n:'Onigiri'}, {i:'🍚', n:'Arroz'}, {i:'🍛', n:'Curry'}, 
                                                                                                                                         {i:'🍜', n:'Ramen'}, {i:'🥟', n:'Dumpling'}, {i:'🍤', n:'Camarón'}, {i:'🍣', n:'Sushi'}, {i:'🦑', n:'Calamar'}, 
                                                                                                                                         {i:'🥠', n:'Galleta Suerte'}, {i:'🍢', n:'Oden'}, {i:'🍡', n:'Dango'}
                                                                                                                                     ],
                                                                                                                                     'Postres': [
                                                                                                                                         {i:'🍧', n:'Granizado'}, {i:'🍨', n:'Helado'}, {i:'🍦', n:'Cono'}, {i:'🥧', n:'Pie'}, {i:'🧁', n:'Cupcake'}, 
                                                                                                                                         {i:'🍰', n:'Pastel'}, {i:'🎂', n:'Torta'}, {i:'🍮', n:'Flan'}, {i:'🍭', n:'Paleta'}, {i:'🍬', n:'Caramelo'}, 
                                                                                                                                         {i:'🍫', n:'Chocolate/Cacao'}, {i:'🍩', n:'Dona'}, {i:'🍪', n:'Galleta'}, {i:'🌰', n:'Castaña'}, {i:'🥜', n:'Maní'}, 
                                                                                                                                         {i:'🍯', n:'Miel'}
                                                                                                                                     ],
                                                                                                                                     'Bebidas': [
                                                                                                                                         {i:'☕', n:'Café'}, {i:'🫖', n:'Tetera'}, {i:'🍵', n:'Té'}, {i:'🧃', n:'Jugo'}, {i:'🥤', n:'Soda'}, 
                                                                                                                                         {i:'🧋', n:'Bubble Tea'}, {i:'🍶', n:'Sake'}, {i:'🍺', n:'Cerveza'}, {i:'🍻', n:'Brindis'}, {i:'🥂', n:'Copas'}, 
                                                                                                                                         {i:'🍷', n:'Vino'}, {i:'🥃', n:'Whisky'}, {i:'🍸', n:'Coctel'}, {i:'🍹', n:'Tropical'}, {i:'🧉', n:'Mate'}, 
                                                                                                                                         {i:'🍾', n:'Champán'}, {i:'🧊', n:'Hielo'}, {i:'🫘', n:'Café Grano'}
                                                                                                                                     ],
                                                                                                                                     'Otros': [
                                                                                                                                         {i:'🥫', n:'Enlatado'}, {i:'🥄', n:'Cuchara'}, {i:'🍴', n:'Cubiertos'}, {i:'🍽️', n:'Plato'}, {i:'🥢', n:'Palillos'}, 
                                                                                                                                         {i:'📦', n:'Paquete'}, {i:'🎁', n:'Regalo'}, {i:'🛒', n:'Carrito'}, {i:'🏪', n:'Tienda'}, {i:'🥜', n:'Mantequilla Maní'},
                                                                                                                                         {i:'🧴', n:'Aseo'}, {i:'🧼', n:'Jabón'}, {i:'🧻', n:'Papel'}, {i:'🧹', n:'Limpieza'}
                                                                                                                                     ]
                                                                                                                                 },
                                                                                                                                form: { 
                                                                                                                                    id: null, 
                                                                                                                                    nombre: '', 
                                                                                                                                    codigo: '', 
                                                                                                                                    icono: '📦',
                                                                                                                                    peso_gramos: 0,
                                                                                                                                    categoria_id: '', 
                                                                                                                                    unidad_medida: 'UNIDAD', 
                                                                                                                                    precio_costo: 0, 
                                                                                                                                    precio_venta: 0, 
                                                                                                                                    stock_actual: 0,
                                                                                                                                    es_corporativo: false,
                                                                                                                                    es_alta_demanda: false,
                                                                                                                                    es_precio_variable: false,
                                                                                                                                    peso_promedio_unidad: 0
                                                                                                                                } 
                                                                                                                            }"
    @open-product-modal.window="
                                                                                                                                open = true; 
                                                                                                                                isEditing = $event.detail?.isEditing || false; 
                                                                                                                                if(isEditing && $event.detail?.product) { 
                                                                                                                                    form = { ...$event.detail.product }; 
                                                                                                                                } else { 
                                                                                                                                form = { id: null, nombre: '', codigo: '', icono: '📦', peso_gramos: 0, peso_promedio_unidad: 0, categoria_id: '', unidad_medida: 'UNIDAD', precio_costo: 0, precio_venta: 0, stock_actual: 0, es_corporativo: false, es_alta_demanda: false, es_precio_variable: false }; 
                                                                                                                                }
                                                                                                                            ">
    <template x-teleport="body">
        <div x-show="open" class="fixed inset-0 z-[100] overflow-y-auto" x-cloak>
            <div class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity"></div>
            <div class="flex min-h-screen items-center justify-center p-4">
                <div class="bg-white dark:bg-slate-800 w-full max-w-2xl relative flex flex-col rounded-2xl shadow-2xl border border-white/20 dark:border-slate-700/50"
                    @click.stop>

                    {{-- Convertir a Formulario --}}
                    <form method="POST"
                        :action="isEditing ? '{{ url('inventario') }}/' + form.id : '{{ route('inventario.store') }}'"
                        class="flex flex-col h-full">
                        @csrf
                        <template x-if="isEditing">
                            <input type="hidden" name="_method" value="PUT">
                        </template>

                        {{-- Header Naranja --}}
                        <div class="bg-brand-orange p-6 text-white relative overflow-hidden shrink-0 rounded-t-xl">
                            <div class="absolute top-0 right-0 p-4 opacity-10 pointer-events-none">
                                <svg class="w-32 h-32 transform rotate-12" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                                </svg>
                            </div>
                            <h3 class="text-2xl font-bold relative z-10"
                                x-text="isEditing ? 'Editar Producto' : 'Nuevo Producto'"></h3>
                            <p class="text-orange-100 text-sm relative z-10 mt-1">
                                Complete la información técnica del ítem.
                            </p>
                            <button type="button" @click="open = false"
                                class="absolute top-4 right-4 z-20 text-white/70 hover:text-white transition-colors bg-white/10 hover:bg-white/20 rounded-lg p-1">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M6 18L18 6M6 6l12 12"></path>
                                </svg>
                            </button>
                        </div>

                        {{-- Body --}}
                        <div class="p-8 space-y-6">
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-x-6 gap-y-5">
                                {{-- Nombre --}}
                                <div class="md:col-span-3">
                                    <label for="prod_nombre"
                                        class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Nombre
                                        del Producto <span class="text-red-500 text-lg leading-none">*</span></label>
                                    <input type="text" id="prod_nombre" name="nombre" x-model="form.nombre" required
                                        placeholder="Ej: Manzana Roja Importada"
                                        class="w-full bg-surface dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-xl px-4 py-3 text-base font-semibold text-slate-800 dark:text-white focus:bg-white dark:focus:bg-slate-900 focus:ring-2 focus:ring-brand-orange focus:border-brand-orange transition-all placeholder-slate-400">
                                </div>

                                {{-- Checkboxes de Prioridad (Reubicación Solicitada) --}}
                                <div class="col-span-1 md:col-span-3 grid grid-cols-1 md:grid-cols-2 gap-4">
                                    {{-- Corporativo --}}
                                    <div
                                        class="flex items-center gap-3 p-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50 transition-colors hover:border-brand-orange/30">
                                        <div class="relative flex items-center">
                                            <input type="checkbox" id="es_corporativo" name="es_corporativo"
                                                x-model="form.es_corporativo"
                                                class="w-5 h-5 text-brand-orange border-slate-300 rounded focus:ring-brand-orange cursor-pointer">
                                        </div>
                                        <label for="es_corporativo"
                                            class="text-sm font-medium text-slate-700 dark:text-slate-300 cursor-pointer select-none">
                                            Producto Corporativo
                                            <span class="block text-xs text-slate-500">Solo visible para clientes
                                                corporativos</span>
                                        </label>
                                    </div>

                                    {{-- Alta Demanda --}}
                                    <div
                                        class="flex items-center gap-3 p-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50 transition-colors hover:border-brand-orange/30">
                                        <div class="relative flex items-center">
                                            <input type="checkbox" id="es_alta_demanda" name="es_alta_demanda"
                                                x-model="form.es_alta_demanda"
                                                class="w-5 h-5 text-brand-orange border-slate-300 rounded focus:ring-brand-orange cursor-pointer">
                                        </div>
                                        <label for="es_alta_demanda"
                                            class="text-sm font-medium text-slate-700 dark:text-slate-300 cursor-pointer select-none">
                                            Alta Demanda
                                            <span class="block text-xs text-slate-500">Prioridad crítica en asignación</span>
                                        </label>
                                    </div>

                                    {{-- Precio Variable --}}
                                    <div
                                        class="flex items-center gap-3 p-3 rounded-xl border border-amber-200 dark:border-amber-700/30 bg-amber-50 dark:bg-amber-900/10 transition-colors hover:border-amber-400">
                                        <div class="relative flex items-center">
                                            <input type="checkbox" id="es_precio_variable" name="es_precio_variable"
                                                x-model="form.es_precio_variable"
                                                class="w-5 h-5 text-amber-600 border-amber-300 rounded focus:ring-amber-500 cursor-pointer">
                                        </div>
                                        <label for="es_precio_variable"
                                            class="text-sm font-medium text-amber-800 dark:text-amber-400 cursor-pointer select-none">
                                            Precio Variable por Peso/Medida
                                            <span class="block text-xs text-amber-600/70">Calcula el precio según la cantidad ingresada en el pedido</span>
                                        </label>
                                    </div>
                                </div>

                                {{-- Selector de Icono Organizado --}}
                                <div class="md:col-span-3 space-y-3">
                                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-500">
                                        Identificador Visual (Icono)
                                    </label>

                                    <div
                                        class="flex flex-col md:flex-row gap-4 p-2 bg-slate-50 dark:bg-slate-900/30 rounded-2xl border border-dotted border-slate-300 dark:border-slate-700">
                                        {{-- Vista Previa Izquierda --}}
                                        <div class="relative group shrink-0 self-center md:self-start">
                                            <div
                                                class="w-24 h-24 bg-white dark:bg-slate-800 rounded-2xl flex items-center justify-center shadow-md border border-slate-200 dark:border-slate-700 transition-all duration-300 group-hover:scale-105">
                                                <span x-text="form.icono || '📦'"
                                                    class="text-[4rem] leading-none select-none drop-shadow-md"></span>
                                            </div>
                                        </div>

                                        {{-- Tabs y Grid Derecha --}}
                                        <div class="flex-1 min-w-0">
                                            {{-- Tabs de Categoría --}}
                                            <div class="flex gap-1.5 overflow-x-auto pb-3 mb-2 custom-scrollbar">
                                                <template x-for="(icons, category) in iconCategories" :key="category">
                                                    <button type="button" @click="activeTab = category"
                                                        class="px-3 py-1.5 rounded-xl text-[9px] uppercase font-black tracking-widest whitespace-nowrap transition-all border shrink-0"
                                                        :class="activeTab === category ? 'bg-indigo-600 text-white border-indigo-600 shadow-md shadow-indigo-500/20' : 'bg-white dark:bg-slate-800 text-slate-500 border-slate-200 dark:border-slate-700 hover:border-indigo-400 hover:text-indigo-500 font-bold'">
                                                        <span x-text="category"></span>
                                                    </button>
                                                </template>
                                            </div>

                                            {{-- Contenedor de Iconos (Robusto con Flex-Wrap) --}}
                                            <div class="bg-white dark:bg-slate-800 rounded-2xl border-2 border-slate-100 dark:border-slate-800 h-48 overflow-y-auto custom-scrollbar p-3">
                                                <div class="flex flex-wrap gap-2 justify-start">
                                                    <template x-for="icon in iconCategories[activeTab]" :key="icon.i">
                                                        <button type="button" @click="form.icono = icon.i" :title="icon.n"
                                                            class="w-12 h-12 rounded-xl flex items-center justify-center text-2xl transition-all hover:scale-110 hover:bg-slate-50 dark:hover:bg-slate-700 focus:outline-none relative group border border-transparent"
                                                            :class="form.icono === icon.i ? 'bg-indigo-50 border-indigo-500 ring-2 ring-indigo-500/10' : 'bg-slate-50/30 dark:bg-slate-900/50 hover:border-slate-200'">
                                                            <span x-text="icon.i" class="leading-none transition-transform duration-300 group-hover:rotate-6"></span>
                                                            <div x-show="form.icono === icon.i" class="absolute -top-1 -right-1 w-4 h-4 bg-indigo-600 rounded-full border-2 border-white flex items-center justify-center shadow-sm">
                                                                <svg class="w-2.5 h-2.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M5 13l4 4L19 7"></path></svg>
                                                            </div>
                                                        </button>
                                                    </template>
                                                </div>
                                            </div>

                                            {{-- Nuevo Input Manual (Unificado) --}}
                                            <div class="mt-3 bg-slate-100/50 dark:bg-slate-800/50 p-3 rounded-2xl border border-slate-200 dark:border-slate-700">
                                                <div class="flex items-center gap-3">
                                                    <div class="flex items-center gap-2 shrink-0">
                                                        <span class="text-lg animate-pulse">✨</span>
                                                        <span class="text-[9px] font-black uppercase tracking-widest text-slate-500">Manual:</span>
                                                    </div>
                                                    <input type="text" name="icono" x-model="form.icono" maxlength="2"
                                                        placeholder="Pega un emoji aquí..."
                                                        class="flex-1 bg-white dark:bg-slate-900 border-2 border-slate-200 dark:border-slate-700 rounded-xl px-4 py-2 text-sm font-bold focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all text-center">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- Fila: Código, Categoría, Peso --}}
                                <div class="md:col-span-3 grid grid-cols-1 md:grid-cols-3 gap-x-6 gap-y-5">
                                    {{-- Código --}}
                                    <div>
                                        <label for="prod_codigo"
                                            class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Código
                                            Interno <span class="text-red-500 text-lg leading-none">*</span></label>
                                        <div class="relative">
                                            <div
                                                class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                                <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor"
                                                    viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="2"
                                                        d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z">
                                                    </path>
                                                </svg>
                                            </div>
                                            <input type="text" id="prod_codigo" name="codigo" x-model="form.codigo"
                                                required
                                                class="w-full pl-9 bg-surface dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-xl py-2.5 text-sm font-medium focus:bg-white dark:focus:bg-slate-900 focus:ring-2 focus:ring-brand-orange transition-all">
                                        </div>
                                    </div>

                                    {{-- Categoría --}}
                                    <div>
                                        <label for="prod_categoria"
                                            class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Categoría
                                            <span class="text-red-500 text-lg leading-none">*</span></label>
                                        <select id="prod_categoria" name="categoria_id" x-model="form.categoria_id"
                                            required
                                            class="w-full bg-surface dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-xl px-4 py-2.5 text-sm font-medium focus:bg-white dark:focus:bg-slate-900 focus:ring-2 focus:ring-brand-orange transition-all">
                                            <option value="">Seleccione...</option>
                                            @foreach($categorias as $cat)
                                                <option value="{{ $cat->id }}">{{ $cat->icono }} {{ $cat->nombre }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    {{-- Peso Base --}}
                                    <div>
                                        <label for="prod_peso"
                                            class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Cantidad/Peso Base</label>
                                        <input type="number" id="prod_peso" name="peso_gramos"
                                            x-model="form.peso_gramos" min="0" step="any"
                                            class="w-full bg-surface dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-xl px-4 py-2.5 text-sm font-medium focus:bg-white dark:focus:bg-slate-900 focus:ring-2 focus:ring-brand-orange transition-all">
                                    </div>

                                    {{-- Campo peso_promedio_unidad oculto (Ya no se requiere por el nuevo flujo de peso real) --}}
                                </div>

                                {{-- Fila: Unidad, Venta, Stock --}}
                                <div class="md:col-span-3 grid grid-cols-1 md:grid-cols-3 gap-x-6 gap-y-5">
                                    {{-- Unidad --}}
                                    <div>
                                        <label for="prod_unidad"
                                            class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Unidad
                                            Medida</label>
                                        <select id="prod_unidad" name="unidad_medida" x-model="form.unidad_medida"
                                            class="w-full bg-surface dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-xl px-4 py-2.5 text-sm font-medium focus:bg-white dark:focus:bg-slate-900 focus:ring-2 focus:ring-brand-orange transition-all">
                                            <option value="UNIDAD">UNIDAD</option>
                                            <option value="GR">GR (GRAMOS)</option>
                                            <option value="KG">KG</option>
                                            <option value="LITRO">LITRO</option>
                                            <option value="METRO">METRO</option>
                                        </select>
                                    </div>

                                    {{-- Precio Venta (Reubicado) --}}
                                    <div>
                                        <label for="prod_precio"
                                            class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Precio Base
                                            ($) <span class="text-red-500 text-lg leading-none">*</span></label>
                                        <div class="relative">
                                            <span class="absolute left-3 top-2.5 text-slate-400">$</span>
                                            <input type="number" id="prod_precio" name="precio_venta"
                                                x-model="form.precio_venta" required min="1"
                                                class="w-full pl-7 bg-surface dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-xl py-2.5 text-sm font-medium focus:bg-white dark:focus:bg-slate-900 focus:ring-2 focus:ring-brand-orange transition-all">
                                        </div>
                                    </div>

                                    {{-- Stock Inicial (Solo Crear) - Ajustado a col-span-1 para encajar --}}
                                    <template x-if="!isEditing">
                                        <div class="col-span-1 mt-0">
                                            <label for="prod_stock_inicial"
                                                class="block text-xs font-bold uppercase tracking-wider text-orange-600 dark:text-orange-400 mb-2 flex items-center gap-1">
                                                <svg class="w-4 h-4" fill="none" stroke="currentColor"
                                                    viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="2"
                                                        d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4">
                                                    </path>
                                                </svg>
                                                Stock Inicial
                                            </label>
                                            <input type="number" id="prod_stock_inicial" name="stock_actual"
                                                x-model="form.stock_actual"
                                                class="w-full bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 rounded-xl px-4 py-2.5 font-bold text-sm text-orange-800 dark:text-orange-300 focus:ring-2 focus:ring-brand-orange transition text-right">
                                        </div>
                                    </template>
                                </div>

                                {{-- Costo (Oculto) --}}
                                <input type="hidden" name="precio_costo" x-model="form.precio_costo" value="0">
                                {{-- The following lines were misplaced and are now removed as per the fix --}}
                                {{-- class="col-span-2 mt-2 bg-orange-50 dark:bg-orange-900/20 p-3 rounded-xl border
                                border-orange-200 dark:border-orange-800 flex items-center justify-between shadow-sm">
                                <label for="prod_stock_inicial"
                                    class="text-sm font-bold text-orange-800 dark:text-orange-300 flex items-center gap-2 cursor-pointer">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4">
                                        </path>
                                    </svg>
                                    Stock Inicial
                                </label>
                                <input type="number" id="prod_stock_inicial" name="stock_actual"
                                    x-model="form.stock_actual"
                                    class="w-32 bg-white dark:bg-slate-900 border-2 border-orange-200 dark:border-orange-700 rounded-lg px-3 py-1.5 font-bold text-lg text-orange-600 focus:ring-2 focus:ring-brand-orange transition text-right">
                                --}}
                            </div>
                        </div>

                        {{-- Footer --}}
                        <div
                            class="p-6 bg-slate-50 dark:bg-slate-800/50 border-t border-slate-100 dark:border-slate-700/50 flex justify-end gap-3 rounded-b-xl">
                            <button type="button" @click="open = false"
                                class="px-6 py-2.5 text-red-600 font-bold hover:bg-red-50 rounded-xl transition">Cancelar</button>
                            <button type="submit"
                                class="px-8 py-2.5 bg-brand-orange hover:bg-orange-600 text-white font-bold rounded-xl shadow-lg shadow-orange-500/30 transition hover:scale-105">
                                <span x-text="isEditing ? 'Guardar Cambios' : 'Crear Producto'"></span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </template>
</div>