feat(store-header): enhance search functionality and improve mobile layout with new styles

src/app/core/layout/store-layout/store-header/immersive-store-header.component.html

@@ -31,7 +31,13 @@
 
       <div class="immersive-header__actions">
         @if (displaySearchBar()) {
-          <form class="immersive-header__search" role="search" (submit)="submitSearch($event)">
+          <form
+            id="immersive-search"
+            class="immersive-header__search"
+            [hidden]="!showHero() && !isSearchOpen()"
+            role="search"
+            (submit)="submitSearch($event)"
+          >
             <label class="visually-hidden" for="immersive-search-input">Buscar productos</label>
             <app-input
               id="immersive-search-input"
@@ -62,6 +68,20 @@
           }
         }
 
+        @if (!showHero() && displaySearchBar()) {
+          <button
+            #searchToggle
+            type="button"
+            class="immersive-header__search-toggle"
+            aria-label="Buscar productos"
+            aria-controls="immersive-search"
+            [attr.aria-expanded]="isSearchOpen()"
+            (click)="toggleSearch()"
+          >
+            <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
+          </button>
+        }
+
         @if (displayCart()) {
           <app-cart-icon
             [quantity]="cartDisabled() ? null : cartQuantity()"
@@ -75,19 +95,25 @@
 
         <div class="immersive-header__account">
           <app-icon-button
-            variant="user"
-            ariaLabel="Mi cuenta"
+            [variant]="showHero() ? 'user' : 'bars'"
+            [ariaLabel]="showHero() ? 'Mi cuenta' : 'Abrir menú'"
             ariaControls="immersive-user-dropdown"
             [ariaExpanded]="isUserDropdownOpen()"
             (clicked)="toggleUserDropdown()"
           />
-          @if (isUserDropdownOpen()) {
+          @if (isUserDropdownOpen() && isAuthenticated()) {
             <app-user-dropdown
               id="immersive-user-dropdown"
               [user]="user()"
               [accountNavigationMenus]="accountNavigationMenus()"
               (logoutClick)="onLogoutClick()"
             />
+          } @else if (isUserDropdownOpen()) {
+            <div id="immersive-user-dropdown" class="immersive-header__guest-menu">
+              <button type="button" (click)="isUserDropdownOpen.set(false); loginClick.emit()">
+                Iniciar sesión
+              </button>
+            </div>
           }
         </div>
       </div>
@@ -118,7 +144,6 @@
           ariaLabel="Imágenes del evento"
         />
       }
-
     }
 
     <ng-content />

src/app/core/layout/store-layout/store-header/immersive-store-header.component.scss

