test done

Rafael Lopez
Commit 1c926852d774431923f4679ed6040d1e41c4f9f7 1c926852 1 parent ab3a7e59
Showing 6 changed files with 94 additions and 31 deletions
.gitignore
src/lib/components/ui/Navbar.svelte
src/routes/+page.svelte
src/routes/clasificadores/objeto-gasto/+page.svelte
src/routes/test/+page.svelte
static/muetra_base.csv
--- a/.gitignore
View file @1c92685
+++ b/.gitignore
View file @1c92685
@@ -27,3 +27,7 @@ claude.md
 # Docs internos
 static/ESTILOS_*.md
+.Rproj.user
+
+# Data
+/data
--- a/src/lib/components/ui/Navbar.svelte
View file @1c92685
+++ b/src/lib/components/ui/Navbar.svelte
View file @1c92685
@@ -32,10 +32,7 @@
 <div class="fixed top-4 right-4 z-[110] md:hidden">
   <button
     onclick={onOpenDrawer}
-    class="p-2 rounded-full transition-all flex-shrink-0"
+    class="nav-icon p-2 rounded-full transition-all flex-shrink-0"
-    style="background-color: transparent; color: var(--theme-texto); cursor: pointer;"
-    onmouseenter={(e) => e.currentTarget.style.color = 'var(--theme-titulo)'}
-    onmouseleave={(e) => e.currentTarget.style.color = 'var(--theme-texto)'}
     aria-label="Abrir menú"
   >
     <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
@@ -52,10 +49,7 @@
     <div class="relative group/home">
       <a
         href="/"
-        class="p-2 rounded-full transition-all block"
+        class="nav-icon p-2 rounded-full transition-all block"
-        style="background-color: transparent; color: var(--theme-texto);"
-        onmouseenter={(e) => e.currentTarget.style.color = 'var(--theme-titulo)'}
-        onmouseleave={(e) => e.currentTarget.style.color = 'var(--theme-texto)'}
       >
         <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
           <rect x="2" y="2" width="7" height="7" rx="1.5"/>
@@ -75,10 +69,7 @@
     <div class="relative group/theme">
       <button
         onclick={toggleTheme}
