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-* ...@@ -24,3 +24,6 @@ vite.config.ts.timestamp-*
24 24
25 # Claude 25 # Claude
26 claude.md 26 claude.md
27 +
28 +# Docs internos
29 +static/ESTILOS_*.md
......
...@@ -20,7 +20,6 @@ ...@@ -20,7 +20,6 @@
20 let mode = $state('archivo'); 20 let mode = $state('archivo');
21 let searchFocused = $state(false); 21 let searchFocused = $state(false);
22 let hoveredStory = $state(null); 22 let hoveredStory = $state(null);
23 - let mousePos = $state({ x: 0, y: 0 });
24 let activeToggle = $state(null); 23 let activeToggle = $state(null);
25 let searchInput = $state(null); 24 let searchInput = $state(null);
26 let debounceTimer; 25 let debounceTimer;
...@@ -40,12 +39,12 @@ ...@@ -40,12 +39,12 @@
40 39
41 const MODES = { 40 const MODES = {
42 archivo: { 41 archivo: {
43 - placeholder: 'YPFB, Publicidad, Sueldos...', 42 + placeholder: 'Ej: Ministerio de Salud, YPFB, sueldos...',
44 label: 'Serie histórica', 43 label: 'Serie histórica',
45 color: COLORS.accent, 44 color: COLORS.accent,
46 }, 45 },
47 hoy: { 46 hoy: {
48 - placeholder: 'Tu municipio, Salud, Obras...', 47 + placeholder: 'Ej: Tu municipio, hospitales, obras...',
49 label: 'Actualización diaria', 48 label: 'Actualización diaria',
50 color: COLORS.green, 49 color: COLORS.green,
51 }, 50 },
...@@ -175,10 +174,7 @@ ...@@ -175,10 +174,7 @@
175 }); 174 });
176 observer.observe(document.documentElement, { attributes: true }); 175 observer.observe(document.documentElement, { attributes: true });
177 176
178 - const handleMouse = (e) => { mousePos = { x: e.clientX, y: e.clientY }; };
179 - window.addEventListener('mousemove', handleMouse);
180 return () => { 177 return () => {
181 - window.removeEventListener('mousemove', handleMouse);
182 observer.disconnect(); 178 observer.disconnect();
183 }; 179 };
184 }); 180 });
...@@ -189,9 +185,6 @@ ...@@ -189,9 +185,6 @@
189 </svelte:head> 185 </svelte:head>
190 186
191 <div class="page"> 187 <div class="page">
192 - <!-- Grain overlay -->
193 - <div class="grain"></div>
194 -
195 <!-- Header con Logo y Controles --> 188 <!-- Header con Logo y Controles -->
196 <header class="page-header"> 189 <header class="page-header">
197 {#if isDarkMode} 190 {#if isDarkMode}
...@@ -262,11 +255,6 @@ ...@@ -262,11 +255,6 @@
262 255
263 <!-- Hero --> 256 <!-- Hero -->
264 <section class="hero"> 257 <section class="hero">
265 - <div
266 - class="mouse-glow"
267 - style="background: radial-gradient(800px circle at {mousePos.x}px {mousePos.y}px, rgba(201, 167, 81, 0.03), transparent 60%)"
268 - ></div>
269 -
270 <div class="hero-content"> 258 <div class="hero-content">
271 <!-- Main title --> 259 <!-- Main title -->
272 <h1 class="hero-title fade-in" style="animation-delay: 0.3s"> 260 <h1 class="hero-title fade-in" style="animation-delay: 0.3s">
...@@ -276,11 +264,12 @@ ...@@ -276,11 +264,12 @@
276 <!-- Subtitle - the scale --> 264 <!-- Subtitle - the scale -->
277 <p class="hero-subtitle fade-in" style="animation-delay: 0.5s"> 265 <p class="hero-subtitle fade-in" style="animation-delay: 0.5s">
278 Todos los ingresos y gastos del Estado boliviano.<br /> 266 Todos los ingresos y gastos del Estado boliviano.<br />
279 - <span class="subtitle-stats">600+ entidades · 500+ rubros · 21 años · 9M de registros · actualización diaria</span> 267 + <span class="subtitle-stats">21 años · actualización diaria · 600+ entidades · 9M de registros</span>
280 </p> 268 </p>
281 269
282 <!-- Search - main CTA --> 270 <!-- Search - main CTA -->
283 <div class="search-wrapper fade-in" style="animation-delay: 0.6s"> 271 <div class="search-wrapper fade-in" style="animation-delay: 0.6s">
272 + <p class="search-instruction">Busca cualquier entidad pública o tipo de gasto</p>
284 <div 273 <div
285 class="search-bar" 274 class="search-bar"
286 class:search-focused={searchFocused} 275 class:search-focused={searchFocused}
...@@ -352,9 +341,12 @@ ...@@ -352,9 +341,12 @@
352 {/if} 341 {/if}
353 342
354 {#if !searchFocused || ($results.length === 0 && $query.length < 2)} 343 {#if !searchFocused || ($results.length === 0 && $query.length < 2)}
355 - <a href="/clasificadores" class="browse-link"> 344 + <div class="browse-section">
356 - o explora por clasificadores <span class="browse-arrow">→</span> 345 + <span class="browse-hint">¿No sabes qué buscar?</span>
357 - </a> 346 + <a href="/clasificadores" class="browse-link">
347 + Explora cómo Bolivia organiza sus ingresos y gastos <span class="browse-arrow">→</span>
348 + </a>
349 + </div>
358 {/if} 350 {/if}
359 </div> 351 </div>
360 352
...@@ -448,7 +440,6 @@ ...@@ -448,7 +440,6 @@
448 .page::-webkit-scrollbar-track { background: var(--theme-body); } 440 .page::-webkit-scrollbar-track { background: var(--theme-body); }
449 .page::-webkit-scrollbar-thumb { background: var(--theme-texto); border-radius: 3px; } 441 .page::-webkit-scrollbar-thumb { background: var(--theme-texto); border-radius: 3px; }
450 442
451 - @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%)} }
452 @keyframes fadeInUp { from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)} } 443 @keyframes fadeInUp { from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)} }
453 444
454 .page { 445 .page {
...@@ -460,15 +451,6 @@ ...@@ -460,15 +451,6 @@
460 transition: background-color 0.3s, color 0.3s; 451 transition: background-color 0.3s, color 0.3s;
461 } 452 }
462 453
463 - /* Grain - only visible in dark mode */
464 - .grain {
465 - position: fixed; top: -50%; left: -50%; width: 200%; height: 200%;
466 - pointer-events: none; z-index: 9999; opacity: 0.03;
467 - 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");
468 - animation: grain 0.5s steps(1) infinite;
469 - }
470 - :global(:root:not(.dark)) .grain { display: none; }
471 -
472 /* Header with MEFP logo */ 454 /* Header with MEFP logo */
473 .page-header { 455 .page-header {
474 position: fixed; top: 0; left: 0; right: 0; z-index: 100; 456 position: fixed; top: 0; left: 0; right: 0; z-index: 100;
...@@ -495,11 +477,6 @@ ...@@ -495,11 +477,6 @@
495 min-height: 100vh; display: flex; flex-direction: column; justify-content: center; 477 min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
496 padding: 80px 40px 60px; position: relative; max-width: 1200px; margin: 0 auto; 478 padding: 80px 40px 60px; position: relative; max-width: 1200px; margin: 0 auto;
497 } 479 }
498 - .mouse-glow {
499 - position: fixed; top: 0; left: 0; right: 0; bottom: 0;
500 - pointer-events: none; z-index: 0; transition: background 0.6s;
501 - }
502 - :global(:root:not(.dark)) .mouse-glow { display: none; }
503 .hero-content { 480 .hero-content {
504 position: relative; z-index: 1; 481 position: relative; z-index: 1;
505 display: flex; flex-direction: column; align-items: center; 482 display: flex; flex-direction: column; align-items: center;
...@@ -600,11 +577,24 @@ ...@@ -600,11 +577,24 @@
600 width: 1px; height: 36px; background: var(--theme-borde); 577 width: 1px; height: 36px; background: var(--theme-borde);
601 } 578 }
602 579
580 + .browse-section {
581 + display: flex;
582 + flex-direction: column;
583 + align-items: center;
584 + margin-top: 20px;
585 + gap: 6px;
586 + }
587 + .browse-hint {
588 + font-family: 'DM Sans', sans-serif;
589 + font-size: 12px;
590 + color: var(--theme-texto);
591 + opacity: 0.7;
592 + }
603 .browse-link { 593 .browse-link {
604 display: block; 594 display: block;
605 - margin-top: 14px;
606 font-family: 'DM Sans', sans-serif; 595 font-family: 'DM Sans', sans-serif;
607 - font-size: 12px; color: var(--theme-texto); 596 + font-size: 13px;
597 + color: var(--theme-texto);
608 text-decoration: none; 598 text-decoration: none;
609 text-align: center; 599 text-align: center;
610 transition: color 0.2s; 600 transition: color 0.2s;
...@@ -618,6 +608,13 @@ ...@@ -618,6 +608,13 @@
618 608
619 /* Search - main CTA */ 609 /* Search - main CTA */
620 .search-wrapper { margin-top: 28px; width: 100%; max-width: 520px; position: relative; z-index: 60; } 610 .search-wrapper { margin-top: 28px; width: 100%; max-width: 520px; position: relative; z-index: 60; }
611 + .search-instruction {
612 + font-family: 'DM Sans', sans-serif;
613 + font-size: 15px;
614 + color: var(--theme-titulo);
615 + margin-bottom: 12px;
616 + text-align: center;
617 + }
621 .search-bar { 618 .search-bar {
622 display: flex; align-items: center; 619 display: flex; align-items: center;
623 background: var(--theme-surface); border: 1px solid var(--theme-borde); 620 background: var(--theme-surface); border: 1px solid var(--theme-borde);
......
This diff is collapsed. Click to expand it.
...@@ -836,7 +836,7 @@ ...@@ -836,7 +836,7 @@
836 <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;"> 836 <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;">
837 <!-- Header pedagógico --> 837 <!-- Header pedagógico -->
838 <header class="border-b" style="border-color: var(--theme-borde); background-color: var(--theme-body);"> 838 <header class="border-b" style="border-color: var(--theme-borde); background-color: var(--theme-body);">
839 - <div class="max-w-screen-xl mx-auto px-4 sm:px-6 py-6"> 839 + <div class="max-w-screen-xl mx-auto px-4 sm:px-6 {viewMode === 'mapa' ? 'py-3' : 'py-6'}">
840 <!-- Breadcrumb: responsive --> 840 <!-- Breadcrumb: responsive -->
841 <nav class="mb-4" style="font-family: 'DM Mono', monospace; font-size: 0.75rem;"> 841 <nav class="mb-4" style="font-family: 'DM Mono', monospace; font-size: 0.75rem;">
842 <!-- Móvil: solo padre --> 842 <!-- Móvil: solo padre -->
...@@ -855,48 +855,51 @@ ...@@ -855,48 +855,51 @@
855 <p class="text-xs uppercase tracking-widest mb-2" style="font-family: 'DM Mono', monospace; color: var(--theme-texto);"> 855 <p class="text-xs uppercase tracking-widest mb-2" style="font-family: 'DM Mono', monospace; color: var(--theme-texto);">
856 Clasificador 03 856 Clasificador 03
857 </p> 857 </p>
858 - <h1 class="text-3xl mb-3" style="font-family: 'DM Serif Display', serif; color: var(--theme-titulo);"> 858 + <h1 class="{viewMode === 'mapa' ? 'text-2xl mb-2' : 'text-3xl mb-3'}" style="font-family: 'DM Serif Display', serif; color: var(--theme-titulo);">
859 ¿En qué se gasta? 859 ¿En qué se gasta?
860 </h1> 860 </h1>
861 - <p class="leading-relaxed mb-3" style="color: var(--theme-texto);">
862 - Ordena el gasto según <strong style="color: var(--theme-titulo);">qué se compra o paga</strong>:
863 - sueldos, alquileres, combustible, medicamentos, construcciones, deudas, transferencias.
864 - Es la forma más directa de entender en qué se usa el dinero público.
865 - </p>
866 861
867 - {#if totalItems > 0} 862 + {#if viewMode !== 'mapa'}
868 - <p class="text-sm mb-5" style="font-family: 'DM Mono', monospace; color: var(--theme-texto);"> 863 + <p class="leading-relaxed mb-3" style="color: var(--theme-texto);">
869 - <span style="color: var(--theme-titulo); font-weight: 500;">{totalItems}</span> categorías de gasto: 864 + Ordena el gasto según <strong style="color: var(--theme-titulo);">qué se compra o paga</strong>:
870 - {countByNivel.grupos} grupos, {countByNivel.subgrupos} subgrupos, {countByNivel.partidas} partidas, {countByNivel.subpartidas} subpartidas 865 + sueldos, alquileres, combustible, medicamentos, construcciones, deudas, transferencias.
866 + Es la forma más directa de entender en qué se usa el dinero público.
871 </p> 867 </p>
872 - {/if}
873 868
874 - <!-- Jerarquía --> 869 + {#if totalItems > 0}
875 - <div class="hidden sm:flex flex-wrap items-center gap-2 sm:gap-3 text-xs mb-6" style="font-family: 'DM Mono', monospace;"> 870 + <p class="text-sm mb-5" style="font-family: 'DM Mono', monospace; color: var(--theme-texto);">
876 - <span class="px-2.5 py-1 rounded-full font-medium" style="background-color: var(--theme-accent); color: var(--theme-body); opacity: 0.9;"> 871 + <span style="color: var(--theme-titulo); font-weight: 500;">{totalItems}</span> categorías de gasto:
877 - Grupo 872 + {countByNivel.grupos} grupos, {countByNivel.subgrupos} subgrupos, {countByNivel.partidas} partidas, {countByNivel.subpartidas} subpartidas
878 - </span> 873 + </p>
879 - <span style="color: var(--theme-texto);">→</span> 874 + {/if}
880 - <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);"> 875 +
881 - Subgrupo 876 + <!-- Jerarquía -->
882 - </span> 877 + <div class="hidden sm:flex flex-wrap items-center gap-2 sm:gap-3 text-xs mb-6" style="font-family: 'DM Mono', monospace;">
883 - <span style="color: var(--theme-texto);">→</span> 878 + <span class="px-2.5 py-1 rounded-full font-medium" style="background-color: var(--theme-accent); color: var(--theme-body); opacity: 0.9;">
884 - <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);"> 879 + Grupo
885 - Partida 880 + </span>
886 - </span> 881 + <span style="color: var(--theme-texto);">→</span>
887 - <span style="color: var(--theme-texto);">→</span> 882 + <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);">
888 - <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);"> 883 + Subgrupo
889 - Subpartida 884 + </span>
890 - </span> 885 + <span style="color: var(--theme-texto);">→</span>
891 - </div> 886 + <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);">
892 - <!-- Versión móvil simplificada --> 887 + Partida
893 - <p class="sm:hidden text-sm mb-4" style="font-family: 'DM Mono', monospace; color: var(--theme-texto);"> 888 + </span>
894 - Jerarquía: Grupo → Subgrupo → Partida → Subpartida 889 + <span style="color: var(--theme-texto);">→</span>
895 - </p> 890 + <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);">
891 + Subpartida
892 + </span>
893 + </div>
894 + <!-- Versión móvil simplificada -->
895 + <p class="sm:hidden text-sm mb-4" style="font-family: 'DM Mono', monospace; color: var(--theme-texto);">
896 + Jerarquía: Grupo → Subgrupo → Partida → Subpartida
897 + </p>
898 + {/if}
896 </div> 899 </div>
897 900
898 <!-- Controles de visualización (fuera del max-w-3xl para usar todo el ancho) --> 901 <!-- Controles de visualización (fuera del max-w-3xl para usar todo el ancho) -->
899 - <div class="mt-8"> 902 + <div class="{viewMode === 'mapa' ? 'mt-3' : 'mt-8'}">
900 <!-- Fila principal: Toggle + Guía + Filtros --> 903 <!-- Fila principal: Toggle + Guía + Filtros -->
901 <div class="flex flex-col md:flex-row gap-4 md:items-center md:justify-between"> 904 <div class="flex flex-col md:flex-row gap-4 md:items-center md:justify-between">
902 <!-- Toggle + Guía inline --> 905 <!-- 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.