bjuscador

Rafael Lopez
Commit 8e4823f7a9539548eaaf0c1b65432e47bff629e6 8e4823f7 1 parent 5c57c13b
Showing 1 changed file with 412 additions and 62 deletions
src/routes/+page.svelte
--- a/src/routes/+page.svelte
View file @8e4823f
+++ b/src/routes/+page.svelte
View file @8e4823f
@@ -2,6 +2,14 @@
   import { onMount } from 'svelte';
   import { landingSearchMode, landingSelectedClassifiers, landingSearchQuery } from '$lib/stores/landingSearchState';
+  // Theme
+  let isDark = true;
+  function toggleTheme() {
+    isDark = !isDark;
+    document.documentElement.classList.toggle('dark', isDark);
+    localStorage.setItem('theme', isDark ? 'dark' : 'light');
+  }
+
   // Estado base
   let mounted = false;
   let heroInView = true;
@@ -64,11 +72,31 @@
     }
   }
-  $: sortedHits = filteredHits.length > 0 ? [...filteredHits].sort((a, b) => {
+  $: sortedHits = (() => {
-    const dir = sortOrder === 'desc' ? 1 : -1;
+    if (filteredHits.length === 0) return [];
-    if (sortBy === 'alpha') return dir * (a.document.texto || '').localeCompare(b.document.texto || '');
+    const isFlatMode = isMixedClassSearch || searchMode === 'todo';
-    return dir * ((b.document.devengado || 0) - (a.document.devengado || 0));
+
-  }) : [];
+    // Filtrar duplicados de finfun y categorías ocultas
+    let hits = filteredHits.filter(hit => {
+      const cls = CLASS_REVERSE_MAP[hit.document.class_] || hit.document.class_ || 'otros';
+      if (isFlatMode && hiddenCategories.has(cls)) return false;
+      if (hit.document.class_ === 'finfun' || hit.document.class_ === 'finalidad') {
+        const m = parseMetadatos(hit.document.metadatos);
+        if (m.finfun_funcion === 0 && m.finfun_grpfuncion !== undefined) return false;
+      }
+      return true;
+    });
+
+    // En modo todo/mixto: mantener orden de la API (relevancia)
+    if (isFlatMode) return hits;
+
+    // En otros modos: ordenar por criterio del usuario
+    return [...hits].sort((a, b) => {
+      const dir = sortOrder === 'desc' ? 1 : -1;
+      if (sortBy === 'alpha') return dir * (a.document.texto || '').localeCompare(b.document.texto || '');
+      return dir * ((b.document.devengado || 0) - (a.document.devengado || 0));
+    });
+  })();
   // Detectar tipos de clasificadores presentes en los resultados
   // Mapeo inverso: API class_ → id interno del clasificador
@@ -123,11 +151,50 @@
     finfun: 'Para qué se gasta',
     ubigeo: 'Dónde se gasta',
     acteco: 'En qué sectores',
+    sectores: 'En qué sectores',
     rubro: 'Con qué recursos',
     organismo: 'Quién financia',
     fuente: 'Origen del ingreso',
+    geografico: 'Dónde se gasta',
+  };
+
+  const CLASS_COLORS = {
+    entidad: '#6B8CA6',
+    objeto: '#C9A751',
+    finfun: '#8B6E9B',
+    geografico: '#4A8B6E',
+    ubigeo: '#4A8B6E',
+    sectores: '#C44B3F',
+    acteco: '#C44B3F',
+    rubro: '#D4A017',
+    organismo: '#5A9BD5',
+    fuente: '#7CB68E',
+    otros: '#6B6860',
+    programa_proyecto: '#6B6860',
   };
