Rafael Lopez / ppto

Go to a project
Toggle navigation Toggle navigation pinning
Rafael Lopez
4a3b055c 1 parent f2550ee2

simplifica buscador unificando clasificadores 

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Inline Side-by-side
Showing 1 changed file with 298 additions and 254 deletions
......@@ -97,73 +97,56 @@
$: hasMoreResults = results && allHits.length < results.found;
// Modo de búsqueda
let searchMode = 'gastos'; // 'gastos' | 'ingresos'
let searchSubmode = 'programas'; // 'programas' | 'clasificadores'
// Modo de búsqueda simplificado: 'programas' | 'clasificadores'
let searchMode = 'programas';
let selectedClassifiers = [];
const CLASIFICADORES_GASTOS = [
{ id: 'finfun', label: 'Finalidad y función' },
{ id: 'objeto', label: 'Objetos de gasto' },
{ id: 'acteco', label: 'Actividad económica' },
{ id: 'entidad', label: 'Entidades' },
{ id: 'geografico', label: 'Geográfico', disabled: true },
// Clasificadores unificados (transversales)
const CLASIFICADORES = [
{ id: 'entidad', label: 'Entidades', icon: '🏛️' },
{ id: 'objeto', label: 'Objetos de gasto', icon: '📦' },
{ id: 'finfun', label: 'Finalidad y función', icon: '🎯' },
{ id: 'geografico', label: 'Geográfico', icon: '📍', disabled: true },
{ id: 'rubro', label: 'Rubro', icon: '💰', disabled: true },
{ id: 'organismo', label: 'Organismo', icon: '🏦', disabled: true },
{ id: 'fuente', label: 'Fuente', icon: '💵', disabled: true },
];
const CLASIFICADORES_INGRESOS = [
{ id: 'rubro', label: 'Rubro', disabled: true },
{ id: 'organismo', label: 'Organismo', disabled: true },
{ id: 'fuente', label: 'Fuente', disabled: true },
{ id: 'entidad', label: 'Entidades' },
{ id: 'geografico',label: 'Geográfico', disabled: true },
];
$: activeClasificadores = searchMode === 'gastos' ? CLASIFICADORES_GASTOS : CLASIFICADORES_INGRESOS;
function toggleClassifier(id) {
if (selectedClassifiers.includes(id)) {
selectedClassifiers = selectedClassifiers.filter(c => c !== id);
} else {
selectedClassifiers = [...selectedClassifiers, id];
}
// Mantener foco en el buscador
// Cambiar a modo clasificadores si no estaba
if (searchMode !== 'clasificadores') {
searchMode = 'clasificadores';
}
setTimeout(() => searchInput?.focus(), 10);
}
function setMode(mode) {
searchMode = mode;
selectedClassifiers = [];
if (mode === 'gastos') {
searchSubmode = 'programas';
} else {
searchSubmode = 'clasificadores';
if (mode === 'programas') {
selectedClassifiers = [];
}
}
function setSubmode(sub) {
searchSubmode = sub;
selectedClassifiers = [];
}
// Placeholder dinámico
$: placeholderText = getPlaceholderText(searchMode, searchSubmode, selectedClassifiers);
function getPlaceholderText(mode, submode, classifiers) {
if (mode === 'gastos') {
if (submode === 'programas') return 'Buscar gastos en programas y proyectos...';
if (classifiers.length === 0) return 'Selecciona al menos un clasificador...';
const nombres = classifiers.map(id => {
const clf = CLASIFICADORES_GASTOS.find(c => c.id === id);
return clf?.label?.toLowerCase() || id;
}).join(', ');
return `Buscar gastos en ${nombres}...`;
} else {
if (classifiers.length === 0) return 'Selecciona al menos un clasificador...';
const nombres = classifiers.map(id => {
const clf = CLASIFICADORES_INGRESOS.find(c => c.id === id);
return clf?.label?.toLowerCase() || id;
}).join(', ');
return `Buscar ingresos en ${nombres}...`;
$: placeholderText = getPlaceholderText(searchMode, selectedClassifiers);
function getPlaceholderText(mode, classifiers) {
if (mode === 'programas') {
return 'Buscar en programas y proyectos...';
}
if (classifiers.length === 0) {
return 'Selecciona al menos un clasificador...';
}
const nombres = classifiers.map(id => {
const clf = CLASIFICADORES.find(c => c.id === id);
return clf?.label?.toLowerCase() || id;
}).join(', ');
return `Buscar en ${nombres}...`;
}
// Debounce
......@@ -191,21 +174,32 @@
}
}
// Ejemplos
// Ejemplos para cada card
const EXAMPLES_PROGRAMAS = [
{ label: 'Vía férrea Bulo Bulo', color: 'rgba(232,146,124,0.22)', textColor: '#E8927C' },
{ label: 'Siderúrgica del Mutún', color: 'rgba(160,165,185,0.18)', textColor: '#B8BDCC' },
{ label: 'Planta siderúrgica del Mutún' },
{ label: 'Aeropuerto internacional de Potosí' },
];
const EXAMPLES_ENTIDADES = [
{ label: 'Fondo Indígena', color: 'rgba(126,184,216,0.22)', textColor: '#8EC8E8' },
{ label: 'YPFB', color: 'rgba(168,196,160,0.22)', textColor: '#B8D4B0' },
const EXAMPLES_CLASIFICADORES = [
{ label: 'YPFB', classifier: 'entidad' },
{ label: 'viáticos', classifier: 'objeto' },
{ label: 'Ministerio de Salud', classifier: 'entidad' },
];
// Ejemplos dinámicos según selección
$: currentExamples = (selectedClassifiers.includes('entidad') && selectedClassifiers.length === 1)
? EXAMPLES_ENTIDADES
: EXAMPLES_PROGRAMAS;
// Función para buscar desde pills
function searchFromPill(label, classifier = null) {
if (classifier) {
searchMode = 'clasificadores';
if (!selectedClassifiers.includes(classifier)) {
selectedClassifiers = [classifier];
}
} else {
searchMode = 'programas';
}
searchVal = label;
performSearch(label);
searchInput?.focus();
}
// Datos para secciones
const WIDGETS_INGRESOS = [
......@@ -294,12 +288,6 @@
return () => sectionObserver?.disconnect();
});
function searchExample(label) {
searchVal = label;
performSearch(label);
searchInput?.focus();
}
async function handleInput(e) {
searchVal = e.target.value;
clearTimeout(debounceTimer);
......@@ -317,8 +305,7 @@
return;
}
const needsClassifiers = searchMode === 'ingresos' ||
(searchMode === 'gastos' && searchSubmode === 'clasificadores');
const needsClassifiers = searchMode === 'clasificadores';
if (needsClassifiers && selectedClassifiers.length === 0) {
results = null;
error = null;
......@@ -342,12 +329,11 @@
currentPage = page;
try {
const isClassSearch = searchMode === 'ingresos' ||
(searchMode === 'gastos' && searchSubmode === 'clasificadores');
const isClassSearch = searchMode === 'clasificadores';
const params = new URLSearchParams({
q: query,
is_class: isClassSearch ? 'true' : 'false',
mode: searchMode,
mode: 'gastos',
page: page.toString()
});
// Para clasificadores, pedir más resultados para tener conteos precisos
......@@ -544,11 +530,10 @@
$: {
const _mode = searchMode;
const _submode = searchSubmode;
const _classifiers = selectedClassifiers;
if (searchVal.length >= 3 && mounted) {
clearTimeout(debounceTimer);
const needsClassifiers = _mode === 'ingresos' || (_mode === 'gastos' && _submode === 'clasificadores');
const needsClassifiers = _mode === 'clasificadores';
if (!needsClassifiers || _classifiers.length > 0) {
debounceTimer = setTimeout(() => performSearch(searchVal), DEBOUNCE_MS);
} else {
......@@ -559,10 +544,6 @@
}
}
// ¿Mostrar chips de clasificadores?
$: showClassifierChips = searchMode === 'ingresos' ||
(searchMode === 'gastos' && searchSubmode === 'clasificadores');
// ¿Hay búsqueda activa?
$: isSearching = searchVal.length >= 3;
</script>
......@@ -574,7 +555,7 @@
<div class="page" class:mounted>
<!-- Dots de navegación -->
<nav class="section-dots">
<nav class="section-dots" class:section-dots-hidden={currentSection === 'hero'}>
{#each SECTIONS_NAV as s}
<button
class="section-dot"
......@@ -590,7 +571,7 @@
<!-- Hero -->
<main data-section="hero">
<div class="nav-logo">
<div class="nav-logo" class:nav-hidden={currentSection !== 'hero'}>
<img src="/logos_oscuro/05_Imago MEFP horizontal espacio negativo.png" alt="MEFP" />
</div>
......@@ -604,6 +585,9 @@
<div class="search-container anim" style="--d:200ms">
<!-- Ambient glow -->
<div class="ambient-glow"></div>
<!-- Título -->
<h1 class="hero-title" class:hero-collapsed={allHits.length > 0}>
Presupuesto <span class="gold">Abierto</span>
......@@ -630,10 +614,11 @@
on:focus={() => searchFocused = true}
on:blur={() => searchFocused = false}
placeholder=""
class:has-text={searchVal.length > 0}
/>
{#if !searchVal}
<div class="search-placeholder">
<span class="blink-cursor" class:cursor-hidden={searchFocused}></span>
<span class="blink-cursor"></span>
<span class="placeholder-text">{placeholderText}</span>
</div>
{/if}
......@@ -650,114 +635,138 @@
</div>
</div>
<!-- ─── FILTROS INLINE ─── -->
<div class="filters-row" class:filters-hidden={isSearching}>
<!-- Nivel 1: Segmented control Gastos / Ingresos -->
<div class="filter-level filter-level-1">
<div class="segmented-control">
<button
class="segment"
class:segment-active={searchMode === 'gastos'}
on:click={() => setMode('gastos')}
>
Gastos
</button>
<button
class="segment"
class:segment-active={searchMode === 'ingresos'}
on:click={() => setMode('ingresos')}
>
Ingresos
</button>
<!-- ─── ÁREA DE RESULTADOS ─── -->
<div class="results-area">
<!-- ─── CARDS DE MODO (se tapan con resultados) ─── -->
<div class="section-group" class:section-group-hidden={allHits.length > 0}>
<span class="section-label">Configura tu búsqueda</span>
<div class="mode-cards">
<!-- Card: Programas y Proyectos -->
<div
class="mode-card"
class:mode-card-active={searchMode === 'programas'}
on:click={() => setMode('programas')}
on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && setMode('programas')}
role="button"
tabindex="0"
>
<div class="mode-card-header">
<span class="mode-card-icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="7" height="7" rx="1"/>
<rect x="14" y="3" width="7" height="7" rx="1"/>
<rect x="3" y="14" width="7" height="7" rx="1"/>
<rect x="14" y="14" width="7" height="7" rx="1"/>
</svg>
</span>
<span class="mode-card-title">Programas y Proyectos</span>
</div>
<p class="mode-card-desc">
<strong>735k+</strong> proyectos y programas (2016-2025). Para encontrar iniciativas específicas.
</p>
<div class="mode-card-pills">
<span class="pills-hint"><span class="hint-desktop">Ej:</span><span class="hint-mobile">Ej:</span></span>
{#each EXAMPLES_PROGRAMAS as ex}
<span
class="mode-pill"
on:click|stopPropagation={() => searchFromPill(ex.label)}
on:keydown={(e) => e.key === 'Enter' && searchFromPill(ex.label)}
role="button"
tabindex="0"
>
{ex.label}
</span>
{/each}
</div>
<div class="mode-card-radio">
<span class="radio-dot" class:radio-dot-active={searchMode === 'programas'}></span>
</div>
</div>
<!-- Nivel 2: Segmented control Programas / Clasificadores (solo Gastos) -->
{#if searchMode === 'gastos'}
<div class="segmented-control segmented-control-secondary">
<!-- Card: Clasificadores -->
<div
class="mode-card"
class:mode-card-active={searchMode === 'clasificadores'}
on:click={() => setMode('clasificadores')}
on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && setMode('clasificadores')}
role="button"
tabindex="0"
>
<div class="mode-card-header">
<span class="mode-card-icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 4h6l2 2h8a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z"/>
<path d="M9 13h6"/>
<path d="M9 17h4"/>
</svg>
</span>
<span class="mode-card-title">Clasificadores</span>
</div>
<p class="mode-card-desc">
<strong>2500+</strong> categorías de gasto e ingreso (2006-2025). Para comparar y analizar tendencias.
</p>
<div class="mode-card-classifiers">
{#each CLASIFICADORES as clf}
<button
class="segment segment-secondary"
class:segment-active={searchSubmode === 'programas'}
on:click={() => setSubmode('programas')}
class="clf-chip"
class:clf-chip-active={selectedClassifiers.includes(clf.id)}
class:clf-chip-disabled={clf.disabled}
on:click|stopPropagation={() => { if (!clf.disabled) toggleClassifier(clf.id); }}
disabled={clf.disabled}
>
Programas y proyectos
<span class="clf-check">
{#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>
<button
class="segment segment-secondary"
class:segment-active={searchSubmode === 'clasificadores'}
on:click={() => setSubmode('clasificadores')}
{/each}
</div>
<div class="mode-card-pills">
{#each EXAMPLES_CLASIFICADORES as ex}
<span
class="mode-pill"
on:click|stopPropagation={() => searchFromPill(ex.label, ex.classifier)}
on:keydown={(e) => e.key === 'Enter' && searchFromPill(ex.label, ex.classifier)}
role="button"
tabindex="0"
>
Clasificadores
</button>
</div>
{/if}
</div>
<!-- Nivel 3: Clasificadores con checkboxes (cuando aplica) -->
{#if showClassifierChips}
<div class="filter-level filter-level-2">
<span class="filter-level-label">Selecciona clasificadores:</span>
<div class="checkbox-group">
{#each activeClasificadores as clf}
<button
class="checkbox-chip"
class:checkbox-chip-active={selectedClassifiers.includes(clf.id)}
class:checkbox-chip-disabled={clf.disabled}
on:click={() => { if (!clf.disabled) toggleClassifier(clf.id); }}
disabled={clf.disabled}
>
<span class="checkbox-box">
{#if selectedClassifiers.includes(clf.id)}
<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>
</button>
{/each}
</div>
{ex.label}
</span>
{/each}
</div>
{/if}
</div>
<!-- ─── ÁREA DE RESULTADOS / EJEMPLOS / HINT ─── -->
<div class="results-area">
<!-- Ejemplos -->
<div class="examples" class:examples-hidden={isSearching}>
<span class="examples-label">Ej.:</span>
{#each currentExamples as ex}
<button
class="example-chip"
style="background:{ex.color}; color:{ex.textColor}"
on:click={() => searchExample(ex.label)}
>
{ex.label}
</button>
{/each}
<div class="mode-card-radio">
<span class="radio-dot" class:radio-dot-active={searchMode === 'clasificadores'}></span>
</div>
</div>
</div>
<!-- Hint diario -->
{#if !isSearching && !dailyLoading}
<a
href="/vista-diaria"
class="daily-hint"
class:daily-hint-visible={!isSearching}
>
<!-- Sección: Ir a -->
<span class="section-label section-label-goto">Ir a</span>
<a href="/vista-diaria" class="daily-card">
<div class="daily-card-left">
<span class="daily-dot"></span>
<span class="daily-text">
{#if dailyData}
Ayer el Estado ejecutó <strong>{formatMonto(dailyData.monto)}</strong>
{:else}
Ver el resumen de ejecución de ayer
{/if}
</span>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</a>
{/if}
<span class="daily-card-title">Vista diaria</span>
</div>
<div class="daily-card-content">
{#if !dailyLoading && dailyData}
<span class="daily-card-text">Ayer el Estado ejecutó <strong>{formatMonto(dailyData.monto)}</strong></span>
{:else if !dailyLoading}
<span class="daily-card-text">Ver el resumen de ejecución de ayer</span>
{:else}
<span class="daily-card-text">Cargando datos...</span>
{/if}
</div>
<svg class="daily-card-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</a>
</div>
<!-- Estados de búsqueda (mensajes) -->
{#if showMinLengthHint && searchVal.length > 0 && searchVal.length < 3}
......@@ -1341,7 +1350,8 @@
.page{--serif:'Qanelas',system-ui,sans-serif;--sans:'Qanelas',system-ui,sans-serif;--mono:'JetBrains Mono',monospace;font-family:var(--serif);color:#1C1C1A;width:100%;min-width:100%;overflow-x:hidden;scroll-snap-type:y mandatory;overflow-y:scroll;height:100vh}
/* Section Navigation Dots */
.section-dots{position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:100;display:flex;flex-direction:column;gap:12px;background:rgba(255,255,255,0.1);backdrop-filter:blur(8px);padding:12px 8px;border-radius:20px}
.section-dots{position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:100;display:flex;flex-direction:column;gap:12px;background:rgba(255,255,255,0.1);backdrop-filter:blur(8px);padding:12px 8px;border-radius:20px;transition:opacity 0.4s ease,transform 0.4s ease}
.section-dots-hidden{opacity:0;pointer-events:none;transform:translateY(-50%) translateX(20px)}
.section-dot{width:10px;height:10px;border-radius:50%;border:1.5px solid rgba(100,100,100,0.4);background:rgba(150,150,150,0.2);cursor:pointer;transition:all 0.3s;padding:0;position:relative}
.section-dot:hover{border-color:rgba(100,100,100,0.6);background:rgba(150,150,150,0.4);transform:scale(1.2)}
.section-dot-active{background:#C9A751;border-color:#C9A751}
......@@ -1411,7 +1421,8 @@
.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;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:#FFFFFF;font-size:22px;font-weight:500;font-family:var(--sans);padding:14px 12px 14px 10px;caret-color:#F0C14D;letter-spacing:-0.01em}
.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:transparent;letter-spacing:-0.01em}
.search-input-wrap input.has-text{caret-color:#FFFFFF}
.search-placeholder{position:absolute;left:10px;top:50%;transform:translateY(-50%);display:flex;align-items:center;pointer-events:none}
.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}
......@@ -1495,61 +1506,77 @@
.scroll-icon-touch{display:none}
/* ── NEW SEARCH STYLES ── */
.search-container{width:100%;max-width:900px;margin:0 auto;padding:0 24px;display:flex;flex-direction:column;align-items:center;flex:1;justify-content:center}
.hero-title{font-size:clamp(44px,5.5vw,72px);font-weight:900;line-height:1.02;letter-spacing:-0.035em;color:#F5F0E8;text-align:center;transition:all 0.4s cubic-bezier(0.16,1,0.3,1);margin-bottom:4px}
.hero-sub{font-family:var(--sans);font-size:clamp(16px,1.6vw,18px);color:#D0CCC4;text-align:center;line-height:1.6;transition:all 0.4s cubic-bezier(0.16,1,0.3,1);margin-bottom:32px;margin-top:0}
.search-container{width:100%;max-width:900px;margin:0 auto;padding:0 24px;display:flex;flex-direction:column;align-items:center;flex:1;justify-content:center;position:relative}
/* Ambient glow - subtle premium lighting */
.ambient-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);width:140%;max-width:1200px;aspect-ratio:1.5;background:radial-gradient(ellipse at center,rgba(240,193,77,0.06) 0%,rgba(240,193,77,0.02) 35%,transparent 70%);pointer-events:none;z-index:0}
.hero-title{font-family:var(--sans);font-size:clamp(44px,5.5vw,72px);font-weight:900;line-height:1.02;letter-spacing:-0.035em;color:#F5F0E8;text-align:center;transition:all 0.4s cubic-bezier(0.16,1,0.3,1);margin-bottom:4px;position:relative;z-index:1}
.hero-sub{font-family:var(--sans);font-size:clamp(16px,1.6vw,18px);color:#D0CCC4;text-align:center;line-height:1.6;transition:all 0.4s cubic-bezier(0.16,1,0.3,1);margin-bottom:32px;margin-top:0;position:relative;z-index:1}
.hero-collapsed{opacity:0;height:0;margin:0;overflow:hidden;pointer-events:none}
.cursor-hidden{opacity:0}
/* Filters */
.filters-row{display:flex;flex-direction:column;gap:16px;margin-top:20px;transition:all 0.3s cubic-bezier(0.16,1,0.3,1)}
.filters-hidden{opacity:0;height:0;margin:0;overflow:hidden;pointer-events:none}
.filter-level{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.filter-level-1{justify-content:center}
.filter-level-2{flex-direction:column;gap:8px}
.filter-level-label{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;color:#9B9890}
/* Segmented Control */
.segmented-control{display:inline-flex;background:rgba(255,255,255,0.06);border-radius:10px;padding:4px;gap:2px}
.segmented-control-secondary{background:rgba(255,255,255,0.04)}
.segment{font-family:var(--sans);font-size:14px;font-weight:500;color:#8B8880;padding:10px 20px;border:none;background:transparent;border-radius:8px;cursor:pointer;transition:all 0.2s}
.segment:hover{color:#B8B5AD}
.segment-active{background:rgba(255,255,255,0.12);color:#F5F0E8}
.segment-secondary{font-size:13px;padding:8px 16px}
/* Checkbox Chips */
.checkbox-group{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.checkbox-chip{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:20px;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:13px;color:#8B8880}
.checkbox-chip:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.12)}
.checkbox-chip-active{background:rgba(74,139,110,0.15);border-color:rgba(74,139,110,0.4);color:#5AAF8A}
.checkbox-chip-disabled{opacity:0.4;cursor:not-allowed}
.checkbox-chip-disabled:hover{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.08)}
.checkbox-box{width:16px;height:16px;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}
.checkbox-chip-active .checkbox-box{background:#4A8B6E;border-color:#4A8B6E}
.checkbox-label{line-height:1}
.chip-soon{font-family:var(--mono);font-size:9px;letter-spacing:0.05em;color:#6B6860;background:rgba(255,255,255,0.06);padding:2px 6px;border-radius:4px;margin-left:4px}
/* Section Group */
.section-group{margin-top:16px;transition:all 0.4s cubic-bezier(0.16,1,0.3,1)}
.section-group-hidden{opacity:0;pointer-events:none;position:absolute;z-index:-1}
.section-label{display:block;font-family:var(--sans);font-size:10px;font-weight:500;color:#6B6860;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;padding-left:4px}
.section-label-goto{margin-top:12px}
/* Mode Cards */
.mode-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mode-card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:16px 18px;text-align:left;cursor:pointer;transition:all 0.3s cubic-bezier(0.16,1,0.3,1);position:relative;display:flex;flex-direction:column;gap:8px}
.mode-card:hover{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.12);transform:translateY(-2px)}
.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)}
.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}
.mode-card-active .mode-card-icon{color:#F0C14D}
.mode-card-title{font-family:var(--sans);font-size:16px;font-weight:600;color:#F5F0E8;letter-spacing:-0.01em}
.mode-card-desc{font-family:var(--sans);font-size:13px;color:#9B9890;line-height:1.5;margin:0}
.mode-card-desc strong{color:#D0CCC4;font-weight:600}
.mode-card-classifiers{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.clf-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;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:12px;color:#8B8880}
.clf-chip:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.15)}
.clf-chip-active{background:rgba(90,175,138,0.15);border-color:rgba(90,175,138,0.4);color:#5AAF8A}
.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-chip-active .clf-check{background:#4A8B6E;border-color:#4A8B6E}
.clf-label{line-height:1}
.mode-card-pills{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;align-items:center}
.pills-hint{font-family:var(--sans);font-size:10px;color:#7B7870;font-weight:500}
.hint-desktop{display:inline}
.hint-mobile{display:none}
.mode-pill{font-family:var(--sans);font-size:11px;font-weight:500;padding:5px 10px;border-radius:8px;cursor:pointer;transition:all 0.2s;border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.06);color:#D0CCC4}
.mode-pill:hover{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.25);color:#F5F0E8}
.mode-card-radio{position:absolute;top:16px;right:16px}
.radio-dot{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,0.2);display:block;transition:all 0.2s;position:relative}
.radio-dot::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;background:#F0C14D;opacity:0;transition:all 0.2s}
.radio-dot-active{border-color:#F0C14D}
.radio-dot-active::after{opacity:1}
/* Results Area */
.results-area{width:100%;margin-top:24px;position:relative;min-height:60px;text-align:center}
.area-spacer{height:100px;transition:height 0.3s}
.area-spacer-hidden{height:0}
/* Examples */
.examples{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;transition:all 0.3s}
.examples-hidden{opacity:0;height:0;overflow:hidden;pointer-events:none}
.examples-label{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;color:#9B9890}
.example-chip{font-family:var(--sans);font-size:13px;font-weight:500;padding:8px 14px;border-radius:20px;border:1px solid rgba(255,255,255,0.1);cursor:pointer;transition:all 0.2s}
.example-chip:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.3)}
/* Daily Hint */
.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:#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}
.daily-hint:hover svg{opacity:1;transform:translateX(3px)}
.results-area{width:100%;position:relative;min-height:60px;text-align:center}
/* Daily Card */
.daily-card{display:flex;align-items:center;gap:12px;padding:14px 18px;background:rgba(232,168,76,0.04);border:1px solid rgba(232,168,76,0.15);border-radius:12px;text-decoration:none;transition:all 0.3s cubic-bezier(0.16,1,0.3,1)}
.daily-card:hover{background:rgba(232,168,76,0.08);border-color:rgba(232,168,76,0.3);transform:translateY(-2px)}
.daily-card-left{display:flex;align-items:center;gap:10px;flex-shrink:0}
.daily-dot{width:8px;height:8px;border-radius:50%;background:#E8A84C;animation:pulse 2s ease-in-out infinite;flex-shrink:0;box-shadow:0 0 10px rgba(232,168,76,0.5)}
.daily-card-title{font-family:var(--sans);font-size:15px;font-weight:600;color:#E8A84C;letter-spacing:-0.01em}
.daily-card-content{flex:1;text-align:left}
.daily-card-text{font-family:var(--sans);font-size:13px;color:#9B9890}
.daily-card-text strong{color:#D4A84C;font-weight:600}
.daily-card-arrow{color:#E8A84C;opacity:0.5;transition:all 0.2s;flex-shrink:0}
.daily-card:hover .daily-card-arrow{opacity:1;transform:translateX(4px)}
/* Results Messages */
.results-message{text-align:center;padding:20px}
......@@ -1559,7 +1586,7 @@
/* Results Content */
.results-content{max-height:0;overflow:hidden;opacity:0;transition:all 0.4s cubic-bezier(0.16,1,0.3,1)}
.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-content-visible{max-height:60vh;overflow-y:auto;opacity:1;background:#1C1C1A;border-radius:16px;border:none;padding:14px 10px;text-align:left;position:relative;z-index:10}
/* Results Summary */
.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)}
......@@ -1620,9 +1647,10 @@
.search-loading{display:flex;align-items:center;justify-content:center}
/* Nav elements in hero */
main[data-section="hero"] .nav-logo{position:absolute;top:24px;left:24px}
.nav-menu-btn{position:absolute;top:24px;right:24px;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.2s}
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}
.nav-menu-btn:hover{background:rgba(255,255,255,0.1);color:#F5F0E8}
.nav-hidden{opacity:0;pointer-events:none;transform:translateY(-10px)}
/* ── DIRECTORY ── */
.directory{background:#f5f5f7;min-height:100vh;display:flex;align-items:center;scroll-snap-align:start;scroll-snap-stop:always;padding:48px}
......@@ -1805,6 +1833,7 @@
/* Section dots - bottom horizontal bar */
.section-dots{position:fixed;right:auto;left:50%;top:auto;bottom:20px;transform:translateX(-50%);flex-direction:row;gap:10px;padding:12px 20px;border-radius:24px;background:rgba(28,28,26,0.7);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.1);z-index:1000}
.section-dots-hidden{transform:translateX(-50%) translateY(30px)}
.section-dot{width:8px;height:8px}
.section-dot-label{display:none}
......@@ -1850,20 +1879,28 @@
.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: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;margin-top:16px}
.examples-label{display:inline;font-size:10px}
.example-chip{font-size:12px;padding:6px 12px}
.section-group{margin-top:16px}
.section-label{font-size:10px;margin-bottom:10px}
.section-label-goto{margin-top:16px}
.mode-cards{grid-template-columns:1fr;gap:12px}
.mode-card{padding:18px;gap:10px;border-radius:16px}
.mode-card-title{font-size:15px}
.mode-card-desc{font-size:12px}
.clf-chip{padding:5px 10px;font-size:11px}
.clf-check{width:12px;height:12px}
.mode-pill{font-size:12px;padding:7px 12px}
.hint-desktop{display:none}
.hint-mobile{display:inline}
.pills-hint{font-size:11px}
.pills-list{gap:5px}
.mode-card-radio{top:14px;right:14px}
.radio-dot{width:16px;height:16px}
.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}
.daily-card{padding:16px 18px;gap:12px;border-radius:14px}
.daily-card-title{font-size:14px}
.daily-card-text{font-size:12px}
.results-summary{padding:4px 0}
.summary-row{flex-direction:row;gap:6px;flex-wrap:nowrap}
.summary-stats{gap:2px;flex:1}
......@@ -1975,23 +2012,30 @@
.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}
.segment{padding:8px 10px;font-size:12px}
.segment-secondary{font-size:11px;padding:6px 8px}
.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}
main[data-section="hero"] .nav-logo{top:16px;left:16px;height:56px}
.nav-menu-btn{top:16px;right:16px;width:38px;height:38px}
.mode-cards{gap:10px;margin-top:12px}
.mode-card{padding:14px;gap:8px;border-radius:14px}
.mode-card-icon svg{width:18px;height:18px}
.mode-card-title{font-size:14px}
.mode-card-desc{font-size:11px}
.mode-card-classifiers{gap:4px}
.clf-chip{padding:4px 8px;font-size:10px;gap:4px}
.clf-check{width:10px;height:10px}
.mode-pill{font-size:11px;padding:6px 10px;border-radius:8px}
.mode-card-radio{top:12px;right:12px}
.radio-dot{width:14px;height:14px}
.radio-dot::after{width:6px;height:6px}
.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}
.section-group{margin-top:12px}
.section-label{font-size:9px;margin-bottom:8px}
.section-label-goto{margin-top:12px}
.daily-card{padding:14px 16px;gap:10px;border-radius:12px}
.daily-dot{width:6px;height:6px}
.daily-text{font-size:12px}
.daily-card-title{font-size:13px}
.daily-card-text{font-size:11px}
.results-summary{padding:2px 0}
.summary-count{font-size:11px}
.summary-tag-gold{font-size:13px}
......