Rafael Lopez / ppto

Go to a project
Toggle navigation Toggle navigation pinning
Rafael Lopez
ab3a7e59 1 parent 48b1b878

ser personales

Inline Side-by-side
Showing 8 changed files with 3830 additions and 360 deletions
......@@ -24,3 +24,6 @@ vite.config.ts.timestamp-*
# Claude
claude.md
# Docs internos
static/ESTILOS_*.md
......
......@@ -20,7 +20,6 @@
let mode = $state('archivo');
let searchFocused = $state(false);
let hoveredStory = $state(null);
let mousePos = $state({ x: 0, y: 0 });
let activeToggle = $state(null);
let searchInput = $state(null);
let debounceTimer;
......@@ -40,12 +39,12 @@
const MODES = {
archivo: {
placeholder: 'YPFB, Publicidad, Sueldos...',
placeholder: 'Ej: Ministerio de Salud, YPFB, sueldos...',
label: 'Serie histórica',
color: COLORS.accent,
},
hoy: {
placeholder: 'Tu municipio, Salud, Obras...',
placeholder: 'Ej: Tu municipio, hospitales, obras...',
label: 'Actualización diaria',
color: COLORS.green,
},
......@@ -175,10 +174,7 @@
});
observer.observe(document.documentElement, { attributes: true });
const handleMouse = (e) => { mousePos = { x: e.clientX, y: e.clientY }; };
window.addEventListener('mousemove', handleMouse);
return () => {
window.removeEventListener('mousemove', handleMouse);
observer.disconnect();
};
});
......@@ -189,9 +185,6 @@
</svelte:head>
<div class="page">
<!-- Grain overlay -->
<div class="grain"></div>
<!-- Header con Logo y Controles -->
<header class="page-header">
{#if isDarkMode}
......@@ -262,11 +255,6 @@
<!-- Hero -->
<section class="hero">
<div
class="mouse-glow"
style="background: radial-gradient(800px circle at {mousePos.x}px {mousePos.y}px, rgba(201, 167, 81, 0.03), transparent 60%)"
></div>
<div class="hero-content">
<!-- Main title -->
<h1 class="hero-title fade-in" style="animation-delay: 0.3s">
......@@ -276,11 +264,12 @@
<!-- Subtitle - the scale -->
<p class="hero-subtitle fade-in" style="animation-delay: 0.5s">
Todos los ingresos y gastos del Estado boliviano.<br />
<span class="subtitle-stats">600+ entidades · 500+ rubros · 21 años · 9M de registros · actualización diaria</span>
<span class="subtitle-stats">21 años · actualización diaria · 600+ entidades · 9M de registros</span>
</p>
<!-- Search - main CTA -->
<div class="search-wrapper fade-in" style="animation-delay: 0.6s">
<p class="search-instruction">Busca cualquier entidad pública o tipo de gasto</p>
<div
class="search-bar"
class:search-focused={searchFocused}
......@@ -352,9 +341,12 @@
{/if}
{#if !searchFocused || ($results.length === 0 && $query.length < 2)}
<a href="/clasificadores" class="browse-link">
o explora por clasificadores <span class="browse-arrow">→</span>
</a>
<div class="browse-section">
<span class="browse-hint">¿No sabes qué buscar?</span>
<a href="/clasificadores" class="browse-link">
Explora cómo Bolivia organiza sus ingresos y gastos <span class="browse-arrow">→</span>
</a>
</div>
{/if}
</div>
......@@ -448,7 +440,6 @@
.page::-webkit-scrollbar-track { background: var(--theme-body); }
.page::-webkit-scrollbar-thumb { background: var(--theme-texto); border-radius: 3px; }
@keyframes grain { 0%,100%{transform:translate(0,0)}10%{transform:translate(-2%,-3%)}30%{transform:translate(-1%,3%)}50%{transform:translate(-3%,1%)}70%{transform:translate(-2%,2%)}90%{transform:translate(-1%,2%)} }
@keyframes fadeInUp { from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)} }
.page {
......@@ -460,15 +451,6 @@
transition: background-color 0.3s, color 0.3s;
}
/* Grain - only visible in dark mode */
.grain {
position: fixed; top: -50%; left: -50%; width: 200%; height: 200%;
pointer-events: none; z-index: 9999; opacity: 0.03;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
animation: grain 0.5s steps(1) infinite;
}
:global(:root:not(.dark)) .grain { display: none; }
/* Header with MEFP logo */
.page-header {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
......@@ -495,11 +477,6 @@
min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
padding: 80px 40px 60px; position: relative; max-width: 1200px; margin: 0 auto;
}
.mouse-glow {
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
pointer-events: none; z-index: 0; transition: background 0.6s;
}
:global(:root:not(.dark)) .mouse-glow { display: none; }
.hero-content {
position: relative; z-index: 1;
display: flex; flex-direction: column; align-items: center;
......@@ -600,11 +577,24 @@
width: 1px; height: 36px; background: var(--theme-borde);
}
.browse-section {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
gap: 6px;
}
.browse-hint {
font-family: 'DM Sans', sans-serif;
font-size: 12px;
color: var(--theme-texto);
opacity: 0.7;
}
.browse-link {
display: block;
margin-top: 14px;
font-family: 'DM Sans', sans-serif;
font-size: 12px; color: var(--theme-texto);
font-size: 13px;
color: var(--theme-texto);
text-decoration: none;
text-align: center;
transition: color 0.2s;
......@@ -618,6 +608,13 @@
/* Search - main CTA */
.search-wrapper { margin-top: 28px; width: 100%; max-width: 520px; position: relative; z-index: 60; }
.search-instruction {
font-family: 'DM Sans', sans-serif;
font-size: 15px;
color: var(--theme-titulo);
margin-bottom: 12px;
text-align: center;
}
.search-bar {
display: flex; align-items: center;
background: var(--theme-surface); border: 1px solid var(--theme-borde);
......
<script>
const clasificadores = [
{
slug: "institucional",
ruta: "/clasificadores/institucional",
numero: "01",
nombre: "Institucional",
titulo: "Quién",
desc: "Las instituciones que gastan y administran recursos públicos",
ejemplo: "Ministerios, municipios, YPFB…"
import { onMount } from 'svelte';
import { fade, scale } from 'svelte/transition';
import { cubicOut } from 'svelte/easing';
let hovered = null;
let activeModal = null;
let mounted = false;
onMount(() => { setTimeout(() => { mounted = true; }, 80); });
const MODALS = {
quien: {
title: '¿Quién gasta o recibe?', tech: 'CLASIFICADOR INSTITUCIONAL',
everyday: 'Es como preguntar "¿quién en la familia maneja plata?". Papá tiene su sueldo, mamá maneja el negocio, el abuelo cobra su renta. Cada uno es una "entidad" distinta con su propio presupuesto.',
budget: 'El clasificador institucional cataloga a todas las entidades del sector público: ministerios, gobernaciones, municipios, empresas públicas, universidades. Cada una tiene un código único y un presupuesto asignado.',
example: 'Ejemplo: El Ministerio de Educación (código 040) y el Gobierno Autónomo de La Paz (código 126) son entidades distintas, cada una con sus propios ingresos y gastos.',
color: 'var(--theme-titulo)',
},
{
slug: "objeto-gasto",
ruta: "/clasificadores/objeto-gasto",
numero: "02",
nombre: "Objeto del Gasto",
titulo: "En qué",
desc: "La naturaleza del gasto: sueldos, obras, compras",
ejemplo: "Servicios personales, bienes, inversión…"
rubros: {
title: '¿Qué tipo de ingreso es?', tech: 'CLASIFICADOR DE RECURSOS POR RUBROS',
everyday: 'María gana un sueldo de su trabajo, cobra alquiler de un cuartito, y un amigo le prestó plata. Son tres tipos distintos de ingreso: laboral, patrimonial, y crédito.',
budget: 'En el presupuesto, el Estado recibe ingresos tributarios (impuestos = el "sueldo"), regalías por explotación de recursos (= el "alquiler"), y créditos internacionales (= el "préstamo"). El rubro te dice qué naturaleza tiene cada ingreso.',
example: 'Ejemplo: Los Bs 2.400M que Bolivia recibe por IDH son un rubro distinto a los Bs 800M de crédito del BID, aunque ambos financien al mismo ministerio.',
color: 'var(--theme-accent)',
},
{
slug: "rubros",
ruta: "/clasificadores/rubros",
numero: "03",
nombre: "Recursos por Rubros",
titulo: "Cuánto ingresa",
desc: "Los ingresos del Estado por tipo de recaudación",
ejemplo: "Impuestos, regalías, tasas…"
fuentes: {
title: '¿Quién pone la plata?', tech: 'CLASIFICADOR DE FUENTES DE FINANCIAMIENTO',
everyday: 'María sabe que su sueldo se lo paga la empresa TechCorp, el alquiler se lo paga su inquilino Juan, y el préstamo se lo hizo el Banco Nacional. Son las fuentes: quién firma el cheque.',
budget: 'Las fuentes son los bolsillos específicos: el TGN (Tesoro General de la Nación), recursos propios de cada entidad, crédito externo del BID o Banco Mundial, o donaciones de cooperación.',
example: 'Ejemplo: Un crédito del BID y uno del Banco Mundial son el mismo rubro (crédito externo) pero distinta fuente. La fuente dice quién exactamente pone la plata.',
color: 'var(--theme-accent)',
},
{
slug: "funcional",
ruta: "/clasificadores/funcional",
numero: "04",
nombre: "Finalidad y Función",
titulo: "Para qué",
desc: "El propósito del gasto según funciones del Estado",
ejemplo: "Salud, Educación, Defensa…"
objeto: {
title: '¿En qué se gasta concretamente?', tech: 'CLASIFICADOR POR OBJETO DEL GASTO',
everyday: 'Cuando María gasta, compra cosas concretas: arroz, paga la luz, le paga al albañil. Cada compra es un "objeto" distinto — algo tangible que se puede listar.',
budget: 'El Objeto del Gasto es exactamente eso: sueldos, consultorías, materiales de escritorio, combustible, medicamentos. Es la lista del supermercado del Estado.',
example: 'Ejemplo: El grupo 10000 "Servicios Personales" incluye sueldos y aguinaldos. El 20000 "Servicios No Personales" incluye consultorías y alquileres.',
color: '#4A8B6E',
},
{
slug: "fuente",
ruta: "/clasificadores/fuente",
numero: "05",
nombre: "Fuente de Financiamiento",
titulo: "De dónde",
desc: "El origen del dinero que financia cada gasto",
ejemplo: "Tesoro, IDH, créditos externos…"
sector: {
title: '¿A qué sector de la economía va?', tech: 'CLASIFICADOR POR SECTORES ECONÓMICOS',
everyday: 'Si María contrata un albañil, esa plata va al sector construcción. Si compra medicina, va al sector salud. No importa qué compró — importa qué parte de la economía mueve.',
budget: 'Este clasificador mide el impacto económico: cuánto va a infraestructura, cuánto a servicios, cuánto a industria. Permite evaluar cómo las decisiones fiscales afectan a cada sector.',
example: 'Ejemplo: Un hospital nuevo es "construcción" en Objeto del Gasto pero "salud" en Sector Económico. Misma plata, dos lentes distintos.',
color: '#4A8B6E',
},
{
slug: "organismo",
ruta: "/clasificadores/organismo",
numero: "06",
nombre: "Organismo Financiador",
titulo: "Quién financia",
desc: "Los organismos detrás de los créditos y donaciones",
ejemplo: "BID, CAF, Banco Mundial…"
finalidad: {
title: '¿Para qué se gasta?', tech: 'CLASIFICADOR POR FINALIDAD Y FUNCIÓN',
everyday: 'María compró arroz (objeto), pero ¿para qué? Para alimentar a su familia. Compró cemento: para tener casa. El "para qué" es el objetivo final, no el insumo.',
budget: 'Este clasificador agrupa por propósito: educación, defensa, salud, protección social. No importa si se gastó en sueldos o en cemento — lo que importa es el fin.',
example: 'Ejemplo: El sueldo de un profesor y la construcción de una escuela son objetos de gasto distintos, pero ambos tienen la misma finalidad: Educación.',
color: '#4A8B6E',
},
{
slug: "sectores",
ruta: "/clasificadores/sectores",
numero: "07",
nombre: "Sector Económico",
titulo: "Qué sector",
desc: "Los sectores productivos que activa el gasto",
ejemplo: "Hidrocarburos, agro, transporte…"
donde: {
title: '¿Dónde se gasta?', tech: 'CLASIFICADOR GEOGRÁFICO',
everyday: 'María manda plata a su mamá en Cochabamba y paga el alquiler en La Paz. No es lo mismo gastar en la ciudad que en el área rural, en Santa Cruz que en Potosí.',
budget: 'La dimensión geográfica permite ver cómo se distribuyen los recursos en el territorio: por departamento, municipio o región. Revela las prioridades territoriales del Estado.',
example: 'Ejemplo: Del presupuesto de Educación, ¿cuánto va a La Paz vs. Beni? Este clasificador responde esa pregunta.',
color: '#4A8B6E',
},
};
const WIDGETS_INGRESOS = [
{ id: 'rubros', q: '¿Qué tipo de ingreso?', d: 'Impuestos, regalías, ventas, créditos — la naturaleza de cada ingreso', t: 'Recursos por rubros', href: '/clasificadores/rubros' },
{ id: 'fuentes', q: '¿Quién pone la plata?', d: 'TGN, crédito externo, donaciones — de qué bolsillo sale', t: 'Fuentes de financiamiento', href: '/clasificadores/fuente' },
];
const WIDGETS_EN_QUE = [
{ id: 'objeto', q: 'Objeto del gasto', d: 'Sueldos, consultorías, materiales — la lista concreta', t: 'Objeto del gasto', href: '/clasificadores/objeto-gasto' },
{ id: 'sector', q: 'Sector económico', d: 'Industria, construcción, servicios — a qué sector va', t: 'Sectores económicos', href: '/clasificadores/sectores' },
];
const WIDGETS_BOTTOM = [
{ id: 'finalidad', q: '¿Para qué se gasta?', d: 'Educación, salud, defensa — el objetivo final', t: 'Finalidad y función', href: '/clasificadores/funcional' },
{ id: 'donde', q: '¿Dónde se gasta?', d: 'Departamentos, municipios — distribución territorial', t: 'Geográfico', href: '/clasificadores/geografico' },
];
</script>
$: modal = activeModal ? MODALS[activeModal] : null;
function openModal(e, id) {
e.preventDefault();
e.stopPropagation();
activeModal = id;
}
function closeModal() { activeModal = null; }
</script>
<svelte:head>
<title>Explorar los datos — Presupuesto Bolivia</title>
<title>Clasificadores — Presupuesto Bolivia</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>
<main class="clasificadores-page">
<!-- Header de la página -->
<div class="page" class:mounted>
<!-- Header -->
<header class="page-header">
<!-- Breadcrumb -->
<nav class="breadcrumb">
<a href="/" class="breadcrumb-link">← Inicio</a>
<a href="/" class="breadcrumb-link sm-hidden">← Inicio</a>
<div class="breadcrumb-full">
<a href="/">Inicio</a>
<span class="breadcrumb-sep">/</span>
<span class="breadcrumb-current">Clasificadores</span>
</div>
</nav>
<div class="header-content">
<h1>Formas de leer el presupuesto</h1>
<div class="header-content anim" style="--d:0ms">
<h1>Elige cómo explorar el presupuesto</h1>
<p class="subtitulo">
Cada ingreso y cada gasto del Estado se registra bajo distintas clasificaciones.
Aquí puedes explorar los datos según cada una de ellas.
Cada clasificador es una forma distinta de ver la misma información.
Haz clic en <span class="help-inline">?</span> para entender qué es cada uno.
</p>
</div>
</header>
<!-- Grid de clasificadores -->
<section class="grid-clasificadores">
{#each clasificadores as c}
<a href={c.ruta} class="card">
<span class="card-meta">
<span class="card-numero">{c.numero}</span>
<span class="card-nombre">{c.nombre}</span>
</span>
<h2 class="card-titulo">{c.titulo}</h2>
<p class="card-desc">{c.desc}</p>
<p class="card-ejemplo">{c.ejemplo}</p>
</a>
{/each}
</section>
<!-- Footer contextual -->
<footer class="page-footer">
<p class="footnote">
Fuente: SIGMA (Sistema Integrado de Gestión y Modernización Administrativa) y
SIGEP (Sistema de Gestión Pública) — Ministerio de Economía y Finanzas Públicas.
Datos desde 2005.
</p>
</footer>
</main>
<main>
<!-- ═══ ¿QUIÉN? ═══ -->
<div class="anim" style="--d:100ms">
<div class="group">
<div class="group-accent" style="--c: var(--theme-titulo)"></div>
<div class="group-header">
<div class="group-icon" style="--c: var(--theme-titulo)">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
</div>
<div>
<div class="group-label">¿QUIÉN?</div>
<div class="group-sub">La entidad que gasta o recibe</div>
</div>
</div>
<a
href="/clasificadores/institucional"
class="widget-card widget-h"
class:wh={hovered === 'quien'}
on:mouseenter={() => hovered = 'quien'}
on:mouseleave={() => hovered = null}
>
<div class="widget-h-left">
<div class="widget-q">Instituciones públicas</div>
<div class="widget-desc">Ministerios, gobernaciones, municipios, empresas públicas, universidades</div>
</div>
<div class="widget-h-right">
<span class="widget-tech">INSTITUCIONAL</span>
<button class="help-btn help-sm" on:click={(e) => openModal(e, 'quien')}>?</button>
<span class="widget-arrow" class:arrow-show={hovered === 'quien'}>→</span>
</div>
</a>
</div>
</div>
<!-- ═══ INGRESOS + GASTOS ═══ -->
<div class="main-grid">
<!-- INGRESOS -->
<div class="anim col-stretch" style="--d:200ms">
<div class="group group-stretch">
<div class="group-accent" style="--c: var(--theme-accent)"></div>
<div class="group-header">
<div class="group-icon" style="--c: var(--theme-accent)">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
</div>
<div>
<div class="group-label" style="color: var(--theme-accent)">INGRESOS</div>
<div class="group-sub">¿De dónde viene la plata?</div>
</div>
</div>
<div class="widgets-stretch">
{#each WIDGETS_INGRESOS as w}
<a
href={w.href}
class="widget-card widget-grow"
class:wh={hovered === w.id}
on:mouseenter={() => hovered = w.id}
on:mouseleave={() => hovered = null}
>
<div class="widget-top">
<h4 class="widget-q">{w.q}</h4>
<button class="help-btn" on:click={(e) => openModal(e, w.id)}>?</button>
</div>
<p class="widget-desc widget-desc-grow">{w.d}</p>
<div class="widget-footer">
<span class="widget-tech">{w.t}</span>
<span class="widget-arrow" class:arrow-show={hovered === w.id}>→</span>
</div>
<div class="widget-glow widget-glow-accent"></div>
</a>
{/each}
</div>
</div>
</div>
<!-- GASTOS -->
<div class="anim col-stretch" style="--d:320ms">
<div class="group">
<div class="group-accent" style="--c: #4A8B6E"></div>
<div class="group-header">
<div class="group-icon" style="--c: #4A8B6E">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12l7 7 7-7"/></svg>
</div>
<div>
<div class="group-label" style="color: #4A8B6E">GASTOS</div>
<div class="group-sub">¿Cómo se gasta la plata?</div>
</div>
</div>
<div class="group-widgets">
<!-- ¿En qué? sub-group -->
<div class="sub-group">
<div class="sub-group-accent" style="--c: #4A8B6E"></div>
<div class="sub-group-header">
<div class="sub-group-left">
<div class="sub-group-icon" style="--c: #4A8B6E">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
</div>
<div>
<div class="sub-group-label">¿En qué se gasta?</div>
<div class="sub-group-tag">DOS CLASIFICADORES</div>
</div>
</div>
</div>
<div class="sub-grid">
{#each WIDGETS_EN_QUE as w}
<a
href={w.href}
class="widget-card sub-card"
class:wh={hovered === w.id}
on:mouseenter={() => hovered = w.id}
on:mouseleave={() => hovered = null}
>
<div class="widget-top">
<h4 class="widget-q sub-q">{w.q}</h4>
<button class="help-btn help-xs" on:click={(e) => openModal(e, w.id)}>?</button>
</div>
<p class="widget-desc sub-desc">{w.d}</p>
<div class="widget-footer sub-footer">
<span class="widget-tech sub-tech">{w.t}</span>
<span class="widget-arrow" class:arrow-show={hovered === w.id}>→</span>
</div>
<div class="widget-glow widget-glow-green"></div>
</a>
{/each}
</div>
</div>
<!-- Bottom row -->
<div class="bottom-grid">
{#each WIDGETS_BOTTOM as w}
<a
href={w.href}
class="widget-card"
class:wh={hovered === w.id}
on:mouseenter={() => hovered = w.id}
on:mouseleave={() => hovered = null}
>
<div class="widget-top">
<h4 class="widget-q">{w.q}</h4>
<button class="help-btn" on:click={(e) => openModal(e, w.id)}>?</button>
</div>
<p class="widget-desc">{w.d}</p>
<div class="widget-footer">
<span class="widget-tech">{w.t}</span>
<span class="widget-arrow" class:arrow-show={hovered === w.id}>→</span>
</div>
<div class="widget-glow widget-glow-green"></div>
</a>
{/each}
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- ═══ MODAL ═══ -->
{#if modal}
<div
class="modal-overlay"
on:click={closeModal}
on:keydown={(e) => e.key === 'Escape' && closeModal()}
role="dialog"
aria-modal="true"
transition:fade={{ duration: 150 }}
>
<div
class="modal-box"
on:click|stopPropagation
role="document"
transition:scale={{ duration: 200, start: 0.95, easing: cubicOut }}
>
<button class="modal-close" on:click={closeModal}>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
</button>
<div class="modal-badge">{modal.tech}</div>
<h2 class="modal-title">{modal.title}</h2>
<div class="modal-section">
<div class="modal-icon">👤</div>
<div>
<div class="modal-label">EN LA VIDA COTIDIANA</div>
<p class="modal-text">{modal.everyday}</p>
</div>
</div>
<div class="modal-divider"></div>
<div class="modal-section">
<div class="modal-icon">🏛️</div>
<div>
<div class="modal-label">EN EL PRESUPUESTO</div>
<p class="modal-text">{modal.budget}</p>
</div>
</div>
<div class="modal-example">
<p>{modal.example}</p>
</div>
</div>
</div>
{/if}
<style>
.clasificadores-page {
/* ── Base ── */
.page {
background: var(--theme-body);
color: var(--theme-titulo);
font-family: 'Instrument Sans', sans-serif;
min-height: 100vh;
max-width: 1000px;
margin: 0 auto;
padding: 0 2rem;
display: flex;
flex-direction: column;
justify-content: center;
font-family: 'Instrument Sans', sans-serif;
transition: background-color 0.2s, color 0.2s;
}
/* ── Entrance animations ── */
.anim {
opacity: 0;
transform: translateY(24px);
transition: all 0.7s cubic-bezier(0.16,1,0.3,1);
transition-delay: var(--d, 0ms);
}
.mounted .anim {
opacity: 1;
transform: translateY(0);
}
/* ── Header ── */
.page-header {
padding: 1.25rem 0 1.5rem;
margin-bottom: 1.25rem;
border-bottom: 1px solid var(--theme-borde);
padding: 1.5rem 2rem 2rem;
max-width: 1120px;
margin: 0 auto;
}
.breadcrumb {
margin-bottom: 0.75rem;
margin-bottom: 1rem;
font-family: 'DM Mono', monospace;
font-size: 0.75rem;
}
.breadcrumb-link {
display: inline-block;
color: var(--theme-texto);
text-decoration: none;
font-family: 'DM Mono', monospace;
font-size: 0.75rem;
letter-spacing: 0.05em;
transition: color 0.2s;
}
.breadcrumb-link:hover {
color: var(--theme-titulo);
}
.label-top {
display: block;
font-family: 'DM Mono', monospace;
font-size: 0.68rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--theme-texto);
margin-bottom: 0.5rem;
.sm-hidden { display: block; }
.breadcrumb-full { display: none; }
@media (min-width: 640px) {
.sm-hidden { display: none; }
.breadcrumb-full {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--theme-texto);
}
.breadcrumb-full a {
color: var(--theme-texto);
text-decoration: none;
transition: color 0.2s;
}
.breadcrumb-full a:hover {
color: var(--theme-titulo);
}
.breadcrumb-sep {
opacity: 0.5;
}
.breadcrumb-current {
color: var(--theme-titulo);
}
}
h1 {
.header-content h1 {
font-family: 'DM Serif Display', serif;
font-size: clamp(1.8rem, 4vw, 2.5rem);
font-size: clamp(1.75rem, 4vw, 2rem);
line-height: 1.1;
letter-spacing: -0.02em;
margin-bottom: 0.75rem;
color: var(--theme-titulo);
margin-bottom: 0.5rem;
}
.subtitulo {
max-width: 520px;
font-size: 0.95rem;
line-height: 1.5;
color: var(--theme-texto);
max-width: 600px;
}
/* ── Masonry Grid ── */
.grid-clasificadores {
column-count: 3;
column-gap: 0.875rem;
margin-bottom: 1.5rem;
.help-inline {
font-family: 'DM Serif Display', serif;
font-weight: 700;
color: var(--theme-texto);
border: 1px solid var(--theme-borde);
border-radius: 50%;
padding: 0 5px;
font-size: 0.7rem;
}
.card {
display: block;
break-inside: avoid;
margin-bottom: 0.875rem;
padding: 1.25rem 1.35rem;
main {
max-width: 1120px;
margin: 0 auto;
padding: 2rem 2rem 4rem;
}
/* ── Group (level 1) ── */
.group {
background: var(--theme-surface);
border-radius: 6px;
text-decoration: none;
color: var(--theme-titulo);
transition: all 0.15s ease;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
border: 1px solid var(--theme-borde);
border-radius: 1.5rem;
padding: 1.25rem 1.125rem 1.125rem;
position: relative;
overflow: hidden;
}
.card:hover {
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border-color: var(--theme-accent);
.group-stretch {
display: flex;
flex-direction: column;
height: 100%;
}
.card:nth-child(1),
.card:nth-child(5) {
padding: 1.5rem 1.35rem;
.group-accent {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 30%, transparent), transparent);
border-radius: 1.5rem 1.5rem 0 0;
}
.card-meta {
.group-header {
display: flex;
align-items: center;
gap: 0.4rem;
margin-bottom: 0.6rem;
gap: 0.625rem;
margin-bottom: 0.875rem;
padding: 0 0.25rem;
}
.card-numero {
font-family: 'DM Mono', monospace;
font-size: 0.7rem;
font-weight: 500;
color: var(--theme-accent);
letter-spacing: 0.05em;
.group-icon {
width: 2rem;
height: 2rem;
border-radius: 0.625rem;
background: color-mix(in srgb, var(--c) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--c) 20%, transparent);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--c);
}
.card-nombre {
.group-label {
font-family: 'DM Mono', monospace;
font-size: 0.6rem;
font-size: 0.75rem;
letter-spacing: 0.15em;
font-weight: 600;
line-height: 1;
color: var(--theme-titulo);
}
.group-sub {
font-family: 'Instrument Sans', sans-serif;
font-size: 0.688rem;
color: var(--theme-texto);
letter-spacing: 0.02em;
padding-left: 0.4rem;
border-left: 1px solid var(--theme-borde);
margin-top: 0.25rem;
opacity: 0.8;
}
.card-titulo {
font-family: 'DM Serif Display', serif;
font-size: 1.35rem;
font-weight: 400;
line-height: 1.15;
letter-spacing: -0.015em;
margin-bottom: 0.35rem;
.group-widgets {
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.widgets-stretch {
display: flex;
flex-direction: column;
gap: 0.625rem;
flex: 1;
}
/* ── Widget card (level 2) ── */
.widget-card {
display: block;
background: var(--theme-fill);
border: 1px solid var(--theme-borde);
border-radius: 1rem;
padding: 1.375rem;
position: relative;
overflow: hidden;
cursor: pointer;
text-decoration: none;
color: var(--theme-titulo);
transition: color 0.15s;
transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
}
.wh {
background: color-mix(in srgb, var(--theme-fill) 80%, var(--theme-titulo) 5%);
border-color: color-mix(in srgb, var(--theme-borde) 50%, var(--theme-texto) 20%);
transform: translateY(-1px);
}
.widget-grow {
flex: 1;
display: flex;
flex-direction: column;
}
.card:hover .card-titulo {
color: var(--theme-accent);
/* Horizontal variant */
.widget-h {
display: flex;
justify-content: space-between;
align-items: center;
}
.widget-h-left { flex: 1; }
.widget-h-right {
display: flex;
align-items: center;
gap: 0.625rem;
flex-shrink: 0;
}
.card-desc {
font-size: 0.78rem;
color: var(--theme-texto);
line-height: 1.45;
.widget-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.625rem;
margin-bottom: 0.5rem;
position: relative;
z-index: 1;
}
.widget-q {
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.2;
font-family: 'Instrument Sans', sans-serif;
color: var(--theme-titulo);
}
.widget-desc {
font-family: 'Instrument Sans', sans-serif;
font-size: 0.75rem;
color: var(--theme-texto);
line-height: 1.5;
position: relative;
z-index: 1;
}
.widget-desc-grow { flex: 1; }
.widget-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 1rem;
position: relative;
z-index: 1;
}
.widget-tech {
font-family: 'DM Mono', monospace;
font-size: 0.5rem;
letter-spacing: 0.12em;
color: var(--theme-texto);
text-transform: uppercase;
}
.widget-arrow {
font-family: 'Instrument Sans', sans-serif;
font-size: 0.813rem;
color: transparent;
transform: translateX(-6px);
transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
}
.arrow-show {
color: var(--theme-titulo);
transform: translateX(0);
}
.widget-glow {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
transition: opacity 0.4s;
}
.widget-glow-accent {
background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--theme-accent) 6%, transparent), transparent 70%);
}
.widget-glow-green {
background: radial-gradient(circle at 50% 50%, rgba(74,139,110,0.06), transparent 70%);
}
.wh > .widget-glow,
.wh .widget-glow { opacity: 1; }
.card-ejemplo {
font-size: 0.68rem;
/* ── Sub-group (¿En qué?) ── */
.sub-group {
background: color-mix(in srgb, var(--theme-surface) 60%, var(--theme-body) 40%);
border: 1px solid var(--theme-borde);
border-radius: 1.125rem;
padding: 1rem 0.875rem 0.875rem;
position: relative;
overflow: hidden;
}
.sub-group-accent {
position: absolute;
top: 0;
left: 15%;
right: 15%;
height: 1px;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 25%, transparent), transparent);
}
.sub-group-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.75rem;
padding: 0 0.25rem;
}
.sub-group-left {
display: flex;
align-items: center;
gap: 0.5rem;
}
.sub-group-icon {
width: 1.5rem;
height: 1.5rem;
border-radius: 0.375rem;
background: color-mix(in srgb, var(--c) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--c) 18%, transparent);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--c);
}
.sub-group-label {
font-family: 'Instrument Sans', sans-serif;
font-size: 0.75rem;
font-weight: 600;
color: var(--theme-texto);
line-height: 1.1;
}
.sub-group-tag {
font-family: 'DM Mono', monospace;
font-size: 0.438rem;
letter-spacing: 0.1em;
margin-top: 0.125rem;
color: #4A8B6E;
opacity: 0.7;
line-height: 1.4;
}
/* ── Footer ── */
.page-footer {
padding-top: 1rem;
.sub-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
/* ── Sub-widget (level 3) ── */
.sub-card {
background: var(--theme-fill);
border-color: var(--theme-borde);
padding: 1rem;
border-radius: 0.75rem;
}
.sub-card.wh {
background: color-mix(in srgb, var(--theme-fill) 80%, var(--theme-titulo) 5%);
border-color: color-mix(in srgb, var(--theme-borde) 50%, var(--theme-texto) 20%);
}
.sub-q {
font-size: 0.813rem;
font-weight: 500;
color: var(--theme-titulo);
}
.sub-desc {
font-size: 0.688rem;
opacity: 0.9;
}
.sub-footer { margin-top: 0.75rem; }
.sub-tech { font-size: 0.375rem; }
.bottom-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.625rem;
}
/* ── Main grid ── */
.main-grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 1rem;
margin-top: 1rem;
align-items: stretch;
}
.col-stretch {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.page-footer p {
font-size: 0.75rem;
/* ── Help button ── */
.help-btn {
width: 1.625rem;
height: 1.625rem;
border-radius: 50%;
border: 1px solid var(--theme-borde);
background: transparent;
color: var(--theme-texto);
font-family: 'DM Serif Display', serif;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.help-btn:hover {
border-color: var(--theme-accent);
color: var(--theme-accent);
background: color-mix(in srgb, var(--theme-accent) 8%, transparent);
}
.help-sm { width: 1.375rem; height: 1.375rem; font-size: 0.625rem; }
.help-xs { width: 1.25rem; height: 1.25rem; font-size: 0.563rem; }
.page-footer a {
/* ── Modal ── */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(12px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 2.5rem;
}
.modal-box {
background: var(--theme-surface);
border: 1px solid var(--theme-borde);
border-radius: 1.5rem;
max-width: 520px;
width: 100%;
padding: 2rem 2.25rem;
position: relative;
max-height: 85vh;
overflow-y: auto;
}
.modal-close {
position: absolute;
top: 1rem;
right: 1rem;
background: transparent;
border: 1px solid var(--theme-borde);
border-radius: 50%;
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
color: var(--theme-texto);
text-decoration: none;
border-bottom: 1px solid var(--theme-borde);
transition: border-color 0.2s, color 0.2s;
cursor: pointer;
transition: all 0.2s;
}
.page-footer a:hover {
border-color: var(--theme-accent);
.modal-close:hover {
border-color: var(--theme-texto);
color: var(--theme-titulo);
}
.footnote {
.modal-badge {
font-family: 'DM Mono', monospace;
font-size: 0.563rem;
letter-spacing: 0.15em;
border-radius: 0.375rem;
padding: 0.25rem 0.563rem;
display: inline-block;
margin-bottom: 0.875rem;
background: color-mix(in srgb, var(--theme-accent) 12%, transparent);
color: var(--theme-accent);
}
.modal-title {
font-family: 'DM Serif Display', serif;
font-size: 1.5rem;
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.15;
margin-bottom: 1.5rem;
color: var(--theme-titulo);
}
.modal-section {
display: flex;
gap: 0.875rem;
}
.modal-icon {
font-size: 1.125rem;
width: 2.25rem;
height: 2.25rem;
background: var(--theme-fill);
border-radius: 0.625rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 1px solid var(--theme-borde);
}
.modal-label {
font-family: 'DM Mono', monospace;
font-size: 0.58rem;
font-size: 0.563rem;
letter-spacing: 0.15em;
color: var(--theme-texto);
opacity: 0.7;
line-height: 1.5;
margin-bottom: 0.313rem;
}
.modal-text {
font-family: 'Instrument Sans', sans-serif;
font-size: 0.813rem;
line-height: 1.65;
color: var(--theme-texto);
}
.modal-divider {
height: 1px;
background: var(--theme-borde);
margin: 1.125rem 0;
margin-left: 3.125rem;
}
.modal-example {
margin-top: 1.25rem;
margin-left: 3.125rem;
padding: 0.875rem 1.125rem;
border-left: 3px solid var(--theme-accent);
background: color-mix(in srgb, var(--theme-accent) 5%, transparent);
border-radius: 0 0.625rem 0.625rem 0;
}
.modal-example p {
font-family: 'Instrument Sans', sans-serif;
font-size: 0.75rem;
line-height: 1.6;
color: var(--theme-texto);
font-style: italic;
}
/* ── Responsive ── */
@media (max-width: 900px) {
.grid-clasificadores {
column-count: 2;
.main-grid {
grid-template-columns: 1fr;
}
.clasificadores-page {
justify-content: flex-start;
padding-top: 1rem;
.page-header,
main {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
@media (max-width: 540px) {
.clasificadores-page {
padding: 1rem 1rem 1.5rem;
justify-content: flex-start;
@media (max-width: 640px) {
.page-header,
main {
padding-left: 1rem;
padding-right: 1rem;
}
.sub-grid,
.bottom-grid {
grid-template-columns: 1fr;
}
.widget-h {
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
.grid-clasificadores {
column-count: 1;
.widget-h-right {
width: 100%;
justify-content: space-between;
}
.card {
padding: 1rem 1.15rem;
.modal-overlay {
padding: 1rem;
}
.card:nth-child(1),
.card:nth-child(5) {
padding: 1rem 1.15rem;
.modal-box {
padding: 1.5rem;
}
.card-pregunta {
font-size: 1.1rem;
.modal-example,
.modal-divider {
margin-left: 0;
}
h1 { font-size: 1.4rem; }
}
</style>
......
......@@ -836,7 +836,7 @@
<div class="min-h-screen" style="font-family: 'Instrument Sans', sans-serif; background-color: var(--theme-body); color: var(--theme-titulo); transition: background-color 0.2s, color 0.2s;">
<!-- Header pedagógico -->
<header class="border-b" style="border-color: var(--theme-borde); background-color: var(--theme-body);">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 py-6">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 {viewMode === 'mapa' ? 'py-3' : 'py-6'}">
<!-- Breadcrumb: responsive -->
<nav class="mb-4" style="font-family: 'DM Mono', monospace; font-size: 0.75rem;">
<!-- Móvil: solo padre -->
......@@ -855,48 +855,51 @@
<p class="text-xs uppercase tracking-widest mb-2" style="font-family: 'DM Mono', monospace; color: var(--theme-texto);">
Clasificador 03
</p>
<h1 class="text-3xl mb-3" style="font-family: 'DM Serif Display', serif; color: var(--theme-titulo);">
<h1 class="{viewMode === 'mapa' ? 'text-2xl mb-2' : 'text-3xl mb-3'}" style="font-family: 'DM Serif Display', serif; color: var(--theme-titulo);">
¿En qué se gasta?
</h1>
<p class="leading-relaxed mb-3" style="color: var(--theme-texto);">
Ordena el gasto según <strong style="color: var(--theme-titulo);">qué se compra o paga</strong>:
sueldos, alquileres, combustible, medicamentos, construcciones, deudas, transferencias.
Es la forma más directa de entender en qué se usa el dinero público.
</p>
{#if totalItems > 0}
<p class="text-sm mb-5" style="font-family: 'DM Mono', monospace; color: var(--theme-texto);">
<span style="color: var(--theme-titulo); font-weight: 500;">{totalItems}</span> categorías de gasto:
{countByNivel.grupos} grupos, {countByNivel.subgrupos} subgrupos, {countByNivel.partidas} partidas, {countByNivel.subpartidas} subpartidas
{#if viewMode !== 'mapa'}
<p class="leading-relaxed mb-3" style="color: var(--theme-texto);">
Ordena el gasto según <strong style="color: var(--theme-titulo);">qué se compra o paga</strong>:
sueldos, alquileres, combustible, medicamentos, construcciones, deudas, transferencias.
Es la forma más directa de entender en qué se usa el dinero público.
</p>
{/if}
<!-- Jerarquía -->
<div class="hidden sm:flex flex-wrap items-center gap-2 sm:gap-3 text-xs mb-6" style="font-family: 'DM Mono', monospace;">
<span class="px-2.5 py-1 rounded-full font-medium" style="background-color: var(--theme-accent); color: var(--theme-body); opacity: 0.9;">
Grupo
</span>
<span style="color: var(--theme-texto);">→</span>
<span class="px-2.5 py-1 rounded-full" style="background-color: var(--theme-fill); color: var(--theme-titulo); border: 1px solid var(--theme-borde);">
Subgrupo
</span>
<span style="color: var(--theme-texto);">→</span>
<span class="px-2.5 py-1 rounded-full" style="background-color: var(--theme-fill); color: var(--theme-titulo); border: 1px solid var(--theme-borde);">
Partida
</span>
<span style="color: var(--theme-texto);">→</span>
<span class="px-2.5 py-1 rounded-full" style="background-color: var(--theme-fill); color: var(--theme-titulo); border: 1px solid var(--theme-borde);">
Subpartida
</span>
</div>
<!-- Versión móvil simplificada -->
<p class="sm:hidden text-sm mb-4" style="font-family: 'DM Mono', monospace; color: var(--theme-texto);">
Jerarquía: Grupo → Subgrupo → Partida → Subpartida
</p>
{#if totalItems > 0}
<p class="text-sm mb-5" style="font-family: 'DM Mono', monospace; color: var(--theme-texto);">
<span style="color: var(--theme-titulo); font-weight: 500;">{totalItems}</span> categorías de gasto:
{countByNivel.grupos} grupos, {countByNivel.subgrupos} subgrupos, {countByNivel.partidas} partidas, {countByNivel.subpartidas} subpartidas
</p>
{/if}
<!-- Jerarquía -->
<div class="hidden sm:flex flex-wrap items-center gap-2 sm:gap-3 text-xs mb-6" style="font-family: 'DM Mono', monospace;">
<span class="px-2.5 py-1 rounded-full font-medium" style="background-color: var(--theme-accent); color: var(--theme-body); opacity: 0.9;">
Grupo
</span>
<span style="color: var(--theme-texto);">→</span>
<span class="px-2.5 py-1 rounded-full" style="background-color: var(--theme-fill); color: var(--theme-titulo); border: 1px solid var(--theme-borde);">
Subgrupo
</span>
<span style="color: var(--theme-texto);">→</span>
<span class="px-2.5 py-1 rounded-full" style="background-color: var(--theme-fill); color: var(--theme-titulo); border: 1px solid var(--theme-borde);">
Partida
</span>
<span style="color: var(--theme-texto);">→</span>
<span class="px-2.5 py-1 rounded-full" style="background-color: var(--theme-fill); color: var(--theme-titulo); border: 1px solid var(--theme-borde);">
Subpartida
</span>
</div>
<!-- Versión móvil simplificada -->
<p class="sm:hidden text-sm mb-4" style="font-family: 'DM Mono', monospace; color: var(--theme-texto);">
Jerarquía: Grupo → Subgrupo → Partida → Subpartida
</p>
{/if}
</div>
<!-- Controles de visualización (fuera del max-w-3xl para usar todo el ancho) -->
<div class="mt-8">
<div class="{viewMode === 'mapa' ? 'mt-3' : 'mt-8'}">
<!-- Fila principal: Toggle + Guía + Filtros -->
<div class="flex flex-col md:flex-row gap-4 md:items-center md:justify-between">
<!-- Toggle + Guía inline -->
......
<script>
import { supabase } from '$lib/supabase';
import { onMount } from 'svelte';
import { fade, scale } from 'svelte/transition';
import { cubicOut } from 'svelte/easing';
let loading = $state(true);
let searchQuery = $state('');
......@@ -9,6 +11,7 @@
let selectedTipo = $state(null);
let selectedItem = $state(null);
let highlightedItem = $state(null);
let sidebarOpen = $state(false);
onMount(async () => {
const { data, error } = await supabase
......@@ -154,6 +157,7 @@
selectedItem = null;
searchQuery = '';
highlightedItem = null;
sidebarOpen = false;
}
function openDetail(item) {
......@@ -172,6 +176,7 @@
selectedTipo = targetTipo;
highlightedItem = item.rubro;
searchQuery = '';
sidebarOpen = false;
setTimeout(() => {
const prefix = item.nivel === 'clase' ? 'cl' : item.nivel === 'cuenta' ? 'cu' : 'sc';
......@@ -180,6 +185,11 @@
element.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}, 100);
// Limpiar highlight después de la animación (2 pulsos de 0.8s = 1.6s + margen)
setTimeout(() => {
highlightedItem = null;
}, 2000);
}
}
......@@ -200,85 +210,192 @@
let tipoContent = $derived(selectedTipo ? getItemsForTipo(selectedTipo.rubro) : { clases: [] });
let searchResults = $derived(searchGlobal(searchQuery));
let isSearching = $derived(searchQuery.length >= 2);
// Contadores
let totalItems = $derived(allItems.length);
let countByNivel = $derived({
tipos: allItems.filter(i => i.nivel === 'tipo').length,
clases: allItems.filter(i => i.nivel === 'clase').length,
cuentas: allItems.filter(i => i.nivel === 'cuenta').length,
subcuentas: allItems.filter(i => i.nivel === 'sub_cuenta').length
});
</script>
<svelte:head>
<title>Rubros | Presupuesto Público</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="min-h-screen bg-white">
<!-- Header -->
<header class="border-b bg-slate-50">
<div class="max-w-screen-2xl mx-auto px-6 py-4">
<nav class="text-sm text-slate-500 mb-2">
<a href="/" class="hover:text-slate-700">Inicio</a>
<span class="mx-2">/</span>
<a href="/clasificadores" class="hover:text-slate-700">Clasificadores</a>
<span class="mx-2">/</span>
<span class="text-slate-900">Rubros</span>
<div class="min-h-screen" style="font-family: 'Instrument Sans', sans-serif; background-color: var(--theme-body); color: var(--theme-titulo); transition: background-color 0.2s, color 0.2s;">
<!-- Header pedagógico -->
<header class="border-b" style="border-color: var(--theme-borde); background-color: var(--theme-body);">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 py-6">
<!-- Breadcrumb: responsive -->
<nav class="mb-4" style="font-family: 'DM Mono', monospace; font-size: 0.75rem;">
<!-- Móvil: solo padre -->
<a href="/clasificadores" class="sm:hidden transition-colors" style="color: var(--theme-texto);">
← Clasificadores
</a>
<!-- Desktop: ruta completa -->
<div class="hidden sm:flex items-center gap-2" style="color: var(--theme-texto);">
<a href="/" class="transition-colors hover:opacity-80">Inicio</a>
<span style="opacity: 0.5;">/</span>
<a href="/clasificadores" class="transition-colors hover:opacity-80">Clasificadores</a>
</div>
</nav>
<div class="flex items-center justify-between">
<h1 class="text-2xl font-light text-slate-900">Clasificador por Rubros de Ingresos</h1>
<div class="max-w-3xl">
<p class="text-xs uppercase tracking-widest mb-2" style="font-family: 'DM Mono', monospace; color: var(--theme-texto);">
Clasificador 01
</p>
<h1 class="text-3xl mb-3" style="font-family: 'DM Serif Display', serif; color: var(--theme-titulo);">
¿De dónde vienen los ingresos?
</h1>
<p class="leading-relaxed mb-3" style="color: var(--theme-texto);">
Organiza los ingresos del Estado según su <strong style="color: var(--theme-titulo);">origen económico</strong>:
impuestos, ventas de bienes, regalías, transferencias, créditos.
Es la forma de entender cómo se financia el presupuesto público.
</p>
{#if totalItems > 0}
<p class="text-sm mb-5" style="font-family: 'DM Mono', monospace; color: var(--theme-texto);">
<span style="color: var(--theme-titulo); font-weight: 500;">{totalItems}</span> categorías de ingreso:
{countByNivel.tipos} tipos, {countByNivel.clases} clases, {countByNivel.cuentas} cuentas, {countByNivel.subcuentas} subcuentas
</p>
{/if}
<!-- Jerarquía -->
<div class="hidden sm:flex flex-wrap items-center gap-2 sm:gap-3 text-xs mb-6" style="font-family: 'DM Mono', monospace;">
<span class="px-2.5 py-1 rounded-full font-medium" style="background-color: var(--theme-accent); color: var(--theme-body); opacity: 0.9;">
Tipo
</span>
<span style="color: var(--theme-texto);">→</span>
<span class="px-2.5 py-1 rounded-full" style="background-color: var(--theme-fill); color: var(--theme-titulo); border: 1px solid var(--theme-borde);">
Clase
</span>
<span style="color: var(--theme-texto);">→</span>
<span class="px-2.5 py-1 rounded-full" style="background-color: var(--theme-fill); color: var(--theme-titulo); border: 1px solid var(--theme-borde);">
Cuenta
</span>
<span style="color: var(--theme-texto);">→</span>
<span class="px-2.5 py-1 rounded-full" style="background-color: var(--theme-fill); color: var(--theme-titulo); border: 1px solid var(--theme-borde);">
Subcuenta
</span>
</div>
<!-- Versión móvil simplificada -->
<p class="sm:hidden text-sm mb-4" style="font-family: 'DM Mono', monospace; color: var(--theme-texto);">
Jerarquía: Tipo → Clase → Cuenta → Subcuenta
</p>
</div>
</div>
</header>
{#if loading}
<div class="flex items-center justify-center py-20">
<p class="text-slate-500">Cargando clasificador...</p>
<p style="color: var(--theme-texto);">Cargando clasificador...</p>
</div>
{:else}
<div class="max-w-screen-2xl mx-auto flex">
<!-- Botón móvil para abrir sidebar -->
<div class="lg:hidden px-4 py-3 border-b" style="border-color: var(--theme-borde); background-color: var(--theme-fill);">
<button
onclick={() => sidebarOpen = !sidebarOpen}
class="flex items-center gap-2 text-sm"
style="color: var(--theme-texto);"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<span class="font-medium">{selectedTipo ? getDescripcion(selectedTipo) : 'Seleccionar tipo'}</span>
<svg class="w-4 h-4 ml-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
</div>
<div class="max-w-screen-xl mx-auto flex px-4">
<!-- Sidebar izquierda: Tipos -->
<aside class="w-64 flex-shrink-0 border-r bg-slate-50/50">
<div class="sticky top-0 h-screen overflow-y-auto p-4">
<!-- En móvil: overlay, en desktop: sidebar fijo -->
{#if sidebarOpen}
<div
transition:fade={{ duration: 150 }}
class="fixed inset-0 bg-black/30 z-40 lg:hidden"
onclick={() => sidebarOpen = false}
></div>
{/if}
<aside class="
{sidebarOpen ? 'translate-x-0' : '-translate-x-full'}
lg:translate-x-0
fixed lg:relative
inset-y-0 left-0
w-72 lg:w-64
z-50 lg:z-auto
transition-transform duration-200 ease-in-out
lg:flex-shrink-0
shadow-xl lg:shadow-none
sidebar-left
">
<div class="h-full lg:h-screen lg:sticky lg:top-0 overflow-y-auto py-6 px-4 lg:px-0 lg:pr-6">
<!-- Cerrar en móvil -->
<div class="flex justify-between items-center mb-4 lg:hidden">
<span class="text-sm font-medium" style="color: var(--theme-titulo);">Tipos de ingreso</span>
<button onclick={() => sidebarOpen = false} style="color: var(--theme-texto);">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Buscador -->
<div class="mb-6">
<input
type="text"
bind:value={searchQuery}
placeholder="Buscar..."
class="w-full px-3 py-2 text-sm border border-slate-200 rounded-md bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
class="w-full px-3 py-2 text-sm rounded-md focus:outline-none focus:ring-2"
style="border: 1px solid var(--theme-borde); background-color: var(--theme-surface); color: var(--theme-titulo);"
/>
</div>
<!-- Resultados de búsqueda -->
{#if isSearching}
<div class="mb-4">
<p class="text-xs text-slate-500 uppercase tracking-wide mb-2">
<p class="text-xs uppercase tracking-wide mb-2" style="color: var(--theme-texto);">
{searchResults.length} resultados
</p>
<div class="space-y-1">
{#each searchResults as result}
<button
class="w-full text-left px-2 py-2 text-sm rounded hover:bg-white hover:shadow-sm transition-all"
class="w-full text-left px-2 py-2 text-sm rounded transition-all"
style="color: var(--theme-titulo);"
onclick={() => goToSearchResult(result)}
>
<span class="text-xs text-slate-400 block">{getNivelLabel(result.nivel)}</span>
<span class="font-mono text-xs text-blue-600">{result.rubro}</span>
<span class="text-slate-700 ml-1">{getDescripcion(result)}</span>
<span class="text-xs block" style="color: var(--theme-texto);">{getNivelLabel(result.nivel)}</span>
<span class="font-mono text-xs font-medium" style="color: var(--theme-accent);">{result.rubro}</span>
<span class="ml-1">{getDescripcion(result)}</span>
</button>
{/each}
{#if searchResults.length === 0}
<p class="text-sm text-slate-400 px-2">Sin resultados</p>
<p class="text-sm px-2" style="color: var(--theme-texto);">Sin resultados</p>
{/if}
</div>
</div>
{:else}
<!-- Lista de tipos -->
<nav>
<p class="text-xs text-slate-500 uppercase tracking-wide mb-3 px-2">Tipos</p>
<p class="text-xs uppercase tracking-wide mb-3 px-2 hidden lg:block" style="color: var(--theme-texto);">Tipos</p>
<ul class="space-y-1">
{#each tipos as tipo}
<li>
<button
class="w-full text-left px-3 py-2 rounded-md text-sm transition-all
{selectedTipo?.rubro === tipo.rubro
? 'bg-blue-50 text-blue-900 font-medium border-l-2 border-blue-500'
: 'text-slate-600 hover:bg-white hover:text-slate-900'}"
class="w-full text-left px-3 py-2 rounded-md text-sm transition-all"
style="{selectedTipo?.rubro === tipo.rubro
? `background-color: color-mix(in srgb, var(--theme-accent) 15%, transparent); color: var(--theme-titulo); font-weight: 500; border-left: 2px solid var(--theme-accent);`
: `color: var(--theme-texto);`}"
onclick={() => selectTipo(tipo)}
>
<span class="font-mono text-xs text-slate-400 block">{tipo.rubro}</span>
<span class="font-mono text-xs block" style="color: var(--theme-texto);">{tipo.rubro}</span>
{getDescripcion(tipo)}
</button>
</li>
......@@ -290,17 +407,20 @@
</aside>
<!-- Contenido principal -->
<main class="flex-1 min-w-0">
<div class="px-8 py-6">
<main class="flex-1 min-w-0 lg:border-l xl:border-r" style="border-color: var(--theme-borde);">
<div class="px-4 sm:px-6 lg:px-10 py-6 lg:py-8">
{#if selectedTipo}
{#key selectedTipo.rubro}
<div in:fade={{ duration: 200, delay: 50 }}>
<!-- Título del tipo -->
<div class="mb-8 pb-6 border-b">
<p class="text-sm font-mono text-slate-400 mb-1">{selectedTipo.rubro}</p>
<h2 class="text-xl font-medium text-slate-900 mb-2 flex items-center gap-3">
<div class="mb-8 lg:mb-10 pb-6 lg:pb-8 border-b" style="border-color: var(--theme-borde);">
<p class="text-sm font-mono mb-1" style="color: var(--theme-texto);">{selectedTipo.rubro}</p>
<h2 class="text-lg sm:text-xl font-medium mb-2 flex items-center gap-2 sm:gap-3 flex-wrap" style="color: var(--theme-titulo);">
{getDescripcion(selectedTipo)}
<a
href="/rubro/{selectedTipo.rubro}"
class="text-slate-300 hover:text-blue-500 transition-colors"
class="transition-colors hover:text-[var(--theme-accent)]"
style="color: var(--theme-texto);"
title="Ver detalle"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
......@@ -311,7 +431,7 @@
{#if selectedTipo.descripciones}
{@const tipoDescs = parseDescripciones(selectedTipo.descripciones)}
{#if tipoDescs.length > 0}
<p class="text-slate-600 leading-relaxed">{tipoDescs[0].descripcion}</p>
<p class="leading-relaxed" style="color: var(--theme-texto);">{tipoDescs[0].descripcion}</p>
{#if selectedTipo.n_variaciones > 1}
<button
class="text-sm text-orange-500 hover:text-orange-700 mt-2 transition-colors underline decoration-dotted decoration-orange-300 hover:decoration-orange-500 cursor-pointer"
......@@ -325,17 +445,17 @@
</div>
<!-- Clases -->
<div class="space-y-8">
<div class="space-y-12">
{#each tipoContent.clases as clase}
{@const claseDescs = parseDescripciones(clase.descripciones)}
<section
id="cl-{clase.rubro}"
class="scroll-mt-4 {highlightedItem === clase.rubro ? 'ring-2 ring-blue-200 rounded-lg' : ''}"
class="scroll-mt-4 {highlightedItem === clase.rubro ? 'highlighted' : ''}"
>
<div class="flex items-start gap-4 mb-3">
<span class="font-mono text-sm text-slate-400 pt-1">{clase.rubro}</span>
<div class="flex items-start gap-2 sm:gap-4 mb-3">
<span class="font-mono text-xs sm:text-sm pt-1" style="color: var(--theme-texto);">{clase.rubro}</span>
<div class="flex-1">
<h3 class="text-lg font-medium text-slate-900 flex items-center gap-2">
<h3 class="text-base sm:text-lg font-medium flex items-center gap-2 flex-wrap" style="color: var(--theme-titulo);">
<span class="text-left">{getDescripcion(clase)}</span>
{#if clase.n_variaciones > 1}
<button
......@@ -348,7 +468,8 @@
{/if}
<a
href="/rubro/{clase.rubro}"
class="text-slate-300 hover:text-blue-500 transition-colors"
class="transition-colors hover:text-[var(--theme-accent)]"
style="color: var(--theme-texto);"
title="Ver página de detalle"
>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
......@@ -357,24 +478,24 @@
</a>
</h3>
{#if claseDescs.length > 0}
<p class="text-sm text-slate-600 mt-1 leading-relaxed">{claseDescs[0].descripcion}</p>
<p class="text-sm mt-1 leading-relaxed" style="color: var(--theme-texto);">{claseDescs[0].descripcion}</p>
{/if}
</div>
</div>
<!-- Cuentas -->
{#if clase.cuentas?.length > 0}
<div class="ml-16 space-y-4 border-l-2 border-slate-100 pl-6">
<div class="ml-4 sm:ml-8 lg:ml-16 space-y-5 border-l pl-4 sm:pl-6 lg:pl-8" style="border-color: var(--theme-borde);">
{#each clase.cuentas as cuenta}
{@const cuentaDescs = parseDescripciones(cuenta.descripciones)}
<div
id="cu-{cuenta.rubro}"
class="scroll-mt-4 {highlightedItem === cuenta.rubro ? 'ring-2 ring-blue-200 rounded-lg p-2 -ml-2' : ''}"
class="scroll-mt-4 {highlightedItem === cuenta.rubro ? 'highlighted-md' : ''}"
>
<div class="flex items-start gap-3">
<span class="font-mono text-xs text-slate-400 pt-0.5">{cuenta.rubro}</span>
<div class="flex items-start gap-2 sm:gap-3">
<span class="font-mono text-xs pt-0.5" style="color: var(--theme-texto);">{cuenta.rubro}</span>
<div class="flex-1">
<h4 class="text-sm font-medium text-slate-800 flex items-center gap-2">
<h4 class="text-sm font-medium flex items-center gap-2 flex-wrap" style="color: var(--theme-titulo);">
<span class="text-left">{getDescripcion(cuenta)}</span>
{#if cuenta.n_variaciones > 1}
<button
......@@ -387,7 +508,8 @@
{/if}
<a
href="/rubro/{cuenta.rubro}"
class="text-slate-300 hover:text-blue-500 transition-colors"
class="transition-colors hover:text-[var(--theme-accent)]"
style="color: var(--theme-texto);"
title="Ver página de detalle"
>
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
......@@ -396,25 +518,25 @@
</a>
</h4>
{#if cuentaDescs.length > 0}
<p class="text-xs text-slate-500 mt-1 leading-relaxed">{cuentaDescs[0].descripcion}</p>
<p class="text-xs mt-1 leading-relaxed" style="color: var(--theme-texto);">{cuentaDescs[0].descripcion}</p>
{/if}
</div>
</div>
<!-- Subcuentas -->
{#if cuenta.subcuentas?.length > 0}
<div class="ml-12 mt-3 space-y-2 border-l border-slate-100 pl-4">
<div class="ml-8 sm:ml-12 mt-3 space-y-2 border-l pl-4" style="border-color: var(--theme-borde);">
{#each cuenta.subcuentas as subcuenta}
{@const subcuentaDescs = parseDescripciones(subcuenta.descripciones)}
<div
id="sc-{subcuenta.rubro}"
class="scroll-mt-4 {highlightedItem === subcuenta.rubro ? 'ring-2 ring-blue-200 rounded p-1 -ml-1' : ''}"
class="scroll-mt-4 {highlightedItem === subcuenta.rubro ? 'highlighted-sm' : ''}"
>
<div class="flex items-start gap-2">
<span class="font-mono text-xs text-slate-300">{subcuenta.rubro}</span>
<span class="font-mono text-xs" style="color: var(--theme-texto); opacity: 0.7;">{subcuenta.rubro}</span>
<div class="flex-1">
<span class="flex items-center gap-2">
<span class="text-xs text-slate-700">{getDescripcion(subcuenta)}</span>
<span class="flex items-center gap-2 flex-wrap">
<span class="text-xs" style="color: var(--theme-titulo);">{getDescripcion(subcuenta)}</span>
{#if subcuenta.n_variaciones > 1}
<button
class="text-xs text-orange-500 hover:text-orange-700 transition-colors underline decoration-dotted decoration-orange-300 hover:decoration-orange-500 cursor-pointer"
......@@ -426,7 +548,8 @@
{/if}
<a
href="/rubro/{subcuenta.rubro}"
class="text-slate-300 hover:text-blue-500 transition-colors"
class="transition-colors hover:text-[var(--theme-accent)]"
style="color: var(--theme-texto);"
title="Ver página de detalle"
>
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
......@@ -435,7 +558,7 @@
</a>
</span>
{#if subcuentaDescs.length > 0}
<p class="text-xs text-slate-400 mt-0.5">{subcuentaDescs[0].descripcion}</p>
<p class="text-xs mt-0.5" style="color: var(--theme-texto); opacity: 0.8;">{subcuentaDescs[0].descripcion}</p>
{/if}
</div>
</div>
......@@ -450,38 +573,42 @@
</section>
{/each}
</div>
</div>
{/key}
{/if}
</div>
</main>
<!-- Sidebar derecha: En esta página -->
<aside class="w-56 flex-shrink-0 hidden xl:block">
<div class="sticky top-0 h-screen overflow-y-auto p-4 border-l">
<p class="text-xs text-slate-500 uppercase tracking-wide mb-3">En esta página</p>
<div class="sticky top-0 h-screen overflow-y-auto p-4 border-l" style="border-color: var(--theme-borde);">
<p class="text-xs uppercase tracking-wide mb-3" style="font-family: 'DM Mono', monospace; color: var(--theme-texto);">En esta página</p>
{#if selectedTipo && !isSearching}
<nav class="space-y-2">
{#each tipoContent.clases as clase}
<div>
<a
href="#cl-{clase.rubro}"
class="block text-sm text-slate-600 hover:text-blue-600 truncate"
class="block text-sm truncate transition-colors hover:text-[var(--theme-accent)]"
style="color: var(--theme-texto);"
title="{getDescripcion(clase)}"
>
{getDescripcion(clase)}
</a>
{#if clase.cuentas?.length > 0}
<div class="ml-3 mt-1 space-y-1 border-l border-slate-100 pl-2">
<div class="ml-3 mt-1 space-y-1 border-l pl-2" style="border-color: var(--theme-borde);">
{#each clase.cuentas.slice(0, 5) as cuenta}
<a
href="#cu-{cuenta.rubro}"
class="block text-xs text-slate-400 hover:text-blue-600 truncate"
class="block text-xs truncate transition-colors hover:text-[var(--theme-accent)]"
style="color: var(--theme-texto); opacity: 0.7;"
title="{getDescripcion(cuenta)}"
>
{getDescripcion(cuenta)}
</a>
{/each}
{#if clase.cuentas.length > 5}
<span class="text-xs text-slate-300">+{clase.cuentas.length - 5} más</span>
<span class="text-xs" style="color: var(--theme-texto); opacity: 0.5;">+{clase.cuentas.length - 5} más</span>
{/if}
</div>
{/if}
......@@ -497,30 +624,37 @@
<!-- Modal de detalle -->
{#if selectedItem}
<div class="fixed inset-0 bg-black/40 flex items-center justify-center p-4 z-50" onclick={closeDetail}>
<div
transition:fade={{ duration: 150 }}
class="fixed inset-0 bg-black/40 flex items-center justify-center p-4 z-50"
onclick={closeDetail}
>
<div
class="bg-white rounded-xl shadow-2xl max-w-2xl w-full max-h-[85vh] overflow-hidden flex flex-col"
transition:scale={{ duration: 200, start: 0.95, easing: cubicOut }}
class="rounded-xl shadow-2xl max-w-2xl w-full max-h-[85vh] overflow-hidden flex flex-col"
style="background-color: var(--theme-surface);"
onclick={(e) => e.stopPropagation()}
>
<div class="px-6 py-4 border-b bg-slate-50 flex justify-between items-start">
<div class="px-6 py-4 border-b flex justify-between items-start" style="background-color: var(--theme-fill); border-color: var(--theme-borde);">
<div>
<p class="text-xs text-slate-500 uppercase tracking-wide">{getNivelLabel(selectedItem.nivel)}</p>
<h3 class="text-lg font-medium text-slate-900 mt-1">
<span class="font-mono text-slate-400">{selectedItem.rubro}</span>
<span class="mx-2">·</span>
<p class="text-xs uppercase tracking-wide font-medium" style="color: var(--theme-texto);">{getNivelLabel(selectedItem.nivel)}</p>
<h3 class="text-lg font-medium mt-1" style="color: var(--theme-titulo);">
<span class="font-mono" style="color: var(--theme-texto);">{selectedItem.rubro}</span>
<span class="mx-2" style="color: var(--theme-texto); opacity: 0.5;">·</span>
{getDescripcion(selectedItem)}
</h3>
</div>
<button
onclick={closeDetail}
class="text-slate-400 hover:text-slate-600 text-2xl leading-none"
class="text-2xl leading-none"
style="color: var(--theme-texto);"
>
&times;
</button>
</div>
<div class="p-6 overflow-y-auto flex-1">
<h4 class="text-sm font-medium text-slate-700 mb-4">
<h4 class="text-sm font-medium mb-4" style="color: var(--theme-titulo);">
{#if selectedItem.n_variaciones > 1}
Descripciones ({selectedItem.n_variaciones} variaciones)
{:else}
......@@ -530,15 +664,15 @@
<div class="space-y-4">
{#each parseDescripciones(selectedItem.descripciones) as desc, i}
<div class="border-l-2 {i === 0 ? 'border-blue-500 bg-blue-50/50' : 'border-slate-200'} pl-4 py-2 rounded-r">
<p class="text-xs text-slate-500 mb-2">
<div class="border-l-2 pl-4 py-3 rounded-r" style="{i === 0 ? `border-color: var(--theme-accent); background-color: color-mix(in srgb, var(--theme-accent) 10%, transparent);` : `border-color: var(--theme-borde);`}">
<p class="text-sm mb-2" style="color: var(--theme-texto);">
{#if i === 0 && selectedItem.n_variaciones > 1}
<span class="text-blue-600 font-medium">Vigente</span>
<span class="mx-1">·</span>
<span class="font-medium" style="color: var(--theme-accent);">Vigente</span>
<span class="mx-1" style="opacity: 0.5;">·</span>
{/if}
{desc.rangos}
<span class="font-mono">{desc.rangos}</span>
</p>
<p class="text-sm text-slate-700 leading-relaxed">{desc.descripcion}</p>
<p class="text-base leading-relaxed" style="color: var(--theme-titulo);">{desc.descripcion}</p>
</div>
{/each}
</div>
......@@ -546,3 +680,57 @@
</div>
</div>
{/if}
<style>
/* Sidebar izquierdo: con fondo en móvil, transparente en desktop */
.sidebar-left {
background-color: var(--theme-surface);
}
@media (min-width: 1024px) {
.sidebar-left {
background-color: transparent;
}
}
/* Highlight pulse animation para resultados de búsqueda */
@keyframes highlight-pulse {
0%, 100% {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-accent) 30%, transparent);
}
50% {
box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-accent) 50%, transparent);
}
}
.highlighted {
animation: highlight-pulse 0.8s ease-in-out 2;
border-radius: 0.5rem;
}
.highlighted-sm {
animation: highlight-pulse 0.8s ease-in-out 2;
border-radius: 0.25rem;
padding: 0.25rem;
margin-left: -0.25rem;
}
.highlighted-md {
animation: highlight-pulse 0.8s ease-in-out 2;
border-radius: 0.5rem;
padding: 0.5rem;
margin-left: -0.5rem;
}
/* Transiciones estandarizadas */
:global(.transition-fast) {
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
:global(.transition-normal) {
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
:global(.transition-slow) {
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
</style>
......
<script>
import { onMount } from 'svelte';
import { tweened } from 'svelte/motion';
import { cubicOut } from 'svelte/easing';
let mounted = false;
let hoveredYear = null;
let hoveredYearComparar = null;
let showInfo = false;
let vista = 'agregado'; // 'agregado' | 'comparar'
let isDark = true;
let entidadA = 0;
let entidadB = 1;
onMount(() => {
setTimeout(() => { mounted = true; }, 50);
// Leer estado del tema
isDark = document.documentElement.classList.contains('dark');
// Observar cambios de tema
const observer = new MutationObserver(() => {
isDark = document.documentElement.classList.contains('dark');
});
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ['class']
});
return () => observer.disconnect();
});
// Dummy data
const objeto = {
codigo: '10000',
nombre: 'Servicios Personales',
nivel: 'Grupo',
años: '2005-2024',
descripcion: 'Gastos por concepto de servicios prestados por el personal permanente y no permanente del sector público.',
variaciones: [
{ rango: '2012-2024', texto: 'Gastos por concepto de servicios prestados por el personal permanente y no permanente.' },
{ rango: '2005-2011', texto: 'Retribuciones y complementos al personal permanente y eventual.' }
]
};
// Dummy spending data (in millions Bs, population in millions)
const gastoAnual = [
{ año: 2005, monto: 8200, poblacion: 9.4 },
{ año: 2006, monto: 8900, poblacion: 9.5 },
{ año: 2007, monto: 10200, poblacion: 9.6 },
{ año: 2008, monto: 12400, poblacion: 9.8 },
{ año: 2009, monto: 13100, poblacion: 9.9 },
{ año: 2010, monto: 14800, poblacion: 10.0 },
{ año: 2011, monto: 17200, poblacion: 10.2 },
{ año: 2012, monto: 19500, poblacion: 10.4 },
{ año: 2013, monto: 22800, poblacion: 10.5 },
{ año: 2014, monto: 28400, poblacion: 10.7 },
{ año: 2015, monto: 31200, poblacion: 10.9 },
{ año: 2016, monto: 33100, poblacion: 11.0 },
{ año: 2017, monto: 35600, poblacion: 11.2 },
{ año: 2018, monto: 38200, poblacion: 11.4 },
{ año: 2019, monto: 41500, poblacion: 11.5 },
{ año: 2020, monto: 39800, poblacion: 11.7 },
{ año: 2021, monto: 42100, poblacion: 11.8 },
{ año: 2022, monto: 45600, poblacion: 12.0 },
{ año: 2023, monto: 48900, poblacion: 12.1 },
{ año: 2024, monto: 52300, poblacion: 12.3 },
];
// Calculate per capita for each year
const gastoPerCapita = gastoAnual.map(g => ({
...g,
perCapita: Math.round(g.monto / g.poblacion)
}));
// Top entidades por año (dummy data)
const topEntidadesPorAño = {
2020: [
{ nombre: 'Ministerio de Educación', monto: 12500, porcentaje: 31.4 },
{ nombre: 'Ministerio de Salud', monto: 7800, porcentaje: 19.6 },
{ nombre: 'Policía Boliviana', monto: 4200, porcentaje: 10.6 },
],
2021: [
{ nombre: 'Ministerio de Educación', monto: 13200, porcentaje: 31.4 },
{ nombre: 'Ministerio de Salud', monto: 8100, porcentaje: 19.2 },
{ nombre: 'Policía Boliviana', monto: 4600, porcentaje: 10.9 },
],
2022: [
{ nombre: 'Ministerio de Educación', monto: 14800, porcentaje: 32.5 },
{ nombre: 'Ministerio de Salud', monto: 8400, porcentaje: 18.4 },
{ nombre: 'Policía Boliviana', monto: 5100, porcentaje: 11.2 },
],
2023: [
{ nombre: 'Ministerio de Educación', monto: 16200, porcentaje: 33.1 },
{ nombre: 'Ministerio de Salud', monto: 8700, porcentaje: 17.8 },
{ nombre: 'Policía Boliviana', monto: 5700, porcentaje: 11.7 },
],
2024: [
{ nombre: 'Ministerio de Educación', monto: 18200, porcentaje: 34.8 },
{ nombre: 'Ministerio de Salud', monto: 8900, porcentaje: 17.0 },
{ nombre: 'Policía Boliviana', monto: 6200, porcentaje: 11.9 },
],
};
// Total histórico (para cuando no hay hover)
const topEntidadesTotal = [
{ nombre: 'Ministerio de Educación', monto: 74900, porcentaje: 32.6 },
{ nombre: 'Ministerio de Salud', monto: 41900, porcentaje: 18.4 },
{ nombre: 'Policía Boliviana', monto: 25800, porcentaje: 11.3 },
];
// Datos para comparación (dummy)
const entidadesComparables = [
{
id: 0,
nombre: 'Ministerio de Educación',
color: '#E8C547',
datos: [
{ año: 2020, monto: 12500, perCapita: 1068 },
{ año: 2021, monto: 13200, perCapita: 1119 },
{ año: 2022, monto: 14800, perCapita: 1233 },
{ año: 2023, monto: 16200, perCapita: 1339 },
{ año: 2024, monto: 18200, perCapita: 1480 },
],
total: 74900,
promedioPerCapita: 1248,
porcentajeObjeto: 34.8,
ranking: 1
},
{
id: 1,
nombre: 'Ministerio de Salud',
color: '#4A8B6E',
datos: [
{ año: 2020, monto: 6800, perCapita: 581 },
{ año: 2021, monto: 7200, perCapita: 610 },
{ año: 2022, monto: 7900, perCapita: 658 },
{ año: 2023, monto: 8400, perCapita: 694 },
{ año: 2024, monto: 8900, perCapita: 724 },
],
total: 39200,
promedioPerCapita: 653,
porcentajeObjeto: 17.0,
ranking: 2
},
{
id: 2,
nombre: 'Policía Boliviana',
color: '#8B5CF6',
datos: [
{ año: 2020, monto: 4200, perCapita: 359 },
{ año: 2021, monto: 4600, perCapita: 390 },
{ año: 2022, monto: 5100, perCapita: 425 },
{ año: 2023, monto: 5700, perCapita: 471 },
{ año: 2024, monto: 6200, perCapita: 504 },
],
total: 25800,
promedioPerCapita: 430,
porcentajeObjeto: 11.9,
ranking: 3
},
{
id: 3,
nombre: 'Gobierno Autónomo de Santa Cruz',
color: '#F97316',
datos: [
{ año: 2020, monto: 3100, perCapita: 265 },
{ año: 2021, monto: 3400, perCapita: 288 },
{ año: 2022, monto: 3800, perCapita: 317 },
{ año: 2023, monto: 4100, perCapita: 339 },
{ año: 2024, monto: 4500, perCapita: 366 },
],
total: 18900,
promedioPerCapita: 315,
porcentajeObjeto: 8.6,
ranking: 4
}
];
// Colores fijos por posición - teal y naranja
$: colorA = '#2a9d8f'; // teal
$: colorB = '#f4a261'; // naranja
$: entA = entidadesComparables[entidadA];
$: entB = entidadesComparables[entidadB];
$: maxComparacion = Math.max(
...entA.datos.map(d => d.perCapita),
...entB.datos.map(d => d.perCapita)
);
$: años = entA.datos.map(d => d.año);
// Datos de comparación según hover
$: hoveredDataA = hoveredYearComparar
? entA.datos.find(d => d.año === hoveredYearComparar)
: null;
$: hoveredDataB = hoveredYearComparar
? entB.datos.find(d => d.año === hoveredYearComparar)
: null;
$: displayMontoA = hoveredDataA ? hoveredDataA.monto : entA.total;
$: displayMontoLabelA = hoveredDataA ? `gasto en ${hoveredYearComparar}` : 'gasto 2020-2024';
$: displayPerCapitaA = hoveredDataA ? hoveredDataA.perCapita : entA.promedioPerCapita;
$: displayPerCapitaLabelA = hoveredDataA ? `por persona en ${hoveredYearComparar}` : 'por persona (prom.)';
$: displayMontoB = hoveredDataB ? hoveredDataB.monto : entB.total;
$: displayMontoLabelB = hoveredDataB ? `gasto en ${hoveredYearComparar}` : 'gasto 2020-2024';
$: displayPerCapitaB = hoveredDataB ? hoveredDataB.perCapita : entB.promedioPerCapita;
$: displayPerCapitaLabelB = hoveredDataB ? `por persona en ${hoveredYearComparar}` : 'por persona (prom.)';
$: displayPeriodoComparar = hoveredYearComparar ? hoveredYearComparar : '2020-2024';
// Top entidades reactivo según hover
$: displayTopEntidades = hoveredYear && topEntidadesPorAño[hoveredYear]
? topEntidadesPorAño[hoveredYear]
: topEntidadesTotal;
$: displayTopLabel = hoveredYear ? `en ${hoveredYear}` : '2005-2024';
// Context data
const totalEntidades = 620;
const totalGrupos = 9; // Total grupos in objeto del gasto
// Calculations
const maxPerCapita = Math.max(...gastoPerCapita.map(g => g.perCapita));
const minPerCapita = Math.min(...gastoPerCapita.map(g => g.perCapita));
const totalHistorico = gastoAnual.reduce((sum, g) => sum + g.monto, 0);
const totalPoblacionAcum = gastoAnual.reduce((sum, g) => sum + g.poblacion, 0);
const promedioPerCapita = Math.round(totalHistorico / totalPoblacionAcum);
const totalPorcentaje = 14.2;
const ranking = 1;
// Current view data (changes on hover)
$: currentData = hoveredYear
? gastoPerCapita.find(g => g.año === hoveredYear)
: null;
$: displayMonto = currentData ? currentData.monto : totalHistorico;
$: displayMontoLabel = currentData ? `gasto en ${currentData.año}` : 'gasto 2005-2024';
$: displayPerCapita = currentData ? currentData.perCapita : promedioPerCapita;
$: displayPerCapitaLabel = currentData ? `por persona en ${currentData.año}` : 'por persona (promedio)';
$: displayPorcentaje = currentData
? (totalPorcentaje * (currentData.monto / (totalHistorico / gastoAnual.length))).toFixed(1)
: totalPorcentaje;
$: displayPorcentajeLabel = currentData ? `del gasto ${currentData.año}` : 'del gasto total';
$: displayPeriodo = currentData ? currentData.año : '2005-2024';
$: displayRanking = `${ranking} de ${totalGrupos}`;
$: displayRankingLabel = currentData ? `ranking en ${currentData.año}` : 'ranking entre grupos';
// Tweened values para transiciones suaves
const tweenOptions = { duration: 300, easing: cubicOut };
// Agregado
const twMonto = tweened(totalHistorico, tweenOptions);
const twPerCapita = tweened(promedioPerCapita, tweenOptions);
const twPorcentaje = tweened(totalPorcentaje, tweenOptions);
// Comparación
const twMontoA = tweened(0, tweenOptions);
const twMontoB = tweened(0, tweenOptions);
const twPerCapitaA = tweened(0, tweenOptions);
const twPerCapitaB = tweened(0, tweenOptions);
// Top entidades
const twTop1 = tweened(0, tweenOptions);
const twTop2 = tweened(0, tweenOptions);
const twTop3 = tweened(0, tweenOptions);
// Actualizar tweened cuando cambian los valores
$: twMonto.set(displayMonto);
$: twPerCapita.set(displayPerCapita);
$: twPorcentaje.set(parseFloat(displayPorcentaje));
$: twMontoA.set(displayMontoA);
$: twMontoB.set(displayMontoB);
$: twPerCapitaA.set(displayPerCapitaA);
$: twPerCapitaB.set(displayPerCapitaB);
$: if (displayTopEntidades[0]) twTop1.set(displayTopEntidades[0].porcentaje);
$: if (displayTopEntidades[1]) twTop2.set(displayTopEntidades[1].porcentaje);
$: if (displayTopEntidades[2]) twTop3.set(displayTopEntidades[2].porcentaje);
function formatMonto(m) {
if (m >= 1000000) return (m / 1000000).toFixed(1) + 'B';
if (m >= 1000) return Math.round(m / 1000) + 'K';
return m.toLocaleString();
}
function formatMontoLargo(m) {
if (m >= 1000) return (m / 1000).toFixed(1) + 'MM';
return m.toLocaleString() + 'M';
}
</script>
<svelte:head>
<title>Test — Objeto Detail</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 class:tema-claro={!isDark}>
<!-- Header compacto -->
<header>
<nav class="breadcrumb">
<a href="/clasificadores/objeto-gasto">← Objeto del Gasto</a>
</nav>
<div class="title-row">
<div class="title-main">
<span class="codigo">{objeto.codigo}</span>
<h1>
{objeto.nombre}
<button class="help-icon" on:click={() => showInfo = !showInfo} class:active={showInfo}>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/>
<path d="M9.5 9a3 3 0 1 1 3.5 2.95c-.5.17-1 .62-1 1.3V15"/>
<circle cx="12" cy="18" r="0.5" fill="currentColor"/>
</svg>
</button>
</h1>
</div>
</div>
<div class="meta">
<span class="badge">{objeto.nivel}</span>
<span class="years">{objeto.años}</span>
</div>
</header>
<!-- Panel de info (colapsable) -->
{#if showInfo}
<div class="info-panel">
<div class="info-content">
<h4>Definición vigente</h4>
<p>{objeto.descripcion}</p>
{#if objeto.variaciones.length > 1}
<h4>Variaciones históricas</h4>
{#each objeto.variaciones as v}
<div class="variacion">
<span class="variacion-rango">{v.rango}</span>
<p>{v.texto}</p>
</div>
{/each}
{/if}
</div>
</div>
{/if}
<!-- Dashboard principal -->
<main>
<!-- Toggle de vista -->
<div class="vista-toggle">
<button
class="toggle-btn"
class:active={vista === 'agregado'}
on:click={() => vista = 'agregado'}
>
Agregado
</button>
<button
class="toggle-btn"
class:active={vista === 'comparar'}
on:click={() => vista = 'comparar'}
>
Comparar
</button>
</div>
<!-- Selector de entidad (solo en vista agregado) -->
{#if vista === 'agregado'}
<div class="entity-selector">
<span class="selector-label">Viendo</span>
<button class="selector-btn">
Todo el sector público
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M6 9l6 6 6-6"/>
</svg>
</button>
</div>
{/if}
{#if vista === 'agregado'}
<!-- VISTA AGREGADO -->
<!-- KPIs arriba -->
<div class="kpis">
<div class="kpi">
<span class="kpi-value">Bs {formatMontoLargo(Math.round($twMonto))}</span>
<span class="kpi-label">{displayMontoLabel}</span>
</div>
<div class="kpi">
<span class="kpi-value">Bs {Math.round($twPerCapita).toLocaleString()}</span>
<span class="kpi-label">{displayPerCapitaLabel}</span>
</div>
<div class="kpi">
<span class="kpi-value">{$twPorcentaje.toFixed(1)}%</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>
<!-- Gráfico de barras (per cápita) - protagonista al medio -->
<div class="chart-section chart-protagonista">
<div class="chart-header">
<span class="chart-title">Gasto por persona</span>
<span class="chart-period">{displayPeriodo}</span>
</div>
<div class="chart-wrapper">
<!-- Y-axis labels -->
<div class="y-axis">
<span class="y-label">Bs {formatMonto(maxPerCapita)}</span>
<span class="y-label">Bs {formatMonto(Math.round(maxPerCapita / 2))}</span>
<span class="y-label">Bs 0</span>
</div>
<div
class="chart"
on:mouseleave={() => hoveredYear = null}
role="group"
>
{#each gastoPerCapita as g}
<div
class="bar-container"
on:mouseenter={() => hoveredYear = g.año}
role="button"
tabindex="0"
>
<div
class="bar"
class:hovered={hoveredYear === g.año}
style="height: {(g.perCapita / maxPerCapita) * 100}%"
></div>
<span class="bar-label" class:visible={hoveredYear === g.año || g.año % 5 === 0}>
{g.año.toString().slice(-2)}
</span>
</div>
{/each}
</div>
</div>
</div>
<!-- Top entidades -->
<div class="top-section">
<div class="top-header">
<h3>Mayores ejecutores</h3>
<span class="top-context">{totalEntidades} entidades · {displayTopLabel}</span>
</div>
<div class="top-list">
{#each displayTopEntidades as ent, i (ent.nombre)}
<div class="top-item">
<span class="top-rank">#{i + 1}</span>
<div class="top-info">
<span class="top-name">{ent.nombre}</span>
<div class="top-bar-bg">
<div class="top-bar" style="width: {((i === 0 ? $twTop1 : i === 1 ? $twTop2 : $twTop3) / $twTop1) * 100}%"></div>
</div>
</div>
<span class="top-pct">{(i === 0 ? $twTop1 : i === 1 ? $twTop2 : $twTop3).toFixed(1)}%</span>
</div>
{/each}
</div>
</div>
{:else}
<!-- VISTA COMPARAR -->
<!-- Selectores de entidades -->
<div class="comparador-selectors">
<div class="selector-group">
<span class="selector-dot" style="background: {colorA}"></span>
<select bind:value={entidadA}>
{#each entidadesComparables as ent}
<option value={ent.id} disabled={ent.id === entidadB}>{ent.nombre}</option>
{/each}
</select>
</div>
<span class="vs">vs</span>
<div class="selector-group">
<span class="selector-dot" style="background: {colorB}"></span>
<select bind:value={entidadB}>
{#each entidadesComparables as ent}
<option value={ent.id} disabled={ent.id === entidadA}>{ent.nombre}</option>
{/each}
</select>
</div>
</div>
<!-- Gráfico comparativo -->
<div class="chart-section">
<div class="chart-header">
<span class="chart-title">Gasto por persona</span>
<span class="chart-period">{displayPeriodoComparar}</span>
</div>
<div class="chart-wrapper">
<div class="y-axis">
<span class="y-label">Bs {formatMonto(maxComparacion)}</span>
<span class="y-label">Bs {formatMonto(Math.round(maxComparacion / 2))}</span>
<span class="y-label">Bs 0</span>
</div>
<div
class="chart chart-comparar"
on:mouseleave={() => hoveredYearComparar = null}
role="group"
>
{#each años as año, i}
<div
class="bar-group"
class:active={hoveredYearComparar === año}
on:mouseenter={() => hoveredYearComparar = año}
role="button"
tabindex="0"
>
<div class="bars-pair">
<div
class="bar bar-a"
style="height: {(entA.datos[i].perCapita / maxComparacion) * 100}%; --bar-color: {colorA}"
></div>
<div
class="bar bar-b"
style="height: {(entB.datos[i].perCapita / maxComparacion) * 100}%; --bar-color: {colorB}"
></div>
</div>
<span class="bar-label visible" class:highlight={hoveredYearComparar === año}>{año}</span>
</div>
{/each}
</div>
</div>
<div class="chart-legend">
<span class="legend-item"><span class="legend-dot" style="background: {colorA}"></span>{entA.nombre}</span>
<span class="legend-item"><span class="legend-dot" style="background: {colorB}"></span>{entB.nombre}</span>
</div>
</div>
<!-- KPIs comparativos - tabla -->
<div class="kpis-tabla">
<!-- Header -->
<div class="tabla-header">
<span class="tabla-label"></span>
<span class="tabla-val" style="color: {colorA}">{entA.nombre}</span>
<span class="tabla-val" style="color: {colorB}">{entB.nombre}</span>
</div>
<!-- Gasto -->
<div class="tabla-row">
<span class="tabla-label">{hoveredYearComparar ? `Gasto ${hoveredYearComparar}` : 'Gasto 2020-2024'}</span>
<span class="tabla-val">Bs {formatMontoLargo(Math.round($twMontoA))}</span>
<span class="tabla-val">Bs {formatMontoLargo(Math.round($twMontoB))}</span>
</div>
<!-- Per cápita -->
<div class="tabla-row">
<span class="tabla-label">{hoveredYearComparar ? `Por persona ${hoveredYearComparar}` : 'Por persona (prom.)'}</span>
<span class="tabla-val">Bs {Math.round($twPerCapitaA).toLocaleString()}</span>
<span class="tabla-val">Bs {Math.round($twPerCapitaB).toLocaleString()}</span>
</div>
<!-- Porcentaje -->
<div class="tabla-row">
<span class="tabla-label">Peso sobre total</span>
<span class="tabla-val">{entA.porcentajeObjeto}%</span>
<span class="tabla-val">{entB.porcentajeObjeto}%</span>
</div>
<!-- Ranking -->
<div class="tabla-row">
<span class="tabla-label">Ranking</span>
<span class="tabla-val">#{entA.ranking}</span>
<span class="tabla-val">#{entB.ranking}</span>
</div>
</div>
{/if}
</main>
</div>
<style>
.page {
min-height: 100vh;
background: #0A0A0A;
color: #F5F0E8;
font-family: 'Instrument Sans', -apple-system, sans-serif;
opacity: 0;
transition: opacity 0.4s ease;
}
.mounted { opacity: 1; }
/* Header */
header {
padding: 1rem 2rem;
border-bottom: 1px solid #1E1E1C;
}
.breadcrumb a {
font-family: 'DM Mono', monospace;
font-size: 0.75rem;
color: #5A5650;
text-decoration: none;
transition: color 0.2s;
}
.breadcrumb a:hover { color: #F5F0E8; }
.title-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-top: 0.5rem;
gap: 1rem;
}
.title-main {
display: flex;
align-items: baseline;
gap: 1rem;
flex-wrap: wrap;
}
.codigo {
font-family: 'DM Mono', monospace;
font-size: 1.5rem;
color: #5A5650;
font-weight: 400;
}
h1 {
font-family: 'DM Serif Display', Georgia, serif;
font-size: 1.5rem;
font-weight: 400;
color: #F5F0E8;
margin: 0;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.help-icon {
background: transparent;
border: none;
padding: 0;
color: #5A5650;
cursor: pointer;
transition: all 0.2s;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
}
.help-icon:hover, .help-icon.active {
color: #E8C547;
}
.meta {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 0.5rem;
}
.badge {
font-family: 'DM Mono', monospace;
font-size: 0.625rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.25rem 0.5rem;
background: #1A1A18;
border: 1px solid #2E2E2C;
border-radius: 4px;
color: #8A8578;
}
.years {
font-family: 'DM Mono', monospace;
font-size: 0.75rem;
color: #5A5650;
}
/* Info panel */
.info-panel {
background: #111110;
border-bottom: 1px solid #1E1E1C;
padding: 1.5rem 2rem;
}
.info-content h4 {
font-family: 'DM Mono', monospace;
font-size: 0.625rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #5A5650;
margin: 0 0 0.5rem 0;
}
.info-content p {
font-size: 0.875rem;
line-height: 1.6;
color: #8A8578;
margin: 0 0 1.25rem 0;
}
.variacion {
padding-left: 1rem;
border-left: 2px solid #2E2E2C;
margin-bottom: 1rem;
}
.variacion-rango {
font-family: 'DM Mono', monospace;
font-size: 0.688rem;
color: #5A5650;
}
.variacion p {
margin-top: 0.25rem;
font-size: 0.813rem;
}
/* Main */
main {
padding: 1rem 2rem;
max-width: 900px;
margin: 0 auto;
}
/* Entity selector */
.entity-selector {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.selector-label {
font-size: 0.813rem;
color: #5A5650;
}
.selector-btn {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: #161614;
border: 1px solid #2E2E2C;
border-radius: 8px;
color: #F5F0E8;
font-size: 0.875rem;
cursor: pointer;
transition: all 0.2s;
}
.selector-btn:hover {
border-color: #E8C547;
}
.selector-btn svg {
color: #5A5650;
}
/* Chart */
.chart-section {
margin-bottom: 1rem;
}
.chart-protagonista {
margin-bottom: 1.25rem;
}
.chart-protagonista .chart {
height: calc(100vh - 480px);
min-height: 120px;
max-height: 200px;
}
.chart-protagonista .y-axis {
height: calc(100vh - 480px);
min-height: 120px;
max-height: 200px;
}
.chart-section:has(.chart-comparar) {
margin-bottom: 0;
}
.chart-section:has(.chart-comparar) .y-axis {
height: calc(100vh - 380px);
min-height: 140px;
max-height: 280px;
}
.chart-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.chart-title {
font-size: 0.75rem;
color: #5A5650;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.chart-period {
font-family: 'DM Mono', monospace;
font-size: 0.875rem;
color: #B0A89C;
font-variant-numeric: tabular-nums;
min-width: 5rem;
text-align: right;
}
.chart-wrapper {
display: flex;
gap: 0.75rem;
}
.y-axis {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
height: 160px;
padding-bottom: 1.5rem;
}
.y-label {
font-family: 'DM Mono', monospace;
font-size: 0.625rem;
color: #5A5650;
}
.chart {
flex: 1;
display: flex;
align-items: flex-end;
gap: 4px;
height: 160px;
padding: 0 0.5rem;
border-left: 1px solid #2E2E2C;
}
.bar-container {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
height: 100%;
cursor: pointer;
}
.bar {
width: 100%;
background: #2a9d8f;
border-radius: 4px 4px 0 0;
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
min-height: 4px;
}
.bar.hovered {
background: #264653;
transform: scaleX(1.1);
}
.bar-label {
font-family: 'DM Mono', monospace;
font-size: 0.625rem;
color: #B0A89C;
margin-top: 0.5rem;
opacity: 0;
transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s ease;
}
.bar-label.visible { opacity: 1; }
/* KPIs */
.kpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
margin-bottom: 1rem;
}
.kpi {
background: #131312;
padding: 0.75rem 0.75rem;
text-align: center;
border-radius: 8px;
transition: background 0.3s ease;
}
.kpi-value {
display: block;
font-family: 'DM Mono', monospace;
font-size: 1.125rem;
font-weight: 500;
color: #F5F0E8;
margin-bottom: 0;
transition: opacity 0.2s ease;
font-variant-numeric: tabular-nums;
min-height: 1.5rem;
}
.kpi-label {
font-size: 0.5625rem;
color: #5A5650;
text-transform: uppercase;
letter-spacing: 0.03em;
line-height: 1.3;
transition: opacity 0.2s ease;
min-height: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
}
/* Top entidades */
.top-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.625rem;
}
.top-section h3 {
font-family: 'DM Mono', monospace;
font-size: 0.75rem;
color: #5A5650;
text-transform: uppercase;
letter-spacing: 0.1em;
margin: 0;
}
.top-context {
font-family: 'DM Mono', monospace;
font-size: 0.688rem;
color: #5A5650;
font-variant-numeric: tabular-nums;
}
.top-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.top-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.625rem 0.875rem;
background: #131312;
border-radius: 8px;
}
.top-rank {
font-family: 'DM Mono', monospace;
font-size: 0.875rem;
color: #5A5650;
width: 24px;
}
.top-info {
flex: 1;
}
.top-name {
display: block;
font-size: 0.8125rem;
color: #F5F0E8;
margin-bottom: 0.375rem;
}
.top-bar-bg {
height: 4px;
background: #1E1E1C;
border-radius: 2px;
overflow: hidden;
}
.top-bar {
height: 100%;
background: #2a9d8f;
border-radius: 2px;
transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.top-pct {
font-family: 'DM Mono', monospace;
font-size: 0.875rem;
color: #B0A89C;
min-width: 52px;
width: 52px;
text-align: right;
transition: opacity 0.2s ease;
font-variant-numeric: tabular-nums;
}
.see-all {
background: transparent;
border: 1px solid #2E2E2C;
border-radius: 8px;
padding: 0.75rem 1rem;
color: #8A8578;
font-size: 0.813rem;
cursor: pointer;
transition: all 0.2s;
width: 100%;
margin-top: 1rem;
}
.see-all:hover {
border-color: #E8C547;
color: #E8C547;
}
/* Vista Toggle */
.vista-toggle {
display: inline-flex;
background: #131312;
border: 1px solid #2E2E2C;
border-radius: 10px;
padding: 4px;
margin-bottom: 0.75rem;
}
.toggle-btn {
padding: 0.5rem 1.25rem;
font-size: 0.813rem;
font-weight: 500;
color: #5A5650;
background: transparent;
border: none;
border-radius: 7px;
cursor: pointer;
transition: all 0.2s;
}
.toggle-btn:hover {
color: #8A8578;
}
.toggle-btn.active {
background: #F5F0E8;
color: #0A0A0A;
}
/* Comparador inline - ajustado para 100vh */
.comparador-selectors {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.75rem;
}
.selector-group {
flex: 1;
display: flex;
align-items: center;
gap: 0.5rem;
}
.selector-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.selector-group select {
flex: 1;
background: #1A1A18;
border: 1px solid #2E2E2C;
border-radius: 8px;
padding: 0.5rem 0.75rem;
color: #F5F0E8;
font-size: 0.813rem;
font-family: 'Instrument Sans', sans-serif;
cursor: pointer;
}
.selector-group select:focus {
outline: none;
border-color: #E8C547;
}
.vs {
font-family: 'DM Mono', monospace;
font-size: 0.75rem;
color: #5A5650;
flex-shrink: 0;
}
.chart-comparar {
gap: 1.5rem;
justify-content: center;
height: calc(100vh - 380px);
min-height: 140px;
max-height: 280px;
}
.chart-comparar + .chart-legend + .kpis-comparar {
margin-top: 0;
}
.bar-group {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}
.bars-pair {
display: flex;
align-items: flex-end;
gap: 4px;
flex: 1;
}
.bar-a, .bar-b {
width: 20px;
border-radius: 4px 4px 0 0;
min-height: 4px;
background: var(--bar-color);
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), filter 0.25s ease;
}
.bar-group.active .bar-a,
.bar-group.active .bar-b {
filter: brightness(1.15);
}
.bar-group {
cursor: pointer;
padding: 0.5rem 0.35rem;
margin: -0.5rem -0.35rem;
border-radius: 6px;
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.bar-group.active {
background: rgba(42, 157, 143, 0.15);
}
.bar-label.highlight {
color: #F5F0E8;
font-weight: 500;
transition: color 0.25s ease;
}
.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: #8A8578;
}
.legend-dot {
width: 10px;
height: 10px;
border-radius: 3px;
}
/* KPIs comparativos - tabla */
.kpis-tabla {
background: #131312;
border-radius: 10px;
padding: 0.5rem 1rem;
}
.tabla-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
padding-bottom: 0.375rem;
border-bottom: 1px solid #2E2E2C;
margin-bottom: 0.375rem;
}
.tabla-header .tabla-val {
font-family: 'DM Mono', monospace;
font-size: 0.625rem;
letter-spacing: 0.05em;
text-transform: uppercase;
text-align: center;
}
.tabla-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
padding: 0.25rem 0;
}
.tabla-label {
font-family: 'DM Mono', monospace;
font-size: 0.75rem;
font-weight: 500;
color: #8A8578;
display: flex;
align-items: center;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.tabla-val {
font-family: 'DM Mono', monospace;
font-size: 0.9375rem;
font-weight: 500;
color: #F5F0E8;
text-align: center;
font-variant-numeric: tabular-nums;
transition: opacity 0.2s ease;
}
/* Insight comparador */
.comparador-insight {
text-align: center;
padding: 1rem 1.5rem;
background: linear-gradient(90deg, rgba(232,197,71,0.05), rgba(74,139,110,0.05));
border-radius: 10px;
border: 1px solid #2E2E2C;
font-size: 0.875rem;
color: #8A8578;
line-height: 1.6;
}
.comparador-insight strong {
color: #F5F0E8;
}
.insight-year {
font-family: 'DM Mono', monospace;
font-size: 0.813rem;
color: #E8C547;
}
/* Responsive */
@media (max-width: 640px) {
header, main {
padding: 1.25rem 1rem;
}
.title-main {
flex-direction: column;
gap: 0.25rem;
}
.codigo {
font-size: 1.25rem;
}
h1 {
font-size: 1.375rem;
}
.y-axis {
display: none;
}
.chart {
border-left: none;
height: 120px;
}
.kpis {
grid-template-columns: repeat(2, 1fr);
}
.kpi-value {
font-size: 1.125rem;
}
.top-summary {
flex-direction: column;
gap: 0.25rem;
}
.comparador-modal {
padding: 1.5rem;
}
.comparador-selectors {
flex-direction: column;
gap: 0.75rem;
}
.vs {
display: none;
}
.kpi-values {
gap: 1rem;
}
.kpi-val {
font-size: 0.75rem;
min-width: 60px;
}
.comp-bar {
width: 12px;
}
.grouped-chart {
gap: 0.5rem;
}
}
/* ========== TEMA CLARO ========== */
.tema-claro {
background: #FAFAF8;
color: #1A1A18;
}
.tema-claro header {
border-bottom-color: #E5E5E0;
}
.tema-claro .breadcrumb a {
color: #8A8578;
}
.tema-claro .breadcrumb a:hover {
color: #1A1A18;
}
.tema-claro .codigo {
color: #8A8578;
}
.tema-claro h1 {
color: #1A1A18;
}
.tema-claro .help-icon {
color: #8A8578;
}
.tema-claro .help-icon:hover,
.tema-claro .help-icon.active {
color: #C9A227;
}
.tema-claro .badge {
background: #F0F0EC;
border-color: #E5E5E0;
color: #5A5650;
}
.tema-claro .years {
color: #8A8578;
}
.tema-claro .info-panel {
background: #F5F5F3;
border-bottom-color: #E5E5E0;
}
.tema-claro .info-content h4 {
color: #8A8578;
}
.tema-claro .info-content p {
color: #5A5650;
}
.tema-claro .variacion {
border-left-color: #D5D5D0;
}
.tema-claro .variacion-rango {
color: #8A8578;
}
.tema-claro .vista-toggle {
background: #F0F0EC;
border-color: #E5E5E0;
}
.tema-claro .toggle-btn {
color: #8A8578;
}
.tema-claro .toggle-btn:hover {
color: #5A5650;
}
.tema-claro .toggle-btn.active {
background: #1A1A18;
color: #FAFAF8;
}
.tema-claro .entity-selector .selector-label {
color: #8A8578;
}
.tema-claro .selector-btn {
background: transparent;
border: none;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
color: #1A1A18;
}
.tema-claro .selector-btn:hover {
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
}
.tema-claro .selector-btn svg {
color: #8A8578;
}
.tema-claro .chart-title {
color: #8A8578;
}
.tema-claro .chart-period {
color: #333333;
}
.tema-claro .y-label {
color: #8A8578;
}
.tema-claro .chart {
border-left-color: #E5E5E0;
}
.tema-claro .bar-container .bar {
background: #2a9d8f;
}
.tema-claro .bar-container .bar.hovered {
background: #264653;
}
/* Las barras de comparación mantienen su --bar-color */
.tema-claro .bar-a,
.tema-claro .bar-b {
background: var(--bar-color);
}
.tema-claro .bar-label {
color: #333333;
}
.tema-claro .kpis {
background: transparent;
}
.tema-claro .kpi {
background: transparent;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.tema-claro .kpi-value {
color: #1A1A18;
}
.tema-claro .kpi-label {
color: #8A8578;
}
.tema-claro .top-section h3 {
color: #8A8578;
}
.tema-claro .top-context {
color: #8A8578;
}
.tema-claro .top-item {
background: transparent;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.tema-claro .top-rank {
color: #8A8578;
}
.tema-claro .top-name {
color: #1A1A18;
}
.tema-claro .top-bar-bg {
background: #F0F0EC;
}
.tema-claro .top-bar {
background: #2a9d8f;
}
.tema-claro .top-pct {
color: #333333;
}
/* Comparador - tema claro */
.tema-claro .comparador-selectors .selector-group select {
background: transparent;
border: none;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
color: #1A1A18;
}
.tema-claro .comparador-selectors .selector-group select:focus {
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
outline: none;
}
.tema-claro .vs {
color: #8A8578;
}
.tema-claro .chart-legend .legend-item {
color: #5A5650;
}
.tema-claro .kpis-tabla {
background: transparent;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.tema-claro .tabla-header {
border-bottom-color: #E5E5E0;
}
.tema-claro .tabla-label {
color: #5A5650;
}
.tema-claro .tabla-val {
color: #1A1A18;
}
.tema-claro .bar-group.active {
background: rgba(42, 157, 143, 0.12);
}
.tema-claro .bar-label.highlight {
color: #1A1A18;
}
</style>
<script>
import { onMount } from 'svelte';
let hovered = null;
let activeModal = null;
let mounted = false;
onMount(() => { setTimeout(() => { mounted = true; }, 80); });
const C = {
bg: '#0A0A0A', bgAlt: '#111111', surface: '#161616',
card: '#131313', cardHover: '#1A1A1A',
accent: '#E8C547', green: '#4A8B6E',
text: '#F5F0E8', muted: '#8A8578', dim: '#5A5650',
border: '#222220', borderLight: '#2E2E2C',
};
const MODALS = {
quien: {
title: '¿Quién gasta o recibe?', tech: 'CLASIFICADOR INSTITUCIONAL',
everyday: 'Es como preguntar "¿quién en la familia maneja plata?". Papá tiene su sueldo, mamá maneja el negocio, el abuelo cobra su renta. Cada uno es una "entidad" distinta con su propio presupuesto.',
budget: 'El clasificador institucional cataloga a todas las entidades del sector público: ministerios, gobernaciones, municipios, empresas públicas, universidades. Cada una tiene un código único y un presupuesto asignado.',
example: 'Ejemplo: El Ministerio de Educación (código 040) y el Gobierno Autónomo de La Paz (código 126) son entidades distintas, cada una con sus propios ingresos y gastos.',
color: '#F5F0E8',
},
rubros: {
title: '¿Qué tipo de ingreso es?', tech: 'CLASIFICADOR DE RECURSOS POR RUBROS',
everyday: 'María gana un sueldo de su trabajo, cobra alquiler de un cuartito, y un amigo le prestó plata. Son tres tipos distintos de ingreso: laboral, patrimonial, y crédito.',
budget: 'En el presupuesto, el Estado recibe ingresos tributarios (impuestos = el "sueldo"), regalías por explotación de recursos (= el "alquiler"), y créditos internacionales (= el "préstamo"). El rubro te dice qué naturaleza tiene cada ingreso.',
example: 'Ejemplo: Los Bs 2.400M que Bolivia recibe por IDH son un rubro distinto a los Bs 800M de crédito del BID, aunque ambos financien al mismo ministerio.',
color: '#E8C547',
},
fuentes: {
title: '¿Quién pone la plata?', tech: 'CLASIFICADOR DE FUENTES DE FINANCIAMIENTO',
everyday: 'María sabe que su sueldo se lo paga la empresa TechCorp, el alquiler se lo paga su inquilino Juan, y el préstamo se lo hizo el Banco Nacional. Son las fuentes: quién firma el cheque.',
budget: 'Las fuentes son los bolsillos específicos: el TGN (Tesoro General de la Nación), recursos propios de cada entidad, crédito externo del BID o Banco Mundial, o donaciones de cooperación.',
example: 'Ejemplo: Un crédito del BID y uno del Banco Mundial son el mismo rubro (crédito externo) pero distinta fuente. La fuente dice quién exactamente pone la plata.',
color: '#E8C547',
},
objeto: {
title: '¿En qué se gasta concretamente?', tech: 'CLASIFICADOR POR OBJETO DEL GASTO',
everyday: 'Cuando María gasta, compra cosas concretas: arroz, paga la luz, le paga al albañil. Cada compra es un "objeto" distinto — algo tangible que se puede listar.',
budget: 'El Objeto del Gasto es exactamente eso: sueldos, consultorías, materiales de escritorio, combustible, medicamentos. Es la lista del supermercado del Estado.',
example: 'Ejemplo: El grupo 10000 "Servicios Personales" incluye sueldos y aguinaldos. El 20000 "Servicios No Personales" incluye consultorías y alquileres.',
color: '#4A8B6E',
},
sector: {
title: '¿A qué sector de la economía va?', tech: 'CLASIFICADOR POR SECTORES ECONÓMICOS',
everyday: 'Si María contrata un albañil, esa plata va al sector construcción. Si compra medicina, va al sector salud. No importa qué compró — importa qué parte de la economía mueve.',
budget: 'Este clasificador mide el impacto económico: cuánto va a infraestructura, cuánto a servicios, cuánto a industria. Permite evaluar cómo las decisiones fiscales afectan a cada sector.',
example: 'Ejemplo: Un hospital nuevo es "construcción" en Objeto del Gasto pero "salud" en Sector Económico. Misma plata, dos lentes distintos.',
color: '#4A8B6E',
},
finalidad: {
title: '¿Para qué se gasta?', tech: 'CLASIFICADOR POR FINALIDAD Y FUNCIÓN',
everyday: 'María compró arroz (objeto), pero ¿para qué? Para alimentar a su familia. Compró cemento: para tener casa. El "para qué" es el objetivo final, no el insumo.',
budget: 'Este clasificador agrupa por propósito: educación, defensa, salud, protección social. No importa si se gastó en sueldos o en cemento — lo que importa es el fin.',
example: 'Ejemplo: El sueldo de un profesor y la construcción de una escuela son objetos de gasto distintos, pero ambos tienen la misma finalidad: Educación.',
color: '#4A8B6E',
},
donde: {
title: '¿Dónde se gasta?', tech: 'CLASIFICADOR GEOGRÁFICO',
everyday: 'María manda plata a su mamá en Cochabamba y paga el alquiler en La Paz. No es lo mismo gastar en la ciudad que en el área rural, en Santa Cruz que en Potosí.',
budget: 'La dimensión geográfica permite ver cómo se distribuyen los recursos en el territorio: por departamento, municipio o región. Revela las prioridades territoriales del Estado.',
example: 'Ejemplo: Del presupuesto de Educación, ¿cuánto va a La Paz vs. Beni? Este clasificador responde esa pregunta.',
color: '#4A8B6E',
},
};
const WIDGETS_INGRESOS = [
{ id: 'rubros', q: '¿Qué tipo de ingreso?', d: 'Impuestos, regalías, ventas, créditos — la naturaleza de cada ingreso', t: 'Recursos por rubros' },
{ id: 'fuentes', q: '¿Quién pone la plata?', d: 'TGN, crédito externo, donaciones — de qué bolsillo sale', t: 'Fuentes de financiamiento' },
];
const WIDGETS_EN_QUE = [
{ id: 'objeto', q: 'Objeto del gasto', d: 'Sueldos, consultorías, materiales — la lista concreta', t: 'Objeto del gasto' },
{ id: 'sector', q: 'Sector económico', d: 'Industria, construcción, servicios — a qué sector va', t: 'Sectores económicos' },
];
const WIDGETS_BOTTOM = [
{ id: 'finalidad', q: '¿Para qué se gasta?', d: 'Educación, salud, defensa — el objetivo final', t: 'Finalidad y función' },
{ id: 'donde', q: '¿Dónde se gasta?', d: 'Departamentos, municipios — distribución territorial', t: 'Geográfico' },
];
$: modal = activeModal ? MODALS[activeModal] : null;
function openModal(e, id) {
e.stopPropagation();
activeModal = id;
}
function closeModal() { activeModal = null; }
</script>
<div class="page" class:mounted>
<!-- Header -->
<header>
<div class="header-left">
<a href="/" class="back-link">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
</a>
<div class="live-dot"></div>
<span class="header-brand">PRESUPUESTO ABIERTO</span>
</div>
<span class="header-right">Explorar</span>
</header>
<main>
<!-- Title -->
<div class="page-title anim" style="--d:0ms">
<h1>Elige cómo explorar el presupuesto</h1>
<p>Cada clasificador es una forma distinta de ver la misma información. Haz clic en <span class="help-inline">?</span> para entender qué es cada uno.</p>
</div>
<!-- ═══ ¿QUIÉN? ═══ -->
<div class="anim" style="--d:100ms">
<div class="group">
<div class="group-accent" style="--c: {C.text}"></div>
<div class="group-header">
<div class="group-icon" style="--c: {C.text}">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={C.text} stroke-width="1.5" stroke-linecap="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
</div>
<div>
<div class="group-label" style="color:{C.text}">¿QUIÉN?</div>
<div class="group-sub">La entidad que gasta o recibe</div>
</div>
</div>
<div
class="widget-card widget-h"
class:wh={hovered === 'quien'}
on:mouseenter={() => hovered = 'quien'}
on:mouseleave={() => hovered = null}
role="button" tabindex="0"
>
<div class="widget-h-left">
<div class="widget-q" style="font-size:16px">Instituciones públicas</div>
<div class="widget-desc">Ministerios, gobernaciones, municipios, empresas públicas, universidades</div>
</div>
<div class="widget-h-right">
<span class="widget-tech">INSTITUCIONAL</span>
<button class="help-btn help-sm" on:click={(e) => openModal(e, 'quien')}>?</button>
<span class="widget-arrow" class:arrow-show={hovered === 'quien'}>→</span>
</div>
</div>
</div>
</div>
<!-- ═══ INGRESOS + GASTOS ═══ -->
<div class="main-grid">
<!-- INGRESOS -->
<div class="anim col-stretch" style="--d:200ms">
<div class="group group-stretch">
<div class="group-accent" style="--c: {C.accent}"></div>
<div class="group-header">
<div class="group-icon" style="--c: {C.accent}">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke={C.accent} stroke-width="2" stroke-linecap="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
</div>
<div>
<div class="group-label" style="color:{C.accent}">INGRESOS</div>
<div class="group-sub">¿De dónde viene la plata?</div>
</div>
</div>
<div class="widgets-stretch">
{#each WIDGETS_INGRESOS as w}
<div
class="widget-card widget-grow"
class:wh={hovered === w.id}
on:mouseenter={() => hovered = w.id}
on:mouseleave={() => hovered = null}
role="button" tabindex="0"
>
<div class="widget-top">
<h4 class="widget-q">{w.q}</h4>
<button class="help-btn" on:click={(e) => openModal(e, w.id)}>?</button>
</div>
<p class="widget-desc widget-desc-grow">{w.d}</p>
<div class="widget-footer">
<span class="widget-tech">{w.t}</span>
<span class="widget-arrow" class:arrow-show={hovered === w.id}>→</span>
</div>
<div class="widget-glow" style="background:radial-gradient(circle at 50% 50%,{C.accent}06,transparent 70%)"></div>
</div>
{/each}
</div>
</div>
</div>
<!-- GASTOS -->
<div class="anim col-stretch" style="--d:320ms">
<div class="group">
<div class="group-accent" style="--c: {C.green}"></div>
<div class="group-header">
<div class="group-icon" style="--c: {C.green}">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke={C.green} stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12l7 7 7-7"/></svg>
</div>
<div>
<div class="group-label" style="color:{C.green}">GASTOS</div>
<div class="group-sub">¿Cómo se gasta la plata?</div>
</div>
</div>
<div class="group-widgets">
<!-- ¿En qué? sub-group -->
<div class="sub-group">
<div class="sub-group-accent" style="--c: {C.green}"></div>
<div class="sub-group-header">
<div class="sub-group-left">
<div class="sub-group-icon" style="--c: {C.green}">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke={C.green} stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
</div>
<div>
<div class="sub-group-label">¿En qué se gasta?</div>
<div class="sub-group-tag" style="color:{C.green}90">DOS CLASIFICADORES</div>
</div>
</div>
<button class="help-btn help-sm" on:click={(e) => openModal(e, 'objeto')}>?</button>
</div>
<div class="sub-grid">
{#each WIDGETS_EN_QUE as w}
<div
class="widget-card sub-card"
class:wh={hovered === w.id}
on:mouseenter={() => hovered = w.id}
on:mouseleave={() => hovered = null}
role="button" tabindex="0"
>
<div class="widget-top">
<h4 class="widget-q sub-q">{w.q}</h4>
<button class="help-btn help-xs" on:click={(e) => openModal(e, w.id)}>?</button>
</div>
<p class="widget-desc sub-desc">{w.d}</p>
<div class="widget-footer sub-footer">
<span class="widget-tech sub-tech">{w.t}</span>
<span class="widget-arrow" class:arrow-show={hovered === w.id}>→</span>
</div>
<div class="widget-glow" style="background:radial-gradient(circle at 50% 50%,{C.green}06,transparent 70%)"></div>
</div>
{/each}
</div>
</div>
<!-- Bottom row -->
<div class="bottom-grid">
{#each WIDGETS_BOTTOM as w}
<div
class="widget-card"
class:wh={hovered === w.id}
on:mouseenter={() => hovered = w.id}
on:mouseleave={() => hovered = null}
role="button" tabindex="0"
>
<div class="widget-top">
<h4 class="widget-q">{w.q}</h4>
<button class="help-btn" on:click={(e) => openModal(e, w.id)}>?</button>
</div>
<p class="widget-desc">{w.d}</p>
<div class="widget-footer">
<span class="widget-tech">{w.t}</span>
<span class="widget-arrow" class:arrow-show={hovered === w.id}>→</span>
</div>
<div class="widget-glow" style="background:radial-gradient(circle at 50% 50%,{C.green}06,transparent 70%)"></div>
</div>
{/each}
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- ═══ MODAL ═══ -->
{#if modal}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="modal-overlay" on:click={closeModal} role="dialog" aria-modal="true">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="modal-box" on:click|stopPropagation role="document">
<button class="modal-close" on:click={closeModal}>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
</button>
<div class="modal-badge" style="background:{modal.color}12;color:{modal.color}">{modal.tech}</div>
<h2 class="modal-title">{modal.title}</h2>
<div class="modal-section">
<div class="modal-icon">👤</div>
<div>
<div class="modal-label">EN LA VIDA COTIDIANA</div>
<p class="modal-text">{modal.everyday}</p>
</div>
</div>
<div class="modal-divider"></div>
<div class="modal-section">
<div class="modal-icon">🏛️</div>
<div>
<div class="modal-label">EN EL PRESUPUESTO</div>
<p class="modal-text">{modal.budget}</p>
</div>
</div>
<div class="modal-example" style="border-left-color:{modal.color}">
<p>{modal.example}</p>
</div>
</div>
</div>
{/if}
<style>
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,300;8..60,400;8..60,600;8..60,700;8..60,900&family=JetBrains+Mono:wght@300;400;500&family=DM+Sans:wght@400;500;600;700&display=swap');
:global(*) { margin: 0; padding: 0; box-sizing: border-box; }
:global(::selection) { background: #E8C547; color: #0A0A0A; }
:global(::-webkit-scrollbar) { width: 5px; }
:global(::-webkit-scrollbar-track) { background: #0A0A0A; }
:global(::-webkit-scrollbar-thumb) { background: #5A5650; border-radius: 3px; }
@keyframes pulseGlow { 0%,100%{opacity:0.4}50%{opacity:0.9} }
@keyframes mIn { from{opacity:0;transform:translateY(16px) scale(0.97)}to{opacity:1;transform:translateY(0) scale(1)} }
.page { background: #0A0A0A; color: #F5F0E8; min-height: 100vh; font-family: 'Source Serif 4', Georgia, serif; }
/* ── Entrance animations ── */
.anim {
opacity: 0; transform: translateY(24px);
transition: all 0.7s cubic-bezier(0.16,1,0.3,1);
transition-delay: var(--d, 0ms);
}
.mounted .anim { opacity: 1; transform: translateY(0); }
/* ── Header ── */
header {
padding: 18px 40px; display: flex; justify-content: space-between; align-items: center;
border-bottom: 1px solid #222220; position: sticky; top: 0; z-index: 50;
background: rgba(10,10,10,0.93); backdrop-filter: blur(12px);
}
.header-left { display: flex; align-items: center; gap: 12px; }
.back-link { color: #5A5650; display: flex; align-items: center; transition: color 0.3s; text-decoration: none; }
.back-link:hover { color: #F5F0E8; }
.live-dot {
width: 7px; height: 7px; border-radius: 50%; background: #4A8B6E;
animation: pulseGlow 2s ease-in-out infinite;
box-shadow: 0 0 10px rgba(74,139,110,0.37);
}
.header-brand { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.2em; color: #8A8578; font-weight: 500; }
.header-right { font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; color: #5A5650; letter-spacing: 0.04em; }
main { max-width: 1120px; margin: 0 auto; padding: 36px 36px 100px; }
/* ── Page title ── */
.page-title { margin-bottom: 28px; padding: 0 2px; }
.page-title h1 { font-size: 28px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; }
.page-title p { font-family: 'DM Sans', sans-serif; font-size: 14px; color: #5A5650; margin-top: 6px; line-height: 1.5; }
.help-inline {
font-family: 'Source Serif 4', serif; font-weight: 700; color: #8A8578;
border: 1px solid #222220; border-radius: 50%; padding: 0 5px; font-size: 11px;
}
/* ── Group (level 1) ── */
.group {
background: #111111; border: 1px solid #222220; border-radius: 24px;
padding: 20px 18px 18px; position: relative; overflow: hidden;
}
.group-stretch {
display: flex; flex-direction: column; height: 100%;
}
.group-accent {
position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 30%, transparent), transparent);
border-radius: 24px 24px 0 0;
}
.group-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 0 4px; }
.group-icon {
width: 32px; height: 32px; border-radius: 10px;
background: color-mix(in srgb, var(--c) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--c) 20%, transparent);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.group-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; font-weight: 600; line-height: 1; }
.group-sub { font-family: 'DM Sans', sans-serif; font-size: 12px; color: #5A5650; margin-top: 2px; }
.group-widgets { display: flex; flex-direction: column; gap: 10px; }
.widgets-stretch { display: flex; flex-direction: column; gap: 10px; flex: 1; }
/* ── Widget card (level 2) ── */
.widget-card {
background: #131313; border: 1px solid #222220; border-radius: 16px;
padding: 22px; position: relative; overflow: hidden; cursor: pointer;
transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
}
.wh {
background: #1A1A1A; border-color: #2E2E2C; transform: translateY(-1px);
}
.widget-grow {
flex: 1; display: flex; flex-direction: column;
}
/* Horizontal variant (¿Quién?) */
.widget-h {
display: flex; justify-content: space-between; align-items: center;
}
.widget-h-left { flex: 1; }
.widget-h-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.widget-top {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 10px; margin-bottom: 8px; position: relative; z-index: 1;
}
.widget-q {
font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
line-height: 1.2; font-family: 'DM Sans', sans-serif;
}
.widget-desc {
font-family: 'DM Sans', sans-serif; font-size: 12px; color: #8A8578;
line-height: 1.5; position: relative; z-index: 1;
}
.widget-desc-grow { flex: 1; }
.widget-footer {
display: flex; justify-content: space-between; align-items: center;
margin-top: 16px; position: relative; z-index: 1;
}
.widget-tech {
font-family: 'JetBrains Mono', monospace; font-size: 8px;
letter-spacing: 0.12em; color: #5A5650; text-transform: uppercase;
}
.widget-arrow {
font-family: 'DM Sans', sans-serif; font-size: 13px; color: transparent;
transform: translateX(-6px);
transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
}
.arrow-show { color: #F5F0E8; transform: translateX(0); }
.widget-glow {
position: absolute; inset: 0; pointer-events: none;
opacity: 0; transition: opacity 0.4s;
}
.wh > .widget-glow,
.wh .widget-glow { opacity: 1; }
/* ── Sub-group (level 2 container — "¿En qué?") ── */
.sub-group {
background: #0E0E0E; border: 1px solid #222220; border-radius: 18px;
padding: 16px 14px 14px; position: relative; overflow: hidden;
}
.sub-group-accent {
position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 25%, transparent), transparent);
}
.sub-group-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 12px; padding: 0 4px;
}
.sub-group-left { display: flex; align-items: center; gap: 8px; }
.sub-group-icon {
width: 26px; height: 26px; border-radius: 8px;
background: color-mix(in srgb, var(--c) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--c) 18%, transparent);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sub-group-label {
font-family: 'DM Sans', sans-serif; font-size: 14px;
font-weight: 700; color: #F5F0E8; line-height: 1.1;
}
.sub-group-tag {
font-family: 'JetBrains Mono', monospace; font-size: 8px;
letter-spacing: 0.12em; margin-top: 2px;
}
.sub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* ── Sub-widget (level 3) ── */
.sub-card {
background: #111111; border-color: #1E1E1C;
padding: 18px; border-radius: 14px;
}
.sub-card.wh { background: #161616; border-color: #2A2A28; }
.sub-q { font-size: 14px; }
.sub-desc { font-size: 11px; }
.sub-footer { margin-top: 12px; }
.sub-tech { font-size: 7px; }
.bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* ── Main grid — equal height ── */
.main-grid {
display: grid; grid-template-columns: 1fr 2fr;
gap: 16px; margin-top: 16px; align-items: stretch;
}
.col-stretch { display: flex; flex-direction: column; }
/* ── Help button ── */
.help-btn {
width: 26px; height: 26px; border-radius: 50%; border: 1px solid #222220;
background: transparent; color: #5A5650;
font-family: 'Source Serif 4', serif; font-size: 12px; font-weight: 600;
cursor: pointer; transition: all 0.3s;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.help-btn:hover { border-color: #E8C547; color: #E8C547; background: rgba(232,197,71,0.08); }
.help-sm { width: 22px; height: 22px; font-size: 10px; }
.help-xs { width: 20px; height: 20px; font-size: 9px; }
/* ── Modal ── */
.modal-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.8);
backdrop-filter: blur(12px);
display: flex; align-items: center; justify-content: center;
z-index: 1000; padding: 40px;
}
.modal-box {
background: #141414; border: 1px solid #222220; border-radius: 24px;
max-width: 520px; width: 100%; padding: 32px 36px; position: relative;
animation: mIn 0.3s cubic-bezier(0.16,1,0.3,1);
max-height: 85vh; overflow-y: auto;
}
.modal-close {
position: absolute; top: 16px; right: 16px;
background: transparent; border: 1px solid #222220; border-radius: 50%;
width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
color: #5A5650; cursor: pointer; transition: all 0.2s;
}
.modal-close:hover { border-color: #5A5650; color: #F5F0E8; }
.modal-badge {
font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.15em;
border-radius: 6px; padding: 4px 9px; display: inline-block; margin-bottom: 14px;
}
.modal-title { font-size: 24px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 24px; }
.modal-section { display: flex; gap: 14px; }
.modal-icon {
font-size: 18px; width: 36px; height: 36px; background: #161616; border-radius: 10px;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
border: 1px solid #222220;
}
.modal-label {
font-family: 'JetBrains Mono', monospace; font-size: 9px;
letter-spacing: 0.15em; color: #5A5650; margin-bottom: 5px;
}
.modal-text { font-family: 'DM Sans', sans-serif; font-size: 13px; line-height: 1.65; color: #8A8578; }
.modal-divider { height: 1px; background: #222220; margin: 18px 0; margin-left: 50px; }
.modal-example {
margin-top: 20px; margin-left: 50px; padding: 14px 18px;
border-left: 3px solid; background: rgba(232,197,71,0.03);
border-radius: 0 10px 10px 0;
}
.modal-example p {
font-family: 'DM Sans', sans-serif; font-size: 12px;
line-height: 1.6; color: #8A8578; font-style: italic;
}
</style>
\ No newline at end of file
<script>
import { onMount } from 'svelte';
let mounted = false;
let hoveredYear = null;
let showInfo = false;
onMount(() => { setTimeout(() => { mounted = true; }, 50); });
// Dummy data
const objeto = {
codigo: '10000',
nombre: 'Servicios Personales',
nivel: 'Grupo',
años: '2005-2024',
descripcion: 'Gastos por concepto de servicios prestados por el personal permanente y no permanente del sector público.',
variaciones: [
{ rango: '2012-2024', texto: 'Gastos por concepto de servicios prestados por el personal permanente y no permanente.' },
{ rango: '2005-2011', texto: 'Retribuciones y complementos al personal permanente y eventual.' }
]
};
// Dummy spending data (in millions Bs)
const gastoAnual = [
{ año: 2005, monto: 8200, poblacion: 9.4 },
{ año: 2006, monto: 8900, poblacion: 9.5 },
{ año: 2007, monto: 10200, poblacion: 9.6 },
{ año: 2008, monto: 12400, poblacion: 9.8 },
{ año: 2009, monto: 13100, poblacion: 9.9 },
{ año: 2010, monto: 14800, poblacion: 10.0 },
{ año: 2011, monto: 17200, poblacion: 10.2 },
{ año: 2012, monto: 19500, poblacion: 10.4 },
{ año: 2013, monto: 22800, poblacion: 10.5 },
{ año: 2014, monto: 28400, poblacion: 10.7 },
{ año: 2015, monto: 31200, poblacion: 10.9 },
{ año: 2016, monto: 33100, poblacion: 11.0 },
{ año: 2017, monto: 35600, poblacion: 11.2 },
{ año: 2018, monto: 38200, poblacion: 11.4 },
{ año: 2019, monto: 41500, poblacion: 11.5 },
{ año: 2020, monto: 39800, poblacion: 11.7 },
{ año: 2021, monto: 42100, poblacion: 11.8 },
{ año: 2022, monto: 45600, poblacion: 12.0 },
{ año: 2023, monto: 48900, poblacion: 12.1 },
{ año: 2024, monto: 52300, poblacion: 12.3 },
];
const topEntidades = [
{ nombre: 'Ministerio de Educación', monto: 18200, porcentaje: 34.8 },
{ nombre: 'Ministerio de Salud', monto: 8900, porcentaje: 17.0 },
{ nombre: 'Policía Boliviana', monto: 6200, porcentaje: 11.9 },
];
// Calculations
const maxMonto = Math.max(...gastoAnual.map(g => g.monto));
const totalHistorico = gastoAnual.reduce((sum, g) => sum + g.monto, 0);
const totalPorcentaje = 14.2; // dummy: % del presupuesto total
const ranking = 1; // dummy: #1 en gasto
// Current view data (changes on hover)
$: currentData = hoveredYear
? gastoAnual.find(g => g.año === hoveredYear)
: null;
$: displayMonto = currentData ? currentData.monto : totalHistorico;
$: displayPerCapita = currentData
? Math.round(currentData.monto / currentData.poblacion)
: Math.round(totalHistorico / gastoAnual.reduce((sum, g) => sum + g.poblacion, 0) * gastoAnual.length);
$: displayPorcentaje = currentData ? (totalPorcentaje * (currentData.monto / (totalHistorico / gastoAnual.length)) / 1).toFixed(1) : totalPorcentaje;
$: displayLabel = currentData ? currentData.año : '2005-2024';
$: displayRanking = currentData ? `#${ranking} en ${currentData.año}` : `#${ranking}`;
function formatMonto(m) {
if (m >= 1000000) return (m / 1000000).toFixed(1) + 'B';
if (m >= 1000) return (m / 1000).toFixed(1) + 'M';
return m.toString();
}
</script>
<div class="page" class:mounted>
<!-- Header compacto -->
<header>
<nav class="breadcrumb">
<a href="/clasificadores/objeto-gasto">← Objeto del Gasto</a>
</nav>
<div class="title-row">
<div class="title-main">
<span class="codigo">{objeto.codigo}</span>
<h1>{objeto.nombre}</h1>
</div>
<button class="info-btn" on:click={() => showInfo = !showInfo} class:active={showInfo}>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"/>
<path d="M12 16v-4M12 8h.01"/>
</svg>
</button>
</div>
<div class="meta">
<span class="badge">{objeto.nivel}</span>
<span class="years">{objeto.años}</span>
</div>
</header>
<!-- Panel de info (colapsable) -->
{#if showInfo}
<div class="info-panel">
<div class="info-content">
<h4>Definición vigente</h4>
<p>{objeto.descripcion}</p>
{#if objeto.variaciones.length > 1}
<h4>Variaciones históricas</h4>
{#each objeto.variaciones as v}
<div class="variacion">
<span class="variacion-rango">{v.rango}</span>
<p>{v.texto}</p>
</div>
{/each}
{/if}
</div>
</div>
{/if}
<!-- Dashboard principal -->
<main>
<!-- Selector de entidad -->
<div class="entity-selector">
<span class="selector-label">Viendo</span>
<button class="selector-btn">
Todo el sector público
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M6 9l6 6 6-6"/>
</svg>
</button>
</div>
<!-- Gráfico de barras -->
<div class="chart-section">
<div class="chart-header">
<span class="chart-title">Ejecución presupuestaria</span>
<span class="chart-period">{displayLabel}</span>
</div>
<div class="chart">
{#each gastoAnual as g}
<div
class="bar-container"
on:mouseenter={() => hoveredYear = g.año}
on:mouseleave={() => hoveredYear = null}
>
<div
class="bar"
class:hovered={hoveredYear === g.año}
style="height: {(g.monto / maxMonto) * 100}%"
></div>
<span class="bar-label" class:visible={hoveredYear === g.año || g.año % 5 === 0}>
{g.año.toString().slice(-2)}
</span>
</div>
{/each}
</div>
</div>
<!-- KPIs -->
<div class="kpis">
<div class="kpi">
<span class="kpi-value">Bs {formatMonto(displayMonto)}</span>
<span class="kpi-label">{currentData ? 'ese año' : 'acumulado'}</span>
</div>
<div class="kpi">
<span class="kpi-value">Bs {displayPerCapita.toLocaleString()}</span>
<span class="kpi-label">por persona</span>
</div>
<div class="kpi">
<span class="kpi-value">{displayPorcentaje}%</span>
<span class="kpi-label">del total</span>
</div>
<div class="kpi">
<span class="kpi-value">{displayRanking}</span>
<span class="kpi-label">en gasto</span>
</div>
</div>
<!-- Top entidades -->
<div class="top-section">
<h3>Quién más gasta en esto</h3>
<div class="top-list">
{#each topEntidades as ent, i}
<div class="top-item">
<span class="top-rank">#{i + 1}</span>
<div class="top-info">
<span class="top-name">{ent.nombre}</span>
<div class="top-bar-bg">
<div class="top-bar" style="width: {ent.porcentaje}%"></div>
</div>
</div>
<span class="top-pct">{ent.porcentaje}%</span>
</div>
{/each}
</div>
<button class="see-all">Ver todas las entidades →</button>
</div>
</main>
</div>
<style>
.page {
min-height: 100vh;
background: #0A0A0A;
color: #F5F0E8;
font-family: 'Instrument Sans', -apple-system, sans-serif;
opacity: 0;
transition: opacity 0.4s ease;
}
.mounted { opacity: 1; }
/* Header */
header {
padding: 1.5rem 2rem;
border-bottom: 1px solid #1E1E1C;
}
.breadcrumb a {
font-family: 'DM Mono', monospace;
font-size: 0.75rem;
color: #5A5650;
text-decoration: none;
transition: color 0.2s;
}
.breadcrumb a:hover { color: #F5F0E8; }
.title-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-top: 1rem;
gap: 1rem;
}
.title-main {
display: flex;
align-items: baseline;
gap: 1rem;
flex-wrap: wrap;
}
.codigo {
font-family: 'DM Mono', monospace;
font-size: 1.75rem;
color: #5A5650;
font-weight: 400;
}
h1 {
font-family: 'DM Serif Display', Georgia, serif;
font-size: 1.75rem;
font-weight: 400;
color: #F5F0E8;
margin: 0;
}
.info-btn {
background: transparent;
border: 1px solid #2E2E2C;
border-radius: 50%;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
color: #5A5650;
cursor: pointer;
transition: all 0.2s;
flex-shrink: 0;
}
.info-btn:hover, .info-btn.active {
border-color: #E8C547;
color: #E8C547;
}
.meta {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 0.75rem;
}
.badge {
font-family: 'DM Mono', monospace;
font-size: 0.625rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.25rem 0.5rem;
background: #1A1A18;
border: 1px solid #2E2E2C;
border-radius: 4px;
color: #8A8578;
}
.years {
font-family: 'DM Mono', monospace;
font-size: 0.75rem;
color: #5A5650;
}
/* Info panel */
.info-panel {
background: #111110;
border-bottom: 1px solid #1E1E1C;
padding: 1.5rem 2rem;
}
.info-content h4 {
font-family: 'DM Mono', monospace;
font-size: 0.625rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #5A5650;
margin: 0 0 0.5rem 0;
}
.info-content p {
font-size: 0.875rem;
line-height: 1.6;
color: #8A8578;
margin: 0 0 1.25rem 0;
}
.variacion {
padding-left: 1rem;
border-left: 2px solid #2E2E2C;
margin-bottom: 1rem;
}
.variacion-rango {
font-family: 'DM Mono', monospace;
font-size: 0.688rem;
color: #5A5650;
}
.variacion p {
margin-top: 0.25rem;
font-size: 0.813rem;
}
/* Main */
main {
padding: 2rem;
max-width: 900px;
margin: 0 auto;
}
/* Entity selector */
.entity-selector {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 2rem;
}
.selector-label {
font-size: 0.813rem;
color: #5A5650;
}
.selector-btn {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: #161614;
border: 1px solid #2E2E2C;
border-radius: 8px;
color: #F5F0E8;
font-size: 0.875rem;
cursor: pointer;
transition: all 0.2s;
}
.selector-btn:hover {
border-color: #E8C547;
}
.selector-btn svg {
color: #5A5650;
}
/* Chart */
.chart-section {
margin-bottom: 2rem;
}
.chart-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 1rem;
}
.chart-title {
font-size: 0.75rem;
color: #5A5650;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.chart-period {
font-family: 'DM Mono', monospace;
font-size: 0.875rem;
color: #E8C547;
}
.chart {
display: flex;
align-items: flex-end;
gap: 4px;
height: 160px;
padding: 0 0.5rem;
}
.bar-container {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
cursor: pointer;
}
.bar {
width: 100%;
background: linear-gradient(to top, #2A5A45, #4A8B6E);
border-radius: 4px 4px 0 0;
transition: all 0.2s ease;
min-height: 4px;
}
.bar.hovered {
background: linear-gradient(to top, #E8C547, #F5D76E);
transform: scaleX(1.1);
}
.bar-label {
font-family: 'DM Mono', monospace;
font-size: 0.625rem;
color: #5A5650;
margin-top: 0.5rem;
opacity: 0;
transition: opacity 0.2s;
}
.bar-label.visible { opacity: 1; }
/* KPIs */
.kpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: #2E2E2C;
border-radius: 12px;
overflow: hidden;
margin-bottom: 2.5rem;
}
.kpi {
background: #131312;
padding: 1.25rem 1rem;
text-align: center;
}
.kpi-value {
display: block;
font-family: 'DM Serif Display', Georgia, serif;
font-size: 1.375rem;
color: #F5F0E8;
margin-bottom: 0.25rem;
}
.kpi-label {
font-size: 0.688rem;
color: #5A5650;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Top entidades */
.top-section h3 {
font-family: 'DM Mono', monospace;
font-size: 0.75rem;
color: #5A5650;
text-transform: uppercase;
letter-spacing: 0.1em;
margin: 0 0 1rem 0;
}
.top-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.top-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.875rem 1rem;
background: #131312;
border-radius: 10px;
border: 1px solid #1E1E1C;
transition: border-color 0.2s;
}
.top-item:hover {
border-color: #2E2E2C;
}
.top-rank {
font-family: 'DM Mono', monospace;
font-size: 0.875rem;
color: #5A5650;
width: 24px;
}
.top-info {
flex: 1;
}
.top-name {
display: block;
font-size: 0.875rem;
color: #F5F0E8;
margin-bottom: 0.5rem;
}
.top-bar-bg {
height: 4px;
background: #1E1E1C;
border-radius: 2px;
overflow: hidden;
}
.top-bar {
height: 100%;
background: linear-gradient(to right, #4A8B6E, #6BAF8E);
border-radius: 2px;
}
.top-pct {
font-family: 'DM Mono', monospace;
font-size: 0.875rem;
color: #E8C547;
}
.see-all {
background: transparent;
border: 1px solid #2E2E2C;
border-radius: 8px;
padding: 0.75rem 1rem;
color: #8A8578;
font-size: 0.813rem;
cursor: pointer;
transition: all 0.2s;
width: 100%;
margin-top: 1rem;
}
.see-all:hover {
border-color: #E8C547;
color: #E8C547;
}
/* Responsive */
@media (max-width: 640px) {
header, main {
padding: 1.25rem 1rem;
}
.title-main {
flex-direction: column;
gap: 0.25rem;
}
.codigo {
font-size: 1.25rem;
}
h1 {
font-size: 1.375rem;
}
.kpis {
grid-template-columns: repeat(2, 1fr);
}
.chart {
height: 120px;
}
}
</style>