@@ -159,10 +159,104 @@
 }
 
 .immersive-header--compact {
-  min-height: 0;
-  padding-bottom: 1.5rem;
+  min-height: 115px;
   color: #666666;
   background: transparent;
+
+  .immersive-header__content {
+    padding: 35px 0 36px;
+  }
+
+  .immersive-header__nav {
+    flex-wrap: nowrap;
+    gap: 0.75rem;
+    padding-inline: 8vw !important;
+    min-height: 44px;
+  }
+
+  .immersive-header__brand img {
+    width: clamp(92px, 24vw, 145px);
+  }
+
+  .immersive-header__actions {
+    flex: 0 1 auto;
+    gap: 0.375rem;
+  }
+
+  .immersive-header__search {
+    position: absolute;
+    top: calc(100% + 0.5rem);
+    right: 8vw;
+    width: min(320px, 84vw);
+    padding: 0.75rem;
+    border-radius: 6px;
+    background: #f5f5f5;
+    box-shadow: 0 4px 16px #0002;
+  }
+
+  .immersive-header__search-error {
+    position: static;
+    display: block;
+    margin-top: 0.25rem;
+  }
+}
+
+.immersive-header__search-toggle {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 44px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: #888;
+  font-size: 20px;
+
+  &:focus-visible {
+    outline: 2px solid var(--tenant-primary);
+    outline-offset: 2px;
+  }
+}
+
+.immersive-header__guest-menu {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  right: 0;
+  min-width: 180px;
+  padding: 0.5rem;
+  border-radius: 6px;
+  background: #fff;
+  box-shadow: 0 4px 16px #0002;
+
+  button {
+    width: 100%;
+    padding: 0.75rem;
+    border: 0;
+    background: transparent;
+    color: #666;
+    text-align: left;
+  }
+}
+
+:host ::ng-deep .immersive-header--compact {
+  .immersive-header__tickets {
+    flex: none;
+    width: auto;
+
+    .btn {
+      min-width: 120px;
+      white-space: nowrap;
+    }
+  }
+
+  .immersive-header__account .icon-btn {
+    width: 32px;
+    height: 44px;
+    color: #888;
+  }
 }
 .immersive-header--compact .immersive-header__backdrop {
   display: none;
@@ -170,7 +264,18 @@
 
 :host ::ng-deep .immersive-header--compact .immersive-header__actions .icon-btn,
 :host ::ng-deep .immersive-header--compact .immersive-header__actions .cart-icon {
-  color: #666666;
+  color: #888;
+}
+
+@media (max-width: 359.98px) {
+  .immersive-header--compact .immersive-header__nav {
+    padding-inline: 1rem !important;
+    gap: 0.375rem;
+  }
+
+  .immersive-header--compact .immersive-header__actions {
+    gap: 0.125rem;
+  }
 }
 
 @media (max-width: 600px) {

src/app/core/layout/store-layout/store-header/immersive-store-header.component.ts

@@ -7,6 +7,8 @@ import {
   input,
   output,
   signal,
+  afterRenderEffect,
+  viewChild,
 } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { AuthUser } from '../../../services/auth/auth.interfaces';
@@ -59,6 +61,20 @@ export class ImmersiveStoreHeaderComponent {
   protected searchTerm = '';
   protected readonly showSearchError = signal(false);
   protected readonly isUserDropdownOpen = signal(false);
+  protected readonly isSearchOpen = signal(false);
+  private readonly searchInput = viewChild(InputComponent);
+  private readonly searchToggle = viewChild<ElementRef<HTMLButtonElement>>('searchToggle');
+
+  constructor() {
+    afterRenderEffect(() => {
+      if (this.isSearchOpen()) this.searchInput()?.focus();
+    });
+  }
+
+  protected toggleSearch(): void {
+    this.isUserDropdownOpen.set(false);
+    this.isSearchOpen.update((open) => !open);
+  }
   protected readonly checkoutRemainingTime = computed(() => {
     const seconds = this.checkoutRemainingSeconds();
     if (seconds === null) return null;
@@ -76,11 +92,13 @@ export class ImmersiveStoreHeaderComponent {
       return;
     }
     this.showSearchError.set(false);
+    this.isSearchOpen.set(false);
     this.searchSubmit.emit(term);
   }
 
   protected toggleUserDropdown(): void {
-    if (!this.isAuthenticated()) {
+    this.isSearchOpen.set(false);
+    if (this.showHero() && !this.isAuthenticated()) {
       this.loginClick.emit();
       return;
     }
@@ -100,11 +118,14 @@ export class ImmersiveStoreHeaderComponent {
   protected onDocumentClick(event: MouseEvent): void {
     if (event.target instanceof Node && !this.host.nativeElement.contains(event.target)) {
       this.isUserDropdownOpen.set(false);
+      this.isSearchOpen.set(false);
     }
   }
 
   @HostListener('document:keydown.escape')
   protected onEscapeKey(): void {
+    if (this.isSearchOpen()) this.searchToggle()?.nativeElement.focus();
+    this.isSearchOpen.set(false);
     this.isUserDropdownOpen.set(false);
   }
 }

src/app/core/layout/store-layout/store-header/store-header.component.html

@@ -21,7 +21,7 @@
       (logoutClick)="logoutClick.emit()"
       (searchSubmit)="searchSubmit.emit($event)"
     >
-      @if (displayCategories() && categories().length) {
+      @if (showHero() && displayCategories() && categories().length) {
         <nav class="immersive-categories" aria-label="Categorías">
           <app-horizontal-carousel
             [items]="categoryItems()"

src/app/core/layout/store-layout/store-header/store-header.component.scss

@@ -13,25 +13,6 @@ app-immersive-store-header {
   background-size: cover;
 }
 
-:host(.immersive-shell--compact) .immersive-categories {
-  margin-top: 0.75rem;
-  border: 0;
-  box-shadow: none;
-  background: transparent;
-}
-
-:host(.immersive-shell--compact) .immersive-categories::after {
-  content: '';
-  position: absolute;
-  z-index: 1;
-  right: 0;
-  bottom: -1px;
-  left: 0;
-  height: 2px;
-  background: #f5f5f5;
-  pointer-events: none;
-}
-
 .immersive-categories {
   position: relative;
   z-index: 1;

src/app/features/store/pages/event-detail-page/event-detail-page.component.scss

@@ -38,6 +38,11 @@
   .event-detail__main { margin-top: 2rem; }
   .event-detail__description, .event-detail__social { margin-top: 1.5rem; }
   .event-detail__header { min-height: 0; margin-bottom: 2rem; }
+  .event-detail__header h1 { font-size: 20px; }
+  .event-detail__product h3 { font-size: 13px; }
+  .event-detail__price { font-size: 14px; }
+  .event-detail__total { font-size: 13px; }
+  .event-detail__total strong { font-size: 20px; }
   .event-detail__buttons { flex-wrap: wrap; }
   .event-detail__buttons app-button { flex: 1 1 100%; }
 }

src/app/shared/components/button/button.component.scss

@@ -10,6 +10,12 @@
   width: 100%;
 }
 
+@media (max-width: 767.98px) {
+  .btn {
+    font-size: 11px;
+  }
+}
+
 .btn-primary,
 .btn-secondary,
 .btn-danger {

src/app/shared/components/counter-to/counter-to.component.scss

@@ -1,5 +1,5 @@
 :host { display: block; margin-top: 9px; }
-.counter-to { min-height: 30px; padding-block: 12px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; text-align: center; border: 1px solid #d7d9db; border-radius: 3px; }
+.counter-to { min-height: 30px; padding-block: 12px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; text-align: center; border: 1px solid #a0a0a0; border-radius: 3px; }
 .counter-to > div + div { border-left: 1px solid #e6e7e8; }
 .counter-to strong { display: block; color: #666666; font-size: 16px; font-weight: 700; line-height: 1.1; }
 .counter-to small { display: block; margin-top: 1px; color: #666666; font-size: 11px; font-weight: 400; letter-spacing: .02em; }