Rafael Lopez / ppto

Go to a project
Toggle navigation Toggle navigation pinning
Rafael Lopez
f2550ee2 1 parent 8654c184

debounce

Inline Side-by-side
Showing 1 changed file with 208 additions and 89 deletions
......@@ -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 years = hits.map(h => h.document.gestion).filter(Boolean);
const minYear = Math.min(...years);
const maxYear = Math.max(...years);
const allYears = [];
hits.forEach(h => {
const m = parseMetadatos(h.document.metadatos);
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-header">
<span class="summary-count">{sortedHits.length}</span>
<span class="summary-header-text">de {stats.found.toLocaleString()} resultados</span>
{#if isLoading}<span class="updating-dot"></span>{/if}
</div>
<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-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>
{#if stats.yearRange}
<span class="summary-tag">{stats.yearRange}</span>
{/if}
<div class="summary-stats">
<span class="summary-count">{stats.found.toLocaleString()}</span>
<span class="summary-label">resultados</span>
<span class="summary-sep">·</span>
<span class="summary-tag summary-tag-gold">{formatMonto(stats.montoTotal)}</span>
<span class="summary-sep">·</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}
</div>
{:else}
<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}
{#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}
<span class="result-monto">{formatMonto(hit.document.devengado)}</span>
</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-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-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.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)}
.summary-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.summary-left{display:flex;flex-direction:column;gap:8px}
.summary-header{display:flex;align-items:center;gap:8px}
.summary-count{font-family:var(--mono);font-size:24px;font-weight:600;color:#F0C14D}
.summary-header-text{font-family:var(--sans);font-size:14px;color:#A5A29A}
.updating-dot{width:6px;height:6px;border-radius:50%;background:#C9A751;animation:pulse 1s ease-in-out infinite}
.summary-meta{display:flex;gap:8px;flex-wrap:wrap}
.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{background:rgba(240,193,77,0.18);color:#F0C14D}
.summary-tag-entities{background:rgba(74,139,110,0.12);color:#4A8B6E}
.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:center;gap:12px;flex-wrap:wrap}
.summary-stats{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.summary-count{font-family:var(--mono);font-size:12px;font-weight:500;color:#D0CCC4}
.summary-label{font-family:var(--sans);font-size:13px;color:#A5A29A}
.summary-sep{color:#6B6860;font-size:10px;margin:0 6px}
.updating-dot{width:6px;height:6px;border-radius:50%;background:#F0C14D;animation:pulse 1s ease-in-out infinite;margin-left:4px}
.summary-tag{font-family:var(--mono);font-size:11px;letter-spacing:0.03em;color:#9B9890}
.summary-tag-gold{font-size:14px;font-weight:600;color:#5AAF8A}
.summary-tag-entities{color:#5AAF8A}
/* 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:hover{background:rgba(255,255,255,0.08);color:#B8B5AD}
.sort-btn-active{background:rgba(201,167,81,0.12);color:#C9A751}
.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:#D0CCC4}
.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-name{font-family:var(--sans);font-size:13px;font-weight:500;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-monto{font-family:var(--mono);font-size:12px;color:#F0C14D}
.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:14px;font-weight:600;color:#F5F0E8;flex:1}
.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: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-grouped:hover{background:rgba(255,255,255,0.03)}
.result-card-selected{background:rgba(240,193,77,0.1);border-left:2px solid #F0C14D}
.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}
.hero-title{font-size:clamp(32px,7vw,48px);margin-bottom:4px}
.hero-sub{font-size:14px;margin-bottom:24px}
.search-container{padding:0 16px;justify-content:flex-start;padding-top:100px}
.hero-title{font-size:clamp(38px,9vw,52px);margin-bottom:4px}
.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}
.segment{flex:1;text-align:center;padding:10px 12px;font-size:13px}
.segmented-control{width:auto;justify-content:center}
.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-label{display:none}
.examples{flex-direction:row;gap:8px;margin-top:16px}
.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}
.summary-row{flex-direction:column;gap:12px}
.summary-count{font-size:20px}
.summary-meta{flex-wrap:wrap}
.summary-tag{font-size:10px;padding:3px 8px}
.sort-buttons{width:100%;justify-content:flex-end}
.sort-btn{font-size:11px;padding:6px 10px}
.results-summary{padding:4px 0}
.summary-row{flex-direction:row;gap:6px;flex-wrap:nowrap}
.summary-stats{gap:2px;flex:1}
.summary-sep{margin:0 3px;font-size:10px}
.summary-count{font-size:12px}
.summary-tag-gold{font-size:14px}
.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}
.hero-title{font-size:clamp(28px,8vw,36px)}
.hero-sub{font-size:13px;margin-bottom:20px}
.search-container{padding:0 12px;padding-top:80px}
.search-input-wrap input{font-size:15px}
.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}
.summary-count{font-size:18px}
.results-summary{padding:2px 0}
.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 */
......