debounce

Rafael Lopez
Commit f2550ee2695ae28588897b6fb03224feba937e8b f2550ee2 1 parent 8654c184
Showing 1 changed file with 198 additions and 79 deletions
src/routes/+page.svelte
--- a/src/routes/+page.svelte
View file @f2550ee
+++ b/src/routes/+page.svelte
View file @f2550ee
@@ -19,6 +19,9 @@
   let isLoadingMore = false;
   let allHits = [];
+  // Navegación por teclado
+  let selectedResultIndex = -1;
+
   // Tracking para evitar re-animaciones
   let seenHitIds = new Set();
   let lastSearchKey = '';
@@ -122,6 +125,8 @@
     } else {
       selectedClassifiers = [...selectedClassifiers, id];
     }
+    // Mantener foco en el buscador
+    setTimeout(() => searchInput?.focus(), 10);
   }
   function setMode(mode) {
@@ -165,7 +170,7 @@
   let debounceTimer;
   let hintTimer;
   let showMinLengthHint = false;
-  const DEBOUNCE_MS = 450;
+  const DEBOUNCE_MS = 300;
   const HINT_DELAY_MS = 1500;
   const POBLACION = 12000000;
@@ -303,7 +308,9 @@
     if (searchVal.length < 3) {
       results = null;
+      allHits = [];
       error = null;
+      selectedResultIndex = -1;
       if (searchVal.length > 0) {
         hintTimer = setTimeout(() => { showMinLengthHint = true; }, HINT_DELAY_MS);
       }
@@ -379,7 +386,51 @@
   }
   function handleKeydown(e) {
-    if (e.key === 'Escape') { clearSearch(); searchInput?.blur(); }
+    if (e.key === 'Escape') {
+      clearSearch();
+      searchInput?.blur();
+      selectedResultIndex = -1;
+    }
+
+    // Navegación por resultados
+    if (sortedHits.length > 0) {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        selectedResultIndex = Math.min(selectedResultIndex + 1, sortedHits.length - 1);
+        scrollToSelectedResult();
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        selectedResultIndex = Math.max(selectedResultIndex - 1, -1);
+        scrollToSelectedResult();
+      } else if (e.key === 'Enter' && selectedResultIndex >= 0) {
+        e.preventDefault();
+        navigateToResult(sortedHits[selectedResultIndex]);
+      }
+    }
+  }
+
+  function scrollToSelectedResult() {
+    if (selectedResultIndex >= 0) {
+      const el = document.querySelector(`[data-result-index="${selectedResultIndex}"]`);
+      el?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    }
+  }
+
+  function navigateToResult(hit) {
+    const meta = parseMetadatos(hit.document.metadatos);
+    const isEntidadClass = hit.document.class_ === 'entidad';
+    const isClassResult = hit.document.is_class === true;
+
+    let url;
+    if (isEntidadClass) {
+      url = `/entidad/${meta.entidad}`;
+    } else if (isClassResult) {
+      url = `/clasificador/${hit.document.class_}/${hit.document.id}`;
+    } else {
+      url = `/proyecto/${generateCodigo(hit)}`;
+    }
+
+    window.location.href = url;
   }
   function clearSearch() {
@@ -389,6 +440,7 @@
     currentPage = 1;
     error = null;
     showMinLengthHint = false;
+    selectedResultIndex = -1;
     clearTimeout(debounceTimer);
     clearTimeout(hintTimer);
     searchInput?.focus();
@@ -425,13 +477,19 @@
                isClassifier: true, isEntidad, classType: hits[0]?.document?.class_ || null };
     } else {
       const entidadesSet = new Set();
-      hits.forEach(h => { const m = parseMetadatos(h.document.metadatos); if (m.entidad) entidadesSet.add(m.entidad); });
+      const allYears = [];
-      const years = hits.map(h => h.document.gestion).filter(Boolean);
+      hits.forEach(h => {
-      const minYear = Math.min(...years);
+        const m = parseMetadatos(h.document.metadatos);
-      const maxYear = Math.max(...years);
+        if (m.entidad) entidadesSet.add(m.entidad);
+        if (m.gestion) {
+          const years = m.gestion.split(',').map(y => parseInt(y.trim())).filter(y => !isNaN(y));
+          allYears.push(...years);
+        }
+      });
+      const yearRange = allYears.length > 0 ? formatYearsArray(allYears) : null;
       return { found: totalFound, montoTotal, perCapita: montoTotal / POBLACION,
                numEntidades: entidadesSet.size,
-               yearRange: minYear === maxYear ? `${minYear}` : `${minYear} – ${maxYear}`,
+               yearRange,
                isClassifier: false };
     }
   }
