objetos

 node_modules
 node_modules
+API_ENDPOINTS.md
 
 
 # Output
 # Output
 .output
 .output

@@ -36,9 +36,16 @@
   let chartHeight = $derived(Math.max(effectiveHeight - marginTop - marginBottom, 50));
   let chartHeight = $derived(Math.max(effectiveHeight - marginTop - marginBottom, 50));
 
 
   // Máximo del eje Y (con guard para data vacía o valores undefined)
   // Máximo del eje Y (con guard para data vacía o valores undefined)
-  let maxPerCapita = $derived(
-    data.length > 0 ? Math.max(...data.map(d => d.perCapita || 0), 1) : 1
-  );
+  let maxPerCapita = $derived.by(() => {
+    if (data.length === 0) return 1;
+    const vals = data.map(d => typeof d.perCapita === 'number' && isFinite(d.perCapita) ? d.perCapita : 0);
+    const max = Math.max(...vals);
+    const min = Math.min(...vals.filter(v => v > 0));
+    // Si max es 0, usar 1 como fallback
+    if (max <= 0) return 1;
+    // Agregar 10% de margen arriba para que la barra más alta no toque el techo
+    return max * 1.1;
+  });
 
 
   // Escalas D3
   // Escalas D3
   let xScale = $derived(
   let xScale = $derived(
@@ -92,7 +99,8 @@
     <!-- Barras -->
     <!-- Barras -->
     <div class="bars" onmouseleave={() => hoveredYear = null} role="group">
     <div class="bars" onmouseleave={() => hoveredYear = null} role="group">
       {#each data as d}
       {#each data as d}
-        {@const barPct = (yScale(d.perCapita) / chartHeight) * 100}
+        {@const safeVal = typeof d.perCapita === 'number' && isFinite(d.perCapita) ? d.perCapita : 0}
+        {@const barPct = chartHeight > 0 ? (yScale(safeVal) / chartHeight) * 100 : 0}
         <div
         <div
           class="bar-container"
           class="bar-container"
           onmouseenter={() => hoveredYear = d.año}
           onmouseenter={() => hoveredYear = d.año}
@@ -102,7 +110,7 @@
           <div
           <div
             class="bar"
             class="bar"
             class:hovered={hoveredYear === d.año}
             class:hovered={hoveredYear === d.año}
-            style="height: {barPct}%"
+            style="height: {barPct}%; {safeVal > 0 ? 'min-height: 3px;' : ''}"
           ></div>
           ></div>
         </div>
         </div>
       {/each}
       {/each}

@@ -109,7 +109,7 @@
     onkeydown={handleSearchKeydown}
     onkeydown={handleSearchKeydown}
     onfocus={() => searchFocused = true}
     onfocus={() => searchFocused = true}
     onblur={handleSearchBlur}
     onblur={handleSearchBlur}
-    placeholder="Buscar objeto..."
+    placeholder="Buscar otro gasto..."
   />
   />
   {#if searchVal}
   {#if searchVal}
     <button class="search-clear" onclick={handleClear}>
     <button class="search-clear" onclick={handleClear}>

@@ -108,7 +108,19 @@
           codigo = `${meta.entidad || ''}-${meta.programa || ''}-${meta.proyecto || ''}`;
           codigo = `${meta.entidad || ''}-${meta.programa || ''}-${meta.proyecto || ''}`;
         }
         }
 
 
-        return { tipo, codigo, nombre, highlight, devengado: hit.document.devengado, gestion: hit.document.gestion };
+        // Contexto extra para programas
+        let contexto = '';
+        if (!isClass) {
+          const ents = meta.entidades || [];
+          const entNombre = ents.length === 1 ? ents[0].entidad_desc_entidad : ents.length > 1 ? `${ents.length} entidades` : '';
+          const prog = meta.programa_desc || '';
+          if (entNombre && prog) contexto = `${entNombre} · Programa: ${prog}`;
+          else if (entNombre) contexto = entNombre;
+          else if (prog) contexto = `Programa: ${prog}`;
+          console.log('[SEARCH] programa contexto:', { isClass, tipo, nombre, entNombre, prog, contexto, metaKeys: Object.keys(meta) });
+        }
+
+        return { tipo, codigo, nombre, highlight, devengado: hit.document.devengado, gestion: hit.document.gestion, contexto };
       });
       });
       selectedIdx = -1;
       selectedIdx = -1;
     } catch {
     } catch {
@@ -184,7 +196,6 @@
   }
   }
 
 
   function goToResult(item) {
   function goToResult(item) {
-    closeModal();
     const routes = {
     const routes = {
       entidad: '/entidad/',
       entidad: '/entidad/',
       objeto_gasto: '/objeto/',
       objeto_gasto: '/objeto/',
@@ -196,7 +207,12 @@
       programa: '/proyecto/'
       programa: '/proyecto/'
     };
     };
     const base = routes[item.tipo];
     const base = routes[item.tipo];
-    if (base) goto(`${base}${item.codigo}`);
+    if (base) {
+      const url = `${base}${item.codigo}`;
+      console.log('[SEARCH] goToResult:', item.tipo, item.codigo, '→', url);
+      open = false;
+      window.location.href = url;
+    }
   }
   }
 
 
   function handleBackdropClick(e) {
   function handleBackdropClick(e) {
@@ -319,6 +335,9 @@
                   {typeConfig[item.tipo]?.label || item.tipo}
                   {typeConfig[item.tipo]?.label || item.tipo}
                 </span>
                 </span>
                 <span class="result-name">{@html item.highlight}</span>
                 <span class="result-name">{@html item.highlight}</span>
+                {#if item.contexto}
+                  <span class="result-contexto">{item.contexto}</span>
+                {/if}
               </div>
               </div>
               <span class="result-code">{item.codigo}</span>
               <span class="result-code">{item.codigo}</span>
             </button>
             </button>
@@ -646,6 +665,15 @@
     text-overflow: ellipsis;
     text-overflow: ellipsis;
   }
   }
 
 
+  .result-contexto {
+    font-size: 0.75rem;
+    color: var(--theme-texto);
+    opacity: 0.6;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   .result-desc {
   .result-desc {
     font-size: 0.8125rem;
     font-size: 0.8125rem;
     color: var(--theme-texto);
     color: var(--theme-texto);

@@ -1379,9 +1379,16 @@
                                 </div>
                                 </div>
                                 <div class="result-meta">
                                 <div class="result-meta">
                                   <span class="result-monto">{formatMonto(hit.document.devengado)}</span>
                                   <span class="result-monto">{formatMonto(hit.document.devengado)}</span>
-                                  {#if meta.entidad_desc_entidad}
+                                  {#if meta.entidades?.length === 1}
                                     <span class="result-sep">·</span>
                                     <span class="result-sep">·</span>
-                                    <span class="result-entity">{meta.entidad_desc_entidad}</span>
+                                    <span class="result-entity">{meta.entidades[0].entidad_desc_entidad}</span>
+                                  {:else if meta.entidades?.length > 1}
+                                    <span class="result-sep">·</span>
+                                    <span class="result-entity">{meta.entidades.length} entidades</span>
+                                  {/if}
+                                  {#if meta.programa_desc}
+                                    <span class="result-sep">·</span>
+                                    <span class="result-entity">{meta.programa_desc}</span>
                                   {/if}
                                   {/if}
                                 </div>
                                 </div>
                               </div>
                               </div>
@@ -1443,10 +1450,20 @@
                             <span class="result-year">{formatYears(meta.gestion)}</span>
                             <span class="result-year">{formatYears(meta.gestion)}</span>
                             <span class="result-sep">·</span>
                             <span class="result-sep">·</span>
                             <span class="result-monto">{formatMonto(hit.document.devengado)}</span>
                             <span class="result-monto">{formatMonto(hit.document.devengado)}</span>
-                            {#if meta.entidad_desc_entidad}
+                            {#if meta.entidades?.length === 1}
+                              <span class="result-sep">·</span>
+                              <span class="result-entity">{meta.entidades[0].entidad_desc_entidad}</span>
+                            {:else if meta.entidades?.length > 1}
+                              <span class="result-sep">·</span>
+                              <span class="result-entity">{meta.entidades.length} entidades</span>
+                            {:else if meta.entidad_desc_entidad}
                               <span class="result-sep">·</span>
                               <span class="result-sep">·</span>
                               <span class="result-entity">{meta.entidad_desc_entidad}</span>
                               <span class="result-entity">{meta.entidad_desc_entidad}</span>
                             {/if}
                             {/if}
+                            {#if meta.programa_desc}
+                              <span class="result-sep">·</span>
+                              <span class="result-entity">Programa: {meta.programa_desc}</span>
+                            {/if}
                           {/if}
                           {/if}
                           {#if isEntidadClass || isClassResult}
                           {#if isEntidadClass || isClassResult}
                             <span class="result-monto">{formatMonto(hit.document.devengado)}</span>
                             <span class="result-monto">{formatMonto(hit.document.devengado)}</span>

+const API_BASE = 'http://136.112.29.74/api/entidad/clasificador';
+
+export async function GET() {
+  try {
+    const response = await fetch(API_BASE);
+    if (!response.ok) {
+      return new Response(JSON.stringify({ error: `API error: ${response.status}` }), {
+        status: response.status, headers: { 'Content-Type': 'application/json' }
+      });
+    }
+    const data = await response.json();
+    return new Response(JSON.stringify(data), {
+      headers: { 'Content-Type': 'application/json' }
+    });
+  } catch {
+    return new Response(JSON.stringify({ error: 'Failed to fetch' }), {
+      status: 500, headers: { 'Content-Type': 'application/json' }
+    });
+  }
+}

+const API_BASE = 'http://136.112.29.74/api/objeto/clasificador';
+
+export async function GET() {
+  try {
+    const response = await fetch(API_BASE);
+    if (!response.ok) {
+      return new Response(JSON.stringify({ error: `API error: ${response.status}` }), {
+        status: response.status, headers: { 'Content-Type': 'application/json' }
+      });
+    }
+    const data = await response.json();
+    return new Response(JSON.stringify(data), {
+      headers: { 'Content-Type': 'application/json' }
+    });
+  } catch {
+    return new Response(JSON.stringify({ error: 'Failed to fetch' }), {
+      status: 500, headers: { 'Content-Type': 'application/json' }
+    });
+  }
+}

+const API_BASE = 'http://136.112.29.74/api/objeto';
+
+export async function GET({ url }) {
+  const codigo = url.searchParams.get('codigo') || '';
+  const tipo = url.searchParams.get('tipo') || 'clasificador';
+  const entidad = url.searchParams.get('entidad') || '';
+  const gestion = url.searchParams.get('gestion') || '';
+
+  if (!codigo) {
+    return new Response(JSON.stringify({ error: 'Missing codigo' }), {
+      status: 400, headers: { 'Content-Type': 'application/json' }
+    });
+  }
+
+  let apiUrl;
+  if (tipo === 'clasificador') {
+    apiUrl = `${API_BASE}/${codigo}`;
+  } else if (tipo === 'entidades-lista') {
+    apiUrl = `${API_BASE}/${codigo}/entidades/map`;
+  } else if (tipo === 'entidad' && entidad) {
+    apiUrl = `${API_BASE}/${codigo}/entidades/${entidad}`;
+  } else if (tipo === 'entidades-año' && gestion) {
+    apiUrl = `${API_BASE}/${codigo}/entidades?gestion=${gestion}`;
+  } else {
+    return new Response(JSON.stringify({ error: 'Invalid tipo' }), {
+      status: 400, headers: { 'Content-Type': 'application/json' }
+    });
+  }
+
+  try {
+    const response = await fetch(apiUrl);
+    if (!response.ok) {
+      return new Response(JSON.stringify({ error: `API error: ${response.status}` }), {
+        status: response.status, headers: { 'Content-Type': 'application/json' }
+      });
+    }
+    const data = await response.json();
+    return new Response(JSON.stringify(data), {
+      headers: { 'Content-Type': 'application/json' }
+    });
+  } catch (err) {
+    return new Response(JSON.stringify({ error: 'Failed to fetch' }), {
+      status: 500, headers: { 'Content-Type': 'application/json' }
+    });
+  }
+}

+const API_BASE = 'http://136.112.29.74/api/entidad/clasificador';
+
+export async function GET() {
+  try {
+    const res = await fetch(API_BASE);
+    if (!res.ok) throw new Error();
+    const data = await res.json();
+    // Mapear al formato que espera el treemap
+    const mapped = data.map(d => ({
+      entidad: d.entidad,
+      desc_entidad: d.desc_entidad,
+      sigla_entidad: d.sigla_entidad || ''
+    }));
+    return new Response(JSON.stringify(mapped), {
+      headers: { 'Content-Type': 'application/json' }
+    });
+  } catch {
+    return new Response(JSON.stringify({ error: 'Failed to fetch' }), {
+      status: 500, headers: { 'Content-Type': 'application/json' }
+    });
+  }
+}

+const API_BASE = 'http://136.112.29.74/api/objeto';
+
+// Cache en memoria del servidor
+let cachedClasificador = null;
+let cachedEstados = null; // Map: objeto → estados[]
+let cachedTimestamp = 0;
+const CACHE_TTL = 5 * 60 * 1000; // 5 minutos
+
+async function loadAndCacheAll() {
+  const now = Date.now();
+  if (cachedEstados && (now - cachedTimestamp) < CACHE_TTL) return;
+
+  // 1. Cargar clasificador
+  const clasRes = await fetch(`${API_BASE}/clasificador`);
+  if (!clasRes.ok) throw new Error('Failed to fetch clasificador');
+  cachedClasificador = await clasRes.json();
+
+  // 2. Cargar todos los objetos en paralelo (lotes de 80)
+  const estados = new Map();
+  const batchSize = 80;
+
+  for (let i = 0; i < cachedClasificador.length; i += batchSize) {
+    const batch = cachedClasificador.slice(i, i + batchSize);
+    const results = await Promise.all(batch.map(async (item) => {
+      try {
+        const res = await fetch(`${API_BASE}/${item.objeto}`);
+        if (!res.ok) return null;
+        const data = await res.json();
+        return { objeto: item.objeto, estados: data.estados || [] };
+      } catch { return null; }
+    }));
+    results.filter(Boolean).forEach(r => estados.set(r.objeto, r.estados));
+  }
+
+  cachedEstados = estados;
+  cachedTimestamp = now;
+}
+
+export async function GET({ url }) {
+  const gestion = parseInt(url.searchParams.get('gestion') || '2025');
+  const entidad = url.searchParams.get('entidad') || '0';
+
+  try {
+    if (entidad === '0') {
+      // Todo el estado — usar cache
+      await loadAndCacheAll();
+
+      const results = [];
+      for (const item of cachedClasificador) {
+        const estados = cachedEstados.get(item.objeto);
+        if (!estados) continue;
+        const yearData = estados.find(d => d.gestion === gestion);
+        if (!yearData || !yearData.total) continue;
+        results.push({
+          gestion,
+          nivel: item.nivel,
+          objeto: item.objeto,
+          desc_objeto: item.desc_objeto,
+          parent: getParent(item.objeto, item.nivel),
+          devengado: yearData.total
+        });
+      }
+
+      return new Response(JSON.stringify(results), {
+        headers: { 'Content-Type': 'application/json' }
+      });
+    } else {
+      // Entidad específica — cargar por entidad (no cacheable eficientemente)
+      if (!cachedClasificador) {
+        const clasRes = await fetch(`${API_BASE}/clasificador`);
+        cachedClasificador = await clasRes.json();
+      }
+
+      const results = [];
+      const batchSize = 80;
+
+      for (let i = 0; i < cachedClasificador.length; i += batchSize) {
+        const batch = cachedClasificador.slice(i, i + batchSize);
+        const batchResults = await Promise.all(batch.map(async (item) => {
+          try {
+            const res = await fetch(`${API_BASE}/${item.objeto}/entidades/${entidad}`);
+            if (!res.ok) return null;
+            const data = await res.json();
+            const yearData = data.find(d => d.gestion === gestion);
+            if (!yearData || !yearData.monto) return null;
+            return {
+              gestion,
+              nivel: item.nivel,
+              objeto: item.objeto,
+              desc_objeto: item.desc_objeto,
+              parent: getParent(item.objeto, item.nivel),
+              devengado: yearData.monto
+            };
+          } catch { return null; }
+        }));
+        results.push(...batchResults.filter(Boolean));
+      }
+
+      return new Response(JSON.stringify(results), {
+        headers: { 'Content-Type': 'application/json' }
+      });
+    }
+  } catch (err) {
+    return new Response(JSON.stringify({ error: 'Failed to build treemap' }), {
+      status: 500, headers: { 'Content-Type': 'application/json' }
+    });
+  }
+}
+
+function getParent(objeto, nivel) {
+  if (nivel === 'grupo') return null;
+  if (nivel === 'subgrupo') return objeto.charAt(0) + '0000';
+  if (nivel === 'partida') return objeto.substring(0, 2) + '000';
+  if (nivel === 'subpartida') return objeto.substring(0, 3) + '00';
+  return null;
+}

 <script>
 <script>
-  import { supabase } from '$lib/supabase';
   import { onMount } from 'svelte';
   import { onMount } from 'svelte';
   import { page } from '$app/stores';
   import { page } from '$app/stores';
   import { goto } from '$app/navigation';
   import { goto } from '$app/navigation';
@@ -97,7 +96,8 @@
 
 
   // Selector de nivel para vista aplanada
   // Selector de nivel para vista aplanada
   let treemapViewLevel = $state('partida'); // 'jerarquico' | 'grupo' | 'subgrupo' | 'partida' | 'subpartida'
   let treemapViewLevel = $state('partida'); // 'jerarquico' | 'grupo' | 'subgrupo' | 'partida' | 'subpartida'
-  let showConsolidado = $state(true); // true = consolidado (sin grupo 7), false = agregado (con transferencias)
+  let showConsolidado = $state(true);
+  let clasLinkCopied = $state(false);
   const NIVEL_OPTIONS = [
   const NIVEL_OPTIONS = [
     { value: 'jerarquico', label: 'Jerarquía/Grupos', desc: 'Navegar por niveles' },
     { value: 'jerarquico', label: 'Jerarquía/Grupos', desc: 'Navegar por niveles' },
     { value: 'grupo', label: 'Grupos', desc: '8-9 categorías' },
     { value: 'grupo', label: 'Grupos', desc: '8-9 categorías' },
@@ -193,42 +193,22 @@
 
 
   // Cargar datos del treemap desde Supabase
   // Cargar datos del treemap desde Supabase
   async function loadTreemapData() {
   async function loadTreemapData() {
-    // Limpiar estado antes de cargar nuevos datos
     treemapNodes = [];
     treemapNodes = [];
 
 
     try {
     try {
-      // Query a Supabase con filtros en el servidor para mejor rendimiento
-      // selectedEntity = null significa "Todo el Estado" (entidad = 0)
       const entidadFiltro = selectedEntity?.entidad ?? 0;
       const entidadFiltro = selectedEntity?.entidad ?? 0;
+      const res = await fetch(`/api/objeto-treemap?gestion=${selectedYear}&entidad=${entidadFiltro}`);
+      const data = await res.json();
 
 
-      let query = supabase
-        .schema('ppto')
-        .from('treemap_objeto')
-        .select('gestion, nivel, objeto, desc_objeto, parent, devengado')
-        .eq('gestion', selectedYear)
-        .eq('entidad', entidadFiltro)
-        .gt('devengado', 0);
-
-      const { data, error: dbError } = await query;
-
-      if (dbError) {
-        console.error('Error fetching treemap data:', dbError.message, dbError.code, dbError.details);
+      if (data.error) {
+        console.error('Error fetching treemap data:', data.error);
         return;
         return;
       }
       }
 
 
-      // Procesar datos: convertir tipos y filtrar subpartidas duplicadas
       let filtered = data
       let filtered = data
-        .map(d => ({
-          gestion: d.gestion,
-          nivel: d.nivel,
-          objeto: d.objeto,
-          desc_objeto: d.desc_objeto,
-          parent: d.parent,
-          devengado: d.devengado || 0
-        }))
+        .filter(d => d.devengado > 0)
         .filter(d => !(d.nivel === 'subpartida' && d.desc_objeto === null));
         .filter(d => !(d.nivel === 'subpartida' && d.desc_objeto === null));
 
 
-      // Si es vista consolidada, excluir grupo 7 (Transferencias)
       if (showConsolidado) {
       if (showConsolidado) {
         filtered = filtered.filter(d => !String(d.objeto).startsWith('7'));
         filtered = filtered.filter(d => !String(d.objeto).startsWith('7'));
       }
       }
@@ -246,28 +226,18 @@
     if (!year) return;
     if (!year) return;
 
 
     try {
     try {
-      const { data, error: dbError } = await supabase
-        .schema('ppto')
-        .from('entidades_treemap')
-        .select('entidad, desc_entidad, sigla_entidad')
-        .eq('gestion', year)
-        .order('desc_entidad');
-
-      if (dbError) {
-        console.error('Error loading entities:', dbError.message);
-        return;
-      }
+      const res = await fetch('/api/objeto-treemap-entidades');
+      const data = await res.json();
 
 
-      entities = data || [];
-      console.log('Entities loaded for year', year, ':', entities.length);
+      if (Array.isArray(data)) {
+        entities = data.sort((a, b) => (a.desc_entidad || '').localeCompare(b.desc_entidad || ''));
+        console.log('Entities loaded:', entities.length);
+      }
 
 
-      // Si hay entidad seleccionada, verificar que existe en el nuevo año
       if (selectedEntity) {
       if (selectedEntity) {
         const existsInYear = entities.some(e => e.entidad === selectedEntity.entidad);
         const existsInYear = entities.some(e => e.entidad === selectedEntity.entidad);
         if (!existsInYear) {
         if (!existsInYear) {
-          // La entidad no existe en este año, volver a Todo el Estado
           selectedEntity = null;
           selectedEntity = null;
-          console.log('Entity not available for year', year, '- reset to Todo el Estado');
         }
         }
       }
       }
     } catch (err) {
     } catch (err) {
@@ -549,10 +519,12 @@
 
 
   // Navegar a vista de distribución por entidades
   // Navegar a vista de distribución por entidades
   function navigateToEntityDistribution(node) {
   function navigateToEntityDistribution(node) {
-    // Obtener el código del objeto (puede ser grupo, subgrupo, partida o subpartida)
-    const codigo = node.id || node.data?.objeto;
+    let codigo = node.id || node.data?.objeto;
+    // Si es un grupo (id como "grupo_1"), convertir a código real
+    if (typeof codigo === 'string' && codigo.startsWith('grupo_')) {
+      codigo = codigo.replace('grupo_', '') + '0000';
+    }
     if (codigo) {
     if (codigo) {
-      // Navegar a la ruta de distribución por entidades
       goto(`/objeto/${codigo}/entidades?gestion=${selectedYear}`);
       goto(`/objeto/${codigo}/entidades?gestion=${selectedYear}`);
     }
     }
   }
   }
@@ -797,56 +769,34 @@
       return;
       return;
     }
     }
 
 
-    // Si no hay cache, cargar datos
-    // Cargar clasificador de objetos
-    const { data, error } = await supabase
-      .schema('ppto')
-      .from('clas_objetos')
-      .select('*')
-      .order('objeto')
-      .range(0, 9999);
+    // Cargar clasificador de objetos desde API
+    try {
+      const res = await fetch('/api/objeto-clasificador');
+      const data = await res.json();
 
 
-    if (!error && data) {
+      if (Array.isArray(data)) {
         allItems = data;
         allItems = data;
 
 
-      // Extraer grupos únicos
         grupos = data
         grupos = data
           .filter(item => item.nivel === 'grupo')
           .filter(item => item.nivel === 'grupo')
-        .reduce((acc, item) => {
-          if (!acc.find(g => g.objeto === item.objeto)) {
-            acc.push(item);
-          }
-          return acc;
-        }, [])
-        .sort((a, b) => a.objeto.localeCompare(b.objeto));
+          .sort((a, b) => String(a.objeto).localeCompare(String(b.objeto)));
 
 
         if (grupos.length > 0) {
         if (grupos.length > 0) {
           selectedGrupo = grupos[0];
           selectedGrupo = grupos[0];
         }
         }
-    }
 
 
-    // Cargar años disponibles desde Supabase
-    try {
-      const { data: yearsData, error: yearsError } = await supabase
-        .schema('ppto')
-        .from('treemap_objeto')
-        .select('gestion')
-        .eq('entidad', 0)
-        .eq('nivel', 'grupo')
-        .gt('devengado', 0);
-
-      if (!yearsError && yearsData && yearsData.length > 0) {
-        const uniqueYears = [...new Set(yearsData.map(d => d.gestion))].sort((a, b) => b - a);
-        availableYears = uniqueYears;
-        selectedYear = availableYears[0]; // Año más reciente por defecto
+        // Años desde gestiones del primer grupo
+        if (data[0]?.gestiones) {
+          availableYears = data[0].gestiones.split(',').map(Number).filter(y => y >= 2016).sort((a, b) => b - a);
+          selectedYear = availableYears[0];
         } else {
         } else {
-        // Fallback: años de 2005 a 2025
-        availableYears = Array.from({ length: 21 }, (_, i) => 2025 - i);
+          availableYears = Array.from({ length: 10 }, (_, i) => 2025 - i);
           selectedYear = 2025;
           selectedYear = 2025;
         }
         }
+      }
     } catch (err) {
     } catch (err) {
-      // Fallback si falla la carga
-      availableYears = Array.from({ length: 21 }, (_, i) => 2025 - i);
+      console.error('Error loading clasificador:', err);
+      availableYears = Array.from({ length: 10 }, (_, i) => 2025 - i);
       selectedYear = 2025;
       selectedYear = 2025;
     }
     }
 
 
@@ -1061,16 +1011,11 @@
     const entidadFiltro = config.entity?.entidad ?? 0;
     const entidadFiltro = config.entity?.entidad ?? 0;
 
 
     try {
     try {
-      const { data, error: dbError } = await supabase
-        .schema('ppto')
-        .from('treemap_objeto')
-        .select('gestion, nivel, objeto, desc_objeto, parent, devengado')
-        .eq('gestion', config.year)
-        .eq('entidad', entidadFiltro)
-        .gt('devengado', 0);
-
-      if (dbError) {
-        console.error(`Error loading compare ${side} data:`, dbError);
+      const res = await fetch(`/api/objeto-treemap?gestion=${config.year}&entidad=${entidadFiltro}`);
+      const data = await res.json();
+
+      if (data.error) {
+        console.error(`Error loading compare ${side} data:`, data.error);
         return;
         return;
       }
       }
 
 
@@ -1542,9 +1487,6 @@
       </nav>
       </nav>
 
 
       <div class="{viewMode === 'mapa' || viewMode === 'comparar' ? 'flex-1' : 'max-w-5xl'}">
       <div class="{viewMode === 'mapa' || viewMode === 'comparar' ? 'flex-1' : 'max-w-5xl'}">
-        <p class="text-sm uppercase tracking-widest mb-2 font-semibold" style="font-family: var(--font-sans); color: var(--theme-accent);">
-          Clasificador de Objeto del Gasto
-        </p>
         <div class="flex items-center gap-3 {viewMode === 'mapa' || viewMode === 'comparar' ? 'mb-1' : 'mb-3'}">
         <div class="flex items-center gap-3 {viewMode === 'mapa' || viewMode === 'comparar' ? 'mb-1' : 'mb-3'}">
           <h1 class="{viewMode === 'mapa' || viewMode === 'comparar' ? 'text-xl' : 'text-3xl'}" style="font-family: var(--font-display); color: var(--theme-titulo);">
           <h1 class="{viewMode === 'mapa' || viewMode === 'comparar' ? 'text-xl' : 'text-3xl'}" style="font-family: var(--font-display); color: var(--theme-titulo);">
             ¿En qué se gasta?
             ¿En qué se gasta?
@@ -1563,6 +1505,29 @@
               <span class="hidden sm:inline">Cómo leer</span>
               <span class="hidden sm:inline">Cómo leer</span>
             </button>
             </button>
           {/if}
           {/if}
+          <div style="margin-left: auto; display: flex; align-items: center; gap: 0.75rem;">
+            <button class="share-btn-clas" onclick={() => {
+              navigator.clipboard.writeText(window.location.href);
+              clasLinkCopied = true;
+              setTimeout(() => clasLinkCopied = false, 2000);
+            }}>
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                {#if clasLinkCopied}
+                  <path d="M20 6L9 17l-5-5"/>
+                {:else}
+                  <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
+                  <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
+                {/if}
+              </svg>
+              {clasLinkCopied ? 'Copiado' : 'Compartir'}
+            </button>
+            <a href="/" class="share-btn-clas" style="text-decoration: none;">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M19 12H5M12 19l-7-7 7-7"/>
+              </svg>
+              Volver
+            </a>
+          </div>
         </div>
         </div>
         {#if viewMode === 'mapa'}
         {#if viewMode === 'mapa'}
           <div class="title-selectors">
           <div class="title-selectors">
@@ -2150,42 +2115,6 @@
           </button>
           </button>
 
 
           <div class="sidebar-content">
           <div class="sidebar-content">
-            <!-- Selector de Modo (Lista, Mapa, Comparar) -->
-            <div class="sidebar-section">
-              <label class="sidebar-label">Explorar</label>
-              <div class="sidebar-modes">
-                <button
-                  class="mode-btn"
-                  class:active={viewMode === 'lista'}
-                  onclick={() => { setMode('lista'); mapaSidebarOpen = false; }}
-                >
-                  <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="M4 6h16M4 10h16M4 14h16M4 18h16" />
-                  </svg>
-                  Lista
-                </button>
-                <button
-                  class="mode-btn"
-                  class:active={viewMode === 'mapa'}
-                  onclick={() => { setMode('mapa'); mapaSidebarOpen = false; }}
-                >
-                  <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="M4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM14 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4zM14 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" />
-                  </svg>
-                  Mapa
-                </button>
-                <button
-                  class="mode-btn"
-                  class:active={viewMode === 'comparar'}
-                  onclick={() => { setMode('comparar'); initCompareMode(); mapaSidebarOpen = false; }}
-                >
-                  <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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
-                  </svg>
-                  Comparar
-                </button>
-              </div>
-            </div>
 
 
             <!-- Navegación drill-down (solo en modo jerárquico con depth > 1) -->
             <!-- Navegación drill-down (solo en modo jerárquico con depth > 1) -->
             {#if treemapViewLevel === 'jerarquico' && treemapBreadcrumb.length > 1}
             {#if treemapViewLevel === 'jerarquico' && treemapBreadcrumb.length > 1}
@@ -2227,24 +2156,6 @@
               </div>
               </div>
             </div>
             </div>
 
 
-            <!-- Toggle Consolidado/Agregado -->
-            <div class="sidebar-section">
-              <label class="sidebar-label">Tipo</label>
-              <button
-                class="sidebar-toggle"
-                onclick={() => showConsolidado = !showConsolidado}
-              >
-                <span class="toggle-switch" class:active={showConsolidado}>
-                  <span class="toggle-knob"></span>
-                </span>
-                <span class="toggle-label">
-                  {showConsolidado ? 'Consolidado' : 'Agregado'}
-                </span>
-              </button>
-              <p class="toggle-hint">
-                {showConsolidado ? 'Sin transferencias entre entidades' : 'Incluye transferencias (grupo 7)'}
-              </p>
-            </div>
           </div>
           </div>
         </aside>
         </aside>
 
 
@@ -2293,10 +2204,10 @@
                   <g
                   <g
                     class="treemap-node"
                     class="treemap-node"
                     transform="translate({node.x0}, {node.y0})"
                     transform="translate({node.x0}, {node.y0})"
-                    onclick={() => hasChildren && drillDown(node)}
+                    onclick={() => hasChildren ? drillDown(node) : goto(`/objeto/${node.id}`)}
                     onmouseenter={() => hoveredNode = node}
                     onmouseenter={() => hoveredNode = node}
                     onmouseleave={() => hoveredNode = null}
                     onmouseleave={() => hoveredNode = null}
-                    style="cursor: {hasChildren ? 'pointer' : 'default'};"
+                    style="cursor: pointer;"
                   >
                   >
                     <rect
                     <rect
                       width={width}
                       width={width}
@@ -2603,31 +2514,6 @@
           </button>
           </button>
 
 
           <div class="sidebar-content">
           <div class="sidebar-content">
-            <!-- Selector de Modo -->
-            <div class="sidebar-section">
-              <label class="sidebar-label">Explorar</label>
-              <div class="sidebar-modes">
-                <button class="mode-btn" class:active={viewMode === 'lista'} onclick={() => { setMode('lista'); mapaSidebarOpen = false; }}>
-                  <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="M4 6h16M4 10h16M4 14h16M4 18h16" />
-                  </svg>
-                  Lista
-                </button>
-                <button class="mode-btn" class:active={viewMode === 'mapa'} onclick={() => { setMode('mapa'); mapaSidebarOpen = false; }}>
-                  <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="M4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM14 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4zM14 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" />
-                  </svg>
-                  Mapa
-                </button>
-                <button class="mode-btn active" onclick={() => mapaSidebarOpen = false}>
-                  <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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
-                  </svg>
-                  Comparar
-                </button>
-              </div>
-            </div>
-
             <!-- Selector de Nivel -->
             <!-- Selector de Nivel -->
             <div class="sidebar-section">
             <div class="sidebar-section">
               <label class="sidebar-label">Nivel</label>
               <label class="sidebar-label">Nivel</label>
@@ -2652,18 +2538,6 @@
               </div>
               </div>
             </div>
             </div>
 
 
-            <!-- Toggle Consolidado/Agregado -->
-            <div class="sidebar-section">
-              <label class="sidebar-label">Tipo</label>
-              <button class="sidebar-toggle" onclick={() => showConsolidado = !showConsolidado}>
-                <span class="toggle-switch" class:active={showConsolidado}>
-                  <span class="toggle-knob"></span>
-                </span>
-                <span class="toggle-label">{showConsolidado ? 'Consolidado' : 'Agregado'}</span>
-              </button>
-              <p class="toggle-hint">{showConsolidado ? 'Sin transferencias' : 'Con transferencias'}</p>
-            </div>
-
             <!-- Botón intercambiar -->
             <!-- Botón intercambiar -->
             <div class="sidebar-section">
             <div class="sidebar-section">
               <button
               <button
@@ -4201,6 +4075,22 @@
     box-shadow: 0 4px 24px rgba(28,28,26,0.12), inset 0 0 0 1px rgba(28,28,26,0.06) !important;
     box-shadow: 0 4px 24px rgba(28,28,26,0.12), inset 0 0 0 1px rgba(28,28,26,0.06) !important;
   }
   }
 
 
+  .share-btn-clas {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-size: 0.6875rem;
+    color: var(--theme-texto);
+    opacity: 0.5;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    transition: opacity 0.15s;
+    margin-left: auto;
+  }
+  .share-btn-clas:hover { opacity: 1; }
+
   /* Toggle button para Consolidado/Agregado */
   /* Toggle button para Consolidado/Agregado */
   .toggle-btn {
   .toggle-btn {
     border: 1px solid var(--theme-borde);
     border: 1px solid var(--theme-borde);

-import { supabase } from '$lib/supabase';
 import { error } from '@sveltejs/kit';
 import { error } from '@sveltejs/kit';
 
 
-// Funciones para derivar jerarquía del código objeto
-function getGrupoCode(objeto) {
-  return objeto.charAt(0) + '0000';
-}
-
-function getSubgrupoCode(objeto) {
-  return objeto.substring(0, 2) + '000';
-}
-
-function getPartidaCode(objeto) {
-  return objeto.substring(0, 3) + '00';
-}
-
-function getNivel(objeto) {
-  if (objeto.endsWith('0000')) return 'grupo';
-  if (objeto.endsWith('000')) return 'subgrupo';
-  if (objeto.endsWith('00')) return 'partida';
-  return 'subpartida';
-}
+const API_BASE = 'http://136.112.29.74/api/objeto';
 
 
 export async function load({ params }) {
 export async function load({ params }) {
-  console.time('[SERVER] Total load objeto');
   const { codigo } = params;
   const { codigo } = params;
 
 
-  console.time('[SERVER] Query clas_objetos');
-  const { data, error: dbError } = await supabase
-    .schema('ppto')
-    .from('clas_objetos')
-    .select('*')
-    .eq('objeto', codigo);
-  console.timeEnd('[SERVER] Query clas_objetos');
-
-  if (dbError || !data || data.length === 0) {
-    throw error(404, 'Objeto no encontrado');
-  }
-
-  // Tomar el primer resultado
-  const objeto = data[0];
-  const nivel = objeto.nivel || getNivel(codigo);
-
-  // Obtener jerarquía (padres e hijos)
-  let padres = [];
-  let hijos = [];
+  // Cargar clasificador desde la API
+  const res = await fetch(`${API_BASE}/${codigo}`);
+  if (!res.ok) throw error(404, 'Objeto no encontrado');
+  const objeto = await res.json();
 
 
-  console.time('[SERVER] Query padres');
+  // Derivar padres e hijos del código
+  const nivel = objeto.nivel;
+  let padresCodes = [];
 
 
-  // Buscar padres según nivel
   if (nivel === 'subpartida') {
   if (nivel === 'subpartida') {
-    // Padres: grupo, subgrupo, partida
-    const grupoCode = getGrupoCode(codigo);
-    const subgrupoCode = getSubgrupoCode(codigo);
-    const partidaCode = getPartidaCode(codigo);
-
-    const { data: padresData } = await supabase
-      .schema('ppto')
-      .from('clas_objetos')
-      .select('*')
-      .in('objeto', [grupoCode, subgrupoCode, partidaCode])
-      .order('objeto');
-
-    if (padresData) padres = padresData;
+    padresCodes = [
+      codigo.charAt(0) + '0000',
+      codigo.substring(0, 2) + '000',
+      codigo.substring(0, 3) + '00'
+    ];
   } else if (nivel === 'partida') {
   } else if (nivel === 'partida') {
-    // Padres: grupo, subgrupo
-    const grupoCode = getGrupoCode(codigo);
-    const subgrupoCode = getSubgrupoCode(codigo);
-
-    const { data: padresData } = await supabase
-      .schema('ppto')
-      .from('clas_objetos')
-      .select('*')
-      .in('objeto', [grupoCode, subgrupoCode])
-      .order('objeto');
-
-    if (padresData) padres = padresData;
+    padresCodes = [
+      codigo.charAt(0) + '0000',
+      codigo.substring(0, 2) + '000'
+    ];
   } else if (nivel === 'subgrupo') {
   } else if (nivel === 'subgrupo') {
-    // Padre: grupo
-    const grupoCode = getGrupoCode(codigo);
-
-    const { data: padresData } = await supabase
-      .schema('ppto')
-      .from('clas_objetos')
-      .select('*')
-      .eq('objeto', grupoCode);
-
-    if (padresData) padres = padresData;
+    padresCodes = [codigo.charAt(0) + '0000'];
   }
   }
-  // grupo no tiene padres
-
-  console.timeEnd('[SERVER] Query padres');
 
 
-  console.time('[SERVER] Query hijos');
+  // Cargar padres e hijos en paralelo desde la API
+  const [padresResults, hijosResult] = await Promise.all([
+    Promise.all(padresCodes.map(async (c) => {
+      try {
+        const r = await fetch(`${API_BASE}/${c}`);
+        if (r.ok) return await r.json();
+      } catch {}
+      return null;
+    })),
+    (async () => {
+      // Hijos: buscar en el clasificador
+      try {
+        const r = await fetch(`${API_BASE}/clasificador`);
+        if (!r.ok) return [];
+        const all = await r.json();
 
 
-  // Buscar hijos según nivel
         if (nivel === 'grupo') {
         if (nivel === 'grupo') {
-    // Hijos: subgrupos que empiecen con el mismo dígito
-    const prefix = codigo.charAt(0);
-    const { data: hijosData } = await supabase
-      .schema('ppto')
-      .from('clas_objetos')
-      .select('*')
-      .eq('nivel', 'subgrupo')
-      .like('objeto', `${prefix}%`)
-      .order('objeto');
-
-    hijos = hijosData || [];
+          return all.filter(o => o.nivel === 'subgrupo' && o.objeto.charAt(0) === codigo.charAt(0) && o.objeto !== codigo);
         } else if (nivel === 'subgrupo') {
         } else if (nivel === 'subgrupo') {
-    // Hijos: partidas que empiecen con los mismos 2 dígitos
-    const prefix = codigo.substring(0, 2);
-    const { data: hijosData } = await supabase
-      .schema('ppto')
-      .from('clas_objetos')
-      .select('*')
-      .eq('nivel', 'partida')
-      .like('objeto', `${prefix}%`)
-      .order('objeto');
-
-    hijos = hijosData || [];
+          return all.filter(o => o.nivel === 'partida' && o.objeto.substring(0, 2) === codigo.substring(0, 2));
         } else if (nivel === 'partida') {
         } else if (nivel === 'partida') {
-    // Hijos: subpartidas que empiecen con los mismos 3 dígitos
-    const prefix = codigo.substring(0, 3);
-    const { data: hijosData } = await supabase
-      .schema('ppto')
-      .from('clas_objetos')
-      .select('*')
-      .eq('nivel', 'subpartida')
-      .like('objeto', `${prefix}%`)
-      .order('objeto');
-
-    hijos = hijosData || [];
+          return all.filter(o => o.nivel === 'subpartida' && o.objeto.substring(0, 3) === codigo.substring(0, 3));
         }
         }
-  // subpartida no tiene hijos
+        return [];
+      } catch { return []; }
+    })()
+  ]);
 
 
-  console.timeEnd('[SERVER] Query hijos');
+  const padres = padresResults.filter(Boolean).sort((a, b) => a.objeto.localeCompare(b.objeto));
+  const hijos = hijosResult.sort((a, b) => a.objeto.localeCompare(b.objeto));
 
 
-  console.timeEnd('[SERVER] Total load objeto');
   return {
   return {
     objeto,
     objeto,
     padres,
     padres,
-    hijos
+    hijos,
+    nEntidades: 0
   };
   };
 }
 }

@@ -4,7 +4,6 @@
   import { cubicOut } from 'svelte/easing';
   import { cubicOut } from 'svelte/easing';
   import { goto } from '$app/navigation';
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
   import { page } from '$app/stores';
-  import { supabase } from '$lib/supabase';
   import Spinner from '$lib/components/ui/Spinner.svelte';
   import Spinner from '$lib/components/ui/Spinner.svelte';
   import ObjetoSearch from '$lib/components/objeto/ObjetoSearch.svelte';
   import ObjetoSearch from '$lib/components/objeto/ObjetoSearch.svelte';
   import VistaToggle from '$lib/components/objeto/VistaToggle.svelte';
   import VistaToggle from '$lib/components/objeto/VistaToggle.svelte';
@@ -18,38 +17,62 @@
   let hijos = $derived(data.hijos);
   let hijos = $derived(data.hijos);
 
 
   let mounted = $state(false);
   let mounted = $state(false);
-  let loading = $state(true);
+  let loading = $state(false);
   let hoveredYear = $state(null);
   let hoveredYear = $state(null);
   let showDefinicionesModal = $state(false);
   let showDefinicionesModal = $state(false);
   let showMobileSidebar = $state(false);
   let showMobileSidebar = $state(false);
   let metrica = $state('percapita'); // 'percapita' | 'monto'
   let metrica = $state('percapita'); // 'percapita' | 'monto'
   let vista = $state('agregado'); // 'agregado' | 'comparar'
   let vista = $state('agregado'); // 'agregado' | 'comparar'
+  let linkCopied = $state(false);
 
 
-  // Parsear descripciones
-  function parseDescripciones(str) {
-    if (!str) return [];
-    try {
-      const parsed = JSON.parse(str);
-      return parsed.sort((a, b) => {
-        const yA = a.rangos?.match(/\d{4}/g) || [];
-        const yB = b.rangos?.match(/\d{4}/g) || [];
-        return Math.max(...yB.map(Number), 0) - Math.max(...yA.map(Number), 0);
-      });
-    } catch { return []; }
+  // Parsear descripciones - la API devuelve array directo con { gestion, descripcion }
+  function getMaxYear(str) {
+    if (!str) return 0;
+    const years = str.match(/\d{4}/g);
+    return years ? Math.max(...years.map(Number)) : 0;
   }
   }
 
 
-  let descripciones = $derived(parseDescripciones(objetoData.descripciones));
-  let variaciones = $derived(descripciones.map(d => ({ rango: d.rangos, texto: d.descripcion })));
+  let descripciones = $derived.by(() => {
+    const descs = objetoData.descripciones;
+    if (!descs) return [];
+    let arr;
+    if (typeof descs === 'string') {
+      try { arr = JSON.parse(descs); } catch { return []; }
+    } else {
+      arr = Array.isArray(descs) ? descs : [];
+    }
+    // Ordenar por año más reciente primero
+    return [...arr].sort((a, b) => getMaxYear(b.gestion || b.rangos) - getMaxYear(a.gestion || a.rangos));
+  });
+  let variaciones = $derived(descripciones.map(d => ({ rango: d.gestion || d.rangos || '', texto: d.descripcion })));
 
 
   // Estado selector entidad
   // Estado selector entidad
   let entidades = $state([]);
   let entidades = $state([]);
   let selectedEntity = $state(null);
   let selectedEntity = $state(null);
-  let nEntidades = $derived(data.nEntidades);
+  let nEntidades = $derived(entidades.length || data.nEntidades || 0);
+
+  // Datos — inicializar desde estados del server
+  function initEstados(obj) {
+    const estadosRaw = obj?.estados || [];
+    const seen = new Set();
+    const estados = estadosRaw.filter(d => { if (seen.has(d.gestion)) return false; seen.add(d.gestion); return true; });
+    const hist = estados.find(d => d.gestion === 0) || null;
+    const anuales = estados.filter(d => d.gestion >= 2016 && d.gestion > 0);
+    const topPorAño = {};
+    anuales.forEach(d => {
+      topPorAño[d.gestion] = [
+        { nombre: d.top1_entidad_desc, porcentaje: d.top1_pct, entidad: d.top1_entidad },
+        { nombre: d.top2_entidad_desc, porcentaje: d.top2_pct, entidad: d.top2_entidad },
+        { nombre: d.top3_entidad_desc, porcentaje: d.top3_pct, entidad: d.top3_entidad },
+      ].filter(e => e.nombre);
+    });
+    return { hist, anuales, topPorAño };
+  }
 
 
-  // Datos
-  let datosAnuales = $state([]);
-  let datosHistorico = $state(null);
-  let topEntidadesPorAño = $state({});
+  let { hist: initHist, anuales: initAnuales, topPorAño: initTop } = initEstados(objetoData);
+  let datosAnuales = $state(initAnuales);
+  let datosHistorico = $state(initHist);
+  let topEntidadesPorAño = $state(initTop);
 
 
   const POBLACION = 12000000;
   const POBLACION = 12000000;
   let objetoCodigo = $derived(objetoData.objeto);
   let objetoCodigo = $derived(objetoData.objeto);
@@ -57,8 +80,8 @@
 
 
   let gastoPerCapita = $derived(
   let gastoPerCapita = $derived(
     datosAnuales.map(d => {
     datosAnuales.map(d => {
-      const monto = selectedEntity ? (d.monto ?? d.devengado) : d.total;
-      const perCapita = d.per_capita ?? (d.devengado ? d.devengado / POBLACION : 0);
+      const monto = Number(selectedEntity ? (d.monto ?? d.devengado ?? 0) : (d.total ?? 0)) || 0;
+      const perCapita = Number(d.per_capita ?? (d.devengado ? d.devengado / POBLACION : 0)) || 0;
       return {
       return {
         año: d.gestion,
         año: d.gestion,
         monto,
         monto,
@@ -70,35 +93,66 @@
   let primerAño = $derived(gastoPerCapita.length > 0 ? gastoPerCapita[0].año : 2005);
   let primerAño = $derived(gastoPerCapita.length > 0 ? gastoPerCapita[0].año : 2005);
   let ultimoAño = $derived(gastoPerCapita.length > 0 ? gastoPerCapita[gastoPerCapita.length - 1].año : 2025);
   let ultimoAño = $derived(gastoPerCapita.length > 0 ? gastoPerCapita[gastoPerCapita.length - 1].año : 2025);
 
 
-  let totalHistorico = $derived(datosHistorico ? (selectedEntity ? datosHistorico.monto : datosHistorico.total) : 0);
-  let promedioPerCapita = $derived(datosHistorico?.per_capita || 0);
-  let totalPorcentaje = $derived(datosHistorico?.prop || 0);
-  let ranking = $derived(datosHistorico?.ranking || 0);
-  let nPares = $derived(datosHistorico?.n_pares || 0);
+  let totalHistorico = $derived(datosHistorico ? (selectedEntity ? (datosHistorico.monto ?? 0) : (datosHistorico.total ?? 0)) : 0);
+  let promedioPerCapita = $derived(datosHistorico?.per_capita ?? 0);
+  let totalPorcentaje = $derived(datosHistorico?.prop ?? 0);
+  let ranking = $derived(datosHistorico?.ranking ?? 0);
+  let nPares = $derived(datosHistorico?.n_pares ?? 0);
+  let totalGestion = $derived(datosHistorico?.total_gestion ?? 0);
 
 
   let currentData = $derived(
   let currentData = $derived(
     hoveredYear ? gastoPerCapita.find(g => g.año === hoveredYear) : null
     hoveredYear ? gastoPerCapita.find(g => g.año === hoveredYear) : null
   );
   );
 
 
-  let displayMonto = $derived(currentData ? currentData.monto : totalHistorico);
-  let displayMontoLabel = $derived(currentData ? `gastados en ${currentData.año}` : `gastados ${primerAño}-${ultimoAño}`);
-  let displayPerCapita = $derived(currentData ? currentData.perCapita : promedioPerCapita);
-  let displayPerCapitaLabel = $derived(currentData ? `por cada boliviano en ${currentData.año}` : 'por cada boliviano');
-  let displayPorcentaje = $derived(currentData ? (totalHistorico > 0 ? totalPorcentaje * (currentData.monto / (totalHistorico / gastoPerCapita.length)) : 0) : totalPorcentaje);
+  // Datos del año hovereado desde datosAnuales (tiene todos los campos de la API)
+  let currentAnual = $derived(hoveredYear ? datosAnuales.find(d => d.gestion === hoveredYear) : null);
+
+  // KPI 1: Monto
+  let displayMonto = $derived.by(() => {
+    if (selectedEntity) {
+      return (currentAnual ? currentAnual.monto : totalHistorico) ?? 0;
+    }
+    return (currentAnual ? currentAnual.total_gestion : totalGestion) ?? 0;
+  });
+  let displayMontoLabel = $derived.by(() => {
+    if (selectedEntity) {
+      return currentAnual ? `gastados en ${currentAnual.gestion}` : `gastados ${primerAño}-${ultimoAño}`;
+    }
+    return currentAnual ? `gasto total del Estado en ${currentAnual.gestion}` : `gasto total ${primerAño}-${ultimoAño}`;
+  });
+
+  // KPI 2: Per cápita
+  let displayPerCapita = $derived((currentAnual?.per_capita ?? promedioPerCapita) ?? 0);
+  let displayPerCapitaLabel = $derived(currentAnual ? `por cada boliviano en ${currentAnual.gestion}` : 'por cada boliviano (promedio)');
+
+  // KPI 3: Proporción (prop)
+  let displayPorcentaje = $derived((currentAnual?.prop ?? totalPorcentaje) ?? 0);
+  let displayPorcentajeLabel = $derived.by(() => {
+    if (selectedEntity) {
+      return currentAnual ? `del total de esta partida en ${currentAnual.gestion}` : 'del total de esta partida';
+    }
+    return currentAnual ? `del gasto en ${currentAnual.gestion}` : 'del gasto total';
+  });
+
   let displayPeriodo = $derived(currentData ? currentData.año : `${primerAño}-${ultimoAño}`);
   let displayPeriodo = $derived(currentData ? currentData.año : `${primerAño}-${ultimoAño}`);
-  let displayRanking = $derived(`${currentData ? (datosAnuales.find(d => d.gestion === hoveredYear)?.ranking || ranking) : ranking} de ${selectedEntity ? (datosHistorico?.n_entidades || nEntidades) : nPares}`);
-  let displayPorcentajeLabel = $derived(currentData ? `del gasto en ${currentData.año}` : 'del gasto total');
+  let displayRanking = $derived(`${currentAnual ? currentAnual.ranking : ranking} de ${selectedEntity ? (datosHistorico?.n_entidades || nEntidades) : (currentAnual ? currentAnual.n_pares : nPares)}`);
+
   let nivelKey = $derived(objetoData.nivel?.toLowerCase());
   let nivelKey = $derived(objetoData.nivel?.toLowerCase());
   let nivelPlural = $derived({ grupo: 'grupos', subgrupo: 'subgrupos', partida: 'partidas', subpartida: 'subpartidas' }[nivelKey] || 'objetos');
   let nivelPlural = $derived({ grupo: 'grupos', subgrupo: 'subgrupos', partida: 'partidas', subpartida: 'subpartidas' }[nivelKey] || 'objetos');
   let nivelLabel = $derived({ grupo: 'Grupo', subgrupo: 'Subgrupo', partida: 'Partida', subpartida: 'Subpartida' }[nivelKey] || objetoData.nivel);
   let nivelLabel = $derived({ grupo: 'Grupo', subgrupo: 'Subgrupo', partida: 'Partida', subpartida: 'Subpartida' }[nivelKey] || objetoData.nivel);
-  let displayRankingLabel = $derived(currentData ? `${nivelPlural} más gastadas en ${currentData.año}` : `${nivelPlural} más gastadas`);
+  let displayRankingLabel = $derived.by(() => {
+    if (selectedEntity) {
+      return currentAnual ? `entre las que más gastan en ${currentAnual.gestion}` : 'entre las que más gastan';
+    }
+    return currentData ? `${nivelPlural} más gastadas en ${currentData.año}` : `${nivelPlural} más gastadas`;
+  });
 
 
   // Top entidades
   // Top entidades
   let topEntidadesTotal = $derived(
   let topEntidadesTotal = $derived(
     datosHistorico && !selectedEntity ? [
     datosHistorico && !selectedEntity ? [
-      { nombre: datosHistorico.top1_entidad, porcentaje: datosHistorico.top1_pct },
-      { nombre: datosHistorico.top2_entidad, porcentaje: datosHistorico.top2_pct },
-      { nombre: datosHistorico.top3_entidad, porcentaje: datosHistorico.top3_pct },
+      { nombre: datosHistorico.top1_entidad_desc, porcentaje: datosHistorico.top1_pct, entidad: datosHistorico.top1_entidad },
+      { nombre: datosHistorico.top2_entidad_desc, porcentaje: datosHistorico.top2_pct, entidad: datosHistorico.top2_entidad },
+      { nombre: datosHistorico.top3_entidad_desc, porcentaje: datosHistorico.top3_pct, entidad: datosHistorico.top3_entidad },
     ].filter(e => e.nombre) : []
     ].filter(e => e.nombre) : []
   );
   );
   let displayTopEntidades = $derived(
   let displayTopEntidades = $derived(
@@ -114,9 +168,9 @@
   const twTop2 = tweened(0, tw);
   const twTop2 = tweened(0, tw);
   const twTop3 = tweened(0, tw);
   const twTop3 = tweened(0, tw);
 
 
-  $effect(() => { twMonto.set(displayMonto); });
-  $effect(() => { twPerCapita.set(displayPerCapita); });
-  $effect(() => { twPorcentaje.set(displayPorcentaje); });
+  $effect(() => { twMonto.set(typeof displayMonto === 'number' ? displayMonto : 0); });
+  $effect(() => { twPerCapita.set(typeof displayPerCapita === 'number' ? displayPerCapita : 0); });
+  $effect(() => { twPorcentaje.set(typeof displayPorcentaje === 'number' ? displayPorcentaje : 0); });
   $effect(() => { if (displayTopEntidades[0]) twTop1.set(displayTopEntidades[0].porcentaje); });
   $effect(() => { if (displayTopEntidades[0]) twTop1.set(displayTopEntidades[0].porcentaje); });
   $effect(() => { if (displayTopEntidades[1]) twTop2.set(displayTopEntidades[1].porcentaje); });
   $effect(() => { if (displayTopEntidades[1]) twTop2.set(displayTopEntidades[1].porcentaje); });
   $effect(() => { if (displayTopEntidades[2]) twTop3.set(displayTopEntidades[2].porcentaje); });
   $effect(() => { if (displayTopEntidades[2]) twTop3.set(displayTopEntidades[2].porcentaje); });
@@ -133,38 +187,45 @@
   }
   }
 
 
   async function loadData() {
   async function loadData() {
+    if (!selectedEntity) return;
     loading = true;
     loading = true;
-    if (selectedEntity) {
-      const { data } = await supabase.schema('ppto').from('vista_objeto_entidad').select('*')
-        .eq('objeto', objetoCodigo).eq('nivel', objetoNivel).eq('entidad', selectedEntity.entidad).order('gestion');
-      if (data) {
+    try {
+      const res = await fetch(`/api/objeto-data?codigo=${objetoCodigo}&tipo=entidad&entidad=${selectedEntity.entidad}`);
+      const raw = await res.json();
+      console.log('[loadData] entidad:', selectedEntity.entidad, 'raw rows:', raw?.length);
+      if (Array.isArray(raw)) {
+        const seen = new Set();
+        const data = raw.filter(d => { if (seen.has(d.gestion)) return false; seen.add(d.gestion); return true; });
         datosHistorico = data.find(d => d.gestion === 0) || null;
         datosHistorico = data.find(d => d.gestion === 0) || null;
         datosAnuales = data.filter(d => d.gestion >= 2016);
         datosAnuales = data.filter(d => d.gestion >= 2016);
         topEntidadesPorAño = {};
         topEntidadesPorAño = {};
+        console.log('[loadData] historico:', datosHistorico ? { monto: datosHistorico.monto, per_capita: datosHistorico.per_capita, prop: datosHistorico.prop } : null);
+        // Forzar tweens directamente
+        if (datosHistorico) {
+          twMonto.set(datosHistorico.monto || 0);
+          twPerCapita.set(datosHistorico.per_capita || 0);
+          twPorcentaje.set(datosHistorico.prop || 0);
         }
         }
-    } else {
-      const { data } = await supabase.schema('ppto').from('vista_objeto_estado').select('*')
-        .eq('objeto', objetoCodigo).order('gestion');
-      if (data) {
-        datosHistorico = data.find(d => d.gestion === 0) || null;
-        datosAnuales = data.filter(d => d.gestion >= 2016);
-        topEntidadesPorAño = {};
-        datosAnuales.forEach(d => {
-          topEntidadesPorAño[d.gestion] = [
-            { nombre: d.top1_entidad, porcentaje: d.top1_pct },
-            { nombre: d.top2_entidad, porcentaje: d.top2_pct },
-            { nombre: d.top3_entidad, porcentaje: d.top3_pct },
-          ].filter(e => e.nombre);
-        });
       }
       }
+    } catch (err) {
+      console.error('[loadData] Error:', err);
     }
     }
     loading = false;
     loading = false;
   }
   }
 
 
   async function loadEntidades() {
   async function loadEntidades() {
-    const { data } = await supabase.schema('ppto').from('entidades_por_objeto').select('entidad, entidad_desc')
-      .eq('objeto', objetoCodigo).eq('nivel', objetoNivel).order('entidad_desc');
-    if (data) entidades = data;
+    try {
+      const res = await fetch(`/api/objeto-data?codigo=${objetoCodigo}&tipo=entidades-lista`);
+      const data = await res.json();
+      if (Array.isArray(data)) {
+        entidades = data
+          .filter(d => d.gestion === 0)
+          .map(d => ({ entidad: d.entidad, entidad_desc: d.desc_entidad }))
+          .sort((a, b) => (a.entidad_desc || '').localeCompare(b.entidad_desc || ''));
+      }
+    } catch {
+      entidades = [];
+    }
   }
   }
 
 
   // ══════════════════════════════════════════════════════════════
   // ══════════════════════════════════════════════════════════════
@@ -206,11 +267,15 @@
   });
   });
 
 
   async function loadDatosEntidad(entidad) {
   async function loadDatosEntidad(entidad) {
-    const { data } = await supabase.schema('ppto').from('vista_objeto_entidad').select('*')
-      .eq('objeto', objetoCodigo).eq('nivel', objetoNivel).eq('entidad', entidad.entidad).order('gestion');
-    if (data) {
+    try {
+      const res = await fetch(`/api/objeto-data?codigo=${objetoCodigo}&tipo=entidad&entidad=${entidad.entidad}`);
+      const raw = await res.json();
+      if (Array.isArray(raw)) {
+        const seen = new Set();
+        const data = raw.filter(d => { if (seen.has(d.gestion)) return false; seen.add(d.gestion); return true; });
         return { anual: data.filter(d => d.gestion >= 2016), historico: data.find(d => d.gestion === 0) || null };
         return { anual: data.filter(d => d.gestion >= 2016), historico: data.find(d => d.gestion === 0) || null };
       }
       }
+    } catch {}
     return { anual: [], historico: null };
     return { anual: [], historico: null };
   }
   }
 
 
@@ -246,6 +311,7 @@
     loadingComparacion = true;
     loadingComparacion = true;
     datosCompararA = await loadDatosEntidad(entidad);
     datosCompararA = await loadDatosEntidad(entidad);
     loadingComparacion = false;
     loadingComparacion = false;
+    updateCompararUrl();
   }
   }
 
 
   async function selectEntidadB(entidad) {
   async function selectEntidadB(entidad) {
@@ -257,6 +323,7 @@
     loadingComparacion = true;
     loadingComparacion = true;
     datosCompararB = await loadDatosEntidad(entidad);
     datosCompararB = await loadDatosEntidad(entidad);
     loadingComparacion = false;
     loadingComparacion = false;
+    updateCompararUrl();
   }
   }
 
 
   function handleEntityScroll(event, type) {
   function handleEntityScroll(event, type) {
@@ -315,8 +382,13 @@
     return añosComparacion.map(año => map.get(año) || { per_capita: 0, monto: 0 });
     return añosComparacion.map(año => map.get(año) || { per_capita: 0, monto: 0 });
   });
   });
 
 
+  // Valor según métrica seleccionada
+  function valComparar(d) {
+    return metrica === 'percapita' ? (d?.per_capita || 0) : (d?.monto || 0);
+  }
+
   let maxComparacion = $derived.by(() => {
   let maxComparacion = $derived.by(() => {
-    const all = [...datosGraficoA.map(d => d.per_capita || 0), ...datosGraficoB.map(d => d.per_capita || 0)];
+    const all = [...datosGraficoA.map(d => valComparar(d)), ...datosGraficoB.map(d => valComparar(d))];
     return Math.max(...all, 1) * 1.1;
     return Math.max(...all, 1) * 1.1;
   });
   });
 
 
@@ -376,12 +448,28 @@
     twPerCapitaB.set(idx >= 0 ? toNumber(datosGraficoB[idx]?.per_capita) : toNumber(datosCompararB.historico?.per_capita));
     twPerCapitaB.set(idx >= 0 ? toNumber(datosGraficoB[idx]?.per_capita) : toNumber(datosCompararB.historico?.per_capita));
   });
   });
 
 
+  // Actualizar URL para vista comparar
+  function updateCompararUrl() {
+    if (!mounted) return;
+    const url = new URL($page.url);
+    url.searchParams.set('vista', 'comparar');
+    url.searchParams.delete('entidad');
+    if (entidadCompararA) url.searchParams.set('entidadA', entidadCompararA.entidad);
+    else url.searchParams.delete('entidadA');
+    if (entidadCompararB) url.searchParams.set('entidadB', entidadCompararB.entidad);
+    else url.searchParams.delete('entidadB');
+    goto(url.toString(), { replaceState: true, noScroll: true });
+  }
+
   // Watch vista changes
   // Watch vista changes
   let previousVista = 'agregado';
   let previousVista = 'agregado';
   $effect(() => {
   $effect(() => {
     if (mounted && vista !== previousVista) {
     if (mounted && vista !== previousVista) {
       previousVista = vista;
       previousVista = vista;
-      if (vista === 'comparar') initComparacion();
+      if (vista === 'comparar') {
+        initComparacion();
+        updateCompararUrl();
+      }
     }
     }
   });
   });
 
 
@@ -397,31 +485,101 @@
   onMount(() => {
   onMount(() => {
     mounted = true;
     mounted = true;
     initIndex();
     initIndex();
-    // Read URL params
+    loadEntidades().then(async () => {
+      // Read URL params after entidades are loaded
       const urlVista = $page.url.searchParams.get('vista');
       const urlVista = $page.url.searchParams.get('vista');
-    if (urlVista === 'comparar') vista = 'comparar';
+      const urlEntidad = $page.url.searchParams.get('entidad');
+      const urlEntidadA = $page.url.searchParams.get('entidadA');
+      const urlEntidadB = $page.url.searchParams.get('entidadB');
+
+      if (urlVista === 'comparar') {
+        vista = 'comparar';
+        // Precargar entidades de comparación desde URL
+        if (urlEntidadA) {
+          const entA = entidades.find(e => e.entidad === parseInt(urlEntidadA));
+          if (entA) {
+            entidadCompararA = entA;
+            loadingComparacion = true;
+            datosCompararA = await loadDatosEntidad(entA);
+          }
+        }
+        if (urlEntidadB) {
+          const entB = entidades.find(e => e.entidad === parseInt(urlEntidadB));
+          if (entB) {
+            entidadCompararB = entB;
+            datosCompararB = await loadDatosEntidad(entB);
+          }
+        }
+        loadingComparacion = false;
+        if (!urlEntidadA && !urlEntidadB) initComparacion();
+      } else if (urlEntidad && entidades.length > 0) {
+        const ent = entidades.find(e => e.entidad === parseInt(urlEntidad));
+        if (ent) selectedEntity = ent;
+      }
+    });
   });
   });
 
 
-  // Recargar entidades cuando cambia el objeto
+  // Recargar cuando cambia el objeto (navegación entre partidas)
   let prevCodigo = null;
   let prevCodigo = null;
   $effect(() => {
   $effect(() => {
     const code = objetoCodigo;
     const code = objetoCodigo;
-    if (code !== prevCodigo) {
-      prevCodigo = code;
-      selectedEntity = null;
+    if (prevCodigo !== null && code !== prevCodigo) {
+      // Reiniciar comparación
       entidadCompararA = null;
       entidadCompararA = null;
       entidadCompararB = null;
       entidadCompararB = null;
       datosCompararA = { anual: [], historico: null };
       datosCompararA = { anual: [], historico: null };
       datosCompararB = { anual: [], historico: null };
       datosCompararB = { anual: [], historico: null };
-      loadEntidades();
+
+      // Cargar datos del estado desde objetoData.estados
+      const { hist, anuales, topPorAño } = initEstados(objetoData);
+      datosHistorico = hist;
+      datosAnuales = anuales;
+      topEntidadesPorAño = topPorAño;
+      loading = false;
+
+      // Recargar entidades y mantener la seleccionada si existe en la nueva partida
+      const prevEntity = selectedEntity;
+      loadEntidades().then(() => {
+        if (prevEntity) {
+          const match = entidades.find(e => e.entidad === prevEntity.entidad);
+          if (match) {
+            selectedEntity = match;
+            loadData();
+          } else {
+            selectedEntity = null;
+          }
         }
         }
       });
       });
+    }
+    prevCodigo = code;
+  });
 
 
-  // Recargar datos cuando cambia el objeto o la entidad
+  // Recargar cuando cambia la entidad seleccionada
+  let prevEntity = null;
   $effect(() => {
   $effect(() => {
-    const _code = objetoCodigo;
-    const _entity = selectedEntity;
+    const ent = selectedEntity;
+    if (ent !== prevEntity) {
+      prevEntity = ent;
+      if (ent) {
         loadData();
         loadData();
+      } else if (prevCodigo) {
+        const { hist, anuales, topPorAño } = initEstados(objetoData);
+        datosHistorico = hist;
+        datosAnuales = anuales;
+        topEntidadesPorAño = topPorAño;
+        loading = false;
+      }
+      // Actualizar URL
+      if (mounted) {
+        const url = new URL($page.url);
+        if (ent) {
+          url.searchParams.set('entidad', ent.entidad);
+        } else {
+          url.searchParams.delete('entidad');
+        }
+        goto(url.toString(), { replaceState: true, noScroll: true });
+      }
+    }
   });
   });
 </script>
 </script>
 
 
@@ -431,14 +589,6 @@
 </svelte:head>
 </svelte:head>
 
 
 <div class="page" class:mounted>
 <div class="page" class:mounted>
-  <nav class="page-nav">
-    <a href="/clasificadores/objeto-gasto" class="back-link">
-      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-        <path d="M19 12H5M12 19l-7-7 7-7"/>
-      </svg>
-      Clasificador
-    </a>
-  </nav>
 
 
   {#if vista === 'agregado'}
   {#if vista === 'agregado'}
   <div class="dashboard-layout">
   <div class="dashboard-layout">
@@ -458,7 +608,6 @@
         <!-- Buscar -->
         <!-- Buscar -->
         <div class="context-section">
         <div class="context-section">
           <h3 class="context-subtitle">Buscar</h3>
           <h3 class="context-subtitle">Buscar</h3>
-          <p class="context-hint">Buscar otro objeto de gasto</p>
           <ObjetoSearch />
           <ObjetoSearch />
         </div>
         </div>
 
 
@@ -515,13 +664,6 @@
               <span class="explore-title">Comparar dos entidades</span>
               <span class="explore-title">Comparar dos entidades</span>
               <span class="explore-desc">¿Quién gasta más en {objetoData.desc_objeto?.toLowerCase()}?</span>
               <span class="explore-desc">¿Quién gasta más en {objetoData.desc_objeto?.toLowerCase()}?</span>
             </div>
             </div>
-            <a href="/clasificadores/objeto-gasto?modo=comparar{selectedEntity ? `&entidad=${selectedEntity.entidad}` : ''}{hoveredYear ? `&gestion=${hoveredYear}` : ''}" class="explore-card">
-              <svg class="explore-watermark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="0.75">
-                <path d="M16 3h5v5M8 3H3v5M16 21h5v-5M8 21H3v-5"/>
-              </svg>
-              <span class="explore-title">Comparar partidas</span>
-              <span class="explore-desc">Todas las partidas entre dos momentos o entidades</span>
-            </a>
             <a href="/objeto/{objetoData.objeto}/entidades" class="explore-card">
             <a href="/objeto/{objetoData.objeto}/entidades" class="explore-card">
               <svg class="explore-watermark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="0.75">
               <svg class="explore-watermark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="0.75">
                 <path d="M3 20h18M5 17h2v3H5zM9 14h2v6H9zM13 11h2v9h-2zM17 8h2v12h-2z"/>
                 <path d="M3 20h18M5 17h2v3H5zM9 14h2v6H9zM13 11h2v9h-2zM17 8h2v12h-2z"/>
@@ -529,7 +671,7 @@
               <span class="explore-title">Ranking</span>
               <span class="explore-title">Ranking</span>
               <span class="explore-desc">{nEntidades} entidades que gastan en {objetoData.desc_objeto?.toLowerCase()}</span>
               <span class="explore-desc">{nEntidades} entidades que gastan en {objetoData.desc_objeto?.toLowerCase()}</span>
             </a>
             </a>
-            <a href="/ubicacion" class="explore-card explore-card-disabled">
+            <a href="/ubicacion?clas=objeto&codigo={objetoData.objeto}" class="explore-card">
               <svg class="explore-watermark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="0.75">
               <svg class="explore-watermark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="0.75">
                 <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>
                 <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>
               </svg>
               </svg>
@@ -543,6 +685,13 @@
               <span class="explore-title">Peso relativo</span>
               <span class="explore-title">Peso relativo</span>
               <span class="explore-desc">Cuánto pesa {objetoData.desc_objeto?.toLowerCase()} respecto a otros gastos</span>
               <span class="explore-desc">Cuánto pesa {objetoData.desc_objeto?.toLowerCase()} respecto a otros gastos</span>
             </a>
             </a>
+            <a href="/clasificadores/objeto-gasto?modo=comparar{selectedEntity ? `&entidad=${selectedEntity.entidad}` : ''}{hoveredYear ? `&gestion=${hoveredYear}` : ''}" class="explore-card">
+              <svg class="explore-watermark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="0.75">
+                <path d="M16 3h5v5M8 3H3v5M16 21h5v-5M8 21H3v-5"/>
+              </svg>
+              <span class="explore-title">Comparar partidas</span>
+              <span class="explore-desc">Todas las partidas entre dos momentos o entidades</span>
+            </a>
             <a href="/clasificadores/objeto-gasto" class="explore-card">
             <a href="/clasificadores/objeto-gasto" class="explore-card">
               <svg class="explore-watermark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="0.75">
               <svg class="explore-watermark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="0.75">
                 <path d="M4 6h16M8 10h12M12 14h8M8 18h12"/>
                 <path d="M4 6h16M8 10h12M12 14h8M8 18h12"/>
@@ -577,17 +726,44 @@
         <!-- Definición -->
         <!-- Definición -->
         <div class="context-section">
         <div class="context-section">
           <h3 class="context-subtitle">Definición</h3>
           <h3 class="context-subtitle">Definición</h3>
+          {#if variaciones.length <= 1}
+            <p class="context-hint">Definición estable en todo el período</p>
+          {:else}
+            <p class="context-hint">El significado de este gasto ha cambiado {variaciones.length} veces en el período</p>
+          {/if}
           <button class="def-link" onclick={() => showDefinicionesModal = true}>
           <button class="def-link" onclick={() => showDefinicionesModal = true}>
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>
               <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>
             </svg>
             </svg>
-            {#if variaciones.length === 1}
-              Ver definición oficial
+            {#if variaciones.length <= 1}
+              Ver definición
             {:else}
             {:else}
-              Ver {variaciones.length} variaciones en la definición
+              Ver variaciones
             {/if}
             {/if}
           </button>
           </button>
         </div>
         </div>
+
+        <div class="context-separator"></div>
+
+        <!-- Compartir -->
+        <div class="context-section">
+          <h3 class="context-subtitle">Compartir</h3>
+          <button class="copy-link-btn" onclick={() => {
+            navigator.clipboard.writeText(window.location.href);
+            linkCopied = true;
+            setTimeout(() => linkCopied = false, 2000);
+          }}>
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              {#if linkCopied}
+                <path d="M20 6L9 17l-5-5"/>
+              {:else}
+                <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
+                <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
+              {/if}
+            </svg>
+            <span>{linkCopied ? 'Link copiado' : 'Copiar link para compartir'}</span>
+          </button>
+        </div>
       </div>
       </div>
     </aside>
     </aside>
 
 
@@ -606,22 +782,40 @@
 
 
         <div class="chart-controls">
         <div class="chart-controls">
           <EntitySelector {entidades} bind:selectedEntity {nEntidades} />
           <EntitySelector {entidades} bind:selectedEntity {nEntidades} />
+          {#if selectedEntity}
+            <button class="volver-agregado" onclick={() => { selectedEntity = null; }}>
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M19 12H5M12 19l-7-7 7-7"/>
+              </svg>
+              Todo el Estado
+            </button>
+          {/if}
         </div>
         </div>
 
 
         <div class="chart-header">
         <div class="chart-header">
           <span class="chart-title">
           <span class="chart-title">
+            <button class="metrica-toggle" onclick={() => metrica = metrica === 'percapita' ? 'monto' : 'percapita'}>
               {metrica === 'percapita' ? 'Bs/habitante' : 'Bs (monto total)'}
               {metrica === 'percapita' ? 'Bs/habitante' : 'Bs (monto total)'}
+              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 16V4m0 0L3 8m4-4l4 4M17 8v12m0 0l4-4m-4 4l-4-4"/></svg>
+            </button>
             <span class="chart-period">· {displayPeriodo}</span>
             <span class="chart-period">· {displayPeriodo}</span>
           </span>
           </span>
-          <button class="metrica-toggle" onclick={() => metrica = metrica === 'percapita' ? 'monto' : 'percapita'}>
-            {metrica === 'percapita' ? 'Ver monto real' : 'Ver per cápita'}
-          </button>
         </div>
         </div>
 
 
         {#if loading}
         {#if loading}
           <div class="chart-loading" style="flex: 1; min-height: 100px;">
           <div class="chart-loading" style="flex: 1; min-height: 100px;">
             <span>Cargando...</span>
             <span>Cargando...</span>
           </div>
           </div>
+        {:else if gastoPerCapita.length === 0 && selectedEntity}
+          <div class="chart-no-data">
+            <p>Esta entidad no tiene registros en {objetoData.desc_objeto?.toLowerCase()} desde 2016</p>
+            <button class="volver-agregado" onclick={() => { selectedEntity = null; }}>
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M19 12H5M12 19l-7-7 7-7"/>
+              </svg>
+              Volver a Todo el Estado
+            </button>
+          </div>
         {:else}
         {:else}
           <div class="chart-flex-wrapper">
           <div class="chart-flex-wrapper">
             <BarChart data={gastoPerCapita} bind:hoveredYear height={200} fill={true} />
             <BarChart data={gastoPerCapita} bind:hoveredYear height={200} fill={true} />
@@ -651,16 +845,25 @@
 
 
       {#if !selectedEntity && displayTopEntidades.length > 0}
       {#if !selectedEntity && displayTopEntidades.length > 0}
         <div class="ranking-section">
         <div class="ranking-section">
+          <div class="ranking-header">
             <h3 class="ranking-title">Concentración del gasto</h3>
             <h3 class="ranking-title">Concentración del gasto</h3>
-          <p class="ranking-desc">Porcentaje del total gastado en {objetoData.desc_objeto?.toLowerCase()} por todo el Estado {hoveredYear ? `en ${hoveredYear}` : `(${primerAño}-${ultimoAño})`}</p>
+            <div class="ranking-summary">
+              <span class="ranking-summary-pct">{($twTop1 + $twTop2 + $twTop3).toFixed(1)}%</span>
+              <span class="ranking-summary-text">de {objetoData.desc_objeto?.toLowerCase()} lo gastan estas 3 entidades{hoveredYear ? ` en ${hoveredYear}` : ''}</span>
+            </div>
+          </div>
           <div class="ranking-cards">
           <div class="ranking-cards">
             {#each displayTopEntidades as ent, i}
             {#each displayTopEntidades as ent, i}
               {@const pct = i === 0 ? $twTop1 : i === 1 ? $twTop2 : $twTop3}
               {@const pct = i === 0 ? $twTop1 : i === 1 ? $twTop2 : $twTop3}
-              <div class="ranking-card">
+              <button class="ranking-card ranking-card-link" onclick={() => {
+                const match = entidades.find(e => e.entidad === ent.entidad);
+                if (match) selectedEntity = match;
+              }}>
                 <span class="ranking-position">#{i + 1}</span>
                 <span class="ranking-position">#{i + 1}</span>
                 <span class="ranking-name">{ent.nombre}</span>
                 <span class="ranking-name">{ent.nombre}</span>
                 <span class="ranking-pct">{pct.toFixed(1)}%</span>
                 <span class="ranking-pct">{pct.toFixed(1)}%</span>
-              </div>
+                <svg class="ranking-arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+              </button>
             {/each}
             {/each}
           </div>
           </div>
         </div>
         </div>
@@ -783,7 +986,28 @@
           <div class="comparador-placeholder"><p>No hay datos disponibles para comparar</p></div>
           <div class="comparador-placeholder"><p>No hay datos disponibles para comparar</p></div>
         {:else}
         {:else}
           <div class="chart-header">
           <div class="chart-header">
-            <span class="chart-title">Bs/habitante <span class="chart-period">· {displayPeriodoComparar}</span></span>
+            <span class="chart-title">
+              <button class="metrica-toggle" onclick={() => metrica = metrica === 'percapita' ? 'monto' : 'percapita'}>
+                {metrica === 'percapita' ? 'Bs/habitante' : 'Bs (monto total)'}
+                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 16V4m0 0L3 8m4-4l4 4M17 8v12m0 0l4-4m-4 4l-4-4"/></svg>
+              </button>
+              <span class="chart-period">· {displayPeriodoComparar}</span>
+            </span>
+            <button class="copy-link-btn" onclick={() => {
+              navigator.clipboard.writeText(window.location.href);
+              linkCopied = true;
+              setTimeout(() => linkCopied = false, 2000);
+            }}>
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                {#if linkCopied}
+                  <path d="M20 6L9 17l-5-5"/>
+                {:else}
+                  <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
+                  <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
+                {/if}
+              </svg>
+              <span>{linkCopied ? 'Copiado' : 'Compartir'}</span>
+            </button>
           </div>
           </div>
 
 
           <div class="chart-comparar-wrapper">
           <div class="chart-comparar-wrapper">
@@ -798,8 +1022,8 @@
                 {#each añosComparacion as año, i}
                 {#each añosComparacion as año, i}
                   <div class="bar-group-comparar" class:active={hoveredYearComparar === año} onmouseenter={() => hoveredYearComparar = año} role="button" tabindex="0">
                   <div class="bar-group-comparar" class:active={hoveredYearComparar === año} onmouseenter={() => hoveredYearComparar = año} role="button" tabindex="0">
                     <div class="bars-pair">
                     <div class="bars-pair">
-                      <div class="bar-comparar" style="height: {((datosGraficoA[i]?.per_capita || 0) / maxComparacion) * 100}%; background: {colorA}"></div>
-                      <div class="bar-comparar" style="height: {((datosGraficoB[i]?.per_capita || 0) / maxComparacion) * 100}%; background: {colorB}"></div>
+                      <div class="bar-comparar" style="height: {(valComparar(datosGraficoA[i]) / maxComparacion) * 100}%; background: {colorA}"></div>
+                      <div class="bar-comparar" style="height: {(valComparar(datosGraficoB[i]) / maxComparacion) * 100}%; background: {colorB}"></div>
                     </div>
                     </div>
                   </div>
                   </div>
                 {/each}
                 {/each}
@@ -910,8 +1134,8 @@
     gap: 1.5rem;
     gap: 1.5rem;
     max-width: 1400px;
     max-width: 1400px;
     margin: 0 auto;
     margin: 0 auto;
-    padding: 30px 2rem;
-    height: calc(100vh - 4rem);
+    padding: 80px 2rem 2.5rem;
+    height: 100vh;
     overflow: hidden;
     overflow: hidden;
   }
   }
 
 
@@ -1089,6 +1313,7 @@
     background: var(--theme-borde);
     background: var(--theme-borde);
     text-decoration: none;
     text-decoration: none;
     color: var(--theme-texto);
     color: var(--theme-texto);
+    cursor: pointer;
     transition: all 0.15s;
     transition: all 0.15s;
     flex-shrink: 0;
     flex-shrink: 0;
     overflow: hidden;
     overflow: hidden;
@@ -1199,6 +1424,53 @@
   .def-link:hover { opacity: 0.7; }
   .def-link:hover { opacity: 0.7; }
   .def-link svg { flex-shrink: 0; opacity: 0.8; }
   .def-link svg { flex-shrink: 0; opacity: 0.8; }
 
 
+  .chart-no-data {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+    color: var(--theme-texto);
+    opacity: 0.7;
+    font-size: 0.8125rem;
+    text-align: center;
+  }
+
+  .chart-no-data p {
+    margin: 0;
+  }
+
+  .volver-agregado {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-size: 0.6875rem;
+    color: var(--theme-accent);
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    transition: opacity 0.15s;
+  }
+  .volver-agregado:hover { opacity: 0.7; }
+
+  .copy-link-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    font-size: 0.75rem;
+    color: var(--theme-texto);
+    opacity: 0.6;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    transition: opacity 0.15s;
+  }
+  .copy-link-btn:hover { opacity: 1; }
+  .copy-link-btn svg { flex-shrink: 0; }
+
   /* ═══════════════════════════════════════════════════════════════
   /* ═══════════════════════════════════════════════════════════════
      MAIN
      MAIN
      ═══════════════════════════════════════════════════════════════ */
      ═══════════════════════════════════════════════════════════════ */
@@ -1297,18 +1569,23 @@
 
 
   .metrica-toggle {
   .metrica-toggle {
     font-family: 'DM Mono', monospace;
     font-family: 'DM Mono', monospace;
-    font-size: 0.625rem;
-    color: var(--theme-accent);
-    background: rgba(201, 167, 81, 0.1);
-    border: 1px solid rgba(201, 167, 81, 0.2);
-    padding: 0.2rem 0.5rem;
+    font-size: 0.6875rem;
+    color: var(--theme-texto);
+    background: rgba(128, 128, 128, 0.08);
+    border: 1px solid rgba(128, 128, 128, 0.15);
+    padding: 0.125rem 0.375rem;
     border-radius: 4px;
     border-radius: 4px;
     cursor: pointer;
     cursor: pointer;
     transition: all 0.15s;
     transition: all 0.15s;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
   }
   }
 
 
   .metrica-toggle:hover {
   .metrica-toggle:hover {
-    background: rgba(201, 167, 81, 0.2);
+    background: rgba(201, 167, 81, 0.12);
+    border-color: rgba(201, 167, 81, 0.3);
+    color: var(--theme-accent);
   }
   }
 
 
   .chart-loading {
   .chart-loading {
@@ -1381,10 +1658,62 @@
   .ranking-card {
   .ranking-card {
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
-    gap: 0.75rem;
+    gap: 0.375rem;
     padding: 0.5rem 0.625rem;
     padding: 0.5rem 0.625rem;
     border-radius: 8px;
     border-radius: 8px;
-    background: rgba(128, 128, 128, 0.06);
+    background: transparent;
+    text-align: left;
+  }
+
+  .ranking-card-link {
+    text-decoration: none;
+    cursor: pointer;
+    transition: background 0.15s;
+  }
+
+  .ranking-card-link:hover {
+    background: rgba(201, 167, 81, 0.05);
+  }
+
+  .ranking-card-link:hover .ranking-name {
+    color: var(--theme-accent);
+    border-bottom-style: solid;
+  }
+
+  .ranking-arrow {
+    opacity: 0;
+    color: var(--theme-accent);
+    transition: opacity 0.15s, transform 0.15s;
+    flex-shrink: 0;
+  }
+
+  .ranking-card-link:hover .ranking-arrow {
+    opacity: 1;
+    transform: translateX(2px);
+  }
+
+  .ranking-header {
+    margin-bottom: 0.5rem;
+  }
+
+  .ranking-summary {
+    display: flex;
+    align-items: baseline;
+    gap: 0.375rem;
+    margin-top: 0.125rem;
+  }
+
+  .ranking-summary-pct {
+    font-family: 'DM Mono', monospace;
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--theme-titulo);
+  }
+
+  .ranking-summary-text {
+    font-size: 0.75rem;
+    color: var(--theme-texto);
+    opacity: 0.7;
   }
   }
 
 
   .ranking-position {
   .ranking-position {
@@ -1396,19 +1725,17 @@
   }
   }
 
 
   .ranking-name {
   .ranking-name {
-    flex: 1;
     font-size: 0.8125rem;
     font-size: 0.8125rem;
     color: var(--theme-titulo);
     color: var(--theme-titulo);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    border-bottom: 1px dotted rgba(128, 128, 128, 0.3);
   }
   }
 
 
   .ranking-pct {
   .ranking-pct {
     font-family: 'DM Mono', monospace;
     font-family: 'DM Mono', monospace;
-    font-size: 0.875rem;
+    font-size: 0.8125rem;
     font-weight: 600;
     font-weight: 600;
     color: var(--theme-titulo);
     color: var(--theme-titulo);
+    opacity: 0.7;
   }
   }
 
 
   /* ═══════════════════════════════════════════════════════════════
   /* ═══════════════════════════════════════════════════════════════
@@ -1707,11 +2034,12 @@
     display: flex;
     display: flex;
     flex-direction: column;
     flex-direction: column;
     gap: 0.75rem;
     gap: 0.75rem;
-    padding: 0.75rem 2rem 1.5rem;
+    padding: 80px 2rem 2.5rem;
     width: 100%;
     width: 100%;
     max-width: 1400px;
     max-width: 1400px;
     margin: 0 auto;
     margin: 0 auto;
-    min-height: calc(100vh - 60px);
+    height: 100vh;
+    overflow: hidden;
   }
   }
 
 
   .chart-card-comparar {
   .chart-card-comparar {

 <script>
 <script>
   import { page } from '$app/stores';
   import { page } from '$app/stores';
   import { goto } from '$app/navigation';
   import { goto } from '$app/navigation';
-  import { supabase } from '$lib/supabase';
   import { onMount } from 'svelte';
   import { onMount } from 'svelte';
+  import Spinner from '$lib/components/ui/Spinner.svelte';
   import * as d3 from 'd3';
   import * as d3 from 'd3';
 
 
-  // Params y query
   let codigo = $derived($page.params.codigo);
   let codigo = $derived($page.params.codigo);
-  let gestion = $derived($page.url.searchParams.get('gestion') || new Date().getFullYear().toString());
 
 
   // Estado
   // Estado
   let loading = $state(true);
   let loading = $state(true);
-  let objetoInfo = $state(null); // Info del objeto (desc_objeto, nivel)
+  let mounted = $state(false);
+  let objetoInfo = $state(null);
   let entidadesData = $state([]);
   let entidadesData = $state([]);
-  let availableYears = $state([]);
   let selectedYear = $state(null);
   let selectedYear = $state(null);
+  let linkCopied = $state(false);
+  let hoveredNode = $state(null);
+  let totalDevengado = $state(0);
+  let entidadClasificador = $state({}); // Map entidad → { desc_subarea, sigla_subarea, desc_area, ... }
+  let subareas = $state([]); // Lista única de subareas con color
+  let sliderMin = $state(0);
+  let sliderMax = $state(100);
+
+  // Filtrar entidades por rango de % acumulado
+  let filteredEntidades = $derived.by(() => {
+    if (sliderMin === 0 && sliderMax === 100) return entidadesData;
+    let acum = 0;
+    return entidadesData.filter(d => {
+      const pctBefore = (acum / totalDevengado) * 100;
+      acum += d.monto;
+      const pctAfter = (acum / totalDevengado) * 100;
+      return pctAfter > sliderMin && pctBefore < sliderMax;
+    });
+  });
+
+  let filteredTotal = $derived(filteredEntidades.reduce((s, d) => s + d.monto, 0));
+  let filteredCount = $derived(filteredEntidades.length);
 
 
   // Treemap
   // Treemap
   let treemapContainer = $state(null);
   let treemapContainer = $state(null);
   let treemapWidth = $state(0);
   let treemapWidth = $state(0);
-  let treemapHeight = $state(500);
+  let treemapHeight = $state(0);
   let treemapNodes = $state([]);
   let treemapNodes = $state([]);
-  let treemapRoot = $state(null);
-  let hoveredNode = $state(null);
-  let totalDevengado = $state(0);
+  let treemapGroups = $state([]); // Nodos padre (subareas)
 
 
-  // Población para per cápita
-  const POBLACION_BOLIVIA = 12006031;
+  // Años disponibles desde gestiones del objeto
+  let availableYears = $derived.by(() => {
+    if (!objetoInfo?.gestiones) return [];
+    return objetoInfo.gestiones.split(',').map(Number).filter(y => y >= 2016).sort((a, b) => b - a);
+  });
 
 
   // Formatters
   // Formatters
-  function formatMoney(value) {
-    if (value >= 1e9) return `Bs ${(value / 1e9).toFixed(1)}MM`;
-    if (value >= 1e6) return `Bs ${(value / 1e6).toFixed(1)}M`;
-    if (value >= 1e3) return `Bs ${(value / 1e3).toFixed(0)}K`;
-    return `Bs ${value.toFixed(0)}`;
+  function formatMonto(v) {
+    if (v >= 1e9) return `${(v / 1e9).toFixed(1)} mil mill.`;
+    if (v >= 1e6) return `${(v / 1e6).toFixed(1)} mill.`;
+    if (v >= 1e3) return `${(v / 1e3).toFixed(0)} mil`;
+    return v?.toLocaleString('es-BO') || '0';
   }
   }
 
 
-  function formatMoneyCompact(value) {
-    if (value >= 1e9) return `${(value / 1e9).toFixed(1)}MM`;
-    if (value >= 1e6) return `${(value / 1e6).toFixed(1)}M`;
-    if (value >= 1e3) return `${(value / 1e3).toFixed(0)}K`;
-    return value.toFixed(0);
+  function formatCompact(v) {
+    if (v >= 1e9) return `${(v / 1e9).toFixed(1)}MM`;
+    if (v >= 1e6) return `${(v / 1e6).toFixed(1)}M`;
+    if (v >= 1e3) return `${(v / 1e3).toFixed(0)}K`;
+    return v?.toFixed(0) || '0';
   }
   }
 
 
-  function formatPerCapita(value) {
-    const perCapita = value / POBLACION_BOLIVIA;
-    return `Bs ${perCapita.toFixed(0)}/hab`;
-  }
+  // Colores por subarea — misma paleta que clasificador objeto-gasto
+  let isDark = $state(false);
+  const SUBAREA_COLORS = [
+    '#4E79A7', '#F28E2B', '#E15759', '#76B7B2', '#59A14F',
+    '#EDC948', '#B07AA1', '#FF9DA7', '#9C755F', '#BAB0AC',
+    '#4E79A7', '#F28E2B', '#E15759', '#76B7B2', '#59A14F'
+  ];
 
 
-  // Colores para entidades (gradiente basado en ranking)
-  function getEntityColor(index, total, opacity = 0.85) {
-    // Gradiente de más oscuro (top) a más claro (bottom)
-    const hue = 210; // Azul
-    const saturation = 60 + (index / total) * 20;
-    const lightness = 35 + (index / total) * 30;
-    return `hsla(${hue}, ${saturation}%, ${lightness}%, ${opacity})`;
+  function getSubareaColor(subarea) {
+    const idx = subareas.indexOf(subarea);
+    return SUBAREA_COLORS[idx % SUBAREA_COLORS.length];
   }
   }
 
 
-  function getTextColor(index, total) {
-    return index < total * 0.6 ? '#ffffff' : '#1a1a1a';
+  // Contraste de texto según luminosidad del fondo (WCAG)
+  function getTextColorForBg(bgColor) {
+    const color = d3.color(bgColor);
+    if (!color) return 'rgba(255,255,255,0.95)';
+    const luminance = 0.299 * (color.r / 255) + 0.587 * (color.g / 255) + 0.114 * (color.b / 255);
+    return luminance > 0.5 ? 'rgba(0,0,0,0.85)' : 'rgba(255,255,255,0.95)';
   }
   }
 
 
-  // Cargar años disponibles
-  async function loadAvailableYears() {
-    const { data, error } = await supabase
-      .schema('ppto')
-      .from('treemap_objeto')
-      .select('gestion')
-      .eq('objeto', parseInt(codigo))
-      .gt('devengado', 0);
-
-    if (!error && data) {
-      const years = [...new Set(data.map(d => d.gestion))].sort((a, b) => b - a);
-      availableYears = years;
+  function getTextColorSecondary(bgColor) {
+    const color = d3.color(bgColor);
+    if (!color) return 'rgba(255,255,255,0.88)';
+    const luminance = 0.299 * (color.r / 255) + 0.587 * (color.g / 255) + 0.114 * (color.b / 255);
+    return luminance > 0.5 ? 'rgba(0,0,0,0.6)' : 'rgba(255,255,255,0.7)';
+  }
 
 
-      // Usar año de query param o el más reciente
-      const yearParam = parseInt(gestion);
-      selectedYear = years.includes(yearParam) ? yearParam : years[0];
+  // Cargar clasificador de entidades
+  async function loadClasificador() {
+    try {
+      const res = await fetch('/api/entidad-clasificador');
+      const data = await res.json();
+      if (Array.isArray(data)) {
+        const map = {};
+        data.forEach(d => { map[d.entidad] = d; });
+        entidadClasificador = map;
       }
       }
+    } catch {}
   }
   }
 
 
-  // Cargar datos de entidades para el objeto
-  async function loadEntityData() {
-    if (!selectedYear || !codigo) return;
+  // Cargar info del objeto desde API
+  async function loadObjeto() {
+    try {
+      const res = await fetch(`/api/objeto-data?codigo=${codigo}&tipo=clasificador`);
+      const data = await res.json();
+      if (data && !data.error) objetoInfo = data;
+    } catch {}
+  }
 
 
+  // Cargar entidades desde API
+  async function loadEntidades() {
+    if (!selectedYear || !codigo) return;
     loading = true;
     loading = true;
-
     try {
     try {
-      // Obtener info del objeto
-      const { data: infoData } = await supabase
-        .schema('ppto')
-        .from('treemap_objeto')
-        .select('desc_objeto, nivel')
-        .eq('objeto', parseInt(codigo))
-        .eq('gestion', selectedYear)
-        .limit(1)
-        .single();
-
-      if (infoData) {
-        objetoInfo = infoData;
-      }
-
-      // Obtener distribución por entidades (excluyendo entidad 0=total y 99=otros)
-      const { data, error } = await supabase
-        .schema('ppto')
-        .from('treemap_objeto')
-        .select('entidad, desc_entidad, devengado')
-        .eq('objeto', parseInt(codigo))
-        .eq('gestion', selectedYear)
-        .neq('entidad', 0)
-        .neq('entidad', 99)
-        .gt('devengado', 0)
-        .order('devengado', { ascending: false });
-
-      if (error) {
-        console.error('Error loading entity data:', error);
-        return;
+      const res = await fetch(`/api/objeto-data?codigo=${codigo}&tipo=entidades-año&gestion=${selectedYear}`);
+      const raw = await res.json();
+      if (Array.isArray(raw)) {
+        // Deduplicar por entidad
+        const map = new Map();
+        raw.forEach(d => {
+          if (!map.has(d.entidad) || d.monto > map.get(d.entidad).monto) {
+            map.set(d.entidad, d);
           }
           }
-
-      entidadesData = data || [];
-      totalDevengado = entidadesData.reduce((sum, d) => sum + (d.devengado || 0), 0);
+        });
+        entidadesData = [...map.values()].filter(d => d.monto > 0).sort((a, b) => b.monto - a.monto);
+        totalDevengado = entidadesData.reduce((s, d) => s + d.monto, 0);
+
+        // Nombres desde map endpoint
+        const mapRes = await fetch(`/api/objeto-data?codigo=${codigo}&tipo=entidades-lista`);
+        const mapData = await mapRes.json();
+        if (Array.isArray(mapData)) {
+          const nombres = {};
+          mapData.forEach(d => { if (d.desc_entidad) nombres[d.entidad] = d.desc_entidad; });
+          entidadesData = entidadesData.map(d => ({
+            ...d,
+            desc_entidad: nombres[d.entidad] || d.desc_entidad || `Entidad ${d.entidad}`,
+            desc_subarea: entidadClasificador[d.entidad]?.desc_subarea || 'Otros'
+          }));
+        }
+
+        // Extraer subareas únicas ordenadas por monto total
+        const subareaMontos = {};
+        entidadesData.forEach(d => {
+          subareaMontos[d.desc_subarea] = (subareaMontos[d.desc_subarea] || 0) + d.monto;
+        });
+        subareas = Object.entries(subareaMontos).sort((a, b) => b[1] - a[1]).map(([k]) => k);
 
 
         buildTreemap();
         buildTreemap();
+      }
     } catch (err) {
     } catch (err) {
-      console.error('Error:', err);
-    } finally {
-      loading = false;
+      console.error('[Entidades] Error:', err);
     }
     }
+    loading = false;
   }
   }
 
 
-  // Construir treemap
   function buildTreemap() {
   function buildTreemap() {
-    if (!entidadesData.length || treemapWidth <= 0) return;
+    if (!filteredEntidades.length || treemapWidth <= 0 || treemapHeight <= 0) {
+      treemapNodes = [];
+      treemapGroups = [];
+      return;
+    }
 
 
-    const hierarchy = d3.hierarchy({
-      name: 'root',
-      children: entidadesData.map((d, i) => ({
+    // Agrupar por subarea
+    const groups = {};
+    filteredEntidades.forEach(d => {
+      const sub = d.desc_subarea || 'Otros';
+      if (!groups[sub]) groups[sub] = [];
+      groups[sub].push({
         id: d.entidad,
         id: d.entidad,
         name: d.desc_entidad || `Entidad ${d.entidad}`,
         name: d.desc_entidad || `Entidad ${d.entidad}`,
-        value: d.devengado,
-        index: i
+        value: d.monto,
+        ranking: d.ranking,
+        per_capita: d.per_capita,
+        prop: d.prop,
+        subarea: sub
+      });
+    });
+
+    const hierarchy = d3.hierarchy({
+      name: 'root',
+      children: Object.entries(groups).map(([subarea, children]) => ({
+        name: subarea,
+        children
       }))
       }))
     }).sum(d => d.value || 0)
     }).sum(d => d.value || 0)
       .sort((a, b) => b.value - a.value);
       .sort((a, b) => b.value - a.value);
 
 
-    const treemap = d3.treemap()
+    d3.treemap()
       .size([treemapWidth, treemapHeight])
       .size([treemapWidth, treemapHeight])
-      .padding(2)
-      .round(true);
-
-    treemap(hierarchy);
-    treemapRoot = hierarchy;
-    treemapNodes = hierarchy.children || [];
-  }
-
-  // Resize observer
-  function setupResizeObserver() {
-    if (!treemapContainer) return;
-
-    const observer = new ResizeObserver(entries => {
-      for (const entry of entries) {
-        treemapWidth = entry.contentRect.width;
-        buildTreemap();
-      }
-    });
-
-    observer.observe(treemapContainer);
-    return () => observer.disconnect();
-  }
+      .paddingOuter(3)
+      .paddingInner(1)
+      .paddingTop(18)
+      .round(true)(hierarchy);
 
 
-  // Navegación
-  function goBack() {
-    goto(`/clasificadores/objeto-gasto?modo=mapa`);
+    treemapNodes = hierarchy.leaves() || [];
+    treemapGroups = hierarchy.children || [];
   }
   }
 
 
   function changeYear(year) {
   function changeYear(year) {
     selectedYear = year;
     selectedYear = year;
     goto(`?gestion=${year}`, { replaceState: true, noScroll: true });
     goto(`?gestion=${year}`, { replaceState: true, noScroll: true });
+    loadEntidades();
   }
   }
 
 
-  // Efectos
   $effect(() => {
   $effect(() => {
-    if (codigo) {
-      loadAvailableYears();
+    if (treemapContainer) {
+      const measure = () => {
+        const w = treemapContainer.clientWidth;
+        const h = treemapContainer.clientHeight;
+        if (w > 0 && h > 0) {
+          treemapWidth = w;
+          treemapHeight = h;
+          buildTreemap();
         }
         }
-  });
-
-  $effect(() => {
-    if (selectedYear && codigo) {
-      loadEntityData();
+      };
+      measure();
+      const observer = new ResizeObserver(measure);
+      observer.observe(treemapContainer);
+      return () => observer.disconnect();
     }
     }
   });
   });
 
 
-  $effect(() => {
-    if (treemapContainer) {
-      return setupResizeObserver();
-    }
+
+  onMount(async () => {
+    mounted = true;
+    isDark = document.documentElement.classList.contains('dark');
+    const observer = new MutationObserver(() => {
+      isDark = document.documentElement.classList.contains('dark');
     });
     });
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
 
 
-  $effect(() => {
-    if (entidadesData.length && treemapWidth > 0) {
-      buildTreemap();
+    await Promise.all([loadObjeto(), loadClasificador()]);
+
+    const yearParam = $page.url.searchParams.get('gestion');
+    if (yearParam) {
+      const y = parseInt(yearParam);
+      selectedYear = availableYears.includes(y) ? y : availableYears[0] || 2025;
+    } else {
+      selectedYear = availableYears[0] || 2025;
     }
     }
-  });
 
 
-  onMount(() => {
     if (treemapContainer) {
     if (treemapContainer) {
       treemapWidth = treemapContainer.clientWidth;
       treemapWidth = treemapContainer.clientWidth;
+      treemapHeight = treemapContainer.clientHeight;
     }
     }
+    await loadEntidades();
   });
   });
 </script>
 </script>
 
 
 <svelte:head>
 <svelte:head>
-  <title>{objetoInfo?.desc_objeto || `Objeto ${codigo}`} - Distribución por Entidades</title>
+  <title>{objetoInfo?.desc_objeto || `Objeto ${codigo}`} - Ranking de Entidades</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Mono:wght@400;500&family=Instrument+Sans:wght@400;500;600&display=swap" rel="stylesheet" />
 </svelte:head>
 </svelte:head>
 
 
-<div class="page-container">
+<div class="page" class:mounted>
+  <div class="layout">
     <!-- Header -->
     <!-- Header -->
-  <header class="page-header">
-    <button class="back-btn" onclick={goBack}>
-      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-        <path d="M19 12H5M12 19l-7-7 7-7"/>
+    <header class="header">
+      <div class="header-top">
+        <div class="pills">
+          <span class="pill pill-nivel">{objetoInfo?.nivel || 'objeto'}</span>
+          <span class="pill pill-codigo">{codigo}</span>
+        </div>
+        <div class="header-actions">
+          <button class="copy-link-btn" onclick={() => {
+            navigator.clipboard.writeText(window.location.href);
+            linkCopied = true;
+            setTimeout(() => linkCopied = false, 2000);
+          }}>
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              {#if linkCopied}
+                <path d="M20 6L9 17l-5-5"/>
+              {:else}
+                <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
+                <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
+              {/if}
             </svg>
             </svg>
-      Volver al mapa
+            <span>{linkCopied ? 'Copiado' : 'Compartir'}</span>
           </button>
           </button>
-
-    <div class="header-content">
-      <div class="header-badge">{objetoInfo?.nivel || 'objeto'}</div>
-      <h1 class="header-title">
-        <span class="header-code">{codigo}</span>
-        <span class="header-separator">·</span>
-        <span class="header-name">{objetoInfo?.desc_objeto || 'Cargando...'}</span>
-      </h1>
-      <p class="header-subtitle">¿Qué entidades gastan más en esto?</p>
+          <a href="/objeto/{codigo}" class="back-link">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M19 12H5M12 19l-7-7 7-7"/>
+            </svg>
+            Volver
+          </a>
+        </div>
       </div>
       </div>
 
 
-    <!-- Selector de año -->
+      <h1 class="title">{objetoInfo?.desc_objeto || 'Cargando...'}</h1>
+      <p class="subtitle">¿Qué entidades gastan más en esto?</p>
+
+      <!-- Año + Stats -->
+      <div class="meta-row">
         <div class="year-selector">
         <div class="year-selector">
-      <label>Gestión:</label>
-      <select bind:value={selectedYear} onchange={(e) => changeYear(parseInt(e.target.value))}>
           {#each availableYears as year}
           {#each availableYears as year}
-          <option value={year}>{year}</option>
+            <button class="year-btn" class:active={selectedYear === year} onclick={() => changeYear(year)}>{year}</button>
           {/each}
           {/each}
-      </select>
         </div>
         </div>
-  </header>
-
-  <!-- Stats resumen -->
         {#if !loading && entidadesData.length > 0}
         {#if !loading && entidadesData.length > 0}
-    <div class="stats-bar">
-      <div class="stat">
-        <span class="stat-value">{entidadesData.length}</span>
-        <span class="stat-label">entidades</span>
+          <div class="stats">
+            <span class="stat"><strong>{entidadesData.length}</strong> entidades en total</span>
           </div>
           </div>
-      <div class="stat">
-        <span class="stat-value">{formatMoney(totalDevengado)}</span>
-        <span class="stat-label">total ejecutado</span>
+        {/if}
       </div>
       </div>
-      <div class="stat">
-        <span class="stat-value">{formatPerCapita(totalDevengado)}</span>
-        <span class="stat-label">per cápita</span>
+
+      <!-- Slider de rango -->
+      {#if !loading && entidadesData.length > 0}
+        <div class="slider-row">
+          <span class="slider-label">Rango: {sliderMin}% – {sliderMax}%</span>
+          <span class="slider-info">{filteredCount} entidades · {((filteredTotal / totalDevengado) * 100).toFixed(1)}% del gasto</span>
         </div>
         </div>
+        <div class="range-slider">
+          <input type="range" min="0" max="100" step="1" bind:value={sliderMin} oninput={() => { if (sliderMin >= sliderMax) sliderMin = sliderMax - 1; buildTreemap(); }} />
+          <input type="range" min="0" max="100" step="1" bind:value={sliderMax} oninput={() => { if (sliderMax <= sliderMin) sliderMax = sliderMin + 1; buildTreemap(); }} />
         </div>
         </div>
       {/if}
       {/if}
+    </header>
 
 
     <!-- Treemap -->
     <!-- Treemap -->
-  <div class="treemap-section">
-    <div
-      bind:this={treemapContainer}
-      class="treemap-container"
-      style="height: {treemapHeight}px;"
-    >
+    <div class="treemap-wrapper" bind:this={treemapContainer}>
       {#if loading}
       {#if loading}
-        <div class="loading-state">
-          <div class="loader"></div>
-          <p>Cargando distribución...</p>
-        </div>
+        <div class="loading"><Spinner size={48} color="var(--theme-texto)" /></div>
       {:else if treemapNodes.length > 0}
       {:else if treemapNodes.length > 0}
-        <svg width={treemapWidth} height={treemapHeight} class="block">
+        <svg width={treemapWidth} height={treemapHeight}>
+          <!-- Group labels (subareas) -->
+          {#each treemapGroups as group}
+            {@const gw = group.x1 - group.x0}
+            {@const color = getSubareaColor(group.data.name)}
+            {@const label = gw > 150 ? group.data.name : group.data.name.slice(0, Math.floor(gw / 7))}
+            {#if gw > 50}
+              <rect
+                x={group.x0 + 3}
+                y={group.y0 + 2}
+                width={Math.min(label.length * 6.5 + 10, gw - 6)}
+                height="14"
+                rx="3"
+                fill={isDark ? 'rgba(20, 20, 18, 0.85)' : 'rgba(255, 255, 255, 0.9)'}
+              />
+              <text
+                x={group.x0 + 8}
+                y={group.y0 + 13}
+                fill={isDark ? '#F5F0E8' : '#1a1a1a'}
+                font-size="9"
+                font-family="'Qanelas', var(--font-sans)"
+                font-weight="600"
+              >
+                {label}
+              </text>
+            {/if}
+          {/each}
+
+          <!-- Entity nodes -->
           {#each treemapNodes as node, i}
           {#each treemapNodes as node, i}
-            {@const width = node.x1 - node.x0}
-            {@const height = node.y1 - node.y0}
-            {@const isHovered = hoveredNode === node}
+            {@const w = node.x1 - node.x0}
+            {@const h = node.y1 - node.y0}
             {@const pct = (node.value / totalDevengado) * 100}
             {@const pct = (node.value / totalDevengado) * 100}
-            {@const area = width * height}
-            {@const scale = Math.sqrt(area) / 12}
-            {@const pctSize = Math.min(22, Math.max(10, scale * 1.6))}
-            {@const nameSize = Math.min(14, Math.max(8, scale * 1.0))}
-            {@const valueSize = Math.min(12, Math.max(7, scale * 0.8))}
-            {@const textColor = getTextColor(i, treemapNodes.length)}
+            {@const isHovered = hoveredNode === node}
+            {@const area = Math.sqrt(w * h)}
+            {@const pctSize = Math.min(20, Math.max(9, area / 8))}
+            {@const nameSize = Math.min(12, Math.max(7, area / 12))}
+            {@const color = getSubareaColor(node.data.subarea)}
 
 
             <g
             <g
-              class="treemap-node"
               transform="translate({node.x0}, {node.y0})"
               transform="translate({node.x0}, {node.y0})"
               onmouseenter={() => hoveredNode = node}
               onmouseenter={() => hoveredNode = node}
               onmouseleave={() => hoveredNode = null}
               onmouseleave={() => hoveredNode = null}
+              style="cursor: pointer;"
+              onclick={() => goto(`/objeto/${codigo}?entidad=${node.data.id}`)}
             >
             >
               <rect
               <rect
-                width={width}
-                height={height}
-                fill={getEntityColor(i, treemapNodes.length, isHovered ? 1 : 0.85)}
-                stroke={isHovered ? 'var(--theme-titulo)' : 'transparent'}
-                stroke-width={isHovered ? 2 : 0}
-                rx="3"
+                width={w} height={h}
+                fill={color}
+                opacity={hoveredNode ? (isHovered ? 1 : hoveredNode.data.subarea === node.data.subarea ? 0.6 : 0.2) : 0.85}
+                stroke={isHovered ? 'var(--theme-titulo)' : 'rgba(0,0,0,0.15)'}
+                stroke-width={isHovered ? 2 : 0.5}
+                rx="2"
               />
               />
-
-              {#if width > 40 && height > 25}
-                <foreignObject x="4" y="4" width={width - 8} height={height - 8}>
-                  <div class="node-content" style="color: {textColor};">
-                    <div class="node-pct" style="font-size: {pctSize}px;">
-                      {pct >= 10 ? pct.toFixed(0) : pct >= 1 ? pct.toFixed(1) : pct.toFixed(2)}%
-                    </div>
-                    {#if height > 45 && width > 60}
-                      <div class="node-name" style="font-size: {nameSize}px;">
-                        {width > 120 ? node.data.name : node.data.name.slice(0, Math.floor(width / 7)) + (node.data.name.length > Math.floor(width / 7) ? '…' : '')}
-                      </div>
-                    {/if}
-                    {#if height > 65 && width > 70}
-                      <div class="node-value" style="font-size: {valueSize}px;">
-                        {formatMoneyCompact(node.value)}
-                      </div>
+              {#if w > 35 && h > 22}
+                {@const textColor = getTextColorForBg(color)}
+                {@const textColorSec = getTextColorSecondary(color)}
+                <foreignObject x="4" y="3" width={w - 8} height={h - 6}>
+                  <div class="node-text">
+                    <span class="node-pct" style="font-size:{pctSize}px; color:{textColor}">{pct >= 1 ? pct.toFixed(0) : pct.toFixed(1)}%</span>
+                    {#if h > 40 && w > 55}
+                      <span class="node-name" style="font-size:{nameSize}px; color:{textColorSec}">{w > 100 ? node.data.name : node.data.name.slice(0, Math.floor(w / 7))}</span>
                     {/if}
                     {/if}
                   </div>
                   </div>
                 </foreignObject>
                 </foreignObject>
@@ -328,423 +399,378 @@
           {/each}
           {/each}
         </svg>
         </svg>
 
 
-        <!-- Tooltip -->
         {#if hoveredNode}
         {#if hoveredNode}
           {@const pct = (hoveredNode.value / totalDevengado) * 100}
           {@const pct = (hoveredNode.value / totalDevengado) * 100}
-          <div
-            class="treemap-tooltip"
-            style="
-              left: {Math.min(hoveredNode.x0 + 10, treemapWidth - 280)}px;
-              top: {Math.min(hoveredNode.y0 + 10, treemapHeight - 100)}px;
-            "
-          >
-            <div class="tooltip-rank">#{treemapNodes.indexOf(hoveredNode) + 1} de {treemapNodes.length}</div>
-            <div class="tooltip-name">{hoveredNode.data.name}</div>
-            <div class="tooltip-value">{formatMoney(hoveredNode.value)}</div>
-            <div class="tooltip-pct">{pct.toFixed(1)}% del total · {formatPerCapita(hoveredNode.value)}</div>
+          <div class="tooltip" style="left:{Math.min(hoveredNode.x0 + 10, treemapWidth - 250)}px; top:{Math.min(hoveredNode.y0 + 10, treemapHeight - 90)}px;">
+            <span class="tooltip-rank">#{treemapNodes.indexOf(hoveredNode) + 1} de {treemapNodes.length}</span>
+            <span class="tooltip-subarea" style="color: {getSubareaColor(hoveredNode.data.subarea)}">{hoveredNode.data.subarea}</span>
+            <span class="tooltip-name">{hoveredNode.data.name}</span>
+            <span class="tooltip-val">{formatMonto(hoveredNode.value)} Bs · {pct.toFixed(1)}%</span>
           </div>
           </div>
         {/if}
         {/if}
       {:else}
       {:else}
-        <div class="empty-state">
-          <p>No hay datos de entidades para este objeto en {selectedYear}</p>
-        </div>
+        <div class="loading">No hay datos para {selectedYear}</div>
       {/if}
       {/if}
     </div>
     </div>
-  </div>
 
 
-  <!-- Ranking list -->
-  {#if !loading && entidadesData.length > 0}
-    <div class="ranking-section">
-      <h2 class="ranking-title">Ranking de entidades</h2>
-      <div class="ranking-list">
-        {#each entidadesData.slice(0, 20) as entity, i}
-          {@const pct = (entity.devengado / totalDevengado) * 100}
-          <div class="ranking-item">
-            <span class="ranking-pos">#{i + 1}</span>
-            <div class="ranking-bar-container">
-              <div class="ranking-bar" style="width: {pct}%; background: {getEntityColor(i, entidadesData.length)};"></div>
-              <div class="ranking-info">
-                <span class="ranking-name">{entity.desc_entidad || `Entidad ${entity.entidad}`}</span>
-                <span class="ranking-value">{formatMoney(entity.devengado)} <span class="ranking-pct">({pct.toFixed(1)}%)</span></span>
-              </div>
   </div>
   </div>
-          </div>
-        {/each}
-        {#if entidadesData.length > 20}
-          <p class="ranking-more">+ {entidadesData.length - 20} entidades más</p>
-        {/if}
-      </div>
-    </div>
-  {/if}
 </div>
 </div>
 
 
 <style>
 <style>
-  .page-container {
+  .page {
     min-height: 100vh;
     min-height: 100vh;
-    background: var(--theme-fondo);
-    padding: 1.5rem;
+    width: 100%;
+    max-width: 100%;
+    overflow-x: hidden;
+    background: var(--theme-body);
+    color: var(--theme-titulo);
+    font-family: var(--font-sans), -apple-system, sans-serif;
+    opacity: 0;
+    transition: opacity 0.4s;
+  }
+  .page.mounted { opacity: 1; }
+
+  :global(html:not(.dark)) .page { background: #f5f5f7; }
+
+  .layout {
     max-width: 1400px;
     max-width: 1400px;
     margin: 0 auto;
     margin: 0 auto;
+    padding: 80px 2rem 2rem;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
   }
   }
 
 
   /* Header */
   /* Header */
-  .page-header {
-    margin-bottom: 1.5rem;
-  }
+  .header { flex-shrink: 0; margin-bottom: 1rem; }
 
 
-  .back-btn {
-    display: inline-flex;
+  .header-top {
+    display: flex;
+    justify-content: space-between;
     align-items: center;
     align-items: center;
-    gap: 0.5rem;
-    padding: 0.5rem 1rem;
-    background: var(--theme-surface);
-    border: 1px solid var(--theme-borde);
-    border-radius: 8px;
-    color: var(--theme-texto);
-    font-size: 0.875rem;
-    cursor: pointer;
-    transition: all 0.15s ease;
-    margin-bottom: 1rem;
-  }
-  .back-btn:hover {
-    background: var(--theme-fill);
-    border-color: var(--theme-accent);
-    color: var(--theme-accent);
+    margin-bottom: 0.375rem;
   }
   }
 
 
-  .header-content {
-    margin-bottom: 1rem;
-  }
+  .pills { display: flex; gap: 0.375rem; }
 
 
-  .header-badge {
-    display: inline-block;
-    padding: 0.25rem 0.75rem;
-    background: var(--theme-accent);
-    color: white;
-    font-size: 0.75rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
+  .pill {
+    font-family: 'DM Mono', monospace;
+    font-size: 0.625rem;
+    padding: 0.125rem 0.5rem;
     border-radius: 4px;
     border-radius: 4px;
-    margin-bottom: 0.5rem;
+    letter-spacing: 0.03em;
   }
   }
+  .pill-nivel { background: rgba(201, 167, 81, 0.15); color: var(--theme-accent); }
+  .pill-codigo { background: var(--theme-borde); color: var(--theme-texto); }
 
 
-  .header-title {
-    font-size: 1.5rem;
-    font-weight: 600;
-    color: var(--theme-titulo);
-    margin: 0 0 0.25rem 0;
-    line-height: 1.3;
+  .header-actions { display: flex; align-items: center; gap: 0.75rem; }
+
+  .copy-link-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    font-size: 0.75rem;
+    color: var(--theme-texto);
+    opacity: 0.6;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    transition: opacity 0.15s;
   }
   }
+  .copy-link-btn:hover { opacity: 1; }
 
 
-  .header-code {
-    font-family: var(--font-mono);
-    opacity: 0.7;
+  .back-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-family: 'DM Mono', monospace;
+    font-size: 0.6875rem;
+    color: var(--theme-accent);
+    text-decoration: none;
+    transition: opacity 0.15s;
   }
   }
-  .header-separator {
-    opacity: 0.4;
-    margin: 0 0.25rem;
+  .back-link:hover { opacity: 0.7; }
+
+  .title {
+    font-family: 'DM Serif Display', serif;
+    font-size: 2rem;
+    font-weight: 400;
+    margin: 0 0 0.25rem;
+    line-height: 1.15;
   }
   }
 
 
-  .header-subtitle {
-    font-size: 1rem;
+  .subtitle {
+    font-size: 0.8125rem;
     color: var(--theme-texto);
     color: var(--theme-texto);
-    opacity: 0.7;
-    margin: 0;
+    opacity: 0.6;
+    margin: 0 0 0.75rem;
   }
   }
 
 
-  .year-selector {
+  .meta-row {
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
-    gap: 0.5rem;
-  }
-  .year-selector label {
-    font-size: 0.875rem;
-    color: var(--theme-texto);
+    justify-content: space-between;
+    gap: 1rem;
   }
   }
-  .year-selector select {
-    padding: 0.5rem 1rem;
-    background: var(--theme-surface);
+
+  .year-selector { display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; }
+  .year-selector::-webkit-scrollbar { display: none; }
+
+  .year-btn {
+    font-family: 'DM Mono', monospace;
+    font-size: 0.6875rem;
+    padding: 0.25rem 0.625rem;
     border: 1px solid var(--theme-borde);
     border: 1px solid var(--theme-borde);
     border-radius: 6px;
     border-radius: 6px;
-    color: var(--theme-titulo);
-    font-size: 0.875rem;
+    background: transparent;
+    color: var(--theme-texto);
     cursor: pointer;
     cursor: pointer;
+    transition: all 0.15s;
+  }
+  .year-btn:hover { border-color: var(--theme-accent); color: var(--theme-titulo); }
+  .year-btn.active {
+    background: var(--theme-accent);
+    border-color: var(--theme-accent);
+    color: white;
+    font-weight: 600;
   }
   }
 
 
-  /* Stats bar */
-  .stats-bar {
+  .stats {
     display: flex;
     display: flex;
-    gap: 2rem;
-    padding: 1rem 1.5rem;
-    background: var(--theme-surface);
-    border: 1px solid var(--theme-borde);
-    border-radius: 12px;
-    margin-bottom: 1.5rem;
+    align-items: center;
+    gap: 0.375rem;
+    font-size: 0.75rem;
+    color: var(--theme-texto);
+    opacity: 0.7;
   }
   }
+  .stats strong { color: var(--theme-titulo); font-weight: 600; }
+  .stat-sep { opacity: 0.3; }
 
 
-  .stat {
+  /* Slider */
+  .slider-row {
     display: flex;
     display: flex;
-    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 0.5rem;
   }
   }
-  .stat-value {
-    font-size: 1.25rem;
-    font-weight: 600;
+
+  .slider-label {
+    font-family: 'DM Mono', monospace;
+    font-size: 0.6875rem;
     color: var(--theme-titulo);
     color: var(--theme-titulo);
-    font-variant-numeric: tabular-nums;
+    font-weight: 600;
   }
   }
-  .stat-label {
-    font-size: 0.75rem;
+
+  .slider-info {
+    font-size: 0.6875rem;
     color: var(--theme-texto);
     color: var(--theme-texto);
-    opacity: 0.7;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
+    opacity: 0.6;
   }
   }
 
 
-  /* Treemap */
-  .treemap-section {
-    margin-bottom: 2rem;
+  .range-slider {
+    position: relative;
+    height: 20px;
+    margin-bottom: 0.5rem;
   }
   }
 
 
-  .treemap-container {
+  .range-slider input[type="range"] {
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    top: 8px;
+    pointer-events: none;
+    -webkit-appearance: none;
+    appearance: none;
+    background: transparent;
+  }
+
+  .range-slider input[type="range"]:first-child {
+    background: var(--theme-borde);
+    border-radius: 2px;
+  }
+
+  .range-slider input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: var(--theme-accent);
+    border: 2px solid var(--theme-surface);
+    cursor: pointer;
+    pointer-events: all;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+  }
+
+  .range-slider input[type="range"]::-moz-range-thumb {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: var(--theme-accent);
+    border: 2px solid var(--theme-surface);
+    cursor: pointer;
+    pointer-events: all;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+  }
+
+  /* Treemap */
+  .treemap-wrapper {
+    flex: 1;
+    min-height: 200px;
     position: relative;
     position: relative;
     background: var(--theme-surface);
     background: var(--theme-surface);
-    border: 1px solid var(--theme-borde);
     border-radius: 12px;
     border-radius: 12px;
     overflow: hidden;
     overflow: hidden;
   }
   }
 
 
-  .loading-state,
-  .empty-state {
+  .treemap-wrapper svg { display: block; width: 100%; height: 100%; }
+
+  .loading {
     position: absolute;
     position: absolute;
     inset: 0;
     inset: 0;
     display: flex;
     display: flex;
-    flex-direction: column;
     align-items: center;
     align-items: center;
     justify-content: center;
     justify-content: center;
     color: var(--theme-texto);
     color: var(--theme-texto);
-    opacity: 0.7;
-  }
-
-  .loader {
-    width: 40px;
-    height: 40px;
-    border: 3px solid var(--theme-borde);
-    border-top-color: var(--theme-accent);
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-    margin-bottom: 1rem;
-  }
-
-  @keyframes spin {
-    to { transform: rotate(360deg); }
-  }
-
-  :global(.treemap-node) {
-    transition: opacity 0.15s ease;
-  }
-  :global(.treemap-node rect) {
-    transition: fill 0.15s ease;
+    opacity: 0.5;
+    font-size: 0.875rem;
   }
   }
 
 
-  .node-content {
+  .node-text {
     display: flex;
     display: flex;
     flex-direction: column;
     flex-direction: column;
-    gap: 0;
     overflow: hidden;
     overflow: hidden;
-    font-family: var(--font-sans);
   }
   }
 
 
-  .node-pct {
-    font-weight: 600;
-    line-height: 1;
-    opacity: 0.9;
-  }
-
-  .node-name {
-    line-height: 1.2;
-    margin-top: 2px;
-    opacity: 0.85;
-  }
-
-  .node-value {
-    font-variant-numeric: tabular-nums;
-    opacity: 0.7;
-    margin-top: 2px;
-  }
+  .node-pct { font-weight: 700; line-height: 1; }
+  .node-name { line-height: 1.2; margin-top: 1px; }
 
 
   /* Tooltip */
   /* Tooltip */
-  .treemap-tooltip {
+  .tooltip {
     position: absolute;
     position: absolute;
     pointer-events: none;
     pointer-events: none;
-    padding: 0.75rem 1rem;
-    border-radius: 10px;
+    padding: 0.5rem 0.75rem;
+    border-radius: 8px;
     z-index: 10;
     z-index: 10;
-    max-width: 280px;
-    background: rgba(255, 255, 255, 0.85);
+    max-width: 250px;
+    background: rgba(30, 30, 30, 0.9);
     backdrop-filter: blur(12px);
     backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-    color: #1a1a1a;
-    font-family: var(--font-sans);
-  }
-
-  :global(html.dark) .treemap-tooltip {
-    background: rgba(30, 30, 30, 0.85);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.1);
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
     color: #f5f5f5;
     color: #f5f5f5;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
   }
   }
 
 
-  .tooltip-rank {
-    font-size: 0.7rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    opacity: 0.6;
-    margin-bottom: 0.25rem;
+  :global(html:not(.dark)) .tooltip {
+    background: rgba(255, 255, 255, 0.9);
+    border-color: rgba(0, 0, 0, 0.1);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+    color: #1a1a1a;
   }
   }
 
 
-  .tooltip-name {
-    font-size: 0.9rem;
-    font-weight: 500;
-    line-height: 1.3;
-  }
+  .tooltip-rank { font-size: 0.6rem; opacity: 0.5; text-transform: uppercase; letter-spacing: 0.05em; }
+  .tooltip-subarea { font-size: 0.6875rem; font-weight: 600; }
+  .tooltip-name { font-size: 0.8125rem; font-weight: 600; }
+  .tooltip-val { font-family: 'DM Mono', monospace; font-size: 0.75rem; opacity: 0.7; }
 
 
-  .tooltip-value {
-    font-size: 0.875rem;
-    font-weight: 600;
-    margin-top: 0.5rem;
-    font-variant-numeric: tabular-nums;
+  /* Leyenda */
+  .legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem 1rem;
+    padding-top: 0.5rem;
+    flex-shrink: 0;
   }
   }
 
 
-  .tooltip-pct {
-    font-size: 0.75rem;
+  .legend-item {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-size: 0.625rem;
+    color: var(--theme-texto);
     opacity: 0.7;
     opacity: 0.7;
-    font-variant-numeric: tabular-nums;
   }
   }
 
 
-  /* Ranking list */
-  .ranking-section {
-    background: var(--theme-surface);
-    border: 1px solid var(--theme-borde);
-    border-radius: 12px;
-    padding: 1.5rem;
+  .legend-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 2px;
+    flex-shrink: 0;
   }
   }
 
 
-  .ranking-title {
-    font-size: 1rem;
-    font-weight: 600;
-    color: var(--theme-titulo);
-    margin: 0 0 1rem 0;
-  }
-
-  .ranking-list {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
+  /* Responsive */
+  @media (max-width: 900px) {
+    .layout {
+      padding: 70px 1rem 1rem;
+      height: auto;
+      min-height: 100vh;
+      overflow: visible;
     }
     }
 
 
-  .ranking-item {
-    display: grid;
-    grid-template-columns: 2.5rem 1fr;
-    gap: 0.75rem;
-    align-items: center;
+    .treemap-wrapper {
+      min-height: 350px;
+      height: 50vh;
+      flex: none;
     }
     }
-
-  .ranking-pos {
-    font-size: 0.875rem;
-    font-weight: 600;
-    color: var(--theme-texto);
-    opacity: 0.5;
-    font-variant-numeric: tabular-nums;
   }
   }
 
 
-  .ranking-bar-container {
-    position: relative;
-    height: 32px;
-    background: var(--theme-fill);
-    border-radius: 4px;
-    overflow: hidden;
-  }
-
-  .ranking-bar {
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    border-radius: 4px;
-    transition: width 0.3s ease;
-  }
+  @media (max-width: 640px) {
+    .layout { padding: 60px 0.75rem 1rem; }
+    .title { font-size: 1.375rem; }
+    .subtitle { font-size: 0.75rem; }
+    .meta-row { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
+    .header-top { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
 
 
-  .ranking-info {
-    position: absolute;
-    left: 0.75rem;
-    right: 0.75rem;
-    top: 50%;
-    transform: translateY(-50%);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    pointer-events: none;
+    .year-selector {
+      flex-wrap: wrap;
+      gap: 0.25rem;
     }
     }
 
 
-  .ranking-name {
-    font-size: 0.8125rem;
-    font-weight: 500;
-    color: var(--theme-titulo);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 60%;
+    .year-btn {
+      font-size: 0.625rem;
+      padding: 0.2rem 0.5rem;
     }
     }
 
 
-  .ranking-value {
-    font-size: 0.8125rem;
-    font-weight: 500;
-    color: var(--theme-titulo);
-    font-variant-numeric: tabular-nums;
+    .slider-row {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.125rem;
     }
     }
 
 
-  .ranking-pct {
-    opacity: 0.6;
-    font-weight: 400;
-  }
+    .stats { font-size: 0.6875rem; }
 
 
-  .ranking-more {
-    font-size: 0.8125rem;
-    color: var(--theme-texto);
-    opacity: 0.6;
-    text-align: center;
-    margin: 0.5rem 0 0 0;
+    .treemap-wrapper {
+      min-height: 300px;
+      height: 45vh;
     }
     }
 
 
-  /* Responsive */
-  @media (max-width: 640px) {
-    .page-container {
-      padding: 1rem;
+    .tooltip {
+      max-width: 200px;
+      font-size: 0.75rem;
     }
     }
 
 
-    .header-title {
-      font-size: 1.25rem;
+    .header-actions {
+      width: 100%;
+      justify-content: space-between;
     }
     }
-
-    .stats-bar {
-      flex-wrap: wrap;
-      gap: 1rem;
   }
   }
 
 
-    .stat-value {
-      font-size: 1.1rem;
-    }
+  @media (max-width: 380px) {
+    .layout { padding: 55px 0.5rem 0.75rem; }
+    .title { font-size: 1.125rem; }
 
 
-    .ranking-item {
-      grid-template-columns: 2rem 1fr;
+    .treemap-wrapper {
+      min-height: 250px;
+      height: 40vh;
     }
     }
 
 
-    .ranking-name {
-      max-width: 50%;
+    .year-btn {
+      font-size: 0.5625rem;
+      padding: 0.15rem 0.375rem;
     }
     }
   }
   }
 </style>
 </style>

+import { redirect } from '@sveltejs/kit';
+
+export function load({ params }) {
+  throw redirect(301, `/objeto/${params.codigo}?entidad=${params.entidad}`);
+}

@@ -25,6 +25,7 @@
   let clasificadorSeleccionado = $state('total'); // total, objeto, finfun, acteco
   let clasificadorSeleccionado = $state('total'); // total, objeto, finfun, acteco
   let subPartidaSearch = $state('');
   let subPartidaSearch = $state('');
   let subPartidaSeleccionada = $state(null);
   let subPartidaSeleccionada = $state(null);
+  let mapLinkCopied = $state(false);
 
 
   const CLASIFICADORES_MAPA = [
   const CLASIFICADORES_MAPA = [
     { id: 'total', label: 'Gasto total', disponible: true },
     { id: 'total', label: 'Gasto total', disponible: true },
@@ -128,7 +129,7 @@
       const res = await fetch(`${apiEndpoint}?${params}`);
       const res = await fetch(`${apiEndpoint}?${params}`);
       const data = await res.json();
       const data = await res.json();
       const mapped = (data || [])
       const mapped = (data || [])
-        .filter(d => d.ubigeo !== '0.0.0')
+        .filter(d => d.ubigeo !== '0.0.0' && !/multimunicipal/i.test(d.desc_ubigeo))
         .map(d => ({
         .map(d => ({
           codigo: d.ubigeo,
           codigo: d.ubigeo,
           desc: d.desc_ubigeo,
           desc: d.desc_ubigeo,
@@ -393,11 +394,19 @@
     goto(url.toString(), { replaceState: true, noScroll: true });
     goto(url.toString(), { replaceState: true, noScroll: true });
   }
   }
 
 
-  // Resolver nombre de partida por código desde Typesense
+  // Resolver nombre de partida por código desde la API
   async function resolverNombre(clas, codigo) {
   async function resolverNombre(clas, codigo) {
+    try {
+      if (clas === 'objeto') {
+        const res = await fetch(`/api/objeto-data?codigo=${codigo}&tipo=clasificador`);
+        if (res.ok) {
+          const data = await res.json();
+          if (data?.desc_objeto) return data.desc_objeto;
+        }
+      }
+      // Fallback: buscar en Typesense
       const cfg = CLAS_SEARCH_MAP[clas];
       const cfg = CLAS_SEARCH_MAP[clas];
       if (!cfg) return codigo;
       if (!cfg) return codigo;
-    try {
       const params = new URLSearchParams({ q: codigo, per_page: '5', is_class: 'true', class_: cfg.class_ });
       const params = new URLSearchParams({ q: codigo, per_page: '5', is_class: 'true', class_: cfg.class_ });
       const res = await fetch(`/api/search?${params}`);
       const res = await fetch(`/api/search?${params}`);
       if (!res.ok) return codigo;
       if (!res.ok) return codigo;
@@ -477,10 +486,34 @@
   <div class="mapa-fullscreen">
   <div class="mapa-fullscreen">
     <div class="mapa-top-controls">
     <div class="mapa-top-controls">
       <nav class="breadcrumb">
       <nav class="breadcrumb">
-        <button class="back-btn" onclick={() => { history.back(); }}>←</button>
-        <a href="/">Inicio</a>
-        <span class="sep">/</span>
-        <span>Ubicación geográfica</span>
+        {#if clasSeleccionado && clasificadorSeleccionado === 'objeto'}
+          <a href="/objeto/{clasSeleccionado.codigo}" class="back-link-mapa">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
+            Volver a {clasSeleccionado.nombre}
+          </a>
+        {:else if clasSeleccionado && clasificadorSeleccionado === 'finfun'}
+          <a href="/finfun/{clasSeleccionado.codigo}" class="back-link-mapa">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
+            Volver a {clasSeleccionado.nombre}
+          </a>
+        {:else}
+          <span class="mapa-location-label">Ubicación geográfica</span>
+        {/if}
+        <button class="copy-link-btn-mapa" onclick={() => {
+          navigator.clipboard.writeText(window.location.href);
+          mapLinkCopied = true;
+          setTimeout(() => mapLinkCopied = false, 2000);
+        }}>
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            {#if mapLinkCopied}
+              <path d="M20 6L9 17l-5-5"/>
+            {:else}
+              <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
+              <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
+            {/if}
+          </svg>
+          {mapLinkCopied ? 'Copiado' : 'Compartir'}
+        </button>
       </nav>
       </nav>
       <!-- Fila 1: Dropdowns inline -->
       <!-- Fila 1: Dropdowns inline -->
       <div class="titulo-dropdowns">
       <div class="titulo-dropdowns">
@@ -527,7 +560,6 @@
           <div class="objeto-search-mapa">
           <div class="objeto-search-mapa">
             {#if clasSeleccionado}
             {#if clasSeleccionado}
               <div class="objeto-selected-pill">
               <div class="objeto-selected-pill">
-                <span class="objeto-pill-code">{clasSeleccionado.codigo}</span>
                 <span class="objeto-pill-name">{clasSeleccionado.nombre}</span>
                 <span class="objeto-pill-name">{clasSeleccionado.nombre}</span>
                 <button class="objeto-pill-clear" onclick={() => { limpiarClasificador(); cargarGestion(gestionSeleccionada); }}>✕</button>
                 <button class="objeto-pill-clear" onclick={() => { limpiarClasificador(); cargarGestion(gestionSeleccionada); }}>✕</button>
               </div>
               </div>
@@ -769,12 +801,41 @@
     flex-shrink: 0;
     flex-shrink: 0;
   }
   }
 
 
-  .breadcrumb { font-size: 0.7rem; color: var(--theme-texto); opacity: 0.5; display: flex; align-items: center; gap: 0.3rem; }
-  .back-btn { background: none; border: none; cursor: pointer; color: var(--theme-texto); font-size: 0.85rem; padding: 0; opacity: 0.6; transition: opacity 0.15s; }
-  .back-btn:hover { opacity: 1; }
-  .breadcrumb a { color: var(--theme-texto); text-decoration: none; }
-  .breadcrumb a:hover { text-decoration: underline; opacity: 1; }
-  .breadcrumb .sep { margin: 0 0.3rem; }
+  .breadcrumb { font-size: 0.7rem; color: var(--theme-texto); display: flex; align-items: center; gap: 0.75rem; }
+
+  .back-link-mapa {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-family: 'DM Mono', monospace;
+    font-size: 0.6875rem;
+    color: var(--theme-accent);
+    text-decoration: none;
+    transition: opacity 0.15s;
+  }
+  .back-link-mapa:hover { opacity: 0.7; }
+
+  .mapa-location-label {
+    font-size: 0.6875rem;
+    color: var(--theme-texto);
+    opacity: 0.5;
+  }
+
+  .copy-link-btn-mapa {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-size: 0.6875rem;
+    color: var(--theme-texto);
+    opacity: 0.5;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    transition: opacity 0.15s;
+    margin-left: auto;
+  }
+  .copy-link-btn-mapa:hover { opacity: 1; }
 
 
   .titulo-dropdowns {
   .titulo-dropdowns {
     display: flex;
     display: flex;