<script>
  import { onMount } from 'svelte';
  import { tweened } from 'svelte/motion';
  import { cubicOut } from 'svelte/easing';
  import { goto } from '$app/navigation';
  import { page } from '$app/stores';
  import Spinner from '$lib/components/ui/Spinner.svelte';
  import VistaToggle from '$lib/components/objeto/VistaToggle.svelte';
  import BarChart from '$lib/components/objeto/BarChart.svelte';
  import EntitySelector from '$lib/components/objeto/EntitySelector.svelte';

  let { data } = $props();
  let finfunData = $derived(data.finfun);
  let padres = $derived(data.padres);
  let hijos = $derived(data.hijos);

  let mounted = $state(false);
  let loading = $state(false);
  let hoveredYear = $state(null);
  let lockedYear = $state(null);
  let activeYear = $derived(lockedYear ?? hoveredYear);
  let showDefinicionesModal = $state(false);
  let showMobileSidebar = $state(false);
  let metrica = $state('percapita'); // 'percapita' | 'monto'
  let vista = $state('agregado'); // 'agregado' | 'comparar'
  let linkCopied = $state(false);

  // Inline search state
  let searchQuery = $state('');
  let searchResults = $state([]);
  let searchLoading = $state(false);
  let searchTimeout = null;

  async function doSearch(q) {
    if (!q || q.length < 2) { searchResults = []; return; }
    searchLoading = true;
    try {
      const res = await fetch(`/api/search?q=${encodeURIComponent(q)}&per_page=20&is_class=true&class_=finalidad`);
      const data = await res.json();
      searchResults = (data.hits || []).map(hit => {
        const doc = hit.document || {};
        let meta = {};
        try { meta = typeof doc.metadatos === 'string' ? JSON.parse(doc.metadatos) : (doc.metadatos || {}); } catch {}
        const fin = String(meta.finfun_finalidad ?? '');
        if (!fin) return null;
        let code = fin;
        if (meta.finfun_funcion !== undefined && meta.finfun_grpfuncion !== undefined) {
          code = `${fin}.${meta.finfun_grpfuncion}.${meta.finfun_funcion}`;
        } else if (meta.finfun_grpfuncion !== undefined) {
          code = `${fin}.${meta.finfun_grpfuncion}`;
        }
        return {
          code,
          label: doc.texto || '',
        };
      }).filter(Boolean);
    } catch {
      searchResults = [];
    }
    searchLoading = false;
  }

  function onSearchInput(e) {
    const q = e.target.value;
    searchQuery = q;
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(() => doSearch(q), 300);
  }

  // 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.by(() => {
    const descs = finfunData.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
  let entidades = $state([]);
  let selectedEntity = $state(null);
  let nEntidades = $derived(entidades.length || 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 };
  }

  let { hist: initHist, anuales: initAnuales, topPorAño: initTop } = initEstados(finfunData);
  let datosAnuales = $state(initAnuales);
  let datosHistorico = $state(initHist);
  let topEntidadesPorAño = $state(initTop);

  const POBLACION = 12000000;
  let finfunCodigo = $derived(finfunData.finfun);
  let finfunNivel = $derived(finfunData.nivel);

  let gastoPerCapita = $derived(
    datosAnuales.map(d => {
      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 {
        año: d.gestion,
        monto,
        perCapita: metrica === 'percapita' ? perCapita : monto
      };
    })
  );

  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 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(
    activeYear ? gastoPerCapita.find(g => g.año === activeYear) : null
  );

  // Datos del año activo (fijado o hover) desde datosAnuales
  let currentAnual = $derived(activeYear ? datosAnuales.find(d => d.gestion === activeYear) : 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 función en ${currentAnual.gestion}` : 'del total de esta función';
    }
    return currentAnual ? `del gasto en ${currentAnual.gestion}` : 'del gasto total';
  });

  let displayPeriodo = $derived(currentData ? currentData.año : `${primerAño}-${ultimoAño}`);
  let displayRanking = $derived(`${currentAnual ? currentAnual.ranking : ranking} de ${selectedEntity ? (datosHistorico?.n_entidades || nEntidades) : (currentAnual ? currentAnual.n_pares : nPares)}`);

  let nivelKey = $derived(finfunData.nivel?.toLowerCase());
  let nivelPlural = $derived({ finalidad: 'finalidades', grpfuncion: 'grupos de función', funcion: 'funciones' }[nivelKey] || 'funciones');
  let nivelLabel = $derived({ finalidad: 'Finalidad', grpfuncion: 'Grupo función', funcion: 'Función' }[nivelKey] || finfunData.nivel);
  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
  let topEntidadesTotal = $derived(
    datosHistorico && !selectedEntity ? [
      { 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) : []
  );
  let displayTopEntidades = $derived(
    activeYear && topEntidadesPorAño[activeYear] ? topEntidadesPorAño[activeYear] : topEntidadesTotal
  );

  // Tweens
  const tw = { duration: 300, easing: cubicOut };
  const twMonto = tweened(0, tw);
  const twPerCapita = tweened(0, tw);
  const twPorcentaje = tweened(0, tw);
  const twTop1 = tweened(0, tw);
  const twTop2 = tweened(0, tw);
  const twTop3 = tweened(0, tw);

  $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[1]) twTop2.set(displayTopEntidades[1].porcentaje); });
  $effect(() => { if (displayTopEntidades[2]) twTop3.set(displayTopEntidades[2].porcentaje); });

  function formatMontoLargo(n) {
    if (n >= 1e9) return `${(n / 1e9).toFixed(1)} mil mill.`;
    if (n >= 1e6) return `${(n / 1e6).toFixed(1)} mill.`;
    if (n >= 1e3) return `${(n / 1e3).toFixed(0)} mil`;
    return n.toLocaleString('es-BO');
  }

  function formatPerCapita(n) {
    return n.toLocaleString('es-BO', { minimumFractionDigits: 0, maximumFractionDigits: 0 });
  }

  async function loadData() {
    if (!selectedEntity) return;
    lockedYear = null;
    loading = true;
    try {
      const res = await fetch(`/api/finfun-data?codigo=${finfunCodigo}&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;
        datosAnuales = data.filter(d => d.gestion >= 2016);
        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);
        }
      }
    } catch (err) {
      console.error('[loadData] Error:', err);
    }
    loading = false;
  }

  async function loadEntidades() {
    try {
      // Usar el último año disponible para filtrar entidades activas
      const añosConDatos = datosAnuales.map(d => d.gestion).sort((a, b) => b - a);
      const año = añosConDatos[0] || 2025;

      const [entRes, clasRes] = await Promise.all([
        fetch(`/api/finfun-data?codigo=${finfunCodigo}&tipo=entidades-año&gestion=${año}`),
        fetch('/api/entidad-clasificador')
      ]);
      const entData = await entRes.json();
      const clasData = await clasRes.json();

      const nombreMap = new Map();
      if (Array.isArray(clasData)) {
        clasData.forEach(e => nombreMap.set(e.entidad, e.desc_entidad));
      }

      if (Array.isArray(entData)) {
        entidades = entData
          .filter(d => d.monto > 0 && d.entidad !== 0)
          .map(d => ({ entidad: d.entidad, entidad_desc: nombreMap.get(d.entidad) || `Entidad ${d.entidad}` }))
          .sort((a, b) => (a.entidad_desc || '').localeCompare(b.entidad_desc || ''));
      }
    } catch {
      entidades = [];
    }
  }

  // ══════════════════════════════════════════════════════════════
  // COMPARACIÓN
  // ══════════════════════════════════════════════════════════════
  const twMontoA = tweened(0, { duration: 300, easing: cubicOut });
  const twMontoB = tweened(0, { duration: 300, easing: cubicOut });
  const twPerCapitaA = tweened(0, { duration: 300, easing: cubicOut });
  const twPerCapitaB = tweened(0, { duration: 300, easing: cubicOut });

  let hoveredYearComparar = $state(null);
  let loadingComparacion = $state(false);
  let isDefaultSelection = $state(false);
  let alertDefaultDismissed = $state(false);
  let alertRangosDismissed = $state(false);

  let entidadCompararA = $state(null);
  let entidadCompararB = $state(null);
  let datosCompararA = $state({ anual: [], historico: null });
  let datosCompararB = $state({ anual: [], historico: null });

  let dropdownAOpen = $state(false);
  let dropdownBOpen = $state(false);
  let searchA = $state('');
  let searchB = $state('');
  let entityLimitA = $state(30);
  let entityLimitB = $state(30);

  let filteredEntidadesA = $derived.by(() => {
    if (!searchA || searchA.length < 2) return entidades.slice(0, entityLimitA);
    const q = searchA.toLowerCase();
    return entidades.filter(e => e.entidad_desc?.toLowerCase().includes(q) || e.entidad?.toString().includes(q)).slice(0, entityLimitA);
  });

  let filteredEntidadesB = $derived.by(() => {
    if (!searchB || searchB.length < 2) return entidades.slice(0, entityLimitB);
    const q = searchB.toLowerCase();
    return entidades.filter(e => e.entidad_desc?.toLowerCase().includes(q) || e.entidad?.toString().includes(q)).slice(0, entityLimitB);
  });

  async function loadDatosEntidad(entidad) {
    try {
      const res = await fetch(`/api/finfun-data?codigo=${finfunCodigo}&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 };
      }
    } catch {}
    return { anual: [], historico: null };
  }

  async function initComparacion() {
    if (entidadCompararA || entidadCompararB) return;
    if (selectedEntity) {
      entidadCompararA = selectedEntity;
      loadingComparacion = true;
      datosCompararA = await loadDatosEntidad(selectedEntity);
      loadingComparacion = false;
      isDefaultSelection = false;
    } else if (topEntidadesTotal.length >= 2) {
      const top1 = entidades.find(e => e.entidad_desc === topEntidadesTotal[0].nombre);
      const top2 = entidades.find(e => e.entidad_desc === topEntidadesTotal[1].nombre);
      if (top1 && top2) {
        isDefaultSelection = true;
        loadingComparacion = true;
        entidadCompararA = top1;
        datosCompararA = await loadDatosEntidad(top1);
        entidadCompararB = top2;
        datosCompararB = await loadDatosEntidad(top2);
        loadingComparacion = false;
      }
    }
  }

  async function selectEntidadA(entidad) {
    entidadCompararA = entidad;
    dropdownAOpen = false;
    searchA = '';
    entityLimitA = 30;
    isDefaultSelection = false;
    loadingComparacion = true;
    datosCompararA = await loadDatosEntidad(entidad);
    loadingComparacion = false;
    updateCompararUrl();
  }

  async function selectEntidadB(entidad) {
    entidadCompararB = entidad;
    dropdownBOpen = false;
    searchB = '';
    entityLimitB = 30;
    isDefaultSelection = false;
    loadingComparacion = true;
    datosCompararB = await loadDatosEntidad(entidad);
    loadingComparacion = false;
    updateCompararUrl();
  }

  function handleEntityScroll(event, type) {
    const el = event.target;
    if (el.scrollHeight - el.scrollTop - el.clientHeight < 50) {
      if (type === 'A' && entityLimitA < entidades.length) entityLimitA += 30;
      if (type === 'B' && entityLimitB < entidades.length) entityLimitB += 30;
    }
  }

  let rangoAños = $state('todo');

  let añosComunesTotales = $derived.by(() => {
    const añosA = datosCompararA.anual.map(d => d.gestion);
    const añosB = datosCompararB.anual.map(d => d.gestion);
    if (añosA.length && añosB.length) {
      const setB = new Set(añosB);
      return añosA.filter(a => setB.has(a)).sort((a, b) => a - b);
    }
    if (añosA.length) return [...añosA].sort((a, b) => a - b);
    if (añosB.length) return [...añosB].sort((a, b) => a - b);
    return [];
  });

  let soloUnaEntidad = $derived((entidadCompararA && !entidadCompararB) || (!entidadCompararA && entidadCompararB));

  let rangoInfoA = $derived.by(() => {
    if (!datosCompararA.anual.length) return null;
    const años = datosCompararA.anual.map(d => d.gestion).sort((a, b) => a - b);
    return { desde: años[0], hasta: años[años.length - 1], total: años.length };
  });

  let rangoInfoB = $derived.by(() => {
    if (!datosCompararB.anual.length) return null;
    const años = datosCompararB.anual.map(d => d.gestion).sort((a, b) => a - b);
    return { desde: años[0], hasta: años[años.length - 1], total: años.length };
  });

  let tienenRangosDiferentes = $derived.by(() => {
    if (!rangoInfoA || !rangoInfoB) return false;
    return rangoInfoA.desde !== rangoInfoB.desde || rangoInfoA.hasta !== rangoInfoB.hasta;
  });

  let añosComparacion = $derived.by(() => {
    if (rangoAños === 'todo') return añosComunesTotales;
    return añosComunesTotales.slice(-parseInt(rangoAños));
  });

  let datosGraficoA = $derived.by(() => {
    const map = new Map(datosCompararA.anual.map(d => [d.gestion, d]));
    return añosComparacion.map(año => map.get(año) || { per_capita: 0, monto: 0 });
  });

  let datosGraficoB = $derived.by(() => {
    const map = new Map(datosCompararB.anual.map(d => [d.gestion, d]));
    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(() => {
    const all = [...datosGraficoA.map(d => valComparar(d)), ...datosGraficoB.map(d => valComparar(d))];
    return Math.max(...all, 1) * 1.1;
  });

  let displayPeriodoComparar = $derived.by(() => {
    if (hoveredYearComparar) return hoveredYearComparar;
    if (añosComparacion.length > 0) return `${añosComparacion[0]}-${añosComparacion[añosComparacion.length - 1]}`;
    return 'Selecciona entidades';
  });

  let displayPropA = $derived.by(() => {
    if (hoveredYearComparar) { const idx = añosComparacion.indexOf(hoveredYearComparar); if (idx >= 0) return datosGraficoA[idx]?.prop || 0; }
    return datosCompararA.historico?.prop || 0;
  });
  let displayPropB = $derived.by(() => {
    if (hoveredYearComparar) { const idx = añosComparacion.indexOf(hoveredYearComparar); if (idx >= 0) return datosGraficoB[idx]?.prop || 0; }
    return datosCompararB.historico?.prop || 0;
  });
  let displayRankingA = $derived.by(() => {
    if (hoveredYearComparar) { const idx = añosComparacion.indexOf(hoveredYearComparar); if (idx >= 0) return datosGraficoA[idx]?.ranking || '-'; }
    return datosCompararA.historico?.ranking || '-';
  });
  let displayRankingB = $derived.by(() => {
    if (hoveredYearComparar) { const idx = añosComparacion.indexOf(hoveredYearComparar); if (idx >= 0) return datosGraficoB[idx]?.ranking || '-'; }
    return datosCompararB.historico?.ranking || '-';
  });
  let displayNEntidadesA = $derived.by(() => {
    if (hoveredYearComparar) { const idx = añosComparacion.indexOf(hoveredYearComparar); if (idx >= 0) return datosGraficoA[idx]?.n_entidades || '-'; }
    return datosCompararA.historico?.n_entidades || '-';
  });
  let displayNEntidadesB = $derived.by(() => {
    if (hoveredYearComparar) { const idx = añosComparacion.indexOf(hoveredYearComparar); if (idx >= 0) return datosGraficoB[idx]?.n_entidades || '-'; }
    return datosCompararB.historico?.n_entidades || '-';
  });

  let isDarkMode = $state(false);
  $effect(() => {
    if (typeof document !== 'undefined') {
      const checkDark = () => { isDarkMode = document.documentElement.classList.contains('dark'); };
      checkDark();
      const observer = new MutationObserver(checkDark);
      observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
      return () => observer.disconnect();
    }
  });

  let colorA = $derived(isDarkMode ? '#7EB8DA' : '#6B8299');
  let colorB = $derived(isDarkMode ? '#D4A574' : '#C4897D');

  function toNumber(v) { return typeof v === 'number' ? v : 0; }

  $effect(() => {
    const year = hoveredYearComparar;
    const idx = year ? añosComparacion.indexOf(year) : -1;
    twMontoA.set(idx >= 0 ? toNumber(datosGraficoA[idx]?.monto) : toNumber(datosCompararA.historico?.monto));
    twMontoB.set(idx >= 0 ? toNumber(datosGraficoB[idx]?.monto) : toNumber(datosCompararB.historico?.monto));
    twPerCapitaA.set(idx >= 0 ? toNumber(datosGraficoA[idx]?.per_capita) : toNumber(datosCompararA.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
  let previousVista = 'agregado';
  let skipPopstate = false;
  $effect(() => {
    if (mounted && vista !== previousVista) {
      previousVista = vista;
      if (!skipPopstate) {
        const url = new URL(window.location.href);
        if (vista === 'comparar') {
          url.searchParams.set('vista', 'comparar');
          url.searchParams.delete('entidad');
        } else {
          url.searchParams.delete('vista');
          url.searchParams.delete('entidadA');
          url.searchParams.delete('entidadB');
        }
        history.pushState({ vista }, '', url.toString());
      }
      skipPopstate = false;
      if (vista === 'comparar') initComparacion();
    }
  });

  function handlePopstate(e) {
    const params = new URL(window.location.href).searchParams;
    const urlVista = params.get('vista') || 'agregado';
    if (urlVista !== vista) {
      skipPopstate = true;
      vista = urlVista;
    }
  }

  function formatMonto(m) {
    if (m >= 1e9) return (m / 1e9).toLocaleString('es-BO', { maximumFractionDigits: 1 }) + ' MM';
    if (m >= 1e6) return (m / 1e6).toLocaleString('es-BO', { maximumFractionDigits: 1 }) + ' M';
    if (m >= 1e3) return Math.round(m / 1e3).toLocaleString('es-BO') + ' K';
    return m?.toLocaleString('es-BO') || '0';
  }

  // ══════════════════════════════════════════════════════════════

  onMount(() => {
    mounted = true;
    loadEntidades().then(async () => {
      // Read URL params after entidades are loaded
      const urlVista = $page.url.searchParams.get('vista');
      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 cuando cambia el finfun (navegación entre funciones)
  let prevCodigo = null;
  $effect(() => {
    const code = finfunCodigo;
    if (prevCodigo !== null && code !== prevCodigo) {
      // Reiniciar comparación
      entidadCompararA = null;
      entidadCompararB = null;
      datosCompararA = { anual: [], historico: null };
      datosCompararB = { anual: [], historico: null };

      // Cargar datos del estado desde finfunData.estados
      const { hist, anuales, topPorAño } = initEstados(finfunData);
      datosHistorico = hist;
      datosAnuales = anuales;
      topEntidadesPorAño = topPorAño;
      loading = false;

      // Recargar entidades y mantener la seleccionada si existe en la nueva función
      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 cuando cambia la entidad seleccionada
  let prevEntity = null;
  $effect(() => {
    const ent = selectedEntity;
    if (ent !== prevEntity) {
      prevEntity = ent;
      if (ent) {
        loadData();
      } else if (prevCodigo) {
        const { hist, anuales, topPorAño } = initEstados(finfunData);
        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>

<svelte:window on:popstate={handlePopstate} />

<svelte:head>
  <title>{finfunData.desc_finfun} | Presupuesto Abierto</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>

<div class="page" class:mounted>

  {#if vista === 'agregado'}
  <div class="dashboard-layout">
    <!-- Sidebar -->
    <aside class="dashboard-context" class:mobile-open={showMobileSidebar}>
      <!-- Mobile toggle -->
      <button class="mobile-sidebar-toggle" onclick={() => showMobileSidebar = !showMobileSidebar}>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
        </svg>
        <span>{showMobileSidebar ? 'Ocultar herramientas' : 'Herramientas'}</span>
      </button>

      <div class="context-card">
        <h2 class="context-main-title">Herramientas</h2>

        <!-- Buscar -->
        <div class="context-section">
          <h3 class="context-subtitle">Buscar</h3>
          <div class="inline-search">
            <input
              type="text"
              class="inline-search-input"
              placeholder="Buscar finalidad y función..."
              value={searchQuery}
              oninput={onSearchInput}
            />
            {#if searchLoading}
              <div class="inline-search-loading">Buscando...</div>
            {/if}
            {#if searchResults.length > 0}
              <div class="inline-search-results">
                {#each searchResults as result}
                  <a href="/finfun/{result.code}" class="inline-search-item" onclick={() => { searchQuery = ''; searchResults = []; }}>
                    <span class="inline-search-label">{result.label}</span>
                  </a>
                {/each}
              </div>
            {/if}
          </div>
        </div>

        <div class="context-separator"></div>

        <!-- Navegación -->
        {#if padres.length > 0 || hijos.length > 0}
          <div class="context-section">
            <h3 class="context-subtitle">Navegación</h3>
            <p class="context-hint">Funciones relacionadas. Haz click para explorar.</p>
            <div class="tree">
              {#each padres as padre, i}
                <a href="/finfun/{padre.finfun}" class="tree-node has-tooltip" style="--indent: {i}" data-tooltip="{padre.desc_finfun}">
                  <span class="tree-dot"></span>
                  <span class="tree-code">{padre.finfun}</span>
                  <span class="tree-name">{padre.desc_finfun}</span>
                </a>
              {/each}

              <div class="tree-node tree-node-current has-tooltip" style="--indent: {padres.length}" data-tooltip="{finfunData.desc_finfun}">
                <span class="tree-dot"></span>
                <span class="tree-code">{finfunData.finfun}</span>
                <span class="tree-name">{finfunData.desc_finfun}</span>
              </div>

              {#if hijos.length > 0}
                <div class="tree-children" style="--indent: {padres.length + 1}">
                  {#each hijos as hijo}
                    <a href="/finfun/{hijo.finfun}" class="tree-node tree-node-child has-tooltip" data-tooltip="{hijo.desc_finfun}">
                      <span class="tree-dot"></span>
                      <span class="tree-code">{hijo.finfun}</span>
                      <span class="tree-name">{hijo.desc_finfun}</span>
                    </a>
                  {/each}
                </div>
              {/if}
            </div>
          </div>

          <div class="context-separator"></div>
        {/if}

        <!-- Explorar -->
        <div class="context-section">
          <div class="explore-header">
            <h3 class="context-subtitle">Explorar visualizaciones</h3>
            <span class="explore-count">7 →</span>
          </div>
          <div class="explore-scroll">
            <div class="explore-card" onclick={() => vista = 'comparar'} role="button" tabindex="0">
              <span class="explore-title">Comparar dos entidades</span>
              <span class="explore-desc">¿Quién gasta más en {finfunData.desc_finfun?.toLowerCase()}?</span>
            </div>
            <a href="/finfun/{finfunData.finfun}/entidades" class="explore-card">
              <span class="explore-title">Ranking</span>
              <span class="explore-desc">{nEntidades} entidades que gastan en {finfunData.desc_finfun?.toLowerCase()}</span>
            </a>
            <a href="/ubicacion?clas=finfun&codigo={finfunData.finfun}" class="explore-card">
              <span class="explore-title">Mapa</span>
              <span class="explore-desc">Dónde se concentra el gasto en {finfunData.desc_finfun?.toLowerCase()}</span>
            </a>
            <a href="/clasificadores/funcional?modo=mapa" class="explore-card">
              <span class="explore-title">Peso relativo</span>
              <span class="explore-desc">Cuánto pesa {finfunData.desc_finfun?.toLowerCase()} respecto a otros gastos</span>
            </a>
            <a href="/clasificadores/funcional?modo=comparar{selectedEntity ? `&entidad=${selectedEntity.entidad}` : ''}{activeYear ? `&gestion=${activeYear}` : ''}" class="explore-card">
              <span class="explore-title">Comparar funciones</span>
              <span class="explore-desc">Todas las funciones entre dos momentos o entidades</span>
            </a>
            <a href="/clasificadores/funcional" class="explore-card">
              <span class="explore-title">Clasificador</span>
              <span class="explore-desc">Ver todas las finalidades y funciones y navegar entre ellas</span>
            </a>
          </div>
        </div>

        <div class="context-separator"></div>

        <!-- Comparabilidad -->
        <div class="context-section">
          <h3 class="context-subtitle">Comparabilidad</h3>
          <div class="vigencia-compact">
            <div class="vigencia-status-icon vigencia-full">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
                <polyline points="22 4 12 14.01 9 11.01"/>
              </svg>
            </div>
            <div class="vigencia-text">
              <span class="vigencia-main">Comparable en todo el período</span>
            </div>
          </div>
        </div>

        <div class="context-separator"></div>

        <!-- Definición -->
        <div class="context-section">
          <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 esta función ha cambiado {variaciones.length} veces en el período</p>
          {/if}
          <button class="def-link" onclick={() => showDefinicionesModal = true}>
            <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"/>
            </svg>
            {#if variaciones.length <= 1}
              Ver definición
            {:else}
              Ver variaciones
            {/if}
          </button>
        </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>
    </aside>

    <!-- Main -->
    <main class="dashboard-main">
      <div class="chart-protagonista">
        <!-- Header -->
        <div class="chart-top-row">
          <div class="main-title-pills">
            <span class="pill pill-nivel">{nivelLabel}</span>
            <span class="pill pill-codigo">{finfunData.finfun}</span>
          </div>
        </div>

        <h2 class="main-title-name">{finfunData.desc_finfun}</h2>

        <div class="chart-controls">
          <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 class="chart-header">
          <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">· {displayPeriodo}</span>
          </span>
        </div>

        {#if loading}
          <div class="chart-loading" style="flex: 1; min-height: 100px;">
            <span>Cargando...</span>
          </div>
        {:else if gastoPerCapita.length === 0 && selectedEntity}
          <div class="chart-no-data">
            <p>Esta entidad no tiene registros en {finfunData.desc_finfun?.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}
          <div class="chart-flex-wrapper">
            <BarChart data={gastoPerCapita} bind:hoveredYear bind:lockedYear height={200} fill={true} />
          </div>
        {/if}

        <!-- KPIs -->
        <div class="kpis">
          <div class="kpi">
            <span class="kpi-value">{formatMontoLargo(Math.round($twMonto))}</span>
            <span class="kpi-label">{displayMontoLabel}</span>
          </div>
          <div class="kpi">
            <span class="kpi-value">{formatPerCapita($twPerCapita)} Bs.</span>
            <span class="kpi-label">{displayPerCapitaLabel}</span>
          </div>
          <div class="kpi">
            <span class="kpi-value">{$twPorcentaje.toLocaleString('es-BO', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}%</span>
            <span class="kpi-label">{displayPorcentajeLabel}</span>
          </div>
          <div class="kpi">
            <span class="kpi-value">{displayRanking}</span>
            <span class="kpi-label">{displayRankingLabel}</span>
          </div>
        </div>
      </div>

      {#if !selectedEntity && displayTopEntidades.length > 0}
        <div class="ranking-section">
          <div class="ranking-header">
            <h3 class="ranking-title">Concentración del gasto</h3>
            <div class="ranking-summary">
              <span class="ranking-summary-pct">{($twTop1 + $twTop2 + $twTop3).toFixed(1)}%</span>
              <span class="ranking-summary-text">de {finfunData.desc_finfun?.toLowerCase()} lo gastan estas 3 entidades{activeYear ? ` en ${activeYear}` : ''}</span>
            </div>
          </div>
          <div class="ranking-cards">
            {#each displayTopEntidades as ent, i}
              {@const pct = i === 0 ? $twTop1 : i === 1 ? $twTop2 : $twTop3}
              <button class="ranking-card ranking-card-link" onclick={() => {
                const match = entidades.find(e => e.entidad === ent.entidad);
                selectedEntity = match || { entidad: ent.entidad, entidad_desc: ent.nombre };
              }}>
                <span class="ranking-position">#{i + 1}</span>
                <span class="ranking-name">{ent.nombre}</span>
                <span class="ranking-pct">{pct.toFixed(1)}%</span>
                <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}
          </div>
        </div>
      {/if}
    </main>
  </div>

  <!-- Modal de definiciones -->
  {#if showDefinicionesModal}
    <div class="modal-overlay" onclick={() => showDefinicionesModal = false}>
      <div class="modal-content" onclick={(e) => e.stopPropagation()}>
        <div class="modal-header">
          <h3>Definiciones de "{finfunData.desc_finfun}"</h3>
          <button class="modal-close" onclick={() => showDefinicionesModal = false}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
            </svg>
          </button>
        </div>
        <div class="modal-body">
          {#if variaciones.length > 0}
            {#each variaciones as v, i}
              <div class="def-item" class:def-current={i === 0}>
                <div class="def-header">
                  <span class="def-period">{v.rango}</span>
                  {#if i === 0}
                    <span class="def-badge">Vigente</span>
                  {/if}
                </div>
                <p class="def-text">{v.texto}</p>
              </div>
            {/each}
          {:else}
            <div class="def-item def-current">
              <div class="def-header">
                <span class="def-period">{finfunData.gestiones || ''}</span>
                <span class="def-badge">Vigente</span>
              </div>
              <p class="def-text">{finfunData.desc_finfun}</p>
            </div>
          {/if}
        </div>
      </div>
    </div>
  {/if}

  {:else}
    <!-- VISTA COMPARAR -->
    <main class="main-comparar">
      <div class="chart-card-comparar">
        <div class="chart-top-row">
          <div class="main-title-pills">
            <span class="pill pill-nivel">{nivelLabel}</span>
            <span class="pill pill-codigo">{finfunData.finfun}</span>
          </div>
          <VistaToggle bind:vista />
        </div>

        <h2 class="main-title-name">{finfunData.desc_finfun}</h2>

        <div class="comparador-selectors">
          <div class="selector-group comparador-dropdown-container">
            <span class="selector-dot" style="background: {colorA}"></span>
            <div class="relative" style="flex: 1;">
              <button class="selector-btn comparador-btn" onclick={() => { dropdownAOpen = !dropdownAOpen; dropdownBOpen = false; }}>
                <span class="truncate">{entidadCompararA ? entidadCompararA.entidad_desc : 'Seleccionar entidad'}</span>
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
              </button>
              {#if dropdownAOpen}
                <div class="dropdown-panel comparador-panel">
                  <div class="dropdown-search"><input type="text" bind:value={searchA} placeholder="Buscar entidad..." class="search-input" /></div>
                  <div class="dropdown-list" onscroll={(e) => handleEntityScroll(e, 'A')}>
                    {#each filteredEntidadesA as entity}
                      <button class="dropdown-item" class:active={entidadCompararA?.entidad === entity.entidad} disabled={entidadCompararB?.entidad === entity.entidad} onclick={() => selectEntidadA(entity)}>
                        <span class="truncate">{entity.entidad_desc}</span>
                      </button>
                    {/each}
                  </div>
                </div>
              {/if}
            </div>
          </div>

          <span class="vs">vs</span>

          <div class="selector-group comparador-dropdown-container">
            <span class="selector-dot" style="background: {colorB}"></span>
            <div class="relative" style="flex: 1;">
              <button class="selector-btn comparador-btn" onclick={() => { dropdownBOpen = !dropdownBOpen; dropdownAOpen = false; }}>
                <span class="truncate">{entidadCompararB ? entidadCompararB.entidad_desc : 'Seleccionar entidad'}</span>
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
              </button>
              {#if dropdownBOpen}
                <div class="dropdown-panel comparador-panel">
                  <div class="dropdown-search"><input type="text" bind:value={searchB} placeholder="Buscar entidad..." class="search-input" /></div>
                  <div class="dropdown-list" onscroll={(e) => handleEntityScroll(e, 'B')}>
                    {#each filteredEntidadesB as entity}
                      <button class="dropdown-item" class:active={entidadCompararB?.entidad === entity.entidad} disabled={entidadCompararA?.entidad === entity.entidad} onclick={() => selectEntidadB(entity)}>
                        <span class="truncate">{entity.entidad_desc}</span>
                      </button>
                    {/each}
                  </div>
                </div>
              {/if}
            </div>
          </div>
        </div>

        {#if isDefaultSelection && entidadCompararA && entidadCompararB && !alertDefaultDismissed}
          <div class="comparador-hint">
            <span>Mostrando las dos entidades con mayor gasto. Puedes cambiar la selección arriba.</span>
            <button class="alert-close" onclick={() => alertDefaultDismissed = true}>✕</button>
          </div>
        {/if}

        {#if tienenRangosDiferentes && entidadCompararA && entidadCompararB && !loadingComparacion && !alertRangosDismissed}
          <div class="comparador-warning">
            <span>Rangos diferentes. Solo se comparan {añosComunesTotales.length} años en común.</span>
            <button class="alert-close" onclick={() => alertRangosDismissed = true}>✕</button>
          </div>
        {/if}

        {#if loadingComparacion}
          <div class="comparador-placeholder"><Spinner size={48} color="var(--theme-texto)" /></div>
        {:else if !entidadCompararA && !entidadCompararB}
          <div class="comparador-placeholder"><p>Selecciona dos entidades para comparar</p></div>
        {:else if añosComparacion.length === 0}
          <div class="comparador-placeholder"><p>No hay datos disponibles para comparar</p></div>
        {:else}
          <div class="chart-header">
            <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 class="chart-comparar-wrapper">
            <div class="chart-comparar-inner">
              <span class="y-label-comparar" style="bottom: 100%">Bs {formatMonto(Math.round(maxComparacion))}</span>
              <span class="y-label-comparar" style="bottom: 50%">Bs {formatMonto(Math.round(maxComparacion / 2))}</span>
              <span class="y-label-comparar" style="bottom: 0%">Bs 0</span>
              <div class="grid-line-comparar" style="bottom: 100%"></div>
              <div class="grid-line-comparar" style="bottom: 50%"></div>
              <div class="grid-line-comparar" style="bottom: 0%"></div>
              <div class="bars-comparar" onmouseleave={() => hoveredYearComparar = null} role="group">
                {#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="bars-pair">
                      <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>
                {/each}
              </div>
            </div>
            <div class="x-axis-comparar">
              {#each añosComparacion as año, i}
                {@const show = i === 0 || i === añosComparacion.length - 1 || hoveredYearComparar === año}
                <span class="x-label-comparar" class:visible={show}>{año}</span>
              {/each}
            </div>
          </div>

          <div class="chart-legend">
            {#if entidadCompararA}<span class="legend-item"><span class="legend-dot" style="background: {colorA}"></span>{entidadCompararA.entidad_desc}</span>{/if}
            {#if entidadCompararB}<span class="legend-item"><span class="legend-dot" style="background: {colorB}"></span>{entidadCompararB.entidad_desc}</span>{/if}
          </div>
        {/if}
      </div>

      {#if soloUnaEntidad}
        <div class="comparador-hint comparador-hint-select">
          <span>Selecciona la segunda entidad para ver la comparación completa.</span>
        </div>
      {/if}

      {#if entidadCompararA && entidadCompararB}
        <div class="kpis-card-comparar">
          <div class="tabla-header">
            <span class="tabla-label"></span>
            <span class="tabla-val tabla-entidad" style="color: {colorA}">{entidadCompararA.entidad_desc}</span>
            <span class="tabla-val tabla-entidad" style="color: {colorB}">{entidadCompararB.entidad_desc}</span>
          </div>
          <div class="tabla-row">
            <span class="tabla-label">Gasto</span>
            <span class="tabla-val">Bs {formatMontoLargo(Math.round($twMontoA))}</span>
            <span class="tabla-val">Bs {formatMontoLargo(Math.round($twMontoB))}</span>
          </div>
          <div class="tabla-row">
            <span class="tabla-label">Per cápita</span>
            <span class="tabla-val">Bs {formatPerCapita($twPerCapitaA)}</span>
            <span class="tabla-val">Bs {formatPerCapita($twPerCapitaB)}</span>
          </div>
          <div class="tabla-row">
            <span class="tabla-label">Peso</span>
            <span class="tabla-val">{displayPropA.toLocaleString('es-BO', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}%</span>
            <span class="tabla-val">{displayPropB.toLocaleString('es-BO', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}%</span>
          </div>
          <div class="tabla-row">
            <span class="tabla-label">Ranking</span>
            <span class="tabla-val">#{displayRankingA} de {displayNEntidadesA}</span>
            <span class="tabla-val">#{displayRankingB} de {displayNEntidadesB}</span>
          </div>
        </div>
      {/if}
    </main>
  {/if}
</div>

<style>
  /* ═══════════════════════════════════════════════════════════════
     PAGE
     ═══════════════════════════════════════════════════════════════ */
  .page {
    height: 100dvh;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background: var(--theme-body);
    padding-top: 60px;
    box-sizing: border-box;
    color: var(--theme-titulo);
    font-family: var(--font-sans), -apple-system, sans-serif;
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  .page.mounted { opacity: 1; }

  :global(html:not(.dark)) .page {
    background: #f5f5f7;
  }

  /* ═══════════════════════════════════════════════════════════════
     NAV
     ═══════════════════════════════════════════════════════════════ */
  .page-nav {
    padding: 2rem 2rem 0.5rem;
    max-width: 1400px;
    margin: 0 auto;
  }

  .back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: 'DM Mono', monospace;
    font-size: 0.6875rem;
    color: var(--theme-texto);
    text-decoration: none;
    transition: color 0.2s;
  }
  .back-link:hover { color: var(--theme-accent); }

  /* ═══════════════════════════════════════════════════════════════
     LAYOUT
     ═══════════════════════════════════════════════════════════════ */
  .dashboard-layout {
    display: grid;
    grid-template-columns: minmax(200px, 30%) 1fr;
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem 2rem 2rem;
    height: 100%;
    overflow: hidden;
  }

  /* ═══════════════════════════════════════════════════════════════
     SIDEBAR
     ═══════════════════════════════════════════════════════════════ */
  .dashboard-context {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .context-card {
    background: var(--theme-surface);
    border-radius: 12px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .context-card::-webkit-scrollbar { width: 4px; }
  .context-card::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.3);
    border-radius: 2px;
  }

  .context-main-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-titulo);
    margin: 0;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.5;
  }

  .context-subtitle {
    font-family: 'Qanelas', var(--font-sans);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--theme-titulo);
    margin: 0;
  }

  .context-hint {
    font-size: 0.75rem;
    color: var(--theme-texto);
    opacity: 0.7;
    margin: 0;
    line-height: 1.4;
  }

  .context-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .context-separator {
    border-top: 1px solid var(--theme-borde);
    margin: 0.25rem 0;
  }

  /* ═══════════════════════════════════════════════════════════════
     INLINE SEARCH
     ═══════════════════════════════════════════════════════════════ */
  .inline-search {
    position: relative;
  }

  .inline-search-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--theme-borde);
    border-radius: 8px;
    background: var(--theme-body);
    color: var(--theme-titulo);
    font-size: 0.8125rem;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
  }
  .inline-search-input:focus {
    border-color: var(--theme-accent);
  }
  .inline-search-input::placeholder {
    color: var(--theme-texto);
    opacity: 0.5;
  }

  .inline-search-loading {
    font-size: 0.6875rem;
    color: var(--theme-texto);
    opacity: 0.5;
    padding: 0.25rem 0;
  }

  .inline-search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--theme-surface);
    border: 1px solid var(--theme-borde);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    max-height: 240px;
    overflow-y: auto;
    z-index: 100;
  }

  .inline-search-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    color: var(--theme-titulo);
    font-size: 0.8125rem;
    transition: background 0.15s;
  }
  .inline-search-item:hover {
    background: var(--theme-surface-hover, rgba(201, 167, 81, 0.08));
  }

  .inline-search-code {
    font-family: 'DM Mono', monospace;
    font-size: 0.6875rem;
    color: var(--theme-texto);
    opacity: 0.6;
    min-width: 2.5rem;
  }

  .inline-search-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ═══════════════════════════════════════════════════════════════
     TREE
     ═══════════════════════════════════════════════════════════════ */
  .tree {
    font-size: 0.75rem;
    line-height: 1.6;
  }

  .tree-node {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.5rem;
    margin-left: calc(var(--indent, 0) * 1rem);
    border-left: 2px solid transparent;
    border-radius: 0 6px 6px 0;
    text-decoration: none;
    color: var(--theme-texto);
    transition: all 0.15s;
  }
  .tree-node:hover { color: var(--theme-accent); }

  .tree-node-current {
    color: var(--theme-titulo);
    font-weight: 600;
    border-left-color: var(--theme-accent);
    background: rgba(201, 167, 81, 0.1);
  }

  .tree-children {
    margin-left: calc(var(--indent, 0) * 1rem);
  }

  .tree-node-child {
    padding-left: 0.75rem;
  }

  .tree-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    opacity: 0.4;
  }

  .tree-code {
    font-family: 'DM Mono', monospace;
    font-size: 0.6875rem;
    min-width: 2.5rem;
    opacity: 0.6;
  }

  .tree-name {
    font-size: 0.6875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ═══════════════════════════════════════════════════════════════
     EXPLORE
     ═══════════════════════════════════════════════════════════════ */
  .explore-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .explore-count {
    font-family: 'DM Mono', monospace;
    font-size: 0.625rem;
    color: var(--theme-accent);
    opacity: 0.7;
    animation: nudgeRight 1.5s ease-in-out infinite;
  }

  @keyframes nudgeRight {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(3px); }
  }

  .explore-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .explore-scroll::-webkit-scrollbar { display: none; }

  .explore-scroll {
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
  }

  .explore-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0.375rem 0.5rem;
    width: 120px;
    height: 95px;
    border-radius: 8px;
    background: var(--theme-borde);
    text-decoration: none;
    color: var(--theme-texto);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    overflow: hidden;
  }
  .explore-card:hover {
    background: rgba(201, 167, 81, 0.15);
    color: var(--theme-accent);
  }
  .explore-card:hover .explore-watermark {
    opacity: 0.18;
    color: var(--theme-accent);
  }
  .explore-card:hover .explore-title {
    color: var(--theme-accent);
  }

  .explore-watermark {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 44px;
    height: 44px;
    opacity: 0.15;
    pointer-events: none;
    color: var(--theme-accent, #C9A751);
  }

  .explore-title {
    position: relative;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--theme-titulo);
    z-index: 1;
  }

  .explore-desc {
    position: relative;
    font-size: 0.625rem;
    line-height: 1.35;
    opacity: 0.6;
    margin-top: 3px;
    z-index: 1;
  }

  .explore-card-disabled {
    opacity: 0.3;
    pointer-events: none;
  }

  /* ═══════════════════════════════════════════════════════════════
     VIGENCIA
     ═══════════════════════════════════════════════════════════════ */
  .vigencia-compact {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .vigencia-status-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .vigencia-status-icon.vigencia-full {
    background: rgba(74, 158, 107, 0.15);
    color: #4A9E6B;
  }

  .vigencia-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  .vigencia-main {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--theme-titulo);
  }

  .vigencia-sub {
    font-size: 0.625rem;
    color: var(--theme-texto);
    opacity: 0.5;
  }

  /* ═══════════════════════════════════════════════════════════════
     DEFINICIÓN
     ═══════════════════════════════════════════════════════════════ */
  .def-link {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--theme-accent, #C9A751);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: opacity 0.15s;
  }
  .def-link:hover { opacity: 0.7; }
  .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
     ═══════════════════════════════════════════════════════════════ */
  .dashboard-main {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-height: 0;
    overflow: hidden;
  }

  .chart-protagonista {
    background: var(--theme-surface);
    border-radius: 12px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 2;
    overflow: hidden;
  }

  .ranking-section {
    background: var(--theme-surface);
    border-radius: 12px;
    padding: 0.75rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* ═══════════════════════════════════════════════════════════════
     CHART & KPIs
     ═══════════════════════════════════════════════════════════════ */
  .chart-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.375rem;
  }

  .main-title-pills {
    display: flex;
    gap: 0.375rem;
  }

  .pill {
    font-family: 'DM Mono', monospace;
    font-size: 0.625rem;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    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);
  }

  .main-title-name {
    font-family: 'DM Serif Display', serif;
    font-size: 2rem;
    font-weight: 400;
    margin: 0 0 0.5rem;
    line-height: 1.15;
    color: var(--theme-titulo);
  }

  .chart-controls {
    margin-bottom: 0.5rem;
  }

  .chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
  }

  .chart-title {
    font-family: 'DM Mono', monospace;
    font-size: 0.6875rem;
    color: var(--theme-texto);
    opacity: 0.7;
  }

  .chart-period {
    opacity: 0.5;
  }

  .metrica-toggle {
    font-family: 'DM Mono', monospace;
    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;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }

  .metrica-toggle:hover {
    background: rgba(201, 167, 81, 0.12);
    border-color: rgba(201, 167, 81, 0.3);
    color: var(--theme-accent);
  }

  .chart-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-texto);
    opacity: 0.5;
  }

  .chart-flex-wrapper {
    flex: 1;
    min-height: 0;
  }

  .kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--theme-borde);
  }

  .kpi {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    text-align: center;
  }

  .kpi-value {
    font-family: 'Qanelas', var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-titulo);
  }

  .kpi-label {
    font-size: 0.625rem;
    color: var(--theme-texto);
    opacity: 0.5;
    line-height: 1.35;
  }

  /* ═══════════════════════════════════════════════════════════════
     RANKING
     ═══════════════════════════════════════════════════════════════ */
  .ranking-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-titulo);
    margin: 0 0 0.25rem;
  }

  .ranking-desc {
    font-size: 0.6875rem;
    color: var(--theme-texto);
    opacity: 0.5;
    margin: 0 0 0.5rem;
  }

  .ranking-cards {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .ranking-card {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.625rem;
    border-radius: 8px;
    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 {
    font-family: 'DM Mono', monospace;
    font-size: 0.6875rem;
    color: var(--theme-accent);
    font-weight: 600;
    min-width: 1.5rem;
  }

  .ranking-name {
    font-size: 0.8125rem;
    color: var(--theme-titulo);
    border-bottom: 1px dotted rgba(128, 128, 128, 0.3);
  }

  .ranking-pct {
    font-family: 'DM Mono', monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--theme-titulo);
    opacity: 0.7;
  }

  /* ═══════════════════════════════════════════════════════════════
     MODAL
     ═══════════════════════════════════════════════════════════════ */
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
  }

  .modal-content {
    background: var(--theme-surface);
    border-radius: 16px;
    max-width: 560px;
    width: 100%;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
  }

  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--theme-borde);
  }

  .modal-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-titulo);
    margin: 0;
  }

  .modal-close {
    color: var(--theme-texto);
    background: transparent;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.2s;
  }

  .modal-close:hover {
    background: var(--theme-borde);
  }

  .modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .def-item {
    padding: 1rem;
    background: var(--theme-body);
    border-radius: 10px;
    border-left: 3px solid var(--theme-borde);
  }

  .def-current {
    border-left-color: #6B9FD4;
  }

  .def-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .def-period {
    font-family: 'DM Mono', monospace;
    font-size: 0.75rem;
    font-weight: 500;
    color: #6B9FD4;
  }

  .def-badge {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: white;
    background: #4A9E6B;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
  }

  .def-text {
    font-size: 0.875rem;
    color: var(--theme-texto);
    line-height: 1.6;
    margin: 0;
  }

  :global(html.dark) .def-current {
    border-left-color: var(--theme-accent);
  }

  :global(html.dark) .def-period {
    color: var(--theme-accent);
  }

  /* ═══════════════════════════════════════════════════════════════
     MOBILE SIDEBAR
     ═══════════════════════════════════════════════════════════════ */
  .mobile-sidebar-toggle {
    display: none;
  }

  @media (max-width: 900px) {
    .dashboard-layout {
      grid-template-columns: 1fr;
      gap: 0.5rem;
      height: auto;
      overflow: visible;
      padding: 1.5rem 1rem 2rem;
      align-content: center;
      min-height: calc(100vh - 4rem);
    }

    .dashboard-main {
      overflow: visible;
    }

    .chart-protagonista {
      flex: none;
    }

    .ranking-section {
      flex: none;
    }

    .mobile-sidebar-toggle {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.625rem 1rem;
      background: var(--theme-surface);
      border: 1px solid var(--theme-borde);
      border-radius: 10px;
      color: var(--theme-titulo);
      font-family: 'Qanelas', var(--font-sans);
      font-size: 0.8125rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
      margin-bottom: 0.25rem;
      width: 100%;
    }

    .mobile-sidebar-toggle:hover {
      background: var(--theme-surface-hover);
    }

    .mobile-sidebar-toggle svg {
      color: var(--theme-texto);
      opacity: 0.6;
    }

    .dashboard-context .context-card {
      display: none;
    }

    .dashboard-context.mobile-open .context-card {
      display: flex;
      animation: slideDown 0.25s ease;
    }

    @keyframes slideDown {
      from { opacity: 0; transform: translateY(-8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .context-card {
      height: auto;
      overflow-y: visible;
    }

    .page-nav {
      padding: 0.75rem 1rem;
    }

    .kpis {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 480px) {
    .dashboard-layout {
      padding: 0.5rem;
    }

    .page-nav {
      padding: 0.5rem;
    }

    .chart-protagonista,
    .ranking-section,
    .context-card {
      padding: 0.5rem;
      border-radius: 8px;
    }

    .main-title-name {
      font-size: 1.375rem;
    }

    .chart-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.25rem;
    }

    .kpis {
      grid-template-columns: repeat(2, 1fr);
      gap: 0.375rem;
    }

    .kpi-value {
      font-size: 0.8125rem;
    }

    .kpi-label {
      font-size: 0.5625rem;
    }

    .explore-scroll {
      gap: 6px;
    }

    .explore-card {
      width: 100px;
      height: 80px;
    }

    .explore-title {
      font-size: 0.625rem;
    }

    .explore-desc {
      font-size: 0.5rem;
    }

    .ranking-title {
      font-size: 0.875rem;
    }

    .ranking-name {
      font-size: 0.6875rem;
    }

    .ranking-pct {
      font-size: 0.75rem;
    }

    .modal-content {
      margin: 0.5rem;
      max-height: 90vh;
    }

    .tree-name {
      max-width: 150px;
    }
  }

  /* ═══════════════════════════════════════════════════════════════
     DARK MODE
     ═══════════════════════════════════════════════════════════════ */
  :global(html.dark) .context-hint {
    color: rgba(255, 255, 255, 0.5);
  }

  :global(html.dark) .def-link {
    color: var(--theme-accent, #C9A751);
  }

  /* ═══════════════════════════════════════════════════════════════
     COMPARAR VIEW
     ═══════════════════════════════════════════════════════════════ */
  .main-comparar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 2rem 2rem;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    height: 100%;
    overflow: hidden;
  }

  .chart-card-comparar {
    background: var(--theme-surface);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  .comparador-selectors {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
  }

  .selector-group { flex: 1; display: flex; align-items: center; gap: 0.5rem; }
  .selector-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
  .vs { font-family: 'DM Mono', monospace; font-size: 0.75rem; color: var(--theme-texto); flex-shrink: 0; }
  .relative { position: relative; }
  .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .selector-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: var(--theme-body);
    border: 1px solid var(--theme-borde);
    border-radius: 8px;
    font-size: 0.8125rem;
    color: var(--theme-titulo);
    cursor: pointer;
    transition: border-color 0.2s;
  }
  .selector-btn:hover { border-color: var(--theme-accent); }
  .comparador-btn { width: 100%; justify-content: space-between; }
  .comparador-dropdown-container { position: relative; }

  .dropdown-panel.comparador-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    min-width: 280px;
    background: var(--theme-surface);
    border: 1px solid var(--theme-borde);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 100;
    overflow: hidden;
  }

  .dropdown-search { padding: 0.5rem; border-bottom: 1px solid var(--theme-borde); }
  .search-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--theme-borde);
    border-radius: 6px;
    background: var(--theme-body);
    color: var(--theme-titulo);
    font-size: 0.8125rem;
    outline: none;
  }
  .search-input:focus { border-color: var(--theme-accent); }

  .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: none;
    background: transparent;
    color: var(--theme-titulo);
    font-size: 0.8125rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
  }
  .dropdown-item:hover { background: var(--theme-surface-hover); }
  .dropdown-item.active { background: rgba(201, 167, 81, 0.1); color: var(--theme-accent); }
  .dropdown-item:disabled { opacity: 0.4; cursor: not-allowed; }
  .dropdown-list { max-height: 240px; overflow-y: auto; }
  .entity-code { font-family: 'DM Mono', monospace; font-size: 0.6875rem; color: var(--theme-texto); min-width: 2rem; }

  .comparador-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    border: 1px dashed var(--theme-borde);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
  }
  .comparador-placeholder p { color: var(--theme-texto); font-size: 0.875rem; margin: 0; }

  .comparador-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(107, 159, 212, 0.1);
    border-radius: 8px;
    font-size: 0.8125rem;
    color: #6B9FD4;
  }
  .comparador-hint span { flex: 1; }
  .comparador-hint-select { margin-top: 0.75rem; }

  .comparador-warning {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(230, 176, 75, 0.1);
    border-radius: 8px;
    font-size: 0.8125rem;
    color: #C9A751;
  }
  .comparador-warning span { flex: 1; }

  .alert-close {
    flex-shrink: 0;
    padding: 0.25rem;
    border: none;
    background: transparent;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    border-radius: 4px;
  }
  .alert-close:hover { opacity: 1; }

  .chart-comparar-wrapper {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 180px;
  }

  .chart-comparar-inner {
    position: absolute;
    top: 10px;
    bottom: 30px;
    left: 50px;
    right: 10px;
  }

  .y-label-comparar {
    position: absolute;
    left: -50px;
    width: 45px;
    text-align: right;
    transform: translateY(50%);
    font-family: 'DM Mono', monospace;
    font-size: 0.6875rem;
    color: var(--theme-texto);
    white-space: nowrap;
  }

  .grid-line-comparar {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 0.5px dotted var(--theme-texto);
    opacity: 0.15;
  }

  .bars-comparar {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    gap: 3px;
  }

  .bar-group-comparar {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    cursor: pointer;
  }

  .bars-pair {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 100%;
    width: 100%;
    justify-content: center;
  }

  .bar-comparar {
    flex: 1;
    max-width: 24px;
    border-radius: 3px 3px 0 0;
    min-height: 2px;
    transition: opacity 0.15s;
  }

  .bars-comparar:hover .bar-comparar { opacity: 0.35; }
  .bar-group-comparar.active .bar-comparar { opacity: 1; }

  .x-axis-comparar {
    position: absolute;
    bottom: 0;
    left: 50px;
    right: 10px;
    height: 30px;
    display: flex;
    align-items: center;
  }

  .x-label-comparar {
    flex: 1;
    text-align: center;
    font-family: 'DM Mono', monospace;
    font-size: 0.6875rem;
    color: var(--theme-texto);
    opacity: 0;
    transition: opacity 0.2s;
  }
  .x-label-comparar.visible { opacity: 1; }

  .chart-legend {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
  }

  .legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--theme-texto);
  }

  .legend-dot { width: 10px; height: 10px; border-radius: 3px; }

  .kpis-card-comparar {
    background: var(--theme-surface);
    border-radius: 12px;
    padding: 0.75rem 1.25rem;
  }

  .tabla-header {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.2fr;
    gap: 0.75rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--theme-borde);
    margin-bottom: 0.25rem;
  }

  .tabla-header .tabla-val {
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
  }

  .tabla-entidad {
    font-size: 0.6875rem;
    line-height: 1.3;
    word-break: break-word;
  }

  .tabla-row {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.2fr;
    gap: 0.75rem;
    padding: 0.1875rem 0;
  }

  .tabla-label {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--theme-texto);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .tabla-val {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-titulo);
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  @media (max-width: 640px) {
    .main-comparar { padding: 0.75rem; }
    .chart-card-comparar, .kpis-card-comparar { padding: 1rem; }
    .comparador-selectors { flex-direction: column; gap: 0.75rem; }
    .vs { display: none; }
  }
</style>