feat: Implementar ion-chips, bypass de pago y mejoras UI

- Implementar ion-chips para categorías y keywords en hero page
- Agregar bypass de pago en hire page para pruebas
- Mover progress bar en dashboard
- Corregir shared-components module (remover AccordionComponent eliminado)
- Corregir eventos Ionic (ionInput/ionChange)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/app/pages/hero/hero.page.ts

@@ -17,10 +17,11 @@ export class HeroPage implements OnInit {
   categories: any[] = [];
   categories_input: any[] = [];
   categories_rearranged: any[] = [];
-  keywords: any[] = [];
-  keywords_string: any[] = [];
-  keywords_text: string = '';
-  aux_categories: any[] = [];
+  filteredCategories: any[] = [];
+  categorySearchText: string = '';
+  showCategoryDropdown: boolean = false;
+  keywords: string[] = [];
+  keywordInput: string = '';
   myPosition: any = {};
   myAddress: string | null = null;
   myIntnumber: string | null = null;
@@ -42,23 +43,85 @@ export class HeroPage implements OnInit {
   ) { }
 
   ngOnInit() {
-    /*this.categories = ["carpintero","jardinero","abogado","administrador","agente inmobiliario","agente de seguros","albañil",
-    "arquitecto","asistente personal","becario","cerrajero","chef","chofer","contratista","contador","diseñador de interiores",
-    "cantante","diseñador grafico","edecan","electricista","estilista","servicios financieros","fontanero","fotografo","produccion de videos",
-    "hostess","lavado de tapicerias","aire acondicionado","almacenista","ayudante","azulejero","cerrajero automotriz","cortinas metalicas",
-    "electrico automotriz","entretenimiento","fisioterapeuta","grua","herrero","ingeniero civil","laminado automotriz","limpieza","limpieza del hogar",
-    "mantenimiento","mariachi","masajista","marmolero","mecanico","mercadotecnia","mesero","modelo","musico","niñera","pintor","pintura automotriz",
-    "plomero","programador","publicista","recepcionista","remodelacion","repartidor","reparacion de celulares","reparacion de electronicos","soldador",
-    "tabla roquero","tapicero","tecnico en gas","tuneame la nave","traductor","tutor","vendedor","veterinario","vidrio y aluminio","reparacion de computadoras",
-    "mantenimiento de camiones","consultor","capacitacion","maestro","barbero","agencia de colocacion","agencia de viajes","paseador de perros","banquete",
-    "almacenaje","impermeabilizacion","redes de internet"];*/
     this.ichambaService.getCategories()
       .subscribe( categories => {
         this.categories = categories;
-        this.aux_categories = categories;
+        this.filteredCategories = categories;
       })
   }
 
+  // ========== CATEGORÍAS CON CHIPS ==========
+  filterCategories(event: any) {
+    const searchTerm = (event.detail?.value || event.target?.value || '').toLowerCase();
+    this.categorySearchText = searchTerm;
+    if (searchTerm.length > 0) {
+      this.filteredCategories = this.categories.filter(cat =>
+        cat.toLowerCase().includes(searchTerm) && !this.categories_input.includes(cat)
+      );
+      this.showCategoryDropdown = true;
+    } else {
+      this.filteredCategories = this.categories.filter(cat => !this.categories_input.includes(cat));
+      this.showCategoryDropdown = false;
+    }
+  }
+
+  selectCategory(category: string) {
+    if (!this.categories_input.includes(category)) {
+      this.categories_input.push(category);
+    }
+    this.categorySearchText = '';
+    this.showCategoryDropdown = false;
+    this.filteredCategories = this.categories.filter(cat => !this.categories_input.includes(cat));
+  }
+
+  removeCategory(category: string) {
+    const index = this.categories_input.indexOf(category);
+    if (index > -1) {
+      this.categories_input.splice(index, 1);
+    }
+    this.filteredCategories = this.categories.filter(cat => !this.categories_input.includes(cat));
+  }
+
+  showCategoryList() {
+    this.filteredCategories = this.categories.filter(cat => !this.categories_input.includes(cat));
+    this.showCategoryDropdown = true;
+  }
+
+  hideCategoryList() {
+    setTimeout(() => {
+      this.showCategoryDropdown = false;
+    }, 200);
+  }
+
+  // ========== PALABRAS CLAVE CON CHIPS ==========
+  addKeyword(event?: any) {
+    const value = this.keywordInput?.trim();
+    if (value && value.length > 0) {
+      // Separar por comas si hay varias palabras
+      const newKeywords = value.split(',').map((k: string) => k.trim()).filter((k: string) => k.length > 0);
+      newKeywords.forEach((keyword: string) => {
+        if (!this.keywords.includes(keyword)) {
+          this.keywords.push(keyword);
+        }
+      });
+      this.keywordInput = '';
+    }
+  }
+
+  onKeywordKeydown(event: KeyboardEvent) {
+    if (event.key === 'Enter' || event.key === ',') {
+      event.preventDefault();
+      this.addKeyword();
+    }
+  }
+
+  removeKeyword(keyword: string) {
+    const index = this.keywords.indexOf(keyword);
+    if (index > -1) {
+      this.keywords.splice(index, 1);
+    }
+  }
+
   dismissHero() {
     this.navCtrl.navigateRoot('/landing');
   }
@@ -103,22 +166,18 @@ export class HeroPage implements OnInit {
   }
 
   addHero(){
-    // categories_input is now an array of values directly from ion-select
-    this.categories_rearranged = this.categories_input.slice();
+    // Preparar categorías y keywords
+    const categoriesString = this.categories_input.join(',');
+    const keywordsString = this.keywords.length > 0 ? this.keywords.join(', ') : null;
 
-    // keywords_text is now a string, split by comma
-    if (this.keywords_text && this.keywords_text.trim().length > 0) {
-      this.keywords_string = this.keywords_text.split(',').map(k => k.trim()).filter(k => k.length > 0);
-    }
-
-    if (this.name && this.categories_input && this.myAddress && this.myPosition.latitude && this.myPosition.longitude && this.selectedReference){
+    if (this.name && this.categories_input.length > 0 && this.myAddress && this.myPosition.latitude && this.myPosition.longitude && this.selectedReference){
       if (this.selectedReference == 5 && this.reference) {
         this.loadingCtrl.create().then((overlay) => {
           this.loading = overlay;
           this.loading.present();
         });
 
-        this.ichambaService.addHero(this.name, this.categories_rearranged.join(','), (this.keywords_string.join(', ') == "" ? null : this.keywords_string.join(', ')), this.myAddress, this.myPosition.latitude, this.myPosition.longitude, this.selectedReference, this.reference).subscribe(
+        this.ichambaService.addHero(this.name, categoriesString, keywordsString, this.myAddress, this.myPosition.latitude, this.myPosition.longitude, this.selectedReference, this.reference).subscribe(
           data => {
             this.loading.dismiss();
               this.alertService.presentToast(data['message']);
@@ -133,7 +192,7 @@ export class HeroPage implements OnInit {
           this.loading.present();
         });
 
-        this.ichambaService.addHero(this.name, this.categories_rearranged.join(','), (this.keywords_string.join(', ') == "" ? null : this.keywords_string.join(', ')), this.myAddress, this.myPosition.latitude, this.myPosition.longitude, this.selectedReference, this.reference).subscribe(
+        this.ichambaService.addHero(this.name, categoriesString, keywordsString, this.myAddress, this.myPosition.latitude, this.myPosition.longitude, this.selectedReference, this.reference).subscribe(
           data => {
             this.loading.dismiss();
               this.alertService.presentToast(data['message']);