.

src/lib/data/DataConfig.ts

@@ -234,14 +234,14 @@ export const dataConfig : DataConfig = {
             // Disposicion cocina
             abierta : {
                 value : 'abierta',
-                name  : 'Cocina abierta',
+                name  : 'Cocina independiente',
                 text  : '',
                 image : undefined,
                 thumb : undefined,
             },
             cerrada :  {
                 value : 'cerrada',
-                name  : 'Cocina cerrada',
+                name  : 'Cocina integrada',
                 text  : '',
                 image : undefined,
                 thumb : undefined,
@@ -262,15 +262,13 @@ export const dataConfig : DataConfig = {
                 image : 'encimeras/kairos.jpg',
                 thumb : 'kairos_thumb.png',
             },
-            /* Descartada
             enpe: {
-                value : 'keyla',
+                value : 'per',
-                name  : 'Muebles Personalizados',
+                name  : 'Encimera personalizada',
                 text  : '',
                 image : undefined,
-                thumb : undefined,
+                thumb : 'enc_per_thumb.png',
             },
-            */
 
         },
 
@@ -458,11 +456,13 @@ export const dataConfig : DataConfig = {
                         help: '',
                         default: 'cerrada',
                         values  : [
-                            { id: 'cerrada' },
+                            {
+                                id: 'cerrada',
+                                warn: 'La opción de cocina independizada del salón solo está disponible en determinadas tipologías de vivienda, consulte la suya.'
+                            },
                             {
                                 id: 'abierta',
-                                amount: 'consultar',
+                                warn: 'La opción de cocina integrada con el salón solo está disponible en determinadas tipologías de vivienda, consulte la suya.',
-                                warn: 'La opción de cocina independizada del salón solo está disponible en determinadas tipologías de vivienda, consulte la suya.',
                             },
                         ],
                     },
@@ -476,12 +476,10 @@ export const dataConfig : DataConfig = {
                             { id: 'mnaf' },
                             { id: 'mvaf'},
                             { id: 'mbmb'},
-                            /* Descartada
                             {
                               id: 'mbpe',
                               amount: 'consultar',
                             }
-                             */
                         ],
                     },
                     {
@@ -491,14 +489,18 @@ export const dataConfig : DataConfig = {
                         help: '',
                         default: 'keyla',
                         values  : [
-                            { id: 'keyla' },
+                            {
-                            { id: 'kairos'},
+                                id: 'keyla',
-                            /* Descartada
+                                rules: { views: { cocina: { mobiliario: { forbid :['mbpe'] } } } },
+                            },
+                            {
+                                id: 'kairos',
+                                rules: { views: { cocina: { mobiliario: { forbid :['mbpe'] } } } },
+                            },
                             {
                                 id: 'enpe',
                                 amount: 'consultar',
                             }
-                             */
                         ],
                     },
                 ],

src/lib/views/VwConfig.svelte

@@ -8,15 +8,37 @@
 
 
     let isLoading = $state(true);
+    let imageUrl = $state(''); // La imagen que realmente se muestra
+    let hasError = $state(false);
 
+    // Usamos el nombre del archivo como key. Svelte detectará el cambio automáticamente.
+    // No hace falta un contador manual si usamos el string del archivo.
+    let transitionKey = $state('');
 
     $effect(() => {
-        // Las runas se leen automáticamente aquí
+        const targetImg = appState.currentFileName;
-        const currentImage = appState.currentFileName;
+
-        isLoading = false;
+        // Si ya estamos mostrando esta imagen, no hacemos nada (evita bucles)
+        if (imageUrl === targetImg) return;
+
+        isLoading = true;
+        hasError = false;
 
         const img = new Image();
-        img.src = currentImage;
+
+        img.onload = () => {
+            imageUrl = targetImg;   // Cambiamos la URL visible solo cuando ya cargó
+            transitionKey = targetImg; // Disparamos la transición
+            isLoading = false;
+        };
+
+        img.onerror = () => {
+            console.error(`Error cargando: ${targetImg}`);
+            isLoading = false;
+            hasError = true;
+        };
+
+        img.src = targetImg;
     });
 
 </script>
@@ -29,20 +51,35 @@
     <!-- IMAGEN CENTRAL -->
     <div class="sticky top-1 z-10 flex-1 p-3 h-full bg-white shadow-lg lg:static flex lg:items-start justify-center overflow-hidden">
 
+        <div class="relative w-full grid grid-cols-1 grid-rows-1 items-center justify-items-center">
+
         {#if isLoading}
-            <div class="absolute inset-0 flex items-center justify-center bg-gray-100">
+            <div
-                <svg class="animate-spin h-8 w-8 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                    class="col-start-1 row-start-1 z-20 flex items-center justify-center p-10 bg-white/50 backdrop-blur-sm rounded-xl"
-                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    transition:fade={{ duration: 200 }}
-                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
+            >
-                </svg>
+                <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900"></div>
+                <p class="ml-4 text-gray-600 font-medium">{ dataConfig.texts.loading_view || 'Cargando...' }</p>
             </div>
         {/if}
-        <img
+
-            src={appState.currentFileName}
+        {#if hasError}
-            alt={`${dataConfig.texts?.['cview_alt_img'] ?? ''} ${appState.currentView?.name ?? ''}`}
+            <div class="col-start-1 row-start-1 z-20 text-center p-10 bg-red-50 rounded-lg">
-            class="w-full h-auto max-h-[90vh] object-contain"
+                <p class="text-red-600 text-lg mb-2">{ dataConfig.texts.errorLoadingImage || 'Error' }</p>
-            onload={ () => isLoading=false  }
+            </div>
-        />
+        {:else if imageUrl}
+            {#key transitionKey}
+                <img
+                        src={imageUrl}
+                        alt="Vista estancia"
+                        class="col-start-1 row-start-1 w-full h-auto max-h-[90vh] object-contain shadow-sm"
+                        transition:fade={{ duration: 500 }}
+                />
+            {/key}
+        {/if}
+
+        </div>
+
     </div>