Rafael Lopez / ppto

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

ser personales

Expand all
Inline Side-by-side
Showing 8 changed files with 73 additions and 70 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);
......
This diff is collapsed. Click to expand it.
......@@ -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 -->
......
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.