diff --git a/app/Http/Controllers/BlCuentaCobroController.php b/app/Http/Controllers/BlCuentaCobroController.php
index 556e939..ed0d954 100644
--- a/app/Http/Controllers/BlCuentaCobroController.php
+++ b/app/Http/Controllers/BlCuentaCobroController.php
@@ -14,9 +14,9 @@ class BlCuentaCobroController extends Controller
 {
     public function index()
     {   
-        // .items.empaque.producto
+        // .producto
         $user = Auth::user();
-        $cuentas = BlCuentaCobro::with(['items.marcacion.pedido', 'usuario'])->get();
+        $cuentas = BlCuentaCobro::with(['items.marcacion.pedido.items.empaque', 'usuario'])->get();
         return Inertia::render('BLCuentaCobro', [
             'user' => $user,
             'cuentasCobro' => $cuentas,
diff --git a/resources/js/components/BL/ListaInventario.jsx b/resources/js/components/BL/ListaInventario.jsx
index eac10e9..9d68941 100644
--- a/resources/js/components/BL/ListaInventario.jsx
+++ b/resources/js/components/BL/ListaInventario.jsx
@@ -1,5 +1,5 @@
 // resources/js/Components/ListaInventario.jsx
-import React from 'react';
+import React, { useState } from 'react';
 
 const ListaInventario = ({ 
     productos, 
@@ -14,11 +14,45 @@ const ListaInventario = ({
     onLimpiarFiltros,
     onEstanteriaClick 
 }) => {
+    const [expandida, setExpandida] = useState(true);
+
+    const toggleExpandida = () => {
+        setExpandida(!expandida);
+    };
+
+    // Si está contraída, mostrar solo un ícono pequeño
+    if (!expandida) {
+        return (
+            <div className="w-16 bg-white/80 backdrop-blur-sm border border-white/30 shadow-2xl rounded-3xl p-4 flex flex-col items-center justify-center">
+                <button
+                    onClick={toggleExpandida}
+                    className="p-3 bg-blue-500 text-white rounded-full hover:bg-blue-600 transition-all duration-300 hover:scale-110"
+                    title="Expandir lista de inventario"
+                >
+                    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                    </svg>
+                </button>
+                <span className="text-xs text-gray-600 mt-2 text-center">Mostrar Lista</span>
+            </div>
+        );
+    }
+
+    // Si está expandida, mostrar la lista completa
     return (
-        <div className="w-[450px] bg-white/80 backdrop-blur-sm border border-white/30 shadow-2xl rounded-3xl p-6 overflow-hidden flex flex-col">
-            {/* Header */}
+        <div className="w-full sm:w-[350px] md:w-[400px] lg:w-[450px] bg-white/80 backdrop-blur-sm border border-white/30 shadow-2xl rounded-3xl p-6 overflow-hidden flex flex-col transition-all duration-300">
+            {/* Header con botón de cerrar */}
             <div className="flex justify-between items-center mb-4">
                 <h2 className="text-2xl font-bold text-gray-800">📦 Inventario</h2>
+                <button
+                    onClick={toggleExpandida}
+                    className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full transition-all duration-200"
+                    title="Contraer lista"
+                >
+                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+                    </svg>
+                </button>
             </div>
             
             {/* Filtros y búsqueda */}
@@ -27,12 +61,12 @@ const ListaInventario = ({
                     <input
                         type="text"
                         placeholder="Buscar producto, color, tipo o ubicación..."
-                        className="flex-1 border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        className="flex-1 border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
                         value={busqueda}
                         onChange={(e) => onBusquedaChange(e.target.value)}
                     />
                     <button
-                        className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition"
+                        className="bg-blue-500 text-white px-3 py-2 rounded-lg hover:bg-blue-600 transition text-sm whitespace-nowrap"
                         onClick={onLimpiarFiltros}
                     >
                         Limpiar
@@ -40,9 +74,9 @@ const ListaInventario = ({
                 </div>
                 
                 <div className="flex items-center gap-2">
-                    <span className="text-gray-700 font-medium">Categoría:</span>
+                    <span className="text-gray-700 font-medium text-sm">Categoría:</span>
                     <select 
-                        className="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        className="border border-gray-300 rounded-lg px-2 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm flex-1"
                         value={categoriaFiltro}
                         onChange={(e) => onCategoriaChange(e.target.value)}
                     >
@@ -56,11 +90,11 @@ const ListaInventario = ({
             {/* Información de filtros activos */}
             {filtro && (
                 <div className="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-lg flex justify-between items-center">
-                    <span className="text-blue-700">
+                    <span className="text-blue-700 text-sm">
                         Filtrado por: <strong>{filtro}</strong>
                     </span>
                     <button 
-                        className="text-blue-600 hover:text-blue-800 text-sm font-medium"
+                        className="text-blue-600 hover:text-blue-800 text-xs font-medium"
                         onClick={() => onFiltroChange(null)}
                     >
                         Quitar filtro
@@ -69,7 +103,7 @@ const ListaInventario = ({
             )}
             
             {/* Contador de resultados */}
-            <div className="mb-3 text-sm text-gray-600">
+            <div className="mb-3 text-xs text-gray-600">
                 Mostrando {productosFiltrados.length} de {productos.length} productos
                 {productosFiltrados.some(p => !p.tiene_ubicacion) && (
                     <span className="text-red-500 ml-2">⚠️ Algunos sin ubicación</span>
@@ -82,38 +116,51 @@ const ListaInventario = ({
                     productosFiltrados.map((p) => (
                         <div
                             key={p.id}
-                            className={`border-b border-gray-200 py-3 px-2 hover:bg-blue-50 rounded-lg transition cursor-pointer flex justify-between items-center ${
+                            className={`border-b border-gray-200 py-2 px-2 hover:bg-blue-50 rounded-lg transition cursor-pointer flex justify-between items-center ${
                                 !p.tiene_ubicacion ? 'bg-red-50 border-l-4 border-l-red-400' : ''
                             }`}
                             onClick={() => onEstanteriaClick(p.estanteria)}
                         >
                             <div className="max-w-[60%]">
-                                <div className="font-medium text-gray-800 text-base truncate">
+                                <div className="font-medium text-gray-800 text-sm truncate">
                                     {p.descripcion || `${p.tipo_producto} ${p.color_nombre} ${p.tamanio}`}
                                     {!p.tiene_ubicacion && (
-                                        <span className="text-red-500 text-xs ml-2">⚠️ Sin ubicación</span>
+                                        <span className="text-red-500 text-xs ml-1">⚠️</span>
                                     )}
                                 </div>
-                                <div className="text-xs text-gray-500">
+                                <div className="text-xs text-gray-500 truncate">
                                     {p.tipo_producto} • {p.color_nombre} • {p.tamanio}
                                 </div>
                             </div>
                             <div className="text-right max-w-[40%]">
-                                <div className={`text-sm font-medium truncate ${
+                                <div className={`text-xs font-medium truncate ${
                                     !p.tiene_ubicacion ? 'text-red-700' : 'text-gray-700'
                                 }`}>
                                     {p.estanteria}
                                 </div>
-                                <div className="text-xs text-gray-500">{p.stock_total} unidades</div>
+                                <div className="text-xs text-gray-500">{p.stock_total}u</div>
                             </div>
                         </div>
                     ))
                 ) : (
-                    <div className="text-center py-8 text-gray-500">
+                    <div className="text-center py-8 text-gray-500 text-sm">
                         No se encontraron productos con los filtros aplicados
                     </div>
                 )}
             </div>
+            
+            {/* Botón flotante para contraer (alternativo) */}
+            <div className="mt-4 pt-4 border-t border-gray-200">
+                <button
+                    onClick={toggleExpandida}
+                    className="w-full py-2 bg-gray-100 text-gray-600 rounded-lg hover:bg-gray-200 transition flex items-center justify-center gap-2 text-sm"
+                >
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+                    </svg>
+                    Ocultar lista
+                </button>
+            </div>
         </div>
     );
 };
diff --git a/resources/js/components/BL/PlanoAlmacen.jsx b/resources/js/components/BL/PlanoAlmacen.jsx
new file mode 100644
index 0000000..80c5074
--- /dev/null
+++ b/resources/js/components/BL/PlanoAlmacen.jsx
@@ -0,0 +1,338 @@
+// resources/js/components/BL/PlanoAlmacen.jsx
+import React from 'react';
+
+const PlanoAlmacen = ({ onEstanteriaClick, productos }) => {
+    // Calcular productos por estantería
+    const productosPorEstanteria = (nombreEstanteria) => {
+        return productos.filter(p => p.estanteria === nombreEstanteria).length;
+    };
+
+    return (
+        <div className="flex-1 bg-white/80 backdrop-blur-sm border border-white/30 shadow-2xl rounded-3xl p-6 overflow-hidden relative">
+            {/* Título del plano */}
+            <h2 className="text-2xl font-bold text-gray-800 mb-6 text-center">📋 Plano del Almacén</h2>
+            
+            {/* Contenedor principal del plano */}
+            <div className="relative w-full h-[calc(100%-80px)] bg-gray-50 rounded-xl border-2 border-dashed border-gray-300">
+                
+                {/* LÍNEA DIVISORIA VERTICAL EN EL CENTRO */}
+                <div className="absolute top-0 bottom-0 left-1/2 transform -translate-x-1/2 w-1 bg-gray-300"></div>
+                
+                {/* PARTE SUPERIOR (20% de altura) - NO TOCAR */}
+                <div className="absolute top-0 left-0 w-full h-1/5 flex p-4 gap-4">
+                    {/* MITAD IZQUIERDA SUPERIOR: E1 + C JUNTOS */}
+                    <div className="w-1/2 h-full flex gap-4">
+                        {/* E1 */}
+                        <div className="w-1/2 h-full">
+                            <div 
+                                className="w-full h-full bg-gradient-to-br from-orange-100 to-orange-200 border-2 border-orange-400 rounded-xl flex flex-col justify-center items-center cursor-pointer hover:scale-105 transition-all duration-300 hover:shadow-lg"
+                                onClick={() => onEstanteriaClick("Estantería 1")}
+                            >
+                                <span className="font-bold text-orange-800 text-xl">E1</span>
+                                <span className="font-bold text-orange-700 text-sm">Estantería 1</span>
+                                <span className="text-xs text-orange-600 mt-1">
+                                    {productosPorEstanteria("Estantería 1")} productos
+                                </span>
+                            </div>
+                        </div>
+
+                        {/* C */}
+                        <div className="w-1/2 h-full">
+                            <div 
+                                className="w-full h-full bg-gradient-to-br from-blue-100 to-purple-100 border-2 border-blue-300 rounded-xl flex flex-col justify-center items-center cursor-pointer hover:scale-105 transition-all duration-300 hover:shadow-lg"
+                                onClick={() => onEstanteriaClick("Zona de Computadores")}
+                            >
+                                <span className="font-bold text-blue-800 text-xl">C</span>
+                                <span className="font-bold text-blue-700 text-sm">💻 Computadores</span>
+                                <span className="text-xs text-blue-600 mt-1">Área de trabajo</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* MITAD DERECHA SUPERIOR: VACÍA */}
+                    <div className="w-1/2 h-full bg-gradient-to-br from-gray-100 to-gray-200 border-2 border-dashed border-gray-400 rounded-xl flex flex-col justify-center items-center">
+                        <div className="text-center text-gray-500">
+                            <div className="text-2xl mb-1">📭</div>
+                            <p className="text-xs">ZONA DE EMPAQUETACIÓN</p>
+                        </div>
+                    </div>
+                </div>
+
+                {/* PARTE INFERIOR (80% de altura) - NO TOCAR */}
+                <div className="absolute top-1/5 left-0 w-full h-4/5 flex p-4 gap-4">
+                    {/* MITAD IZQUIERDA INFERIOR */}
+                    <div className="w-1/2 h-full flex gap-4">
+                        {/* RACK 10 (R10) - OCUPA TODA LA ALTURA */}
+                        <div className="w-1/6 h-full">
+                            <div 
+                                className="w-full h-full bg-gradient-to-br from-red-100 to-red-200 border-2 border-red-400 rounded-xl flex flex-col justify-center items-center cursor-pointer hover:scale-105 transition-all duration-300 hover:shadow-lg"
+                                onClick={() => onEstanteriaClick("Rack 10")}
+                            >
+                                <span className="font-bold text-red-800 text-xl">R10</span>
+                                <span className="font-bold text-red-700 text-sm">Rack 10</span>
+                                <span className="text-xs text-red-600 mt-1">
+                                    {productosPorEstanteria("Rack 10")} productos
+                                </span>
+                            </div>
+                        </div>
+
+                        {/* ZONA DERECHA DE R10 */}
+                        <div className="flex-1 h-full flex flex-col gap-4">
+
+                            {/* ESPACIO VACÍO (7%) */}
+                            <div className="h-[7%] flex justify-center items-center">
+                                <p className="text-xs text-gray-500">Pasillo</p>
+                            </div>
+
+                            {/* E2 (12%) */}
+                            <div className="h-[12%]">
+                                <div 
+                                    className="w-full h-full bg-gradient-to-br from-orange-100 to-orange-200 border-2 border-orange-400 rounded-xl flex flex-col justify-center items-center cursor-pointer hover:scale-105 transition-all duration-300 hover:shadow-lg"
+                                    onClick={() => onEstanteriaClick("Estantería 2")}
+                                >
+                                    <span className="font-bold text-orange-800 text-xl">E2</span>
+                                    <span className="font-bold text-orange-700 text-sm">Estantería 2</span>
+                                    <span className="text-xs text-orange-600 mt-1">
+                                        {productosPorEstanteria("Estantería 2")} productos
+                                    </span>
+                                </div>
+                            </div>
+
+                            {/* E3 (12%) */}
+                            <div className="h-[12%]">
+                                <div 
+                                    className="w-full h-full bg-gradient-to-br from-orange-100 to-orange-200 border-2 border-orange-400 rounded-xl flex flex-col justify-center items-center cursor-pointer hover:scale-105 transition-all duration-300 hover:shadow-lg"
+                                    onClick={() => onEstanteriaClick("Estantería 3")}
+                                >
+                                    <span className="font-bold text-orange-800 text-xl">E3</span>
+                                    <span className="font-bold text-orange-700 text-sm">Estantería 3</span>
+                                    <span className="text-xs text-orange-600 mt-1">
+                                        {productosPorEstanteria("Estantería 3")} productos
+                                    </span>
+                                </div>
+                            </div>
+
+                            {/* ESPACIO VACÍO (7%) */}
+                            <div className="h-[7%] flex justify-center items-center">
+                                <p className="text-xs text-gray-500">Pasillo</p>
+                            </div>
+
+                            {/* E5 (12%) */}
+                            <div className="h-[12%]">
+                                <div 
+                                    className="w-full h-full bg-gradient-to-br from-orange-100 to-orange-200 border-2 border-orange-400 rounded-xl flex flex-col justify-center items-center cursor-pointer hover:scale-105 transition-all duration-300 hover:shadow-lg"
+                                    onClick={() => onEstanteriaClick("Estantería 5")}
+                                >
+                                    <span className="font-bold text-orange-800 text-xl">E5</span>
+                                    <span className="font-bold text-orange-700 text-sm">Estantería 5</span>
+                                    <span className="text-xs text-orange-600 mt-1">
+                                        {productosPorEstanteria("Estantería 5")} productos
+                                    </span>
+                                </div>
+                            </div>
+
+                            {/* E4 (12%) */}
+                            <div className="h-[12%]">
+                                <div 
+                                    className="w-full h-full bg-gradient-to-br from-orange-100 to-orange-200 border-2 border-orange-400 rounded-xl flex flex-col justify-center items-center cursor-pointer hover:scale-105 transition-all duration-300 hover:shadow-lg"
+                                    onClick={() => onEstanteriaClick("Estantería 4")}
+                                >
+                                    <span className="font-bold text-orange-800 text-xl">E4</span>
+                                    <span className="font-bold text-orange-700 text-sm">Estantería 4</span>
+                                    <span className="text-xs text-orange-600 mt-1">
+                                        {productosPorEstanteria("Estantería 4")} productos
+                                    </span>
+                                </div>
+                            </div>
+
+                            {/* ESPACIO VACÍO (7%) */}
+                            <div className="h-[7%] flex justify-center items-center">
+                                <p className="text-xs text-gray-500">Pasillo</p>
+                            </div>
+
+                            {/* E6 (resto de altura) */}
+                            <div className="flex-1">
+                                <div 
+                                    className="w-full h-full bg-gradient-to-br from-orange-100 to-orange-200 border-2 border-orange-400 rounded-xl flex flex-col justify-center items-center cursor-pointer hover:scale-105 transition-all duration-300 hover:shadow-lg"
+                                    onClick={() => onEstanteriaClick("Estantería 6")}
+                                >
+                                    <span className="font-bold text-orange-800 text-xl">E6</span>
+                                    <span className="font-bold text-orange-700 text-sm">Estantería 6</span>
+                                    <span className="text-xs text-orange-600 mt-1">
+                                        {productosPorEstanteria("Estantería 6")} productos
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* MITAD DERECHA INFERIOR: VACÍA */}
+                    {/* MITAD DERECHA INFERIOR */}
+                    <div className="w-1/2 h-full   rounded-xl flex flex-col">
+                        
+                        {/* Zona superior de racks */}
+                        <div className="flex flex-row h-[90%]">
+                            
+                            {/* Rack 9 */}
+                            <div className="w-[10%] h-full">
+                                <div 
+                                    className="w-full h-full bg-gradient-to-br from-red-100 to-red-200 border-2 border-red-400 rounded-xl flex flex-col justify-center items-center cursor-pointer hover:scale-105 transition-all duration-300 hover:shadow-lg"
+                                    onClick={() => onEstanteriaClick("Rack 9")}
+                                >
+                                    <span className="font-bold text-red-800 text-xl">R9</span>
+                                    <span className="font-bold text-red-700 text-sm">Rack 9</span>
+                                    <span className="text-xs text-red-600 mt-1">
+                                        {productosPorEstanteria("Rack 9")} productos
+                                    </span>
+                                </div>
+                            </div>
+
+                            {/* Espacio 5% */}
+                            <div className="w-[5%] h-full"></div>
+
+                            {/* Rack 8 */}
+                            <div className="w-[10%] h-full">
+                                <div 
+                                    className="w-full h-full bg-gradient-to-br from-red-100 to-red-200 border-2 border-red-400 rounded-xl flex flex-col justify-center items-center cursor-pointer hover:scale-105 transition-all duration-300 hover:shadow-lg"
+                                    onClick={() => onEstanteriaClick("Rack 8")}
+                                >
+                                    <span className="font-bold text-red-800 text-xl">R8</span>
+                                    <span className="font-bold text-red-700 text-sm">Rack 8</span>
+                                    <span className="text-xs text-red-600 mt-1">
+                                        {productosPorEstanteria("Rack 8")} productos
+                                    </span>
+                                </div>
+                            </div>
+
+                            {/* Rack 7 */}
+                            <div className="w-[10%] h-full">
+                                <div 
+                                    className="w-full h-full bg-gradient-to-br from-red-100 to-red-200 border-2 border-red-400 rounded-xl flex flex-col justify-center items-center cursor-pointer hover:scale-105 transition-all duration-300 hover:shadow-lg"
+                                    onClick={() => onEstanteriaClick("Rack 7")}
+                                >
+                                    <span className="font-bold text-red-800 text-xl">R7</span>
+                                    <span className="font-bold text-red-700 text-sm">Rack 7</span>
+                                    <span className="text-xs text-red-600 mt-1">
+                                        {productosPorEstanteria("Rack 7")} productos
+                                    </span>
+                                </div>
+                            </div>
+
+                            {/* Espacio 5% */}
+                            <div className="w-[5%] h-full"></div>
+
+                            {/* Rack 6 */}
+                            <div className="w-[10%] h-full">
+                                <div 
+                                    className="w-full h-full bg-gradient-to-br from-red-100 to-red-200 border-2 border-red-400 rounded-xl flex flex-col justify-center items-center cursor-pointer hover:scale-105 transition-all duration-300 hover:shadow-lg"
+                                    onClick={() => onEstanteriaClick("Rack 6")}
+                                >
+                                    <span className="font-bold text-red-800 text-xl">R6</span>
+                                    <span className="font-bold text-red-700 text-sm">Rack 6</span>
+                                    <span className="text-xs text-red-600 mt-1">
+                                        {productosPorEstanteria("Rack 6")} productos
+                                    </span>
+                                </div>
+                            </div>
+
+                            {/* Rack 5 */}
+                            <div className="w-[10%] h-full">
+                                <div 
+                                    className="w-full h-full bg-gradient-to-br from-red-100 to-red-200 border-2 border-red-400 rounded-xl flex flex-col justify-center items-center cursor-pointer hover:scale-105 transition-all duration-300 hover:shadow-lg"
+                                    onClick={() => onEstanteriaClick("Rack 5")}
+                                >
+                                    <span className="font-bold text-red-800 text-xl">R5</span>
+                                    <span className="font-bold text-red-700 text-sm">Rack 5</span>
+                                    <span className="text-xs text-red-600 mt-1">
+                                        {productosPorEstanteria("Rack 5")} productos
+                                    </span>
+                                </div>
+                            </div>
+
+                            {/* Espacio 5% */}
+                            <div className="w-[5%] h-full"></div>
+
+                            {/* Rack 4 */}
+                            <div className="w-[10%] h-full">
+                                <div 
+                                    className="w-full h-full bg-gradient-to-br from-red-100 to-red-200 border-2 border-red-400 rounded-xl flex flex-col justify-center items-center cursor-pointer hover:scale-105 transition-all duration-300 hover:shadow-lg"
+                                    onClick={() => onEstanteriaClick("Rack 4")}
+                                >
+                                    <span className="font-bold text-red-800 text-xl">R4</span>
+                                    <span className="font-bold text-red-700 text-sm">Rack 4</span>
+                                    <span className="text-xs text-red-600 mt-1">
+                                        {productosPorEstanteria("Rack 4")} productos
+                                    </span>
+                                </div>
+                            </div>
+
+                            {/* Rack 3 */}
+                            <div className="w-[10%] h-full">
+                                <div 
+                                    className="w-full h-full bg-gradient-to-br from-red-100 to-red-200 border-2 border-red-400 rounded-xl flex flex-col justify-center items-center cursor-pointer hover:scale-105 transition-all duration-300 hover:shadow-lg"
+                                    onClick={() => onEstanteriaClick("Rack 3")}
+                                >
+                                    <span className="font-bold text-red-800 text-xl">R3</span>
+                                    <span className="font-bold text-red-700 text-sm">Rack 3</span>
+                                    <span className="text-xs text-red-600 mt-1">
+                                        {productosPorEstanteria("Rack 3")} productos
+                                    </span>
+                                </div>
+                            </div>
+
+                            {/* Espacio 5% */}
+                            <div className="w-[5%] h-full"></div>
+
+                            {/* Rack 2 */}
+                            <div className="w-[10%] h-full">
+                                <div 
+                                    className="w-full h-full bg-gradient-to-br from-red-100 to-red-200 border-2 border-red-400 rounded-xl flex flex-col justify-center items-center cursor-pointer hover:scale-105 transition-all duration-300 hover:shadow-lg"
+                                    onClick={() => onEstanteriaClick("Rack 2")}
+                                >
+                                    <span className="font-bold text-red-800 text-xl">R2</span>
+                                    <span className="font-bold text-red-700 text-sm">Rack 2</span>
+                                    <span className="text-xs text-red-600 mt-1">
+                                        {productosPorEstanteria("Rack 2")} productos
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+
+                        {/* Estantería 7 abajo */}
+                        <div className="h-[10%]">
+                            <div 
+                                className="w-full h-full bg-gradient-to-br from-orange-100 to-orange-200 border-2 border-orange-400 rounded-xl flex flex-col justify-center items-center cursor-pointer hover:scale-105 transition-all duration-300 hover:shadow-lg"
+                                onClick={() => onEstanteriaClick("Estantería 7")}
+                            >
+                                <span className="font-bold text-orange-800 text-xl">E7</span>
+                                <span className="font-bold text-orange-700 text-sm">Estantería 7</span>
+                                <span className="text-xs text-orange-600 mt-1">
+                                    {productosPorEstanteria("Estantería 7")} productos
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+
+
+                {/* ÁREA SIN UBICACIÓN (ESQUINA INFERIOR DERECHA) */}
+                {productos.some(p => p.estanteria === "Sin ubicación") && (
+                    <div 
+                        className="absolute bottom-4 right-4 w-48 bg-gradient-to-r from-gray-300 to-gray-400 border-2 border-dashed border-gray-500 rounded-lg p-3 cursor-pointer hover:scale-105 transition-all duration-200"
+                        onClick={() => onEstanteriaClick("Sin ubicación")}
+                    >
+                        <div className="flex justify-between items-center">
+                            <span className="font-bold text-gray-800">📦 Sin ubicación</span>
+                            <span className="bg-gray-500 text-white px-2 py-1 rounded-full text-xs">
+                                {productosPorEstanteria("Sin ubicación")} productos
+                            </span>
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default PlanoAlmacen;
\ No newline at end of file
diff --git a/resources/js/pages/BLCuentaCobro.jsx b/resources/js/pages/BLCuentaCobro.jsx
index e5709e5..6aab828 100644
--- a/resources/js/pages/BLCuentaCobro.jsx
+++ b/resources/js/pages/BLCuentaCobro.jsx
@@ -493,7 +493,7 @@ export default function CuentasCobroCards({ user, cuentas = datosPrueba, cuentas
                                         <p className="text-xs text-gray-500 mb-2">Items incluidos:</p>
                                         <div className="space-y-1">
                                             {cuenta.items.slice(0, 30).map((item, index) => {
-                                                const descripcion = item.marcacion.pedido.items[0]?.empaque?.producto?.descripcion ?? "Sin descripción";
+                                                const descripcion = item?.marcacion?.pedido?.items[0]?.empaque?.producto?.descripcion ?? "Sin descripción";
                                                 const cantidad = item.marcacion.cantidad ?? 'sin cantidad'
                                                 const total = item.marcacion.costo_total ?? 'Sin costo total'
                                                 
diff --git a/resources/js/pages/BLInventario.jsx b/resources/js/pages/BLInventario.jsx
index 5746558..a7e4be5 100644
--- a/resources/js/pages/BLInventario.jsx
+++ b/resources/js/pages/BLInventario.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 import AppLayout from '@/layouts/app-layout';
 import { Head } from '@inertiajs/react';
 import ListaInventario from '@/components/BL/ListaInventario';
-// import { useFiltrosInventario } from '@/Hooks/useFiltrosInventario';
+import PlanoAlmacen from '@/components/BL/PlanoAlmacen';
 import { useDispositivo } from '@/components/BL/Hooks/useDispositivo';
 import { useFiltrosInventario } from '@/components/BL/Hooks/useFiltrosInventario';
 
@@ -33,41 +33,11 @@ export default function PlanoInventario({ productos }) {
         setFiltro(filtro === estanteria ? null : estanteria);
     };
 
-    // Componente de placeholder para el plano (por ahora)
-    const PlanoPlaceholder = () => (
-        <div className="flex-1 bg-white/80 backdrop-blur-sm border border-white/30 shadow-2xl rounded-3xl p-6 flex items-center justify-center">
-            <div className="text-center text-gray-500">
-                <div className="text-4xl mb-4">🏗️</div>
-                <h3 className="text-xl font-bold mb-2">Plano en construcción</h3>
-                <p>El plano visual del almacén estará disponible pronto</p>
-            </div>
-        </div>
-    );
-
-    return (
-        <AppLayout breadcrumbs={breadcrumbs}>
-            <Head title="Inventario Buttons Lovers" />
-            
-            {!isMobile ? (
-                // Vista Desktop
-                <div className="flex h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-6 gap-6">
-                    <PlanoPlaceholder />
-                    <ListaInventario 
-                        productos={productos}
-                        productosFiltrados={productosFiltrados}
-                        filtro={filtro}
-                        busqueda={busqueda}
-                        categoriaFiltro={categoriaFiltro}
-                        categorias={categorias}
-                        onFiltroChange={setFiltro}
-                        onBusquedaChange={setBusqueda}
-                        onCategoriaChange={setCategoriaFiltro}
-                        onLimpiarFiltros={limpiarFiltros}
-                        onEstanteriaClick={handleEstanteriaClick}
-                    />
-                </div>
-            ) : (
-                // Vista Móvil (solo lista)
+    // Vista móvil simplificada (solo lista)
+    if (isMobile) {
+        return (
+            <AppLayout breadcrumbs={breadcrumbs}>
+                <Head title="Inventario Buttons Lovers" />
                 <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-4">
                     <ListaInventario 
                         productos={productos}
@@ -83,7 +53,37 @@ export default function PlanoInventario({ productos }) {
                         onEstanteriaClick={handleEstanteriaClick}
                     />
                 </div>
-            )}
+            </AppLayout>
+        );
+    }
+
+    // Vista desktop completa
+    return (
+        <AppLayout breadcrumbs={breadcrumbs}>
+            <Head title="Inventario Buttons Lovers" />
+            
+            <div className="flex h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-6 gap-6">
+                {/* Plano del almacén */}
+                <PlanoAlmacen 
+                    onEstanteriaClick={handleEstanteriaClick}
+                    productos={productos}
+                />
+                
+                {/* Lista de inventario */}
+                <ListaInventario 
+                    productos={productos}
+                    productosFiltrados={productosFiltrados}
+                    filtro={filtro}
+                    busqueda={busqueda}
+                    categoriaFiltro={categoriaFiltro}
+                    categorias={categorias}
+                    onFiltroChange={setFiltro}
+                    onBusquedaChange={setBusqueda}
+                    onCategoriaChange={setCategoriaFiltro}
+                    onLimpiarFiltros={limpiarFiltros}
+                    onEstanteriaClick={handleEstanteriaClick}
+                />
+            </div>
         </AppLayout>
     );
 }
\ No newline at end of file