<script>
  import { onMount, tick } from 'svelte';
  import { marked } from 'marked';

  // Search state
  let searchQuery = $state('');
  let searchResults = $state([]);
  let showSearchResults = $state(false);
  let selectedSearchIndex = $state(-1);
  let searchInputRef = $state(null);
  let searchableItems = $state([]);
  let isMac = $state(false);

  // Markdown content loaded from static file
  let MARKDOWN_CONTENT = $state('');

  // Placeholder for initial content
  const INITIAL_CONTENT = `# Introducción

El presupuesto público se presenta en dos distribuciones de datos: una histórica y otra en tiempo real.

La distribución histórica cubre cada gasto e ingreso registrado por el Estado entre 2005 y 2025. La distribución en tiempo real, en cambio, muestra el estado actual del presupuesto durante la gestión en curso y permite observar las modificaciones recientes en gastos e ingresos.

Ambas distribuciones contienen dos bases principales: una de gastos y otra de ingresos. A continuación describimos la forma de estas bases, la lógica de sus registros y el significado de sus principales campos.

# La forma

Cada distribución está compuesta por dos bases: gastos e ingresos. La base de gastos registra el destino de los recursos públicos, mientras que la base de ingresos registra su origen. En conjunto, ambas bases cubren información de todas las entidades del Estado entre 2005 y 2025.

Cada registro de gasto o ingreso contiene dos tipos de información: atributos que permiten identificarlo y montos expresados en bolivianos corrientes, es decir, al valor del año en que fueron registrados.

En la base de **gastos**, cada registro se identifica mediante los siguientes atributos:

- **Clasificador institucional:** la entidad pública y dirección administrativa que registra el gasto.
- **Categoría programática:** el programa, proyecto o actividad al que se destina el recurso.
- **Objeto de gasto:** el tipo de gasto según un clasificador estandarizado.
- **Financiamiento:** la fuente de los recursos utilizados.

En la base de **ingresos**, los registros se identifican mediante:

- **Clasificador institucional:** la entidad pública que registra el ingreso.
- **Rubro de ingreso:** el tipo de ingreso según un clasificador estandarizado.
- **Financiamiento:** la fuente de los recursos.

Cada registro incluye además cuatro montos que describen distintas etapas de la ejecución presupuestaria:

- **Inicial:** el monto aprobado en el presupuesto al inicio de la gestión.
- **Vigente:** el presupuesto después de las modificaciones realizadas durante la gestión.
- **Devengado:** el monto comprometido para ejecución.
- **Ejecutado:** el monto efectivamente pagado o percibido.

Cuando la información está disponible, los registros de gasto también incluyen atributos adicionales que permiten describir con mayor detalle el destino de los recursos, como la **finalidad y función del gasto**, el **sector económico** y la **ubicación geográfica**.

# El detalle

## Gastos

La base de gastos nos permite comprender el destino de los recursos públicos.

- **Quién**: entidad y dirección administrativa responsable.
- **Qué**: programas, proyectos y actividades a los que se dirigen recursos.
- **Para qué**: finalidad y función pública.
- **En qué**: objetos de gasto.
- **Con qué recursos**: fuentes de las que se toman recursos.
- **Cuánto**: montos de presupuesto y ejecución.

Los campos en esta base son los siguientes.

### Gestión

#### gestion

Año fiscal del registro presupuestario.

Tipo: Número entero de 4 dígitos.

Ejemplo: \`2005\`.

### Clasificador institucional

Información sobre qué entidad y dirección administrativa registra el gasto. Una dirección administrativa pertenece a una entidad que a su vez está posicionada dentro de una jerarquía en el aparato estatal:

\`\`\`
Sector
└─ Subsector
   └─ Área
      └─ Subárea
         └─ Entidad
            └─ Dirección Administrativa
\`\`\`

#### entidad

Código de la entidad pública a la que pertenece el registro. Cada entidad ocupa una posición en el Sector Público que puede ser descrita en una jerarquía de 4 niveles: sector, subsector, área y subárea. Para cada nivel contamos con un código, sigla y descripción. Dentro de cada entidad, el gasto es registrado en una dirección administrativa, a la que podemos describir con un código y descripción.

Tipo: Número entero de 1 a 4 dígitos.

Ejemplo: \`10\`.

#### entidad_desc_entidad

Descripción de la entidad pública.

Tipo: Texto descriptivo.

Ejemplo: \`Ministerio De Relaciones Exteriores Y Culto\`.

#### entidad_sigla_entidad

Sigla de la entidad pública.

Tipo: Texto corto (sigla).

Ejemplo: \`MIN-RREE\`.

#### entidad_sector

Código del sector al que pertenece la entidad pública.

Tipo: Número entero de 1 dígito.

Ejemplo: \`1\`.

#### entidad_subsector

Código del subsector al que pertenece la entidad pública.

Tipo: Secuencia de números enteros separados por puntos.

Ejemplo: \`1.10\`.

#### entidad_area

Código del área al que pertenece la entidad pública.

Tipo: Secuencia de números enteros separados por puntos.

Ejemplo: \`1.1.1\`.

#### entidad_subarea

Código de la subárea al que pertenece la entidad pública.

Tipo: Secuencia de números enteros separados por puntos.

Ejemplo: \`1.1.1.1.1\`.

#### entidad_desc_sector

Descripción del sector al que pertenece la entidad pública.

Tipo: Texto descriptivo.

Ejemplo: \`Sector Público\`.

#### entidad_desc_subsector

Descripción del subsector al que pertenece la entidad pública.

Tipo: Texto descriptivo.

Ejemplo: \`Sector Público No Financiero\`.

#### entidad_desc_area

Descripción del área al que pertenece la entidad pública.

Tipo: Texto descriptivo.

Ejemplo: \`Administraciones Públicas (Gob. General)\`.

#### entidad_desc_subarea

Descripción de la subárea a la que pertenece la entidad pública.

Tipo: Texto descriptivo.

Ejemplo: \`Gobiernos Autónomos Departamentales\`.

#### entidad_sigla_sector

Sigla del sector al que pertenece la entidad pública.

Tipo: Texto corto (sigla).

Ejemplo: \`SP\`.

#### entidad_sigla_subsector

Sigla del subsector al que pertenece la entidad pública.

Tipo: Texto corto (sigla).

Ejemplo: \`SPNF\`.

#### entidad_sigla_area

Sigla del área al que pertenece la entidad pública.

Tipo: Texto corto (sigla).

Ejemplo: \`GOBGEN\`.

#### entidad_sigla_subarea

Sigla de la subárea a la que pertenece la entidad pública.

Tipo: Texto corto (sigla).

Ejemplo: \`ADMCEN\`.

#### da

Código de la dirección administrativa que registra el gasto dentro de la entidad pública.

Tipo: Número entero de 1 a 2 dígitos.

Ejemplo: \`1\`.

#### desc_da

Descripción de la dirección administrativa que registra el gasto dentro de la entidad pública.

Tipo: Texto descriptivo.

Ejemplo: \`DIRECCION SUPERIOR Y ADMINISTRACION CENTRAL\`.

### Categoría programática

Información sobre los programas, proyectos y actividades a los que se dedica el gasto. Un programa puede contener múltiples proyectos o actividades.

\`\`\`
Programa
├─ Proyecto
└─ Actividad
\`\`\`

#### programa

Código del programa al que se dedica el gasto. Un programa es un conjunto de proyectos y/o actividades.

Tipo: Número entero de 1 a 3 dígitos.

Ejemplo: \`52\`.

#### proyecto

Código del proyecto de inversión pública al que se dedica el gasto. Un proyecto es un gasto limitado en el tiempo, patrimonializable y financiado total o parcialmente por el Estado que incrementa la formación de capital bruto o humano. Este código puede corresponder al número asignado en el SISIN Web por el Viceministerio de Inversión Pública y Financiamiento Externo, o un código corto asignado por la entidad pública. Cuando el código es 0, la partida corresponde a una actividad.

Tipo: Código alfanumérico.

Ejemplo: \`000100000200000\`.

#### actividad

Código de la actividad a la que se dedica el gasto. Una actividad es un conjunto de acciones, procesos y tareas contínuas que realiza una entidad para producir bienes o servicios. Cuando es 0, la partida corresponde a un proyecto.

Tipo: Número entero de 1 dígito.

Ejemplo: \`0\`.

#### desc_programa

Descripción del programa al que se dedica el gasto.

Tipo: Texto descriptivo.

Ejemplo: \`PROYECTO DE FORTALECIMIENTO INSTITUCIONAL - CONSTRUCCIÓN DEL EDIFICIO INTELIGENTE DE LA CANCILLERÍA\`.

#### desc_actividad_proyecto

Descripción del proyecto o actividad al que se dedica el gasto, según corresponda.

Tipo: Texto descriptivo.

Ejemplo: \`CONST. EDIFICIO INTELIGENTE MRE LA PAZ\`.

### Financiamiento

Información sobre el origen del financiamiento para el gasto. Consiste en una fuente de financiamiento, organismo financiador y entidad de transferencia.

Cada fuente es descrita en 2 niveles: grupo y fuente.

\`\`\`
Grupo
└─ Fuente
\`\`\`

Cada organismo incluye un código, sigla y descripción. Cada entidad de transferencia consiste en un código de entidad similar a los códigos de las entidades que realizan el gasto.

#### grupo_fuente

Código del grupo de la fuente de financiamiento.

Tipo: Número entero de 1 dígito.

Ejemplo: \`1\`.

#### fuente

Código de la fuente de financiamiento. Permite identificar el origen de los recursos internos o externos.

Tipo: Número entero de 2 dígitos.

Ejemplo: \`10\`.

#### desc_grupo_fuente

Descripción del grupo de la fuente de financiamiento.

Tipo: Texto descriptivo.

Ejemplo: \`TESORO GENERAL\`.

#### desc_fuente

Descripción de la fuente de financiamiento.

Tipo: Texto descriptivo.

Ejemplo: \`Tesoro General de la Nación\`.

#### organismo

Código del organismo financiador del gasto. Permite identificar a la entidad o fondo específico de la que se obtienen recursos.

Tipo: Número entero de 3 dígitos.

Ejemplo: \`111\`.

#### desc_organismo

Descripción del organismo financiador.

Tipo: Texto descriptivo.

Ejemplo: \`Tesoro General de la Nación\`.

#### sigla_organismo

Sigla del organismo financiador.

Tipo: Texto corto (sigla).

Ejemplo: \`TGN\`.

#### entidad_transferencia

Código de la entidad de la que se transfieren recursos de financiamiento cuando corresponde.

Tipo: Número entero de 1 a 4 dígitos.

Ejemplo: \`2351\`.

### Objeto del gasto

Información sobre la naturaleza de los insumos que una entidad requiere para generar productos. Cada objeto de gasto es descrito en 4 niveles: grupo, subgrupo, partida y subpartida, y cada nivel cuenta con un código y una descripción.

\`\`\`
Grupo
└─ Subgrupo
   └─ Partida
      └─ Subpartida
\`\`\`

#### objeto_grupo

Código del grupo del objeto de gasto.

Tipo: Número entero de 1 dígito.

Ejemplo: \`1\`.

#### objeto_subgrupo

Código del subgrupo del objeto de gasto.

Tipo: Número entero de 1 dígito.

Ejemplo: \`1\`.

#### objeto_partida

Código de la partida del objeto de gasto.

Tipo: Número entero de 1 dígito.

Ejemplo: \`2\`.

#### objeto_subpartida

Código de la subpartida del objeto de gasto.

Tipo: Número entero de 2 dígitos.

Ejemplo: \`20\`.

#### objeto_desc_grupo

Descripción del grupo del objeto de gasto.

Tipo: Texto descriptivo.

Ejemplo: \`SERVICIOS PERSONALES\`.

#### objeto_desc_subgrupo

Descripción del subgrupo del objeto de gasto.

Tipo: Texto descriptivo.

Ejemplo: \`Empleados Permanentes\`.

#### objeto_desc_partida

Descripción de la partida del objeto de gasto.

Tipo: Texto descriptivo.

Ejemplo: \`Bono de Antiguedad\`.

#### objeto_desc_subpartida

Descripción de la subpartida del objeto de gasto.

Tipo: Texto descriptivo.

Ejemplo: \`Bono de Antigûedad\`.

### Finalidad y función

Información sobre la naturaleza de los bienes y servicios que el Estado produce y presta a la población. Consiste en clasificaciones según la finalidad y función, el sector económico y la ubicación geográfica.

El clasificador de finalidad y función describe el propósito del gasto mediante su objetivo último (finalidad), que puede ser desglosado en funciones y grupos de funciones.

\`\`\`
Finalidad
└─ Grupo de Función
   └─ Función
\`\`\`

El clasificador de sector económico describe el destino de los recursos asignados. Permite relacionar cada gasto con el ámbito específico de la economía o el campo de actividad al que contribuye. Es descrito en 3 niveles: sector, subsector y actividad.

\`\`\`
Sector
└─ Subsector
   └─ Actividad
\`\`\`

El clasificador de ubicación geográfica describe el lugar donde se ejecuta el gasto. Tiene 3 niveles: departamento, provincia y municipio.

\`\`\`
Departamento
└─ Provincia
   └─ Municipio
\`\`\`

#### finfun_finalidad

Código de finalidad del gasto.

Tipo: Número entero de 1 a 2 dígitos.

Ejemplo: \`8\`.

#### finfun_grpfuncion

Código del grupo de función del gasto.

Tipo: Número entero de 1 a 2 dígitos.

Ejemplo: \`2\`.

#### finfun_funcion

Código de la función del gasto.

Tipo: Número entero de 1 dígito.

Ejemplo: \`0\`.

#### finfun_desc_finalidad

Descripción de la finalidad del gasto.

Tipo: Texto descriptivo.

Ejemplo: \`ACTIVIDADES RECREATIVAS, CULTURA Y RELIGION\`.

#### finfun_desc_grpfuncion

Descripción del grupo de la función del gasto.

Tipo: Texto descriptivo.

Ejemplo: \`Servicios culturales\`.

#### finfun_desc_funcion

Descripción de la función del gasto.

Tipo: Texto descriptivo.

Ejemplo: \`Servicios culturales\`.

#### acteco_sector

Código del sector económico donde tiene impacto directo el gasto.

Tipo: Número entero de 1 a 2 dígitos.

Ejemplo: \`9\`.

#### acteco_subsector

Código del subsector económico donde tiene impacto directo el gasto.

Tipo: Número entero de 1 dígito.

Ejemplo: \`4\`.

#### acteco_actividad

Código de la actividad económica donde tiene impacto directo el gasto.

Tipo: Número entero de 1 a 2 dígitos.

Ejemplo: \`1\`.

#### acteco_desc_sector

Descripción del sector económico donde tiene impacto directo el gasto.

Tipo: Texto descriptivo.

Ejemplo: \`EDUCACION Y CULTURA\`.

#### acteco_desc_subsector

Descripción del subsector económico donde tiene impacto directo el gasto.

Tipo: Texto descriptivo.

Ejemplo: \`CULTURA\`.

#### acteco_desc_actividad

Descripción de la actividad económica donde tiene impacto directo el gasto.

Tipo: Texto descriptivo.

Ejemplo: \`CONSTRUCCION, REFACCION Y EQUIP. DE CENTROS CULTURALES\`.

#### departamento

Código del departamento donde tiene impacto directo el gasto.

Tipo: Número entero de 1 a 2 dígitos.

Ejemplo: \`2\`.

#### provincia

Código de la provincia donde tiene impacto directo el gasto.

Tipo: Número entero de 1 a 2 dígitos.

Ejemplo: \`6\`.

#### municipio

Código del municipio donde tiene impacto directo el gasto.

Tipo: Número entero de 1 a 2 dígitos.

Ejemplo: \`1\`.

#### desc_departamento

Descripción del departamento donde tiene impacto directo el gasto.

Tipo: Texto descriptivo.

Ejemplo: \`LA PAZ\`.

#### desc_provincia

Descripción de la provincia donde tiene impacto directo el gasto.

Tipo: Texto descriptivo.

Ejemplo: \`OMASUYOS\`.

#### desc_municipio

Descripción del municipio donde tiene impacto directo el gasto.

Tipo: Texto descriptivo.

Ejemplo: \`Achacachi\`.

### Montos

Montos en bolivianos corrientes que hacen al presupuesto y ejecución de cada gasto. Incluye 2 montos de presupuesto: al inicio de la gestión y luego de modificaciones, y 2 montos de ejecución: devengado y pagado.

#### inicial

Monto programado en la gestión y aprobado con la Ley del Estado en moneda nacional.

Tipo: Monto en bolivianos corrientes con dos decimales.

Ejemplo: \`1411136\`.

#### vigente

Presupuesto de gastos que considera las modificaciones gestionadas y aprobadas durante el ejercicio fiscal, en moneda nacional.

Tipo: Monto en bolivianos corrientes con dos decimales.

Ejemplo: \`514479\`.

#### devengado

Monto de gasto reconocido contablemente en moneda nacional.

Tipo: Monto en bolivianos corrientes con dos decimales.

Ejemplo: \`493141.14\`.

#### pagado

Monto pagado en moneda nacional.

Tipo: Monto en bolivianos corrientes con dos decimales.

Ejemplo: \`493141.14\`.

## Ingresos

La tabla de ingresos nos permite comprender el origen de los recursos públicos.

- **Quién**: entidad que registra el ingreso.
- **Qué recursos**: rubros del ingreso.
- **De dónde**: fuentes de financiamiento.
- **Cuánto**: montos de presupuesto y ejecución.

### Gestión

#### gestion

Año fiscal del registro presupuestario.

Tipo: Número entero de 4 dígitos.

Ejemplo: \`2005\`.

### Clasificador institucional

Información sobre qué entidad percibe el ingreso. Una entidad ocupa una posición dentro de la jerarquía del aparato estatal:

\`\`\`
Sector
└─ Subsector
   └─ Área
      └─ Subárea
         └─ Entidad
\`\`\`

#### entidad

Código de la entidad pública a la que pertenece el registro. Cada entidad ocupa una posición en el Sector Público que puede describirse en una jerarquía de 4 niveles: sector, subsector, área y subárea. Para cada nivel se cuenta con un código, sigla y descripción.

Tipo: Número entero de 1 a 4 dígitos.

Ejemplo: \`10\`.

#### entidad_desc_entidad

Descripción de la entidad pública.

Tipo: Texto descriptivo.

Ejemplo: \`Ministerio De Relaciones Exteriores Y Culto\`.

#### entidad_sigla_entidad

Sigla de la entidad pública.

Tipo: Texto corto (sigla).

Ejemplo: \`MIN-RREE\`.

#### entidad_sector

Código del sector al que pertenece la entidad pública.

Tipo: Número entero de 1 dígito.

Ejemplo: \`1\`.

#### entidad_subsector

Código del subsector al que pertenece la entidad pública.

Tipo: Secuencia de números enteros separados por puntos.

Ejemplo: \`1.10\`.

#### entidad_area

Código del área al que pertenece la entidad pública.

Tipo: Secuencia de números enteros separados por puntos.

Ejemplo: \`1.1.1\`.

#### entidad_subarea

Código de la subárea al que pertenece la entidad pública.

Tipo: Secuencia de números enteros separados por puntos.

Ejemplo: \`1.1.1.1.1\`.

#### entidad_desc_sector

Descripción del sector al que pertenece la entidad pública.

Tipo: Texto descriptivo.

Ejemplo: \`Sector Público\`.

#### entidad_desc_subsector

Descripción del subsector al que pertenece la entidad pública.

Tipo: Texto descriptivo.

Ejemplo: \`Sector Público No Financiero\`.

#### entidad_desc_area

Descripción del área al que pertenece la entidad pública.

Tipo: Texto descriptivo.

Ejemplo: \`Administraciones Públicas (Gob. General)\`.

#### entidad_desc_subarea

Descripción de la subárea a la que pertenece la entidad pública.

Tipo: Texto descriptivo.

Ejemplo: \`Gobiernos Autónomos Departamentales\`.

#### entidad_sigla_sector

Sigla del sector al que pertenece la entidad pública.

Tipo: Texto corto (sigla).

Ejemplo: \`SP\`.

#### entidad_sigla_subsector

Sigla del subsector al que pertenece la entidad pública.

Tipo: Texto corto (sigla).

Ejemplo: \`SPNF\`.

#### entidad_sigla_area

Sigla del área al que pertenece la entidad pública.

Tipo: Texto corto (sigla).

Ejemplo: \`GOBGEN\`.

#### entidad_sigla_subarea

Sigla de la subárea a la que pertenece la entidad pública.

Tipo: Texto corto (sigla).

Ejemplo: \`ADMCEN\`.

### Financiamiento

Información sobre el origen del financiamiento del ingreso. Consiste en una fuente de financiamiento, un organismo financiador y una entidad otorgante. Cada fuente se describe en 2 niveles: grupo y fuente.

\`\`\`
Grupo
└─ Fuente
\`\`\`

Cada organismo incluye un código, sigla y descripción. La entidad otorgante se registra con un código de entidad.

#### grupo_fuente

Código del grupo de la fuente de financiamiento.

Tipo: Número entero de 1 dígito.

Ejemplo: \`2\`.

#### fuente

Código de la fuente de financiamiento. Permite identificar el origen de los recursos internos o externos.

Tipo: Número entero de 2 dígitos.

Ejemplo: \`11\`.

#### desc_grupo_fuente

Descripción del grupo de la fuente de financiamiento.

Tipo: Texto descriptivo.

Ejemplo: \`T.G.N. OTROS INGRESOS\`.

#### desc_fuente

Descripción de la fuente de financiamiento.

Tipo: Texto descriptivo.

Ejemplo: \`T.G.N. Otros Ingresos\`.

#### organismo

Código del organismo financiador del gasto. Permite identificar a la entidad o fondo específico de la que se obtienen recursos.

Tipo: Número entero de 3 dígitos.

Ejemplo: \`0\`.

#### desc_organismo

Descripción del organismo financiador.

Tipo: Texto descriptivo.

Ejemplo: \`NC\`.

#### sigla_organismo

Sigla del organismo financiador.

Tipo: Texto corto (sigla).

Ejemplo: \`NC\`.

#### entidad_otorgante

Código de la entidad de la que se transfieren recursos de financiamiento cuando corresponde.

Tipo: Número entero de 1 a 4 dígitos.

Ejemplo: \`0\`.

### Rubro del ingreso

Información sobre la naturaleza y origen de los recursos financieros que percibe la entidad. Cada rubro se describe en 4 niveles: tipo, clase, cuenta y subcuenta, y cada nivel cuenta con un código y una descripción.

\`\`\`
Tipo
└─ Clase
   └─ Cuenta
      └─ Subcuenta
\`\`\`

#### rubro_tipo

Código del tipo de rubro.

Tipo: Número entero de 2 dígitos.

Ejemplo: \`18\`.

#### rubro_clase

Código de la clase de rubro.

Tipo: Número entero de 1 dígito.

Ejemplo: \`2\`.

#### rubro_cuenta

Código de la cuenta de rubro.

Tipo: Número entero de 1 dígito.

Ejemplo: \`1\`.

#### rubro_sub_cuenta

Código de la subcuenta de rubro.

Tipo: Número entero de 1 dígito.

Ejemplo: \`1\`.

#### rubro_desc_tipo

Descripción del tipo de rubro.

Tipo: Texto descriptivo.

Ejemplo: \`DONACIONES CORRIENTES\`.

#### rubro_desc_clase

Descripción de la clase de rubro.

Tipo: Texto descriptivo.

Ejemplo: \`Donaciones Corrientes del Exterior\`.

#### rubro_desc_cuenta

Descripción de la cuenta de rubro.

Tipo: Texto descriptivo.

Ejemplo: \`Del Sector Privado del Exterior\`.

#### rubro_desc_sub_cuenta

Descripción de la subcuenta de rubro.

Tipo: Texto descriptivo.

Ejemplo: \`Monetizable\`.

### Montos

Montos en moneda nacional que hacen al presupuesto y ejecución de cada ingreso. Incluye 2 montos de presupuesto: al inicio de la gestión y luego de modificaciones, y 2 montos de ejecución: devengado y percibido.

#### inicial

Monto programado en la gestión y aprobado con la Ley del Estado en moneda nacional.

Tipo: Monto en bolivianos corrientes con dos decimales.

Ejemplo: \`2014000\`.

#### vigente

Presupuesto de ingreso que considera las modificaciones gestionadas y aprobadas durante el ejercicio fiscal, en moneda nacional.

Tipo: Monto en bolivianos corrientes con dos decimales.

Ejemplo: \`5653320\`.

#### devengado

Monto de ingreso reconocido contablemente en moneda nacional.

Tipo: Monto en bolivianos corrientes con dos decimales.

Ejemplo: \`5637823.65\`.

#### percibido

Monto percibido en moneda nacional, que corresponde al registro de movimiento en caja.

Tipo: Monto en bolivianos corrientes con dos decimales.

Ejemplo: \`5637823.65\`.
`;

  let content = $state('');
  let loading = $state(true);
  let headings = $state([]);
  let activeId = $state('');
  let sidebarOpen = $state(false);
  let expandedSections = $state(new Set());

  // Build hierarchical structure from flat headings
  function buildHierarchy(flatHeadings) {
    const root = { children: [], level: 0 };
    const stack = [root];

    for (const heading of flatHeadings) {
      const node = { ...heading, children: [] };

      // Pop stack until we find a parent with lower level
      while (stack.length > 1 && stack[stack.length - 1].level >= heading.level) {
        stack.pop();
      }

      stack[stack.length - 1].children.push(node);
      stack.push(node);
    }

    return root.children;
  }

  // Extract headings from markdown and add IDs
  function processMarkdown(markdown) {
    const headingsList = [];
    let headingIndex = 0;

    // Custom renderer for marked v17+
    const renderer = {
      heading({ tokens, depth }) {
        const text = tokens.map(t => t.text || t.raw || '').join('');

        const slug = text
          .toLowerCase()
          .normalize('NFD')
          .replace(/[\u0300-\u036f]/g, '')
          .replace(/[^\w\s-]/g, '')
          .replace(/\s+/g, '-')
          .replace(/-+/g, '-')
          .trim();

        const id = `${slug}-${headingIndex++}`;

        // Include up to level 4
        if (depth <= 4) {
          headingsList.push({
            id,
            text: text,
            level: depth
          });
        }

        // Add anchor link to each heading
        return `<h${depth} id="${id}" class="heading-anchor"><a href="#${id}" class="anchor-link">${text}</a></h${depth}>`;
      }
    };

    marked.use({ renderer });
    const html = marked.parse(markdown);

    return { html, headings: headingsList };
  }

  onMount(async () => {
    // Detect Mac for keyboard shortcut display
    isMac = typeof navigator !== 'undefined' && /Mac|iPod|iPhone|iPad/.test(navigator.platform);

    try {
      // Cargar markdown desde archivo estático
      const res = await fetch('/docs.md');
      if (res.ok) {
        MARKDOWN_CONTENT = await res.text();
      }

      const result = processMarkdown(MARKDOWN_CONTENT);
      content = result.html;
      headings = buildHierarchy(result.headings);

      // Extract searchable items (variable names and descriptions)
      searchableItems = extractSearchableItems(MARKDOWN_CONTENT);

      // Expand level 1 by default
      const initialExpanded = new Set();
      result.headings.filter(h => h.level === 1).forEach(h => initialExpanded.add(h.id));
      expandedSections = initialExpanded;

      // Setup intersection observer for scroll tracking
      setTimeout(() => {
        setupScrollTracking(result.headings);

        // Handle URL hash on page load
        if (window.location.hash) {
          const id = window.location.hash.slice(1);
          const element = document.getElementById(id);
          if (element) {
            // Expand parents of this heading
            const parentIds = findParentIds(id, headings);
            if (parentIds && parentIds.length > 0) {
              const newExpanded = new Set(expandedSections);
              parentIds.forEach(pid => newExpanded.add(pid));
              expandedSections = newExpanded;
            }
            // Scroll to element
            setTimeout(() => {
              element.scrollIntoView({ behavior: 'smooth', block: 'start' });
              activeId = id;
            }, 50);
          }
        }
      }, 100);
    } catch (error) {
      console.error('Error loading documentation:', error);
      content = '<p>Error al cargar la documentación.</p>';
    } finally {
      loading = false;
    }
  });

  // Find all parent IDs for a given heading ID
  function findParentIds(targetId, nodes, parents = []) {
    for (const node of nodes) {
      if (node.id === targetId) {
        return parents;
      }
      if (node.children && node.children.length > 0) {
        const found = findParentIds(targetId, node.children, [...parents, node.id]);
        if (found) return found;
      }
    }
    return null;
  }

  function setupScrollTracking(flatHeadings) {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            const newActiveId = entry.target.id;
            activeId = newActiveId;

            // Auto-expand parents of the active heading
            const parentIds = findParentIds(newActiveId, headings);
            if (parentIds && parentIds.length > 0) {
              const newExpanded = new Set(expandedSections);
              parentIds.forEach(id => newExpanded.add(id));
              expandedSections = newExpanded;
            }
          }
        });
      },
      {
        rootMargin: '-100px 0px -70% 0px',
        threshold: 0
      }
    );

    flatHeadings.forEach((heading) => {
      const element = document.getElementById(heading.id);
      if (element) {
        observer.observe(element);
      }
    });

    return () => observer.disconnect();
  }

  function scrollToHeading(id) {
    const element = document.getElementById(id);
    if (element) {
      // Update URL hash without triggering scroll
      history.pushState(null, '', `#${id}`);
      element.scrollIntoView({ behavior: 'smooth', block: 'start' });
      sidebarOpen = false;
    }
  }

  function toggleSection(id) {
    const newExpanded = new Set(expandedSections);
    if (newExpanded.has(id)) {
      newExpanded.delete(id);
    } else {
      newExpanded.add(id);
    }
    expandedSections = newExpanded;
  }

  function toggleSidebar() {
    sidebarOpen = !sidebarOpen;
  }

  // Check if a heading or any of its children is active
  function isActiveOrHasActiveChild(node, currentActiveId) {
    if (node.id === currentActiveId) return true;
    if (node.children) {
      return node.children.some(child => isActiveOrHasActiveChild(child, currentActiveId));
    }
    return false;
  }

  // Extract searchable items from markdown (h4 = variable names)
  function extractSearchableItems(markdown) {
    const items = [];
    // Split by h4 headings (#### varname)
    const sections = markdown.split(/(?=####\s+)/);

    for (const section of sections) {
      const h4Match = section.match(/^####\s+(\w+)\s*\n\n([\s\S]*?)(?=\n####|\n###|\n##|\n#|$)/);
      if (h4Match) {
        const varName = h4Match[1];
        const description = h4Match[2].trim()
          .split('\n\n')[0] // Get first paragraph
          .replace(/\n/g, ' ')
          .substring(0, 200); // Limit description length

        // Find the section it belongs to (look backwards for ### heading)
        const fullMarkdownUpToThis = markdown.substring(0, markdown.indexOf(`#### ${varName}`));
        const h3Matches = fullMarkdownUpToThis.match(/###\s+(.+)/g);
        const section = h3Matches ? h3Matches[h3Matches.length - 1].replace('### ', '') : '';

        items.push({
          varName,
          description,
          section,
          searchText: `${varName} ${description} ${section}`.toLowerCase()
        });
      }
    }
    return items;
  }

  // Search function with debounce effect
  function performSearch(query) {
    if (!query || query.length < 2) {
      searchResults = [];
      showSearchResults = false;
      return;
    }

    const queryLower = query.toLowerCase().trim();
    const words = queryLower.split(/\s+/).filter(w => w.length > 0);

    const results = searchableItems
      .filter(item => {
        // All words must match somewhere
        return words.every(word => item.searchText.includes(word));
      })
      .slice(0, 20); // Limit results

    searchResults = results;
    showSearchResults = results.length > 0;
    selectedSearchIndex = -1;
  }

  // Handle search input
  function onSearchInput(e) {
    searchQuery = e.target.value;
    performSearch(searchQuery);
  }

  // Handle keyboard navigation in search
  function onSearchKeydown(e) {
    if (!showSearchResults) return;

    if (e.key === 'ArrowDown') {
      e.preventDefault();
      selectedSearchIndex = Math.min(selectedSearchIndex + 1, searchResults.length - 1);
    } else if (e.key === 'ArrowUp') {
      e.preventDefault();
      selectedSearchIndex = Math.max(selectedSearchIndex - 1, -1);
    } else if (e.key === 'Enter' && selectedSearchIndex >= 0) {
      e.preventDefault();
      goToSearchResult(searchResults[selectedSearchIndex]);
    } else if (e.key === 'Escape') {
      e.preventDefault();
      closeSearch();
    }
  }

  // Navigate to search result
  function goToSearchResult(result) {
    // Find the heading ID that matches this variable name
    const slug = result.varName
      .toLowerCase()
      .normalize('NFD')
      .replace(/[\u0300-\u036f]/g, '')
      .replace(/[^\w\s-]/g, '')
      .replace(/\s+/g, '-');

    // Find the element by looking for h4 with this text
    const h4Elements = document.querySelectorAll('h4.heading-anchor');
    for (const h4 of h4Elements) {
      if (h4.textContent.trim() === result.varName) {
        // Expand parents in sidebar
        const id = h4.id;
        const parentIds = findParentIds(id, headings);
        if (parentIds && parentIds.length > 0) {
          const newExpanded = new Set(expandedSections);
          parentIds.forEach(pid => newExpanded.add(pid));
          expandedSections = newExpanded;
        }

        // Scroll to element
        setTimeout(() => {
          h4.scrollIntoView({ behavior: 'smooth', block: 'start' });
          activeId = id;
        }, 50);

        closeSearch();
        return;
      }
    }
  }

  // Close search dropdown
  function closeSearch() {
    showSearchResults = false;
    selectedSearchIndex = -1;
    searchQuery = '';
  }

  // Handle click outside search
  function handleClickOutside(e) {
    if (searchInputRef && !searchInputRef.contains(e.target)) {
      showSearchResults = false;
    }
  }

  // Highlight matching text
  function highlightMatch(text, query) {
    if (!query || query.length < 2) return text;
    const words = query.toLowerCase().split(/\s+/).filter(w => w.length > 0);
    let result = text;
    for (const word of words) {
      const regex = new RegExp(`(${word})`, 'gi');
      result = result.replace(regex, '<mark>$1</mark>');
    }
    return result;
  }

  // Keyboard shortcut to focus search (Ctrl/Cmd + K)
  function handleGlobalKeydown(e) {
    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
      e.preventDefault();
      searchInputRef?.querySelector('input')?.focus();
    }
  }
</script>

<svelte:head>
  <title>Documentación | Presupuesto Público Bolivia</title>
</svelte:head>

<svelte:window onkeydown={handleGlobalKeydown} onclick={handleClickOutside} />

<div class="docs-page">
  <header class="docs-header">
    <div class="docs-header-content">
      <div class="docs-header-top">

        <!-- Mobile menu button -->
        <button class="docs-menu-btn" onclick={toggleSidebar}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M3 12h18M3 6h18M3 18h18"/>
          </svg>
          <span>Índice</span>
        </button>
      </div>
      <h1 class="docs-title">Documentación</h1>
      <p class="docs-subtitle">Estructura de las bases de datos del presupuesto público</p>

      <!-- Search bar -->
      <div class="docs-search-container" bind:this={searchInputRef}>
        <div class="docs-search-input-wrapper">
          <svg class="docs-search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="11" cy="11" r="8"/>
            <path d="m21 21-4.3-4.3"/>
          </svg>
          <input
            type="text"
            class="docs-search-input"
            placeholder="Buscar variables..."
            value={searchQuery}
            oninput={onSearchInput}
            onkeydown={onSearchKeydown}
            onfocus={() => searchQuery.length >= 2 && performSearch(searchQuery)}
          />
          <span class="docs-search-shortcut">
            <kbd>{isMac ? '\u2318' : 'Ctrl'}</kbd><kbd>K</kbd>
          </span>
        </div>

        {#if showSearchResults}
          <div class="docs-search-results">
            {#if searchResults.length === 0}
              <div class="docs-search-no-results">
                No se encontraron resultados
              </div>
            {:else}
              {#each searchResults as result, index}
                <button
                  class="docs-search-result"
                  class:selected={index === selectedSearchIndex}
                  onclick={() => goToSearchResult(result)}
                  onmouseenter={() => selectedSearchIndex = index}
                >
                  <span class="docs-search-result-var">{@html highlightMatch(result.varName, searchQuery)}</span>
                  <span class="docs-search-result-section">{result.section}</span>
                  <span class="docs-search-result-desc">{@html highlightMatch(result.description.substring(0, 80), searchQuery)}{result.description.length > 80 ? '...' : ''}</span>
                </button>
              {/each}
            {/if}
          </div>
        {/if}
      </div>
    </div>
  </header>

  <div class="docs-layout-wrapper">
    <!-- Fixed Sidebar / Table of Contents -->
    <aside class="docs-sidebar" class:open={sidebarOpen}>
      <div class="docs-sidebar-content">
        <div class="docs-sidebar-header">
          <span class="docs-sidebar-title">Índice</span>
          <button class="docs-sidebar-close" onclick={() => sidebarOpen = false}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M18 6L6 18M6 6l12 12"/>
            </svg>
          </button>
        </div>

        <nav class="docs-toc">
          {#snippet renderHeading(node, depth = 0)}
            <div class="toc-node">
              <div class="toc-item-row">
                {#if node.children && node.children.length > 0}
                  <button
                    class="toc-toggle"
                    class:expanded={expandedSections.has(node.id)}
                    onclick={() => toggleSection(node.id)}
                  >
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M9 18l6-6-6-6"/>
                    </svg>
                  </button>
                {:else}
                  <span class="toc-toggle-spacer"></span>
                {/if}
                <button
                  class="docs-toc-item level-{node.level}"
                  class:active={activeId === node.id}
                  onclick={() => scrollToHeading(node.id)}
                >
                  {node.text}
                </button>
              </div>
              {#if node.children && node.children.length > 0 && expandedSections.has(node.id)}
                <div class="toc-children">
                  {#each node.children as child}
                    {@render renderHeading(child, depth + 1)}
                  {/each}
                </div>
              {/if}
            </div>
          {/snippet}

          {#each headings as heading}
            {@render renderHeading(heading)}
          {/each}
        </nav>
      </div>
    </aside>

    <!-- Main content -->
    <main class="docs-main">
    {#if loading}
      <div class="docs-loading">
        <svg class="docs-loader" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <rect x="1" y="1" rx="1" width="10" height="10">
            <animate id="sq1" attributeName="fill-opacity" values="1;0.4;0.4;0.4;1" dur="1.6s" repeatCount="indefinite" begin="0s"/>
          </rect>
          <rect x="13" y="1" rx="1" width="10" height="10">
            <animate id="sq2" attributeName="fill-opacity" values="0.4;1;0.4;0.4;0.4" dur="1.6s" repeatCount="indefinite" begin="0s"/>
          </rect>
          <rect x="1" y="13" rx="1" width="10" height="10">
            <animate id="sq3" attributeName="fill-opacity" values="0.4;0.4;0.4;1;0.4" dur="1.6s" repeatCount="indefinite" begin="0s"/>
          </rect>
          <rect x="13" y="13" rx="1" width="10" height="10">
            <animate id="sq4" attributeName="fill-opacity" values="0.4;0.4;1;0.4;0.4" dur="1.6s" repeatCount="indefinite" begin="0s"/>
          </rect>
        </svg>
        <p>Cargando documentación...</p>
      </div>
    {:else}
      <article class="docs-content">
        {@html content}
      </article>
    {/if}
    </main>
  </div>

  <!-- Overlay for mobile -->
  {#if sidebarOpen}
    <button class="docs-overlay" onclick={() => sidebarOpen = false}></button>
  {/if}
</div>

<style>
  .docs-page {
    min-height: 100vh;
    background-color: var(--theme-body);
    font-family: var(--font-sans);
  }

  .docs-header {
    border-bottom: 1px solid var(--theme-borde);
    background-color: var(--theme-body);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
  }

  .docs-header-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 80px 1.5rem 1rem;
  }

  .docs-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
  }

  .docs-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--theme-texto);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.15s ease;
  }

  .docs-back:hover {
    color: var(--theme-accent);
  }

  .docs-menu-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--theme-fill);
    border: 1px solid var(--theme-borde);
    border-radius: 8px;
    color: var(--theme-texto);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease;
  }

  .docs-menu-btn:hover {
    color: var(--theme-titulo);
    border-color: var(--theme-accent);
  }

  @media (min-width: 1100px) {
    .docs-menu-btn {
      display: none;
    }
  }

  .docs-title {
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--theme-titulo);
    margin: 0 0 0.25rem;
  }

  .docs-subtitle {
    color: var(--theme-texto);
    font-size: 0.875rem;
    margin: 0;
  }

  /* Centered layout container */
  .docs-layout-wrapper {
    max-width: 700px;
    margin: 0 auto;
    padding-top: 340px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  /* Sidebar */
  .docs-sidebar {
    display: none;
  }

  /* Desktop: sidebar (200) + gap (50) + content (600) = 850px total centered */
  @media (min-width: 1100px) {
    .docs-layout-wrapper {
      max-width: 600px;
      margin-left: calc(50% - 425px + 250px);
      margin-right: auto;
      padding-left: 2rem;
      padding-right: 2rem;
    }

    .docs-sidebar {
      display: block;
      position: fixed;
      top: 120px;
      left: calc(50% - 425px);
      width: 200px;
      max-height: calc(100vh - 140px);
      overflow-y: auto;
      overflow-x: hidden;
      padding: 0;
      z-index: 10;
    }

    .docs-sidebar-content {
      padding-right: 1rem;
      padding-top: 10rem;
    }
  }

  /* Larger screens: more space */
  @media (min-width: 1300px) {
    .docs-layout-wrapper {
      max-width: 650px;
      margin-left: calc(50% - 475px + 280px);
    }

    .docs-sidebar {
      left: calc(50% - 475px);
      width: 230px;
    }
  }

  /* Mobile sidebar */
  @media (max-width: 1099px) {
    .docs-sidebar {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      width: 320px;
      height: 100vh;
      background: var(--theme-body);
      z-index: 100;
      transform: translateX(-100%);
      transition: transform 0.25s ease;
      box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    }

    .docs-sidebar.open {
      transform: translateX(0);
    }

    .docs-sidebar-content {
      height: 100%;
      overflow-y: auto;
      padding: 1rem;
    }
  }

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

  @media (min-width: 1100px) {
    .docs-sidebar-header {
      border-bottom: none;
      padding-bottom: 0;
      margin-bottom: 1.25rem;
    }

    .docs-sidebar-close {
      display: none;
    }
  }

  .docs-sidebar-title {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--theme-texto);
  }

  .docs-sidebar-close {
    padding: 0.25rem;
    color: var(--theme-texto);
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.15s ease;
  }

  .docs-sidebar-close:hover {
    color: var(--theme-titulo);
  }

  /* Table of Contents */
  .docs-toc {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .toc-node {
    display: flex;
    flex-direction: column;
  }

  .toc-item-row {
    display: flex;
    align-items: flex-start;
    gap: 2px;
  }

  .toc-toggle {
    flex-shrink: 0;
    width: 20px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--theme-texto);
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.15s ease;
    padding: 0;
  }

  .toc-toggle:hover {
    opacity: 1;
    color: var(--theme-accent);
  }

  .toc-toggle svg {
    transition: transform 0.15s ease;
  }

  .toc-toggle.expanded svg {
    transform: rotate(90deg);
  }

  .toc-toggle-spacer {
    width: 20px;
    flex-shrink: 0;
  }

  .toc-children {
    padding-left: 10px;
    border-left: 1px solid color-mix(in srgb, var(--theme-borde) 50%, transparent);
    margin-left: 9px;
  }

  .docs-toc-item {
    flex: 1;
    display: block;
    text-align: left;
    padding: 0.35rem 0.5rem;
    font-size: 0.8125rem;
    color: var(--theme-texto);
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1.3;
  }

  .docs-toc-item:hover {
    color: var(--theme-titulo);
    background: var(--theme-fill);
  }

  .docs-toc-item.active {
    color: var(--theme-accent);
    background: color-mix(in srgb, var(--theme-accent) 12%, transparent);
    font-weight: 500;
  }

  .docs-toc-item.level-1 {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--theme-titulo);
  }

  .docs-toc-item.level-2 {
    font-weight: 500;
  }

  .docs-toc-item.level-3 {
    font-size: 0.8125rem;
  }

  .docs-toc-item.level-4 {
    font-size: 0.75rem;
    font-family: monospace;
    color: color-mix(in srgb, var(--theme-texto) 80%, transparent);
  }

  .docs-toc-item.level-4.active {
    color: var(--theme-accent);
  }

  /* Overlay */
  .docs-overlay {
    display: none;
  }

  @media (max-width: 1099px) {
    .docs-overlay {
      display: block;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      z-index: 50;
      border: none;
      cursor: pointer;
    }
  }

  /* Main content */
  .docs-main {
    flex: 1;
    min-width: 0;
    padding: 0 0 4rem 0;
  }

  @media (max-width: 1099px) {
    .docs-layout-wrapper {
      padding-top: 330px;
      padding-left: 1rem;
      padding-right: 1rem;
    }

    .docs-main {
      padding: 0 0 4rem 0;
    }
  }

  .docs-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
    color: var(--theme-texto);
  }

  .docs-loader {
    width: 32px;
    height: 32px;
    fill: var(--theme-texto);
    opacity: 0.6;
  }

  /* Markdown content styles */
  .docs-content {
    color: var(--theme-titulo);
    line-height: 1.7;
  }

  .docs-content :global(h1) {
    font-family: var(--font-sans);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--theme-titulo);
    margin: 3rem 0 1.5rem;
    scroll-margin-top: 130px;
  }

  .docs-content :global(h1:first-child) {
    margin-top: 0;
  }

  .docs-content :global(h2) {
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--theme-titulo);
    margin: 2.5rem 0 1rem;
    scroll-margin-top: 130px;
  }

  .docs-content :global(h3) {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--theme-titulo);
    margin: 2rem 0 0.75rem;
    scroll-margin-top: 130px;
  }

  .docs-content :global(h4) {
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-accent);
    margin: 1.5rem 0 0.5rem;
    font-family: monospace;
    scroll-margin-top: 130px;
  }

  .docs-content :global(p) {
    margin: 0 0 1rem;
    color: var(--theme-texto);
  }

  .docs-content :global(ul),
  .docs-content :global(ol) {
    margin: 0 0 1rem;
    padding-left: 1.5rem;
    color: var(--theme-texto);
  }

  .docs-content :global(li) {
    margin-bottom: 0.5rem;
  }

  .docs-content :global(strong) {
    font-weight: 600;
    color: var(--theme-titulo);
  }

  .docs-content :global(code) {
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 0.875em;
    background-color: var(--theme-fill);
    color: var(--theme-accent);
    padding: 0.2em 0.4em;
    border-radius: 4px;
    border: 1px solid var(--theme-borde);
  }

  .docs-content :global(pre) {
    background-color: var(--theme-fill);
    border: 1px solid var(--theme-borde);
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0 1.5rem;
    overflow-x: auto;
  }

  .docs-content :global(pre code) {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.875rem;
    color: var(--theme-titulo);
  }

  .docs-content :global(hr) {
    border: none;
    height: 1px;
    background: color-mix(in srgb, var(--theme-borde) 25%, transparent);
    margin: 2rem 0;
    opacity: 0.5;
  }

  .docs-content :global(blockquote) {
    border-left: 3px solid var(--theme-accent);
    margin: 1rem 0;
    padding: 0.5rem 1rem;
    background-color: var(--theme-fill);
    border-radius: 0 8px 8px 0;
  }

  .docs-content :global(blockquote p) {
    margin: 0;
  }

  /* Table of contents style for nested lists */
  .docs-content :global(ul ul) {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  /* Links */
  .docs-content :global(a) {
    color: var(--theme-accent);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.15s ease;
  }

  .docs-content :global(a:hover) {
    text-decoration-color: var(--theme-accent);
  }

  /* Heading anchor links */
  .docs-content :global(.heading-anchor) {
    position: relative;
  }

  .docs-content :global(.anchor-link) {
    color: inherit;
    text-decoration: none;
  }

  .docs-content :global(.anchor-link:hover) {
    text-decoration: none;
  }

  .docs-content :global(.heading-anchor:hover .anchor-link::before) {
    content: '#';
    position: absolute;
    left: -1.25em;
    color: var(--theme-accent);
    opacity: 0.6;
    font-weight: 400;
  }

  .docs-content :global(h4.heading-anchor:hover .anchor-link::before) {
    left: -1em;
    font-size: 0.875em;
  }

  /* Responsive */
  @media (max-width: 640px) {
    .docs-header-content {
      padding: 0.75rem 1rem;
    }

    .docs-title {
      font-size: 1.25rem;
    }

    .docs-content :global(h1) {
      font-size: 1.5rem;
      scroll-margin-top: 120px;
    }

    .docs-content :global(h2) {
      font-size: 1.25rem;
      scroll-margin-top: 120px;
    }

    .docs-content :global(h3) {
      font-size: 1.125rem;
      scroll-margin-top: 120px;
    }

    .docs-content :global(h4) {
      scroll-margin-top: 120px;
    }

    .docs-content :global(pre) {
      font-size: 0.8rem;
      padding: 0.75rem;
    }
  }

  /* Search styles */
  .docs-search-container {
    position: relative;
    margin-top: 1rem;
    max-width: 320px;
  }

  .docs-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
  }

  .docs-search-icon {
    position: absolute;
    left: 12px;
    color: var(--theme-texto);
    opacity: 0.5;
    pointer-events: none;
  }

  .docs-search-input {
    width: 100%;
    padding: 0.625rem 3.5rem 0.625rem 2.5rem;
    font-size: 0.9375rem;
    font-family: inherit;
    background: var(--theme-fill);
    border: 1px solid var(--theme-borde);
    border-radius: 8px;
    color: var(--theme-titulo);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .docs-search-input::placeholder {
    color: var(--theme-texto);
    opacity: 0.6;
  }

  .docs-search-input:focus {
    border-color: var(--theme-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 15%, transparent);
  }

  .docs-search-shortcut {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 4px;
    pointer-events: none;
    z-index: 5;
  }

  .docs-search-shortcut kbd {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 7px;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 5px;
    color: #aaa;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
    line-height: 1;
  }

  :global(html:not(.dark)) .docs-search-shortcut kbd {
    background: #f5f5f5;
    border-color: #d0d0d0;
    color: #666;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.8);
  }

  @media (max-width: 640px) {
    .docs-search-shortcut {
      display: none;
    }
  }

  .docs-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--theme-body);
    border: 1px solid var(--theme-borde);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    max-height: 400px;
    overflow-y: auto;
    z-index: 100;
  }

  .docs-search-no-results {
    padding: 1rem;
    text-align: center;
    color: var(--theme-texto);
    font-size: 0.875rem;
  }

  .docs-search-result {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    border-bottom: 1px solid var(--theme-borde);
    cursor: pointer;
    text-align: left;
    transition: background 0.1s ease;
  }

  .docs-search-result:last-child {
    border-bottom: none;
  }

  .docs-search-result:hover,
  .docs-search-result.selected {
    background: var(--theme-fill);
  }

  .docs-search-result-var {
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--theme-accent);
  }

  .docs-search-result-section {
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--theme-texto);
    opacity: 0.7;
  }

  .docs-search-result-desc {
    font-size: 0.8125rem;
    color: var(--theme-texto);
    line-height: 1.4;
  }

  .docs-search-result :global(mark) {
    background: color-mix(in srgb, var(--theme-accent) 25%, transparent);
    color: inherit;
    border-radius: 2px;
    padding: 0 2px;
  }
</style>