+  // Filtros de categoría visibles en modo todo (vista plana)
+  let hiddenCategories = new Set();
+
+  function toggleCategory(cls) {
+    const next = new Set(hiddenCategories);
+    if (next.has(cls)) next.delete(cls);
+    else next.add(cls);
+    hiddenCategories = next;
+  }
+
+  // Categorías presentes en los resultados actuales con conteos
+  $: presentCategories = (() => {
+    const counts = {};
+    filteredHits.forEach(h => {
+      const cls = CLASS_REVERSE_MAP[h.document.class_] || h.document.class_ || 'otros';
+      counts[cls] = (counts[cls] || 0) + 1;
+    });
+    return Object.entries(counts)
+      .map(([id, count]) => ({ id, count, label: CLASS_EASY_LABELS[id] || CLASS_LABELS[id] || id, color: CLASS_COLORS[id] || '#6B6860' }))
+      .sort((a, b) => b.count - a.count);
+  })();
+
   // Extraer código de finfun desde metadatos (formato con puntos: 1, 1.1, 1.1.3)
   function getFinfunCodigo(meta) {
     const fin = String(meta.finfun_finalidad || '');
@@ -155,38 +222,9 @@
   $: groupedHits = (() => {
     if (filteredHits.length === 0) return null;
-    // Búsqueda mixta o global: agrupar por tipo
+    // Búsqueda mixta o global: vista plana (sin agrupar)
     if (isMixedClassSearch || searchMode === 'todo') {
-      // Filtrar duplicados de finfun
+      return null;
-      const filtered = filteredHits.filter(hit => {
-        if (hit.document.class_ !== 'finfun' && hit.document.class_ !== 'finalidad') return true;
-        const m = parseMetadatos(hit.document.metadatos);
-        return !(m.finfun_funcion === 0 && m.finfun_grpfuncion !== undefined);
-      });
-
-      const groups = {};
-      filtered.forEach(hit => {
-        const type = CLASS_REVERSE_MAP[hit.document.class_] || hit.document.class_ || 'otros';
-        const groupName = CLASS_LABELS[type] || type;
-        if (!groups[groupName]) {
-          groups[groupName] = { name: groupName, hits: [], totalMonto: 0, classType: type };
-        }
-        groups[groupName].hits.push(hit);
-        groups[groupName].totalMonto += hit.document.devengado || 0;
-      });
-
-      const dir = sortOrder === 'desc' ? 1 : -1;
-      Object.values(groups).forEach(group => {
-        group.hits.sort((a, b) => {
-          if (sortBy === 'alpha') return dir * (a.document.texto || '').localeCompare(b.document.texto || '');
-          return dir * ((b.document.devengado || 0) - (a.document.devengado || 0));
-        });
-      });
-
-      // Menos hits primero (clasificadores arriba, programas abajo)
-      const sortedGroups = Object.values(groups);
-      sortedGroups.sort((a, b) => a.hits.length - b.hits.length);
-      return sortedGroups;
     }
     if (isEntidadSearchActive) {
@@ -373,6 +411,9 @@
       searchMode = mode;
       if (mode === 'programas') {
         selectedClassifiers = [];
+      } else if (mode === 'clasificadores') {
+        // Seleccionar todos los clasificadores habilitados
+        selectedClassifiers = CLASIFICADORES.filter(c => !c.disabled).map(c => c.id);
       }
     }
   }
@@ -519,6 +560,7 @@
   // Observer para actualizar sección activa
   let sectionObserver;
   onMount(() => {
+    isDark = document.documentElement.classList.contains('dark');
     setTimeout(() => { mounted = true; }, 80);
     fetchDaily();
@@ -633,6 +675,7 @@
         resetSeenHits();
         expandedGroups = [];
         collapsedGroups = [];
+        hiddenCategories = new Set();
         allHits = data.hits;
       } else {
         allHits = [...allHits, ...data.hits];
@@ -901,16 +944,33 @@
     <div class="hero-topbar">
       <div class="nav-logo" class:nav-hidden={!heroInView}>
-        <img src="/logos_oscuro/05_Imago MEFP horizontal espacio negativo.png" alt="MEFP" />
+        {#if isDark}
+          <img src="/logos_oscuro/05_Imago MEFP horizontal espacio negativo.png" alt="MEFP" />
+        {:else}
+          <img src="/logos_claro/06_Isologo MEFP horizontal escala de grises.png" alt="MEFP" />
+        {/if}
       </div>
-      <button class="nav-menu-btn" class:nav-hidden={!heroInView} aria-label="Menú">
+      <div class="hero-topbar-right" class:nav-hidden={!heroInView}>
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+        <button class="nav-theme-btn" on:click={toggleTheme} aria-label={isDark ? 'Cambiar a modo claro' : 'Cambiar a modo oscuro'}>
-          <line x1="3" y1="6" x2="21" y2="6"/>
+          {#if isDark}
-          <line x1="3" y1="12" x2="21" y2="12"/>
+            <svg width="18" height="18" fill="currentColor" viewBox="0 0 20 20">
-          <line x1="3" y1="18" x2="21" y2="18"/>
+              <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/>
-        </svg>
+            </svg>
-      </button>
+          {:else}
+            <svg width="18" height="18" fill="currentColor" viewBox="0 0 20 20">
+              <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"/>
+            </svg>
+          {/if}
+        </button>
+        <button class="nav-menu-btn" aria-label="Menú">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+            <line x1="3" y1="6" x2="21" y2="6"/>
+            <line x1="3" y1="12" x2="21" y2="12"/>
+            <line x1="3" y1="18" x2="21" y2="18"/>
+          </svg>
+        </button>
+      </div>
     </div>
     <div class="search-container anim" style="--d:200ms">
@@ -966,6 +1026,24 @@
           </div>
         </div>
+        <!-- Filtros de categoría (pegados al search bar) -->
+        {#if (searchMode === 'todo' || isMixedClassSearch) && presentCategories.length > 1 && allHits.length > 0}
+          <div class="cat-filters">
+            {#each presentCategories as cat}
+              <button
+                class="cat-filter-chip"
+                class:cat-filter-hidden={hiddenCategories.has(cat.id)}
+                on:click={() => toggleCategory(cat.id)}
+                style="--cat-color:{cat.color}"
+              >
+                <span class="cat-filter-dot"></span>
+                <span class="cat-filter-label">{cat.label}</span>
+                <span class="cat-filter-count">{cat.count}</span>
+              </button>
+            {/each}
+          </div>
+        {/if}
+
         <!-- ─── ÁREA DE RESULTADOS ─── -->
         <div class="results-area" bind:this={resultsAreaEl}>
@@ -1047,13 +1125,7 @@
                   on:click|stopPropagation={() => { if (!clf.disabled) toggleClassifier(clf.id); }}
                   disabled={clf.disabled}
                 >
-                  <span class="clf-check">
+                  <span class="clf-dot"></span>
-                    {#if selectedClassifiers.includes(clf.id)}
-                      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
-                        <polyline points="20 6 9 17 4 12"/>
-                      </svg>
-                    {/if}
-                  </span>
                   <span class="clf-label">{clf.label}</span>
                 </button>
               {/each}
@@ -1348,8 +1420,8 @@
                     >
                       <div class="result-content">
                         <div class="result-text">
-                          {#if isMixedClassSearch && hitType}
+                          {#if (isMixedClassSearch || searchMode === 'todo') && hitType}
-                            <span class="result-type-badge">{CLASS_LABELS[hitType] || hitType}</span>
+                            <span class="result-cat-tag" style="--cat-color:{CLASS_COLORS[hitType] || '#6B6860'}">{CLASS_EASY_LABELS[hitType] || CLASS_LABELS[hitType] || hitType}</span>
                           {/if}
                           {#if hit.highlights?.[0]?.snippet}
                             {@html hit.highlights[0].snippet}
@@ -1875,8 +1947,10 @@
 <style>
   @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&display=swap');
   :global(*){margin:0;padding:0;box-sizing:border-box}
-  :global(html){width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;background:#1C1C1A;scroll-behavior:smooth}
+  :global(html){width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;background:#1C1C1A;scroll-behavior:smooth;transition:background 0.3s}
-  :global(body){width:100%;min-height:100%;margin:0;padding:0;overflow-x:hidden;background:#1C1C1A}
+  :global(html:not(.dark)){background:#ffffff}
+  :global(body){width:100%;min-height:100%;margin:0;padding:0;overflow-x:hidden;background:#1C1C1A;transition:background 0.3s}
+  :global(html:not(.dark)) body{background:#ffffff}
   :global(::selection){background:#C9A751;color:#1C1C1A}
   :global(::-webkit-scrollbar){width:5px}
   :global(::-webkit-scrollbar-track){background:#1C1C1A}
@@ -2075,6 +2149,24 @@
   .mode-card-active{background:rgba(240,193,77,0.06);border-color:rgba(240,193,77,0.25);box-shadow:0 8px 32px rgba(0,0,0,0.2),0 0 0 1px rgba(240,193,77,0.1)}
   .mode-card-active:hover{background:rgba(240,193,77,0.08);border-color:rgba(240,193,77,0.35)}
+  /* Category filter chips */
+  .cat-filters{display:flex;flex-wrap:wrap;gap:6px;padding:8px 4px 0;z-index:10}
+  .cat-filter-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:6px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);cursor:pointer;transition:all 0.2s;font-family:var(--sans);font-size:11px}
+  .cat-filter-chip:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.15)}
+  .cat-filter-hidden{opacity:0.35}
+  .cat-filter-hidden:hover{opacity:0.6}
+  .cat-filter-dot{width:6px;height:6px;border-radius:50%;background:var(--cat-color);flex-shrink:0;transition:opacity 0.2s}
+  .cat-filter-hidden .cat-filter-dot{opacity:0.4}
+  .cat-filter-label{color:#D0CCC4;transition:color 0.2s}
+  .cat-filter-hidden .cat-filter-label{color:#6B6860}
+  .cat-filter-count{font-family:var(--mono);font-size:10px;color:#6B6860;transition:color 0.2s}
+
+  /* Result category tag */
+  .result-cat-tag{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:500;letter-spacing:0.02em;color:var(--cat-color);flex-shrink:0;white-space:nowrap}
+  .result-cat-tag::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--cat-color);flex-shrink:0}
+
+  /* Cards y search elevados en light mode */
+
   .mode-card-header{display:flex;align-items:center;gap:10px}
   .mode-card-icon{display:flex;align-items:center;justify-content:center;color:#9B9890;transition:color 0.3s}
   .mode-card:hover .mode-card-icon{color:#D0CCC4}
@@ -2093,8 +2185,9 @@
   .clf-chip-active{background:rgba(90,175,138,0.15);border-color:rgba(90,175,138,0.4);color:#6BC99E}
   .clf-chip-disabled{opacity:0.35;cursor:not-allowed}
   .clf-chip-disabled:hover{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.08)}
-  .clf-check{width:14px;height:14px;border-radius:4px;border:1.5px solid rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;transition:all 0.2s;flex-shrink:0}
+  .clf-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,0.15);flex-shrink:0;transition:all 0.3s cubic-bezier(0.16,1,0.3,1)}
-  .clf-chip-active .clf-check{background:#4A8B6E;border-color:#4A8B6E}
+  .clf-chip:hover .clf-dot{background:rgba(255,255,255,0.3)}
+  .clf-chip-active .clf-dot{background:#4A8B6E;box-shadow:0 0 6px rgba(74,139,110,0.3)}
   .clf-label{line-height:1}
   .mode-card-pills{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;align-items:center}
@@ -2238,8 +2331,11 @@
   /* Nav elements in hero */
   .hero-topbar{display:contents}
   main[data-section="hero"] .nav-logo{position:fixed;top:24px;left:24px;z-index:100;transition:opacity 0.4s ease,transform 0.4s ease}
-  .nav-menu-btn{position:fixed;top:24px;right:24px;z-index:100;background:rgba(255,255,255,0.06);border:none;border-radius:10px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#B8B5AD;transition:all 0.3s ease}
+  .hero-topbar-right{position:fixed;top:24px;right:24px;z-index:100;display:flex;align-items:center;gap:8px;transition:opacity 0.4s ease,transform 0.4s ease}
+  .nav-menu-btn{background:rgba(255,255,255,0.06);border:none;border-radius:10px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#B8B5AD;transition:all 0.3s ease}
   .nav-menu-btn:hover{background:rgba(255,255,255,0.1);color:#F5F0E8}
+  .nav-theme-btn{background:rgba(255,255,255,0.06);border:none;border-radius:10px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#B8B5AD;transition:all 0.3s ease}
+  .nav-theme-btn:hover{background:rgba(255,255,255,0.1);color:#F5F0E8}
   .nav-hidden{opacity:0;pointer-events:none;transform:translateY(-10px)}
   /* ── DIRECTORY ── */
@@ -2415,6 +2511,247 @@
   .footer-right{font-family:var(--mono);font-size:12px;letter-spacing:0.1em;color:#6B6860}
   /* ══════════════════════════════════════════════════════════════════════════
+     MODO CLARO (LIGHT MODE)
+     ══════════════════════════════════════════════════════════════════════════ */
+  :global(html:not(.dark)) .page{color:#1C1C1A}
+  :global(html:not(.dark)){background:#ffffff}
+  :global(html:not(.dark)) body{background:#ffffff}
+  :global(html:not(.dark)) ::-webkit-scrollbar-track{background:#f5f5f7}
+  :global(html:not(.dark)) ::-webkit-scrollbar-thumb{background:#c0c0c0}
+  :global(html:not(.dark)) ::selection{background:#C9A751;color:#ffffff}
+
+  /* Hero */
+  :global(html:not(.dark)) main[data-section="hero"]{background:#f2f2f4}
+  :global(html:not(.dark)) .hero-title{color:#1d1d1f}
+  :global(html:not(.dark)) .gold{color:#D4A017}
+  :global(html:not(.dark)) .hero-sub{color:#424245}
+  :global(html:not(.dark)) .ambient-glow{background:radial-gradient(ellipse at center,rgba(212,160,23,0.06) 0%,rgba(212,160,23,0.02) 35%,transparent 70%)}
+
+  /* Nav elements in hero */
+  :global(html:not(.dark)) .nav-menu-btn{background:rgba(0,0,0,0.05);color:#555}
+  :global(html:not(.dark)) .nav-menu-btn:hover{background:rgba(0,0,0,0.1);color:#1d1d1f}
+  :global(html:not(.dark)) .nav-theme-btn{background:rgba(0,0,0,0.05);color:#555}
+  :global(html:not(.dark)) .nav-theme-btn:hover{background:rgba(0,0,0,0.1);color:#1d1d1f}
+
+  /* Search bar */
+  :global(html:not(.dark)) .search-bar{background:#ffffff;box-shadow:none}
+  :global(html:not(.dark)) .search-focused{background:#ffffff;backdrop-filter:blur(24px);box-shadow:none}
+  :global(html:not(.dark)) .has-results{background:#ffffff}
+  :global(html:not(.dark)) .search-input-wrap input{color:#1d1d1f;caret-color:transparent}
+  :global(html:not(.dark)) .search-input-wrap input.has-text{caret-color:#1d1d1f}
+  :global(html:not(.dark)) .search-icon{stroke:#D4A017}
+  :global(html:not(.dark)) .blink-cursor{background:#D4A017}
+  :global(html:not(.dark)) .placeholder-text{color:#999}
+  :global(html:not(.dark)) .search-clear{color:#999}
+  :global(html:not(.dark)) .search-clear:hover{color:#333}
+  :global(html:not(.dark)) .search-divider{background:rgba(0,0,0,0.08)}
+  :global(html:not(.dark)) .loading-dot{background:#9A8550}
+
+  /* Search meta */
+  :global(html:not(.dark)) .search-badge{color:#4A8B6E;background:rgba(74,139,110,0.1)}
+  :global(html:not(.dark)) .search-diario-link{color:#9A8550;background:rgba(154,133,80,0.1)}
+  :global(html:not(.dark)) .search-diario-link:hover{background:rgba(154,133,80,0.18);color:#857040}
+
+  /* Section labels */
+  :global(html:not(.dark)) .section-label{color:#D4A017}
+
+  /* Mode cards */
+  :global(html:not(.dark)) .mode-card{background:#ffffff;border-color:rgba(0,0,0,0.06);box-shadow:none}
+  :global(html:not(.dark)) .mode-card:hover{background:#ffffff;border-color:rgba(0,0,0,0.1);box-shadow:none}
+  :global(html:not(.dark)) .mode-card-active{background:#ffffff;border-color:rgba(212,160,23,0.35);box-shadow:none}
+  :global(html:not(.dark)) .mode-card-active:hover{background:#ffffff;border-color:rgba(212,160,23,0.45);box-shadow:none}
+  :global(html:not(.dark)) .mode-card-icon{color:#999}
+  :global(html:not(.dark)) .mode-card:hover .mode-card-icon{color:#666}
+  :global(html:not(.dark)) .mode-card-active .mode-card-icon{color:#D4A017}
+  :global(html:not(.dark)) .mode-card-title{color:#1d1d1f}
+  :global(html:not(.dark)) .mode-card-desc{color:#666}
+  :global(html:not(.dark)) .mode-card-desc strong{color:#333}
+  :global(html:not(.dark)) .mode-card-active .mode-card-desc{color:#555}
+  :global(html:not(.dark)) .mode-card-active .mode-card-desc strong{color:#D4A017}
+
+  /* Classifier chips */
+  :global(html:not(.dark)) .clf-chip{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.08);color:#666}
+  :global(html:not(.dark)) .clf-chip:hover{background:rgba(0,0,0,0.06);border-color:rgba(0,0,0,0.15);color:#333}
+  :global(html:not(.dark)) .clf-chip-active{background:rgba(212,160,23,0.08);border-color:rgba(212,160,23,0.3);color:#9A8520}
+  :global(html:not(.dark)) .clf-dot{background:rgba(0,0,0,0.1)}
+  :global(html:not(.dark)) .clf-chip:hover .clf-dot{background:rgba(0,0,0,0.2)}
+  :global(html:not(.dark)) .clf-chip-active .clf-dot{background:#D4A017;box-shadow:0 0 6px rgba(212,160,23,0.25)}
+
+  /* Radio dots */
+  :global(html:not(.dark)) .radio-dot{border-color:rgba(0,0,0,0.2)}
+  :global(html:not(.dark)) .radio-dot::after{background:#D4A017}
+  :global(html:not(.dark)) .radio-dot-active{border-color:#D4A017}
+
+  /* Mode pills */
+  :global(html:not(.dark)) .mode-pill{border-color:rgba(0,0,0,0.12);background:rgba(0,0,0,0.04);color:#555}
+  :global(html:not(.dark)) .mode-pill:hover{background:rgba(0,0,0,0.08);border-color:rgba(0,0,0,0.2);color:#1d1d1f}
+  :global(html:not(.dark)) .pills-hint{color:#999}
+
+  /* Gear / settings */
+  :global(html:not(.dark)) .gear-btn{background:rgba(0,0,0,0.05)}
+  :global(html:not(.dark)) .gear-btn:hover,:global(html:not(.dark)) .gear-active{background:rgba(0,0,0,0.1)}
+  :global(html:not(.dark)) .gear-menu{background:rgba(255,255,255,0.92);box-shadow:0 12px 48px rgba(0,0,0,0.15);border:1px solid rgba(0,0,0,0.08)}
+  :global(html:not(.dark)) .gear-menu-title{color:#999}
+  :global(html:not(.dark)) .gear-row:hover{background:rgba(0,0,0,0.04)}
+  :global(html:not(.dark)) .gear-check{border-color:rgba(0,0,0,0.15)}
+  :global(html:not(.dark)) .gear-check-on{background:#9A8550;color:#fff}
+  :global(html:not(.dark)) .gear-row-question{color:#aaa}
+  :global(html:not(.dark)) .gear-row-label{color:#888}
+  :global(html:not(.dark)) .gear-row-label-on{color:#1d1d1f}
+  :global(html:not(.dark)) .gear-row-count{color:#bbb}
+
+  /* Mobile settings */
+  :global(html:not(.dark)) .mobile-settings-btn{background:rgba(0,0,0,0.05)}
+  :global(html:not(.dark)) .mobile-settings-btn:hover,:global(html:not(.dark)) .mobile-settings-open{background:rgba(0,0,0,0.1)}
+  :global(html:not(.dark)) .mobile-filter-section{border-top-color:rgba(0,0,0,0.06)}
+  :global(html:not(.dark)) .mobile-filter-title{color:#999}
+  :global(html:not(.dark)) .mobile-filter-chip{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.08);color:#888}
+  :global(html:not(.dark)) .mobile-filter-chip.filter-chip-active{background:rgba(0,0,0,0.08);border-color:rgba(0,0,0,0.15);color:#1d1d1f}
+  :global(html:not(.dark)) .mobile-meta-item{color:#555}
+  :global(html:not(.dark)) .mobile-search-badge{color:#4A8B6E;background:rgba(74,139,110,0.08)}
+  :global(html:not(.dark)) .mobile-diario-link{color:#9A8550;background:rgba(154,133,80,0.08)}
+
+  /* Results area */
+  :global(html:not(.dark)) .results-content-visible{background:#ffffff;box-shadow:none}
+  :global(html:not(.dark)) .results-summary{border-bottom-color:rgba(0,0,0,0.08)}
+  :global(html:not(.dark)) .summary-count{color:#333}
+  :global(html:not(.dark)) .summary-label{color:#666}
+  :global(html:not(.dark)) .summary-sep{color:#ccc}
+  :global(html:not(.dark)) .summary-tag{color:#888}
+  :global(html:not(.dark)) .summary-tag-gold{color:#3d7a5e}
+  :global(html:not(.dark)) .updating-dot{background:#9A8550}
+
+  /* Sort buttons */
+  :global(html:not(.dark)) .sort-btn{color:#888;background:rgba(0,0,0,0.03)}
+  :global(html:not(.dark)) .sort-btn:hover{background:rgba(0,0,0,0.06);color:#333}
+  :global(html:not(.dark)) .sort-btn-active{background:rgba(0,0,0,0.08);color:#1d1d1f}
+
+  /* Result groups */
+  :global(html:not(.dark)) .result-group{border-bottom-color:rgba(0,0,0,0.06)}
+  :global(html:not(.dark)) .result-group-header{background:rgba(0,0,0,0.03)}
+  :global(html:not(.dark)) .result-group-header:hover{background:rgba(0,0,0,0.06)}
+  :global(html:not(.dark)) .result-group-name{color:#1d1d1f}
+  :global(html:not(.dark)) .result-group-tecnico{color:#999}
+  :global(html:not(.dark)) .result-group-count{color:#666;background:rgba(0,0,0,0.06)}
+  :global(html:not(.dark)) .group-chevron{color:#999}
+  :global(html:not(.dark)) .group-show-more{color:#888}
+  :global(html:not(.dark)) .group-show-more:hover{color:#333}
+
+  /* Result cards */
+  :global(html:not(.dark)) .result-card{border-bottom-color:rgba(0,0,0,0.06)}
+  :global(html:not(.dark)) .result-card:hover{background:rgba(0,0,0,0.03)}
+  :global(html:not(.dark)) .result-card-selected{background:rgba(154,133,80,0.08);border-left-color:#9A8550}
+  :global(html:not(.dark)) .result-card-grouped{border-bottom-color:rgba(0,0,0,0.04)}
+  :global(html:not(.dark)) .result-card-grouped:hover{background:rgba(0,0,0,0.03)}
+  :global(html:not(.dark)) .result-text{color:#1d1d1f}
+  :global(html:not(.dark)) .result-text :global(mark){background:rgba(154,133,80,0.25);color:#1d1d1f}
+  :global(html:not(.dark)) .result-type-badge{background:rgba(154,133,80,0.1);color:#9A8550}
+  :global(html:not(.dark)) .result-parent,:global(html:not(.dark)) .result-subarea,:global(html:not(.dark)) .result-class-type,:global(html:not(.dark)) .result-objeto-nivel{color:#888}
+  :global(html:not(.dark)) .result-objeto-codigo{color:#9A8550}
+  :global(html:not(.dark)) .result-year{color:#666;background:rgba(0,0,0,0.04)}
+  :global(html:not(.dark)) .result-monto{color:#3d7a5e}
+  :global(html:not(.dark)) .result-entity{color:#888}
+  :global(html:not(.dark)) .result-sep{color:#ccc}
+  :global(html:not(.dark)) .result-link-icon{color:#ccc}
+
+  /* Load more */
+  :global(html:not(.dark)) .load-more-container{border-top-color:rgba(0,0,0,0.06)}
+  :global(html:not(.dark)) .load-more-btn{color:#666;background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.08)}
+  :global(html:not(.dark)) .load-more-btn:hover{background:rgba(0,0,0,0.06);color:#1d1d1f}
+
+  /* Category filters light */
+  /* cat-filters light - no extra bg needed, inherits from hero */
+  :global(html:not(.dark)) .cat-filter-chip{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.06)}
+  :global(html:not(.dark)) .cat-filter-chip:hover{background:rgba(0,0,0,0.06);border-color:rgba(0,0,0,0.1)}
+  :global(html:not(.dark)) .cat-filter-label{color:#555}
+  :global(html:not(.dark)) .cat-filter-hidden .cat-filter-label{color:#bbb}
+  :global(html:not(.dark)) .cat-filter-count{color:#aaa}
+
+  /* Context / messages */
+  :global(html:not(.dark)) .search-context-title{color:#888}
+  :global(html:not(.dark)) .search-explain-link{color:#888;border-bottom-color:#bbb}
+  :global(html:not(.dark)) .search-explain-link:hover{color:#9A8550;border-bottom-color:#9A8550}
+  :global(html:not(.dark)) .results-hint,:global(html:not(.dark)) .results-loading{color:#999}
+  :global(html:not(.dark)) .results-empty{color:#888}
+
+  /* Daily card */
+  :global(html:not(.dark)) .daily-card{background:#ffffff;border-color:rgba(212,160,23,0.2);box-shadow:none}
+  :global(html:not(.dark)) .daily-card:hover{background:#ffffff;border-color:rgba(212,160,23,0.35);box-shadow:none}
+  :global(html:not(.dark)) .daily-card-title{color:#9A8550}
+  :global(html:not(.dark)) .daily-card-text{color:#666}
+  :global(html:not(.dark)) .daily-card-text strong{color:#9A8550}
+  :global(html:not(.dark)) .daily-card-arrow{color:#9A8550}
+
+  /* Scroll hint */
+  :global(html:not(.dark)) .scroll-hint{color:#999}
+  :global(html:not(.dark)) .scroll-hint span{color:#999}
+
+  /* Pills (hero) */
+  :global(html:not(.dark)) .pills-label{color:#888}
+  :global(html:not(.dark)) .pill::before{background:rgba(0,0,0,0.08)}
+
+  /* Section dots */
+  :global(html:not(.dark)) .section-dots{background:rgba(0,0,0,0.06);backdrop-filter:blur(8px)}
+  :global(html:not(.dark)) .section-dot{border-color:rgba(0,0,0,0.15);background:rgba(0,0,0,0.05)}
+  :global(html:not(.dark)) .section-dot:hover{border-color:rgba(0,0,0,0.3);background:rgba(0,0,0,0.1)}
+  :global(html:not(.dark)) .section-dot-active{background:#9A8550;border-color:#9A8550}
+  :global(html:not(.dark)) .section-dot-label{color:#888}
+
+  /* Stats */
+  :global(html:not(.dark)) .hero-stats{color:#888}
+  :global(html:not(.dark)) .stat-num{color:#1d1d1f}
+  :global(html:not(.dark)) .stat-link{border-bottom-color:rgba(0,0,0,0.2)}
+  :global(html:not(.dark)) .stat-link:hover{color:#9A8550;border-bottom-color:#9A8550}
+
+  /* Nav */
+  :global(html:not(.dark)) nav{background:#ffffff}
+  :global(html:not(.dark)) .nav-link{color:#666}
+  :global(html:not(.dark)) .nav-link:hover{color:#1d1d1f}
+  :global(html:not(.dark)) .nav-date{color:#888}
+  :global(html:not(.dark)) .date-label{color:#aaa}
+  :global(html:not(.dark)) .nav-sep{background:rgba(0,0,0,0.08)}
+
+  /* ── CLASIFICADORES (already light, minor tweaks) ── */
+  :global(html:not(.dark)) .clasificadores{background:#f0f0f2}
+  :global(html:not(.dark)) .clas-group-card{background:#f7f7f9;border-color:rgba(0,0,0,0.04)}
+  :global(html:not(.dark)) .clas-subgroup{background:#fafafa}
+
+  /* ── HISTORIAS ── */
+  :global(html:not(.dark)) .historias{background:#ffffff}
+  :global(html:not(.dark)) .historias .section-title{color:#1d1d1f}
+  :global(html:not(.dark)) .hist-subtitle{color:#888}
+  :global(html:not(.dark)) .hist-tag-row svg{stroke:#999}
+  :global(html:not(.dark)) .hist-tag-row .section-tag{color:#999}
+  :global(html:not(.dark)) .hist-card{background:color-mix(in srgb, var(--card-color) 8%, #ffffff);border-color:color-mix(in srgb, var(--card-color) 18%, rgba(0,0,0,0.06))}
+  :global(html:not(.dark)) .hist-card-hovered{background:color-mix(in srgb, var(--card-color) 12%, #ffffff);border-color:color-mix(in srgb, var(--card-color) 28%, rgba(0,0,0,0.06));transform:translateY(-3px)}
+  :global(html:not(.dark)) .hist-title{color:#1d1d1f}
+  :global(html:not(.dark)) .hist-desc{color:#666}
+  :global(html:not(.dark)) .hist-cta{color:#999}
+  :global(html:not(.dark)) .gold-link{color:#9A8550}
+
+  /* ── VISUALIZACIONES (already light, minor tweaks) ── */
+  :global(html:not(.dark)) .visualizaciones{background:#f5f5f7}
+  :global(html:not(.dark)) .vis-card{background:#ffffff}
+
+  /* ── MANIFIESTO ── */
+  :global(html:not(.dark)) .manifiesto{background:#f5f5f7}
+  :global(html:not(.dark)) .dot-pattern{opacity:0.03;background-image:radial-gradient(circle at 1px 1px,#333 0.5px,transparent 0)}
+  :global(html:not(.dark)) .section-tag-light{color:#888}
+  :global(html:not(.dark)) .manifiesto-title{color:#1d1d1f}
+
+  /* ── DESCARGAS ── */
+  :global(html:not(.dark)) .descargas{background:#ffffff}
+  :global(html:not(.dark)) .descargas-title{color:#1d1d1f}
+  :global(html:not(.dark)) .format-pill{color:#666;background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.08)}
+  :global(html:not(.dark)) .descargas-link{color:#9A8550}
+  :global(html:not(.dark)) .descargas-link:hover{color:#857040}
+
+  /* ── FOOTER ── */
+  :global(html:not(.dark)) footer{background:#f5f5f7;border-top-color:rgba(0,0,0,0.06)}
+  :global(html:not(.dark)) .footer-org{color:#999}
+  :global(html:not(.dark)) .footer-right{color:#999}
+
+  /* ══════════════════════════════════════════════════════════════════════════
      RESPONSIVE - TABLET (768px)
      ══════════════════════════════════════════════════════════════════════════ */
   @media(max-width:768px){
@@ -2432,7 +2769,9 @@
     nav{padding:12px 24px}
     .hero-topbar{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 0;width:100%;flex-shrink:0}
     main[data-section="hero"] .nav-logo{position:static;height:52px;opacity:1;transform:none}
-    main[data-section="hero"] .nav-menu-btn{position:static;width:40px;height:40px}
+    .hero-topbar-right{position:static;gap:6px}
+    .nav-menu-btn{width:40px;height:40px}
+    .nav-theme-btn{width:40px;height:40px}
     /* Hero */
     .hero{padding:32px 24px}
@@ -2480,7 +2819,7 @@
     .mode-card-title{font-size:14px}
     .mode-card-desc{font-size:11px;line-height:1.3}
     .clf-chip{padding:5px 10px;font-size:11px}
-    .clf-check{width:12px;height:12px}
+    .clf-dot{width:5px;height:5px}
     .mode-pill{font-size:12px;padding:7px 12px}
     .hint-desktop{display:none}
     .hint-mobile{display:inline}
@@ -2504,8 +2843,12 @@
     .summary-tag{font-size:10px}
     .sort-buttons{flex-shrink:0}
     .sort-btn{font-size:11px;padding:5px 8px}
+    .cat-filters{gap:5px}
+    .cat-filter-chip{padding:3px 8px;font-size:10px}
+    .cat-filter-dot{width:5px;height:5px}
     .result-card{padding:12px 14px}
     .result-text{font-size:13px}
+    .result-cat-tag{font-size:9px}
     .result-monto{font-size:11px}
     .result-year{font-size:11px;padding:2px 6px}
     .result-entity{font-size:11px}
@@ -2606,7 +2949,8 @@
     .hero-title{font-size:clamp(34px,10vw,44px)}
     .hero-sub{font-size:13px;margin-bottom:16px}
     main[data-section="hero"] .nav-logo{height:44px}
-    main[data-section="hero"] .nav-menu-btn{width:36px;height:36px}
+    .nav-menu-btn{width:36px;height:36px}
+    .nav-theme-btn{width:36px;height:36px}
     .mode-cards{gap:10px;margin-top:12px}
     .mode-card{padding:12px;gap:5px;border-radius:14px}
     .mode-card-icon svg{width:16px;height:16px}
@@ -2614,7 +2958,7 @@
     .mode-card-desc{font-size:10px;line-height:1.3}
     .mode-card-classifiers{gap:4px}
     .clf-chip{padding:4px 8px;font-size:10px;gap:4px}
-    .clf-check{width:10px;height:10px}
+    .clf-dot{width:4px;height:4px}
     .mode-pill{font-size:11px;padding:6px 10px;border-radius:8px}
     .mode-card-radio{top:12px;right:12px}
     .radio-dot{width:14px;height:14px}
@@ -2636,6 +2980,12 @@
     .summary-tag{font-size:9px}
     .summary-sep{font-size:9px}
     .sort-btn{font-size:10px;padding:4px 6px}
+    .cat-filters{gap:4px}
+    .cat-filter-chip{padding:3px 7px;font-size:9px;gap:4px}
+    .cat-filter-dot{width:4px;height:4px}
+    .cat-filter-count{font-size:9px}
+    .result-cat-tag{font-size:8px}
+    .result-cat-tag::before{width:4px;height:4px}
     .summary-header-text{font-size:12px}
     .result-group-header{padding:10px 12px}
     .result-group-name{font-size:12px}