-        class="p-2 rounded-full transition-all"
+        class="nav-icon p-2 rounded-full transition-all cursor-pointer"
-        style="background-color: transparent; color: var(--theme-texto); cursor: pointer;"
-        onmouseenter={(e) => e.currentTarget.style.color = 'var(--theme-titulo)'}
-        onmouseleave={(e) => e.currentTarget.style.color = 'var(--theme-texto)'}
         aria-label={isDark ? 'Cambiar a modo claro' : 'Cambiar a modo oscuro'}
       >
         {#if isDark}
@@ -104,10 +95,7 @@
     <div class="relative group/menu">
       <button
         onclick={onOpenDrawer}
-        class="p-2 rounded-full transition-all"
+        class="nav-icon p-2 rounded-full transition-all cursor-pointer"
-        style="background-color: transparent; color: var(--theme-texto); cursor: pointer;"
-        onmouseenter={(e) => e.currentTarget.style.color = 'var(--theme-titulo)'}
-        onmouseleave={(e) => e.currentTarget.style.color = 'var(--theme-texto)'}
         aria-label="Abrir menú"
       >
         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
@@ -123,3 +111,23 @@
   </div>
 </div>
+
+<style>
+  /* Iconos del navbar */
+  .nav-icon {
+    background-color: transparent;
+    color: #8A8578;
+    transition: color 0.2s ease;
+  }
+  .nav-icon:hover {
+    color: #F5F0E8;
+  }
+
+  /* Modo claro */
+  :global(html:not(.dark)) .nav-icon {
+    color: #333333;
+  }
+  :global(html:not(.dark)) .nav-icon:hover {
+    color: #1A1A18;
+  }
+</style>
--- a/src/routes/+page.svelte
View file @1c92685
+++ b/src/routes/+page.svelte
View file @1c92685
@@ -202,15 +202,12 @@
     {/if}
     <!-- Controles: Theme Toggle + Menú -->
-    <div class="flex items-center gap-1">
+    <div class="header-controls">
       <!-- Theme Toggle (solo desktop) -->
       <div class="relative group/theme hidden md:block">
         <button
           onclick={toggleTheme}
-          class="p-2 rounded-full transition-all"
+          class="nav-icon p-2 rounded-full transition-all"
-          style="background-color: transparent; color: var(--theme-texto); cursor: pointer;"
-          onmouseenter={(e) => e.currentTarget.style.color = 'var(--theme-titulo)'}
-          onmouseleave={(e) => e.currentTarget.style.color = 'var(--theme-texto)'}
           aria-label={isDarkMode ? 'Cambiar a modo claro' : 'Cambiar a modo oscuro'}
         >
           {#if isDarkMode}
@@ -234,10 +231,7 @@
       <div class="relative group/menu">
         <button
           onclick={openDrawer}
-          class="p-2 rounded-full transition-all"
+          class="nav-icon p-2 rounded-full transition-all"
-          style="background-color: transparent; color: var(--theme-texto); cursor: pointer;"
-          onmouseenter={(e) => e.currentTarget.style.color = 'var(--theme-titulo)'}
-          onmouseleave={(e) => e.currentTarget.style.color = 'var(--theme-texto)'}
           aria-label="Abrir menú"
         >
           <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
@@ -465,6 +459,32 @@
   }
   .mefp-logo:hover { opacity: 1; }
+  /* Header controls */
+  .header-controls {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  /* Nav icon styling - matching Navbar */
+  .nav-icon {
+    background-color: transparent;
+    color: #8A8578;
+    cursor: pointer;
+    transition: color 0.2s ease;
+  }
+  .nav-icon:hover {
+    color: #F5F0E8;
+  }
+
+  /* Light mode */
+  :global(html:not(.dark)) .nav-icon {
+    color: #333333;
+  }
+  :global(html:not(.dark)) .nav-icon:hover {
+    color: #1A1A18;
+  }
+
   /* Fade in animation */
   .fade-in {
     opacity: 0;
@@ -617,13 +637,33 @@
   }
   .search-bar {
     display: flex; align-items: center;
-    background: var(--theme-surface); border: 1px solid var(--theme-borde);
+    background: transparent;
+    border: none;
+    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
     border-radius: 12px; padding: 6px 24px;
     transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
   }
-  .search-focused { background: var(--theme-fill); }
+  .search-bar:hover {
+    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
+  }
+  .search-bar.search-focused,
+  .search-bar.search-focused:hover {
+    box-shadow: inset 0 0 0 1px var(--theme-accent);
+  }
   .search-has-results { border-radius: 12px 12px 0 0; }
+  /* Light mode search bar */
+  :global(html:not(.dark)) .search-bar {
+    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
+  }
+  :global(html:not(.dark)) .search-bar:hover {
+    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
+  }
+  :global(html:not(.dark)) .search-bar.search-focused,
+  :global(html:not(.dark)) .search-bar.search-focused:hover {
+    box-shadow: inset 0 0 0 1px var(--theme-accent);
+  }
+
   .search-bar input {
     flex: 1; background: transparent; border: none; outline: none;
     color: var(--theme-titulo); font-size: 16px; font-family: 'DM Sans', sans-serif;
@@ -643,10 +683,14 @@
   .search-loading {
     position: absolute; top: 100%; left: 0; right: 0;
-    background: var(--theme-surface); border: 1px solid var(--theme-borde); border-top: none;
+    background: var(--theme-body);
+    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
     border-radius: 0 0 14px 14px; padding: 12px 24px;
     font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--theme-texto);
   }
+  :global(html:not(.dark)) .search-loading {
+    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
+  }
   .search-error {
     margin-top: 8px; font-family: 'DM Sans', sans-serif;
@@ -656,10 +700,14 @@
   /* Suggestions / Results */
   .suggestions {
     position: absolute; top: 100%; left: 0; right: 0;
-    background: var(--theme-surface); border: 1px solid var(--theme-borde); border-top: none;
+    background: var(--theme-body);
+    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
     border-radius: 0 0 14px 14px; overflow: hidden; z-index: 100;
     max-height: 320px; overflow-y: auto;
   }
+  :global(html:not(.dark)) .suggestions {
+    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
+  }
   .suggestions.no-results { padding: 16px 24px; }
   .no-results-text {
     font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--theme-texto);
@@ -670,8 +718,11 @@
     padding: 12px 24px; display: flex; justify-content: space-between;
     align-items: center; cursor: pointer; transition: background 0.2s;
   }
-  .suggestion-item:hover, .suggestion-selected { background: var(--theme-fill); }
+  .suggestion-item:hover, .suggestion-selected { background: rgba(255,255,255,0.05); }
-  .suggestion-border { border-top: 1px solid var(--theme-borde); }
+  .suggestion-border { border-top: 1px solid rgba(255,255,255,0.06); }
+  :global(html:not(.dark)) .suggestion-item:hover,
+  :global(html:not(.dark)) .suggestion-selected { background: rgba(0,0,0,0.03); }
+  :global(html:not(.dark)) .suggestion-border { border-top: 1px solid rgba(0,0,0,0.06); }
   .suggestion-main { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
   .suggestion-label {
--- a/src/routes/clasificadores/objeto-gasto/+page.svelte
View file @1c92685
+++ b/src/routes/clasificadores/objeto-gasto/+page.svelte
View file @1c92685
--- a/src/routes/test/+page.svelte
View file @1c92685
+++ b/src/routes/test/+page.svelte
View file @1c92685
--- a/static/muetra_base.csv 0 → 100644
View file @1c92685
+++ b/static/muetra_base.csv 0 → 100644
View file @1c92685