@@ -447,6 +505,36 @@
     return `${num.toLocaleString('es-BO', { minimumFractionDigits: 0, maximumFractionDigits: 0 })} Bs`;
   }
+  function formatYearsArray(years) {
+    if (!years || years.length === 0) return '';
+    const sorted = [...new Set(years)].sort((a, b) => a - b);
+    if (sorted.length === 1) return sorted[0].toString();
+
+    // Group into continuous ranges
+    const groups = [];
+    let start = sorted[0];
+    let end = sorted[0];
+
+    for (let i = 1; i < sorted.length; i++) {
+      if (sorted[i] === end + 1) {
+        end = sorted[i];
+      } else {
+        groups.push(start === end ? `${start}` : `${start}-${end}`);
+        start = sorted[i];
+        end = sorted[i];
+      }
+    }
+    groups.push(start === end ? `${start}` : `${start}-${end}`);
+
+    return groups.join(', ');
+  }
+
+  function formatYears(yearsStr) {
+    if (!yearsStr) return '';
+    const years = yearsStr.split(',').map(y => parseInt(y.trim())).filter(y => !isNaN(y));
+    return formatYearsArray(years);
+  }
+
   function generateCodigo(hit) {
     const m = parseMetadatos(hit.document.metadatos);
     return `${m.entidad}-${m.programa}-${m.proyecto}-${m.actividad}-${hit.document.gestion}`;
@@ -462,7 +550,7 @@
       clearTimeout(debounceTimer);
       const needsClassifiers = _mode === 'ingresos' || (_mode === 'gastos' && _submode === 'clasificadores');
       if (!needsClassifiers || _classifiers.length > 0) {
-        debounceTimer = setTimeout(() => performSearch(searchVal), 150);
+        debounceTimer = setTimeout(() => performSearch(searchVal), DEBOUNCE_MS);
       } else {
         // No hay clasificadores seleccionados - limpiar resultados
         results = null;
@@ -507,7 +595,7 @@
     </div>
     <button class="nav-menu-btn" aria-label="Menú">
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+      <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"/>
@@ -526,9 +614,9 @@
       <!-- Buscador -->
       <div class="search-wrap" class:search-wrap-with-results={allHits.length > 0}>
-        <div class="search-bar" class:search-focused={searchFocused} class:has-results={isSearching}>
+        <div class="search-bar" class:search-focused={searchVal.length > 0} class:has-results={isSearching}>
           <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none"
-               stroke={searchFocused ? '#D4B254' : '#8C8880'} stroke-width="2" stroke-linecap="round">
+               stroke={searchVal.length > 0 ? '#FFFFFF' : '#F0C14D'} stroke-width="2" stroke-linecap="round">
             <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/>
           </svg>
@@ -620,15 +708,12 @@
                   >
                     <span class="checkbox-box">
                       {#if selectedClassifiers.includes(clf.id)}
-                        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+                        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                           <polyline points="20 6 9 17 4 12"/>
                         </svg>
                       {/if}
                     </span>
                     <span class="checkbox-label">{clf.label}</span>
-                    {#if clf.disabled}
-                      <span class="chip-soon">próx.</span>
-                    {/if}
                   </button>
                 {/each}
               </div>
@@ -701,28 +786,26 @@
             {#if stats}
                 <div class="results-summary">
                   <div class="summary-row">
-                    <div class="summary-left">
+                    <div class="summary-stats">
-                      <div class="summary-header">
+                      <span class="summary-count">{stats.found.toLocaleString()}</span>
-                        <span class="summary-count">{sortedHits.length}</span>
+                      <span class="summary-label">resultados</span>
-                        <span class="summary-header-text">de {stats.found.toLocaleString()} resultados</span>
+                      <span class="summary-sep">·</span>
-                        {#if isLoading}<span class="updating-dot"></span>{/if}
+                      <span class="summary-tag summary-tag-gold">{formatMonto(stats.montoTotal)}</span>
-                      </div>
+                      <span class="summary-sep">·</span>
-                      <div class="summary-meta">
-                        <span class="summary-tag summary-tag-gold">
-                          {formatMonto(stats.montoTotal)}
-                        </span>
                       {#if stats.isClassifier}
                         {#if stats.isEntidad && groupedHits}
                           <span class="summary-tag summary-tag-entities">{stats.numEntidades} {stats.numEntidades === 1 ? 'entidad' : 'entidades'}</span>
+                          <span class="summary-sep">·</span>
                           <span class="summary-tag">{groupedHits.length} {groupedHits.length === 1 ? 'categoría' : 'categorías'}</span>
                         {/if}
                       {:else}
-                          <span class="summary-tag">en {stats.numEntidades} {stats.numEntidades === 1 ? 'entidad' : 'entidades'}</span>
+                        <span class="summary-tag">{stats.numEntidades} {stats.numEntidades === 1 ? 'entidad' : 'entidades'}</span>
                         {#if stats.yearRange}
+                          <span class="summary-sep">·</span>
                           <span class="summary-tag">{stats.yearRange}</span>
                         {/if}
                       {/if}
-                      </div>
+                      {#if isLoading}<span class="updating-dot"></span>{/if}
                     </div>
                     <div class="sort-buttons">
                       {#if !stats.isClassifier}
@@ -798,6 +881,8 @@
                         ? `/entidad/${meta.entidad}`
                         : (isClassResult ? `/clasificador/${hit.document.class_}/${hit.document.id}` : `/proyecto/${generateCodigo(hit)}`)}
                       class="result-card"
+                      class:result-card-selected={selectedResultIndex === i}
+                      data-result-index={i}
                     >
                       <div class="result-content">
                         <div class="result-text">
@@ -814,9 +899,17 @@
                           {:else if isClassResult}
                             <span class="result-class-type">{hit.document.class_}</span>
                           {:else}
-                            <span class="result-year">{hit.document.gestion}</span>
+                            <span class="result-year">{formatYears(meta.gestion)}</span>
+                            <span class="result-sep">·</span>
+                            <span class="result-monto">{formatMonto(hit.document.devengado)}</span>
+                            {#if meta.entidad_desc_entidad}
+                              <span class="result-sep">·</span>
+                              <span class="result-entity">{meta.entidad_desc_entidad}</span>
                             {/if}
+                          {/if}
+                          {#if isEntidadClass || isClassResult}
                             <span class="result-monto">{formatMonto(hit.document.devengado)}</span>
+                          {/if}
                         </div>
                       </div>
                       <svg class="result-link-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
@@ -1304,8 +1397,8 @@
   /* Search */
   .search-wrap{max-width:960px;width:100%;margin:0 auto;position:relative;z-index:9999;transition:all 0.3s cubic-bezier(0.16,1,0.3,1)}
   .search-wrap-with-results{background:rgba(255,255,255,0.04);border-radius:20px;border:1px solid rgba(255,255,255,0.08);padding:6px}
-  .search-bar{display:flex;align-items:center;background:rgba(255,255,255,0.04);border-radius:16px;padding:8px 14px 8px 8px;transition:all 0.4s cubic-bezier(0.16,1,0.3,1);box-shadow:0 0 0 1px rgba(201,167,81,0.12),0 8px 32px rgba(0,0,0,0.25);position:relative}
+  .search-bar{display:flex;align-items:center;background:rgba(255,255,255,0.05);border-radius:16px;padding:8px 14px 8px 14px;transition:all 0.3s cubic-bezier(0.16,1,0.3,1);box-shadow:0 12px 40px rgba(0,0,0,0.4),0 4px 12px rgba(0,0,0,0.2);position:relative}
-  .search-focused{background:rgba(255,255,255,0.06);box-shadow:0 12px 40px rgba(0,0,0,0.4),0 4px 12px rgba(0,0,0,0.2)}
+  .search-focused{background:rgba(255,255,255,0.12)}
   .search-has-results{border-radius:16px 16px 0 0}
   .search-meta{display:flex;align-items:center;gap:8px;flex-shrink:0;padding:0 4px}
   .search-meta-item{display:flex;align-items:center;gap:7px;font-family:var(--sans);font-size:13px;font-weight:500;padding:10px 14px;border-radius:10px;text-decoration:none;transition:all 0.2s}
@@ -1316,16 +1409,16 @@
   .search-diario-link svg{transition:transform 0.2s}
   .search-diario-link:hover svg{transform:translateX(3px)}
   .search-divider{width:1px;height:32px;background:rgba(255,255,255,0.08);margin:0 16px;flex-shrink:0}
-  .search-icon{flex-shrink:0;transition:stroke 0.3s}
+  .search-icon{flex-shrink:0;transition:stroke 0.3s;margin-left:4px}
   .search-input-wrap{flex:1;position:relative;display:flex;align-items:center}
-  .search-input-wrap input{width:100%;background:transparent;border:none;outline:none;color:#F5F0E8;font-size:16px;font-family:var(--sans);padding:12px 12px 12px 10px;caret-color:#C9A751}
+  .search-input-wrap input{width:100%;background:transparent;border:none;outline:none;color:#FFFFFF;font-size:22px;font-weight:500;font-family:var(--sans);padding:14px 12px 14px 10px;caret-color:#F0C14D;letter-spacing:-0.01em}
   .search-placeholder{position:absolute;left:10px;top:50%;transform:translateY(-50%);display:flex;align-items:center;pointer-events:none}
-  .blink-cursor{width:1.5px;height:18px;margin-right:1px;animation:blink 1s step-end infinite;border-radius:1px;flex-shrink:0;background:#C9A751}
+  .blink-cursor{width:2px;height:20px;margin-right:2px;animation:blink 1s step-end infinite;border-radius:1px;flex-shrink:0;background:#F0C14D}
   .cursor-hidden{opacity:0}
   .cursor-diario{background:#4A8B6E}
   .cursor-archivo{background:#C9A751}
   .has-results{border-radius:14px;box-shadow:none;background:rgba(255,255,255,0.03)}
-  .placeholder-text{font-family:var(--sans);font-size:16px;color:#B8B5AD}
+  .placeholder-text{font-family:var(--sans);font-size:17px;font-weight:400;color:#9B9890;letter-spacing:0}
   .placeholder-mobile{display:none}
   .gear-btn{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.06);cursor:pointer;transition:all 0.3s;flex-shrink:0;margin-left:8px}
   .gear-btn svg{transition:transform 0.3s ease}
@@ -1452,7 +1545,7 @@
   .daily-hint{display:inline-flex;align-items:center;gap:8px;margin-top:28px;padding:8px 14px;background:transparent;border:1px solid rgba(74,139,110,0.25);border-radius:20px;transition:all 0.3s;opacity:0;transform:translateY(10px);text-decoration:none;font-size:13px}
   .daily-hint-visible{opacity:1;transform:translateY(0)}
   .daily-hint:hover{background:rgba(74,139,110,0.08);border-color:rgba(74,139,110,0.4)}
-  .daily-dot{width:6px;height:6px;border-radius:50%;background:#4A8B6E;animation:pulse 2s ease-in-out infinite;flex-shrink:0}
+  .daily-dot{width:6px;height:6px;border-radius:50%;background:#E8A84C;animation:pulse 2s ease-in-out infinite;flex-shrink:0;box-shadow:0 0 8px rgba(232,168,76,0.4)}
   .daily-text{font-family:var(--sans);font-size:12px;color:#9B9890}
   .daily-text strong{color:#4A8B6E}
   .daily-hint svg{color:#4A8B6E;opacity:0.6;transition:all 0.2s}
@@ -1469,23 +1562,22 @@
   .results-content-visible{max-height:60vh;overflow-y:auto;opacity:1;background:transparent;border-radius:0;border:none;padding:14px 10px;text-align:left}
   /* Results Summary */
-  .results-summary{background:transparent;border-radius:0;padding:0 0 14px 0;margin-bottom:14px;border-bottom:1px solid rgba(255,255,255,0.08)}
+  .results-summary{background:transparent;border-radius:0;padding:0 0 12px 0;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,0.08)}
-  .summary-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
+  .summary-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
-  .summary-left{display:flex;flex-direction:column;gap:8px}
+  .summary-stats{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
-  .summary-header{display:flex;align-items:center;gap:8px}
+  .summary-count{font-family:var(--mono);font-size:12px;font-weight:500;color:#D0CCC4}
-  .summary-count{font-family:var(--mono);font-size:24px;font-weight:600;color:#F0C14D}
+  .summary-label{font-family:var(--sans);font-size:13px;color:#A5A29A}
-  .summary-header-text{font-family:var(--sans);font-size:14px;color:#A5A29A}
+  .summary-sep{color:#6B6860;font-size:10px;margin:0 6px}
-  .updating-dot{width:6px;height:6px;border-radius:50%;background:#C9A751;animation:pulse 1s ease-in-out infinite}
+  .updating-dot{width:6px;height:6px;border-radius:50%;background:#F0C14D;animation:pulse 1s ease-in-out infinite;margin-left:4px}
-  .summary-meta{display:flex;gap:8px;flex-wrap:wrap}
+  .summary-tag{font-family:var(--mono);font-size:11px;letter-spacing:0.03em;color:#9B9890}
-  .summary-tag{font-family:var(--mono);font-size:11px;letter-spacing:0.03em;padding:4px 10px;border-radius:6px;background:rgba(255,255,255,0.06);color:#8B8880}
+  .summary-tag-gold{font-size:14px;font-weight:600;color:#5AAF8A}
-  .summary-tag-gold{background:rgba(240,193,77,0.18);color:#F0C14D}
+  .summary-tag-entities{color:#5AAF8A}
-  .summary-tag-entities{background:rgba(74,139,110,0.12);color:#4A8B6E}
   /* Sort Buttons */
   .sort-buttons{display:flex;gap:8px}
-  .sort-btn{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;color:#6B6860;padding:8px 12px;border-radius:8px;background:rgba(255,255,255,0.04);border:none;cursor:pointer;transition:all 0.2s}
+  .sort-btn{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;color:#8B8880;padding:8px 12px;border-radius:8px;background:rgba(255,255,255,0.04);border:none;cursor:pointer;transition:all 0.2s}
-  .sort-btn:hover{background:rgba(255,255,255,0.08);color:#B8B5AD}
+  .sort-btn:hover{background:rgba(255,255,255,0.08);color:#D0CCC4}
-  .sort-btn-active{background:rgba(201,167,81,0.12);color:#C9A751}
+  .sort-btn-active{background:rgba(255,255,255,0.1);color:#F5F0E8}
   /* Results List */
   .results-list{display:flex;flex-direction:column;gap:0}
@@ -1493,25 +1585,29 @@
   /* Result Group (for entidades) */
   .result-group{background:transparent;border-radius:0;overflow:hidden;border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:8px;margin-bottom:8px}
   .result-group:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
-  .result-group-header{display:flex;align-items:center;gap:12px;padding:8px 0;background:transparent}
+  .result-group-header{display:flex;align-items:center;gap:12px;padding:10px 12px;background:rgba(255,255,255,0.04);border-radius:8px;margin-bottom:6px}
-  .result-group-name{font-family:var(--sans);font-size:13px;font-weight:500;color:#F5F0E8;flex:1}
+  .result-group-name{font-family:var(--sans);font-size:14px;font-weight:600;color:#F5F0E8;flex:1}
-  .result-group-count{font-family:var(--mono);font-size:11px;color:#6B6860;background:rgba(255,255,255,0.06);padding:2px 8px;border-radius:4px}
+  .result-group-count{font-family:var(--mono);font-size:11px;color:#A5A29A;background:rgba(255,255,255,0.08);padding:3px 10px;border-radius:4px}
-  .result-group-monto{font-family:var(--mono);font-size:12px;color:#F0C14D}
+  .result-group-monto{font-family:var(--mono);font-size:13px;font-weight:500;color:#5AAF8A}
   .result-group-items{display:flex;flex-direction:column}
   /* Result Card */
   .result-card{display:flex;align-items:center;gap:12px;padding:12px 14px;background:transparent;border-radius:8px;text-decoration:none;transition:all 0.15s;border-bottom:1px solid rgba(255,255,255,0.06)}
   .result-card:last-child{border-bottom:none}
   .result-card:hover{background:rgba(255,255,255,0.06)}
-  .result-card-grouped{border-radius:6px;border-bottom:none;padding:10px 12px;margin-left:8px}
+  .result-card-selected{background:rgba(240,193,77,0.1);border-left:2px solid #F0C14D}
-  .result-card-grouped:hover{background:rgba(255,255,255,0.03)}
+  .result-card-grouped{border-radius:6px;border-bottom:1px solid rgba(255,255,255,0.04);padding:10px 14px;margin-left:12px;background:transparent}
+  .result-card-grouped:last-child{border-bottom:none}
+  .result-card-grouped:hover{background:rgba(255,255,255,0.04)}
   .result-content{flex:1;min-width:0}
   .result-text{font-family:var(--sans);font-size:14px;color:#F5F0E8;line-height:1.4}
-  .result-text :global(mark){background:rgba(240,193,77,0.85);color:#1C1C1A;border-radius:3px;padding:1px 5px;font-weight:600}
+  .result-text :global(mark){background:rgba(255,213,79,0.9);color:#1C1C1A;border-radius:3px;padding:1px 5px;font-weight:600}
   .result-meta{display:flex;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap}
   .result-parent,.result-subarea,.result-class-type{font-family:var(--mono);font-size:11px;color:#8B8880}
   .result-year{font-family:var(--mono);font-size:12px;color:#8B8880;background:rgba(255,255,255,0.06);padding:2px 8px;border-radius:4px}
-  .result-monto{font-family:var(--mono);font-size:12px;color:#F0C14D;margin-left:auto}
+  .result-monto{font-family:var(--mono);font-size:12px;color:#5AAF8A}
+  .result-entity{font-family:var(--sans);font-size:12px;color:#9B9890}
+  .result-sep{color:#6B6860;font-size:10px;margin:0 2px}
   .result-link-icon{color:#6B6860;opacity:0;transition:all 0.2s;flex-shrink:0}
   .result-card:hover .result-link-icon{opacity:1}
@@ -1732,7 +1828,8 @@
     .mobile-settings-panel{display:block}
     .search-icon{margin-left:0}
     .search-input-wrap{order:1}
-    .search-input-wrap input{font-size:15px;padding:10px 8px}
+    .search-input-wrap input{font-size:16px;padding:10px 8px}
+    .placeholder-text{font-size:14px}
     .placeholder-desktop{display:none}
     .placeholder-mobile{display:inline;font-size:14px}
@@ -1740,7 +1837,7 @@
     .search-results{max-height:260px;border-radius:0 0 12px 12px}
     .search-result-item{padding:12px 16px}
     .result-name{font-size:13px}
-    .result-meta{flex-direction:column;align-items:flex-end;gap:4px}
+    .result-meta{flex-direction:row;align-items:center;justify-content:flex-start;gap:8px}
     .result-code{font-size:9px}
     .result-type{font-size:8px}
     .pills{gap:6px}
@@ -1750,31 +1847,39 @@
     .scroll-icon-touch{display:block}
     /* New search responsive */
-    .search-container{padding:0 16px}
+    .search-container{padding:0 16px;justify-content:flex-start;padding-top:100px}
-    .hero-title{font-size:clamp(32px,7vw,48px);margin-bottom:4px}
+    .hero-title{font-size:clamp(38px,9vw,52px);margin-bottom:4px}
-    .hero-sub{font-size:14px;margin-bottom:24px}
+    .hero-sub{font-size:14px;margin-bottom:20px}
     .filters-row{gap:12px;margin-top:16px}
     .filter-level{flex-direction:column;gap:8px}
-    .segmented-control{width:100%;justify-content:center}
+    .segmented-control{width:auto;justify-content:center}
-    .segment{flex:1;text-align:center;padding:10px 12px;font-size:13px}
+    .segment{text-align:center;padding:10px 16px;font-size:13px}
     .checkbox-group{justify-content:flex-start}
     .checkbox-chip{font-size:12px;padding:6px 12px}
-    .examples{flex-direction:row;gap:8px}
+    .examples{flex-direction:row;gap:8px;margin-top:16px}
-    .examples-label{display:none}
+    .examples-label{display:inline;font-size:10px}
     .example-chip{font-size:12px;padding:6px 12px}
+    .results-area{margin-top:4px;min-height:40px}
+    .results-content-visible{padding:2px 4px}
+    .search-wrap-with-results{padding:2px}
     .daily-hint{padding:10px 14px;gap:8px}
     .daily-text{font-size:13px}
-    .results-summary{padding:12px 14px}
+    .results-summary{padding:4px 0}
-    .summary-row{flex-direction:column;gap:12px}
+    .summary-row{flex-direction:row;gap:6px;flex-wrap:nowrap}
-    .summary-count{font-size:20px}
+    .summary-stats{gap:2px;flex:1}
-    .summary-meta{flex-wrap:wrap}
+    .summary-sep{margin:0 3px;font-size:10px}
-    .summary-tag{font-size:10px;padding:3px 8px}
+    .summary-count{font-size:12px}
-    .sort-buttons{width:100%;justify-content:flex-end}
+    .summary-tag-gold{font-size:14px}
-    .sort-btn{font-size:11px;padding:6px 10px}
+    .summary-label{font-size:11px}
+    .summary-tag{font-size:10px}
+    .sort-buttons{flex-shrink:0}
+    .sort-btn{font-size:11px;padding:5px 8px}
     .result-card{padding:12px 14px}
     .result-text{font-size:13px}
     .result-monto{font-size:11px}
     .result-year{font-size:11px;padding:2px 6px}
+    .result-entity{font-size:11px}
+    .result-sep{font-size:9px;margin:0 3px}
     .load-more-btn{font-size:13px;padding:10px 20px}
     /* Directory */
@@ -1865,9 +1970,12 @@
     .scroll-hint{display:none}
     /* New search 480px */
-    .search-container{padding:0 12px}
+    .search-container{padding:0 12px;padding-top:80px}
-    .hero-title{font-size:clamp(28px,8vw,36px)}
+    .search-input-wrap input{font-size:15px}
-    .hero-sub{font-size:13px;margin-bottom:20px}
+    .placeholder-text{font-size:12px}
+    .hero-title{font-size:clamp(34px,10vw,44px)}
+    .hero-sub{font-size:13px;margin-bottom:16px}
+    .examples-label{font-size:9px}
     main[data-section="hero"] .nav-logo{top:16px;left:16px;height:60px}
     .nav-menu-btn{top:16px;right:16px;width:40px;height:40px}
     .segmented-control{padding:3px}
@@ -1876,20 +1984,31 @@
     .filter-level-label{font-size:10px}
     .checkbox-chip{font-size:11px;padding:5px 10px;gap:6px}
     .checkbox-box{width:14px;height:14px}
+    .examples{margin-top:14px}
     .example-chip{font-size:11px;padding:5px 10px}
+    .results-area{margin-top:2px;min-height:28px}
+    .results-content-visible{padding:0 2px}
+    .search-wrap-with-results{padding:2px}
     .daily-hint{padding:8px 12px;border-radius:10px}
     .daily-dot{width:6px;height:6px}
     .daily-text{font-size:12px}
-    .results-summary{padding:10px 12px;border-radius:10px}
+    .results-summary{padding:2px 0}
-    .summary-count{font-size:18px}
+    .summary-count{font-size:11px}
+    .summary-tag-gold{font-size:13px}
+    .summary-label{font-size:10px}
+    .summary-tag{font-size:9px}
+    .summary-sep{font-size:9px}
+    .sort-btn{font-size:10px;padding:4px 6px}
     .summary-header-text{font-size:12px}
     .result-group-header{padding:10px 12px}
     .result-group-name{font-size:12px}
     .result-card{padding:10px 12px;border-radius:8px}
     .result-text{font-size:12px}
-    .result-meta{gap:6px;margin-top:4px}
+    .result-meta{flex-direction:row;gap:6px;margin-top:4px}
     .result-parent,.result-subarea,.result-class-type{font-size:10px}
     .result-monto{font-size:10px}
+    .result-entity{font-size:10px}
+    .result-sep{font-size:8px;margin:0 2px}
     .load-more-btn{font-size:12px;padding:8px 16px;border-radius:8px}
     /* Directory */