From 231dd53ed50dcc49cdfaeaa474e3b9bf517024a3 Mon Sep 17 00:00:00 2001
From: aserrador <alejandro.ayala@onecluster.org>
Date: Sat, 24 Jan 2026 17:39:21 -0500
Subject: [PATCH] feat: Styling filter bar products

---
 src/pages/catalog/Catalog.module.css | 67 +++++++++++++++++++++++++---
 src/pages/catalog/Catalog.tsx        | 14 +++---
 2 files changed, 70 insertions(+), 11 deletions(-)

diff --git a/src/pages/catalog/Catalog.module.css b/src/pages/catalog/Catalog.module.css
index 4cc0c84..67fbbfa 100644
--- a/src/pages/catalog/Catalog.module.css
+++ b/src/pages/catalog/Catalog.module.css
@@ -36,12 +36,67 @@
     box-shadow: 0 36px 64px rgba(0, 0, 0, 0.15);
 }
 
+.filters {
+    background: rgba(255,255,255,1);
+    border: 2px solid #e0e0e0;
+    border-radius: 16px;
+    padding: 1rem;
+    box-shadow: 0 16px 32px rgba(0,0,0,0.06);
+    position: sticky;
+    top: 2rem;
+    z-index: 20;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.filters:hover {
+    transform: translateY(-8px) scale(1.02);
+    box-shadow: 0 36px 64px rgba(0, 0, 0, 0.15);
+}
+
+.search_input {
+    width: 100%;
+    font-size: 1rem;
+    margin: 0;
+    padding: 0.75rem 1.5rem;
+    border: 2px solid #e0e0e0;
+    border-radius: 25px;
+    outline: none;
+    transition: box-shadow 0.2s ease, transform 0.12s ease;
+    background: rgba(255, 255, 255, 0.95);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+}
+
+.search_input:focus {
+    border-color: #e0e0e0;
+    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.08);
+    transform: translateY(-2px);
+}
+
+.search_input::placeholder {
+    color: #999;
+    font-style: italic;
+}
+
+.search_icon {
+    position: absolute;
+    right: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #999;
+    pointer-events: none;
+}
+
 /* Responsive: en pantallas estrechas se apilan */
 @media (max-width: 768px) {
-  .layout {
-    flex-direction: column;
-  }
-  .order {
-    position: static;   /* quitamos sticky en móviles */
-  }
+    .layout {
+        flex-direction: column;
+    }
+    .order {
+        position: static;   /* quitamos sticky en móviles */
+    }
+    .search_input {
+        width: 80%;
+        max-width: none;
+    }
 }
diff --git a/src/pages/catalog/Catalog.tsx b/src/pages/catalog/Catalog.tsx
index 8517442..dbf1a16 100644
--- a/src/pages/catalog/Catalog.tsx
+++ b/src/pages/catalog/Catalog.tsx
@@ -47,15 +47,19 @@ const Catalog = () => {
   return (
     <div className={styles.layout}>
       <section className={styles.catalog}>
-        <form>
+        <div className={styles.filters}>
+          <svg className={styles.search_icon} width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <circle cx="11" cy="11" r="8"></circle>
+            <path d="m21 21-4.35-4.35"></path>
+          </svg>
           <input
+            className={styles.search_input}
             type="text"
             value={filterText}
-            placeholder="Buscar"
-            onChange={
-              (event) => setFilterText(event.target.value)}
+            placeholder="Buscar productos..."
+            onChange={(event) => setFilterText(event.target.value)}
             id="searchbox"/>
-        </form>
+        </div>
         <ProductCards products={filteredProducts} addProductLine={addProductLine}/>
       </section>
       <aside className={styles.order}>