fix(search): mover ícone de busca para fora do input e estilizar limpeza

susconecta/components/features/general/event-manager.tsx

@@ -385,23 +385,43 @@ export function EventManager({
 
       <div className="flex flex-col gap-2">
         <div className="relative flex-1">
-          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <div className="flex items-center">
+            {/* Lupa minimalista à esquerda (somente ícone) */}
+            <button
+              type="button"
+              aria-label="Buscar"
+              className="flex items-center justify-center h-10 w-10 p-0 text-muted-foreground bg-transparent border-0"
+              onClick={() => {
+                const el = document.querySelector<HTMLInputElement>('input[placeholder="Buscar eventos..."]')
+                el?.focus()
+              }}
+            >
+              <Search className="h-5 w-5" />
+            </button>
+
+            {/* Input central com altura consistente e foco visível */}
             <Input
               placeholder="Buscar eventos..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-            className="pl-9"
+              className={cn(
+                "flex-1 h-10 px-3 border border-border focus:ring-2 focus:ring-primary/20 outline-none",
+                searchQuery ? "rounded-l-md rounded-r-none" : "rounded-md"
+              )}
             />
-          {searchQuery && (
+
-            <Button
+            {/* Botão limpar discreto à direita (aparece somente com query) */}
-              variant="ghost"
+            {searchQuery ? (
-              size="icon"
+              <button
-              className="absolute right-1 top-1/2 h-7 w-7 -translate-y-1/2"
+                type="button"
+                aria-label="Limpar busca"
+                className="flex items-center justify-center h-10 w-10 p-0 text-muted-foreground bg-transparent border-0"
                 onClick={() => setSearchQuery("")}
               >
-              <X className="h-4 w-4" />
+                <X className="h-5 w-5" />
-            </Button>
+              </button>
-          )}
+            ) : null}
+          </div>
         </div>
 
         {/* Mobile: Horizontal scroll with full-length buttons */}